@charset "UTF-8";
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Shared design tokens, helpers, and design-system utilities */
:root,
:root[data-theme=dark] {
  --shell-header-height: 68px;
  --font-sans: IBM Plex Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --font-mono: IBM Plex Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Consolas, monospace;
  --surface: var(--surface-secondary);
  --surface-alt: var(--surface-default);
  --surface-muted: var(--surface-muted-strong);
  --surface-light: #fff;
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --focus-ring-color: rgba(109, 180, 245, 0.32);
  --page-bg: #0a0d14;
  --page-bg-alt: #0d1119;
  --surface-default: #11151e;
  --surface-secondary: #11151e;
  --surface-elevated: #161b27;
  --surface-overlay: #1c2230;
  --surface-muted-strong: rgba(168, 178, 200, 0.1);
  --surface-subtle: rgba(168, 178, 200, 0.1);
  --surface-scrim: rgba(2, 6, 23, 0.62);
  --modal-scrim: rgba(2, 6, 23, 0.72);
  --text-primary: #e7ebf3;
  --text-secondary: rgba(231, 235, 243, 0.72);
  --text-muted: rgba(231, 235, 243, 0.5);
  --text-on-brand: #0a1530;
  --border-default: rgba(168, 178, 200, 0.1);
  --border-strong: rgba(168, 178, 200, 0.18);
  --border-soft: rgba(168, 178, 200, 0.28);
  --input-bg: rgba(0, 0, 0, 0.2);
  --input-border: rgba(168, 178, 200, 0.18);
  --dropdown-bg: #1c2230;
  --modal-bg: #161b27;
  --modal-border: rgba(168, 178, 200, 0.18);
  --modal-close-hover-bg: rgba(168, 178, 200, 0.1);
  --table-border-color: rgba(168, 178, 200, 0.1);
  --table-header-bg: #11151e;
  --table-header-color: rgba(231, 235, 243, 0.5);
  --table-row-hover-bg: rgba(168, 178, 200, 0.1);
  --table-row-selected-bg: rgba(109, 180, 245, 0.14);
  --table-row-selected-hover-bg: rgba(109, 180, 245, 0.18);
  --action-btn-hover-bg: rgba(168, 178, 200, 0.1);
  --button-subtle-bg: rgba(168, 178, 200, 0.1);
  --button-subtle-hover-bg: rgba(168, 178, 200, 0.18);
  --focus-ring: rgba(109, 180, 245, 0.32);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 6px 16px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 14px 36px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 28px 64px rgba(0, 0, 0, 0.46);
  --shadow-xl: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 28px 64px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 0 32px rgba(109, 180, 245, 0.22);
  --color-primary: #6db4f5;
  --color-primary-strong: #4f9ee8;
  --color-primary-bg: rgba(109, 180, 245, 0.14);
  --color-primary-border: rgba(109, 180, 245, 0.32);
  --color-primary-contrast: #0a1530;
  --color-agent: #e8b574;
  --color-agent-strong: #d49a52;
  --color-agent-bg: rgba(232, 181, 116, 0.13);
  --color-agent-border: rgba(232, 181, 116, 0.3);
  --color-agent-glow: rgba(232, 181, 116, 0.22);
  --color-agent-contrast: #2a1c08;
  --color-success: #5fd49a;
  --color-success-bg: rgba(95, 212, 154, 0.13);
  --color-success-border: rgba(95, 212, 154, 0.3);
  --color-warning: #f0b95a;
  --color-warning-bg: rgba(240, 185, 90, 0.13);
  --color-warning-border: rgba(240, 185, 90, 0.3);
  --color-danger: #ef7a8c;
  --color-danger-bg: rgba(239, 122, 140, 0.13);
  --color-danger-border: rgba(239, 122, 140, 0.32);
  --color-info: #7cc4ff;
  --color-info-bg: rgba(124, 196, 255, 0.13);
  --color-info-border: rgba(124, 196, 255, 0.3);
  --color-muted: rgba(231, 235, 243, 0.72);
  --color-muted-bg: rgba(168, 178, 200, 0.1);
  --color-muted-border: rgba(168, 178, 200, 0.22);
  --color-pill-muted: rgba(231, 235, 243, 0.72);
  --color-pill-muted-bg: rgba(168, 178, 200, 0.1);
  --color-pill-muted-border: rgba(168, 178, 200, 0.22);
  --bg: var(--page-bg);
  --bg-2: var(--page-bg-alt);
  --surface-1: var(--surface-default);
  --surface-2: var(--surface-elevated);
  --surface-3: var(--surface-overlay);
  --surface-inset: var(--input-bg);
  --line: var(--border-default);
  --line-strong: var(--border-strong);
  --line-vivid: var(--border-soft);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --text-4: color-mix(in srgb, var(--text-muted) 70%, transparent);
  --text-on-brand: var(--color-primary-contrast);
  --text-on-agent: var(--color-agent-contrast);
  --brand: var(--color-primary);
  --brand-strong: var(--color-primary-strong);
  --brand-soft: var(--color-primary-bg);
  --brand-line: var(--color-primary-border);
  --brand-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --agent: var(--color-agent);
  --agent-strong: var(--color-agent-strong);
  --agent-soft: var(--color-agent-bg);
  --agent-line: var(--color-agent-border);
  --agent-glow: var(--color-agent-glow);
  --ok: var(--color-success);
  --ok-soft: var(--color-success-bg);
  --ok-line: var(--color-success-border);
  --warn: var(--color-warning);
  --warn-soft: var(--color-warning-bg);
  --warn-line: var(--color-warning-border);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-bg);
  --danger-line: var(--color-danger-border);
  --info: var(--color-info);
  --info-soft: var(--color-info-bg);
  --info-line: var(--color-info-border);
  --muted-soft: var(--color-muted-bg);
  --muted-line: var(--color-muted-border);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  --xw-focus-ring: var(--focus-ring);
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.48;
  --lh-relaxed: 1.65;
  --tracking-eyebrow: 0.1em;
  --tracking-snug: 0.01em;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;
  --row-h: 36px;
  --row-h-sm: 30px;
  --ctrl-h: 34px;
  --ctrl-h-sm: 28px;
  --ctrl-px: 12px;
  --card-pad: 20px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 56px;
  --substrip-h: 34px;
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}

:root:lang(zh),
:root:lang(zh-CN),
:root:lang(zh-Hans),
:root:lang(zh-Hans-CN) {
  --font-sans: Noto Sans CJK SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Heiti SC, Segoe UI, sans-serif;
}

:root[data-theme=light] {
  --agent: #b87825;
  --agent-strong: #9c6418;
  --agent-soft: rgb(184 120 37 / 10%);
  --agent-line: rgb(184 120 37 / 28%);
  --agent-glow: rgb(184 120 37 / 18%);
  --text-on-agent: #2a1c08;
  --surface: var(--surface-secondary);
  --surface-alt: var(--surface-default);
  --surface-muted: var(--surface-muted-strong);
  --surface-light: #fff;
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --focus-ring-color: rgba(43, 111, 208, 0.26);
  --page-bg: #f3f4f7;
  --page-bg-alt: #e8ebf1;
  --surface-default: #fff;
  --surface-secondary: #fff;
  --surface-elevated: #fff;
  --surface-overlay: #fff;
  --surface-muted-strong: rgba(15, 18, 28, 0.06);
  --surface-subtle: rgba(15, 18, 28, 0.06);
  --surface-scrim: rgba(15, 18, 28, 0.38);
  --modal-scrim: rgba(15, 18, 28, 0.54);
  --text-primary: #0f121c;
  --text-secondary: rgba(15, 18, 28, 0.66);
  --text-muted: rgba(15, 18, 28, 0.46);
  --text-on-brand: #fff;
  --border-default: rgba(15, 18, 28, 0.08);
  --border-strong: rgba(15, 18, 28, 0.14);
  --border-soft: rgba(15, 18, 28, 0.22);
  --input-bg: rgba(15, 18, 28, 0.04);
  --input-border: rgba(15, 18, 28, 0.14);
  --dropdown-bg: rgba(255, 255, 255, 0.98);
  --modal-bg: #fff;
  --modal-border: rgba(15, 18, 28, 0.14);
  --modal-close-hover-bg: rgba(15, 18, 28, 0.06);
  --table-border-color: rgba(15, 18, 28, 0.08);
  --table-header-bg: #fff;
  --table-header-color: rgba(15, 18, 28, 0.46);
  --table-row-hover-bg: rgba(15, 18, 28, 0.06);
  --table-row-selected-bg: rgba(43, 111, 208, 0.1);
  --table-row-selected-hover-bg: rgba(43, 111, 208, 0.14);
  --action-btn-hover-bg: rgba(15, 18, 28, 0.06);
  --button-subtle-bg: rgba(15, 18, 28, 0.06);
  --button-subtle-hover-bg: rgba(15, 18, 28, 0.1);
  --focus-ring: rgba(43, 111, 208, 0.26);
  --shadow-sm: 0 1px 2px rgba(15, 18, 28, 0.04), 0 4px 12px rgba(15, 18, 28, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 18, 28, 0.05), 0 12px 28px rgba(15, 18, 28, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
  --shadow-xl: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
  --shadow-glow: 0 0 26px rgba(43, 111, 208, 0.2);
  --color-primary: #2b6fd0;
  --color-primary-strong: #1d5cb9;
  --color-primary-bg: rgba(43, 111, 208, 0.1);
  --color-primary-border: rgba(43, 111, 208, 0.26);
  --color-primary-contrast: #fff;
  --color-agent: #b87825;
  --color-agent-strong: #9c6418;
  --color-agent-bg: rgba(184, 120, 37, 0.1);
  --color-agent-border: rgba(184, 120, 37, 0.28);
  --color-agent-glow: rgba(184, 120, 37, 0.18);
  --color-agent-contrast: #2a1c08;
  --color-success: #198754;
  --color-success-bg: rgba(25, 135, 84, 0.1);
  --color-success-border: rgba(25, 135, 84, 0.26);
  --color-warning: #b66200;
  --color-warning-bg: rgba(182, 98, 0, 0.1);
  --color-warning-border: rgba(182, 98, 0, 0.26);
  --color-danger: #c43147;
  --color-danger-bg: rgba(196, 49, 71, 0.1);
  --color-danger-border: rgba(196, 49, 71, 0.26);
  --color-info: #1a7fb8;
  --color-info-bg: rgba(26, 127, 184, 0.1);
  --color-info-border: rgba(26, 127, 184, 0.26);
  --color-muted: rgba(15, 18, 28, 0.66);
  --color-muted-bg: rgba(15, 18, 28, 0.06);
  --color-muted-border: rgba(15, 18, 28, 0.16);
  --color-pill-muted: rgba(15, 18, 28, 0.66);
  --color-pill-muted-bg: rgba(15, 18, 28, 0.06);
  --color-pill-muted-border: rgba(15, 18, 28, 0.16);
  --bg: var(--page-bg);
  --bg-2: var(--page-bg-alt);
  --surface-1: var(--surface-default);
  --surface-2: var(--surface-elevated);
  --surface-3: var(--surface-overlay);
  --surface-inset: var(--input-bg);
  --line: var(--border-default);
  --line-strong: var(--border-strong);
  --line-vivid: var(--border-soft);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --text-4: color-mix(in srgb, var(--text-muted) 70%, transparent);
  --text-on-brand: var(--color-primary-contrast);
  --text-on-agent: var(--color-agent-contrast);
  --brand: var(--color-primary);
  --brand-strong: var(--color-primary-strong);
  --brand-soft: var(--color-primary-bg);
  --brand-line: var(--color-primary-border);
  --brand-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --agent: var(--color-agent);
  --agent-strong: var(--color-agent-strong);
  --agent-soft: var(--color-agent-bg);
  --agent-line: var(--color-agent-border);
  --agent-glow: var(--color-agent-glow);
  --ok: var(--color-success);
  --ok-soft: var(--color-success-bg);
  --ok-line: var(--color-success-border);
  --warn: var(--color-warning);
  --warn-soft: var(--color-warning-bg);
  --warn-line: var(--color-warning-border);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-bg);
  --danger-line: var(--color-danger-border);
  --info: var(--color-info);
  --info-soft: var(--color-info-bg);
  --info-line: var(--color-info-border);
  --muted-soft: var(--color-muted-bg);
  --muted-line: var(--color-muted-border);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  --xw-focus-ring: var(--focus-ring);
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.48;
  --lh-relaxed: 1.65;
  --tracking-eyebrow: 0.1em;
  --tracking-snug: 0.01em;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;
  --row-h: 36px;
  --row-h-sm: 30px;
  --ctrl-h: 34px;
  --ctrl-h-sm: 28px;
  --ctrl-px: 12px;
  --card-pad: 20px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 56px;
  --substrip-h: 34px;
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) {
    --agent: #b87825;
    --agent-strong: #9c6418;
    --agent-soft: rgb(184 120 37 / 10%);
    --agent-line: rgb(184 120 37 / 28%);
    --agent-glow: rgb(184 120 37 / 18%);
    --text-on-agent: #2a1c08;
    --surface: var(--surface-secondary);
    --surface-alt: var(--surface-default);
    --surface-muted: var(--surface-muted-strong);
    --surface-light: #fff;
    --accent: #3b82f6;
    --accent-strong: #2563eb;
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);
    --focus-ring-color: rgba(43, 111, 208, 0.26);
    --page-bg: #f3f4f7;
    --page-bg-alt: #e8ebf1;
    --surface-default: #fff;
    --surface-secondary: #fff;
    --surface-elevated: #fff;
    --surface-overlay: #fff;
    --surface-muted-strong: rgba(15, 18, 28, 0.06);
    --surface-subtle: rgba(15, 18, 28, 0.06);
    --surface-scrim: rgba(15, 18, 28, 0.38);
    --modal-scrim: rgba(15, 18, 28, 0.54);
    --text-primary: #0f121c;
    --text-secondary: rgba(15, 18, 28, 0.66);
    --text-muted: rgba(15, 18, 28, 0.46);
    --text-on-brand: #fff;
    --border-default: rgba(15, 18, 28, 0.08);
    --border-strong: rgba(15, 18, 28, 0.14);
    --border-soft: rgba(15, 18, 28, 0.22);
    --input-bg: rgba(15, 18, 28, 0.04);
    --input-border: rgba(15, 18, 28, 0.14);
    --dropdown-bg: rgba(255, 255, 255, 0.98);
    --modal-bg: #fff;
    --modal-border: rgba(15, 18, 28, 0.14);
    --modal-close-hover-bg: rgba(15, 18, 28, 0.06);
    --table-border-color: rgba(15, 18, 28, 0.08);
    --table-header-bg: #fff;
    --table-header-color: rgba(15, 18, 28, 0.46);
    --table-row-hover-bg: rgba(15, 18, 28, 0.06);
    --table-row-selected-bg: rgba(43, 111, 208, 0.1);
    --table-row-selected-hover-bg: rgba(43, 111, 208, 0.14);
    --action-btn-hover-bg: rgba(15, 18, 28, 0.06);
    --button-subtle-bg: rgba(15, 18, 28, 0.06);
    --button-subtle-hover-bg: rgba(15, 18, 28, 0.1);
    --focus-ring: rgba(43, 111, 208, 0.26);
    --shadow-sm: 0 1px 2px rgba(15, 18, 28, 0.04), 0 4px 12px rgba(15, 18, 28, 0.04);
    --shadow-md: 0 2px 4px rgba(15, 18, 28, 0.05), 0 12px 28px rgba(15, 18, 28, 0.08);
    --shadow-lg: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
    --shadow-xl: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
    --shadow-glow: 0 0 26px rgba(43, 111, 208, 0.2);
    --color-primary: #2b6fd0;
    --color-primary-strong: #1d5cb9;
    --color-primary-bg: rgba(43, 111, 208, 0.1);
    --color-primary-border: rgba(43, 111, 208, 0.26);
    --color-primary-contrast: #fff;
    --color-agent: #b87825;
    --color-agent-strong: #9c6418;
    --color-agent-bg: rgba(184, 120, 37, 0.1);
    --color-agent-border: rgba(184, 120, 37, 0.28);
    --color-agent-glow: rgba(184, 120, 37, 0.18);
    --color-agent-contrast: #2a1c08;
    --color-success: #198754;
    --color-success-bg: rgba(25, 135, 84, 0.1);
    --color-success-border: rgba(25, 135, 84, 0.26);
    --color-warning: #b66200;
    --color-warning-bg: rgba(182, 98, 0, 0.1);
    --color-warning-border: rgba(182, 98, 0, 0.26);
    --color-danger: #c43147;
    --color-danger-bg: rgba(196, 49, 71, 0.1);
    --color-danger-border: rgba(196, 49, 71, 0.26);
    --color-info: #1a7fb8;
    --color-info-bg: rgba(26, 127, 184, 0.1);
    --color-info-border: rgba(26, 127, 184, 0.26);
    --color-muted: rgba(15, 18, 28, 0.66);
    --color-muted-bg: rgba(15, 18, 28, 0.06);
    --color-muted-border: rgba(15, 18, 28, 0.16);
    --color-pill-muted: rgba(15, 18, 28, 0.66);
    --color-pill-muted-bg: rgba(15, 18, 28, 0.06);
    --color-pill-muted-border: rgba(15, 18, 28, 0.16);
    --bg: var(--page-bg);
    --bg-2: var(--page-bg-alt);
    --surface-1: var(--surface-default);
    --surface-2: var(--surface-elevated);
    --surface-3: var(--surface-overlay);
    --surface-inset: var(--input-bg);
    --line: var(--border-default);
    --line-strong: var(--border-strong);
    --line-vivid: var(--border-soft);
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --text-3: var(--text-muted);
    --text-4: color-mix(in srgb, var(--text-muted) 70%, transparent);
    --text-on-brand: var(--color-primary-contrast);
    --text-on-agent: var(--color-agent-contrast);
    --brand: var(--color-primary);
    --brand-strong: var(--color-primary-strong);
    --brand-soft: var(--color-primary-bg);
    --brand-line: var(--color-primary-border);
    --brand-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --agent: var(--color-agent);
    --agent-strong: var(--color-agent-strong);
    --agent-soft: var(--color-agent-bg);
    --agent-line: var(--color-agent-border);
    --agent-glow: var(--color-agent-glow);
    --ok: var(--color-success);
    --ok-soft: var(--color-success-bg);
    --ok-line: var(--color-success-border);
    --warn: var(--color-warning);
    --warn-soft: var(--color-warning-bg);
    --warn-line: var(--color-warning-border);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-bg);
    --danger-line: var(--color-danger-border);
    --info: var(--color-info);
    --info-soft: var(--color-info-bg);
    --info-line: var(--color-info-border);
    --muted-soft: var(--color-muted-bg);
    --muted-line: var(--color-muted-border);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
    --xw-focus-ring: var(--focus-ring);
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-28: 28px;
    --fs-40: 40px;
    --fs-56: 56px;
    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-base: 1.48;
    --lh-relaxed: 1.65;
    --tracking-eyebrow: 0.1em;
    --tracking-snug: 0.01em;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;
    --s-10: 72px;
    --s-11: 96px;
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-pill: 999px;
    --row-h: 36px;
    --row-h-sm: 30px;
    --ctrl-h: 34px;
    --ctrl-h-sm: 28px;
    --ctrl-px: 12px;
    --card-pad: 20px;
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 56px;
    --topbar-h: 56px;
    --substrip-h: 34px;
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: light;
  }
}
:root[data-density=compact] {
  --row-h: 30px;
  --row-h-sm: 26px;
  --ctrl-h: 30px;
  --ctrl-h-sm: 26px;
  --ctrl-px: 10px;
  --card-pad: 16px;
  --topbar-h: 48px;
  --substrip-h: 30px;
}

:root[data-density=cozy] {
  --row-h: 36px;
  --row-h-sm: 30px;
  --ctrl-h: 34px;
  --ctrl-h-sm: 28px;
  --ctrl-px: 12px;
  --card-pad: 20px;
  --topbar-h: 56px;
  --substrip-h: 34px;
}

:root[data-density=comfortable] {
  --row-h: 44px;
  --row-h-sm: 36px;
  --ctrl-h: 40px;
  --ctrl-h-sm: 32px;
  --ctrl-px: 14px;
  --card-pad: 24px;
  --topbar-h: 64px;
  --substrip-h: 38px;
}

:root[data-accent=signal] {
  --brand: #d8a64a;
  --brand-strong: #c6912f;
  --brand-soft: rgb(216 166 74 / 14%);
  --brand-line: rgb(216 166 74 / 32%);
  --brand-glow: rgb(216 166 74 / 22%);
  --agent: #7ca7f0;
  --agent-strong: #5d8edf;
  --agent-soft: rgb(124 167 240 / 13%);
  --agent-line: rgb(124 167 240 / 30%);
  --agent-glow: rgb(124 167 240 / 22%);
  --text-on-brand: #1b1404;
  --text-on-agent: #061025;
}

:root[data-accent=violet] {
  --brand: #9b8cf5;
  --brand-strong: #8270e8;
  --brand-soft: rgb(155 140 245 / 14%);
  --brand-line: rgb(155 140 245 / 32%);
  --brand-glow: rgb(155 140 245 / 24%);
  --agent: #e8b574;
  --agent-strong: #d49a52;
  --agent-soft: rgb(232 181 116 / 13%);
  --agent-line: rgb(232 181 116 / 30%);
}

:root[data-accent=phosphor] {
  --brand: #7fd6a4;
  --brand-strong: #5fc28a;
  --brand-soft: rgb(127 214 164 / 13%);
  --brand-line: rgb(127 214 164 / 30%);
  --brand-glow: rgb(127 214 164 / 22%);
  --agent: #e8b574;
  --agent-strong: #d49a52;
  --agent-soft: rgb(232 181 116 / 13%);
  --agent-line: rgb(232 181 116 / 30%);
  --text-on-brand: #052013;
}

:root[data-theme=light][data-accent=signal] {
  --brand: #b8730a;
  --brand-strong: #98620a;
  --brand-soft: rgb(184 115 10 / 10%);
  --brand-line: rgb(184 115 10 / 28%);
  --agent: #2b6fd0;
  --agent-strong: #1d5cb9;
  --agent-soft: rgb(43 111 208 / 10%);
  --agent-line: rgb(43 111 208 / 26%);
}

:root[data-theme=light][data-accent=violet] {
  --brand: #6042c2;
  --brand-strong: #4a30a8;
  --brand-soft: rgb(96 66 194 / 10%);
  --brand-line: rgb(96 66 194 / 28%);
}

:root[data-theme=light][data-accent=phosphor] {
  --brand: #176844;
  --brand-strong: #115538;
  --brand-soft: rgb(23 104 68 / 10%);
  --brand-line: rgb(23 104 68 / 28%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light])[data-accent=signal] {
    --brand: #b8730a;
    --brand-strong: #98620a;
    --brand-soft: rgb(184 115 10 / 10%);
    --brand-line: rgb(184 115 10 / 28%);
    --agent: #2b6fd0;
    --agent-strong: #1d5cb9;
    --agent-soft: rgb(43 111 208 / 10%);
    --agent-line: rgb(43 111 208 / 26%);
  }
  :root:not([data-theme=dark], [data-theme=light])[data-accent=violet] {
    --brand: #6042c2;
    --brand-strong: #4a30a8;
    --brand-soft: rgb(96 66 194 / 10%);
    --brand-line: rgb(96 66 194 / 28%);
  }
  :root:not([data-theme=dark], [data-theme=light])[data-accent=phosphor] {
    --brand: #176844;
    --brand-strong: #115538;
    --brand-soft: rgb(23 104 68 / 10%);
    --brand-line: rgb(23 104 68 / 28%);
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Base element resets and typography */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
          text-size-adjust: 100%;
}

body {
  margin: 0;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 36%), linear-gradient(135deg, var(--page-bg), var(--page-bg-alt));
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--text);
  font-feature-settings: "ss02", "cv11";
  font-variant-numeric: tabular-nums;
  -moz-osx-font-smoothing: grayscale;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell a {
  color: var(--brand);
}

.app-shell a:hover {
  color: var(--brand-strong);
}

.app-shell ::-moz-selection {
  background: var(--brand-soft);
  color: var(--text);
}

.app-shell ::selection {
  background: var(--brand-soft);
  color: var(--text);
}

.app-shell :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.app-shell .mono,
.app-shell code,
.app-shell kbd,
.app-shell samp,
.app-shell .num,
.app-shell time,
.app-shell .id {
  font-family: var(--font-mono);
  font-feature-settings: "zero", "ss02";
  letter-spacing: 0;
}

.app-shell *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.app-shell *::-webkit-scrollbar-track {
  background: transparent;
}

.app-shell *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  background-clip: padding-box;
}

.app-shell *::-webkit-scrollbar-thumb:hover {
  border: 2px solid transparent;
  background: var(--line-vivid);
  background-clip: padding-box;
}

.app-shell .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .h-page {
  margin: 0;
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text);
}

.app-shell .h-page[tabindex="-1"]:focus {
  outline: none;
}

.app-shell .h-sec {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
}

.app-shell .h-card {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
}

.app-shell .muted {
  color: var(--text-3);
}

.app-shell .dim {
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .pill-btn,
  .nav-item,
  .form-input,
  .modal__form-input,
  .settings-field-badge,
  .workspace-summary-card,
  .workspace-card,
  .data-table,
  .skip-link {
    forced-color-adjust: auto;
  }
  .app-icon,
  svg {
    forced-color-adjust: auto;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Global theme utilities and cross-family visual contracts. */
.app-modal-backdrop {
  background: var(--surface-scrim);
  backdrop-filter: blur(6px);
}

.app-modal-backdrop--strong {
  background: color-mix(in srgb, var(--surface-scrim) 88%, rgba(2, 6, 23, 0.82) 12%);
}

.route-trace {
  display: grid;
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 9999;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Shared typography helpers */
.page-title,
.admin-title {
  margin: 0 0 1rem;
  font-size: 1.75rem;
}

.page-title:focus,
.admin-title:focus {
  outline: none;
  box-shadow: none;
}

.page-title:focus-visible,
.admin-title:focus-visible {
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  outline: none;
}

.body-text {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

/* Mission Control authenticated shell. This stays inside the existing WebHost
   bundle and scopes authenticated shell behavior through the layout root. */
.app-shell {
  display: grid;
  grid-template: "sidebar main" 100vh/var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.app-shell[data-collapsed=true] {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

.app-shell .sidebar {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  display: flex;
  position: relative;
  z-index: 30;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  grid-area: sidebar;
}

.app-shell .sidebar__brand {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.app-shell .brand-mark {
  display: grid;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--brand);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-on-brand);
  place-items: center;
}

.app-shell .brand-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}

.app-shell .brand-name__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .sidebar__collapse,
.app-shell .topbar__icon-btn {
  display: grid;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  place-items: center;
  cursor: pointer;
}

.app-shell .sidebar__collapse:hover,
.app-shell .topbar__icon-btn:hover {
  border-color: var(--line);
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell[data-collapsed=true] .sidebar__brand {
  justify-content: center;
  padding: 0;
}

.app-shell[data-collapsed=true] .brand-mark,
.app-shell[data-collapsed=true] .brand-name {
  display: none;
}

.app-shell .sidebar__scope {
  flex-shrink: 0;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--line);
}

.app-shell[data-collapsed=true] .sidebar__scope {
  display: none;
}

.app-shell .scope-card {
  display: flex;
  position: relative;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.app-shell .scope-card::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--scope-color, var(--brand));
  content: "";
}

.app-shell .scope-card[data-level=system] {
  --scope-color: var(--info);
}

.app-shell .scope-card[data-level=organization] {
  --scope-color: var(--brand);
}

.app-shell .scope-card[data-level=channel] {
  --scope-color: var(--agent);
}

.app-shell .scope-card[data-level=shop] {
  --scope-color: var(--ok);
}

.app-shell .scope-card__code,
.app-shell .scope-path__code,
.app-shell .scope-menu__code {
  flex-shrink: 0;
  padding: 2px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-2);
}

.app-shell .scope-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-shell .scope-card__name {
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .scope-card__meta {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .sidebar__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 12px 8px;
  overflow-y: auto;
}

.app-shell .nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-shell .nav-group__title {
  padding: 0 8px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .nav-item {
  display: flex;
  position: relative;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-13);
  text-align: left;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  cursor: pointer;
  text-decoration: none;
}

.app-shell .nav-item:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell .nav-item.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}

.app-shell .nav-item.is-active::before {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -8px;
  width: 2px;
  border-radius: 2px;
  background: var(--brand);
  content: "";
}

.app-shell .nav-item--child {
  height: 28px;
  padding-left: 34px;
  font-size: var(--fs-12);
  color: var(--text-3);
}

.app-shell .nav-item__icon {
  display: inline-grid;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: inherit;
  place-items: center;
}

.app-shell .nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .nav-item__meta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.app-shell .nav-item__meta--count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  line-height: 1;
}

.app-shell .nav-item.has-agent .nav-item__meta {
  width: 10px;
  color: var(--agent);
}

.app-shell .nav-item.has-agent .nav-item__meta .xw-dot--live {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--agent);
}

.app-shell[data-collapsed=true] .nav-group__title,
.app-shell[data-collapsed=true] .nav-item__label,
.app-shell[data-collapsed=true] .nav-item__meta {
  display: none;
}

.app-shell[data-collapsed=true] .nav-item {
  justify-content: center;
  padding: 0;
}

.app-shell[data-collapsed=true] .nav-item.is-active::before {
  top: 8px;
  bottom: 8px;
  left: 0;
}

.app-shell .sidebar__foot {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.app-shell .xw-user-chip,
.app-shell .xw-user-chip .user-menu-wrap {
  flex: 1;
  min-width: 0;
}

.app-shell .xw-user-chip .user-menu-wrap {
  position: relative;
}

.app-shell .xw-user-chip .user-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  cursor: pointer;
}

.app-shell .xw-user-chip .user-chip:hover {
  background: var(--muted-soft);
}

.app-shell .xw-user-chip .user-chip:focus-visible {
  outline: 0;
  box-shadow: var(--xw-focus-ring);
}

.app-shell .xw-user-chip .user-chip__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-shell .xw-user-chip .user-chip__name {
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .xw-user-chip .user-chip__role {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .xw-user-chip .user-chip__chev {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-3);
  transition: transform var(--t-fast) var(--ease);
}

.app-shell .xw-user-chip .user-menu-wrap.is-open .user-chip__chev {
  transform: rotate(180deg);
}

.app-shell .xw-user-chip .xw-avatar {
  flex-shrink: 0;
  overflow: hidden;
}

.app-shell .xw-user-chip .xw-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.app-shell .xw-user-chip .user-menu {
  display: flex;
  position: absolute;
  bottom: calc(100% + 8px);
  left: -4px;
  z-index: 80;
  flex-direction: column;
  align-items: stretch;
  width: min(240px, 100vw - 32px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom left;
  animation: user-menu-in 160ms var(--ease-out);
  overscroll-behavior: contain;
}

.app-shell .user-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: transparent;
}

@keyframes user-menu-in {
  from {
    opacity: 0%;
    transform: translateY(6px);
  }
  to {
    opacity: 100%;
    transform: none;
  }
}
.app-shell .xw-user-chip .user-menu__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 16px 14px;
}

.app-shell .xw-user-chip .user-menu__id {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-shell .xw-user-chip .user-menu__name {
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .xw-user-chip .user-menu__email {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .xw-user-chip .user-menu__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.app-shell .xw-user-chip .user-menu__badges .badge {
  text-transform: uppercase;
}

.app-shell .xw-user-chip .user-menu__badges .xw-dot {
  width: 6px;
  height: 6px;
}

.app-shell .xw-user-chip .user-menu__divider {
  height: 1px;
  margin: 0;
  background: var(--line);
}

.app-shell .xw-user-chip .user-menu__section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
}

.app-shell .xw-user-chip .user-menu__title {
  padding: 8px 10px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .xw-user-chip .user-menu__item {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  color: var(--text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  cursor: pointer;
}

.app-shell .xw-user-chip .user-menu__item:hover,
.app-shell .xw-user-chip .user-menu__item:focus-visible {
  outline: 0;
  background: var(--muted-soft);
}

.app-shell .xw-user-chip .user-menu__item > svg {
  flex-shrink: 0;
  color: var(--text-2);
}

.app-shell .xw-user-chip .user-menu__item > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.app-shell .xw-user-chip .user-menu__meta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.app-shell .xw-user-chip .user-menu__item--sub {
  padding-left: 14px;
  color: var(--text-2);
}

.app-shell .xw-user-chip .user-menu__item--danger {
  color: var(--danger);
}

.app-shell .xw-user-chip .user-menu__item--danger:hover,
.app-shell .xw-user-chip .user-menu__item--danger:focus-visible {
  background: var(--danger-soft);
}

.app-shell .xw-user-chip .user-menu__row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 6px 10px;
  font-size: var(--fs-13);
  color: var(--text);
}

.app-shell .xw-user-chip .user-menu__row > svg {
  flex-shrink: 0;
  color: var(--text-2);
}

.app-shell .xw-user-chip .user-menu__row > span,
.app-shell .xw-user-chip .user-menu__row > label {
  flex: 1;
  min-width: 0;
}

.app-shell .xw-user-chip .user-menu__seg {
  display: inline-flex;
  flex-shrink: 0;
  gap: 1px;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}

.app-shell .xw-user-chip .user-menu__seg-btn {
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}

.app-shell .xw-user-chip .user-menu__seg-btn:hover:not(.is-active) {
  color: var(--text);
}

.app-shell .xw-user-chip .user-menu__seg-btn.is-active {
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.app-shell .xw-user-chip .user-menu__seg-btn:focus-visible {
  outline: 0;
  box-shadow: var(--xw-focus-ring);
}

.app-shell .xw-user-chip .user-menu__select {
  flex-shrink: 0;
  width: auto;
  max-width: 112px;
  height: 24px;
  padding: 0 22px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--surface-inset);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) calc(50% - 2px), calc(100% - 6px) calc(50% - 2px);
  background-size: 4px 4px;
  font: inherit;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
}

.app-shell .xw-user-chip .user-menu__select:focus-visible {
  outline: 0;
  box-shadow: var(--xw-focus-ring);
}

.app-shell .xw-user-chip .user-menu__org {
  display: grid;
  gap: 10px;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.app-shell .xw-user-chip .user-menu__org-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-shell .xw-user-chip .user-menu__org-name,
.app-shell .xw-user-chip .user-menu__org-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .xw-user-chip .user-menu__org-name {
  font-size: var(--fs-13);
  font-weight: 500;
}

.app-shell .xw-user-chip .user-menu__org-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.app-shell .xw-user-chip .user-menu__org.is-current .user-menu__org-name {
  color: var(--brand);
}

.app-shell .xw-user-chip .user-menu__foot {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--line);
}

.app-shell .xw-user-chip .user-menu__foot span {
  display: block;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell[data-collapsed=true] .sidebar__foot {
  justify-content: center;
  padding: 10px 8px;
}

.app-shell[data-collapsed=true] .xw-user-chip .user-chip__text,
.app-shell[data-collapsed=true] .xw-user-chip .user-chip__chev {
  display: none;
}

.app-shell[data-collapsed=true] .xw-user-chip .user-menu {
  bottom: calc(100% + 8px);
  left: calc(100% + 8px);
}

.app-shell .sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.5);
}

.app-shell[data-nav-mobile-open=true] .sidebar-scrim {
  display: block;
}

.app-shell .app-main {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  grid-area: main;
}

.app-shell .topbar {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
  min-width: 0;
  height: var(--topbar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.app-shell .topbar__menu {
  display: none;
}

.app-shell .topbar__actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.app-shell .topbar__icon-btn {
  position: relative;
  text-decoration: none;
}

.app-shell .topbar__icon-btn .xw-dot--notify {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--bg);
  border-radius: var(--r-pill);
  background: var(--agent);
}

.app-shell .topbar__search {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  max-width: 30%;
}

.app-shell .topbar__search .xw-input {
  padding-right: 58px;
}

.app-shell .topbar__search kbd {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Search inputs (topbar, data-grid toolbar, scope menu, search box) must clear
   their absolutely-positioned icon. Raised to .shell-prefixed specificity (0,3,0)
   so it beats the `.app-shell .xw-input { padding: 0 var(--ctrl-px) }` shorthand,
   which is 0,2,0 and would otherwise reset padding-left and overlap the icon. */
.app-shell .xw-search > .xw-input,
.app-shell .xw-search__input,
.auth-shell .xw-search > .xw-input,
.auth-shell .xw-search__input,
.public-shell .xw-search > .xw-input,
.public-shell .xw-search__input {
  padding-left: calc(var(--s-3) + 16px + var(--s-2));
}

.app-shell .scope-path {
  display: flex;
  flex: 1;
  gap: 2px;
  align-items: center;
  min-width: 0;
}

.app-shell .scope-path__sep {
  flex-shrink: 0;
  font-size: var(--fs-14);
  color: var(--text-4);
}

.app-shell .scope-path__seg {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  border-radius: var(--r-sm);
}

.app-shell .scope-path__seg:hover,
.app-shell .scope-path__seg.is-active {
  background: var(--surface-2);
}

.app-shell .scope-path__name {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  height: 28px;
  padding: 0 4px 0 6px;
  border: 0;
  background: transparent;
  font-size: var(--fs-13);
  color: var(--text);
  cursor: pointer;
}

.app-shell .scope-path__lbl {
  max-width: 180px;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .scope-path__chev {
  display: grid;
  width: 22px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.app-shell .scope-path__chev:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell .scope-card__code[data-level=SYS],
.app-shell .scope-path__code[data-level=SYS],
.app-shell .scope-menu__code[data-level=SYS] {
  background: var(--info-soft);
  color: var(--info);
}

.app-shell .scope-card__code[data-level=ORG],
.app-shell .scope-path__code[data-level=ORG],
.app-shell .scope-menu__code[data-level=ORG] {
  background: var(--brand-soft);
  color: var(--brand);
}

.app-shell .scope-card__code[data-level=CHAN],
.app-shell .scope-path__code[data-level=CHAN],
.app-shell .scope-menu__code[data-level=CHAN] {
  background: var(--agent-soft);
  color: var(--agent);
}

.app-shell .scope-card__code[data-level=SHOP],
.app-shell .scope-path__code[data-level=SHOP],
.app-shell .scope-menu__code[data-level=SHOP] {
  background: var(--ok-soft);
  color: var(--ok);
}

.app-shell .scope-menu {
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  flex-direction: column;
  min-width: 360px;
  max-width: 440px;
  max-height: 70vh;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-lg);
}

.app-shell .scope-menu__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.app-shell .scope-menu__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .scope-menu__close {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.app-shell .scope-menu__close:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell .scope-menu__search {
  position: relative;
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.app-shell .scope-menu__search .xw-input {
  height: 30px;
  padding-left: 30px;
  font-size: var(--fs-13);
}

.app-shell .scope-menu__search .xw-search__icon {
  left: 18px;
}

.app-shell .scope-menu__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}

.app-shell .scope-menu__empty {
  padding: 16px;
  font-size: var(--fs-13);
  text-align: center;
  color: var(--text-3);
}

.app-shell .scope-menu__item {
  display: grid;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  color: var(--text);
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: pointer;
}

.app-shell .scope-menu__item:hover {
  background: var(--muted-soft);
}

.app-shell .scope-menu__item.is-current {
  background: var(--brand-soft);
}

.app-shell .scope-menu__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-shell .scope-menu__name,
.app-shell .scope-menu__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .scope-menu__name {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text);
}

.app-shell .scope-menu__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.app-shell .agent-strip {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
  align-items: center;
  min-width: 0;
  height: var(--substrip-h);
  padding: 0 24px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--agent-soft), transparent 60%);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-2);
}

.app-shell .agent-strip__label {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--agent);
}

.app-shell .agent-strip__activities {
  display: flex;
  flex: 1;
  gap: 16px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.app-shell .agent-strip__activity {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text-2);
  white-space: nowrap;
}

.app-shell .agent-strip__sep {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--text-4);
}

.app-shell .agent-strip__link {
  flex-shrink: 0;
  color: var(--agent);
  text-decoration: none;
}

.app-shell .agent-strip__link:hover {
  color: var(--agent-strong);
}

.app-shell .subnav {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.app-shell .subnav__item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  margin-bottom: -1px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-13);
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.app-shell .subnav__item:hover,
.app-shell .subnav__item.is-active {
  color: var(--text);
}

.app-shell .subnav__item.is-active {
  border-bottom-color: var(--brand);
}

.app-shell .subnav__item .meta {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.app-shell .xw-page-heading {
  flex-shrink: 0;
  min-width: 0;
  padding: 20px 24px 0;
  background: var(--bg);
}

.app-shell .xw-page-heading--breadcrumbs {
  padding-top: 14px;
}

.app-shell .xw-page-heading__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .xw-page-heading__title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text);
}

.app-shell .xw-page-heading__subtitle {
  max-width: 760px;
  margin: 6px 0 0;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-2);
}

.app-shell .xw-page-heading__breadcrumbs {
  min-width: 0;
}

.app-shell .page {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  scrollbar-gutter: stable;
}

.app-shell .page--flush {
  gap: 0;
  padding: 0;
}

.app-shell main.page--flush {
  scrollbar-gutter: auto;
}

.app-shell .topbar__search .input[readonly] {
  cursor: pointer;
}

.app-shell .modal-overlay,
.app-shell .modal-scrim {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 24px;
  overflow: auto;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: none;
  animation: scrim-in 160ms var(--ease-out);
  place-items: center;
}

html[data-theme=light] .app-shell .modal-overlay,
html[data-theme=light] .app-shell .modal-scrim {
  background: rgba(15, 18, 28, 0.42);
}

@keyframes scrim-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
.app-shell .modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  animation: modal-in 220ms var(--ease-out);
}

.app-shell .modal--sm {
  max-width: 380px;
}

.app-shell .modal--md {
  max-width: 520px;
}

.app-shell .modal--lg {
  max-width: 720px;
}

.app-shell .modal--xl {
  max-width: 960px;
}

@keyframes modal-in {
  from {
    opacity: 0%;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 100%;
    transform: none;
  }
}
.app-shell .modal__header,
.app-shell .modal__head {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.app-shell .modal__title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text);
}

.app-shell .modal__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}

.app-shell .modal__footer,
.app-shell .modal__foot {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: transparent;
}

.app-shell .modal__close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
}

.app-shell .modal__close:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell .xw-confirm__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.app-shell .xw-cmd-scrim {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 140;
  place-items: start center;
  padding: min(12vh, 96px) 24px 24px;
  background: rgba(2, 6, 23, 0.58);
  animation: scrim-in 140ms var(--ease-out);
}

html[data-theme=light] .app-shell .xw-cmd-scrim {
  background: rgba(15, 18, 28, 0.32);
}

.app-shell .xw-cmd {
  display: flex;
  flex-direction: column;
  width: min(720px, 100vw - 32px);
  max-height: min(680px, 100vh - 80px);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.app-shell .xw-cmd__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.app-shell .xw-cmd__search-icon {
  color: var(--text-3);
}

.app-shell .xw-cmd__input {
  min-width: 0;
  height: 36px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  outline: 0;
}

.app-shell .xw-cmd__input::-moz-placeholder {
  color: var(--text-3);
}

.app-shell .xw-cmd__input::placeholder {
  color: var(--text-3);
}

.app-shell .xw-cmd__close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.app-shell .xw-cmd__close:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell .xw-cmd__results {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}

.app-shell .xw-cmd__empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--text-3);
}

.app-shell .xw-cmd__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-shell .xw-cmd__group-title {
  margin: 0 0 2px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

.app-shell .xw-cmd__item {
  display: grid;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  color: var(--text);
  grid-template-columns: 28px minmax(0, 1fr) auto;
  cursor: pointer;
}

.app-shell .xw-cmd__item:hover,
.app-shell .xw-cmd__item:focus-visible {
  outline: 0;
  background: var(--muted-soft);
}

.app-shell .xw-cmd__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--text-2);
}

.app-shell .xw-cmd__label {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .xw-cmd__kind {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.app-shell .xw-cmd__foot {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.app-shell .xw-tooltip {
  display: inline-flex;
}

.app-shell .xw-collapsible {
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.app-shell .xw-collapsible__head {
  background: transparent;
  color: var(--text-3);
}

.app-shell .xw-collapsible__toggle {
  color: inherit;
}

.app-shell .xw-collapsible__head:hover {
  background: var(--muted-soft);
}

.app-shell .xw-collapsible__toggle:focus-visible {
  outline: 2px solid var(--focus-ring, var(--brand));
  outline-offset: 3px;
}

.app-shell .xw-collapsible__chevron {
  color: var(--text-3);
}

.app-shell .xw-collapsible__title {
  color: var(--text-3);
}

.app-shell .xw-collapsible__body {
  border-top: 1px solid var(--line);
}

.app-shell .xw-detail-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.app-shell .xw-detail-panel__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.app-shell .xw-detail-panel__eyebrow {
  margin: 0 0 5px;
}

.app-shell .xw-detail-panel__title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
}

.app-shell .xw-detail-panel__sub {
  margin: 5px 0 0;
  font-size: var(--fs-12);
  color: var(--text-3);
}

.app-shell .xw-detail-panel__close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.app-shell .xw-detail-panel__close:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.app-shell .xw-detail-panel__head-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.app-shell .xw-detail-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px;
  overflow: auto;
}

.app-shell .xw-detail-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

@media (width <= 960px) {
  .app-shell,
  .app-shell[data-collapsed=true] {
    grid-template-areas: "main";
    grid-template-columns: 1fr;
  }
  .app-shell .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--sidebar-w), 86vw);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
    transform: translateX(-100%);
  }
  .app-shell[data-nav-mobile-open=true] .sidebar {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
    transform: translateX(0);
  }
  .app-shell[data-collapsed=true] .sidebar__brand {
    justify-content: flex-start;
    padding: 0 16px;
  }
  .app-shell[data-collapsed=true] .brand-mark {
    display: grid;
  }
  .app-shell[data-collapsed=true] .brand-name {
    display: flex;
  }
  .app-shell[data-collapsed=true] .sidebar__scope,
  .app-shell[data-collapsed=true] .nav-group__title,
  .app-shell[data-collapsed=true] .nav-item__label {
    display: block;
  }
  .app-shell[data-collapsed=true] .nav-item__meta {
    display: inline-flex;
  }
  .app-shell[data-collapsed=true] .nav-item {
    justify-content: flex-start;
    padding: 0 8px;
  }
  .app-shell[data-collapsed=true] .nav-item.is-active::before {
    top: 6px;
    bottom: 6px;
    left: -8px;
  }
  .app-shell[data-collapsed=true] .sidebar__foot {
    justify-content: flex-start;
    padding: 10px 12px;
  }
  .app-shell[data-collapsed=true] .xw-user-chip .user-chip__text {
    display: flex;
  }
  .app-shell[data-collapsed=true] .xw-user-chip .user-chip__chev {
    display: block;
  }
  .app-shell[data-collapsed=true] .xw-user-chip .user-menu {
    bottom: calc(100% + 8px);
    left: -4px;
  }
  .app-shell .topbar {
    gap: 6px;
    padding: 0 12px;
  }
  .app-shell .topbar__menu {
    display: grid;
  }
  .app-shell .topbar .topbar__search {
    display: none;
  }
  .app-shell .scope-path__lbl {
    max-width: 110px;
  }
  .app-shell .agent-strip,
  .app-shell .subnav,
  .app-shell .xw-page-heading,
  .app-shell .page {
    padding-right: 16px;
    padding-left: 16px;
  }
  .app-shell .xw-page-heading {
    padding-top: 16px;
  }
  .app-shell .page {
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .app-shell .page--flush {
    gap: 0;
    padding: 0;
    scrollbar-gutter: auto;
  }
  .app-shell .xw-cmd-scrim {
    align-items: start;
    padding: 72px 12px 12px;
  }
  .app-shell .modal-overlay,
  .app-shell .modal-scrim {
    align-items: end;
    padding: 8px;
  }
  .app-shell .modal {
    max-width: none;
    max-height: calc(100vh - 16px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .app-shell .app-main {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
@media (width <= 600px) {
  .app-shell .scope-path__seg:not(.is-active) .scope-path__lbl {
    display: none;
  }
  .app-shell .scope-menu {
    min-width: min(360px, 100vw - 24px);
  }
}
@media (width <= 520px) {
  .app-shell .scope-path__seg:not(.is-active),
  .app-shell .scope-path__sep {
    display: none;
  }
  .app-shell .scope-path__seg.is-active {
    min-width: 0;
  }
  .app-shell .scope-path__seg.is-active .scope-path__name {
    min-width: 0;
  }
  .app-shell .scope-path__seg.is-active .scope-path__lbl {
    max-width: min(120px, 38vw);
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Page-level sections, grids, and structural spacing */
@media (min-width: 768px) {
  .products-page {
    padding: 2rem 3rem;
  }
}
.products-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  color: var(--text-primary);
}

.products-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}

.products-title h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
}

.products-title p {
  max-width: 36rem;
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
}

.products-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.metric-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.recent-section,
.results-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section-header {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.section-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.section-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.recent-grid,
.product-grid {
  display: grid;
  gap: 1.5rem;
}

.recent-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.results-placeholder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 2rem;
  border: 1px dashed var(--border-soft);
  border-radius: 1rem;
  color: var(--text-muted);
}

.results-placeholder.error {
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.product-pagination {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 2rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .products-header {
    flex-direction: column;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Structured form surfaces (search, login, generic inputs) */
.product-search {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
  box-shadow: var(--elevation-1);
  transition: box-shadow 0.3s ease;
}
.product-search:hover {
  box-shadow: var(--elevation-2);
}

.product-search__input {
  flex: 1;
  min-width: 240px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: 1rem;
  background: var(--input-bg);
  font-size: 1rem;
  color: var(--text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.product-search__actions {
  display: flex;
  gap: 0.75rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-weight: 600;
}

.form-field .xw-input,
.form-field input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-inset);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 1rem;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.form-field .xw-input:focus,
.form-field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--focus-ring-color), inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.login-page {
  max-width: 460px;
  margin: 3rem auto;
  padding: 2.5rem 2.75rem;
  border-radius: 1.5rem;
  background: var(--surface-1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  color: var(--text);
}

.login-header h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.login-header p {
  margin: 0;
  color: var(--text-2);
}

.input[type=number],
.xw-input[type=number] {
  -webkit-appearance: textfield;
          appearance: textfield;
}

.input[type=number]::-webkit-outer-spin-button,
.input[type=number]::-webkit-inner-spin-button,
.xw-input[type=number]::-webkit-outer-spin-button,
.xw-input[type=number]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

:where(.app-shell, .auth-shell) .xw-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
:where(.app-shell, .auth-shell) .xw-field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-3);
}
:where(.app-shell, .auth-shell) .xw-field__help,
:where(.app-shell, .auth-shell) .xw-field__error {
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--text-3);
}
:where(.app-shell, .auth-shell) .xw-field__error {
  color: var(--danger);
}
:where(.app-shell, .auth-shell) .xw-input,
:where(.app-shell, .auth-shell) .xw-select,
:where(.app-shell, .auth-shell) .xw-textarea {
  width: 100%;
  min-height: var(--ctrl-h);
  padding: 0 var(--ctrl-px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
:where(.app-shell, .auth-shell) .xw-textarea {
  min-height: calc(var(--ctrl-h) * 2.4);
  padding-block: var(--s-3);
  resize: vertical;
}
:where(.app-shell, .auth-shell) .xw-input::-moz-placeholder, :where(.app-shell, .auth-shell) .xw-textarea::-moz-placeholder {
  color: var(--text-4);
}
:where(.app-shell, .auth-shell) .xw-input::placeholder,
:where(.app-shell, .auth-shell) .xw-textarea::placeholder {
  color: var(--text-4);
}
:where(.app-shell, .auth-shell) .xw-input:hover:not(:disabled, :-moz-read-only), :where(.app-shell, .auth-shell) .xw-textarea:hover:not(:disabled, :-moz-read-only) {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-inset) 82%, var(--surface-1) 18%);
}
:where(.app-shell, .auth-shell) .xw-input:hover:not(:disabled, :read-only),
:where(.app-shell, .auth-shell) .xw-select:hover:not(:disabled),
:where(.app-shell, .auth-shell) .xw-textarea:hover:not(:disabled, :read-only) {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-inset) 82%, var(--surface-1) 18%);
}
:where(.app-shell, .auth-shell) .xw-input:focus,
:where(.app-shell, .auth-shell) .xw-select:focus,
:where(.app-shell, .auth-shell) .xw-textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: var(--xw-focus-ring);
}
:where(.app-shell, .auth-shell) .xw-input:disabled,
:where(.app-shell, .auth-shell) .xw-select:disabled,
:where(.app-shell, .auth-shell) .xw-textarea:disabled {
  opacity: 55%;
  cursor: not-allowed;
}
:where(.app-shell, .auth-shell) .xw-select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: calc(var(--ctrl-px) * 2 + 12px);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px;
}
:where(.app-shell, .auth-shell) .xw-search {
  display: grid;
  position: relative;
  align-items: center;
  min-width: min(100%, 240px);
}
:where(.app-shell, .auth-shell) .xw-search__icon {
  position: absolute;
  left: var(--s-3);
  z-index: 1;
  width: 16px;
  height: 16px;
  font-size: var(--fs-13);
  color: var(--text-3);
  pointer-events: none;
}
:where(.app-shell, .auth-shell) .xw-search > .xw-input,
:where(.app-shell, .auth-shell) .xw-search__input {
  /* clear the icon: left offset (--s-3) + icon width (16px) + gap (--s-2) */
  padding-left: calc(var(--s-3) + 16px + var(--s-2));
}
:where(.app-shell, .auth-shell) .xw-check,
:where(.app-shell, .auth-shell) .xw-switch-field {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--text-2);
}
:where(.app-shell, .auth-shell) .xw-check.is-disabled,
:where(.app-shell, .auth-shell) .xw-switch-field.is-disabled {
  opacity: 55%;
  cursor: not-allowed;
}
:where(.app-shell, .auth-shell) .xw-check__box {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  accent-color: var(--brand);
  background: var(--surface-inset);
  cursor: pointer;
}
:where(.app-shell, .auth-shell) .xw-check__box:focus-visible {
  outline: none;
  box-shadow: var(--xw-focus-ring);
}
:where(.app-shell, .auth-shell) .xw-switch {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  cursor: pointer;
}
:where(.app-shell, .auth-shell) .xw-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--text-3);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  content: "";
}
:where(.app-shell, .auth-shell) .xw-switch.is-on {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
:where(.app-shell, .auth-shell) .xw-switch.is-on::after {
  background: var(--brand);
  transform: translateX(16px);
}
:where(.app-shell, .auth-shell) .xw-switch:focus-visible {
  outline: none;
  box-shadow: var(--xw-focus-ring);
}
:where(.app-shell, .auth-shell) .xw-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  min-height: var(--ctrl-h);
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}
:where(.app-shell, .auth-shell) .xw-tag-input:focus-within {
  border-color: var(--brand);
  box-shadow: var(--xw-focus-ring);
}
:where(.app-shell, .auth-shell) .xw-tag-input__field {
  flex: 1 1 120px;
  min-width: 80px;
  min-height: calc(var(--ctrl-h) - var(--s-2));
  padding-inline: var(--s-2);
  border: 0;
  background: transparent;
  box-shadow: none;
}
:where(.app-shell, .auth-shell) .xw-tag-input__field:focus {
  box-shadow: none;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.login-dev {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.login-dev h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.login-dev p {
  margin: 0 0 0.75rem;
  color: var(--text-2);
}

@media (width <= 768px) {
  .product-search {
    flex-direction: column;
    align-items: stretch;
  }
  .product-search__actions {
    justify-content: space-between;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Interactive buttons shared across the app */
.btn {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled, .btn[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.btn {
  min-height: 40px;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.btn:hover {
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  transform: translateY(-1px);
}
.btn:active {
  box-shadow: none;
  transform: translateY(0);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2), 0 0 0 3px var(--focus-ring-color);
}

.btn-primary,
.btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  color: #fff;
}
.btn-primary:hover:not(:disabled, [aria-disabled=true]),
.btn--primary:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(135deg, rgb(68.8, 136.25, 246.45), rgb(47.9, 106.8, 236));
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.btn-secondary {
  border-color: var(--border-strong);
  background: var(--surface-overlay);
  box-shadow: none;
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--surface-elevated);
  transform: translateY(-1px);
}

.btn--outline,
.btn-outline-secondary {
  border-color: var(--border-soft);
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
}
.btn--outline:hover:not(:disabled, [aria-disabled=true]),
.btn-outline-secondary:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--button-subtle-bg);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: var(--color-primary-border);
  background: transparent;
  box-shadow: none;
  color: var(--color-primary);
}
.btn-outline-primary:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--color-primary-bg);
  transform: translateY(-1px);
}

.btn-danger,
.btn--danger {
  border-color: var(--color-danger-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 84%, black 16%), var(--color-danger));
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  color: #fff5f5;
}
.btn-danger:hover:not(:disabled, [aria-disabled=true]),
.btn--danger:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 88%, black 12%), color-mix(in srgb, var(--color-danger) 92%, white 8%));
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.btn--outline.btn--danger,
.btn-outline-danger {
  border-color: var(--color-danger-border);
  background: transparent;
  box-shadow: none;
  color: var(--color-danger);
}
.btn--outline.btn--danger:hover:not(:disabled, [aria-disabled=true]),
.btn-outline-danger:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--color-danger-bg);
  transform: translateY(-1px);
}

.btn-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  box-shadow: none;
  color: var(--color-warning);
}
.btn-warning:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--color-warning-bg) 82%, var(--color-warning) 18%);
  transform: translateY(-1px);
}

.btn-ghost,
.btn--ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled, [aria-disabled=true]),
.btn--ghost:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--button-subtle-bg);
  transform: translateY(-1px);
}

.btn--small,
.btn-sm {
  min-height: 34px;
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
}

.btn--icon {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.btn--icon:disabled, .btn--icon[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--icon {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
}

.btn__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.btn-link,
.link-button {
  display: inline-flex;
  position: relative;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  padding: 0 0;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-link:disabled, .btn-link[aria-disabled=true],
.link-button:disabled,
.link-button[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-link,
.link-button {
  justify-content: flex-start;
  border: none;
  background: none;
  font-size: 0.95rem;
  color: #3b82f6;
}
.btn-link:focus-visible,
.link-button:focus-visible {
  outline: none;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--filter-group-gap, 0.375rem);
  align-items: center;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--filter-chip-min-height, 2.25rem);
  padding: 0 var(--filter-chip-padding-x, 0.75rem);
  border: 1px solid var(--filter-chip-border, var(--border-default));
  border-radius: var(--filter-chip-radius, 999px);
  background: var(--filter-chip-bg, var(--surface-alt));
  font-size: var(--filter-chip-font-size, 0.78rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: var(--filter-chip-color, var(--text-secondary));
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
  white-space: nowrap;
  cursor: pointer;
}

.filter-chip:hover:not(.filter-chip--active) {
  border-color: var(--filter-chip-hover-border, var(--border-strong));
  background: var(--filter-chip-hover-bg, var(--surface-default));
  color: var(--filter-chip-hover-color, var(--text-primary));
}

.filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}

.filter-chip--active,
.filter-chip[aria-pressed=true] {
  border-color: var(--filter-chip-active-border, var(--color-primary));
  background: var(--filter-chip-active-bg, var(--color-primary-bg));
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--filter-chip-active-color, var(--color-primary));
}

@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 42px;
  }
  .btn--small,
  .btn-sm,
  .btn--icon {
    min-height: 40px;
  }
  .btn--icon {
    min-width: 40px;
  }
  .pill-btn {
    min-height: 42px;
  }
  .pill-btn--sm,
  .pill-btn--compact {
    min-height: 40px;
  }
  .filter-chip {
    min-height: var(--filter-chip-min-height-touch, var(--filter-chip-min-height-mobile, 2.6rem));
    padding-inline: var(--filter-chip-padding-x-touch, var(--filter-chip-padding-x-mobile, 0.85rem));
  }
}
.chat-quick-action {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.chat-quick-action:disabled, .chat-quick-action[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.chat-quick-action {
  border-color: var(--border-default);
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  color: var(--text-primary);
}
.chat-quick-action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--surface-overlay);
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  transform: translateY(-1px);
}
.chat-quick-action {
  justify-content: flex-start;
  width: 100%;
  font-weight: 500;
}

.chat-quick-action .xw-btn__label {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.chat-quick-action--highlight {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
}

.action-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
}

.action-label {
  font-size: 0.9rem;
  text-align: left;
}

.pill-btn {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.pill-btn:disabled, .pill-btn[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.pill-btn {
  min-height: 40px;
  border-color: var(--border-default);
  background: linear-gradient(135deg, var(--surface-secondary), var(--surface-default));
  color: var(--text-primary);
}
.pill-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.pill-btn:hover:not(:disabled, [aria-disabled=true]) {
  border-color: var(--border-strong);
}

.pill-btn:disabled,
.pill-btn[aria-disabled=true],
.pill-btn--disabled {
  opacity: 65%;
  cursor: not-allowed;
}

.pill-btn--busy {
  cursor: progress;
}

.pill-btn--primary {
  border-color: var(--brand-line);
  background: linear-gradient(90deg, var(--brand-strong), var(--brand));
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.5);
  color: #f8fbff;
}
.pill-btn--primary:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(90deg, var(--brand-strong), var(--brand-strong));
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.pill-btn--outline {
  border-color: var(--border-soft);
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
}
.pill-btn--outline:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--button-subtle-bg);
  transform: translateY(-1px);
}

.pill-btn--ghost {
  border-color: var(--border-soft);
  background: var(--button-subtle-bg);
  box-shadow: none;
  color: var(--text-primary);
}
.pill-btn--ghost:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--button-subtle-hover-bg);
  transform: translateY(-1px);
}

.pill-btn--locked {
  cursor: not-allowed;
  border-color: var(--border-soft);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.pill-btn__meta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pill-btn--link {
  display: inline-flex;
  position: relative;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  padding: 0 0;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.pill-btn--link:disabled, .pill-btn--link[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.pill-btn--link {
  min-height: auto;
  border: none;
  background: none;
  color: #3b82f6;
}

.pill-btn--link:hover:not(:disabled, [aria-disabled=true]) {
  text-decoration: underline;
  color: rgb(82.52, 145, 247.08);
}

.pill-btn--success {
  border-color: color-mix(in srgb, var(--ok) 70%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 62%, black 38%), var(--ok));
  box-shadow: 0 10px 25px color-mix(in srgb, var(--ok) 30%, transparent);
  color: #e9fff3;
}
.pill-btn--success:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 52%, black 48%), color-mix(in srgb, var(--ok) 88%, black 12%));
  box-shadow: 0 10px 25px color-mix(in srgb, var(--ok) 30%, transparent);
  transform: translateY(-1px);
}

.pill-btn--warning {
  border-color: color-mix(in srgb, var(--warn) 75%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 50%, black 50%), var(--warn));
  box-shadow: 0 10px 25px color-mix(in srgb, var(--warn) 25%, transparent);
  color: #fff7ed;
}
.pill-btn--warning:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 42%, black 58%), color-mix(in srgb, var(--warn) 82%, black 18%));
  box-shadow: 0 10px 25px color-mix(in srgb, var(--warn) 25%, transparent);
  transform: translateY(-1px);
}

.pill-btn--danger {
  border-color: color-mix(in srgb, var(--danger) 65%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 52%, black 48%), color-mix(in srgb, var(--danger) 82%, black 18%));
  box-shadow: none;
  color: #ffeaea;
}
.pill-btn--danger:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 44%, black 56%), color-mix(in srgb, var(--danger) 74%, black 26%));
  transform: translateY(-1px);
}

.pill-btn--sm {
  min-height: 34px;
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
}

.pill-btn--compact {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Cards, metric badges, and list chips */
.recent-card,
.product-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.recent-card:hover,
.product-card:hover {
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  transform: translateY(-2px);
}
.recent-card:focus-visible,
.product-card:focus-visible {
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3), 0 0 0 3px var(--focus-ring-color);
  transform: translateY(-1px);
}
.recent-card,
.product-card {
  border-radius: 1.5rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  outline: none;
}

.recent-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.recent-card__header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.recent-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  color: var(--text-secondary);
}

.recent-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
}

.recent-card__status {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  white-space: nowrap;
}

.recent-card__status.status-danger {
  border: 1px solid rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.18);
  color: rgb(250.52, 202.64, 202.64);
}
:root[data-theme=light] .recent-card__status.status-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: rgb(68.76, 33.8, 48.24);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .recent-card__status.status-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.12);
    color: rgb(68.76, 33.8, 48.24);
  }
}

.recent-card__status.status-warning {
  border: 1px solid rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.18);
  color: rgb(253.32, 215.8, 189.76);
}
:root[data-theme=light] .recent-card__status.status-warning {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.12);
  color: rgb(71.16, 45.08, 37.2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .recent-card__status.status-warning {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.12);
    color: rgb(71.16, 45.08, 37.2);
  }
}

.recent-card__status.status-ok {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.18);
  color: rgb(193.12, 238.76, 209.92);
}
:root[data-theme=light] .recent-card__status.status-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(19.56, 64.76, 54.48);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .recent-card__status.status-ok {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.12);
    color: rgb(19.56, 64.76, 54.48);
  }
}

.product-card {
  border: 1px solid var(--border-default);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.product-card__media {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: var(--surface-secondary);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-card__placeholder {
  opacity: 40%;
  font-size: 2.5rem;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 2rem;
}

.product-card__body h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.product-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  color: var(--text-muted);
}

.product-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-secondary);
}

.metric strong {
  font-weight: 600;
}

.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-list li {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  white-space: nowrap;
  font-size: 0.85rem;
}

.ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-pill-muted);
  white-space: nowrap;
}

:where(.app-shell, .auth-shell, .public-shell) .card,
:where(.app-shell, .auth-shell, .public-shell) .xw-card,
:where(.app-shell, .auth-shell, .public-shell) .section,
:where(.app-shell, .auth-shell, .public-shell) .xw-section,
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .card,
:where(.app-shell, .auth-shell, .public-shell) .xw-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--card-pad);
}
:where(.app-shell, .auth-shell, .public-shell) .card--inset,
:where(.app-shell, .auth-shell, .public-shell) .xw-card--inset {
  background: var(--surface-inset);
  box-shadow: none;
}
:where(.app-shell, .auth-shell, .public-shell) .card--elevated,
:where(.app-shell, .auth-shell, .public-shell) .xw-card--elevated {
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
:where(.app-shell, .auth-shell, .public-shell) .card--agent,
:where(.app-shell, .auth-shell, .public-shell) .xw-card--agent {
  border-color: var(--agent-line);
  background: linear-gradient(180deg, var(--agent-soft), transparent 76%), var(--surface-1);
}
:where(.app-shell, .auth-shell, .public-shell) .card__head,
:where(.app-shell, .auth-shell, .public-shell) .xw-card__head {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
:where(.app-shell, .auth-shell, .public-shell) .section,
:where(.app-shell, .auth-shell, .public-shell) .xw-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--card-pad);
}
:where(.app-shell, .auth-shell, .public-shell) .section__head,
:where(.app-shell, .auth-shell, .public-shell) .xw-section__header {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
:where(.app-shell, .auth-shell, .public-shell) .section__title,
:where(.app-shell, .auth-shell, .public-shell) .xw-section__title,
:where(.app-shell, .auth-shell, .public-shell) .xw-card__title {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .badge,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  min-width: 0;
  padding: 2px var(--s-2);
  border: 1px solid var(--muted-line);
  border-radius: var(--r-pill);
  background: var(--muted-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
:where(.app-shell, .auth-shell, .public-shell) .badge--ok,
:where(.app-shell, .auth-shell, .public-shell) .badge--success,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--ok,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--success {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}
:where(.app-shell, .auth-shell, .public-shell) .badge--warn,
:where(.app-shell, .auth-shell, .public-shell) .badge--warning,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--warn,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--warning {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}
:where(.app-shell, .auth-shell, .public-shell) .badge--danger,
:where(.app-shell, .auth-shell, .public-shell) .badge--critical,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--danger,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--critical {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}
:where(.app-shell, .auth-shell, .public-shell) .badge--info,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--info {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}
:where(.app-shell, .auth-shell, .public-shell) .badge--brand,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--brand {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .badge--agent,
:where(.app-shell, .auth-shell, .public-shell) .xw-badge--agent {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}
:where(.app-shell, .auth-shell, .public-shell) .badge--solid {
  border-color: transparent;
  background: var(--brand);
  color: var(--text-on-brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-pill {
  border: 1px solid var(--line);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-2);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-pill:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-pill.is-active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-pill:focus-visible {
  outline: none;
  box-shadow: var(--xw-focus-ring);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot {
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--ok,
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--success {
  color: var(--ok);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--warn,
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--warning {
  color: var(--warn);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--danger,
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--critical {
  color: var(--danger);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--info,
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--brand {
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--agent {
  color: var(--agent);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dot--live {
  box-shadow: 0 0 0 0 currentcolor;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tabs,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-layout-toggle {
  border: 1px solid var(--line);
  background: var(--surface-inset);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-layout-toggle {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  min-height: var(--ctrl-h);
  padding: var(--s-1);
  border-radius: var(--r-md);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tabs__tab,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-layout-toggle__tab,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-tb__tab {
  background: transparent;
  font-weight: 600;
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-layout-toggle__tab,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-tb__tab {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  min-height: var(--ctrl-h-sm);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  cursor: pointer;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tabs__tab.is-active,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-layout-toggle__tab.is-active,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-tb__tab.is-active {
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tabs__tab:focus-visible,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-layout-toggle__tab:focus-visible,
:where(.app-shell, .auth-shell, .public-shell) .xw-dg-tb__tab:focus-visible {
  outline: none;
  box-shadow: var(--xw-focus-ring);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tabs--underline .xw-tabs__tab.is-active {
  border-bottom-color: var(--brand);
  background: transparent;
  box-shadow: none;
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) kbd,
:where(.app-shell, .auth-shell, .public-shell) .xw-kbd {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface-inset);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-chip {
  border: 1px solid var(--muted-line);
  background: var(--muted-soft);
  font-weight: 600;
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-chip__x {
  background: transparent;
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-chip__x:hover {
  background: var(--muted-line);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .divider {
  width: 100%;
  height: 1px;
  background: var(--line);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-avatar {
  border: 1px solid var(--line);
  background: var(--muted-soft);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-avatar--agent {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-avatar--brand {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-meter {
  background: var(--muted-soft);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar {
  background: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--agent {
  background: var(--agent);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--ok,
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--success {
  background: var(--ok);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--warn,
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--warning {
  background: var(--warn);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--danger,
:where(.app-shell, .auth-shell, .public-shell) .xw-meter__bar--critical {
  background: var(--danger);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__label,
:where(.app-shell, .auth-shell, .public-shell) .xw-compact-stat__label {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  color: var(--text-3);
  white-space: nowrap;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__value,
:where(.app-shell, .auth-shell, .public-shell) .xw-compact-stat__value {
  font-size: var(--fs-22);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta--ok,
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta--success {
  color: var(--ok);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta--warn,
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta--warning {
  color: var(--warn);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta--danger,
:where(.app-shell, .auth-shell, .public-shell) .xw-kpi__delta--critical {
  color: var(--danger);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-compact-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-compact-stat__value {
  font-size: var(--fs-16);
}
:where(.app-shell, .auth-shell, .public-shell) .trace {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-sparkline {
  width: 100%;
  min-width: 96px;
  height: 32px;
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-sparkline--agent {
  color: var(--agent);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-sparkline--ok,
:where(.app-shell, .auth-shell, .public-shell) .xw-sparkline--success {
  color: var(--ok);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-sparkline--warn,
:where(.app-shell, .auth-shell, .public-shell) .xw-sparkline--warning {
  color: var(--warn);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-fact {
  border-bottom: 1px solid var(--line);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-effective-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  min-width: 0;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-fact__label {
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-effective-row__label {
  min-width: 0;
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-fact__value {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-effective-row__value {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-effective-row {
  position: relative;
  padding-left: var(--s-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-effective-row::before {
  position: absolute;
  top: var(--s-2);
  bottom: var(--s-2);
  left: 0;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
  content: "";
}
:where(.app-shell, .auth-shell, .public-shell) .xw-progress__head {
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tick {
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tick::before {
  background: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-tick__meta {
  color: var(--text-3);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-list-item__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-list-item__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-list-item__title,
:where(.app-shell, .auth-shell, .public-shell) .xw-setting-row__label {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  color: var(--text);
  white-space: nowrap;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-list-item__meta,
:where(.app-shell, .auth-shell, .public-shell) .xw-setting-row__description {
  overflow: hidden;
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  text-overflow: ellipsis;
  color: var(--text-3);
  white-space: nowrap;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-diff {
  border-color: var(--line);
  background: var(--surface-inset);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-diff__label {
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-diff__before {
  color: var(--danger);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-diff__after {
  color: var(--ok);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-message {
  border: 1px solid var(--line);
  background: var(--surface-inset);
  color: var(--text-2);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-message--agent {
  border-color: var(--agent-line);
  background: var(--agent-soft);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-message--brand {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-suggestion {
  border-color: var(--agent-line);
  background: linear-gradient(180deg, var(--agent-soft), transparent 80%), var(--surface-1);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-setting-row {
  border-bottom: 1px solid var(--line);
}
:where(.app-shell, .auth-shell, .public-shell) .xw-setting-row__body {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}
:where(.app-shell, .auth-shell, .public-shell) .xw-setting-row__control {
  min-width: min(260px, 100%);
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border-default);
}

.product-card__flags {
  display: flex;
  gap: 0.5rem;
}

.flag {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-pill-muted);
  white-space: nowrap;
}

.flag-danger {
  border: 1px solid rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.18);
  color: rgb(250.52, 202.64, 202.64);
}
:root[data-theme=light] .flag-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: rgb(68.76, 33.8, 48.24);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .flag-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.12);
    color: rgb(68.76, 33.8, 48.24);
  }
}

.flag-warning {
  border: 1px solid rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.18);
  color: rgb(253.32, 215.8, 189.76);
}
:root[data-theme=light] .flag-warning {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.12);
  color: rgb(71.16, 45.08, 37.2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .flag-warning {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.12);
    color: rgb(71.16, 45.08, 37.2);
  }
}

.flag-ok {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.18);
  color: rgb(193.12, 238.76, 209.92);
}
:root[data-theme=light] .flag-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(19.56, 64.76, 54.48);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .flag-ok {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.12);
    color: rgb(19.56, 64.76, 54.48);
  }
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Alerts, notifications, overlays, and loading states */
/* ════════════════════════════════════════════════════════════════════════════
   UNIFIED ALERT SYSTEM
   Single source of truth for all alert styles across the application.
   ════════════════════════════════════════════════════════════════════════════ */
.alert {
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.alert:hover {
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  transform: translateY(-1px);
}
.alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.alert__icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.alert__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.alert__title {
  overflow-wrap: anywhere;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.alert__details {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.alert__detail-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  min-width: 0;
}

.alert__detail-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.alert__detail-value {
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.alert__detail-link {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.alert__detail-link:hover {
  text-decoration: underline;
}

.alert__message {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.alert__time {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.alert__dismiss {
  flex-shrink: 0;
  padding: 0.125rem;
  border: none;
  background: transparent;
  opacity: 60%;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  transition: opacity 120ms ease;
  cursor: pointer;
}
.alert__dismiss:hover {
  opacity: 100%;
}

/* Alert variants */
.alert--success {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.12);
}
.alert--success .alert__icon {
  color: #22c55e;
}

.alert--info {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.12);
}
.alert--info .alert__icon {
  color: #38bdf8;
}

.alert--warning {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.12);
}
.alert--warning .alert__icon {
  color: #f97316;
}

.alert--error {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.18);
  color: var(--text-primary);
}
.alert--error .alert__icon {
  color: #ef4444;
}

/* ════════════════════════════════════════════════════════════════════════════
   ALERTS PANEL
   Container for displaying multiple alerts (e.g., on dashboards).
   ════════════════════════════════════════════════════════════════════════════ */
.alerts-panel {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  min-width: 0;
}

.alerts-panel__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.alerts-panel__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.alerts-panel__list .alert {
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
}
.alerts-panel__list .alert--success {
  border-left-color: #22c55e;
}
.alerts-panel__list .alert--info {
  border-left-color: #38bdf8;
}
.alerts-panel__list .alert--warning {
  border-left-color: #f97316;
}
.alerts-panel__list .alert--error {
  border-left-color: #ef4444;
}

/* ════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════════════════ */
.toast-container {
  display: flex;
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1050;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  border: 1px solid var(--border-default);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  backdrop-filter: blur(18px);
  position: relative;
  min-width: 260px;
  max-width: 420px;
  padding: 0.75rem 1.5rem;
  opacity: 0%;
  color: var(--text-primary);
  transition: opacity 200ms ease, transform 200ms ease;
  transform: translateY(12px);
  pointer-events: auto;
}

.toast--visible {
  opacity: 100%;
  transform: translateY(0);
}

.toast--success {
  border-color: rgba(34, 197, 94, 0.45);
}

.toast--error {
  border-color: rgba(239, 68, 68, 0.45);
}

.toast--warning {
  border-color: rgba(249, 115, 22, 0.45);
}

.toast--info {
  border-color: rgba(56, 189, 248, 0.45);
}

.toast__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.toast__message {
  margin: 0;
  font-size: 0.9rem;
}

.app-shell .xw-empty,
.app-shell .xw-empty {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
  min-width: 0;
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  text-align: center;
  color: var(--text-2);
}
.app-shell .xw-empty--compact {
  padding: var(--s-6) var(--s-4);
}
.app-shell .xw-skel,
.app-shell .xw-skeleton__row,
.app-shell .xw-skeleton-table__cell {
  display: block;
  min-height: var(--row-h-sm);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--muted-soft), var(--surface-2), var(--muted-soft));
  background-size: 200% 100%;
  animation: xw-skel 1.4s linear infinite;
}
.app-shell .xw-skeleton-table {
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.app-shell .xw-skeleton-table__head .xw-skel,
.app-shell .xw-skeleton-table__head .xw-skeleton-table__cell {
  min-height: var(--row-h-sm);
  opacity: 72%;
}
.app-shell .xw-error {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--text);
}
.app-shell .xw-error__icon {
  background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface-1) 30%);
  color: var(--danger);
}
.app-shell .xw-error__title {
  color: var(--text);
}
.app-shell .xw-error__body,
.app-shell .xw-error__trace {
  color: var(--text-2);
}

.toast__close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  padding: 0.125rem;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.confirm-overlay {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 2100;
  padding: 2rem;
  background: var(--surface-scrim);
  backdrop-filter: blur(6px);
  place-items: center;
}

.confirm-dialog {
  border: 1px solid var(--border-default);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  display: grid;
  position: relative;
  z-index: 2200;
  gap: 0.75rem;
  width: min(420px, 100%);
  outline: none;
}

.confirm-dialog__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.confirm-dialog__message {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.confirm-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.error-panel,
.error-boundary,
.admin-error {
  border: 1px solid var(--color-danger-border);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
  color: var(--text-primary);
}

.error-panel--page,
.error-boundary:not(.error-boundary--widget) {
  padding: 1.5rem;
}

.error-panel--inline,
.admin-error {
  min-height: 0;
  padding: 0.75rem 1rem;
}

.error-panel__body,
.error-boundary__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.error-boundary__icon {
  flex-shrink: 0;
  font-size: 2rem;
  line-height: 1;
  color: #ef4444;
}

.error-panel__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: #ef4444;
}

.error-panel--page .error-panel__icon,
.error-boundary:not(.error-boundary--widget) .error-boundary__icon {
  font-size: 2rem;
}

.error-panel__title,
.error-boundary__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.error-panel--page .error-panel__title,
.error-boundary:not(.error-boundary--widget) .error-boundary__title {
  font-size: 1.35rem;
}

.error-panel__message,
.error-boundary__message {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.error-panel__content {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.error-panel--page .error-panel__message,
.error-boundary:not(.error-boundary--widget) .error-boundary__message {
  margin: 0.5rem 0 1rem;
}

.error-panel__meta,
.error-boundary__meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.error-panel__id,
.error-boundary__id {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.02em;
}

.error-panel__status,
.error-boundary__status {
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
}

.error-panel__status--success,
.error-boundary__status--success {
  background: rgba(34, 197, 94, 0.18);
  color: rgba(34, 197, 94, 0.9);
}

.error-panel__status--error,
.error-boundary__status--error {
  background: rgba(239, 68, 68, 0.18);
  color: rgba(239, 68, 68, 0.9);
}

.error-panel__actions,
.error-boundary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.error-panel--widget,
.error-boundary--widget {
  border: 1px solid var(--color-danger-border);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  min-height: 120px;
  padding: 0.75rem;
  color: var(--text-primary);
}
.error-panel--widget .error-boundary__icon,
.error-boundary--widget .error-boundary__icon {
  font-size: 1.25rem;
}
.error-panel--widget .error-boundary__body,
.error-boundary--widget .error-boundary__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
}
.error-panel--widget .error-boundary__title,
.error-boundary--widget .error-boundary__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.error-panel--widget .error-boundary__actions,
.error-boundary--widget .error-boundary__actions {
  margin-top: 0;
}

.push-result {
  border: 1px solid var(--border-default);
  border-radius: 1.5rem;
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
}

.push-result.success {
  border-color: rgba(34, 197, 94, 0.45);
  color: rgba(34, 197, 94, 0.8);
}

.push-result.error {
  border-color: rgba(239, 68, 68, 0.45);
  color: rgba(239, 68, 68, 0.8);
}

.push-result ul {
  margin: 0.75rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ai-recommendations {
  display: grid;
  gap: 1.5rem;
}

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid color-mix(in srgb, var(--border-default) 78%, transparent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  border-top-color: var(--color-primary);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.app-shell .toast-host {
  display: flex;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: min(420px, 100vw - 32px);
  pointer-events: none;
}

.app-shell .toast {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  animation: toast-in 220ms var(--ease-out);
  pointer-events: auto;
}

.app-shell .toast--ok {
  border-left-color: var(--ok);
}

.app-shell .toast--warn {
  border-left-color: var(--warn);
}

.app-shell .toast--danger {
  border-left-color: var(--danger);
}

.app-shell .toast--agent {
  border-left-color: var(--agent);
  background: linear-gradient(180deg, var(--agent-soft), transparent 70%), var(--surface-2);
}

.app-shell .toast--info {
  border-left-color: var(--info);
}

@keyframes toast-in {
  from {
    opacity: 0%;
    transform: translateY(8px);
  }
  to {
    opacity: 100%;
    transform: none;
  }
}
.app-shell .toast__icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}

.app-shell .toast--ok .toast__icon {
  background: var(--ok-soft);
  color: var(--ok);
}

.app-shell .toast--warn .toast__icon {
  background: var(--warn-soft);
  color: var(--warn);
}

.app-shell .toast--danger .toast__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.app-shell .toast--agent .toast__icon {
  background: var(--agent-soft);
  color: var(--agent);
}

.app-shell .toast--info .toast__icon {
  background: var(--info-soft);
  color: var(--info);
}

.app-shell .toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-shell .toast__title {
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .toast__text,
.app-shell .toast__message {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-12);
  line-height: 1.45;
  color: var(--text-2);
}

.app-shell .toast__action {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.app-shell .toast__action:hover {
  background: var(--muted-soft);
}

.app-shell .toast__close {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.app-shell .toast__close:hover {
  background: var(--muted-soft);
  color: var(--text);
}

@media (max-width: 540px) {
  .alert__detail-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .toast-container {
    inset: auto 1.5rem 1.5rem 1.5rem;
  }
  .toast {
    max-width: none;
  }
  .app-shell .toast-host {
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
  }
  .app-shell .toast {
    min-width: 0;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* AI assisted form fields and badges */
.field-with-ai-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.field-with-ai-suggestion .xw-input {
  width: 100%;
}

.ai-suggestion-inline {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-primary-border);
  border-radius: 1.5rem;
  background: var(--color-primary-bg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  transition: box-shadow 200ms ease;
}
.ai-suggestion-inline:hover {
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
}

.ai-suggestion-inline__badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-suggestion-inline__text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

.ai-suggestion-inline__label {
  display: flex;
  flex-shrink: 0;
  gap: 0.375rem;
  align-items: center;
  margin: 0 0 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.ai-suggestion-inline__label input[type=checkbox] {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Product preview layout and attribute presentation */
.product-preview {
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  transition: box-shadow 200ms ease;
}
.product-preview:hover {
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
}

.attr-key {
  padding: 0.5rem 0.75rem 0.5rem 0;
  font-weight: 600;
  color: var(--text-secondary);
}

.attr-value {
  padding: 0.5rem 0 0.5rem 0.75rem;
  color: var(--text-primary);
}

.image-action,
.image-position {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.35));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.6));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  padding: 1.5rem;
  border-radius: 1rem;
}
.form-container--saving {
  opacity: 70%;
  pointer-events: none;
}

.form-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-default);
}

.form-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.form-title i {
  color: #3b82f6;
}

.unsaved-indicator {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.15);
  font-size: 0.75rem;
  font-weight: 500;
  color: #f97316;
}
.unsaved-indicator i {
  font-size: 0.5rem;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 100%;
  }
  50% {
    opacity: 50%;
  }
}
.form-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
}

.form-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--text-muted);
}
.form-loading .spinner-border {
  width: 2rem;
  height: 2rem;
  border-width: 2px;
  color: #3b82f6;
}

.form-error {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  color: rgb(242.2, 105.4, 105.4);
}
.form-error i {
  flex-shrink: 0;
}
.form-error .form-error__dismiss {
  margin-left: auto;
  opacity: 70%;
  color: inherit;
}
.form-error .form-error__dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
}
.form-error .form-error__dismiss:hover {
  opacity: 100%;
}

.form-footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-default);
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}
.form-actions .pill-btn {
  min-width: 100px;
}
.form-actions .pill-btn .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form-section__title {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-default);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.form-section__description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.form-section__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.form-row--equal > * {
  flex: 1;
}
.form-row--auto > * {
  flex: 0 0 auto;
}
.form-row--inline-checks {
  align-items: center;
}
.form-row--inline-checks > * {
  flex: 0 0 auto;
  min-width: 0;
}
.form-row > * {
  flex: 1;
  min-width: 200px;
}

.form-group--inline-check {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.form-group--inline-check > label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.form-group--inline-check .form-check {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.settings-field--overridden .settings-field-label {
  color: var(--text-primary);
}

.settings-field-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.settings-field-label {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.settings-field-label .required-indicator {
  font-weight: 700;
  color: #ef4444;
}

.settings-field-badge {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.settings-field-badge--inherited {
  border: 1px solid var(--color-muted-border);
  background: var(--color-muted-bg);
  color: var(--color-muted);
}
.settings-field-badge--overridden {
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.settings-field-badge i {
  font-size: 0.7rem;
}

.settings-field-content {
  position: relative;
}

.form-input {
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.form-input::-moz-placeholder {
  color: var(--text-muted);
}
.form-input::placeholder {
  color: var(--text-muted);
}
.form-input:focus {
  outline: none;
}
.form-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-color: #3b82f6;
}
.form-input:hover:not(:disabled, :focus) {
  border-color: var(--border-strong);
}
.form-input:disabled {
  opacity: 50%;
  color: var(--text-muted, inherit);
  cursor: not-allowed;
  pointer-events: none;
}
.form-input[type=number] {
  -webkit-appearance: textfield;
          appearance: textfield;
}
.form-input[type=number]::-webkit-outer-spin-button, .form-input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}
.form-input--textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}
.form-input--sm {
  height: 2rem;
  font-size: 0.8125rem;
}
.form-input--lg {
  height: 3rem;
  font-size: 1rem;
}
.form-input--error {
  border-color: #ef4444;
}
.form-input--error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.form-input--success {
  border-color: #22c55e;
}
.form-input--success:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.form-textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

.input-with-addon {
  display: flex;
  gap: 0;
  align-items: center;
}
.input-with-addon .form-input,
.input-with-addon .xw-input,
.input-with-addon .xw-textarea {
  flex: 1;
  min-width: 0;
}
.input-with-addon .form-input:not(:first-child),
.input-with-addon .xw-input:not(:first-child),
.input-with-addon .xw-textarea:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-with-addon .form-input:not(:last-child),
.input-with-addon .xw-input:not(:last-child),
.input-with-addon .xw-textarea:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-with-addon .input-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--input-border);
  background: var(--surface-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.input-with-addon .input-addon.prefix {
  border-right: none;
  border-radius: 0.75rem 0 0 0.75rem;
}
.input-with-addon .input-addon.suffix {
  border-left: none;
  border-radius: 0 0.75rem 0.75rem 0;
}

.settings-field-help {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.75rem;
}
.settings-field-help .system-default {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--text-muted);
}
.settings-field-help .system-default i {
  color: #38bdf8;
}
.settings-field-help .help-text {
  color: var(--text-muted);
}
.settings-field-help .btn-reset {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.settings-field-help .btn-reset:disabled, .settings-field-help .btn-reset[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.settings-field-help .btn-reset:focus {
  outline: none;
}
.settings-field-help .btn-reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.settings-field-help .btn-reset {
  height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
}
.settings-field-help .btn-reset:hover:not(:disabled) {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}
.settings-field-help .btn-reset {
  height: auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.settings-field-help .btn-reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
}
.settings-field-help .btn-reset:hover {
  color: #3b82f6;
}
.settings-field-help .btn-reset i {
  font-size: 0.7rem;
}

.form-select {
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.form-select::-moz-placeholder {
  color: var(--text-muted);
}
.form-select::placeholder {
  color: var(--text-muted);
}
.form-select:focus {
  outline: none;
}
.form-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-color: #3b82f6;
}
.form-select:hover:not(:disabled, :focus) {
  border-color: var(--border-strong);
}
.form-select:disabled {
  opacity: 50%;
  color: var(--text-muted, inherit);
  cursor: not-allowed;
  pointer-events: none;
}
.form-select {
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: calc(1.5rem + 12px);
  cursor: pointer;
}
.form-select:disabled {
  cursor: not-allowed;
}

.boolean-select {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.boolean-select__option {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}
.boolean-select__option:first-child {
  border-right: none;
  border-radius: 0.75rem 0 0 0.75rem;
}
.boolean-select__option:last-child {
  border-radius: 0 0.75rem 0.75rem 0;
}
.boolean-select__option--active {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.boolean-select__option--active i {
  color: #3b82f6;
}
.boolean-select__option:hover:not(.boolean-select__option--active) {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}

.tag-input {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  transition: border-color 200ms ease;
  flex-wrap: wrap;
  min-height: 2.5rem;
  padding: 0.375rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
}
.tag-input:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
  border-color: #3b82f6;
}
.tag-input__tag {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 0.5rem;
  background: rgba(59, 130, 246, 0.15);
  font-size: 0.75rem;
  color: #3b82f6;
}
.tag-input__tag .remove-tag {
  padding: 0;
  border: none;
  background: transparent;
  opacity: 70%;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.tag-input__tag .remove-tag:hover {
  opacity: 100%;
}
.tag-input__input {
  flex: 1;
  min-width: 100px;
  height: 1.75rem;
  padding: 0 0.375rem;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.tag-input__input:focus {
  outline: none;
}
.tag-input__input::-moz-placeholder {
  color: var(--text-muted);
}
.tag-input__input::placeholder {
  color: var(--text-muted);
}

.validation-message {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: #ef4444;
}
.validation-message i {
  flex-shrink: 0;
}

.field-error .form-input,
.field-error .form-select,
.field-error .tag-input {
  border-color: #ef4444;
}

.settings-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(135deg, var(--page-bg), var(--page-bg-alt));
}

.settings-page-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  padding: 1.5rem 2rem 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-overlay);
}

.settings-page-header-content {
  display: flex;
  gap: 1rem;
  align-items: center;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.settings-page-title-area {
  flex: 1;
  min-width: 0;
}

.settings-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.settings-breadcrumb a {
  transition: color 200ms ease;
  color: inherit;
  text-decoration: none;
}
.settings-breadcrumb a:hover {
  color: #3b82f6;
}
.settings-breadcrumb .separator {
  opacity: 50%;
  color: var(--text-muted);
}

.settings-page-title-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.settings-page-icon {
  font-size: 1.5rem;
  color: #3b82f6;
}

.settings-page-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-page-subtitle {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.settings-page-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.settings-page-header--topbar .settings-page-title-area {
  display: none;
}

.settings-tabs {
  display: flex;
  gap: 0;
  align-items: center;
  margin: 0 -2rem;
  padding: 0 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tab {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.settings-tab:hover:not(.settings-tab--active) {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}
.settings-tab--active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}
.settings-tab--active i {
  color: #3b82f6;
}
.settings-tab i {
  font-size: 1rem;
}
.settings-tab .tab-badge {
  padding: 0.25rem 0.375rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
}

.settings-page-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.settings-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.settings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem;
  color: var(--text-muted);
}

.settings-error {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem;
  text-align: center;
}
.settings-error i {
  opacity: 70%;
  font-size: 3rem;
  color: #ef4444;
}
.settings-error h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-primary);
}
.settings-error p {
  margin: 0;
  color: var(--text-muted);
}

.settings-page-footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 1100;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border-default);
  background: var(--surface-overlay);
}

.settings-page-footer-info {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.settings-page-footer-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.settings-toast {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2500;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  font-size: 0.8125rem;
  font-weight: 500;
  animation: toast-slide-in 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.settings-toast--success {
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(27.2, 157.6, 75.2, 0.95));
  color: white;
}
.settings-toast--error {
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(226.242364532, 19.357635468, 19.357635468, 0.95));
  color: white;
}
.settings-toast--fading {
  animation: toast-fade-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.settings-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  opacity: 80%;
  color: inherit;
}
.settings-toast__close:hover, .settings-toast__close:focus-visible {
  opacity: 100%;
}
.settings-toast i {
  font-size: 1.25rem;
}

@keyframes toast-slide-in {
  from {
    opacity: 0%;
    transform: translateX(100px);
  }
  to {
    opacity: 100%;
    transform: translateX(0);
  }
}
@keyframes toast-fade-out {
  from {
    opacity: 100%;
    transform: translateX(0);
  }
  to {
    opacity: 0%;
    transform: translateX(100px);
  }
}
.settings-panel {
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-secondary);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.settings-panel--collapsible .settings-panel-header {
  cursor: pointer;
}
.settings-panel--collapsible .settings-panel-header:hover {
  background: var(--surface-subtle);
}
.settings-panel--collapsed .settings-panel-content,
.settings-panel--collapsed .settings-panel-footer {
  display: none;
}
.settings-panel--collapsed .settings-panel-header .collapse-icon {
  transform: rotate(-90deg);
}
.settings-panel .settings-panel {
  background: var(--surface-subtle);
  box-shadow: none;
}

.settings-panel-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  transition: background 200ms ease;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-default);
}

.settings-panel-title-area {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
}

.settings-panel-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-panel-title i {
  color: #3b82f6;
}
.settings-panel-title .collapse-icon {
  transition: transform 200ms ease;
  margin-left: auto;
}

.settings-panel-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.settings-panel-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.settings-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.settings-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.settings-panel-section:not(:last-child) {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-default);
}
.settings-panel-section__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.settings-panel-section__description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.settings-panel-section__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.settings-panel-footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.settings-panel--compact .settings-panel-header {
  padding: 0.75rem 1rem;
}
.settings-panel--compact .settings-panel-content {
  gap: 0.75rem;
  padding: 1rem;
}
.settings-panel--compact .settings-panel-footer {
  padding: 0.75rem 1rem;
}

.settings-panel--borderless {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.settings-panel--borderless .settings-panel-header {
  padding-right: 0;
  padding-left: 0;
  border-bottom: none;
}
.settings-panel--borderless .settings-panel-content {
  padding-right: 0;
  padding-left: 0;
}

.settings-panel--warning {
  border-color: var(--color-warning-border);
}
.settings-panel--warning .settings-panel-header {
  background: color-mix(in srgb, var(--color-warning-bg) 68%, transparent);
}
.settings-panel--warning .settings-panel-title i {
  color: var(--color-warning);
}

.settings-panel--danger {
  border-color: var(--color-danger-border);
}
.settings-panel--danger .settings-panel-header {
  background: color-mix(in srgb, var(--color-danger-bg) 68%, transparent);
}
.settings-panel--danger .settings-panel-title i {
  color: var(--color-danger);
}

.settings-panel-status {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.settings-panel-status--enabled {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.settings-panel-status--disabled {
  background: var(--color-muted-bg);
  color: var(--color-muted);
}
.settings-panel-status--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.breadcrumb-nav {
  display: block;
  margin-bottom: 0.75rem;
}

.breadcrumb-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-nav__item {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
}
.breadcrumb-nav__item::after {
  content: "/";
  color: var(--text-muted);
}
.breadcrumb-nav__item:last-child::after {
  content: none;
}

.breadcrumb-nav__link,
.breadcrumb-nav__current {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.25;
}

.breadcrumb-nav__link {
  transition: color 200ms ease, opacity 200ms ease;
}
.breadcrumb-nav__link:focus {
  outline: none;
}
.breadcrumb-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.breadcrumb-nav__link {
  color: var(--text-secondary);
  text-decoration: none;
}
.breadcrumb-nav__link:hover {
  color: var(--color-primary);
}

.breadcrumb-nav__current {
  font-weight: 500;
  color: var(--text-primary);
}

@media (width <= 768px) {
  .breadcrumb-nav {
    margin-bottom: 0.5rem;
  }
  .breadcrumb-nav__list {
    gap: 0.25rem;
  }
  .breadcrumb-nav__link,
  .breadcrumb-nav__current {
    font-size: 0.75rem;
  }
}
.badge {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  display: inline-flex;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-pill-muted);
  white-space: nowrap;
}
.badge i {
  font-size: 0.7rem;
}

.badge--muted {
  border: 1px solid var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.badge--info {
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.badge--danger {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge--warning {
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--success {
  border: 1px solid var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--primary {
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.badge--neutral {
  border: 1px solid var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.badge--sm {
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.65rem;
}

.badge--lg {
  height: 1.75rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot--muted {
  background: var(--color-muted);
}
.status-dot--info {
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}
.status-dot--danger {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
.status-dot--warning {
  background: #f97316;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}
.status-dot--success {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.status-dot--pulse {
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% {
    opacity: 100%;
    transform: scale(1);
  }
  50% {
    opacity: 60%;
    transform: scale(1.1);
  }
}
.status-pill {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.status-pill--muted, .status-pill--neutral {
  border: 1px solid var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}
.status-pill--info {
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.status-pill--warning {
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.status-pill--success {
  border: 1px solid var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.status-pill--critical, .status-pill--danger {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.status-pill i {
  font-size: 0.875rem;
}

.status-badge {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.status-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}
.status-badge--active, .status-badge--success {
  border: 1px solid var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.status-badge--info, .status-badge--synced, .status-badge--shipped {
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.status-badge--warning, .status-badge--pending {
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.status-badge--critical, .status-badge--danger, .status-badge--failed {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.status-badge--muted, .status-badge--neutral, .status-badge--disabled, .status-badge--unassigned {
  border: 1px solid var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.stock-badge,
.status-badge,
.product-table__status,
.sysadmin-status-badge,
.products-health-summary__chip,
.org-badge,
.onboarding-badge,
.notification-delivery__badge,
.settings-field-badge,
.inheritance-badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-pill-muted-border);
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-pill-muted);
  white-space: nowrap;
}

.stock-badge--ok,
.status-badge--muted,
.status-badge--neutral,
.product-table__status--neutral,
.product-table__status--draft,
.product-table__status--unpublished,
.sysadmin-status-badge--muted,
.products-health-summary__chip--total,
.badge--role,
.org-badge--inactive,
.settings-field-badge--inherited,
.inheritance-badge.active {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.stock-badge--low,
.status-badge--warning,
.status-badge--draft,
.sysadmin-status-badge--warning,
.products-health-summary__chip--warning,
.notification-delivery__badge--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.stock-badge--out,
.status-badge--critical,
.status-badge--danger,
.status-badge--error,
.sysadmin-status-badge--danger,
.products-health-summary__chip--critical,
.org-badge--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-badge--active,
.status-badge--success,
.status-badge--published,
.sysadmin-status-badge--success,
.products-health-summary__chip--healthy,
.badge--active,
.org-badge--success,
.org-badge--active,
.onboarding-badge--success,
.notification-delivery__badge--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--info,
.status-badge--trialing,
.status-badge--pending,
.status-badge--overridden,
.sysadmin-status-badge--info,
.product-table__status--info,
.badge--primary,
.org-badge--info,
.org-badge--features,
.notification-delivery__badge--info,
.settings-field-badge--overridden,
.inheritance-badge.inactive {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.badge--owner {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.count-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: #3b82f6;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
}
.count-badge--danger {
  background: #ef4444;
}
.count-badge--success {
  background: #22c55e;
}

.label-badge {
  display: flex;
  gap: 0;
  align-items: center;
  display: inline-flex;
  overflow: hidden;
  border-radius: 0.75rem;
  font-size: 0.75rem;
}
.label-badge__key {
  padding: 0.375rem 0.5rem;
  background: var(--surface-subtle);
  font-weight: 500;
  color: var(--text-muted);
}
.label-badge__value {
  padding: 0.375rem 0.5rem;
  background: var(--color-primary-bg);
  font-weight: 600;
  color: var(--color-primary);
}

.bulk-action-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-md, 0.75rem);
  background: var(--brand-soft);
  box-shadow: var(--shadow-sm);
}

.bulk-action-bar--active {
  border-color: var(--brand-line);
}

.bulk-action-bar__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.bulk-action-bar__selection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.bulk-action-bar__checkbox {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: var(--fs-13, 13px);
  font-weight: 600;
  color: var(--text);
}
.bulk-action-bar__checkbox input {
  accent-color: var(--brand);
}

.bulk-action-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--fs-12, 12px);
  font-weight: 600;
  color: var(--text);
}

.bulk-action-bar__clear {
  min-height: 2rem;
}

.bulk-action-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

@media (width <= 768px) {
  .bulk-action-bar {
    align-items: stretch;
  }
  .bulk-action-bar__actions {
    justify-content: center;
  }
}
.data-table-container {
  width: 100%;
  overflow: visible;
}

.admin-directory-page {
  width: min(100%, 1880px);
  margin-inline: auto;
}

.admin-directory-create-btn {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 92%, var(--brand-soft) 8%);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.admin-directory-create-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 82%, var(--brand-soft) 18%);
  box-shadow: var(--shadow-md);
}
.admin-directory-create-btn .btn__icon,
.admin-directory-create-btn .app-icon {
  color: var(--brand);
}

.data-table-surface {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border: 1px solid var(--data-table-surface-border, var(--line));
  border-radius: var(--data-table-surface-radius, 1.5rem);
  background: var(--data-table-surface-bg, var(--surface-1));
  box-shadow: var(--data-table-surface-shadow, var(--shadow-sm));
}

.data-table-surface__table {
  position: relative;
  overflow: visible;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13, 13px);
}
.data-table th,
.data-table td {
  height: var(--row-h, 36px);
  padding: 0 var(--s-3, 0.75rem);
  border-bottom: 1px solid var(--table-border-color);
  text-align: left;
  vertical-align: middle;
}
.data-table th {
  height: var(--row-h-sm, 30px);
  background: var(--table-header-bg);
  font-family: var(--font-mono, inherit);
  font-size: var(--fs-11, 11px);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow, 0.1em);
  text-transform: uppercase;
  color: var(--table-header-color);
  white-space: nowrap;
}
.data-table th.sortable {
  -webkit-user-select: none;
     -moz-user-select: none;
  cursor: pointer;
}
.data-table th.sortable:hover {
  color: var(--table-header-hover-color, var(--text));
}
.data-table th .sort-icon {
  margin-left: 0.375rem;
  opacity: 50%;
}
.data-table th .sort-icon.active {
  opacity: 100%;
}

.data-table-surface__cards {
  display: none;
  gap: 0.75rem;
  padding: 0.75rem;
}

.data-table-card {
  display: grid;
  position: relative;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--table-border-color);
  border-radius: 0.75rem;
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.data-table-card--selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.data-table-card--interactive {
  cursor: pointer;
}
.data-table-card:focus-visible {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--focus-ring-color);
}

.data-table-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.data-table-card__meta {
  font-size: 0.8125rem;
  color: var(--text-2);
}

.data-table-card__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
}

.data-table-card__details {
  display: grid;
  gap: 0.5rem;
}

.data-table-card__detail {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.data-table-card__detail > strong {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.data-table-card__actions {
  justify-content: flex-end;
}

.data-table-card__selection {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-2);
}

.data-row {
  transition: background-color 0.15s ease;
  outline: none;
}
.data-row:hover {
  background: var(--table-row-hover-bg);
}
.data-row--selected {
  background: var(--table-row-selected-bg);
}
.data-row--selected:hover {
  background: var(--table-row-selected-hover-bg, var(--brand-soft));
}
.data-row--clickable {
  cursor: pointer;
}
.data-row:focus-visible {
  background: var(--table-row-hover-bg);
  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
}
.data-row--inactive {
  opacity: 74%;
}

.cell-primary {
  font-weight: 500;
  color: var(--text);
}

.cell-secondary {
  color: var(--text-2);
}

.cell-muted {
  color: var(--text-3);
}

.cell-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cell-date {
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--text-2);
}

.cell-with-icon {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.cell-with-icon .row-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
}
.cell-with-icon .cell-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-3);
}

.data-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.2rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.data-status-pill--success {
  border-color: color-mix(in srgb, var(--ok) 20%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, var(--surface-1) 88%);
  color: color-mix(in srgb, var(--ok) 78%, var(--text));
}
.data-status-pill--warning {
  border-color: color-mix(in srgb, var(--warn) 20%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-1) 88%);
  color: color-mix(in srgb, var(--warn) 78%, var(--text));
}
.data-status-pill--neutral {
  border-color: color-mix(in srgb, var(--text-3) 20%, transparent);
  background: color-mix(in srgb, var(--surface-1) 84%, transparent);
  color: var(--text-2);
}

.data-table__col-checkbox {
  width: 40px;
  padding-right: 0;
}

.data-table__checkbox {
  width: 40px;
  padding-right: 0;
}

.data-table__select-all {
  cursor: pointer;
}

.actions-col {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.cell-actions,
.action-buttons,
.data-table-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.data-table-link {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.data-table-link:hover {
  color: var(--brand);
}

.cell-actions:has(.overflow-menu[open]),
.action-buttons:has(.overflow-menu[open]),
.data-table-actions:has(.overflow-menu[open]),
.actions-col:has(.overflow-menu[open]),
.data-table-card:has(.overflow-menu[open]),
.data-table-surface:has(.overflow-menu[open]) {
  position: relative;
  z-index: 2300;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.action-btn:hover {
  border-color: var(--line-strong);
  background: var(--action-btn-hover-bg, var(--muted-soft));
  color: var(--text);
}
.action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  color: var(--text);
}
.action-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.action-btn--primary:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.cell-actions .action-btn,
.action-buttons .action-btn,
.data-table-actions .action-btn,
.cell-actions .overflow-menu__trigger,
.action-buttons .overflow-menu__trigger,
.data-table-actions .overflow-menu__trigger {
  min-width: 40px;
  height: 40px;
  padding: 0;
  border-color: color-mix(in srgb, var(--line-strong) 65%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--surface-inset) 6%);
  box-shadow: var(--shadow-sm);
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.cell-actions .action-btn .app-icon,
.action-buttons .action-btn .app-icon,
.data-table-actions .action-btn .app-icon,
.cell-actions .overflow-menu__trigger .app-icon,
.action-buttons .overflow-menu__trigger .app-icon,
.data-table-actions .overflow-menu__trigger .app-icon {
  width: 1rem;
  height: 1rem;
}

.cell-actions .action-btn:hover,
.action-buttons .action-btn:hover,
.data-table-actions .action-btn:hover,
.cell-actions .overflow-menu__trigger:hover,
.action-buttons .overflow-menu__trigger:hover,
.data-table-actions .overflow-menu__trigger:hover,
.cell-actions .action-btn:focus-visible,
.action-buttons .action-btn:focus-visible,
.data-table-actions .action-btn:focus-visible,
.cell-actions .overflow-menu__trigger:focus-visible,
.action-buttons .overflow-menu__trigger:focus-visible,
.data-table-actions .overflow-menu__trigger:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--line-strong));
  background: color-mix(in srgb, var(--surface-2) 84%, var(--brand-soft) 16%);
  color: var(--text);
}

.cell-actions .action-btn--view,
.action-buttons .action-btn--view,
.data-table-actions .action-btn--view {
  color: var(--brand);
}

.data-table-loading {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-2);
}
.data-table-loading .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.data-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}
.data-table-empty__icon {
  margin-bottom: 1rem;
  opacity: 50%;
  font-size: 3rem;
}
.data-table-empty h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}
.data-table-empty p {
  max-width: 400px;
  margin: 0 0 1.5rem;
  color: var(--text-2);
}

.data-table-footer,
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--table-border-color);
  font-size: 0.8125rem;
}

.data-table-count,
.record-count {
  color: var(--text-3);
}

@media (width <= 768px) {
  .data-table-container {
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .data-table-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .data-table-surface__table > table,
  .data-table-surface__table > .table,
  .data-table-surface__table > .data-table {
    min-width: 560px;
  }
  .data-table th,
  .data-table td {
    padding: 0.5rem 0.75rem;
  }
  .data-table-card__header {
    flex-direction: column;
    align-items: stretch;
  }
  .cell-with-icon .row-icon {
    display: none;
  }
  .table-col--hide-mobile {
    display: none;
  }
  .data-table-surface--responsive .data-table-surface__table {
    display: none;
  }
  .data-table-surface--responsive .data-table-surface__cards {
    display: grid;
    gap: 0.5rem;
  }
}
.xw-dg-shell {
  display: flex;
  flex-direction: column;
  min-height: min(860px, 100vh - 128px);
  overflow: hidden;
  background: transparent;
}

.pricing-shell,
.approval-shell-v2 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.xw-dg-shell[data-fit=content] {
  min-height: 0;
}

.xw-dg-head {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.xw-dg-head__subtitle {
  font-size: 13px;
}

.xw-dg-head__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.xw-dg-head__title .h-page {
  margin: 0;
}

.xw-dg-head__stats {
  display: flex;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.xw-dg-head__stats::-webkit-scrollbar {
  display: none;
}

.xw-dg-head__stats .xw-compact-stat {
  gap: 2px;
  min-width: 92px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.xw-dg-head__stats .xw-compact-stat__value {
  font-size: 16px;
}

.xw-dg-head__actions,
.xw-page-header__stats,
.xw-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.xw-dg-tb {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.xw-dg-tb__tab-count {
  margin-left: 4px;
  color: var(--text-3);
}

.xw-dg-tb__chip strong {
  color: var(--text);
}

.xw-dg-tb__add-filter {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 11px;
  color: var(--text-3);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  cursor: pointer;
}

.xw-dg-tb__add-filter:hover {
  border-style: solid;
  background: var(--muted-soft);
  color: var(--text-2);
}

.xw-dg-tb__sort {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

.xw-dg-tb__sort:hover {
  background: var(--muted-soft);
}

.xw-dg-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  transition: grid-template-columns var(--t-base) var(--ease);
}

.xw-dg-shell[data-detail-open=true] .xw-dg-split {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
}

.xw-dg-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.xw-dg-body > .table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: none;
  border-radius: 0;
}

.xw-dg-body > .table-wrap .table {
  border-radius: 0;
}

.xw-dg-grid {
  display: grid;
  flex: 1;
  gap: var(--xw-dg-gap, 12px);
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 16px 24px;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xw-dg-min-width, 220px)), 1fr));
}

.xw-dg-shell[data-fit=content] .xw-dg-grid,
.xw-dg-shell[data-fit=content] .xw-dg-body > .table-wrap {
  flex: 0 0 auto;
  overflow-y: visible;
}

.xw-dg-foot {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

.xw-dg-foot__count .num,
.xw-dg-foot__size .num,
.xw-dg-foot__page {
  color: var(--text-2);
}

.xw-dg-foot__right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.xw-dg-foot__size {
  padding: 4px 6px;
  border-radius: var(--r-xs);
  font-size: 11px;
}

.xw-dg-foot__size:hover {
  background: var(--muted-soft);
}

.xw-dg-foot__page {
  min-width: 48px;
  padding: 0 8px;
  text-align: center;
}

.xw-dg-shell .approvals-detail {
  min-height: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-2);
  animation: detail-in var(--t-base) var(--ease-out);
}

.xw-dg-shell .approvals-detail .xw-detail-panel__head {
  padding: 16px 20px;
}

.xw-dg-shell .approvals-detail .xw-detail-panel__body {
  gap: 16px;
  padding: 16px 20px;
}

.xw-dg-shell .approvals-detail .xw-detail-panel__foot {
  padding: 12px 20px;
}

@keyframes detail-in {
  from {
    opacity: 0%;
    transform: translateX(8px);
  }
  to {
    opacity: 100%;
    transform: none;
  }
}
.xw-views {
  display: inline-block;
  position: relative;
}

.xw-views__current {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.xw-views__current:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.xw-views__menu {
  display: grid;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  gap: 2px;
  width: -moz-max-content;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, 100vw - 32px);
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}

.xw-views__title {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-3);
}

.xw-views__item {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 7px 8px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.xw-views__item:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.xw-views__item.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}

.xw-views__item span {
  min-width: 0;
}

.xw-views__item svg:last-child,
.xw-views__badge {
  margin-left: auto;
}

.xw-views__badge {
  font-size: 9px;
}

.xw-views__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

.xw-columns__item {
  cursor: pointer;
}

.xw-dg-layout-toggle__tab {
  gap: 5px;
}

.card.xw-preview-product-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.product-thumb.xw-preview-product-card__media {
  display: grid;
  position: relative;
  min-height: 132px;
  border: none;
  border-radius: 0;
  aspect-ratio: 4/3;
  place-items: center;
}

.xw-preview-product-card .product-thumb {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 12px), var(--surface-1);
  aspect-ratio: 1/1;
}

.xw-preview-product-card .product-thumb__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.xw-preview-product-card__agent {
  position: absolute;
  top: 10px;
  right: 10px;
}

.xw-preview-product-card__body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.xw-preview-product-card__sku {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.xw-preview-product-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.xw-preview-product-card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.xw-preview-product-card__stock {
  font-size: 11px;
}

.xw-preview-product-card .badge {
  font-size: 9px;
}

.xw-dg-shell .product-cell {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 220px;
}

.xw-dg-shell .product-cell__thumb {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 8px), var(--bg-2);
}

@media (width <= 1100px) {
  .xw-dg-shell[data-detail-open=true] .xw-dg-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .xw-dg-shell[data-detail-open=true] .xw-dg-body {
    display: none;
  }
  .xw-dg-shell .approvals-detail {
    border-left: none;
  }
}
@media (width <= 900px) {
  .xw-dg-shell {
    min-height: 0;
  }
  .xw-dg-head,
  .xw-page-header {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .xw-dg-head__stats,
  .xw-dg-head__actions,
  .xw-page-header__stats,
  .xw-page-actions {
    justify-content: flex-start;
  }
  .xw-dg-head__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow-x: visible;
  }
  .xw-dg-head__stats .xw-compact-stat {
    min-width: 0;
  }
  .xw-dg-head__stats .xw-compact-stat__label {
    overflow: visible;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }
  .xw-dg-tb {
    align-items: stretch;
    padding: 10px 16px;
  }
  .xw-dg-tb,
  .xw-dg-tb__left,
  .xw-dg-tb__right,
  .xw-dg-foot {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  .xw-dg-tb__search {
    width: 100%;
  }
  .xw-dg-tb__left,
  .xw-dg-tb__right,
  .xw-dg-tb__extra {
    flex: 0 1 auto;
    min-width: 0;
  }
  .xw-dg-tb__left,
  .xw-dg-tb__extra {
    flex-wrap: wrap;
  }
  .xw-dg-tb__extra,
  .xw-dg-tb__extra > *,
  .xw-dg-tb__right > * {
    width: 100%;
    max-width: 100%;
  }
  .xw-dg-tb__tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .xw-dg-tb__tabs::-webkit-scrollbar {
    display: none;
  }
  .xw-dg-grid {
    padding: 16px;
  }
}
.inspection-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.inspection-table-container > .inspection-table {
  min-width: var(--inspection-table-min-width, 0);
}

.inspection-table-container--framed {
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--brand) 18%);
  border-radius: 0.75rem;
  background: var(--surface-1);
}

.inspection-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.inspection-table caption {
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  text-align: left;
  color: var(--text-2);
  caption-side: top;
}
.inspection-table th,
.inspection-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--table-border-color);
  text-align: left;
  vertical-align: middle;
}
.inspection-table th {
  background: var(--table-header-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--table-header-color);
  white-space: nowrap;
}

.inspection-table--compact th,
.inspection-table--compact td {
  padding: 0.5rem 0.75rem;
}

.overflow-menu {
  display: inline-flex;
  position: relative;
  align-items: center;
  overflow: visible;
  isolation: isolate;
}
.overflow-menu[open] {
  z-index: 2300;
}

.overflow-menu__trigger {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-vivid);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  list-style: none;
}
.overflow-menu__trigger::-webkit-details-marker {
  display: none;
}
.overflow-menu__trigger:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
}
.overflow-menu__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring-color) 22%, transparent);
}

.overflow-menu__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.overflow-menu__trigger-text {
  font-size: 0.875rem;
  font-weight: 600;
}

.overflow-menu__surface {
  display: none;
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 2300;
  min-width: 12.5rem;
  max-width: min(18rem, 100vw - 1.5rem);
  padding: 0.375rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface-3);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px) saturate(130%);
}

.overflow-menu[open] > .overflow-menu__surface {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.overflow-menu__item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}
.overflow-menu__item:hover {
  background: var(--muted-soft);
}
.overflow-menu__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring-color) 22%, transparent);
}

.overflow-menu__item > :last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.overflow-menu__item--danger {
  color: var(--danger);
}
.overflow-menu__item--danger:hover {
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 82%, var(--text) 18%);
}

.overflow-menu__item-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

@media (width <= 768px) {
  .overflow-menu__surface {
    min-width: 11rem;
  }
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  font-size: 0.875rem;
}
.pagination__info {
  color: var(--text-3);
}
.pagination__controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.pagination__page-size {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-2);
}
.pagination__page-size span {
  white-space: nowrap;
}
.pagination__select {
  padding: 4px 8px;
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
}
.pagination__select:focus {
  outline: none;
  border-color: var(--brand);
}
.pagination__nav {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--button-border, var(--line));
  border-radius: 0.5rem;
  background: var(--button-bg, transparent);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pagination__btn:hover:not(:disabled) {
  border-color: var(--button-hover-border, var(--line-strong));
  background: var(--button-hover-bg, var(--muted-soft));
  color: var(--text);
}
.pagination__btn:disabled {
  opacity: 40%;
  cursor: not-allowed;
}
.pagination__icon {
  font-size: 0.75rem;
}
.pagination__pages {
  display: flex;
  gap: 2px;
  align-items: center;
}
.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.875rem;
  color: var(--text-2);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.pagination__page:hover:not(.pagination__page--active) {
  background: var(--button-hover-bg, var(--muted-soft));
  color: var(--text);
}
.pagination__page--active {
  background: var(--brand);
  font-weight: 500;
  color: var(--text-on-brand);
}
.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-3);
}
.pagination__current {
  padding: 0 0.75rem;
  color: var(--text-2);
  white-space: nowrap;
}

@media (width <= 640px) {
  .pagination {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  .pagination__info {
    text-align: center;
  }
  .pagination__controls {
    justify-content: center;
  }
  .pagination__page-size {
    display: none;
  }
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 0;
}
.filter-bar__search {
  flex: 1 1 clamp(20rem, 32vw, 38rem);
  min-width: min(20rem, 100%);
  max-width: min(42rem, 100%);
}
.filter-bar__filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filter-bar__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.filter-bar--panel {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

@media (width >= 1600px) {
  .filter-bar__search {
    flex-basis: clamp(24rem, 36vw, 46rem);
    max-width: min(46rem, 100%);
  }
}
.search-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  opacity: 50%;
  font-size: 0.875rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.5rem 1rem;
  padding-right: 2.25rem;
  padding-left: 2.25rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.search-input::-moz-placeholder {
  color: var(--text-3);
}
.search-input::placeholder {
  color: var(--text-3);
}
.search-input:focus {
  outline: none;
}
.search-input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.search-clear {
  display: flex;
  position: absolute;
  right: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--button-subtle-bg, var(--muted-soft));
  font-size: 0.625rem;
  color: var(--text-2);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.search-clear:hover {
  background: var(--button-subtle-hover-bg, var(--line));
  color: var(--text);
}
.search-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.filter-select {
  -webkit-appearance: none;
          appearance: none;
  padding: 0.5rem 1rem;
  padding-right: 1.5rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.filter-select:focus {
  outline: none;
}
.filter-select:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.filter-select option {
  background: var(--dropdown-bg, var(--surface-3));
  color: var(--text);
}

.filter-label {
  margin-right: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (width <= 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar__search {
    max-width: none;
  }
  .filter-bar__filters, .filter-bar__sort {
    flex-wrap: wrap;
    width: 100%;
  }
  .filter-bar__actions {
    justify-content: flex-end;
    margin-left: 0;
  }
  .filter-select {
    flex: 1;
    min-width: 120px;
  }
}
.workspace-result-panel {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-alt);
}

.workspace-result-panel__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.workspace-result-panel__title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.workspace-result-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
}

.workspace-result-panel__summary,
.workspace-result-panel__body {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

:where(.workspace-result-panel__summary, .workspace-result-panel__body) p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.32;
  color: var(--text-secondary);
}

.workspace-result-panel__summary .status-pill,
.workspace-result-panel__summary .xw-pill {
  justify-self: flex-start;
}

.workspace-result-panel__body ul {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-result-panel__body li {
  padding: 0.375rem 0.5rem;
  border-left: 2px solid var(--color-warning);
  border-radius: 0.5rem;
  background: var(--surface-default);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.workspace-filter-toolbar {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.workspace-filter-toolbar__bar {
  margin-bottom: 0;
  padding: 0;
}

.workspace-filter-toolbar__bar .filter-bar__search {
  flex: 1 1 18rem;
  min-width: min(18rem, 100%);
  max-width: none;
}

.workspace-filter-toolbar__bar .filter-bar__filters {
  gap: 0.75rem;
  align-items: flex-start;
}

.workspace-filter-toolbar__state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
}

@media (width <= 900px) {
  .workspace-filter-toolbar__bar .filter-bar__filters,
  .workspace-filter-toolbar__bar .filter-bar__actions,
  .workspace-filter-toolbar__state {
    width: 100%;
  }
}
.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--modal-scrim, color-mix(in srgb, var(--surface-scrim) 92%, var(--bg) 8%));
  backdrop-filter: blur(18px) saturate(72%);
  animation: modal-fade-in 0.2s ease-out;
  isolation: isolate;
}
.modal-overlay--visible {
  opacity: 100%;
}
.modal-overlay--placement-end {
  align-items: stretch;
  justify-content: flex-end;
  padding-left: 0.75rem;
}

@keyframes modal-fade-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
.modal {
  display: flex;
  position: relative;
  z-index: 2200;
  flex-direction: column;
  max-height: calc(100vh - 1.5rem * 2);
  overflow: hidden;
  border: 1px solid var(--modal-border, var(--border-soft));
  border-radius: 1rem;
  background: var(--modal-bg, var(--surface-elevated));
  box-shadow: var(--shadow-lg), 0 24px 56px color-mix(in srgb, var(--surface-scrim) 48%, transparent);
  animation: modal-slide-up 0.25s ease-out;
}
.modal--sm {
  width: 100%;
  max-width: 400px;
}
.modal--md {
  width: 100%;
  max-width: 560px;
}
.modal--lg {
  width: 100%;
  max-width: 800px;
}
.modal--xl {
  width: 100%;
  max-width: 1100px;
}
.modal--full {
  width: calc(100vw - 1.5rem * 2);
  max-width: none;
  height: calc(100vh - 1.5rem * 2);
  max-height: none;
}
.modal--placement-end {
  height: calc(100vh - 1.5rem * 2);
  max-height: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  animation: modal-slide-in-end 0.25s ease-out;
}

body:has(.modal-overlay--visible) .app-header,
body:has(.modal-overlay--visible) .dashboard-header,
body:has(.modal-overlay--visible) .workspace-page-frame__header,
body:has(.modal-overlay--visible) .settings-page-header,
body:has(.modal-overlay--visible) .products-header,
body:has(.modal-overlay--visible) .shell-topbar,
body:has(.modal-overlay--visible) .admin-topbar,
body:has(.modal-overlay--visible) .topbar-left,
body:has(.modal-overlay--visible) .topbar-title,
body:has(.modal-overlay--visible) .topbar-actions,
body:has(.modal-overlay--visible) .xw-page-header--topbar,
body:has(.modal-overlay--visible) .xw-page-header__actions {
  opacity: 8%;
  filter: blur(14px);
  pointer-events: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

@keyframes modal-slide-up {
  from {
    opacity: 0%;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 100%;
    transform: translateY(0) scale(1);
  }
}
@keyframes modal-slide-in-end {
  from {
    opacity: 0%;
    transform: translateX(20px);
  }
  to {
    opacity: 100%;
    transform: translateX(0);
  }
}
.modal__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--modal-border, var(--border-soft));
  background: color-mix(in srgb, var(--modal-bg, var(--surface-elevated)) 90%, var(--surface-muted) 10%);
}

.modal__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal__icon {
  font-size: 1.25rem;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 1rem;
  color: var(--text-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.modal__close:hover {
  background: var(--modal-close-hover-bg, color-mix(in srgb, var(--surface-muted) 72%, transparent));
  color: var(--text-primary);
}
.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  color: var(--text-primary);
}

.modal__body {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}
.modal__body--no-padding {
  padding: 0;
}

.modal__loading {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary);
}
.modal__loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.modal__footer {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--modal-border, var(--border-soft));
  background: color-mix(in srgb, var(--modal-bg, var(--surface-elevated)) 82%, var(--surface-muted) 18%);
}
.modal__footer--spread {
  justify-content: space-between;
}

.modal__form-group {
  margin-bottom: 1rem;
}
.modal__form-group:last-child {
  margin-bottom: 0;
}

.modal__form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.modal__form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border, var(--border-soft));
  border-radius: 0.75rem;
  background: var(--input-bg, var(--surface-default));
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.modal__form-input::-moz-placeholder {
  color: var(--text-muted);
}
.modal__form-input::placeholder {
  color: var(--text-muted);
}
.modal__form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.modal__form-input--error {
  border-color: var(--danger);
}

.modal__form-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--danger);
}

.modal__form-hint {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.modal__form-required-legend {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.modal__form-required-legend .required-indicator {
  font-weight: 700;
  color: var(--danger);
}

.modal--alert .modal__body {
  text-align: center;
}
.modal--alert .modal__alert-icon {
  margin-bottom: 1rem;
  font-size: 3rem;
}
.modal--alert .modal__alert-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.modal--alert .modal__alert-message {
  margin: 0;
  color: var(--text-2);
}
.modal--alert .modal__footer {
  justify-content: center;
}

@media (width <= 640px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0.5rem;
  }
  .modal-overlay--placement-end {
    padding-left: 0.5rem;
  }
  .modal {
    max-height: calc(100vh - 1rem);
    border-radius: 1rem 1rem 0 0;
  }
  .modal--sm, .modal--md, .modal--lg, .modal--xl {
    width: 100%;
    max-width: none;
  }
  .modal--placement-end {
    height: calc(100vh - 1rem);
    border-radius: 1rem;
  }
}
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--modal-border, var(--line-vivid));
}
.modal-header h2 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

.modal-header--danger {
  border-bottom-color: color-mix(in srgb, var(--danger) 25%, transparent);
}
.modal-header--danger h2 {
  color: var(--danger);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-3);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.modal-close:hover {
  background: var(--modal-close-hover-bg, var(--muted-soft));
  color: var(--text);
}

.modal-body {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.modal-actions,
.modal-footer {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--modal-border, var(--line-vivid));
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.skeleton {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, var(--surface-inset) 25%, var(--muted-soft) 37%, var(--surface-inset) 63%);
  animation: skeleton-shimmer 1.4s ease infinite;
  background-size: 400% 100%;
}

.skeleton--line {
  height: 0.8rem;
}

.skeleton--title {
  height: 1.4rem;
}

.skeleton--pill {
  height: 1.5rem;
  border-radius: 999px;
}

.skeleton--circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
}

.skeleton--block {
  height: 8rem;
}

.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.skeleton-card {
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-2);
}

.skeleton-table {
  --skeleton-columns: repeat(6, minmax(0, 1fr));
  display: grid;
  gap: 0.5rem;
}

.skeleton-table__header,
.skeleton-table__row {
  display: grid;
  grid-template-columns: var(--skeleton-columns);
  gap: 0.5rem;
  align-items: center;
}

.skeleton-table__row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-default);
}

.skeleton-table__cell {
  height: 0.75rem;
}

.skeleton-chart {
  height: 180px;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
}

.workspace-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.workspace-action-bar--panel {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border-default) 82%, rgb(141, 183, 255) 18%);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 88%, rgb(238, 244, 255) 12%), color-mix(in srgb, var(--surface-default) 90%, rgb(219, 233, 255) 10%));
}

.workspace-action-bar--actions-only {
  justify-content: flex-end;
}

.workspace-action-bar--stacked {
  flex-direction: column;
  align-items: stretch;
}

.workspace-action-bar__content {
  display: grid;
  flex: 1 1 16rem;
  gap: 0.25rem;
  min-width: 0;
}

.workspace-action-bar__content > :is(h2, h3, h4, p) {
  margin: 0;
}

.workspace-action-bar__actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
}

.workspace-action-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.workspace-action-bar__group--secondary {
  opacity: 92%;
}

.workspace-action-bar--stacked .workspace-action-bar__content,
.workspace-action-bar--stacked .workspace-action-bar__actions,
.workspace-action-bar--stacked .workspace-action-bar__group {
  width: 100%;
}

.workspace-action-bar--stacked .workspace-action-bar__actions {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  margin-left: 0;
}

.workspace-action-bar--stacked .workspace-action-bar__group {
  justify-content: flex-end;
}

@media (width <= 900px) {
  .workspace-action-bar,
  .workspace-action-bar--actions-only {
    justify-content: flex-start;
  }
  .workspace-action-bar__actions {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }
}
@media (width <= 640px) {
  .workspace-action-bar__actions,
  .workspace-action-bar__group {
    width: 100%;
  }
  .workspace-action-bar--stacked .workspace-action-bar__group {
    justify-content: flex-start;
  }
}
.feedback-state-view {
  min-width: 0;
}

.feedback-state-view__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.workspace-page-frame__content {
  min-width: 0;
}

.workspace-viewport-guard__notice {
  display: none;
}

.workspace-viewport-guard__content {
  min-width: 0;
}

.workspace-page-frame__metrics,
.workspace-page-frame__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.workspace-page-frame__metrics {
  flex: 1 1 auto;
}

.workspace-page-frame__metric {
  display: grid;
  gap: 0.25rem;
  min-width: 7.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--table-border-color);
  border-radius: 0.75rem;
  background: var(--surface-subtle);
}

.workspace-page-frame__metric--success {
  border-color: var(--color-success-border);
}

.workspace-page-frame__metric--warning {
  border-color: var(--color-warning-border);
}

.workspace-page-frame__metric--danger {
  border-color: var(--color-danger-border);
}

.workspace-page-frame__metric-label,
.workspace-page-frame__metric-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.workspace-page-frame__metric-value {
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-primary);
}

@media (width <= 768px) {
  .workspace-page-frame__metrics,
  .workspace-page-frame__actions {
    width: 100%;
  }
  .workspace-page-frame__metric {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: min(100%, 10rem);
  }
}
@media (width <= 1024px) {
  .workspace-viewport-guard--desktop .workspace-viewport-guard__notice {
    display: block;
  }
  .workspace-viewport-guard--desktop .workspace-viewport-guard__content {
    display: none;
  }
}
@media (width <= 768px) {
  .workspace-viewport-guard--tablet .workspace-viewport-guard__notice {
    display: block;
  }
  .workspace-viewport-guard--tablet .workspace-viewport-guard__content {
    display: none;
  }
}
.xw-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s-4);
}

.xw-preview-grid-span {
  grid-column: 1/-1;
  min-width: 0;
}

.xw-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.xw-preview-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.workspace-summary-grid {
  display: grid;
  gap: 0.75rem;
}

.workspace-summary-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-summary-grid--compact {
  gap: 0.5rem;
}

.workspace-summary-card,
.workspace-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  height: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line-vivid);
  border-radius: 0.5rem;
  background: var(--surface-1);
}

.workspace-summary-card--compact {
  gap: 0.375rem;
  padding: 0.75rem 0.75rem 0.5rem;
}

.workspace-summary-card--info {
  border-color: var(--info-line);
  background: linear-gradient(180deg, var(--info-soft), transparent 72%), var(--surface-1);
}

.workspace-summary-card--accent {
  border-color: var(--agent-line);
  background: linear-gradient(180deg, var(--agent-soft), transparent 72%), var(--surface-1);
}

.workspace-summary-card--success {
  border-color: var(--ok-line);
}

.workspace-summary-card--warning {
  border-color: var(--warn-line);
}

.workspace-summary-card__header,
.workspace-card header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.workspace-summary-card__heading {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.workspace-summary-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.workspace-summary-card__title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.workspace-summary-card__aside {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.workspace-summary-card__badge,
.workspace-summary-card__value,
.workspace-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.workspace-summary-card__badge {
  border: 1px solid var(--line);
  background: var(--muted-soft);
  font-family: var(--font-mono, inherit);
  font-size: var(--fs-11, 11px);
  font-weight: 500;
  color: var(--text-2);
}

.workspace-summary-card__value {
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono, inherit);
  font-size: var(--fs-14, 14px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.workspace-summary-card__meta,
.workspace-summary-card__actions,
.workspace-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
}

.workspace-summary-card__body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.workspace-summary-card__description {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.24;
  color: var(--text-secondary);
}

.workspace-summary-card__actions,
.workspace-card__actions {
  margin-top: auto;
}

.workspace-summary-card__actions .pill-btn,
.workspace-card .pill-btn {
  align-self: flex-start;
}

:where(.workspace-summary-card, .workspace-card) p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.24;
  color: var(--text-secondary);
}

.workspace-summary-card__warning,
.workspace-card__warning {
  color: var(--warn);
}

.workspace-summary-card__empty,
.workspace-card__empty {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.workspace-summary-card__compact-list,
.workspace-card__compact-list {
  display: grid;
  gap: 0.375rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-summary-card__compact-list li,
.workspace-card__compact-list li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
  font-size: 0.78rem;
  color: var(--text-2);
}

:where(.workspace-summary-card__compact-list li, .workspace-card__compact-list li) strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--muted-soft);
  font-family: var(--font-mono, inherit);
  font-size: var(--fs-11, 11px);
  color: var(--text);
}

.workspace-summary-card__pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

@media (width <= 640px) {
  .workspace-summary-grid--two {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-summary-card__header {
    flex-direction: column;
  }
  .workspace-summary-card__aside {
    justify-content: flex-start;
    margin-left: 0;
  }
}
.form-container {
  background: linear-gradient(135deg, var(--surface-secondary), var(--surface-default));
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border-soft);
}

.settings-page {
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-alt) 50%, var(--page-bg) 100%);
}

.settings-page-header {
  background: linear-gradient(135deg, var(--surface-alt), var(--surface));
}

.settings-tab--active {
  text-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.settings-panel {
  transition: box-shadow 200ms ease, transform 200ms ease;
  background: linear-gradient(135deg, var(--surface-muted), var(--surface-alt));
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border-soft), inset 0 1px 0 color-mix(in srgb, var(--text-on-brand) 12%, transparent);
}
.settings-panel:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-soft), inset 0 1px 0 color-mix(in srgb, var(--text-on-brand) 16%, transparent);
}

.form-input {
  background: var(--input-bg);
  color: var(--text-primary);
}
.form-input:hover:not(:disabled, :focus) {
  background: var(--input-bg);
}
.form-input:focus {
  background: var(--input-bg);
}

.input-addon {
  background: var(--surface-muted);
}

.btn.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: var(--shadow-glow);
}
.btn.btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-glow);
}

.status-dot--pulse {
  animation: app-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes app-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 6px currentcolor;
    opacity: 100%;
  }
  50% {
    box-shadow: 0 0 12px currentcolor;
    opacity: 50%;
  }
}
.connection-status {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.connection-status--connected {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.connection-status--connected .status-dot {
  background: #22c55e;
  animation: app-dot-pulse 2s ease-in-out infinite;
}
.connection-status--disconnected {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.connection-status--connecting {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.connection-status--connecting .status-dot {
  animation: app-dot-pulse 0.5s ease-in-out infinite;
}

.hierarchy-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface-subtle);
  font-size: 0.8125rem;
}
.hierarchy-breadcrumb__item {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--text-muted);
}
.hierarchy-breadcrumb__item--current {
  font-weight: 500;
  color: var(--text-primary);
}
.hierarchy-breadcrumb__item a {
  transition: color 200ms ease;
  color: inherit;
  text-decoration: none;
}
.hierarchy-breadcrumb__item a:hover {
  color: #3b82f6;
}
.hierarchy-breadcrumb__separator {
  opacity: 40%;
  color: var(--text-muted);
}

.quick-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-subtle);
}
.quick-actions__btn {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.quick-actions__btn:disabled, .quick-actions__btn[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.quick-actions__btn:focus {
  outline: none;
}
.quick-actions__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.quick-actions__btn {
  height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
}
.quick-actions__btn:hover:not(:disabled) {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}
.quick-actions__btn {
  flex-direction: column;
  gap: 0.375rem;
  min-width: 80px;
  padding: 0.75rem;
}
.quick-actions__btn:hover {
  background: var(--color-primary-bg);
}
.quick-actions__btn:hover i {
  transform: scale(1.1);
}
.quick-actions__btn i {
  font-size: 1.25rem;
  color: #3b82f6;
}
.quick-actions__btn span {
  font-size: 0.75rem;
}

#components-reconnect-modal {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1200;
  width: min(42rem, 100vw - 2rem);
  margin: 0 auto;
  pointer-events: none;
}
#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected {
  display: block;
}
#components-reconnect-modal.app-reconnect-banner--dismissed {
  display: none;
}

.app-reconnect-banner__panel {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--surface-muted) 82%, transparent));
  box-shadow: var(--shadow-lg), 0 18px 36px color-mix(in srgb, var(--surface-scrim) 36%, transparent);
  backdrop-filter: blur(18px) saturate(125%);
  pointer-events: auto;
}

.app-reconnect-banner__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.app-reconnect-banner__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.app-reconnect-banner__message {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.app-reconnect-banner__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.app-reconnect-banner__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.app-reconnect-banner__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.app-reconnect-banner__action:disabled, .app-reconnect-banner__action[aria-disabled=true] {
  opacity: 55%;
  cursor: not-allowed;
}

.app-reconnect-banner__action--outline {
  border-color: var(--border-strong);
  background: var(--surface-elevated);
}

.app-reconnect-banner__action--outline:hover:not(:disabled, [aria-disabled=true]) {
  border-color: var(--accent);
  color: var(--accent);
}

.app-reconnect-banner__action--ghost {
  color: var(--text-secondary);
}

.app-reconnect-banner__action--ghost:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--surface-muted);
  color: var(--text-primary);
}

#components-reconnect-modal.components-reconnect-show .app-reconnect-banner__panel {
  border-color: color-mix(in srgb, var(--warning) 32%, var(--border-soft));
}

#components-reconnect-modal.components-reconnect-failed .app-reconnect-banner__panel,
#components-reconnect-modal.components-reconnect-rejected .app-reconnect-banner__panel {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border-soft));
}

@media (width <= 768px) {
  .app-reconnect-banner__panel {
    flex-direction: column;
    align-items: stretch;
  }
  .app-reconnect-banner__actions {
    justify-content: flex-start;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Helper utilities, typography, and responsive grids */
.section-title {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.meta-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meta-value {
  font-weight: 600;
}

.metric-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}
.metric-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sr-only-focusable:focus, .sr-only-focusable:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.375rem 0.5rem;
  overflow: visible;
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  clip-path: none;
  white-space: normal;
}

.app-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

.send-icon,
.spinner-icon {
  font-size: 1.3rem;
}

/* Redirect/Loading states */
.redirect-loading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 1rem;
  color: var(--text-secondary);
}

.redirect-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid color-mix(in srgb, var(--border-default) 78%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: redirect-spin 0.8s linear infinite;
}

@keyframes redirect-spin {
  to {
    transform: rotate(360deg);
  }
}
.text-muted,
.muted-text {
  color: var(--text-muted) !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-start {
  text-align: left !important;
}

.text-primary {
  color: var(--brand) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-dark {
  color: var(--text) !important;
}

.small {
  font-size: var(--fs-13, 13px);
}

.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.p-0 {
  padding: 0 !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.card {
  border: 1px solid var(--border-default);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(18px);
}

.card-body {
  padding: 1.5rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.col {
  flex: 1 1 0;
  min-width: 0;
}

.col-md-4,
.col-md-6,
.col-md-8 {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
}
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13, 13px);
  color: var(--text-primary);
}
table.table th,
table.table td {
  height: var(--row-h, 36px);
  padding: 0 var(--s-3, 0.75rem);
  border-bottom: 1px solid var(--table-border-color);
  text-align: left;
  vertical-align: middle;
}
table.table thead th {
  height: var(--row-h-sm, 30px);
  background: var(--table-header-bg);
  font-family: var(--font-mono, inherit);
  font-size: var(--fs-11, 11px);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow, 0.1em);
  text-transform: uppercase;
  color: var(--table-header-color);
  white-space: nowrap;
}

table.table.table-sm th,
table.table.table-sm td {
  padding: 0.5rem 0.75rem;
}

table.table.table-hover tbody tr:hover {
  background: var(--table-row-hover-bg);
}

.badge.bg-primary {
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.badge.bg-secondary {
  border: 1px solid var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

/* Component pages */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Master Pages Stylesheet
   Comprehensive styling for all application pages
   ========================================================================== */
/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */
.login-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 420px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.login-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
}

.login-logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-logo .brand__accent {
  background: linear-gradient(135deg, #3b82f6, rgb(98.2, 155, 247.8));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.login-logo .brand__name {
  color: var(--text-primary);
}

.login-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.login-header p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Login Tabs */
.login-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
}

.login-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.login-tab:hover {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}

.login-tab--active {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: #3b82f6;
}
.login-tab--active:hover {
  background: rgba(59, 130, 246, 0.2);
}

/* Login Form */
.login-form {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-color: var(--border-soft);
  background: var(--surface-muted);
}
.login-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.login-form .form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.login-form .xw-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.login-form .xw-input::-moz-placeholder {
  color: var(--text-muted);
}
.login-form .xw-input::placeholder {
  color: var(--text-muted);
}
.login-form .xw-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}
.login-form .form-actions {
  margin-top: 0.75rem;
}
.login-form .btn-primary {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.login-form .btn-primary:disabled, .login-form .btn-primary[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}
.login-form .btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: var(--shadow-sm);
  color: var(--text-on-brand);
}
.login-form .btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.login-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.login-link {
  font-size: 0.85rem;
  color: #3b82f6;
  text-decoration: none;
  transition: color 120ms ease;
}
.login-link:hover {
  color: rgb(102.12, 157.5, 247.98);
  text-decoration: underline;
}

/* Development Mode Section */
.login-dev {
  padding: 1rem;
  border: 1px dashed var(--color-warning-border);
  border-radius: 1rem;
  background: var(--color-warning-bg);
  text-align: center;
}
.login-dev h2 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-warning);
}
.login-dev p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.login-dev .btn-link {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-warning-border);
  border-radius: 0.75rem;
  background: var(--color-warning-bg);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.login-dev .btn-link:hover:not(:disabled) {
  background: rgba(249, 115, 22, 0.2);
}

/* ==========================================================================
   PRODUCTS PAGE
   ========================================================================== */
.products-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.products-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.products-title h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}
.products-title p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.products-header--topbar .products-title h1 {
  display: none;
}

.products-metrics {
  display: flex;
  gap: 0.75rem;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: center;
  min-width: 80px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.metric-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.products-filter-pill {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--brand-line);
  border-radius: 1rem;
  background: var(--brand-soft);
}

/* Product Search */
.product-search {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
}

.product-search__input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: 1rem;
  background: var(--input-bg);
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: border-color 120ms ease;
}
.product-search__input::-moz-placeholder {
  color: var(--text-muted);
}
.product-search__input::placeholder {
  color: var(--text-muted);
}
.product-search__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

.product-search__actions {
  display: flex;
  gap: 0.5rem;
}

/* Section Headers */
.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.section-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Recent Section */
.recent-section {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.recent-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.recent-card:hover {
  border-color: var(--brand-line);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.recent-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}
.recent-card__header h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.recent-card__status {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-ok {
  border: 1px solid var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.status-warning {
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.status-danger {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.recent-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.recent-card__meta span {
  display: flex;
  gap: 0.125rem;
}
.recent-card__meta strong {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

.recent-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.recent-card__timestamp {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Results Section */
.results-section {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.results-placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.results-placeholder.error {
  border: 1px solid var(--danger-line);
  border-radius: 1rem;
  background: var(--danger-soft);
  color: var(--danger);
}
.results-placeholder span:first-child {
  opacity: 50%;
  font-size: 2.5rem;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.product-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.product-card:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.3);
  transform: translateY(-3px);
}

.product-card__media {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--surface-inset);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.75rem;
}

.product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 30%;
  font-size: 3rem;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.product-card__body header h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.product-card__meta span {
  display: flex;
  gap: 0.125rem;
}

.product-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.metric {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}
.metric strong {
  color: #fff;
}

/* Tag List */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag-list li {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

/* AI Badges */
.ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  white-space: nowrap;
  font-size: 0.65rem;
}

/* Product Card Footer */
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-inset);
}

.product-card__flags {
  display: flex;
  gap: 0.25rem;
}

.flag {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-pill-muted);
  white-space: nowrap;
  font-size: 0.7rem;
}

.flag-danger {
  border: 1px solid rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.18);
  color: rgb(250.52, 202.64, 202.64);
}
:root[data-theme=light] .flag-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: rgb(68.76, 33.8, 48.24);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .flag-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.12);
    color: rgb(68.76, 33.8, 48.24);
  }
}

.flag-warning {
  border: 1px solid rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.18);
  color: rgb(253.32, 215.8, 189.76);
}
:root[data-theme=light] .flag-warning {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.12);
  color: rgb(71.16, 45.08, 37.2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .flag-warning {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.12);
    color: rgb(71.16, 45.08, 37.2);
  }
}

.flag-ok {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.18);
  color: rgb(193.12, 238.76, 209.92);
}
:root[data-theme=light] .flag-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(19.56, 64.76, 54.48);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .flag-ok {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.12);
    color: rgb(19.56, 64.76, 54.48);
  }
}

/* Pagination */
.product-pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

/* Link Button */
.link-button {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3b82f6;
  cursor: pointer;
  transition: color 120ms ease;
}
.link-button:hover {
  color: rgb(102.12, 157.5, 247.98);
  text-decoration: underline;
}

/* ==========================================================================
   SHARED BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled, .btn[aria-disabled=true] {
  opacity: 45%;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: var(--shadow-sm);
  color: var(--text-on-brand);
}
.btn-primary:hover:not(:disabled, [aria-disabled=true]) {
  background: linear-gradient(135deg, #2563eb, rgb(20.5714285714, 84.3428571429, 224.2285714286));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  border-color: var(--border-strong);
  background: var(--surface-muted-strong);
  box-shadow: none;
  color: #fff;
}
.btn-secondary:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--surface-subtle);
  transform: translateY(-1px);
}

.btn-link {
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3b82f6;
  cursor: pointer;
  transition: color 120ms ease;
}
.btn-link:hover:not(:disabled) {
  color: rgb(102.12, 157.5, 247.98);
  text-decoration: underline;
}

/* ==========================================================================
   SETTINGS PAGES
   ========================================================================== */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.settings-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.settings-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
}
.settings-header p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Channels Page */
.channels-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.channel-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.channel-card:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  transform: translateY(-2px);
}

.channel-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.channel-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 1rem;
  background: var(--brand-soft);
  font-size: 1.5rem;
}

.channel-card__info {
  flex: 1;
}
.channel-card__info h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}
.channel-card__info p {
  margin: 0.125rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.channel-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.channel-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: center;
  text-align: center;
}
.channel-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.channel-stat .stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.channel-card__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .products-page,
  .settings-page,
  .channels-page {
    padding: 1rem;
  }
  .products-header {
    flex-direction: column;
  }
  .product-search {
    flex-direction: column;
  }
  .product-search__actions {
    width: 100%;
  }
  .product-search__actions .btn {
    flex: 1;
  }
}
@media (max-width: 768px) {
  .login-page {
    padding: 1.5rem;
  }
  .products-metrics {
    flex-wrap: wrap;
  }
  .metric-card {
    flex: 1 1 auto;
    min-width: 70px;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
    MODERN PRODUCT LIST DESIGN
    ========================================================================== */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.scoped-product-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
}

.scoped-product-list-page__empty {
  display: block;
}

/* Modern Header - Clean and minimal, full width */
.products-header--modern {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

.products-header__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.products-header__icon {
  font-size: 1.5rem;
}

.products-header__text h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.products-header__subtitle {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.scope-context-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.375rem;
}

.scope-context-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.scope-pill {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  box-shadow: var(--shadow-sm);
}

.scope-pill__icon {
  font-size: 1rem;
}

.scope-pill__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.scope-pill__label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scope-pill__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.scope-reset-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--color-primary-border);
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.scope-reset-btn:hover {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(59, 130, 246, 0.2);
}
.scope-reset-btn:disabled {
  opacity: 55%;
  cursor: not-allowed;
}

.scope-reset-btn--import {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--success);
}
.scope-reset-btn--import:hover {
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(34, 197, 94, 0.25);
}

.scope-reset-btn--export {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--info);
}
.scope-reset-btn--export:hover {
  border-color: rgba(56, 189, 248, 0.65);
  background: rgba(56, 189, 248, 0.25);
}

/* Modern Toolbar */
.products-toolbar--modern {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border: none;
  background: transparent;
}

.products-toolbar__search-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.search-input-wrapper {
  display: flex;
  position: relative;
  flex: 1;
  align-items: center;
  max-width: 200px;
}
.search-input-wrapper .search-clear-btn {
  display: flex;
  position: absolute;
  right: 6px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: calc(0.5rem / 2);
  background: var(--button-subtle-bg);
  color: var(--text-muted);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  cursor: pointer;
}
.search-input-wrapper .search-clear-btn:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.search-input-wrapper .search-clear-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.search-input-wrapper .search-clear-btn svg {
  width: 12px;
  height: 12px;
}

.search-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.search-icon svg {
  width: 100%;
  height: 100%;
}

.search-input {
  width: 100%;
  padding: 8px 36px 8px 34px;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--input-bg);
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.search-input::-moz-placeholder {
  color: var(--text-muted);
}
.search-input::placeholder {
  color: var(--text-muted);
}
.search-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.5);
}

.search-options-btn {
  display: flex;
  position: absolute;
  right: 6px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: calc(0.5rem / 2);
  background: transparent;
  color: var(--text-muted);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  cursor: pointer;
}
.search-options-btn:hover {
  background: var(--button-subtle-bg);
  color: var(--text-secondary);
}
.search-options-btn svg {
  width: 14px;
  height: 14px;
}

/* Filter Dropdown - Match design exactly */
.filter-dropdown {
  position: relative;
}
.filter-dropdown.open .filter-btn {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.3);
}

.filter-btn {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--color-primary-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--color-primary-bg);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.filter-btn:hover, .filter-btn.filter-btn--active {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.3);
}
.filter-btn.filter-btn--active {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(59, 130, 246, 0.35);
}
.filter-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24);
}
.filter-btn .filter-icon {
  width: 14px;
  height: 14px;
}

.filter-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 180px;
  padding: 6px 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--dropdown-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.filter-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text-secondary);
  transition: background 120ms ease;
  cursor: pointer;
}
.filter-dropdown__item:hover {
  background: var(--brand-soft);
}
.filter-dropdown__item.filter-dropdown__item--active {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--accent);
}

.filter-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* Counter */
.products-toolbar__counter {
  display: flex;
  align-items: center;
}

.counter-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.counter-text strong {
  color: var(--text-primary);
}

/* Modern Results Section */
.results-section--modern {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
}

/* Modern Pagination */
.product-pagination--modern {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border: none;
  border-top: 1px solid var(--border-soft);
  background: transparent;
}

.pagination-info,
.pagination-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pagination-size {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.pagination-size label {
  margin: 0;
}
.pagination-size .pagination-page-size {
  min-width: 72px;
  padding: 2px 6px;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--input-bg);
  font-size: 0.75rem;
  color: var(--text-primary);
}

.pagination-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-soft);
  border-radius: calc(0.5rem / 2);
  background: var(--surface-alt);
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  cursor: pointer;
}
.pagination-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: var(--brand-soft);
  color: var(--accent);
}
.pagination-btn:disabled {
  opacity: 30%;
  cursor: not-allowed;
}

.pagination-current {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.pagination-current strong {
  color: var(--text-primary);
}

/* Modern Product Table Styles - Higher specificity to override product-editor.scss */
.scoped-product-list .product-table-wrapper .product-table {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 1px 0 var(--line);
  border-collapse: separate;
  border-spacing: 0;
}

.scoped-product-list .product-table-wrapper .product-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 16px;
  border-bottom: 1px solid var(--table-border-color);
  background: var(--table-header-bg);
  backdrop-filter: blur(8px);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  color: var(--table-header-color);
}

.scoped-product-list .product-table-wrapper .product-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--table-border-color);
  vertical-align: middle;
  font-size: 0.85rem;
}

.scoped-product-list .product-table-wrapper .product-table tbody tr {
  transition: background 120ms ease, box-shadow 120ms ease;
}
.scoped-product-list .product-table-wrapper .product-table tbody tr:nth-child(even) {
  background: var(--table-header-bg);
}
.scoped-product-list .product-table-wrapper .product-table tbody tr:hover {
  background: var(--table-row-hover-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
.scoped-product-list .product-table-wrapper .product-table tbody tr:last-child td {
  border-bottom: none;
}

.scoped-product-list .product-table-wrapper .product-table tbody tr.product-table__row--selected {
  background: var(--brand-soft);
}
.scoped-product-list .product-table-wrapper .product-table tbody tr.product-table__row--selected:nth-child(even) {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}

.scoped-product-list .product-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch;
}

.scoped-product-list .channel-product-table-surface__cards {
  display: none;
}

.scoped-product-list .channel-product-card {
  gap: 0.75rem;
}

.scoped-product-list .channel-product-card__header {
  align-items: flex-start;
}

.scoped-product-list .channel-product-card__selection {
  align-self: flex-start;
}

.scoped-product-list .channel-product-card__product {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.scoped-product-list .channel-product-card__details {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.scoped-product-list .channel-product-card__details h4 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.scoped-product-list .channel-product-table__open-link,
.scoped-product-list .channel-product-card__open-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.scoped-product-list .channel-product-table__open-link:hover,
.scoped-product-list .channel-product-table__open-link:focus-visible,
.scoped-product-list .channel-product-card__open-link:hover,
.scoped-product-list .channel-product-card__open-link:focus-visible {
  color: var(--color-primary);
}

.scoped-product-list .channel-product-table__open-link:focus-visible,
.scoped-product-list .channel-product-card__open-link:focus-visible {
  outline: none;
}

.scoped-product-list .channel-product-table__open-link-icon,
.scoped-product-list .channel-product-card__open-link-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.scoped-product-list .channel-product-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoped-product-list .channel-product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
}

.scoped-product-list .channel-product-card__listings {
  display: grid;
  gap: 0.5rem;
}

.scoped-product-list .channel-product-card__listing {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}

.scoped-product-list .channel-product-card__listing:first-child {
  padding-top: 0;
  border-top: none;
}

.scoped-product-list .channel-product-card__listing--empty {
  justify-items: flex-start;
}

.scoped-product-list .channel-product-card__listing-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.scoped-product-list .channel-product-card__listing-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.scoped-product-list .channel-product-card__listing-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.scoped-product-list .channel-product-card__listing-metrics div {
  display: grid;
  gap: 4px;
}

.scoped-product-list .channel-product-card__listing-metrics dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scoped-product-list .channel-product-card__listing-metrics dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  margin: 0;
}

.scoped-product-list .channel-product-card__sync {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.scoped-product-list .channel-product-card__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

@media (width <= 900px) {
  .scoped-product-list .product-table__col-ean,
  .scoped-product-list .product-table__ean,
  .scoped-product-list .product-table__col-org,
  .scoped-product-list .product-table__org,
  .scoped-product-list .product-table__col-category,
  .scoped-product-list .product-table__category,
  .scoped-product-list .product-table__col-sync,
  .scoped-product-list .product-table__sync {
    display: none;
  }
  .scoped-product-list .channel-product-table-wrapper {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .scoped-product-list .channel-product-table-surface__table {
    display: none;
  }
  .scoped-product-list .channel-product-table-surface__cards {
    display: grid;
    gap: 0.5rem;
  }
  .scoped-product-list .channel-product-card__listing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scoped-product-list .channel-product-card__actions {
    justify-content: flex-start;
  }
}
@media (width <= 640px) {
  .scoped-product-list .channel-product-card__product {
    align-items: center;
  }
  .scoped-product-list .channel-product-card__details h4 {
    white-space: normal;
  }
  .scoped-product-list .channel-product-card__listing-header {
    align-items: flex-start;
  }
  .scoped-product-list .channel-product-card__listing-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Mission Control product list shell */
.scoped-product-list--mission-control {
  gap: 0;
  min-height: 0;
}

.scoped-product-list--mission-control .products-list-shell {
  min-height: min(860px, 100vh - 148px);
}

.scoped-product-list--mission-control .scoped-product-list__subtitle-dot {
  color: var(--text-3);
}

.scoped-product-list--mission-control .scoped-product-list__filter-count {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand);
}

.scoped-product-list--mission-control .products-toolbar--xw-filters {
  display: inline-flex;
  align-items: center;
  width: auto;
}

.scoped-product-list--mission-control .products-toolbar--xw-filters .toolbar-surface {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.scoped-product-list--mission-control .products-toolbar--xw-filters .filter-bar__filters,
.scoped-product-list--mission-control .products-toolbar--xw-filters .filter-bar__actions,
.scoped-product-list--mission-control .products-toolbar--xw-filters .toolbar-surface__extras {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.scoped-product-list--mission-control .products-toolbar--xw-filters .filter-btn,
.scoped-product-list--mission-control .preset-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
}

.scoped-product-list--mission-control .filter-menu--panel {
  z-index: 80;
}

.scoped-product-list--mission-control .advanced-filters-panel {
  flex: 0 0 auto;
  margin: 16px 24px 0;
  border-radius: var(--r-sm);
}

.scoped-product-list--mission-control .scoped-product-list__results {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.scoped-product-list--mission-control .results-placeholder,
.scoped-product-list--mission-control .xw-empty {
  margin: 24px;
}

.scoped-product-list--mission-control .products-list-grid {
  padding: 16px 24px;
}

.scoped-product-list--mission-control .xw-product-card.product-card {
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}

.scoped-product-list--mission-control .xw-product-card.product-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.scoped-product-list--mission-control .xw-product-card .product-card__select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
}

.scoped-product-list--mission-control .xw-product-card .product-card__media {
  position: relative;
  aspect-ratio: 4/3;
  border: 0;
  border-radius: 0;
  background: var(--bg-2);
}

.scoped-product-list--mission-control .xw-product-card .product-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.scoped-product-list--mission-control .xw-product-card .product-card__image-count {
  display: inline-flex;
  position: absolute;
  right: 10px;
  bottom: 10px;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
}

.scoped-product-list--mission-control .xw-product-card .product-card__agent-chip--media {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoped-product-list--mission-control .xw-product-card .product-card__body {
  gap: 10px;
  padding: 14px;
}

.scoped-product-list--mission-control .xw-product-card .product-card__body h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.scoped-product-list--mission-control .xw-product-card .product-card__meta {
  gap: 4px 8px;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.scoped-product-list--mission-control .xw-product-card .product-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scoped-product-list--mission-control .xw-product-card .product-card__mission-stats {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.scoped-product-list--mission-control .xw-product-card .product-card__price {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.scoped-product-list--mission-control .xw-product-card .product-card__stock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.scoped-product-list--mission-control .xw-product-card .product-card__stock.stock-low,
.scoped-product-list--mission-control .xw-product-card .product-card__stock.stock-out {
  color: var(--warn);
}

.scoped-product-list--mission-control .xw-product-card .product-card__mission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scoped-product-list--mission-control .xw-product-card .product-card__mission-badges .badge {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 9px;
}

.scoped-product-list--mission-control .xw-product-card .metric {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
}

.scoped-product-list--mission-control .xw-product-card .ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scoped-product-list--mission-control .xw-product-card .product-card__footer {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.scoped-product-list--mission-control .xw-product-card .product-card__flags {
  min-width: 0;
}

.scoped-product-list--mission-control .product-table-wrapper.products-data-table {
  flex: 1;
  min-height: 0;
  /* The results section already insets its content by 24px; a second margin here
     double-inset the grid (stray top/left offset on shop catalog vs. approvals). */
  margin: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scoped-product-list--mission-control .product-table-wrapper.products-data-table .product-table {
  border-radius: 0;
}

.scoped-product-list--mission-control .product-list-foot__size {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.scoped-product-list--mission-control .product-list-foot__select {
  width: auto;
  min-width: 70px;
  height: 28px;
  padding-block: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
}

@media (width <= 900px) {
  .scoped-product-list--mission-control .products-list-shell {
    min-height: min(820px, 100vh - 112px);
  }
  .scoped-product-list--mission-control .product-list-foot {
    align-items: flex-start;
  }
  .scoped-product-list--mission-control .product-list-foot .xw-dg-foot__right {
    align-items: flex-start;
  }
}
@media (width <= 768px) {
  .scoped-product-list--mission-control .product-table-wrapper.products-data-table .data-table-surface--responsive .data-table-surface__table {
    display: block;
  }
  .scoped-product-list--mission-control .product-table-wrapper.products-data-table .data-table-surface--responsive .data-table-surface__cards {
    display: none;
  }
}
@media (width <= 900px) {
  .scoped-product-list--mission-control .product-table-wrapper.products-data-table .product-table__col-sync,
  .scoped-product-list--mission-control .product-table-wrapper.products-data-table .product-table__sync {
    display: table-cell;
  }
}
/* Light-mode overrides removed: the base rules above now paint these surfaces with
   theme-adaptive tokens (--surface-1, --line, --shadow-md, --table-* and brand-soft tints),
   so the dedicated `[data-theme="light"]` / `prefers-color-scheme: light` re-flips were
   fully redundant. The tokens supply the correct light values automatically. */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Channel Products Table */
.scoped-product-list .channel-product-table__checkbox,
.scoped-product-list .channel-product-table__product,
.scoped-product-list .channel-product-table__ean {
  vertical-align: top;
}

.scoped-product-list .product-table__col-product {
  width: 30%;
  max-width: 440px;
}

.scoped-product-list .product-table__product {
  max-width: 440px;
}

.scoped-product-list .channel-product-table__col-product {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 28%;
  max-width: 400px;
  box-shadow: 10px 0 18px -18px rgba(0, 0, 0, 0.3);
}

.scoped-product-list .channel-product-table__product {
  position: sticky;
  left: 0;
  z-index: 1;
  max-width: 400px;
  background: var(--surface-muted);
  box-shadow: 10px 0 18px -18px rgba(0, 0, 0, 0.3);
}

.scoped-product-list .channel-product-table__col-ean,
.scoped-product-list .channel-product-table__ean {
  width: 160px;
}

.scoped-product-list .channel-product-table__col-shop {
  width: 220px;
}

.scoped-product-list .channel-product-table__col-price {
  width: 120px;
}

.scoped-product-list .channel-product-table__col-stock {
  width: 140px;
}

.scoped-product-list .channel-product-table__col-synced {
  width: 170px;
}

.scoped-product-list .product-table__col-sync {
  width: 170px;
  min-width: 170px;
}

.scoped-product-list .shop-product-table-wrapper .shop-product-table {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
}

.scoped-product-list .shop-product-table-wrapper .product-table__col-product {
  width: 34%;
  max-width: none;
}

.scoped-product-list .shop-product-table-wrapper .shop-product-table__product-cell {
  gap: 10px;
  min-width: 0;
}

.scoped-product-list .shop-product-table-wrapper .shop-product-table__thumb {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  overflow: hidden;
}

.scoped-product-list .shop-product-table-wrapper .shop-product-table__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.scoped-product-list .shop-product-table-wrapper .product-table__col-price {
  width: 96px;
}

.scoped-product-list .shop-product-table-wrapper .product-table__col-stock {
  width: 70px;
}

.scoped-product-list .shop-product-table-wrapper .product-table__col-status {
  width: 124px;
}

.scoped-product-list .shop-product-table-wrapper .product-table__col-sync {
  width: 128px;
  min-width: 128px;
}

.scoped-product-list .channel-product-table__col-active {
  width: 120px;
}

.scoped-product-list .channel-product-table__col-actions {
  width: 110px;
  min-width: 110px;
  text-align: right;
}

.scoped-product-list .product-table-wrapper .product-table tbody tr:nth-child(even) .channel-product-table__product {
  background: var(--table-header-bg);
}

.scoped-product-list .product-table-wrapper .product-table tbody tr:hover .channel-product-table__product {
  background: var(--table-row-hover-bg);
}

.scoped-product-list .product-table-wrapper .product-table tbody tr.product-table__row--selected .channel-product-table__product {
  background: var(--brand-soft);
}

.scoped-product-list .product-table-wrapper .product-table tbody tr.product-table__row--selected:nth-child(even) .channel-product-table__product {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}

.scoped-product-list .product-table__col-actions {
  width: 110px;
  min-width: 110px;
  text-align: right;
}

.scoped-product-list .product-table__col-org,
.scoped-product-list .product-table__org {
  width: 200px;
}

/* Product Info Cell - High specificity */
.scoped-product-list .product-table__info,
.scoped-product-list .product-table-wrapper .product-table__info {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 12px;
  align-items: center !important;
}

.scoped-product-list .product-table__thumb,
.scoped-product-list .product-table-wrapper .product-table__thumb,
.scoped-product-list .product-table-wrapper img.product-table__thumb {
  display: inline-block !important;
  flex-shrink: 0;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  border-radius: 10px;
  background: var(--surface-alt);
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

.scoped-product-list .product-table__thumb-placeholder {
  display: inline-flex !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 68px !important;
  min-width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 1.2rem;
}

.scoped-product-list .product-table__details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.product-table__title {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.product-table__sku {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.product-table__ean {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.product-table__price {
  white-space: nowrap;
}

.product-table__price-value {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  color: var(--success);
  white-space: nowrap;
}

.product-table__category {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.scoped-product-list .product-table__muted,
.scoped-product-list .channel-product-table__muted {
  color: var(--text-muted);
}

.product-table__org {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Stock Badge - Match design (cyan/teal) */
.stock-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Status Badge */
.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.status-badge--active {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-badge--critical {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-badge--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status-badge--muted {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

/* Action Buttons - Match design (square buttons with SVG icons) */
.scoped-product-list .product-table__actions {
  text-align: right;
}

.scoped-product-list .product-table td.product-table__sync {
  display: table-cell;
  vertical-align: middle;
  width: 170px;
  min-width: 170px;
  padding: 12px 16px;
  white-space: nowrap;
}

.scoped-product-list .shop-product-table-wrapper .product-table td.product-table__sync {
  width: 128px;
  min-width: 128px;
}

.scoped-product-list .product-table__sync-wrap {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  place-content: center flex-start;
  min-height: 68px;
  white-space: nowrap;
}

.scoped-product-list .product-table__sync-wrap > * {
  flex: 0 0 auto;
}

.scoped-product-list .product-table__sync .sync-status-badge {
  display: inline-flex;
  white-space: nowrap;
}

.scoped-product-list .shop-product-table-wrapper .product-table__info {
  min-height: 0;
}

.scoped-product-list .shop-product-table-wrapper .product-table__details {
  gap: 0;
}

.scoped-product-list .shop-product-table-wrapper .product-table tbody td {
  padding-block: 8px;
  vertical-align: middle;
}

.scoped-product-list .shop-product-table__stock,
.scoped-product-list .shop-product-table__position,
.scoped-product-list .shop-product-table__agent-empty {
  color: var(--text-secondary);
  white-space: nowrap;
}

.scoped-product-list .shop-product-table__stock {
  color: var(--text-primary);
}

.scoped-product-list .shop-product-table__agent-badge {
  display: inline-flex;
}

.scoped-product-list .sync-conflict-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

.scoped-product-list .sync-channel-count {
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  white-space: nowrap;
}

.scoped-product-list .sync-channel-count__value {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.scoped-product-list .sync-channel-count__icon {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  vertical-align: middle;
}

.scoped-product-list .product-table td.product-table__actions {
  display: table-cell;
  min-width: 110px;
  padding: 12px 16px;
  vertical-align: middle;
  white-space: nowrap;
}

.scoped-product-list .product-table__actions-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  min-height: 68px;
}

.scoped-product-list .product-table__action,
.scoped-product-list .product-card__action,
.scoped-product-list .channel-product-table__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.scoped-product-list .product-table__action svg,
.scoped-product-list .product-card__action svg,
.scoped-product-list .channel-product-table__action svg {
  width: 14px;
  height: 14px;
}

.scoped-product-list .product-table__action--edit,
.scoped-product-list .product-card__action,
.scoped-product-list .channel-product-table__action--edit {
  background: var(--warn-soft);
  color: var(--warning);
}
.scoped-product-list .product-table__action--edit:hover,
.scoped-product-list .product-card__action:hover,
.scoped-product-list .channel-product-table__action--edit:hover {
  background: color-mix(in srgb, var(--warn) 25%, transparent);
}

.scoped-product-list .channel-product-table__action--view {
  background: var(--brand-soft);
  color: var(--accent);
}
.scoped-product-list .channel-product-table__action--view:hover {
  background: color-mix(in srgb, var(--brand) 25%, transparent);
}

/* Responsive for Modern Layout */
@media (max-width: 768px) {
  .scope-context-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .products-toolbar--modern {
    flex-direction: column;
    align-items: stretch;
  }
  .products-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }
  .products-toolbar-meta {
    flex-direction: column;
    align-items: stretch;
  }
  .products-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .products-counter,
  .products-health-summary {
    justify-content: flex-start;
    width: 100%;
  }
  .products-toolbar__search-group {
    flex-direction: column;
    max-width: 100%;
  }
  .filter-dropdown__menu {
    right: 0;
    left: auto;
  }
  .product-pagination--modern {
    flex-direction: column;
    gap: 0.5rem;
    padding: 8px 10px;
  }
  .products-header-box {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
  }
  .toolbar-surface {
    gap: 0.375rem;
    align-items: stretch;
    padding: 8px 10px;
  }
  .toolbar-surface__search {
    width: 100%;
    min-width: 0;
  }
  .toolbar-surface__extras {
    align-items: stretch;
    width: 100%;
  }
  .filter-dropdown,
  .filter-presets,
  .smart-filter {
    width: 100%;
  }
  .filter-btn,
  .preset-btn,
  .scope-reset-btn {
    min-height: 40px;
    padding: 9px 12px;
  }
  .filter-btn,
  .preset-btn {
    justify-content: center;
    width: 100%;
  }
  .scope-reset-btn {
    justify-content: center;
  }
  .products-counter {
    flex-wrap: wrap;
  }
  .products-counter__range,
  .products-counter__filters {
    min-height: 34px;
  }
  .products-health-summary__chip {
    min-height: 34px;
  }
  .scoped-product-list .search-input {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .scoped-product-list .search-clear-btn {
    width: 22px;
    height: 22px;
  }
  .filter-menu,
  .filter-menu--panel,
  .preset-menu,
  .smart-filter-menu {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .scoped-product-list .results-section--modern .xw-empty.xw-empty--compact {
    min-height: 124px;
    padding: 1rem 0.75rem;
  }
  .scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__icon {
    font-size: 1.5rem;
  }
  .scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__title {
    font-size: 0.92rem;
  }
  .scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__body {
    font-size: 0.78rem;
  }
  .pagination-size .pagination-page-size {
    min-height: 34px;
  }
  .pagination-btn {
    width: 34px;
    height: 34px;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   REUSABLE SEARCH & FILTER COMPONENTS
   ========================================================================== */
/* Products Header Box - Rounded container for header + toolbar */
.products-header-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
}

/* Unified toolbar surface for search + filter */
.toolbar-surface {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface);
  box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.25);
}

.toolbar-surface__search {
  flex: 1;
}

/* Products Toolbar Row - Horizontal layout */
.products-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.products-toolbar-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.products-toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* ProductSearchFilterToolbar - Inline layout */
.product-search-filter-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.product-search-filter-toolbar.products-toolbar--inline {
  flex: 1;
}
.product-search-filter-toolbar .filter-bar {
  margin-bottom: 0;
}
.product-search-filter-toolbar .filter-bar__search {
  flex: 1 1 320px;
  min-width: 240px;
  max-width: none;
}
.product-search-filter-toolbar .filter-bar__filters {
  flex: 0 0 auto;
  min-width: 0;
}
.product-search-filter-toolbar .filter-bar__actions {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0;
}
.product-search-filter-toolbar .toolbar-search {
  width: 100%;
}

/* Single Filter Button - Additional states */
/* Filter Menu Dropdown */
.filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--dropdown-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.filter-menu--panel {
  min-width: 240px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--dropdown-bg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}
.filter-menu--panel:focus-visible {
  outline: none;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Keep product filter dropdown surfaces readable and non-transparent across themes. */
.scoped-product-list .filter-menu,
.scoped-product-list .filter-menu--panel,
.scoped-product-list .preset-menu,
.scoped-product-list .smart-filter-menu {
  backdrop-filter: none;
  opacity: 100%;
  background-image: none;
}

.scoped-product-list .filter-dropdown__menu,
.scoped-product-list .filter-dropdown-content {
  backdrop-filter: none;
  opacity: 100%;
  background-image: none;
}

.filter-menu-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.filter-menu-section:last-child {
  border-bottom: none;
}

.filter-menu-label {
  padding: 6px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filter-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text-secondary);
  transition: background 120ms ease;
  cursor: pointer;
}
.filter-menu-item:hover {
  background: var(--table-row-hover-bg);
}
.filter-menu-item.active {
  background: var(--table-row-selected-bg);
  color: var(--text-primary);
}
.filter-menu-item:focus-visible {
  outline: none;
  background: var(--table-row-selected-bg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--text-primary);
}
.filter-menu-item .check-icon {
  width: 14px;
  height: 14px;
  color: var(--success);
}

.filter-menu-item__text {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.filter-menu-item__text .app-icon {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.filter-menu-subsection {
  padding: 0 0 6px;
}

.filter-menu-sublabel {
  padding: 4px 14px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filter-menu-dates {
  display: grid;
  gap: 8px;
  padding: 6px 14px 10px;
}

.filter-date-field {
  display: grid;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.filter-date-field input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem / 2);
  background: var(--input-bg);
  font-size: 0.8rem;
  color: var(--text-primary);
}
.filter-date-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

.filter-menu-item--muted {
  color: var(--text-muted);
  cursor: not-allowed;
}

.filter-menu-item--muted .filter-menu-item__text .app-icon {
  color: var(--text-muted);
}

/* Price Inputs in Filter Menu */
.price-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
}
.price-inputs input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem / 2);
  background: var(--input-bg);
  font-size: 0.8rem;
  color: var(--text-primary);
}
.price-inputs input::-moz-placeholder {
  color: var(--text-muted);
}
.price-inputs input::placeholder {
  color: var(--text-muted);
}
.price-inputs input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}
.price-inputs span {
  color: var(--text-muted);
}

.filter-menu-section .price-apply-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 8px 14px;
  padding: 8px 12px;
  border: none;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--brand-soft);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.filter-menu-section .price-apply-btn:hover {
  background: color-mix(in srgb, var(--brand) 30%, transparent);
}
.filter-menu-section .price-apply-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

.filter-menu-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}

.clear-filters-btn {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--danger-soft);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--danger);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.clear-filters-btn:hover {
  background: color-mix(in srgb, var(--danger) 25%, transparent);
}
.clear-filters-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.toolbar-surface__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.filter-presets {
  position: relative;
}

.preset-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  cursor: pointer;
}
.preset-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  color: var(--accent);
}

.preset-btn--ghost {
  border-color: var(--border-soft);
  background: var(--surface-alt);
}

.preset-btn--active {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.28);
  color: var(--accent);
}

.preset-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.35);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-primary);
}

.smart-filter {
  position: relative;
}

.smart-filter-menu {
  min-width: 280px;
}

.smart-filter-item {
  gap: 0.375rem;
  align-items: flex-start;
}
.smart-filter-item .smart-filter-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.smart-filter-item .smart-filter-item__hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.smart-filter-item--clear {
  color: var(--danger);
}
.smart-filter-item--clear:hover {
  background: var(--color-danger-bg);
}

.preset-menu {
  min-width: 260px;
}

.preset-item {
  display: flex;
  align-items: center;
}

.preset-item__meta {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.preset-item__delete {
  margin-right: 8px;
  padding: 6px;
  border: none;
  border-radius: calc(0.5rem * 3 / 4);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}
.preset-item__delete:hover {
  background: var(--color-danger-bg);
  color: var(--danger);
}

.preset-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 6px 14px 12px;
}
.preset-input input {
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem / 2);
  background: var(--input-bg);
  font-size: 0.8rem;
  color: var(--text-primary);
}
.preset-input input::-moz-placeholder {
  color: var(--text-muted);
}
.preset-input input::placeholder {
  color: var(--text-muted);
}

.preset-save-btn {
  padding: 6px 10px;
  border: none;
  border-radius: calc(0.5rem / 2);
  background: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-on-brand);
  cursor: pointer;
}
.preset-save-btn:hover {
  background: #2563eb;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.advanced-filters-panel {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}

.advanced-filters-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.advanced-filters-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.advanced-filters-subtitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

.advanced-filters-actions {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.advanced-filters-clear {
  font-size: 0.8rem;
}

.advanced-filters-empty {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 10px 12px;
  border: 1px dashed var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-alt);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.advanced-filters-empty .app-icon {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.advanced-filters-grid {
  display: grid;
  gap: 0.375rem;
}

.advanced-filter-rule {
  display: grid;
  gap: 0.375rem;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface);
  grid-template-columns: minmax(160px, 1.1fr) minmax(140px, 0.9fr) minmax(180px, 1.2fr) auto;
}

.advanced-filter-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--input-bg);
  font-size: 0.8rem;
  color: var(--text-primary);
}
.advanced-filter-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
}

.advanced-filter-rule__no-value {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.advanced-filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--color-danger-bg);
  color: var(--danger);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.advanced-filter-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

@media (max-width: 768px) {
  .advanced-filter-rule {
    grid-template-columns: 1fr;
  }
}
.products-counter {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
}

.products-counter__range {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--color-muted-border);
  border-radius: 999px;
  background: var(--surface-muted-strong);
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.products-counter__filters {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--color-primary-border);
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.products-health-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.products-health-summary__chip {
  gap: 6px;
  font-size: 0.74rem;
  line-height: 1;
  white-space: nowrap;
}

.products-health-summary__chip .app-icon {
  font-size: 0.78rem;
}

.products-health-summary__chip--total {
  color: var(--color-pill-muted);
}

.products-health-summary__chip--critical {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.products-health-summary__chip--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.products-health-summary__chip--healthy {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* Keep "no results" states compact and aligned with table density. */
.scoped-product-list .results-section--modern .xw-empty.xw-empty--compact {
  gap: 0.6rem;
  min-height: 132px;
  padding: 1rem 0.9rem;
}

.scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__icon {
  font-size: 1.55rem;
}

.scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__title {
  font-size: 0.92rem;
}

.scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__body {
  max-width: 34ch;
  font-size: 0.78rem;
}

.scoped-product-list .results-section--modern .xw-empty.xw-empty--compact .xw-empty__action .btn {
  min-height: 34px;
  padding: 0.4rem 0.75rem;
}

/* SearchInput Component Styles - Extended */
/* FilterDropdown Component Styles - Legacy, kept for backward compatibility */
.filter-dropdown-content {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 200px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--dropdown-bg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

.filter-dropdown-content:focus-visible {
  box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
  outline: none;
}

.filter-toggle-btn:focus-visible,
.filter-item:focus-visible,
.filter-clear-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: transparent;
}

/* Keep the product toolbar interactive while any filter backdrop is open. */
.scoped-product-list .products-header-box,
.scoped-product-list .products-toolbar-row,
.scoped-product-list .product-search-filter-toolbar,
.scoped-product-list .toolbar-surface,
.scoped-product-list .toolbar-surface__extras {
  position: relative;
  z-index: 110;
}

.scoped-product-list .products-toolbar-row .filter-btn,
.scoped-product-list .products-toolbar-row .preset-btn,
.scoped-product-list .products-toolbar-row .scope-reset-btn,
.scoped-product-list .products-toolbar-row .products-counter,
.scoped-product-list .products-toolbar-row .products-health-summary {
  position: relative;
  z-index: 140;
}

.scoped-product-list .filter-menu,
.scoped-product-list .filter-menu--panel {
  z-index: 160;
}

.scoped-product-list .filter-backdrop {
  z-index: 100;
}

/* Avoid blocking sibling toolbar actions when the main filter dropdown is open. */
.scoped-product-list .filter-dropdown > .filter-backdrop {
  pointer-events: none;
}

/* Price Filter Panel - Legacy */
.price-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 260px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

/* Responsive for Filter Components */
@media (max-width: 768px) {
  .product-search-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .product-search-filter-toolbar .filter-bar__search,
  .product-search-filter-toolbar .filter-bar__filters,
  .product-search-filter-toolbar .filter-bar__actions {
    width: 100%;
    min-width: 0;
  }
  .product-search-filter-toolbar .toolbar-search {
    max-width: 100%;
  }
  .product-search-filter-toolbar .toolbar-filter {
    width: 100%;
  }
  .product-search-filter-toolbar .toolbar-filter .filter-toggle-btn {
    justify-content: center;
    width: 100%;
  }
  .filter-dropdown-content,
  .price-filter-panel {
    right: 0;
    left: 0;
  }
  .scoped-product-list .products-header-box {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
  }
  .scoped-product-list .products-toolbar-row {
    gap: 0.5rem;
  }
  .scoped-product-list .toolbar-surface {
    flex-direction: column;
    gap: 0.375rem;
    align-items: stretch;
    padding: 8px 10px;
  }
  .scoped-product-list .toolbar-surface__search,
  .scoped-product-list .filter-dropdown,
  .scoped-product-list .toolbar-surface__extras {
    width: 100%;
    min-width: 0;
  }
  .scoped-product-list .toolbar-surface__extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    align-items: stretch;
  }
  .scoped-product-list .toolbar-surface__extras > * {
    min-width: 0;
  }
  .scoped-product-list .filter-btn,
  .scoped-product-list .preset-btn {
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
  }
  .scoped-product-list .scope-reset-btn {
    min-height: 38px;
    padding: 8px 10px;
  }
  .scoped-product-list .products-toolbar-actions {
    width: 100%;
  }
  .scoped-product-list .products-toolbar-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .scoped-product-list .products-toolbar-actions,
  .scoped-product-list .products-counter,
  .scoped-product-list .products-health-summary {
    width: 100%;
    min-width: 0;
  }
  .scoped-product-list .products-counter {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
  .scoped-product-list .products-counter__range,
  .scoped-product-list .products-counter__filters {
    max-width: 100%;
  }
  .scoped-product-list .products-health-summary {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scoped-product-list .products-health-summary::-webkit-scrollbar {
    height: 4px;
  }
  .scoped-product-list .products-health-summary__chip {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0.7rem;
  }
  .scoped-product-list .search-input {
    min-height: 40px;
  }
  .scoped-product-list .filter-dropdown .filter-menu.filter-menu--panel,
  .scoped-product-list .filter-presets .filter-menu.filter-menu--panel,
  .scoped-product-list .smart-filter .filter-menu.filter-menu--panel {
    right: auto;
    left: 0;
    width: min(100vw - 52px, 360px);
    min-width: min(100vw - 52px, 360px);
    max-width: min(100vw - 52px, 360px);
  }
  .scoped-product-list .results-section--modern .xw-empty.xw-empty--compact {
    min-height: 108px;
    padding: 0.75rem;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.login-logo .brand__accent {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 58%, var(--brand) 42%));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.login-logo .brand__name,
.login-header h1 {
  color: var(--text-primary);
}

.login-header p {
  color: var(--text-secondary);
}

.login-tabs {
  border-color: var(--border-soft);
  background: var(--surface-muted-strong);
}

.login-tab {
  color: var(--text-secondary);
}
.login-tab:hover {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}

.login-tab--active {
  border-color: var(--color-primary-border);
  background: var(--table-row-selected-bg);
  color: var(--color-primary);
}
.login-tab--active:hover {
  background: color-mix(in srgb, var(--color-primary-bg) 88%, transparent);
}

.login-form {
  border-color: var(--border-soft);
  background: var(--surface-muted-strong);
}

.login-form .form-field label {
  color: var(--text-secondary);
}

.login-form .xw-input {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}
.login-form .xw-input::-moz-placeholder {
  color: var(--text-muted);
}
.login-form .xw-input::placeholder {
  color: var(--text-muted);
}
.login-form .xw-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.login-form .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 68%, var(--brand-strong) 32%));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.login-form .btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.login-link {
  color: var(--color-primary);
}
.login-link:hover {
  color: color-mix(in srgb, var(--color-primary) 72%, var(--brand) 28%);
}

.login-dev {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.login-dev h2,
.login-dev .btn-link {
  color: var(--color-warning);
}

.login-dev p {
  color: var(--text-muted);
}

.login-dev .btn-link {
  border-color: var(--color-warning-border);
  background: color-mix(in srgb, var(--color-warning-bg) 92%, transparent);
}
.login-dev .btn-link:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-warning-bg) 100%, transparent);
}

.metric-card {
  border-color: var(--border-soft);
  background: var(--surface-muted-strong);
}

.products-filter-pill {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
}

.product-search {
  border-color: var(--border-soft);
  background: var(--surface-muted-strong);
}

.product-search__input {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}
.product-search__input::-moz-placeholder {
  color: var(--text-muted);
}
.product-search__input::placeholder {
  color: var(--text-muted);
}
.product-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.recent-card {
  border-color: var(--border-default);
  background: var(--surface-muted-strong);
}
.recent-card:hover {
  border-color: var(--color-primary-border);
  background: color-mix(in srgb, var(--surface-overlay) 76%, transparent);
}

.recent-card__header h3 {
  color: var(--text-primary);
}

.status-ok {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Multi-tenant & Environment Management Styles
   ========================================================================== */
/* User Menu (top-right profile/login) */
.user-menu {
  display: flex;
  position: relative;
  z-index: 1200;
  align-items: center;
}
.user-menu .user-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, var(--agent));
}
.user-menu .user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.user-menu .user-avatar--large {
  width: 44px;
  height: 44px;
}

.user-menu--open {
  z-index: 2300;
}

.user-menu__trigger {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: var(--text-primary);
  transition: background-color 120ms ease;
  cursor: pointer;
}
.user-menu__trigger:hover {
  background: var(--action-btn-hover-bg);
}
.user-menu__trigger:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .user-menu__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
}
.user-menu__info {
  display: none;
  min-width: 0;
}

.user-menu__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.user-menu__context {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.user-menu__chevron {
  color: var(--text-secondary);
  transition: transform 120ms ease;
}

.user-menu--open .user-menu__chevron {
  transform: rotate(180deg);
}

.user-menu__login-btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  font: inherit;
  color: var(--text-primary);
  transition: background-color 120ms ease;
  text-decoration: none;
}
.user-menu__login-btn:hover {
  background: var(--line);
  text-decoration: none;
}

.user-menu__login-btn--loading {
  opacity: 82%;
  cursor: progress;
  pointer-events: none;
}

/* Dropdown panel */
.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 2300;
  width: 320px;
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100vh - 96px);
  overflow: hidden auto;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--dropdown-bg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  overscroll-behavior: contain;
}

.user-menu__header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.user-menu__header-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.user-menu__header-info strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.user-menu__header-info span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.user-menu__section {
  padding: 0.5rem 0;
}

.user-menu__section--preferences {
  padding-bottom: 0.75rem;
}

.user-menu__section-title {
  display: block;
  padding: 0 1rem 0.375rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.user-menu__item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text-secondary);
  transition: background-color 120ms ease;
  cursor: pointer;
}
.user-menu__item:hover {
  background: var(--action-btn-hover-bg);
  color: var(--text-primary);
}

.user-menu__item--active {
  background: var(--table-row-selected-bg);
  color: var(--text-primary);
}

.user-menu__item--subtle {
  color: var(--text-muted);
}

.user-menu__item--action {
  color: var(--text-primary);
}

.user-menu__item--danger {
  color: var(--danger);
}
.user-menu__item--danger:hover {
  background: var(--color-danger-bg);
}

.user-menu__item-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.user-menu__item-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  flex: 1;
  min-width: 0;
}

.user-menu__preferences {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem 0.5rem;
}

.user-menu__preference {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.user-menu__preference-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.user-menu__theme-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.user-menu__theme-btn {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--button-subtle-bg);
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  cursor: pointer;
}
.user-menu__theme-btn:hover {
  border-color: var(--accent);
  background: var(--table-row-selected-bg);
  color: var(--text-primary);
}
.user-menu__theme-btn.is-active {
  border-color: var(--accent);
  background: var(--table-row-selected-bg);
  color: var(--text-primary);
}

.user-menu__locale-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.8rem;
  color: var(--text-primary);
}
.user-menu__locale-select:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.user-menu__divider {
  height: 1px;
  background: var(--border-soft);
}

/* Full-page click-catcher */
.user-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: transparent;
}

/* Settings Page Layout */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(100%, 1680px);
  max-width: none;
  padding: 1.5rem 2rem;
}

.settings-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 1rem;
  background: var(--surface-muted);
}

.settings-tab {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.settings-tab:hover {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}

.settings-tab--active {
  background: var(--table-row-selected-bg);
  color: var(--text-primary);
}

/* ==========================================================================
   ENVIRONMENT PAGE - Comprehensive Styling
   ========================================================================== */
.environment-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
}

.environment-card--active.environment-card--active {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 2px var(--color-primary-bg), 0 12px 32px rgba(15, 23, 42, 0.2);
}

.environment-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--brand-line);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--agent) 8%, transparent));
}
.environment-card__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.environment-card__initial {
  background: linear-gradient(135deg, #3b82f6, var(--agent));
  font-size: 1.5rem;
  font-weight: 700;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.environment-card__info {
  flex: 1;
  min-width: 0;
}
.environment-card__info h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.environment-card__slug {
  display: inline-block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.environment-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.badge--owner {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge--role {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.badge--active {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--primary {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.environment-card__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.environment-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.5rem;
}

.environment-card__meta-item {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.environment-card__meta-item .meta-icon {
  font-size: 0.9rem;
}

.environment-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

/* Environment Details Section */
.environment-details {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  margin-top: 0.75rem;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.details-section h3 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.details-section h3 .section-icon {
  font-size: 1.15rem;
}

/* Channel List in Environment Details */
.channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.channel-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.channel-item:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.channel-item--active {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  background: var(--brand-soft);
}

.channel-item__info {
  display: flex;
  flex: 1;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}
.channel-item__info > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.channel-item__info > div strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.9rem;
  color: #fff;
}
.channel-item__info > div small {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.channel-item__icon {
  font-size: 1.25rem;
}

.channel-item__status {
  flex-shrink: 0;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Channels Page */
.channels-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
}

.channel-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.channel-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}
.channel-card {
  cursor: pointer;
}
.channel-card:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.channel-card:focus {
  outline: none;
}
.channel-card:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.channel-card--disabled {
  opacity: 60%;
}

.channel-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.channel-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--brand-line);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--info) 8%, transparent));
  font-size: 1.5rem;
}

.channel-card__info {
  flex: 1;
  min-width: 0;
}
.channel-card__info h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.channel-card__type {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.channel-card__status {
  flex-shrink: 0;
}

.channel-card__body {
  min-height: 32px;
  padding-top: 0.5rem;
}

.channel-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   AUTOMATION PAGE STYLES
   ========================================================================== */
.automation-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-section {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.settings-section h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

.settings-section__desc {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.form-row {
  display: grid;
  gap: 1rem;
}

.form-row--2col {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-row--3col {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.form-field input,
.form-field select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface-2);
  font-size: 0.9rem;
  color: #fff;
  transition: border-color 120ms ease;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.form-field small {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.form-field--toggle label {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
}
.form-field--toggle input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: #3b82f6;
}
.form-field--toggle .toggle-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
}

.days-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.day-checkbox {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface-1);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.day-checkbox:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
}
.day-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}
.day-checkbox span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Rules List */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rule-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.rule-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.rule-card__type {
  font-size: 1rem;
  font-weight: 600;
  color: #3b82f6;
}

.rule-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.add-rule {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.add-rule select {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface-2);
  font-size: 0.9rem;
  color: #fff;
}

/* ==========================================================================
   USER MANAGEMENT PAGE
   ========================================================================== */
.user-management-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.users-table {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.users-table__header {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  grid-template-columns: 48px 1fr 120px 140px 120px;
}

.users-table__row {
  display: grid;
  grid-template-columns: 48px 1fr 120px 140px 120px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms ease;
}
.users-table__row:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.users-table__row:last-child {
  border-bottom: none;
}

.users-table__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, var(--agent));
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}

.users-table__user {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.users-table__user strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.9rem;
  color: #fff;
}
.users-table__user span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.users-table__actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

/* Invite Form */
.invite-form {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.invite-form h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.invite-form__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: flex-end;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 1024px) {
  .environment-page,
  .channels-page,
  .automation-page,
  .user-management-page {
    padding: 1rem;
  }
  .environment-grid,
  .channels-grid {
    grid-template-columns: 1fr;
  }
  .details-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .users-table__header,
  .users-table__row {
    grid-template-columns: 40px 1fr 100px;
  }
  .users-table__header > *:nth-child(4),
  .users-table__header > *:nth-child(5),
  .users-table__row > *:nth-child(4),
  .users-table__row > *:nth-child(5) {
    display: none;
  }
  .invite-form__row {
    grid-template-columns: 1fr;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Admin Dashboard - Gemini-Style Design
   Dark theme with rich gradients, glass panels, and modern aesthetics
   ========================================================================== */
/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN SHELL (Layout)
   ───────────────────────────────────────────────────────────────────────────── */
.admin-shell {
  display: flex;
  min-height: 100vh;
  overflow-x: clip;
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-alt) 40%, var(--surface) 100%);
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--text-on-brand);
  transition: transform 0.18s ease;
  transform: translateY(-160%);
  text-decoration: none;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.admin-sidebar {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  width: 260px;
  min-height: 100vh;
  border-right: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
}
@media (width <= 768px) {
  .admin-sidebar {
    position: fixed;
    z-index: 100;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
  }
  .admin-sidebar.expanded {
    transform: translateX(0);
  }
}

/* Sidebar backdrop (mobile overlay) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.5);
}
@media (width <= 768px) {
  .sidebar-backdrop {
    display: block;
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.admin-brand {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  max-width: 180px;
  min-height: 40px;
  overflow: hidden;
  text-decoration: none;
}

.admin-brand__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  color: var(--accent-primary, var(--public-accent));
}

.admin-brand__text {
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-identity {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.admin-avatar {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: var(--shadow-sm);
}
.admin-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.admin-avatar .avatar-fallback {
  font-size: 1.1rem;
  color: var(--text-on-brand);
}

.admin-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-subtitle {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 0.75rem;
  background: var(--button-subtle-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sidebar-collapse-btn:hover {
  background: var(--button-subtle-hover-bg);
  color: var(--text-primary);
}

.sidebar-collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--button-subtle-hover-bg);
  color: var(--text-primary);
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.nav-section-title {
  margin: 0 0 0.5rem;
  padding: 0 1.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}
.nav-item:hover {
  background: var(--color-primary-bg);
  color: var(--text-primary);
}
.nav-item.active {
  background: var(--color-primary-bg);
  box-shadow: inset 0 0 0 1px var(--color-primary-border);
  color: var(--text-primary);
}

.nav-icon {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 75%;
}
.nav-icon svg {
  width: 18px;
  height: 18px;
}

.nav-label {
  font-weight: 500;
}

.nav-item--locked {
  border: 1px solid var(--border-soft);
  opacity: 65%;
  color: var(--text-muted);
  cursor: not-allowed;
}
.nav-item--locked:hover {
  background: var(--color-primary-bg);
  color: var(--text-secondary);
}

.nav-lock {
  display: inline-flex;
  position: absolute;
  right: -2px;
  bottom: -2px;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-soft);
  color: var(--text-muted);
}

.nav-section--recent {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.nav-item--recent {
  align-items: flex-start;
}
.nav-item--recent .nav-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-label__title {
  font-weight: 600;
}

.nav-label__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.tenant-list {
  max-height: 280px;
  overflow-y: auto;
}
.tenant-list::-webkit-scrollbar {
  width: 4px;
}
.tenant-list::-webkit-scrollbar-thumb {
  border-radius: calc(calc(0.5rem / 2) * 0.75);
  background: var(--border-default);
}

.tenant-item {
  padding: 0.5rem 1.5rem;
  font-size: 0.82rem;
}

.nav-loading,
.nav-empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.nav-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.5rem;
  background: var(--button-subtle-bg);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.spinner-small {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT AREA
   ───────────────────────────────────────────────────────────────────────────── */
.admin-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow-x: clip;
}

/* Top Bar / Header */
@media (min-width: 1280px) {
  .admin-topbar {
    padding: 0 1.5rem;
  }
}
@media (min-width: 1920px) {
  .admin-topbar {
    padding: 0 2rem;
  }
}
.admin-topbar {
  display: flex;
  position: relative;
  z-index: 1200;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.topbar-left {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mobile-menu-btn:hover {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}
@media (width <= 768px) {
  .mobile-menu-btn {
    display: flex;
  }
}

.mobile-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}

.page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  max-width: 320px;
}

.topbar-title--with-breadcrumbs {
  gap: 0.25rem;
  max-width: min(100%, 44rem);
}

.topbar-title__eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.topbar-title__subtitle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.topbar-title__breadcrumbs {
  margin: 0;
}

.topbar-title__breadcrumbs .breadcrumb-nav__list {
  gap: 0.375rem;
}

.topbar-title__breadcrumbs .breadcrumb-nav__item {
  gap: 0.375rem;
}

.topbar-title__breadcrumbs .breadcrumb-nav__item::after {
  opacity: 70%;
  color: var(--text-muted);
}

.topbar-title__breadcrumbs .breadcrumb-nav__link,
.topbar-title__breadcrumbs .breadcrumb-nav__current {
  line-height: 1.1;
}

.topbar-title__breadcrumbs .breadcrumb-nav__link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.topbar-title__breadcrumbs .breadcrumb-nav__current {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--text-primary);
}

.xw-page-header--topbar {
  align-items: center;
  justify-content: flex-end;
}
.xw-page-header--topbar .xw-page-header__title {
  display: none;
}
.xw-page-header--topbar .xw-page-header__actions {
  margin-left: auto;
}

@media (min-width: 768px) {
  .topbar-actions {
    gap: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .topbar-actions {
    flex-wrap: nowrap;
    gap: 1rem;
  }
}
.topbar-actions {
  display: flex;
  position: relative;
  z-index: 2300;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.topbar-actions .user-menu {
  display: flex;
  align-items: center;
}

.topbar-actions .user-menu__trigger {
  gap: 0.375rem;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.375rem;
}

.topbar-actions .user-menu__chevron {
  flex-shrink: 0;
}

.topbar-actions .user-menu .user-avatar {
  width: 40px;
  height: 40px;
}

.context-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.context-controls--topbar {
  justify-content: flex-end;
}

.sidebar-context-controls {
  display: none;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.context-controls--sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.context-controls--sidebar .scope-search,
.context-controls--sidebar .hierarchy-navigator {
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCOPE SEARCH
   ───────────────────────────────────────────────────────────────────────────── */
.scope-search {
  position: relative;
  align-self: flex-end;
  min-width: 240px;
  max-width: 320px;
}

.scope-search .search-input-wrapper {
  width: 100%;
  max-width: none;
}

.scope-search__dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  left: 0;
  z-index: 110;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--dropdown-bg);
  box-shadow: var(--shadow-xl);
}

.scope-search__state {
  padding: 0.75rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
}

.scope-search__group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.scope-search__group + .scope-search__group {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}

.scope-search__group-title {
  padding: 0 0.375rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scope-search__group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scope-search__result {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  text-align: left;
  color: var(--color-pill-muted);
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.scope-search__result:hover,
.scope-search__result.is-active {
  background: var(--color-primary-bg);
  color: var(--text-primary);
}

.scope-search__result:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--color-primary-bg);
  color: var(--text-primary);
}

.scope-search__result-icon {
  color: var(--text-muted);
}

.scope-search__result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scope-search__result-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.scope-search__result-context {
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (width <= 900px) {
  .scope-search {
    min-width: 200px;
    max-width: 260px;
  }
}
.notification-bell {
  position: relative;
}

.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 0.75rem;
  background: var(--button-subtle-bg);
  font-size: 1.1rem;
  color: var(--text-secondary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.topbar-btn:hover {
  background: var(--button-subtle-hover-bg);
  color: var(--text-primary);
}

.notification-badge {
  display: flex;
  position: absolute;
  top: -2px;
  right: -2px;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 0.5rem;
  background: var(--color-danger);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-on-brand);
}

.environment-selector {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.env-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.env-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.env-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
}
.env-select option {
  background: var(--surface);
  color: var(--text-primary);
}

/* Main Content */
@media (min-width: 768px) {
  .admin-content {
    padding: 1.5rem;
  }
}
@media (min-width: 1920px) {
  .admin-content {
    padding: 2rem;
  }
}
.admin-content {
  position: relative;
  z-index: 0;
  flex: 1;
  width: 100%;
  padding: 1rem;
  overflow: clip auto;
  box-sizing: border-box;
}

/* Centered content wrapper for all admin pages */
.admin-page {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DASHBOARD LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.admin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Loading State */
.admin-loading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-muted);
}
.admin-loading .spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Collapsed sidebar (desktop) */
.admin-shell.sidebar-collapsed .admin-sidebar {
  width: 80px;
}
.admin-shell.sidebar-collapsed .admin-brand {
  flex: 0 0 36px;
  justify-content: center;
  max-width: 36px;
}
.admin-shell.sidebar-collapsed .admin-brand__logo {
  width: 36px;
  max-width: 36px;
}
.admin-shell.sidebar-collapsed .admin-info,
.admin-shell.sidebar-collapsed .nav-section-title,
.admin-shell.sidebar-collapsed .nav-label {
  display: none;
}
.admin-shell.sidebar-collapsed .sidebar-header {
  gap: 0.375rem;
  padding: 0 0.375rem;
}
.admin-shell.sidebar-collapsed .nav-item {
  justify-content: center;
  margin: 0 0.375rem;
  padding: 0.75rem;
}
.admin-shell.sidebar-collapsed .tenant-item {
  padding: 0.75rem;
}

/* Section Title */
.section-title {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATS GRID (Top KPI Cards)
   ───────────────────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
@media (width <= 1400px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width <= 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
  font: inherit;
  text-align: center;
  color: inherit;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  -webkit-appearance: none;
          appearance: none;
  text-decoration: none;
}
.stat-card:hover {
  border-color: var(--border-soft);
  background: var(--surface-alt);
  transform: translateY(-2px);
}

.stat-card--clickable {
  cursor: pointer;
}
.stat-card--clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}

.stats-grid .stat-card__label,
.stats-row .stat-card__label,
.stat-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stats-grid .stat-card__icon,
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 70%;
  font-size: 1.3rem;
}

.stats-grid .stat-card__value,
.stats-row .stat-card__value,
.stat-value {
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.stats-grid .stat-card__sublabel,
.stats-row .stat-card__sublabel,
.stats-grid .stat-card__footer,
.stats-row .stat-card__footer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stats-grid .stat-card__footer,
.stats-row .stat-card__footer {
  width: 100%;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
}
.stat-badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.stat-badge--info {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.stat-badge--warning {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN GRID (Two-Column Layout)
   ───────────────────────────────────────────────────────────────────────────── */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (width <= 1100px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANELS (Glass Cards)
   ───────────────────────────────────────────────────────────────────────────── */
.admin-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.panel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.health-status {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}
.health-status--healthy {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.health-status--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.health-status--critical {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVER HEALTH PANEL
   ───────────────────────────────────────────────────────────────────────────── */
.server-metrics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.metric-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.metric-label {
  min-width: 90px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-bar {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: calc(0.5rem / 2);
  background: var(--button-subtle-bg);
}

.metric-fill {
  height: 100%;
  border-radius: calc(0.5rem / 2);
  transition: width 0.5s ease;
}
.metric-fill--cpu {
  background: linear-gradient(90deg, #3b82f6, rgb(98.2, 155, 247.8));
}
.metric-fill--memory {
  background: linear-gradient(90deg, #22c55e, rgb(59.8932467532, 221.3267532468, 119.3166233766));
}

.metric-value {
  width: 70px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}

.metric-info {
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.metric-info span {
  display: flex;
  gap: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORGANIZATIONS PANEL
   ───────────────────────────────────────────────────────────────────────────── */
.organizations-list {
  display: flex;
  flex-direction: column;
}

.org-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.2s ease;
}
.org-row:hover {
  background: var(--table-row-hover-bg);
}
.org-row:last-child {
  border-bottom: none;
}
.org-row--inactive {
  opacity: 50%;
}

.org-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.org-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.org-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.org-badges {
  display: flex;
  gap: 0.5rem;
}

.org-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
}
.org-badge--features {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.org-badge--active {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.org-badge--inactive {
  background: var(--button-subtle-bg);
  color: var(--text-muted);
}

.list-empty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  padding: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.list-more {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-soft);
}

.link-btn {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.82rem;
  color: var(--color-primary);
  transition: color 0.2s ease;
  cursor: pointer;
}
.link-btn:hover {
  color: rgb(102.12, 157.5, 247.98);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTIVITY PANEL
   ───────────────────────────────────────────────────────────────────────────── */
.activity-list {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow-y: auto;
}

.activity-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.2s ease;
}
.activity-row:hover {
  background: var(--table-row-hover-bg);
}
.activity-row:last-child {
  border-bottom: none;
}

.activity-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.75rem;
  background: var(--button-subtle-bg);
  font-size: 0.9rem;
}

.activity-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.activity-type {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.activity-desc {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-time {
  flex-shrink: 0;
  opacity: 75%;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ALERTS PANEL
   ───────────────────────────────────────────────────────────────────────────── */
.alerts-list {
  display: flex;
  flex-direction: column;
}

.alert-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.alert-item:last-child {
  border-bottom: none;
}
.alert-item--critical {
  border-left: 3px solid var(--color-danger);
  background: rgba(239, 68, 68, 0.05);
}
.alert-item--warning {
  border-left: 3px solid var(--color-warning);
  background: rgba(249, 115, 22, 0.05);
}
.alert-item--info {
  border-left: 3px solid var(--color-primary);
  background: rgba(59, 130, 246, 0.05);
}
.alert-item--success {
  border-left: 3px solid var(--color-success);
  background: rgba(34, 197, 94, 0.05);
}

.alert-severity-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.alert-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.alert-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.alert-description {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATS ROW (Large Cards)
   ───────────────────────────────────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (width <= 900px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}

.stat-card--large {
  padding: 2rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
  text-align: center;
}

.stat-value--xl {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.stat-sub {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-success);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANEL ACTIONS
   ───────────────────────────────────────────────────────────────────────────── */
.panel-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.panel-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.panel-action-btn:hover {
  background: var(--button-subtle-bg);
  color: var(--text-primary);
}

.topbar-btn--icon {
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (width <= 768px) {
  .admin-sidebar {
    position: fixed;
    left: 0;
    z-index: 100;
    opacity: 0%;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
  }
  .admin-sidebar.expanded {
    opacity: 100%;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--surface-scrim);
  }
  .admin-topbar {
    display: grid;
    gap: 0.375rem;
    align-items: start;
    justify-content: stretch;
    height: auto;
    min-height: 64px;
    padding: 0.5rem 1rem;
  }
  .topbar-left {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mobile-menu-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-soft);
    background: var(--button-subtle-bg);
    color: var(--text-secondary);
  }
  .topbar-actions {
    display: grid;
    gap: 0.375rem;
    align-items: start;
    width: 100%;
    margin-left: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .context-controls--topbar {
    display: grid;
    gap: 0.375rem;
    justify-content: stretch;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar-title {
    gap: 2px;
    max-width: none;
  }
  .topbar-title--with-breadcrumbs {
    gap: 0;
  }
  .topbar-title__eyebrow {
    display: none;
  }
  .page-title {
    font-size: 1.05rem;
    line-height: 1.2;
  }
  .topbar-title__subtitle {
    font-size: 0.77rem;
  }
  .topbar-title__breadcrumbs .breadcrumb-nav__link {
    font-size: 0.64rem;
  }
  .topbar-title__breadcrumbs .breadcrumb-nav__current {
    font-size: 1.02rem;
  }
  .context-controls--topbar .scope-search {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .context-controls--topbar .scope-search__control .search-input {
    min-height: 40px;
    padding-block: 0.45rem;
    font-size: 0.82rem;
  }
  .context-controls--topbar .hierarchy-navigator {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    min-width: 0;
  }
  .context-controls--topbar .hierarchy-navigator__level {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .context-controls--topbar .hierarchy-label {
    font-size: 0.62rem;
  }
  .context-controls--topbar .hierarchy-select {
    min-height: 40px;
    font-size: 0.8rem;
  }
  .context-controls--topbar .hierarchy-close-btn {
    width: 18px;
    height: 18px;
  }
  .topbar-actions .user-menu {
    justify-self: end;
  }
  .topbar-actions .user-menu__trigger {
    padding: 0.375rem;
  }
  .topbar-actions .user-menu .user-avatar {
    width: 40px;
    height: 40px;
  }
  .admin-content {
    padding: 1rem;
  }
  .section-title {
    font-size: 1.15rem;
  }
  .stat-value {
    font-size: 2rem;
  }
}
@media (width <= 480px) {
  .admin-topbar {
    padding-inline: 0.75rem;
  }
  .context-controls--topbar .hierarchy-select {
    font-size: 0.78rem;
  }
  .context-controls--topbar .scope-search__control .search-input {
    font-size: 0.8rem;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   HIERARCHY NAVIGATOR (Reusable Component)
   Shows Organizations -> Platforms -> Shops dropdowns based on user permissions
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hierarchy-navigator {
    gap: 0.75rem;
  }
}
.hierarchy-navigator {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .hierarchy-navigator__level {
    flex: 0 1 auto;
    min-width: 160px;
    max-width: none;
  }
}
.hierarchy-navigator__level {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
  max-width: 200px;
}

.hierarchy-label {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hierarchy-label .label-text {
  flex: 1;
}

.hierarchy-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.hierarchy-close-btn:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.hierarchy-close-btn svg {
  width: 10px;
  height: 10px;
}

.hierarchy-close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.hierarchy-navigator .select-wrapper {
  display: flex;
  position: relative;
  align-items: center;
}

.hierarchy-select {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.hierarchy-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
}
.hierarchy-select:disabled {
  opacity: 50%;
  cursor: not-allowed;
}
.hierarchy-select:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}
.hierarchy-select option {
  padding: 0.5rem;
  background: var(--dropdown-bg);
  color: var(--text-primary);
}

.hierarchy-navigator .select-chevron {
  position: absolute;
  right: 0.5rem;
  opacity: 70%;
  color: var(--text-secondary);
  pointer-events: none;
}

.hierarchy-navigator__loading {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.hierarchy-navigator__loading .spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--color-primary);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Responsive adjustments */
@media (width <= 768px) {
  .hierarchy-navigator {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  .hierarchy-navigator__level {
    min-width: auto;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   HEALTH REPORT PROGRESS (Real-time progress indicator)
   ───────────────────────────────────────────────────────────────────────────── */
.health-report-progress {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--color-primary-border);
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--color-primary-bg) 0%, rgba(37, 99, 235, 0.08) 100%);
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% {
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
  50% {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 12px 0 rgba(59, 130, 246, 0.15);
  }
}
.progress-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.progress-icon {
  font-size: 1.2rem;
  animation: spin 1s linear infinite;
}

.progress-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.progress-phase {
  margin-left: auto;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
}

.progress-bar-container {
  height: 8px;
  overflow: hidden;
  border-radius: calc(0.5rem / 2);
  background: var(--button-subtle-bg);
}

.progress-bar {
  height: 100%;
  border-radius: calc(0.5rem / 2);
  background: linear-gradient(90deg, #3b82f6 0%, rgb(78.6, 142.5, 246.9) 50%, rgb(102.12, 157.5, 247.98) 100%);
  transition: width 0.3s ease;
  animation: gradient-shift 2s ease infinite;
  background-size: 200% 100%;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.progress-details {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.progress-count {
  font-weight: 500;
  color: var(--color-primary);
}

.progress-current {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVER HEALTH SUMMARY (Inline on main dashboard)
   ───────────────────────────────────────────────────────────────────────────── */
.server-health-summary {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
  grid-template-columns: repeat(5, 1fr);
}

.health-metric {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.health-metric--info {
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}
.health-metric__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.health-metric__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.health-metric__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.health-metric__value--healthy {
  color: var(--color-success);
}
.health-metric__value--warning {
  color: var(--color-warning);
}
.health-metric__value--critical {
  color: var(--color-danger);
}
.health-metric__bar {
  height: 6px;
  overflow: hidden;
  border-radius: calc(calc(0.5rem / 2) * 0.75);
  background: var(--button-subtle-bg);
}
.health-metric__fill {
  height: 100%;
  border-radius: calc(calc(0.5rem / 2) * 0.75);
  transition: width 0.5s ease;
}
.health-metric__fill--cpu {
  background: linear-gradient(90deg, #3b82f6, rgb(98.2, 155, 247.8));
}
.health-metric__fill--memory {
  background: linear-gradient(90deg, #22c55e, rgb(59.8932467532, 221.3267532468, 119.3166233766));
}
.health-metric__icon {
  font-size: 1.2rem;
}
.health-metric__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.health-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.health-alert {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
}
.health-alert--critical {
  border-left: 3px solid var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.health-alert--warning {
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.health-alert__icon {
  font-size: 0.8rem;
}
.health-alert__text {
  flex: 1;
}

@media (width <= 1200px) {
  .server-health-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width <= 768px) {
  .server-health-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Analytics filter bar */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
}

.filter-row--inline {
  gap: 0.5rem;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
}
.filter-field--grow {
  flex: 1;
  min-width: 240px;
}
.filter-field label {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.filter-row--inline .filter-field {
  min-width: 140px;
}

.filter-row--inline .filter-field--grow {
  min-width: 200px;
}

.filter-row--inline label {
  font-size: 0.72rem;
}

.filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.input--dense {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  color: var(--text-primary);
}
.input--dense:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.input--xs {
  width: 110px;
}

.table-pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.table-pagination--footer {
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}
.table-pagination--footer .table-pagination__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.table-pagination--footer .table-pagination__summary {
  color: var(--text-muted);
}
.table-pagination--footer .table-pagination__page-size {
  display: grid;
  grid-auto-flow: column;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
}
.table-pagination--footer .table-pagination__page-size .xw-field__label {
  white-space: nowrap;
}
.table-pagination--footer .table-pagination__page-size-select {
  width: auto;
  min-width: 4.5rem;
  min-height: 2rem;
}
.table-pagination--footer .table-pagination__nav {
  margin-left: auto;
}

@media (min-width: 540px) {
  .table-pagination--footer {
    align-items: flex-start;
  }
  .table-pagination--footer .table-pagination__nav {
    margin-left: 0;
  }
}
.info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
}
.info-card--inline {
  margin-top: 0.5rem;
}
.info-card .info-card__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.inventory-product-title-row {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  max-width: 100%;
}

.inventory-product-title-link,
.inventory-product-ai-btn {
  border: 0;
  background: transparent;
  color: inherit;
}

.inventory-product-title-link {
  min-width: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.inventory-product-title-link:hover, .inventory-product-title-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.inventory-product-title-link strong {
  display: block;
  overflow-wrap: anywhere;
}

.inventory-product-ai-btn {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  color: var(--color-primary);
  cursor: pointer;
}
.inventory-product-ai-btn:hover, .inventory-product-ai-btn:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  background: var(--brand-soft);
}
.inventory-product-ai-btn:disabled {
  cursor: wait;
  opacity: 56%;
}

.inventory-reorder-cell {
  min-width: 150px;
}
.inventory-reorder-cell strong {
  display: block;
  color: var(--text-primary);
}

.inventory-reorder-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}
.inventory-reorder-card span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
.inventory-reorder-card small {
  color: var(--text-secondary);
}

.inventory-reorder-info {
  gap: 1.5rem;
  align-items: flex-start;
}
@media (width <= 900px) {
  .inventory-reorder-info {
    flex-direction: column;
  }
}

.inventory-reorder-info__body {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.inventory-reorder-info__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (width <= 900px) {
  .inventory-reorder-info__actions {
    justify-content: flex-start;
  }
}

.inventory-ai-note {
  display: block;
  flex-basis: 100%;
  margin-top: 0.25rem;
  color: var(--text-secondary);
}

.inventory-reorder-detail {
  display: grid;
  gap: 0.5rem;
  max-width: 720px;
}
.inventory-reorder-detail dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.inventory-reorder-detail dl > div {
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}
.inventory-reorder-detail dt {
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
.inventory-reorder-detail dd {
  margin: 0;
  color: var(--text-primary);
}

.billing-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.billing-summary .stat-value {
  margin: 0;
}

/* Expanded row details (admin tables) */
.data-row--details td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-subtle);
}

.details-panel {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-subtle);
}

.details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.details-panel h4 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rule-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.rule-row .action-btn {
  justify-self: end;
}

@media (width <= 768px) {
  .rule-row {
    grid-template-columns: 1fr;
  }
}
/* AdminDashboard theme hook.
   The canonical live styles currently reside in _workspace.scss so the root
   compatibility entrypoint can stay thin without changing compiled output. */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.admin-users-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
}

.admin-users-page--embedded {
  gap: 0.75rem;
  padding: 0;
}

.admin-users-page .xw-page-header--topbar {
  justify-content: flex-end;
}

.admin-users-page .xw-page-header__actions {
  margin-left: auto;
}

.admin-users-page .admin-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 20px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

.admin-users-page--embedded .admin-section {
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface);
}

.admin-users-page__top-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.admin-users-page__top-actions .admin-directory-create-btn {
  min-height: 2.5rem;
}

.admin-users-page__role-guide {
  margin: 0;
}

.admin-users-page__management-section {
  min-width: 0;
}

.admin-users-page .alert {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
}
.admin-users-page .alert--error {
  border: 1px solid color-mix(in srgb, var(--color-danger) 24%, transparent);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--surface) 90%);
  color: var(--text-primary);
}
.admin-users-page .alert--success {
  border: 1px solid color-mix(in srgb, var(--color-success) 24%, transparent);
  background: color-mix(in srgb, var(--color-success) 10%, var(--surface) 90%);
  color: var(--text-primary);
}
.admin-users-page .alert__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-users-page .alert__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.admin-users-page .alert__detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.admin-users-page .alert__detail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-users-page .alert__close {
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}
.admin-users-page .alert__close:focus {
  outline: none;
}
.admin-users-page .alert__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-users-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
@media (width <= 720px) {
  .admin-users-stats {
    grid-template-columns: 1fr;
  }
}

.admin-users-stats .stat-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.admin-users-stats .stat-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.admin-users-stats .stat-card {
  display: grid;
  gap: 0.375rem 1rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "value icon" "label icon";
}

.admin-users-stats .stat-card__icon {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  border-radius: 1rem;
  background: var(--brand-soft);
  color: var(--brand);
  grid-area: icon;
}
.admin-users-stats .stat-card__icon svg,
.admin-users-stats .stat-card__icon i {
  width: 28px;
  height: 28px;
  font-size: 28px;
}

.admin-users-stats .stat-card__value {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: value;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}

.admin-users-stats .stat-card__label {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: label;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.admin-users-stats .stat-card--success .stat-card__icon {
  background: var(--ok-soft);
  color: var(--ok);
}

.admin-users-stats .stat-card--error .stat-card__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-users-stats .stat-card--warning .stat-card__icon {
  background: var(--warn-soft);
  color: var(--warn);
}

.admin-users-management {
  gap: 1rem;
  padding: 20px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

.admin-users-management .data-table-container {
  width: 100%;
}

.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.users-toolbar__search {
  flex: 1 1 280px;
  min-width: 240px;
}

.users-toolbar__filters {
  display: flex;
  flex: 2 1 540px;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-users-page .filter-select {
  flex: 1 1 180px;
  min-width: 180px;
}

.admin-users-page .filter-bar--panel {
  margin-bottom: 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.admin-users-page .filter-bar--panel .search-input,
.admin-users-page .filter-bar--panel .filter-select {
  min-height: 2.5rem;
  border-radius: 0.75rem;
}

.admin-users-page .filter-bar--panel .filter-bar__actions {
  align-self: stretch;
}

.admin-users-page .filter-bar--panel .pill-btn {
  min-height: 2.5rem;
}

.admin-users-page .data-table-surface {
  --data-table-surface-radius: 0.75rem;
  --data-table-surface-bg: var(--surface);
  border-color: var(--border-soft);
}

.admin-users-page .form-input,
.admin-users-page .form-select,
.users-modal .form-input,
.users-modal .form-select {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-users-page .form-input:hover,
.admin-users-page .form-select:hover,
.users-modal .form-input:hover,
.users-modal .form-select:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-soft));
}
.admin-users-page .form-input:focus,
.admin-users-page .form-select:focus,
.users-modal .form-input:focus,
.users-modal .form-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.admin-users-page .form-input::-moz-placeholder, .admin-users-page .form-select::-moz-placeholder, .users-modal .form-input::-moz-placeholder, .users-modal .form-select::-moz-placeholder {
  opacity: 100%;
  color: var(--text-muted);
}
.admin-users-page .form-input::placeholder,
.admin-users-page .form-select::placeholder,
.users-modal .form-input::placeholder,
.users-modal .form-select::placeholder {
  opacity: 100%;
  color: var(--text-muted);
}

.admin-users-page .loading-state {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  color: var(--text-secondary);
}

.admin-users-page .user-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 999px;
  color: var(--avatar-accent, var(--text-secondary));
}
.admin-users-page .user-avatar--system {
  --avatar-accent: var(--brand);
  background: var(--brand-soft);
}
.admin-users-page .user-avatar--owner {
  --avatar-accent: var(--danger);
  background: var(--danger-soft);
}
.admin-users-page .user-avatar__initials {
  font-size: 13px;
  font-weight: 700;
}
.admin-users-page .user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.admin-users-page .users-row__identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.admin-users-page .users-row__identity strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.admin-users-page .users-row__identity .cell-sub {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.admin-users-page .users-management-table th,
.admin-users-page .users-management-table td {
  vertical-align: middle;
}
.admin-users-page .users-management-table tbody tr:hover {
  background: var(--table-row-hover-bg);
}

.admin-users-page .users-summary-row td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-alt);
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-users-page .data-row--inactive {
  opacity: 74%;
}

.admin-users-page .data-table-link {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.admin-users-page .data-table-actions {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.admin-users-page .data-table-footer {
  padding-top: 0.25rem;
}

.admin-users-page .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--surface-alt);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.admin-users-page .action-btn:hover {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--accent);
}
.admin-users-page .action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.admin-users-page .action-btn:disabled, .admin-users-page .action-btn[aria-disabled=true] {
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface) 30%);
  box-shadow: none;
  opacity: 48%;
  color: var(--text-muted);
  cursor: not-allowed;
}
.admin-users-page .action-btn:disabled:hover, .admin-users-page .action-btn[aria-disabled=true]:hover {
  background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface) 30%);
  color: var(--text-muted);
}
.admin-users-page .action-btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--danger);
}
.admin-users-page .action-btn--primary:hover {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--accent);
}
.admin-users-page .action-btn--danger:disabled:hover, .admin-users-page .action-btn--primary:disabled:hover, .admin-users-page .action-btn--danger[aria-disabled=true]:hover, .admin-users-page .action-btn--primary[aria-disabled=true]:hover {
  background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface) 30%);
  color: var(--text-muted);
}

.admin-users-page .text-muted {
  color: var(--text-secondary);
}

.admin-users-page .form-row,
.users-modal .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (width <= 720px) {
  .admin-users-page .form-row,
  .users-modal .form-row {
    grid-template-columns: 1fr;
  }
}

.admin-users-page .form-group,
.users-modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-users-page .form-group label,
.users-modal .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-users-page .form-hint,
.users-modal .form-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-users-page .form-error,
.users-modal .form-error {
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-danger) 24%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-danger) 10%, var(--surface) 90%);
  color: var(--text-primary);
}

.admin-users-page .checkbox-label,
.users-modal .checkbox-label {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-primary);
  cursor: pointer;
}
.admin-users-page .checkbox-label input[type=checkbox],
.users-modal .checkbox-label input[type=checkbox] {
  accent-color: var(--accent);
}

.admin-users-page .permissions-info,
.users-modal .permissions-info {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}
.admin-users-page .permissions-info p,
.users-modal .permissions-info p {
  margin: 0;
  color: var(--text-secondary);
}
.admin-users-page .permissions-info strong,
.users-modal .permissions-info strong {
  margin-right: 0.35rem;
  color: var(--text-primary);
}

.users-modal .users-scope-lock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
  color: var(--text-primary);
}

.users-modal .users-scope-lock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.users-modal .users-scope-lock__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.users-modal .users-scope-lock__content strong {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.admin-users-page .users-modal {
  --modal-bg: var(--surface);
  --modal-border: var(--border-soft);
}

.users-modal .modal__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.users-modal .form-input,
.users-modal .form-select {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
}

.users-modal .form-input:hover,
.users-modal .form-select:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-soft));
}

.users-modal .form-input:focus,
.users-modal .form-select:focus {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-soft));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

:root[data-theme=dark] .users-modal .form-input,
:root[data-theme=dark] .users-modal .form-select {
  border-color: var(--border-strong);
  background-color: var(--surface-alt);
}

:root[data-theme=light] .users-modal .form-input,
:root[data-theme=light] .users-modal .form-select {
  border-color: var(--border-default);
  background-color: var(--surface-light);
}

.admin-users-page--mc {
  gap: 0;
  min-width: 0;
  padding: 0;
}

.admin-users-page--mc .alert {
  margin: 12px 24px 0;
  border-radius: var(--r-sm);
}

.admin-users-page--mc .xw-empty,
.admin-users-page--mc .xw-error {
  margin: 24px;
}

.admin-users-page--mc .admin-users__toolbar-select {
  width: 180px;
}

.admin-users-page--mc .admin-users__table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-users-page--mc .admin-users__table {
  min-width: 1040px;
  border-collapse: collapse;
}

.admin-users-page--mc .admin-users__table th,
.admin-users-page--mc .admin-users__table td {
  height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-users-page--mc .admin-users__table th {
  height: 34px;
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.admin-users-page--mc .admin-users__table tbody tr {
  background: var(--surface);
  outline: none;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  cursor: pointer;
}

.admin-users-page--mc .admin-users__table tbody tr:hover,
.admin-users-page--mc .admin-users__table tbody tr:focus-visible {
  background: var(--surface-1);
  box-shadow: inset 2px 0 0 var(--brand);
}

.admin-users-page--mc .admin-users__table tbody tr.is-selected {
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
}

.admin-users-page--mc .admin-users__table tbody tr.is-bulk-selected {
  background: color-mix(in srgb, var(--brand-soft) 78%, var(--surface) 22%);
}

.admin-users-page--mc .admin-users__table tbody tr.data-row--inactive {
  opacity: 72%;
}

.admin-users-page--mc .admin-users__select-cell {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.admin-users-page--mc .admin-users__select-cell .xw-check {
  justify-content: center;
}

.admin-users-page--mc .admin-users__identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.admin-users-page--mc .admin-users__identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-users-page--mc .admin-users__name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-page--mc .admin-users__email {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-page--mc .admin-users__scope-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  max-width: 230px;
  color: var(--text);
  text-decoration: none;
}

.admin-users-page--mc .admin-users__scope-link:hover {
  color: var(--brand);
}

.admin-users-page--mc .admin-users__scope-link > span:not(.scope-card__code) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-page--mc .admin-users__actions-cell {
  width: 90px;
  text-align: right;
  white-space: nowrap;
}

.admin-users-page--mc .admin-users__row-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.admin-users-page--mc .admin-users__cards {
  display: none;
  gap: 10px;
  padding: 16px;
}

.admin-users-page--mc .admin-users-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  outline: none;
  cursor: pointer;
}

.admin-users-page--mc .admin-users-card__select {
  padding-top: 2px;
}

.admin-users-page--mc .admin-users-card:hover,
.admin-users-page--mc .admin-users-card:focus-visible,
.admin-users-page--mc .admin-users-card.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.admin-users-page--mc .admin-users-card.data-row--inactive {
  opacity: 76%;
}

.admin-users-page--mc .admin-users-card__main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-users-page--mc .admin-users-card__badges,
.admin-users-page--mc .admin-users-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-users-page--mc .admin-users-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
}

.admin-users-page--mc .admin-users-card__meta span {
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
}

.admin-users-page--mc .organization-users__scope {
  font-size: 11px;
  white-space: nowrap;
}

.admin-users-page--mc .organization-users__permissions {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.admin-users-page--mc .organization-users__permissions span {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  color: var(--text-2);
}

.admin-users-page--mc .organization-users__permissions .app-icon {
  color: var(--ok);
}

.admin-users-page--mc .admin-users__detail {
  min-width: 0;
}

.admin-users-page--mc .admin-users-detail__section.card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}

.admin-users-page--mc .admin-users-detail__section .xw-section__header {
  padding: 0 0 8px;
}

.admin-users-page--mc .admin-users-detail__activity {
  gap: 8px;
}

.users-modal--mc .modal__body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.users-modal--mc .modal__footer {
  gap: 8px;
}

.users-modal--mc .admin-users__form-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.users-modal--mc .admin-users__form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-modal--mc .admin-users__password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.users-modal--mc .admin-users__password-toggle {
  margin-bottom: 0;
}

.users-modal--mc .permissions-info {
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}

@media (width <= 900px) {
  .admin-users-page--mc .alert {
    margin-inline: 16px;
  }
  .admin-users-page--mc .admin-users__toolbar-select {
    width: 100%;
  }
  .users-modal--mc .admin-users__form-grid--two {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width <= 760px) {
  .admin-users-page--mc .admin-users__table-wrap {
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-users-page--mc .admin-users__table-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .admin-users-page--mc .admin-users__cards {
    display: none;
  }
}
@media (width <= 520px) {
  .admin-users-page--mc .admin-users-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .admin-users-page--mc .admin-users-card .admin-users__row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.role-guide {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
}

.role-guide__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.role-guide__summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
}
.role-guide__summary::-webkit-details-marker {
  display: none;
}

.role-guide__summary-main {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  align-items: baseline;
  min-width: 0;
}

.role-guide__summary-meta {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
}

.role-guide__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.375rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.role-guide__body {
  padding: 0 0.75rem 0.75rem;
}

.role-guide__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.role-guide__subtitle {
  max-width: 520px;
  margin: 0.375rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.role-guide__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.role-guide__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 150px;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-alt);
}

.role-guide__card-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.role-guide__card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.role-guide__scope {
  display: inline-flex;
  align-items: center;
  box-shadow: none;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-guide__description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.role-guide__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
}

.role-guide__tag {
  box-shadow: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.role-guide--compact {
  gap: 0;
  padding: 0;
  border-radius: 0.75rem;
  background: var(--surface);
}
.role-guide--compact[open] .role-guide__summary {
  border-bottom: 1px solid var(--border-soft);
}
.role-guide--compact .role-guide__subtitle {
  max-width: none;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}
.role-guide--compact .role-guide__grid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
}
.role-guide--compact .role-guide__card {
  gap: 0.375rem;
  min-height: 0;
  padding: 0.5rem;
  border-radius: 0.75rem;
  box-shadow: none;
}
.role-guide--compact .role-guide__card-header {
  align-items: flex-start;
}
.role-guide--compact .role-guide__card-title {
  font-size: 0.88rem;
  line-height: 1.25;
}
.role-guide--compact .role-guide__description {
  font-size: 0.78rem;
  line-height: 1.35;
}
.role-guide--compact .role-guide__tags {
  gap: 0.25rem;
  margin-top: 0.375rem;
}
.role-guide--compact .role-guide__tag {
  font-size: 0.65rem;
}

@media (width <= 768px) {
  .role-guide__header {
    flex-direction: column;
  }
  .role-guide__summary {
    align-items: flex-start;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Dashboard Component Styles
   ========================================================================== */
@media (min-width: 1280px) {
  .dashboard-page {
    padding: 1.5rem 1.5rem;
  }
}
@media (min-width: 1920px) {
  .dashboard-page {
    padding: 1.5rem 2rem;
  }
}
.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  padding: 1.5rem 1rem;
}

.dashboard--mc {
  gap: var(--s-5);
  width: 100%;
  max-width: none;
}

.dashboard--mc .dashboard__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.dashboard--mc .dashboard__header {
  padding: 0;
}

.dashboard--mc .dashboard__header .xw-page-header__actions {
  align-items: center;
}

.dashboard__range-tabs {
  flex-shrink: 0;
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.dashboard-header__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-header__title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.dashboard-header__title h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.dashboard-header__greeting {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.dashboard-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-header--topbar .dashboard-header__title,
.dashboard-header--topbar .dashboard-header__greeting {
  display: none;
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.kpi-grid .stat-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.kpi-grid .stat-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}
.kpi-grid .stat-card {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 108px;
  padding: 1.5rem;
  overflow: hidden;
  text-align: left;
}

.kpi-grid .stat-card__value {
  margin-bottom: 0;
  font-size: 2.25rem;
}

.kpi-grid .stat-card__label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.kpi-grid .stat-card__sublabel {
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.kpi-grid .stat-card--info {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 15%, transparent), color-mix(in srgb, var(--brand) 5%, transparent));
}

.kpi-grid .stat-card--success::before,
.kpi-grid .stat-card--warning::before,
.kpi-grid .stat-card--error::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
}

.kpi-grid .stat-card--success {
  border-color: var(--ok-line);
}
.kpi-grid .stat-card--success::before {
  background: linear-gradient(90deg, #22c55e, transparent);
}

.kpi-grid .stat-card--warning {
  border-color: color-mix(in srgb, var(--agent) 30%, transparent);
}
.kpi-grid .stat-card--warning::before {
  background: linear-gradient(90deg, #f97316, transparent);
}

.kpi-grid .stat-card--error {
  border-color: var(--danger-line);
}
.kpi-grid .stat-card--error::before {
  background: linear-gradient(90deg, #ef4444, transparent);
}

.kpi-grid .stat-card__footer {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dashboard-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.dashboard-summary-strip .kpi-card {
  position: relative;
  min-height: 128px;
  padding: 16px;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.dashboard-summary-strip .xw-kpi-card__label,
.dashboard-summary-strip .xw-kpi-card__meta {
  position: relative;
  z-index: 1;
}

.dashboard-summary-strip .xw-kpi-card__value {
  position: relative;
  z-index: 1;
  font-size: var(--fs-28);
}

.dashboard-summary-strip .xw-kpi-card--brand {
  border-color: var(--brand-line);
  background: linear-gradient(180deg, var(--brand-soft), transparent 72%), var(--surface-1);
}

.dashboard-summary-strip .xw-kpi-card--danger {
  border-color: var(--danger-line);
  background: linear-gradient(180deg, var(--danger-soft), transparent 72%), var(--surface-1);
}

.dashboard-summary-strip .kpi-card__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 0;
  height: 36px;
  opacity: 55%;
  pointer-events: none;
}

.shop-dashboard__summary-strip .kpi-card {
  min-height: 88px;
}

.dashboard-summary-strip .xw-sparkline--danger {
  color: var(--danger);
}

.shop-dashboard__overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  width: 100%;
}

.shop-dashboard-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.shop-dashboard-panel--activity {
  grid-column: 1/-1;
}

.shop-dashboard-panel__head {
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.shop-dashboard-panel__title-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shop-dashboard-panel__title-stack .h-sec {
  margin: 0;
}

.shop-dashboard-panel__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-dashboard-panel__link-arrow {
  margin-left: 4px;
}

.shop-dashboard-panel__empty {
  margin: 0;
  color: var(--text-muted);
}

.shop-dashboard-product-row,
.shop-dashboard-order-row {
  display: grid;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  text-decoration: none;
}

.shop-dashboard .shop-dashboard-product-row,
.shop-dashboard .shop-dashboard-order-row {
  color: var(--text);
}

.shop-dashboard-product-row:last-child,
.shop-dashboard-order-row:last-child {
  border-bottom: 0;
}

.shop-dashboard-product-row {
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(72px, auto) minmax(52px, auto);
}

.shop-dashboard-product-row:hover,
.shop-dashboard-order-row:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.shop-dashboard-product-row .product-cell {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.shop-dashboard-product-row .product-cell__thumb {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 8px), var(--bg-2);
}

.shop-dashboard-product-row__identity,
.shop-dashboard-order-row__customer {
  min-width: 0;
}

.shop-dashboard-product-row__title,
.shop-dashboard-order-row__customer {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-dashboard-product-row__price,
.shop-dashboard-product-row__sold,
.shop-dashboard-product-row__trend {
  text-align: right;
  white-space: nowrap;
}

.shop-dashboard-product-row__price,
.shop-dashboard-product-row__trend {
  color: var(--text);
}

.shop-dashboard-product-row__trend--up {
  color: var(--success);
}

.shop-dashboard-product-row__trend--down {
  color: var(--danger);
}

.shop-dashboard-order-row {
  grid-template-columns: minmax(84px, auto) minmax(160px, 1fr) minmax(72px, auto) minmax(76px, auto);
}

.shop-dashboard-order-row__status {
  justify-self: end;
}

.shop-dashboard-activity {
  gap: 0;
}

.shop-dashboard-activity__item {
  display: grid;
  grid-template-columns: minmax(72px, auto) auto minmax(96px, auto) minmax(180px, 1fr) minmax(80px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.shop-dashboard-activity__item:last-child {
  border-bottom: 0;
}

.shop-dashboard-activity__message,
.shop-dashboard-activity__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-dashboard-activity__meta {
  text-align: right;
}

@media (max-width: 768px) {
  .dashboard--mc .dashboard__header .xw-page-header__actions,
  .dashboard--mc .dashboard__range-tabs {
    width: 100%;
  }
  .shop-dashboard__overview-grid,
  .shop-dashboard-product-row,
  .shop-dashboard-order-row,
  .shop-dashboard-activity__item {
    grid-template-columns: 1fr;
  }
  .shop-dashboard-order-row__status,
  .shop-dashboard-activity__meta {
    justify-self: start;
    text-align: left;
  }
}
/* Metric Gauges */
.dashboard-metric-gauge {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
}

.dashboard-metric-gauge__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dashboard-metric-gauge__circle {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
}

.dashboard-metric-gauge__svg {
  position: absolute;
  width: 90px;
  height: 90px;
  transform: rotate(-90deg);
}

.dashboard-metric-gauge__bg {
  fill: none;
  stroke: var(--border-soft);
  stroke-width: 8;
}

.dashboard-metric-gauge__fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke 0.2s ease, stroke-dashoffset 0.5s ease;
}
.dashboard-metric-gauge__fill--tone-info, .dashboard-metric-gauge__fill--tone-primary {
  stroke: var(--info);
}
.dashboard-metric-gauge__fill--tone-success {
  stroke: var(--ok);
}
.dashboard-metric-gauge__fill--tone-warning {
  stroke: var(--warn);
}
.dashboard-metric-gauge__fill--tone-danger, .dashboard-metric-gauge__fill--tone-error {
  stroke: var(--danger);
}
.dashboard-metric-gauge__fill--state-warning {
  stroke: var(--warn);
}
.dashboard-metric-gauge__fill--state-critical, .dashboard-metric-gauge__fill--state-danger, .dashboard-metric-gauge__fill--state-error {
  stroke: var(--danger);
}

.dashboard-metric-gauge__value {
  z-index: 1;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dashboard-metric-gauge__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-metric-gauge__value-group {
  display: flex;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: 0 0.375rem;
  text-align: center;
}

.dashboard-metric-gauge__value-main {
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.dashboard-metric-gauge__value-sub {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* Dashboard Grid Layout */
@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .dashboard-grid--equal {
    grid-template-columns: 1fr 1fr;
  }
}

/* Dashboard Widgets + Layout Editor */
@media (min-width: 1024px) {
  .dashboard-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dashboard-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.dashboard-widget {
  min-width: 0;
}

.dashboard-widget--full {
  grid-column: 1/-1;
}

.dashboard-layout-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
}

.dashboard-layout-panel__header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.dashboard-layout-panel__header h3 {
  margin: 0 0 0.125rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.dashboard-layout-panel__header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.dashboard-layout-panel__grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-layout-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.dashboard-layout-item--over {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  background: var(--brand-soft);
}

.dashboard-layout-item--dragging {
  opacity: 70%;
}

.dashboard-layout-item__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--surface-alt);
  color: var(--text-secondary);
  cursor: grab;
}
.dashboard-layout-item__handle:hover {
  background: var(--table-row-hover-bg);
  color: var(--text-primary);
}
.dashboard-layout-item__handle:active {
  cursor: grabbing;
}

.dashboard-layout-toggle {
  display: flex;
  flex: 1;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.dashboard-layout-toggle input {
  accent-color: var(--brand);
}

.dashboard-layout-panel__hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dashboard-layout-panel__actions {
  display: flex;
  justify-content: flex-end;
}

.dashboard-layout-panel__empty {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dashboard-layout-panel__empty .app-icon {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.dashboard-layout-panel__library {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-soft);
}

.dashboard-layout-panel__library-header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.dashboard-layout-panel__library-header h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.dashboard-layout-panel__library-header p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dashboard-layout-library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.dashboard-layout-library-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px dashed var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-alt);
}

.dashboard-layout-library-item__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.dashboard-layout-library-item__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dashboard-layout-library-item__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard-layout-library-item__kind {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dashboard-layout-library-item p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dashboard-trend-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dashboard-trend-summary__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dashboard-trend-summary__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dashboard-trend-summary__value {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard-trend-chart__empty {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
  padding: 1rem;
  border: 1px dashed var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-alt);
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-secondary);
}

.dashboard-trend-chart__empty .app-icon {
  font-size: 1.3rem;
  color: var(--text-secondary);
}

.push-queue-progress__bar {
  height: 10px;
}

.dashboard-compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.dashboard-compact-table th,
.dashboard-compact-table td {
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.dashboard-compact-table th {
  font-weight: 500;
  text-align: left;
  color: var(--text-secondary);
}
.dashboard-compact-table td {
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}
.dashboard-compact-table tr:last-child th,
.dashboard-compact-table tr:last-child td {
  border-bottom: none;
}

.dashboard-compact-table__value--positive {
  color: #f97316;
}

.dashboard-compact-table__value--negative {
  color: #22c55e;
}

.dashboard-compact-table__value--neutral {
  color: var(--text-secondary);
}

/* Dashboard Section */
.dashboard-section {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  .dashboard-section__header {
    padding: 1.5rem 1.5rem;
  }
}
@media (min-width: 1920px) {
  .dashboard-section__header {
    padding: 1.5rem 2rem;
  }
}
.dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.dashboard-section__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.dashboard-section__actions {
  display: flex;
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .dashboard-section__body {
    padding: 1.5rem 1.5rem;
  }
}
@media (min-width: 1920px) {
  .dashboard-section__body {
    padding: 1.5rem 2rem;
  }
}
.dashboard-section__body {
  padding: 1.5rem 1rem;
}

.dashboard-section__body--flush {
  padding: 0;
}

@media (min-width: 1280px) {
  .dashboard-section__footer {
    padding: 1rem 1.5rem;
  }
}
@media (min-width: 1920px) {
  .dashboard-section__footer {
    padding: 1rem 2rem;
  }
}
.dashboard-section__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid var(--border-soft);
}

.agent-follow-up-notifications.page {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-6) var(--s-7);
}

.agent-follow-up-notifications__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.agent-follow-up-notifications__title {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.agent-follow-up-notifications__title .h-page {
  margin: 0;
}

.agent-follow-up-notifications__summary {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-2);
}

.agent-follow-up-notifications__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
}

.agent-follow-up-notifications__filters {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.agent-follow-up-notifications__tabs {
  max-width: -moz-max-content;
  max-width: max-content;
}

.agent-follow-up-notifications__filter {
  flex: 0 0 auto;
  white-space: nowrap;
}

.agent-follow-up-notifications__list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}

.agent-follow-up-notifications__details {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.agent-follow-up-notifications__section-title {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin: 0;
}

.agent-follow-up-notification {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content auto;
  gap: var(--s-3);
  align-items: center;
  min-height: 4.5rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.agent-follow-up-notification--agent {
  border-left-color: var(--agent);
}

.agent-follow-up-notification--warn {
  border-left-color: var(--warn);
}

.agent-follow-up-notification--danger {
  border-left-color: var(--danger);
}

.agent-follow-up-notification--ok {
  border-left-color: var(--ok);
}

.agent-follow-up-notification--info,
.agent-follow-up-notification--system {
  border-left-color: var(--info);
}

.agent-follow-up-notification__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-16);
  color: var(--text-2);
}

.agent-follow-up-notification__body {
  min-width: 0;
}

.agent-follow-up-notification__title-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
}
.agent-follow-up-notification__title-row strong {
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-follow-up-notification__dot {
  flex: 0 0 auto;
}

.agent-follow-up-notification__desc {
  margin-top: var(--s-1);
  overflow: hidden;
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-follow-up-notification__time {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.agent-follow-up-notification__actions {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  justify-content: flex-end;
  min-width: 7rem;
}

@media (width <= 760px) {
  .agent-follow-up-notifications.page {
    padding: var(--s-4);
  }
  .agent-follow-up-notifications__header,
  .agent-follow-up-notifications__actions {
    align-items: stretch;
  }
  .agent-follow-up-notifications__actions,
  .agent-follow-up-notifications__actions .xw-btn {
    width: 100%;
  }
  .agent-follow-up-notification {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .agent-follow-up-notification__time,
  .agent-follow-up-notification__actions {
    grid-column: 2/-1;
    justify-content: flex-start;
    min-width: 0;
  }
  .agent-follow-up-notification__actions {
    flex-wrap: wrap;
  }
}
/* Quick Actions */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.quick-action {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.quick-action:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  background: var(--brand-soft);
  transform: translateY(-2px);
}

.quick-action__icon {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  background: var(--brand-soft);
  font-size: 1.5rem;
}

.quick-action__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.quick-action__desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.quick-action--locked {
  border-color: var(--border-soft);
  background: var(--surface-muted);
  opacity: 70%;
  cursor: not-allowed;
}
.quick-action--locked:hover {
  border-color: var(--border-soft);
  background: var(--surface-muted);
  transform: none;
}

.quick-action__lock {
  display: inline-flex;
  position: absolute;
  right: -6px;
  bottom: -6px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.quick-action__meta {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Next Actions */
.dashboard-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard-action {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dashboard-action__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 0.75rem;
  background: var(--surface-alt);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.dashboard-action__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.dashboard-action__content strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.dashboard-action__content span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.dashboard-action--critical {
  border-color: rgba(239, 68, 68, 0.45);
}
.dashboard-action--critical .dashboard-action__icon {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.dashboard-action--warning {
  border-color: rgba(249, 115, 22, 0.45);
}
.dashboard-action--warning .dashboard-action__icon {
  background: rgba(249, 115, 22, 0.18);
  color: #f97316;
}

.dashboard-action--info {
  border-color: rgba(59, 130, 246, 0.45);
}
.dashboard-action--info .dashboard-action__icon {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.dashboard-action--success {
  border-color: rgba(34, 197, 94, 0.35);
}
.dashboard-action--success .dashboard-action__icon {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.dashboard-action--empty {
  border-style: dashed;
  justify-content: flex-start;
}

@media (width <= 720px) {
  .dashboard-action {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-action__icon {
    width: 32px;
    height: 32px;
  }
}
/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms ease;
}
.activity-item:hover {
  background: color-mix(in srgb, var(--brand) 3%, transparent);
}
.activity-item:last-child {
  border-bottom: none;
}

.activity-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 1rem;
  background: var(--muted-soft);
  font-size: 1rem;
}

.activity-item__icon--success {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
}

.activity-item__icon--warning {
  background: color-mix(in srgb, var(--agent) 15%, transparent);
}

.activity-item__icon--danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
}

.activity-item__icon--info {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
}

.activity-item__content {
  flex: 1;
  min-width: 0;
}

.activity-item__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.activity-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.activity-item__time {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Channel Overview */
.channel-list {
  display: flex;
  flex-direction: column;
}

.channel-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.channel-item:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.channel-item:last-child {
  border-bottom: none;
}

.channel-item__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: var(--surface-alt);
  font-size: 1.25rem;
  font-weight: 700;
  color: #3b82f6;
}

.channel-item__info {
  flex: 1;
  min-width: 0;
}

.channel-item__name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.channel-item__stats {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.channel-item__status {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.channel-item__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.channel-item__status-dot--warning {
  background: #f97316;
  box-shadow: 0 0 8px #f97316;
}

.channel-item__status-dot--danger {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.channel-item__status-dot--offline {
  background: var(--border-soft);
  box-shadow: none;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-soft);
}

.progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  transition: width 320ms ease;
}

.progress-bar__fill--success {
  background: linear-gradient(90deg, #22c55e, var(--ok));
}

.progress-bar__fill--warning {
  background: linear-gradient(90deg, #f97316, var(--agent));
}

.progress-bar__fill--danger {
  background: linear-gradient(90deg, #ef4444, var(--danger));
}

/* Welcome Card */
.welcome-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  border-color: var(--brand-line);
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--agent) 5%, transparent));
}
.welcome-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft), transparent 70%);
  pointer-events: none;
}

.welcome-card__content {
  position: relative;
  z-index: 1;
}

.welcome-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.welcome-card p {
  max-width: 600px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.welcome-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Empty State Enhanced */
.xw-empty--large {
  padding: 3rem;
}

.xw-empty__illustration {
  width: 120px;
  height: 120px;
  margin-bottom: 1rem;
  opacity: 30%;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.sh-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sh-dashboard__header {
  align-items: flex-start;
}

.sh-dashboard__eyebrow {
  color: var(--info);
}

.sh-connection-badge {
  gap: 6px;
}

.sh-loading,
.sh-error {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 48px 24px;
  color: var(--text-2, var(--text-secondary));
}

.sh-loading__spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--line);
  border-top-color: var(--info);
  border-radius: 999px;
  animation: sh-spin 1s linear infinite;
}

@keyframes sh-spin {
  to {
    transform: rotate(360deg);
  }
}
.health-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.health-banner--ok {
  border-color: var(--ok-line);
  background: linear-gradient(90deg, var(--ok-soft), transparent 62%), var(--surface-1);
}

.health-banner--warn {
  border-color: var(--warn-line);
  background: linear-gradient(90deg, var(--warn-soft), transparent 62%), var(--surface-1);
}

.health-banner--danger {
  border-color: var(--danger-line);
  background: linear-gradient(90deg, var(--danger-soft), transparent 62%), var(--surface-1);
}

.health-banner__pulse {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2, var(--surface-alt));
}

.health-banner__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.health-banner__content strong {
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.health-banner__content .dim {
  overflow-wrap: anywhere;
}

.health-banner__eyebrow {
  color: var(--text-2);
}

.health-banner__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

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

.sh-kpi-card {
  gap: 12px;
  min-width: 0;
}

.sh-kpi-card .xw-kpi-card__label {
  min-height: 2.5em;
  overflow: visible;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.sh-kpi-card .xw-kpi-card__value {
  overflow-wrap: anywhere;
}

.sh-kpi-card .xw-meter {
  width: 100%;
}

.sh-kpi-card .xw-fact {
  padding-block: 6px 0;
}

.sh-kpi-card .xw-fact__value {
  overflow-wrap: anywhere;
}

.sh-section__subtitle {
  max-width: 72ch;
  margin: 4px 0 0;
  color: var(--text-2);
}

.sh-section > .xw-section__body {
  min-width: 0;
}

.sh-chart-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: flex-end;
}

.sh-time-range-tabs,
.sh-resource-tabs {
  flex-shrink: 0;
}

.sh-chart-card__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: flex-end;
}

.sh-chart-card__legend-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

.sh-chart-card__legend-box {
  width: 10px;
  height: 10px;
  border-radius: 0.5rem;
}

.sh-chart-card__legend-box--machine-cpu {
  background: var(--info);
}

.sh-chart-card__legend-box--cpu {
  background: var(--agent);
}

.sh-chart-card__legend-box--machine-memory {
  background: var(--ok);
}

.sh-chart-card__legend-box--memory {
  background: var(--warn);
}

.sh-chart-card__body {
  min-height: 320px;
}

.sh-rate-card__isolation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--info-line);
  border-radius: 0.75rem;
  background: var(--info-soft);
  font-size: 12px;
  color: var(--text-2);
}

.sh-rate-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sh-rate-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(200px, 1.6fr) repeat(4, minmax(72px, 0.55fr));
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}

.sh-rate-row--header {
  padding-top: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3, var(--text-muted));
}

.sh-rate-cell--channel {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-rate-cell--usage {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.sh-rate-bar {
  flex: 1 1 auto;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-inset, var(--surface-2));
}

.sh-rate-bar__fill {
  height: 100%;
  border-radius: 999px;
}

.sh-rate-bar__fill--ok {
  background: var(--ok);
}

.sh-rate-bar__fill--warn {
  background: var(--warn);
}

.sh-rate-bar__fill--danger {
  background: var(--danger);
}

.sh-rate-usage-text,
.sh-rate-cell--value {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sh-rate-usage-text {
  min-width: 70px;
  color: var(--text-2);
}

.health-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sh-companion-grid--compact {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
}

.service-card[data-tone=ok] {
  border-color: var(--ok-line);
  background: linear-gradient(180deg, var(--ok-soft), transparent 58%), var(--surface-1);
}

.service-card[data-tone=warn] {
  border-color: var(--warn-line);
  background: linear-gradient(180deg, var(--warn-soft), transparent 58%), var(--surface-1);
}

.service-card[data-tone=danger] {
  border-color: var(--danger-line);
  background: linear-gradient(180deg, var(--danger-soft), transparent 58%), var(--surface-1);
}

.sh-companion-card--compact {
  gap: 4px;
  min-height: 86px;
  padding: 10px 12px;
  border-left: 3px solid var(--ok);
  background: var(--surface-inset, var(--surface-2));
}

.sh-companion-card--compact[data-tone=warn] {
  border-left-color: var(--warn);
}

.sh-companion-card--compact[data-tone=danger] {
  border-left-color: var(--danger);
}

.service-card__head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sh-companion-card--compact .service-card__head {
  gap: 8px;
  align-items: center;
}

.service-card__title-block {
  flex: 1 1 auto;
  min-width: 0;
}

.service-card__name {
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-companion-card--compact .service-card__name {
  font-size: 13px;
  font-weight: 600;
}

.service-card__sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-2);
}

.sh-companion-card--compact .service-card__sub {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--text-3);
}

.sh-companion-card__note {
  margin-top: -2px;
  color: var(--muted, var(--text-2));
}

.service-card__metric-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.service-card__metric {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.sh-companion-card--compact .service-card__metric {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 500;
}

.sh-companion-card__telemetry {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface-inset, var(--surface-2)) 78%, transparent);
}

.sh-companion-card__runtime-stats,
.sh-companion-card__details,
.sh-info-card__grid {
  display: grid;
  gap: 8px;
}

.sh-companion-card__details .xw-fact,
.sh-info-card__grid .xw-fact {
  gap: 12px;
}

.sh-companion-card__details .xw-fact__value,
.sh-info-card__grid .xw-fact__value {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.sh-health-table-wrap {
  overflow-x: auto;
}

.sh-health-table {
  min-width: 860px;
}

.sh-health-table th,
.sh-health-table td {
  vertical-align: top;
}

.sh-health-table td {
  padding-block: 10px;
}

.sh-health-table .num {
  text-align: right;
  white-space: nowrap;
}

.sh-health-table__primary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sh-health-table__primary span {
  overflow: hidden;
  font-weight: 700;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-health-table__primary small,
.sh-health-table__endpoint {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.sh-resource-summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sh-bottom {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.sh-deployments-card__grid {
  display: grid;
  gap: 10px;
}

.sh-deployments-card__grid .xw-fact__value {
  overflow-wrap: anywhere;
  text-align: right;
}

.sh-alerts-panel.alerts-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

.sh-alerts-panel .alerts-panel__title {
  display: none;
}

.sh-alerts-panel .alerts-panel__list {
  gap: 10px;
}

@media (width <= 1260px) {
  .sh-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sh-bottom {
    grid-template-columns: 1fr;
  }
}
@media (width <= 980px) {
  .health-banner,
  .sh-dashboard__header,
  .sh-dashboard__header .xw-page-header__actions {
    align-items: flex-start;
  }
  .health-banner {
    flex-direction: column;
  }
  .health-banner__actions,
  .sh-chart-card__legend {
    justify-content: flex-start;
  }
  .sh-chart-card__actions {
    justify-content: flex-start;
  }
  .sh-rate-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 12px 0;
  }
  .sh-rate-row--header {
    display: none;
  }
  .sh-rate-cell--channel {
    white-space: normal;
  }
  .sh-rate-cell--usage {
    align-items: flex-start;
  }
  .sh-rate-cell--value,
  .sh-rate-usage-text {
    text-align: left;
  }
}
@media (width <= 680px) {
  .sh-dashboard {
    gap: 16px;
  }
  .sh-chart-card > .xw-section__header {
    flex-direction: column;
  }
  .sh-chart-card > .xw-section__header,
  .sh-chart-card > .xw-section__header .xw-section__actions,
  .sh-chart-card__actions {
    width: 100%;
  }
  .sh-chart-card__legend {
    flex-direction: column;
    align-items: flex-start;
  }
  .sh-kpi-grid,
  .sh-resource-summary-grid,
  .health-grid {
    grid-template-columns: 1fr;
  }
  .health-banner,
  .service-card {
    padding: 14px;
  }
  .sh-rate-cell--usage {
    flex-direction: column;
  }
}
.apexcharts-canvas {
  background: transparent !important;
}

.apexcharts-tooltip {
  border: 1px solid var(--line) !important;
  border-radius: 0.75rem !important;
  background: var(--surface-1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  overflow: hidden !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  margin: 0 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-2, var(--surface-alt)) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
}
.apexcharts-tooltip .apexcharts-tooltip-series-group {
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
}
.apexcharts-tooltip .apexcharts-tooltip-text {
  flex: 1 1 auto !important;
}
.apexcharts-tooltip .apexcharts-tooltip-y-group {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 0 !important;
}
.apexcharts-tooltip .apexcharts-tooltip-text-y-label {
  margin: 0 !important;
  flex: 1 1 auto !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--text-2) !important;
}
.apexcharts-tooltip .apexcharts-tooltip-text-y-value {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.apexcharts-tooltip .apexcharts-tooltip-marker {
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  margin-right: 8px !important;
  border-radius: 50% !important;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  fill: var(--text-3, var(--text-muted)) !important;
}

.apexcharts-gridline,
.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
  stroke: var(--line) !important;
}

.apexcharts-legend-text {
  color: var(--text-2) !important;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   System Admin Dashboard - Mission Control bridge
   ========================================================================== */
/* Dashboard Container */
.sysadmin-dashboard {
  width: 100%;
}

.sysadmin-dashboard.dashboard--mc {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: none;
}

.sysadmin-dashboard.dashboard--mc.sysadmin-dashboard--agents {
  width: 100%;
  margin-inline: 0;
  padding: 0;
}

.sysadmin-dashboard.dashboard--mc .sysadmin-middle-row,
.sysadmin-dashboard.dashboard--mc .sysadmin-overlap-widget {
  margin-bottom: 0;
}

.sysadmin-dashboard__header {
  min-width: 0;
}

.sysadmin-dashboard__eyebrow {
  color: var(--info);
}

@media (width <= 900px) {
  .sysadmin-dashboard--agents .xw-page-header {
    padding: 0;
  }
}
.sysadmin-summary-strip {
  margin-bottom: 0;
}

.sysadmin-agent-cycle-grid {
  --cycle-card-bg: color-mix(in srgb, var(--surface-1) 94%, transparent);
  --cycle-card-bg-strong: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --cycle-card-border: color-mix(in srgb, var(--line) 82%, var(--agent-line) 18%);
  --cycle-card-border-strong: color-mix(in srgb, var(--line-strong) 76%, var(--agent-line) 24%);
  --cycle-muted: var(--text-3);
  --cycle-subtle: var(--text-2);
  --cycle-agent-bg: linear-gradient(180deg, var(--agent-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-brand-bg: linear-gradient(180deg, var(--brand-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-ok-bg: linear-gradient(180deg, var(--ok-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-warn-bg: linear-gradient(180deg, var(--warn-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-danger-bg: linear-gradient(180deg, var(--danger-soft), transparent 78%), var(--cycle-card-bg);
}

.sysadmin-dashboard--agents .cycle-card__sub {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sysadmin-design-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.85fr);
  gap: 1rem;
}
@media (width <= 1080px) {
  .sysadmin-design-split {
    grid-template-columns: 1fr;
  }
}

.sysadmin-design-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.sysadmin-design-card > .card__head {
  align-items: flex-start;
}

.sysadmin-card-note {
  font-size: 0.75rem;
  text-align: right;
}

.sysadmin-org-health-list,
.sysadmin-agent-list,
.sysadmin-trace-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sysadmin-org-health-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.42fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-alt);
  cursor: pointer;
}
.sysadmin-org-health-row:hover, .sysadmin-org-health-row:focus-visible {
  border-color: var(--brand-line);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
@media (width <= 640px) {
  .sysadmin-org-health-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.sysadmin-scope-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.7rem;
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--brand-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--info);
}

.sysadmin-org-health-row__main,
.sysadmin-agent-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sysadmin-org-health-row__main > strong,
.sysadmin-agent-row__main > strong {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sysadmin-org-health-row__meter {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) 2.4rem;
  gap: 0.5rem;
  align-items: center;
}
@media (width <= 640px) {
  .sysadmin-org-health-row__meter {
    grid-column: 1/-1;
  }
}

.sysadmin-health-percent {
  font-size: 0.72rem;
  text-align: right;
}

.sysadmin-health-percent--ok {
  color: var(--success);
}

.sysadmin-health-percent--warn {
  color: var(--warning);
}

.sysadmin-health-percent--danger {
  color: var(--danger);
}

.sysadmin-agent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.sysadmin-agent-row:last-child {
  border-bottom: 0;
}

.sysadmin-agent-row__avatar {
  width: 30px;
  height: 30px;
  font-size: 0.72rem;
}

.sysadmin-trace-row {
  display: grid;
  grid-template-columns: 5.5rem 8rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.sysadmin-trace-row:last-child {
  border-bottom: 0;
}
@media (width <= 760px) {
  .sysadmin-trace-row {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
  }
}

.sysadmin-trace-row__time {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.sysadmin-trace-row__agent {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sysadmin-trace-row__message {
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.sysadmin-trace-row__meta {
  font-size: 0.72rem;
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOP STATS ROW (3 Large KPI Cards - System-level metrics)
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sysadmin-stats-row .stat-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.sysadmin-stats-row .stat-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.sysadmin-stats-row .stat-card {
  display: grid;
  gap: 0.375rem 1rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "value icon" "label icon";
}

.sysadmin-stats-row .stat-card__value {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: value;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}

.sysadmin-stats-row .stat-card__label {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: label;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.sysadmin-stats-row .stat-card__icon {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  border-radius: 1rem;
  background: var(--brand-soft);
  color: var(--brand);
}
.sysadmin-stats-row .stat-card__icon svg,
.sysadmin-stats-row .stat-card__icon i {
  width: 28px;
  height: 28px;
  font-size: 28px;
}

.sysadmin-stats-row .stat-card--success .stat-card__icon {
  background: var(--ok-soft);
  color: var(--ok);
}

.sysadmin-stats-row .stat-card--purple .stat-card__icon {
  background: var(--agent-soft);
  color: var(--agent);
}

.sysadmin-stats-row .stat-card--warning .stat-card__icon {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MIDDLE ROW (Health Panel + Alerts)
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-middle-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
@media (width <= 1320px) {
  .sysadmin-middle-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr);
  }
}
@media (width <= 1100px) {
  .sysadmin-middle-row {
    grid-template-columns: 1fr;
  }
}

.sysadmin-dashboard .dashboard-widget {
  min-width: 0;
}

.sysadmin-dashboard .dashboard-widget > .dashboard-section,
.sysadmin-dashboard .dashboard-widget > .xw-section {
  height: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
}

.sysadmin-dashboard .dashboard-widget > .dashboard-section > .dashboard-section__header,
.sysadmin-dashboard .dashboard-widget > .xw-section > .xw-section__header,
.sysadmin-dashboard > .sysadmin-panel > .xw-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.sysadmin-dashboard .dashboard-widget > .dashboard-section > .dashboard-section__title,
.sysadmin-dashboard .dashboard-widget > .xw-section .xw-section__title,
.sysadmin-dashboard > .sysadmin-panel .xw-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sysadmin-dashboard .dashboard-widget > .dashboard-section > .dashboard-section__actions,
.sysadmin-dashboard .dashboard-widget > .xw-section .xw-section__actions,
.sysadmin-dashboard > .sysadmin-panel .xw-section__actions {
  align-items: center;
}

.sysadmin-dashboard .dashboard-widget > .dashboard-section > .dashboard-section__body,
.sysadmin-dashboard .dashboard-widget > .xw-section > .xw-section__body,
.sysadmin-dashboard > .sysadmin-panel > .xw-section__body {
  padding: 1rem 1.5rem;
}

.sysadmin-dashboard .dashboard-widget > .dashboard-section > .dashboard-section__body.dashboard-section__body--flush,
.sysadmin-dashboard .dashboard-widget > .sysadmin-panel--flush > .xw-section__body {
  padding: 0;
}

.sysadmin-dashboard > .sysadmin-panel {
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
}

.sysadmin-health-widget__status {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.sysadmin-health-widget__status.connected {
  color: var(--ok);
}
.sysadmin-health-widget__status.connected .sysadmin-health-widget__status-dot {
  background: var(--ok);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 50%, transparent);
}
.sysadmin-health-widget__status.connecting {
  color: var(--warn);
}
.sysadmin-health-widget__status.connecting .sysadmin-health-widget__status-dot {
  background: var(--warn);
  box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 45%, transparent);
}
.sysadmin-health-widget__status.disconnected {
  color: var(--danger);
}
.sysadmin-health-widget__status.disconnected .sysadmin-health-widget__status-dot {
  background: var(--danger);
}

.sysadmin-health-widget__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* Panel Body - Horizontal layout: Gauges | Stats | Chart */
.sysadmin-health-widget {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (width <= 1100px) {
  .sysadmin-health-widget {
    grid-template-columns: auto auto;
  }
  .sysadmin-health-widget .sysadmin-health-chart {
    grid-column: 1/-1;
  }
}
@media (width <= 700px) {
  .sysadmin-health-widget {
    grid-template-columns: 1fr 1fr;
  }
  .sysadmin-health-widget .sysadmin-health-stats {
    grid-column: 1/-1;
    flex-direction: row;
    justify-content: space-around;
  }
}

/* Gauges Container */
.sysadmin-health-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Health Stats - Vertical list */
.sysadmin-health-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-soft);
}

.sysadmin-health-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sysadmin-health-stat__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sysadmin-health-stat__value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Chart Section */
.sysadmin-health-chart {
  min-height: 120px;
  padding-left: 1rem;
  border-left: 1px solid var(--border-soft);
  /* ApexCharts uses inline styles, !important required */
}
.sysadmin-health-chart .apexcharts-canvas {
  background: transparent !important;
}
.sysadmin-health-chart {
  /* ApexCharts uses inline styles, !important required */
}
.sysadmin-health-chart .apexcharts-tooltip {
  border: 1px solid var(--border-soft) !important;
  background: var(--surface) !important;
}

/* Alerts Panel */
.sysadmin-alerts-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sysadmin-alerts-panel .alerts-panel__list {
  flex: 1;
  gap: 0;
}

.sysadmin-alerts-panel .alerts-panel__list .alert {
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.sysadmin-alerts-panel .alerts-panel__list .alert:last-child {
  border-bottom: none;
}

.sysadmin-alerts-panel .alert__content {
  gap: 2px;
}

.sysadmin-alerts-panel .alert__title,
.sysadmin-alerts-panel .alert__message {
  overflow-wrap: anywhere;
}

/* Scheduling overlap telemetry */
.sysadmin-overlap-widget {
  margin-bottom: 1.5rem;
}

.sysadmin-overlap-window {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sysadmin-overlap-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (width <= 980px) {
  .sysadmin-overlap-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 560px) {
  .sysadmin-overlap-metrics {
    grid-template-columns: 1fr;
  }
}

.sysadmin-overlap-metrics .stat-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: none;
}

.sysadmin-overlap-metrics .stat-card__value {
  font-size: 2rem;
  line-height: 1;
}

.sysadmin-overlap-metrics .stat-card__label {
  overflow-wrap: anywhere;
}

.sysadmin-overlap-metrics .stat-card__icon {
  width: 40px;
  height: 40px;
}
.sysadmin-overlap-metrics .stat-card__icon svg,
.sysadmin-overlap-metrics .stat-card__icon i {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.sysadmin-overlap-footer {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.sysadmin-overlap-empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--text-secondary);
}

.sysadmin-overlap-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--success);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADERS
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sysadmin-section-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sysadmin-section-updated {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORGANIZATIONS GRID
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-orgs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (width <= 1200px) {
  .sysadmin-orgs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 700px) {
  .sysadmin-orgs-grid {
    grid-template-columns: 1fr;
  }
}

.sysadmin-panel--organizations .sysadmin-orgs-grid {
  margin-bottom: 0;
}

.org-card.sysadmin-org-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.org-card.sysadmin-org-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.org-card.sysadmin-org-card {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  cursor: pointer;
}
.org-card.sysadmin-org-card:hover {
  border-color: var(--brand-line);
}

.org-card.sysadmin-org-card .org-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.org-card.sysadmin-org-card .org-card__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.org-card.sysadmin-org-card .org-card__icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.org-card.sysadmin-org-card .org-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.org-card.sysadmin-org-card .org-card__id {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 0.5rem;
  background: var(--surface-alt);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.org-card.sysadmin-org-card .org-card__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.org-card.sysadmin-org-card .org-card__status--active {
  background: var(--ok-soft);
  color: var(--success);
}
.org-card.sysadmin-org-card .org-card__status--inactive {
  background: var(--surface-alt);
  color: var(--text-secondary);
}

.org-card.sysadmin-org-card .org-card__stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.org-card.sysadmin-org-card .org-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.org-card.sysadmin-org-card .org-card__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.org-card.sysadmin-org-card .org-card__stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.org-card.sysadmin-org-card .org-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.org-card.sysadmin-org-card .org-card__footer-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.org-card.sysadmin-org-card .org-card__footer-link {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s ease;
}
.org-card.sysadmin-org-card .org-card__footer-link:hover {
  color: var(--accent-strong);
}
.org-card.sysadmin-org-card .org-card__footer-link svg {
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RECENT ACTIVITY WIDGET
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-activity-list {
  display: flex;
  flex-direction: column;
}

.sysadmin-activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.2s ease;
}
.sysadmin-activity-row:hover {
  background: var(--brand-soft);
}
.sysadmin-activity-row:last-child {
  border-bottom: none;
}
@media (width <= 700px) {
  .sysadmin-activity-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.sysadmin-activity-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.75rem;
  background: var(--muted-soft);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.sysadmin-activity-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sysadmin-activity-type {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sysadmin-activity-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.sysadmin-activity-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (width <= 700px) {
  .sysadmin-activity-time {
    grid-column: 2;
  }
}

.sysadmin-activity-empty {
  min-height: 200px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUICK ACTIONS BAR
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.sysadmin-quick-action {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.sysadmin-quick-action:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.sysadmin-quick-action--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--text-inverse);
}
.sysadmin-quick-action--primary:hover {
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 35%, transparent);
}
.sysadmin-quick-action svg {
  width: 18px;
  height: 18px;
  opacity: 90%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONNECTION STATUS & REAL-TIME INDICATOR
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-connection-status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.sysadmin-connection-status--warning {
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  color: var(--warning);
}
.sysadmin-connection-status--error {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}
.sysadmin-connection-status svg {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING & EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-loading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-secondary);
}

.sysadmin-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sysadmin-spin 0.9s linear infinite;
}

@keyframes sysadmin-spin {
  to {
    transform: rotate(360deg);
  }
}
.sysadmin-empty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 1px dashed var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-alt);
  text-align: center;
}

.sysadmin-empty__icon {
  opacity: 50%;
  font-size: 3rem;
}

.sysadmin-empty__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sysadmin-empty__text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PROCESSING WIDGET (System Admin override)
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-processing-widget.sysadmin-processing-widget {
  margin-bottom: 1.5rem;
}
.sysadmin-processing-widget.sysadmin-processing-widget .processing-widget__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.sysadmin-processing-widget.sysadmin-processing-widget .processing-widget__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-alt);
}
.sysadmin-processing-widget.sysadmin-processing-widget .processing-widget__stat-value {
  font-size: 2rem;
  font-weight: 700;
}
.sysadmin-processing-widget.sysadmin-processing-widget .processing-widget__stat-label {
  font-size: 0.75rem;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RECENT PROCESSING ACTIVITY (System Admin context)
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-processing-activity {
  margin-bottom: 1.5rem;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.sysadmin-redirect-page {
  gap: 1rem;
}

.sysadmin-redirect-page__header {
  margin-bottom: 0;
}

.sysadmin-redirect-page__content {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sysadmin-redirect-page__card {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: min(100%, 680px);
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.sysadmin-redirect-page__orb {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.sysadmin-redirect-page__orb .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

.sysadmin-redirect-page__copy {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.sysadmin-redirect-page__copy h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--text-primary);
}

.sysadmin-redirect-page__copy .eyebrow {
  margin: 0;
}

.sysadmin-redirect-page__loading {
  min-height: 0;
  margin: 0;
  padding: 0;
}

.sysadmin-redirect-page__loading .spinner,
.sysadmin-redirect-page__loading span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (width <= 640px) {
  .sysadmin-redirect-page__card {
    align-items: flex-start;
    padding: 1rem;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.billing-admin-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.billing-tier-grid,
.billing-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.billing-tier-card,
.billing-catalog-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.billing-tier-card:hover,
.billing-catalog-card:hover {
  border-color: var(--border-strong, var(--border-soft));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.billing-tier-card {
  position: relative;
}

.billing-tier-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.billing-tier-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.billing-tier-card__code {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--info-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.billing-tier-card__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.billing-tier-card__description {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.billing-tier-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.billing-tier-card__price-primary {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.billing-tier-card__price-amount {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.billing-tier-card__price-suffix {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.billing-tier-card__price-secondary {
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, var(--text-secondary));
}

.billing-tier-card__price-empty {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted, var(--text-secondary));
}

.billing-tier-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  margin: 0;
}

.billing-tier-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.billing-tier-stat dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.billing-tier-stat dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.billing-tier-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.billing-policy-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.billing-policy-chip i,
.billing-policy-chip svg {
  font-size: 0.8125rem;
  line-height: 1;
}

.billing-policy-chip--on {
  background: var(--ok-soft);
  color: var(--ok);
}

.billing-policy-chip--off {
  background: var(--muted-soft);
  color: var(--text-secondary);
}

.billing-tier-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: auto;
}
.billing-tier-card__actions .pill-btn {
  flex: 1 1 auto;
  justify-content: center;
}

.billing-tier-card__versions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}

.billing-tier-versions-header {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.billing-tier-versions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.billing-tier-version {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 4px 8px;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-secondary);
}

.billing-tier-version--active {
  background: var(--info-soft);
  color: var(--text-primary);
}

.billing-tier-version__label {
  font-weight: 600;
  color: var(--text-primary);
}

.billing-tier-version__date {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

.billing-tier-version__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.billing-tier-version__per {
  margin-left: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted, var(--text-secondary));
}

.billing-tier-version .status-badge {
  justify-self: end;
}

.billing-catalog-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.billing-catalog-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.billing-catalog-card__body {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}

.catalog-entry-name {
  font-weight: 600;
  color: var(--text-primary);
}

.catalog-entry-description {
  font-size: 0.85rem;
}

.catalog-entry-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.catalog-entry-section__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.catalog-entry-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.system-billing {
  min-width: 0;
}

.system-billing-shell .xw-dg-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.system-billing-shell .xw-dg-tb {
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}
.system-billing-shell .xw-dg-split {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface);
}
.system-billing-shell .xw-dg-body {
  padding: 0;
  background: var(--surface-inset);
}

.system-billing-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.system-billing-panel {
  min-width: 0;
  border-color: var(--line);
  background: var(--surface);
}

.system-billing-panel__subtitle {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-2);
}

.system-revenue-window {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.system-revenue-panel--wide {
  grid-column: 1/-1;
}

.system-revenue-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 0.5rem;
}

.system-revenue-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}
.system-revenue-kpi span {
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.system-revenue-kpi strong {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.system-revenue-kpi--ok strong {
  color: var(--ok);
}

.system-revenue-kpi--info strong {
  color: var(--info);
}

.system-revenue-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 1rem;
}

.system-revenue-mix,
.system-revenue-facts {
  display: grid;
  gap: 0.75rem;
}

.system-revenue-mix__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 0.75rem;
  align-items: center;
}
.system-revenue-mix__row > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.system-revenue-mix__row strong {
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-revenue-mix__row span {
  font-size: 0.8125rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.system-revenue-meter {
  grid-column: 1/-1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-inset);
}

.system-revenue-meter__bar {
  min-width: 2px;
  height: 100%;
  border-radius: inherit;
  transition: width 0.16s ease;
}

.system-revenue-meter__bar--subscription {
  background: var(--brand);
}

.system-revenue-meter__bar--ai {
  background: var(--info);
}

.system-revenue-meter__bar--addon {
  background: var(--agent);
}

.system-revenue-trend {
  width: 100%;
  height: 160px;
}
.system-revenue-trend line {
  stroke: var(--line);
  stroke-width: 1;
}

.system-revenue-trend__area {
  fill: color-mix(in srgb, var(--ok) 24%, transparent);
}

.system-revenue-trend__line {
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.system-revenue-trend__axis {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-3);
}
.system-revenue-trend__axis span {
  overflow-wrap: anywhere;
}

.system-revenue-table {
  min-width: 760px;
}
.system-revenue-table th,
.system-revenue-table td {
  vertical-align: middle;
}
.system-revenue-table .status-badge {
  padding: 2px 8px;
  font-size: 11px;
}
.system-revenue-table .num {
  text-align: right;
}
.system-revenue-table .mono {
  font-variant-numeric: tabular-nums;
}
.system-revenue-table .dim {
  color: var(--text-2);
}

.system-revenue-org {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.system-revenue-org > span:last-child,
.system-revenue-org > strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-tier-grid,
.billing-catalog-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}

.billing-tier-card,
.billing-catalog-card {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
  transform: none;
}

.billing-card-selectable {
  cursor: pointer;
}
.billing-card-selectable:hover, .billing-card-selectable:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 42%, transparent);
  outline: none;
}
.billing-card-selectable.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 56%, transparent);
}

.billing-tier-card__name,
.billing-catalog-card__title {
  letter-spacing: 0;
  color: var(--text);
}

.billing-tier-card__description,
.billing-tier-stat dt,
.billing-tier-card__price-suffix,
.billing-tier-card__price-secondary,
.billing-tier-version__date,
.billing-tier-version__per {
  color: var(--text-2);
}

.billing-tier-card__price,
.billing-tier-card__versions,
.billing-catalog-card__body {
  border-color: var(--line);
}

.system-billing-detail {
  min-width: min(420px, 34vw);
}

.system-billing-detail__body {
  display: grid;
  gap: 0.75rem;
}

.system-billing-detail__section {
  border-color: var(--line);
  background: var(--surface);
}

@media (width <= 900px) {
  .system-billing-detail {
    min-width: 0;
  }
  .system-revenue-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .system-revenue-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width <= 640px) {
  .system-billing-content {
    padding: 0.75rem;
  }
  .billing-tier-grid,
  .billing-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .billing-tier-card__header,
  .billing-catalog-card__header,
  .catalog-entry-section__header {
    flex-direction: column;
    align-items: stretch;
  }
  .billing-tier-stats {
    grid-template-columns: 1fr;
  }
  .billing-tier-version {
    grid-template-columns: 1fr;
  }
  .billing-tier-version .status-badge {
    justify-self: start;
  }
  .billing-tier-card__actions .pill-btn {
    flex-basis: 100%;
  }
  .system-revenue-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .system-revenue-window {
    width: 100%;
  }
  .system-revenue-window .xw-tabs__tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.system-channels-page--mc .system-channels__alert {
  margin: 16px 24px 0;
}
.system-channels-page--mc .system-channels__toolbar-select {
  min-width: 170px;
}
.system-channels-page--mc .system-channels__toolbar-select--status,
.system-channels-page--mc .system-channels__toolbar-select--size {
  min-width: 112px;
}
.system-channels-page--mc .system-channels__skeleton {
  margin: 0;
}
.system-channels-page--mc .system-channels__grid {
  align-items: stretch;
}
.system-channels-page--mc .system-channel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 248px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  text-align: left;
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.system-channels-page--mc .system-channel-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.system-channels-page--mc .system-channel-card[data-enabled=false] {
  background: color-mix(in srgb, var(--surface-1) 82%, var(--warning-soft));
}
.system-channels-page--mc .system-channel-card__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.system-channels-page--mc .system-channel-card__title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.system-channels-page--mc .system-channel-card__code.scope-card__code {
  flex: 0 0 auto;
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}
.system-channels-page--mc .system-channel-card__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-channels-page--mc .system-channel-card__meta,
.system-channels-page--mc .system-channel-card__health-label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}
.system-channels-page--mc .system-channel-card__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-channels-page--mc .system-channel-card__description {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.system-channels-page--mc .system-channel-card__facts {
  display: grid;
  gap: 8px;
}
.system-channels-page--mc .system-channel-card__fact {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.system-channels-page--mc .system-channel-card__fact strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-channels-page--mc .system-channel-card__health {
  display: grid;
  gap: 7px;
}
.system-channels-page--mc .system-channel-card__health-label strong {
  font-weight: 650;
  color: var(--text);
}
.system-channels-page--mc .system-channel-card__external-id {
  display: block;
  max-width: 100%;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-channels-page--mc .system-channel-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.system-channels-page--mc .system-channel-card__actions .xw-btn {
  min-height: 30px;
}
.system-channels-page--mc .system-channel-card--create {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  cursor: pointer;
}
.system-channels-page--mc .system-channel-card--create:disabled {
  cursor: not-allowed;
  opacity: 62%;
}
.system-channels-page--mc .system-channel-card__create-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
}
.system-channels-page--mc .system-channel-card__create-title {
  font-weight: 650;
  color: var(--text);
}
.system-channels-page--mc .system-channel-card__create-subtitle {
  max-width: 240px;
  font-size: var(--fs-12);
  line-height: 1.35;
  text-align: center;
  color: var(--text-3);
}

.system-channels-modal .system-channels-modal__body {
  display: grid;
  gap: 14px;
}
.system-channels-modal .system-channels-modal__alert {
  margin: 0;
}

@media (width <= 760px) {
  .system-channels-page--mc .system-channels__alert {
    margin-inline: 12px;
  }
  .system-channels-page--mc .system-channels__toolbar-select,
  .system-channels-page--mc .system-channels__toolbar-select--status,
  .system-channels-page--mc .system-channels__toolbar-select--size {
    width: 100%;
    min-width: 0;
  }
  .system-channels-page--mc .system-channel-card {
    min-height: 0;
  }
  .system-channels-page--mc .system-channel-card__header,
  .system-channels-page--mc .system-channel-card__meta,
  .system-channels-page--mc .system-channel-card__health-label {
    flex-direction: column;
    align-items: flex-start;
  }
  .system-channels-page--mc .system-channel-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .system-channels-page--mc .system-channel-card__actions .xw-btn {
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   System Admin Grid Styles - QuickGrid Integration
   Theme-aware data grid styling
   ========================================================================== */
/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-dashboard {
  width: min(100%, 1880px);
  margin-inline: auto;
  padding: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADER
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sysadmin-page-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}
.sysadmin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface-muted) 100%);
}

.sysadmin-page-header__content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sysadmin-page-header__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sysadmin-page-header__subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.sysadmin-page-header__actions {
  display: flex;
  gap: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GRID SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-grid-section {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOOLBAR
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
@media (width <= 600px) {
  .sysadmin-grid-toolbar {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.sysadmin-search-box {
  display: flex;
  align-items: center;
  min-width: 300px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 1rem;
  background: var(--input-bg);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sysadmin-search-box:focus-within {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
@media (width <= 600px) {
  .sysadmin-search-box {
    min-width: 100%;
  }
}

.sysadmin-search-box__icon {
  margin-right: 0.5rem;
  opacity: 60%;
  color: var(--text-muted);
}

.sysadmin-search-box__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
}
.sysadmin-search-box__input::-moz-placeholder {
  color: var(--text-muted);
}
.sysadmin-search-box__input::placeholder {
  color: var(--text-muted);
}

.sysadmin-grid-toolbar__stats {
  display: flex;
  align-items: center;
}

.sysadmin-stat-badge {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.sysadmin-stat-badge strong {
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUICKGRID STYLES
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-grid-container {
  overflow-x: auto;
}

.sysadmin-data-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sysadmin-data-grid thead tr {
  background: var(--table-header-bg);
}
.sysadmin-data-grid thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  color: var(--table-header-color);
  white-space: nowrap;
}
.sysadmin-data-grid thead th[aria-sort] {
  -webkit-user-select: none;
     -moz-user-select: none;
  cursor: pointer;
}
.sysadmin-data-grid thead th[aria-sort]:hover {
  color: var(--color-primary);
}
.sysadmin-data-grid thead th[aria-sort=ascending]::after {
  content: " ↑";
  color: var(--color-primary);
}
.sysadmin-data-grid thead th[aria-sort=descending]::after {
  content: " ↓";
  color: var(--color-primary);
}
.sysadmin-data-grid tbody tr {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sysadmin-data-grid tbody tr:hover {
  background: var(--table-row-hover-bg);
}
.sysadmin-data-grid tbody tr:nth-child(even) {
  background: var(--surface-subtle);
}
.sysadmin-data-grid tbody tr:nth-child(even):hover {
  background: var(--table-row-hover-bg);
}
.sysadmin-data-grid tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--table-border-color);
  font-size: 0.9rem;
  color: var(--text-primary);
  vertical-align: middle;
}
.sysadmin-data-grid .cell-primary {
  min-width: 200px;
}
.sysadmin-data-grid .cell-slug {
  min-width: 120px;
}
.sysadmin-data-grid .cell-number {
  min-width: 80px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sysadmin-data-grid .cell-status {
  min-width: 90px;
}
.sysadmin-data-grid .cell-date {
  min-width: 110px;
  color: var(--text-muted);
}
.sysadmin-data-grid .cell-actions {
  width: 160px;
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CELL CONTENT COMPONENTS
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-cell-org {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.sysadmin-cell-org__icon {
  font-size: 1.5rem;
}

.sysadmin-cell-org__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sysadmin-cell-org__name {
  font-weight: 500;
  color: var(--text-primary);
}

.sysadmin-cell-org__desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sysadmin-slug-code {
  padding: 2px 8px;
  border: 1px solid var(--color-primary-border);
  border-radius: 0.5rem;
  background: var(--color-primary-bg);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATUS BADGES
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sysadmin-status-badge--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.sysadmin-status-badge--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.sysadmin-status-badge--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.sysadmin-status-badge--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINATION
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-grid-pagination {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.sysadmin-grid-pagination nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.sysadmin-grid-pagination button,
.sysadmin-grid-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}
.sysadmin-grid-pagination button:hover:not(:disabled),
.sysadmin-grid-pagination a:hover:not(:disabled) {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.sysadmin-grid-pagination button:focus,
.sysadmin-grid-pagination a:focus {
  outline: none;
}
.sysadmin-grid-pagination button:focus-visible,
.sysadmin-grid-pagination a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sysadmin-grid-pagination button:disabled,
.sysadmin-grid-pagination a:disabled {
  opacity: 40%;
  cursor: not-allowed;
}
.sysadmin-grid-pagination button.current, .sysadmin-grid-pagination button[aria-current=page],
.sysadmin-grid-pagination a.current,
.sysadmin-grid-pagination a[aria-current=page] {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.sysadmin-grid-pagination span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.system-channels-modal {
  --modal-bg: var(--surface-elevated);
  --modal-border: var(--border-soft);
  --modal-close-hover-bg: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}

.system-channels-modal .modal__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.system-channels-modal .modal__form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.system-channels-modal__readonly[disabled] {
  opacity: 100%;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.sysadmin-empty-state__icon {
  margin-bottom: 0.75rem;
  opacity: 50%;
  font-size: 4rem;
  color: var(--text-muted);
}

.sysadmin-empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sysadmin-empty-state__text {
  max-width: 400px;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-breadcrumb {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.sysadmin-breadcrumb__link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.sysadmin-breadcrumb__link:hover {
  color: var(--color-primary-contrast);
  text-decoration: underline;
}

.sysadmin-breadcrumb__separator {
  color: var(--text-muted);
}

.sysadmin-breadcrumb__current {
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETAIL GRID LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (width <= 1200px) {
  .sysadmin-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETAIL PANELS
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-detail-panel {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
}
.sysadmin-detail-panel--full {
  grid-column: 1/-1;
}

.sysadmin-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.sysadmin-detail-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sysadmin-detail-panel__body {
  padding: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETAIL LIST (Key-Value pairs)
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sysadmin-detail-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.sysadmin-detail-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.sysadmin-detail-item__label {
  flex-shrink: 0;
  width: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.sysadmin-detail-item__value {
  flex: 1;
  font-size: 0.9rem;
  text-align: right;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MINI CARDS (Shops, etc.)
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.sysadmin-mini-card {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.sysadmin-mini-card:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  transform: translateY(-1px);
}
.sysadmin-mini-card:focus {
  outline: none;
}
.sysadmin-mini-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sysadmin-mini-card__icon {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.sysadmin-mini-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sysadmin-mini-card__content strong {
  font-size: 0.85rem;
  color: var(--text-primary);
}
.sysadmin-mini-card__content small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MEMBER LIST
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sysadmin-member-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem;
  border-radius: 1rem;
  background: var(--surface-muted);
}

.sysadmin-member-item__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--accent-strong));
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-on-brand);
}

.sysadmin-member-item__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.sysadmin-member-item__info strong {
  font-size: 0.85rem;
  color: var(--text-primary);
}
.sysadmin-member-item__info small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURE FLAGS
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sysadmin-feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  background: var(--surface-muted);
}

.sysadmin-feature-item__name {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SETTINGS GRID
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}

.sysadmin-setting-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  background: var(--surface-muted);
}

.sysadmin-setting-item__key {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sysadmin-setting-item__value {
  font-size: 0.85rem;
  color: var(--text-primary);
  word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VIEW MORE / EMPTY INLINE
   ───────────────────────────────────────────────────────────────────────────── */
.sysadmin-view-more {
  margin-top: 0.75rem;
  text-align: center;
}

.sysadmin-empty-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Organizations Page - Clean Admin Grid Design
   ========================================================================== */
/* ─────────────────────────────────────────────────────────────────────────────
   PAGE CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.org-page {
  padding: 1rem 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────────────────────────────────────── */
.org-breadcrumb {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.org-breadcrumb__link {
  color: var(--accent);
  text-decoration: none;
}
.org-breadcrumb__link:hover {
  text-decoration: underline;
}

.org-breadcrumb__sep {
  color: var(--text-muted);
}

.org-breadcrumb__current {
  font-weight: 500;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.org-card {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

.org-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.org-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.org-card__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.org-card__subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.org-card__actions {
  display: flex;
  gap: 0.5rem;
}

/* Owner provisioning notice (shown after creating a new org) */
.org-owner-provisioning {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.org-owner-provisioning .alert {
  margin: 0;
}
.org-owner-provisioning p {
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
  color: var(--text-secondary);
}

.org-owner-provisioning__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.org-owner-provisioning__url .org-owner-provisioning__input {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.org-btn {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.org-btn:focus {
  outline: none;
}
.org-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.org-btn__icon {
  font-size: 0.9rem;
}

.org-btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--text-inverse);
}
.org-btn--primary:hover {
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  transform: translateY(-1px);
}

.org-btn--secondary {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  color: var(--text-secondary);
}
.org-btn--secondary:hover {
  background: var(--surface-muted);
}

.org-btn--outline {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
}
.org-btn--outline:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOOLBAR
   ───────────────────────────────────────────────────────────────────────────── */
.org-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.org-toolbar__search {
  display: flex;
  flex: 1;
  align-items: center;
  max-width: 320px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--input-bg);
}
.org-toolbar__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--brand-soft);
}

.org-toolbar__search-icon {
  margin-right: 0.5rem;
  opacity: 50%;
}

.org-toolbar__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--text-primary);
  outline: none;
}
.org-toolbar__search-input::-moz-placeholder {
  color: var(--text-muted);
}
.org-toolbar__search-input::placeholder {
  color: var(--text-muted);
}

.org-toolbar__count {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DATA GRID
   ───────────────────────────────────────────────────────────────────────────── */
.org-grid-wrapper {
  overflow: visible;
}

@media (width <= 768px) {
  .org-grid-wrapper {
    overflow: auto hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .org-grid-wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
.org-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.org-grid thead {
  background: var(--table-header-bg);
}
.org-grid thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--table-border-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  color: var(--table-header-color);
  white-space: nowrap;
}
.org-grid thead th[aria-sort], .org-grid thead th:has(button) {
  cursor: pointer;
}
.org-grid thead th[aria-sort]:hover .col-title,
.org-grid thead th[aria-sort]:hover .col-title-text,
.org-grid thead th[aria-sort]:hover button, .org-grid thead th:has(button):hover .col-title,
.org-grid thead th:has(button):hover .col-title-text,
.org-grid thead th:has(button):hover button {
  border-color: var(--brand-line);
  color: var(--brand);
}
.org-grid thead th[aria-sort] .col-title,
.org-grid thead th[aria-sort] .col-title-text,
.org-grid thead th[aria-sort] button, .org-grid thead th:has(button) .col-title,
.org-grid thead th:has(button) .col-title-text,
.org-grid thead th:has(button) button {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.org-grid thead th[aria-sort=ascending]::after, .org-grid thead th[aria-sort=descending]::after {
  content: none;
}
.org-grid thead th button {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.org-grid thead th button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.org-grid thead th button:focus {
  outline: none;
}
.org-grid thead th button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.org-grid tbody tr {
  border-bottom: 1px solid var(--table-border-color);
  transition: background 0.1s ease;
}
.org-grid tbody tr:hover {
  background: var(--table-row-hover-bg);
}
.org-grid tbody tr:nth-child(even) {
  background: var(--table-header-bg);
}
.org-grid tbody tr:nth-child(even):hover {
  background: var(--table-row-hover-bg);
}
.org-grid tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CELL STYLES
   ───────────────────────────────────────────────────────────────────────────── */
.org-cell-name {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.org-cell-name__icon {
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: var(--surface-alt);
  font-size: 1.25rem;
}

.org-cell-name__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.org-cell-name__text strong {
  font-weight: 500;
  color: var(--text-primary);
}
.org-cell-name__text small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.org-cell-slug {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.8rem;
  color: var(--accent);
}

.org-cell-icons {
  display: flex;
  gap: 0.375rem;
  opacity: 70%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────────────────────────────────── */
.org-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.org-badge--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.org-badge--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.org-badge--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.org-badge--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────────── */
.org-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.org-footer__count {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.org-footer__pagination {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.org-footer__pagination .org-footer__page-size {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.org-footer__pagination .org-footer__page-size select {
  min-width: 72px;
  height: 32px;
  padding: 0 0.375rem;
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--text-primary);
}
.org-footer__pagination nav {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.org-footer__pagination button,
.org-footer__pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-alt);
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
  cursor: pointer;
  text-decoration: none;
}
.org-footer__pagination button:hover:not(:disabled),
.org-footer__pagination a:hover:not(:disabled) {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--accent);
}
.org-footer__pagination button:disabled,
.org-footer__pagination a:disabled {
  opacity: 40%;
  cursor: not-allowed;
}
.org-footer__pagination button[aria-current=page], .org-footer__pagination button.current,
.org-footer__pagination a[aria-current=page],
.org-footer__pagination a.current {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--accent);
}
.org-footer__pagination span {
  padding: 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING & ERROR STATES
   ───────────────────────────────────────────────────────────────────────────── */
.org-loading,
.org-error {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.org-error {
  color: var(--danger);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED MODAL ADOPTION
   ───────────────────────────────────────────────────────────────────────────── */
.organizations-modal {
  --modal-bg: var(--surface-elevated);
  --modal-border: var(--border-soft);
  --modal-close-hover-bg: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}

.organizations-modal .modal__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.organizations-modal .modal__form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.organizations-modal__input,
.organizations-modal__select,
.organizations-modal__textarea {
  width: 100%;
}

.organizations-modal .warning-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-danger);
}

.organizations-modal--danger .modal__title {
  color: var(--color-danger);
}

.system-orgs-page--mc {
  gap: 0;
  min-width: 0;
  padding: 0;
}

.system-orgs-page--mc .alert {
  margin: 12px 24px 0;
  border-radius: var(--r-sm);
}

.system-orgs-page--mc .xw-empty,
.system-orgs-page--mc .xw-error {
  margin: 24px;
}

.app-shell .system-orgs-page--mc .system-orgs__table-wrap {
  overflow: auto hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.system-orgs-page--mc .system-orgs__table {
  min-width: 980px;
  border-collapse: collapse;
}

.system-orgs-page--mc .system-orgs__table th,
.system-orgs-page--mc .system-orgs__table td {
  height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.system-orgs-page--mc .system-orgs__table th {
  height: 34px;
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.system-orgs-page--mc .system-orgs__table tbody tr,
.system-orgs-page--mc .system-orgs__cards article {
  outline: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.system-orgs-page--mc .system-orgs__table tbody tr:hover,
.system-orgs-page--mc .system-orgs__table tbody tr:focus-visible {
  background: var(--surface-1);
  box-shadow: inset 2px 0 0 var(--brand);
}

.system-orgs-page--mc .system-orgs__table tbody tr.is-selected {
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
}

.system-orgs-page--mc .system-orgs__table tbody tr.data-row--inactive {
  opacity: 72%;
}

.system-orgs-page--mc .system-orgs__identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.system-orgs-page--mc .system-orgs__identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.system-orgs-page--mc .system-orgs__identity-text strong,
.system-orgs-page--mc .system-orgs-card__top + h3 {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-orgs-page--mc .system-orgs__health {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 160px;
  font-size: 12px;
  color: var(--text-2);
}
.system-orgs-page--mc .system-orgs__health .xw-meter {
  flex: 1 1 auto;
}
.system-orgs-page--mc .system-orgs__health > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.system-orgs-page--mc .system-orgs__cards {
  display: none;
  gap: 10px;
  padding: 16px;
}

.system-orgs-page--mc .system-orgs__cards article {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.system-orgs-page--mc .system-orgs__cards article:hover,
.system-orgs-page--mc .system-orgs__cards article:focus-visible,
.system-orgs-page--mc .system-orgs__cards article.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.system-orgs-page--mc .system-orgs-card__top,
.system-orgs-page--mc .system-orgs-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.system-orgs-page--mc .system-orgs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
}

.system-orgs-page--mc .system-orgs-card__meta span {
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
}

.system-orgs-page--mc .system-orgs__detail {
  min-width: 0;
}

.system-orgs-page--mc .system-orgs-detail__section.card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}

.system-orgs-page--mc .system-orgs-detail__section .xw-section__header {
  padding: 0 0 8px;
}

.system-orgs-page--mc .system-orgs-detail__meter {
  display: grid;
  gap: 8px;
}

.system-orgs-page--mc .system-orgs-detail__meter strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.organization-webhooks-page .organization-webhooks__event {
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
.organization-webhooks-page .organization-webhooks__section-row td {
  padding: 16px 24px 8px;
  border-top: 1px solid var(--line);
  background: var(--surface-inset);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.organization-webhooks-page .organization-webhooks__token-row td {
  padding: 10px 24px;
}
.organization-webhooks-page .organization-webhooks__token {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.organization-webhooks-page .organization-webhooks__token-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-2);
}
.organization-webhooks-page .organization-webhooks__token-icon svg {
  width: 14px;
  height: 14px;
}
.organization-webhooks-page .organization-webhooks__token-main {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}
.organization-webhooks-page .organization-webhooks__token-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.organization-webhooks-page .organization-webhooks__token-title strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.organization-webhooks-page .organization-webhooks__token-title code,
.organization-webhooks-page .organization-webhooks__token-meta {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.organization-webhooks-page .organization-webhooks__token-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
}

@media (width <= 760px) {
  .app-shell .system-orgs-page--mc .system-orgs__table-wrap {
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-shell .system-orgs-page--mc .system-orgs__table-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .system-orgs-page--mc .system-orgs__cards {
    display: none;
  }
  .organization-webhooks-page .organization-webhooks__token {
    align-items: flex-start;
  }
  .organization-webhooks-page .organization-webhooks__token-actions {
    align-self: flex-start;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ════════════════════════════════════════════════════════════════════════════
   ORG SUMMARY CARD
   Unified styles for OrgSummaryCard component.
   Used in admin dashboards and organization listings.
   ════════════════════════════════════════════════════════════════════════════ */
.org-card,
.sysadmin-org-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.org-card:hover,
.sysadmin-org-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.org-card:focus-visible,
.sysadmin-org-card:focus-visible {
  box-shadow: none, 0 0 0 3px var(--focus-ring-color);
  transform: translateY(-1px);
}
.org-card,
.sysadmin-org-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--surface-1);
  cursor: pointer;
  outline: none;
}
.org-card:hover,
.sysadmin-org-card:hover {
  border-color: var(--brand-line);
}
.org-card:focus-visible,
.sysadmin-org-card:focus-visible {
  border-color: var(--brand-line);
}

.org-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.org-card__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.org-card__icon {
  flex-shrink: 0;
  color: var(--text-3);
}

.org-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.org-card__id {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 0.5rem;
  background: var(--muted-soft);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-2);
}

.org-card__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.org-card__status--active {
  background: var(--ok-soft);
  color: var(--ok);
}
.org-card__status--inactive {
  background: var(--muted-soft);
  color: var(--text-3);
}
.org-card__status--warning {
  background: var(--warn-soft);
  color: var(--warn);
}

.org-card__stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.org-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.org-card__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.org-card__stat-label {
  font-size: 0.75rem;
  color: var(--text-3);
}

.org-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.org-card__footer-label {
  font-size: 0.78rem;
  color: var(--text-3);
}

.org-card__footer-link {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand);
}
.org-card__footer-link svg {
  transition: transform 0.2s ease;
}
.org-card:hover .org-card__footer-link svg {
  transform: translateX(3px);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.org-dashboard {
  --org-panel-shadow: 0 30px 80px rgb(0 0 0 / 45%);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 0.9rem + 0.8vw, 2rem);
  width: min(100%, 1880px);
  margin-inline: auto;
}

.org-dashboard--mc {
  gap: var(--s-5);
  width: 100%;
  max-width: none;
}

.org-dashboard--mc .dashboard__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.org-dashboard--mc .org-dashboard__header {
  padding: 0;
}

.org-dashboard--mc .org-dashboard__header .xw-page-header__actions {
  align-items: center;
}

.org-dashboard__range-tabs {
  flex-shrink: 0;
}

:root[data-theme=light] .org-dashboard {
  --org-panel-shadow: 0 18px 40px rgb(0 0 0 / 12%);
}

.org-dashboard .dashboard-header {
  gap: clamp(0.85rem, 0.6rem + 0.5vw, 1.5rem);
  padding: clamp(0.35rem, 0.2rem + 0.2vw, 0.5rem) 0;
}

.org-dashboard .dashboard-header__title h1 {
  font-size: clamp(1.35rem, 1.05rem + 0.7vw, 2rem);
  line-height: 1.15;
}

.org-dashboard .dashboard-header__greeting {
  font-size: clamp(0.87rem, 0.82rem + 0.15vw, 1rem);
}

.org-dashboard .dashboard-section {
  border-radius: clamp(0.95rem, 0.75rem + 0.35vw, 1.25rem);
}

.org-dashboard .dashboard-section__header {
  padding: clamp(0.85rem, 0.45rem + 0.55vw, 1.2rem) clamp(0.95rem, 0.5rem + 0.8vw, 1.5rem);
}

.org-dashboard .dashboard-section__title {
  font-size: clamp(0.96rem, 0.91rem + 0.2vw, 1.1rem);
}

.org-dashboard .dashboard-section__body {
  padding: clamp(0.95rem, 0.5rem + 0.85vw, 1.55rem);
}

.org-dashboard .dashboard-widgets {
  gap: clamp(1rem, 0.65rem + 0.6vw, 1.65rem);
}

.org-dashboard .kpi-grid {
  gap: clamp(0.75rem, 0.45rem + 0.45vw, 1.2rem);
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (width >= 1200px) and (width <= 1680px) {
  .org-dashboard .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (width >= 820px) and (width <= 1199px) {
  .org-dashboard .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.org-dashboard .kpi-grid .stat-card--value {
  position: relative;
  min-height: clamp(120px, 102px + 1.4vw, 148px);
  overflow: hidden;
}
.org-dashboard .kpi-grid .stat-card--value::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: currentcolor;
  opacity: 35%;
  content: "";
  pointer-events: none;
}
.org-dashboard .kpi-grid .stat-card--value .stat-card__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.org-dashboard .kpi-grid .stat-card--value .stat-card__icon {
  opacity: 85%;
  font-size: 1.15rem;
}

.org-dashboard .kpi-grid .stat-card--value-cost {
  background: linear-gradient(155deg, var(--color-info-bg) 0%, var(--surface) 85%);
  color: var(--color-info);
}

.org-dashboard .kpi-grid .stat-card--value-sale {
  background: linear-gradient(155deg, var(--color-success-bg) 0%, var(--surface) 85%);
  color: var(--color-success);
}

.org-dashboard .kpi-grid .stat-card--value .stat-card__label,
.org-dashboard .kpi-grid .stat-card--value .stat-card__footer,
.org-dashboard .kpi-grid .stat-card--value .stat-card__sublabel {
  color: var(--text-primary);
}

.org-dashboard .kpi-grid .stat-card--value .stat-card__footer {
  color: var(--text-secondary);
}

.org-dashboard .kpi-grid .stat-card {
  min-height: clamp(108px, 94px + 1.2vw, 132px);
  padding: clamp(0.85rem, 0.5rem + 0.5vw, 1.25rem);
}

.org-dashboard .kpi-grid .stat-card__label {
  font-size: clamp(0.74rem, 0.69rem + 0.16vw, 0.84rem);
}

.org-dashboard .kpi-grid .stat-card__value {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.3rem);
  line-height: 1.04;
}

.org-dashboard .kpi-grid .stat-card__footer,
.org-dashboard .kpi-grid .stat-card__sublabel {
  margin-top: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  padding-top: clamp(0.35rem, 0.25rem + 0.2vw, 0.55rem);
  font-size: clamp(0.72rem, 0.68rem + 0.1vw, 0.8rem);
}

.org-chip {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.org-chip--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.org-chip--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.org-chip--muted {
  background: var(--surface-muted);
  color: var(--text-muted);
}

@media (min-width: 1280px) {
  .org-panel {
    padding: 1.5rem 1.5rem;
  }
}
@media (min-width: 1920px) {
  .org-panel {
    padding: 1.5rem 2rem;
  }
}
.org-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-alt) 100%);
  box-shadow: var(--org-panel-shadow);
}

.org-panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  justify-content: space-between;
}
.org-panel__header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.org-panel__eyebrow {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.9);
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
  color: var(--text-secondary);
}

.org-panel__period {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.org-dashboard__metrics-status {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-height: 34px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.org-dashboard__metrics-status .spinner-border {
  width: 0.9rem;
  height: 0.9rem;
  border-width: 0.12rem;
  color: var(--color-info);
}

.org-dashboard__summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.org-dashboard__summary-strip .kpi-card {
  position: relative;
  min-height: 128px;
  padding: 16px;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.org-dashboard__summary-strip .xw-kpi-card__label,
.org-dashboard__summary-strip .xw-kpi-card__meta {
  position: relative;
  z-index: 1;
}

.org-dashboard__summary-strip .xw-kpi-card__value {
  position: relative;
  z-index: 1;
  font-size: var(--fs-28);
}

.org-dashboard__summary-strip .xw-kpi-card--brand {
  border-color: var(--brand-line);
  background: linear-gradient(180deg, var(--brand-soft), transparent 72%), var(--surface-1);
}

.org-dashboard__summary-strip .xw-kpi-card--danger {
  border-color: var(--danger-line);
  background: linear-gradient(180deg, var(--danger-soft), transparent 72%), var(--surface-1);
}

.org-dashboard__summary-strip .kpi-card__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 0;
  height: 36px;
  opacity: 55%;
  pointer-events: none;
}

.org-dashboard__summary-strip .xw-sparkline--danger {
  color: var(--danger);
}

.org-dashboard__mission-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: var(--s-4);
  width: 100%;
}

.org-dashboard__mission-row > .card {
  min-width: 0;
  padding: 16px;
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.org-dashboard__mission-row .card__head {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.org-dashboard__mission-row .h-sec {
  margin: 0;
  font-size: var(--fs-18);
  line-height: 1.2;
}

.org-dashboard__activity-list,
.org-dashboard__approval-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-dashboard__activity-row {
  display: grid;
  grid-template-columns: auto minmax(72px, auto) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.org-dashboard__activity-row:first-child {
  border-top: 0;
}

.org-dashboard__activity-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--agent);
  box-shadow: 0 0 0 3px var(--agent-soft);
}

.org-dashboard__activity-dot--ok,
.org-dashboard__activity-dot--success {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}

.org-dashboard__activity-dot--warning {
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.org-dashboard__activity-dot--danger,
.org-dashboard__activity-dot--critical {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.org-dashboard__activity-time,
.org-dashboard__activity-meta,
.org-dashboard__mission-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.org-dashboard__activity-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
  color: var(--text-2);
}

.org-dashboard__activity-copy strong {
  flex-shrink: 0;
  font-size: var(--fs-13);
  color: var(--text);
}

.org-dashboard__activity-copy span {
  min-width: 0;
  font-size: var(--fs-13);
}

.org-dashboard__mission-footer {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.org-dashboard__mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.org-dashboard__approval-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.org-dashboard__approval-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.org-dashboard__approval-badge {
  justify-content: center;
  min-width: 58px;
}

.org-dashboard__approval-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.org-dashboard__approval-copy span:first-child {
  overflow: hidden;
  font-size: var(--fs-13);
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-dashboard__approval-copy .mono {
  overflow: hidden;
  font-size: var(--fs-11);
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-dashboard .stat-card--loading {
  justify-content: center;
  min-height: clamp(108px, 94px + 1.2vw, 132px);
  pointer-events: none;
}

.org-panel__controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.org-date-range-picker {
  min-width: 220px;
}

.org-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.org-metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-muted);
}
.org-metric-card strong {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}
.org-metric-card small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.org-metric-card__label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.org-metric-card--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.org-metric-card--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.org-metric-card--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.org-metric-card--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.org-panel--split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 1280px) {
  .org-health-panel,
  .org-processing-card {
    padding: 1.5rem 1.5rem;
  }
}
@media (min-width: 1920px) {
  .org-health-panel,
  .org-processing-card {
    padding: 1.5rem 2rem;
  }
}
.org-health-panel,
.org-processing-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-alt) 100%);
  box-shadow: var(--org-panel-shadow);
}

.org-health-status {
  padding: 6px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.status-critical {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-healthy {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.org-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.org-health-card {
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
}
.org-health-card span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.org-health-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.org-health-card--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.org-health-card--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.org-health-card--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.org-health-progress {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-info-border);
  border-radius: 1.5rem;
  background: var(--color-info-bg);
}

.org-health-progress__header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.org-health-progress__bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-primary-bg);
}
.org-health-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--color-info));
  transition: width 0.3s ease;
}

.org-health-progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.org-health-progress__current {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.org-processing-card .processing-widget {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.org-processing-card .processing-widget__header,
.org-processing-card .processing-widget__body {
  padding: 0;
}

.org-processing-card .processing-widget__header {
  margin-bottom: 1rem;
  border: none;
  background: transparent;
}

.org-panel--channels {
  gap: 1.5rem;
}

.org-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.org-dashboard--mc .org-channel-grid.channel-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.org-channel-card {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(150deg, var(--surface) 0%, var(--surface-alt) 100%);
  transition: transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  outline: none;
}
.org-channel-card:hover {
  border-color: var(--color-primary-border);
  transform: translateY(-3px);
}
.org-channel-card:focus-visible {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  transform: translateY(-1px);
}

.org-dashboard--mc .org-channel-card.channel-tile {
  gap: 8px;
  padding: 12px 14px;
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
}
.org-dashboard--mc .org-channel-card.channel-tile:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.org-channel-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.org-channel-card__title {
  flex: 1;
}
.org-channel-card__title h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}
.org-channel-card__title span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.org-dashboard--mc .channel-tile__head {
  gap: 8px;
  margin-bottom: 0;
}

.org-dashboard--mc .channel-tile__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.org-channel-card__stats {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}
.org-channel-card__stats span {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.org-channel-card__stats strong {
  display: block;
  margin-top: 0.125rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.org-dashboard--mc .channel-tile__meta {
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
  border-top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-2);
}

.org-dashboard--mc .channel-tile__meta .num {
  color: var(--text);
}

.org-channel-card__status-row {
  display: flex;
  gap: var(--s-2);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 1024px) {
  .org-dashboard {
    width: 100%;
  }
  .org-dashboard__mission-row {
    grid-template-columns: 1fr;
  }
  .org-panel--split {
    grid-template-columns: 1fr;
  }
  .org-panel,
  .org-health-panel,
  .org-processing-card {
    padding: 1rem 1.5rem;
  }
}
@media (max-width: 768px) {
  .org-dashboard .dashboard-section__actions {
    gap: 0.375rem;
  }
  .org-dashboard .dashboard-section__actions .date-range-picker,
  .org-dashboard .dashboard-section__actions .org-date-range-picker {
    width: 100%;
    min-width: 0;
  }
  .org-dashboard .kpi-grid {
    grid-template-columns: 1fr;
  }
  .org-dashboard__mission-row .card__head,
  .org-dashboard__mission-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .org-dashboard__activity-row,
  .org-dashboard__approval-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .org-dashboard__activity-time,
  .org-dashboard__activity-meta,
  .org-dashboard__approval-card > .muted {
    display: none;
  }
  .org-dashboard .dashboard-header__actions {
    width: 100%;
  }
  .org-dashboard .dashboard-header__actions > * {
    flex: 1 1 auto;
  }
  .org-dashboard--mc .org-dashboard__header .xw-page-header__actions,
  .org-dashboard--mc .org-dashboard__range-tabs {
    width: 100%;
  }
  .org-panel__header {
    align-items: flex-start;
  }
  .org-metric-grid {
    grid-template-columns: 1fr;
  }
  .org-channel-card__stats {
    flex-direction: column;
    gap: 0.5rem;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.org-billing {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.org-billing-shell {
  gap: 0;
}
.org-billing-shell .xw-dg-head {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.org-billing-shell .xw-dg-split {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.org-billing-shell .xw-dg-body {
  padding: 0;
  overflow: visible;
  background: transparent;
}
.org-billing-shell .xw-dg-head__stats .xw-compact-stat {
  min-width: 112px;
}

.org-billing-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: var(--s-4);
  align-items: start;
  min-width: 0;
  padding: var(--s-5) var(--s-6) var(--s-6);
  background: var(--bg-2);
}

.org-billing-card {
  min-width: 0;
  background: var(--surface-1);
}
.org-billing-card .xw-section__body {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.org-billing-card--wide {
  grid-column: 1/-1;
}

.org-billing-card__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-1);
  line-height: 1.45;
  color: var(--muted);
}

.org-billing-pill {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--muted);
  background: var(--bg-2);
  font-variant-numeric: tabular-nums;
}

.org-billing-pill--warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.billing-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-3);
}

.billing-kv {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.billing-kv__label {
  font-size: var(--fs-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.billing-kv__value {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.billing-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.billing-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3) var(--s-4);
  align-items: end;
}

.billing-form-grid__full {
  grid-column: 1/-1;
}

.billing-form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.billing-form-actions {
  display: flex;
  justify-content: flex-end;
}

.org-billing-table {
  min-width: 0;
}
.org-billing-table .table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow-x: auto;
}

.org-billing-empty-row td {
  height: auto;
  padding: var(--s-6) var(--s-3);
  text-align: center;
}

.org-billing-empty-row .xw-empty {
  margin-inline: auto;
  max-width: 420px;
}

.org-billing-card tr.is-selected {
  background: color-mix(in srgb, var(--agent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--agent);
}

.org-billing-card--invoices tbody tr {
  cursor: pointer;
}

.usage-entry-name {
  font-weight: 600;
  color: var(--text);
}

.billing-ai-usage {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.billing-ai-usage__header h4 {
  margin: 0 0 2px;
  font-size: var(--fs-3);
  color: var(--text);
}

.org-billing-invoices__toolbar {
  min-width: 0;
}
.org-billing-invoices__toolbar .xw-dg-tb {
  padding: 0;
  border: 0;
  background: transparent;
}

.modal.billing-invoice-modal {
  width: min(960px, 94vw);
  max-width: 960px;
}

.invoice-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
}

.invoice-detail-meta__sub {
  font-size: var(--fs-1);
  color: var(--muted);
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}

.org-billing-detail__section {
  min-width: 0;
  background: var(--surface-1);
}

@media (width <= 1100px) {
  .org-billing-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .org-billing-card {
    grid-column: 1/-1;
  }
}
@media (width <= 760px) {
  .org-billing-board {
    padding: var(--s-4) var(--s-3) var(--s-5);
  }
  .org-billing-shell .xw-dg-head__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .org-billing-shell .xw-dg-head__stats .xw-compact-stat {
    min-width: 0;
  }
  .billing-kv-grid,
  .billing-form-grid,
  .invoice-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .billing-form-actions {
    justify-content: stretch;
  }
  .billing-form-actions .btn {
    width: 100%;
  }
}
.organization-channels-page--mc .organization-channels__alert {
  margin: 16px 24px 0;
}
.organization-channels-page--mc .organization-channels__skeleton {
  margin: 0;
}
.organization-channels-page--mc .organization-channels__grid {
  align-items: stretch;
}
.organization-channels-page--mc .organization-channel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 148px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  text-align: left;
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.organization-channels-page--mc .organization-channel-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.organization-channels-page--mc .organization-channel-card[data-enabled=false] {
  background: color-mix(in srgb, var(--surface-1) 82%, var(--danger-soft));
}
.organization-channels-page--mc .organization-channel-card__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.organization-channels-page--mc .organization-channel-card__title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.organization-channels-page--mc .organization-channel-card__code.scope-card__code {
  flex: 0 0 auto;
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}
.organization-channels-page--mc .organization-channel-card__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-channels-page--mc .organization-channel-card__switch {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}
.organization-channels-page--mc .organization-channel-card__meta,
.organization-channels-page--mc .organization-channel-card__health-label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}
.organization-channels-page--mc .organization-channel-card__meta span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-channels-page--mc .organization-channel-card__description {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.organization-channels-page--mc .organization-channel-card__facts {
  display: grid;
  gap: 8px;
}
.organization-channels-page--mc .organization-channel-card__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-2);
}
.organization-channels-page--mc .organization-channel-card__fact strong {
  font-weight: 650;
  color: var(--text);
}
.organization-channels-page--mc .organization-channel-card__health {
  display: grid;
  gap: 7px;
}
.organization-channels-page--mc .organization-channel-card__health-label strong {
  font-weight: 650;
  color: var(--text);
}
.organization-channels-page--mc .organization-channel-card__external-id {
  display: block;
  max-width: 100%;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-channels-page--mc .organization-channel-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.organization-channels-page--mc .organization-channel-card__actions .xw-btn {
  min-height: 30px;
}
.organization-channels-page--mc .organization-channel-card--connect {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  cursor: pointer;
  text-align: center;
}
.organization-channels-page--mc .organization-channel-card--connect:disabled {
  cursor: not-allowed;
  opacity: 62%;
}
.organization-channels-page--mc .organization-channel-card__connect-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--brand);
}
.organization-channels-page--mc .organization-channel-card__connect-title {
  font-weight: 650;
  color: var(--text);
}
.organization-channels-page--mc .organization-channel-card__connect-subtitle {
  max-width: 220px;
  font-size: var(--fs-12);
  line-height: 1.35;
  text-align: center;
  color: var(--text-3);
}

.organization-channels-modal .organization-channels-modal__body {
  display: grid;
  gap: 14px;
}
.organization-channels-modal .organization-channels-modal__alert {
  margin: 0;
}

@media (width <= 760px) {
  .organization-channels-page--mc .organization-channels__alert {
    margin-inline: 12px;
  }
  .organization-channels-page--mc .organization-channel-card {
    min-height: 0;
  }
  .organization-channels-page--mc .organization-channel-card__header,
  .organization-channels-page--mc .organization-channel-card__health-label {
    flex-direction: column;
    align-items: flex-start;
  }
  .organization-channels-page--mc .organization-channel-card__title-row {
    flex-wrap: wrap;
  }
  .organization-channels-page--mc .organization-channel-card__switch {
    width: 100%;
    margin-left: 0;
  }
  .organization-channels-page--mc .organization-channel-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .organization-channels-page--mc .organization-channel-card__actions .xw-btn {
    width: 100%;
  }
}
.organization-shops-page--mc .organization-shops__alert {
  margin: 16px 24px 0;
}
.organization-shops-page--mc .organization-shops__toolbar-select {
  min-width: 170px;
}
.organization-shops-page--mc .organization-shops__toolbar-select--size {
  min-width: 96px;
}
.organization-shops-page--mc .organization-shops__skeleton {
  margin: 0;
}
.organization-shops-page--mc .organization-shops__grid {
  align-items: stretch;
}
.organization-shops-page--mc .organization-shop-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 268px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  text-align: left;
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.organization-shops-page--mc .organization-shop-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.organization-shops-page--mc .organization-shop-card--disabled,
.organization-shops-page--mc .organization-shop-card--deleted,
.organization-shops-page--mc .organization-shop-card[data-enabled=false] {
  background: color-mix(in srgb, var(--surface-1) 86%, var(--danger-soft));
}
.organization-shops-page--mc .organization-shop-card__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.organization-shops-page--mc .organization-shop-card__title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.organization-shops-page--mc .organization-shop-card__code.scope-card__code {
  flex: 0 0 auto;
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}
.organization-shops-page--mc .organization-shop-card__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-shops-page--mc .organization-shop-card__meta,
.organization-shops-page--mc .organization-shop-card__health-label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}
.organization-shops-page--mc .organization-shop-card__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-shops-page--mc .organization-shop-card__description {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.organization-shops-page--mc .organization-shop-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.organization-shops-page--mc .organization-shop-card__fact {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.organization-shops-page--mc .organization-shop-card__fact strong,
.organization-shops-page--mc .organization-shop-card__fact code {
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-shops-page--mc .organization-shop-card__fact--wide {
  grid-column: 1/-1;
}
.organization-shops-page--mc .organization-shop-card__health {
  display: grid;
  gap: 7px;
}
.organization-shops-page--mc .organization-shop-card__health-label strong {
  font-weight: 650;
  color: var(--text);
}
.organization-shops-page--mc .organization-shop-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.organization-shops-page--mc .organization-shop-card__actions .xw-btn {
  min-height: 30px;
}
.organization-shops-page--mc .organization-shop-card--add {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  cursor: pointer;
}
.organization-shops-page--mc .organization-shop-card--add:disabled {
  cursor: not-allowed;
  opacity: 62%;
}
.organization-shops-page--mc .organization-shop-card__add-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
}
.organization-shops-page--mc .organization-shop-card__add-title {
  font-weight: 650;
  color: var(--text);
}
.organization-shops-page--mc .organization-shop-card__add-subtitle {
  max-width: 220px;
  font-size: var(--fs-12);
  line-height: 1.35;
  text-align: center;
  color: var(--text-3);
}

.organization-shops-modal .organization-shops-modal__body {
  display: grid;
  gap: 14px;
}
.organization-shops-modal .organization-shops-modal__hint,
.organization-shops-modal .organization-shops-modal__warning {
  margin: -4px 0 0;
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--text-3);
}
.organization-shops-modal .organization-shops-modal__warning {
  margin: 0;
  color: var(--danger);
}
.organization-shops-modal .organization-shops-modal__alert {
  margin: 0;
}

@media (width <= 760px) {
  .organization-shops-page--mc .organization-shops__alert {
    margin-inline: 12px;
  }
  .organization-shops-page--mc .organization-shops__toolbar-select,
  .organization-shops-page--mc .organization-shops__toolbar-select--size {
    width: 100%;
    min-width: 0;
  }
  .organization-shops-page--mc .organization-shop-card {
    min-height: 0;
  }
  .organization-shops-page--mc .organization-shop-card__header,
  .organization-shops-page--mc .organization-shop-card__meta,
  .organization-shops-page--mc .organization-shop-card__health-label {
    flex-direction: column;
    align-items: flex-start;
  }
  .organization-shops-page--mc .organization-shop-card__facts {
    grid-template-columns: 1fr;
  }
  .organization-shops-page--mc .organization-shop-card__fact {
    flex-direction: column;
    align-items: flex-start;
  }
  .organization-shops-page--mc .organization-shop-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .organization-shops-page--mc .organization-shop-card__actions .xw-btn {
    width: 100%;
  }
}
.inventory-analytics-page--mc .xw-dg-tb {
  padding-block: 10px;
}
.inventory-analytics-page--mc .inventory-analytics-page__threshold {
  width: 112px;
  margin: 0;
}
.inventory-analytics-page--mc .inventory-analytics-page__threshold-input {
  min-height: 34px;
  text-align: right;
}
.inventory-analytics-page--mc .inventory-analytics-page__skeleton {
  margin: 0;
}
.inventory-analytics-page--mc .inventory-analytics-page__setup {
  margin: 18px 24px 0;
}
.inventory-analytics-page--mc .inventory-analytics-page__setup .xw-empty__action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.inventory-analytics-page--mc .inventory-analytics-page__setup-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
}

.inventory-list-section--mc {
  display: grid;
  gap: 12px;
}
.inventory-list-section--mc .inventory-list-section__table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.inventory-list-section--mc .inventory-list-section__table {
  min-width: 1180px;
}
.inventory-list-section--mc .inventory-list-section__table tr {
  cursor: pointer;
}
.inventory-list-section--mc .inventory-list-section__table tr.is-selected {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}
.inventory-list-section--mc .inventory-list-section__product {
  align-items: center;
}
.inventory-list-section--mc .inventory-list-section__thumb {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, var(--ok-soft)), var(--surface-inset));
}
.inventory-list-section--mc .inventory-list-section__product-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.inventory-list-section--mc .inventory-list-section__product-link,
.inventory-list-section--mc .inventory-list-section__product-title {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 650;
  text-align: left;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-list-section--mc .inventory-list-section__product-title {
  padding: 0;
}
.inventory-list-section--mc .inventory-list-section__product-link:hover {
  color: var(--brand);
}
.inventory-list-section--mc .inventory-list-section__actions {
  min-width: 220px;
  text-align: right;
}
.inventory-list-section--mc .inventory-list-section__actions,
.inventory-list-section--mc .inventory-list-section__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.inventory-list-section--mc .inventory-list-section__actions-head {
  text-align: right;
}
.inventory-list-section--mc .inventory-list-section__cards {
  display: none;
  gap: 10px;
}
.inventory-list-section--mc .inventory-list-section__card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
}
.inventory-list-section--mc .inventory-list-section__card.is-selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.inventory-list-section--mc .inventory-list-section__card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.inventory-list-section--mc .inventory-list-section__card-facts {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}
.inventory-list-section--mc .inventory-list-section__card-actions {
  justify-content: flex-start;
}
.inventory-list-section--mc .inventory-list-section__detail {
  width: auto;
  margin: 0 24px 18px;
  border-radius: var(--r-md);
}
.inventory-list-section--mc .inventory-list-section__detail-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}
.inventory-list-section--mc .inventory-list-section__hint {
  margin: 10px 0 0;
  font-size: var(--fs-12);
  line-height: 1.45;
}
.inventory-list-section--mc .inventory-list-section__ai-note {
  margin-top: 12px;
}

@media (width <= 760px) {
  .inventory-analytics-page--mc .inventory-analytics-page__threshold {
    width: 100%;
  }
  .inventory-list-section--mc .inventory-list-section__table-wrap {
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inventory-list-section--mc .inventory-list-section__table-wrap::-webkit-scrollbar {
    display: none;
  }
  .inventory-list-section--mc .inventory-list-section__cards {
    display: none;
  }
  .inventory-list-section--mc .inventory-list-section__detail {
    margin: 0 16px 16px;
  }
}
.customers-analytics-page--mc .customers-analytics-page__skeleton {
  margin: 0;
}
.customers-analytics-page--mc .customers-analytics-page__setup {
  margin: 18px 24px 0;
}
.customers-analytics-page--mc .customers-analytics-page__setup .xw-empty__action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.customers-analytics-page--mc .customers-analytics-page__setup-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
}

.customer-list-section--mc {
  display: grid;
  gap: 12px;
}
.customer-list-section--mc .customer-list-section__empty {
  margin: 16px 24px;
}
.customer-list-section--mc .customer-list-section__table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.customer-list-section--mc .customer-list-section__table {
  min-width: 900px;
}
.customer-list-section--mc .customer-list-section__table th,
.customer-list-section--mc .customer-list-section__table td {
  vertical-align: middle;
}
.customer-list-section--mc .customer-list-section__table tr {
  cursor: pointer;
}
.customer-list-section--mc .customer-list-section__table tr.is-selected {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}
.customer-list-section--mc .customer-list-section__identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.customer-list-section--mc .customer-list-section__avatar {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text);
}
.customer-list-section--mc .customer-list-section__identity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.customer-list-section--mc .customer-list-section__identity-copy strong,
.customer-list-section--mc .customer-list-section__identity-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-list-section--mc .customer-list-section__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.customer-list-section--mc .customer-list-section__flags--stack {
  align-items: flex-start;
  margin-bottom: 10px;
}
.customer-list-section--mc .customer-list-section__actions-head,
.customer-list-section--mc .customer-list-section__actions {
  text-align: right;
}
.customer-list-section--mc .customer-list-section__cards {
  display: none;
}
.customer-list-section--mc .customer-list-section__card {
  display: grid;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
}
.customer-list-section--mc .customer-list-section__card.is-selected {
  border-color: var(--brand-line);
  box-shadow: inset 3px 0 0 var(--brand);
}
.customer-list-section--mc .customer-list-section__card-facts {
  display: grid;
  gap: 0;
}
.customer-list-section--mc .customer-list-section__card-actions {
  display: flex;
  justify-content: flex-end;
}
.customer-list-section--mc .customer-list-section__detail {
  min-height: 100%;
}
.customer-list-section--mc .customer-list-section__detail-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.customer-list-section--mc .customer-list-section__hint {
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-relaxed);
}

@media (width <= 760px) {
  .customer-list-section--mc .customer-list-section__table-wrap {
    display: none;
  }
  .customer-list-section--mc .customer-list-section__cards {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
  }
  .customer-list-section--mc .customer-list-section__detail {
    margin: 0 12px 12px;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.org-sync-rules {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.org-sync-rules--mc {
  gap: 0;
}

.org-sync-rules--mc .sync-rules-shell {
  min-height: min(960px, 100vh - 104px);
}

.org-sync-rules--mc .sync-rules-table-wrap {
  display: block;
  overflow: auto hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.org-sync-rules--mc .sync-rules-table--mc {
  min-width: 960px;
}

.org-sync-rules--mc .sync-rules-table--mc tbody tr {
  cursor: pointer;
}

.org-sync-rules--mc .sync-rules-table--mc tbody tr:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.org-sync-rules--mc .sync-rules-table--mc tbody tr.is-selected {
  background: var(--brand-soft);
}

.org-sync-rules--mc .sync-rules-toggle-col {
  width: 48px;
}

.org-sync-rules--mc .sync-rules-toggle-cell {
  width: 48px;
  vertical-align: middle;
}

.org-sync-rules--mc .sync-rules-toggle-cell .xw-switch-field {
  justify-content: center;
}

.org-sync-rules--mc .sync-rule-title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.org-sync-rules--mc .sync-rule-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.org-sync-rules--mc .sync-rule-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.org-sync-rules--mc .sync-rule-description {
  max-width: 420px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-sync-rules--mc .sync-rule-scope {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-sync-rules--mc .sync-rule-count--muted {
  color: var(--text-3);
}

.org-sync-rules--mc .sync-rule-count--warn {
  color: var(--warn);
}

.org-sync-rules--mc .sync-rules-card-list {
  display: none;
}

.org-sync-rules--mc .rule-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  cursor: pointer;
}

.org-sync-rules--mc .rule-card:hover,
.org-sync-rules--mc .rule-card.is-selected {
  border-color: var(--line-strong);
  background: var(--brand-soft);
}

.org-sync-rules--mc .rule-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.org-sync-rules--mc .rule-card__icon {
  display: grid;
  place-items: center;
  width: 24px;
  color: var(--text-3);
}

.org-sync-rules--mc .rule-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.org-sync-rules--mc .rule-card__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}

.org-sync-rules--mc .rule-card__desc {
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-2);
}

.org-sync-rules--mc .rule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.org-sync-rules--mc .rule-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.org-sync-rules--mc .sync-rules-operation-error {
  margin: 16px 16px 0;
}

.org-sync-rules--mc .sync-rule-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.org-sync-rules--mc .sync-rule-detail__section + .sync-rule-detail__section {
  margin-top: 12px;
}

.org-sync-rules--mc .sync-rule-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.org-sync-rules--mc .sync-rule-activity .xw-tick {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-2);
}

.org-sync-rules--mc .sync-rule-activity .xw-tick__agent {
  font-weight: 600;
  color: var(--text);
}

.org-sync-rules--mc .sync-rule-activity .xw-tick__msg,
.org-sync-rules--mc .sync-rule-activity .xw-tick__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-sync-rules--mc .sync-rule-activity .xw-tick__meta {
  color: var(--text-3);
}

.sync-rules-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sync-rules-help {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sync-rules-help__intro h3 {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 700;
}

.sync-rules-help__intro p {
  margin: 0;
  color: var(--text-secondary);
}

.sync-rules-help__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.sync-rules-help__card {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-alt);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.sync-rules-help__card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.sync-rules-help__card p {
  margin: 0;
  color: var(--text-secondary);
}
.sync-rules-help__card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-secondary);
}
.sync-rules-help__card li + li {
  margin-top: 0.375rem;
}

.sync-rules-help__card--support {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sync-rules-table .sync-rule-connection,
.sync-rules-cards .sync-rule-connection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.sync-rule-connection__name {
  font-weight: 600;
  color: var(--text-primary);
}

.sync-rule-connection__arrow {
  color: var(--text-secondary);
}

.sync-rule-direction {
  font-weight: 600;
  color: var(--text-primary);
}

.sync-rule-operations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.sync-rule-operation {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.sync-rule-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sync-rules-cards .data-table-card {
  gap: 0.5rem;
}

.sync-rule-card__title {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sync-rule-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sync-rule-card__meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.sync-rule-card__meta-grid strong,
.sync-rule-card__section strong {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.sync-rule-card__value {
  margin-top: 0.375rem;
}

.sync-rule-card__actions {
  margin-top: 0.375rem;
}

.sync-rule-modal {
  width: min(1120px, 100vw - 1rem * 2);
}

.sync-rule-modal__header {
  align-items: flex-start;
}

.sync-rule-modal__title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.sync-rule-modal__title h2 {
  margin: 0;
}
.sync-rule-modal__title p {
  max-width: 76ch;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sync-rule-modal__body {
  padding-top: 0.75rem;
  overflow-x: hidden;
}

.sync-rule-modal .modal-actions {
  margin-top: 0.75rem;
}

.sync-rule-modal .form-group label {
  font-size: 0.84rem;
  line-height: 1.35;
}

.sync-rule-modal .form-hint {
  font-size: 0.78rem;
  line-height: 1.35;
}

.sync-rule-modal .validation-message,
.sync-rule-modal .text-danger {
  font-size: 0.78rem;
}

.form-grid {
  display: grid;
  gap: 0.5rem;
}

.form-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.sync-rule-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sync-rule-editor__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.sync-rule-summary {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-default);
  box-shadow: none;
}

.sync-rule-summary--overview {
  border-color: var(--border-soft);
}

.sync-rule-summary--compact {
  gap: 0.5rem;
}

.sync-rule-summary__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sync-rule-summary__header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.sync-rule-summary__header p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sync-rule-summary__header--inline {
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.sync-rule-summary__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sync-rule-summary__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sync-rule-summary__connection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.sync-rule-summary__channel {
  font-weight: 600;
  color: var(--text-primary);
}

.sync-rule-summary__arrow {
  color: var(--text-secondary);
}

.sync-rule-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sync-rule-summary__meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.sync-rule-summary__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.sync-rule-summary__value {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sync-rule-summary__empty {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sync-rule-summary__filter-preview {
  max-height: 180px;
  margin: 0;
  padding: 0.5rem;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-default);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sync-rule-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.25rem;
}

.sync-rule-flow__step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.375rem;
  align-items: start;
  padding: 0.375rem 0;
  border-top: 1px solid var(--border-soft);
}

.sync-rule-flow__step:first-child {
  border-top: 0;
}

.sync-rule-flow__step--warning .sync-rule-flow__icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.sync-rule-flow__step--warning .sync-rule-flow__content strong {
  color: var(--color-warning);
}

.sync-rule-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--accent-primary);
}

.sync-rule-flow__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.sync-rule-flow__content strong {
  font-size: 0.84rem;
  color: var(--text-primary);
}
.sync-rule-flow__content p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.sync-rule-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-default);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sync-rule-section:focus-within {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 1px var(--color-primary-bg);
}

.sync-rule-section__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sync-rule-section__header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.sync-rule-section__header p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sync-rule-section__header--split {
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.sync-rule-section__header-main {
  min-width: 0;
}

.sync-rule-inline-action {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-default);
  color: var(--text-secondary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.sync-rule-inline-action:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.sync-rule-inline-action:disabled {
  opacity: 45%;
  cursor: not-allowed;
}

.sync-rule-scope {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sync-rule-scope-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sync-rule-components {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sync-rule-components__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.sync-rule-components__header-text {
  min-width: 0;
}

.sync-rule-components__header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.sync-rule-components__header p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sync-rule-components__count {
  flex-shrink: 0;
}

.sync-rule-component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem;
}

.sync-rule-component-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-default);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.sync-rule-component-card__header {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.sync-rule-component-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-default);
  color: var(--text-secondary);
}

.sync-rule-component-card__title {
  font-weight: 600;
  color: var(--text-primary);
}

.sync-rule-component-card__description {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sync-rule-component-card__meta {
  margin-top: auto;
}

.sync-rule-component-card__checkbox {
  width: 16px;
  height: 16px;
  margin-left: auto;
  accent-color: var(--color-primary);
}

.sync-rule-component-card__reason {
  margin: 0;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--border-default);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.sync-rule-component-card.is-selected {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 1px var(--color-primary-bg);
}

.sync-rule-component-card:not(.is-disabled):hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-bg);
  transform: translateY(-1px);
}

.sync-rule-component-card.is-disabled {
  box-shadow: none;
  opacity: 70%;
  cursor: not-allowed;
}

:root[data-theme=light] .sync-rules-help__card {
  background: var(--surface-light);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

:root[data-theme=light] .sync-rule-component-card {
  background: var(--surface-light);
  box-shadow: none;
}

:root[data-theme=light] .sync-rule-summary,
:root[data-theme=light] .sync-rule-section {
  background: var(--surface-light);
  box-shadow: none;
}

:root[data-theme=light] .sync-rule-summary__meta,
:root[data-theme=light] .sync-rule-summary__filter-preview {
  background: var(--surface-light);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .sync-rules-help__card {
    background: var(--surface-light);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  }
  :root:not([data-theme=dark], [data-theme=light]) .sync-rule-component-card {
    background: var(--surface-light);
    box-shadow: none;
  }
  :root:not([data-theme=dark], [data-theme=light]) .sync-rule-summary,
  :root:not([data-theme=dark], [data-theme=light]) .sync-rule-section {
    background: var(--surface-light);
    box-shadow: none;
  }
  :root:not([data-theme=dark], [data-theme=light]) .sync-rule-summary__meta,
  :root:not([data-theme=dark], [data-theme=light]) .sync-rule-summary__filter-preview {
    background: var(--surface-light);
  }
}
@media (width <= 1100px) {
  .sync-rule-summary__meta-grid {
    grid-template-columns: 1fr;
  }
  .sync-rule-section__header--split {
    flex-direction: column;
  }
}
@media (width <= 720px) {
  .org-sync-rules--mc .xw-dg-head__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .org-sync-rules--mc .xw-dg-head__stats .xw-compact-stat {
    min-width: 0;
  }
  .org-sync-rules--mc .sync-rules-table-wrap {
    display: none;
  }
  .org-sync-rules--mc .sync-rules-card-list {
    display: grid;
    gap: 10px;
    padding: 12px 16px 16px;
  }
  .org-sync-rules--mc .rule-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 16px;
  }
  .org-sync-rules--mc .rule-card__icon {
    display: none;
  }
  .org-sync-rules--mc .rule-card__actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }
  .org-sync-rules--mc .rule-card__meta {
    gap: 8px;
  }
  .org-sync-rules--mc .sync-rule-activity .xw-tick {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .org-sync-rules--mc .sync-rule-activity .xw-tick__agent,
  .org-sync-rules--mc .sync-rule-activity .xw-tick__meta {
    grid-column: 2;
  }
  .form-grid--two {
    grid-template-columns: 1fr;
  }
  .sync-rule-modal {
    width: min(1000px, 100vw - 0.75rem * 2);
  }
  .sync-rule-section {
    padding: 0.375rem;
  }
  .sync-rule-modal .modal-header,
  .sync-rule-modal .modal-body,
  .sync-rule-modal .modal-actions {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.processing-config-page,
.processing-queue-page {
  min-width: 0;
}

.processing-config-shell {
  display: grid;
  gap: var(--s-4);
  min-height: min(960px, 100vh - 104px);
}

.processing-config-head {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.processing-config-head__actions,
.processing-config-footer,
.processing-config-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.processing-config-head__actions {
  justify-content: flex-end;
}

.processing-status {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-size: var(--fs-13);
}

.processing-status--success {
  border-color: color-mix(in srgb, var(--ok) 36%, var(--line));
  background: color-mix(in srgb, var(--ok) 12%, var(--surface-1));
  color: var(--ok);
}

.processing-status--error {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-1));
  color: var(--danger);
}

.processing-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.processing-config-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.processing-config-card--wide {
  grid-column: 1/-1;
}

.processing-mode-grid,
.processing-input-grid,
.processing-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}

.processing-mode-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: flex-start;
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.processing-mode-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-1);
}

.processing-mode-card.is-active {
  border-color: color-mix(in srgb, var(--agent) 54%, var(--line));
  background: color-mix(in srgb, var(--agent) 10%, var(--surface-1));
  box-shadow: inset 3px 0 0 var(--agent);
}

.processing-mode-card input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.processing-mode-card__body {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.processing-mode-card__body strong {
  font-size: var(--fs-14);
  font-weight: 650;
  color: var(--text);
}

.processing-mode-card__body span {
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--text-2);
}

.processing-mode-card__check {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: transparent;
}

.processing-mode-card.is-active .processing-mode-card__check {
  border-color: var(--agent);
  background: var(--agent);
  color: var(--bg);
}

.processing-setting-list {
  display: grid;
  gap: var(--s-3);
}

.processing-setting-row,
.processing-channel-card {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.processing-setting-row {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.processing-setting-row__label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--text);
}

.processing-setting-row__hint {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-12);
  color: var(--text-2);
}

.processing-channel-card {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.processing-channel-card .xw-check-field {
  min-width: 0;
}

.processing-channel-card .xw-check-field__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-config-footer {
  justify-content: flex-end;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.processing-queue-grid-shell {
  gap: 0;
  min-height: min(960px, 100vh - 104px);
}

.processing-queue-grid-shell .xw-dg-head {
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-1);
}

.processing-queue-grid-shell .xw-dg-tb {
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.processing-queue-grid-shell .xw-dg-split {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--bg-2);
}

.processing-queue-grid-shell .xw-dg-body {
  overflow: visible;
}

.processing-queue-table-wrap {
  min-width: 0;
  padding: var(--s-4) var(--s-6) 0;
  overflow-x: auto;
}

.processing-queue-table {
  min-width: 920px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.processing-queue-table th,
.processing-queue-table td {
  vertical-align: middle;
}

.processing-queue-row {
  cursor: pointer;
}

.processing-queue-row:hover,
.processing-queue-row.is-selected {
  background: color-mix(in srgb, var(--agent) 10%, transparent);
}

.processing-queue-row.row--error {
  box-shadow: inset 3px 0 0 var(--danger);
}

.processing-queue-product {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.processing-queue-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
  justify-content: flex-end;
}

.processing-queue-cards {
  display: none;
}

.processing-queue-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
}

.processing-queue-card.is-selected {
  border-color: color-mix(in srgb, var(--agent) 54%, var(--line));
  background: color-mix(in srgb, var(--agent) 10%, var(--surface-1));
}

.processing-queue-card--error {
  box-shadow: inset 3px 0 0 var(--danger);
}

.processing-queue-card header,
.processing-queue-card footer {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  justify-content: space-between;
}

.processing-queue-card header > div {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.processing-queue-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-14);
  color: var(--text);
}

.processing-queue-card__facts,
.processing-queue-detail__facts {
  display: grid;
  gap: var(--s-2);
}

.processing-queue-card__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: var(--fs-12);
  color: var(--text-2);
}

.processing-queue-card__error {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-12);
  color: var(--danger);
}

.processing-queue-detail {
  display: grid;
  gap: var(--s-3);
}

.processing-queue-detail__facts {
  margin: 0;
}

.processing-queue-detail__facts div {
  display: grid;
  gap: var(--s-1);
}

.processing-queue-detail__facts dt {
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--muted);
}

.processing-queue-detail__facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-13);
  color: var(--text);
}

.processing-queue-detail__error {
  background: var(--surface-1);
}

.processing-queue-detail__error p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--danger);
}

@media (width <= 900px) {
  .processing-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .processing-config-head {
    flex-direction: column;
  }
  .processing-config-head__actions,
  .processing-config-footer {
    justify-content: flex-start;
    width: 100%;
  }
}
@media (width <= 760px) {
  .processing-queue-table-wrap {
    display: none;
  }
  .processing-queue-cards {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-3);
  }
  .processing-queue-card header,
  .processing-queue-card footer,
  .processing-setting-row,
  .processing-channel-card {
    flex-direction: column;
    align-items: stretch;
  }
  .processing-queue-card__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Automation policy workspace
   ========================================================================== */
.automation-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.automation-page--mc {
  gap: 0;
  padding: 0;
}

.automation-policy-form {
  gap: 0;
}

.automation-policy-shell {
  min-height: min(960px, 100vh - 104px);
}

.automation-load-error {
  margin: 0 0 16px;
}

.automation-empty-state {
  margin: 24px;
}

.automation-add-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.automation-add-row__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.automation-add-row__field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-3);
}

.automation-add-row__field select {
  width: 100%;
}

.automation-policy-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.automation-policy-table--mc {
  min-width: 1120px;
}

.automation-policy-table--mc tbody tr {
  cursor: pointer;
}

.automation-policy-table--mc tbody tr:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.automation-policy-table--mc tbody tr.is-selected {
  background: var(--brand-soft);
}

.automation-policy-table--mc tbody tr.is-paused {
  opacity: 72%;
}

.automation-policy-toggle-col,
.automation-policy-toggle-cell {
  width: 48px;
}

.automation-policy-toggle-cell {
  vertical-align: middle;
}

.automation-policy-toggle-cell .xw-switch-field {
  justify-content: center;
}

.automation-policy-title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.automation-policy-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.automation-policy-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--agent);
}

.automation-policy-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.automation-policy-description {
  max-width: 460px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-policy-scope {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-policy-card-list {
  display: none;
}

.automation-page--channel .automation-policy-shell {
  min-height: auto;
}

.automation-page--channel .xw-dg-body {
  padding: 18px;
  background: var(--surface-0);
}

.automation-channel-compact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1080px;
}

.automation-channel-card {
  width: 100%;
}

.automation-channel-card .card__head {
  align-items: flex-start;
}

.automation-channel-card .card__head .h-sec {
  min-width: 0;
}

.automation-channel-card .card__head .badge {
  flex-shrink: 0;
}

.automation-channel-limit-row__heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.automation-channel-row-value {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.automation-channel-schedule-row .xw-setting-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.automation-channel-effective-list {
  display: flex;
  flex-direction: column;
}

.automation-channel-effective-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.automation-channel-effective-row:last-child {
  border-bottom: 0;
}

.automation-channel-effective-row__value {
  font-size: 12px;
  white-space: nowrap;
}

.automation-channel-effective-row__value--ok {
  color: var(--ok);
}

.automation-channel-effective-row__value--agent {
  color: var(--agent);
}

.automation-channel-effective-row__value--warn {
  color: var(--warn);
}

.automation-page--mc .rule-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  cursor: pointer;
}

.automation-page--mc .rule-card:hover,
.automation-page--mc .rule-card.is-selected {
  border-color: var(--line-strong);
  background: var(--brand-soft);
}

.automation-page--mc .rule-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.automation-page--mc .rule-card.is-paused {
  opacity: 72%;
}

.automation-page--mc .rule-card__icon {
  display: grid;
  place-items: center;
  width: 24px;
  color: var(--text-3);
}

.automation-page--mc .rule-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.automation-page--mc .rule-card__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}

.automation-page--mc .rule-card__desc {
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-2);
}

.automation-page--mc .rule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.automation-page--mc .rule-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.automation-policy-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.automation-policy-detail__section + .automation-policy-detail__section {
  margin-top: 12px;
}

.automation-policy-detail .xw-section__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.automation-policy-detail .form-row {
  display: grid;
  gap: 12px;
}

.automation-policy-detail .form-row--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-policy-detail .form-row--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.automation-policy-detail .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.automation-policy-detail .form-field label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.automation-policy-detail .form-field small {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-3);
}

.automation-policy-detail .form-field :is(input, select, textarea) {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
  font-size: 13px;
  color: var(--text);
}

.automation-policy-detail .form-field textarea {
  min-height: 76px;
  resize: vertical;
}

.automation-policy-detail .form-field :is(input, select, textarea):focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.automation-policy-detail .rule-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.automation-policy-detail .rule-group__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (width <= 1120px) {
  .automation-add-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (width <= 720px) {
  .automation-add-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .automation-policy-table-wrap {
    display: none;
  }
  .automation-policy-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .automation-page--channel .xw-dg-body {
    padding: 12px;
  }
  .automation-channel-compact {
    gap: 12px;
  }
  .automation-channel-card .card__head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .automation-channel-card .card__head .badge {
    max-width: 100%;
  }
  .automation-channel-limit-row,
  .automation-channel-schedule-row {
    gap: 10px;
    align-items: flex-start;
  }
  .automation-channel-row-value {
    white-space: normal;
  }
  .automation-page--mc .rule-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .automation-page--mc .rule-card__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .automation-policy-detail .form-row--2col,
  .automation-policy-detail .form-row--3col {
    grid-template-columns: 1fr;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Action Queue Component Styles
   ========================================================================== */
.action-queue-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.action-queue-page--org {
  gap: 1rem;
  padding-inline: 1.5rem;
}

.action-queue-page--org .xw-page-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.action-queue-page--org .xw-page-header__title h1 {
  font-size: 1.55rem;
  letter-spacing: -0.012em;
}

/* Page Header */
.action-queue-page .xw-page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.action-queue-page .xw-page-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.action-queue-page .xw-page-header__eyebrow {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.9);
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
}

.action-queue-page .xw-page-header__title h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.action-queue-page .xw-page-header__subtitle {
  font-size: 0.9rem;
  color: var(--text-2);
}

.action-queue-page .xw-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ops-embedded-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.ops-embedded-toolbar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: min(220px, 100%);
}

.ops-embedded-toolbar .filter-group label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--table-header-color);
}

.ops-embedded-toolbar .filter-group select,
.ops-embedded-toolbar .filter-group input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  color: var(--text-primary);
}

.ops-embedded-toolbar .checkbox-label {
  margin-bottom: 0.25rem;
}

.action-queue-subnav {
  margin-bottom: 1rem;
}

.action-queue-subnav .workspace-subnav__item {
  min-height: 42px;
}

/* Stats Row */
.action-queue-page .stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.action-queue-page .stats-row--approvals {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.action-queue-page .stat-card {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  text-align: center;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.action-queue-page .stat-card--clickable {
  cursor: pointer;
}
.action-queue-page .stat-card--clickable:hover {
  background: var(--surface-2);
  transform: translateY(-2px);
}
.action-queue-page .stat-card--clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent), 0 0 0 4px color-mix(in srgb, var(--brand-strong) 18%, transparent), 0 10px 28px rgba(0, 0, 0, 0.22);
}

.action-queue-page .stat-card--active {
  border-color: color-mix(in srgb, var(--brand) 80%, transparent);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent), 0 8px 26px color-mix(in srgb, var(--brand) 18%, transparent);
}

.action-queue-page .stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.action-queue-page .stat-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.action-queue-page .stat-card--pending {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.action-queue-page .stat-card--pending .stat-card__value {
  color: var(--warn);
}

.action-queue-page .stat-card--approved {
  border-color: color-mix(in srgb, var(--info) 35%, transparent);
}
.action-queue-page .stat-card--approved .stat-card__value {
  color: var(--info);
}

.action-queue-page .stat-card--executing {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.action-queue-page .stat-card--executing .stat-card__value {
  color: var(--brand);
}

.action-queue-page .stat-card--completed {
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.action-queue-page .stat-card--completed .stat-card__value {
  color: var(--ok);
}

.action-queue-page .stat-card--failed {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.action-queue-page .stat-card--failed .stat-card__value {
  color: var(--danger);
}

.action-queue-page .stat-card--today {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--brand) 5%, transparent));
  cursor: default;
}
.action-queue-page .stat-card--today:hover {
  transform: none;
}
.action-queue-page .stat-card--today .stat-card__value {
  color: var(--brand);
}

/* Filters Bar */
.action-queue-page .filters-bar {
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.75rem 1rem;
}

.action-queue-page .filters-bar--approvals,
.action-queue-page .filter-bar.filter-bar--approvals {
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  min-height: 0;
}

.action-queue-page .filter-bar--approvals .filter-bar__search,
.action-queue-page .filter-bar--approvals .filter-bar__filters,
.action-queue-page .filter-bar--approvals .filter-bar__actions {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.action-queue-page .filter-bar--approvals .filter-bar__search {
  max-width: none;
}

.action-queue-page .filter-bar--approvals .filter-bar__actions {
  margin-left: 0;
}

.action-queue-page .filters-bar--approvals .filters-bar__content,
.action-queue-page .filter-bar--approvals .filter-bar__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: start;
  grid-auto-rows: minmax(0, auto);
}

.action-queue-page .filters-bar--approvals .filters-bar__actions,
.action-queue-page .filter-bar--approvals .filter-bar__actions {
  display: flex;
  justify-content: flex-end;
}

.action-queue-page .filters-bar .filter-group,
.action-queue-page .filter-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.action-queue-page .filters-bar .filter-group label,
.action-queue-page .filter-bar .filter-group label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--table-header-color);
}

.action-queue-page .filters-bar .filter-group select,
.action-queue-page .filters-bar .filter-group input,
.action-queue-page .filter-bar .filter-group select,
.action-queue-page .filter-bar .filter-group input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: border-color 120ms ease;
}
.action-queue-page .filters-bar .filter-group select:focus,
.action-queue-page .filters-bar .filter-group input:focus,
.action-queue-page .filter-bar .filter-group select:focus,
.action-queue-page .filter-bar .filter-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.action-queue-page .filters-bar .filter-group select::-moz-placeholder, .action-queue-page .filters-bar .filter-group input::-moz-placeholder, .action-queue-page .filter-bar .filter-group select::-moz-placeholder, .action-queue-page .filter-bar .filter-group input::-moz-placeholder {
  color: var(--text-muted);
}
.action-queue-page .filters-bar .filter-group select::placeholder,
.action-queue-page .filters-bar .filter-group input::placeholder,
.action-queue-page .filter-bar .filter-group select::placeholder,
.action-queue-page .filter-bar .filter-group input::placeholder {
  color: var(--text-muted);
}

.action-queue-page .filters-bar .filter-group--view,
.action-queue-page .filter-bar .filter-group--view {
  min-width: min(280px, 100%);
}

.action-queue-page .filters-bar .filter-group--search,
.action-queue-page .filter-bar .filter-group--search {
  grid-column: span 2;
  min-width: 240px;
}

.action-queue-page .filters-bar--approvals .filter-group--search,
.action-queue-page .filter-bar--approvals .filter-group--search {
  min-width: 280px;
}

.filter-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 0.375rem;
}

.filter-toggle__btn {
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.action-queue-page--mc {
  gap: 0;
  min-width: 0;
  padding: 0;
}

.action-queue-page--mc .action-queue-grid-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.action-queue-page--org-approvals.action-queue-page--mc .action-queue-grid-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.action-queue-page--mc .action-queue-toolbar-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.action-queue-page--mc .action-queue-filter-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 0.5rem;
  align-items: end;
  padding: 0 24px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.action-queue-page--mc .action-queue-filter-strip .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.action-queue-page--mc .action-queue-filter-strip .filter-group label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

.action-queue-page--mc .action-queue-filter-strip .xw-select {
  width: 100%;
  min-width: 0;
  height: var(--ctrl-h-sm);
  color: var(--text);
}

.action-queue-page--mc .xw-dg-body > .action-table {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}

.action-queue-page--mc .xw-dg-body > .action-table .action-table__viewport {
  max-height: min(720px, 100vh - 340px);
  overflow: auto;
}

.action-queue-page--channel .xw-dg-body {
  background: var(--bg-2);
}

.action-queue-page--channel .xw-compact-stat--agent {
  border-color: var(--agent-line);
  background: var(--agent-soft);
}

.action-queue-page--channel .xw-compact-stat--agent .xw-compact-stat__value {
  color: var(--agent);
}

.action-queue-page--channel .xw-compact-stat--ok {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.action-queue-page--channel .xw-compact-stat--ok .xw-compact-stat__value {
  color: var(--ok);
}

.action-queue-page--channel .xw-compact-stat--warn {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.action-queue-page--channel .xw-compact-stat--warn .xw-compact-stat__value {
  color: var(--warn);
}

.action-queue-page--channel .xw-compact-stat--text .xw-compact-stat__value {
  color: var(--text);
}

.channel-action-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 16px 20px 18px;
}

.action-queue-page--channel .rule-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.action-queue-page--channel .rule-card:hover {
  border-color: var(--line-strong);
  background: var(--brand-soft);
}

.action-queue-page--channel .rule-card__icon {
  display: flex;
  align-items: center;
  min-width: 0;
}

.action-queue-page--channel .rule-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.action-queue-page--channel .rule-card__title,
.action-queue-page--channel .rule-card__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-queue-page--channel .rule-card__title {
  font-size: var(--fs-14);
  font-weight: 650;
  color: var(--text);
}

.action-queue-page--channel .rule-card__desc {
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--text-2);
}

.action-queue-page--channel .rule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.action-queue-page--channel .rule-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.channel-action-card__kind {
  justify-content: center;
  min-width: 54px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}

.app-shell .action-queue-page--channel .channel-action-card__kind--price {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}

.app-shell .action-queue-page--channel .channel-action-card__kind--sync {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

.app-shell .action-queue-page--channel .channel-action-card__kind--drift {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.app-shell .action-queue-page--channel .channel-action-card__kind--auth {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.app-shell .action-queue-page--channel .channel-action-card__kind--edit {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}

.app-shell .action-queue-page--channel .channel-action-card__kind--rule {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

@media (width <= 900px) {
  .action-queue-page--mc .action-queue-grid-shell {
    border-radius: var(--r-md);
  }
  .action-queue-page--mc .action-queue-filter-strip {
    grid-template-columns: 1fr;
    padding: 0 16px 12px;
  }
  .action-queue-page--mc .xw-dg-body > .action-table .action-table__viewport {
    max-height: none;
  }
  .channel-action-card-list {
    padding: 12px;
  }
  .action-queue-page--channel .rule-card {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
  }
  .action-queue-page--channel .rule-card__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .action-queue-page--channel .rule-card__title,
  .action-queue-page--channel .rule-card__desc {
    white-space: normal;
  }
}
@media (width <= 520px) {
  .action-queue-page--channel .xw-dg-head__stats {
    display: grid;
    width: 100%;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .action-queue-page--channel .xw-dg-head__stats .xw-compact-stat {
    min-width: 0;
  }
  .action-queue-page--channel .xw-dg-head__stats .xw-compact-stat__label {
    overflow: visible;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }
  .action-queue-page--channel .xw-dg-head__actions {
    align-items: stretch;
    width: 100%;
  }
  .action-queue-page--channel .xw-dg-head__actions .xw-btn {
    justify-content: center;
    width: 100%;
  }
  .action-queue-page--channel .rule-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .action-queue-page--channel .rule-card__icon,
  .action-queue-page--channel .rule-card__body,
  .action-queue-page--channel .rule-card__actions {
    grid-column: 1;
  }
  .action-queue-page--channel .rule-card__meta {
    overflow-wrap: anywhere;
  }
  .action-queue-page--channel .rule-card__actions {
    flex-wrap: wrap;
    width: 100%;
  }
}
/* Action Table */
.action-table {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.action-table__viewport {
  overflow: auto hidden;
}

.action-table__header,
.action-table__row {
  --aq-columns: 44px 72px minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(92px, 0.55fr) minmax(124px, 0.65fr) minmax(170px, 0.95fr) minmax(140px, 0.8fr) minmax(132px, 0.72fr);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: var(--aq-columns);
}

.action-queue-page--org .action-table__header,
.action-queue-page--org .action-table__row {
  --aq-columns: 40px minmax(224px, 1.36fr) minmax(88px, 0.48fr) minmax(164px, 0.88fr) minmax(88px, 0.48fr) minmax(142px, 0.7fr) minmax(138px, 0.66fr);
  min-width: 996px;
}

.action-table__header {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.action-table__row {
  align-items: center;
  min-height: 74px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background-color 120ms ease;
  cursor: pointer;
  outline: none;
}
.action-table__row:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.action-table__row:focus-visible {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
}
.action-table__row:last-child {
  border-bottom: none;
}

.action-table__row--selected {
  background: var(--brand-soft);
}
.action-table__row--selected:hover {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
}

.action-table__row--priority-high {
  border-left-color: color-mix(in srgb, var(--danger) 65%, transparent);
  background: color-mix(in srgb, var(--danger) 4%, transparent);
}

.action-table__row--priority-normal {
  border-left-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

.action-table__row--priority-low {
  border-left-color: var(--line-strong);
}

.action-table__cell {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text);
}

.action-table__cell--checkbox {
  justify-content: center;
}

.action-table__cell--checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--brand);
}

.action-table__cell--id {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--text-2);
}

.action-table__cell--ean {
  flex-direction: column;
  gap: 0.125rem;
  align-items: flex-start;
  justify-content: center;
}

.action-table__ean-value {
  max-width: 100%;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__ean-target {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.74rem;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__cell--type {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.action-table__cell--priority,
.action-table__cell--status {
  white-space: nowrap;
}

.action-table__source,
.action-table__date {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__cell--source {
  color: var(--text-2);
}

.action-table__date {
  color: var(--text-2);
}

.action-table__cell--actions {
  gap: 0.25rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.action-table__header .action-table__cell--current,
.action-table__header .action-table__cell--new {
  justify-content: center;
  text-align: center;
}

.action-table__header .action-table__cell--actions {
  justify-content: flex-start;
  text-align: left;
}

.action-queue-page--org .action-table__cell--product {
  align-items: stretch;
}

.action-table__product-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.action-table__product-thumb {
  display: block;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  -o-object-fit: cover;
     object-fit: cover;
}

.action-table__product-thumb-placeholder {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px dashed var(--line-vivid);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  font-size: 1.05rem;
  color: var(--text-3);
}

.action-table__product-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  justify-content: center;
  min-width: 0;
}

.action-table__product-title {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__product-subline {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.2;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__action-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.action-table__action-text {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__action-type,
.action-table__target-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  padding: 1px 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--surface-inset);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-2);
}

.action-table__action-type {
  flex: 0 0 auto;
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.action-table__target-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-queue-page--org .action-table__cell--current,
.action-queue-page--org .action-table__cell--new {
  align-items: center;
  justify-content: center;
}

.action-table__value-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.action-table__value-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  min-width: 0;
}

.action-table__value-chip {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  min-height: 30px;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.action-table__value-chip--current {
  border-color: var(--muted-line);
  background: var(--muted-soft);
  color: var(--text);
}

.action-table__value-chip--new {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.action-table__value-chip--price {
  min-height: 34px;
  padding: 0.375rem 0.75rem;
  font-size: 1.03rem;
}

.action-table__value-chip--new-up {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.action-table__value-chip--new-down {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.action-table__value-chip--new-flat {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.action-table__value-empty {
  font-size: 0.82rem;
  color: var(--text-3);
}

.action-queue-page--org .action-table__cell--reason {
  align-items: stretch;
}

.action-table__reason-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.action-table__reason-text {
  display: block;
  overflow: hidden;
  line-clamp: 2;
  line-height: 1.35;
  color: var(--text-2);
}

.action-table__reason-text--expanded {
  display: block;
  overflow: visible;
  line-clamp: unset;
}

.action-table__reason-toggle {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  cursor: pointer;
}
.action-table__reason-toggle:hover {
  color: var(--brand-strong);
}
.action-table__reason-toggle:focus-visible {
  outline: 2px solid var(--line-vivid);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.action-queue-page--org .action-table__cell--status {
  align-items: stretch;
}

.action-table__status-stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.action-table__status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  white-space: normal;
}

.action-table__status-badges {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: flex-start;
  min-width: 0;
}

.action-table__status-line .badge,
.action-table__status-line .status-pill {
  flex-shrink: 0;
  min-height: 24px;
  line-height: 1.15;
}

.action-table__status-line .action-table__date {
  flex: 1 0 100%;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-table__meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.action-table__meta-badge {
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.action-table__priority-badge {
  font-size: 0.65rem;
  letter-spacing: 0.02em;
}

.action-queue-page--org .action-table__cell--actions {
  align-items: center;
  justify-content: flex-end;
  padding: 6px 0;
  overflow: visible;
}

.action-table__decision-actions {
  display: grid;
  gap: 0.5rem;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 220px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.action-table__decision-actions--pending {
  max-width: 220px;
}

.action-table__decision-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

.action-table__decision-btn--view {
  margin-left: auto;
}

.action-table__decision-btn--approve {
  border-color: color-mix(in srgb, var(--ok) 36%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  color: var(--ok);
}
.action-table__decision-btn--approve:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ok) 54%, transparent);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ok) 14%, transparent);
}

.action-table__decision-btn--reject {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: color-mix(in srgb, var(--danger) 7.5%, transparent);
  color: var(--danger);
}
.action-table__decision-btn--reject:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--danger) 14%, transparent);
}

.action-table__decision-btn-text {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0.25rem 0.5rem;
  opacity: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  border-width: 1px;
  white-space: normal;
}
.action-table__decision-btn-text:focus-visible {
  outline: 2px solid var(--line-vivid);
  outline-offset: 2px;
}

.action-table__decision-btn-text--approve {
  border-color: color-mix(in srgb, var(--ok) 76%, transparent);
  background: color-mix(in srgb, var(--ok) 48%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ok) 28%, transparent);
  color: #fff;
}
.action-table__decision-btn-text--approve:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ok) 92%, transparent);
  background: color-mix(in srgb, var(--ok) 60%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--ok) 34%, transparent);
  color: #fff;
}

.action-table__decision-btn-text--reject {
  border-color: color-mix(in srgb, var(--danger) 78%, transparent);
  background: color-mix(in srgb, var(--danger) 44%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--danger) 28%, transparent);
  color: #fff;
}
.action-table__decision-btn-text--reject:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 92%, transparent);
  background: color-mix(in srgb, var(--danger) 56%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--danger) 34%, transparent);
  color: #fff;
}

.action-table__decision-btn-text:disabled {
  opacity: 72%;
  filter: none;
}

.action-table__actions-empty {
  font-size: 0.92rem;
  color: var(--text-3);
}

.action-queue-page--org-approvals .action-table__header,
.action-queue-page--org-approvals .action-table__row {
  --aq-columns: 36px minmax(330px, 1.48fr) minmax(88px, 0.4fr) minmax(282px, 1.08fr) minmax(118px, 0.5fr) minmax(196px, 0.72fr) minmax(112px, 0.34fr);
  gap: 0.5rem;
  min-width: 1260px;
  padding-inline: 0.75rem;
}

.action-queue-page--org-approvals .action-table__row {
  min-height: 70px;
}

.action-queue-page--org-approvals .action-table__row--priority-high {
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 3%, transparent), transparent 28%);
}

.action-queue-page--org-approvals .action-table__product-thumb,
.action-queue-page--org-approvals .action-table__product-thumb-placeholder {
  width: 60px;
  height: 60px;
}

.action-queue-page--org-approvals .action-table__product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.action-queue-page--org-approvals .action-table__product-subline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap: anywhere;
}

.action-queue-page--org-approvals .action-table__value-chip {
  max-width: 100%;
  overflow: hidden;
  padding-inline: 0.375rem;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-queue-page--org-approvals .action-table__value-chip--price {
  min-height: 32px;
  padding-inline: 0.5rem;
  font-size: 0.94rem;
}

.action-queue-page--org-approvals .action-table__reason-text {
  font-size: 0.81rem;
  line-height: 1.26;
  overflow-wrap: anywhere;
}

.action-queue-page--org-approvals .action-table__status-line {
  gap: 0.125rem;
  align-items: center;
  width: 100%;
}

.action-queue-page--org-approvals .action-table__status-line .action-table__date {
  font-size: 0.7rem;
}

.action-queue-page--org-approvals .action-table__status-badges {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.125rem;
  align-items: center;
  min-width: 0;
}

.action-queue-page--org-approvals .action-table__status-line .badge,
.action-queue-page--org-approvals .action-table__status-line .status-pill {
  min-height: 22px;
  padding: 0.125rem 0.375rem;
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
}

.action-queue-page--org-approvals .action-table__cell--actions {
  justify-content: flex-end;
}

.action-queue-page--org-approvals .action-table__decision-actions {
  grid-template-columns: repeat(3, 30px);
  gap: 0.25rem;
  justify-content: flex-end;
  max-width: 106px;
}

.action-queue-page--org-approvals .action-table__decision-actions--pending {
  max-width: 106px;
}

.action-queue-page--org-approvals .action-table__decision-btn-text {
  min-height: 34px;
  padding: 0.125rem 0.5rem;
  font-size: 0.76rem;
  white-space: nowrap;
}

.action-queue-page--org-approvals .approval-proposals-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-shell .action-queue-page--org-approvals .approval-proposals-table-wrap {
  overflow: auto hidden;
}

.action-queue-page--org-approvals .approval-proposals-table {
  min-width: 1180px;
}

.action-queue-page--org-approvals .approval-proposals-table th,
.action-queue-page--org-approvals .approval-proposals-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.action-queue-page--org-approvals .approval-proposals-table tbody tr {
  cursor: pointer;
}

.action-queue-page--org-approvals .approval-proposals-table tbody tr.is-selected {
  background: var(--brand-soft);
}

.action-queue-page--org-approvals .approval-proposals-table .select-cell {
  width: 42px;
}

.action-queue-page--org-approvals .approval-proposals-table .actions-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 88px;
  text-align: right;
  background: var(--surface-1);
  box-shadow: -8px 0 8px -8px rgba(15, 18, 28, 0.12);
}

.action-queue-page--org-approvals .approval-proposals-table tbody tr.is-selected .actions-cell {
  background: var(--brand-soft);
}

.action-queue-page--org-approvals .approval-proposals-table .approval-margin {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.2;
}

.action-queue-page--org-approvals .approval-proposals-table .approval-margin__pct {
  font-weight: 600;
  color: var(--text);
}

.action-queue-page--org-approvals .approval-proposals-table .approval-margin__pct--new {
  color: var(--ok);
}

.action-queue-page--org-approvals .approval-proposals-table .approval-margin__value {
  font-size: var(--fs-11);
  color: var(--text-3);
}

.action-queue-page--org-approvals .approval-proposals-table__title {
  display: inline-block;
  max-width: min(36vw, 420px);
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.action-queue-page--org-approvals .approval-proposals-table__target,
.action-queue-page--org-approvals .approval-proposals-table__agent {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-queue-page--org-approvals .approval-proposals-table__change {
  font-weight: 600;
}

.action-queue-page--org-approvals .approval-proposals-table__change--up {
  color: var(--ok);
}

.action-queue-page--org-approvals .approval-proposals-table__change--down {
  color: var(--danger);
}

.action-queue-page--org-approvals .approval-proposals-table__change--info {
  color: var(--info);
}

.action-queue-page--org-approvals .approval-proposals-table__actions {
  display: inline-flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.action-queue-page--org-approvals .approval-proposals-table__product {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.action-queue-page--org-approvals .approval-proposals-table__thumb {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 8px), var(--surface-1);
}

.action-queue-page--org-approvals .approval-proposals-table__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.action-queue-page--org-approvals .approval-proposals-table__product-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.action-queue-page--org-approvals .approval-proposals-table__product-title {
  overflow: hidden;
  max-width: min(48vw, 680px);
  font-size: 0.8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.action-queue-page--org-approvals .approval-proposals-table__product .approval-proposals-table__target {
  max-width: min(26vw, 300px);
  font-size: 0.6875rem;
  color: var(--text-3);
}

.action-queue-page--org-approvals .approval-proposals-table__pricejump {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.action-queue-page--org-approvals .approval-proposals-table__price-arrow {
  color: var(--text-3);
}

.action-queue-page--org-approvals .approval-proposals-table__suggested {
  font-weight: 600;
  color: var(--agent);
}

.action-queue-page--org-approvals .approval-proposals-table__trend-col {
  width: 34px;
  text-align: center;
}

.action-queue-page--org-approvals .approval-proposals-table__trend {
  font-size: 0.875rem;
  line-height: 1;
}

.action-queue-page--org-approvals .approval-proposals-table__trend--up {
  color: var(--ok);
}

.action-queue-page--org-approvals .approval-proposals-table__trend--down {
  color: var(--danger);
}

.action-queue-page--org-approvals .approval-proposals-table__trend--flat {
  color: var(--text-3);
}

.action-queue-page--org-approvals .approval-proposals-table .row-check {
  display: grid;
  place-content: center;
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
}

.action-queue-page--org-approvals .approval-proposals-table .row-check::before {
  width: 8px;
  height: 8px;
  background: var(--bg);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 19%, 84% 4%, 38% 66%);
  content: "";
  transition: transform var(--t-fast) var(--ease);
  transform: scale(0);
}

.action-queue-page--org-approvals .approval-proposals-table .row-check:checked {
  border-color: var(--brand);
  background: var(--brand);
}

.action-queue-page--org-approvals .approval-proposals-table .row-check:checked::before {
  transform: scale(1);
}

.action-queue-page--org-approvals .approval-proposals-table .row-check:disabled {
  cursor: not-allowed;
  opacity: 45%;
}

/* stylelint-disable-next-line media-feature-range-notation -- shared source contract tests pin this max-width form. */
@media (max-width: 1440px) {
  .action-queue-page--org {
    padding-inline: 1rem;
  }
  .action-queue-page .stats-row--approvals {
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  }
  .action-queue-page .filter-bar--approvals .filter-bar__filters {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 0.375rem 0.5rem;
  }
  .action-queue-page .filter-bar .filter-group--view {
    min-width: min(236px, 100%);
  }
  .action-queue-page--org .action-table__header,
  .action-queue-page--org .action-table__row {
    --aq-columns: 36px minmax(204px, 1.22fr) minmax(82px, 0.44fr) minmax(148px, 0.8fr) minmax(82px, 0.44fr) minmax(132px, 0.66fr) minmax(128px, 0.62fr);
    gap: 0.375rem;
    min-width: 928px;
  }
  .action-queue-page--org .action-table__header {
    padding-inline: 0.75rem;
  }
  .action-queue-page--org .action-table__row {
    padding-inline: 0.75rem;
  }
  .action-queue-page--org .action-table__product-thumb,
  .action-queue-page--org .action-table__product-thumb-placeholder {
    width: 64px;
    height: 64px;
  }
  .action-queue-page--org .action-table__value-chip {
    padding-inline: 0.375rem;
    font-size: 0.86rem;
  }
  .action-queue-page--org .action-table__value-chip--price {
    min-height: 32px;
    padding-inline: 0.5rem;
    font-size: 0.96rem;
  }
  .action-queue-page--org .action-table__reason-text {
    font-size: 0.82rem;
    line-height: 1.28;
  }
  .action-queue-page--org .action-table__status-line {
    gap: 0.125rem;
  }
  .action-queue-page--org .action-table__status-line .action-table__date {
    font-size: 0.7rem;
  }
  .action-queue-page--org .action-table__decision-actions {
    gap: 0.375rem;
    max-width: 156px;
  }
  .action-queue-page--org .action-table__decision-btn-text {
    min-height: 34px;
    padding: 0.125rem 0.375rem;
    font-size: 0.76rem;
  }
  .action-queue-page--org-approvals .action-table__header,
  .action-queue-page--org-approvals .action-table__row {
    --aq-columns: 34px minmax(282px, 1.28fr) minmax(82px, 0.38fr) minmax(232px, 0.98fr) minmax(110px, 0.48fr) minmax(180px, 0.66fr) minmax(112px, 0.34fr);
    min-width: 1148px;
  }
  .action-queue-page--org-approvals .action-table__product-thumb,
  .action-queue-page--org-approvals .action-table__product-thumb-placeholder {
    width: 56px;
    height: 56px;
  }
  .action-queue-page--org-approvals .action-table__decision-actions {
    max-width: 106px;
  }
  .action-queue-page--org-approvals .action-table__decision-actions--pending {
    max-width: 106px;
  }
}
/* Responsive table */
@media (max-width: 1024px) {
  .action-table__header,
  .action-table__row {
    --aq-columns: 40px 64px minmax(190px, 1.2fr) minmax(150px, 1fr) minmax(84px, 0.6fr) minmax(110px, 0.8fr) minmax(160px, 1fr) minmax(120px, 0.82fr);
  }
  .action-queue-page--org .action-table__header,
  .action-queue-page--org .action-table__row {
    --aq-columns: 36px minmax(208px, 1.08fr) minmax(82px, 0.44fr) minmax(160px, 0.78fr) minmax(82px, 0.44fr) minmax(136px, 0.66fr) minmax(136px, 0.62fr);
    min-width: 900px;
  }
  .action-table__cell--date {
    display: none;
  }
  .action-queue-page .filters-bar .filter-group--search {
    grid-column: span 1;
    min-width: 200px;
  }
  .action-queue-page--org .action-table__product-thumb,
  .action-queue-page--org .action-table__product-thumb-placeholder {
    width: 64px;
    height: 64px;
  }
  .action-queue-page--org-approvals .action-table__header,
  .action-queue-page--org-approvals .action-table__row {
    --aq-columns: 34px minmax(252px, 1.28fr) minmax(78px, 0.38fr) minmax(206px, 0.95fr) minmax(104px, 0.48fr) minmax(150px, 0.64fr) minmax(112px, 0.4fr);
    min-width: 1016px;
  }
  .action-queue-page--org-approvals .action-table__product-thumb,
  .action-queue-page--org-approvals .action-table__product-thumb-placeholder {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 768px) {
  .action-queue-page {
    gap: 1rem;
    padding: 1rem 0.75rem;
  }
  .action-queue-page .stats-row,
  .action-queue-page .stats-row--approvals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .action-queue-page .filters-bar {
    padding: 0.75rem;
  }
  .action-queue-page .filters-bar--approvals .filters-bar__content {
    grid-template-columns: 1fr;
  }
  .action-queue-page .filters-bar .filter-group--search,
  .action-queue-page .filters-bar--approvals .filter-group--search {
    min-width: 0;
  }
  .action-table {
    overflow: visible;
  }
  .action-table__viewport {
    overflow: visible;
  }
  .action-table__header {
    display: none;
  }
  .action-table__row {
    display: grid;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    padding: 0.75rem;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas: "checkbox ean actions" ". type actions" ". status priority" ". source source";
  }
  .action-table__cell--checkbox {
    grid-area: checkbox;
    align-items: flex-start;
    padding-top: 2px;
  }
  .action-table__cell--id,
  .action-table__cell--date {
    display: none;
  }
  .action-table__cell--ean {
    grid-area: ean;
  }
  .action-table__cell--type {
    grid-area: type;
  }
  .action-table__cell--status {
    grid-area: status;
  }
  .action-table__cell--priority {
    grid-area: priority;
    justify-content: flex-end;
  }
  .action-table__cell--source {
    grid-area: source;
  }
  .action-table__cell--actions {
    grid-area: actions;
    align-items: flex-start;
  }
  .action-queue-page--org .action-table__row {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas: "checkbox product" ". current" ". reason" ". new" ". status" ". actions";
  }
  .action-queue-page--org .action-table__cell--product {
    grid-area: product;
  }
  .action-queue-page--org .action-table__cell--current {
    grid-area: current;
  }
  .action-queue-page--org .action-table__cell--reason {
    grid-area: reason;
  }
  .action-queue-page--org .action-table__cell--new {
    grid-area: new;
  }
  .action-queue-page--org .action-table__cell--status {
    grid-area: status;
  }
  .action-queue-page--org .action-table__cell--actions {
    grid-area: actions;
    justify-content: flex-start;
    padding-top: 0.25rem;
  }
  .action-queue-page--org .action-table__decision-actions {
    justify-content: flex-start;
    max-width: 168px;
  }
  .action-queue-page--org .action-table__product-thumb,
  .action-queue-page--org .action-table__product-thumb-placeholder {
    width: 56px;
    height: 56px;
  }
}
/* Badge Variants for Status */
.action-queue-page .badge--type,
.action-queue-modal .badge--type {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  font-size: 0.7rem;
}

.action-queue-page .badge--ai-source,
.action-queue-modal .badge--ai-source {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  margin-left: 0.25rem;
  font-size: 0.65rem;
}

.action-queue-page .badge--ai,
.action-queue-modal .badge--ai {
  border: 1px solid var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

.action-queue-page .badge--manual,
.action-queue-modal .badge--manual {
  border: 1px solid var(--muted-line);
  background: var(--muted-soft);
  color: var(--text-2);
}

.action-queue-page .badge--status,
.action-queue-modal .badge--status {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  font-size: 0.7rem;
}

.action-queue-page .badge--pending,
.action-queue-modal .badge--pending {
  border: 1px solid rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.18);
  color: rgb(253.32, 215.8, 189.76);
}
:root[data-theme=light] .action-queue-page .badge--pending,
:root[data-theme=light] .action-queue-modal .badge--pending {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.12);
  color: rgb(71.16, 45.08, 37.2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .action-queue-page .badge--pending,
  :root:not([data-theme=dark], [data-theme=light]) .action-queue-modal .badge--pending {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.12);
    color: rgb(71.16, 45.08, 37.2);
  }
}

.action-queue-page .badge--approved,
.action-queue-modal .badge--approved {
  border: 1px solid var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

.action-queue-page .badge--executing,
.action-queue-modal .badge--executing {
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.action-queue-page .badge--completed,
.action-queue-modal .badge--completed {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.18);
  color: rgb(193.12, 238.76, 209.92);
}
:root[data-theme=light] .action-queue-page .badge--completed,
:root[data-theme=light] .action-queue-modal .badge--completed {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(19.56, 64.76, 54.48);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .action-queue-page .badge--completed,
  :root:not([data-theme=dark], [data-theme=light]) .action-queue-modal .badge--completed {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.12);
    color: rgb(19.56, 64.76, 54.48);
  }
}

.action-queue-page .badge--failed,
.action-queue-modal .badge--failed {
  border: 1px solid rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.18);
  color: rgb(250.52, 202.64, 202.64);
}
:root[data-theme=light] .action-queue-page .badge--failed,
:root[data-theme=light] .action-queue-modal .badge--failed {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: rgb(68.76, 33.8, 48.24);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .action-queue-page .badge--failed,
  :root:not([data-theme=dark], [data-theme=light]) .action-queue-modal .badge--failed {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.12);
    color: rgb(68.76, 33.8, 48.24);
  }
}

.action-queue-page .badge--rejected,
.action-queue-modal .badge--rejected {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.action-queue-page .badge--cancelled,
.action-queue-page .badge--superseded,
.action-queue-page .badge--expired,
.action-queue-modal .badge--cancelled,
.action-queue-modal .badge--superseded,
.action-queue-modal .badge--expired {
  border: 1px solid var(--muted-line);
  background: var(--muted-soft);
  color: var(--text-3);
}

.action-queue-page .badge--small,
.action-queue-modal .badge--small {
  padding: 0.125rem 0.25rem;
  font-size: 0.65rem;
}

/* Pagination */
.action-queue-pagination,
.table-pagination.action-queue-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.action-queue-pagination__info,
.table-pagination.action-queue-pagination .table-pagination__summary,
.table-pagination.action-queue-pagination .table-pagination__page-size .xw-field__label {
  font-size: 0.875rem;
  color: var(--text-2);
  white-space: nowrap;
}

.table-pagination.action-queue-pagination {
  justify-content: space-between;
}

.table-pagination.action-queue-pagination .table-pagination__nav {
  margin-left: auto;
}

/* Empty State */
.action-queue-page .xw-empty {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 3rem;
  align-items: center;
  text-align: center;
}

.action-queue-page .xw-empty__icon {
  opacity: 40%;
  font-size: 3rem;
}

.action-queue-page .xw-empty h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text);
}

.action-queue-page .xw-empty p {
  margin: 0;
  color: var(--text-2);
}

/* Loading State */
.action-queue-page .loading-state {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-2);
}

/* Modal */
.action-queue-modal-backdrop {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2100;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--modal-scrim);
  backdrop-filter: blur(4px);
}

body:has(.action-queue-modal-backdrop) .admin-topbar,
body:has(.action-queue-modal-backdrop) .topbar-left,
body:has(.action-queue-modal-backdrop) .topbar-title,
body:has(.action-queue-modal-backdrop) .topbar-actions,
body:has(.action-queue-modal-backdrop) .workspace-page-frame__header,
body:has(.action-queue-modal-backdrop) .xw-page-header--topbar,
body:has(.action-queue-modal-backdrop) .xw-page-header__actions {
  opacity: 8%;
  filter: blur(14px);
  pointer-events: none;
  transition: opacity 120ms ease, filter 120ms ease;
}

.action-queue-modal {
  border: 1px solid var(--line-strong);
  border-radius: 1.5rem;
  background: var(--surface-2);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.action-queue-modal.modal--large {
  width: min(940px, 94vw);
}

.action-queue-modal .modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(88vh - 112px);
  padding: 0.75rem 1rem;
  overflow-y: auto;
}

.action-queue-modal .modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.action-queue-modal .modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--text);
}

.action-queue-modal .modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  font-size: 1.5rem;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.action-queue-modal .modal__close:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.action-queue-modal .modal__footer {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-inset);
}

.action-queue-grid-shell .action-approval-detail-panel.action-queue-modal {
  max-height: none;
  border-radius: 0;
  background: var(--bg-2);
  box-shadow: none;
}

.action-queue-grid-shell .action-approval-detail-panel .detail-grid--meta,
.action-queue-grid-shell .action-approval-detail-panel .detail-subsection,
.action-queue-grid-shell .action-approval-detail-panel .pricing-estimate-card,
.action-queue-grid-shell .action-approval-detail-panel .audit-entry {
  background: var(--surface-1);
}

.action-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--info) 5%, transparent));
}

.action-detail-summary__main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.action-detail-summary__eyebrow {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.9);
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
  color: var(--text-3);
}

.action-detail-summary__main strong {
  font-size: 0.95rem;
  line-height: 1.28;
  color: var(--text);
}

.action-detail-summary__main span:not(.action-detail-summary__eyebrow) {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-2);
}

.action-detail-summary__target {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-height: 26px;
  padding: 0.125rem 0.5rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detail Grid */
.action-queue-modal .detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 0.75rem;
}

.action-queue-modal .detail-grid--meta {
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.action-queue-modal .detail-grid.pricing-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.action-queue-modal .detail-grid.pricing-preview .badge--ai-source {
  margin-left: 0;
}

.action-queue-modal .pricing-preview__metric {
  min-height: 72px;
  padding: 0.5rem 0.75rem;
  border-right: 1px solid var(--line);
  background: transparent;
}

.action-queue-modal .pricing-preview__metric:nth-child(4n),
.action-queue-modal .pricing-preview__metric:last-child {
  border-right: 0;
}

.action-queue-modal .pricing-preview__metric--impact {
  background: color-mix(in srgb, var(--info) 8%, transparent);
}

.action-queue-modal .pricing-preview__metric--source {
  align-items: flex-start;
}

.pricing-preview__profit-impact {
  font-weight: 700;
  color: var(--info);
}

.action-queue-modal .approval-diff {
  display: flex;
  flex-direction: column;
}

.action-queue-modal .approval-diff__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.action-queue-modal .approval-diff__row:last-child {
  border-bottom: 0;
}

.action-queue-modal .approval-diff__label {
  flex: 0 0 7.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.action-queue-modal .approval-diff__from {
  color: var(--text-3);
  text-decoration: line-through;
}

.action-queue-modal .approval-diff__arrow {
  color: var(--text-3);
}

.action-queue-modal .approval-diff__to {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.action-queue-modal .approval-diff__row .badge {
  margin-left: auto;
}

.action-queue-modal .approval-competition {
  display: flex;
  flex-direction: column;
  margin-top: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
}

.action-queue-modal .approval-competition__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.action-queue-modal .approval-competition__rank {
  color: var(--text);
}

.action-queue-modal .approval-competition__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.action-queue-modal .approval-competition__row:last-child {
  border-bottom: 0;
}

.action-queue-modal .approval-competition__row.is-selected {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--brand);
  font-weight: 600;
}

.action-queue-modal .approval-competition__row.is-buybox .approval-competition__price {
  color: var(--ok);
  font-weight: 700;
}

.action-queue-modal .approval-competition__pos {
  color: var(--text-3);
}

.action-queue-modal .approval-competition__price {
  font-variant-numeric: tabular-nums;
}

.action-queue-modal .approval-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.action-queue-modal .approval-viewtoggle__btn {
  padding: 3px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.action-queue-modal .approval-viewtoggle__btn:hover {
  color: var(--text);
}

.action-queue-modal .approval-viewtoggle__btn.is-active {
  background: var(--muted-soft);
  color: var(--text);
}

.action-queue-modal .product-summary {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.action-queue-modal .product-summary__thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-3);
}

.action-queue-modal .product-summary__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.action-queue-modal .product-summary__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.action-queue-modal .product-summary__title {
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.action-queue-modal .product-summary__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text);
}

.action-queue-modal .product-summary__row .dim {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.action-queue-modal .reasoning {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--agent-line);
  border-radius: var(--r-md);
  background: var(--agent-soft);
  font-size: 0.8125rem;
  color: var(--text);
}

.action-queue-modal .reasoning__head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agent);
}

.action-queue-modal .reasoning p {
  margin: 0;
  line-height: 1.55;
  color: var(--text-2);
}

.action-queue-modal .reasoning ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
}

.action-queue-modal .reasoning li {
  margin-bottom: 2px;
}

.action-queue-modal .action-detail-reasoning-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
}

.action-approval-edit-modal .edit-trace {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--agent-line);
  border-radius: var(--r-md);
  background: var(--agent-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-2);
}

.action-approval-edit-modal .edit-attr {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto minmax(0, 1.6fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.action-approval-edit-modal .edit-attr__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.action-approval-edit-modal .edit-attr__value {
  grid-column: 2/-1;
  color: var(--text);
}

.action-approval-edit-modal .edit-attr__from {
  color: var(--text-3);
  text-decoration: line-through;
}

.action-approval-edit-modal .edit-attr__arrow {
  color: var(--text-3);
}

.action-approval-edit-modal .edit-attr__to {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.action-approval-edit-modal .edit-attr__input {
  flex: 1;
  min-width: 0;
}

.action-queue-detail-alert,
.action-queue-impact-alert {
  margin: 0;
}

.action-queue-impact-alert.alert {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
}

.pricing-estimate-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--info-line);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--info) 12%, transparent), var(--surface-inset));
}

.pricing-estimate-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.pricing-estimate-card__header div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.pricing-estimate-card__header strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
}

.pricing-estimate-card__header span {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-2);
}

.pricing-estimate-card__basis {
  flex: 0 1 auto;
  max-width: 45%;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--info-line);
  border-radius: 0.5rem;
  background: var(--info-soft);
  font-size: 0.68rem !important;
  font-weight: 700;
  line-height: 1.25 !important;
  color: var(--info) !important;
}

.pricing-estimate-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}

.pricing-estimate-card__metric {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-inset);
}

.pricing-estimate-card__metric label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pricing-estimate-card__metric span {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-positive {
  color: var(--ok) !important;
}

.metric-negative {
  color: var(--danger) !important;
}

.action-queue-modal .detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.action-queue-modal .detail-item--full {
  grid-column: 1/-1;
}

.action-queue-modal .detail-item label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.action-queue-modal .detail-item span {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.error-text {
  color: var(--danger) !important;
}

/* Detail Section */
.action-queue-modal .detail-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.action-queue-modal .detail-section h3 {
  margin: 0 0 0.375rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.action-queue-modal .detail-subsection {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.action-queue-modal .detail-subsection h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
}

.decision-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-top: 0.5rem;
}

.action-queue-modal .badge--reason-category {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--ok-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ok);
  white-space: nowrap;
  border-color: var(--ok-line);
  color: var(--ok);
}

.action-queue-modal .badge--reason-code {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
  white-space: nowrap;
  border-color: var(--brand-line);
  font-family: "JetBrains Mono", monospace;
  text-transform: none;
  color: var(--brand);
}

.action-queue-modal .decision-highlights {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.action-queue-modal .decision-highlights li {
  margin-bottom: 0.25rem;
  line-height: 1.45;
  color: var(--text);
}

.action-queue-modal .decision-highlights li:last-child {
  margin-bottom: 0;
}

.action-queue-modal .code-block {
  max-height: min(280px, 36vh);
  padding: 0.5rem 0.75rem;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--info);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Audit List */
.action-queue-modal .audit-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-queue-modal .audit-entry {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.action-queue-modal .audit-entry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.action-queue-modal .audit-entry__event {
  font-size: 0.85rem;
  font-weight: 600;
}

.action-queue-modal .audit-entry__time {
  font-size: 0.75rem;
  color: var(--text-3);
}

.action-queue-modal .audit-entry__body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
}

.action-queue-modal .audit-entry__details {
  color: var(--text-2);
}

.action-queue-modal .audit-entry__duration {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--text-3);
}

@media (width <= 900px) {
  .action-queue-modal .detail-grid.pricing-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-estimate-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .action-queue-modal .pricing-preview__metric:nth-child(4n) {
    border-right: 1px solid var(--line);
  }
  .action-queue-modal .pricing-preview__metric:nth-child(even),
  .action-queue-modal .pricing-preview__metric:last-child {
    border-right: 0;
  }
}
@media (width <= 640px) {
  .action-queue-modal-backdrop {
    padding: 0.5rem;
  }
  .action-queue-modal.modal--large {
    width: 100%;
  }
  .action-detail-summary {
    grid-template-columns: 1fr;
  }
  .action-detail-summary__target {
    max-width: 100%;
  }
  .action-queue-modal .detail-grid.pricing-preview {
    grid-template-columns: 1fr;
  }
  .pricing-estimate-card__header {
    flex-direction: column;
  }
  .pricing-estimate-card__basis {
    max-width: 100%;
  }
  .pricing-estimate-card__grid {
    grid-template-columns: 1fr;
  }
  .action-queue-modal .pricing-preview__metric,
  .action-queue-modal .pricing-preview__metric:nth-child(4n),
  .action-queue-modal .pricing-preview__metric:nth-child(even) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .action-queue-modal .pricing-preview__metric:last-child {
    border-bottom: 0;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.action-queue-page--org .xw-page-header {
  border-bottom: 1px solid var(--border-default);
}

.action-queue-page .xw-page-header__title h1 {
  color: var(--text-primary);
}

.action-queue-page .xw-page-header__subtitle {
  color: var(--text-secondary);
}

.action-queue-page .stat-card {
  border: 1px solid var(--border-soft);
  background: var(--surface-muted-strong);
  box-shadow: var(--shadow-md);
}
.action-queue-page .stat-card:hover {
  background: color-mix(in srgb, var(--surface-overlay) 74%, transparent);
}

.action-queue-page .stat-card--active {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent), var(--shadow-md);
}

.action-queue-page .stat-card__label {
  color: var(--text-muted);
}

.action-queue-page .filters-bar {
  border-color: var(--border-soft);
  background: var(--surface-muted-strong);
}

.action-queue-page .filters-bar .filter-group label {
  color: var(--table-header-color);
}

.action-queue-page .filters-bar .filter-group select,
.action-queue-page .filters-bar .filter-group input {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}

.action-queue-page .filters-bar .filter-group select::-moz-placeholder, .action-queue-page .filters-bar .filter-group input::-moz-placeholder {
  color: var(--text-muted);
}

.action-queue-page .filters-bar .filter-group select::placeholder,
.action-queue-page .filters-bar .filter-group input::placeholder {
  color: var(--text-muted);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.recovery-checkpoints-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding-block-end: 1.5rem;
}

.recovery-checkpoints-page .workspace-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

.recovery-checkpoints-page .xw-page-header {
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--agent) 8%), var(--surface));
  box-shadow: var(--shadow-sm);
}

.recovery-checkpoints-page .xw-page-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recovery-checkpoints-page .xw-page-header h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.1;
  color: var(--text-primary);
}

.recovery-checkpoints-page .xw-page-header__subtitle {
  max-width: 62rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.recovery-checkpoints-page .xw-page-header__actions,
.recovery-checkpoints-page .form-actions,
.recovery-checkpoints-page .stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.recovery-checkpoints-page .panel.config-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.recovery-checkpoints-page .config-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.recovery-checkpoints-page .form-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.recovery-checkpoints-page .form-section > h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--text-primary);
}

.recovery-checkpoints-page .form-section > p {
  margin: 0;
}

.recovery-checkpoints-page .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.5rem;
}

.recovery-checkpoints-page .stat-card {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
  box-shadow: none;
}

.recovery-checkpoints-page .stat-card__value {
  display: block;
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text-primary);
}

.recovery-checkpoints-page .stat-card__label,
.recovery-checkpoints-page .form-group > label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
}

.recovery-checkpoints-page .stat-card__sublabel {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.recovery-checkpoints-page .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.recovery-checkpoints-page .form-row.mt-3,
.recovery-checkpoints-page .mt-2 {
  margin-top: 0;
}

.recovery-checkpoints-page .form-group {
  min-width: 0;
}

.recovery-checkpoints-page .form-row > .form-group {
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}

.recovery-checkpoints-page .form-group > div,
.recovery-checkpoints-page .form-group > span:not(.badge),
.recovery-checkpoints-page .form-group > p {
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.recovery-checkpoints-page .muted-text,
.recovery-checkpoints-page .form-hint {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.recovery-checkpoints-page__date-input,
.recovery-checkpoints-page__select,
.recovery-checkpoints-page__token-input,
.recovery-checkpoints-page__textarea {
  width: 100%;
  min-height: 2.45rem;
}

.recovery-checkpoints-page__textarea {
  min-height: 6rem;
  resize: vertical;
}

.recovery-checkpoints-page .product-table-wrapper {
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
}

.recovery-checkpoints-page .product-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.recovery-checkpoints-page .product-table th,
.recovery-checkpoints-page .product-table td {
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
}

.recovery-checkpoints-page .product-table th {
  background: var(--surface-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
}

.recovery-checkpoints-page .product-table tbody tr:last-child td {
  border-bottom: 0;
}

.recovery-checkpoints-page .product-table__row--selected td {
  background: color-mix(in srgb, var(--agent) 10%, var(--surface));
}

.recovery-checkpoints-page .checkbox-label {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
  color: var(--text-primary);
}

.recovery-checkpoints-page .checkbox-label input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.12rem;
  accent-color: var(--brand);
}

.recovery-checkpoints-page .badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.recovery-checkpoints-page .badge--warning {
  border-color: color-mix(in srgb, var(--warn) 46%, var(--border-soft));
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  color: var(--warn);
}

.recovery-checkpoints-page .settings-list,
.recovery-checkpoints-page ul.muted-text {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1rem;
}

.recovery-checkpoints-page details {
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-muted);
}

.recovery-checkpoints-page summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--text-primary);
}

.recovery-checkpoints-page .code-block {
  max-width: 32rem;
  padding: 0.5rem;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-primary);
}

.recovery-checkpoints-page .feedback-state-view {
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}

@media (width <= 760px) {
  .recovery-checkpoints-page .xw-page-header,
  .recovery-checkpoints-page .form-section {
    padding: 0.75rem;
  }
  .recovery-checkpoints-page .xw-page-header__actions,
  .recovery-checkpoints-page .form-actions {
    width: 100%;
  }
  .recovery-checkpoints-page .form-row {
    grid-template-columns: 1fr;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.onboarding-wizard {
  min-height: calc(100vh - 96px);
  color: var(--text);
}

.onboarding-wizard--mission-control {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.app-shell main.page--flush .onboarding-wizard {
  min-height: 100%;
}

.onboarding-wizard__shell {
  display: grid;
  min-height: calc(100vh - 118px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 8%, transparent);
  grid-template-columns: minmax(280px, 336px) minmax(0, 1fr);
}

.app-shell main.page--flush .onboarding-wizard__shell {
  min-height: 100%;
  block-size: 100%;
  border: 0;
  border-radius: 0;
}

.onboarding-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  min-width: 0;
  padding: 28px 24px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, var(--brand-soft));
}

.onboarding-rail__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onboarding-rail__intro h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
  color: var(--text);
}
.onboarding-rail__intro p {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-2);
}

.onboarding-rail__meta {
  display: grid;
  flex: 0 0 auto;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.onboarding-rail__meta-item {
  display: grid;
  gap: 3px;
}
.onboarding-rail__meta-item span {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.onboarding-rail__meta-item strong {
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-step-nav {
  flex: 0 0 auto;
  min-height: auto;
  min-width: 0;
}

.onboarding-step-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.onboarding-step-nav__item {
  display: block;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.onboarding-step-nav__item.level-1 {
  margin-left: 18px;
}
.onboarding-step-nav__item.level-2 {
  margin-left: 36px;
}

.onboarding-step-nav__item.is-active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.onboarding-step-nav__item.is-complete .onboarding-step-nav__marker {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: var(--ok);
}
.onboarding-step-nav__item.is-complete .onboarding-step-nav__title {
  color: var(--text);
}
.onboarding-step-nav__item.is-complete .onboarding-step-nav__status {
  color: var(--ok);
}

.onboarding-step-nav__item.is-active .onboarding-step-nav__marker {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--text-on-brand);
}
.onboarding-step-nav__item.is-active .onboarding-step-nav__title {
  color: var(--brand);
}

.onboarding-step-nav__item.is-locked .onboarding-step-nav__button {
  cursor: not-allowed;
}
.onboarding-step-nav__item.is-locked .onboarding-step-nav__marker,
.onboarding-step-nav__item.is-locked .onboarding-step-nav__title,
.onboarding-step-nav__item.is-locked .onboarding-step-nav__status {
  color: var(--text-3);
}

.onboarding-step-nav__row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 10px;
}

.onboarding-step-nav__button {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text-2);
  grid-template-columns: 28px minmax(0, 1fr);
  cursor: pointer;
}

.onboarding-step-nav__marker {
  display: inline-grid;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1;
  color: var(--text-3);
  place-items: center;
}

.onboarding-step-nav__marker--icon .app-icon,
.onboarding-step-nav__marker--icon svg,
.onboarding-step-nav__marker--icon i {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.onboarding-step-nav__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.onboarding-step-nav__title {
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-step-nav__status {
  overflow: hidden;
  font-size: var(--fs-11);
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-step-nav__toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.onboarding-step-nav__toggle:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.onboarding-step-nav__toggle.is-expanded {
  color: var(--text);
}
.onboarding-step-nav__toggle .app-icon,
.onboarding-step-nav__toggle svg,
.onboarding-step-nav__toggle i {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.onboarding-main {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 36px clamp(32px, 5vw, 64px);
  overflow-y: auto;
  background: var(--bg-2);
}

.onboarding-ready-panel {
  display: grid;
  gap: 16px;
  width: 100%;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.onboarding-ready-panel h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
}
.onboarding-ready-panel p {
  max-width: 60ch;
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-2);
}

.onboarding-ready-panel__eyebrow {
  color: var(--ok);
}

.onboarding-ready-panel__trace {
  width: 100%;
}

.onboarding-ready-panel__next {
  display: grid;
  gap: 8px;
  width: 100%;
}

.onboarding-ready-panel__next-item {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  grid-template-columns: auto minmax(0, 1fr);
}
.onboarding-ready-panel__next-item .app-icon,
.onboarding-ready-panel__next-item svg,
.onboarding-ready-panel__next-item i {
  width: 14px;
  height: 14px;
  color: var(--text-3);
}
.onboarding-ready-panel__next-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.onboarding-ready-panel__next-item strong {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
}
.onboarding-ready-panel__next-item span {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.onboarding-step-card {
  display: flex;
  flex-direction: column;
  width: min(100%, 920px);
  min-height: 100%;
  margin: 0 auto;
}

.onboarding-step-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 26px;
  min-height: auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 6%, transparent);
}

.onboarding-step-card--loading,
.onboarding-step-card--error {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: min(100%, 640px);
  margin: 48px auto;
  padding: 0 48px;
  font-size: var(--fs-14);
  color: var(--text-2);
}

.onboarding-step-card__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.onboarding-step-card__header h1 {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}
.onboarding-step-card__header p {
  max-width: 60ch;
  margin: 8px 0 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-2);
}

.onboarding-step-card__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.onboarding-step-card__footer {
  display: grid;
  gap: 16px;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr auto 1fr;
}
.onboarding-step-card__footer .btn {
  box-shadow: none;
}

.onboarding-step-card__footer-left {
  justify-self: start;
}

.onboarding-step-card__footer-center {
  justify-self: center;
}

.onboarding-step-card__footer-right {
  justify-self: end;
}

.platforms-list,
.platform-selection {
  display: grid;
  gap: 12px;
}

.onboarding-choice-card {
  display: grid;
  gap: 14px;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  text-align: left;
  color: var(--text);
  line-height: 1.25;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  cursor: pointer;
}
.onboarding-choice-card:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-1px);
}
.onboarding-choice-card strong {
  display: block;
  min-width: 0;
  font-size: var(--fs-13);
  font-weight: 600;
}
.onboarding-choice-card span {
  display: block;
  min-width: 0;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.onboarding-choice-card .app-icon,
.onboarding-choice-card svg,
.onboarding-choice-card img,
.onboarding-choice-card i {
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}

.onboarding-choice-card__meta {
  margin-top: 4px;
  font-size: var(--fs-11);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-3);
}

.onboarding-choice-card--platform,
.onboarding-choice-card--shop {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

@media (width <= 1120px) {
  .onboarding-wizard__shell {
    grid-template-columns: minmax(232px, 264px) minmax(0, 1fr);
  }
  .onboarding-rail {
    gap: 18px;
    padding: 24px 20px;
  }
  .onboarding-rail__intro h1 {
    font-size: 20px;
  }
  .onboarding-main {
    padding: 32px 28px;
  }
  .onboarding-step-card {
    width: min(100%, 760px);
  }
  .onboarding-step-card__header h1 {
    font-size: 26px;
  }
}
.platform-config header,
.shop-config header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}

.shops-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.credentials-section,
.connection-section {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.credentials-section h3,
.connection-section h3 {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}

.platform-review {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-muted);
}

.platform-review__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.platform-review__shops {
  display: grid;
  gap: 0.5rem;
}

.onboarding-badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-pill-muted);
  white-space: nowrap;
  border: 1px solid var(--color-pill-muted-border);
}
.onboarding-badge--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.onboarding-status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
}
.onboarding-status--success {
  border: 1px solid var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.onboarding-status--error {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.onboarding-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.onboarding-copy ol {
  margin: 0;
  padding-left: 1rem;
  color: var(--text-secondary);
}

.onboarding-grid {
  display: grid;
  gap: 1rem;
}

.onboarding-block {
  display: grid;
  gap: 14px;
  width: 100%;
}

.onboarding-block--nested {
  margin-top: 14px;
}

.onboarding-block-title {
  margin-bottom: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-2);
}

.onboarding-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.onboarding-channel-card {
  display: grid;
  gap: 8px;
  align-items: flex-start;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  cursor: pointer;
}
.onboarding-channel-card:hover {
  border-color: var(--brand-line);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-1px);
}
.onboarding-channel-card.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent), 0 12px 28px color-mix(in srgb, var(--brand) 10%, transparent);
}

.onboarding-channel-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
}

.onboarding-channel-card__title {
  font-size: var(--fs-14);
  font-weight: 600;
}

.onboarding-channel-card__subtitle {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.onboarding-field__link {
  font-size: 0.75rem;
  color: #3b82f6;
  text-decoration: none;
}
.onboarding-field__link:hover {
  text-decoration: underline;
}

.onboarding-fact-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.onboarding-fact-grid span {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.onboarding-fact-grid strong {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-14);
  color: var(--text);
}

.onboarding-empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--color-danger-border);
  border-radius: 0.75rem;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.onboarding-empty--access {
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}
.onboarding-empty--access .onboarding-empty__content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 200px;
  color: inherit;
}
.onboarding-empty--access .onboarding-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.onboarding-access-brief {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
}

.onboarding-access-brief__header {
  display: grid;
  gap: 0.5rem;
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
}
.onboarding-access-brief__header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}
.onboarding-access-brief__header p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-access-brief__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-primary-border);
  border-radius: 0.75rem;
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.onboarding-access-brief__summary {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-primary-border);
  background: var(--surface-default);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.onboarding-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.onboarding-access-list li {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  min-height: 32px;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-default);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.onboarding-access-list li.is-available {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.onboarding-access-list li.is-unavailable {
  color: var(--text-3);
}

.onboarding-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.onboarding-access-actions > span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.onboarding-access-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
}

.onboarding-surface {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.onboarding-surface h3 {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}
.onboarding-surface p {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.onboarding-toggle-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text);
  cursor: pointer;
}

.onboarding-toggle-row__input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.onboarding-toggle-row__label {
  font-weight: 600;
}

.onboarding-import-upload {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.onboarding-import-input {
  display: none;
}

.onboarding-import-upload__trigger {
  align-self: flex-start;
}

.onboarding-body-action {
  width: -moz-fit-content;
  width: fit-content;
}

.onboarding-muted {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-2);
}

.onboarding-inline-alert {
  margin-top: 12px;
}

.onboarding-alert-detail {
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-size: var(--fs-12);
}

.onboarding-file-name {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-3);
}

.onboarding-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.onboarding-checklist__loading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-3);
}

.onboarding-checklist__summary {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-3);
}
.onboarding-checklist__summary strong {
  color: var(--text-primary);
}

.onboarding-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.onboarding-checklist__item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.onboarding-checklist__item.is-complete {
  color: var(--color-success);
}

.onboarding-checklist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

@media (width <= 760px) {
  .app-shell main.page--flush .onboarding-wizard {
    min-height: auto;
  }
  .app-shell main.page--flush .onboarding-wizard__shell {
    block-size: auto;
    min-height: auto;
  }
  .onboarding-wizard__shell {
    min-height: auto;
    overflow: visible;
    align-content: start;
    grid-template-columns: 1fr;
    box-shadow: none;
  }
  .onboarding-rail {
    gap: 16px;
    min-height: auto;
    padding: 24px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .onboarding-step-nav {
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .onboarding-step-nav__list {
    display: grid;
    gap: 8px;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .onboarding-step-nav__item {
    min-width: 0;
    scroll-snap-align: none;
  }
  .onboarding-step-nav__item.is-active {
    grid-column: 1/-1;
  }
  .onboarding-step-nav__row {
    padding: 8px;
  }
  .onboarding-step-nav__button {
    gap: 8px;
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .onboarding-step-nav__marker {
    width: 24px;
    height: 24px;
  }
  .onboarding-rail__meta {
    margin-top: 0;
  }
  .onboarding-main {
    min-height: auto;
    padding: 28px 20px;
    overflow: visible;
  }
  .onboarding-step-card {
    min-height: auto;
  }
  .onboarding-step-card__body {
    flex: 0 0 auto;
    padding: 22px;
  }
  .onboarding-step-card__footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .onboarding-step-card__footer .onboarding-step-card__footer-left,
  .onboarding-step-card__footer .onboarding-step-card__footer-center,
  .onboarding-step-card__footer .onboarding-step-card__footer-right {
    justify-self: stretch;
    width: 100%;
  }
  .onboarding-step-card__footer .btn {
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.cycle-dashboard .xw-page-frame__body {
  display: grid;
  gap: var(--s-4);
}
.cycle-dashboard .connection-status {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  min-height: var(--ctrl-h-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--muted-line);
  border-radius: var(--r-pill);
  background: var(--muted-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.cycle-dashboard .connection-status--online {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}
.cycle-dashboard .connection-status--degraded {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}
.cycle-dashboard .connection-status--faulted,
.cycle-dashboard .connection-status--offline {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}
.cycle-dashboard .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentcolor;
  box-shadow: 0 0 10px currentcolor;
}

.cycle-dashboard__alert {
  margin: 0;
}

.cycle-dashboard__content {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.cycle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  min-width: 0;
}

.cycle-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--cycle-card-border);
  border-radius: 0.75rem;
  background: var(--cycle-card-bg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.cycle-card.is-running {
  border-color: var(--agent-line);
  background: var(--cycle-agent-bg);
  box-shadow: var(--agent-glow);
}

.cycle-card--tone-agent {
  border-color: var(--agent-line);
  background: var(--cycle-agent-bg);
}

.cycle-card--tone-brand {
  border-color: var(--brand-line);
  background: var(--cycle-brand-bg);
}

.cycle-card--tone-ok {
  border-color: var(--ok-line);
  background: var(--cycle-ok-bg);
}

.cycle-card--tone-warn {
  border-color: var(--warn-line);
  background: var(--cycle-warn-bg);
}

.cycle-card--tone-danger {
  border-color: var(--danger-line);
  background: var(--cycle-danger-bg);
}

.cycle-card__head,
.cycle-card__identity {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
}

.cycle-card__head {
  justify-content: space-between;
}

.cycle-card__identity {
  flex: 1 1 auto;
}

.cycle-card__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: var(--fs-11);
}

.cycle-card__title-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cycle-card__metric-value {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text);
}

.cycle-card__name,
.cycle-card__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cycle-card__name {
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--text);
}

.cycle-card__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cycle-muted);
}

.cycle-card__facts {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.cycle-card__facts .xw-fact {
  min-width: 0;
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line);
}

.cycle-card__facts .xw-fact:last-child {
  border-bottom: 0;
}

.cycle-card__facts .xw-fact__value {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cycle-dashboard__kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
}

.cycle-dashboard__kpi-strip .metric-card {
  border: 1px solid var(--cycle-card-border);
  border-radius: 0.75rem;
  background: var(--cycle-card-bg);
}

.cycle-dashboard__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--s-4);
  align-items: start;
  min-width: 0;
}

.cycle-dashboard__side {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.cycle-trace .xw-section__body {
  max-height: 560px;
  overflow: auto;
}

.cycle-trace__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
}

.cycle-trace__count,
.phase-indicator__status {
  font-size: var(--fs-11);
}

.cycle-trace__tabs {
  min-width: 0;
}

.cycle-trace__tabs .xw-tabs__tab {
  min-height: 2rem;
  padding-block: var(--s-1);
  padding-inline: var(--s-2);
  font-size: var(--fs-12);
}

.activity-feed__list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-feed__item {
  display: grid;
  grid-template-columns: minmax(62px, auto) auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: start;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.activity-feed__item--success {
  border-color: var(--ok-line);
}

.activity-feed__item--warning {
  border-color: var(--warn-line);
}

.activity-feed__item--error {
  border-color: var(--danger-line);
}

.activity-feed__time,
.activity-feed__category {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
}

.activity-feed__message {
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
}

.activity-feed__body {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.activity-feed__meta {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.activity-feed__category {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cycle-throughput-panel .xw-section__body,
.cycle-schedule-panel .xw-section__body,
.cycle-dashboard__runtime-details {
  display: grid;
  gap: var(--s-3);
}

.cycle-throughput-panel__rows {
  display: grid;
  gap: var(--s-3);
}

.cycle-throughput-panel__row {
  display: grid;
  gap: var(--s-1);
}

.cycle-throughput-panel__meta {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cycle-schedule-panel__list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cycle-schedule-panel__item {
  display: grid;
  grid-template-columns: minmax(56px, auto) auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.cycle-schedule-panel__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cycle-schedule-panel__time {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.cycle-schedule-panel__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cycle-schedule-panel__job {
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cycle-schedule-panel__agent {
  overflow: hidden;
  font-size: var(--fs-10);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-indicator .xw-section__body,
.progress-card .xw-section__body,
.cycle-history-panel .xw-section__body {
  display: grid;
  gap: var(--s-3);
}

.phase-indicator__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.phase-indicator__status {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-2);
}

.phase-indicator__timeline {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.timeline-item.active {
  border-color: var(--agent-line);
  background: var(--agent-soft);
}

.timeline-item.completed {
  border-color: var(--ok-line);
  background: color-mix(in srgb, var(--ok-soft) 74%, var(--surface-2) 26%);
}

.timeline-content {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.phase-name {
  overflow: hidden;
  font-size: var(--fs-13);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-progress,
.progress-card__value {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
}

.progress-card__value {
  align-self: center;
}

.progress-card__description {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.cycle-history-panel__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
}

.cycle-history-panel__chart {
  width: 100%;
  height: auto;
  max-height: 240px;
}

.cycle-history-panel__gradient-stop--start {
  stop-color: var(--cycle-chart-fill-start);
}

.cycle-history-panel__gradient-stop--end {
  stop-color: var(--cycle-chart-fill-end);
}

.cycle-history-panel__area {
  opacity: 90%;
}

.cycle-history-panel__line {
  stroke: var(--cycle-chart-line);
  stroke-width: 3;
}

.cycle-history-panel__axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

@media (width < 1180px) {
  .cycle-grid,
  .cycle-dashboard__kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cycle-dashboard__split {
    grid-template-columns: 1fr;
  }
}
@media (width < 680px) {
  .cycle-grid,
  .cycle-dashboard__kpi-strip,
  .phase-indicator__meta {
    grid-template-columns: 1fr;
  }
  .activity-feed__item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .activity-feed__time {
    grid-column: 1/-1;
  }
  .cycle-schedule-panel__item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-2);
  }
  .cycle-schedule-panel__time {
    grid-column: 1/-1;
  }
  .cycle-card,
  .activity-feed__item {
    padding: var(--s-3);
  }
}
.cycle-dashboard {
  --cycle-card-bg: color-mix(in srgb, var(--surface-1) 94%, transparent);
  --cycle-card-bg-strong: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --cycle-card-border: color-mix(in srgb, var(--line) 82%, var(--agent-line) 18%);
  --cycle-card-border-strong: color-mix(in srgb, var(--line-strong) 76%, var(--agent-line) 24%);
  --cycle-muted: var(--text-3);
  --cycle-subtle: var(--text-2);
  --cycle-agent-bg: linear-gradient(180deg, var(--agent-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-brand-bg: linear-gradient(180deg, var(--brand-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-ok-bg: linear-gradient(180deg, var(--ok-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-warn-bg: linear-gradient(180deg, var(--warn-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-danger-bg: linear-gradient(180deg, var(--danger-soft), transparent 78%), var(--cycle-card-bg);
  --cycle-chart-line: var(--agent);
  --cycle-chart-fill-start: color-mix(in srgb, var(--agent) 34%, transparent);
  --cycle-chart-fill-end: color-mix(in srgb, var(--agent) 4%, transparent);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Product editor layout */
.product-editor-page {
  padding: 1.1rem 1.4rem 2rem;
  color: var(--text-primary);
}

.product-editor__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.product-editor__header-main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-editor__heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
}

.product-editor__breadcrumb {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.product-editor__breadcrumb-link {
  color: inherit;
  text-decoration: none;
}

.product-editor__breadcrumb-link:hover {
  color: var(--text-primary);
}

.product-editor__breadcrumb-current {
  font-weight: 600;
  color: var(--text-primary);
}

.product-editor__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: flex-start;
  min-width: 0;
}

.product-editor__thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.product-editor__thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-editor__thumbnail-placeholder {
  font-size: 1.75rem;
  color: var(--text-muted);
}

.product-editor__title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.product-editor__title h1 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-editor__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  list-style: none;
}

.product-editor__meta-item {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.product-editor__meta-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.product-editor__meta-item--ean {
  gap: 0.45rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-primary);
}

.product-editor__ean-value {
  padding: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  color: inherit;
}

.product-editor__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.product-editor__copy-btn:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--text-primary);
}

.product-editor__meta-item + .product-editor__meta-item::before {
  content: "•";
  margin-right: 0.5rem;
  color: var(--text-muted);
}

.product-editor__actions {
  min-width: min(30rem, 48vw);
}

.product-editor__actions-secondary,
.product-editor__actions-primary {
  width: 100%;
}

.product-editor__action-btn {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.product-editor__action-text {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-editor__action-btn--save,
.product-editor__action-btn--push {
  justify-content: center;
  min-width: 9.5rem;
}

.product-editor__push-menu {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
}

.product-editor__menu-caret {
  display: inline-flex;
  margin-left: 0.35rem;
  opacity: 80%;
  font-size: 0.9rem;
}

.product-editor__menu {
  display: flex;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 240px;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.product-editor__menu-status {
  display: grid;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.product-editor__menu-status--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.product-editor__menu-status--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.product-editor__menu-status--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.product-editor__menu-status-copy {
  display: grid;
  gap: 0.22rem;
}

.product-editor__menu-status-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-editor__menu-status-copy strong {
  font-size: 0.96rem;
  color: var(--text-primary);
}

.product-editor__menu-status-copy p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.product-editor__menu-status-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.menu-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid transparent;
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-alt);
  font-size: 0.85rem;
  text-align: left;
  color: var(--text-primary);
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.menu-item:hover:not(:disabled) {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--text-primary);
}

.menu-item--primary {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  font-weight: 600;
  color: var(--color-primary);
}

.menu-item--disabled {
  cursor: not-allowed;
  opacity: 60%;
}

.menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 0.95rem;
}

.menu-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
}

.menu-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.menu-summary {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.menu-toggle {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: underline;
}

.menu-separator {
  height: 1px;
  margin: 0.25rem 0;
  background: var(--border-soft);
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
}

.product-editor__hint {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc((0.5rem + 0.75rem) / 2);
  color: var(--text-muted);
}
.product-editor__hint.hint--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.product-editor__hint.hint--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.product-editor__hint.hint--error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.product-editor__hint.hint--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.product-editor__hint .product-editor__hint-icon {
  display: inline-flex;
  align-items: center;
}

.product-editor__workspace-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.product-editor__workspace-card {
  min-height: 100%;
}

.product-editor__workspace-card--media {
  border-color: var(--color-info-border);
}

.product-editor__tabbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.product-editor__tablist {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.product-editor__tabbar-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.product-editor__tabpanel {
  display: block;
  margin-bottom: 2rem;
}

.editor-section {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.editor-section__header,
.editor-section__subheader {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.editor-section__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.editor-section__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.editor-section__toggle:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--text-on-brand);
}

.editor-section__content {
  margin-top: 0.5rem;
}

.editor-section__subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.editor-field-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-editor-page--focus .product-editor__tabbar {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
.product-editor-page--focus .editor-section {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.product-editor-page--focus .editor-field-stack {
  gap: 0.75rem;
}

.product-editor-page--standard {
  --product-editor-standard-panel: color-mix(in srgb, var(--surface) 92%, var(--surface-alt) 8%);
  --product-editor-standard-panel-muted: color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%);
  --product-editor-standard-accent: color-mix(in srgb, var(--color-primary) 72%, var(--color-info) 28%);
  --product-editor-standard-accent-bg: color-mix(in srgb, var(--color-primary-bg) 76%, var(--surface) 24%);
  --product-editor-standard-accent-border: color-mix(in srgb, var(--color-primary-border) 72%, var(--border-soft) 28%);
}

:root[data-theme=light] .product-editor-page--standard {
  --product-editor-standard-panel: #fff;
  --product-editor-standard-panel-muted: color-mix(in srgb, #f8fafc 84%, #eef6ff 16%);
  --product-editor-standard-accent: #2563eb;
  --product-editor-standard-accent-bg: rgb(37 99 235 / 8%);
  --product-editor-standard-accent-border: rgb(37 99 235 / 18%);
}

:root[data-theme=dark] .product-editor-page--standard {
  --product-editor-standard-panel: color-mix(in srgb, #0d1728 86%, #102033 14%);
  --product-editor-standard-panel-muted: color-mix(in srgb, #111b2d 78%, #0f2338 22%);
  --product-editor-standard-accent: #93c5fd;
  --product-editor-standard-accent-bg: rgb(37 99 235 / 16%);
  --product-editor-standard-accent-border: rgb(96 165 250 / 24%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .product-editor-page--standard {
    --product-editor-standard-panel: #fff;
    --product-editor-standard-panel-muted: color-mix(in srgb, #f8fafc 84%, #eef6ff 16%);
    --product-editor-standard-accent: #2563eb;
    --product-editor-standard-accent-bg: rgb(37 99 235 / 8%);
    --product-editor-standard-accent-border: rgb(37 99 235 / 18%);
  }
}
.product-editor-page--standard .product-editor__header {
  margin-bottom: 0.75rem;
  border-radius: 0.75rem;
  background: var(--product-editor-standard-panel);
}

.product-editor-page--standard .product-editor__header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, auto);
  gap: 0.9rem;
  align-items: start;
}

.product-editor-page--standard .product-editor__thumbnail {
  width: 66px;
  height: 66px;
  border-radius: 0.5rem;
}

.product-editor-page--standard .product-editor__title h1 {
  font-size: 1.24rem;
  line-height: 1.24;
}

.product-editor-page--standard .product-editor__details {
  gap: 0.35rem 0.7rem;
  font-size: 0.84rem;
}

.product-editor-page--standard .product-editor__meta-item--ean {
  padding: 0.16rem 0.48rem;
}

.product-editor-page--standard .product-editor__actions {
  min-width: min(28rem, 42vw);
}

.product-editor-page--standard .product-editor__actions-secondary,
.product-editor-page--standard .product-editor__actions-primary {
  gap: 0.42rem;
}

.product-editor-page--standard .product-editor__action-btn {
  min-height: 2.1rem;
}

.product-editor-page--standard .product-editor__action-btn--save,
.product-editor-page--standard .product-editor__action-btn--push {
  min-width: 8.6rem;
}

.product-editor-page--standard .product-editor__command-center {
  display: none;
  margin-top: 0.25rem;
}

.product-editor-page--standard .product-editor__command-grid.workspace-summary-grid--two {
  gap: 0.55rem;
}

.product-editor-page--standard .product-editor__command-grid .workspace-summary-card {
  gap: 0.48rem;
  padding: 0.68rem 0.75rem;
  border-color: var(--border-soft);
  border-radius: 0.75rem;
  background: var(--product-editor-standard-panel-muted);
  box-shadow: none;
}

.product-editor-page--standard .workspace-summary-card__header {
  align-items: center;
}

.product-editor-page--standard .workspace-summary-card__title {
  font-size: 0.9rem;
}

.product-editor-page--standard .workspace-summary-card__body {
  gap: 0.24rem;
}

.product-editor-page--standard :where(.workspace-summary-card, .workspace-card) p {
  font-size: 0.78rem;
}

.product-editor-page--standard .workspace-summary-card__actions {
  margin-top: 0.15rem;
}

.product-editor-page--standard .product-editor__tabbar {
  position: sticky;
  top: calc(var(--shell-header-height, 68px) + 0.35rem);
  z-index: 11;
  margin: 0 0 0.85rem;
  padding: 0.38rem;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--product-editor-standard-panel) 94%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.product-editor-page--standard .product-editor__tablist {
  flex-wrap: nowrap;
  gap: 0.28rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.product-editor-page--standard .editor-tab {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.42rem 0.68rem;
  border-color: transparent;
  border-radius: 0.5rem;
}

.product-editor-page--standard .editor-tab--active {
  border-color: var(--product-editor-standard-accent-border);
  background: var(--product-editor-standard-accent-bg);
  color: var(--product-editor-standard-accent);
}

.product-editor-page--standard .editor-tab--active::after {
  display: none;
}

.product-editor-page--standard .product-editor__tabpanel {
  outline: none;
}

.product-editor-page--standard .product-editor__form {
  gap: 0.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-editor-page--standard .product-editor__basics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.product-editor-page--standard .editor-section--basic-info {
  width: 100%;
}

.product-identity-panel {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface) 18%);
}

.product-identity-panel__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-identity-panel__eyebrow {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-identity-panel h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.product-identity-panel__intro,
.product-identity-panel__hint {
  margin: 0;
  color: var(--text-secondary);
}

.product-identity-panel__intro {
  max-width: 58rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.product-identity-panel__hint {
  font-size: 0.78rem;
}

.product-identity-panel__hint code {
  color: var(--text-primary);
}

.product-identity-panel__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(18rem, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.product-identity-ean-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.product-identity-ean-control__toggle {
  min-height: 2.75rem;
  white-space: nowrap;
}

.product-identity-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.72rem;
  padding: 0.85rem;
  border: 1px solid var(--color-warning-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-warning-bg) 86%, transparent);
  color: var(--text-primary);
}

.product-identity-warning > .app-icon,
.product-identity-warning > i {
  color: var(--color-warning);
}

.product-identity-warning strong {
  display: block;
  margin-bottom: 0.22rem;
}

.product-identity-warning p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.product-identity-warning__confirm {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 0.7rem;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.product-identity-warning__confirm input {
  margin-top: 0.15rem;
}

.product-editor-page--standard .editor-section--basic-info {
  padding: 1.1rem 1.25rem 1.25rem;
  overflow: hidden;
}

.product-editor-page--standard .editor-section--basic-info .editor-section__header {
  margin-bottom: 0.95rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.product-editor-page--standard .editor-section--basic-info .editor-section__content {
  margin-top: 0;
}

.product-editor-page--standard .editor-section--basic-info .editor-field-stack {
  gap: 0;
}

.product-editor-page--standard .editor-section--basic-info .product-identity-panel {
  gap: 0.8rem;
  padding: 0.15rem 0 1.05rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-editor-page--standard .editor-section--basic-info .product-identity-panel__header {
  align-items: center;
}

.product-editor-page--standard .editor-section--basic-info .product-identity-panel__intro {
  max-width: 64rem;
}

.product-editor-page--standard .editor-section--basic-info .product-identity-panel__grid {
  grid-template-columns: minmax(16rem, 0.8fr) minmax(18rem, 1fr);
  gap: 1rem;
}

.product-editor-page--standard .editor-section--basic-info .field-editor {
  gap: 0.58rem;
  padding: 1rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-editor-page--standard .editor-section--basic-info .product-identity-panel + .field-editor,
.product-editor-page--standard .editor-section--basic-info .field-editor + .field-editor {
  border-top: 1px solid var(--border-soft);
}

.product-editor-page--standard .editor-section--basic-info .product-identity-panel .field-editor {
  padding: 0;
  border-top: 0;
}

.product-editor-page--standard .editor-section--basic-info .field-editor__header {
  align-items: center;
}

.product-editor-page--standard .editor-section--basic-info .field-editor__description {
  max-width: 66rem;
}

.product-editor-page--standard .editor-section--basic-info .xw-text-field__input {
  min-height: 2.75rem;
  font-size: 1rem;
}

.product-editor-page--standard .editor-section--basic-info .html-editor {
  border-radius: 0.5rem;
  background: var(--surface);
}

.product-editor-page--standard .editor-section--basic-info .html-editor .ql-toolbar {
  padding: 0.5rem 0.7rem;
}

.product-editor-page--standard .editor-section--basic-info .html-editor .ql-container {
  min-height: 24rem;
}

.product-editor-page--standard .editor-section--basic-info .html-editor .ql-editor {
  min-height: 24rem;
  padding: 1.05rem 1.35rem;
  font-size: 0.98rem;
  line-height: 1.58;
}

.product-editor-standard-overview {
  display: grid;
  gap: 0.68rem;
  margin-bottom: 0.1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--product-editor-standard-panel);
  box-shadow: var(--shadow-sm);
}

.product-editor-standard-overview__header {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-editor-standard-overview__eyebrow {
  display: block;
  margin-bottom: 0.14rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-editor-standard-overview h2 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.product-editor-standard-overview p {
  margin: 0.16rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.product-editor-standard-overview__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--product-editor-standard-accent-border);
  border-radius: 999px;
  background: var(--product-editor-standard-accent-bg);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--product-editor-standard-accent);
}

.product-editor-standard-overview__checklist,
.product-editor-standard-overview__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-editor-standard-overview__checklist li {
  display: inline-flex;
  gap: 0.34rem;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--product-editor-standard-panel-muted);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.product-editor-standard-overview__checklist li.is-complete {
  border-color: color-mix(in srgb, var(--color-success-border) 70%, var(--border-soft) 30%);
  background: color-mix(in srgb, var(--color-success-bg) 72%, transparent);
  color: var(--text-primary);
}

.product-editor-standard-overview__checklist li.is-missing {
  border-color: color-mix(in srgb, var(--color-warning-border) 72%, var(--border-soft) 28%);
  background: color-mix(in srgb, var(--color-warning-bg) 70%, transparent);
  color: var(--text-primary);
}

.product-editor-standard-overview__icon {
  display: inline-flex;
  color: var(--color-success);
}

.product-editor-standard-overview__checklist li.is-missing .product-editor-standard-overview__icon {
  color: var(--color-warning);
}

.product-editor-standard-overview__signals {
  padding-top: 0.58rem;
  border-top: 1px solid var(--border-soft);
}

.product-editor-standard-overview__signal {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.24rem 0.52rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--product-editor-standard-panel-muted);
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.product-editor-standard-overview__signal strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--product-editor-standard-accent-bg);
  color: var(--product-editor-standard-accent);
}

.product-editor-standard-overview__signal--action {
  border-color: var(--product-editor-standard-accent-border);
  background: var(--product-editor-standard-accent-bg);
  color: var(--product-editor-standard-accent);
  cursor: pointer;
}

.product-editor-page--standard .editor-section {
  margin-bottom: 0;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--product-editor-standard-panel);
  box-shadow: var(--shadow-sm);
}

.product-editor-page--standard .editor-section__header,
.product-editor-page--standard .editor-section__subheader {
  margin-bottom: 0.8rem;
}

.product-editor-page--standard .field-editor {
  gap: 0.55rem;
  padding: 0.84rem;
  border-color: var(--border-soft);
  border-radius: 0.75rem;
  background: var(--product-editor-standard-panel-muted);
}

.product-editor-page--standard .field-editor__header {
  align-items: center;
}

.product-editor-page--standard .field-editor__label {
  color: var(--text-primary);
}

.product-editor-page--standard .field-editor__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.product-editor-page--standard .field-editor__description {
  font-size: 0.82rem;
}

.product-editor-page--standard .offer-management-panel {
  gap: 0.92rem;
}

.offer-management__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface) 18%);
}

.offer-management__eyebrow {
  display: block;
  margin-bottom: 0.14rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.offer-management__header h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.offer-management__header p {
  max-width: 62rem;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.product-editor-page--standard .offer-management__header {
  padding: 0 0 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}

.product-editor-page--standard .offer-management__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0 1.4rem;
  align-items: start;
  margin-bottom: 0;
}

.product-editor-page--standard .offer-section {
  padding: 1rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-editor-page--standard .offer-section--full {
  border-top: 1px solid var(--border-soft);
}

.product-editor-page--standard .offer-section:nth-child(n+3) {
  border-top: 1px solid var(--border-soft);
}

.product-editor-page--standard .offer-section__title {
  margin-bottom: 0.82rem;
  font-size: 0.98rem;
}

.product-editor-page--standard .offer-field {
  margin-bottom: 0.72rem;
}

.product-editor-page--standard .offer-field__label {
  margin-bottom: 0.38rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.product-editor-page--standard .offer-field__radio-group {
  gap: 0.45rem;
}

.product-editor-page--standard .offer-field__radio {
  gap: 0.55rem;
}

.product-editor-page--standard .offer-field__radio small {
  font-size: 0.76rem;
}

.product-editor-page--standard .offer-effective-card {
  min-height: auto;
  border-color: color-mix(in srgb, var(--border-soft) 78%, transparent);
  background: color-mix(in srgb, var(--product-editor-standard-panel-muted) 68%, transparent);
}

.product-editor-page--standard .offer-effective-card--accent {
  border-color: var(--product-editor-standard-accent-border);
  background: var(--product-editor-standard-accent-bg);
}

.product-editor-page--standard .price-calculator {
  gap: 0.44rem;
}

.product-editor-page--standard .price-calculator__row {
  grid-template-columns: minmax(9rem, 1fr) minmax(6.5rem, 0.62fr) minmax(8rem, 0.72fr);
  gap: 0.9rem;
  padding: 0.56rem 0;
}

.product-editor-page--standard .price-calculator__row--header {
  padding-top: 0.18rem;
  padding-bottom: 0.36rem;
}

.product-editor-page--standard .price-calculator__value,
.product-editor-page--standard .price-calculator__input {
  font-size: 0.9rem;
}

@media (width <= 1100px) {
  .product-editor-page--standard .product-editor__header-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor-page--standard .product-editor__actions {
    width: 100%;
    min-width: 0;
  }
  .product-editor-page--standard .product-editor__basics-grid,
  .product-editor-page--standard .offer-management__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor-page--standard .editor-section--basic-info .product-identity-panel__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor-page--standard .offer-section:nth-child(n+2) {
    border-top: 1px solid var(--border-soft);
  }
}
@media (width <= 720px) {
  .product-editor-page--standard .product-editor__meta {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.7rem;
  }
  .product-editor-page--standard .product-editor__thumbnail {
    width: 56px;
    height: 56px;
  }
  .product-editor-page--standard .product-editor__actions-secondary,
  .product-editor-page--standard .product-editor__actions-primary {
    width: 100%;
  }
  .product-editor-page--standard .product-editor__action-btn {
    flex: 1 1 8rem;
  }
  .product-editor-page--standard .editor-section--basic-info .product-identity-panel__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-editor-page--standard .editor-section--basic-info .product-identity-ean-control {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor-standard-overview__header {
    flex-direction: column;
  }
  .product-editor-standard-overview__badge {
    align-self: flex-start;
  }
  .product-editor-page--standard .price-calculator__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.36rem;
    align-items: start;
  }
  .product-editor-page--standard .price-calculator__label,
  .product-editor-page--standard .price-calculator__value {
    text-align: left;
  }
  .product-editor-page--standard .price-calculator__input-group,
  .product-editor-page--standard .price-calculator__input-stack {
    justify-items: start;
    justify-content: flex-start;
  }
}
/* Mission Control Phase 6.1a product canvas */
.workspace-shell--catalog-item {
  gap: 0;
  min-height: calc(100vh - var(--topbar-h, 56px));
  padding: 0;
  overflow: hidden;
}

.workspace-shell--catalog-item .catalog-item-frame__content,
.workspace-shell--catalog-item .workspace-viewport-guard__content {
  gap: 0;
  min-height: 0;
}

.workspace-shell--catalog-item .catalog-item-frame__content {
  flex: 1 1 auto;
}

.workspace-shell--catalog-item .feedback-state-view {
  min-height: 0;
}

.workspace-shell--catalog-item :where(.products-page--chat, .product-image-editor-page, .product-rules-page, .product-rules-studio-shell) {
  min-height: calc(100vh - var(--topbar-h, 56px));
}

.product-editor-page--mc {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h, 56px));
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

.product-editor-page--mc.product-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--topbar-h, 56px));
  min-height: 0;
  overflow: hidden;
}

.product-editor-page--mc.product-shell > .product-canvas {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-1);
}

.product-editor-page--mc .product-canvas > .product-editor__header.product-canvas__head {
  grid-row: 1;
}

.product-editor-page--mc .product-canvas > .product-editor__tabbar {
  grid-row: 2;
}

.product-editor-page--mc .product-canvas > .product-editor__tabpanel {
  grid-row: 3;
  overflow-y: auto;
}

.product-editor-page--mc.product-shell > .product-chat {
  grid-column: 2;
  grid-row: 1;
}

.product-editor-page--mc .product-editor__header.product-canvas__head {
  flex-shrink: 0;
  margin: 0;
  padding: 20px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: none;
}

.product-editor-page--mc .product-editor__header-main {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-editor-page--mc .product-editor__heading {
  flex: 1 1 30rem;
}

.product-editor-page--mc .product-editor__heading,
.product-editor-page--mc .product-editor__meta,
.product-editor-page--mc .product-editor__title {
  min-width: 0;
}

.product-editor-page--mc .product-editor__meta {
  display: block;
}

.product-editor-page--mc .product-editor__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-editor-page--mc .product-editor__title-line {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: min(100%, 44rem);
}

.product-editor-page--mc .product-editor__status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.product-editor-page--mc .product-editor__sku-line {
  font-size: var(--fs-11);
}

.product-editor-page--mc .product-editor__title h1 {
  margin: 0;
  font-size: var(--fs-28);
  font-weight: 650;
  letter-spacing: 0;
  line-height: var(--lh-tight);
  overflow-wrap: normal;
  word-break: normal;
  color: var(--text);
}

.product-editor-page--mc .product-editor__title h1:focus {
  outline: none;
}

.product-editor-page--mc .product-editor__title-help {
  flex: 0 0 auto;
  margin-top: 0.18rem;
}

.product-editor-page--mc .product-editor__details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.product-editor-page--mc .product-editor__meta-item + .product-editor__meta-item::before {
  content: none;
}

.product-editor-page--mc .product-editor__meta-item--ean {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-editor-page--mc .product-editor__copy-btn,
.product-editor-page--mc .product-editor__external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl-h-sm);
  height: var(--ctrl-h-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  text-decoration: none;
}

.product-editor-page--mc .product-editor__copy-btn:hover,
.product-editor-page--mc .product-editor__external-link:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.product-editor-page--mc .product-editor__actions {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.product-editor-page--mc .workspace-action-bar__actions,
.product-editor-page--mc .product-editor__actions-secondary,
.product-editor-page--mc .product-editor__actions-primary {
  display: flex;
  gap: 8px;
  align-items: center;
}

.product-editor-page--mc .workspace-action-bar__actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 100%;
}

.product-editor-page--mc .product-editor__actions-secondary,
.product-editor-page--mc .product-editor__actions-primary {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.product-editor-page--mc .product-editor__actions-secondary {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

.product-editor-page--mc .product-editor__action-btn {
  flex: 0 0 auto;
  min-height: var(--ctrl-h);
}

.product-editor-page--mc .product-editor__actions-secondary .product-editor__action-btn {
  width: var(--ctrl-h);
  min-width: var(--ctrl-h);
  padding-inline: 0;
}

.product-editor-page--mc .product-editor__actions-secondary .product-editor__action-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-editor-page--mc .product-editor__action-btn--save,
.product-editor-page--mc .product-editor__action-btn--push {
  min-width: auto;
}

.product-editor-page--mc .product-editor__tabbar {
  position: relative;
  z-index: 12;
  flex-shrink: 0;
  margin: 0;
  padding: 0 24px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: none;
}

.product-editor-page--mc .product-editor__tablist {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.product-editor-page--mc .product-editor__tablist::-webkit-scrollbar {
  display: none;
}

.product-editor-page--mc .editor-tab {
  display: inline-flex;
  position: relative;
  gap: 6px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
}

.product-editor-page--mc .product-editor__tab-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.product-editor-page--mc .product-editor__tab-badge--accent {
  color: var(--text-2);
}

.product-editor-page--mc .product-editor__tab-badge--warning {
  color: var(--warn);
}

.product-editor-page--mc .editor-tab:hover,
.product-editor-page--mc .editor-tab--active {
  background: transparent;
  color: var(--text);
}

.product-editor-page--mc .editor-tab--active::after {
  display: block;
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--brand);
  content: "";
}

.product-editor-page--mc .product-editor__tab-overflow {
  z-index: 20;
  align-self: stretch;
}

.product-editor-page--mc .product-editor__tab-overflow-trigger {
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
}

.product-editor-page--mc .product-editor__tab-overflow-trigger:hover,
.product-editor-page--mc .product-editor__tab-overflow.is-active .product-editor__tab-overflow-trigger {
  background: transparent;
  color: var(--text);
}

.product-editor-page--mc .product-editor__tab-overflow-menu {
  top: calc(100% + 6px);
  z-index: 30;
  border: 1px solid var(--line);
  background: var(--surface-elevated, var(--surface-2));
  box-shadow: var(--shadow-lg);
}

.product-editor-page--mc .product-editor__tab-overflow-item.is-active {
  background: var(--brand-soft);
  color: var(--text);
}

.product-editor-page--mc .product-editor__tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  outline: none;
}

.product-editor-page--mc .product-editor__form--mission-control {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-editor-page--mc .product-canvas__body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
}

.product-editor-page--mc .product-editor__media-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.product-editor-page--mc .product-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 12px), var(--surface-1);
  color: inherit;
}

.product-editor-page--mc .product-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-editor-page--mc .product-thumb__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 32px;
  color: var(--text-3);
}

.product-editor-page--mc .product-thumb__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.product-editor-page--mc .product-thumb-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.product-editor-page--mc .product-thumb-strip__item,
.product-editor-page--mc .product-thumb-strip__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--text-3);
}

.product-editor-page--mc .product-thumb-strip__item.is-primary {
  border-color: var(--brand-line);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

.product-editor-page--mc .product-thumb-strip__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-editor-page--mc .product-editor__basics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.product-editor-page--mc .editor-section {
  margin: 0;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: none;
}

.product-editor-page--mc .editor-section__header,
.product-editor-page--mc .editor-section__subheader {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.product-editor-page--mc .product-editor-basic-field-grid,
.product-editor-page--mc .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-editor-page--mc .field--full {
  grid-column: 1/-1;
}

.product-editor-page--mc .field-editor,
.product-editor-page--mc .product-identity-panel {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-editor-page--mc .field-editor__header {
  align-items: center;
}

.product-editor-page--mc .field-editor__label {
  font-size: var(--fs-12);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.product-editor-page--mc .field-editor__description,
.product-editor-page--mc .product-identity-panel__intro,
.product-editor-page--mc .product-identity-panel__hint {
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--text-3);
}

.product-editor-page--mc .product-identity-panel__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-editor-page--mc :where(.field-editor__body input:not([type=checkbox], [type=radio]), .field-editor__body textarea, .field-editor__body select, .xw-text-field__input, .xw-input, .xw-textarea) {
  min-height: var(--ctrl-h);
  border-color: var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-size: var(--fs-13);
  color: var(--text);
}

.product-editor-page--mc .editor-section--basic-info .html-editor {
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.product-editor-page--mc .editor-section--basic-info .html-editor .ql-container,
.product-editor-page--mc .editor-section--basic-info .html-editor .ql-editor {
  min-height: 16rem;
}

.product-editor-page--mc .product-editor-standard-overview {
  margin: 0;
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: none;
}

@media (width <= 1200px) {
  .product-editor-page--mc.product-shell {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--topbar-h, 56px));
    overflow: visible;
  }
  .product-editor-page--mc.product-shell > .product-canvas {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
  }
  .product-editor-page--mc .product-canvas > .product-editor__tabpanel {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }
  .product-editor-page--mc.product-shell > .product-chat {
    flex: 0 0 auto;
    max-height: 50vh;
  }
  .product-editor-page--mc .product-editor__header-main,
  .product-editor-page--mc .workspace-action-bar__actions {
    align-items: flex-start;
  }
  .product-editor-page--mc .product-editor__header-main {
    flex-direction: column;
  }
  .product-editor-page--mc .product-editor__actions {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }
  .product-editor-page--mc .product-editor__heading {
    flex: 0 1 auto;
  }
  .product-editor-page--mc .product-editor__title-line {
    max-width: 100%;
  }
  .product-editor-page--mc .product-editor__actions-secondary,
  .product-editor-page--mc .product-editor__actions-primary {
    justify-content: flex-start;
  }
}
@media (width <= 900px) {
  .product-editor-page--mc .product-canvas__body,
  .product-editor-page--mc .product-editor-basic-field-grid,
  .product-editor-page--mc .field-grid,
  .product-editor-page--mc .product-identity-panel__grid {
    grid-template-columns: 1fr;
  }
  .product-editor-page--mc .product-editor__title h1 {
    font-size: var(--fs-22);
  }
}
@media (width <= 640px) {
  .product-editor-page--mc .product-editor__header.product-canvas__head,
  .product-editor-page--mc .product-canvas__body {
    padding: 16px;
  }
  .product-editor-page--mc .product-editor__tabbar {
    padding: 0 16px;
  }
  .product-editor-page--mc .product-editor__actions-secondary,
  .product-editor-page--mc .product-editor__actions-primary,
  .product-editor-page--mc .product-editor__push-menu {
    width: 100%;
  }
  .product-editor-page--mc .product-editor__actions-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor-page--mc .product-editor__actions-primary .product-editor__action-btn {
    width: 100%;
    min-height: var(--ctrl-h);
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: 0 20px 45px -32px color-mix(in srgb, var(--brand) 30%, transparent);
}

.product-editor-sidebar__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-editor-sidebar__header h3 {
  margin: 0;
}

:where(.product-editor-sidebar__header) p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.product-editor-sidebar__docs {
  font-size: 0.85rem;
  color: var(--text-3);
  text-decoration: none;
}

.product-editor-sidebar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--agent-soft);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--agent-strong);
}

.product-editor-sidebar__docs:hover {
  color: var(--text-primary);
}

.product-editor-sidebar__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--text-muted);
}

.product-editor-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-editor-sidebar__summary {
  display: grid;
  gap: 0.85rem;
}

.product-editor-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-editor-sidebar__tag {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.84rem;
}

.product-editor-sidebar__tag strong {
  font-size: 0.75rem;
}

.product-editor-sidebar__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-alt);
}

.product-editor-sidebar__meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.product-editor-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0.75rem;
  background: var(--brand-soft);
  color: var(--color-primary);
}

.product-editor-sidebar__scope {
  display: block;
  font-weight: 600;
}

.product-editor-sidebar__timestamp {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.product-editor-sidebar__confidence {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.product-editor-sidebar__reason {
  font-size: 0.85rem;
  color: var(--text-3);
}

.product-editor-sidebar__problem {
  margin: 0;
  font-weight: 600;
}

.product-editor-sidebar__solution {
  margin: 0;
  color: var(--text-muted);
}

.product-editor-sidebar__preview {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.product-editor-sidebar__preview summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.product-editor-sidebar__preview-empty {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.product-editor-sidebar__preview dl {
  display: grid;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.product-editor-sidebar__preview-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.55fr) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.product-editor-sidebar__preview dt {
  margin: 0;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-editor-sidebar__preview dd {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.product-editor-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.product-editor-sidebar--summary .product-editor-sidebar__actions {
  justify-content: flex-start;
}

.product-editor-sidebar--summary .product-editor-sidebar__empty {
  padding-top: 0.1rem;
}

.ai-scope-card__reason,
.pricing-advice__reason,
.campaign-advice__reason,
.content-advice__reason {
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-3);
}

.ai-scope-card__docs {
  display: inline-flex;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-3);
  text-decoration: none;
}

.ai-scope-card__docs:hover {
  color: var(--text-primary);
}

.product-editor__loading,
.product-editor__error,
.product-editor__empty {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--text-muted);
}

.product-editor__error {
  border-color: var(--danger-line);
  color: var(--danger);
}

.product-editor__muted {
  color: var(--text-muted);
}

.field-editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-alt);
  box-shadow: none;
}

.field-editor__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.field-editor__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.field-editor__actions {
  display: flex;
  gap: 0.5rem;
}

.field-inheritance-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.field-editor__description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

:where(.product-editor-page .xw-input),
:where(.product-editor-page .xw-textarea),
:where(.product-editor-page .category-picker__input),
:where(.product-editor-page .image-gallery__form .xw-input),
:where(.product-editor-page .field-editor__body input:not([type=checkbox], [type=radio])),
:where(.product-editor-page .field-editor__body textarea),
:where(.product-editor-page .field-editor__body select) {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

:where(.product-editor-page .xw-input)::-moz-placeholder, :where(.product-editor-page .xw-textarea)::-moz-placeholder, :where(.product-editor-page .category-picker__input)::-moz-placeholder, :where(.product-editor-page .image-gallery__form .xw-input)::-moz-placeholder, :where(.product-editor-page .field-editor__body input:not([type=checkbox], [type=radio]))::-moz-placeholder, :where(.product-editor-page .field-editor__body textarea)::-moz-placeholder {
  color: var(--text-muted);
}

:where(.product-editor-page .xw-input)::placeholder,
:where(.product-editor-page .xw-textarea)::placeholder,
:where(.product-editor-page .category-picker__input)::placeholder,
:where(.product-editor-page .image-gallery__form .xw-input)::placeholder,
:where(.product-editor-page .field-editor__body input:not([type=checkbox], [type=radio]))::placeholder,
:where(.product-editor-page .field-editor__body textarea)::placeholder {
  color: var(--text-muted);
}

:where(.product-editor-page .xw-input:focus),
:where(.product-editor-page .xw-textarea:focus),
:where(.product-editor-page .category-picker__input:focus),
:where(.product-editor-page .image-gallery__form .xw-input:focus),
:where(.product-editor-page .field-editor__body input:not([type=checkbox], [type=radio]):focus),
:where(.product-editor-page .field-editor__body textarea:focus),
:where(.product-editor-page .field-editor__body select:focus) {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.field-editor__body {
  width: 100%;
  min-width: 0;
}

.field-editor__suggestion {
  margin-top: 0.15rem;
}

:where(.field-editor__body .xw-input),
:where(.field-editor__body .xw-textarea),
:where(.field-editor__body input:not([type=checkbox], [type=radio])),
:where(.field-editor__body textarea),
:where(.field-editor__body select) {
  display: block;
  width: 100%;
  max-width: 100%;
}

.field-editor__body textarea {
  resize: vertical;
  min-height: 160px;
}

.field-editor__limit {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field-editor__limit--warning {
  color: var(--danger);
}

.product-editor__notifications {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--danger-line);
  border-radius: 1rem;
  background: var(--surface-alt);
}

.product-editor__notifications-title {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  font-weight: 700;
  color: var(--danger);
}

.product-editor__notifications-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-muted);
}

.product-editor__category-inheritance {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

.field-editor__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field-editor__scope {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-weight: 600;
  color: var(--brand-strong);
}

.field-editor__error,
.field-error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--danger);
}

.field-editor__source,
.field-editor__confidence {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.tag-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tag-input__label {
  font-weight: 600;
}

.tag-input__container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
}

.tag-input__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-input__item {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--text);
}

.tag-input__remove {
  border: none;
  background: none;
  font-size: 0.8rem;
  color: inherit;
  cursor: pointer;
}

.tag-input__field {
  flex: 1 1 auto;
  min-width: 180px;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.tag-input__description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tag-input__add {
  flex-shrink: 0;
}

.category-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
}

.category-picker__select,
.category-picker__input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line-vivid);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-primary);
}

.category-picker__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-picker__suggestions-title {
  width: 100%;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.category-picker__suggestion {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--text);
  cursor: pointer;
}

.image-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
}

.image-gallery__empty {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  padding: 2rem;
  border: 1px dashed var(--line-vivid);
  border-radius: 0.75rem;
  color: var(--text-muted);
}

.image-gallery__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-gallery__item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
}

.image-gallery__item.primary {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
}

.image-gallery__item img {
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.75rem;
  background: var(--brand-soft);
}

.image-gallery__badge {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.75rem;
}

.image-gallery__fields {
  display: grid;
  gap: 0.5rem;
}

.image-gallery__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.image-gallery__controls {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.image-gallery__controls .action-btn {
  min-width: 34px;
  height: 34px;
  border-radius: 0.5rem;
}

.image-gallery__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: end;
}

.product-editor__dimensions {
  padding: 1.25rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
}

.dimension-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.dimension-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.dimension-grid input {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-primary);
}

.product-editor__specs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
}

.product-editor__specs header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-editor__specs-table {
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--surface);
  border-collapse: collapse;
}

.product-editor__specs-table th,
.product-editor__specs-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.product-editor__specs-table input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--line-vivid);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-primary);
}

.product-editor__specs-empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  color: var(--text-muted);
}

.product-summary,
.ai-recommendations {
  padding: 1.5rem;
  border: 1px solid var(--line-vivid);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: 0 25px 50px -20px color-mix(in srgb, var(--brand) 35%, transparent);
}

.product-summary h2,
.ai-recommendations h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.ai-scope-filter {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.ai-scope-filter__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ai-scope-filter__select {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-vivid);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.product-summary__list {
  display: grid;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  grid-template-columns: max-content 1fr;
}

.product-summary__list dt {
  font-weight: 600;
  color: var(--text-primary);
}

.product-summary__list dd {
  margin: 0;
  color: var(--text-2);
}

.summary-card {
  padding: 1.5rem 2rem;
  border: 1px solid var(--muted-line);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent);
}

.summary-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
}

.summary-card__grid dt {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.summary-card__grid dd {
  margin: 0.15rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.push-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.push-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface);
}

.push-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.push-card__status {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.8rem;
}

.push-card--success {
  border-color: var(--ok-line);
}

.push-card--error {
  border-color: var(--danger-line);
}

.push-card--empty {
  text-align: center;
  color: var(--text-muted);
}

.ai-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (width <= 640px) {
  .product-summary__list {
    grid-template-columns: 1fr;
  }
  .product-summary__list dd {
    padding-left: 0;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.html-editor {
  overflow: hidden;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.html-editor:focus-within {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

.html-editor .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-alt);
  color: var(--text-secondary);
}

.html-editor .ql-snow .ql-stroke,
.html-editor .ql-snow .ql-thin,
.html-editor .ql-snow .ql-stroke-miter {
  stroke: currentcolor !important;
}

.html-editor .ql-snow .ql-fill {
  fill: currentcolor !important;
}

.html-editor .ql-toolbar button,
.html-editor .ql-toolbar .ql-picker-label,
.html-editor .ql-toolbar .ql-picker-item {
  color: inherit;
}

.html-editor .ql-toolbar button svg {
  stroke: currentcolor;
  fill: none;
}

.html-editor .ql-toolbar .ql-picker {
  color: inherit;
}

:where(.content-advice__issues) ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--text-primary);
}

.content-advice__solution {
  margin: 0;
}

.content-advice__metadata {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-3);
}

.html-editor .ql-toolbar button:hover,
.html-editor .ql-toolbar button.ql-active,
.html-editor .ql-toolbar .ql-picker-label:hover,
.html-editor .ql-toolbar .ql-picker-label.ql-active {
  color: var(--brand);
}

.html-editor .ql-container {
  border: none !important;
  background: transparent;
}

.html-editor .ql-editor {
  min-height: 220px;
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-primary);
}

:where(.html-editor .ql-editor) p,
:where(.html-editor .ql-editor) ul,
:where(.html-editor .ql-editor) ol {
  margin-bottom: 0.75rem;
}

.html-editor .ql-editor.ql-blank::before {
  color: var(--text-3);
  font-style: normal;
}

.html-editor .ql-picker-options {
  border: 1px solid var(--border-soft);
  background: var(--dropdown-bg);
  color: var(--text-primary);
}

.html-editor--disabled {
  opacity: 70%;
}

.html-editor--disabled .ql-editor {
  pointer-events: none;
}

.product-editor-page .html-editor {
  border-color: var(--line);
  background: var(--surface-alt);
  box-shadow: none;
}

.product-editor-page .html-editor .ql-toolbar {
  background: transparent;
}

.product-editor-page .html-editor .ql-toolbar + .ql-toolbar {
  display: none;
}

.field-suggestion {
  display: grid;
  gap: 0.5rem;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-success-border);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--color-success-bg);
}

.field-suggestion__header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.field-suggestion__badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.25);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-success);
}

.field-suggestion__apply {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}

.field-suggestion__apply input {
  width: 1rem;
  height: 1rem;
  accent-color: #22c55e;
}

.field-suggestion__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.field-ai-suggestion {
  display: grid;
  gap: 0.55rem;
  margin-top: -0.25rem;
  padding: 0.65rem 0.72rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.75rem;
  background: var(--brand-soft);
}

.field-ai-suggestion--media {
  margin-top: -0.15rem;
  margin-bottom: 0.2rem;
}

.field-ai-suggestion--compact {
  padding: 0.6rem 0.65rem;
}

.field-ai-suggestion--embedded {
  margin-top: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.field-ai-suggestion__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.field-ai-suggestion__scope {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.field-ai-suggestion__confidence {
  font-size: 0.74rem;
  color: var(--text-muted);
}

:where(.field-ai-suggestion) .recommendation-comparison__row {
  padding: 0.45rem 0.52rem;
}

:where(.field-ai-suggestion) .recommendation-comparison__field {
  font-size: 0.72rem;
}

:where(.field-ai-suggestion) .recommendation-comparison__value p {
  font-size: 0.75rem;
}

:where(.field-ai-suggestion--embedded) .recommendation-comparison__header {
  display: none;
}

:where(.field-ai-suggestion--embedded) .recommendation-comparison__row {
  gap: 0.28rem;
  padding: 0.32rem 0.4rem;
}

.field-ai-suggestion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.ai-scope-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.ai-scope-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-scope-card__title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.ai-scope-card__icon {
  font-size: 1.3rem;
}

.ai-scope-card__recommendations {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-scope-card__recommendation {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface);
}

.ai-scope-card__summary {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ai-scope-card__apply {
  align-self: flex-start;
}

.ai-scope-card__empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.ai-scope-card__empty .app-icon {
  font-size: 1rem;
  color: var(--text-3);
}

.ai-scope-card__data {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.ai-scope-card__data div,
.ai-scope-card__data-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.58fr) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.ai-scope-card__data dt {
  margin: 0;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ai-scope-card__data dd {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.ai-scope-card__problem {
  margin: 0;
  font-weight: 600;
}

.ai-scope-card__solution {
  margin: 0;
  color: var(--text-3);
}

.pricing-advice__metrics,
.campaign-advice__metrics {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pricing-advice__metrics div,
.campaign-advice__metrics div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.pricing-advice__summary,
.campaign-advice__summary,
.content-advice__summary {
  margin: 0;
  font-weight: 600;
}

.pricing-advice__impact {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-3);
}

.keyword-recommendations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.keyword-recommendations li {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.85rem;
}

.keyword-recommendations__empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.keyword-recommendations__empty .app-icon {
  font-size: 0.95rem;
  color: var(--text-3);
}

.capability-indicator__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: currentcolor;
}

.capability-indicator--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.capability-indicator--stale {
  background: var(--warn-soft);
  color: var(--warn);
}

.capability-indicator--error {
  background: var(--danger-soft);
  color: var(--danger);
}

.capability-indicator--unknown {
  background: var(--muted-soft);
  color: var(--text-2);
}

.capability-indicator__details {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-3);
}

.capability-indicator__reason {
  display: block;
  margin-top: 0.25rem;
}

@media (width <= 768px) {
  .product-editor-page {
    padding: 0.65rem 0.55rem 1.3rem;
  }
  .product-editor__header {
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
  }
  .product-editor__header-main {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .product-editor__actions {
    align-items: stretch;
    width: 100%;
    min-width: 100%;
  }
  .product-editor__actions-secondary,
  .product-editor__actions-primary {
    justify-content: flex-start;
  }
  .product-editor__action-btn {
    flex: 1 1 calc(50% - 0.25rem);
  }
  .product-editor__action-btn--save,
  .product-editor__action-btn--push {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
  .product-editor__workspace-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor__tabbar-tools {
    width: 100%;
    margin-left: 0;
  }
  .product-editor__form {
    gap: 0.85rem;
    padding: 0.7rem;
    border-radius: 1rem;
  }
  .editor-section {
    margin-bottom: 0.85rem;
    padding: 0.8rem;
    border-radius: 1rem;
  }
  .editor-section__header,
  .editor-section__subheader {
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
  }
  .field-editor {
    padding: 0.75rem;
    border-radius: calc((0.75rem + 1rem) / 2);
  }
  .field-editor__header {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .field-editor__actions {
    justify-content: flex-start;
    width: 100%;
  }
  .field-editor__body textarea {
    min-height: 130px;
  }
  .image-gallery__item {
    grid-template-columns: 1fr;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Product List Layout */
.product-list-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 2rem 2.5rem;
  color: var(--text);
}

.product-list__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.product-list__title {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.product-list__title h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
}

.product-list__subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--text-2);
}

.product-list__controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Filter Panel */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-1);
  box-shadow: 0 25px 50px -25px color-mix(in srgb, var(--brand) 35%, transparent);
}

.filter-panel__header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.filter-panel__title {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-on-brand);
}

.filter-panel__actions {
  display: flex;
  gap: 0.5rem;
}

.filter-panel__body {
  display: grid;
  gap: 1.25rem;
}

.filter-panel__body--collapsed {
  display: none;
}

.filter-panel__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Filter Sections */
.filter-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter-section__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.filter-section__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-section__checkbox {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-vivid);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.filter-section__checkbox:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: var(--brand-soft);
}

.filter-section__checkbox--active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--text);
}

.filter-section__checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.filter-search {
  position: relative;
}

.filter-search__input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 1rem;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-search__input:focus {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  outline: none;
}

.filter-search__icon {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.filter-select {
  padding: 0.65rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.95rem;
  color: var(--text-primary);
  cursor: pointer;
}

.filter-select:focus {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  outline: none;
}

/* Active Filters */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-alt);
}

.active-filters__label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.active-filter-tag {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.85rem;
  color: var(--text);
}

.active-filter-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.25rem;
  border: none;
  border-radius: 999px;
  background: var(--muted-line);
  font-size: 0.7rem;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.active-filter-tag__remove:hover {
  background: color-mix(in srgb, var(--danger) 45%, transparent);
}

.bulk-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.scoped-product-list--mission-control .xw-bulkbar.product-bulk-actions {
  bottom: max(24px, env(safe-area-inset-bottom));
}

.scoped-product-list--mission-control .product-bulk-actions .bulk-action-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.scoped-product-list--mission-control .bulk-actions-panel__dialog {
  position: fixed;
  right: 24px;
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 64px);
  z-index: 90;
  width: min(420px, 100vw - 32px);
}

.scoped-product-list--mission-control .bulk-dialog {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}

.scoped-product-list--mission-control .bulk-dialog__header,
.scoped-product-list--mission-control .bulk-dialog__footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.scoped-product-list--mission-control .bulk-dialog__footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.scoped-product-list--mission-control .bulk-dialog__header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.scoped-product-list--mission-control .bulk-dialog__close,
.scoped-product-list--mission-control .bulk-dialog__close.btn.xw-btn,
.scoped-product-list--mission-control .bulk-result__close,
.scoped-product-list--mission-control .bulk-result__close.btn.xw-btn {
  display: inline-grid;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--muted-soft);
  color: var(--text-2);
  place-items: center;
  cursor: pointer;
}

.scoped-product-list--mission-control .bulk-dialog__footer .xw-btn {
  min-width: 88px;
}

.scoped-product-list--mission-control .bulk-dialog__body {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  color: var(--text-2);
}

.scoped-product-list--mission-control .bulk-dialog__body p {
  margin: 0;
}

.scoped-product-list--mission-control .bulk-dialog__field {
  display: grid;
  gap: 0.375rem;
}

.scoped-product-list--mission-control .bulk-dialog__field label,
.scoped-product-list--mission-control .bulk-dialog__hint {
  font-size: 12px;
  color: var(--text-3);
}

.scoped-product-list--mission-control .bulk-dialog__input-group {
  display: flex;
  align-items: center;
}

.scoped-product-list--mission-control .bulk-dialog__input-prefix,
.scoped-product-list--mission-control .bulk-dialog__input-suffix {
  display: inline-grid;
  height: 28px;
  padding: 0 0.375rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-3);
  place-items: center;
}

.scoped-product-list--mission-control .bulk-dialog__checkboxes {
  display: grid;
  gap: 0.375rem;
  max-height: 170px;
  overflow: auto;
}

.scoped-product-list--mission-control .bulk-dialog__checkbox {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--text-2);
}

.scoped-product-list--mission-control .bulk-actions-panel__result {
  display: flex;
  position: fixed;
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 64px);
  left: 50%;
  z-index: 91;
  gap: 0.5rem;
  align-items: center;
  max-width: min(560px, 100vw - 32px);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
  color: var(--text-2);
  transform: translateX(-50%);
}

.scoped-product-list--mission-control .bulk-result__stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

@media (width <= 720px) {
  .scoped-product-list--mission-control .product-bulk-actions .bulk-action-group {
    flex-wrap: wrap;
  }
  .scoped-product-list--mission-control .bulk-actions-panel__dialog {
    right: 12px;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px);
    left: 12px;
    width: auto;
  }
  .scoped-product-list--mission-control .bulk-actions-panel__result {
    right: 12px;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px);
    left: 12px;
    max-width: none;
    border-radius: var(--r-md);
    transform: none;
  }
}
/* Product Selection */
.product-card--selectable {
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card--selectable:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.product-card--selected {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent);
}

.product-card__checkbox {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
}

.product-card__checkbox input[type=checkbox] {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--line-vivid);
  border-radius: calc(0.5rem / 2);
  background: var(--surface-inset);
  cursor: pointer;
  accent-color: var(--brand);
}

/* View Mode Toggle */
.view-mode-toggle {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line-vivid);
  border-radius: 0.75rem;
  background: var(--surface);
}

.view-mode-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.view-mode-toggle__btn:hover {
  background: var(--muted-soft);
  color: var(--text-primary);
}

.view-mode-toggle__btn--active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* Product Table View */
.product-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  border-collapse: separate;
  border-spacing: 0;
}

.product-table th,
.product-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--surface-alt);
  text-align: left;
}

.product-table th {
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.product-table tbody tr {
  transition: background-color 0.2s ease;
}

.product-table tbody tr:hover {
  background: var(--brand-soft);
}

:where(.product-table tbody tr:last-child td) {
  border-bottom: none;
}

.product-table__row--selected {
  background: var(--brand-soft);
}

.product-table__checkbox {
  width: 3rem;
  text-align: center;
}

.product-table__image {
  width: 4rem;
}

.product-table__image img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
  background: var(--surface-alt);
}

.product-table__title {
  font-weight: 500;
  color: var(--text-primary);
}

.product-table__sku {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--text-2);
}

.product-table__price {
  font-weight: 600;
  color: var(--ok);
}

.product-table__stock {
  font-weight: 500;
}

.product-table__stock--low {
  color: var(--warn);
}

.product-table__stock--out {
  color: var(--danger);
}

.product-table__status {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.product-table__status--published {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.product-table__status--draft {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.product-table__status--unpublished {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.product-table__col-sync {
  width: 120px;
  min-width: 100px;
}

.product-table__sync {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sync-conflict-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--color-danger-border);
  border-radius: 999px;
  background: var(--color-danger-bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-danger);
}

.sync-channel-count {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-pill-muted-border);
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  color: var(--color-pill-muted);
}

.product-table__actions {
  display: flex;
  gap: 0.35rem;
}

/* Results Summary */
.results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--surface-alt);
}

.results-summary__text {
  font-size: 0.95rem;
  color: var(--text-2);
}

:where(.results-summary__text) strong {
  font-weight: 600;
  color: var(--text);
}

.results-summary__sort {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.results-summary__sort-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Empty State */
.product-list__empty {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 3rem 2rem;
  border: 1px dashed var(--line-vivid);
  border-radius: 1.5rem;
  background: var(--surface-inset);
  text-align: center;
}

.product-list__empty-icon {
  font-size: 3rem;
  color: var(--text-4);
}

.product-list__empty-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.product-list__empty-text {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

/* Responsive */
@media (width <= 768px) {
  .filter-panel__row {
    grid-template-columns: 1fr;
  }
  .product-table {
    display: block;
    overflow-x: auto;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   OFFER MANAGEMENT PANEL
   ========================================================================== */
.offer-management-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.offer-management-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.offer-management-panel__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.25rem;
}

.channel-card {
  padding: 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.channel-card:hover {
  border-color: var(--line-vivid);
}

.channel-card--expanded {
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--brand) 20%, transparent);
}

.channel-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  cursor: pointer;
}

.channel-card__info {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.channel-card__logo {
  font-size: 1.5rem;
}

.channel-card__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.channel-card__status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge--published {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--draft {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-badge--unpublished {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}

.status-badge--error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.channel-card__expand {
  border: none;
  background: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.channel-card__expand--expanded {
  transform: rotate(180deg);
}

.channel-card__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--surface-alt);
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-item__label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.summary-item__value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.channel-card__details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-alt);
}

.detail-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.detail-row__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
}

.detail-row__input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.detail-row__input input,
.detail-row__input select {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-vivid);
  border-radius: 0.5rem;
  background: var(--surface-inset);
  font-size: 0.95rem;
  color: var(--text-primary);
}

:where(.detail-row__input input:focus),
:where(.detail-row__input select:focus) {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
}

.margin-calculator {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
  font-size: 0.85rem;
}

.margin-calculator__value {
  font-weight: 600;
  color: var(--ok);
}

.margin-calculator__value--negative {
  color: var(--danger);
}

.sync-status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
}

.sync-status__icon {
  font-size: 1rem;
}

.sync-status__text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sync-status--error {
  background: var(--danger-soft);
}

.sync-status--error .sync-status__text {
  color: var(--danger);
}

.channel-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-alt);
}

.channel-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-vivid);
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.channel-btn--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--text-on-brand);
}

.channel-btn--primary:hover:not(:disabled) {
  background: var(--brand-strong);
}

.channel-btn:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.channel-btn:hover:not(:disabled) {
  background: var(--surface-alt);
}

/* ==========================================================================
   COMPETITORS PANEL
   ========================================================================== */
.competitors-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.competitors-panel__tabs {
  display: flex;
  gap: 0.5rem;
}

.competitors-tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.competitors-tab:hover {
  background: var(--muted-soft);
}

.competitors-tab--active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.competitors-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
}

.competitors-table {
  width: 100%;
  border-collapse: collapse;
}

.competitors-table__header {
  padding: 1rem;
  border-bottom: 1px solid var(--surface-alt);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-3);
}

.competitors-table__header--sortable {
  -webkit-user-select: none;
     -moz-user-select: none;
}

.competitors-table__sort-button {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.competitors-table__sort-button:hover {
  color: var(--text-2);
}
.competitors-table__sort-button:focus-visible {
  outline: none;
  border-radius: calc(0.5rem * 3 / 4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.sort-indicator {
  margin-left: 0.25rem;
  font-size: 0.7rem;
}

.competitors-table__cell {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.competitors-table__row--own {
  background: var(--brand-soft);
}

.competitors-table__row--own .competitors-table__cell {
  border-bottom-color: var(--brand-line);
}

.competitors-table__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-3);
}

.competitors-table__empty-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.seller-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.seller-info__link {
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
}

.seller-info__link:hover {
  text-decoration: underline;
}

.seller-info__icon {
  font-size: 0.75rem;
}

.seller-info__name {
  font-weight: 500;
}

.seller-info__meta {
  font-size: 0.8rem;
  color: var(--text-3);
}

.separator {
  margin: 0 0.35rem;
}

.rating-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rating-badge {
  display: inline-flex;
  padding: 0.2rem 0.5rem;
  border-radius: calc(0.5rem / 2);
  font-size: 0.85rem;
  font-weight: 600;
}

/* 4-step rating scale mapped to distinct semantic tokens (lime "good" → info
   to keep a hue between green excellent and amber average) — categorical recolor. */
.rating-badge--excellent {
  background: var(--ok-soft);
  color: var(--ok);
}

.rating-badge--good {
  background: var(--info-soft);
  color: var(--info);
}

.rating-badge--average {
  background: var(--warn-soft);
  color: var(--warn);
}

.rating-badge--poor {
  background: var(--danger-soft);
  color: var(--danger);
}

.rating-count {
  font-size: 0.75rem;
  color: var(--text-3);
}

.rating-none {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-4);
}

.rating-none__icon {
  font-size: 0.9rem;
}

.price {
  font-size: 1.05rem;
  font-weight: 600;
}

.price--own {
  color: var(--brand);
}

.price-diff {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

.price-diff--higher {
  color: var(--ok);
}

.price-diff--lower {
  color: var(--danger);
}

.delivery-info {
  font-size: 0.9rem;
}

.condition-badge {
  padding: 0.2rem 0.5rem;
  border-radius: calc(0.5rem / 2);
  background: var(--surface-alt);
  font-size: 0.8rem;
}

.buybox-badge {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 1.25rem;
}

.buybox-badge__country {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--warn);
}

.price-insights {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--surface);
}

.price-insight {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
}

.price-insight--best {
  background: var(--ok-soft);
}

.price-insight__label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.price-insight__value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.buybox-analysis {
  padding: 1.25rem;
  border: 1px solid var(--warn-line);
  border-radius: 0.75rem;
  background: var(--warn-soft);
}

.buybox-analysis__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--warn);
}

.buybox-analysis__content p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.buybox-analysis__tip {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--warn-soft);
}

.buybox-analysis__success {
  color: var(--ok);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   SALES INSIGHTS PANEL
   ========================================================================== */
.sales-insights-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sales-insights-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sales-insights-panel__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.period-selector {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: var(--surface);
}

.period-btn {
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: calc(0.5rem * 3 / 4);
  background: transparent;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.period-btn:hover {
  color: var(--text-primary);
}

.period-btn--active {
  background: var(--color-primary);
  color: var(--text-on-brand);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.metrics-grid .stat-card.metric-stat-card {
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 128px;
  padding: 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  text-align: left;
}

.metrics-grid .metric-stat-card .stat-card__icon {
  margin-bottom: 0.75rem;
  font-size: 2rem;
}

:where(.metrics-grid .metric-stat-card) .stat-card__value {
  margin-bottom: 0.15rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

:where(.metrics-grid .metric-stat-card) .stat-card__label {
  font-size: 0.85rem;
  color: var(--text-3);
}

.metrics-grid .metric-stat-card .stat-card__footer {
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.metric-stat-card__trend {
  font-size: 0.8rem;
  font-weight: 600;
}

.metric-stat-card__trend--positive {
  color: var(--ok);
}

.metric-stat-card__trend--negative {
  color: var(--danger);
}

.metric-stat-card__trend--neutral {
  color: var(--text-3);
}

.section-title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-2);
}

.conversion-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.conversion-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.funnel-step {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.funnel-step__bar {
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  background: var(--brand-soft);
  transition: width 0.5s ease;
}

.funnel-step__bar--highlight {
  background: var(--ok-soft);
}

.funnel-step__value {
  font-weight: 600;
  color: var(--text-primary);
}

.funnel-step__label {
  flex-shrink: 0;
  width: 160px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.conversion-rates {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--surface-alt);
}

.conversion-rate {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
  text-align: center;
}

.conversion-rate--primary {
  background: var(--brand-soft);
}

.conversion-rate__label {
  font-size: 0.8rem;
  color: var(--text-3);
}

.conversion-rate__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.channel-breakdown-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.channel-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.channel-row {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
}

.channel-row__info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.channel-row__logo {
  font-size: 1.25rem;
}

.channel-row__name {
  font-weight: 500;
  color: var(--text-2);
}

.channel-row__metrics {
  display: flex;
  gap: 1.5rem;
}

.channel-metric {
  display: flex;
  flex-direction: column;
}

.channel-metric__value {
  font-weight: 600;
  color: var(--text-primary);
}

.channel-metric__label {
  font-size: 0.75rem;
  color: var(--text-3);
}

.channel-row__bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-alt);
}

.channel-row__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--agent));
  transition: width 0.5s ease;
}

.channel-breakdown__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-3);
}

.buybox-performance-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.buybox-stats {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.buybox-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.buybox-stat__circle {
  position: relative;
  width: 100px;
  height: 100px;
}

.buybox-stat__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.buybox-stat__bg {
  fill: none;
  stroke: var(--border-soft);
  stroke-width: 3;
}

.buybox-stat__fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
}

.buybox-stat__value {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  transform: translate(-50%, -50%);
}

.buybox-stat__label {
  font-size: 0.85rem;
  color: var(--text-3);
}

.buybox-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.buybox-detail {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.buybox-detail__label {
  color: var(--text-3);
}

.buybox-detail__value {
  font-weight: 500;
  color: var(--text-2);
}

.performance-tips {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tip-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
}

.tip-card--high {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.tip-card--medium {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.tip-card__icon {
  font-size: 1.5rem;
}

.tip-card__content {
  flex: 1;
}

.tip-card__text {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.tip-card__action {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
}

.tip-card__action:hover {
  text-decoration: underline;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   SEO IMPACT PANEL
   ========================================================================== */
.seo-impact-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.seo-impact-panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.seo-impact-panel__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

.seo-impact-panel__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--text-3);
}

.seo-impact-panel__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.seo-impact-panel__period {
  font-weight: 600;
  color: var(--text-primary);
}

.seo-impact-panel__link {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--brand);
  text-decoration: none;
}

.seo-impact-panel__link:hover {
  text-decoration: underline;
}

.seo-impact-panel__empty {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--muted-soft);
  color: var(--text-2);
}

.seo-impact-panel__queries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.seo-impact-panel__table-wrapper {
  overflow: hidden;
  border: 1px solid var(--surface-alt);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.seo-impact-panel__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.seo-impact-panel__table th,
.seo-impact-panel__table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.seo-impact-panel__table th {
  background: var(--surface);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-3);
}

.seo-impact-panel__table tbody tr:last-child td {
  border-bottom: none;
}

.seo-impact-panel__query {
  font-weight: 600;
  color: var(--text);
}

.seo-impact-panel__empty-row {
  text-align: center;
  color: var(--text-3);
}

.seo-impact-panel__empty-row-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}

/* ==========================================================================
   RETURNS ANALYSIS PANEL
   ========================================================================== */
.returns-analysis-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.returns-summary {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.returns-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.returns-summary__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.returns-summary__period {
  font-size: 0.85rem;
  color: var(--text-3);
}

.returns-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.returns-kpis .stat-card.returns-kpis__card {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--muted-soft);
  text-align: left;
}

.returns-kpis .returns-kpis__card.stat-card--success {
  border: 1px solid var(--ok-line);
  background: var(--ok-soft);
}

.returns-kpis .returns-kpis__card.stat-card--warning {
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
}

.returns-kpis .returns-kpis__card.stat-card--error {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
}

.returns-kpis .returns-kpis__card .stat-card__icon {
  margin-bottom: 0.65rem;
  font-size: 1.75rem;
}

:where(.returns-kpis .returns-kpis__card) .stat-card__value {
  margin-bottom: 0.15rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

:where(.returns-kpis .returns-kpis__card) .stat-card__label {
  font-size: 0.8rem;
  color: var(--text-3);
}

.returns-kpis .returns-kpis__card .stat-card__footer {
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--muted-line);
}

.returns-kpis__benchmark {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-4);
}

.return-reasons-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.return-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reason-row {
  display: grid;
  grid-template-columns: 2fr 3fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
}

.reason-row__info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.reason-row__icon {
  font-size: 1.25rem;
}

.reason-row__name {
  font-weight: 500;
  color: var(--text);
}

.reason-row__count {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.reason-row__bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-alt);
}

.reason-row__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--text-3);
  transition: width 0.5s ease;
}

.reason-row__bar-fill--critical {
  background: color-mix(in srgb, var(--danger) 70%, transparent);
}

.reason-row__bar-fill--warning {
  background: color-mix(in srgb, var(--warn) 70%, transparent);
}

.reason-row__bar-fill--neutral {
  background: var(--text-3);
}

.reason-row__percentage {
  min-width: 50px;
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}

.return-reasons__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-3);
}

.ai-insights-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: calc(0.5rem / 2);
  background: linear-gradient(135deg, var(--agent), var(--brand));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-on-brand);
}

.ai-insights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-card {
  padding: 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.insight-card--high {
  border-color: var(--danger-line);
}

.insight-card--medium {
  border-color: var(--warn-line);
}

.insight-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.insight-card__icon {
  font-size: 1.25rem;
}

.insight-card__category {
  font-weight: 600;
  color: var(--text);
}

.insight-card__severity {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.severity--high {
  background: var(--danger-soft);
  color: var(--danger);
}

.severity--medium {
  background: var(--warn-soft);
  color: var(--warn);
}

.severity--low {
  background: var(--muted-soft);
  color: var(--text-3);
}

.insight-card__body {
  margin-bottom: 0.75rem;
}

.insight-card__problem {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.insight-card__solution {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.insight-card__actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-alt);
}

.insight-card__btn {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-vivid);
  border-radius: calc(0.5rem * 3 / 4);
  background: transparent;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.insight-card__btn:hover {
  background: var(--surface-alt);
}

.insight-card__btn--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-on-brand);
}

.insight-card__btn--primary:hover {
  background: #2563eb;
}

.customer-feedback-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feedback-item {
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
}

.feedback-item__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.feedback-item__reason {
  font-weight: 500;
  color: var(--text);
}

.feedback-item__date {
  font-size: 0.8rem;
  color: var(--text-3);
}

.feedback-item__comment {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-secondary);
}

.feedback-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.feedback-tag {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.feedback-show-more {
  padding: 0.5rem;
  border: none;
  background: none;
  font-size: 0.9rem;
  color: var(--brand);
  cursor: pointer;
}

.feedback-show-more:hover {
  text-decoration: underline;
}

.action-plan-section {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.action-plan {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--muted-soft);
}

.action-item--completed {
  opacity: 60%;
}

.action-item__checkbox {
  display: flex;
  position: relative;
  cursor: pointer;
}

.action-item__checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  cursor: pointer;
}

.action-item__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
}

.action-item__title {
  font-weight: 500;
  color: var(--text);
}

.action-item--completed .action-item__title {
  text-decoration: line-through;
}

.action-item__impact {
  font-size: 0.8rem;
  color: var(--text-3);
}

.action-item__priority {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.priority--high {
  background: var(--danger-soft);
  color: var(--danger);
}

.priority--medium {
  background: var(--warn-soft);
  color: var(--warn);
}

.priority--low {
  background: var(--muted-soft);
  color: var(--text-3);
}

.action-plan__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  padding: 2rem;
  text-align: center;
}

.action-plan__empty-icon {
  font-size: 2.5rem;
}

.action-plan__empty p {
  margin: 0;
  color: var(--text-3);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Offer Management Grid */
.offer-management__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Offer Section */
.offer-section {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-alt);
}

.offer-section--full {
  grid-column: 1/-1;
}

.offer-section--listing-state {
  grid-column: 1/-1;
}

.offer-section__title {
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.offer-ai-suggestion {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.75rem;
  background: var(--brand-soft);
}

.offer-ai-suggestion__meta {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}

.offer-ai-suggestion__badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.18rem 0.52rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.offer-ai-suggestion__confidence {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.offer-ai-suggestion__price-choice {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.offer-ai-suggestion__price-choice--inline {
  gap: 0.42rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}

.offer-ai-suggestion__price-inline {
  display: grid;
  gap: 0.38rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--brand-line);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--brand-soft);
}

.offer-ai-suggestion__price-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line-vivid);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.offer-ai-suggestion__price-option-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.offer-ai-suggestion__price-option-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.offer-ai-suggestion__price-option.is-selected {
  border-color: color-mix(in srgb, var(--brand) 48%, transparent);
  background: var(--brand-soft);
  box-shadow: 0 8px 14px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}

.offer-ai-suggestion__values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: stretch;
}

.offer-ai-suggestion__value {
  display: grid;
  gap: 0.2rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.offer-ai-suggestion__value small {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.offer-ai-suggestion__value--suggested {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.offer-ai-suggestion__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.offer-ai-suggestion__actions {
  display: flex;
  justify-content: flex-end;
}

/* Offer Fields */
.offer-field {
  margin-bottom: 1rem;
}

.offer-field:last-child {
  margin-bottom: 0;
}

.offer-field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
}

.offer-field__input,
.offer-field__select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line-vivid);
  border-radius: 0.5rem;
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}

.offer-field__input:focus,
.offer-field__select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 15%, transparent);
}

.offer-field__input--number {
  max-width: 150px;
}

.offer-effective-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  min-height: 4.75rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--muted-line);
  border-radius: 0.5rem;
  background: var(--surface-inset);
}

.offer-effective-card--accent {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.offer-effective-card__value {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
}

.offer-effective-card__meta {
  max-width: 44rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Radio Group */
.offer-field__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.offer-field__radio {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
}

.offer-field__radio input[type=radio] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--brand);
}

.offer-field__radio span {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.offer-field__radio small {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.offer-field__radio--disabled {
  opacity: 50%;
  cursor: not-allowed;
}

/* Checkbox */
.offer-field__checkgroup {
  margin-top: 1rem;
}

.offer-field__checkbox {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
}

.offer-field__checkbox input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--brand);
  border-radius: calc(0.5rem / 2);
}

/* Offer Benefits */
.offer-benefits {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--ok-line);
  border-radius: 0.5rem;
  background: var(--ok-soft);
}

.offer-benefit {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--ok);
}

.offer-benefit:last-child {
  margin-bottom: 0;
}

/* Price Calculator */
.price-calculator {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.price-calculator__row {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(8rem, 0.95fr) minmax(0, 1fr) minmax(0, 1fr);
}

.price-calculator__row:last-child {
  border-bottom: none;
}

.price-calculator__row--header {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.price-calculator__label {
  text-align: right;
}

.price-calculator__value {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
  text-align: right;
  color: var(--text-secondary);
}

.price-calculator__value--muted {
  color: var(--text-3);
}

.price-calculator__value--negative {
  color: var(--danger);
}

.price-calculator__value--highlight {
  font-weight: 700;
  color: var(--ok);
}

.price-calculator__input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.price-calculator__input-stack {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.price-calculator__currency {
  color: var(--text-muted);
}

.price-calculator__input {
  width: 100px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line-vivid);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface);
  text-align: right;
  color: var(--text-primary);
}

.price-calculator__vat-select {
  margin-left: 0.5rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--line-vivid);
  border-radius: calc(0.5rem / 2);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.price-calculator__info {
  margin-left: 0.5rem;
  border: none;
  background: none;
  color: var(--text-4);
  cursor: help;
}

.price-calculator__badge {
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--muted-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}

.price-calculator__note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
}

.price-calculator__reset {
  border: none;
  background: none;
  font-size: 0.8rem;
  color: var(--warn);
  cursor: pointer;
  text-decoration: underline;
}

/* Alerts */
.offer-alert {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
}

.offer-alert--danger {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.offer-alert--warning {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.offer-alert__icon {
  font-size: 1.5rem;
}

.offer-alert__content h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.offer-alert__content p {
  margin: 0;
  opacity: 90%;
  font-size: 0.9rem;
}

/* Offer Actions */
.offer-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}

/* Channel Push Progress Dialog */
.channel-push-modal {
  border: 1px solid var(--border-soft);
  background: var(--surface-overlay);
  color: var(--text-primary);
}

.channel-push-modal .modal__header,
.channel-push-modal .modal__footer {
  border-color: var(--border-soft);
}

.channel-push-context {
  margin-left: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.channel-push-progress {
  display: grid;
  gap: 1rem;
}

.channel-push-progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.channel-push-progress__phase {
  font-weight: 600;
  color: var(--text-primary);
}

.channel-push-progress__bar--primary {
  background: rgba(56, 189, 248, 0.85);
}

.channel-push-progress__bar--success {
  background: rgba(34, 197, 94, 0.9);
}

.channel-push-progress__bar--danger {
  background: rgba(239, 68, 68, 0.9);
}

.channel-push-steps {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  list-style: none;
}

.channel-push-step {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--text-3);
}
.channel-push-step::before {
  content: "•";
  font-size: 1rem;
}

.channel-push-step--active {
  font-weight: 600;
  color: var(--text);
}

.channel-push-step--complete {
  color: var(--ok);
}

.channel-push-step--error {
  color: var(--danger);
}

.channel-push-progress__current {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-primary);
}

.channel-push-progress__pending {
  color: var(--text-muted);
}

.channel-push-progress__error {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--danger);
}

.channel-push-progress__success {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--ok);
}

.shipping-profile-card__muted {
  margin: 0;
  color: var(--text-muted);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Product media workspace */
.editor-section--media {
  border-color: var(--brand-line);
  box-shadow: 0 24px 48px -34px color-mix(in srgb, var(--brand) 36%, transparent);
}

.editor-section--focus {
  border-color: var(--agent-line);
  box-shadow: 0 22px 44px -36px color-mix(in srgb, var(--agent) 40%, transparent);
}

.product-editor-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.product-editor-overview-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.product-editor-overview-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-editor-overview-card__header h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.product-editor-overview-card__header p {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.product-editor-overview-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.65rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-editor-overview-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-editor-overview-checklist li {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.34rem 0.46rem;
  border: 1px solid transparent;
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface);
  font-size: 0.82rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.product-editor-overview-checklist li.is-complete {
  border-color: var(--ok-line);
}

.product-editor-overview-checklist li.is-missing {
  border-color: var(--warn-line);
}

.product-editor-overview-checklist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}

.product-editor-overview-checklist li.is-complete .product-editor-overview-checklist__icon {
  color: var(--ok);
}

.product-editor-overview-checklist li.is-missing .product-editor-overview-checklist__icon {
  color: var(--warn);
}

.product-editor-overview-empty {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.product-editor-overview-empty p {
  margin: 0;
}

.product-editor-overview-card--guidance {
  gap: 0.65rem;
}

.product-editor-overview-summary {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.product-editor-overview-summary li) {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.28rem 0.42rem;
  border: 1px solid var(--line-strong);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

:where(.product-editor-overview-summary li) strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.14rem 0.5rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.72rem;
  color: var(--text-primary);
}

.product-editor-overview-ai-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-editor-overview-ai-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
}

.product-editor-overview-ai-item__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
}

.product-editor-overview-ai-item__scope {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  font-weight: 600;
  color: var(--text-primary);
}

.product-editor-overview-ai-item__confidence {
  color: var(--text-muted);
}

.product-editor-overview-ai-item p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-editor-overview-ai-item .btn {
  justify-self: start;
}

.product-editor-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-editor__image-workspace-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  color: var(--text-secondary);
}

.product-editor__form--media.section {
  gap: 1rem;
  min-width: 0;
}

.product-editor-media-head {
  align-items: flex-start;
}

.product-editor-media-head__copy {
  max-width: 62ch;
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-2, var(--text-muted));
}

.product-editor-media-kpis {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.product-editor-media-kpi {
  gap: 0.45rem;
  min-width: 0;
}

.product-editor-media-kpi .badge {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
}

.product-image-studio {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.product-image-studio__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-image-studio__header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.product-image-studio__header p {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.product-image-studio__header-actions {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
}

.product-image-studio__header-actions .btn,
.product-image-studio__selection-nav .btn,
.product-image-studio__controls-actions .btn,
.product-image-studio__upload-picker .btn {
  min-width: 0;
}

.product-image-studio__add-trigger {
  min-width: 0;
}

.product-image-studio__count {
  display: inline-flex;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.product-image-studio__workspace {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.product-image-studio__rail,
.product-image-studio__editor {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-2);
}

.product-image-studio__empty,
.product-image-studio__editor-empty {
  display: grid;
  gap: 0.4rem;
  min-height: 140px;
  padding: 0.9rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  place-items: center;
}

.product-image-studio__rail-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.product-image-studio__rail-count {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.product-image-studio__rail-hint-inline {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line-vivid);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  pointer-events: none;
}
.product-image-studio__rail-hint-inline .app-icon,
.product-image-studio__rail-hint-inline i,
.product-image-studio__rail-hint-inline svg {
  opacity: 85%;
  font-size: 0.8rem;
}

.product-image-studio__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.product-image-studio__tile {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
}
.product-image-studio__tile:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--brand) 50%, transparent);
  transform: translateY(-2px);
}
.product-image-studio__tile:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}
.product-image-studio__tile.is-selected {
  border-color: color-mix(in srgb, var(--brand) 75%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 38%, transparent), 0 14px 28px -18px color-mix(in srgb, var(--brand) 55%, transparent);
}
.product-image-studio__tile.is-dragging {
  opacity: 40%;
  transform: scale(0.97);
  cursor: grabbing;
}
.product-image-studio__tile.is-drop-target {
  border-color: color-mix(in srgb, var(--ok) 75%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 32%, transparent);
  transform: translateY(-3px) scale(1.02);
}
.product-image-studio__tile[draggable=true] {
  cursor: grab;
}
.product-image-studio__tile[draggable=true]:active {
  cursor: grabbing;
}

.product-image-studio__tile-surface {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-2);
  place-items: center;
  pointer-events: none;
}
.product-image-studio__tile-surface img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  -webkit-user-select: none;
     -moz-user-select: none;
}

.product-image-studio__thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  color: var(--text-muted);
}

/* On-photo tile chrome: index/badge/star/move/delete pills float over arbitrary
   product photographs, so their dark scrim backgrounds + light foreground are
   intentionally theme-neutral (like a video-player control overlay) and stay as
   black/white alphas. Only their accent hover/active states are tokenized. */
.product-image-studio__tile-index {
  display: inline-flex;
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border: 1px solid rgba(15, 23, 42, 0.45);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgb(226, 232, 240);
  pointer-events: none;
}

.product-image-studio__tile-badge {
  display: inline-flex;
  position: absolute;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(15, 23, 42, 0.55);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.45);
  font-size: 0.72rem;
  pointer-events: none;
}

.product-image-studio__tile-badge--edited {
  right: 0.4rem;
  bottom: 0.4rem;
  background: var(--brand);
  color: var(--text-on-brand);
}

.product-image-studio__tile-star {
  display: inline-flex;
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.55);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0%;
  font-size: 0.85rem;
  color: rgb(226, 232, 240);
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  pointer-events: none;
}
.product-image-studio__tile-star:hover:not(:disabled) {
  background: var(--warn-soft);
  color: var(--warn);
  transform: scale(1.08);
}
.product-image-studio__tile-star.is-active {
  border-color: var(--warn);
  background: var(--warn);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--warn) 40%, transparent);
  opacity: 100%;
  color: rgb(15, 23, 42); /* theme-neutral dark glyph on solid amber star */
  pointer-events: auto;
  cursor: default;
}
.product-image-studio__tile-star.is-active:hover {
  transform: none;
}
.product-image-studio__tile-star:disabled:not(.is-active) {
  cursor: not-allowed;
}
.product-image-studio__tile:hover .product-image-studio__tile-star, .product-image-studio__tile:focus-visible .product-image-studio__tile-star, .product-image-studio__tile.is-selected .product-image-studio__tile-star {
  opacity: 100%;
  pointer-events: auto;
}

.product-image-studio__tile-reorder {
  display: grid;
  position: absolute;
  top: 2.35rem;
  left: 0.4rem;
  z-index: 3;
  gap: 0.25rem;
}

.product-image-studio__tile-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.55);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0%;
  font-size: 0.72rem;
  color: rgb(226, 232, 240);
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  pointer-events: none;
}
.product-image-studio__tile-move:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 85%, transparent);
  color: var(--text-on-brand);
  transform: scale(1.08);
}
.product-image-studio__tile-move:disabled {
  cursor: not-allowed;
  opacity: 0%;
}
.product-image-studio__tile-move:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}
.product-image-studio__tile:hover .product-image-studio__tile-move, .product-image-studio__tile:focus-visible .product-image-studio__tile-move, .product-image-studio__tile.is-selected .product-image-studio__tile-move, .product-image-studio__tile-move:focus-visible {
  opacity: 100%;
  pointer-events: auto;
}

.product-image-studio__tile-delete {
  display: inline-flex;
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.55);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0%;
  font-size: 0.82rem;
  color: var(--danger);
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  pointer-events: none;
}
.product-image-studio__tile-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 90%, transparent);
  color: var(--text-on-brand);
  transform: scale(1.08);
}
.product-image-studio__tile-delete:disabled {
  cursor: not-allowed;
}
.product-image-studio__tile:hover .product-image-studio__tile-delete, .product-image-studio__tile:focus-visible .product-image-studio__tile-delete {
  opacity: 100%;
  pointer-events: auto;
}

.product-image-studio__add {
  display: grid;
  gap: 0.65rem;
}

.product-image-studio__add label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-image-studio__preview-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-image-studio__preview-frame {
  display: grid;
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--line-vivid);
  border-radius: 1rem;
  /* Transparency checkerboard (Photoshop-style) — slate-alpha checkers read in both themes. */
  background-color: var(--surface-3);
  background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.3), 0 16px 38px -26px rgba(15, 23, 42, 0.7);
  place-items: center;
  margin-inline: auto;
}

.product-image-studio__preview-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform-origin: center;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.35));
}

.product-image-studio__preview-empty {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
}

.product-image-studio__field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}

.product-image-studio__field-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-image-studio__field-note {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.product-image-studio__field-error {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--danger);
}

.product-image-studio__stage {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-image-studio__stage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.product-image-studio__ratio-group,
.product-image-studio__tool-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  padding: 0.2rem;
  border: 1px solid var(--muted-line);
  border-radius: 999px;
  background: var(--surface);
}

.product-image-studio__tool-group--end {
  gap: 0.45rem;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
}

.product-image-studio__ratio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 1.9rem;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.product-image-studio__ratio-btn:hover {
  background: var(--brand-soft);
  color: var(--text-primary);
}
.product-image-studio__ratio-btn.is-active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand-line);
  color: var(--brand-strong);
}
.product-image-studio__ratio-btn:disabled {
  cursor: not-allowed;
  opacity: 55%;
}

.product-image-studio__tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: 0.95rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.product-image-studio__tool-btn:hover {
  background: var(--brand-soft);
  color: var(--text-primary);
}
.product-image-studio__tool-btn.is-active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.product-image-studio__tool-btn:disabled {
  cursor: not-allowed;
  opacity: 55%;
}

.product-image-studio__canvas-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.product-image-studio__preview-frame--interactive {
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
}
.product-image-studio__preview-frame--interactive.is-panning {
  cursor: grabbing;
}

.product-image-studio__canvas-hint {
  display: inline-flex;
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  gap: 0.35rem;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72); /* on-photo hint scrim — theme-neutral */
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgb(226, 232, 240);
  transition: opacity 0.2s ease;
  transform: translateX(-50%);
  pointer-events: none;
}
.product-image-studio__canvas-hint .app-icon,
.product-image-studio__canvas-hint i,
.product-image-studio__canvas-hint svg {
  font-size: 0.85rem;
}
.product-image-studio__preview-frame--interactive.is-panning .product-image-studio__canvas-hint {
  opacity: 0%;
}

.product-image-studio__zoom-dock {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
}

.product-image-studio__zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.product-image-studio__zoom-btn:hover:not(:disabled) {
  background: var(--brand-soft);
  color: var(--text-primary);
}
.product-image-studio__zoom-btn:disabled {
  cursor: not-allowed;
  opacity: 45%;
}

.product-image-studio__zoom-btn--reset {
  margin-left: 0.2rem;
  border-left: 1px solid var(--line-vivid);
  border-radius: 0 999px 999px 0;
}

.product-image-studio__zoom-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.product-image-studio__color-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem 0.85rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.product-image-studio__color-control {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.product-image-studio__color-control output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-strong);
}
.product-image-studio__color-control .product-image-studio__range {
  margin: 0;
}

.product-image-studio__color-label {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-weight: 600;
  color: var(--text-secondary);
}
.product-image-studio__color-label .app-icon,
.product-image-studio__color-label i,
.product-image-studio__color-label svg {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.product-image-studio__meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 0.8rem;
}

.product-image-studio__meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.product-image-studio__meta-field span {
  font-weight: 600;
  color: var(--text-secondary);
}

@media (width <= 720px) {
  .product-image-studio__stage-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .product-image-studio__tool-group--end {
    justify-content: flex-start;
    margin-left: 0;
  }
}
.product-image-studio__control-label {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

.product-image-studio__control-label output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-strong);
}

.product-image-studio__range {
  width: 100%;
  height: 0.35rem;
  margin: 0.25rem 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 65%, transparent);
  -webkit-appearance: none;
          appearance: none;
  outline: none;
  cursor: pointer;
}
.product-image-studio__range::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background: transparent;
}
.product-image-studio__range::-webkit-slider-thumb {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.35rem;
  border: 2px solid var(--surface-1);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.45);
  -webkit-appearance: none;
          appearance: none;
  cursor: grab;
  -webkit-transition: transform 0.1s ease, box-shadow 0.1s ease;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.product-image-studio__range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.product-image-studio__range::-webkit-slider-thumb:active {
  transform: scale(1.05);
  cursor: grabbing;
}
.product-image-studio__range::-moz-range-track {
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 65%, transparent);
}
.product-image-studio__range::-moz-range-thumb {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--surface-1);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.45);
  cursor: grab;
}
.product-image-studio__range:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.product-image-studio__dialog {
  width: min(860px, 100vw - 2rem);
}

.product-image-studio__dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.product-image-studio__upload {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.product-image-studio__dropzone {
  display: grid;
  position: relative;
  gap: 0.45rem;
  width: 100%;
  min-height: 180px;
  padding: 1rem;
  border: 1px dashed var(--brand-line);
  border-radius: 0.75rem;
  background: var(--brand-soft);
  font: inherit;
  text-align: center;
  color: var(--text-secondary);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  place-items: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.product-image-studio__dropzone strong {
  color: var(--text-primary);
}

.product-image-studio__dropzone.is-active,
.product-image-studio__dropzone:hover {
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
  background: var(--brand-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 24%, transparent);
}

.product-image-studio__dropzone:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 78%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

.product-image-studio__dropzone:disabled {
  cursor: not-allowed;
  opacity: 70%;
}

.product-image-studio__dropzone[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 70%;
}

.product-image-studio__dropzone > :not(.product-image-studio__dropzone-input) {
  pointer-events: none;
}

.product-image-studio__dropzone-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0%;
  cursor: pointer;
}

.product-image-studio__upload-status {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-image-studio__upload-file {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.product-image-studio__upload-error {
  margin: 0;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-image-editor-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.35rem 2rem;
  color: var(--text);
}

.product-image-editor__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.product-image-editor__title h1 {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-image-editor__title p {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  color: var(--text-muted);
}

.product-image-editor__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.product-image-editor__summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-image-editor__summary-card.xw-kpi {
  min-width: 0;
}

.product-image-editor__summary-card .badge {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
}

.product-image-editor__status-note {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  font-size: 0.82rem;
}

.product-image-editor__ai-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.product-image-editor__ai-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-image-editor__ai-heading p {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
}

.product-image-editor__ai-source {
  gap: 0.35rem;
}

.product-image-editor__ai-source-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.55rem;
}

.product-image-editor__ai-source-option {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.35rem;
  border: 1px solid var(--line, var(--border-soft));
  border-radius: 0.5rem;
  background: var(--surface-1, var(--surface-muted));
  text-align: left;
  color: var(--text-secondary);
  grid-template-columns: 2.6rem minmax(0, 1fr);
  cursor: pointer;
}

.product-image-editor__ai-source-option--selected {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--text-primary);
}

.product-image-editor__ai-source-thumb {
  width: 2.6rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--surface);
}

.product-image-editor__ai-source-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-image-editor__ai-source-label {
  min-width: 0;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-image-editor__ai-prompt-presets {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.product-image-editor__ai-prompt-presets-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.product-image-editor__ai-prompt-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.product-image-editor__ai-prompt-preset {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  max-width: 100%;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line, var(--border-soft));
  border-radius: 0.5rem;
  background: var(--surface-1, var(--surface-muted));
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: left;
  color: var(--text-secondary);
  white-space: normal;
  cursor: pointer;
}

.product-image-editor__ai-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.product-image-editor__ai-prompt {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.product-image-editor__ai-prompt textarea {
  min-height: 5.5rem;
  resize: vertical;
  font-weight: 400;
}

.product-image-editor__ai-prompt-counter {
  align-self: flex-end;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-muted);
}

.product-image-editor__ai-prompt-counter--over {
  color: var(--danger);
}

.product-image-editor__ai-submit {
  min-height: 2.45rem;
  white-space: nowrap;
}

.product-image-editor__ai-readiness {
  margin: -0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-image-editor__ai-result {
  margin: 0;
  color: var(--text-secondary);
}

.product-image-editor__ai-result--error {
  color: var(--danger);
}

.product-image-editor__body {
  min-width: 0;
}

.product-image-editor__state {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--text-muted);
}

.product-image-editor__state--error {
  border-color: var(--danger-line);
  color: var(--danger);
}

@media (width <= 1160px) {
  .product-editor__workspace-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-editor-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-image-studio__workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-image-studio__item {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "thumb meta" "thumb actions";
  }
  .product-image-studio__thumb {
    grid-area: thumb;
    width: 64px;
    height: 64px;
  }
  .product-image-studio__item-meta {
    grid-area: meta;
  }
  .product-image-studio__item-actions {
    grid-area: actions;
    justify-content: flex-start;
  }
  .product-image-editor__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-image-studio__item > .action-table__cell--actions {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  .product-image-studio__item > .action-table__cell--actions {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
}

.wizard-panel--limits .wizard-field > .product-image-studio__item-meta {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  }
@media (width <= 760px) {
  .product-editor__actions {
    min-width: 100%;
  }
  .product-editor__actions-secondary,
  .product-editor__actions-primary {
    justify-content: flex-start;
  }
  .product-editor__action-btn {
    flex: 1 1 calc(50% - 0.35rem);
  }
  .product-editor__action-btn--save,
  .product-editor__action-btn--push {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
  }
  .product-editor__workspace-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .offer-management__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .offer-section {
    padding: 1rem;
  }
  .offer-field__input--number {
    max-width: 100%;
  }
  .price-calculator__row {
    gap: 0.45rem;
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
  }
  .price-calculator__row--header {
    display: none;
  }
  .price-calculator__label,
  .price-calculator__value {
    text-align: left;
  }
  .price-calculator__input-group {
    justify-content: flex-start;
  }
  .price-calculator__input-stack {
    justify-items: start;
  }
  .price-calculator__input {
    width: min(100%, 11rem);
  }
  .product-image-studio__controls-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-image-studio__header-actions {
    justify-content: space-between;
    width: 100%;
  }
  .product-image-studio__dialog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-image-editor__ai-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-image-editor__ai-submit {
    justify-content: center;
    width: 100%;
  }
  .product-image-editor-page {
    padding: 0.75rem 0.75rem 1.5rem;
  }
  .product-image-editor__summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width <= 520px) {
  .product-editor__actions-secondary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  .product-editor__actions-secondary .product-editor__action-btn {
    justify-content: center;
    min-height: 38px;
    padding-inline: 0.45rem;
  }
  .product-editor__actions-secondary .product-editor__action-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .product-editor__actions-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .product-editor__actions-primary .product-editor__action-btn--save,
  .product-editor__actions-primary .product-editor__action-btn--push {
    width: 100%;
  }
  .product-editor__actions-primary .product-editor__push-menu {
    align-items: stretch;
  }
  .product-editor__actions-primary .product-editor__menu {
    right: auto;
    left: 0;
    width: min(100vw - 2rem, 320px);
  }
}
/* Theme-collapsed: these were light-only recolors of badges/dropzone; the dark
   base lives in _workspace-media-studio.scss. Re-pointed to brand/info tokens so
   one rule renders in both themes (light override layer dropped). */
.product-image-studio__item-primary {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.product-image-studio__item-edited {
  background: var(--info-soft);
  color: var(--info);
}

.product-image-studio__dropzone {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.product-image-studio__dropzone.is-active,
.product-image-studio__dropzone:hover {
  background: var(--brand-soft);
}

.recommendation-comparison {
  display: grid;
  gap: 0.45rem;
}

.recommendation-comparison--empty {
  margin: 0;
  font-size: 0.77rem;
  color: var(--text-muted);
}

.recommendation-comparison__row {
  display: grid;
  gap: 0.38rem;
  padding: 0.48rem 0.56rem;
  border: 1px solid var(--line-strong);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-2);
}

.recommendation-comparison__header {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
}

.recommendation-comparison__field {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.recommendation-comparison__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: var(--ok-soft);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ok);
}

.recommendation-comparison__badge--neutral {
  background: var(--muted-soft);
  color: var(--text-2);
}

.recommendation-comparison__values {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recommendation-comparison__split-shell {
  --comparison-split: 50%;
  position: relative;
}

.recommendation-comparison__split {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, var(--comparison-split)) minmax(0, calc(100% - var(--comparison-split)));
}

.recommendation-comparison__value {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.36rem 0.44rem;
  border: 1px solid var(--line-strong);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-2);
}

.recommendation-comparison__value--suggested {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.recommendation-comparison__label {
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.recommendation-comparison__value p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.recommendation-comparison__split .recommendation-comparison__value p {
  max-height: 13.25rem;
  overflow: auto;
  white-space: pre-wrap;
  scrollbar-width: thin;
}

.recommendation-comparison__split-resizer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0%;
  cursor: ew-resize;
  -webkit-appearance: none;
          appearance: none;
}

.recommendation-comparison__split-resizer::-webkit-slider-runnable-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.recommendation-comparison__split-resizer::-webkit-slider-thumb {
  width: 1px;
  height: 1px;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
}

.recommendation-comparison__split-resizer::-moz-range-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.recommendation-comparison__split-resizer::-moz-range-thumb {
  width: 1px;
  height: 1px;
  border: 0;
  background: transparent;
}

.recommendation-comparison__split-divider {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: var(--comparison-split);
  z-index: 1;
  width: 0.5rem;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.22), 0 8px 16px -10px rgba(15, 23, 42, 0.75);
  transform: translateX(-50%);
  pointer-events: none;
}

.recommendation-comparison__split-divider-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.36rem;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); /* theme-neutral white grip on colored divider */
  transform: translate(-50%, -50%);
}

@media (width <= 760px) {
  .recommendation-comparison__split {
    grid-template-columns: minmax(0, 1fr);
  }
  .recommendation-comparison__split-resizer,
  .recommendation-comparison__split-divider {
    display: none;
  }
}
.recommendation-comparison__more {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.recommendation-comparison--compact .recommendation-comparison__row {
  padding: 0.5rem 0.58rem;
}

.recommendation-comparison--compact .recommendation-comparison__value p {
  font-size: 0.74rem;
}

@media (width >= 1320px) {
  .product-editor__basics-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
  .product-editor__basics-grid .editor-section--offers {
    position: sticky;
    top: 4.15rem;
  }
  .product-editor-overview-actions {
    justify-content: flex-start;
  }
  .editor-section--offers .offer-actions {
    position: sticky;
    bottom: 0.25rem;
    z-index: 2;
    padding: 0.65rem;
    border: 1px solid var(--line-strong);
    border-radius: calc((0.75rem + 1rem) / 2);
    background: var(--surface-2);
    box-shadow: 0 14px 24px -20px rgba(15, 23, 42, 0.55);
  }
  .editor-section--offers .offer-actions .btn {
    min-width: 9.25rem;
  }
}
@media (width <= 1319px) {
  .product-editor__basics-grid .editor-section--offers {
    position: static;
  }
  .editor-section--offers .offer-actions {
    position: static;
    padding: 0.65rem 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
@media (width <= 1160px) {
  .product-editor-page {
    padding: 0.85rem 0.9rem 1.5rem;
  }
  .product-editor__header {
    padding: 0.9rem 0.95rem;
  }
  .product-editor__tabbar {
    position: static;
    flex-wrap: nowrap;
    gap: 0.45rem;
    overflow-x: auto;
  }
  .editor-tab {
    flex: 0 0 auto;
  }
  .product-editor__tabbar-tools {
    flex: 0 0 auto;
    margin-left: 0.25rem;
  }
}
@media (width <= 920px) {
  .editor-section--offers .offer-field__radio {
    flex-wrap: wrap;
  }
  .editor-section--offers .offer-field__radio small {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }
}
@media (width <= 760px) {
  .product-editor__actions {
    gap: 0.45rem;
  }
  .product-editor__actions-secondary,
  .product-editor__actions-primary {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-editor__action-btn,
  .product-editor__action-btn--save,
  .product-editor__action-btn--push {
    flex: initial;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 2.45rem;
  }
  .product-editor__action-text {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.82rem;
  }
  .product-editor__push-menu {
    align-items: stretch;
    width: 100%;
  }
  .product-editor__push-menu .product-editor__action-btn--push {
    width: 100%;
  }
  .product-editor__menu {
    width: min(100vw - 1.5rem, 24rem);
  }
  .editor-section {
    padding: 0.85rem 0.9rem;
  }
  .field-editor {
    padding: 0.8rem;
  }
  .editor-section--offers .offer-management__grid {
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .editor-section--offers .offer-section {
    padding: 0.9rem;
  }
  .editor-section--offers .price-calculator__row {
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .editor-section--offers .price-calculator__row > label,
  .editor-section--offers .price-calculator__value {
    text-align: left;
  }
  .editor-section--offers .price-calculator__input-group {
    justify-content: flex-start;
  }
  .editor-section--offers .price-calculator__input-stack {
    justify-items: start;
  }
  .editor-section--offers .offer-actions {
    position: sticky;
    bottom: 0.35rem;
    z-index: 4;
    padding: 0.55rem;
    border: 1px solid var(--muted-line);
    border-radius: calc((0.75rem + 1rem) / 2);
    background: var(--surface-2);
    box-shadow: 0 18px 26px -22px rgba(15, 23, 42, 0.65);
  }
  .product-editor-overview-actions .btn {
    width: 100%;
    min-width: 0;
  }
  .product-editor-overview-ai-item {
    border-left-width: 2px;
  }
  .field-ai-suggestion {
    margin-top: 0;
    padding: 0.58rem 0.6rem;
  }
  .field-ai-suggestion__header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .field-ai-suggestion__actions {
    justify-content: stretch;
  }
  .field-ai-suggestion__actions .btn {
    width: 100%;
  }
  .offer-ai-suggestion__values {
    grid-template-columns: minmax(0, 1fr);
  }
  .offer-ai-suggestion__arrow {
    display: none;
  }
  .recommendation-comparison__values {
    grid-template-columns: minmax(0, 1fr);
  }
  .recommendation-comparison__row {
    padding: 0.5rem 0.52rem;
  }
}
@media (width <= 520px) {
  .product-editor-page {
    padding: 0.65rem 0.65rem 1.2rem;
  }
  .product-editor__meta {
    gap: 0.8rem;
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .product-editor__thumbnail {
    width: 72px;
    height: 72px;
  }
  .product-editor__details {
    font-size: 0.84rem;
  }
  .product-editor__actions-secondary .product-editor__action-btn {
    justify-content: flex-start;
    padding-inline: 0.6rem;
  }
  .product-editor__actions-secondary .product-editor__action-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
    border: 0;
  }
  .product-editor__actions-primary {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-editor__actions-primary .product-editor__action-btn--save,
  .product-editor__actions-primary .product-editor__push-menu {
    width: 100%;
  }
  .product-editor__actions-primary .product-editor__menu {
    right: auto;
    left: 0;
    width: min(100vw - 1.5rem, 22rem);
  }
  .editor-tab {
    padding: 0.4rem 0.72rem;
    font-size: 0.82rem;
  }
  .editor-section__subtitle {
    font-size: 0.84rem;
  }
  .field-editor__meta {
    gap: 0.5rem 0.8rem;
    font-size: 0.78rem;
  }
  .editor-section--focus .product-editor-overview-checklist li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .editor-section--focus .product-editor-overview-checklist li .btn {
    grid-column: 2;
    justify-self: start;
  }
  .editor-section--offers .offer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editor-section--offers .offer-actions .btn {
    width: 100%;
    min-width: 0;
  }
}
@media (width <= 390px) {
  .editor-section--offers .offer-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Theme-collapsed: the trailing [data-theme="light"] override layer for the
   tabbar / basic-info fields / offer fields / overview / recommendation-comparison
   was removed — the token-driven base rules (here + sibling files) now supply both
   themes. price-calculator__row--total border + offer-actions sticky surface below
   are re-pointed to tokens so they no longer need a light twin. */
.editor-section--offers .price-calculator__row--total {
  border-top-color: var(--line-strong);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.platform-publish-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.platform-publish-panel--compact {
  gap: 0.55rem;
  padding: 0.85rem 0.9rem;
}

.platform-publish-panel__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}
.platform-publish-panel__header h3 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.platform-publish-panel__header p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.platform-publish-panel__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.platform-publish-panel__empty {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.9rem 0.75rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.platform-publish-panel__empty i, .platform-publish-panel__empty svg {
  font-size: 1.1rem;
  color: var(--text-tertiary);
}
.platform-publish-panel__empty p {
  margin: 0;
}

.platform-publish-panel__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-publish-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  transition: border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.platform-publish-row--live {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}
.platform-publish-row--offline {
  background: var(--surface-secondary);
}
.platform-publish-row--pending {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 1px var(--color-primary-border);
}
.platform-publish-row--offline-connection {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.platform-publish-row__identity {
  display: flex;
  flex: 1 1 auto;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
}

.platform-publish-row__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-secondary);
  font-size: 1rem;
  color: var(--text-primary);
}
.platform-publish-row__icon--bol, .platform-publish-row__icon--bolcom {
  background: rgba(0, 0, 164, 0.12);
  color: #0000a4;
}
.platform-publish-row__icon--shopify {
  background: rgba(149, 191, 71, 0.18);
  color: #3f6f19;
}
.platform-publish-row__icon--lightspeed {
  background: rgba(255, 98, 0, 0.15);
  color: #c24d00;
}

.platform-publish-row__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.platform-publish-row__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.platform-publish-row__title strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.platform-publish-row__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-secondary);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.platform-publish-row__pending-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--color-primary-border);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-on-brand);
}

.platform-publish-row__status {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.platform-publish-row__pending-hint {
  font-size: 0.72rem;
  color: var(--color-primary-text, var(--text-primary));
  font-style: italic;
}

.platform-publish-row__error {
  max-width: 18rem;
  overflow: hidden;
  font-size: 0.72rem;
  color: var(--color-danger-text, #a22300);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-publish-row__source {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  white-space: nowrap;
}
.platform-publish-row__source--override {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text, var(--text-primary));
}
.platform-publish-row__source--inherited {
  background: var(--surface-secondary);
}
.platform-publish-row__source--missing {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text, var(--text-primary));
}

.platform-publish-row__controls {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
}

.platform-publish-row__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.platform-publish-row__reset:hover:not(:disabled), .platform-publish-row__reset:focus-visible:not(:disabled) {
  border-color: var(--color-primary-border);
  color: var(--color-primary-text, var(--text-primary));
}
.platform-publish-row__reset:disabled {
  cursor: not-allowed;
  opacity: 50%;
}

.platform-switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.platform-switch:disabled {
  cursor: not-allowed;
  opacity: 55%;
}
.platform-switch:focus-visible .platform-switch__track {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}
.platform-switch.is-pending .platform-switch__track {
  box-shadow: 0 0 0 2px var(--color-primary-border);
}

.platform-switch__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--border-soft);
  transition: background-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.platform-switch.is-on .platform-switch__track {
  background: #2e7d32;
}

.platform-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateY(-50%);
}
.platform-switch.is-on .platform-switch__thumb {
  transform: translate(1.15rem, -50%);
}

.platform-publish-panel__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-soft);
}

.platform-publish-panel__summary {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.platform-publish-panel__summary i, .platform-publish-panel__summary svg {
  color: var(--color-primary-border);
}

.platform-publish-panel__actions {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.platform-publish-panel__actions .spinner {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.3rem;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: platform-publish-spin 0.8s linear infinite;
}

@keyframes platform-publish-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   PRODUCT EDITOR THEME + FORMAT TUNING
   ========================================================================== */
.product-editor-page {
  padding: 0.95rem 1.15rem 1.6rem;
}

.product-editor__header {
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  padding: 0.78rem 0.95rem;
}

.product-editor__header-main {
  gap: 0.7rem;
}

.product-editor__meta {
  gap: 0.9rem;
}

.product-editor__thumbnail {
  width: 72px;
  height: 72px;
}

.product-editor__title h1 {
  font-size: 1.38rem;
  line-height: 1.22;
}

.product-editor__next-action {
  margin-top: 0.35rem;
  padding: 0.42rem 0.6rem;
}

.product-editor__workspace-strip {
  gap: 0.52rem;
  margin-top: 0.55rem;
}

.editor-section {
  margin-bottom: 1rem;
  padding: 0.98rem 1.05rem;
  border-radius: 1.1rem;
}

.editor-section__header,
.editor-section__subheader {
  margin-bottom: 0.82rem;
}

.product-editor__form {
  gap: 0.88rem;
  padding: 0.95rem;
  border-radius: 1.1rem;
}

.editor-field-stack {
  gap: 0.72rem;
}

.field-editor {
  gap: 0.55rem;
  padding: 0.88rem;
  border-radius: 0.85rem;
}

.field-ai-suggestion,
.offer-ai-suggestion {
  gap: 0.4rem;
  padding: 0.52rem 0.58rem;
  border-radius: 0.74rem;
}

.editor-section--offers .price-calculator__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.editor-section--offers .price-calculator__row--total .price-calculator__value {
  font-size: 0.94rem;
}

.editor-section--offers .price-calculator__row > label small {
  display: block;
  margin-top: 0.15rem;
}

.product-editor-overview-card__badge,
.workspace-summary-card__badge {
  letter-spacing: 0.01em;
}

@media (width >= 1320px) {
  .product-editor__basics-grid {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 1.04fr);
  }
}
@media (width <= 760px) {
  .editor-section--offers .price-calculator__row {
    padding: 0.5rem 0.1rem;
  }
  .editor-section--offers .price-calculator__row > label {
    font-size: 0.86rem;
  }
  .editor-section--offers .price-calculator__value {
    font-size: 0.9rem;
  }
  .editor-section--offers .price-calculator__input {
    width: min(100%, 10rem);
  }
  .editor-section--offers .price-calculator__vat-select {
    margin-left: 0.35rem;
  }
}
/* Theme-collapsed: the paired dark/light navy-vs-white blocks below were
   flattened onto single token-driven rules. Surfaces use --surface-*, borders
   --line(-strong/-vivid), brand accents --brand(-soft/-line), text --text(-2).
   Shadows keep theme-neutral black alphas. (Flattened gradients → browser-check.) */
.product-editor__header {
  border-color: var(--line-strong);
  background: var(--surface-1);
  box-shadow: 0 20px 36px -28px rgba(2, 6, 23, 0.75);
}

.product-editor__tabbar {
  border-color: var(--brand-line);
  background: var(--surface-1);
  box-shadow: 0 16px 28px -24px rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(8px);
}

.editor-section {
  border-color: var(--line);
  background: var(--surface-1);
}

.product-editor-overview-card {
  border-color: var(--line-vivid);
  background: var(--surface-1);
}

.product-editor-overview-card__header p,
.product-editor-overview-ai-item p {
  color: var(--text-2);
}

.product-editor-overview-empty {
  border-color: var(--line-vivid);
  background: var(--surface-inset);
}

.workspace-summary-card__compact-list li,
.product-editor-overview-summary li {
  border-color: var(--muted-line);
  background: var(--surface-2);
  color: var(--text-2);
}

.workspace-summary-card__compact-list li strong,
.product-editor-overview-summary li strong {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.field-ai-suggestion {
  border-color: var(--brand-line);
  background: var(--surface-2);
}

.field-ai-suggestion__scope {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.offer-ai-suggestion {
  border-color: var(--brand-line);
  background: var(--surface-2);
}

.offer-ai-suggestion__price-inline {
  border-color: var(--brand-line);
  background: var(--surface-2);
}

.offer-ai-suggestion__badge {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.offer-ai-suggestion__value {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.offer-ai-suggestion__price-option {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.offer-ai-suggestion__price-option.is-selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.recommendation-comparison__row {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.recommendation-comparison__value {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.recommendation-comparison__value--suggested {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.recommendation-comparison__split-divider {
  box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.78), 0 8px 16px -11px rgba(2, 6, 23, 0.9);
}

.editor-section--offers .offer-section {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.product-editor-page--standard .editor-section--offers .offer-section {
  border-color: var(--border-soft);
  background: transparent;
}

.product-editor-page--standard .editor-section--offers .offer-effective-card {
  border-color: var(--line-strong);
  background: var(--surface-inset);
}

.editor-section--offers .offer-field__label {
  color: var(--text-2);
}

.editor-section--offers .offer-field__radio,
.editor-section--offers .offer-field__checkbox {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.editor-section--offers .offer-field__checkbox span {
  color: var(--text-2);
}

.editor-section--offers .price-calculator__row > label {
  color: var(--text-2);
}

.editor-section--offers .price-calculator__value {
  color: var(--text);
}

.editor-section--offers .offer-actions {
  border-color: var(--brand-line);
  background: var(--surface-2);
  box-shadow: 0 20px 28px -24px rgba(2, 6, 23, 0.8);
}

.product-editor-page--standard .editor-section--basic-info .field-editor,
.product-editor-page--standard .editor-section--basic-info .product-identity-panel {
  background: transparent;
  box-shadow: none;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Shared design tokens, helpers, and design-system utilities */
:root,
:root[data-theme=dark] {
  --shell-header-height: 68px;
  --font-sans: IBM Plex Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --font-mono: IBM Plex Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Consolas, monospace;
  --surface: var(--surface-secondary);
  --surface-alt: var(--surface-default);
  --surface-muted: var(--surface-muted-strong);
  --surface-light: #fff;
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --focus-ring-color: rgba(109, 180, 245, 0.32);
  --page-bg: #0a0d14;
  --page-bg-alt: #0d1119;
  --surface-default: #11151e;
  --surface-secondary: #11151e;
  --surface-elevated: #161b27;
  --surface-overlay: #1c2230;
  --surface-muted-strong: rgba(168, 178, 200, 0.1);
  --surface-subtle: rgba(168, 178, 200, 0.1);
  --surface-scrim: rgba(2, 6, 23, 0.62);
  --modal-scrim: rgba(2, 6, 23, 0.72);
  --text-primary: #e7ebf3;
  --text-secondary: rgba(231, 235, 243, 0.72);
  --text-muted: rgba(231, 235, 243, 0.5);
  --text-on-brand: #0a1530;
  --border-default: rgba(168, 178, 200, 0.1);
  --border-strong: rgba(168, 178, 200, 0.18);
  --border-soft: rgba(168, 178, 200, 0.28);
  --input-bg: rgba(0, 0, 0, 0.2);
  --input-border: rgba(168, 178, 200, 0.18);
  --dropdown-bg: #1c2230;
  --modal-bg: #161b27;
  --modal-border: rgba(168, 178, 200, 0.18);
  --modal-close-hover-bg: rgba(168, 178, 200, 0.1);
  --table-border-color: rgba(168, 178, 200, 0.1);
  --table-header-bg: #11151e;
  --table-header-color: rgba(231, 235, 243, 0.5);
  --table-row-hover-bg: rgba(168, 178, 200, 0.1);
  --table-row-selected-bg: rgba(109, 180, 245, 0.14);
  --table-row-selected-hover-bg: rgba(109, 180, 245, 0.18);
  --action-btn-hover-bg: rgba(168, 178, 200, 0.1);
  --button-subtle-bg: rgba(168, 178, 200, 0.1);
  --button-subtle-hover-bg: rgba(168, 178, 200, 0.18);
  --focus-ring: rgba(109, 180, 245, 0.32);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 6px 16px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 14px 36px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 28px 64px rgba(0, 0, 0, 0.46);
  --shadow-xl: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 28px 64px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 0 32px rgba(109, 180, 245, 0.22);
  --color-primary: #6db4f5;
  --color-primary-strong: #4f9ee8;
  --color-primary-bg: rgba(109, 180, 245, 0.14);
  --color-primary-border: rgba(109, 180, 245, 0.32);
  --color-primary-contrast: #0a1530;
  --color-agent: #e8b574;
  --color-agent-strong: #d49a52;
  --color-agent-bg: rgba(232, 181, 116, 0.13);
  --color-agent-border: rgba(232, 181, 116, 0.3);
  --color-agent-glow: rgba(232, 181, 116, 0.22);
  --color-agent-contrast: #2a1c08;
  --color-success: #5fd49a;
  --color-success-bg: rgba(95, 212, 154, 0.13);
  --color-success-border: rgba(95, 212, 154, 0.3);
  --color-warning: #f0b95a;
  --color-warning-bg: rgba(240, 185, 90, 0.13);
  --color-warning-border: rgba(240, 185, 90, 0.3);
  --color-danger: #ef7a8c;
  --color-danger-bg: rgba(239, 122, 140, 0.13);
  --color-danger-border: rgba(239, 122, 140, 0.32);
  --color-info: #7cc4ff;
  --color-info-bg: rgba(124, 196, 255, 0.13);
  --color-info-border: rgba(124, 196, 255, 0.3);
  --color-muted: rgba(231, 235, 243, 0.72);
  --color-muted-bg: rgba(168, 178, 200, 0.1);
  --color-muted-border: rgba(168, 178, 200, 0.22);
  --color-pill-muted: rgba(231, 235, 243, 0.72);
  --color-pill-muted-bg: rgba(168, 178, 200, 0.1);
  --color-pill-muted-border: rgba(168, 178, 200, 0.22);
  --bg: var(--page-bg);
  --bg-2: var(--page-bg-alt);
  --surface-1: var(--surface-default);
  --surface-2: var(--surface-elevated);
  --surface-3: var(--surface-overlay);
  --surface-inset: var(--input-bg);
  --line: var(--border-default);
  --line-strong: var(--border-strong);
  --line-vivid: var(--border-soft);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --text-4: color-mix(in srgb, var(--text-muted) 70%, transparent);
  --text-on-brand: var(--color-primary-contrast);
  --text-on-agent: var(--color-agent-contrast);
  --brand: var(--color-primary);
  --brand-strong: var(--color-primary-strong);
  --brand-soft: var(--color-primary-bg);
  --brand-line: var(--color-primary-border);
  --brand-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --agent: var(--color-agent);
  --agent-strong: var(--color-agent-strong);
  --agent-soft: var(--color-agent-bg);
  --agent-line: var(--color-agent-border);
  --agent-glow: var(--color-agent-glow);
  --ok: var(--color-success);
  --ok-soft: var(--color-success-bg);
  --ok-line: var(--color-success-border);
  --warn: var(--color-warning);
  --warn-soft: var(--color-warning-bg);
  --warn-line: var(--color-warning-border);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-bg);
  --danger-line: var(--color-danger-border);
  --info: var(--color-info);
  --info-soft: var(--color-info-bg);
  --info-line: var(--color-info-border);
  --muted-soft: var(--color-muted-bg);
  --muted-line: var(--color-muted-border);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  --xw-focus-ring: var(--focus-ring);
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.48;
  --lh-relaxed: 1.65;
  --tracking-eyebrow: 0.1em;
  --tracking-snug: 0.01em;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;
  --row-h: 36px;
  --row-h-sm: 30px;
  --ctrl-h: 34px;
  --ctrl-h-sm: 28px;
  --ctrl-px: 12px;
  --card-pad: 20px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 56px;
  --substrip-h: 34px;
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}

:root:lang(zh),
:root:lang(zh-CN),
:root:lang(zh-Hans),
:root:lang(zh-Hans-CN) {
  --font-sans: Noto Sans CJK SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, PingFang SC, Heiti SC, Segoe UI, sans-serif;
}

:root[data-theme=light] {
  --agent: #b87825;
  --agent-strong: #9c6418;
  --agent-soft: rgb(184 120 37 / 10%);
  --agent-line: rgb(184 120 37 / 28%);
  --agent-glow: rgb(184 120 37 / 18%);
  --text-on-agent: #2a1c08;
  --surface: var(--surface-secondary);
  --surface-alt: var(--surface-default);
  --surface-muted: var(--surface-muted-strong);
  --surface-light: #fff;
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --focus-ring-color: rgba(43, 111, 208, 0.26);
  --page-bg: #f3f4f7;
  --page-bg-alt: #e8ebf1;
  --surface-default: #fff;
  --surface-secondary: #fff;
  --surface-elevated: #fff;
  --surface-overlay: #fff;
  --surface-muted-strong: rgba(15, 18, 28, 0.06);
  --surface-subtle: rgba(15, 18, 28, 0.06);
  --surface-scrim: rgba(15, 18, 28, 0.38);
  --modal-scrim: rgba(15, 18, 28, 0.54);
  --text-primary: #0f121c;
  --text-secondary: rgba(15, 18, 28, 0.66);
  --text-muted: rgba(15, 18, 28, 0.46);
  --text-on-brand: #fff;
  --border-default: rgba(15, 18, 28, 0.08);
  --border-strong: rgba(15, 18, 28, 0.14);
  --border-soft: rgba(15, 18, 28, 0.22);
  --input-bg: rgba(15, 18, 28, 0.04);
  --input-border: rgba(15, 18, 28, 0.14);
  --dropdown-bg: rgba(255, 255, 255, 0.98);
  --modal-bg: #fff;
  --modal-border: rgba(15, 18, 28, 0.14);
  --modal-close-hover-bg: rgba(15, 18, 28, 0.06);
  --table-border-color: rgba(15, 18, 28, 0.08);
  --table-header-bg: #fff;
  --table-header-color: rgba(15, 18, 28, 0.46);
  --table-row-hover-bg: rgba(15, 18, 28, 0.06);
  --table-row-selected-bg: rgba(43, 111, 208, 0.1);
  --table-row-selected-hover-bg: rgba(43, 111, 208, 0.14);
  --action-btn-hover-bg: rgba(15, 18, 28, 0.06);
  --button-subtle-bg: rgba(15, 18, 28, 0.06);
  --button-subtle-hover-bg: rgba(15, 18, 28, 0.1);
  --focus-ring: rgba(43, 111, 208, 0.26);
  --shadow-sm: 0 1px 2px rgba(15, 18, 28, 0.04), 0 4px 12px rgba(15, 18, 28, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 18, 28, 0.05), 0 12px 28px rgba(15, 18, 28, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
  --shadow-xl: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
  --shadow-glow: 0 0 26px rgba(43, 111, 208, 0.2);
  --color-primary: #2b6fd0;
  --color-primary-strong: #1d5cb9;
  --color-primary-bg: rgba(43, 111, 208, 0.1);
  --color-primary-border: rgba(43, 111, 208, 0.26);
  --color-primary-contrast: #fff;
  --color-agent: #b87825;
  --color-agent-strong: #9c6418;
  --color-agent-bg: rgba(184, 120, 37, 0.1);
  --color-agent-border: rgba(184, 120, 37, 0.28);
  --color-agent-glow: rgba(184, 120, 37, 0.18);
  --color-agent-contrast: #2a1c08;
  --color-success: #198754;
  --color-success-bg: rgba(25, 135, 84, 0.1);
  --color-success-border: rgba(25, 135, 84, 0.26);
  --color-warning: #b66200;
  --color-warning-bg: rgba(182, 98, 0, 0.1);
  --color-warning-border: rgba(182, 98, 0, 0.26);
  --color-danger: #c43147;
  --color-danger-bg: rgba(196, 49, 71, 0.1);
  --color-danger-border: rgba(196, 49, 71, 0.26);
  --color-info: #1a7fb8;
  --color-info-bg: rgba(26, 127, 184, 0.1);
  --color-info-border: rgba(26, 127, 184, 0.26);
  --color-muted: rgba(15, 18, 28, 0.66);
  --color-muted-bg: rgba(15, 18, 28, 0.06);
  --color-muted-border: rgba(15, 18, 28, 0.16);
  --color-pill-muted: rgba(15, 18, 28, 0.66);
  --color-pill-muted-bg: rgba(15, 18, 28, 0.06);
  --color-pill-muted-border: rgba(15, 18, 28, 0.16);
  --bg: var(--page-bg);
  --bg-2: var(--page-bg-alt);
  --surface-1: var(--surface-default);
  --surface-2: var(--surface-elevated);
  --surface-3: var(--surface-overlay);
  --surface-inset: var(--input-bg);
  --line: var(--border-default);
  --line-strong: var(--border-strong);
  --line-vivid: var(--border-soft);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --text-4: color-mix(in srgb, var(--text-muted) 70%, transparent);
  --text-on-brand: var(--color-primary-contrast);
  --text-on-agent: var(--color-agent-contrast);
  --brand: var(--color-primary);
  --brand-strong: var(--color-primary-strong);
  --brand-soft: var(--color-primary-bg);
  --brand-line: var(--color-primary-border);
  --brand-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --agent: var(--color-agent);
  --agent-strong: var(--color-agent-strong);
  --agent-soft: var(--color-agent-bg);
  --agent-line: var(--color-agent-border);
  --agent-glow: var(--color-agent-glow);
  --ok: var(--color-success);
  --ok-soft: var(--color-success-bg);
  --ok-line: var(--color-success-border);
  --warn: var(--color-warning);
  --warn-soft: var(--color-warning-bg);
  --warn-line: var(--color-warning-border);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-bg);
  --danger-line: var(--color-danger-border);
  --info: var(--color-info);
  --info-soft: var(--color-info-bg);
  --info-line: var(--color-info-border);
  --muted-soft: var(--color-muted-bg);
  --muted-line: var(--color-muted-border);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  --xw-focus-ring: var(--focus-ring);
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.48;
  --lh-relaxed: 1.65;
  --tracking-eyebrow: 0.1em;
  --tracking-snug: 0.01em;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;
  --row-h: 36px;
  --row-h-sm: 30px;
  --ctrl-h: 34px;
  --ctrl-h-sm: 28px;
  --ctrl-px: 12px;
  --card-pad: 20px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 56px;
  --substrip-h: 34px;
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) {
    --agent: #b87825;
    --agent-strong: #9c6418;
    --agent-soft: rgb(184 120 37 / 10%);
    --agent-line: rgb(184 120 37 / 28%);
    --agent-glow: rgb(184 120 37 / 18%);
    --text-on-agent: #2a1c08;
    --surface: var(--surface-secondary);
    --surface-alt: var(--surface-default);
    --surface-muted: var(--surface-muted-strong);
    --surface-light: #fff;
    --accent: #3b82f6;
    --accent-strong: #2563eb;
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);
    --focus-ring-color: rgba(43, 111, 208, 0.26);
    --page-bg: #f3f4f7;
    --page-bg-alt: #e8ebf1;
    --surface-default: #fff;
    --surface-secondary: #fff;
    --surface-elevated: #fff;
    --surface-overlay: #fff;
    --surface-muted-strong: rgba(15, 18, 28, 0.06);
    --surface-subtle: rgba(15, 18, 28, 0.06);
    --surface-scrim: rgba(15, 18, 28, 0.38);
    --modal-scrim: rgba(15, 18, 28, 0.54);
    --text-primary: #0f121c;
    --text-secondary: rgba(15, 18, 28, 0.66);
    --text-muted: rgba(15, 18, 28, 0.46);
    --text-on-brand: #fff;
    --border-default: rgba(15, 18, 28, 0.08);
    --border-strong: rgba(15, 18, 28, 0.14);
    --border-soft: rgba(15, 18, 28, 0.22);
    --input-bg: rgba(15, 18, 28, 0.04);
    --input-border: rgba(15, 18, 28, 0.14);
    --dropdown-bg: rgba(255, 255, 255, 0.98);
    --modal-bg: #fff;
    --modal-border: rgba(15, 18, 28, 0.14);
    --modal-close-hover-bg: rgba(15, 18, 28, 0.06);
    --table-border-color: rgba(15, 18, 28, 0.08);
    --table-header-bg: #fff;
    --table-header-color: rgba(15, 18, 28, 0.46);
    --table-row-hover-bg: rgba(15, 18, 28, 0.06);
    --table-row-selected-bg: rgba(43, 111, 208, 0.1);
    --table-row-selected-hover-bg: rgba(43, 111, 208, 0.14);
    --action-btn-hover-bg: rgba(15, 18, 28, 0.06);
    --button-subtle-bg: rgba(15, 18, 28, 0.06);
    --button-subtle-hover-bg: rgba(15, 18, 28, 0.1);
    --focus-ring: rgba(43, 111, 208, 0.26);
    --shadow-sm: 0 1px 2px rgba(15, 18, 28, 0.04), 0 4px 12px rgba(15, 18, 28, 0.04);
    --shadow-md: 0 2px 4px rgba(15, 18, 28, 0.05), 0 12px 28px rgba(15, 18, 28, 0.08);
    --shadow-lg: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
    --shadow-xl: 0 4px 8px rgba(15, 18, 28, 0.06), 0 28px 56px rgba(15, 18, 28, 0.1);
    --shadow-glow: 0 0 26px rgba(43, 111, 208, 0.2);
    --color-primary: #2b6fd0;
    --color-primary-strong: #1d5cb9;
    --color-primary-bg: rgba(43, 111, 208, 0.1);
    --color-primary-border: rgba(43, 111, 208, 0.26);
    --color-primary-contrast: #fff;
    --color-agent: #b87825;
    --color-agent-strong: #9c6418;
    --color-agent-bg: rgba(184, 120, 37, 0.1);
    --color-agent-border: rgba(184, 120, 37, 0.28);
    --color-agent-glow: rgba(184, 120, 37, 0.18);
    --color-agent-contrast: #2a1c08;
    --color-success: #198754;
    --color-success-bg: rgba(25, 135, 84, 0.1);
    --color-success-border: rgba(25, 135, 84, 0.26);
    --color-warning: #b66200;
    --color-warning-bg: rgba(182, 98, 0, 0.1);
    --color-warning-border: rgba(182, 98, 0, 0.26);
    --color-danger: #c43147;
    --color-danger-bg: rgba(196, 49, 71, 0.1);
    --color-danger-border: rgba(196, 49, 71, 0.26);
    --color-info: #1a7fb8;
    --color-info-bg: rgba(26, 127, 184, 0.1);
    --color-info-border: rgba(26, 127, 184, 0.26);
    --color-muted: rgba(15, 18, 28, 0.66);
    --color-muted-bg: rgba(15, 18, 28, 0.06);
    --color-muted-border: rgba(15, 18, 28, 0.16);
    --color-pill-muted: rgba(15, 18, 28, 0.66);
    --color-pill-muted-bg: rgba(15, 18, 28, 0.06);
    --color-pill-muted-border: rgba(15, 18, 28, 0.16);
    --bg: var(--page-bg);
    --bg-2: var(--page-bg-alt);
    --surface-1: var(--surface-default);
    --surface-2: var(--surface-elevated);
    --surface-3: var(--surface-overlay);
    --surface-inset: var(--input-bg);
    --line: var(--border-default);
    --line-strong: var(--border-strong);
    --line-vivid: var(--border-soft);
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --text-3: var(--text-muted);
    --text-4: color-mix(in srgb, var(--text-muted) 70%, transparent);
    --text-on-brand: var(--color-primary-contrast);
    --text-on-agent: var(--color-agent-contrast);
    --brand: var(--color-primary);
    --brand-strong: var(--color-primary-strong);
    --brand-soft: var(--color-primary-bg);
    --brand-line: var(--color-primary-border);
    --brand-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --agent: var(--color-agent);
    --agent-strong: var(--color-agent-strong);
    --agent-soft: var(--color-agent-bg);
    --agent-line: var(--color-agent-border);
    --agent-glow: var(--color-agent-glow);
    --ok: var(--color-success);
    --ok-soft: var(--color-success-bg);
    --ok-line: var(--color-success-border);
    --warn: var(--color-warning);
    --warn-soft: var(--color-warning-bg);
    --warn-line: var(--color-warning-border);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-bg);
    --danger-line: var(--color-danger-border);
    --info: var(--color-info);
    --info-soft: var(--color-info-bg);
    --info-line: var(--color-info-border);
    --muted-soft: var(--color-muted-bg);
    --muted-line: var(--color-muted-border);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
    --xw-focus-ring: var(--focus-ring);
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-28: 28px;
    --fs-40: 40px;
    --fs-56: 56px;
    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-base: 1.48;
    --lh-relaxed: 1.65;
    --tracking-eyebrow: 0.1em;
    --tracking-snug: 0.01em;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;
    --s-10: 72px;
    --s-11: 96px;
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-pill: 999px;
    --row-h: 36px;
    --row-h-sm: 30px;
    --ctrl-h: 34px;
    --ctrl-h-sm: 28px;
    --ctrl-px: 12px;
    --card-pad: 20px;
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 56px;
    --topbar-h: 56px;
    --substrip-h: 34px;
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: light;
  }
}
:root[data-density=compact] {
  --row-h: 30px;
  --row-h-sm: 26px;
  --ctrl-h: 30px;
  --ctrl-h-sm: 26px;
  --ctrl-px: 10px;
  --card-pad: 16px;
  --topbar-h: 48px;
  --substrip-h: 30px;
}

:root[data-density=cozy] {
  --row-h: 36px;
  --row-h-sm: 30px;
  --ctrl-h: 34px;
  --ctrl-h-sm: 28px;
  --ctrl-px: 12px;
  --card-pad: 20px;
  --topbar-h: 56px;
  --substrip-h: 34px;
}

:root[data-density=comfortable] {
  --row-h: 44px;
  --row-h-sm: 36px;
  --ctrl-h: 40px;
  --ctrl-h-sm: 32px;
  --ctrl-px: 14px;
  --card-pad: 24px;
  --topbar-h: 64px;
  --substrip-h: 38px;
}

:root[data-accent=signal] {
  --brand: #d8a64a;
  --brand-strong: #c6912f;
  --brand-soft: rgb(216 166 74 / 14%);
  --brand-line: rgb(216 166 74 / 32%);
  --brand-glow: rgb(216 166 74 / 22%);
  --agent: #7ca7f0;
  --agent-strong: #5d8edf;
  --agent-soft: rgb(124 167 240 / 13%);
  --agent-line: rgb(124 167 240 / 30%);
  --agent-glow: rgb(124 167 240 / 22%);
  --text-on-brand: #1b1404;
  --text-on-agent: #061025;
}

:root[data-accent=violet] {
  --brand: #9b8cf5;
  --brand-strong: #8270e8;
  --brand-soft: rgb(155 140 245 / 14%);
  --brand-line: rgb(155 140 245 / 32%);
  --brand-glow: rgb(155 140 245 / 24%);
  --agent: #e8b574;
  --agent-strong: #d49a52;
  --agent-soft: rgb(232 181 116 / 13%);
  --agent-line: rgb(232 181 116 / 30%);
}

:root[data-accent=phosphor] {
  --brand: #7fd6a4;
  --brand-strong: #5fc28a;
  --brand-soft: rgb(127 214 164 / 13%);
  --brand-line: rgb(127 214 164 / 30%);
  --brand-glow: rgb(127 214 164 / 22%);
  --agent: #e8b574;
  --agent-strong: #d49a52;
  --agent-soft: rgb(232 181 116 / 13%);
  --agent-line: rgb(232 181 116 / 30%);
  --text-on-brand: #052013;
}

:root[data-theme=light][data-accent=signal] {
  --brand: #b8730a;
  --brand-strong: #98620a;
  --brand-soft: rgb(184 115 10 / 10%);
  --brand-line: rgb(184 115 10 / 28%);
  --agent: #2b6fd0;
  --agent-strong: #1d5cb9;
  --agent-soft: rgb(43 111 208 / 10%);
  --agent-line: rgb(43 111 208 / 26%);
}

:root[data-theme=light][data-accent=violet] {
  --brand: #6042c2;
  --brand-strong: #4a30a8;
  --brand-soft: rgb(96 66 194 / 10%);
  --brand-line: rgb(96 66 194 / 28%);
}

:root[data-theme=light][data-accent=phosphor] {
  --brand: #176844;
  --brand-strong: #115538;
  --brand-soft: rgb(23 104 68 / 10%);
  --brand-line: rgb(23 104 68 / 28%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light])[data-accent=signal] {
    --brand: #b8730a;
    --brand-strong: #98620a;
    --brand-soft: rgb(184 115 10 / 10%);
    --brand-line: rgb(184 115 10 / 28%);
    --agent: #2b6fd0;
    --agent-strong: #1d5cb9;
    --agent-soft: rgb(43 111 208 / 10%);
    --agent-line: rgb(43 111 208 / 26%);
  }
  :root:not([data-theme=dark], [data-theme=light])[data-accent=violet] {
    --brand: #6042c2;
    --brand-strong: #4a30a8;
    --brand-soft: rgb(96 66 194 / 10%);
    --brand-line: rgb(96 66 194 / 28%);
  }
  :root:not([data-theme=dark], [data-theme=light])[data-accent=phosphor] {
    --brand: #176844;
    --brand-strong: #115538;
    --brand-soft: rgb(23 104 68 / 10%);
    --brand-line: rgb(23 104 68 / 28%);
  }
}
.product-editor__command-center {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.9rem;
}

.product-editor__command-center--compact {
  gap: 0.7rem;
  margin-top: 0;
}

.product-editor__command-grid {
  min-width: 0;
}

.product-editor__command-grid--compact {
  grid-template-columns: minmax(0, 1fr);
}

.product-editor__status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.product-editor__command-center--compact .product-editor__status-strip {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.product-editor__status-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
}

.product-editor__status-pill--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.product-editor__status-pill--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.product-editor__status-pill--error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.product-editor__status-pill-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-secondary);
}

.product-editor__status-pill-copy {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.product-editor__status-pill-copy p {
  margin: 0;
  line-height: 1.45;
  color: var(--text-primary);
}

.product-editor__status-pill-progress {
  display: block;
  position: relative;
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.product-editor__status-pill-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-info));
}

.product-editor__status-pill-action {
  display: inline-flex;
  align-items: flex-start;
}

.product-editor__command-center--compact .product-editor__status-pill {
  padding: 0.7rem 0.75rem;
}

.product-editor__command-center--compact .product-editor__status-pill-icon {
  width: 1.85rem;
  height: 1.85rem;
}

.product-editor__tab-label {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.product-editor__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
}

.product-editor__tab-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.product-editor__tab-badge--accent {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.editor-tab {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}

@media (width <= 820px) {
  .product-editor__status-pill {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .product-editor__status-pill-action {
    grid-column: 2;
  }
}
@media (width <= 640px) {
  .editor-tab {
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .product-editor__tab-label span:last-child {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* ==========================================================================
   PRODUCT EDITOR THEME + FORMAT TUNING
   ========================================================================== */
.product-editor-page {
  padding: 0.95rem 1.15rem 1.6rem;
}

.product-editor__header {
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  padding: 0.78rem 0.95rem;
}

.product-editor__header-main {
  gap: 0.7rem;
}

.product-editor__meta {
  gap: 0.9rem;
}

.product-editor__thumbnail {
  width: 72px;
  height: 72px;
}

.product-editor__title h1 {
  font-size: 1.38rem;
  line-height: 1.22;
}

.product-editor__next-action {
  margin-top: 0.35rem;
  padding: 0.42rem 0.6rem;
}

.product-editor__workspace-strip {
  gap: 0.52rem;
  margin-top: 0.55rem;
}

.editor-section {
  margin-bottom: 1rem;
  padding: 0.98rem 1.05rem;
  border-radius: 1.1rem;
}

.editor-section__header,
.editor-section__subheader {
  margin-bottom: 0.82rem;
}

.product-editor__form {
  gap: 0.88rem;
  padding: 0.95rem;
  border-radius: 1.1rem;
}

.editor-field-stack {
  gap: 0.72rem;
}

.field-editor {
  gap: 0.55rem;
  padding: 0.88rem;
  border-radius: 0.85rem;
}

.field-ai-suggestion,
.offer-ai-suggestion {
  gap: 0.4rem;
  padding: 0.52rem 0.58rem;
  border-radius: 0.74rem;
}

.editor-section--offers .price-calculator__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.editor-section--offers .price-calculator__row--total .price-calculator__value {
  font-size: 0.94rem;
}

.editor-section--offers .price-calculator__row > label small {
  display: block;
  margin-top: 0.15rem;
}

.product-editor-overview-card__badge,
.workspace-summary-card__badge {
  letter-spacing: 0.01em;
}

@media (width >= 1320px) {
  .product-editor__basics-grid {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 1.04fr);
  }
}
@media (width <= 760px) {
  .editor-section--offers .price-calculator__row {
    padding: 0.5rem 0.1rem;
  }
  .editor-section--offers .price-calculator__row > label {
    font-size: 0.86rem;
  }
  .editor-section--offers .price-calculator__value {
    font-size: 0.9rem;
  }
  .editor-section--offers .price-calculator__input {
    width: min(100%, 10rem);
  }
  .editor-section--offers .price-calculator__vat-select {
    margin-left: 0.35rem;
  }
}
/* Theme-collapsed: the paired dark/light navy-vs-white blocks below were
   flattened onto single token-driven rules. Surfaces use --surface-*, borders
   --line(-strong/-vivid), brand accents --brand(-soft/-line), text --text(-2).
   Shadows keep theme-neutral black alphas. (Flattened gradients → browser-check.) */
.product-editor__header {
  border-color: var(--line-strong);
  background: var(--surface-1);
  box-shadow: 0 20px 36px -28px rgba(2, 6, 23, 0.75);
}

.product-editor__tabbar {
  border-color: var(--brand-line);
  background: var(--surface-1);
  box-shadow: 0 16px 28px -24px rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(8px);
}

.editor-section {
  border-color: var(--line);
  background: var(--surface-1);
}

.product-editor-overview-card {
  border-color: var(--line-vivid);
  background: var(--surface-1);
}

.product-editor-overview-card__header p,
.product-editor-overview-ai-item p {
  color: var(--text-2);
}

.product-editor-overview-empty {
  border-color: var(--line-vivid);
  background: var(--surface-inset);
}

.workspace-summary-card__compact-list li,
.product-editor-overview-summary li {
  border-color: var(--muted-line);
  background: var(--surface-2);
  color: var(--text-2);
}

.workspace-summary-card__compact-list li strong,
.product-editor-overview-summary li strong {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.field-ai-suggestion {
  border-color: var(--brand-line);
  background: var(--surface-2);
}

.field-ai-suggestion__scope {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.offer-ai-suggestion {
  border-color: var(--brand-line);
  background: var(--surface-2);
}

.offer-ai-suggestion__price-inline {
  border-color: var(--brand-line);
  background: var(--surface-2);
}

.offer-ai-suggestion__badge {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.offer-ai-suggestion__value {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.offer-ai-suggestion__price-option {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.offer-ai-suggestion__price-option.is-selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.recommendation-comparison__row {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.recommendation-comparison__value {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.recommendation-comparison__value--suggested {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.recommendation-comparison__split-divider {
  box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.78), 0 8px 16px -11px rgba(2, 6, 23, 0.9);
}

.editor-section--offers .offer-section {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.product-editor-page--standard .editor-section--offers .offer-section {
  border-color: var(--border-soft);
  background: transparent;
}

.product-editor-page--standard .editor-section--offers .offer-effective-card {
  border-color: var(--line-strong);
  background: var(--surface-inset);
}

.editor-section--offers .offer-field__label {
  color: var(--text-2);
}

.editor-section--offers .offer-field__radio,
.editor-section--offers .offer-field__checkbox {
  border-color: var(--line-vivid);
  background: var(--surface-2);
}

.editor-section--offers .offer-field__checkbox span {
  color: var(--text-2);
}

.editor-section--offers .price-calculator__row > label {
  color: var(--text-2);
}

.editor-section--offers .price-calculator__value {
  color: var(--text);
}

.editor-section--offers .offer-actions {
  border-color: var(--brand-line);
  background: var(--surface-2);
  box-shadow: 0 20px 28px -24px rgba(2, 6, 23, 0.8);
}

.product-editor-page--standard .editor-section--basic-info .field-editor,
.product-editor-page--standard .editor-section--basic-info .product-identity-panel {
  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
   PRODUCT EDITOR FINAL UX POLISH
   ========================================================================== */
.product-editor__external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.product-editor__external-link:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.product-editor__actions-primary .product-editor__action-btn--save,
.product-editor__actions-primary .product-editor__action-btn--push {
  min-height: 2.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.72rem;
}

.product-editor__actions-primary .product-editor__action-btn--save {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--text-primary);
}

.product-editor__actions-primary .product-editor__action-btn--save:hover:not(:disabled) {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.product-editor__actions-primary .product-editor__action-btn--save:disabled,
.product-editor__actions-primary .product-editor__action-btn--push:disabled {
  opacity: 70%;
  cursor: not-allowed;
}

.product-editor__actions-secondary .product-editor__action-btn {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--text-primary);
}

.product-editor__actions-secondary .product-editor__action-btn:hover:not(:disabled) {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.product-editor__actions-primary .product-editor__action-btn--save:focus-visible,
.product-editor__actions-primary .product-editor__action-btn--push:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.field-editor__suggestion .field-ai-suggestion {
  gap: 0.35rem;
  padding: 0.5rem 0.56rem;
}

.field-editor__suggestion .recommendation-comparison__row {
  padding: 0.36rem 0.44rem;
}

.field-editor__suggestion .field-ai-suggestion__actions .btn {
  min-height: 1.95rem;
  padding: 0.28rem 0.58rem;
  font-size: 0.75rem;
}

/* ==========================================================================
   PRODUCT EDITOR AI UX CLARITY
   ========================================================================== */
.editor-section--ai-workspace .editor-section__header {
  gap: 0.9rem;
  align-items: flex-start;
}

.editor-section--ai-workspace .editor-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.52rem 0.62rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.78rem;
  background: var(--brand-soft);
}

.editor-section--ai-workspace .ai-grid {
  gap: 0.85rem;
}

.ai-scope-filter__hint {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-primary);
}

.product-editor-sidebar__meta {
  align-items: flex-start;
}

.product-editor-sidebar__meta-copy {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.product-editor-sidebar__timestamp {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.product-editor-sidebar__item--non-actionable {
  border-color: var(--line-strong);
  background: var(--muted-soft);
}

.product-editor-sidebar__note {
  margin: -0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ai-scope-card__recommendation--non-actionable {
  border-color: var(--muted-line);
  background: var(--muted-soft);
}

.ai-scope-card__recommendation--non-actionable .ai-scope-card__apply {
  border-color: var(--line-vivid);
}

@media (width <= 820px) {
  .editor-section--ai-workspace .editor-section__actions {
    justify-content: flex-start;
  }
  .product-editor-sidebar__timestamp {
    margin-left: 0;
  }
}
/* ==========================================================================
   PRODUCT EDITOR AI RECOVERY + MOBILE HIERARCHY
   ========================================================================== */
.product-editor__empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.2rem;
}

.product-editor__empty-actions .btn {
  min-width: 0;
}

.product-editor-overview-actions--empty {
  margin-top: 0.45rem;
}

.product-editor__workspace-card {
  min-height: 100%;
}

.workspace-summary-card--accent .workspace-summary-card__empty {
  padding: 0.4rem 0.55rem;
  border: 1px dashed var(--brand-line);
  border-radius: 0.6rem;
  background: var(--brand-soft);
  font-size: 0.78rem;
}

.workspace-summary-card--accent .workspace-summary-card__actions {
  margin-top: 0.1rem;
}

.product-editor__hint .product-editor__hint-actions .btn {
  color: inherit;
  text-decoration: underline;
}

@media (width <= 1180px) {
  .product-editor__workspace-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-editor__workspace-card--media {
    grid-column: 1/-1;
  }
}
@media (width <= 780px) {
  .product-editor-page {
    padding: 0.72rem 0.72rem 1.35rem;
  }
  .product-editor__header {
    padding: 0.72rem 0.78rem;
    border-radius: 0.95rem;
  }
  .product-editor__header-main {
    gap: 0.6rem;
  }
  .product-editor__meta {
    gap: 0.7rem;
  }
  .product-editor__thumbnail {
    width: 58px;
    height: 58px;
  }
  .product-editor__title h1 {
    font-size: 1.06rem;
    line-height: 1.25;
    -webkit-line-clamp: 3;
  }
  .product-editor__actions {
    gap: 0.42rem;
    align-items: stretch;
    min-width: 0;
  }
  .product-editor__actions-secondary {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 0.1rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .product-editor__actions-secondary .product-editor__action-btn {
    flex: 0 0 auto;
  }
  .product-editor-page--mc .product-editor__actions-secondary {
    padding-bottom: 0;
    overflow-x: visible;
    scrollbar-width: none;
  }
  .product-editor-page--mc .workspace-action-bar__actions {
    flex-wrap: wrap;
  }
  .product-editor-page--mc .product-editor__actions-secondary,
  .product-editor-page--mc .product-editor__actions-primary {
    flex: 1 1 100%;
    width: 100%;
  }
  .product-editor__actions-primary {
    justify-content: stretch;
  }
  .product-editor__actions-primary .product-editor__action-btn--save,
  .product-editor__actions-primary .product-editor__push-menu {
    flex: 1 1 100%;
  }
  .product-editor__actions-primary .product-editor__action-btn--push {
    width: 100%;
  }
  .product-editor__workspace-strip {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .product-editor__workspace-card {
    padding: 0.6rem 0.62rem;
  }
  .workspace-summary-card__compact-list li {
    font-size: 0.76rem;
  }
  .product-editor__next-action {
    gap: 0.45rem;
    padding: 0.52rem 0.58rem;
  }
  .product-editor__next-action .next-action__actions {
    width: 100%;
  }
  .product-editor__next-action .next-action__actions .btn {
    flex: 1 1 100%;
  }
  .product-editor__tabbar {
    position: sticky;
    top: 0.45rem;
    z-index: 12;
    gap: 0.34rem;
    padding: 0.34rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.78rem;
    background: var(--surface-1);
    backdrop-filter: blur(6px);
  }
  .editor-tab {
    white-space: nowrap;
  }
  .product-editor__empty-actions {
    justify-content: stretch;
    width: 100%;
  }
  .product-editor__empty-actions .btn {
    flex: 1 1 100%;
  }
}
/* Theme-collapsed: light overrides for the accent empty-state and the sticky
   tabbar glass removed — base rules now use --brand-soft/-line + --surface-1. */
/* ==========================================================================
   PRODUCT EDITOR – SUBTLE AI INTEGRATION
   Replaces heavy AI scope / confidence UI with fluent inline hints.
   ========================================================================== */
/* ── Inline sparkle button (Optimize / Rewrite) ───────────────────────────── */
.product-editor-inline-ai-btn {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.1));
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(139, 92, 246);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.product-editor-inline-ai-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.16));
  color: rgb(124, 58, 237);
}

.product-editor-inline-ai-btn .app-icon {
  font-size: 0.82rem;
}

:root[data-theme=dark] .product-editor-inline-ai-btn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.14));
  color: rgb(196, 181, 253);
}

:root[data-theme=dark] .product-editor-inline-ai-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(59, 130, 246, 0.22));
  color: rgb(221, 214, 254);
}

/* ── Redesigned sidebar: AI Insights card ──────────────────────────────────── */
.product-editor-sidebar--insights {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--surface);
}

.product-editor-sidebar--insights .product-editor-sidebar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.1));
  font-size: 1.1rem;
  color: rgb(139, 92, 246);
}

.product-editor-sidebar--insights .product-editor-sidebar__body h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.product-editor-sidebar--insights .product-editor-sidebar__body p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.product-editor-sidebar--insights .product-editor-sidebar__actions {
  padding-top: 0.25rem;
}

.product-editor-sidebar--insights .product-editor-sidebar__actions .btn {
  justify-content: center;
  width: 100%;
}

:root[data-theme=dark] .product-editor-sidebar--insights .product-editor-sidebar__icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.14));
  color: rgb(196, 181, 253);
}

/* ── Simplified field suggestion callout ───────────────────────────────────── */
.field-ai-suggestion__body {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(59, 130, 246, 0.04));
}

.field-ai-suggestion__body .field-ai-suggestion__icon {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: rgb(139, 92, 246);
}

.field-ai-suggestion__body .field-ai-suggestion__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.field-ai-suggestion__body .btn {
  flex: 0 0 auto;
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-import-page {
  min-height: 0;
}

.product-import-shell {
  min-height: 0;
}

.product-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(18rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.product-import-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.product-import-card--csv {
  min-height: 100%;
}

.product-import-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.product-import-card__eyebrow {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-import-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.product-import-card__subtitle {
  max-width: 42rem;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.product-import-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-import-select {
  width: min(100%, 28rem);
}

.product-import-selected {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-muted);
}

.product-import-selected__label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-import-selected__value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-import-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.product-import-upload__input {
  display: none;
}

.product-import-file {
  display: inline-flex;
  flex: 1 1 16rem;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--border-soft);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-muted);
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.product-import-file span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.import-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.import-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: 0.375rem;
}

.import-mapping-item {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0.5rem 0.62rem;
  border: 1px solid var(--border-soft);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-muted);
  font-size: 0.8rem;
  color: var(--text-primary);
}

.import-mapping-item > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-mapping-item.is-ok {
  border-color: color-mix(in srgb, var(--ok) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--ok) 12%, var(--surface-muted));
}

.import-mapping-item.is-missing {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-muted));
}

.import-mapping-status {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}

.import-preview-table {
  overflow: hidden;
  border-radius: 0.75rem;
}
.import-preview-table .inspection-table {
  font-size: 0.8rem;
}

.product-import-status {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (width <= 980px) {
  .product-import-grid {
    grid-template-columns: 1fr;
  }
}
@media (width <= 640px) {
  .product-import-card {
    padding: 0.75rem;
  }
  .product-import-card__header {
    flex-direction: column;
  }
  .product-import-actions,
  .product-import-actions .btn,
  .product-import-upload__trigger {
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.docs-ai-page {
  display: block;
  min-width: 0;
  padding-block-end: 1.5rem;
}

.docs-ai-page__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

.docs-ai-page__header {
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--agent) 10%), var(--surface));
  box-shadow: var(--shadow-sm);
}

.docs-ai-page__header .xw-page-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.docs-ai-page__header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.1;
  color: var(--text-primary);
}

.docs-ai-page__header .xw-page-header__subtitle {
  max-width: 44rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.docs-ai-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.docs-ai-page__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.docs-ai-page__card h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--text-primary);
}

.docs-ai-page__card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.docs-ai-page__back {
  white-space: nowrap;
}

@media (width <= 980px) {
  .docs-ai-page__grid {
    grid-template-columns: 1fr;
  }
}
@media (width <= 640px) {
  .docs-ai-page__header,
  .docs-ai-page__card {
    padding: 0.75rem;
  }
  .docs-ai-page__back {
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Chat Components - Theme-aware */
.chat-message {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.chat-message-user {
  margin-left: 2rem;
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.chat-message-assistant {
  margin-right: 2rem;
  border-color: var(--line);
  background: var(--surface-1);
}

.chat-message-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-message-role {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.chat-icon {
  font-size: 1.1rem;
}

.chat-message-time {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.chat-message-content {
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.chat-message-action-note {
  margin: 0.15rem 0 0;
  font-size: 0.73rem;
  color: var(--text-muted);
}

.chat-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.chat-message-actions__item {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.22rem 0.52rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
}

.chat-message-actions__label {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--text-secondary);
}

.chat-message-actions__status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--info);
}

.chat-message-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
}

.chat-message-diagnostics__item {
  max-width: 100%;
  padding: 0.18rem 0.46rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-inset);
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.chat-message-permission {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.75rem;
  background: var(--brand-soft);
}

.chat-message-permission__question {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-message-permission__summary {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.chat-message-permission__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chat-message-preview {
  margin-top: 0.75rem;
}

.chat-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.chat-input-wrapper {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.chat-input {
  flex: 1;
  min-height: 48px;
  max-height: 240px;
  padding: 0.75rem;
  overflow-y: auto;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  resize: none;
}
.chat-input::-moz-placeholder {
  color: var(--text-muted);
}
.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

.chat-input:disabled {
  opacity: 60%;
  cursor: not-allowed;
}

.chat-send-btn {
  display: grid;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--brand) 80%, transparent);
  color: var(--text-inverse);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  place-items: center;
  cursor: pointer;
}

.chat-send-btn:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.chat-send-btn:hover:not(:disabled) {
  box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--brand) 90%, transparent);
  transform: translateY(-2px);
}

.chat-input-meta {
  display: flex;
  justify-content: flex-end;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.product-preview-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.preview-icon {
  font-size: 1.2rem;
}

.preview-title {
  font-weight: 600;
}

.product-preview-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.preview-change {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
}

.preview-change-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.preview-change-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.preview-change-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-change-column-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.preview-change-column-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.preview-change-value {
  line-height: 1.5;
  color: var(--text-primary);
}

.preview-change-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Editable preview fields */
.preview-change-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  background: var(--input-bg);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
  resize: vertical;
}
.preview-change-input::-moz-placeholder {
  color: var(--text-muted);
}
.preview-change-input::placeholder {
  color: var(--text-muted);
}
.preview-change-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.preview-change-textarea {
  min-height: 120px;
}

.preview-html {
  font-size: 0.9rem;
}

.preview-html--readonly {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-1);
  color: var(--text-primary);
}

.preview-html-editor {
  margin: 0;
}

.preview-html-editor .settings-field-content {
  margin: 0;
}

.preview-html-editor .html-editor {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
}

.preview-html-editor .ql-toolbar + .ql-toolbar {
  display: none;
}

.preview-html-editor .html-editor .ql-editor {
  min-height: 180px;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preview-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.85rem;
  color: var(--brand);
}

.preview-tags--editable {
  align-items: flex-start;
  padding: 0.5rem;
  border: 1px dashed var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.preview-tag--editable {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid var(--brand-line);
}

.preview-tag-text {
  white-space: nowrap;
}

.preview-tag-remove {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  place-items: center;
  cursor: pointer;
}

.preview-tag-remove:hover {
  background: var(--action-btn-hover-bg);
}

.preview-tag-input {
  display: flex;
  flex: 1 1 220px;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.preview-tag-input-field {
  flex: 1 1 200px;
}

.preview-tag-input .pill-btn {
  white-space: nowrap;
}

.preview-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.preview-attributes tr:not(:last-child) {
  border-bottom: 1px solid var(--border-soft);
}

.preview-attributes td {
  padding: 0.5rem 0.75rem;
}

.preview-attributes .attr-key {
  font-weight: 600;
  color: var(--text-secondary);
}

.preview-attributes .attr-value {
  color: var(--text-primary);
}

.preview-attributes-editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.preview-attribute-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.preview-attribute-input {
  min-width: 0;
}

.preview-attribute-remove {
  display: grid;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  place-items: center;
  cursor: pointer;
}

.preview-attribute-remove:hover {
  background: var(--action-btn-hover-bg);
}

.preview-attribute-add {
  align-self: flex-start;
}

.preview-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.preview-image-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
}

.preview-image-item .image-action {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.preview-image-item .image-position {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.preview-img {
  width: 100%;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
  background: var(--brand-soft);
}

.product-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.quick-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.35);
}

.quick-actions-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-weight: 600;
  color: var(--text-primary);
}

.quick-actions-icon {
  font-size: 1.2rem;
}

.quick-actions-title {
  font-size: 1rem;
  font-weight: 600;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

/* Product chat page layout */
.chat-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.35rem;
}

.products-page--chat {
  height: calc(100dvh - 4.5rem);
  min-height: 0;
  max-height: calc(100dvh - 4.5rem);
  box-sizing: border-box;
  overflow: hidden;
}

.chat-page-layout--agent {
  flex: 1;
  align-items: stretch;
  height: auto;
  min-height: 0;
  max-height: 100%;
}

.chat-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.chat-page-layout--agent .chat-main {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.chat-header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.chat-header__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
}

.chat-permission-state {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  max-width: 100%;
  padding: 0.25rem 0.3rem 0.25rem 0.65rem;
  border: 1px solid var(--info-line);
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--text-primary);
}

.chat-permission-state__label {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: normal;
}

.chat-permission-state__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-secondary);
  cursor: pointer;
}

.chat-permission-state__clear:hover {
  border-color: var(--info-line);
  color: var(--text-primary);
}

.chat-assistant-notice {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--danger-line);
  border-radius: 1rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--danger) 16%, transparent), color-mix(in srgb, var(--warn) 9%, transparent));
  color: var(--text-primary);
}

.chat-assistant-notice__header {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}

.chat-assistant-notice__meta {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.chat-assistant-notice__title {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
}

.chat-assistant-notice__status {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.52rem;
  border: 1px solid var(--danger-line);
  border-radius: 999px;
  background: var(--danger-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.chat-assistant-notice p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.chat-assistant-notice__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chat-product-info h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.chat-product-meta {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.chat-conversation-shell {
  display: block;
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.chat-assistant-notice__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-secondary);
  cursor: pointer;
}

.chat-assistant-notice__close:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.chat-input-area {
  flex-shrink: 0;
}

.chat-conversation {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0.9rem 1.6rem 0.9rem 1rem;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.chat-conversation::-webkit-scrollbar {
  width: 10px;
}

.chat-conversation::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--surface-inset);
}

.chat-conversation::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 55%, transparent);
  background-clip: padding-box;
}

.chat-conversation__history-note {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chat-conversation__message-anchor {
  scroll-margin-top: 1rem;
  margin-bottom: 0.22rem;
}

.chat-conversation__message-anchor:last-child {
  margin-bottom: 0;
}

.chat-overview {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.chat-overview--rail {
  display: flex;
  position: absolute;
  top: 0.35rem;
  right: 0.1rem;
  bottom: 0.35rem;
  flex-direction: column;
  gap: 0.22rem;
  align-items: stretch;
  justify-content: flex-end;
  width: 14px;
  min-height: 0;
  max-height: calc(100% - 0.7rem);
  padding: 0.1rem;
  overflow: hidden;
  border-left: 0;
  background: transparent;
  overscroll-behavior: none;
}

.chat-overview--micro {
  display: none;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  padding: 0.35rem 0.28rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-left: 1px solid var(--line);
  background: var(--surface-inset);
}

.chat-overview--micro .chat-overview__list {
  gap: 0.16rem;
  min-height: 0;
}

.chat-overview--micro .chat-overview__entry {
  gap: 0.06rem;
  padding: 0.2rem 0.24rem;
  border-radius: 0.5rem;
}

.chat-overview--micro .chat-overview__entry-meta {
  font-size: 0.625rem;
  line-height: 1.15;
}

.chat-overview--micro .chat-overview__entry-text {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.chat-overview--rail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.chat-overview__marker {
  display: inline-flex;
  justify-content: center;
  min-height: 14px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.chat-overview__marker-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  opacity: 70%;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.chat-overview__marker--assistant .chat-overview__marker-dot {
  background: var(--brand);
}

.chat-overview__marker--user .chat-overview__marker-dot {
  background: var(--info);
}

.chat-overview__marker:hover .chat-overview__marker-dot,
.chat-overview__marker--active .chat-overview__marker-dot {
  opacity: 100%;
  transform: scale(1.22);
}

.chat-overview--list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.5rem 0.45rem;
  overflow-y: auto;
  background: var(--surface-inset);
}

.chat-overview--list::-webkit-scrollbar {
  width: 8px;
}

.chat-overview__title {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.chat-overview__empty {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.chat-overview__list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-overview__item {
  margin: 0;
}

.chat-overview__entry {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  width: 100%;
  padding: 0.22rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-overview__entry-meta {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.chat-overview__entry-text {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-overview__item--assistant .chat-overview__entry {
  border-left: 2px solid color-mix(in srgb, var(--brand) 58%, transparent);
}

.chat-overview__item--user .chat-overview__entry {
  border-left: 2px solid color-mix(in srgb, var(--info) 62%, transparent);
}

.chat-overview__entry:hover,
.chat-overview__item--active .chat-overview__entry {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.chat-page-layout--agent .chat-message-header,
.chat-page-layout--agent .chat-message-content,
.chat-page-layout--agent .chat-input,
.chat-page-layout--agent .chat-empty-text,
.chat-page-layout--agent .chat-assistant-notice p,
.chat-page-layout--agent .chat-product-meta,
.chat-page-layout--agent .typing-text,
.chat-page-layout--agent .applied-changes-summary p,
.chat-page-layout--agent .agent-canvas-table,
.chat-page-layout--agent .agent-canvas-timeline,
.chat-page-layout--agent .chat-assistant-notice__actions .pill-btn {
  font-size: 0.75rem;
}

.chat-page-layout--agent .chat-message-time,
.chat-page-layout--agent .chat-assistant-notice__status,
.chat-page-layout--agent .chat-conversation__history-note {
  font-size: 0.6875rem;
}

.chat-page-layout--agent .chat-message {
  padding: 0.72rem 0.85rem;
}

.chat-page-layout--agent .chat-input {
  min-height: 42px;
}

.chat-page-layout--agent .chat-send-btn {
  width: 42px;
  height: 42px;
}

.chat-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

.chat-empty-icon {
  margin: 0;
  font-size: 3rem;
}

.chat-empty-text {
  max-width: 400px;
  margin: 0;
}

.chat-typing-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--brand-soft);
  color: var(--text-secondary);
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

.typing-text {
  margin-left: 0.5rem;
  font-size: 0.9rem;
}

.chat-typing-feed {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  width: 100%;
  margin: 0.25rem 0 0 2.2rem;
  padding: 0;
  list-style: none;
}

.chat-typing-feed li {
  font-size: 0.73rem;
  line-height: 1.2;
  color: var(--text-muted);
}

.chat-typing-steps {
  margin-top: 0.35rem;
  margin-left: 1.9rem;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text-muted);
}
.chat-typing-steps ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-typing-steps li {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

@keyframes typing {
  0%, 80%, 100% {
    opacity: 30%;
    transform: scale(0);
  }
  40% {
    opacity: 100%;
    transform: scale(1);
  }
}
.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.chat-sidebar--canvas {
  align-content: flex-start;
  min-height: 0;
  max-height: 100%;
  padding-right: 0.35rem;
  overflow-y: auto;
}

.chat-sidebar--canvas::-webkit-scrollbar {
  width: 10px;
}

.applied-changes-summary {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
}

.applied-changes-summary h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.applied-time {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.applied-changes-summary p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.applied-changes-summary strong {
  color: var(--text-primary);
}

.agent-canvas-widget {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agent-canvas-widget--inline {
  margin-top: 0.55rem;
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.agent-canvas-kpi-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  list-style: none;
}

.agent-canvas-kpi-list li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.agent-canvas-kpi-list strong {
  color: var(--text-primary);
}

.agent-canvas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.agent-canvas-table-wrap {
  overflow-x: auto;
}

.agent-canvas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.agent-canvas-table th,
.agent-canvas-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.agent-canvas-table thead th {
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
  color: var(--text-primary);
}

.agent-canvas-table tbody td {
  border-bottom: 1px dashed var(--border-soft);
}

.agent-canvas-table__override-head,
.agent-canvas-table__override-cell {
  min-width: 11rem;
}

.agent-canvas-settings-input {
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  background: var(--input-bg);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.agent-canvas-settings-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}

.agent-canvas-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.agent-canvas-settings-actions__hint {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.agent-canvas-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.1rem;
}

.agent-canvas-media-carousel {
  display: grid;
  gap: 0.7rem;
  align-items: start;
  padding-bottom: 0;
  overflow: visible;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.agent-canvas-media-carousel::-webkit-scrollbar {
  height: 0;
}

.agent-canvas-media-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
}

.agent-canvas-media-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.agent-canvas-media-card img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}

.agent-canvas-media-carousel--single {
  grid-template-columns: minmax(260px, min(100%, 640px));
  justify-content: start;
}

.agent-canvas-media-card--hero {
  max-width: min(100%, 640px);
}

.agent-canvas-media-card--hero img {
  aspect-ratio: auto;
  min-height: 0;
  max-height: min(72vh, 720px);
  -o-object-fit: contain;
     object-fit: contain;
  background: var(--surface-inset);
}

.agent-canvas-media-card figcaption {
  margin-top: 0;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.agent-canvas-media img {
  display: block;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.agent-canvas-mermaid-canvas {
  min-height: 170px;
  margin: 0;
  padding: 0.75rem;
  overflow: auto;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  color: var(--text-primary);
  scroll-padding: 0.75rem;
  cursor: grab;
}

.agent-canvas-mermaid-canvas.is-dragging {
  cursor: grabbing;
}

.agent-canvas-mermaid-canvas svg {
  display: block;
  max-width: none;
  height: auto;
}

.agent-canvas-mermaid-canvas :where(.flow-mermaid__loading, .flow-mermaid__error) {
  font-size: 0.74rem;
}

.agent-canvas-mermaid {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  font-family: ui-monospace, sfmono-regular, menlo, monaco, "Cascadia Mono", "Segoe UI Mono", consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.agent-canvas-mermaid-canvas--impact,
.agent-canvas-mermaid--impact {
  border-style: solid;
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.agent-canvas-html-widget {
  padding: 0.7rem;
  overflow-x: auto;
  border: 1px dashed var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-inset);
}

.agent-canvas-html-widget :where(table) {
  width: 100%;
  border-collapse: collapse;
}

.agent-canvas-html-widget :where(th, td) {
  padding: 0.35rem 0.45rem;
  border-bottom: 1px dashed var(--border-soft);
  text-align: left;
}

@media (width <= 1280px) {
  .chat-page-layout {
    grid-template-columns: 1fr;
  }
  .chat-conversation-shell {
    display: block;
  }
  .chat-sidebar {
    flex-flow: row wrap;
  }
  .applied-changes-summary {
    flex: 1;
    min-width: 300px;
  }
}
@media (width <= 768px) {
  .products-page--chat {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }
  .chat-page-layout {
    gap: 1.15rem;
    margin-top: 1rem;
  }
  .chat-page-layout--agent {
    height: auto;
    max-height: none;
  }
  .chat-main {
    gap: 1rem;
    min-height: 0;
    overflow: visible;
  }
  .chat-header {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }
  .chat-header__actions {
    justify-content: flex-start;
  }
  .chat-conversation-shell {
    grid-template-columns: 1fr;
  }
  .chat-overview--rail {
    display: none;
  }
  .chat-overview--micro {
    display: none;
  }
  .chat-assistant-notice {
    padding: 0.85rem 0.9rem;
  }
  .chat-assistant-notice__header {
    flex-wrap: wrap;
  }
  .chat-message-user {
    margin-left: 0.5rem;
  }
  .chat-message-assistant {
    margin-right: 0.5rem;
  }
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  .agent-canvas-media-carousel {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }
}
/* Mission Control Phase 6.1b product chat panel */
.product-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
}

.product-chat--standalone {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.product-chat__layout,
.product-chat__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.product-chat__head.chat-header {
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.product-chat__avatar.xw-avatar {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--agent-line);
  border-radius: var(--r-pill);
  background: var(--agent-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--agent);
}

.product-chat__agent-copy {
  min-width: 0;
}

.product-chat__agent-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.product-chat__agent-name {
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--text);
}

.product-chat__head .chat-product-info h3 {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 650;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--text);
}

.product-chat__head .chat-product-meta,
.product-chat__head .chat-permission-state__label {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.product-chat__body.chat-conversation-shell {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-chat__body .chat-conversation {
  gap: 14px;
  padding: 16px;
  scrollbar-gutter: stable;
}

.product-chat__foot.chat-input-area {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: transparent;
}

.product-chat .quick-actions-panel {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.product-chat .quick-actions-header {
  display: none;
}

.product-chat .quick-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-chat .chat-quick-action.xw-btn {
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: none;
  font-size: var(--fs-11);
  font-weight: 500;
  color: var(--text-2);
}

.product-chat .chat-quick-action.xw-btn:hover:not(:disabled) {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}

.product-chat .chat-quick-action .action-icon {
  display: none;
}

.product-chat .chat-message.xw-message {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-chat .xw-message--user {
  flex-direction: row-reverse;
}

.product-chat .chat-message__stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.product-chat .chat-message-header {
  padding: 0 2px;
  font-size: var(--fs-11);
  color: var(--text-3);
}

.product-chat .chat-message-role {
  gap: 4px;
}

.product-chat .xw-message__bubble {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text);
}

.product-chat .xw-message--user .xw-message__bubble {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.product-chat .xw-message--agent .xw-message__bubble {
  border-color: var(--agent-line);
}

.product-chat .chat-message-diagnostics,
.product-chat .chat-message-actions,
.product-chat .chat-message-permission,
.product-chat .chat-message-preview {
  margin-top: 10px;
}

.product-chat .xw-suggestion,
.product-chat .applied-changes-summary.agent-canvas-widget--inline {
  padding: 12px;
  border: 1px solid var(--agent-line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: none;
}

.product-chat .product-chat__composer-row.chat-input-wrapper {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-chat .chat-input.xw-input {
  min-height: var(--ctrl-h);
  padding: 9px 10px;
  border-color: var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-size: var(--fs-13);
  color: var(--text);
}

.product-chat .chat-send-btn.btn {
  width: var(--ctrl-h);
  height: var(--ctrl-h);
  min-height: var(--ctrl-h);
  border-radius: var(--r-sm);
  box-shadow: none;
}

.product-chat .chat-input-meta {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--text-4);
}

@media (width <= 1200px) {
  .product-chat {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}
@media (width <= 640px) {
  .product-chat {
    max-height: none;
  }
  .product-chat__head.chat-header {
    align-items: stretch;
    padding: 12px;
  }
  .product-chat__body .chat-conversation,
  .product-chat__foot.chat-input-area {
    padding: 12px;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Theme and presentation-specific contracts for the AI chat family. */
.ai-overview-card {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  font-family: var(--font-sans);
}

.ai-overview-card__body {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.ai-overview-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.ai-overview-card__image {
  width: 100%;
  max-width: 18.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-secondary);
  box-shadow: var(--shadow-sm);
  -o-object-fit: cover;
     object-fit: cover;
}

.ai-overview-card__facts {
  display: grid;
  gap: 0.25rem;
}

.ai-overview-card__fact {
  margin: 0;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ai-overview-card__fact strong {
  color: var(--text-primary);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
@media (max-width: 1024px) {
  .health-report-summary {
    grid-template-columns: 1fr;
  }
}
.health-report-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
  margin-top: 1rem;
}

.health-score-card,
.health-score-chart {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}

.health-score-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.health-score-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.health-score-card__top {
  margin-top: 0.5rem;
}
.health-score-card__top h3 {
  margin-bottom: 0.375rem;
  font-size: 0.95rem;
}
.health-score-card__top ul {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.health-score-card__top li {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.9rem;
}

.health-score-chart h3 {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.health-score-chart__empty {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.health-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.health-run-summary__label {
  width: 180px;
}

.health-report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}
.health-report-filters select {
  min-width: 140px;
}

.health-report-filters__toggle {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.9rem;
}

.health-report-queue {
  display: grid;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
}

@media (max-width: 1024px) {
  .health-report-queue__grid {
    grid-template-columns: 1fr;
  }
}
.health-report-queue__grid {
  display: grid;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.queue-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}

.queue-card--wide {
  grid-column: 1/-1;
}

.queue-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.queue-card__header h2 {
  margin: 0;
  font-size: 1rem;
}

.queue-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cycle-progress {
  display: grid;
  gap: 0.5rem;
}

.cycle-progress__bar {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}
.cycle-progress__bar span {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--info) 0%, var(--ok) 100%);
  transition: width 0.2s ease;
}

.cycle-progress__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.health-report-progress-banner {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ok-line);
  border-radius: 0.75rem;
  background: var(--ok-soft);
}

.health-report-progress-banner__info {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.health-report-progress-banner__ean {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.health-report-progress-banner__bar {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}
.health-report-progress-banner__bar span {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--info) 0%, var(--ok) 100%);
  transition: width 0.3s ease;
}

.health-report-progress-banner__pct {
  min-width: 3ch;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  color: var(--text-secondary);
}

.health-reports-page--mc {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.health-reports-page--mc .health-reports-grid-shell .xw-dg-body {
  overflow: visible;
}

.health-reports-page--mc .health-report-progress-banner {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.health-reports-page--mc .health-report-progress-banner__bar {
  background: var(--muted-soft);
}

.health-reports-page--mc .health-report-progress-banner__bar span {
  background: var(--ok);
}

.health-reports-page--mc .health-reports-overview {
  display: grid;
  gap: var(--s-4);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-4) var(--s-6);
}

@media (max-width: 1024px) {
  .health-reports-page--mc .health-reports-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .health-reports-page--mc .health-reports-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.health-reports-page--mc .health-reports-kpi-grid {
  display: grid;
  gap: var(--s-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .health-reports-page--mc .health-reports-split {
    grid-template-columns: 1fr;
  }
}
.health-reports-page--mc .health-reports-split {
  display: grid;
  gap: var(--s-3);
  align-items: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
}

.health-reports-page--mc .health-reports-card {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.health-reports-page--mc .health-reports-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
}
.health-reports-page--mc .health-reports-card__header h3 {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
}

.health-reports-page--mc .health-reports-card--trend {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  min-height: 210px;
  overflow: hidden;
}

.health-reports-page--mc .health-reports-card--trend > *,
.health-reports-page--mc .health-reports-card--trend .apexcharts-canvas,
.health-reports-page--mc .health-reports-card--trend .apexcharts-svg {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.health-reports-page--mc .health-reports-trend-meta {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

.health-reports-page--mc .health-reports-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto !important;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.health-reports-page--mc .health-reports-recent-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.health-reports-page--mc .health-reports-recent-table th,
.health-reports-page--mc .health-reports-recent-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.health-reports-page--mc .health-reports-recent-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-align: left;
  color: var(--text-3);
}
.health-reports-page--mc .health-reports-recent-table tbody tr:last-child td {
  border-bottom: 0;
}
.health-reports-page--mc .health-reports-recent-table .num {
  text-align: right;
}

.health-reports-page--mc .health-reports-run-link {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 600;
}

.health-reports-page--mc .health-reports-issue-list {
  display: grid;
  gap: var(--s-2);
}

.health-reports-page--mc .health-reports-issue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}

.health-reports-page--mc .health-reports-issue-row__body {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
  font-size: var(--fs-13);
}

.health-reports-page--mc .health-reports-issue-row__description {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-reports-page--mc .health-reports-fix-btn {
  justify-content: center;
  min-width: 56px;
}

.health-report-run-page--mc {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.health-report-run-page--mc .health-report-run-grid-shell .xw-dg-body {
  overflow: visible;
}

.health-report-run-page--mc .health-report-run-grid-shell .xw-dg-tb {
  border-bottom: 0;
}

.health-report-run-page--mc .health-report-run-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6) 0;
}

.health-report-run-page--mc .health-report-run-kpi {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.health-report-run-page--mc .health-report-run-kpi span {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}
.health-report-run-page--mc .health-report-run-kpi strong {
  min-width: 0;
  font-size: var(--fs-22);
  font-weight: 650;
  line-height: var(--lh-tight);
  color: var(--text-1);
}

.health-report-run-page--mc .health-report-run-dimensions {
  display: grid;
  gap: var(--s-3);
}

.health-report-run-page--mc .health-report-run-dimension {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  color: var(--text-2);
}

.health-report-run-page--mc .health-report-run-dimension__label-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-size: var(--fs-13);
}
.health-report-run-page--mc .health-report-run-dimension__label-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.health-report-run-page--mc .health-report-run-dimension__score {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 600;
}
.health-report-run-page--mc .health-report-run-dimension__score--ok {
  color: var(--ok);
}
.health-report-run-page--mc .health-report-run-dimension__score--warn {
  color: var(--warn);
}
.health-report-run-page--mc .health-report-run-dimension__score--danger {
  color: var(--danger);
}

.health-report-run-page--mc .health-report-run-dimension__bar--ok {
  background: var(--ok);
}
.health-report-run-page--mc .health-report-run-dimension__bar--warn {
  background: var(--warn);
}
.health-report-run-page--mc .health-report-run-dimension__bar--danger {
  background: var(--danger);
}

.health-report-run-page--mc .health-report-run-issues-tabs {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.health-report-run-page--mc .health-report-run-issues-tabs .xw-dg-tb__left {
  gap: 0;
  justify-content: flex-end;
}
.health-report-run-page--mc .health-report-run-issues-tabs .xw-dg-tb__right {
  display: none;
}
.health-report-run-page--mc .health-report-run-issues-tabs .xw-dg-tb__tabs {
  margin: 0;
}

.health-report-run-page--mc .health-report-run-card--dimensions {
  margin: var(--s-3) var(--s-6) 0;
}

.health-report-run-page--mc .health-report-run-card.health-report-run-card--metadata {
  margin: var(--s-3) var(--s-6) var(--s-4);
  background: var(--surface-inset);
}

.health-report-run-page--mc .health-report-run-card--metadata .health-report-run-card__header h3 {
  font-size: var(--fs-14);
}

.health-report-run-page--mc .health-report-run-facts dd {
  overflow-wrap: anywhere;
}

.health-report-run-page--mc .health-report-run-card--metadata .health-report-run-facts {
  gap: 0;
}

.health-report-run-page--mc .health-report-run-card--metadata .health-report-run-facts div {
  grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  padding: var(--s-2) 0;
}
.health-report-run-page--mc .health-report-run-card--metadata .health-report-run-facts div:first-child {
  border-top: 0;
}

.health-report-run-page--mc .health-report-run-card--metadata .health-report-run-facts dt {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}

.health-report-run-page--mc .health-report-run-card--metadata .health-report-run-facts dd {
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  text-align: right;
  color: var(--text-2);
}

.health-report-run-page--mc .health-report-run-dimension__meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-inset);
}
.health-report-run-page--mc .health-report-run-dimension__meter span {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
}

.health-report-run-page--mc .health-report-run-card--issues {
  margin: var(--s-3) var(--s-6) 0;
}

.health-report-run-page--mc .health-report-run-issues-wrap {
  overflow-x: auto;
}

.health-report-run-page--mc .health-report-run-issues-table {
  min-width: 760px;
  font-size: var(--fs-13);
}

.health-report-run-page--mc .health-report-run-toolbar-stack {
  display: grid;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.health-report-run-page--mc .health-report-run-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: 0 var(--s-6) var(--s-3);
}

.health-report-run-page--mc .health-report-run-check {
  min-height: var(--ctrl-h-sm);
  margin: 0;
}

@media (max-width: 1024px) {
  .health-report-run-page--mc .health-report-run-overview {
    grid-template-columns: 1fr;
  }
}
.health-report-run-page--mc .health-report-run-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.8fr) minmax(280px, 0.9fr);
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6) 0;
}

.health-report-run-page--mc .health-report-run-card {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.health-report-run-page--mc .health-report-run-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: flex-start;
  justify-content: space-between;
}
.health-report-run-page--mc .health-report-run-card__header h3 {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.health-report-run-page--mc .health-report-run-card__header .eyebrow {
  margin: 0;
}

.health-report-run-page--mc .health-report-run-facts {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}
.health-report-run-page--mc .health-report-run-facts div {
  display: grid;
  grid-template-columns: minmax(96px, 0.35fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}
.health-report-run-page--mc .health-report-run-facts dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}
.health-report-run-page--mc .health-report-run-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text-2);
}

.health-report-run-page--mc .health-report-run-card--score .xw-meter {
  width: 100%;
}

.health-report-run-page--mc .health-report-run-top {
  display: grid;
  gap: var(--s-2);
}
.health-report-run-page--mc .health-report-run-top h4 {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 600;
}
.health-report-run-page--mc .health-report-run-top ul {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.health-report-run-page--mc .health-report-run-top li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.health-report-run-page--mc .health-report-run-card--chart {
  min-height: 260px;
}

.health-report-run-page--mc .health-report-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6) 0;
}

.health-report-run-page--mc .health-report-run-section {
  margin: var(--s-4) var(--s-6) 0;
}

.health-report-run-page--mc .health-report-run-section .xw-section__body {
  display: grid;
  gap: var(--s-3);
}

.health-report-run-page--mc .health-report-run-section .data-table-surface {
  border-color: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: none;
}

.health-report-run-page--mc .health-report-run-section .data-table {
  font-size: var(--fs-13);
}

.health-report-run-page--mc .health-report-run-page-size {
  display: flex;
  justify-content: flex-end;
}

.health-report-run-page--mc .health-report-run-section .xw-dg-foot {
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.health-report-run-page--mc .health-report-run-grid-shell .issue-comparison-row td {
  background: var(--surface-1);
}

.health-report-run-page--mc .health-report-run-grid-shell .issue-comparison {
  border-color: var(--line);
  background: var(--surface-inset);
}

.health-report-run-page--mc .health-report-run-grid-shell .issue-comparison__value {
  border-color: var(--line);
  background: var(--surface-1);
}

.health-report-run-page--mc .health-report-run-grid-shell .issue-comparison__value--suggested {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.health-report-run-page--mc .health-report-run-grid-shell .issue-comparison__tag,
.health-report-run-page--mc .health-report-run-grid-shell .issue-comparison__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-3);
}

.health-report-run-page--mc .health-report-run-empty {
  margin: 0;
}

@media (max-width: 768px) {
  .health-reports-page--mc .health-reports-overview {
    padding-right: var(--s-4);
    padding-left: var(--s-4);
  }
  .health-reports-page--mc .health-reports-issue-row {
    grid-template-columns: 1fr;
  }
  .health-report-run-page--mc .health-report-run-filter-strip,
  .health-report-run-page--mc .health-report-run-overview,
  .health-report-run-page--mc .health-report-run-kpis,
  .health-report-run-page--mc .health-report-run-actions {
    padding-right: var(--s-4);
    padding-left: var(--s-4);
  }
  .health-report-run-page--mc .health-report-run-kpis {
    grid-template-columns: 1fr;
  }
  .health-report-run-page--mc .health-report-run-section,
  .health-report-run-page--mc .health-report-run-card--dimensions,
  .health-report-run-page--mc .health-report-run-card--issues,
  .health-report-run-page--mc .health-report-run-card--metadata {
    margin-right: var(--s-4);
    margin-left: var(--s-4);
  }
  .health-report-run-page--mc .health-report-run-card__header {
    align-items: stretch;
  }
  .health-report-run-page--mc .health-report-run-issues-tabs {
    width: 100%;
  }
  .health-report-run-page--mc .health-report-run-issues-tabs .xw-dg-tb__left,
  .health-report-run-page--mc .health-report-run-issues-tabs .xw-dg-tb__tabs {
    width: 100%;
  }
  .health-report-run-page--mc .health-report-run-facts div {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
  .health-report-run-page--mc .health-report-run-card--metadata .health-report-run-facts dd {
    text-align: left;
  }
  .health-reports-page--mc .health-reports-grid-shell .xw-dg-foot {
    flex-wrap: wrap;
  }
  .health-report-run-page--mc .health-report-run-grid-shell .xw-dg-foot {
    flex-wrap: wrap;
  }
}
@media (max-width: 1024px) {
  .health-reports-page--mc .health-reports-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .health-reports-page--mc .health-reports-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .health-report-queue__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 540px) {
  .health-reports-page--mc .health-reports-kpi-grid,
  .health-reports-page--mc .health-reports-issue-row__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .health-reports-page--mc .health-reports-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
  }
}
.queue-items {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.queue-item {
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}

.queue-item__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 0.375rem;
}

.queue-item__id {
  font-weight: 600;
  color: var(--text-muted);
}

.queue-item__product {
  font-weight: 600;
}

.queue-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.schedule-form {
  display: grid;
  gap: 0.75rem;
}

.schedule-toggle {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-weight: 600;
}

.schedule-field {
  display: grid;
  gap: 0.375rem;
}
.schedule-field label {
  font-size: 0.9rem;
  font-weight: 600;
}

.schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.health-score-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.health-report-runs-cards {
  display: grid;
  gap: 0.5rem;
}

.health-report-run-card__title {
  font-weight: 600;
}

.health-report-run-card__meta,
.health-report-run-card__issues,
.health-report-run-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.health-report-run-card__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.health-report-run-card__actions {
  justify-content: flex-end;
}

.health-score-trend {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.health-score-trend.trend--good {
  color: #22c55e;
}

.health-score-trend.trend--bad {
  color: #ef4444;
}

.health-score-trend.trend--neutral {
  color: #38bdf8;
}

.health-issue-group {
  margin-top: 1rem;
}

.health-issue-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.health-issue-group__header h3 {
  margin: 0;
  font-size: 1rem;
  text-transform: capitalize;
}

.health-issue-table th:first-child,
.health-issue-table td:first-child {
  width: 40px;
}

.issue-title {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.issue-row--dismissed td {
  opacity: 55%;
}

.issue-row--dismissed .issue-title span:last-child {
  text-decoration: line-through;
}

.issue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
}

.issue-comparison-row td {
  background: var(--surface);
}

.issue-comparison {
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}

.issue-comparison__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.issue-comparison__grid {
  display: grid;
  gap: 0.5rem;
}

.issue-comparison__item {
  display: grid;
  gap: 0.375rem;
}

.issue-comparison__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.issue-comparison__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.issue-comparison__value {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  font-size: 0.9rem;
}

.issue-comparison__value--suggested {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.issue-comparison__tag {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.issue-comparison__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.issue-comparison__empty {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.issue-comparison__empty .app-icon {
  font-size: 0.95rem;
  color: var(--text-3);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.reporting-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.reporting-dashboard--mc {
  gap: 0;
}
.reporting-dashboard--mc .xw-dg-head {
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-1);
}
.reporting-dashboard--mc .xw-dg-split {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--bg-2);
}

.reporting-dashboard__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.reporting-dashboard--loading {
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.reporting-dashboard__loading-panel {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.35));
  border-radius: 0.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.6));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 1.5rem;
  color: var(--text-secondary);
}

.reporting-toolbar {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.35));
  border-radius: 0.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.6));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.reporting-toolbar__summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: min(100%, 360px);
}
.reporting-toolbar__summary h2,
.reporting-toolbar__summary p {
  margin: 0;
}
.reporting-toolbar__summary h2 {
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--text-primary);
}
.reporting-toolbar__summary p {
  max-width: 72ch;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.reporting-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.reporting-range,
.reporting-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.reporting-range {
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
}

.reporting-range__button,
.reporting-tabs__button {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-2);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  cursor: pointer;
}

.reporting-range__button {
  padding: 0 0.75rem;
}

.reporting-tabs__button {
  padding: 0.5rem 0.75rem;
}

.reporting-range__button:hover,
.reporting-tabs__button:hover {
  border-color: var(--line-strong);
  background: var(--muted-soft);
  color: var(--text);
}

.reporting-range__button:focus-visible,
.reporting-tabs__button:focus-visible {
  outline: none;
  border-color: var(--brand-line);
  box-shadow: var(--focus-ring);
}

.reporting-range__button--active,
.reporting-tabs__button--active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.reporting-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.reporting-kpi-grid .xw-kpi-card {
  min-height: 176px;
}

.reporting-kpi-grid--focused .xw-kpi-card {
  min-height: 180px;
}

.reporting-kpi-grid--hub {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.reporting-kpi-grid--hub .xw-kpi-card {
  gap: 0.375rem;
  min-height: 0;
  padding: 1rem;
}
.reporting-kpi-grid--hub .xw-kpi-card__value {
  font-size: 24px;
}

.reporting-kpi-grid--hub.reporting-kpi-grid--focused .xw-kpi-card {
  min-height: 0;
}

.reporting-kpi-card {
  position: relative;
  overflow: hidden;
}

.reporting-kpi-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--text-2);
}

.reporting-definition-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--text-2);
}

.reporting-hub-tabs {
  width: 100%;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
}

.reporting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (width >= 1280px) {
  .reporting-grid--overview {
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.42fr);
  }
}

.reporting-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.reporting-panel > .xw-section__header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.reporting-panel > .xw-section__body {
  padding: 0;
}

.reporting-panel--wide {
  min-height: 100%;
}

.reporting-panel--agent {
  border-color: var(--agent-line, var(--line));
  background: var(--surface-1);
}

.reporting-panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.reporting-panel__header h3 {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.reporting-panel__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.reporting-segment-list,
.reporting-agent-list {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
}

.reporting-segment {
  display: grid;
  gap: 0.375rem;
}

.reporting-segment__row,
.reporting-agent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.reporting-segment__row {
  font-size: var(--fs-13);
}

.reporting-agent-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.reporting-agent-row:last-child {
  border-bottom: 0;
}

.reporting-agent-row__name {
  flex: 0 0 132px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--agent, var(--brand));
}

.reporting-agent-row__value {
  flex: 0 0 auto;
  color: var(--text);
}

.reporting-agent-row__meta {
  flex: 1 1 auto;
  min-width: 160px;
  font-size: var(--fs-12);
  text-align: right;
}

.reporting-action-list,
.reporting-quality-list {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
}

.reporting-action,
.reporting-quality {
  display: flex;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}

.reporting-action {
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.reporting-action h4,
.reporting-action p {
  margin: 0;
}
.reporting-action h4 {
  font-size: 0.95rem;
  color: var(--text-primary);
}
.reporting-action p {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.reporting-action__meta,
.reporting-action__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.reporting-action__meta span:first-child {
  font-weight: 700;
  color: var(--text-primary);
}

.reporting-action__footer a {
  color: var(--color-primary);
  text-decoration: none;
}
.reporting-action__footer a:hover {
  text-decoration: underline;
}

.reporting-quality {
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}
.reporting-quality h4,
.reporting-quality p {
  margin: 0;
}
.reporting-quality h4 {
  margin-top: 0.25rem;
  font-size: 0.94rem;
  color: var(--text-primary);
}
.reporting-quality p,
.reporting-quality span {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.reporting-quality strong {
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.reporting-action--success,
.reporting-quality--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.reporting-action--warning,
.reporting-quality--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.reporting-action--danger,
.reporting-quality--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.reporting-action--info,
.reporting-quality--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.reporting-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.reporting-table-tools {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.reporting-table-tools .xw-dg-tb__search {
  width: min(100%, 360px);
}

.reporting-table-search {
  width: min(100%, 320px);
  min-height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  background: var(--input-bg);
  font: inherit;
  font-size: 0.86rem;
  color: var(--text-primary);
}
.reporting-table-search:focus {
  outline: none;
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.reporting-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}
.reporting-table th,
.reporting-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--table-border-color);
  text-align: left;
  vertical-align: middle;
}
.reporting-table th {
  background: var(--table-header-bg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--table-header-color);
  white-space: nowrap;
}
.reporting-table td {
  font-size: 0.86rem;
  color: var(--text-secondary);
}
.reporting-table tr:last-child td {
  border-bottom: 0;
}
.reporting-table tr:hover td {
  background: var(--table-row-hover-bg);
}
.reporting-table strong {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reporting-table span {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reporting-table a {
  color: var(--text-primary);
  text-decoration: none;
}
.reporting-table a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.reporting-table--products {
  min-width: 1280px;
}

.reporting-table--stock,
.reporting-table--campaigns {
  min-width: 900px;
}

.reporting-table__action-heading,
.reporting-table__action-cell {
  width: 1%;
  white-space: nowrap;
}

.reporting-stock-ai-btn {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.75rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, var(--brand-soft), color-mix(in srgb, var(--brand) 8%, transparent));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}
.reporting-stock-ai-btn:hover:not(:disabled), .reporting-stock-ai-btn:focus-visible {
  border-color: var(--color-primary-border);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 16%, transparent);
  transform: translateY(-1px);
}
.reporting-stock-ai-btn:focus-visible {
  outline: 2px solid var(--color-primary-border);
  outline-offset: 2px;
}
.reporting-stock-ai-btn:disabled {
  cursor: wait;
  opacity: 72%;
  transform: none;
}
.reporting-stock-ai-btn svg {
  width: 15px;
  height: 15px;
}

.reporting-stock-ai-modal {
  max-width: min(1120px, 100vw - 32px);
}

.reporting-stock-ai {
  display: grid;
  gap: 1rem;
}

.reporting-stock-ai__hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}
.reporting-stock-ai__hero h3,
.reporting-stock-ai__hero p {
  margin: 0;
}
.reporting-stock-ai__hero h3 {
  max-width: 66ch;
  margin-top: 0.25rem;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--text-primary);
}
.reporting-stock-ai__hero p {
  margin-top: 0.375rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.reporting-stock-ai-status {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  max-width: min(100%, 420px);
  min-height: 32px;
  padding: 0 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-secondary);
}

.reporting-stock-ai-status--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.reporting-stock-ai-status--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.reporting-stock-ai-status--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.reporting-stock-ai-status--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.reporting-stock-ai__metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 0.5rem;
}
.reporting-stock-ai__metrics div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}
.reporting-stock-ai__metrics span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}
.reporting-stock-ai__metrics strong {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.reporting-stock-ai__formula {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, var(--surface-1), var(--brand-soft));
}
.reporting-stock-ai__formula div {
  display: grid;
  gap: 0.375rem;
}
.reporting-stock-ai__formula strong {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-primary);
}
.reporting-stock-ai__formula p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.reporting-stock-ai__formula a {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.reporting-stock-ai__formula a:hover {
  text-decoration: underline;
}

.reporting-stock-ai__calculation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.reporting-stock-ai__calculation div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
}
.reporting-stock-ai__calculation dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.reporting-stock-ai__calculation dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.reporting-stock-ai__message {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--color-success-border);
  border-radius: 0.5rem;
  background: var(--color-success-bg);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.reporting-stock-ai__message svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-success);
}

.reporting-stock-ai__message--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}
.reporting-stock-ai__message--danger svg {
  color: var(--color-danger);
}

.reporting-stock-ai__insights {
  display: grid;
  gap: 0.75rem;
}

.reporting-stock-ai__section-title {
  display: grid;
  gap: 0.25rem;
}
.reporting-stock-ai__section-title h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.reporting-stock-ai__empty {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px dashed var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}
.reporting-stock-ai__empty svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}
.reporting-stock-ai__empty strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.reporting-stock-ai__empty p {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.reporting-stock-ai-insight {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-elevated);
}
.reporting-stock-ai-insight header,
.reporting-stock-ai-insight .reporting-stock-ai-insight__decision {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.reporting-stock-ai-insight header span,
.reporting-stock-ai-insight header strong,
.reporting-stock-ai-insight .reporting-stock-ai-insight__decision span,
.reporting-stock-ai-insight .reporting-stock-ai-insight__decision strong {
  min-height: 24px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-secondary);
}
.reporting-stock-ai-insight header strong {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.reporting-stock-ai-insight h5,
.reporting-stock-ai-insight p {
  margin: 0;
}
.reporting-stock-ai-insight h5 {
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--text-primary);
}
.reporting-stock-ai-insight p {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.reporting-stock-ai-insight__reason {
  color: var(--text-muted) !important;
}

.reporting-chip {
  display: inline-flex;
  align-items: center;
  max-width: 32ch;
  min-height: 26px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: normal;
}

.reporting-chip--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.reporting-chip--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.reporting-chip--danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.reporting-chip--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.reporting-sort {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.reporting-sort:focus-visible {
  outline: 2px solid var(--color-primary-border);
  outline-offset: 3px;
}

.reporting-sort--active {
  color: var(--color-primary);
}

.reporting-sort__indicator {
  min-width: 1ch;
  font-size: 0.76rem;
  color: currentcolor;
}

.reporting-table-footer {
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--line);
}

.reporting-table-footer__left,
.reporting-page-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.reporting-table-footer__left {
  color: var(--text-2);
}

.reporting-page-size {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}

@media (width <= 720px) {
  .reporting-toolbar,
  .reporting-panel__header,
  .reporting-table-footer,
  .reporting-table-tools {
    padding: 1rem;
  }
  .reporting-range,
  .reporting-tabs {
    width: 100%;
  }
  .reporting-range__button,
  .reporting-tabs__button {
    flex: 1 1 auto;
  }
  .reporting-stock-ai__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 520px) {
  .reporting-stock-ai__metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  .reporting-stock-ai__calculation {
    grid-template-columns: minmax(0, 1fr);
  }
  .reporting-stock-ai-btn {
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.settings-audit-log {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.settings-audit-grid-shell {
  gap: 0;
}
.settings-audit-grid-shell .xw-dg-body {
  overflow: visible;
}

.settings-audit-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(12rem, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.settings-audit-filter {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  font-size: var(--fs-2);
  color: var(--text-2);
}
.settings-audit-filter span {
  font-size: var(--fs-1);
  text-transform: uppercase;
  color: var(--muted);
}

.settings-audit-table {
  min-width: 0;
  padding: 0;
}
.settings-audit-table.data-table-container {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.settings-audit-table .data-table-surface {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.settings-audit-table .data-table-surface__table {
  container-type: inline-size;
  overflow: auto;
}
.settings-audit-table .data-table-card {
  border-color: var(--line);
  background: var(--surface-1);
}
.settings-audit-table .data-row.is-selected,
.settings-audit-table .data-table-card.is-selected {
  background: color-mix(in srgb, var(--agent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--agent);
}
.settings-audit-table .data-table__empty-cell {
  padding: var(--s-6);
}
.settings-audit-table .data-table__empty-cell > .xw-empty,
.settings-audit-table .data-table__empty-cell .data-table-empty {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100cqw;
  max-width: 100cqw;
}

.settings-audit-table__table th,
.settings-audit-table__table td {
  vertical-align: top;
}

.settings-audit-table__time {
  font-size: var(--fs-2);
  color: var(--text-2);
}

.settings-audit-summary {
  font-weight: 700;
  color: var(--text);
}

.settings-audit-change-list {
  margin-top: var(--s-2);
  font-size: var(--fs-2);
  color: var(--text-2);
}
.settings-audit-change-list summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}
.settings-audit-change-list ul {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}

.settings-audit-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.settings-audit-page-size {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin-left: var(--s-3);
  color: var(--text-2);
}

.settings-audit-page-size .xw-select {
  width: 5rem;
  min-height: 2rem;
}

.settings-audit-footer__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--text-2);
}

.settings-audit-footer__pager {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
}

.settings-audit-detail {
  display: grid;
  gap: var(--s-3);
}

.settings-audit-detail__section {
  background: var(--surface-1);
}

.settings-audit-detail__meta {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}
.settings-audit-detail__meta div {
  display: grid;
  gap: var(--s-1);
}
.settings-audit-detail__meta dt {
  font-size: var(--fs-1);
  text-transform: uppercase;
  color: var(--muted);
}
.settings-audit-detail__meta dd {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--text);
}

.settings-audit-detail__diffs {
  display: grid;
  gap: var(--s-2);
}

@media (width <= 760px) {
  .settings-audit-filters {
    grid-template-columns: 1fr;
    padding: var(--s-3);
  }
  .settings-audit-table {
    padding: 0;
  }
  .settings-audit-table .data-table-surface--responsive .data-table-surface__table {
    display: block;
  }
  .settings-audit-table .data-table-surface--responsive .data-table-surface__cards {
    display: none;
  }
  .settings-audit-page-size {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .settings-audit-footer__pager {
    justify-content: flex-end;
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.processing-history {
  display: block;
  min-width: 0;
}

.processing-history-grid-shell {
  gap: 0;
  min-height: min(960px, 100vh - 104px);
}
.processing-history-grid-shell .xw-dg-head {
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 var(--s-5);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.processing-history-grid-shell .xw-dg-tb {
  padding: var(--s-6);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.processing-history-grid-shell .xw-dg-split {
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}
.processing-history-grid-shell .xw-dg-body {
  overflow: visible;
  background: var(--surface-1);
}

.processing-history-toolbar-metrics {
  display: inline-flex;
  gap: var(--s-2);
  align-items: stretch;
}
.processing-history-toolbar-metrics .xw-compact-stat {
  min-width: 92px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.processing-history-toolbar-metrics .xw-compact-stat__value {
  font-size: var(--fs-16);
}
.processing-history-toolbar-metrics .xw-compact-stat:last-child .xw-compact-stat__value {
  color: var(--ok);
}

.processing-history-table-wrap {
  min-width: 0;
  padding: var(--s-4) 0 0;
  overflow-x: auto;
  background: var(--surface-1);
}

.processing-history-table {
  width: 100%;
  min-width: 860px;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}

.processing-history-table th,
.processing-history-table td {
  vertical-align: middle;
}

.processing-history-row {
  cursor: pointer;
}

.processing-history-row:hover,
.processing-history-row.is-selected {
  background: color-mix(in srgb, var(--agent) 10%, transparent);
}

.processing-history-row.row--error {
  box-shadow: inset 3px 0 0 var(--danger);
}

.processing-history-table__job {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.processing-history-table__time {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.processing-history-page-size {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-left: var(--s-3);
  color: var(--text-2);
}

.processing-history-page-size .xw-select {
  width: 5rem;
  min-height: 2rem;
}

.processing-history-footer__pager {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.processing-history-detail {
  display: grid;
  gap: var(--s-3);
}

.processing-history-detail__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.processing-history-detail__section,
.processing-history-detail__error {
  background: var(--surface-1);
}

.processing-history-detail__section p,
.processing-history-detail__error p {
  margin: 0;
  overflow-wrap: anywhere;
}

.processing-history-detail__error p {
  color: var(--danger);
}

.processing-history-detail__meta {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}
.processing-history-detail__meta div {
  display: grid;
  gap: var(--s-1);
}
.processing-history-detail__meta dt {
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--muted);
}
.processing-history-detail__meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-13);
  color: var(--text);
}

@media (width <= 760px) {
  .processing-history-grid-shell .xw-dg-tb {
    padding: var(--s-3);
  }
  .processing-history-toolbar-metrics {
    width: 100%;
  }
  .processing-history-toolbar-metrics .xw-compact-stat {
    flex: 1 1 0;
    min-width: 0;
  }
  .processing-history-table-wrap {
    padding: var(--s-3) 0 0;
  }
  .processing-history-page-size {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .processing-history-footer__pager {
    justify-content: flex-end;
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.channel-campaigns-page {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.channel-campaigns-grid-shell {
  gap: 0;
}
.channel-campaigns-grid-shell .xw-dg-head {
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-1);
}
.channel-campaigns-grid-shell .xw-dg-tb {
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.channel-campaigns-grid-shell .xw-dg-split {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--bg-2);
}
.channel-campaigns-grid-shell .xw-dg-body {
  overflow: visible;
}

.channel-campaigns-filter-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(12rem, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--surface-1);
}

.channel-campaigns-filter {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  font-size: var(--fs-2);
  color: var(--text-2);
}
.channel-campaigns-filter span {
  font-size: var(--fs-1);
  text-transform: uppercase;
  color: var(--muted);
}

.channel-campaigns-setup,
.channel-campaigns-empty {
  padding: var(--s-6);
}

.channel-campaigns-table {
  min-width: 0;
  padding: var(--s-4) var(--s-6) 0;
}
.channel-campaigns-table .data-table-container {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.channel-campaigns-table .data-table-surface {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.channel-campaigns-table .data-table-card {
  border-color: var(--line);
  background: var(--surface-1);
}
.channel-campaigns-table .data-row.is-selected,
.channel-campaigns-table .data-table-card.is-selected {
  background: color-mix(in srgb, var(--agent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--agent);
}

.channel-campaigns-table__table th,
.channel-campaigns-table__table td {
  vertical-align: middle;
}

.channel-campaigns-cards .action-buttons {
  margin-top: var(--s-2);
}

.channel-campaigns-page-size {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin-left: var(--s-3);
  color: var(--text-2);
}

.channel-campaigns-page-size .xw-select {
  width: 5rem;
  min-height: 2rem;
}

.channel-campaigns-footer__pager {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
}

.channel-campaigns-detail .xw-detail-panel__body {
  display: grid;
  gap: var(--s-3);
}

.channel-campaigns-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.channel-campaigns-detail__section {
  min-width: 0;
  background: var(--surface-1);
}
.channel-campaigns-detail__section .xw-section__body {
  min-width: 0;
}

.channel-campaigns-detail__list {
  gap: var(--s-2);
  color: var(--text-2);
}
.channel-campaigns-detail__list li {
  overflow-wrap: anywhere;
}
.channel-campaigns-detail__list strong {
  color: var(--text);
}

.channel-campaigns-detail__muted {
  color: var(--text-3);
}

.organization-campaigns-page {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.organization-campaigns-shell {
  gap: var(--s-6);
}
.organization-campaigns-shell .xw-dg-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5) var(--s-6);
  align-items: end;
  padding: 0;
  border: 0;
  background: transparent;
}
.organization-campaigns-shell .xw-dg-split {
  border: 0;
  background: transparent;
}
.organization-campaigns-shell .xw-dg-body {
  overflow: visible;
}
.organization-campaigns-shell .xw-dg-head__title {
  grid-column: 1;
  grid-row: 1;
}
.organization-campaigns-shell .xw-dg-head__actions {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.organization-campaigns-shell .xw-dg-head__stats {
  display: grid;
  grid-column: 1/-1;
  grid-row: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-2);
  overflow: visible;
}
.organization-campaigns-shell .xw-dg-head__stats .xw-compact-stat {
  gap: var(--s-3);
  min-width: 0;
  min-height: 5.5rem;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-xs);
}
.organization-campaigns-shell .xw-dg-head__stats .xw-compact-stat__label {
  font-size: var(--fs-1);
  letter-spacing: 0;
  color: var(--text-3);
}
.organization-campaigns-shell .xw-dg-head__stats .xw-compact-stat__value {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  line-height: 1;
}

.organization-campaigns__toolbar-select {
  min-width: 10rem;
}

.organization-campaigns-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
}

.organization-campaigns-tab {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font: inherit;
  font-size: var(--fs-2);
  color: var(--text-2);
  cursor: pointer;
}
.organization-campaigns-tab.is-active {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  background: var(--surface-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--text);
}
.organization-campaigns-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.organization-campaigns-tab__count {
  min-width: 1.5rem;
  padding: 0 var(--s-1);
  font-size: var(--fs-1);
  text-align: center;
  color: var(--text-2);
}

.organization-campaigns-tab__separator {
  color: var(--text-3);
}

.organization-campaigns-list {
  display: grid;
  gap: var(--s-3);
  padding: 0;
}

.organization-campaign-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-xs);
}

.organization-campaign-card__icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ok);
}

.organization-campaign-card__main {
  min-width: 0;
}

.organization-campaign-card__topline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.organization-campaign-card__topline .h-card {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.organization-campaign-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--text-2);
}
.organization-campaign-card__meta span {
  overflow-wrap: anywhere;
}
.organization-campaign-card__meta strong {
  color: var(--text);
}

.organization-campaign-card__revenue {
  color: var(--ok);
}

.organization-campaign-card__actions {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
}

.organization-campaign-card__edit-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: var(--s-1);
}

.organization-campaigns-footer__pager {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
}

@media (width <= 760px) {
  .channel-campaigns-filter-strip {
    grid-template-columns: 1fr;
    padding: var(--s-3);
  }
  .channel-campaigns-setup,
  .channel-campaigns-empty,
  .channel-campaigns-table {
    padding: var(--s-3);
  }
  .channel-campaigns-page-size {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .channel-campaigns-footer__pager {
    justify-content: flex-end;
    width: 100%;
  }
  .channel-campaigns-detail__grid {
    grid-template-columns: 1fr;
  }
  .organization-campaigns-shell .xw-dg-head {
    grid-template-columns: 1fr;
  }
  .organization-campaigns-shell .xw-dg-head__title,
  .organization-campaigns-shell .xw-dg-head__actions,
  .organization-campaigns-shell .xw-dg-head__stats {
    grid-column: 1;
  }
  .organization-campaigns-shell .xw-dg-head__actions {
    grid-row: 2;
    justify-content: flex-start;
  }
  .organization-campaigns-shell .xw-dg-head__stats {
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .organization-campaigns-shell .xw-dg-head__stats .xw-compact-stat {
    min-height: 5.25rem;
    padding: var(--s-4);
  }
  .organization-campaigns-shell .xw-dg-head__stats .xw-compact-stat__label {
    overflow: visible;
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }
  .organization-campaign-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .organization-campaign-card__icon {
    margin-top: var(--s-1);
  }
  .organization-campaign-card__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .organization-campaigns-footer__pager {
    justify-content: flex-end;
    width: 100%;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.channel-pricing-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
  max-height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

.app-main:has(.channel-pricing-page) .xw-page-heading {
  display: none;
}
.app-main:has(.channel-pricing-page) .page {
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.app-main:has(.channel-pricing-page) .workspace-page-frame {
  gap: 0;
  height: calc(100vh - var(--topbar-h));
  min-height: 100%;
  max-height: calc(100vh - var(--topbar-h));
  padding: 0;
  overflow: hidden;
}
.app-main:has(.channel-pricing-page) .workspace-page-frame__content {
  flex: 1;
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
  max-height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

.channel-pricing-page .channel-pricing-grid-shell {
  flex: 1;
  gap: var(--s-6);
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
  max-height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  background: transparent;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-head {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-head__subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  color: var(--text-2);
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-head__subtitle-sep {
  color: var(--text-4);
}
.channel-pricing-page .channel-pricing-grid-shell .pricing-subtitle__metric {
  color: var(--agent);
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb {
  flex-wrap: nowrap;
  min-height: 55px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__left {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__right {
  flex: 0 0 auto;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__search {
  flex: 0 0 240px;
  width: 240px;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tabs {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto hidden;
  scrollbar-width: none;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tabs::-webkit-scrollbar {
  display: none;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb .xw-tabs {
  width: -moz-max-content;
  width: max-content;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tab {
  flex: 0 0 auto;
  white-space: nowrap;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tab > span:not(.xw-dg-tb__tab-count) {
  white-space: nowrap;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__extra {
  flex: 0 0 168px;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-split {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.channel-pricing-page .channel-pricing-grid-shell .xw-dg-body {
  overflow: hidden;
}
.channel-pricing-page .channel-pricing-grid-shell .data-row.is-selected,
.channel-pricing-page .channel-pricing-grid-shell .data-row--selected,
.channel-pricing-page .channel-pricing-grid-shell .data-table-card.is-selected,
.channel-pricing-page .channel-pricing-grid-shell .data-table-card--selected {
  background: var(--brand-soft);
}
.channel-pricing-page .channel-pricing-grid-shell .data-table-card.is-selected,
.channel-pricing-page .channel-pricing-grid-shell .data-table-card--selected {
  border-color: var(--brand-line);
  box-shadow: none;
}

.channel-pricing-page .pricing-toolbar-stack {
  display: grid;
  gap: 0;
  width: 100%;
}

.channel-pricing-page .pricing-filter-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(12rem, 1fr));
  gap: var(--s-3);
  padding: 0 var(--s-6) var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.channel-pricing-page .pricing-filter {
  display: grid;
  gap: var(--s-1);
  min-width: 9rem;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.channel-pricing-page .pricing-filter > span {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}

.channel-pricing-page .xw-dg-tb__extra .pricing-filter {
  width: 100%;
  min-width: 0;
}
.channel-pricing-page .xw-dg-tb__extra .pricing-filter > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.channel-pricing-page .xw-dg-tb__extra .pricing-filter .xw-select {
  height: var(--ctrl-h-sm);
  min-height: var(--ctrl-h-sm);
  padding-right: var(--s-7);
  font-size: var(--fs-12);
}

.channel-pricing-page .pricing-filter--summary {
  align-content: center;
}
.channel-pricing-page .pricing-filter--summary strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-pricing-page .pricing-setup,
.channel-pricing-page .pricing-empty {
  padding: var(--s-6);
}

.channel-pricing-page .pricing-table-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.channel-pricing-page .pricing-table-wrap .data-table-surface {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: none;
}
.channel-pricing-page .pricing-table-wrap .data-table-surface__table {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.channel-pricing-page .pricing-table-wrap .data-table-card {
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: none;
}

.channel-pricing-page .data-table.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
  color: var(--text);
}
.channel-pricing-page .data-table.pricing-table th,
.channel-pricing-page .data-table.pricing-table td {
  height: var(--row-h);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.channel-pricing-page .data-table.pricing-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--row-h-sm);
  border-bottom-color: var(--line-strong);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.channel-pricing-page .data-table.pricing-table tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}
.channel-pricing-page .data-table.pricing-table tbody tr:hover {
  background: var(--muted-soft);
}
.channel-pricing-page .data-table.pricing-table tbody tr.data-row--selected,
.channel-pricing-page .data-table.pricing-table tbody tr.is-selected {
  background: var(--brand-soft);
}
.channel-pricing-page .data-table.pricing-table .data-table__col-checkbox,
.channel-pricing-page .data-table.pricing-table .data-table__checkbox {
  width: 32px;
  padding-right: var(--s-2);
  padding-left: var(--s-3);
}
.channel-pricing-page .data-table.pricing-table .actions-col {
  width: 1%;
  white-space: nowrap;
}
.channel-pricing-page .data-table.pricing-table .cell-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.channel-pricing-page .data-table.pricing-table .cell-date {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
  white-space: nowrap;
}
.channel-pricing-page .data-table.pricing-table .pricing-trend-col,
.channel-pricing-page .data-table.pricing-table .pricing-trend-cell {
  width: 70px;
  min-width: 70px;
  padding: 0 var(--s-4) !important;
  text-align: center;
}
.channel-pricing-page .data-table.pricing-table .pricing-trend-cell .xw-sparkline {
  display: inline-block;
  width: 28px;
  height: 14px;
  vertical-align: middle;
}

.channel-pricing-page .product-cell {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 220px;
}
.channel-pricing-page .product-cell strong {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-pricing-page .product-cell .row-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--text-3);
}

.channel-pricing-page .sku,
.channel-pricing-page .pricing-actions-table__meta {
  display: block;
  max-width: 24rem;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-pricing-page .pricing-actions-table__actions,
.channel-pricing-page .pricing-strategies-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
}

.channel-pricing-page .pricing-trend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  min-width: 10rem;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.channel-pricing-page .pricing-trend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-pricing-page .pricing-trend--panel {
  min-width: 0;
}
.channel-pricing-page .pricing-trend--panel span {
  white-space: normal;
}

.channel-pricing-page .pricing-agent-cell {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
  max-width: 11rem;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--agent);
}
.channel-pricing-page .pricing-agent-cell .xw-dot {
  flex: 0 0 auto;
  color: var(--agent);
}
.channel-pricing-page .pricing-agent-cell span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-pricing-page .pricing-card__values {
  display: grid;
  gap: var(--s-2);
}

.channel-pricing-page .pricing-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
}

.channel-pricing-page .pricing-history-card,
.channel-pricing-page .pricing-actions-card,
.channel-pricing-page .pricing-strategies__details-panel {
  min-width: 0;
  background: var(--surface-1);
}

.pricing-history-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-2);
}

.pricing-history-card__subtitle,
.pricing-rule-parameters,
.pricing-preview__strategy-summary,
.pricing-preview__muted {
  color: var(--text-2);
}

.pricing-strategy-modal__input,
.pricing-strategy-modal__textarea {
  width: 100%;
}

.pricing-history-card__loading,
.pricing-actions-card__loading,
.pricing-preview__loading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-2);
}

.pricing-history-card__error,
.pricing-actions-card__error,
.pricing-preview__error {
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: var(--danger-soft);
  color: var(--danger);
}

.channel-pricing-page .pricing-page-size {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin-left: var(--s-3);
  color: var(--text-2);
}

.channel-pricing-page .pricing-page-size .xw-select {
  width: 5rem;
  min-height: 2rem;
}

.channel-pricing-page .pricing-detail-panel .xw-detail-panel__body {
  display: grid;
  gap: var(--s-3);
}

.channel-pricing-page .pricing-detail-panel__section {
  min-width: 0;
  background: var(--surface-1);
}

.channel-pricing-page .pricing-detail-panel__section .xw-diff__label {
  text-transform: uppercase;
}

.channel-pricing-page .pricing-detail-panel__reasoning-copy {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--text-2);
}

.channel-pricing-page .pricing-detail-panel__activity {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.channel-pricing-page .pricing-detail-panel__activity li {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.channel-pricing-page .pricing-detail-panel__activity span,
.channel-pricing-page .pricing-detail-panel__activity small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-pricing-page .pricing-detail-panel__activity small {
  color: var(--text-3);
}

.channel-pricing-page .detail-grid--meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.channel-pricing-page .detail-item {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}
.channel-pricing-page .detail-item label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}
.channel-pricing-page .detail-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.details-list {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1rem;
  color: var(--text-2);
}

.code-block {
  max-height: 18rem;
  padding: 0.5rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--bg-2);
  font-size: 0.8rem;
  color: var(--text);
}

.pricing-preview__empty {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: var(--bg-2);
  color: var(--text-2);
}

.pricing-preview__empty .app-icon {
  font-size: 0.95rem;
  color: var(--text-2);
}

.pricing-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-2);
}

.pricing-preview__stats {
  margin-bottom: 0.75rem;
}

.pricing-preview-table__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--text-2);
}

.pricing-preview-change {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-weight: 600;
}
.pricing-preview-change small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-2);
}

.pricing-preview-change--up {
  color: var(--ok);
}

.pricing-preview-change--down {
  color: var(--danger);
}

.pricing-preview-change--flat {
  color: var(--info);
}

.pricing-preview-change--neutral {
  color: var(--text-2);
}

.pricing-preview-pagination {
  margin-top: 0.5rem;
}

.pricing-preview-cards .data-table-card,
.pricing-actions-cards .data-table-card,
.pricing-strategies-cards .data-table-card {
  gap: 0.5rem;
}

.pricing-preview-cards .data-table-card__header,
.pricing-actions-cards .data-table-card__header,
.pricing-strategies-cards .data-table-card__header {
  gap: 0.5rem;
  align-items: flex-start;
}

.pricing-preview-cards .pricing-preview-change,
.pricing-actions-cards .pricing-actions-table__actions,
.pricing-strategies-card__actions {
  margin-top: 0.375rem;
}

@media (width <= 920px) {
  .channel-pricing-page .pricing-history-grid {
    grid-template-columns: 1fr;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb {
    flex-flow: column nowrap;
    gap: var(--s-2);
    align-items: stretch;
    min-height: 0;
    padding: var(--s-3) var(--s-4);
    overflow: visible;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__left,
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__right {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__left {
    flex-flow: column nowrap;
    align-items: stretch;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__right {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__search,
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__extra {
    flex: 0 0 auto;
    width: 100%;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tabs {
    flex: 0 0 auto;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tabs {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__tab {
    flex: 0 0 auto;
    max-width: 10rem;
  }
  .channel-pricing-page .channel-pricing-grid-shell .xw-dg-tb__sort {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}
@media (width <= 760px) {
  .channel-pricing-page .pricing-filter-strip,
  .channel-pricing-page .detail-grid--meta,
  .details-grid {
    grid-template-columns: 1fr;
  }
  .channel-pricing-page .pricing-filter-strip {
    padding: 0 var(--s-3) var(--s-3);
  }
  .channel-pricing-page .pricing-setup,
  .channel-pricing-page .pricing-empty,
  .channel-pricing-page .pricing-table-wrap,
  .channel-pricing-page .pricing-history-grid {
    padding: var(--s-3);
  }
  .channel-pricing-page .pricing-page-size {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .channel-pricing-page .pricing-table-wrap .data-table-surface--responsive .data-table-surface__table {
    display: block;
  }
  .channel-pricing-page .pricing-table-wrap .data-table-surface--responsive .data-table-surface__cards {
    display: none;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.channel-dashboard {
  min-width: 0;
}

.channel-dashboard.dashboard--mc,
.channel-dashboard.dashboard--mc .dashboard__section {
  gap: var(--s-6);
}

.channel-dashboard__summary-strip .kpi-card {
  min-height: 116px;
}

@media (width <= 768px) {
  .channel-dashboard.dashboard--mc,
  .channel-dashboard.dashboard--mc .dashboard__section {
    gap: var(--s-4);
  }
}
.channel-dashboard__prototype-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: var(--s-4);
  width: 100%;
}

.channel-dashboard__prototype-card {
  min-width: 0;
  padding: 16px;
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.channel-dashboard__prototype-card .card__head,
.channel-dashboard__configuration .section__head {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.channel-dashboard__prototype-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.channel-dashboard__prototype-title .h-sec {
  margin: 0;
  font-size: var(--fs-18);
  line-height: 1.2;
}

.channel-dashboard__shops-preview,
.channel-dashboard__activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-dashboard__shop-row {
  display: grid;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface-1);
  text-align: left;
  color: inherit;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  text-decoration: none;
}

button.channel-dashboard__shop-row {
  width: 100%;
  border: 1px dashed var(--line);
  background: transparent;
}

.channel-dashboard__shop-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.channel-dashboard__shop-row-copy,
.channel-dashboard__shop-row-title,
.channel-dashboard__shop-row-meta {
  min-width: 0;
}

.channel-dashboard__shop-row-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.channel-dashboard__shop-row-title,
.channel-dashboard__shop-row-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-dashboard__shop-row-title {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text);
}

.channel-dashboard__shop-row-meta {
  font-size: var(--fs-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.channel-dashboard__shop-row-health {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 112px;
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  grid-template-columns: minmax(56px, 72px) auto;
}

.channel-dashboard__activity-row {
  display: grid;
  grid-template-columns: minmax(60px, auto) auto minmax(96px, auto) minmax(0, 1fr) minmax(72px, auto);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.channel-dashboard__activity-row:first-child {
  border-top: 0;
}

.channel-dashboard__activity-time,
.channel-dashboard__activity-agent,
.channel-dashboard__activity-meta {
  font-size: var(--fs-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.channel-dashboard__activity-agent {
  color: var(--text);
}

.channel-dashboard__activity-message,
.channel-dashboard__activity-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-dashboard__activity-meta {
  text-align: right;
}

.channel-dashboard__activity-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--agent);
  box-shadow: 0 0 0 3px var(--agent-soft);
}

.channel-dashboard__activity-dot--ok,
.channel-dashboard__activity-dot--success {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}

.channel-dashboard__activity-dot--warn,
.channel-dashboard__activity-dot--warning {
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.channel-dashboard__activity-dot--danger,
.channel-dashboard__activity-dot--critical {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.channel-dashboard__activity-dot--info {
  background: var(--info);
  box-shadow: 0 0 0 3px var(--info-soft);
}

.channel-dashboard__configuration {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.channel-dashboard__configuration .section__head {
  margin-bottom: 0;
}

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

.kpi-grid .channel-dashboard__configuration-card {
  min-height: 92px;
  padding: 16px;
  border-radius: var(--r-md);
}

.kpi-grid .channel-dashboard__configuration-card .stat-card__value {
  margin-top: 4px;
  font-size: var(--fs-20);
}

.kpi-grid .channel-dashboard__configuration-card .stat-card__sublabel {
  margin-top: 8px;
  padding-top: 8px;
}

.channel-dashboard--focused .channel-dashboard__section {
  display: grid;
  gap: 1.5rem;
}
.channel-dashboard--focused .dashboard-widgets {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.channel-dashboard__shops-widget .dashboard-section {
  overflow: visible;
}
.channel-dashboard__shops-widget .dashboard-section__header {
  flex-wrap: wrap;
  gap: 0.75rem;
}
.channel-dashboard__shops-widget .dashboard-section__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-dashboard .shops-list,
.admin-dashboard .channel-shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1rem;
  padding: 1rem;
}

.admin-dashboard .channel-shops-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.channel-shops-page .channel-shops-grid {
  gap: 12px;
  padding: 1rem 1.5rem;
}

.channel-shops-page .xw-dg-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.channel-shops-page .xw-dg-head__actions {
  align-self: center;
}

.channel-shops-page .xw-dg-split {
  margin-top: 1.5rem;
}

.admin-dashboard .shop-card {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--s-3);
  align-items: start;
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: none;
  transition: border-color 200ms ease, background-color 200ms ease;
  cursor: default;
}
.admin-dashboard .shop-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.admin-dashboard .shop-card--ready {
  border-color: var(--line);
}

.admin-dashboard .shop-card--disabled,
.admin-dashboard .shop-card--pending,
.admin-dashboard .shop-card--setup {
  border-color: rgba(249, 115, 22, 0.38);
}

.admin-dashboard .shop-card--blocked {
  border-color: rgba(239, 68, 68, 0.42);
}

.admin-dashboard .shop-card__header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

.admin-dashboard .shop-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.admin-dashboard .shop-card__code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.admin-dashboard .shop-card__name {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
  overflow-wrap: anywhere;
}

.admin-dashboard .shop-card__facts {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.admin-dashboard .shop-card__fact {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.admin-dashboard .shop-card__fact span,
.admin-dashboard .shop-card__health-label span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.admin-dashboard .shop-card__fact strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.admin-dashboard .shop-card__health {
  display: grid;
  gap: 8px;
  width: 100%;
}

.admin-dashboard .shop-card__health-label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-family: var(--font-mono);
}

.admin-dashboard .shop-card__health-label strong {
  font-size: 0.72rem;
  color: var(--text-2);
}

.admin-dashboard .shop-card__hint {
  display: flex;
  gap: 0.375rem;
  align-items: flex-start;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 0.5rem;
  background: rgba(249, 115, 22, 0.1);
  font-size: 0.84rem;
  color: var(--text-primary);
}
.admin-dashboard .shop-card__hint .app-icon {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: #f97316;
}
.admin-dashboard .shop-card__hint span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-dashboard .shop-card__actions-menu {
  flex: 0 0 auto;
}

.channel-shops-page .shop-card__facts {
  gap: 4px;
}

.channel-shops-page .shop-card__health {
  gap: 6px;
}

.admin-dashboard .shop-card__overflow-trigger {
  width: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
}

.channel-shops-page .shop-card__overflow-trigger {
  width: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.admin-dashboard .channel-shop-card--add {
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  border-style: dashed;
  text-align: center;
  cursor: pointer;
}

.channel-shops-page .channel-shop-card--add {
  gap: 8px;
  min-height: 0;
}

.admin-dashboard .channel-shop-card__add-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: #3b82f6;
}

.admin-dashboard .channel-shop-card__add-title {
  font-weight: 700;
  color: var(--text-primary);
}

.admin-dashboard .channel-shop-card__add-subtitle {
  max-width: 15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

@media (width <= 520px) {
  .channel-dashboard__prototype-card,
  .channel-dashboard__configuration .section__head {
    padding-inline: 0;
  }
  .channel-dashboard__shop-row,
  .channel-dashboard__activity-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .channel-dashboard__shop-row-health,
  .channel-dashboard__shop-row > .muted,
  .channel-dashboard__activity-time,
  .channel-dashboard__activity-agent,
  .channel-dashboard__activity-meta {
    display: none;
  }
  .channel-dashboard__prototype-card .card__head,
  .channel-dashboard__configuration .section__head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-dashboard .shops-list,
  .admin-dashboard .channel-shops-grid {
    padding: 0.75rem;
  }
  .channel-shops-page .xw-dg-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .channel-shops-page .xw-dg-head__actions {
    justify-content: flex-start;
  }
  .admin-dashboard .shop-card {
    padding: 0.75rem;
  }
  .admin-dashboard .shop-card__header {
    align-items: flex-start;
  }
}
@media (max-width: 1024px) {
  .channel-dashboard__prototype-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.channel-dashboard__configuration-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.channel-dashboard__configuration-card.stat-card {
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-color: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  text-align: left;
}

.kpi-grid.channel-dashboard__configuration-grid .stat-card__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.kpi-grid.channel-dashboard__configuration-grid .stat-card__value {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}

.kpi-grid.channel-dashboard__configuration-grid .stat-card__sublabel {
  display: none;
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  border-right: 1px solid var(--line);
  background: radial-gradient(800px 400px at 30% 30%, var(--brand-glow), transparent 60%), radial-gradient(600px 400px at 80% 80%, var(--agent-glow), transparent 60%), var(--bg-2);
}

.auth-brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.auth-art__story {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.auth-art__story--compact {
  gap: 24px;
}

.auth-art__quote {
  max-width: 32ch;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.auth-art__terminal {
  width: 100%;
  max-width: 520px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
}

.auth-art__terminal .agent {
  color: var(--agent);
}

.auth-art__terminal .ok {
  color: var(--ok);
}

.auth-art__terminal .dim {
  color: var(--text-3);
}

.auth-art__terminal-next {
  padding-top: 8px;
}

.auth-art__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.auth-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--bg);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 380px;
}

.auth-form__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.auth-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh-tight);
  color: var(--text);
}

.auth-shell :is(h1, h2, h3):focus {
  outline: none;
}

.auth-sub {
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-base);
  color: var(--text-2);
}

.auth-mode-tabs {
  width: -moz-fit-content;
  width: fit-content;
}

.auth-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.auth-form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-shell .xw-field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  text-transform: none;
  color: var(--text-2);
}

.auth-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: var(--fs-12);
}

.auth-form-footer--dev {
  margin-top: -8px;
}

.auth-dev-link:disabled {
  opacity: 70%;
  color: var(--text-3);
  cursor: not-allowed;
}

.auth-inline-link,
.auth-back {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  text-decoration: none;
}

.auth-back {
  align-self: flex-start;
  color: var(--text-2);
}

.auth-inline-link:hover,
.auth-back:hover {
  color: var(--text);
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap .xw-input {
  padding-right: 44px;
}

.auth-input-action {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 8px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transform: translateY(-50%);
}

.auth-input-action:hover {
  background: var(--muted-soft);
  color: var(--text);
}

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

.auth-divider {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.auth-divider::before,
.auth-divider::after {
  flex: 1;
  height: 1px;
  background: var(--line);
  content: "";
}

.auth-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
}

.auth-alert--error {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.auth-alert--success {
  border: 1px solid var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.auth-alert__icon {
  flex: 0 0 auto;
}

.auth-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--text-on-brand) 30%, transparent);
  border-top-color: var(--text-on-brand);
  border-radius: var(--r-pill);
  animation: auth-spin 0.8s linear infinite;
}

.auth-dev-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.password-requirements {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px;
}

.password-requirements__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-12);
  line-height: var(--lh-base);
}

.password-requirements__item {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  color: var(--text);
}

.password-requirements__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--ok);
}

.identity-provider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.identity-provider-mark--facebook {
  background: #1877f2;
  color: #fff;
}

.auth-provisioning-status {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.auth-provisioning-status__header {
  display: grid;
  gap: 10px;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}
.auth-provisioning-status__header .app-icon,
.auth-provisioning-status__header svg,
.auth-provisioning-status__header i {
  width: 18px;
  height: 18px;
  color: var(--ok);
}
.auth-provisioning-status__header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.auth-provisioning-status__header strong,
.auth-provisioning-status__header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-provisioning-status__header strong {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}
.auth-provisioning-status__header span {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.auth-provisioning-status__grid {
  display: grid;
  gap: 10px;
  margin: 0;
}
.auth-provisioning-status__grid div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.auth-provisioning-status__grid dt {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.auth-provisioning-status__grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-12);
  line-height: 1.45;
  color: var(--text-2);
}
.auth-provisioning-status__grid a {
  color: var(--brand);
  text-decoration: none;
}
.auth-provisioning-status__grid a:hover {
  color: var(--text);
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (width <= 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-art {
    display: none;
  }
}
@media (width <= 640px) {
  .auth-form-pane {
    align-items: flex-start;
    padding: 40px 16px;
  }
  .auth-field-grid {
    grid-template-columns: 1fr;
  }
  .auth-form {
    max-width: none;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-rules-scenarios-page {
  padding: var(--spacing-md) var(--spacing-lg);
}

.product-rules-scenarios-page--embedded {
  padding: 0;
}

.product-rules-scenarios-page .xw-page-header--topbar {
  margin-bottom: 0.9rem;
}

.product-rules-library-shell,
.product-rules-scenario-shell {
  min-height: 0;
}

.product-rules-view-toggle {
  min-width: -moz-max-content;
  min-width: max-content;
}

.product-rules-library-table-wrap {
  min-height: 0;
}

.product-rules-library-table {
  min-width: 58rem;
  table-layout: fixed;
}

.product-rules-library-table th,
.product-rules-library-table td {
  vertical-align: middle;
}

.product-rules-library-table__toggle {
  width: 4.25rem;
  text-align: center;
}

.product-rules-library-table th:nth-child(2),
.product-rules-library-table td:nth-child(2) {
  width: min(30rem, 36vw);
}

.product-rules-library-table__row {
  cursor: pointer;
}

.product-rules-library-table__row.is-selected {
  background: color-mix(in srgb, #3b82f6 10%, transparent);
}

.product-rules-library-table__row.is-disabled {
  color: var(--text-secondary);
}

.product-rules-rule-cell {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.product-rules-rule-cell strong,
.product-rules-rule-cell span {
  min-width: 0;
}

.product-rules-rule-cell > span {
  max-width: 36rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-secondary);
}

.product-rules-rule-cell strong,
.product-rules-rule-cell > span,
.product-rules-library-detail__facts dd,
.product-rules-library-detail__section p {
  overflow-wrap: anywhere;
}

.product-rules-rule-cell__badges,
.product-rules-library-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.product-rules-library-detail__section {
  display: grid;
  gap: 0.5rem;
}

.product-rules-library-detail__section + .product-rules-library-detail__section {
  margin-top: 1rem;
}

.product-rules-library-detail__section h3 {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-rules-library-detail__section p {
  margin: 0;
  color: var(--text-secondary);
}

.product-rules-library-detail__facts {
  display: grid;
  gap: 0.48rem;
  margin: 0;
}

.product-rules-library-detail__facts div {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}

.product-rules-library-detail__facts dt {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-rules-library-detail__facts dd {
  margin: 0;
  color: var(--text-primary);
}

@media (width <= 900px) {
  .product-rules-view-toggle {
    width: 100%;
  }
  .product-rules-view-toggle .xw-tabs__tab {
    flex: 1 1 0;
    justify-content: center;
  }
  .product-rules-library-table {
    min-width: 48rem;
  }
}
.scenario-theme--pricing {
  --scenario-accent: var(--brand);
}

.scenario-theme--campaigns {
  --scenario-accent: var(--agent);
}

.scenario-theme--content {
  --scenario-accent: var(--info);
}

.scenario-theme--inventory {
  --scenario-accent: var(--warn);
}

.scenario-theme--catalog {
  --scenario-accent: var(--ok);
}

.scenario-theme--automation {
  --scenario-accent: var(--brand-strong);
}

.scenario-card,
.scenario-workspace__hero,
.scenario-workspace__summary-item,
.scenario-stage,
.scenario-rule-card,
.wizard-panel,
.wizard-rail-card,
.scenario-wizard__header,
.scenario-wizard__steps {
  border: 1px solid var(--scenario-border);
  border-radius: 1rem;
  box-shadow: var(--scenario-shadow);
}

.scenario-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

@media (width <= 720px) {
  .scenario-command-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}
.scenario-card__secondary small,
.scenario-workspace__secondary small {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-secondary);
}

.scenario-toolbar__search {
  position: relative;
  width: min(100%, 38rem);
}

.scenario-toolbar__search .form-input {
  min-height: 2.45rem;
  border-color: color-mix(in srgb, var(--scenario-accent) 36%, var(--scenario-border));
  border-radius: 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface) 98%, transparent), color-mix(in srgb, var(--scenario-surface-strong) 88%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding-inline: 2.8rem 1rem;
}

.scenario-toolbar__search .form-input:focus {
  border-color: color-mix(in srgb, var(--scenario-accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scenario-accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.scenario-toolbar__icon {
  position: absolute;
  top: 50%;
  color: color-mix(in srgb, var(--scenario-accent) 74%, var(--text-secondary));
  transform: translateY(-50%);
  inset-inline-start: 1rem;
  pointer-events: none;
}

.scenario-command-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.15rem;
}

.scenario-toggle {
  min-height: 2.7rem;
  padding: 0.58rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--scenario-border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-surface) 88%, transparent);
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.scenario-toggle:hover {
  border-color: color-mix(in srgb, var(--scenario-accent) 30%, transparent);
  color: var(--text-primary);
}

.scenario-toggle:focus-visible,
.scenario-card__secondary:focus-visible,
.scenario-workspace__secondary:focus-visible,
.choice-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scenario-accent) 18%, transparent), var(--scenario-shadow);
}

.scenario-toggle.is-active {
  border-color: color-mix(in srgb, var(--scenario-accent) 56%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-accent) 20%, var(--scenario-surface)), color-mix(in srgb, var(--scenario-accent) 10%, var(--scenario-surface-strong)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 20px color-mix(in srgb, var(--scenario-accent) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--scenario-accent) 22%, transparent);
  font-weight: 800;
  color: var(--text-primary);
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.5rem), 1fr));
  gap: 0.55rem;
  align-items: stretch;
  margin-top: 0.55rem;
}

.scenario-card {
  display: grid;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.58rem 0.65rem;
  border-color: color-mix(in srgb, var(--scenario-accent) 22%, var(--scenario-border));
  border-radius: 0.75rem;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--scenario-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface-strong) 82%, transparent), var(--scenario-surface));
}

.scenario-card__header {
  display: flex;
  gap: 0.48rem;
  align-items: start;
  justify-content: space-between;
}

.scenario-card__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.scenario-card__status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.scenario-card__status-row .status-badge {
  min-height: 1.35rem;
  padding: 0.14rem 0.44rem;
  font-size: 0.64rem;
  line-height: 1.1;
}

.scenario-card__header h3 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.15;
}

.scenario-card__header p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.26;
  color: var(--text-secondary);
}

.scenario-card__insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.12rem 0.42rem;
  align-items: center;
  padding: 0.34rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 12%, var(--scenario-border));
  border-left: 2px solid color-mix(in srgb, var(--scenario-accent) 60%, var(--scenario-border));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--scenario-surface-muted) 68%, transparent);
}

.scenario-card__label {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.scenario-card__insight strong {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

.scenario-card__insight p {
  display: none;
}

.scenario-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem;
}

.scenario-card__meta span {
  padding: 0.14rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 12%, var(--scenario-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-surface) 94%, transparent);
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--text-secondary);
}

.scenario-card__footer {
  display: grid;
  grid-template-columns: minmax(7.4rem, 1fr) minmax(7.4rem, 1fr) minmax(5.4rem, auto);
  gap: 0.32rem;
  margin-top: auto;
}

.scenario-card__footer .btn {
  gap: 0.26rem;
  justify-content: center;
  min-height: 1.92rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.12;
}

.scenario-card__footer .app-icon {
  width: 0.88rem;
  height: 0.88rem;
}

.scenario-card__primary {
  flex: 1;
  border-color: color-mix(in srgb, var(--info) 40%, transparent);
  background: linear-gradient(180deg, rgb(70.76, 137.5, 246.54), #2563eb);
  color: var(--text-on-brand);
}

.scenario-card__secondary {
  display: inline-flex;
  gap: 0.3rem;
  min-width: 0;
  border-color: color-mix(in srgb, var(--scenario-accent) 18%, var(--scenario-border));
  background: color-mix(in srgb, var(--scenario-surface-muted) 92%, transparent);
}

.scenario-card__secondary--expert {
  min-width: 5.3rem;
}

.scenario-card__secondary--expert small {
  display: none;
}

@media (width <= 720px) {
  .scenario-card__footer {
    grid-template-columns: 1fr;
  }
}
.scenario-workspace__secondary {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
}

.scenario-card__version {
  white-space: nowrap;
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.scenario-workspace {
  display: grid;
  gap: 0.65rem;
}

.scenario-workspace__hero,
.scenario-wizard__header {
  display: grid;
  gap: 0.72rem;
  padding: 0.72rem 0.85rem 0.82rem;
  border-color: color-mix(in srgb, var(--scenario-accent) 24%, var(--scenario-border));
  background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--scenario-accent) 14%, transparent), transparent 32%), linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface-strong) 84%, transparent), var(--scenario-surface));
}

.scenario-workspace__hero-top {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}

.scenario-workspace__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.scenario-workspace__back,
.scenario-wizard__back {
  display: inline-flex;
  gap: 0.34rem;
  align-items: center;
  min-height: 2.35rem;
  border-radius: 0.75rem;
  padding-inline: 0.72rem;
}

.scenario-workspace__primary,
.scenario-workspace__secondary {
  min-height: 2.45rem;
  border-radius: 0.75rem;
  padding-inline: 0.8rem;
}

.scenario-workspace__hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.scenario-workspace__hero-copy h2,
.scenario-wizard__heading h2 {
  margin: 0.08rem 0 0.18rem;
  font-size: 1.75rem;
  line-height: 1.12;
}

.scenario-workspace__hero-copy p,
.scenario-wizard__heading p {
  max-width: 52rem;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.34;
  color: var(--text-secondary);
}

.scenario-workspace__eyebrow,
.scenario-stage__eyebrow,
.wizard-rail-card__label,
.scenario-wizard__rail-heading {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.scenario-workspace__hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.scenario-workspace__summary-item,
.wizard-rail-card {
  display: grid;
  gap: 0.22rem;
  min-height: 0;
  padding: 0.55rem 0.65rem;
  border-color: var(--scenario-border);
  background: var(--scenario-surface);
}

.scenario-workspace__summary-item strong,
.wizard-rail-card strong {
  font-size: 0.86rem;
  line-height: 1.2;
}

.scenario-workspace__summary-item small {
  display: block;
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.32;
  color: var(--text-secondary);
}

.scenario-workspace__summary-item.is-blocking {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.scenario-workspace__summary-item.is-blocking strong {
  color: var(--color-danger);
}

.scenario-workspace__summary-item p,
.wizard-rail-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.38;
  color: var(--text-secondary);
}

.scenario-matrix {
  display: grid;
  gap: 0.6rem;
}

.scenario-matrix__header {
  display: flex;
  gap: 0.8rem;
  align-items: end;
  justify-content: space-between;
}

.scenario-matrix__header h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.08;
}

.scenario-matrix__header p {
  margin: 0.12rem 0 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.scenario-stage {
  display: grid;
  gap: 0.55rem;
  padding: 0.62rem 0.68rem 0.7rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface) 96%, transparent), color-mix(in srgb, var(--scenario-surface-strong) 88%, transparent));
}

.scenario-stage.is-conflict {
  border-color: color-mix(in srgb, var(--scenario-danger) 40%, transparent);
}

.scenario-stage__header {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}

.scenario-stage__header h4 {
  margin: 0.14rem 0 0;
  font-size: 0.86rem;
  line-height: 1.2;
}

.scenario-stage__grid,
.wizard-review-stage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.5rem;
}

.scenario-rule-card,
.wizard-review-card {
  display: grid;
  gap: 0.42rem;
  align-content: start;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 12%, var(--scenario-border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--scenario-surface-muted) 94%, transparent);
}

.scenario-rule-card.is-invalid,
.wizard-review-card.is-invalid,
.scenario-inline-field.is-invalid,
.wizard-field.is-invalid {
  border-color: color-mix(in srgb, var(--scenario-danger) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--scenario-danger) 22%, transparent);
}

.scenario-rule-card.is-shared {
  border-color: color-mix(in srgb, var(--scenario-accent) 28%, var(--scenario-border));
}

.scenario-rule-card.is-expanded {
  border-color: color-mix(in srgb, var(--scenario-accent) 34%, var(--scenario-border-strong));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--scenario-accent) 16%, transparent);
}

.scenario-rule-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem 0.48rem;
  align-items: start;
  justify-content: space-between;
}

.scenario-rule-card__title-row {
  display: grid;
  flex: 1 1 18rem;
  gap: 0.48rem;
  align-items: start;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
}

.scenario-rule-card__head-meta {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-end;
}

.scenario-rule-card__head-meta .pill-btn {
  min-height: 1.92rem;
  border-radius: 0.5rem;
  padding-inline: 0.55rem;
  font-size: 0.74rem;
}

.scenario-rule-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.scenario-rule-card__meta-row .status-pill--info {
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 34%, transparent);
  background: color-mix(in srgb, var(--scenario-accent) 13%, var(--scenario-surface));
  color: var(--text-primary);
}

.scenario-rule-card__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-accent) 22%, var(--scenario-surface)), color-mix(in srgb, var(--scenario-accent) 10%, var(--scenario-surface-strong)));
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.scenario-rule-card__title-copy {
  min-width: 0;
}

.scenario-rule-card__title-copy strong {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.88rem;
  line-height: 1.22;
}

.scenario-rule-card__title-copy p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.28;
  color: var(--text-secondary);
}

.scenario-rule-card__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.6rem), 1fr));
  gap: 0.34rem;
}

.scenario-rule-card__summary-item {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.38rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--scenario-surface) 94%, transparent);
}

.scenario-rule-card__summary-item.is-invalid {
  border-color: color-mix(in srgb, var(--scenario-danger) 60%, transparent);
  background: color-mix(in srgb, var(--scenario-danger-soft) 70%, var(--scenario-surface));
}

.scenario-rule-card__summary-item span {
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-secondary);
}

.scenario-rule-card__summary-item strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  line-height: 1.1;
}

.scenario-rule-card__summary-item small {
  font-size: 0.64rem;
  line-height: 1.3;
  color: var(--text-secondary);
}

.scenario-rule-card__issues,
.wizard-apply__issues {
  display: grid;
  gap: 0.3rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--scenario-danger) 58%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--scenario-danger-soft) 80%, var(--scenario-surface-muted));
}

.scenario-rule-card__issues p,
.wizard-review-card__issue,
.scenario-inline-field__issue {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--scenario-danger) 86%, var(--text-primary));
}

.scenario-rule-card__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.55rem;
}

.scenario-rule-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.scenario-rule-card__actions .pill-btn {
  min-height: 2.45rem;
  border-radius: 0.75rem;
}

.scenario-rule-card__expand {
  min-width: 8.6rem;
}

.scenario-rule-card__editor {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 65%, transparent);
}

.scenario-inline-field,
.wizard-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.64rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--scenario-surface) 90%, transparent);
}

.scenario-inline-field__label,
.wizard-field > span:first-child {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.scenario-inline-field .form-input,
.wizard-field .form-input,
.scenario-inline-field input[type=number],
.scenario-inline-field input[type=text] {
  min-height: 2.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.75rem;
}

.scenario-inline-field small,
.wizard-field small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.scenario-inline-field input[type=checkbox],
.wizard-field input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--scenario-accent);
}

.scenario-wizard {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 0.7fr);
  gap: 1rem;
}

.scenario-wizard__main {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.scenario-wizard__steps {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.35rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface-strong) 86%, transparent), color-mix(in srgb, var(--scenario-surface) 92%, transparent));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}

.scenario-wizard__step {
  display: grid;
  position: relative;
  gap: 0.1rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--scenario-surface-muted) 82%, transparent);
}

.scenario-wizard__step span {
  font-size: 0.73rem;
  color: var(--text-secondary);
}

.scenario-wizard__step strong {
  font-size: 0.84rem;
  line-height: 1.2;
}

.scenario-wizard__step.is-active {
  border-color: color-mix(in srgb, var(--scenario-accent) 48%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-accent) 92%, transparent), color-mix(in srgb, var(--scenario-accent) 76%, var(--scenario-surface-strong)));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--scenario-accent) 20%, transparent);
  color: var(--text-on-brand);
}

.scenario-wizard__step.is-active span,
.scenario-wizard__step.is-active strong,
.scenario-wizard__step.is-complete strong {
  color: inherit;
}

.scenario-wizard__step.is-complete {
  border-color: color-mix(in srgb, var(--scenario-accent) 20%, transparent);
  background: color-mix(in srgb, var(--scenario-accent) 9%, var(--scenario-surface));
}

.scenario-wizard__step-check {
  position: absolute;
  inset-inline-end: 0.55rem;
  inset-block-start: 0.55rem;
  color: color-mix(in srgb, var(--scenario-accent) 80%, var(--text-on-brand) 20%);
}

.wizard-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  background: linear-gradient(180deg, var(--scenario-surface), color-mix(in srgb, var(--scenario-surface-strong) 68%, transparent));
}

.wizard-panel--choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard-panel--planner {
  gap: 0.9rem;
  padding: 0.9rem;
}

.wizard-panel--limits {
  gap: 0.75rem;
}

.wizard-limit-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 18%, var(--scenario-border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--scenario-surface-muted) 78%, transparent);
}

.wizard-limit-flow div {
  display: grid;
  position: relative;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 12%, var(--scenario-border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--scenario-surface) 88%, transparent);
}

.wizard-limit-flow div:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.42rem;
  inset-block-start: 50%;
  width: 0.32rem;
  height: 0.32rem;
  border-block-start: 2px solid color-mix(in srgb, var(--scenario-accent) 46%, var(--scenario-border));
  border-inline-end: 2px solid color-mix(in srgb, var(--scenario-accent) 46%, var(--scenario-border));
  transform: translateY(-50%) rotate(45deg);
}

.wizard-limit-flow span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-accent) 14%, var(--scenario-surface));
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--scenario-accent) 72%, var(--text-primary));
}

.wizard-limit-flow strong {
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.2;
}

.wizard-limit-flow small {
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.32;
  color: var(--text-secondary);
}

.planner-section {
  display: grid;
  gap: 0.65rem;
}

.planner-section__header {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  justify-content: space-between;
  padding: 0.1rem 0.1rem 0;
}

.planner-section__header strong {
  font-size: 0.92rem;
  line-height: 1.25;
}

.planner-section__header p {
  margin: 0.18rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.planner-section__header > span,
.choice-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 22%, var(--scenario-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-accent) 9%, var(--scenario-surface));
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--scenario-accent) 62%, var(--text-primary));
  white-space: nowrap;
}

.choice-grid {
  display: grid;
  gap: 0.65rem;
}

.choice-grid--strategy {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.choice-grid--tactics {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.choice-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-height: 8rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 15%, var(--scenario-border));
  border-radius: 1rem;
  background: radial-gradient(circle at bottom right, color-mix(in srgb, var(--scenario-accent) 12%, transparent), transparent 26%), linear-gradient(180deg, var(--scenario-surface-muted), color-mix(in srgb, var(--scenario-surface) 84%, transparent));
  text-align: left;
  color: var(--text-primary);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.choice-card--tactic {
  min-height: 7rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface-muted) 88%, transparent), color-mix(in srgb, var(--scenario-surface) 92%, transparent));
}

.choice-card__topline {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
  min-height: 1.55rem;
}

.choice-card__check {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-accent) 18%, var(--scenario-surface));
  color: color-mix(in srgb, var(--scenario-accent) 74%, var(--text-primary));
}

.choice-card__check :is(svg, i) {
  width: 0.95rem;
  height: 0.95rem;
}

.choice-card:hover {
  border-color: color-mix(in srgb, var(--scenario-accent) 42%, transparent);
  transform: translateY(-1px);
}

.choice-card.is-selected {
  border-color: color-mix(in srgb, var(--scenario-accent) 48%, transparent);
  background: radial-gradient(circle at bottom right, color-mix(in srgb, var(--scenario-accent) 18%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--scenario-accent) 16%, var(--scenario-surface)), color-mix(in srgb, var(--scenario-surface) 88%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--scenario-accent) 34%, transparent), 0 12px 24px color-mix(in srgb, var(--scenario-accent) 16%, transparent);
}

.choice-card__copy {
  display: grid;
  gap: 0.35rem;
}

.choice-card__copy strong {
  font-size: 0.98rem;
  line-height: 1.2;
}

.choice-card__copy p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.wizard-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.wizard-field-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard-field.is-guided {
  border-color: color-mix(in srgb, var(--scenario-accent) 48%, var(--scenario-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-accent) 10%, var(--scenario-surface)), color-mix(in srgb, var(--scenario-surface) 92%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--scenario-accent) 28%, transparent);
}

.wizard-field__title {
  min-width: 0;
}

.wizard-field__plain {
  min-height: 2.4rem;
  line-height: 1.33;
}

.wizard-field__control {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.wizard-field__control .form-input,
.wizard-field__control .settings-field,
.wizard-field__control .settings-field-content,
.wizard-field__control .input-with-addon {
  width: 100%;
  min-width: 0;
}

.wizard-field__number {
  margin: 0;
}

.wizard-field__toggle {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 2.3rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 24%, var(--scenario-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-accent) 8%, var(--scenario-surface));
  font-weight: 800;
}

.wizard-field__meta,
.wizard-guidance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
}

.wizard-field__meta div,
.wizard-guidance-metrics div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border-default) 58%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--scenario-surface-muted) 72%, transparent);
}

.wizard-field__meta dt,
.wizard-guidance-metrics dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.wizard-field__meta dd,
.wizard-guidance-metrics dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-field__recommendation {
  line-height: 1.35;
  color: color-mix(in srgb, var(--scenario-accent) 68%, var(--text-primary)) !important;
}

.wizard-rail-card--guidance {
  gap: 0.55rem;
  border-color: color-mix(in srgb, var(--scenario-accent) 30%, var(--scenario-border));
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--scenario-accent) 12%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface-muted) 86%, transparent), color-mix(in srgb, var(--scenario-surface) 92%, transparent));
}

.wizard-rail-card--review-impact {
  gap: 0.55rem;
  border-color: color-mix(in srgb, var(--scenario-accent) 24%, var(--scenario-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface-muted) 74%, transparent), var(--scenario-surface));
}

.wizard-impact-flow {
  display: grid;
  gap: 0.42rem;
}

.wizard-impact-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  padding: 0.55rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 16%, var(--scenario-border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--scenario-surface) 88%, transparent);
}

.wizard-impact-step > span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scenario-accent) 14%, var(--scenario-surface));
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--scenario-accent) 72%, var(--text-primary));
}

.wizard-impact-step div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.wizard-impact-step strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.wizard-impact-step small,
.wizard-impact-note {
  font-size: 0.75rem;
  line-height: 1.34;
  color: var(--text-secondary);
}

.wizard-impact-note {
  display: block;
}

.wizard-guidance-flow {
  display: grid;
  gap: 0.35rem;
}

.wizard-guidance-flow span {
  display: grid;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 18%, var(--scenario-border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--scenario-surface) 86%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.wizard-guidance-flow span + span {
  position: relative;
}

.wizard-guidance-flow span + span::before {
  content: "";
  justify-self: center;
  width: 2px;
  height: 0.36rem;
  margin-block: -0.36rem 0;
  background: color-mix(in srgb, var(--scenario-accent) 48%, var(--scenario-border));
}

.wizard-guidance-advice {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 18%, var(--scenario-border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--scenario-accent) 8%, var(--scenario-surface));
}

.wizard-guidance-advice span {
  font-size: 0.72rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--scenario-accent) 70%, var(--text-primary));
}

.wizard-review__actions,
.wizard-review__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wizard-review-stage {
  display: grid;
  gap: 0.7rem;
}

.wizard-review-stage__header {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
}

.wizard-review-stage__header span {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wizard-review-stage__header strong {
  font-size: 0.85rem;
}

.wizard-review-card strong {
  font-size: 0.96rem;
}

.wizard-review-card > p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.wizard-review__setting-row {
  display: grid;
  gap: 0.12rem;
}

.wizard-review__setting-row strong {
  font-size: 0.8rem;
}

.wizard-review__setting-row span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.79rem;
  color: var(--text-secondary);
}

.wizard-review-card__more {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--scenario-accent);
}

.scenario-wizard__footer {
  display: flex;
  position: sticky;
  bottom: 0.6rem;
  z-index: 3;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--scenario-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--scenario-surface) 96%, transparent);
  box-shadow: var(--scenario-shadow);
  backdrop-filter: blur(6px);
}

.scenario-wizard__footer .pill-btn {
  min-width: 8.75rem;
  min-height: 2.95rem;
  border-radius: 1rem;
}

.scenario-wizard__rail {
  display: grid;
  position: sticky;
  top: calc(var(--spacing-lg) + 4.4rem);
  gap: 0.75rem;
  align-self: start;
}

.scenario-wizard__rail-heading {
  margin: 0;
}

.wizard-rail-card__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.scenario-wizard {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21.5rem);
  gap: 0.75rem;
  width: 100%;
}

.scenario-wizard__main {
  gap: 0.62rem;
}

.scenario-wizard__header {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: start;
  padding: 0.72rem 0.82rem;
}

.scenario-wizard__back {
  min-height: 2.15rem;
  padding-inline: 0.72rem;
  border-radius: 0.75rem;
}

.scenario-wizard__heading h2 {
  margin: 0.08rem 0 0.18rem;
  font-size: 1.32rem;
  line-height: 1.16;
}

.scenario-wizard__heading p {
  max-width: 62rem;
  font-size: 0.82rem;
  line-height: 1.34;
}

.scenario-wizard__steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
}

.scenario-wizard__step {
  gap: 0.04rem;
  min-height: 2.85rem;
  padding: 0.46rem 0.5rem;
  border-radius: 0.5rem;
}

.scenario-wizard__step span {
  font-size: 0.66rem;
}

.scenario-wizard__step strong {
  font-size: 0.76rem;
  line-height: 1.16;
}

.scenario-wizard__step-check {
  inset-inline-end: 0.4rem;
  inset-block-start: 0.4rem;
}

.wizard-panel {
  gap: 0.62rem;
  padding: 0.72rem;
  border-radius: 0.75rem;
}

.wizard-panel--limits {
  gap: 0.55rem;
}

.wizard-limit-flow {
  gap: 0.36rem;
  padding: 0.38rem;
  border-radius: 0.75rem;
}

.wizard-limit-flow div {
  gap: 0.16rem;
  padding: 0.46rem 0.52rem;
  border-radius: 0.5rem;
}

.wizard-limit-flow span {
  width: 1.12rem;
  height: 1.12rem;
  font-size: 0.62rem;
}

.wizard-limit-flow strong {
  font-size: 0.74rem;
}

.wizard-limit-flow small {
  font-size: 0.68rem;
  line-height: 1.24;
}

.wizard-panel--limits .wizard-field-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 0.5rem;
}

.wizard-panel--limits .wizard-field {
  gap: 0.18rem 0.6rem;
  align-items: start;
  padding: 0.52rem 0.6rem;
  border-radius: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12rem);
  grid-template-areas: "title control" "plain control" "meta meta" "recommend recommend" "issue issue";
}

.wizard-field__title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  font-size: 0.78rem;
  line-height: 1.18;
}

.wizard-field__plain {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: plain;
  min-height: 0;
  font-size: 0.71rem;
  line-height: 1.28;
}

.wizard-field__control,
.wizard-field__toggle {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: control;
  justify-self: end;
  width: 100%;
  max-width: 12rem;
}

.wizard-field__control {
  gap: 0.32rem;
}

.wizard-field__control .form-input,
.wizard-field__control .xw-input,
.wizard-field__control .input-addon,
.wizard-field .form-input {
  min-height: 2.02rem;
  padding: 0.34rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.2;
}

.wizard-field__control .input-with-addon .xw-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wizard-field__control .input-with-addon .input-addon {
  min-width: 2.02rem;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.72rem;
}

.wizard-field__toggle {
  width: 100%;
  min-height: 2.02rem;
  padding: 0.18rem 0.52rem;
  border-radius: 0.75rem;
  font-size: 0.82rem;
}

.wizard-field__toggle input[type=checkbox] {
  width: 0.92rem;
  height: 0.92rem;
}

.wizard-field__meta {
  grid-area: meta;
  gap: 0.28rem;
}

.wizard-panel--limits .wizard-field > .wizard-field__meta {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

.wizard-field__meta div,
.wizard-guidance-metrics div {
  padding: 0.3rem 0.4rem;
}

.wizard-field__meta dt,
.wizard-guidance-metrics dt {
  font-size: 0.62rem;
}

.wizard-field__meta dd,
.wizard-guidance-metrics dd {
  font-size: 0.7rem;
}

.wizard-field__recommendation {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: recommend;
  margin-top: 0.04rem;
  font-size: 0.7rem !important;
}

.wizard-field .scenario-inline-field__issue {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: issue;
}

@media (max-width: 768px){
  .action-table__cell--checkbox {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .action-queue-page--org .action-table__row > .action-table__cell--checkbox {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .action-table__cell--ean {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .action-table__cell--type {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .action-table__cell--status {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  .action-queue-page--org .action-table__row > .action-table__cell--status {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
  }
  .action-table__cell--priority {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
  }
  .action-table__cell--source {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
  }
  .action-table__cell--actions {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
  }
  .action-queue-page--org .action-table__row > .action-table__cell--actions {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  .action-queue-page--org .action-table__cell--product {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .action-queue-page--org .action-table__cell--current {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .action-queue-page--org .action-table__cell--reason {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
  .action-queue-page--org .action-table__cell--new {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
  }
  .action-queue-page--org .action-table__cell--status {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  .action-queue-page--org .action-table__row > .action-table__cell--status {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
  }
  .action-queue-page--org .action-table__cell--actions {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
  }
  .action-queue-page--org .action-table__row > .action-table__cell--actions {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  .product-image-studio__item-actions {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
  }
  .action-queue-page--org .action-table__row > .product-image-studio__item-actions {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
}

@media (width <= 1160px){
  .product-image-studio__thumb {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
  }
  .product-image-studio__item-meta {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .product-image-studio__item > .product-image-studio__item-actions {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  .wizard-field__meta {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
}

.scenario-wizard__rail {
  top: calc(var(--spacing-lg) + 3.4rem);
  gap: 0.5rem;
}

.scenario-wizard__rail-heading {
  font-size: 0.68rem;
}

.wizard-rail-card {
  gap: 0.3rem;
  padding: 0.58rem 0.65rem;
  border-radius: 0.75rem;
}

.wizard-rail-card strong {
  font-size: 0.86rem;
}

.wizard-rail-card p {
  font-size: 0.74rem;
  line-height: 1.32;
}

.wizard-guidance-flow span {
  padding: 0.42rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.72rem;
}

.wizard-guidance-advice {
  gap: 0.16rem;
  padding: 0.45rem 0.52rem;
  border-radius: 0.5rem;
}

.wizard-impact-step {
  gap: 0.42rem;
  padding: 0.44rem 0.5rem;
  border-radius: 0.5rem;
}

.wizard-impact-step > span {
  width: 1.12rem;
  height: 1.12rem;
  font-size: 0.62rem;
}

.wizard-impact-step strong {
  font-size: 0.76rem;
}

.wizard-impact-step small,
.wizard-impact-note {
  font-size: 0.69rem;
  line-height: 1.3;
}

.wizard-review-stage {
  gap: 0.46rem;
}

.wizard-review-stage__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.5rem;
}

.wizard-review-card {
  gap: 0.36rem;
  padding: 0.56rem 0.62rem;
  border-radius: 0.75rem;
}

.wizard-review-card strong {
  font-size: 0.84rem;
}

.wizard-review-card > p {
  font-size: 0.72rem;
  line-height: 1.3;
}

.wizard-review__setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--border-default) 56%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--scenario-surface) 84%, transparent);
}

.wizard-review__setting-row strong {
  font-size: 0.72rem;
}

.wizard-review__setting-row span {
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-wizard__footer {
  bottom: 0.45rem;
  padding: 0.5rem 0.62rem;
  border-radius: 0.75rem;
}

.scenario-wizard__footer .pill-btn {
  min-width: 7.5rem;
  min-height: 2.35rem;
  border-radius: 0.75rem;
}

.wizard-panel--apply {
  align-items: center;
  min-height: 24rem;
}

.wizard-apply {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  text-align: center;
}

.wizard-apply__hero {
  display: grid;
  gap: 0.4rem;
  max-width: 44rem;
}

.wizard-apply__hero h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.08;
}

.wizard-apply__hero p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.42;
  color: var(--text-secondary);
}

.wizard-apply__summary {
  display: grid;
  grid-template-columns: auto minmax(18rem, auto);
  gap: 1rem;
  align-items: stretch;
  width: min(100%, 42rem);
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--scenario-accent) 20%, var(--scenario-border));
  border-radius: 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scenario-surface) 94%, transparent), color-mix(in srgb, var(--scenario-surface-strong) 92%, transparent));
}

.wizard-apply__count {
  display: grid;
  place-items: center;
  gap: 0.25rem;
  min-width: 11rem;
  padding-inline-end: 1rem;
  border-inline-end: 1px solid color-mix(in srgb, var(--border-default) 66%, transparent);
}

.wizard-apply__count strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 3.1rem;
  line-height: 1;
}

.wizard-apply__count span {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.wizard-apply__metrics {
  display: grid;
  gap: 0.4rem;
  align-content: center;
  margin: 0;
}

.wizard-apply__metrics div {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  justify-content: space-between;
}

.wizard-apply__metrics dt {
  margin: 0;
  color: var(--text-secondary);
}

.wizard-apply__metrics dd {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.92rem;
}

.wizard-panel--apply {
  min-height: 17rem;
}

.wizard-apply {
  gap: 0.75rem;
  align-content: center;
}

.wizard-apply__hero {
  gap: 0.24rem;
  max-width: 38rem;
}

.wizard-apply__hero h3 {
  font-size: 1.35rem;
  line-height: 1.16;
}

.wizard-apply__hero p {
  font-size: 0.82rem;
  line-height: 1.34;
}

.wizard-apply__summary {
  grid-template-columns: auto minmax(12rem, 1fr);
  gap: 0.68rem;
  width: min(100%, 34rem);
  padding: 0.65rem 0.72rem;
  border-radius: 0.75rem;
}

.wizard-apply__count {
  min-width: 7.8rem;
  padding-inline-end: 0.68rem;
}

.wizard-apply__count strong {
  font-size: 2.1rem;
}

.wizard-apply__count span {
  font-size: 0.76rem;
}

.wizard-apply__metrics {
  gap: 0.24rem;
}

.wizard-apply__metrics div {
  gap: 0.5rem;
}

.wizard-apply__metrics dt,
.wizard-apply__metrics dd {
  font-size: 0.78rem;
}

@media (width <= 900px) {
  .scenario-wizard {
    grid-template-columns: minmax(0, 1fr);
  }
  .scenario-wizard__header {
    grid-template-columns: minmax(0, 1fr);
  }
  .scenario-wizard__steps {
    grid-template-columns: repeat(5, minmax(7.25rem, 1fr));
    overflow-x: auto;
  }
  .wizard-panel--limits .wizard-field {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "plain" "control" "meta" "recommend" "issue";
  }
  .wizard-limit-flow,
  .wizard-field__meta,
  .wizard-guidance-metrics {
    grid-template-columns: 1fr;
  }
  .wizard-limit-flow div:not(:last-child)::after {
    display: none;
  }
  .wizard-field__plain {
    min-height: 0;
  }
  .wizard-panel--limits .wizard-field > .product-image-studio__item-meta {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .wizard-field__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .wizard-field__plain {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .wizard-field__control,
.wizard-field__toggle {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .wizard-panel--limits .wizard-field > .wizard-field__meta {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .wizard-field__recommendation {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .wizard-field .scenario-inline-field__issue {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
@media (width <= 1280px) {
  .scenario-grid,
  .wizard-panel--choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scenario-wizard {
    grid-template-columns: 1fr;
  }
  .scenario-wizard__rail {
    position: static;
  }
}
@media (width <= 900px) {
  .scenario-workspace__hero-body,
  .scenario-workspace__hero-summary,
  .wizard-field-grid,
  .wizard-field-grid--compact,
  .scenario-rule-card__summary,
  .scenario-rule-card__fields,
  .choice-grid--strategy,
  .choice-grid--tactics,
  .scenario-grid,
  .wizard-panel--choices {
    grid-template-columns: 1fr;
  }
  .scenario-workspace__hero-top,
  .scenario-command-bar,
  .scenario-command-bar__filters,
  .scenario-matrix__header,
  .scenario-stage__header,
  .scenario-wizard__footer {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .scenario-wizard__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wizard-apply__summary {
    grid-template-columns: 1fr;
  }
  .wizard-apply__count {
    padding-inline-end: 0;
    padding-block-end: 0.85rem;
    border-inline-end: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-default) 66%, transparent);
  }
}
@media (width <= 640px) {
  .product-rules-scenarios-page {
    padding: var(--spacing-md);
  }
  .scenario-wizard__steps {
    grid-template-columns: 1fr;
  }
  .scenario-card__footer,
  .scenario-workspace__hero-actions,
  .scenario-command-bar__filters {
    flex-direction: column;
    align-items: stretch;
  }
  .scenario-rule-card__title-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .scenario-rule-card__title-row :is(.xw-pill, .status-pill) {
    grid-column: 1/-1;
    justify-self: start;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-rules-page {
  padding: var(--spacing-lg);
}

.product-rules-page .xw-page-header--topbar {
  margin-bottom: var(--spacing-xs);
}

.product-rules-page .xw-page-header--topbar .xw-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
}

.product-rules-page .xw-page-header--topbar .xw-page-header__actions .pill-btn {
  min-height: 2.1rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}

.product-rules-scope {
  display: grid;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.product-rules-scope .form-field {
  margin: 0;
}
.product-rules-scope label {
  margin-bottom: 0.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.product-rules-scope .form-input {
  min-height: 2.15rem;
  padding-block: 0.35rem;
  padding-inline: 0.6rem;
}
.product-rules-scope .scope-help {
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
}

.product-rules-node-panel {
  min-width: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  transform: translateX(20px);
  pointer-events: none;
}
.product-rules-node-panel.is-open {
  max-height: none;
  opacity: 100%;
  transform: translateX(0);
  pointer-events: auto;
}
.product-rules-node-panel__empty {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  text-align: center;
  color: var(--text-secondary);
  place-items: center;
}

.product-rule-node-panel {
  display: flex;
  flex-direction: column;
  height: clamp(560px, 100vh - 240px, 920px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
  box-shadow: var(--shadow-md);
}
.product-rule-node-panel__header, .product-rule-node-panel__footer {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-default);
}
.product-rule-node-panel__header {
  background: var(--surface-alt);
}
.product-rule-node-panel__header .modal-header__title {
  display: flex;
  flex: 1;
  gap: var(--spacing-sm);
  align-items: center;
  min-width: 0;
}
.product-rule-node-panel__header .modal-header__title h2 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--text-primary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-rule-node-panel__header .modal-header__title .task-category-badge {
  flex-shrink: 0;
}
.product-rule-node-panel__footer {
  border-top: 1px solid var(--border-default);
  border-bottom: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-alt);
}
.product-rule-node-panel__body {
  display: grid;
  flex: 1;
  gap: var(--spacing-xxs);
  min-height: 0;
  padding: var(--spacing-xxs) var(--spacing-sm);
  overflow-y: auto;
  grid-template-rows: auto auto 1fr;
}
.product-rule-node-panel__body > p.muted {
  margin: 0;
  font-size: var(--font-size-xs);
}

.product-rule-node-panel__body.is-flow {
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
}

:root[data-theme=light] .product-rule-node-panel {
  border-color: var(--border-soft);
  background: var(--surface);
}
:root[data-theme=light] .product-rule-node-panel__footer {
  background: var(--surface-alt);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .product-rule-node-panel {
    border-color: var(--border-soft);
    background: var(--surface);
  }
  :root:not([data-theme=dark], [data-theme=light]) .product-rule-node-panel__footer {
    background: var(--surface-alt);
  }
}
.product-rules-view-toolbar {
  display: grid;
  gap: 0.55rem 0.75rem;
  align-items: start;
  margin-bottom: var(--spacing-sm);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
  grid-template-columns: auto minmax(0, 1fr);
}
.product-rules-view-toolbar__left {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}
.product-rules-view-toolbar__right {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

.product-rules-toolbar-group {
  display: grid;
  gap: 0.25rem;
  min-width: 132px;
}

.product-rules-toolbar-group .filter-group {
  gap: 0.25rem;
}

.product-rules-filter-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: center;
  min-width: 0;
}

.product-rules-filter-row .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.product-rules-filter-row .filter-group--toggles {
  position: relative;
  padding-inline-start: 0.75rem;
  margin-inline-start: 0.25rem;
}

.product-rules-filter-row .filter-group--toggles::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: 1px;
  background: color-mix(in srgb, var(--border-default) 60%, transparent);
}

@media (width <= 720px) {
  .product-rules-filter-row .filter-group--toggles {
    padding-inline-start: 0;
    margin-inline-start: 0;
  }
  .product-rules-filter-row .filter-group--toggles::before {
    display: none;
  }
}
.product-rules-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
  margin-bottom: var(--spacing-lg);
}

.product-rules-stats .stat-card.product-rules-stats__card {
  display: grid;
  flex: 1;
  gap: 0.2rem 0.5rem;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-default);
  border-radius: 0.8rem;
  background: var(--surface-default);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon value" "icon label";
}
.product-rules-stats .stat-card.product-rules-stats__card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.product-rules-stats .product-rules-stats__card .stat-card__icon {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  grid-area: icon;
}

.product-rules-stats .product-rules-stats__card .stat-card__value {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: value;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
}

.product-rules-stats .product-rules-stats__card .stat-card__label {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  grid-area: label;
}

.product-rules-stats .product-rules-stats__card--enabled .stat-card__icon {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.product-rules-stats .product-rules-stats__card--disabled .stat-card__icon {
  background: var(--color-muted-bg);
  color: var(--color-muted);
}

.product-rules-stats .product-rules-stats__card--ai .stat-card__icon {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.product-rules-stats .product-rules-stats__card--cost .stat-card__icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.product-rules-quick-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
}

.product-rules-task-list {
  display: grid;
  gap: var(--spacing-lg);
}

.task-list-header {
  display: grid;
  gap: var(--spacing-md);
  align-items: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--border-default);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.task-list-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: baseline;
  min-width: 0;
}

.task-list-subtitle {
  font-size: var(--font-size-xs);
  line-height: 1.35;
  color: var(--text-secondary);
}

.filter-label {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.task-row__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-secondary);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-rule-node-modal .modal,
.product-rule-node-panel .modal {
  max-width: 1100px;
}
.product-rule-node-modal .xw-tabs,
.product-rule-node-panel .xw-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-default);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.product-rule-node-modal .xw-tabs::-webkit-scrollbar,
.product-rule-node-panel .xw-tabs::-webkit-scrollbar {
  height: 4px;
}
.product-rule-node-modal .xw-tabs::-webkit-scrollbar-track,
.product-rule-node-panel .xw-tabs::-webkit-scrollbar-track {
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}
.product-rule-node-modal .xw-tabs::-webkit-scrollbar-thumb,
.product-rule-node-panel .xw-tabs::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}
.product-rule-node-modal .xw-tabs .tab,
.product-rule-node-panel .xw-tabs .tab {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--spacing-xs);
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.product-rule-node-modal .xw-tabs .tab.active,
.product-rule-node-panel .xw-tabs .tab.active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 1px var(--color-primary-border);
  color: var(--color-primary);
}
.product-rule-node-modal .xw-tabs .tab:hover:not(.active),
.product-rule-node-panel .xw-tabs .tab:hover:not(.active) {
  border-color: var(--border-strong);
  background: var(--surface-default);
}
.product-rule-node-modal .xw-tabs .tab .badge,
.product-rule-node-panel .xw-tabs .tab .badge {
  min-width: 18px;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-align: center;
  color: var(--text-on-primary);
}
.product-rule-node-modal .config-grid,
.product-rule-node-panel .config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}
.product-rule-node-modal .flow-panel,
.product-rule-node-panel .flow-panel {
  display: grid;
  gap: var(--spacing-sm);
  height: 100%;
  min-height: 0;
}
.product-rule-node-modal .flow-layout,
.product-rule-node-panel .flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--spacing-lg);
  padding-inline: var(--spacing-md);
  align-items: stretch;
  min-height: 400px;
  min-height: 0;
}
.product-rule-node-modal .flow-stage,
.product-rule-node-panel .flow-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--spacing-sm);
  min-width: 0;
  min-height: 0;
}
.product-rule-node-modal .flow-sidebar,
.product-rule-node-panel .flow-sidebar {
  display: grid;
  gap: var(--spacing-xs);
  align-content: start;
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
}
.product-rule-node-modal .flow-card,
.product-rule-node-panel .flow-card {
  display: grid;
  gap: var(--spacing-xxs);
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.product-rule-node-modal .flow-card--task,
.product-rule-node-panel .flow-card--task {
  padding: var(--spacing-sm);
  border-color: var(--border-strong);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}
.product-rule-node-modal .flow-card--compact,
.product-rule-node-panel .flow-card--compact {
  gap: var(--spacing-xxs);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.product-rule-node-modal .flow-card--compact .flow-card__header h4,
.product-rule-node-panel .flow-card--compact .flow-card__header h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.product-rule-node-modal .flow-card__content,
.product-rule-node-panel .flow-card__content {
  padding: var(--spacing-sm);
}
.product-rule-node-modal .flow-card--details,
.product-rule-node-panel .flow-card--details {
  padding: 0;
}
.product-rule-node-modal .flow-card--details:not([open]) summary,
.product-rule-node-panel .flow-card--details:not([open]) summary {
  border-bottom-color: transparent;
}
.product-rule-node-modal .flow-card--details[open] summary::after,
.product-rule-node-panel .flow-card--details[open] summary::after {
  transform: rotate(90deg);
}
.product-rule-node-modal .flow-card--details summary,
.product-rule-node-panel .flow-card--details summary {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
}
.product-rule-node-modal .flow-card--details summary .badge,
.product-rule-node-panel .flow-card--details summary .badge {
  min-width: 18px;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-align: center;
  color: var(--text-on-primary);
}
.product-rule-node-modal .flow-card--details summary::-webkit-details-marker,
.product-rule-node-panel .flow-card--details summary::-webkit-details-marker {
  display: none;
}
.product-rule-node-modal .flow-card--details summary::after,
.product-rule-node-panel .flow-card--details summary::after {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  content: "▸";
}
.product-rule-node-modal .flow-card--details .conditions-tab,
.product-rule-node-modal .flow-card--details .settings-panel,
.product-rule-node-panel .flow-card--details .conditions-tab,
.product-rule-node-panel .flow-card--details .settings-panel {
  padding: var(--spacing-xs);
}
.product-rule-node-modal .flow-card--details .dependency-list,
.product-rule-node-modal .flow-card--details .settings-list,
.product-rule-node-panel .flow-card--details .dependency-list,
.product-rule-node-panel .flow-card--details .settings-list {
  max-height: 180px;
  padding-right: var(--spacing-xs);
  overflow-y: auto;
}
.product-rule-node-modal .flow-card h4,
.product-rule-node-panel .flow-card h4 {
  margin: 0;
  font-size: var(--font-size-sm);
}
.product-rule-node-modal .flow-visualizer,
.product-rule-node-panel .flow-visualizer {
  display: grid;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xxs);
}
.product-rule-node-modal .flow-visualizer__title,
.product-rule-node-panel .flow-visualizer__title {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.product-rule-node-modal .flow-visualizer__bar,
.product-rule-node-panel .flow-visualizer__bar {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-default);
}
.product-rule-node-modal .flow-visualizer__bar--margin,
.product-rule-node-panel .flow-visualizer__bar--margin {
  position: relative;
  height: 12px;
  background: linear-gradient(90deg, var(--color-danger-bg) 0%, var(--color-warning-bg) 50%, var(--color-success-bg) 100%);
}
.product-rule-node-modal .flow-visualizer__marker,
.product-rule-node-panel .flow-visualizer__marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: var(--text-primary);
}
.product-rule-node-modal .flow-visualizer__marker--min,
.product-rule-node-panel .flow-visualizer__marker--min {
  background: var(--color-danger);
}
.product-rule-node-modal .flow-visualizer__marker--rec,
.product-rule-node-panel .flow-visualizer__marker--rec {
  background: var(--color-success);
}
.product-rule-node-modal .flow-visualizer__segment,
.product-rule-node-panel .flow-visualizer__segment {
  flex: 1;
  padding: 4px var(--spacing-xxs);
  border-right: 1px solid var(--border-default);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  text-align: center;
}
.product-rule-node-modal .flow-visualizer__segment:last-child,
.product-rule-node-panel .flow-visualizer__segment:last-child {
  border-right: none;
}
.product-rule-node-modal .flow-visualizer__segment--slow,
.product-rule-node-panel .flow-visualizer__segment--slow {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.product-rule-node-modal .flow-visualizer__segment--normal,
.product-rule-node-panel .flow-visualizer__segment--normal {
  background: var(--surface-default);
  color: var(--text-secondary);
}
.product-rule-node-modal .flow-visualizer__segment--fast,
.product-rule-node-panel .flow-visualizer__segment--fast {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.product-rule-node-modal .flow-visualizer__rows,
.product-rule-node-panel .flow-visualizer__rows {
  display: grid;
  gap: var(--spacing-xxs);
}
.product-rule-node-modal .flow-visualizer__row,
.product-rule-node-panel .flow-visualizer__row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: baseline;
  justify-content: space-between;
}
.product-rule-node-modal .flow-visualizer__value,
.product-rule-node-panel .flow-visualizer__value {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.product-rule-node-modal .flow-settings-list,
.product-rule-node-panel .flow-settings-list {
  display: grid;
  gap: var(--spacing-xxs);
}
.product-rule-node-modal .flow-settings-item,
.product-rule-node-panel .flow-settings-item {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: space-between;
}
.product-rule-node-modal .flow-settings-item__label,
.product-rule-node-panel .flow-settings-item__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.product-rule-node-modal .flow-settings-item__value,
.product-rule-node-panel .flow-settings-item__value {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.product-rule-node-modal .flow-settings-more,
.product-rule-node-panel .flow-settings-more {
  margin-top: var(--spacing-xxs);
}
.product-rule-node-modal .flow-quick-toggle,
.product-rule-node-panel .flow-quick-toggle {
  margin-top: var(--spacing-xxs);
  padding-top: var(--spacing-xxs);
  border-top: 1px solid var(--border-default);
}
.product-rule-node-modal .flow-compact-grid,
.product-rule-node-panel .flow-compact-grid {
  display: grid;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .flow-compact-grid .form-field,
.product-rule-node-panel .flow-compact-grid .form-field {
  margin: 0;
}
.product-rule-node-modal .flow-compact-grid .form-field label,
.product-rule-node-panel .flow-compact-grid .form-field label {
  margin-bottom: 2px;
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-compact-grid .form-field .form-input,
.product-rule-node-modal .flow-compact-grid .form-field .form-input--sm,
.product-rule-node-panel .flow-compact-grid .form-field .form-input,
.product-rule-node-panel .flow-compact-grid .form-field .form-input--sm {
  height: 28px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .form-toggle--compact,
.product-rule-node-panel .form-toggle--compact {
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-card__header,
.product-rule-node-panel .flow-card__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
}
.product-rule-node-modal .flow-task-title,
.product-rule-node-panel .flow-task-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}
.product-rule-node-modal .flow-task-meta,
.product-rule-node-panel .flow-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}
.product-rule-node-modal .flow-task-meta :is(.xw-pill, .status-pill),
.product-rule-node-panel .flow-task-meta :is(.xw-pill, .status-pill) {
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-task-grid,
.product-rule-node-panel .flow-task-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .flow-task-grid .form-field,
.product-rule-node-panel .flow-task-grid .form-field {
  margin: 0;
}
.product-rule-node-modal .flow-task-grid .form-field label,
.product-rule-node-panel .flow-task-grid .form-field label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-task-grid .form-field .form-input,
.product-rule-node-panel .flow-task-grid .form-field .form-input {
  height: 28px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-task-grid .form-field :is(.xw-pill, .status-pill),
.product-rule-node-panel .flow-task-grid .form-field :is(.xw-pill, .status-pill) {
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-task-grid .settings-field,
.product-rule-node-panel .flow-task-grid .settings-field {
  grid-column: 1/-1;
}
.product-rule-node-modal .flow-mermaid,
.product-rule-node-panel .flow-mermaid {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  padding: var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}
.product-rule-node-modal .flow-mermaid-editor,
.product-rule-node-panel .flow-mermaid-editor {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.product-rule-node-modal .flow-mermaid-editor[open],
.product-rule-node-panel .flow-mermaid-editor[open] {
  padding-bottom: var(--spacing-sm);
}
.product-rule-node-modal .flow-mermaid-editor__header,
.product-rule-node-panel .flow-mermaid-editor__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-sm);
  cursor: pointer;
  list-style: none;
}
.product-rule-node-modal .flow-mermaid-editor__header::-webkit-details-marker,
.product-rule-node-panel .flow-mermaid-editor__header::-webkit-details-marker {
  display: none;
}
.product-rule-node-modal .flow-mermaid-editor__header h4,
.product-rule-node-panel .flow-mermaid-editor__header h4 {
  margin: 0;
  font-size: var(--font-size-sm);
}
.product-rule-node-modal .flow-mermaid-editor__header p.muted,
.product-rule-node-panel .flow-mermaid-editor__header p.muted {
  margin: 0;
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-mermaid-editor__actions,
.product-rule-node-panel .flow-mermaid-editor__actions {
  display: flex;
  gap: var(--spacing-xxs);
  justify-content: flex-end;
  padding: 0 var(--spacing-sm) var(--spacing-sm);
}
.product-rule-node-modal .flow-mermaid-editor__tokens,
.product-rule-node-panel .flow-mermaid-editor__tokens {
  display: block;
  max-height: 60px;
  margin: var(--spacing-xs) var(--spacing-sm) 0;
  padding: var(--spacing-xs);
  overflow-y: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-mermaid-editor__tokens > span.muted,
.product-rule-node-panel .flow-mermaid-editor__tokens > span.muted {
  display: block;
  margin-bottom: var(--spacing-xxs);
}
.product-rule-node-modal .flow-mermaid-editor__tokens .pill-group,
.product-rule-node-panel .flow-mermaid-editor__tokens .pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}
.product-rule-node-modal .flow-mermaid-editor__tokens :is(.xw-pill, .status-pill),
.product-rule-node-panel .flow-mermaid-editor__tokens :is(.xw-pill, .status-pill) {
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-xxs);
  transition: background 0.15s ease;
  cursor: pointer;
}
.product-rule-node-modal .flow-mermaid-editor__tokens :is(.xw-pill, .status-pill):hover,
.product-rule-node-panel .flow-mermaid-editor__tokens :is(.xw-pill, .status-pill):hover {
  background: var(--color-primary-bg);
}
.product-rule-node-modal .flow-mermaid-editor textarea.form-input,
.product-rule-node-panel .flow-mermaid-editor textarea.form-input {
  width: calc(100% - var(--spacing-md));
  min-height: 100px;
  max-height: 160px;
  margin: 0 var(--spacing-sm);
  background: var(--surface-default);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  resize: vertical;
}
.product-rule-node-modal .flow-mermaid__canvas,
.product-rule-node-panel .flow-mermaid__canvas {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 240px;
  padding: var(--spacing-sm);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.product-rule-node-modal .flow-mermaid__canvas:empty::after,
.product-rule-node-panel .flow-mermaid__canvas:empty::after {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  content: "Flow diagram will appear here";
  font-style: italic;
}
.product-rule-node-modal .flow-mermaid__canvas svg,
.product-rule-node-panel .flow-mermaid__canvas svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.product-rule-node-modal .flow-mermaid__canvas text,
.product-rule-node-panel .flow-mermaid__canvas text {
  font-size: 12px;
}
.product-rule-node-modal .flow-mermaid__canvas .node,
.product-rule-node-panel .flow-mermaid__canvas .node {
  cursor: pointer;
  transition: filter 0.2s ease;
}
.product-rule-node-modal .flow-mermaid__canvas .node:hover,
.product-rule-node-panel .flow-mermaid__canvas .node:hover {
  filter: brightness(1.1);
}
.product-rule-node-modal .flow-mermaid__canvas [class~=edgePath],
.product-rule-node-panel .flow-mermaid__canvas [class~=edgePath] {
  cursor: pointer;
}
.product-rule-node-modal .flow-mermaid__canvas [class~=edgePath]:hover path,
.product-rule-node-panel .flow-mermaid__canvas [class~=edgePath]:hover path {
  stroke-width: 3px;
}
.product-rule-node-modal .flow-mermaid__canvas .flow-mermaid__loading,
.product-rule-node-panel .flow-mermaid__canvas .flow-mermaid__loading {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.product-rule-node-modal .flow-mermaid__canvas .flow-mermaid__loading::before,
.product-rule-node-panel .flow-mermaid__canvas .flow-mermaid__loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.product-rule-node-modal .flow-mermaid__canvas .flow-mermaid__error,
.product-rule-node-panel .flow-mermaid__canvas .flow-mermaid__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}
.product-rule-node-modal :root[data-theme=light] .flow-mermaid__canvas text,
.product-rule-node-panel :root[data-theme=light] .flow-mermaid__canvas text {
  fill: var(--text-primary);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.product-rule-node-modal .flow-grid,
.product-rule-node-panel .flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  align-items: start;
}
.product-rule-node-modal .flow-column,
.product-rule-node-panel .flow-column {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.product-rule-node-modal .flow-column--current,
.product-rule-node-panel .flow-column--current {
  border-color: var(--border-strong);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}
.product-rule-node-modal .flow-column__header,
.product-rule-node-panel .flow-column__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
}
.product-rule-node-modal .flow-list,
.product-rule-node-panel .flow-list {
  display: grid;
  gap: var(--spacing-xxs);
  max-height: 120px;
  padding-right: var(--spacing-xs);
  overflow-y: auto;
}
.product-rule-node-modal .flow-item,
.product-rule-node-panel .flow-item {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .flow-item__label,
.product-rule-node-panel .flow-item__label {
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-rule-node-modal .flow-current__header,
.product-rule-node-panel .flow-current__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
}
.product-rule-node-modal .flow-current__title,
.product-rule-node-panel .flow-current__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.product-rule-node-modal .flow-current__meta,
.product-rule-node-panel .flow-current__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .flow-current__details,
.product-rule-node-panel .flow-current__details {
  display: grid;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .flow-settings,
.product-rule-node-panel .flow-settings {
  display: grid;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-default);
}
.product-rule-node-modal .flow-settings__header,
.product-rule-node-panel .flow-settings__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
}
.product-rule-node-modal .flow-settings__list,
.product-rule-node-panel .flow-settings__list {
  display: grid;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .flow-settings__item,
.product-rule-node-panel .flow-settings__item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.product-rule-node-modal .flow-settings__key,
.product-rule-node-panel .flow-settings__key {
  font-weight: var(--font-weight-medium);
}
.product-rule-node-modal .flow-settings__value,
.product-rule-node-panel .flow-settings__value {
  max-width: 60%;
  overflow: hidden;
  text-align: right;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-rule-node-modal .flow-ai-status,
.product-rule-node-panel .flow-ai-status {
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-rule-node-modal .conditions-tab,
.product-rule-node-panel .conditions-tab {
  display: grid;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .conditions-tab h4,
.product-rule-node-panel .conditions-tab h4 {
  margin: 0;
  font-size: var(--font-size-sm);
}
.product-rule-node-modal .conditions-tab p.muted,
.product-rule-node-panel .conditions-tab p.muted {
  margin: 0;
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .dependency-list,
.product-rule-node-panel .dependency-list {
  display: grid;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
}
.product-rule-node-modal .dependency-item,
.product-rule-node-panel .dependency-item {
  display: grid;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: var(--font-size-xs);
  grid-template-columns: minmax(0, 1fr) 100px auto;
}
.product-rule-node-modal .dependency-item .dependency-task,
.product-rule-node-panel .dependency-item .dependency-task {
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-rule-node-modal .dependency-item .condition-select,
.product-rule-node-modal .dependency-item select,
.product-rule-node-panel .dependency-item .condition-select,
.product-rule-node-panel .dependency-item select {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .dependency-item button,
.product-rule-node-panel .dependency-item button {
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .add-dependency,
.product-rule-node-panel .add-dependency {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--spacing-xs);
  align-items: end;
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--border-default);
}
.product-rule-node-modal .add-dependency select,
.product-rule-node-panel .add-dependency select {
  width: 100%;
  height: 26px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .add-dependency .condition-select,
.product-rule-node-panel .add-dependency .condition-select {
  width: 100%;
  min-width: 0;
}
.product-rule-node-modal .add-dependency button,
.product-rule-node-panel .add-dependency button {
  grid-column: 1/-1;
  justify-self: end;
  font-size: var(--font-size-xs);
}
.product-rule-node-modal .settings-panel,
.product-rule-node-panel .settings-panel {
  display: grid;
  gap: var(--spacing-xs);
}
.product-rule-node-modal .settings-header,
.product-rule-node-panel .settings-header {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: space-between;
}
.product-rule-node-modal .settings-header--compact,
.product-rule-node-panel .settings-header--compact {
  padding-top: var(--spacing-xs);
}
.product-rule-node-modal .settings-list,
.product-rule-node-panel .settings-list {
  display: grid;
  gap: var(--spacing-xxs);
}
.product-rule-node-modal .settings-scope,
.product-rule-node-panel .settings-scope {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.product-rule-node-modal .settings-scope__header,
.product-rule-node-panel .settings-scope__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  justify-content: space-between;
}
.product-rule-node-modal .settings-scope__header h5,
.product-rule-node-panel .settings-scope__header h5 {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
}
.product-rule-node-modal .settings-scope__header p.muted,
.product-rule-node-panel .settings-scope__header p.muted {
  max-width: 60ch;
  margin: 2px 0 0;
  font-size: var(--font-size-xxs);
}
.product-rule-node-modal .settings-scope__count,
.product-rule-node-panel .settings-scope__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 var(--spacing-xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-default);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.product-rule-node-modal .settings-scope--node,
.product-rule-node-panel .settings-scope--node {
  border-color: rgba(56, 189, 248, 0.35);
}
.product-rule-node-modal .settings-scope--group,
.product-rule-node-panel .settings-scope--group {
  border-color: rgba(250, 204, 21, 0.32);
}
.product-rule-node-modal .settings-scope--shared,
.product-rule-node-panel .settings-scope--shared {
  border-color: rgba(52, 211, 153, 0.32);
}
.product-rule-node-modal .settings-row,
.product-rule-node-panel .settings-row {
  display: grid;
  gap: var(--spacing-xxs) var(--spacing-xs);
  align-items: end;
  padding: var(--spacing-xxs) var(--spacing-xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  grid-template-columns: minmax(90px, 1fr) minmax(70px, 90px) minmax(100px, 1fr) auto;
}
.product-rule-node-modal .settings-row .form-field,
.product-rule-node-panel .settings-row .form-field {
  min-width: 0;
}
.product-rule-node-modal .settings-row .form-field label,
.product-rule-node-panel .settings-row .form-field label {
  margin-bottom: 2px;
  font-size: var(--font-size-xxs);
}
.product-rule-node-modal .settings-row .form-field .form-input,
.product-rule-node-panel .settings-row .form-field .form-input {
  height: 28px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  font-size: var(--font-size-xxs);
}
.product-rule-node-modal .settings-row__actions,
.product-rule-node-panel .settings-row__actions {
  display: flex;
  align-items: center;
}
.product-rule-node-modal .settings-row__number,
.product-rule-node-panel .settings-row__number {
  display: flex;
  gap: var(--spacing-xxs);
  align-items: center;
}
.product-rule-node-modal .settings-row__unit,
.product-rule-node-panel .settings-row__unit {
  font-size: var(--font-size-xxs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.product-rule-node-modal .settings-row__meta,
.product-rule-node-panel .settings-row__meta {
  margin-top: var(--spacing-xxs);
  font-size: var(--font-size-xxs);
  color: var(--text-secondary);
}
.product-rule-node-modal .settings-row__source,
.product-rule-node-panel .settings-row__source {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  margin-top: var(--spacing-xxs);
}
.product-rule-node-modal .settings-row__scope-pill,
.product-rule-node-panel .settings-row__scope-pill {
  font-size: var(--font-size-xxs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-rule-node-modal .settings-row__help,
.product-rule-node-panel .settings-row__help {
  grid-column: 1/-1;
  font-size: var(--font-size-xxs);
  color: var(--text-secondary);
}
.product-rule-node-modal .settings-row__range,
.product-rule-node-panel .settings-row__range {
  margin-top: var(--spacing-xxs);
  font-size: var(--font-size-xxs);
  color: var(--text-secondary);
}
.product-rule-node-modal .settings-json,
.product-rule-node-panel .settings-json {
  padding: var(--spacing-sm);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.product-rule-node-modal .settings-json summary,
.product-rule-node-panel .settings-json summary {
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.product-rule-node-modal .pill-group,
.product-rule-node-panel .pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-content: flex-start;
  max-height: 160px;
  overflow-y: auto;
}
.product-rule-node-modal .pill-group::-webkit-scrollbar,
.product-rule-node-panel .pill-group::-webkit-scrollbar {
  width: 4px;
}
.product-rule-node-modal .pill-group::-webkit-scrollbar-track,
.product-rule-node-panel .pill-group::-webkit-scrollbar-track {
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}
.product-rule-node-modal .pill-group::-webkit-scrollbar-thumb,
.product-rule-node-panel .pill-group::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}
.product-rule-node-modal :root[data-theme=light] .xw-tabs,
.product-rule-node-panel :root[data-theme=light] .xw-tabs {
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-light);
}
@media (width <= 1100px) {
  .product-rule-node-modal .flow-layout,
  .product-rule-node-panel .flow-layout {
    grid-template-columns: 1fr;
  }
  .product-rule-node-modal .flow-sidebar,
  .product-rule-node-panel .flow-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
  }
}
@media (width <= 900px) {
  .product-rule-node-modal .config-grid,
  .product-rule-node-panel .config-grid {
    grid-template-columns: 1fr;
  }
  .product-rule-node-modal .flow-task-grid,
  .product-rule-node-panel .flow-task-grid {
    grid-template-columns: 1fr;
  }
  .product-rule-node-modal .dependency-item,
  .product-rule-node-panel .dependency-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .product-rule-node-modal .dependency-item .dependency-task,
  .product-rule-node-panel .dependency-item .dependency-task {
    white-space: normal;
  }
  .product-rule-node-modal .dependency-item button,
  .product-rule-node-panel .dependency-item button {
    width: 100%;
  }
  .product-rule-node-modal .add-dependency,
  .product-rule-node-panel .add-dependency {
    grid-template-columns: 1fr;
  }
  .product-rule-node-modal .add-dependency button,
  .product-rule-node-panel .add-dependency button {
    justify-self: stretch;
    width: 100%;
  }
  .product-rule-node-modal .settings-row,
  .product-rule-node-panel .settings-row {
    grid-template-columns: 1fr;
  }
  .product-rule-node-modal .flow-sidebar,
  .product-rule-node-panel .flow-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.product-rules-dependency-modal {
  max-width: 520px;
}
.product-rules-dependency-modal .dependency-modal__summary {
  display: grid;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.product-rules-import-modal {
  width: min(760px, 100%);
}

.product-rules-import-modal .modal__body,
.product-rules-import-modal .modal-body {
  max-height: min(70vh, 620px);
  overflow-y: auto;
}

.product-rules-preview-modal {
  width: min(920px, 100%);
}

.product-rules-preview-modal .modal__body,
.product-rules-preview-modal .modal-body {
  max-height: min(78vh, 760px);
  overflow-y: auto;
}

.product-rules-preview-modal .preview-results ul {
  max-height: min(44vh, 460px);
  padding-right: 0.15rem;
  overflow-y: auto;
}

.product-rules-preview-summary,
.product-rules-preview-action-candidates {
  display: grid;
  gap: var(--spacing-xs);
  min-width: 0;
}

.product-rules-preview-decision,
.product-rules-preview-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
}

.product-rules-preview-action-candidates {
  margin-bottom: var(--spacing-sm);
}

.product-rules-preview-action-candidates__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: space-between;
}

.product-rules-preview-action-candidates__header h5 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.product-rules-preview-modal__reason-code {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.product-rules-profile-presets {
  display: grid;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0 0;
  padding: 0;
  list-style: none;
}
.product-rules-profile-presets li {
  display: grid;
  gap: 0.15rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.product-rules-profile-presets strong {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}
.product-rules-profile-presets span {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--text-secondary);
}

@media (width <= 1200px) {
  .product-rules-node-panel {
    position: static;
    max-height: none;
    opacity: 100%;
    transform: none;
    pointer-events: auto;
  }
  .product-rule-node-panel {
    min-height: 0;
    max-height: none;
  }
  .product-rule-node-panel .flow-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width <= 1280px) {
  .product-rules-node-panel {
    position: relative;
  }
  .product-rules-node-panel.is-open {
    max-height: none;
  }
  .product-rule-node-panel {
    max-height: none;
  }
  .product-rule-node-panel .flow-layout {
    grid-template-columns: 1fr;
  }
}
.task-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.task-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem var(--spacing-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  box-shadow: var(--elevation-1);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease, color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}
.task-type-badge:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.task-title {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.task-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}

.preview-results {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-default);
}
.preview-results h4 {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.preview-results > p {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.preview-results > p::before {
  content: "~";
  margin-right: var(--spacing-xxs);
  color: var(--color-warning);
}
.preview-results ul {
  display: grid;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.preview-task {
  display: grid;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  transition: border-left-color 0.15s ease;
  grid-template-columns: 1fr auto;
}
.preview-task:has(.status-pill--success) {
  border-left-color: var(--color-success);
}
.preview-task:has(.status-pill--warning) {
  border-left-color: var(--color-warning);
}
.preview-task strong {
  font-size: var(--font-size-sm);
}
.preview-task .muted {
  grid-column: 1/-1;
  font-size: var(--font-size-xs);
}

.product-rules-dependency-modal .dependency-modal__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}

.product-rules-ai {
  display: grid;
  gap: 0.8rem;
  margin-top: 0;
}
.product-rules-ai .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-info);
}
.product-rules-ai .section-header h3 {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  margin: 0;
}
.product-rules-ai .section-header h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--color-info);
}
.product-rules-ai .product-rules-ai-panel {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
  transition: box-shadow 0.2s ease;
}
.product-rules-ai .product-rules-ai-panel:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.product-rules-ai .product-rules-ai-panel__summary {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.product-rules-ai .product-rules-ai-panel__summary::-webkit-details-marker {
  display: none;
}
.product-rules-ai .product-rules-ai-panel__meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.product-rules-ai .product-rules-ai-panel__content {
  display: grid;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}
.product-rules-ai .ai-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}
.product-rules-ai .ai-scope-card {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.product-rules-ai .ai-scope-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-rules-ai .ai-scope-card__body {
  display: grid;
  gap: var(--spacing-sm);
}
.product-rules-ai .form-toggle {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}
.product-rules-ai .form-toggle.is-disabled {
  opacity: 58%;
}
.product-rules-ai .form-toggle-list {
  display: grid;
  gap: var(--spacing-xs);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.flow-navigator {
  /* Component-local theme tokens — resolve from theme tokens (theme-agnostic) */
  --flow-nav-bg: var(--surface-default);
  --flow-nav-text: var(--text-primary);
  --flow-nav-surface: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
  --flow-nav-surface-strong: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
  --flow-nav-surface-deep: color-mix(in srgb, var(--surface-subtle) 90%, transparent);
  --flow-nav-surface-deeper: color-mix(in srgb, var(--surface-subtle) 95%, transparent);
  --flow-nav-surface-muted: color-mix(in srgb, var(--surface-subtle) 70%, transparent);
  --flow-nav-surface-overlay: color-mix(in srgb, var(--surface-elevated) 95%, transparent);
  --flow-nav-border-soft: var(--border-default);
  --flow-nav-border-faint: var(--border-soft);
  --flow-nav-border-thin: var(--border-soft);
  --flow-nav-border-muted: var(--border-strong);
  --flow-nav-text-muted: var(--text-secondary);
  --flow-nav-text-soft: var(--text-muted);
  --flow-nav-text-faint: var(--text-secondary);
  --flow-nav-text-strong: var(--text-primary);
  --flow-nav-hover-border: var(--border-strong);
  --flow-nav-hover-bg: var(--surface-muted);
  --flow-nav-logic-bg: var(--surface-subtle);
  --flow-nav-scrollbar-thumb: var(--border-strong);
  --flow-nav-inset-highlight: transparent;
  --flow-nav-connector-start: var(--border-default);
  --flow-nav-connector-mid: var(--border-strong);
  display: grid;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--flow-nav-bg);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  color: var(--flow-nav-text);
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.flow-navigator .glass-panel {
  border: 1px solid var(--flow-nav-border-soft);
  background: var(--flow-nav-surface);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
}

.flow-navigator__sidebar {
  display: flex;
  flex-direction: column;
  width: auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--flow-nav-border-soft);
  background: var(--flow-nav-surface);
}

.flow-navigator__sidebar-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scroll-padding-bottom: 6rem;
  scrollbar-width: thin;
}

.flow-navigator__sidebar-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1.5rem;
  border-bottom: 1px solid var(--flow-nav-border-soft);
  background: var(--flow-nav-surface-strong);
  backdrop-filter: blur(10px);
}

.flow-navigator__task-title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.flow-navigator__task-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  color: var(--text-on-brand);
}

.flow-navigator__task-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flow-navigator__task-meta {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flow-nav-text-muted);
}

.flow-navigator__task-description {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--flow-nav-text-faint);
}

.flow-navigator__sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem 5rem;
}

.flow-navigator__section-title {
  margin: 0;
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--flow-nav-text-muted);
}

.flow-navigator__config-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flow-navigator__settings-group {
  display: grid;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--flow-nav-border-soft);
  border-radius: 0.75rem;
  background: var(--flow-nav-surface-muted);
}

.flow-navigator__config-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flow-navigator__config-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.flow-navigator__config-label {
  font-size: 0.75rem;
  color: var(--flow-nav-text-strong);
}

.flow-navigator__config-meta {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.flow-navigator__config-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--color-primary);
}

.flow-navigator__scope-badge {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--flow-nav-border-muted);
  border-radius: 999px;
  background: var(--flow-nav-surface-deep);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flow-nav-text-muted);
}

.flow-navigator__scope-badge.is-node {
  border-color: var(--color-info-border);
  color: var(--color-info);
}

.flow-navigator__scope-badge.is-group {
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.flow-navigator__scope-badge.is-shared {
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.flow-navigator__range {
  width: 100%;
  height: 6px;
  margin-bottom: 0.25rem;
  border-radius: 999px;
  background: var(--color-muted);
  accent-color: #3b82f6;
  cursor: pointer;
}

.flow-navigator__text {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--flow-nav-border-muted);
  border-radius: 0.5rem;
  background: var(--flow-nav-surface-deep);
  font-size: 0.75rem;
  color: var(--text-primary);
}

.flow-navigator__toggle {
  display: flex;
  position: relative;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}

.flow-navigator__toggle input {
  position: absolute;
  opacity: 0%;
  pointer-events: none;
}

.flow-navigator__toggle-track {
  position: relative;
  width: 32px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-muted);
  transition: background 0.2s ease;
}

.flow-navigator__toggle-track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--text-on-brand);
  transition: transform 0.2s ease;
  content: "";
}

.flow-navigator__toggle input:checked + .flow-navigator__toggle-track {
  background: var(--color-primary);
}

.flow-navigator__toggle input:checked + .flow-navigator__toggle-track::after {
  transform: translateX(16px);
}

.flow-navigator__toggle-label {
  font-size: 0.65rem;
  color: var(--flow-nav-text-soft);
}

.flow-navigator__details {
  overflow: hidden;
  border: 1px solid var(--flow-nav-border-faint);
  border-radius: 0.75rem;
  background: var(--flow-nav-surface-muted);
}

.flow-navigator__details summary {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--flow-nav-border-thin);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flow-nav-text-strong);
  list-style: none;
  cursor: pointer;
}

.flow-navigator__details summary::-webkit-details-marker {
  display: none;
}

.flow-navigator__details-body {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1rem 1.5rem;
}

.flow-navigator__component-list {
  display: grid;
  gap: 0.75rem;
}

.flow-navigator__mermaid {
  padding: 0.5rem;
  border: 1px solid var(--flow-nav-border-soft);
  border-radius: 0.75rem;
  background: var(--flow-nav-surface-deep);
}

.flow-navigator__mermaid-canvas {
  min-height: 140px;
  cursor: grab;
  overflow: auto;
  scroll-padding: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.flow-navigator__mermaid-canvas.is-dragging {
  cursor: grabbing;
}

.flow-navigator__mermaid-canvas::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.flow-navigator__mermaid-block {
  display: grid;
  gap: 0.75rem;
}

.flow-navigator__mermaid-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-info-border);
  border-radius: 0.75rem;
  background: var(--flow-nav-surface-deep);
  box-shadow: inset 0 0 0 1px var(--flow-nav-inset-highlight);
}

.flow-navigator__mermaid-hint {
  font-size: 0.65rem;
  color: var(--flow-nav-text-soft);
}

.flow-navigator__mermaid--active {
  padding: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--color-info-border);
  border-radius: 1rem;
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--info) 8%, transparent) 0%, transparent 45%), radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--ok) 8%, transparent) 0%, transparent 40%), var(--flow-nav-surface-deeper);
  box-shadow: inset 0 0 0 1px var(--flow-nav-inset-highlight), var(--shadow-xl);
  -webkit-user-select: none;
     -moz-user-select: none;
}

.flow-navigator__mermaid--active .flow-navigator__mermaid-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  max-height: 60vh;
  padding: 0.75rem;
}

.flow-navigator__mermaid--active svg {
  max-width: none;
  text-rendering: geometricprecision;
  shape-rendering: geometricprecision;
}

.flow-navigator__mermaid--active svg text {
  font-weight: 500;
}

.flow-navigator__mermaid--active .node,
.flow-navigator__mermaid--active [class~=edgePath],
.flow-navigator__mermaid--active .edge {
  cursor: pointer;
}

.flow-navigator__mermaid-actions {
  display: flex;
  gap: 0.5rem;
}

.flow-navigator__token-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flow-navigator__sidebar-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--flow-nav-border-soft);
  background: var(--flow-nav-surface-deep);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
}

.flow-navigator__task-id {
  color: var(--flow-nav-text-soft);
}

.flow-navigator__status {
  font-weight: 600;
}

.flow-navigator__status.is-enabled {
  color: var(--color-success);
}

.flow-navigator__status.is-disabled {
  color: var(--color-warning);
}

.flow-navigator__muted {
  font-size: 0.7rem;
  color: var(--flow-nav-text-soft);
}

.flow-navigator__canvas {
  display: flex;
  position: relative;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
  background: var(--page-bg);
}

.flow-navigator__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--text-on-brand) 1px, transparent 1px), linear-gradient(90deg, var(--text-on-brand) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 3%;
}

.flow-navigator__viewport {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.flow-navigator__viewport.is-dragging {
  cursor: grabbing;
}

.flow-navigator__stage {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 0 0;
  will-change: transform;
}

.flow-navigator__canvas-content {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 1.75rem;
  align-items: stretch;
  width: min(980px, 100%);
  max-width: 980px;
  padding: 2.5rem 1.5rem 3rem;
}

.flow-navigator__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  width: 100%;
}

.flow-navigator__section-label {
  align-self: center;
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  color: var(--flow-nav-text-faint);
}

.flow-navigator__stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  align-self: center;
  width: 100%;
  max-width: 560px;
}

.flow-navigator__connector {
  width: 2px;
  height: 24px;
  background: linear-gradient(to bottom, var(--flow-nav-connector-start) 0%, var(--flow-nav-connector-mid) 50%, var(--flow-nav-connector-start) 100%);
  opacity: 50%;
}

.flow-navigator__arrow {
  width: 0;
  height: 0;
  border-top: 8px solid var(--flow-nav-connector-mid);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  opacity: 80%;
}

.flow-task-card {
  display: flex;
  position: relative;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--flow-nav-border-soft);
  border-radius: 1rem;
  background: var(--flow-nav-surface-deep);
  backdrop-filter: blur(12px);
  font: inherit;
  text-align: left;
  color: var(--flow-nav-text-strong);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.flow-task-card:hover {
  border-color: var(--flow-nav-hover-border);
  background: var(--flow-nav-hover-bg);
}

.flow-task-card__overlay {
  display: flex;
  position: absolute;
  inset: 0;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--flow-nav-surface-overlay);
  opacity: 0%;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-brand);
  transition: opacity 0.2s ease;
}

.flow-task-card:hover .flow-task-card__overlay {
  opacity: 100%;
}

.flow-task-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--flow-nav-border-muted);
  border-radius: 0.75rem;
  background: var(--flow-nav-surface-deep);
  color: var(--flow-nav-text-muted);
}

.flow-task-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
}

.flow-task-card__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.flow-task-card__meta {
  font-size: 0.65rem;
  color: var(--flow-nav-text-muted);
}

.flow-task-card--guard {
  cursor: default;
  opacity: 78%;
  border-style: dashed;
}

.flow-navigator__subsection-label {
  margin: 0;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flow-nav-text-faint);
}

.flow-navigator__subsection-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.flow-navigator__subsection-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  color: var(--flow-nav-text-muted);
}

.flow-navigator__scope-note {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--flow-nav-text-faint);
}

.flow-task-card__badge,
.flow-task-card__type {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--flow-nav-border-muted);
  border-radius: 999px;
  background: var(--flow-nav-surface-muted);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flow-nav-text-soft);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.flow-task-card__badge:hover,
.flow-task-card__type:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.flow-task-card__badge {
  margin-left: auto;
}

.flow-task-card__status {
  margin-left: 0.5rem;
  color: var(--color-success);
}

.flow-navigator__active {
  display: flex;
  position: relative;
  align-self: center;
  justify-content: center;
  width: 100%;
}

.flow-navigator__active-card {
  width: min(760px, 100%);
  padding: 0.5rem;
  border-top: 4px solid var(--color-primary);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-xl);
}

.flow-navigator__active-shell {
  padding: 1.5rem;
  border: 1px solid var(--flow-nav-border-faint);
  border-radius: 1rem;
  background: var(--flow-nav-surface-deep);
}

.flow-navigator__active-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.flow-navigator__active-header h2 {
  margin: 0.5rem 0 0;
  font-size: 1.45rem;
  color: var(--text-primary);
}

.flow-navigator__active-label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--color-primary-bg);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.flow-navigator__active-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--flow-nav-border-muted);
  border-radius: 1rem;
  background: var(--flow-nav-surface-deeper);
  color: var(--color-primary);
}

.flow-navigator__active-body {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.flow-navigator__guard-block {
  display: grid;
  gap: 0.5rem;
}

.flow-navigator__guard-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.flow-navigator__guard-subtitle {
  font-size: 0.65rem;
  color: var(--flow-nav-text-faint);
}

.flow-navigator__guard-list {
  display: grid;
  gap: 0.5rem;
}

.flow-navigator__settings-block {
  display: grid;
  gap: 0.5rem;
}

.flow-logic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.flow-logic-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: left;
}

.flow-logic-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--flow-nav-border-soft);
  border-radius: 0.75rem;
  background: var(--flow-nav-logic-bg);
  text-align: center;
}

.flow-logic-card--metric {
  text-align: left;
}

.flow-logic-card__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flow-nav-text-soft);
}

.flow-logic-card__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flow-logic-card__note {
  font-size: 0.65rem;
  color: var(--flow-nav-text-faint);
}

.flow-navigator__downstream-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-self: center;
  justify-content: center;
  width: 100%;
}

.flow-navigator ::-webkit-scrollbar {
  width: 6px;
}

.flow-navigator ::-webkit-scrollbar-track {
  background: transparent;
}

.flow-navigator ::-webkit-scrollbar-thumb {
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--flow-nav-scrollbar-thumb);
}

@media (width <= 1100px) {
  .flow-navigator {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .flow-navigator__sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--flow-nav-border-soft);
  }
  .flow-navigator__canvas-content {
    padding: 2rem 1rem;
  }
  .flow-logic-grid {
    grid-template-columns: 1fr;
  }
  .flow-navigator__mermaid-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .flow-navigator__mermaid--active .flow-navigator__mermaid-canvas {
    max-height: 50vh;
  }
  .flow-navigator__downstream-row {
    flex-direction: column;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Product Rules Workspace Overhaul */
.product-rules-page {
  --filter-chip-min-height: 2.15rem;
  --filter-chip-min-height-mobile: 2.75rem;
  --filter-chip-min-height-touch: 2.55rem;
  --filter-chip-padding-x: 0.72rem;
  --filter-chip-padding-x-mobile: 0.9rem;
  --filter-chip-padding-x-touch: 0.86rem;
  --filter-chip-font-size: 0.73rem;
  --filter-group-gap: 0.38rem;
  display: grid;
  gap: clamp(0.65rem, 1vw, 1rem);
  width: 100%;
  max-width: none;
  padding: clamp(0.45rem, 0.85vw, 0.85rem);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  margin-inline: 0;
}

.product-rules-workspace {
  display: grid;
  gap: clamp(0.65rem, 0.95vw, 0.95rem);
}

.product-rules-command-deck {
  display: grid;
  gap: clamp(0.7rem, 1vw, 1rem);
  align-items: start;
}

.product-rules-command-deck__main,
.product-rules-command-deck__rail {
  display: grid;
  gap: clamp(0.7rem, 1vw, 1rem);
  min-width: 0;
}

.product-rules-command-deck__rail {
  align-content: start;
}

.product-rules-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.product-rules-section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8 0%, #22c55e 38%, #f97316 100%);
  opacity: 75%;
  pointer-events: none;
}

.product-rules-section--overview {
  padding: clamp(0.75rem, 1vw, 1rem);
}

@media (width >= 900px) {
  .product-rules-command-deck {
    grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.72fr);
  }
  .product-rules-command-deck__rail {
    position: sticky;
    top: calc(var(--spacing-md) + 3.5rem);
  }
}
.product-rules-section--tasks {
  padding: clamp(0.65rem, 0.95vw, 0.95rem);
}

.product-rules-preview-actions {
  justify-content: flex-start;
  margin-top: 0.35rem;
}

.product-rules-preview-actions .workspace-action-bar__actions,
.product-rules-preview-actions .workspace-action-bar__group {
  justify-content: flex-start;
  margin-left: 0;
}

.product-rules-result-panel {
  padding: 0.85rem;
}

.product-rules-view-toolbar {
  margin-bottom: clamp(0.45rem, 0.7vw, 0.65rem);
}

.task-list-controls {
  display: grid;
  position: sticky;
  top: 0.6rem;
  z-index: 2;
  gap: clamp(0.6rem, 1vw, 1rem);
  align-items: start;
  margin-bottom: 0.9rem;
  padding: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-alt);
  grid-template-columns: minmax(0, 1fr) auto;
}

.task-list-controls__main {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.task-list-filters {
  gap: 0.5rem;
  padding: 0;
  border-bottom: none;
}

.task-list-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-left: auto;
}

.product-rules-action-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 1.4rem;
  background: var(--border-default);
  margin-inline: 0.1rem;
}

.product-rules-action--destructive:not(:disabled) {
  color: var(--color-danger);
}

.product-rules-action--destructive:not(:disabled):hover,
.product-rules-action--destructive:not(:disabled):focus-visible {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.task-list-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.task-list-controls .product-rules-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.task-list-controls .product-rules-quick-actions .xw-btn {
  box-shadow: var(--shadow-sm);
}

.product-rules-task-list .product-rules-empty-state {
  gap: 0.65rem;
  padding: 1.15rem 0.9rem;
  border: 1px dashed var(--border-default);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface-alt);
}

.product-rules-task-list .xw-empty.xw-empty--compact.product-rules-empty-state {
  gap: 0.55rem;
  padding: 0.95rem 0.8rem;
}

.product-rules-task-list .xw-empty.xw-empty--compact.product-rules-empty-state .xw-empty-content {
  max-width: 34ch;
}

.product-rules-task-list .product-rules-empty-state .xw-empty__icon {
  opacity: 46%;
  font-size: 1.65rem;
}

.product-rules-task-list .product-rules-empty-state h3 {
  margin: 0;
  font-size: 0.95rem;
}

.product-rules-task-list .product-rules-empty-state p {
  max-width: 48ch;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.38;
}

.task-category-card {
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.task-category-header {
  display: grid;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.task-category-trigger {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  border: none;
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.task-category-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-color);
}

.task-category-trigger h4 {
  margin: 0;
  font-size: 0.95rem;
}

.task-category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.task-category-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: auto;
  border: 1px solid var(--border-default);
  border-radius: calc((0.5rem + 0.75rem) / 2);
  background: var(--surface-alt);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.task-category-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.task-category-card > .task-list {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
}

.task-category-card > .task-list .task-row {
  border: 1px solid var(--border-default);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface-default);
  border-left-width: 4px;
  border-left-color: var(--border-strong);
}

.task-category-card > .task-list .task-row + .task-row {
  border-top: 1px solid var(--border-default);
  border-top-left-radius: calc((0.75rem + 1rem) / 2);
  border-top-right-radius: calc((0.75rem + 1rem) / 2);
}

.task-row {
  border: 1px solid var(--border-default);
  border-radius: calc((0.75rem + 1rem) / 2);
  background: var(--surface-default);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-left-color 0.16s ease;
  border-left-width: 4px;
  border-left-color: var(--border-strong);
}

.task-row:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-left-color: var(--color-primary);
}

.task-row__description {
  max-width: 90ch;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.task-category-actions .task-category-action-btn {
  min-height: 2.15rem;
  padding-inline: 0.72rem;
  white-space: nowrap;
}

.task-link {
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}

.task-row__icon {
  width: 30px;
  height: 30px;
}

@media (width <= 1200px) {
  .product-rules-view-toolbar {
    grid-template-columns: 1fr;
  }
  .product-rules-view-toolbar__right {
    justify-content: flex-start;
    width: 100%;
  }
  .product-rules-toolbar-group {
    min-width: min(100%, 220px);
  }
  .task-list-controls {
    grid-template-columns: 1fr;
    position: static;
  }
  .task-list-controls .product-rules-quick-actions {
    justify-content: flex-start;
  }
  .task-list-filters__actions {
    margin-left: 0;
  }
}
@media (width <= 960px) {
  .task-category-header {
    grid-template-columns: 1fr;
  }
  .task-row {
    grid-template-columns: 1fr;
  }
  .task-row__meta {
    flex-wrap: nowrap;
    padding-bottom: 0.12rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .task-row__meta :is(.xw-pill, .status-pill) {
    flex: 0 0 auto;
  }
}
@media (width <= 640px) {
  .product-rules-toolbar-group {
    width: 100%;
  }
  .product-rules-page {
    padding: 0.55rem;
  }
  .product-rules-page .xw-page-header--topbar .xw-page-header__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .product-rules-page .xw-page-header--topbar .xw-page-header__actions .pill-btn {
    width: 100%;
    min-height: 2.2rem;
    padding-inline: 0.6rem;
    font-size: 0.82rem;
  }
  .product-rules-section {
    border-radius: calc((0.75rem + 1rem) / 2);
  }
  .task-list-header {
    grid-template-columns: 1fr;
  }
  .task-list-subtitle {
    width: 100%;
    max-width: none;
  }
  .task-list-controls {
    padding: 0.55rem;
  }
  .product-rules-preview-actions .workspace-action-bar__actions,
  .product-rules-preview-actions .workspace-action-bar__group {
    width: 100%;
  }
  .product-rules-preview-actions .pill-btn {
    width: 100%;
    min-width: 0;
  }
  .task-list-filters {
    gap: 0.4rem;
  }
  .task-list-filters .filter-group {
    flex-wrap: nowrap;
    padding-bottom: 0.1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .task-list-filters .filter-group .filter-chip {
    flex: 0 0 auto;
    min-height: 2.4rem;
    padding-inline: 0.78rem;
    font-size: 0.74rem;
  }
  .task-list-filters__actions {
    width: 100%;
  }
  .task-list-filters__actions .pill-btn {
    flex: 1 1 auto;
  }
  .product-rules-ai .product-rules-ai-panel__summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .task-list-controls .product-rules-quick-actions {
    display: grid;
    gap: 0.4rem;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-list-controls .product-rules-quick-actions .xw-btn {
    justify-content: center;
    width: 100%;
    min-height: 2.35rem;
  }
  .task-list-controls .product-rules-quick-actions .xw-btn:last-child {
    grid-column: 1/-1;
  }
  .task-category-trigger {
    min-height: 2.45rem;
  }
  .task-category-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .task-category-actions .task-category-action-btn {
    width: 100%;
    height: 38px;
    min-height: 38px;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    padding-inline: 0.4rem;
  }
  .task-category-card > .task-list {
    padding: 0.5rem;
  }
  .task-row {
    padding: 0.65rem 0.75rem;
  }
  .product-rules-task-list .product-rules-empty-state,
  .product-rules-task-list .xw-empty.xw-empty--compact.product-rules-empty-state {
    gap: 0.45rem;
    padding: 0.75rem 0.65rem;
  }
  .product-rules-task-list .product-rules-empty-state .xw-empty__icon,
  .product-rules-task-list .xw-empty.xw-empty--compact.product-rules-empty-state .xw-empty__icon {
    font-size: 1.3rem;
  }
}
@media (width <= 640px) and (hover: none) and (pointer: coarse) {
  .product-rules-page .xw-page-header--topbar .xw-page-header__actions .pill-btn {
    min-height: 2.5rem;
  }
  .task-category-trigger {
    min-height: 2.75rem;
  }
  .task-category-actions .task-category-action-btn {
    height: 42px;
    min-height: 42px;
    font-size: 0.74rem;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
@media (width >= 961px) {
  .task-category-actions .task-category-action-btn, .task-list-filters__actions .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.72rem;
    border: 1px solid var(--border-strong) !important;
    border-radius: calc((0.5rem + 0.75rem) / 2);
    background: var(--surface-muted) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.12;
    color: var(--text-primary) !important;
    padding-inline: 0.58rem;
    white-space: nowrap;
  }
  .product-rules-page .xw-page-header--topbar {
    margin-bottom: 0.2rem;
  }
  .product-rules-page .xw-page-header--topbar .xw-page-header__actions {
    gap: 0.4rem;
  }
  .product-rules-page .xw-page-header--topbar .xw-page-header__actions .pill-btn {
    min-height: 2rem;
    padding: 0.35rem 0.68rem;
    border-radius: calc((0.5rem + 0.75rem) / 2);
    font-size: 0.82rem;
    font-weight: 600;
  }
  .product-rules-task-list {
    gap: 0.9rem;
  }
  .task-list-header {
    gap: 0.8rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-default);
    border-radius: calc((0.75rem + 1rem) / 2);
    background: var(--surface-alt);
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  }
  .task-list-title {
    gap: 0.45rem;
    min-width: 0;
  }
  .task-list-title h3 {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
  }
  .task-count {
    height: 1.35rem;
    padding: 0 0.5rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .task-list-controls {
    top: 0.55rem;
    gap: 0.6rem;
    align-items: start;
    padding: 0.62rem;
    border-radius: calc((0.75rem + 1rem) / 2);
    grid-template-columns: minmax(0, 1fr);
  }
  .task-list-controls__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }
  .task-list-filters {
    display: grid;
    gap: 0.42rem;
    align-items: start;
    padding: 0;
    border: none;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  }
  .task-list-filters .filter-label {
    grid-column: 1/-1;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }
  .task-list-filters .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem;
    align-items: center;
    min-height: 2.16rem;
    padding: 0.26rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--surface-alt);
  }
  .task-list-filters .filter-group .filter-chip {
    min-height: 1.56rem;
    padding-inline: 0.48rem;
    border-radius: 999px;
    font-size: 0.67rem;
    line-height: 1.1;
  }
  .task-list-filters .filter-group .filter-chip.filter-chip--active,
  .task-list-filters .filter-group .filter-chip[aria-pressed=true] {
    box-shadow: 0 0 0 1px var(--color-primary-border);
  }
  .task-list-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    place-content: start flex-end;
    margin-left: 0;
  }
  .task-list-filters__actions .pill-btn:hover {
    border-color: var(--color-primary-border) !important;
    background: var(--color-primary-bg) !important;
    color: var(--text-primary) !important;
  }
  .task-list-state {
    gap: 0.3rem;
    min-height: 1.6rem;
  }
  .task-list-state :is(.xw-pill, .status-pill) {
    min-height: 1.45rem;
    padding-inline: 0.45rem;
    font-size: 0.66rem;
  }
  .task-list-controls .product-rules-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    place-content: start flex-end;
    justify-self: stretch;
    width: 100%;
  }
  .task-list-controls .product-rules-quick-actions .xw-btn {
    flex: 0 1 auto;
    justify-content: center;
    min-height: 1.74rem;
    border-radius: 0.75rem;
    padding-inline: 0.62rem;
    font-size: 0.74rem;
  }
  .task-category-card {
    border: 1px solid var(--border-default);
    border-radius: calc((0.75rem + 1rem) / 2);
    box-shadow: var(--shadow-sm);
  }
  .task-category-card.is-expanded {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-md);
  }
  .task-category-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.5rem 0.66rem;
  }
  .task-category-trigger {
    gap: 0.45rem;
    min-height: 1.9rem;
    padding: 0.06rem 0;
  }
  .task-category-trigger h4 {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .task-category-count {
    min-width: 2.15rem;
    height: 1.26rem;
    padding-inline: 0.4rem;
    font-size: 0.64rem;
  }
  .task-category-toggle {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.92rem;
  }
  .task-category-actions {
    gap: 0.28rem;
  }
  .task-category-actions .task-category-action-btn:hover {
    border-color: var(--color-primary-border) !important;
    background: var(--color-primary-bg) !important;
    color: var(--text-primary) !important;
  }
  .task-category-card > .task-list {
    gap: 0.3rem;
    padding: 0.5rem 0.56rem;
  }
  .task-category-card > .task-list .task-row,
  .task-row {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    gap: 0.56rem;
    align-items: center;
    padding: 0.46rem 0.58rem;
    border-radius: 0.75rem;
  }
  .task-row__main {
    gap: 0.24rem;
    min-width: 0;
  }
  .task-row__title {
    display: grid;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .task-row__icon {
    width: 25px;
    height: 25px;
  }
  .task-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 700;
  }
  .task-row__type {
    max-width: 180px;
    padding: 0 0.42rem;
    overflow: hidden;
    font-size: 0.63rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .task-row__description {
    display: -webkit-box;
    max-width: 94ch;
    margin: 0;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .task-row__meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    margin-top: 0.08rem;
    padding-bottom: 0.08rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .task-row__meta :is(.xw-pill, .status-pill) {
    flex: 0 0 auto;
    min-height: 1.16rem;
    padding-inline: 0.34rem;
    font-size: 0.6rem;
    line-height: 1;
  }
  .task-row__meta .task-row__type-pill {
    border-color: var(--border-strong);
    background: var(--surface-muted);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-weight: 600;
    color: var(--text-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .task-row__meta .task-row__type-pill:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }
  .task-row.is-enabled {
    border-left-color: var(--color-primary);
  }
  .task-row.is-disabled {
    border-left-color: var(--border-strong);
    background: var(--surface-muted);
  }
  .task-row.is-inherited {
    box-shadow: inset 0 0 0 1px var(--color-primary-border);
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.admin-content:has(.product-rules-page),
.admin-shell--workspace .admin-content:has(.product-rules-page) {
  padding-block: clamp(0.65rem, 0.9vw, 0.95rem);
  padding-inline: clamp(0.9rem, 1.35vw, 1.45rem);
}

.product-rules-page {
  gap: 0.55rem;
  padding: 0;
}

.product-rules-workspace {
  display: grid;
  gap: 0.55rem;
}

.product-rules-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 0.75rem;
  align-items: start;
}

.product-rules-studio-shell.studio-shell {
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 0;
  min-height: min(72rem, 100vh - 9.5rem);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.product-rules-shell__main,
.product-rules-shell__rail {
  display: grid;
  gap: var(--spacing-md);
  min-width: 0;
}

.product-rules-studio-shell .product-rules-shell__main,
.product-rules-studio-shell .product-rules-shell__rail {
  align-content: start;
}

.product-rules-studio-shell .studio-rail,
.product-rules-studio-shell .studio-canvas,
.product-rules-studio-shell .studio-aside {
  min-width: 0;
  min-height: 0;
}

.product-rules-studio-shell .studio-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
  background: var(--surface-secondary);
}

.product-rules-studio-shell .studio-canvas {
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--surface-default);
}

.product-rules-studio-shell .studio-aside {
  padding: 1rem;
  overflow-y: auto;
  border-left: 1px solid var(--border-default);
  background: var(--surface-secondary);
}

.product-rules-shell__rail {
  align-content: start;
}

@media (width >= 1101px) {
  .product-rules-shell:not(.product-rules-studio-shell) .product-rules-shell__rail {
    position: sticky;
    top: calc(var(--spacing-md) + 4rem);
  }
}
@media (width <= 1280px) {
  .product-rules-studio-shell.studio-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .product-rules-studio-shell .studio-aside {
    display: none;
  }
}
@media (width <= 900px) {
  .product-rules-studio-shell.studio-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-rules-studio-shell .studio-rail {
    display: none;
  }
}
.product-rules-studio-rail__header {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  justify-content: space-between;
}

.product-rules-studio-rail__header h3 {
  margin: 0.12rem 0 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.product-rules-studio-rail__eyebrow,
.product-rules-studio-library__header span {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-rules-studio-rail__add {
  flex: 0 0 auto;
}

.product-rules-studio-rail__scenarios {
  display: grid;
  gap: 0.55rem;
}

.scenario-card--rail {
  display: grid;
  gap: 0.5rem;
  padding: 0.72rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.scenario-card--rail:hover {
  border-color: var(--color-primary-border);
  text-decoration: none;
}

.scenario-card--rail:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.scenario-card--rail.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 1px var(--color-primary-border);
}

.scenario-card--rail .scenario-card__header {
  display: flex;
  gap: 0.55rem;
  align-items: start;
  justify-content: space-between;
}

.scenario-card--rail .scenario-card__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.scenario-card--rail .scenario-card__title {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.scenario-card--rail .scenario-card__description,
.scenario-card--rail .scenario-card__summary {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.scenario-card--rail .scenario-card__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.scenario-card--rail .scenario-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.scenario-card--rail .scenario-card__meta span {
  padding: 0.16rem 0.38rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--text-secondary);
}

.product-rules-studio-rail__divider {
  height: 1px;
  background: var(--border-default);
}

.product-rules-studio-library {
  display: grid;
  gap: 0.7rem;
}

.product-rules-studio-library__header,
.product-rules-studio-library__item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
}

.product-rules-studio-library__header strong {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.product-rules-studio-library__list {
  display: grid;
  gap: 0.35rem;
}

.product-rules-studio-library__item {
  width: 100%;
  padding: 0.58rem 0.66rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

.product-rules-studio-library__item:hover,
.product-rules-studio-library__item.is-active {
  border-color: var(--border-default);
  background: var(--surface-default);
}

.product-rules-studio-library__item span {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.product-rules-studio-library__item small {
  color: var(--text-secondary);
  white-space: nowrap;
}

.product-rules-studio-library__browse {
  justify-content: center;
  width: 100%;
}

.rules-canvas-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.rules-canvas-head__copy {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.rules-canvas-head__eyebrow,
.block-node__label,
.rules-flow__version,
.rules-status__version {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.rules-canvas-head__title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--text-primary);
}

.rules-canvas-head__meta {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.rules-canvas-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  min-width: min(32rem, 45%);
}

.rules-status {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  box-shadow: var(--shadow-sm);
}

.rules-status__indicator {
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 0.22rem var(--color-success-bg);
}

.rules-status--warn .rules-status__indicator {
  background: var(--color-warning);
  box-shadow: 0 0 0 0.22rem var(--color-warning-bg);
}

.rules-status strong {
  font-size: 0.84rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.rules-status__description {
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-status__version {
  margin-left: auto;
  white-space: nowrap;
}

.rules-canvas-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.rules-canvas-card--filters {
  padding-block: 0.7rem;
}

.rules-canvas-toolbar .filter-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rules-canvas-toolbar .filter-bar__search {
  flex: 1 1 min(24rem, 100%);
}

.rules-flow__head,
.rules-flow-group__header,
.rules-flow-group__meta,
.block-node__meta,
.block-node__actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.rules-flow__head {
  justify-content: space-between;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-default);
}

.rules-flow__head h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.rules-flow__head span:not(.rules-flow__version) {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.rules-flow__groups {
  display: grid;
  gap: 0.7rem;
}

.rules-flow-group {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.rules-flow-group.is-expanded {
  border-color: var(--color-primary-border);
  background: var(--surface-default);
}

.rules-flow-group__header {
  justify-content: space-between;
  width: 100%;
  min-height: 3.15rem;
  padding: 0.68rem 0.82rem;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

.rules-flow-group__header:hover {
  background: var(--surface-hover);
}

.rules-flow-group__header:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
}

.rules-flow-group__title {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  font-weight: 700;
}

.rules-flow-group__title small,
.rules-flow-group__meta span {
  color: var(--text-secondary);
}

.rules-flow-group__title small {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
}

.rules-flow-group__meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.72rem;
  font-weight: 600;
}

.rules-flow-group__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: transform 0.18s ease, color 0.18s ease;
}

.rules-flow-group.is-expanded .rules-flow-group__chevron {
  color: var(--color-primary);
  transform: rotate(180deg);
}

.rules-flow-group__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 0.85rem 0.75rem;
}

.rules-flow__list {
  display: grid;
  gap: 0;
  padding: 0 0.85rem 0.85rem;
}

.product-rules-studio-shell .block-node {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-default);
}

.product-rules-studio-shell .block-node:hover,
.product-rules-studio-shell .block-node:focus-within {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
}

.product-rules-studio-shell .block-node.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 1px var(--color-primary-border);
}

.product-rules-studio-shell .block-node.is-disabled {
  background: var(--surface-secondary);
}

.product-rules-studio-shell .block-node--when {
  border-left-color: var(--color-info);
}

.product-rules-studio-shell .block-node--check {
  border-left-color: var(--color-warning);
}

.product-rules-studio-shell .block-node--then {
  border-left-color: var(--color-success);
}

.product-rules-studio-shell .block-node--agent {
  border-left-color: var(--agent);
}

.block-node__button {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.block-node__button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
}

.block-node__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  font-family: var(--font-mono, monospace);
}

.block-node__title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.block-node__description {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.block-node__meta {
  flex-wrap: wrap;
  gap: 0.32rem;
}

.block-node__meta :is(.xw-pill, .status-pill) {
  min-height: 1.35rem;
  padding-inline: 0.42rem;
  font-size: 0.68rem;
}

.block-node__optional {
  color: var(--text-muted);
}

.block-node__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.block-flow-connector {
  width: 1px;
  height: 1.05rem;
  margin-left: 1rem;
  background: var(--border-strong);
}

.product-rules-studio-shell .rules-graph {
  --product-rules-node-bg: var(--surface-default);
  --product-rules-node-border: var(--border-default);
  --product-rules-node-text: var(--text-primary);
  --product-rules-node-disabled-opacity: 0.58;
  --product-rules-node-disabled-bg: var(--surface-alt);
  --product-rules-node-disabled-border: var(--border-default);
  --product-rules-node-disabled-text: var(--text-muted);
  --product-rules-edge: var(--border-strong);
  --product-rules-ai-border: var(--agent);
  --product-rules-canvas: var(--surface-inset);
  --product-rules-category-finance-bg: var(--color-info-bg);
  --product-rules-category-finance-border: var(--color-info);
  --product-rules-category-campaigns-bg: var(--color-warning-bg);
  --product-rules-category-campaigns-border: var(--color-warning);
  --product-rules-category-content-bg: var(--agent-soft);
  --product-rules-category-content-border: var(--agent);
  --product-rules-category-stock-bg: var(--color-success-bg);
  --product-rules-category-stock-border: var(--color-success);
  --product-rules-selected-bg: var(--brand-soft);
  --product-rules-selected-border: var(--brand);
  --product-rules-upstream-border: var(--color-info);
  --product-rules-downstream-border: var(--agent);
  --product-rules-overlay-color: var(--brand);
  --product-rules-highlight-edge: var(--brand);
  --product-rules-downstream-edge: var(--agent);
  gap: 0.7rem;
}

.rules-graph__head,
.rules-graph__controls,
.rules-graph__group,
.rules-graph__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.rules-graph__head {
  align-items: flex-start;
  justify-content: space-between;
}

.rules-graph__head h3,
.rules-graph__head p {
  margin: 0;
}

.rules-graph__head h3 {
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.product-rules-graph-summary,
.rules-graph__version,
.rules-graph__label,
.rules-graph__legend-item {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.rules-graph__version {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  font-weight: 700;
  color: var(--text-primary);
}

.rules-graph__controls {
  align-items: flex-start;
  padding: 0.55rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.rules-graph__group {
  align-items: center;
}

.rules-graph__label {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rules-graph__legend {
  align-items: center;
}

.rules-graph__legend-item {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
  min-height: 1.55rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-default);
  font-weight: 600;
}

.rules-graph__swatch {
  width: 0.58rem;
  height: 0.58rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-secondary);
}

.rules-graph__swatch--finance {
  border-color: var(--color-info);
  background: var(--color-info-bg);
}

.rules-graph__swatch--campaigns {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.rules-graph__swatch--content {
  border-color: var(--agent);
  background: var(--agent-soft);
}

.rules-graph__swatch--stock {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.rules-graph-stage {
  position: relative;
  min-width: 0;
  min-height: clamp(340px, 42vh, 620px);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}

.rules-graph-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border-default) 1px, transparent 1px), linear-gradient(90deg, var(--border-default) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 20%;
  pointer-events: none;
}

.rules-graph-stage .product-rules-graph {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
}

.product-rules-dependency-modal .dependency-modal__summary {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.product-rules-dependency-modal .dependency-modal__summary div {
  display: grid;
  gap: 0.16rem;
}

.product-rules-dependency-modal .dependency-modal__summary span,
.product-rules-dependency-modal .xw-field__label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-rules-dependency-modal .dependency-modal__summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.product-rules-dependency-modal .xw-field {
  display: grid;
  gap: 0.35rem;
}

.product-rules-dependency-modal .xw-select {
  min-height: 2.25rem;
}

.product-rules-dependency-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  margin-top: 0.8rem;
}

.product-rules-studio-shell .rules-aside {
  gap: 1rem;
}

.rules-aside-panel {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--border-default);
}

.rules-aside-panel:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.rules-aside-panel__head {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.rules-aside-panel__head .section__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-aside-panel__badge {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-aside-panel__description,
.rules-impact-compact__summary,
.rules-aside-empty {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.rules-aside-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.rules-aside-actions--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rules-aside-actions .btn,
.rules-compare__controls .btn {
  min-height: 2rem;
  font-size: 0.78rem;
}

.rules-aside-actions .btn svg {
  width: 0.82rem;
  height: 0.82rem;
}

.rules-aside-form,
.rules-profile-summary,
.rules-profile-presets,
.rules-impact-compact,
.rules-impact-insights,
.rules-impact-categories,
.rules-impact-tasks,
.rules-attention-list,
.rules-source-list,
.rules-version-list,
.rules-compare,
.rules-version-diff,
.rules-audit-list {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.rules-aside-form .xw-field {
  display: grid;
  gap: 0.35rem;
}

.rules-aside-form .xw-field__label,
.rules-compare .xw-field__label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rules-aside-form .xw-field__help {
  min-width: 0;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.rules-aside-form .xw-select,
.rules-compare .xw-select {
  min-width: 0;
  min-height: 2.25rem;
  font-size: 0.82rem;
}

.rules-profile-summary,
.rules-impact-compact,
.rules-version-diff {
  padding: 0.65rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.rules-profile-summary p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.rules-profile-preset,
.rules-source-item,
.rules-attention-item,
.rules-version {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.55rem 0.62rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
}

.rules-profile-preset strong,
.rules-profile-preset span,
.rules-source-item__copy strong,
.rules-source-item__copy small,
.rules-attention-item__copy strong,
.rules-attention-item__copy small,
.rules-version__date,
.rules-version__actor,
.rules-version__reason,
.rules-tick__copy strong,
.rules-tick__copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-profile-preset strong,
.rules-source-item__copy strong,
.rules-attention-item__copy strong,
.rules-tick__copy strong {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.rules-profile-preset span,
.rules-source-item__copy small,
.rules-attention-item__copy small,
.rules-tick__copy small {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-secondary);
}

.rules-impact-metrics,
.rules-validation-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.rules-impact-metric,
.rules-aside-metric {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.rules-impact-metric span,
.rules-aside-metric span,
.rules-impact-metric small,
.rules-aside-metric small {
  overflow: hidden;
  font-size: 0.64rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.rules-impact-metric strong,
.rules-aside-metric strong {
  font-size: 1rem;
  line-height: 1.1;
  color: var(--text-primary);
}

.rules-impact-metric--success,
.rules-aside-metric--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.rules-impact-metric--warning,
.rules-aside-metric--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.rules-impact-metric--info,
.rules-impact-insight--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
}

.rules-impact-insight {
  display: grid;
  gap: 0.18rem;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
}

.rules-impact-insight strong {
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.rules-impact-insight span {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.rules-impact-categories {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.rules-impact-category,
.rules-impact-task {
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
}

.rules-impact-category {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.42rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--text-secondary);
}

.rules-impact-category strong {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-primary);
}

.rules-impact-task {
  display: grid;
  gap: 0.16rem;
  padding: 0.48rem 0.55rem;
}

.rules-impact-task span,
.rules-impact-task strong,
.rules-impact-task small,
.rules-impact-overflow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-impact-task span {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--text-secondary);
}

.rules-impact-task strong {
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.rules-impact-task small,
.rules-impact-overflow {
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text-muted);
}

.rules-source-item,
.rules-attention-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.rules-source-item__copy,
.rules-attention-item__copy,
.rules-tick__copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.rules-source-list {
  max-height: 19rem;
  padding-right: 0.15rem;
  overflow: auto;
}

.rules-version {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.rules-version.is-current {
  border-color: var(--agent-line);
  background: var(--agent-soft);
}

.rules-version__number {
  min-width: 2.1rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primary);
}

.rules-version__date,
.rules-version__actor,
.rules-version__reason {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.rules-version__reason {
  grid-column: 2/-1;
}

.rules-version__actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
}

.rules-compare__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.rules-compare__controls .btn {
  grid-column: 1/-1;
}

.rules-version-diff__entry {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.rules-version-diff__entry:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.rules-tick {
  display: grid;
  grid-template-columns: minmax(4.9rem, auto) 0.62rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-default);
}

.rules-tick:last-child {
  border-bottom: 0;
}

.rules-tick__time {
  overflow: hidden;
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.rules-tick__dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.2rem;
  border-radius: 999px;
  background: var(--agent);
  box-shadow: 0 0 0 3px var(--agent-soft);
}

.rules-aside-ai {
  max-height: 38rem;
  padding-right: 0.15rem;
  overflow: auto;
}

.product-rules-section--browser,
.product-rules-section--topology,
.product-rules-section--inspector {
  padding: 0.65rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.product-rules-section--overview {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-rules-browser-toolbar {
  margin-bottom: var(--spacing-sm);
}

.product-rules-browser-toolbar .filter-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.product-rules-browser-toolbar .filter-bar__search {
  flex: 1 1 min(24rem, 100%);
}

.product-rules-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.product-rules-category-stack {
  display: grid;
  gap: var(--spacing-sm);
}

.product-rules-category-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.product-rules-category-card.is-expanded {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
}

.product-rules-category-card__header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.product-rules-category-card__header:hover {
  background: var(--surface-default);
}

.product-rules-category-card__header:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
}

.product-rules-category-card__header h4 {
  margin: 0 0 0.2rem;
}

.product-rules-category-card__header .muted {
  margin: 0;
}

.product-rules-category-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.product-rules-category-card__actions {
  padding: 0 1.1rem 1rem;
}

.product-rules-rule-list {
  display: grid;
  gap: 0.85rem;
  padding: 0 1.1rem 1.1rem;
}

.product-rules-rule-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-left-color: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.product-rules-rule-card.is-enabled {
  border-left-color: var(--color-success-border);
}

.product-rules-rule-card.is-disabled {
  opacity: 78%;
}

.product-rules-rule-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.product-rules-rule-card:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--focus-ring-color), var(--shadow-sm);
}

.product-rules-rule-card.is-selected {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-border);
}

.product-rules-rule-card__body {
  display: grid;
  gap: 0.35rem 0.6rem;
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr);
}

.product-rules-rule-card__body:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--focus-ring-color);
  outline: none;
}

.product-rules-rule-card__icon {
  grid-row: 1/span 2;
}

.product-rules-rule-card__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.product-rules-rule-card__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: var(--text-primary);
}

.product-rules-rule-card__description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-rules-rule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.product-rules-rule-card__meta :is(.xw-pill, .status-pill) {
  min-height: 1.35rem;
  padding-inline: 0.45rem;
  font-size: 0.66rem;
}

.product-rules-rule-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.1rem;
  padding-top: 0.1rem;
  border-top: 1px dashed var(--border-default);
  padding-block-start: 0.35rem;
}

.product-rules-rule-card__reset {
  margin-left: auto;
}

.product-rules-relationship-empty,
.product-rules-inspector-empty {
  display: grid;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--text-secondary);
  place-items: center;
}

.product-rules-relationship-empty p,
.product-rules-inspector-empty p,
.product-rules-inspector-empty h3 {
  margin: 0;
}

.product-rules-relationship-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr) minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: stretch;
}

.product-rules-relationship-board__lane,
.product-rules-relationship-board__focus {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.product-rules-relationship-board__lane header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.product-rules-relationship-board__lane h4,
.product-rules-relationship-focus h4 {
  margin: 0;
}

.product-rules-relationship-board__stack {
  display: grid;
  gap: 0.65rem;
}

.product-rules-relationship-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  text-align: left;
  cursor: pointer;
}

.product-rules-relationship-card__icon,
.product-rule-studio__task-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--color-primary);
}

.product-rules-relationship-card__content,
.product-rule-studio__task-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.product-rules-relationship-card__content strong,
.product-rule-studio__task-copy strong {
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-rules-relationship-focus {
  display: grid;
  gap: 0.85rem;
}

.product-rules-relationship-focus__pills,
.product-rule-studio__focus-pills,
.product-rule-studio__guard-list,
.product-rule-inspector__token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.product-rules-relationship-focus__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.product-rules-relationship-focus__stats article {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
}

.product-rules-relationship-focus__stats span,
.product-rule-inspector__summary-card span {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-rule-inspector {
  display: grid;
  gap: var(--spacing-md);
}

.product-rule-inspector__header,
.product-rule-inspector__footer {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  justify-content: space-between;
}

.product-rule-inspector__header > .action-btn {
  min-width: 34px;
  height: 34px;
}

.product-rule-inspector__header-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.45rem;
  align-items: center;
}

.product-rule-inspector__enable-toggle {
  display: inline-flex;
  position: relative;
  gap: 0.42rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
}

.product-rule-inspector__enable-toggle:hover {
  border-color: var(--color-primary-border);
  color: var(--text-primary);
}

.product-rule-inspector__enable-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-rule-inspector__enable-track {
  display: inline-flex;
  align-items: center;
  width: 2rem;
  height: 1.1rem;
  padding: 0.12rem;
  border-radius: 999px;
  background: var(--surface-muted, var(--surface-secondary));
  box-shadow: inset 0 0 0 1px var(--border-default);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.product-rule-inspector__enable-thumb {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.product-rule-inspector__enable-toggle input:checked + .product-rule-inspector__enable-track {
  background: var(--color-success-bg, var(--surface-default));
  box-shadow: inset 0 0 0 1px var(--color-success-border);
}

.product-rule-inspector__enable-toggle input:checked + .product-rule-inspector__enable-track .product-rule-inspector__enable-thumb {
  background: var(--color-success);
  transform: translateX(0.9rem);
}

.product-rule-inspector__enable-toggle input:focus-visible + .product-rule-inspector__enable-track {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.product-rule-inspector__title-wrap {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  min-width: 0;
}

.product-rule-inspector__title-wrap h2,
.product-rule-inspector__section-header h3,
.product-rule-inspector__section-header h4 {
  margin: 0;
}

.product-rule-inspector__title-wrap .muted,
.product-rule-inspector__section-header .muted {
  margin: 0.2rem 0 0;
}

.product-rule-inspector__body {
  display: grid;
  gap: var(--spacing-md);
}

.product-rule-inspector__workspace-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.product-rule-inspector__workspace-state .muted {
  margin: 0;
}

.product-rule-inspector__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-default);
}

.product-rule-inspector__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  margin-bottom: -1px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem 0.5rem 0 0;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  border-bottom-color: transparent;
  cursor: pointer;
}

.product-rule-inspector__tab:hover {
  border-color: var(--color-primary-border);
  color: var(--text-primary);
}

.product-rule-inspector__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24);
}

.product-rule-inspector__tab.is-active {
  border-color: var(--color-primary-border);
  border-bottom-color: var(--surface-secondary);
  background: var(--surface-secondary);
  color: var(--text-primary);
}

.product-rule-inspector__panel[hidden] {
  display: none !important;
}

.product-rule-inspector__section {
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.product-rule-inspector__section--advanced summary,
.product-rule-inspector__subsection summary {
  cursor: pointer;
  list-style: none;
}

.product-rule-inspector__section--advanced > summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.product-rule-inspector__section--advanced[open] > summary {
  margin-bottom: 1rem;
}

.product-rule-inspector__section-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.product-rule-inspector__section-header--compact {
  margin-bottom: 0.75rem;
}

.product-rule-inspector__overview-grid,
.product-rule-inspector__advanced-grid {
  display: grid;
  gap: var(--spacing-sm);
}

.product-rule-inspector__overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-rule-inspector__advanced-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.product-rule-inspector__advanced-column,
.product-rule-inspector__component-list,
.product-rule-inspector__simulation-results {
  display: grid;
  gap: var(--spacing-sm);
}

.product-rule-inspector__component-warning {
  display: flex;
  gap: 0.42rem;
  align-items: flex-start;
  padding: 0.48rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border-default));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-default));
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.product-rule-inspector__component-warning svg {
  flex: 0 0 auto;
  color: var(--warning);
}

.product-rule-inspector__card {
  padding: 0.95rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
}

.product-rule-inspector__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.product-rule-inspector__summary-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.product-rule-inspector__summary-card small {
  color: var(--text-secondary);
}

.product-rule-inspector__simulation-form,
.add-dependency--inspector,
.dependency-item,
.product-rule-inspector__mermaid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.product-rule-inspector__simulation-form .form-field,
.add-dependency--inspector .form-input,
.add-dependency--inspector select {
  flex: 1 1 220px;
}

.product-rule-inspector__simulation-row,
.dependency-item {
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
}

.dependency-item__copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.dependency-item__copy span,
.product-rule-inspector__simulation-row span {
  color: var(--text-secondary);
}

.product-rule-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr) minmax(0, 1fr);
  gap: 0.85rem;
}

.product-rule-studio__lane,
.product-rule-studio__focus {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.product-rule-studio__lane h5 {
  margin: 0;
}

.product-rule-studio__task-card {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  text-align: left;
  cursor: pointer;
}

.product-rule-studio__focus-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.product-rule-studio__focus-head > div {
  display: grid;
  gap: 0.15rem;
}

.product-rule-inspector__mermaid-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.product-rule-inspector__mermaid-controls .action-btn {
  min-width: 32px;
  height: 32px;
  border-radius: 0.5rem;
}

.settings-row__actions .pill-btn {
  min-height: 30px;
}

.product-rule-inspector__mermaid-canvas-wrap {
  min-height: 320px;
  padding: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-secondary) 0%, var(--surface-default) 100%);
}

.product-rule-inspector__mermaid-canvas {
  min-height: 280px;
}

.product-rule-inspector__subsection {
  margin-top: 0.85rem;
}

.product-rule-inspector__schedule-disclosure {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rule-inspector__schedule-disclosure > summary {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.52rem 0.62rem;
  cursor: pointer;
  list-style: none;
}

.product-rule-inspector__schedule-disclosure[open] > summary svg {
  transform: rotate(180deg);
}

.product-rule-inspector__schedule-disclosure > summary:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.product-rule-inspector__schedule-summary {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.product-rule-inspector__schedule-summary span {
  overflow: hidden;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rule-inspector__schedule-fields {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr);
  gap: 0.42rem;
  padding: 0 0.62rem 0.62rem;
}

.product-rule-inspector__subsection-body {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.task-list-header--browser {
  margin-bottom: var(--spacing-sm);
}

.task-list-header--browser .task-list-subtitle {
  display: block;
  margin-top: 0.2rem;
}

.product-rule-inspector__section-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.settings-panel--inspector .settings-header,
.conditions-tab--inspector,
.dependency-list--inspector {
  display: grid;
  gap: 0.75rem;
}

@media (width <= 1300px) {
  .product-rule-inspector__advanced-grid,
  .product-rules-relationship-board,
  .product-rule-studio {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width <= 1100px) {
  .product-rules-shell:not(.product-rules-studio-shell) {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-rules-shell__rail {
    position: static;
  }
}
@media (width <= 900px) {
  .product-rules-rule-card,
  .product-rule-inspector__overview-grid,
  .product-rules-relationship-focus__stats,
  .product-rule-inspector__summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-rules-rule-card__actions,
  .product-rules-browser-toolbar .filter-bar__filters,
  .product-rules-browser-toolbar .filter-bar__filters .product-rules-toolbar-group,
  .product-rules-browser-toolbar .filter-bar__filters .filter-group,
  .task-list-filters__actions {
    width: 100%;
  }
  .product-rules-rule-card__actions {
    flex-flow: row wrap;
  }
}
.modal-overlay:has(.product-rules-inspector-sheet) {
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface-scrim);
  backdrop-filter: none;
}

body:has(.product-rules-inspector-sheet) .app-header,
body:has(.product-rules-inspector-sheet) .dashboard-header,
body:has(.product-rules-inspector-sheet) .workspace-page-frame__header,
body:has(.product-rules-inspector-sheet) .settings-page-header,
body:has(.product-rules-inspector-sheet) .products-header,
body:has(.product-rules-inspector-sheet) .shell-topbar,
body:has(.product-rules-inspector-sheet) .admin-topbar,
body:has(.product-rules-inspector-sheet) .topbar-left,
body:has(.product-rules-inspector-sheet) .topbar-title,
body:has(.product-rules-inspector-sheet) .topbar-actions,
body:has(.product-rules-inspector-sheet) .xw-page-header--topbar,
body:has(.product-rules-inspector-sheet) .xw-page-header__actions {
  opacity: 36%;
  filter: none;
}

.product-rules-inspector-sheet {
  width: min(920px, 100vw - 1rem);
  min-height: 0;
  max-height: min(760px, 100vh - 1.5rem);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  background: var(--surface-default);
  box-shadow: var(--shadow-xl);
}

.product-rules-inspector-sheet.modal--placement-end {
  align-self: flex-start;
  width: min(920px, 100vw - 1rem);
  max-width: min(920px, 100vw - 1rem);
  height: auto;
  min-height: 0;
  margin-block: 0.75rem;
  margin-inline-end: 0.75rem;
  border-radius: 1rem;
}

.product-rules-inspector-sheet .product-rule-inspector {
  gap: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__header,
.product-rules-inspector-sheet .product-rule-inspector__footer {
  position: sticky;
  z-index: 1;
  padding: 0.72rem 0.82rem;
  background: var(--surface-default);
}

.product-rules-inspector-sheet .product-rule-inspector__header {
  top: 0;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border-default);
}

.product-rules-inspector-sheet .product-rule-inspector__title-wrap {
  flex: 1 1 auto;
  gap: 0.55rem;
  align-items: flex-start;
  max-width: none;
}

.product-rules-inspector-sheet .product-rule-inspector__title-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__title-copy > .muted {
  margin: 0;
  overflow-wrap: anywhere;
}

.product-rules-inspector-sheet .product-rule-inspector__header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__tabs {
  gap: 0.12rem;
  padding: 0.42rem 0.85rem 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-default);
}

.product-rules-inspector-sheet .product-rule-inspector__header-meta :is(.xw-pill, .status-pill) {
  min-height: 1.2rem;
  padding: 0.12rem 0.42rem;
  font-size: 0.66rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.product-rules-inspector-sheet .product-rule-inspector__tab {
  min-height: 2rem;
  padding: 0.34rem 0.72rem;
  border-bottom-color: transparent;
  border-radius: 0.5rem 0.5rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__tab.is-active {
  border-bottom-color: var(--surface-secondary);
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__footer {
  bottom: 0;
  border-top: 1px solid var(--border-default);
}

.product-rules-inspector-sheet .product-rule-inspector__body {
  gap: 0;
  padding: 0.68rem 0.75rem 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-rules-inspector-sheet .product-rule-inspector__card {
  padding: 0.58rem 0.64rem;
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__run-layout {
  display: grid;
  grid-template-columns: minmax(135px, 0.46fr) minmax(0, 1fr);
  gap: 0.48rem;
}

.product-rules-inspector-sheet .product-rule-inspector__mini-card {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__mini-card--wide {
  grid-column: 1/-1;
}

.product-rules-inspector-sheet .product-rule-inspector__mini-card h4 {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--text-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__inline-setting .settings-field-content {
  min-width: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__compact-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr);
  gap: 0.42rem;
}

.product-rules-inspector-sheet .product-rule-inspector__fact-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__fact-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__fact-list dt {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__fact-list dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.product-rules-page .form-field label,
.product-rules-page .settings-field-label,
.product-rules-page .form-field small,
.product-rules-page .form-hint,
.product-rules-page .settings-field-help {
  color: var(--text-secondary);
}

.product-rules-page :is(.form-input, .form-field input, .form-field select, .form-field textarea) {
  border-color: var(--input-border, var(--border-default));
  background: var(--input-bg, var(--surface-default));
  color: var(--text-primary);
}

.product-rules-inspector-sheet :is(.form-input, .form-field input, .form-field select, .form-field textarea) {
  min-height: 2rem;
  padding: 0.38rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
}

.product-rules-inspector-sheet .form-field {
  gap: 0.24rem;
}

.product-rules-inspector-sheet .form-field label,
.product-rules-inspector-sheet .settings-row__label {
  font-size: 0.68rem;
  line-height: 1.1;
  color: var(--text-secondary);
}

.product-rules-inspector-sheet .pill-btn:disabled {
  box-shadow: none;
  opacity: 46%;
  filter: saturate(65%);
  cursor: not-allowed;
}

.product-rules-inspector-sheet .settings-panel--inspector {
  display: grid;
  gap: 0.48rem;
}

.product-rules-inspector-sheet .settings-panel--inspector .settings-header {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.product-rules-inspector-sheet .settings-list--flat {
  display: grid;
  gap: 0.36rem;
}

.product-rules-inspector-sheet .settings-display-group {
  display: grid;
  gap: 0.36rem;
  min-width: 0;
  padding: 0.42rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .settings-display-group--primary {
  border-color: var(--color-primary-border);
  background: var(--surface-default);
}

.product-rules-inspector-sheet .settings-display-group--advanced {
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet details.settings-display-group > summary {
  list-style: none;
}

.product-rules-inspector-sheet details.settings-display-group > summary::-webkit-details-marker {
  display: none;
}

.product-rules-inspector-sheet .settings-display-group__header {
  display: flex;
  gap: 0.55rem;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
  cursor: default;
}

.product-rules-inspector-sheet details.settings-display-group > .settings-display-group__header {
  cursor: pointer;
}

.product-rules-inspector-sheet .settings-display-group__header > span:first-child {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.product-rules-inspector-sheet .settings-display-group__header strong {
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.15;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-inspector-sheet .settings-display-group__header small {
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-inspector-sheet .settings-display-group__body {
  display: grid;
  gap: 0.34rem;
}

.product-rules-inspector-sheet .settings-group-label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
  padding: 0.4rem 0.08rem 0.1rem;
  border-top: 1px solid var(--border-default);
}

.product-rules-inspector-sheet .settings-group-label:first-child {
  padding-top: 0.1rem;
  border-top: 0;
}

.product-rules-inspector-sheet .settings-group-label > span:first-child {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.product-rules-inspector-sheet .settings-group-label strong {
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.15;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-inspector-sheet .settings-group-label small {
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-inspector-sheet .settings-scope {
  display: grid;
  gap: 0.38rem;
  padding: 0.48rem 0.52rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .settings-scope__header {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
}

.product-rules-inspector-sheet .settings-scope__header h5 {
  margin: 0;
  font-size: 0.78rem;
}

.product-rules-inspector-sheet .settings-scope__header .muted {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
}

.product-rules-inspector-sheet .settings-list {
  display: grid;
  gap: 0.36rem;
}

.product-rules-inspector-sheet .settings-row {
  display: grid;
  gap: 0.34rem 0.46rem;
  align-items: center;
  padding: 0.46rem 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-default);
}

.product-rules-inspector-sheet .settings-row--primary {
  border-color: var(--color-primary-border);
}

.product-rules-inspector-sheet .settings-row--defined {
  grid-template-columns: minmax(260px, 0.92fr) minmax(280px, 1.08fr) auto;
}

.product-rules-inspector-sheet .settings-row--custom {
  grid-template-columns: minmax(190px, 0.75fr) minmax(112px, 0.38fr) minmax(300px, 1.2fr) auto;
}

.product-rules-inspector-sheet .settings-row__identity {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.product-rules-inspector-sheet .settings-row__identity > .form-field {
  min-width: 0;
}

.product-rules-inspector-sheet .settings-row__name {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.product-rules-inspector-sheet .settings-row__purpose {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-rules-inspector-sheet .settings-row__source,
.product-rules-inspector-sheet .settings-row__actions,
.product-rules-inspector-sheet .settings-row__number {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.product-rules-inspector-sheet .settings-row__source {
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-top: 0;
}

.product-rules-inspector-sheet .settings-row__source :is(.xw-pill, .status-pill),
.product-rules-inspector-sheet .settings-scope__count {
  min-height: 1.12rem;
  padding: 0.1rem 0.36rem;
  font-size: 0.62rem;
  line-height: 1.1;
}

.product-rules-inspector-sheet .settings-row__role-pill {
  border-color: var(--color-primary-border);
}

.product-rules-inspector-sheet .settings-row__help,
.product-rules-inspector-sheet .settings-row__range {
  grid-column: 1/-1;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--text-secondary);
}

.product-rules-inspector-sheet .settings-row__actions {
  align-self: center;
}

.product-rules-inspector-sheet .settings-row__actions .action-btn {
  min-width: 1.95rem;
  height: 1.95rem;
  border-radius: 0.5rem;
}

.product-rules-inspector-sheet .settings-row__actions .action-btn:disabled {
  opacity: 38%;
  cursor: not-allowed;
}

.product-rules-inspector-sheet .settings-toggle {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 2rem;
  cursor: pointer;
}

.product-rules-inspector-sheet .settings-toggle input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-rules-inspector-sheet .settings-toggle__track {
  position: relative;
  width: 2.1rem;
  height: 1.12rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-secondary);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.product-rules-inspector-sheet .settings-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 0.16rem;
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 140ms ease, background-color 140ms ease;
  transform: translateY(-50%);
}

.product-rules-inspector-sheet .settings-toggle input:checked + .settings-toggle__track {
  border-color: var(--color-success-border);
  background: var(--color-success-bg, var(--surface-default));
}

.product-rules-inspector-sheet .settings-toggle input:checked + .settings-toggle__track .settings-toggle__thumb {
  background: var(--color-success);
  transform: translate(0.92rem, -50%);
}

.product-rules-inspector-sheet .settings-toggle input:focus-visible + .settings-toggle__track {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24);
}

.product-rules-inspector-sheet .settings-toggle__text {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-rules-inspector-sheet .settings-row__number {
  min-width: 0;
}

.product-rules-inspector-sheet .settings-row__number .form-input {
  min-width: 0;
}

.product-rules-inspector-sheet .settings-list-editor {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.product-rules-inspector-sheet .settings-list-editor__items,
.product-rules-inspector-sheet .settings-list-editor__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.product-rules-inspector-sheet .settings-list-editor__chip {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  max-width: 100%;
  min-height: 1.55rem;
  padding: 0.14rem 0.18rem 0.14rem 0.5rem;
  border: 1px solid var(--color-primary-border);
  border-radius: 999px;
  background: var(--surface-default);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-rules-inspector-sheet .settings-list-editor__chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-rules-inspector-sheet .settings-list-editor__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.22rem;
  height: 1.22rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.product-rules-inspector-sheet .settings-list-editor__remove:hover {
  background: var(--color-danger-bg, var(--surface-default));
  color: var(--color-danger);
}

.product-rules-inspector-sheet .settings-list-editor__remove:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
}

.product-rules-inspector-sheet .settings-list-editor__empty {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.product-rules-inspector-sheet .settings-list-editor__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.34rem;
  align-items: center;
}

.product-rules-inspector-sheet .settings-list-editor__suggestions .pill-btn {
  min-height: 1.55rem;
  padding: 0.16rem 0.44rem;
  font-size: 0.68rem;
}

.product-rules-inspector-sheet .settings-json {
  padding: 0.48rem 0.52rem;
  border: 1px dashed var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .settings-json summary {
  cursor: pointer;
  font-weight: 700;
}

.product-rules-inspector-sheet .conditions-tab--inspector,
.product-rules-inspector-sheet .dependency-list--inspector {
  display: grid;
  gap: 0.6rem;
}

.product-rules-inspector-sheet .dependency-item,
.product-rules-inspector-sheet .add-dependency--inspector {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(132px, 0.58fr) auto;
  gap: 0.42rem;
  align-items: end;
}

.product-rules-inspector-sheet .add-dependency--inspector {
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-default);
}

.product-rules-inspector-sheet .add-dependency--inspector .form-field {
  align-self: end;
  min-width: 0;
}

.product-rules-inspector-sheet .add-dependency--inspector :is(.form-input, select) {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  height: 2rem;
  min-height: 2rem;
  line-height: 1.2;
  padding-block: 0.34rem;
}

.product-rules-inspector-sheet .add-dependency--inspector .pill-btn {
  align-self: end;
  min-height: 2rem;
  padding-block: 0.34rem;
  white-space: nowrap;
}

.product-rules-inspector-sheet .product-rule-inspector__section-header {
  gap: 0.42rem;
  margin-bottom: 0.45rem;
}

.product-rules-inspector-sheet .product-rule-inspector__section-header h3,
.product-rules-inspector-sheet .product-rule-inspector__section-header h4,
.product-rules-inspector-sheet .product-rule-inspector__title-wrap h2 {
  font-size: 0.92rem;
}

.product-rules-inspector-sheet .product-rule-inspector__overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.6rem;
}

.product-rules-inspector-sheet .product-rule-inspector__advanced-grid,
.product-rules-inspector-sheet .product-rule-inspector__advanced-grid--single {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.48rem;
  margin-top: 0.58rem;
}

.product-rules-inspector-sheet .product-rule-studio--compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.product-rules-inspector-sheet .product-rule-studio__lane {
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.product-rules-inspector-sheet .product-rule-studio__task-card,
.product-rules-inspector-sheet .dependency-item,
.product-rules-inspector-sheet .product-rule-inspector__simulation-row {
  padding: 0.55rem 0.6rem;
  border-radius: 0.75rem;
}

.product-rules-inspector-sheet .product-rule-inspector__summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-rules-inspector-sheet .product-rule-inspector__mermaid-canvas-wrap {
  min-height: 180px;
}

.product-rules-inspector-sheet .product-rule-inspector__mermaid-canvas {
  min-height: 140px;
}

.product-rules-inspector-sheet .product-rule-inspector__logic-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-secondary);
}

.product-rules-inspector-sheet .product-rule-inspector__logic-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.product-rules-inspector-sheet .product-rule-inspector__logic-copy strong,
.product-rules-inspector-sheet .product-rule-inspector__logic-copy .muted {
  overflow-wrap: anywhere;
}

.product-rule-logic-modal {
  background: var(--surface-default);
}

.product-rule-logic-map {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  background: var(--surface-default);
  color: var(--text-primary);
}

.product-rule-logic-map__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.82rem 0.95rem;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-default);
}

.product-rule-logic-map__title {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.product-rule-logic-map__title h2,
.product-rule-logic-map__title .muted {
  margin: 0;
}

.product-rule-logic-map__title h2 {
  font-size: 1rem;
}

.product-rule-logic-map__title .muted {
  overflow-wrap: anywhere;
}

.product-rule-logic-map__canvas-wrap {
  min-height: 0;
  padding: 0.75rem;
  overflow: hidden;
  background: var(--surface-secondary);
}

.product-rule-logic-map__canvas {
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-default);
}

.product-rule-logic-map__canvas.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
}

.product-rule-logic-map__source {
  max-height: 34vh;
  overflow: auto;
  border-top: 1px solid var(--border-default);
  background: var(--surface-default);
}

.product-rule-logic-map__source > summary {
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.product-rule-logic-map__source > .product-rule-inspector__subsection-body {
  padding: 0 0.9rem 0.85rem;
}

@media (width <= 980px) {
  .product-rules-inspector-sheet {
    width: 100%;
    max-height: calc(100vh - 0.7rem);
  }
  .product-rules-inspector-sheet.modal--placement-end {
    max-width: 100%;
  }
  .product-rules-inspector-sheet .product-rule-studio--compact,
  .product-rules-inspector-sheet .product-rule-inspector__overview-grid,
  .product-rules-inspector-sheet .product-rule-inspector__summary-grid,
  .product-rules-inspector-sheet .product-rule-inspector__run-layout,
  .product-rules-inspector-sheet .product-rule-inspector__compact-grid,
  .product-rules-inspector-sheet .product-rule-inspector__schedule-fields,
  .product-rules-inspector-sheet .settings-row--defined,
  .product-rules-inspector-sheet .settings-row--custom,
  .product-rules-inspector-sheet .settings-list-editor__add,
  .product-rules-inspector-sheet .dependency-item,
  .product-rules-inspector-sheet .add-dependency--inspector,
  .product-rules-inspector-sheet .product-rule-inspector__logic-entry {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-rules-inspector-sheet .product-rule-inspector__mini-card--wide {
    grid-column: auto;
  }
  .product-rules-inspector-sheet .product-rule-inspector__fact-list > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Dense rule overview refinement */
.product-rules-category-stack {
  gap: 0.55rem;
}

.product-rules-overview-card {
  padding: 0.72rem 0.8rem;
  border-color: var(--color-primary-border);
  background: var(--surface-alt);
}

.product-rules-overview-card .workspace-summary-card__heading {
  gap: 0.28rem;
}

.product-rules-overview-card .workspace-summary-card__title {
  font-size: 0.98rem;
  line-height: 1.1;
}

.product-rules-overview-card__source {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.product-rules-overview-card__stats {
  display: grid;
  gap: 0.45rem;
}

.product-rules-overview-card .workspace-summary-card__pill-list {
  gap: 0.3rem;
}

.product-rules-category-card__title-wrap {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
}

.product-rules-category-card__header {
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
}

.product-rules-category-card__actions {
  padding: 0 0.8rem 0.7rem;
}

.product-rules-category-card__title-wrap h4 {
  margin: 0;
  font-size: 0.88rem;
}

.product-rules-category-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  min-height: 1.4rem;
  padding: 0 0.35rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-default);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.product-rules-category-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.product-rules-category-card__meta :is(.xw-pill, .status-pill) {
  min-height: 1.35rem;
  padding-inline: 0.4rem;
  font-size: 0.68rem;
}

.product-rules-category-card__stat {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
}

.product-rules-category-card__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.15rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: transform 0.18s ease, color 0.18s ease;
}

.product-rules-category-card.is-expanded .product-rules-category-card__chevron {
  color: var(--color-primary);
  transform: rotate(180deg);
}

.product-rules-rule-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-rules-rule-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.5rem;
  padding: 0 0.7rem 0.7rem;
}

.product-rules-rule-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  min-height: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--surface-default);
  box-shadow: none;
}

.product-rules-rule-card:last-child {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-default);
}

.product-rules-rule-card__actions {
  align-items: flex-start;
  margin-top: auto;
}

@media (width >= 760px) {
  .product-rules-rule-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .product-rules-rule-card__actions {
    align-self: center;
    justify-content: flex-end;
    margin-top: 0;
    padding: 0;
    border-top: 0;
  }
}
@media (width <= 980px) {
  .product-rules-overview-card__stats .workspace-summary-card__pill-list,
  .product-rules-category-card__meta {
    justify-content: flex-start;
  }
  .product-rules-rule-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width >= 1281px) {
  .product-rules-shell:not(.product-rules-studio-shell) {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
  }
}
@media (width >= 1101px) and (width <= 1280px) {
  .product-rules-shell:not(.product-rules-studio-shell) {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
  }
}
.product-rules-profile-layout,
.product-rules-profile-preview {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.product-rules-profile-picker label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.product-rules-profile-picker .form-input {
  min-height: 2.35rem;
  font-size: 0.86rem;
}

.product-rules-profile-preview .muted {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.38;
  color: var(--text-secondary);
}

.product-rules-profile-presets {
  display: grid;
  gap: 0;
  max-height: 13.5rem;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-default);
  list-style: none;
}

.product-rules-profile-presets li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  padding: 0.42rem 0.55rem;
  border-top: 1px solid var(--border-default);
}

.product-rules-profile-presets li:first-child {
  border-top: 0;
}

.product-rules-profile-presets strong,
.product-rules-profile-presets span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-profile-presets strong {
  font-size: 0.79rem;
  line-height: 1.22;
  color: var(--text-primary);
}

.product-rules-profile-presets span {
  font-size: 0.74rem;
  line-height: 1.22;
  text-align: right;
  color: var(--text-secondary);
}

.product-rules-ai--embedded {
  gap: 0.5rem;
}

.product-rules-ai--embedded .product-rules-ai__embedded-actions {
  display: flex;
  justify-content: flex-end;
}

.product-rules-ai--embedded .product-rules-ai__embedded-actions .xw-btn {
  min-height: 2rem;
  padding-block: 0.32rem;
  padding-inline: 0.7rem;
  font-size: 0.8rem;
}

.product-rules-ai--embedded .product-rules-ai-panel {
  border-radius: 0.5rem;
  background: var(--surface-default);
  box-shadow: none;
}

.product-rules-ai--embedded .product-rules-ai-panel:hover {
  box-shadow: none;
}

.product-rules-ai--embedded .product-rules-ai-panel__summary {
  min-height: 2rem;
  padding: 0.48rem 0.55rem;
  font-size: 0.82rem;
}

.product-rules-ai--embedded .product-rules-ai-panel__meta {
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-ai--embedded .product-rules-ai-panel__content {
  gap: 0.55rem;
  padding: 0 0.55rem 0.55rem;
}

.product-rules-ai--embedded .ai-scope-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.product-rules-ai--embedded .ai-scope-card {
  gap: 0.45rem;
  padding: 0.55rem;
  border-radius: 0.5rem;
}

.product-rules-ai--embedded .ai-scope-card__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.product-rules-ai--embedded .ai-scope-card__body .form-field {
  min-width: 0;
}

.product-rules-ai--embedded .ai-scope-card__body .form-input {
  min-height: 2.1rem;
  padding-block: 0.32rem;
  font-size: 0.84rem;
}

.product-rules-ai--embedded .form-toggle {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

.product-rules-ai-outcomes {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-alt);
}

.product-rules-ai-outcomes__header,
.product-rules-ai-outcomes__row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.product-rules-ai-outcomes__header strong,
.product-rules-ai-outcomes__row strong,
.product-rules-ai-outcomes__row span {
  min-width: 0;
}

.product-rules-ai-outcomes__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.product-rules-ai-outcomes__stats div,
.product-rules-ai-outcomes__row {
  min-width: 0;
  padding: 0.48rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background: var(--surface-default);
}

.product-rules-ai-outcomes__stats span,
.product-rules-ai-outcomes__label,
.product-rules-ai-outcomes__row small {
  display: block;
  min-width: 0;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--text-muted);
}

.product-rules-ai-outcomes__stats strong,
.product-rules-ai-outcomes__row strong {
  display: block;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rules-ai-outcomes__list {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.product-rules-ai-outcomes__row > span:first-child {
  display: grid;
  gap: 0.12rem;
}

.product-rules-ai-outcomes__row > span:last-child {
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: right;
  color: var(--text-muted);
}

.product-rules-ai-outcomes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
}

.product-rules-ai-outcomes__actions .xw-btn {
  min-height: 1.65rem;
  padding-inline: 0.45rem;
  font-size: 0.68rem;
}

.product-rules-holistic-measurement-modal .muted {
  margin: 0 0 var(--spacing-sm);
}

.product-rules-holistic-measurement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  min-width: 0;
}

.product-rules-holistic-measurement-grid__wide {
  grid-column: 1/-1;
}

.product-rules-holistic-measurement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: var(--spacing-md);
}

@media (width <= 1280px) {
  .product-rules-profile-presets li,
  .product-rules-ai-outcomes__stats,
  .product-rules-holistic-measurement-grid,
  .product-rules-ai--embedded .ai-scope-card__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-rules-profile-presets span {
    text-align: left;
  }
}
.product-rules-scenarios-page {
  --scenario-surface: color-mix(in srgb, var(--surface-default) 84%, var(--bg) 16%);
  --scenario-surface-strong: color-mix(in srgb, var(--surface-default) 68%, var(--bg) 32%);
  --scenario-surface-muted: color-mix(in srgb, var(--surface-alt) 88%, var(--bg) 12%);
  --scenario-border: color-mix(in srgb, var(--border-default) 72%, var(--brand) 28%);
  --scenario-border-strong: color-mix(in srgb, var(--border-default) 52%, var(--brand) 48%);
  --scenario-shadow: 0 18px 44px rgb(0 0 0 / 18%);
  --scenario-danger: var(--danger);
  --scenario-danger-soft: var(--danger-soft);
  --scenario-success: var(--ok);
  --scenario-warning: var(--warn);
  --scenario-accent: var(--brand);
  --product-rules-node-bg: var(--surface);
  --product-rules-node-border: var(--border-default);
  --product-rules-node-text: var(--text-primary);
  --product-rules-node-disabled-opacity: 0.45;
  --product-rules-node-disabled-bg: color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-subtle));
  --product-rules-node-disabled-border: var(--border-strong);
  --product-rules-node-disabled-text: var(--text-muted);
  --product-rules-edge: var(--border-strong);
  --product-rules-ai-border: var(--color-info);
  --product-rules-canvas: var(--surface-secondary);
  --product-rules-category-finance-bg: color-mix(in srgb, var(--color-info) 14%, var(--surface-default));
  --product-rules-category-finance-border: var(--color-info);
  --product-rules-category-campaigns-bg: color-mix(in srgb, var(--color-warning) 16%, var(--surface-default));
  --product-rules-category-campaigns-border: var(--color-warning);
  --product-rules-category-content-bg: color-mix(in srgb, var(--color-primary) 16%, var(--surface-default));
  --product-rules-category-content-border: var(--color-primary);
  --product-rules-category-stock-bg: color-mix(in srgb, var(--color-success) 16%, var(--surface-default));
  --product-rules-category-stock-border: var(--color-success);
  --product-rules-category-default-bg: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  --product-rules-category-default-border: var(--border-strong);
  --product-rules-selected-bg: color-mix(in srgb, var(--color-warning) 22%, var(--surface-default));
  --product-rules-selected-border: var(--warn);
  --product-rules-upstream-border: var(--color-info);
  --product-rules-downstream-border: var(--agent);
  --product-rules-overlay-color: var(--color-info);
  --product-rules-highlight-edge: var(--color-info);
  --product-rules-downstream-edge: var(--agent);
  --product-rules-mermaid-current-fill: color-mix(in srgb, var(--surface-default) 88%, var(--surface-subtle));
  --product-rules-mermaid-current-stroke: var(--color-success);
  --product-rules-mermaid-current-text: var(--text-primary);
  --product-rules-mermaid-ai-stroke: var(--color-info);
  --product-rules-mermaid-disabled-fill: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  --product-rules-mermaid-disabled-stroke: var(--border-strong);
  --product-rules-mermaid-disabled-text: var(--text-muted);
  --product-rules-mermaid-settings-fill: color-mix(in srgb, var(--surface-overlay) 88%, transparent);
  --product-rules-mermaid-settings-stroke: var(--border-strong);
  --product-rules-mermaid-settings-text: var(--text-primary);
  --product-rules-mermaid-action-fill: color-mix(in srgb, var(--surface-default) 86%, transparent);
  --product-rules-mermaid-action-stroke: var(--color-warning);
  --product-rules-mermaid-action-text: var(--text-primary);
}

.orders-analytics-page--mc .xw-dg-tb {
  padding-block: 10px;
}
.orders-analytics-page--mc .orders-analytics-page__date-filter {
  width: 142px;
  margin: 0;
}
.orders-analytics-page--mc .orders-analytics-page__date-filter .xw-input {
  min-height: 34px;
}
.orders-analytics-page--mc .orders-analytics-page__skeleton {
  margin: 0;
}
.orders-analytics-page--mc .orders-analytics-page__setup {
  margin: 18px 24px 0;
}
.orders-analytics-page--mc .orders-analytics-page__setup .xw-empty__action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.orders-analytics-page--mc .orders-analytics-page__setup-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
}
.orders-analytics-page--mc .xw-dg-body > .orders-list-section--channel,
.orders-analytics-page--mc .xw-dg-body > .orders-list-section--shop {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.orders-analytics-page--mc .orders-list-section--channel .orders-list-section__table-wrap,
.orders-analytics-page--mc .orders-list-section--shop .orders-list-section__table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.workspace-shell--design-owned-page:has(.orders-analytics-page--mc) {
  flex: 1 1 auto;
  min-height: 0;
}

.workspace-shell--design-owned-page:has(.orders-analytics-page--mc) > .workspace-page-frame__content,
.workspace-shell--design-owned-page:has(.orders-analytics-page--mc) > .workspace-page-frame__content > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.orders-filter,
.orders-stats {
  margin: 0;
}

.orders-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.orders-filter__group {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.orders-filter__group--grow {
  flex: 1 1 260px;
}

.orders-filter__label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.orders-filter__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.orders-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.orders-stat {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.orders-stat__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--brand);
}

.orders-stat__content {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.orders-stat__value {
  overflow: hidden;
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-stat__label {
  font-size: var(--fs-12);
  color: var(--muted);
}

.orders-list-section--mc {
  display: grid;
  gap: 12px;
}
.orders-list-section--mc .orders-list-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.orders-list-section--mc .orders-list-section__eyebrow {
  color: var(--muted);
}
.orders-list-section--mc .orders-list-section__title {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 650;
  line-height: 1.2;
  color: var(--text);
}
.orders-list-section--mc .orders-list-section__empty {
  margin: 16px 24px;
}
.orders-list-section--mc .orders-list-section__table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.orders-list-section--mc .orders-list-section__table {
  min-width: 1040px;
}
.orders-list-section--mc .orders-list-section__table th,
.orders-list-section--mc .orders-list-section__table td {
  vertical-align: middle;
}
.orders-list-section--mc .orders-list-section__row {
  cursor: pointer;
}
.orders-list-section--mc .orders-list-section__row--selected {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}
.orders-list-section--mc .orders-list-section__order,
.orders-list-section--mc .orders-list-section__items,
.orders-list-section--mc .orders-list-section__subtle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-list-section--mc .orders-list-section__order {
  max-width: 190px;
  font-weight: 650;
  color: var(--text);
}
.orders-list-section--mc .orders-list-section__subtle {
  max-width: 190px;
  font-size: var(--fs-12);
  color: var(--muted);
}
.orders-list-section--mc .orders-list-section__items {
  max-width: 220px;
}
.orders-list-section--mc .orders-list-section__actions-heading {
  text-align: right;
}
.orders-list-section--mc .orders-list-section__actions {
  min-width: 260px;
}
.orders-list-section--mc .orders-list-section__action-row,
.orders-list-section--mc .orders-list-section__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.orders-list-section--mc .orders-list-section__cards {
  display: none;
  gap: 10px;
}
.orders-list-section--mc .orders-list-section__card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
}
.orders-list-section--mc .orders-list-section__card--selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.orders-list-section--mc .orders-list-section__card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.orders-list-section--mc .orders-list-section__card-body,
.orders-list-section--mc .orders-list-section__detail-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}
.orders-list-section--mc .orders-list-section__card-actions {
  justify-content: flex-start;
}
.orders-list-section--mc .orders-list-section__detail {
  width: auto;
  margin: 0 24px 18px;
  border-radius: var(--r-md);
}
.orders-list-section--mc .orders-list-section__detail-card {
  margin-bottom: 12px;
}
.orders-list-section--mc .orders-list-section__detail-card .card__head {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.orders-list-section--mc .orders-list-section__line {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.orders-list-section--mc .orders-list-section__line:last-child {
  border-bottom: 0;
}
.orders-list-section--mc .orders-list-section__line-thumb {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, var(--brand-soft)), var(--surface-inset));
}
.orders-list-section--mc .orders-list-section__line-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.orders-list-section--mc .orders-list-section__line-main > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--text);
}
.orders-list-section--mc .orders-list-section__line-qty,
.orders-list-section--mc .orders-list-section__line-price {
  color: var(--text);
  white-space: nowrap;
}
.orders-list-section--mc .orders-list-section__empty-copy,
.orders-list-section--mc .orders-list-section__more {
  margin: 0;
  padding: 12px;
  font-size: var(--fs-13);
  color: var(--muted);
}
.orders-list-section--mc .orders-list-section__timeline {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.orders-list-section--mc .orders-list-section__tick {
  display: grid;
  grid-template-columns: 10px minmax(92px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  font-size: var(--fs-13);
}
.orders-list-section--mc .orders-list-section__tick-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}
.orders-list-section--mc .orders-list-section__tick-dot--ok {
  background: var(--ok);
}
.orders-list-section--mc .orders-list-section__tick-dot--warn {
  background: var(--warn);
}

.orders-confirm-modal .orders-confirm-modal__message {
  margin: 0 0 16px;
  color: var(--text);
}

.orders-shipping-modal .orders-shipping-modal__loading,
.orders-shipping-modal .orders-shipping-modal__notice,
.orders-history-modal .orders-shipping-modal__loading,
.orders-history-modal .orders-shipping-modal__notice {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-size: var(--fs-13);
  color: var(--muted);
}
.orders-shipping-modal .orders-modal-section,
.orders-history-modal .orders-modal-section {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.orders-shipping-modal .orders-modal-section:first-child,
.orders-history-modal .orders-modal-section:first-child {
  padding-top: 0;
}
.orders-shipping-modal .orders-modal-section:last-of-type,
.orders-history-modal .orders-modal-section:last-of-type {
  border-bottom: 0;
}
.orders-shipping-modal .orders-modal-section__head,
.orders-history-modal .orders-modal-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orders-shipping-modal .orders-modal-grid,
.orders-history-modal .orders-modal-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.orders-shipping-modal .orders-modal-grid--address,
.orders-history-modal .orders-modal-grid--address {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.orders-shipping-modal .orders-shipping-modal__check,
.orders-history-modal .orders-shipping-modal__check {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-size: var(--fs-13);
  color: var(--text);
}
.orders-shipping-modal .orders-shipping-modal__rates-head,
.orders-history-modal .orders-shipping-modal__rates-head {
  display: flex;
  justify-content: flex-start;
}
.orders-shipping-modal .orders-rate-list,
.orders-shipping-modal .orders-history-list,
.orders-history-modal .orders-rate-list,
.orders-history-modal .orders-history-list {
  display: grid;
  gap: 10px;
}
.orders-shipping-modal .orders-rate-card,
.orders-shipping-modal .orders-history-card,
.orders-history-modal .orders-rate-card,
.orders-history-modal .orders-history-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.orders-shipping-modal .orders-rate-card__head,
.orders-shipping-modal .orders-history-card__head,
.orders-shipping-modal .orders-history-card__audit-head,
.orders-history-modal .orders-rate-card__head,
.orders-history-modal .orders-history-card__head,
.orders-history-modal .orders-history-card__audit-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.orders-shipping-modal .orders-rate-card__head > div,
.orders-shipping-modal .orders-history-card__head > div,
.orders-history-modal .orders-rate-card__head > div,
.orders-history-modal .orders-history-card__head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.orders-shipping-modal .orders-rate-card__actions,
.orders-history-modal .orders-rate-card__actions {
  display: flex;
  justify-content: flex-end;
}
.orders-shipping-modal .orders-history-card__tags,
.orders-history-modal .orders-history-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.orders-shipping-modal .orders-history-card__details,
.orders-history-modal .orders-history-card__details {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}
.orders-shipping-modal .orders-history-card__audit,
.orders-history-modal .orders-history-card__audit {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.orders-shipping-modal .orders-history-card__audit-entry,
.orders-history-modal .orders-history-card__audit-entry {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}
.orders-shipping-modal .orders-history-card__audit-entry p,
.orders-history-modal .orders-history-card__audit-entry p {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--muted);
}

@media (width <= 900px) {
  .orders-shipping-modal .orders-modal-grid,
  .orders-shipping-modal .orders-modal-grid--address,
  .orders-history-modal .orders-modal-grid,
  .orders-history-modal .orders-modal-grid--address {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 760px) {
  .orders-analytics-page--mc .orders-analytics-page__date-filter {
    width: 100%;
  }
  .orders-analytics-page--mc .xw-dg-tb {
    flex-flow: row wrap;
    align-items: center;
    padding: 12px 24px;
  }
  .orders-analytics-page--mc .xw-dg-tb__left {
    flex: 1 1 100%;
    flex-flow: row wrap;
    align-items: center;
    width: auto;
    max-width: none;
  }
  .orders-analytics-page--mc .xw-dg-tb__search {
    width: min(200px, 100%);
  }
  .orders-analytics-page--mc .xw-dg-tb__tabs {
    width: auto;
    max-width: none;
    padding: 1px;
  }
  .orders-analytics-page--mc .xw-dg-tb__right {
    flex: 0 0 auto;
    flex-flow: row nowrap;
    align-items: center;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .orders-analytics-page--mc .xw-dg-tb__right::-webkit-scrollbar {
    display: none;
  }
  .orders-analytics-page--mc .xw-dg-tb__right > * {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .orders-analytics-page--mc .xw-dg-tb__right .xw-btn--icon {
    width: 34px;
    height: 34px;
  }
  .orders-list-section--mc .orders-list-section__table-wrap {
    display: none;
  }
  .orders-list-section--mc .orders-list-section__cards {
    display: grid;
    padding: 0 16px;
  }
  .orders-list-section--mc .orders-list-section__detail {
    margin: 0 16px 16px;
  }
  .orders-list-section--channel .orders-list-section__table-wrap,
  .orders-list-section--shop .orders-list-section__table-wrap {
    display: block;
  }
  .orders-list-section--channel .orders-list-section__table,
  .orders-list-section--shop .orders-list-section__table {
    min-width: 720px;
  }
  .orders-list-section--channel .orders-list-section__cards,
  .orders-list-section--shop .orders-list-section__cards {
    display: none;
  }
  .orders-shipping-modal .orders-modal-grid,
  .orders-shipping-modal .orders-modal-grid--address,
  .orders-history-modal .orders-modal-grid,
  .orders-history-modal .orders-modal-grid--address {
    grid-template-columns: 1fr;
  }
  .orders-shipping-modal .orders-rate-card__head,
  .orders-shipping-modal .orders-history-card__head,
  .orders-shipping-modal .orders-history-card__audit-head,
  .orders-history-modal .orders-rate-card__head,
  .orders-history-modal .orders-history-card__head,
  .orders-history-modal .orders-history-card__audit-head {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.admin-shell--workspace {
  color: var(--text-primary);
}

.admin-shell--workspace .sidebar-header,
.admin-shell--workspace .admin-topbar {
  border-color: var(--border-soft);
}

.admin-shell--workspace .sidebar-context-controls {
  border-bottom: 1px solid var(--border-soft);
}

.admin-shell--workspace .sidebar-collapse-btn,
.admin-shell--workspace .mobile-menu-btn,
.admin-shell--workspace .topbar-btn {
  color: var(--text-secondary);
}

.admin-shell--workspace .nav-section-title {
  color: var(--text-muted);
}

.admin-shell--workspace .nav-section-copy {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.admin-shell--workspace .nav-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
}

.admin-shell--workspace .nav-item-group {
  display: grid;
  gap: 0.375rem;
}

.admin-shell--workspace .nav-item-group + .nav-item-group {
  margin-top: 0.375rem;
}

.admin-shell--workspace .nav-item:hover,
.admin-shell--workspace .nav-item.active {
  border-color: var(--border-soft);
  background: var(--table-row-selected-bg);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

.admin-shell--workspace .nav-item:focus-visible {
  border-color: var(--border-soft);
  background: var(--table-row-selected-bg);
  box-shadow: var(--shadow-sm), 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  color: var(--text-primary);
  outline: none;
}

.admin-shell--workspace .nav-icon {
  opacity: 100%;
  color: inherit;
}

.admin-shell--workspace .nav-item--expanded {
  color: var(--text-primary);
}

.admin-shell--workspace .nav-list--nested {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0 0.75rem 0 1.5rem;
}

.admin-shell--workspace .nav-item--child {
  min-height: auto;
  padding: 0.5rem 0.75rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 52%, transparent);
  font-size: 0.82rem;
}

.admin-shell--workspace .nav-item--child .nav-icon {
  width: 1rem;
  font-size: 0.92rem;
}

.admin-shell--workspace .nav-item--child.active,
.admin-shell--workspace .nav-item--child:hover {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--table-row-selected-bg) 90%, var(--surface) 10%);
}

.admin-shell--workspace .nav-item--child:focus-visible {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--table-row-selected-bg) 90%, var(--surface) 10%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  color: var(--text-primary);
  outline: none;
}

.admin-shell--workspace .nav-item-group--expanded > .nav-item {
  border-color: var(--border-soft);
  background: var(--table-row-selected-bg);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

.admin-shell--workspace .nav-label__meta,
.admin-shell--workspace .topbar-title__subtitle,
.admin-shell--workspace .topbar-title__eyebrow,
.admin-shell--workspace .env-label {
  color: var(--text-muted);
}

.admin-shell--workspace .page-title,
.admin-shell--workspace .admin-title,
.admin-shell--workspace .user-menu__name,
.admin-shell--workspace .user-menu__item--action,
.admin-shell--workspace .scope-search__result-title {
  color: var(--text-primary);
}

.admin-shell--workspace .admin-topbar .page-title {
  border-radius: 0.375rem;
}

.admin-shell--workspace .admin-topbar .page-title:focus {
  outline: none;
  box-shadow: none;
}

.admin-shell--workspace .admin-topbar .page-title:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 24%, transparent);
  outline: none;
}

.admin-shell--workspace .admin-subtitle,
.admin-shell--workspace .user-menu__context,
.admin-shell--workspace .user-menu__section-title,
.admin-shell--workspace .user-menu__preference-label,
.admin-shell--workspace .scope-search__result-context,
.admin-shell--workspace .scope-search__result-icon,
.admin-shell--workspace .scope-search__state,
.admin-shell--workspace .scope-search__group-title {
  color: var(--text-secondary);
}

.admin-shell--workspace .user-menu__trigger {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-shell--workspace .user-menu__trigger:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.admin-shell--workspace .user-menu__trigger:focus-visible,
.admin-shell--workspace .user-menu__login-btn:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 24%, transparent);
  color: var(--text-primary);
  outline: none;
}

.admin-shell--workspace .user-menu__login-btn {
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  box-shadow: var(--shadow-sm);
}

.admin-shell--workspace .user-menu__login-btn:hover {
  background: var(--surface-muted);
}

.admin-shell--workspace .user-menu__dropdown,
.admin-shell--workspace .scope-search__dropdown {
  border-color: var(--border-soft);
  background: var(--dropdown-bg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.admin-shell--workspace .user-menu__item {
  color: var(--text-secondary);
}

.admin-shell--workspace .scope-search__result {
  color: var(--text-primary);
}

.admin-shell--workspace .scope-search__result:hover,
.admin-shell--workspace .scope-search__result.is-active {
  background: var(--table-row-selected-bg);
  color: var(--text-primary);
}

.admin-shell--workspace .stat-card:hover,
.admin-shell--workspace .sysadmin-quick-action:hover,
.admin-shell--workspace .org-card.sysadmin-org-card:hover {
  box-shadow: var(--shadow-md);
}

.admin-shell--workspace {
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 12%, transparent), transparent 30%), radial-gradient(circle at top right, color-mix(in srgb, var(--agent) 10%, transparent), transparent 26%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.workspace-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}

.workspace-shell__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.workspace-shell--design-owned-page {
  gap: 0;
  padding: 0;
}

.workspace-header {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface-muted), var(--surface));
  box-shadow: var(--shadow-md);
}

.workspace-header__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.workspace-header__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--button-subtle-bg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.workspace-header__title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
  font-size: clamp(1.65rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  color: var(--text-primary);
}

.workspace-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--info) 18%, transparent));
  color: var(--accent);
}

.workspace-header__subtitle {
  max-width: 60rem;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.workspace-nav,
.workspace-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.workspace-nav__item,
.workspace-subnav__item,
.workspace-subnav__meta {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--input-bg);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  text-decoration: none;
}

.workspace-subnav__meta {
  font-weight: 500;
  color: var(--text-secondary);
}

.workspace-nav__item:hover,
.workspace-subnav__item:hover,
.workspace-nav__item.active,
.workspace-subnav__item.is-active {
  border-color: var(--border-soft);
  background: var(--table-row-selected-bg);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.workspace-subnav {
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: var(--surface-muted);
}

.workspace-subnav--wrap {
  row-gap: 0.375rem;
}

.catalog-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}

.catalog-workspace-grid__editor,
.catalog-workspace-grid__assistant {
  min-width: 0;
}

.catalog-workspace-grid__assistant {
  position: sticky;
  top: calc(var(--shell-header-height) + 1rem);
}

@media (width <= 1100px) {
  .catalog-workspace-grid {
    grid-template-columns: 1fr;
  }
  .catalog-workspace-grid__assistant {
    position: static;
  }
}
@media (width <= 768px) {
  .workspace-shell {
    padding: 1rem;
  }
  .workspace-shell--design-owned-page {
    padding: 0;
  }
  .workspace-header {
    padding: 1rem;
    border-radius: 22px;
  }
  .workspace-header__title {
    align-items: flex-start;
    font-size: 1.65rem;
  }
  .workspace-header__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
  }
  .admin-shell--workspace .admin-topbar {
    background: var(--surface-muted);
  }
}
.public-layout {
  min-height: 100vh;
  background: var(--bg);
}

.public-layout__preferences {
  display: flex;
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 1200;
  justify-content: flex-end;
  pointer-events: none;
}

.public-layout:has(.public-header) .public-layout__preferences {
  top: calc(64px + max(0.85rem, env(safe-area-inset-top)));
}

.public-preferences {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  margin: 0;
  font-family: var(--font-sans);
  pointer-events: auto;
}

.public-preferences__locale,
.public-preferences__theme {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: var(--shadow-2);
  color: var(--text-2);
}

.public-preferences__locale {
  position: relative;
  gap: 0.4rem;
  padding: 0 0.75rem 0 0.85rem;
}

.public-preferences__select {
  min-width: 8rem;
  min-height: 2.25rem;
  padding: 0 1.55rem 0 0.1rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

.public-preferences__select:focus-visible,
.public-preferences__theme-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.public-preferences__locale::after {
  position: absolute;
  right: 0.8rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  content: "";
  pointer-events: none;
  transform: rotate(45deg) translateY(-1px);
}

.public-preferences__theme {
  gap: 0.15rem;
  padding: 0.18rem;
}

.public-preferences__theme-button {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 1.95rem;
  padding: 0 0.55rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.public-preferences__theme-button.is-active,
.public-preferences__theme-button:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.public-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 80% -10%, var(--brand-glow), transparent 60%), radial-gradient(900px 500px at 0% 110%, var(--agent-glow), transparent 60%), var(--bg);
  color: var(--text);
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.public-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  height: 64px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.public-nav__brand {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand), var(--agent));
  box-shadow: var(--brand-glow);
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-on-brand);
}

.brand-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text);
}

.brand-name__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.public-nav__links {
  display: flex;
  flex: 1;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.public-nav__link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.public-nav__link:hover,
.public-nav__link:focus-visible {
  background: var(--muted-soft);
  color: var(--text);
}

.public-nav__divider,
.public-nav__link--mobile-action {
  display: none;
}

.public-nav__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.public-header__mobile-toggle {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
}

.public-header__mobile-toggle span {
  width: 16px;
  height: 2px;
  border-radius: var(--r-pill);
  background: currentcolor;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.public-header__mobile-toggle[aria-expanded=true] span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.public-header__mobile-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0%;
}

.public-header__mobile-toggle[aria-expanded=true] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.public-shell .btn--secondary,
.auth-shell .btn--secondary,
.public-btn--outline,
.public-btn--ghost {
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: none;
  color: var(--text);
}

.public-shell .btn--secondary:hover,
.auth-shell .btn--secondary:hover,
.public-btn--outline:hover,
.public-btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

.public-shell .btn--sm,
.auth-shell .btn--sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: var(--fs-13);
}

.public-shell .btn--full,
.auth-shell .btn--full {
  width: 100%;
}

.public-btn,
.public-btn--primary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  text-decoration: none;
}

.public-btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--agent));
  color: var(--text-on-brand);
}

.public-shell .eyebrow {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.public-shell .dim {
  color: var(--text-2);
}

.public-shell .h-page {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text);
}

.public-shell .h-card {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}

.landing-hero {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 32px 64px;
}

.landing-hero__dot {
  margin-right: 0;
  color: var(--agent);
}

.landing-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--text);
}

.public-shell :is(h1, h2, h3):focus {
  outline: none;
}

.landing-hero h1 .accent {
  color: var(--brand);
}

.landing-hero h1 .accent--agent {
  color: var(--agent);
}

.landing-hero__sub {
  max-width: 56ch;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
}

.landing-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-hero__telemetry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin-top: 24px;
}

.landing-telemetry-card {
  gap: 6px;
  padding: 14px;
}

.landing-telemetry-card__value {
  font-size: 22px;
  color: var(--text);
}

.landing-telemetry-card__value--ok {
  color: var(--ok);
}

.landing-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px;
}

.landing-section__title {
  max-width: 24ch;
}

.landing-section__intro {
  max-width: 56ch;
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.feature-card > p {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.55;
}

.feature-card .badge {
  align-self: flex-start;
}

.feature-card__icon {
  display: grid;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--brand);
  place-items: center;
}

.feature-card__icon--agent {
  color: var(--agent);
}

.feature-card--featured {
  border-color: var(--brand-line);
  box-shadow: var(--brand-glow);
}

.landing-price {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--text);
}

.landing-pricing-note {
  margin: 0;
  font-size: var(--fs-12);
}

.landing-section--footer {
  gap: 16px;
  padding-top: 32px;
}

.landing-doc-links {
  flex-wrap: wrap;
}

.landing-footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

@media (width <= 900px) {
  .public-nav {
    gap: 12px;
    height: 56px;
    padding: 0 16px;
  }
  .public-nav__links {
    display: none;
    position: absolute;
    top: 56px;
    right: 16px;
    left: 16px;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-1);
    box-shadow: var(--shadow-4);
  }
  .public-header--mobile-open .public-nav__links {
    display: flex;
  }
  .public-nav__link {
    justify-content: flex-start;
    min-height: 38px;
  }
  .public-nav__divider,
  .public-nav__link--mobile-action {
    display: inline-flex;
  }
  .public-nav__divider {
    height: 1px;
    margin: 4px 0;
    background: var(--line);
  }
  .public-nav__actions {
    display: none;
  }
  .public-header__mobile-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .public-layout:has(.public-header) .public-layout__preferences {
    top: calc(56px + max(0.65rem, env(safe-area-inset-top)));
  }
  .landing-hero,
  .landing-section {
    padding-right: 16px;
    padding-left: 16px;
  }
}
@media (width <= 640px) {
  .public-preferences {
    transform: scale(0.9);
    transform-origin: top right;
  }
  .landing-hero {
    padding-top: 56px;
  }
  .landing-hero h1 {
    font-size: 40px;
  }
  .landing-hero__sub {
    font-size: 16px;
  }
}
/* ============================================================
   Landing page (lp-) — ported faithfully from the design handoff
   (pricefetcheragentwebhost/project/pages.css). Header excluded
   (we keep the shared PublicHeader / .public-nav).
   ============================================================ */
/* Status/agent badge variants on the public shell. Raised to two-class
   specificity so they win over the global muted `.badge` base rule
   (Core/_badges.scss) which otherwise greys these pills out. */
.public-shell .badge--ok,
.public-shell .badge--success {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.public-shell .badge--warn,
.public-shell .badge--warning {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.public-shell .badge--danger,
.public-shell .badge--critical {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.public-shell .badge--info {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

.public-shell .badge--brand {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

.public-shell .badge--agent {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}

.lp-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.btn--lg {
  height: 44px;
  padding: 0 20px;
  font-size: var(--fs-15);
  border-radius: var(--r-md);
}

.lp-em-agent {
  color: var(--agent);
}

/* ---- hero ---- */
.lp-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: clamp(48px, 8vh, 92px) 0 clamp(40px, 6vh, 68px);
}

.lp-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.lp-h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.lp-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}

.lp-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.lp-trust {
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.lp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

.lp-trust span .icon, .lp-trust span svg {
  color: var(--text-2);
}

/* ---- hero product shot ---- */
.lp-shot {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.lp-shot__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.lp-shot__bar-t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.lp-shot__bar-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.lp-shot__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-shot__prod {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-shot__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line);
}

.lp-shot__prodtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lp-shot__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}

.lp-shot__sku {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.lp-shot__price {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.lp-shot__price .icon, .lp-shot__price svg {
  color: var(--text-3);
}

.lp-shot__from {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-3);
  text-decoration: line-through;
}

.lp-shot__to {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--agent);
}

.lp-shot__price .badge {
  margin-left: auto;
}

.lp-shot__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lp-shot__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.lp-shot__stat-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lp-shot__stat-v {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text);
}

.lp-shot__stat .badge {
  align-self: flex-start;
}

.lp-shot__why {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

.lp-shot__why-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agent);
  margin-right: 8px;
}

.lp-shot__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.lp-shot__foot-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.lp-shot__foot-btns {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ---- logo strip ---- */
.lp-strip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 8px 0 24px;
  border-top: 1px solid var(--line);
}

.lp-strip__lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lp-strip__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  font-size: 13px;
  color: var(--text);
}

.lp-chip em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lp-chip svg {
  color: var(--text-2);
}

/* ---- sections ---- */
.lp-section {
  padding: clamp(56px, 8vw, 92px) 0;
}

.lp-section--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lp-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 56ch;
  margin-bottom: 44px;
}

.lp-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.lp-head__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.lp-head__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
}

/* ---- steps ---- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.lp-step__n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand);
  letter-spacing: 0.04em;
}

.lp-step__t {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.lp-step__d {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* ---- agents ---- */
.lp-agents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.lp-agent {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.lp-agent__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-agent__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--agent);
  background: var(--agent-soft);
  border: 1px solid var(--agent-line);
}

.lp-agent__id {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lp-agent__name {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text);
}

.lp-agent__claim {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.lp-agent__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

.lp-agent__eg {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: auto;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.lp-agent__eg-lab {
  color: var(--agent);
  flex-shrink: 0;
}

/* ---- split sections ---- */
.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.lp-split__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-split__copy .lp-head__title {
  margin-top: 2px;
}

.lp-split--rev .lp-split__media {
  order: -1;
}

.lp-split__media {
  min-width: 0;
}

.lp-checks {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 8px;
}

.lp-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.lp-check__ic {
  flex-shrink: 0;
  margin-top: 1px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--ok);
  background: var(--ok-soft);
}

/* ---- reasoning/audit card ---- */
.lp-audit {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-audit__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-audit__sku {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.lp-audit__by {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--agent);
}

.lp-audit__diff {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-audit__row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12px;
}

.lp-audit__row > span:first-child {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}

.lp-audit__from {
  color: var(--text-3);
  text-decoration: line-through;
}

.lp-audit__to {
  color: var(--text);
  font-weight: 600;
}

.lp-audit__reason {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.lp-audit__log {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.lp-audit__tick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.lp-audit__tick-t {
  color: var(--text-3);
}

.lp-audit__tick-m {
  color: var(--text);
}

.lp-audit__tick-x {
  margin-left: auto;
  color: var(--text-3);
}

/* ---- channels ---- */
.lp-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lp-chan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.lp-chan__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text);
}

.lp-chan__head svg, .lp-chan__head .icon {
  color: var(--brand);
}

.lp-chan__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

.lp-chan .lp-strip__logos {
  justify-content: flex-start;
}

/* ---- outcomes ---- */
.lp-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-outcome {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.lp-outcome__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agent);
}

.lp-outcome__t {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.lp-outcome__d {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* ---- cta band ---- */
.lp-cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 32px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  background: radial-gradient(120% 120% at 50% 0%, var(--brand-soft), transparent 60%), var(--surface-1);
}

.lp-cta-band .lp-head__eyebrow {
  color: var(--brand);
}

.lp-cta-band__title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.lp-cta-band__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}

.lp-cta-band__foot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 4px;
}

/* ---- footer ---- */
.lp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.lp-footer__links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lp-footer__legal {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* ---- platform bento ---- */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lp-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.lp-tile__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}

.lp-tile__icon--agent {
  color: var(--agent);
  background: var(--agent-soft);
  border-color: var(--agent-line);
}

.lp-tile__t {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.lp-tile__d {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

.lp-tile__tag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- campaigns mockup ---- */
.lp-camp {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-camp__bar {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lp-camp__bar-t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.lp-camp__bar-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.lp-camp__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.lp-camp__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lp-camp__name b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.lp-camp__name span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lp-camp__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.lp-camp__metric span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lp-camp__metric b {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.lp-camp__guard {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding-top: 2px;
}

.lp-camp__guard svg, .lp-camp__guard .icon {
  color: var(--ok);
}

/* season chips */
.lp-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.lp-season {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-size: 12px;
  color: var(--text-2);
}

.lp-season--on {
  background: var(--agent-soft);
  border-color: var(--agent-line);
  color: var(--agent);
}

.lp-season--on .xw-dot {
  color: var(--agent);
}

/* ---- content & AI images mockup ---- */
.lp-content {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.lp-content__top {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  padding: 16px;
}

.lp-ph {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  min-height: 132px;
  text-align: center;
  padding: 8px;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 9px, var(--surface-1) 9px 18px);
}

.lp-ph__lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  line-height: 1.5;
}

.lp-content__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lp-cfield {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.lp-cfield__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  width: 64px;
  flex-shrink: 0;
}

.lp-cfield__v {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.lp-content__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.lp-content__foot-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.lp-content__foot .badge {
  margin-left: auto;
}

/* ---- label studio mockup ---- */
.lp-studio {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.lp-studio__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.lp-studio__bar-t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  margin-right: 10px;
}

.lp-studio__tab {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 4px 9px;
  border-radius: var(--r-sm);
}

.lp-studio__tab--on {
  color: var(--brand);
  background: var(--brand-soft);
}

.lp-studio__body {
  display: grid;
  grid-template-columns: 1fr 148px;
}

.lp-studio__canvas {
  padding: 18px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
}

.lp-label {
  width: 100%;
  max-width: 280px;
  background: #f4f4f6;
  color: #16161c;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-mono);
}

.lp-label__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
}

.lp-label__carrier {
  letter-spacing: 0.06em;
}

.lp-label__box {
  font-size: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 2px 6px;
}

.lp-label__addr {
  font-size: 11px;
  line-height: 1.5;
}

.lp-label__addr b {
  font-weight: 600;
}

.lp-barcode {
  height: 36px;
  width: 100%;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #16161c 0 2px, transparent 2px 4px, #16161c 4px 5px, transparent 5px 8px, #16161c 8px 11px, transparent 11px 13px);
}

.lp-label__track {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
}

.lp-studio__panel {
  border-left: 1px solid var(--line);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-1);
}

.lp-studio__score {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lp-studio__score-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lp-studio__score-v {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--ok);
  line-height: 1;
}

.lp-studio__check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

.lp-studio__check svg, .lp-studio__check .icon {
  color: var(--ok);
  flex-shrink: 0;
}

/* ---- mobile phone mockup ---- */
.lp-phone {
  width: 264px;
  margin: 0 auto;
  border-radius: 36px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.lp-phone__screen {
  position: relative;
  border-radius: 27px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 440px;
}

.lp-phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.lp-phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.lp-phone__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-phone__h b {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.lp-mcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lp-mcard__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-mcard__top .badge {
  margin-left: auto;
}

.lp-mcard__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.lp-mcard__sku {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

.lp-mcard__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.lp-mcard__from {
  color: var(--text-3);
  text-decoration: line-through;
  white-space: nowrap;
}

.lp-mcard__to {
  color: var(--agent);
  font-weight: 600;
  white-space: nowrap;
}

.lp-mcard__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lp-mscan {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

/* ---- responsive ---- */
@media (width <= 920px) {
  .lp-hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lp-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lp-channels {
    grid-template-columns: 1fr;
  }
  .lp-steps, .lp-agents, .lp-outcomes {
    grid-template-columns: 1fr;
  }
  .lp-bento {
    grid-template-columns: 1fr;
  }
  .lp-split--rev .lp-split__media {
    order: 0;
  }
}
@media (min-width: 921px) and (width <= 1080px) {
  .lp-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 600px) {
  .lp-wrap {
    padding: 0 18px;
  }
  .lp-shot__stats {
    grid-template-columns: 1fr;
  }
}
@media (width <= 520px) {
  .lp-content__top {
    grid-template-columns: 1fr;
  }
  .lp-camp__item {
    grid-template-columns: 1fr auto;
  }
}
/* Public shell theme tokens and visual variants. */
:root,
:root[data-theme=dark] {
  --public-bg: var(--bg);
  --public-bg-alt: var(--bg-2);
  --public-surface: color-mix(in srgb, var(--surface-2) 88%, transparent);
  --public-surface-hover: var(--surface-3);
  --public-border: var(--line);
  --public-border-hover: var(--line-strong);
  --public-text: var(--text);
  --public-text-muted: var(--text-2);
  --public-text-subtle: var(--text-3);
  --public-accent: var(--brand);
  --public-accent-hover: var(--brand-strong);
  --public-accent-glow: var(--brand-glow);
  --public-highlight: var(--agent);
  --public-success: var(--ok);
  --public-warning: var(--warn);
  --public-gradient-start: var(--brand);
  --public-gradient-end: var(--agent);
  --public-hero-chart-line: var(--brand);
  --public-hero-chart-fill-start: var(--brand-soft);
  --public-hero-chart-fill-end: rgb(96 165 250 / 0%);
  --public-mini-chart-line: var(--ok);
  --public-mini-chart-fill-start: var(--ok-soft);
  --public-mini-chart-fill-end: rgb(34 197 94 / 0%);
  --public-font: var(--font-sans);
}

:root[data-theme=light] {
  --public-bg: var(--bg);
  --public-bg-alt: var(--bg-2);
  --public-surface: color-mix(in srgb, var(--surface-2) 90%, transparent);
  --public-surface-hover: var(--surface-3);
  --public-border: var(--line);
  --public-border-hover: var(--line-strong);
  --public-text: var(--text);
  --public-text-muted: var(--text-2);
  --public-text-subtle: var(--text-3);
  --public-accent: var(--brand);
  --public-accent-hover: var(--brand-strong);
  --public-accent-glow: var(--brand-glow);
  --public-highlight: var(--agent);
  --public-success: var(--ok);
  --public-warning: var(--warn);
  --public-gradient-start: var(--brand);
  --public-gradient-end: var(--agent);
  --public-hero-chart-line: var(--brand);
  --public-hero-chart-fill-start: var(--brand-soft);
  --public-hero-chart-fill-end: rgb(37 99 235 / 0%);
  --public-mini-chart-line: var(--ok);
  --public-mini-chart-fill-start: var(--ok-soft);
  --public-mini-chart-fill-end: rgb(34 197 94 / 0%);
  --public-font: var(--font-sans);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) {
    --public-bg: var(--bg);
    --public-bg-alt: var(--bg-2);
    --public-surface: color-mix(in srgb, var(--surface-2) 90%, transparent);
    --public-surface-hover: var(--surface-3);
    --public-border: var(--line);
    --public-border-hover: var(--line-strong);
    --public-text: var(--text);
    --public-text-muted: var(--text-2);
    --public-text-subtle: var(--text-3);
    --public-accent: var(--brand);
    --public-accent-hover: var(--brand-strong);
    --public-accent-glow: var(--brand-glow);
    --public-highlight: var(--agent);
    --public-success: var(--ok);
    --public-warning: var(--warn);
    --public-gradient-start: var(--brand);
    --public-gradient-end: var(--agent);
    --public-hero-chart-line: var(--brand);
    --public-hero-chart-fill-start: var(--brand-soft);
    --public-hero-chart-fill-end: rgb(37 99 235 / 0%);
    --public-mini-chart-line: var(--ok);
    --public-mini-chart-fill-start: var(--ok-soft);
    --public-mini-chart-fill-end: rgb(34 197 94 / 0%);
    --public-font: var(--font-sans);
  }
}
.mail-settings--mc .mail-settings__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: none;
}
.mail-settings--mc .mail-settings__summary--verified {
  border-left-color: var(--ok);
}
.mail-settings--mc .mail-settings__summary--disabled {
  border-left-color: var(--text-3);
}
.mail-settings--mc .mail-settings__summary-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.mail-settings--mc .mail-settings__summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.mail-settings--mc .mail-settings__summary-copy strong {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}
.mail-settings--mc .mail-settings__summary-copy p {
  max-width: 760px;
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-3);
}
.mail-settings--mc .mail-settings__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.mail-settings--mc .mail-settings__summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.mail-settings--mc .mail-settings__card {
  border-radius: var(--r-sm);
  box-shadow: none;
}
.mail-settings--mc .mail-settings__card .card__head {
  align-items: flex-start;
  padding: 16px 18px;
}
.mail-settings--mc .mail-settings__card .dim {
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-3);
}
.mail-settings--mc .mail-settings__rows {
  display: grid;
  padding: 0 18px 2px;
  border-top: 1px solid var(--line);
}
.mail-settings--mc .mail-settings__setting-row {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  min-width: 0;
}
.mail-settings--mc .mail-settings__setting-row:last-child {
  border-bottom: 0;
}
.mail-settings--mc .mail-settings__setting-row--stacked {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.mail-settings--mc .mail-settings__setting-row--stacked .xw-setting-row__control {
  width: 100%;
}
.mail-settings--mc .mail-settings__setting-row .xw-field {
  width: 100%;
}
.mail-settings--mc .mail-settings__setting-row .xw-input,
.mail-settings--mc .mail-settings__setting-row .xw-textarea {
  width: 100%;
}
.mail-settings--mc .mail-settings__recipients {
  min-height: 116px;
  resize: vertical;
}
.mail-settings--mc .mail-settings__inline-badge {
  margin-left: 8px;
}
.mail-settings--mc .mail-settings__trace {
  margin: 14px 0 0;
  border-color: var(--line);
  background: var(--surface-1);
  color: var(--text-2);
}
.mail-settings--mc .validation-message {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-12);
  color: var(--danger);
}

@media (width <= 860px) {
  .mail-settings--mc .mail-settings__summary {
    grid-template-columns: 1fr;
  }
  .mail-settings--mc .mail-settings__summary-actions {
    justify-content: flex-start;
  }
  .mail-settings--mc .mail-settings__setting-row {
    grid-template-columns: 1fr;
  }
}
.identity-admin {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.identity-admin__surface,
.identity-admin .template-studio__library,
.identity-admin .template-studio__editor,
.identity-admin .template-studio__preview {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.identity-admin__surface {
  padding: 18px;
}
.identity-admin__section-header,
.identity-admin .template-studio__library-header,
.identity-admin .template-studio__editor-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.identity-admin__section-header {
  margin-bottom: 16px;
}
.identity-admin__section-header h2 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--text-primary);
}
.identity-admin__section-header p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.identity-admin__eyebrow {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.identity-admin__provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

.system-identity-settings--mc .system-identity-settings__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: none;
}
.system-identity-settings--mc .system-identity-settings__summary--ok {
  border-left-color: var(--ok);
}
.system-identity-settings--mc .system-identity-settings__summary--muted {
  border-left-color: var(--text-3);
}
.system-identity-settings--mc .system-identity-settings__summary-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.system-identity-settings--mc .system-identity-settings__summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.system-identity-settings--mc .system-identity-settings__summary-copy strong {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}
.system-identity-settings--mc .system-identity-settings__summary-copy p {
  max-width: 720px;
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-3);
}
.system-identity-settings--mc .system-identity-settings__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}
.system-identity-settings--mc .system-identity-settings__path-badge {
  max-width: 280px;
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-identity-settings--mc .system-identity-settings__provider-panel {
  border-radius: var(--r-sm);
  box-shadow: none;
}
.system-identity-settings--mc .system-identity-settings__provider-panel .settings-panel-header {
  align-items: flex-start;
  padding: 16px 18px;
}
.system-identity-settings--mc .system-identity-settings__provider-panel .settings-grid {
  display: grid;
  padding: 0 18px 2px;
  border-top: 1px solid var(--line);
}
.system-identity-settings--mc .system-identity-settings__setting-row {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  min-width: 0;
}
.system-identity-settings--mc .system-identity-settings__setting-row:last-child {
  border-bottom: 0;
}
.system-identity-settings--mc .system-identity-settings__setting-row--stacked {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.system-identity-settings--mc .system-identity-settings__setting-row--stacked .xw-setting-row__control {
  width: 100%;
}
.system-identity-settings--mc .system-identity-settings__setting-row .xw-field,
.system-identity-settings--mc .system-identity-settings__secret-control {
  width: 100%;
}
.system-identity-settings--mc .system-identity-settings__setting-row .xw-input,
.system-identity-settings--mc .system-identity-settings__setting-row .xw-textarea {
  width: 100%;
}
.system-identity-settings--mc .system-identity-settings__domains {
  min-height: 116px;
  resize: vertical;
}
.system-identity-settings--mc .system-identity-settings__secret-control {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.system-identity-settings--mc .system-identity-settings__secret-control .xw-field {
  justify-self: stretch;
}
.system-identity-settings--mc .system-identity-settings__trace {
  margin: 14px 0 0;
  border-color: var(--line);
  background: var(--surface-1);
  color: var(--text-2);
}

@media (width <= 860px) {
  .system-identity-settings--mc .system-identity-settings__summary {
    grid-template-columns: 1fr;
  }
  .system-identity-settings--mc .system-identity-settings__chips {
    justify-content: flex-start;
  }
  .system-identity-settings--mc .system-identity-settings__setting-row {
    grid-template-columns: 1fr;
  }
}
.identity-groups-page--mc .identity-groups__alert {
  margin: 16px 24px 0;
}
.identity-groups-page--mc .identity-groups__table-wrap {
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}
.identity-groups-page--mc .identity-groups__table {
  min-width: 860px;
}
.identity-groups-page--mc .identity-groups__table th,
.identity-groups-page--mc .identity-groups__table td {
  vertical-align: middle;
}
.identity-groups-page--mc .identity-groups__select-cell {
  width: 42px;
  padding-inline: 12px 0;
}
.identity-groups-page--mc .identity-groups__actions-head,
.identity-groups-page--mc .identity-groups__row-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.identity-groups-page--mc .identity-groups__row-actions {
  padding-right: 12px;
}
.identity-groups-page--mc .identity-groups__row--system {
  background: color-mix(in srgb, var(--brand-soft) 22%, transparent);
}
.identity-groups-page--mc .identity-groups__identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.identity-groups-page--mc .identity-groups__identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.identity-groups-page--mc .identity-groups__identity-text strong,
.identity-groups-page--mc .identity-groups__identity-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity-groups-page--mc .identity-groups__identity-text strong {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
}
.identity-groups-page--mc .identity-groups__identity-text span {
  font-size: var(--fs-11);
  color: var(--text-3);
}
.identity-groups-page--mc .identity-groups__chips,
.identity-groups-page--mc .identity-groups-detail__chips,
.identity-groups-page--mc .identity-groups-card__badges,
.identity-groups-page--mc .identity-groups-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.identity-groups-page--mc .identity-groups__permission {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.identity-groups-page--mc .identity-groups__overflow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
}
.identity-groups-page--mc .identity-groups__cards {
  display: none;
  gap: 12px;
  padding: 16px;
}
.identity-groups-page--mc .identity-groups-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
}
.identity-groups-page--mc .identity-groups-card:hover,
.identity-groups-page--mc .identity-groups-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface-2);
  outline: none;
}
.identity-groups-page--mc .identity-groups-card.is-selected,
.identity-groups-page--mc .identity-groups-card.is-bulk-selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.identity-groups-page--mc .identity-groups-card__main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.identity-groups-page--mc .identity-groups-card__select {
  padding-top: 3px;
}
.identity-groups-page--mc .identity-groups-card__badges,
.identity-groups-page--mc .identity-groups-card__meta {
  font-size: var(--fs-12);
  color: var(--text-3);
}
.identity-groups-page--mc .identity-groups-detail__section {
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}
.identity-groups-page--mc .identity-groups-detail__list {
  display: grid;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.identity-groups-page--mc .identity-groups-detail__list span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.identity-groups-page--mc .identity-groups-modal__body {
  display: grid;
  gap: 20px;
}
.identity-groups-page--mc .identity-groups-modal__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.identity-groups-page--mc .identity-groups-modal__option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.identity-groups-page--mc .identity-groups-modal__option-panel {
  min-height: 260px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}
.identity-groups-page--mc .identity-groups-modal__option-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: 360px;
  overflow: auto;
}

@media (width <= 900px) {
  .identity-groups-page--mc .identity-groups__table-wrap {
    display: none;
  }
  .identity-groups-page--mc .identity-groups__cards {
    display: grid;
  }
  .identity-groups-page--mc .identity-groups-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .identity-groups-page--mc .identity-groups__row-actions {
    grid-column: 1/-1;
    justify-self: end;
    padding-right: 0;
  }
  .identity-groups-page--mc .identity-groups-modal__fields,
  .identity-groups-page--mc .identity-groups-modal__option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .identity-groups-page--mc .identity-groups-modal__option-panel {
    min-height: 0;
  }
}
.identity-join-tokens-page--mc .identity-join-tokens__alert {
  margin: 16px 24px 0;
}
.identity-join-tokens-page--mc .identity-join-tokens__raw-token .alert__content {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.identity-join-tokens-page--mc .identity-join-tokens__raw-code {
  display: block;
  max-width: 100%;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text);
  white-space: nowrap;
}
.identity-join-tokens-page--mc .identity-join-tokens__table-wrap,
.identity-join-tokens-page--mc .identity-join-tokens__invitations-table-wrap {
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}
.identity-join-tokens-page--mc .identity-join-tokens__table {
  min-width: 980px;
}
.identity-join-tokens-page--mc .identity-join-tokens__table th,
.identity-join-tokens-page--mc .identity-join-tokens__table td,
.identity-join-tokens-page--mc .identity-join-tokens__invitations-table th,
.identity-join-tokens-page--mc .identity-join-tokens__invitations-table td {
  vertical-align: middle;
}
.identity-join-tokens-page--mc .identity-join-tokens__actions-head,
.identity-join-tokens-page--mc .identity-join-tokens__row-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.identity-join-tokens-page--mc .identity-join-tokens__row-actions {
  padding-right: 12px;
}
.identity-join-tokens-page--mc .identity-join-tokens__row--inactive {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text-3);
}
.identity-join-tokens-page--mc .identity-join-tokens__identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.identity-join-tokens-page--mc .identity-join-tokens__token-mark {
  display: inline-grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.identity-join-tokens-page--mc .identity-join-tokens__identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.identity-join-tokens-page--mc .identity-join-tokens__identity-text strong,
.identity-join-tokens-page--mc .identity-join-tokens__identity-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity-join-tokens-page--mc .identity-join-tokens__identity-text strong {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
}
.identity-join-tokens-page--mc .identity-join-tokens__identity-text span {
  font-size: var(--fs-11);
  color: var(--text-3);
}
.identity-join-tokens-page--mc .identity-join-tokens__cards {
  display: none;
  gap: 12px;
  padding: 16px;
}
.identity-join-tokens-page--mc .identity-join-tokens-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
}
.identity-join-tokens-page--mc .identity-join-tokens-card:hover,
.identity-join-tokens-page--mc .identity-join-tokens-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface-2);
  outline: none;
}
.identity-join-tokens-page--mc .identity-join-tokens-card.is-selected {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.identity-join-tokens-page--mc .identity-join-tokens-card__badges,
.identity-join-tokens-page--mc .identity-join-tokens-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  font-size: var(--fs-12);
  color: var(--text-3);
}
.identity-join-tokens-page--mc .identity-join-tokens-card__meta {
  display: grid;
  gap: 5px;
}
.identity-join-tokens-page--mc .identity-join-tokens-card__meta strong {
  font-weight: 600;
  color: var(--text-2);
}
.identity-join-tokens-page--mc .identity-join-tokens__invitations {
  margin: 18px 16px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}
.identity-join-tokens-page--mc .identity-join-tokens__invitations-table {
  min-width: 620px;
}
.identity-join-tokens-page--mc .identity-join-tokens__empty-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-13);
  color: var(--text-3);
}
.identity-join-tokens-page--mc .identity-join-tokens-detail__section {
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}
.identity-join-tokens-page--mc .identity-join-tokens-detail__fact,
.identity-join-tokens-page--mc .identity-join-tokens-detail__facts {
  display: grid;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.identity-join-tokens-page--mc .identity-join-tokens-detail__fact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.identity-join-tokens-page--mc .identity-join-tokens-detail__domains {
  overflow-wrap: anywhere;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.identity-join-tokens-modal .identity-join-tokens-modal__body {
  display: grid;
  gap: 18px;
}
.identity-join-tokens-modal .identity-join-tokens-modal__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.identity-join-tokens-modal .identity-join-tokens-modal__groups {
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: none;
}
.identity-join-tokens-modal .identity-join-tokens-modal__group-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  max-height: 300px;
  overflow: auto;
}

@media (width <= 900px) {
  .identity-join-tokens-page--mc .identity-join-tokens__table-wrap {
    display: none;
  }
  .identity-join-tokens-page--mc .identity-join-tokens__cards {
    display: grid;
  }
  .identity-join-tokens-page--mc .identity-join-tokens__row-actions {
    justify-self: end;
    padding-right: 0;
  }
  .identity-join-tokens-page--mc .identity-join-tokens__invitations {
    margin: 16px;
  }
  .identity-join-tokens-modal .identity-join-tokens-modal__fields,
  .identity-join-tokens-modal .identity-join-tokens-modal__group-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.template-studio {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.template-studio__library, .template-studio__editor, .template-studio__preview {
  overflow: hidden;
}
.template-studio__library-header, .template-studio__editor-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.template-studio__library-header h2, .template-studio__editor-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: var(--text-primary);
}
.template-studio__library-header p,
.template-studio__library-header span, .template-studio__editor-header p,
.template-studio__editor-header span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.template-studio__filters {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.template-studio__search {
  position: relative;
}
.template-studio__search .app-icon,
.template-studio__search svg {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.template-studio__search .template-studio__search-input {
  padding-left: 34px;
}
.template-studio__template-list {
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  padding: 8px;
  overflow: auto;
}
.template-studio__template-row {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}
.template-studio__template-row:hover, .template-studio__template-row.is-selected {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
}
.template-studio__template-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.template-studio__template-main strong,
.template-studio__template-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-studio__template-main small {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  color: var(--text-secondary);
}
.template-studio__template-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.template-studio__template-subject, .template-studio__template-updated {
  overflow: hidden;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-studio__empty, .template-studio__preview-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
}
.template-studio__editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 16px;
  align-items: start;
}
.template-studio__editor-header {
  align-items: center;
}
.template-studio__editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.template-studio__publish-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 650;
}
.template-studio__publish-toggle input {
  margin: 0;
  accent-color: var(--color-primary);
}
.template-studio__meta-grid, .template-studio__body-grid {
  display: grid;
  gap: 12px;
  padding: 16px 16px 0;
}
.template-studio__meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.template-studio__body-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  padding-bottom: 16px;
}
.template-studio__support-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.template-studio__editor .form-group {
  margin: 0;
}
.template-studio__editor label, .template-studio__variables-panel label {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-primary);
}
.template-studio__subject, .template-studio__code-editor {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}
.template-studio__code-editor {
  min-height: 0;
  resize: vertical;
}
.template-studio__variables-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-muted);
}
.template-studio__variables-panel p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.template-studio__variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.template-studio__variable-chips code {
  padding: 4px 8px;
  border: 1px solid var(--color-primary-border);
  border-radius: 999px;
  background: var(--color-primary-bg);
  font-size: 0.74rem;
  color: var(--color-primary);
}
.template-studio__preview {
  position: sticky;
  top: 80px;
}
.template-studio__preview header {
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.template-studio__preview header h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}
.template-studio__preview-subject {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.template-studio__preview-subject span {
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.template-studio__preview-html {
  max-height: 360px;
  padding: 16px;
  overflow: auto;
  border-bottom: 1px solid var(--border-soft);
}
.template-studio__preview-text {
  max-height: 220px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  background: var(--surface-muted);
  color: var(--text-primary);
  white-space: pre-wrap;
}
@media (width <= 1280px) {
  .template-studio, .template-studio__editor-shell, .template-studio__body-grid {
    grid-template-columns: 1fr;
  }
  .template-studio__preview {
    position: static;
  }
}
@media (width <= 820px) {
  .template-studio__meta-grid {
    grid-template-columns: 1fr;
  }
  .template-studio__editor-actions {
    justify-content: stretch;
  }
  .template-studio__editor-actions .xw-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   Carrier admin (Organization settings → Carriers tab)
   Adds the styles referenced by Pages/Admin/Carriers/CarrierAdmin.razor.
   Scoped under .carrier-admin so the BEM-ish class names used by that page
   (dashboard-card, definition-list, tag, settings-form-grid, …) don't leak.
   ========================================================================== */
.carrier-admin {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.carrier-admin .admin-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.carrier-admin .admin-section--subtle {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-inset);
  box-shadow: none;
}
.carrier-admin .admin-section--subtle h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.carrier-admin .section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}
.carrier-admin .section-header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.carrier-admin .section-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.carrier-admin .dashboard-grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
}
.carrier-admin .dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.carrier-admin .dashboard-card__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.carrier-admin .dashboard-card__header h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.carrier-admin .dashboard-card__header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.carrier-admin .dashboard-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: auto;
  padding-top: 0.25rem;
}
.carrier-admin .definition-list {
  display: grid;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.85rem;
  grid-template-columns: max-content 1fr;
}
.carrier-admin .definition-list dt {
  font-weight: 600;
  color: var(--text-muted);
}
.carrier-admin .definition-list dd {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.carrier-admin .definition-list--compact {
  row-gap: 0.3rem;
  font-size: 0.8rem;
}
.carrier-admin .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.carrier-admin .tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-inset);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.carrier-admin .tag--neutral {
  background: var(--surface-inset);
  color: var(--text-muted);
}
.carrier-admin .settings-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
  margin-block: 0.25rem;
}
@media (width >= 768px) {
  .carrier-admin .settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.carrier-admin .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.carrier-admin .form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.carrier-admin .form-group .form-text {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.carrier-admin .form-control {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.carrier-admin .form-control::-moz-placeholder {
  color: var(--text-muted);
}
.carrier-admin .form-control::placeholder {
  color: var(--text-muted);
}
.carrier-admin .form-control:focus {
  outline: none;
}
.carrier-admin .form-control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring-color);
}
.carrier-admin .form-control:hover:not(:disabled, :focus) {
  border-color: var(--border-strong);
}
.carrier-admin .form-control:disabled {
  cursor: not-allowed;
  opacity: 50%;
  color: var(--text-muted);
  pointer-events: none;
}
.carrier-admin textarea.form-control {
  height: auto;
  min-height: 5rem;
  resize: vertical;
}
.carrier-admin .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}
.carrier-admin .form-check--card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.carrier-admin .form-check--card:hover {
  border-color: var(--accent);
}
.carrier-admin .form-check--card > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.carrier-admin .form-check--card small {
  color: var(--text-muted);
}
.carrier-admin .button-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.carrier-admin .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.carrier-admin .icon-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--surface-inset);
}
.carrier-admin .icon-btn:disabled {
  cursor: not-allowed;
  opacity: 50%;
}
.carrier-admin .muted {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Carrier edit modal — body uses .carrier-admin scope so form-control,
   form-group, settings-form-grid, admin-section--subtle, form-check--card
   all inherit the same styling rules as the page itself.            */
.carrier-edit-modal__form .carrier-edit-modal__lede {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.carrier-admin-frame {
  min-width: 0;
}

.carrier-admin-frame__content {
  gap: 20px;
}

.carrier-admin--mc {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.carrier-admin__header {
  align-items: flex-start;
}

.carrier-admin__header .xw-page-header__title {
  min-width: 0;
}

.carrier-admin__header .xw-page-header__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.carrier-admin__kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.carrier-admin__kpi-grid .xw-kpi {
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.carrier-admin__kpi-grid .xw-kpi__label {
  color: var(--text-3);
}

.carrier-admin__search {
  width: min(220px, 100%);
}

.carrier-admin__carrier-list {
  display: grid;
  gap: 10px;
}

.carrier-admin--mc .rule-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.carrier-admin--mc .rule-card__icon {
  display: grid;
  place-items: center;
  width: 24px;
}

.carrier-admin--mc .rule-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.carrier-admin__carrier-title-row {
  flex-wrap: wrap;
  align-items: center;
}

.carrier-admin--mc .rule-card__title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.carrier-admin--mc .rule-card__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

.carrier-admin--mc .rule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.carrier-admin--mc .rule-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.carrier-admin__section.card {
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.carrier-admin__section .xw-section__header {
  align-items: flex-start;
  padding: 0;
  border-bottom: none;
}

.carrier-admin__section .xw-section__body {
  min-width: 0;
}

.carrier-admin__section-subtitle,
.carrier-admin__modal-lede {
  max-width: 720px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

.carrier-admin__validation-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
}

.carrier-admin__catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.carrier-admin__catalogue-card,
.carrier-admin__wizard-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.carrier-admin__card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.carrier-admin__card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text);
}

.carrier-admin__card-header p,
.carrier-admin__wizard-card span {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}

.carrier-admin__facts {
  display: grid;
  grid-template-columns: minmax(92px, max-content) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
}

.carrier-admin__facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.carrier-admin__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.carrier-admin__tag-row,
.carrier-admin__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.carrier-admin__card-actions {
  justify-content: space-between;
  margin-top: auto;
  padding-top: 2px;
}

.carrier-admin__routing-list,
.carrier-admin__activity-list,
.carrier-admin__wizard-list {
  display: grid;
  gap: 10px;
}

.carrier-admin__routing-add-card {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-style: dashed;
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.carrier-admin__routing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--text-2);
}

.carrier-admin__routing-facts span {
  display: inline-flex;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
}

.carrier-admin__activity-item {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.carrier-admin__activity-item div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.carrier-admin__activity-item strong {
  font-size: 13px;
  color: var(--text);
}

.carrier-admin__activity-item span,
.carrier-admin__activity-item time {
  font-size: 11px;
  color: var(--text-2);
}

.carrier-admin__wizard .modal__body,
.carrier-admin__edit-modal .modal__body {
  padding: 18px;
}

.carrier-admin__wizard .modal,
.carrier-admin__edit-modal .modal {
  border-radius: var(--r-sm);
}

.carrier-admin__wizard-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.carrier-admin__wizard-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.carrier-admin__wizard-card strong {
  font-size: 14px;
  color: var(--text);
}

.carrier-admin--modal {
  display: grid;
  gap: 18px;
}

.carrier-admin__form-grid,
.carrier-admin__shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.carrier-admin__linked-shops.card {
  padding: 14px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.carrier-admin__check-card {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}

@media (width <= 860px) {
  .carrier-admin__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .carrier-admin__catalogue-grid,
  .carrier-admin__form-grid,
  .carrier-admin__shop-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .xw-routing-rule {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .xw-routing-rule__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (width <= 560px) {
  .carrier-admin__header,
  .carrier-admin__header .xw-page-header__actions,
  .carrier-admin--mc .rule-card,
  .carrier-admin--mc .rule-card__actions {
    align-items: stretch;
    justify-content: flex-start;
  }
  .carrier-admin__kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .carrier-admin__search {
    width: 100%;
  }
  .carrier-admin--mc .rule-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .carrier-admin--mc .rule-card__icon {
    display: none;
  }
  .carrier-admin__section.card {
    padding: 14px;
  }
  .carrier-admin__card-header,
  .xw-routing-rule__header,
  .carrier-admin__activity-item,
  .carrier-admin__wizard-card {
    flex-direction: column;
    align-items: stretch;
  }
  .carrier-admin__wizard-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .carrier-admin__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.system-carriers-grid-shell {
  min-width: 0;
}

.system-carriers-grid-shell .xw-dg-head {
  grid-template-columns: minmax(260px, 1fr) minmax(0, auto) auto;
}

.system-carriers-grid-shell .xw-dg-head__stats {
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 560px;
  overflow: visible;
}

.system-carriers-grid-shell .xw-dg-head__stats .xw-compact-stat {
  min-width: 96px;
  padding-inline: 6px;
}

.system-carriers-grid-shell .xw-dg-head__stats .xw-compact-stat__label {
  overflow: visible;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
}

.system-carriers-grid-shell .xw-dg-split {
  align-items: stretch;
}

.system-carriers-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.system-carriers-table {
  min-width: 980px;
}

.system-carriers-table__row {
  cursor: pointer;
}

.system-carriers-table__row:hover,
.system-carriers-table__row:focus-visible,
.system-carriers-table__row.is-selected {
  background: var(--surface-inset);
}

.system-carriers-carrier,
.system-carriers-plugin {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.system-carriers-carrier strong,
.system-carriers-plugin span {
  color: var(--text);
}

.system-carriers-carrier > span:last-child,
.system-carriers-plugin small {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.system-carriers-layout-token {
  display: inline-block;
  max-width: 260px;
  color: var(--text-2);
  overflow-wrap: anywhere;
  white-space: normal;
}

.system-carriers-detail {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 280px;
}

.system-carriers-detail__facts {
  display: grid;
  gap: 2px;
}

.system-carriers-detail__layout {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}

.system-carriers-detail__layout span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.system-carriers-detail__layout code {
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: normal;
}

.system-carriers-label-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.system-carriers-label-preview__paper {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, transparent 0 72%, rgba(0, 0, 0, 0.08) 72% 73%, transparent 73%), var(--surface-inset);
  color: var(--text);
}

.system-carriers-label-preview__paper span,
.system-carriers-label-preview__paper small {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.system-carriers-label-preview__paper strong {
  font-size: 18px;
  line-height: 1.15;
}

@media (width <= 900px) {
  .system-carriers-grid-shell .xw-dg-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .system-carriers-grid-shell .xw-dg-head__stats {
    justify-content: flex-start;
    max-width: none;
  }
  .system-carriers-grid-shell .xw-dg-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .system-carriers-detail {
    min-width: 0;
  }
}
.system-settings-hub--mc .system-settings-hub__shell {
  margin-top: 0;
}
.system-settings-hub--mc .system-settings-hub__nav {
  align-self: start;
}
.system-settings-hub--mc .system-settings-hub__nav .settings-nav__item {
  display: block;
  text-decoration: none;
}
.system-settings-hub--mc .system-settings-hub__panel .settings-panel-content {
  padding-top: 0;
}
.system-settings-hub--mc .system-settings-hub__rows {
  gap: 0;
}
.system-settings-hub--mc .system-settings-hub__setting-row:last-child {
  border-bottom: 0;
}
.system-settings-hub--mc .system-settings-hub__row-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: min(260px, 100%);
}
.system-settings-hub--mc .system-settings-hub__row-link {
  text-decoration: none;
  white-space: nowrap;
}
.system-settings-hub--mc .system-settings-hub__row-link .app-icon {
  flex: 0 0 auto;
}
@media (width <= 720px) {
  .system-settings-hub--mc .system-settings-hub__setting-row {
    grid-template-columns: 1fr;
  }
  .system-settings-hub--mc .system-settings-hub__row-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}

/* Shared components */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/*
 * Settings Components Styles
 *
 * Unified styling for all settings-related components:
 * - SettingsPage
 * - SettingsPanel
 * - SettingsTabs
 * - SettingsField
 */
.settings-page {
  display: flex;
  position: relative;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(135deg, var(--surface-1), var(--surface-1));
  color: var(--text);
}

.settings-toast {
  display: flex;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  font-size: 0.9375rem;
  font-weight: 500;
  animation: toast-slide-in 0.3s ease-out;
}
.settings-toast--success {
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.95));
  color: white;
}
.settings-toast--success i,
.settings-toast--success .app-icon {
  color: #a7f3d0;
}
.settings-toast--error {
  border: 1px solid rgba(252, 165, 165, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.95));
  color: white;
}
.settings-toast--error i,
.settings-toast--error .app-icon {
  color: #fecaca;
}
.settings-toast--fading {
  animation: toast-fade-out 0.3s ease-in forwards;
}
.settings-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 80%;
  color: inherit;
  cursor: pointer;
}
.settings-toast__close:hover, .settings-toast__close:focus-visible {
  opacity: 100%;
}
.settings-toast i,
.settings-toast .app-icon {
  font-size: 1.25rem;
}

@keyframes toast-slide-in {
  from {
    opacity: 0%;
    transform: translateX(100px);
  }
  to {
    opacity: 100%;
    transform: translateX(0);
  }
}
@keyframes toast-fade-out {
  from {
    opacity: 100%;
    transform: translateX(0);
  }
  to {
    opacity: 0%;
    transform: translateX(100px);
  }
}
.settings-page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.5rem 2rem 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-1), var(--surface-1));
  backdrop-filter: blur(10px);
}

.settings-page-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.settings-page-title-area {
  flex: 1;
}

.settings-breadcrumb {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-3);
}
.settings-breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}
.settings-breadcrumb a:hover {
  color: var(--brand);
}
.settings-breadcrumb .separator {
  margin: 0 0.5rem;
}

.settings-page-title-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.settings-page-icon {
  font-size: 1.5rem;
  color: var(--brand);
}

.settings-page-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
}

.settings-validation-summary {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.settings-validation-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}
.settings-validation-summary li {
  line-height: 1.4;
}

.settings-impact-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-impact-summary p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
}

.settings-impact-summary__list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
}

.settings-impact-summary__label {
  margin-right: 0.35rem;
  font-weight: 600;
  color: var(--text-2);
}

.settings-impact-summary__count {
  font-size: 0.82rem;
  color: var(--text-3);
}

.unsaved-indicator {
  font-size: 0.5rem;
  color: var(--warn);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 100%;
  }
  50% {
    opacity: 50%;
  }
}
.settings-page-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-3);
}

.settings-page-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.settings-page-header-actions .settings-page-header-filter-bar {
  flex: 1;
  min-width: min(100%, 320px);
}
.settings-page-header-actions .settings-page-header-filter-bar .filter-bar__actions {
  margin-left: auto;
}

.settings-view-toggle {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.85rem;
  color: var(--text-2);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.settings-view-toggle:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.settings-view-toggle.is-active {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--text);
}

.settings-view-toggle__icon {
  font-size: 0.9rem;
}

.settings-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  padding-top: 0.75rem;
}

.settings-scope-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-2);
}

.settings-scope-trail__label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.settings-scope-trail__items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.settings-scope-trail__item {
  font-weight: 600;
  color: var(--text-2);
}
.settings-scope-trail__item.is-current {
  color: var(--text);
}

.settings-scope-trail__sep {
  color: var(--text-3);
}

.settings-scope-trail__hint {
  color: var(--text-3);
}

.settings-inheritance-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.78rem;
}

.settings-inheritance-legend__label {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.settings-inheritance-legend__hint {
  color: var(--text-2);
}

.settings-overrides-note {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  font-size: 0.78rem;
  color: var(--text);
}

.settings-overrides-note__icon {
  font-size: 0.85rem;
  color: var(--brand);
}

.settings-page-footer {
  position: sticky;
  bottom: 0;
  padding: 1rem 2rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-1), var(--surface-1));
  backdrop-filter: blur(10px);
}

.settings-page-footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-footer-left {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.settings-impact {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--warn);
}
.settings-impact .app-icon {
  color: var(--warn);
}

.settings-page--overrides-only .settings-field--inherited {
  display: none;
}

.settings-page--mc {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--text-1);
}

.settings-page--mc .settings-page-header {
  position: relative;
  top: auto;
  z-index: auto;
  padding: 0 0 16px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.settings-page--mc .settings-page-header-content {
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.settings-page--mc .settings-page-header--topbar .settings-page-title-area {
  display: block;
}

.settings-page--mc .settings-page-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-3);
}

.settings-page--mc .settings-page-title {
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh-tight);
  color: var(--text-1);
}

.settings-page--mc .settings-page-title[tabindex="-1"]:focus {
  outline: none;
}

.settings-page--mc .settings-page-subtitle {
  max-width: 760px;
  margin-top: 4px;
  font-size: var(--fs-13);
  color: var(--text-3);
}

.settings-page--mc .settings-page-header-actions {
  flex: 0 1 520px;
  justify-content: flex-end;
}

.settings-page--mc .settings-page-header-filter-bar {
  gap: 8px;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.settings-page--mc .settings-page-header-filter-bar .filter-bar__search {
  flex: 1 1 260px;
  min-width: min(260px, 100%);
  max-width: 100%;
}

.settings-page--mc .settings-page-header-filter-bar .filter-bar__actions {
  margin-left: 0;
}

.settings-page--mc .settings-view-segmented {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}

.settings-page--mc .settings-view-segmented__button {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.settings-page--mc .settings-view-segmented__button:hover {
  color: var(--text);
}

.settings-page--mc .settings-view-segmented__button.is-active {
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.settings-page--mc .settings-page-meta {
  gap: 8px 12px;
  padding-top: 0;
}

.settings-page--mc .settings-scope-trail,
.settings-page--mc .settings-inheritance-legend,
.settings-page--mc .settings-overrides-note {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
}

.settings-page--mc .settings-scope-trail {
  padding: 7px 10px;
}

.settings-page--mc .settings-page-content {
  padding: 0;
  overflow: visible;
}

.settings-page--mc .settings-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.settings-page--mc .settings-nav {
  position: static;
  align-self: start;
  padding: 0;
  border: 0;
  background: transparent;
}

.settings-page--mc .settings-tabs--side-nav {
  margin: 0;
  padding: 0;
  overflow: visible;
  border-bottom: 0;
}

.settings-page--mc .settings-tabs--side-nav .settings-tabs-list {
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.settings-page--mc .settings-tabs--side-nav .settings-tab-button {
  top: auto;
  justify-content: flex-start;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--text-2);
}

.settings-page--mc .settings-tabs--side-nav .settings-tab-button:hover {
  background: var(--muted-soft);
  color: var(--text);
}

.settings-page--mc .settings-tabs--side-nav .settings-tab-button.active {
  background: var(--brand-soft);
  font-weight: 500;
  color: var(--brand);
}

.settings-page--mc .settings-tabs--side-nav .tab-icon {
  display: none;
}

.settings-page--mc .settings-shell__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.settings-page--mc .settings-panel {
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: none;
}

.settings-page--mc .settings-panel-header {
  padding: 16px 18px;
}

.settings-page--mc .settings-panel-title {
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-1);
}

.settings-page--mc .settings-panel-description {
  font-size: var(--fs-13);
  color: var(--text-3);
}

.settings-page--mc .settings-panel-content {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}

.settings-page--mc .settings-grid {
  gap: 0;
  padding-top: 0;
}

.settings-page--mc .settings-grid.two-column,
.settings-page--mc .settings-grid.three-column {
  grid-template-columns: 1fr;
}

.settings-page--mc .xw-effective-row::before {
  display: none;
}

.settings-page--mc .settings-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, max-content);
  gap: 2px 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.settings-page--mc .settings-field:last-child {
  border-bottom: 0;
}

.settings-page--mc .settings-field-header {
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
  justify-content: flex-start;
}

.settings-page--mc .settings-field-content {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
}

.settings-page--mc .settings-field-help {
  grid-column: 1;
  grid-row: 2;
}

.settings-page--mc .settings-field:has(.html-editor),
.settings-page--mc .settings-field:has(.image-gallery),
.settings-page--mc .settings-field:has(.tag-input__container) {
  grid-template-columns: 1fr;
}

.settings-page--mc .settings-field:has(.html-editor) .settings-field-content,
.settings-page--mc .settings-field:has(.image-gallery) .settings-field-content,
.settings-page--mc .settings-field:has(.tag-input__container) .settings-field-content,
.settings-page--mc .settings-field:has(.html-editor) .settings-field-help,
.settings-page--mc .settings-field:has(.image-gallery) .settings-field-help,
.settings-page--mc .settings-field:has(.tag-input__container) .settings-field-help {
  grid-column: 1;
  grid-row: auto;
}

.settings-page--mc .settings-field-label {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-1);
}

.settings-page--mc .settings-field-help {
  font-size: var(--fs-13);
  color: var(--text-3);
}

.settings-page--mc .settings-page-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
  backdrop-filter: blur(12px);
}

.settings-page--mc .settings-page-footer-content {
  padding: 12px 0;
}

@media (width <= 980px) {
  .settings-page--mc .settings-page-header-content {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-page--mc .settings-page-header-actions {
    flex: 1 1 auto;
  }
  .settings-page--mc .settings-page-header-filter-bar {
    flex-direction: row;
    align-items: center;
  }
  .settings-page--mc .settings-page-header-filter-bar .filter-bar__search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .settings-page--mc .settings-page-header-filter-bar .filter-bar__actions {
    justify-content: flex-start;
  }
  .settings-page--mc .settings-shell {
    grid-template-columns: 1fr;
  }
  .settings-page--mc .settings-nav {
    position: static;
    overflow-x: auto;
  }
  .settings-page--mc .settings-tabs--side-nav .settings-tabs-list {
    flex-direction: row;
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .settings-page--mc .settings-field {
    grid-template-columns: 1fr;
  }
  .settings-page--mc .settings-field-header,
  .settings-page--mc .settings-field-content,
  .settings-page--mc .settings-field-help {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (width <= 560px) {
  .settings-page--mc {
    padding: 0;
  }
  .settings-page--mc .settings-page-title {
    font-size: var(--fs-22);
  }
  .settings-page--mc .settings-page-footer-content {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
}
.settings-tabs {
  margin: 0 -2rem;
  padding: 0 2rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-vivid) transparent;
}
.settings-tabs::-webkit-scrollbar {
  height: 6px;
}
.settings-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line-vivid);
}

.settings-tabs-list {
  display: flex;
  gap: 0.5rem;
  min-width: -moz-max-content;
  min-width: max-content;
  margin: 0;
  padding: 0 0 1px;
  list-style: none;
}

.settings-tab-item {
  margin: 0;
}

.settings-tab-button {
  display: flex;
  position: relative;
  top: 1px;
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.settings-tab-button:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.settings-tab-button.is-disabled {
  opacity: 55%;
  cursor: not-allowed;
}
.settings-tab-button.is-disabled:hover {
  background: transparent;
  color: var(--text-3);
}
.settings-tab-button.active {
  border-bottom-color: var(--brand);
  color: var(--brand);
}
.settings-tab-button .tab-icon {
  flex-shrink: 0;
  font-size: 1rem;
}
.settings-tab-button .tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-tab-button .tab-badge {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  background: var(--surface-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.settings-tab-button .tab-badge--info {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--brand);
}
.settings-tab-button .tab-badge--warning {
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  color: var(--warn);
}
.settings-tab-button .tab-badge--success {
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  color: var(--ok);
}
.settings-tab-button .tab-badge--critical {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--danger);
}
.settings-tab-button .tab-badge--muted {
  background: var(--surface-muted);
  color: var(--text-3);
}

.settings-page-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.settings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.settings-panel {
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--surface-1), var(--surface-1));
}
.settings-panel.collapsed .settings-panel-content {
  display: none;
}

.settings-panel-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  transition: background 0.2s ease;
}

.settings-panel-heading {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.settings-panel-toggle {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  margin: -0.25rem -0.35rem;
  padding: 0.25rem 0.35rem;
  border: none;
  border-radius: calc((0.75rem + 1rem) / 2);
  background: transparent;
  text-align: left;
  color: inherit;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.settings-panel-toggle:hover:not(:disabled) {
  background: var(--surface-muted);
}
.settings-panel-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.settings-panel-toggle:disabled {
  cursor: default;
}

.settings-panel-title-group {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
}

.settings-panel-icon {
  margin-top: 0.125rem;
  font-size: 1.25rem;
  color: var(--brand);
}

.settings-panel-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.settings-panel-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

.settings-panel-description {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-3);
}

.settings-panel-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
  align-items: center;
}

.custom-value-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  font-size: 0.75rem;
  color: var(--brand);
}

.expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.settings-panel-toggle:hover:not(:disabled) .expand-toggle, .settings-panel-toggle:focus-visible .expand-toggle {
  background: var(--surface-muted);
  color: var(--text);
}

.settings-panel-content {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
}

.settings-grid {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
}
.settings-grid.two-column {
  grid-template-columns: repeat(2, 1fr);
}
@media (width <= 992px) {
  .settings-grid.two-column {
    grid-template-columns: 1fr;
  }
}
.settings-grid.three-column {
  grid-template-columns: repeat(3, 1fr);
}
@media (width <= 1200px) {
  .settings-grid.three-column {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 768px) {
  .settings-grid.three-column {
    grid-template-columns: 1fr;
  }
}
.settings-grid .full-width {
  grid-column: 1/-1;
}

.settings-panel-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.ai-guidance-advanced {
  padding: 0.75rem 1rem;
  border: 1px dashed var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-inset);
}
.ai-guidance-advanced__toggle {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.ai-guidance-advanced__toggle:hover {
  color: var(--text);
}
.ai-guidance-advanced__grid {
  padding-top: 0.75rem;
}

.ai-enrichment-section {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-inset);
}
.ai-enrichment-section__toggle {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.ai-enrichment-section__toggle:hover {
  color: var(--text);
}

.ai-enrichment-scopes,
.ai-budget-scopes {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

.ai-enrichment-scope-card {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-inset);
}
.ai-enrichment-scope-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}
.ai-enrichment-scope-card__hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-3);
}
.ai-enrichment-scope-card__tag {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  font-size: 0.75rem;
  color: var(--brand);
  white-space: nowrap;
}
.ai-enrichment-scope-card__fields {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ai-settings-reset {
  font-weight: 600;
  color: var(--brand);
}

.ai-settings-inherit {
  font-size: 0.85rem;
  color: var(--text-3);
}

.secret-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.secret-input-wrapper .badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.secret-input-modal {
  display: grid;
  gap: 0.75rem;
}

.openai-provider-status {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: calc(0.5rem * 3 / 4);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--text-2);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-field.settings-field--inherited .settings-field-label {
  color: var(--text-3);
}
.settings-field.settings-field--inherited input,
.settings-field.settings-field--inherited select,
.settings-field.settings-field--inherited textarea {
  border-style: dashed;
  border-color: var(--line-vivid);
  background: var(--surface-inset);
  font-weight: 400;
  color: var(--text-2);
}
.settings-field.settings-field--inherited .settings-field-help .effective-value {
  color: var(--text-3);
}
.settings-field.settings-field--overridden {
  padding: 0.75rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), color-mix(in srgb, var(--brand) 2%, transparent));
}
.settings-field.settings-field--overridden .settings-field-header .settings-field-badge--overridden {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.settings-field.settings-field--overridden input,
.settings-field.settings-field--overridden select,
.settings-field.settings-field--overridden textarea {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  font-weight: 600;
  color: var(--text);
}
.settings-field.settings-field--overridden input:focus,
.settings-field.settings-field--overridden select:focus,
.settings-field.settings-field--overridden textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.settings-field.settings-field--overridden .settings-field-help .effective-value {
  color: var(--text);
}
.settings-field.field-changed {
  position: relative;
}
.settings-field.field-changed::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1rem;
  width: 3px;
  border-radius: 2px;
  background: var(--warn);
  content: "";
}
.settings-field.field-changed .settings-field-label {
  color: var(--warn);
}
.settings-field.field-changed .settings-field-label::after {
  opacity: 80%;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--warn);
  content: " (modified)";
}
.settings-field.field-changed input,
.settings-field.field-changed select,
.settings-field.field-changed textarea {
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
}
.settings-field.field-changed input:focus,
.settings-field.field-changed select:focus,
.settings-field.field-changed textarea:focus {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 15%, transparent);
}

.settings-field-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.settings-field-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.settings-field-label .required-indicator {
  margin-left: 0.25rem;
  color: var(--danger);
}

.settings-field-badge {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--color-pill-muted-border);
  border-radius: calc(0.5rem * 3 / 4);
  font-size: 0.75rem;
}
.settings-field-badge.settings-field-badge--inherited {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}
.settings-field-badge.settings-field-badge--overridden {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.settings-field-badge i,
.settings-field-badge .app-icon {
  font-size: 0.75rem;
}

.inheritance-badge {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-pill-muted-border);
  border-radius: calc(0.5rem * 3 / 4);
  font-size: 0.75rem;
}
.inheritance-badge.active {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}
.inheritance-badge.inactive {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.inheritance-badge i,
.inheritance-badge .app-icon {
  font-size: 0.625rem;
}

.settings-field-content {
  min-height: 2.5rem;
}

.settings-field-help {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  font-size: 0.8125rem;
}
.settings-field-help .system-default {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--text-3);
}
.settings-field-help .system-default i,
.settings-field-help .system-default .app-icon {
  color: var(--brand);
}
.settings-field-help .effective-value {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-weight: 500;
  color: var(--text-2);
}
.settings-field-help .effective-value i,
.settings-field-help .effective-value .app-icon {
  color: var(--brand);
}
.settings-field-help .help-text {
  color: var(--text-3);
}
.settings-field-help .btn-reset {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: transparent;
  font-size: 0.75rem;
  color: var(--text-3);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.settings-field-help .btn-reset:hover {
  border-color: var(--line-strong);
  background: var(--surface-muted);
  color: var(--text);
}
.settings-field-help .btn-reset i,
.settings-field-help .btn-reset .app-icon {
  font-size: 0.75rem;
}

.settings-field-validation {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--danger);
}

.settings-template-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.settings-template-panel__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.settings-template-panel__label {
  font-weight: 600;
  color: var(--text);
}
.settings-template-panel__row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.settings-template-panel__row--stack {
  flex-direction: column;
  align-items: stretch;
}
.settings-template-panel__hint, .settings-template-panel__message {
  font-size: 0.875rem;
  color: var(--text-3);
}
.settings-template-panel__empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-3);
}
.settings-template-panel__divider {
  height: 1px;
  background: var(--line);
}

.settings-template-bulk {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.settings-template-bulk__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.settings-template-bulk__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.settings-template-bulk__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.settings-template-bulk__toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-2);
}
.settings-template-bulk__label {
  font-weight: 600;
  color: var(--text);
}
.settings-template-bulk__row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.settings-template-bulk__hint, .settings-template-bulk__count {
  font-size: 0.875rem;
  color: var(--text-3);
}
.settings-template-bulk__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 240px;
  padding: 0.5rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-muted);
}
.settings-template-bulk__item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.45rem 0.5rem;
  border-radius: calc(0.5rem * 3 / 4);
  cursor: pointer;
}
.settings-template-bulk__item:hover {
  background: var(--surface-muted);
}
.settings-template-bulk__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.settings-template-bulk__name {
  font-weight: 600;
  color: var(--text);
}
.settings-template-bulk__meta {
  font-size: 0.8rem;
  color: var(--text-2);
}
.settings-template-bulk__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.settings-template-bulk__empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-3);
}
.settings-template-bulk__divider {
  height: 1px;
  background: var(--line);
}

.settings-preview-modal {
  max-width: 720px;
}

.settings-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings-preview-item {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-muted);
}

.settings-preview-field {
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--text);
}

.settings-preview-values {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-2);
}

.settings-preview-current {
  color: var(--text-3);
  text-decoration: line-through;
}

.settings-preview-next {
  font-weight: 600;
  color: var(--ok);
}

.settings-preview-empty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 500;
  color: var(--ok);
}

.settings-footer-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.settings-footer-actions .pill-btn {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
}
.settings-footer-actions .pill-btn i,
.settings-footer-actions .pill-btn .app-icon {
  font-size: 1rem;
}
.settings-footer-actions .pill-btn--primary {
  border-color: var(--brand);
  background: var(--brand);
}
.settings-footer-actions .pill-btn--primary:hover:not(:disabled) {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}
.settings-footer-actions .pill-btn--primary:disabled {
  opacity: 50%;
}
.settings-footer-actions .pill-btn--outline {
  border-color: var(--line);
  color: var(--text-3);
}
.settings-footer-actions .pill-btn--outline:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-muted);
  color: var(--text);
}
.settings-footer-actions .pill-btn--outline:disabled {
  opacity: 50%;
}

.schedule-toggle {
  margin-bottom: 1rem;
}

.schedule-presets {
  margin-bottom: 0.5rem;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.preset-buttons .pill-btn {
  padding: 0.375rem 0.75rem;
  border-radius: calc(0.5rem * 3 / 4);
  font-size: 0.875rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.preset-buttons .pill-btn.pill-btn--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--text-on-brand);
}
.preset-buttons .pill-btn.pill-btn--outline {
  border-color: var(--line);
  background: transparent;
  color: var(--text-3);
}
.preset-buttons .pill-btn.pill-btn--outline:hover {
  border-color: var(--line-strong);
  background: var(--surface-muted);
  color: var(--text);
}

.schedule-custom {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.schedule-preview {
  padding: 0.625rem 0.875rem;
  border-radius: calc(0.5rem * 3 / 4);
  font-size: 0.875rem;
}

.schedule-preview-success {
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
}
.schedule-preview-success i,
.schedule-preview-success .app-icon {
  margin-right: 0.5rem;
}

.schedule-preview-error {
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}
.schedule-preview-error i,
.schedule-preview-error .app-icon {
  margin-right: 0.5rem;
}

.run-history {
  padding: 1rem;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-muted);
}

.run-history-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (width <= 768px) {
  .run-history-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.run-history-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.run-history-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.run-history-value {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.run-history-value .run-time {
  font-weight: 500;
  color: var(--text);
}
.run-history-value .run-relative {
  font-size: 0.875rem;
}

.job-stats__error {
  color: var(--text-3);
}

.sync-status-overview {
  margin-bottom: 1rem;
}

.sync-status-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-muted);
}

.sync-status-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
}
.sync-status-icon--active {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}
.sync-status-icon--inactive {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
}
.sync-status-icon i,
.sync-status-icon .app-icon {
  font-size: 1.5rem;
}

.sync-status-content h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.sync-status-content p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-3);
}

.shop-settings-page__credential-docs-link {
  display: inline-flex;
  margin-top: 0.35rem;
}

.sync-status-summary__timestamp,
.sync-status-aggregate-rules__description,
.sync-status-aggregate-rules__interval-suffix {
  color: var(--text-3);
}

.sync-status-aggregate-rules__description {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.sync-status-aggregate-rules__interval-input {
  width: 7rem;
}

.sync-activity {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sync-activity-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-muted);
}

.sync-activity-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
}
.sync-activity-icon--success {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}
.sync-activity-icon--error {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
.sync-activity-icon--pending {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
}
.sync-activity-icon i,
.sync-activity-icon .app-icon {
  font-size: 1rem;
}

.sync-activity-content {
  flex: 1;
}

.sync-activity-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

.sync-activity-time {
  font-size: 0.8125rem;
  color: var(--text-3);
}

.next-sync-info {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: calc(0.5rem * 3 / 4);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-size: 0.9375rem;
  color: var(--brand);
}
.next-sync-info i,
.next-sync-info .app-icon {
  color: var(--brand);
}

.settings-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 1px dashed var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-muted);
  text-align: center;
}
.settings-empty-state--compact {
  padding: 1.5rem;
}
.settings-empty-state--compact i,
.settings-empty-state--compact .app-icon {
  margin-bottom: 0.75rem;
  font-size: 2rem;
}
.settings-empty-state--compact h4 {
  font-size: 1rem;
}
.settings-empty-state i,
.settings-empty-state .app-icon {
  margin-bottom: 1rem;
  opacity: 60%;
  font-size: 2.5rem;
  color: var(--text-3);
}
.settings-empty-state h4 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-2);
}
.settings-empty-state p {
  max-width: 300px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-3);
}

.connection-test {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.connection-result {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: calc(0.5rem * 3 / 4);
  font-size: 0.875rem;
}
.connection-result--success {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
}
.connection-result--error {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.account-settings--mc.account-settings--profile {
  gap: 24px;
  padding: 0;
}
.account-settings--mc.account-settings--profile .settings-page-header {
  margin-bottom: 0;
  padding-bottom: 0;
}
.account-settings--mc.account-settings--profile .settings-page-header-content {
  margin-bottom: 0;
}
.account-settings--mc.account-settings--profile .settings-page-title-area {
  gap: 4px;
}
.account-settings--mc.account-settings--profile .settings-page-title-row {
  gap: 0;
}
.account-settings--mc.account-settings--profile .settings-page-eyebrow {
  margin: 0 0 4px;
  font-weight: 500;
}
.account-settings--mc.account-settings--profile .settings-page-title {
  font-size: var(--fs-22);
  line-height: var(--lh-tight);
}
.account-settings--mc.account-settings--profile .settings-page-title[tabindex="-1"]:focus {
  outline: 0;
}
.account-settings--mc.account-settings--profile .settings-page-subtitle {
  max-width: 620px;
  font-size: var(--fs-13);
}
.account-settings--mc.account-settings--profile .settings-panel-header {
  align-items: center;
  min-height: 54px;
  padding: 16px;
}
.account-settings--mc.account-settings--profile .settings-panel-title {
  font-size: var(--fs-16);
}
.account-settings--mc.account-settings--profile .settings-panel-content {
  padding: 0 16px 16px;
}
.account-settings--mc.account-settings--profile .settings-panel {
  padding: 0;
}
.account-settings--mc.account-settings--profile .settings-panel-actions {
  align-self: center;
}
.account-settings--mc.account-settings--profile .account-settings__profile-grid {
  gap: 16px;
  align-items: start;
  padding: 0;
  grid-template-columns: 88px minmax(0, 1fr);
}
.account-settings--mc.account-settings--profile .account-settings__avatar-panel {
  gap: 10px;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-settings--mc.account-settings--profile .account-settings__profile-summary {
  display: none;
}
.account-settings--mc.account-settings--profile .account-settings__profile-fields {
  gap: 12px;
}
.account-settings--mc.account-settings--profile .account-settings__profile-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  grid-column: 1/-1;
}
.account-settings--mc.account-settings--profile .account-settings__danger-panel .settings-panel-title {
  color: var(--danger);
}
.account-settings--mc .account-settings__summary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.account-settings--mc .account-settings__summary-status,
.account-settings--mc .account-settings__summary-chips,
.account-settings--mc .account-settings__delivery {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.account-settings--mc .account-settings__summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.account-settings--mc .account-settings__summary-copy strong {
  overflow: hidden;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-settings--mc .account-settings__summary-label {
  font-size: var(--fs-11);
  text-transform: uppercase;
  color: var(--text-3);
}
.account-settings--mc .account-settings__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-1);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-1);
}
.account-settings--mc .account-settings__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.account-settings--mc .account-settings__avatar--large {
  width: 88px;
  height: 88px;
  font-size: var(--fs-24);
}
.account-settings--mc .account-settings__summary-chips {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.account-settings--mc .account-settings__grid {
  gap: 0;
  padding-top: 0;
}
.account-settings--mc .account-settings__setting-row {
  padding: 16px 0;
}
.account-settings--mc .account-settings__setting-row:last-child {
  border-bottom: 0;
}
.account-settings--mc .account-settings__setting-row--stacked {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.account-settings--mc .account-settings__setting-row--stacked .xw-setting-row__control {
  min-width: 0;
}
.account-settings--mc .account-settings__delivery {
  justify-content: flex-end;
}
.account-settings--mc .account-settings__profile-grid {
  display: grid;
  gap: 18px;
  padding: 16px 0;
  grid-column: 1/-1;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}
.account-settings--mc .account-settings__avatar-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.account-settings--mc .account-settings__profile-summary {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.account-settings--mc .account-settings__profile-summary strong,
.account-settings--mc .account-settings__profile-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-settings--mc .account-settings__profile-summary strong {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-1);
}
.account-settings--mc .account-settings__profile-summary span {
  font-size: var(--fs-13);
  color: var(--text-3);
}
.account-settings--mc .account-settings__profile-fields {
  display: grid;
  gap: 14px;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-settings--mc .account-settings__connected-list {
  display: grid;
  gap: 0;
  grid-column: 1/-1;
}
.account-settings--mc .account-settings__connected-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.account-settings--mc .account-settings__connected-row:last-child {
  border-bottom: 0;
}
.account-settings--mc .account-settings__connected-provider {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.account-settings--mc .account-settings__connected-provider > .app-icon {
  flex: 0 0 auto;
  color: var(--text-3);
}
.account-settings--mc .account-settings__connected-provider div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.account-settings--mc .account-settings__connected-provider strong,
.account-settings--mc .account-settings__connected-provider span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-settings--mc .account-settings__connected-provider strong {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-1);
}
.account-settings--mc .account-settings__connected-provider span {
  font-size: var(--fs-13);
  color: var(--text-3);
}
.account-settings--mc .account-settings__danger-panel {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
}
.account-settings--mc .account-settings__delivery-value {
  max-width: min(360px, 48vw);
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-settings--mc .account-settings__facts {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  grid-column: 1/-1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.account-settings--mc .account-settings__fact {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.account-settings--mc .account-settings__fact span {
  overflow: hidden;
  font-size: var(--fs-11);
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.account-settings--mc .account-settings__fact strong {
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-settings--mc .account-settings__inline-action {
  display: grid;
  gap: 12px;
  align-items: end;
  min-width: 0;
  grid-template-columns: minmax(220px, 1fr) auto;
}
.account-settings--mc .account-settings__inline-action .xw-field {
  min-width: 0;
}
.account-settings--mc .account-settings__recovery {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  grid-column: 1/-1;
}
.account-settings--mc .account-settings__recovery-header {
  display: grid;
  gap: 4px;
}
.account-settings--mc .account-settings__recovery-header strong {
  font-size: var(--fs-14);
  color: var(--text-1);
}
.account-settings--mc .account-settings__recovery-header span {
  font-size: var(--fs-13);
  color: var(--text-3);
}
.account-settings--mc .account-settings__recovery-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.account-settings--mc .account-settings__recovery-code {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

@media (width <= 900px) {
  .account-settings--mc.account-settings--profile .account-settings__profile-grid {
    gap: 16px;
  }
  .account-settings--mc.account-settings--profile .account-settings__avatar-panel {
    justify-items: start;
  }
  .account-settings--mc .account-settings__summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .account-settings--mc .account-settings__summary-chips {
    justify-content: flex-start;
  }
  .account-settings--mc .account-settings__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-settings--mc .account-settings__profile-grid {
    grid-template-columns: 1fr;
  }
}
@media (width <= 640px) {
  .account-settings--mc .account-settings__setting-row,
  .account-settings--mc .xw-setting-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .account-settings--mc .account-settings__delivery,
  .account-settings--mc .account-settings__inline-action {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .account-settings--mc .account-settings__delivery {
    flex-direction: column;
    align-items: flex-start;
  }
  .account-settings--mc .account-settings__delivery-value {
    max-width: 100%;
  }
  .account-settings--mc .account-settings__facts {
    grid-template-columns: 1fr;
  }
  .account-settings--mc .account-settings__profile-fields {
    grid-template-columns: 1fr;
  }
  .account-settings--mc .account-settings__connected-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
.notification-settings-grid {
  display: grid;
  gap: 1rem;
}

.notification-toggle {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}
.notification-toggle__row {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
}
.notification-toggle__content {
  display: grid;
  gap: 0.2rem;
}
.notification-toggle__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.notification-toggle__description {
  font-size: 0.8rem;
  color: var(--text-2);
}
.notification-toggle--disabled {
  opacity: 50%;
}
.notification-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.notification-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}
.notification-delivery__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.notification-delivery__value {
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: var(--text);
}
.notification-delivery__badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--color-pill-muted-border);
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-pill-muted);
}
.notification-delivery__badge--info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.notification-delivery__badge--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.notification-delivery__hint {
  padding-left: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-2);
}

.security-status-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}

.security-status-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text);
}

.security-status-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.security-actions {
  display: grid;
  gap: 1rem;
}

.security-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}
@media (width <= 768px) {
  .security-action {
    grid-template-columns: 1fr;
  }
}

.security-recovery {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 0.75rem;
  background: var(--surface-inset);
  grid-column: 1/-1;
}

.security-recovery-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-2);
}

.security-recovery-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.security-recovery-code {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-inset);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/*
 * Feedback Components Styles
 * Styling for feedback components:
 * - LoadingSpinner
 * - ErrorMessage
 * - Alert
 * - EmptyState
 */
.spinner {
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  border-style: solid;
  border-top-color: var(--brand);
}
.spinner.small {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}
.spinner.medium {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}
.spinner.large {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.error-message {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.error-message.inline {
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  text-align: left;
}

.error-icon {
  font-size: 3rem;
  color: var(--danger);
}
.inline .error-icon {
  font-size: 1.5rem;
}

.error-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.error-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}
.inline .error-title {
  font-size: 1rem;
}

.error-text {
  max-width: 400px;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-3);
}

.error-details {
  max-width: 500px;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--text-4);
}

.error-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.error-actions .btn {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.alert-component {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.alert-component.alert-info {
  border-color: rgb(from #38bdf8 r g b/40%);
  background: rgb(from #38bdf8 r g b/12%);
}
.alert-component.alert-info .alert-icon {
  color: #38bdf8;
}
.alert-component.alert-success {
  border-color: rgb(from #22c55e r g b/40%);
  background: rgb(from #22c55e r g b/12%);
}
.alert-component.alert-success .alert-icon {
  color: #22c55e;
}
.alert-component.alert-warning {
  border-color: rgb(from #f97316 r g b/40%);
  background: rgb(from #f97316 r g b/12%);
}
.alert-component.alert-warning .alert-icon {
  color: #f97316;
}
.alert-component.alert-danger {
  border-color: rgb(from #ef4444 r g b/40%);
  background: rgb(from #ef4444 r g b/18%);
  color: var(--text-primary);
}
.alert-component.alert-danger .alert-icon {
  color: #ef4444;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 1.25rem;
}

.alert-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
}

.alert-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.alert-message {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.alert-dismiss {
  padding: 0.25rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.alert-dismiss:hover {
  background: var(--surface-muted);
  color: var(--text-primary);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.help-tip {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.65);
  transition: color 120ms ease;
  vertical-align: middle;
  cursor: help;
}
.help-tip:hover, .help-tip:focus-visible {
  color: rgba(255, 255, 255, 0.95);
}
.help-tip:focus-visible {
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
  outline: none;
}
.help-tip .app-icon {
  display: inline-flex;
}

.help-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-tip__bubble {
  position: absolute;
  z-index: 700;
  max-width: 260px;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.98);
  opacity: 0%;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 120ms ease, transform 120ms ease;
  transform: translate(-50%, -0.35rem) scale(0.98);
  pointer-events: none;
}

.help-tip:hover .help-tip__bubble {
  opacity: 100%;
  transform: translate(-50%, -0.6rem) scale(1);
}

.help-tip--top .help-tip__bubble {
  bottom: calc(100% + 0.45rem);
  left: 50%;
}

.help-tip--bottom .help-tip__bubble {
  top: calc(100% + 0.45rem);
  left: 50%;
  transform: translate(-50%, 0.35rem) scale(0.98);
}

.help-tip--bottom:hover .help-tip__bubble {
  transform: translate(-50%, 0.6rem) scale(1);
}

.help-tip--left .help-tip__bubble {
  top: 50%;
  right: calc(100% + 0.5rem);
  transform: translate(-0.35rem, -50%) scale(0.98);
}

.help-tip--left:hover .help-tip__bubble {
  transform: translate(-0.6rem, -50%) scale(1);
}

.help-tip--right .help-tip__bubble {
  top: 50%;
  left: calc(100% + 0.5rem);
  transform: translate(0.35rem, -50%) scale(0.98);
}

.help-tip--right:hover .help-tip__bubble {
  transform: translate(0.6rem, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .help-tip,
  .help-tip__bubble {
    transition: none;
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/*
 * Form Components Styles
 * Styling for form input components:
 * - FormField
 * - NumberInput
 * - SelectField
 * - BooleanSelect
 * - TextInput
 */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field-label {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.form-field-label .required-indicator {
  color: var(--danger);
}

.form-field-input {
  position: relative;
}

.form-field-help {
  font-size: 0.8125rem;
  color: var(--text-3);
}

.form-field-error {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--danger);
}
.form-field-error i {
  font-size: 0.75rem;
}

.form-input,
.form-select,
input.form-control,
select.form-control,
textarea.form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--input-bg);
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.form-input:focus,
.form-select:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.form-input:disabled, .form-input.disabled,
.form-select:disabled,
.form-select.disabled,
input.form-control:disabled,
input.form-control.disabled,
select.form-control:disabled,
select.form-control.disabled,
textarea.form-control:disabled,
textarea.form-control.disabled {
  opacity: 50%;
  cursor: not-allowed;
}
.form-input::-moz-placeholder, .form-select::-moz-placeholder, input.form-control::-moz-placeholder, select.form-control::-moz-placeholder, textarea.form-control::-moz-placeholder {
  color: var(--text-muted);
}
.form-input::placeholder,
.form-select::placeholder,
input.form-control::placeholder,
select.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--text-muted);
}
.form-input.is-invalid,
.form-select.is-invalid,
input.form-control.is-invalid,
select.form-control.is-invalid,
textarea.form-control.is-invalid {
  border-color: var(--danger);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
input.form-control.is-invalid:focus,
select.form-control.is-invalid:focus,
textarea.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
}

.xw-text-field {
  width: 100%;
}

.xw-text-field__input {
  width: 100%;
}

.xw-text-field--lg .xw-text-field__input {
  padding: 0.8rem 1rem;
  border-radius: calc((0.75rem + 1rem) / 2);
  font-size: 1.05rem;
  font-weight: 500;
}

.number-input-wrapper {
  display: flex;
  align-items: stretch;
}

.xw-number-input {
  -webkit-appearance: textfield;
          appearance: textfield;
  flex: 1;
}
.xw-number-input::-webkit-outer-spin-button, .xw-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

.select-wrapper {
  position: relative;
}

.form-select,
select.form-control {
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-select:disabled,
select.form-control:disabled {
  cursor: not-allowed;
}
.form-select option,
select.form-control option {
  background: var(--dropdown-bg);
  color: var(--text-primary);
}

.boolean-select {
  display: flex;
  gap: 0.5rem;
}

.boolean-option {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  color: var(--text-3);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.boolean-option:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--text);
}
.boolean-option.selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
}
.boolean-option.selected.yes {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}
.boolean-option.selected.no {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
.boolean-option.selected.inherit {
  border-color: var(--text-3);
  background: var(--muted-soft);
  color: var(--text-3);
}
.boolean-option:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.input-with-addon,
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-with-addon .xw-input,
.input-with-addon .form-input,
.input-with-addon .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.input-with-addon .xw-input:not(:first-child),
.input-with-addon .form-input:not(:first-child),
.input-with-addon .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-with-addon .xw-input:not(:last-child),
.input-with-addon .form-input:not(:last-child),
.input-with-addon .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-addon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--ctrl-h);
  min-height: var(--ctrl-h);
  padding: 0 0.75rem;
  border: 1px solid var(--input-border);
  background: var(--surface-inset);
  font-size: 0.875rem;
  color: var(--text-3);
  white-space: nowrap;
}
.input-addon.prefix {
  border-right: none;
  border-radius: calc(0.5rem * 3 / 4) 0 0 calc(0.5rem * 3 / 4);
}
.input-addon.suffix {
  border-left: none;
  border-radius: 0 calc(0.5rem * 3 / 4) calc(0.5rem * 3 / 4) 0;
}

.input-group .form-input:only-child,
.input-group input.form-control:only-child {
  border-radius: calc(0.5rem * 3 / 4);
}
.input-group .form-input:not(:first-child, :last-child),
.input-group input.form-control:not(:first-child, :last-child) {
  border-radius: 0;
}
.input-group .form-input:first-child,
.input-group input.form-control:first-child {
  border-radius: calc(0.5rem * 3 / 4) 0 0 calc(0.5rem * 3 / 4);
}
.input-group .form-input:last-child,
.input-group input.form-control:last-child {
  border-radius: 0 calc(0.5rem * 3 / 4) calc(0.5rem * 3 / 4) 0;
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

.form-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.form-check .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--input-border);
  border-radius: calc(0.5rem / 2);
  background: var(--input-bg);
  cursor: pointer;
}
.form-check .form-check-input:checked {
  border-color: var(--brand);
  background: var(--brand);
}
.form-check .form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.form-check .form-check-input[type=radio] {
  border-radius: 999px;
}
.form-check .form-check-label {
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
}

.form-row {
  display: grid;
  gap: 1.5rem;
}
.form-row.two-col {
  grid-template-columns: repeat(2, 1fr);
}
@media (width <= 768px) {
  .form-row.two-col {
    grid-template-columns: 1fr;
  }
}
.form-row.three-col {
  grid-template-columns: repeat(3, 1fr);
}
@media (width <= 992px) {
  .form-row.three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 576px) {
  .form-row.three-col {
    grid-template-columns: 1fr;
  }
}
.form-row--inline-checks {
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;
  align-items: center;
}
.form-row--inline-checks > * {
  flex: 0 0 auto;
  min-width: 0;
}

.form-section {
  margin-bottom: 2rem;
}
.form-section:last-child {
  margin-bottom: 0;
}

.form-section-title {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* Processing Widget Styles */
.processing-widget {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface);
}

.processing-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-alt);
}

.processing-widget__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.processing-widget__title svg {
  color: var(--accent);
}

.processing-widget__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.processing-widget__refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-alt);
  color: var(--accent);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.processing-widget__refresh:hover {
  border-color: var(--accent);
  background: var(--surface-muted);
}

.processing-widget__refresh:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-muted);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.processing-widget__link {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.processing-widget__link:hover {
  color: var(--text-primary);
}

.processing-widget__link:focus-visible {
  border-radius: calc(0.5rem * 3 / 4);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  color: var(--text-primary);
  outline: none;
}

.processing-widget__body {
  padding: 1rem 1.25rem;
}

.processing-widget__empty {
  padding: 1.5rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-muted);
}

/* Stats Grid */
.processing-widget__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.processing-widget__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-alt);
}

.processing-widget__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.processing-widget__stat-label {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Stat color variations */
.processing-widget__stat--pending .processing-widget__stat-value {
  color: var(--status-warning);
}

.processing-widget__stat--active .processing-widget__stat-value {
  color: var(--status-info);
}

.processing-widget__stat--completed .processing-widget__stat-value {
  color: var(--status-success);
}

.processing-widget__stat--failed .processing-widget__stat-value {
  color: var(--status-danger);
}

/* Cycle indicator */
.processing-widget__cycle-indicator {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--surface-alt);
  font-size: 0.85rem;
  color: var(--accent);
}

.processing-widget__cycle-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 100%;
    transform: scale(1);
  }
  50% {
    opacity: 50%;
    transform: scale(1.2);
  }
}
/* Organizations list */
.processing-widget__orgs {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.processing-widget__orgs-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.processing-widget__orgs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.processing-widget__org-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem;
}

.processing-widget__org-item:last-child {
  border-bottom: none;
}

.processing-widget__org-item--active {
  margin: 0 -0.5rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  border-radius: calc(0.5rem / 2);
  background: var(--surface-alt);
}

.processing-widget__org-name {
  font-weight: 500;
  color: var(--text-primary);
}

.processing-widget__org-stats {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.processing-widget__org-running {
  font-size: 0.6rem;
  color: var(--status-success);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.processing-widget__more {
  display: block;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-muted);
}

/* Spinner for loading state */
.processing-widget .spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Responsive: collapse stats to 2 columns on small widgets */
@media (width <= 400px) {
  .processing-widget__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Recent Processing Activity Widget
   A reusable dashboard widget showing recent jobs, metrics, and throughput chart.
   Matches the design mockup with dark glass aesthetic.
   ========================================================================== */
.processing-activity {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.processing-activity__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.processing-activity__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.processing-activity__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
}

@keyframes processing-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   BODY - Horizontal layout: Jobs List | Metrics + Chart
   ───────────────────────────────────────────────────────────────────────────── */
.processing-activity__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (width <= 900px) {
  .processing-activity__body {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   JOBS LIST (Left side)
   ───────────────────────────────────────────────────────────────────────────── */
.processing-activity__jobs {
  padding: 0.75rem 1.5rem;
  border-right: 1px solid var(--border-soft);
}
@media (width <= 900px) {
  .processing-activity__jobs {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
}

.processing-activity__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.processing-activity__table {
  width: 100%;
  border-collapse: collapse;
}

.processing-activity__row {
  transition: background 0.15s ease;
}
.processing-activity__row:hover {
  background: var(--table-row-hover-bg);
}

.processing-activity__cell {
  padding: 0.5rem 0.375rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.processing-activity__cell--id {
  font-family: "SF Mono", Monaco, Inconsolata, "Fira Code", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}
.processing-activity__cell--type {
  color: var(--text-secondary);
}
.processing-activity__cell--status {
  text-align: center;
}
.processing-activity__cell--time {
  font-size: 0.75rem;
  text-align: right;
  color: var(--text-muted);
}

.processing-activity__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}
.processing-activity__status--completed {
  background: var(--status-success-bg);
  color: var(--status-success);
}
.processing-activity__status--failed {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}
.processing-activity__status--pending {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}
.processing-activity__status--processing {
  background: var(--status-info-bg);
  color: var(--status-info);
}

/* ─────────────────────────────────────────────────────────────────────────────
   METRICS PANEL (Right side)
   ───────────────────────────────────────────────────────────────────────────── */
.processing-activity__metrics-panel {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.5rem;
}

.processing-activity__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.processing-activity__metric {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.processing-activity__metric-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.processing-activity__metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHART
   ───────────────────────────────────────────────────────────────────────────── */
.processing-activity__chart {
  position: relative;
  flex: 1;
  min-height: 100px;
  /* ApexCharts uses inline styles, !important required */
}
.processing-activity__chart .apexcharts-canvas {
  background: transparent !important;
}
.processing-activity__chart {
  /* ApexCharts uses inline styles, !important required */
}
.processing-activity__chart .apexcharts-tooltip {
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.75rem !important;
  background: var(--surface) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}
.processing-activity__chart {
  /* ApexCharts uses inline styles, !important required */
}
.processing-activity__chart .apexcharts-tooltip-title {
  border-bottom: 1px solid var(--border-soft) !important;
  background: var(--surface-alt) !important;
}

.processing-activity__chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.processing-activity__chart-label {
  position: absolute;
  right: 0;
  bottom: -4px;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────────── */
.processing-activity__footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1.5rem 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.processing-activity__link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s ease;
  text-decoration: none;
}
.processing-activity__link:hover {
  color: var(--accent-strong);
}

/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
.date-range-picker {
  --drp-trigger-border: var(--input-border);
  --drp-trigger-border-hover: var(--line-strong);
  --drp-trigger-bg: var(--input-bg);
  --drp-trigger-bg-hover: var(--surface-2);
  --drp-trigger-text: var(--text-2);
  --drp-title-text: var(--text-3);
  --drp-value-text: var(--text);
  --drp-icon-bg: var(--brand-soft);
  --drp-icon-color: var(--brand);
  --drp-menu-border: var(--line);
  --drp-menu-bg: var(--surface-2);
  --drp-menu-shadow: 0 25px 60px rgb(0 0 0 / 40%);
  --drp-section-divider: var(--line);
  --drp-section-title: var(--text-2);
  --drp-chip-border: var(--line);
  --drp-chip-bg: var(--surface-inset);
  --drp-chip-color: var(--text-2);
  --drp-chip-hover-border: var(--line-strong);
  --drp-chip-hover-bg: var(--surface-2);
  --drp-chip-active-border: var(--brand-line);
  --drp-chip-active-bg: var(--brand-soft);
  --drp-chip-active-color: var(--brand);
  --drp-custom-header: var(--text-3);
  --drp-footer-divider: var(--line);
  --drp-calendar-title: var(--text-2);
  --drp-calendar-nav: var(--text-3);
  --drp-calendar-nav-hover-bg: var(--surface-2);
  --drp-calendar-nav-hover-color: var(--text);
  --drp-calendar-month: var(--text-2);
  --drp-calendar-day-header: var(--text-3);
  --drp-calendar-day: var(--text);
  --drp-calendar-day-hover-bg: var(--surface-2);
  --drp-calendar-day-other: var(--text-4);
  --drp-calendar-range: var(--brand-soft);
  --drp-calendar-today: var(--brand);
  --drp-calendar-today-dot: var(--brand);
  position: relative;
}
.date-range-picker__trigger {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--drp-trigger-border);
  border-radius: 0.5rem;
  background: var(--drp-trigger-bg);
  color: var(--drp-trigger-text);
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
}
.date-range-picker__trigger:hover {
  border-color: var(--drp-trigger-border-hover);
  background: var(--drp-trigger-bg-hover);
}
.date-range-picker__trigger .chevron-icon {
  margin-left: auto;
  opacity: 50%;
  transition: transform 0.2s ease;
}
.date-range-picker.open .date-range-picker__trigger .chevron-icon {
  transform: rotate(180deg);
}
.date-range-picker__trigger:focus-visible {
  outline: none;
  border-color: var(--drp-trigger-border-hover);
  background: var(--drp-trigger-bg-hover);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.date-range-picker__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--drp-icon-bg);
  color: var(--drp-icon-color);
}
.date-range-picker__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.date-range-picker__title {
  font-size: 0.8rem;
  color: var(--drp-title-text);
}
.date-range-picker__value {
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--drp-value-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.date-range-picker__menu {
  position: absolute;
  right: 0;
  z-index: 300;
  width: 580px;
  max-width: 95vw;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--drp-menu-border);
  border-radius: 0.75rem;
  background: var(--drp-menu-bg);
  box-shadow: var(--drp-menu-shadow);
  backdrop-filter: blur(8px);
}
.date-range-picker__menu:focus-visible {
  outline: none;
  box-shadow: var(--drp-menu-shadow), 0 0 0 3px var(--focus-ring-color);
}
.date-range-picker__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.date-range-picker__section + .date-range-picker__section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--drp-section-divider);
}
.date-range-picker__section-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--drp-section-title);
}
.date-range-picker__quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.date-range-picker__chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--drp-chip-border);
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--drp-chip-bg);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--drp-chip-color);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.date-range-picker__chip:hover {
  border-color: var(--drp-chip-hover-border);
  background: var(--drp-chip-hover-bg);
}
.date-range-picker__chip.active {
  border-color: var(--drp-chip-active-border);
  background: var(--drp-chip-active-bg);
  color: var(--drp-chip-active-color);
}
.date-range-picker__chip .icon {
  opacity: 70%;
  font-size: 1rem;
}
.date-range-picker__chip:focus-visible {
  outline: none;
  border-color: var(--drp-chip-hover-border);
  background: var(--drp-chip-hover-bg);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.date-range-picker__custom-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--drp-custom-header);
}
.date-range-picker__custom-header .icon {
  font-size: 1rem;
}
.date-range-picker__calendars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}
@media (width <= 600px) {
  .date-range-picker__calendars {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.date-range-picker__footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--drp-footer-divider);
}
.date-range-picker__footer .pill-btn {
  min-width: 100px;
}
.date-range-picker__validation {
  margin-right: auto;
  font-size: 0.85rem;
  color: var(--color-danger);
}

.calendar {
  width: 100%;
}
.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.calendar__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--drp-calendar-title);
}
.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: none;
  border-radius: calc(0.5rem / 2);
  background: none;
  font-size: 1rem;
  color: var(--drp-calendar-nav);
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.calendar__nav:hover {
  background: var(--drp-calendar-nav-hover-bg);
  color: var(--drp-calendar-nav-hover-color);
}
.calendar__nav:focus-visible {
  background: var(--drp-calendar-nav-hover-bg);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  color: var(--drp-calendar-nav-hover-color);
  outline: none;
}
.calendar__month-label {
  margin-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: var(--drp-calendar-month);
}
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100%;
}
.calendar__day-header {
  padding: 6px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--drp-calendar-day-header);
}
.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: calc(0.5rem * 3 / 4);
  background: none;
  font-size: 0.85rem;
  color: var(--drp-calendar-day);
  transition: background 0.1s ease, color 0.1s ease;
  aspect-ratio: 1;
  cursor: pointer;
}
.calendar__day:hover:not(:disabled, .selected) {
  background: var(--drp-calendar-day-hover-bg);
}
.calendar__day.other-month {
  color: var(--drp-calendar-day-other);
}
.calendar__day.today:not(.selected) {
  position: relative;
  font-weight: bold;
  color: var(--drp-calendar-today);
}
.calendar__day.today:not(.selected)::after {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--drp-calendar-today-dot);
  transform: translateX(-50%);
  content: "";
}
.calendar__day.in-range {
  border-radius: 0;
  background: var(--drp-calendar-range);
}
.calendar__day.selected {
  position: relative;
  z-index: 1;
  border-radius: calc(0.5rem * 3 / 4);
  background: var(--accent);
  font-weight: 600;
  color: var(--text-on-brand);
}
.calendar__day:disabled {
  opacity: 30%;
  cursor: not-allowed;
}
.calendar__day:focus-visible {
  outline: none;
  background: var(--drp-calendar-day-hover-bg);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: transparent;
}

/* Sync status components */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Sync Status Components
   ========================================================================== */
.sync-status-badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--color-pill-muted-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-pill-muted);
  white-space: nowrap;
  border: 1px solid var(--color-pill-muted-border);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sync-status-badge--sm {
  padding: 0.125rem 0.25rem;
  font-size: 0.6rem;
}
.sync-status-badge--lg {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}
.sync-status-badge--synced {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.sync-status-badge--pending {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.sync-status-badge--conflicted {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.sync-status-badge--failed {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.sync-status-badge--overridden {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}
.sync-status-badge--unknown {
  border-color: var(--color-pill-muted-border);
  background: var(--color-pill-muted-bg);
  color: var(--color-pill-muted);
}
.sync-status-badge .badge-icon {
  font-size: 0.9em;
}
.sync-status-badge .badge-count {
  margin-left: 0.25rem;
  padding: 0.125rem 0.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentcolor 16%, transparent);
  font-size: 0.85em;
  font-weight: 700;
}

.sync-status-panel {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.sync-status-panel__loading-message, .sync-status-panel__last-synced {
  color: rgba(255, 255, 255, 0.6);
}
.sync-status-panel__loading-message {
  margin-top: 0.5rem;
}

.sync-status-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.sync-status-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
.sync-status-header h5 {
  font-weight: 600;
  color: #fff;
}

.sync-status-summary .summary-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.sync-status-summary .summary-card:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
}
.sync-status-summary .summary-card.synced .summary-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.sync-status-summary .summary-card.synced .summary-value {
  color: #22c55e;
}
.sync-status-summary .summary-card.pending .summary-icon {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}
.sync-status-summary .summary-card.pending .summary-value {
  color: #f97316;
}
.sync-status-summary .summary-card.conflicted .summary-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.sync-status-summary .summary-card.conflicted .summary-value {
  color: #ef4444;
}
.sync-status-summary .summary-card.overridden .summary-icon {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.sync-status-summary .summary-card.overridden .summary-value {
  color: #38bdf8;
}
.sync-status-summary .summary-card .summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  font-size: 1.5rem;
}
.sync-status-summary .summary-card .summary-content {
  display: flex;
  flex-direction: column;
}
.sync-status-summary .summary-card .summary-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.sync-status-summary .summary-card .summary-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.sync-status-progress {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.sync-status-progress .progress {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted-soft);
}
.sync-status-progress .progress .progress-bar {
  background: linear-gradient(90deg, #38bdf8, #22c55e);
}
.sync-status-progress span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.sync-status-streams {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sync-status-stream {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  grid-template-columns: 1fr auto auto;
}
.sync-status-stream .btn {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.sync-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.sync-progress-step {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.375rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.8);
}
.sync-progress-step__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.4);
}
.sync-progress-step__label {
  font-weight: 600;
}
.sync-progress-step__meta {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
}
.sync-progress-step--active {
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(56, 189, 248, 0.12);
  color: #fff;
}
.sync-progress-step--active .sync-progress-step__dot {
  background: #38bdf8;
}
.sync-progress-step--complete {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.12);
  color: #fff;
}
.sync-progress-step--complete .sync-progress-step__dot {
  background: #22c55e;
}
.sync-progress-step--failed {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
  color: #fff;
}
.sync-progress-step--failed .sync-progress-step__dot {
  background: #ef4444;
}
.sync-progress-step--pending {
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.sync-status-conflicts .section-header,
.sync-status-fields .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
.sync-status-conflicts .section-header h6,
.sync-status-fields .section-header h6 {
  margin: 0;
  font-weight: 600;
  color: #fff;
}

:root[data-theme=light] .sync-status-panel {
  border-color: var(--border-soft);
  background: var(--surface-1);
  box-shadow: 0 16px 28px -24px rgba(0, 0, 0, 0.16);
}

:root[data-theme=light] .sync-status-header h5 {
  color: var(--text-primary);
}

:root[data-theme=light] .sync-status-loading {
  color: var(--text-secondary);
}

:root[data-theme=light] .sync-status-summary .summary-card {
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
  box-shadow: none;
}

:root[data-theme=light] .sync-status-summary .summary-card .summary-value {
  color: var(--text-primary);
}

:root[data-theme=light] .sync-status-summary .summary-card .summary-label {
  color: var(--text-secondary);
}

:root[data-theme=light] .sync-status-progress .progress {
  background: var(--muted-soft);
}

:root[data-theme=light] .sync-status-progress span {
  color: var(--text-secondary);
}

.sync-status-empty .xw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}
.sync-status-empty .xw-empty i {
  margin-bottom: 0.75rem;
  font-size: 3rem;
}
.sync-status-empty .xw-empty h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #fff;
}
.sync-status-empty .xw-empty p {
  max-width: 320px;
}

.field-comparison-table {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
}
.field-comparison-table__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.field-comparison-table .inspection-table {
  margin: 0;
  color: #fff;
}
.field-comparison-table .inspection-table thead {
  background: var(--surface-2);
}
.field-comparison-table .inspection-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.field-comparison-table .inspection-table tbody tr {
  transition: background-color 120ms ease;
}
.field-comparison-table .inspection-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.field-comparison-table .inspection-table tbody tr.row-conflicted {
  background: rgba(239, 68, 68, 0.08);
}
.field-comparison-table .inspection-table tbody tr.row-conflicted:hover {
  background: rgba(239, 68, 68, 0.12);
}
.field-comparison-table .inspection-table tbody tr.row-pending {
  background: rgba(249, 115, 22, 0.06);
}
.field-comparison-table .inspection-table tbody tr.row-pending:hover {
  background: rgba(249, 115, 22, 0.1);
}
.field-comparison-table .inspection-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.field-comparison-table .field-name {
  font-weight: 500;
}
.field-comparison-table .field-value {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.85rem;
}
.field-comparison-table .field-value__empty {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.field-comparison-table .field-value--master {
  color: #fff;
}
.field-comparison-table .field-value--channel {
  color: rgba(255, 255, 255, 0.6);
}
.field-comparison-table .field-value--different {
  color: #f97316;
}
.field-comparison-table .value-diff {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.field-comparison-table .value-diff .diff-arrow {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (width <= 768px) {
  .field-comparison-table .inspection-table {
    min-width: 560px;
  }
}
.conflict-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.conflict-list .conflict-item {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem;
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.conflict-list .conflict-item:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  transform: translateX(4px);
}
.conflict-list .conflict-item:last-child {
  margin-bottom: 0;
}
.conflict-list .conflict-item--critical {
  border-left: 3px solid #ef4444;
}
.conflict-list .conflict-item--warning {
  border-left: 3px solid #f97316;
}
.conflict-list .conflict-item--info {
  border-left: 3px solid #38bdf8;
}
.conflict-list .conflict-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.conflict-list .conflict-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.conflict-list .conflict-field {
  font-weight: 600;
  color: #fff;
}
.conflict-list .conflict-severity {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: transparent;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: inherit;
  white-space: nowrap;
  padding: 0.125rem 0.5rem;
}
.conflict-list .conflict-severity--critical {
  border: 1px solid rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.18);
  color: rgb(250.52, 202.64, 202.64);
}
:root[data-theme=light] .conflict-list .conflict-severity--critical {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: rgb(68.76, 33.8, 48.24);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .conflict-list .conflict-severity--critical {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.12);
    color: rgb(68.76, 33.8, 48.24);
  }
}
.conflict-list .conflict-severity--warning {
  border: 1px solid rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.18);
  color: rgb(253.32, 215.8, 189.76);
}
:root[data-theme=light] .conflict-list .conflict-severity--warning {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.12);
  color: rgb(71.16, 45.08, 37.2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .conflict-list .conflict-severity--warning {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.12);
    color: rgb(71.16, 45.08, 37.2);
  }
}
.conflict-list .conflict-severity--info {
  border: 1px solid rgba(56, 189, 248, 0.34);
  background: rgba(56, 189, 248, 0.18);
  color: rgb(199.28, 236.52, 253.04);
}
:root[data-theme=light] .conflict-list .conflict-severity--info {
  border-color: rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.12);
  color: rgb(24.84, 62.84, 91.44);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark], [data-theme=light]) .conflict-list .conflict-severity--info {
    border-color: rgba(56, 189, 248, 0.24);
    background: rgba(56, 189, 248, 0.12);
    color: rgb(24.84, 62.84, 91.44);
  }
}
.conflict-list .conflict-values {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.85rem;
}
.conflict-list .conflict-values .value-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.conflict-list .conflict-values .value-text {
  color: #fff;
}
.conflict-list .conflict-reason {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.conflict-list .conflict-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  margin-left: 1rem;
}

.conflict-resolution-modal.modal {
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(20px);
  color: var(--text-primary);
}
.conflict-resolution-modal__empty-value {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.conflict-resolution-modal__manual-value {
  margin-top: 0.5rem;
}
.conflict-resolution-modal .modal__header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
.conflict-resolution-modal .modal__header .modal__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 600;
}
.conflict-resolution-modal .modal__header .modal__close {
  color: rgba(255, 255, 255, 0.74);
}
.conflict-resolution-modal .modal__body {
  padding: 1.5rem;
}
.conflict-resolution-modal .modal__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.resolution-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.resolution-option {
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  transition: transform 120ms ease, border-color 200ms ease;
  cursor: pointer;
}
.resolution-option:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateX(4px);
}
.resolution-option--selected {
  border-color: #3b82f6;
  background: var(--brand-soft);
}
.resolution-option .option-radio {
  margin-top: 0.25rem;
}
.resolution-option .option-content {
  flex: 1;
}
.resolution-option .option-label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.resolution-option .option-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.resolution-option .option-value {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--surface-inset);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.85rem;
}

.ai-suggestion-panel {
  border: 1px solid var(--color-primary-border);
  border-radius: 1rem;
  background: var(--color-primary-bg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  margin-top: 1rem;
  padding: 1rem;
}
.ai-suggestion-panel .ai-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--agent);
}
.ai-suggestion-panel .ai-header i,
.ai-suggestion-panel .ai-header .app-icon {
  font-size: 1.25rem;
}
.ai-suggestion-panel .ai-suggestion {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--surface-inset);
  font-family: "JetBrains Mono", "Fira Code", monospace;
}
.ai-suggestion-panel .ai-reasoning {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}
.ai-suggestion-panel .ai-confidence {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.ai-suggestion-panel .ai-confidence .confidence-bar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-strong);
}
.ai-suggestion-panel .ai-confidence .confidence-bar .confidence-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--agent), var(--agent-strong));
  transition: width 320ms ease;
}
.ai-suggestion-panel .ai-confidence .confidence-value {
  font-weight: 600;
  color: var(--agent);
}

.bulk-push-modal.modal {
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  background: var(--surface-overlay);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(20px);
  color: var(--text-primary);
}
.bulk-push-modal .modal__header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
.bulk-push-modal .modal__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 600;
}
.bulk-push-modal .modal__close {
  color: rgba(255, 255, 255, 0.74);
}
.bulk-push-modal .modal__body {
  padding: 1.5rem;
}
.bulk-push-modal .modal__footer {
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.bulk-push-progress,
.bulk-push-results,
.bulk-push-confirmation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bulk-push-progress__skipped {
  color: rgba(255, 255, 255, 0.6);
}
.bulk-push-progress .progress-header,
.bulk-push-progress .progress-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.bulk-push-progress .progress-label {
  font-weight: 600;
  color: #fff;
}
.bulk-push-progress .progress-stats {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.bulk-push-progress .progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
.bulk-push-progress .progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  transition: width 200ms ease;
}
.bulk-push-progress .progress-bar--info {
  background: rgba(56, 189, 248, 0.9);
}
.bulk-push-progress .progress-bar--warning {
  background: rgba(249, 115, 22, 0.9);
}
.bulk-push-progress .current-product {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
}

.bulk-push-results__summary {
  margin-bottom: 0;
}
.bulk-push-results__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}
.bulk-push-results__show-skipped {
  align-self: flex-start;
}
.bulk-push-results__skipped-icon {
  margin-right: 0.25rem;
  color: rgba(255, 255, 255, 0.6);
}
.bulk-push-results .results-summary {
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
}
.bulk-push-results .results-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.5rem;
}
.bulk-push-results .results-text h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.bulk-push-results .results-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}
.bulk-push-results .results-stats .stat-card {
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
}
.bulk-push-results .results-stats .stat-card__value,
.bulk-push-results .results-stats .stat-value {
  font-size: 1.4rem;
  font-weight: 700;
}
.bulk-push-results .results-stats .stat-card__label,
.bulk-push-results .results-stats .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}
.bulk-push-results .results-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bulk-push-results .product-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bulk-push-results .product-item {
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  font-size: 0.9rem;
}
.bulk-push-results .product-name {
  font-weight: 600;
  color: #fff;
}
.bulk-push-results .product-shop,
.bulk-push-results .product-reason {
  color: rgba(255, 255, 255, 0.72);
}
.bulk-push-results .product-error {
  color: #ef4444;
}
.bulk-push-results .product-overflow {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.bulk-push-confirmation p {
  margin: 0;
}
.bulk-push-confirmation .estimate-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.bulk-push-confirmation .estimate-item,
.bulk-push-confirmation .estimate-shops {
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-muted-strong);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  padding: 0.75rem 1rem;
}
.bulk-push-confirmation .estimate-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}
.bulk-push-confirmation .estimate-value {
  font-weight: 700;
}
.bulk-push-confirmation .estimate-shops ul {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

:root[data-theme=light] .conflict-resolution-modal.modal,
:root[data-theme=light] .bulk-push-modal.modal {
  background: var(--surface-1);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.24);
}
:root[data-theme=light] .conflict-resolution-modal .modal__title,
:root[data-theme=light] .conflict-resolution-modal .results-text h4,
:root[data-theme=light] .conflict-resolution-modal .progress-label,
:root[data-theme=light] .conflict-resolution-modal .product-name,
:root[data-theme=light] .bulk-push-modal .modal__title,
:root[data-theme=light] .bulk-push-modal .results-text h4,
:root[data-theme=light] .bulk-push-modal .progress-label,
:root[data-theme=light] .bulk-push-modal .product-name {
  color: var(--text-primary);
}
:root[data-theme=light] .conflict-resolution-modal .modal__close,
:root[data-theme=light] .bulk-push-modal .modal__close {
  color: var(--text-secondary);
}
:root[data-theme=light] .conflict-resolution-modal .results-text p,
:root[data-theme=light] .conflict-resolution-modal .progress-stats,
:root[data-theme=light] .conflict-resolution-modal .results-stats .stat-label,
:root[data-theme=light] .conflict-resolution-modal .product-shop,
:root[data-theme=light] .conflict-resolution-modal .product-reason,
:root[data-theme=light] .conflict-resolution-modal .product-overflow,
:root[data-theme=light] .conflict-resolution-modal .estimate-label,
:root[data-theme=light] .bulk-push-modal .results-text p,
:root[data-theme=light] .bulk-push-modal .progress-stats,
:root[data-theme=light] .bulk-push-modal .results-stats .stat-label,
:root[data-theme=light] .bulk-push-modal .product-shop,
:root[data-theme=light] .bulk-push-modal .product-reason,
:root[data-theme=light] .bulk-push-modal .product-overflow,
:root[data-theme=light] .bulk-push-modal .estimate-label {
  color: var(--text-secondary);
}
:root[data-theme=light] .conflict-resolution-modal .current-product,
:root[data-theme=light] .conflict-resolution-modal .results-summary,
:root[data-theme=light] .conflict-resolution-modal .results-stats .stat-card,
:root[data-theme=light] .conflict-resolution-modal .product-item,
:root[data-theme=light] .conflict-resolution-modal .estimate-item,
:root[data-theme=light] .conflict-resolution-modal .estimate-shops,
:root[data-theme=light] .bulk-push-modal .current-product,
:root[data-theme=light] .bulk-push-modal .results-summary,
:root[data-theme=light] .bulk-push-modal .results-stats .stat-card,
:root[data-theme=light] .bulk-push-modal .product-item,
:root[data-theme=light] .bulk-push-modal .estimate-item,
:root[data-theme=light] .bulk-push-modal .estimate-shops {
  border-color: var(--border-soft);
  background: var(--surface-muted);
}

.conflict-group {
  margin-bottom: 1.5rem;
}
.conflict-group:last-child {
  margin-bottom: 0;
}
.conflict-group .group-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.conflict-group .group-header .group-count {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--line);
  font-weight: 600;
}

/* Push queue components */
/* Bundles all style partials into a single stylesheet. Maintain order for overrides. */
/* ==========================================================================
   Push Queue Status Panel Styles
   ========================================================================== */
.push-queue-panel {
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.25));
  border-radius: 1.5rem;
  background: var(--surface-muted, rgba(15, 23, 42, 0.65));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.push-queue-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-alt);
  backdrop-filter: blur(6px);
}

.push-queue-panel__title-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.push-queue-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.push-queue-panel__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.push-queue-panel__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.push-queue-panel__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.push-queue-panel__body {
  padding: 1rem;
}

.push-queue-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.push-queue-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: var(--surface-alt);
}

.push-queue-summary__label {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.push-queue-summary__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.push-queue-panel__loading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.push-queue-panel__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.push-queue-panel__empty i,
.push-queue-panel__empty .app-icon {
  opacity: 50%;
  font-size: 2rem;
}

/* Stats Grid */
.push-queue-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.75rem;
}

.push-queue-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.375rem;
  border-radius: 0.75rem;
  background: var(--surface-alt);
  transition: background-color 120ms ease;
}
.push-queue-stat:hover {
  background: var(--surface-muted);
}

.push-queue-chip {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.push-queue-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 8px currentcolor;
}

.push-queue-chip--ok {
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.push-queue-chip--warning {
  border-color: rgba(249, 115, 22, 0.4);
  color: #f97316;
}

.push-queue-chip--critical {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.push-queue-chip--info {
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.push-queue-chip--muted {
  border-color: var(--border-soft);
  color: var(--text-muted);
}
.push-queue-chip--muted::before {
  box-shadow: none;
}

.push-queue-stat__label {
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.push-queue-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.push-queue-stat__value--ok {
  color: var(--text-secondary);
}

.push-queue-stat__value--pending {
  color: #f97316;
}

.push-queue-stat__value--warning {
  color: #f97316;
}

.push-queue-stat__value--critical {
  color: #ef4444;
}

.push-queue-stat__value--success {
  color: #22c55e;
}

.push-queue-stat__value--info {
  color: #38bdf8;
}

.push-queue-stat__value--muted {
  color: var(--text-muted);
}

/* Additional Metrics */
.push-queue-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.push-queue-metric {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.push-queue-metric i,
.push-queue-metric .app-icon {
  opacity: 70%;
  font-size: 0.875rem;
}

.push-queue-metric__label {
  color: var(--text-muted);
}

.push-queue-metric__value {
  font-weight: 600;
  color: var(--text-primary);
}

.push-queue-metric__value--warning {
  color: #f97316;
}

.push-queue-metric__value--critical {
  color: #ef4444;
}

/* Progress Bar */
.push-queue-progress .progress {
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-soft);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.push-queue-progress .progress .progress-bar {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.push-queue-progress .progress .progress-bar:last-child {
  border-right: 0;
}
.push-queue-progress .progress .progress-bar--success {
  background: rgba(34, 197, 94, 0.9);
}
.push-queue-progress .progress .progress-bar--danger {
  background: rgba(239, 68, 68, 0.9);
}
.push-queue-progress .progress .progress-bar--info {
  background: rgba(56, 189, 248, 0.85);
}
.push-queue-progress .progress .progress-bar--muted {
  background: color-mix(in srgb, var(--text-3) 65%, transparent);
}
.push-queue-progress .progress .progress-bar--primary {
  background: rgba(56, 189, 248, 0.65);
}
.push-queue-progress .progress .progress-bar--dark {
  background: color-mix(in srgb, var(--text) 65%, transparent);
}
.push-queue-progress .progress .progress-bar--warning {
  background: rgba(249, 115, 22, 0.9);
}

/* Spin Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation: spin 1s linear infinite;
}

/* Panel Variants */
.push-queue-panel--ok {
  border: 1px solid rgba(34, 197, 94, 0.18);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ok) 8%, transparent);
}

.push-queue-panel--warning {
  border: 1px solid rgba(249, 115, 22, 0.18);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--warn) 10%, transparent);
}
.push-queue-panel--warning .push-queue-panel__title::before {
  background: #f97316;
  box-shadow: 0 0 10px #f97316;
}

.push-queue-panel--critical {
  border: 1px solid rgba(239, 68, 68, 0.24);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--danger) 12%, transparent);
}
.push-queue-panel--critical .push-queue-panel__title::before {
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
}

.push-queue-panel--compact .push-queue-panel__header {
  padding: 0.5rem 0.75rem;
}
.push-queue-panel--compact .push-queue-panel__body {
  padding: 0.75rem;
}
.push-queue-panel--compact .push-queue-stat__value {
  font-size: 1rem;
}
.push-queue-panel--compact .push-queue-stat__label {
  font-size: 0.65rem;
}

.push-queue-panel--expanded .push-queue-stats {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}
.push-queue-panel--expanded .push-queue-stat {
  padding: 0.75rem;
}
.push-queue-panel--expanded .push-queue-stat__value {
  font-size: 1.5rem;
}

/* Glow effect when processing */
.push-queue-panel--processing .push-queue-panel__title::before {
  background: #38bdf8;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 8px #38bdf8;
    opacity: 100%;
  }
  50% {
    box-shadow: 0 0 20px #38bdf8;
    opacity: 70%;
  }
}
/* Mission Control scoped final pass after legacy component families */
/* Final Mission Control pass. Imported last so scoped primitives win over legacy page-family CSS. */
.app-shell .btn.xw-btn,
.app-shell .xw-btn {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  height: var(--ctrl-h);
  min-height: var(--ctrl-h);
  padding: 0 var(--ctrl-px);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  color: var(--text);
  transform: none;
  white-space: nowrap;
}
.app-shell .btn.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .xw-btn:hover:not(:disabled, [aria-disabled=true]) {
  box-shadow: none;
  transform: none;
}
.app-shell .btn.xw-btn:focus-visible,
.app-shell .xw-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.app-shell .btn--sm.xw-btn,
.app-shell .xw-btn--sm {
  height: var(--ctrl-h-sm);
  min-height: var(--ctrl-h-sm);
  padding: 0 10px;
  font-size: var(--fs-12);
}
.app-shell .btn--icon.xw-btn,
.app-shell .xw-btn--icon {
  width: var(--ctrl-h);
  min-width: var(--ctrl-h);
  padding: 0;
}
.app-shell .btn--icon.btn--sm.xw-btn,
.app-shell .xw-btn--icon.xw-btn--sm {
  width: var(--ctrl-h-sm);
  min-width: var(--ctrl-h-sm);
}
.app-shell .btn--primary.xw-btn,
.app-shell .btn-primary.xw-btn,
.app-shell .xw-btn--primary {
  border-color: transparent;
  background: var(--brand);
  font-weight: 600;
  color: var(--text-on-brand);
}
.app-shell .btn--primary.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .btn-primary.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .xw-btn--primary:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--brand-strong);
}
.app-shell .btn--agent.xw-btn,
.app-shell .xw-btn--agent {
  border-color: transparent;
  background: var(--agent);
  font-weight: 600;
  color: var(--text-on-agent);
}
.app-shell .btn--agent.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .xw-btn--agent:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--agent-strong);
}
.app-shell .btn--secondary.xw-btn,
.app-shell .btn-secondary.xw-btn,
.app-shell .xw-btn--secondary {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}
.app-shell .btn--secondary.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .btn-secondary.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .xw-btn--secondary:hover:not(:disabled, [aria-disabled=true]) {
  border-color: var(--line-vivid);
  background: var(--surface-3);
}
.app-shell .btn--ghost.xw-btn,
.app-shell .btn-ghost.xw-btn,
.app-shell .xw-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}
.app-shell .btn--ghost.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .btn-ghost.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .xw-btn--ghost:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--muted-soft);
  color: var(--text);
}
.app-shell .btn--danger.xw-btn,
.app-shell .btn-danger.xw-btn,
.app-shell .xw-btn--danger {
  border-color: transparent;
  background: transparent;
  color: var(--danger);
}
.app-shell .btn--danger.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .btn-danger.xw-btn:hover:not(:disabled, [aria-disabled=true]),
.app-shell .xw-btn--danger:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--danger-soft);
  color: var(--danger);
}
.app-shell .xw-field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--lh-base);
  text-transform: none;
  color: var(--text-2);
}
.app-shell .xw-input,
.app-shell .xw-select,
.app-shell .xw-textarea {
  width: 100%;
  height: var(--ctrl-h);
  min-height: var(--ctrl-h);
  padding: 0 var(--ctrl-px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface-inset);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  letter-spacing: 0;
  line-height: normal;
  color: var(--text);
}
.app-shell .xw-textarea {
  height: auto;
  min-height: 80px;
  padding: 10px var(--ctrl-px);
  line-height: var(--lh-base);
}
.app-shell .xw-input:focus,
.app-shell .xw-select:focus,
.app-shell .xw-textarea:focus {
  border-color: var(--brand);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}
.app-shell .xw-select {
  padding-right: 32px;
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px);
  background-size: 4px 4px;
}
.app-shell .xw-check__box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.app-shell .xw-switch {
  display: inline-block;
  width: 30px;
  height: 18px;
  border-color: var(--line-strong);
  background: var(--surface-inset);
}
.app-shell .xw-switch::after {
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--text-3);
}
.app-shell .xw-switch.is-on {
  border-color: var(--brand);
  background: var(--brand);
}
.app-shell .xw-switch.is-on::after {
  background: var(--text-on-brand);
  transform: translateX(12px);
}
.app-shell .card,
.app-shell .xw-card,
.app-shell .section,
.app-shell .xw-section,
.app-shell .xw-kpi-card {
  border-color: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: none;
  color: var(--text);
}
.app-shell .card,
.app-shell .xw-card {
  gap: var(--s-3);
  padding: var(--card-pad);
}
.app-shell .section,
.app-shell .xw-section {
  gap: var(--s-4);
  padding: var(--card-pad);
}
.app-shell .card--inset,
.app-shell .xw-card--inset {
  background: var(--bg-2);
}
.app-shell .card--elevated,
.app-shell .xw-card--elevated {
  background: var(--surface-2);
}
.app-shell .card--agent,
.app-shell .xw-card--agent {
  border-color: var(--agent-line);
  background: linear-gradient(180deg, var(--agent-soft), transparent 70%), var(--surface-1);
}
.app-shell .badge,
.app-shell .xw-badge {
  height: 20px;
  padding: 0 7px;
  border-color: transparent;
  border-radius: var(--r-pill);
  background: var(--muted-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text-2);
}
.app-shell .badge--ok,
.app-shell .badge--success,
.app-shell .xw-badge--ok,
.app-shell .xw-badge--success {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}
.app-shell .badge--warn,
.app-shell .badge--warning,
.app-shell .xw-badge--warn,
.app-shell .xw-badge--warning {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}
.app-shell .badge--danger,
.app-shell .badge--critical,
.app-shell .xw-badge--danger,
.app-shell .xw-badge--critical {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}
.app-shell .badge--info,
.app-shell .xw-badge--info {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}
.app-shell .badge--brand,
.app-shell .xw-badge--brand {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}
.app-shell .badge--agent,
.app-shell .xw-badge--agent {
  border-color: var(--agent-line);
  background: var(--agent-soft);
  color: var(--agent);
}
.app-shell .xw-pill {
  gap: 6px;
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  border-color: transparent;
  background: var(--muted-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  color: var(--text-2);
}
.app-shell .xw-pill.is-active {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}
.app-shell .xw-chip {
  gap: 6px;
  height: 26px;
  min-height: 26px;
  padding: 0 4px 0 10px;
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--text-2);
}
.app-shell .xw-dot {
  width: 6px;
  height: 6px;
}
.app-shell .xw-tabs,
.app-shell .xw-dg-layout-toggle {
  gap: 2px;
  min-height: 0;
  padding: 3px;
  background: var(--surface-inset);
}
.app-shell .xw-tabs__tab,
.app-shell .xw-dg-layout-toggle__tab,
.app-shell .xw-dg-tb__tab {
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
}
.app-shell kbd,
.app-shell .xw-kbd {
  height: 18px;
  min-height: 18px;
  padding: 0 5px;
  border-color: var(--line-strong);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: 1;
  color: var(--text-2);
}
.app-shell .xw-avatar {
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
}
.app-shell .xw-meter {
  height: 6px;
  background: var(--surface-inset);
}
.app-shell .xw-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-shell .xw-kpi__label,
.app-shell .xw-compact-stat__label {
  font-weight: 500;
  letter-spacing: 0;
}
.app-shell .xw-kpi__value {
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
.app-shell .xw-compact-stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
.app-shell .trace {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--agent-line);
  border-radius: var(--r-sm);
  background: var(--agent-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0;
  color: var(--agent);
}
.app-shell .xw-fact,
.app-shell .xw-effective-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 0;
  font-size: var(--fs-13);
}
.app-shell .xw-fact--divider {
  border-bottom: 1px solid var(--line);
}
.app-shell .xw-fact__label,
.app-shell .xw-effective-row__label {
  color: var(--text-3);
}
.app-shell .xw-fact__value,
.app-shell .xw-effective-row__value {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text);
}
.app-shell .xw-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.app-shell .xw-progress__head {
  font-size: var(--fs-13);
  color: var(--text);
}
.app-shell .xw-progress__head--upper {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-shell .xw-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.app-shell .xw-setting-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-shell .xw-setting-row__label {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text);
}
.app-shell .xw-setting-row__description {
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-3);
}
.app-shell .xw-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-color: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.app-shell .xw-skeleton-table__head,
.app-shell .xw-skeleton-table__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 16px;
}
.app-shell .xw-skeleton-table__row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.app-shell .xw-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 48px 24px;
  border-color: var(--danger-line);
  border-radius: var(--r-lg);
  background: var(--danger-soft);
  text-align: center;
  border-style: dashed;
}
.app-shell .xw-error__icon {
  width: 48px;
  height: 48px;
  background: var(--surface-2);
}
.app-shell .xw-error__title,
.app-shell .xw-error__body,
.app-shell .xw-error__trace,
.app-shell .xw-error__actions {
  grid-column: auto;
}
.app-shell .xw-error__title {
  font-size: var(--fs-16);
}
.app-shell .xw-error__body {
  max-width: 50ch;
  font-size: var(--fs-13);
}
.app-shell .xw-error__actions {
  justify-content: center;
}
.app-shell .xw-empty,
.app-shell .xw-empty {
  padding: 48px 24px;
}
.app-shell .xw-empty__title,
.app-shell .xw-empty__title {
  font-size: var(--fs-16);
}
.app-shell .xw-empty__body,
.app-shell .xw-empty__message {
  max-width: 40ch;
  font-size: var(--fs-13);
}
.app-shell table.table,
.app-shell .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
  letter-spacing: 0;
  color: var(--text);
}
.app-shell .table th,
.app-shell .table td {
  height: var(--row-h);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.app-shell .table th {
  height: var(--row-h-sm);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-shell .table tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}
.app-shell .table tbody tr:hover {
  background: var(--muted-soft);
}
.app-shell .table tbody tr.is-selected,
.app-shell .table tbody tr.is-bulk-selected {
  background: var(--brand-soft);
}
.app-shell .table tbody td,
.app-shell .table tbody td .col > span:first-child:not(.mono, .dim),
.app-shell .table tbody td .product-cell .col > span:first-child {
  font-size: var(--fs-13) !important;
}
.app-shell .table tbody td.mono:not(.num),
.app-shell .table tbody td > .mono:not(.num, .dim),
.app-shell .table tbody td > span.mono:not(.num, .dim) {
  font-size: var(--fs-12) !important;
}
.app-shell .table tbody td.dim,
.app-shell .table tbody td.mono.dim,
.app-shell .table tbody td > .dim,
.app-shell .table tbody td > .mono.dim,
.app-shell .table tbody td > span.dim,
.app-shell .table tbody td > span.mono.dim,
.app-shell .table tbody td .col > span.mono.dim {
  font-size: var(--fs-11) !important;
}
.app-shell .table tbody td .badge,
.app-shell .table tbody td .xw-badge {
  font-size: 10px !important;
}
.app-shell .table td.num,
.app-shell .table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.app-shell .table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.app-shell .inventory-list-section--mc .inventory-list-section__table-wrap,
.app-shell .customer-list-section--mc .customer-list-section__table-wrap {
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
}
.app-shell [data-tip] {
  position: relative;
}
.app-shell [data-tip]::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 50;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  opacity: 0%;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  content: attr(data-tip);
  pointer-events: none;
}
.app-shell [data-tip]:hover::after,
.app-shell [data-tip]:focus-visible::after {
  opacity: 100%;
  transform: translate(-50%, 0);
}
@media (width <= 760px) {
  .app-shell .orders-analytics-page--mc .xw-dg-tb__search {
    width: min(200px, 100%);
    min-width: min(100%, 200px);
    height: 28px;
    min-height: 28px;
  }
  .app-shell .orders-analytics-page--mc .xw-dg-tb__search .xw-input {
    height: 28px;
    min-height: 28px;
  }
  .app-shell .orders-analytics-page--mc .xw-dg-tb__tabs {
    min-height: 0;
    padding: 1px;
  }
  .app-shell .orders-analytics-page--mc .xw-dg-tb__tab {
    height: 24px;
    min-height: 24px;
    padding: 0 9px;
  }
  .app-shell .orders-analytics-page--mc .xw-dg-tb__extra:empty {
    display: none;
  }
  .app-shell .orders-analytics-page--mc .xw-dg-tb__right .xw-btn--icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
}
@media (width <= 560px) {
  .app-shell .xw-setting-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .app-shell .xw-setting-row__control {
    width: 100%;
    min-width: 0;
  }
  .app-shell .xw-setting-row__label,
  .app-shell .xw-setting-row__description {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}