/* ==========================================================================
   BanHang Studio — Pro Admin Design System
   Shared visual language with Mini App (comfort dark + terracotta accent)
   ========================================================================== */

:root {
  /* System-first → webfont khi load xong (không FOUT block) */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", "Plus Jakarta Sans", "Inter", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "JetBrains Mono", Consolas, monospace;

  /* Comfort dark — warm charcoal (đồng bộ Mini) */
  --bg: #131312;
  --bg-deep: #0e0e0d;
  --bg-elevated: #1a1a18;
  --bg-subtle: #161614;
  --surface: #1a1a18;
  --surface-2: #222220;
  --surface-3: #2b2b28;
  --surface-hover: #2b2b28;
  --surface-active: #32322e;

  --border: rgba(255, 255, 255, 0.075);
  --border-dim: rgba(255, 255, 255, 0.045);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-subtle: rgba(255, 255, 255, 0.04);

  --text-primary: #f7f6f2;
  --text: #f7f6f2;
  --text-secondary: #a8a59c;
  --text-tertiary: #78766f;
  --text-muted: #78766f;

  /* Brand accent — terracotta (đồng bộ Mini) */
  --accent: #d97757;
  --accent-2: #e8a87c;
  --accent-hover: #c45f3d;
  --accent-active: #b4532f;
  --accent-soft: rgba(217, 119, 87, 0.14);
  --accent-muted: rgba(217, 119, 87, 0.08);
  --accent-gradient: linear-gradient(135deg, #e8a87c 0%, #d97757 55%, #c45f3d 100%);
  --on-fill: #ffffff;

  /* Màu mè hơn - AICanvas inspired vibrant accents */

  --success: #84a37d;
  --success-soft: rgba(132, 163, 125, 0.14);
  --warning: #d4a35c;
  --warning-soft: rgba(212, 163, 92, 0.14);
  --danger: #e07a7a;
  --danger-soft: rgba(224, 122, 122, 0.13);
  --info: #7aa2c4;
  --info-soft: rgba(122, 162, 196, 0.14);

  --sidebar-w: 260px;
  --header-h: 60px;
  --content-max: 1440px;
  --studio-rail-w: 248px;
  --studio-inspector-w: 400px;
  --tap: 44px;

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

  /* Radius scale */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Aliases — short names used in many transition: shorthand call sites */
  --dur: var(--dur-base);
  --dur-fast: var(--dur-micro);
  --ease-spring: var(--anim-spring);

  --focus: 0 0 0 3px var(--accent-soft);

  /* Apple-style animation variables */
  --anim-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 110ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --dur-enter: 320ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

[data-theme="light"] {
  /* Warm paper light — cùng họ với comfort dark */
  --bg: #f6f5f2;
  --bg-deep: #eceae4;
  --bg-elevated: #ffffff;
  --bg-subtle: #f1efe9;
  --surface: #ffffff;
  --surface-2: #f3f1eb;
  --surface-3: #ebe8e1;
  --surface-hover: #ebe8e1;
  --surface-active: #e3dfd6;

  --border: rgba(28, 27, 25, 0.1);
  --border-dim: rgba(28, 27, 25, 0.06);
  --border-strong: rgba(28, 27, 25, 0.16);
  --border-subtle: rgba(28, 27, 25, 0.05);

  --text-primary: #1c1b19;
  --text: #1c1b19;
  --text-secondary: #5c5952;
  --text-tertiary: #7a766c;
  --text-muted: #8a867c;

  --accent: #c45f3d;
  --accent-2: #d97757;
  --accent-hover: #b04f30;
  --accent-active: #9a4328;
  --accent-soft: rgba(196, 95, 61, 0.12);
  --accent-muted: rgba(196, 95, 61, 0.07);
  --accent-gradient: linear-gradient(135deg, #e08a68 0%, #c45f3d 100%);
  --on-fill: #ffffff;

  --success: #5f8a58;
  --success-soft: rgba(95, 138, 88, 0.12);
  --warning: #c4892e;
  --warning-soft: rgba(196, 137, 46, 0.12);
  --danger: #d06666;
  --danger-soft: rgba(208, 102, 102, 0.12);
  --info: #5b86a8;
  --info-soft: rgba(91, 134, 168, 0.12);

  --shadow-sm: 0 1px 3px rgba(53, 48, 40, 0.08);
  --shadow-md: 0 10px 28px rgba(53, 48, 40, 0.1);
  --shadow-lg: 0 16px 40px rgba(53, 48, 40, 0.14);
}

/* ========================== BASE ========================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg);
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); color: var(--text-primary); }

.hidden { display: none !important; }

svg { flex-shrink: 0; }

/* Progress bar */
.page-progress {
  position: fixed;
  top: 0; left: 0; height: 2px;
  background: var(--accent-gradient);
  width: 0;
  z-index: 200;
  transition: width 220ms var(--ease);
  pointer-events: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.page-progress.active { width: 70%; }
.page-progress.done { width: 100%; opacity: 0; transition: width 160ms var(--ease), opacity 220ms ease; }

/* ========================== LOGIN ========================== */

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

.login-container {
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: 1;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  background: var(--accent-gradient);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: none;
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.35), transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.brand-mark.small {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  box-shadow: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
}

.login-header {
  text-align: center;
  margin-bottom: 22px;
}
.login-header h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.login-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.field input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--anim-spring),
              transform var(--dur-micro) var(--anim-spring);
  white-space: nowrap;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.btn:active {
  transform: scale(0.97) translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--accent) 50%, transparent);
  border-color: transparent;
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 16px -3px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-2px);
}
.btn-primary:active {
  filter: brightness(0.96);
  transform: scale(0.97) translateY(0);
}

.btn-success {
  background: var(--success);
  color: #fff;
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--success) 40%, transparent);
}
.btn-success:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -3px color-mix(in srgb, var(--success) 45%, transparent);
}
.btn-success:active {
  transform: scale(0.97) translateY(0);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn-danger:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -3px color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn-danger:active {
  transform: scale(0.97) translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.btn-ghost:active {
  transform: scale(0.97) translateY(0);
  background: var(--surface-active);
}

.btn-xs { padding: 4px 8px; font-size: 11px; }
.btn-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.login-error {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
  border-radius: var(--radius-xs);
  color: var(--danger);
  font-size: 12.5px;
}

.login-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ========================== APP LAYOUT ========================== */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
  z-index: 45;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.sidebar-overlay.visible { display: block; opacity: 1; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3) var(--space-4);
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
}

.brand-subtle {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.sidebar-header {
  padding: 2px 10px 12px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
}

.nav-group {
  margin-bottom: 20px;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px 8px;
}

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--anim-spring),
              transform var(--dur-micro) var(--anim-spring);
  position: relative;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  transform: translateX(2px);
}

.nav-item.active {
  color: var(--text-primary);
  background: var(--accent-soft);
  font-weight: 600;
  box-shadow: none;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.nav-item.active::before { display: none; }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active:hover { background: var(--accent-muted); color: var(--text-primary); transform: translateX(2px); }
.nav-item.active .nav-badge {
  background: var(--accent);
  color: #fff;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }
.nav-icon svg { width: 16px; height: 16px; }

.nav-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--warning);
  color: #111113;
  display: grid;
  place-items: center;
  margin-left: auto;
}

.nav-compact {
  font-size: 12px;
  padding: 5px 9px;
  color: var(--text-tertiary);
}
.nav-compact:hover { color: var(--text-primary); }

.sidebar-footer {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Workspace */
.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

.workspace-header {
  height: var(--header-h);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
}

.header-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-menu { display: none; }

.header-titles { min-width: 0; }

.header-tool-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.6;
}

.page-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.2;
}

.page-crumb {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 3px 0 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

/* Autosave — calm and subtle */
.autosave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.autosave-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--success);
}
.autosave-idle .autosave-dot { background: var(--success); }
.autosave-pending .autosave-dot { background: var(--warning); animation: livePulse 1.2s ease infinite; }
.autosave-saving .autosave-dot { background: var(--accent); animation: livePulse 0.8s ease infinite; }
.autosave-saved .autosave-dot { background: var(--success); }
.autosave-error .autosave-dot { background: var(--danger); }
.autosave-error { border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }

#pending-bell.has-pending { border-color: var(--warning); color: var(--warning); }

.header-search {
  position: relative;
  width: 248px;
}
.header-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.header-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 52px 7px 32px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--bg-elevated);
}
.search-kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  pointer-events: none;
}

.refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--success-soft);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--success);
}
.refresh-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: livePulse 2s ease infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Icon buttons */
.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
}
.icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-sm);
}

.pending-count {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 9px;
  font-weight: 800;
  min-width: 13px;
  height: 13px;
  background: var(--warning);
  color: #111113;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 2px;
}

.clock {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}

.version-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
}

.workspace-main {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-7);
  min-height: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.page-toolbar-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.45;
}
.page-toolbar-actions { flex-shrink: 0; }

.workspace--flow .workspace-main {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workspace--flow .page {
  max-width: none;
  margin: 0;
}
.workspace--flow .page-flow {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Flow page: tắt ambient decoration — tập trung vào editor */
.workspace--flow .workspace-header {
  background: var(--bg-elevated);
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--border);
}

.page {
  animation: pageEnter var(--dur-slow) var(--anim-spring) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========================== COMPONENTS ========================== */

/* Stats */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--anim-spring),
              transform var(--dur-micro) var(--anim-spring);
}
.stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.stat-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
}
.stat-icon svg { width: 15px; height: 15px; }

.stat-card .label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.stat-card .value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* Dashboard hero */

.hero-kpi {
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.hero-kpi:last-child { border-right: none; padding-right: 0; }
.hero-kpi:first-child { padding-left: 0; }
.hero-kpi span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.hero-kpi strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Ops chips */

/* Quick actions — layout chi tiết ở block Dashboard (dưới) */

/* Panels */
.panel, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--anim-spring),
              transform var(--dur-micro) var(--anim-spring);
}
.panel:hover, .card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}
.panel-head, .card-head {
  padding: 13px 18px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tables — Stripe level */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.table-search {
  position: relative;
  flex: 1;
  max-width: 240px;
}
.table-search svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary);
}
.table-search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 9px 6px 28px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.table-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
}
th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: var(--surface-2);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
tbody tr {
  transition: background var(--dur-fast) var(--ease);
}
tbody tr:hover td {
  background: var(--surface-hover);
}
tbody tr:last-child td { border-bottom: none; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.015em;
  height: 17px;
}
.badge-pending { background: var(--warning-soft); color: var(--warning); }
.badge-done { background: var(--success-soft); color: var(--success); }
.badge-cancelled { background: var(--danger-soft); color: var(--danger); }
.badge-crypto { background: var(--accent-soft); color: var(--accent); }
.badge-bank, .badge-payos { background: var(--surface-2); color: var(--text-secondary); }

/* Forms & Buttons */
input, textarea, select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  width: 100%;
  font-family: inherit;
  transition: border-color var(--dur), box-shadow var(--dur);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}
textarea { min-height: 78px; line-height: 1.5; }

/* Modals & Drawers */
.modal-backdrop, .drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--dur-enter) var(--anim-spring) both;
}
.modal.modal--lg {
  max-width: min(720px, calc(100vw - 24px));
}
.modal.modal--md {
  max-width: min(560px, calc(100vw - 24px));
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  60% { transform: scale(1.01) translateY(-2px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
}
.modal-header-text { min-width: 0; flex: 1; }
.modal-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}
.modal-subtitle {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.modal-close-btn { flex: none; margin-top: 0; }
.modal-body { padding: 16px 18px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal--lg .modal-body { padding: 18px 20px 22px; }
.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}
.modal-footer--split {
  justify-content: space-between;
  align-items: center;
}
.modal-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.btn-danger-text {
  color: var(--danger) !important;
}
.btn-danger-text:hover {
  background: var(--danger-soft) !important;
}

/* ── Product form (chi tiết SP) — phẳng, không khung lồng ── */
.pf { display: flex; flex-direction: column; gap: 4px; }

/* Meta: hàng chip phẳng, không box bọc ngoài */
.pf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 2px 0 12px;
  margin: 0 0 4px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.pf-meta-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.pf-meta-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.pf-meta .badge {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  font-size: 11.5px;
  font-weight: 600;
}
.pf-meta .badge-done { color: var(--success); }
.pf-meta .badge-cancelled { color: var(--text-muted); }
.pf-meta .badge-crypto { color: var(--accent); }
.pf-meta .badge-bank { color: var(--text-muted); }

.pf-form { display: flex; flex-direction: column; gap: 0; }

/* Section: không card — chỉ tiêu đề + khoảng cách, vạch mảnh giữa section */
.pf-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px 0;
  box-shadow: none;
}
.pf-section + .pf-section {
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.pf-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}
.pf-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pf-section-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  opacity: 0.9;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.pf-col-full { grid-column: 1 / -1; }
.pf-grid .fd-field { margin: 0; gap: 5px; }
.pf-grid .fd-label,
.pf .fd-label {
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--text-secondary);
}

/* Input trong form SP: nền nhẹ, viền mờ — không “hộp” nổi */
.pf .fd-input,
.pf-grid .fd-input {
  min-height: 38px;
  height: 38px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 10px;
  box-shadow: none;
}
.pf .fd-input:hover,
.pf-grid .fd-input:hover {
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}
.pf .fd-input:focus,
.pf-grid .fd-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.pf .jy-textarea-wrap {
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border-radius: 10px;
  box-shadow: none;
}
.pf .jy-textarea-wrap:hover {
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
}
.pf .jy-textarea-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.pf-desc {
  min-height: 96px !important;
  resize: vertical;
}

/* Khối API: không dashed box — chỉ dải trái accent + spacing */
.pf-supplier {
  margin-top: 12px;
  padding: 10px 0 2px 12px;
  border-radius: 0;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-supplier.hidden { display: none !important; }
.pf-supplier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pf-supplier-head strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.pf-supplier-head p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}
.pf-supplier-id {
  flex: none;
  max-width: 46%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-supplier-id.is-set {
  color: var(--accent);
  border: 0;
  background: transparent;
}
.pf-supplier .fd-input {
  min-height: 38px;
  height: 38px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 10px;
  box-shadow: none;
}

/* Preview ảnh SP — full-res, không crop nát */
.pf-image-preview {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pf-image-preview[hidden] { display: none !important; }
.pf-image-preview img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  object-position: center;
  background: #0c0c0b;
  image-rendering: auto;
}
.pf-image-preview-hint {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}
.pf-image-preview[data-state="err"] img { opacity: 0.25; }
.pf-image-preview[data-state="err"] .pf-image-preview-hint {
  color: var(--danger);
}
.pf-image-preview[data-state="err"] .pf-image-preview-hint::before {
  content: "Không tải được ảnh — kiểm tra link. ";
}
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-supplier-head { flex-direction: column; }
  .pf-supplier-id { max-width: 100%; }
  .pf-image-preview img { max-height: 200px; }
  .modal-footer--split { flex-wrap: wrap; gap: 10px; }
  .modal-footer-actions { width: 100%; justify-content: stretch; }
  .modal-footer-actions .btn { flex: 1; }
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 130;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.5);
  animation: drawerIn var(--dur-enter) var(--anim-spring) both;
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateX(32px); }
  60% { transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
}
.drawer-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-header h3 { font-family: var(--font-display); font-size: 15px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-body { flex: 1; overflow: auto; padding: 16px 18px; }
.drawer-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* Toasts */
.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toast-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  min-width: 260px;
  animation: toastIn var(--dur-slow) var(--anim-spring) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  60% { transform: translateX(-3px) scale(1.01); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Command palette */
.cmd-palette { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.cmd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.cmd-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cmd-input-wrap {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  gap: 9px;
}
.cmd-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14.5px;
  padding: 0;
  color: var(--text-primary);
}
.cmd-input-wrap kbd {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* Empty + Skeleton */
.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.empty-state h3 {
  color: var(--text-primary);
  margin: 8px 0 4px;
  font-weight: 600;
  font-size: 14px;
}

.skeleton-block {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    color-mix(in srgb, var(--surface-hover) 80%, var(--surface-2)) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonShimmer 1.4s infinite ease-in-out;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================== STUDIO / FLOW (3-column pro) ========================== */

#page-flow { padding: 0 !important; margin: 0 !important; }
.page-flow { overflow: hidden; }

.studio-layout {
  display: grid;
  grid-template-columns: var(--studio-rail-w) 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: var(--bg);
}

/* Compact icon+num rail for <1536px (desktop preview open + no squeeze) */
@media (max-width: 1535px) {
  .studio-layout { grid-template-columns: 62px 1fr; }
  .studio-rail { padding: 8px 4px; }
  .studio-rail-head { padding: 0 4px 6px; }
  .studio-rail-brand > div { display: none; }
  .studio-rail-brand { margin-bottom: 4px; }
  .studio-rail-icon { width: 26px; height: 26px; }
  .studio-rail-title, .studio-rail-sub, .studio-rail-trigger { display: none; }
  .studio-rail-all { padding: 5px 4px; font-size: 11px; }
  .studio-rail-all span[aria-hidden] { display: inline; }
  .studio-rail-all-label { display: none; }
  .studio-rail-step { padding: 6px 4px; gap: 4px; justify-content: center; }
  .studio-rail-step .studio-rail-copy { display: none; }
  .studio-rail-num { width: 20px; height: 20px; font-size: 10px; margin-top: 0; }
  .studio-rail-match { display: none; }
  .studio-rail-foot .jy-tabs { display: none; } /* lang in compact handled by top */
  /* Docked preview + compact rail */
  .studio-layout.inspector-docked { grid-template-columns: 62px 1fr; }
  .studio-layout.inspector-docked.inspector-open { grid-template-columns: 62px minmax(0,1fr) var(--studio-inspector-w); }

  /* Giảm chiều cao rail + step area trên mobile */
  .studio-rail { padding: 6px 3px; }
  .studio-rail-head { padding-bottom: 4px; }
  .studio-rail-steps { gap: 1px; }
  .studio-rail-step { padding: 5px 3px; }
  /* Trên mobile ưu tiên editor: rail chỉ giữ vai trò icon tham chiếu */
  .studio-rail-steps { max-height: 140px; overflow-y: auto; }
}

.studio-rail {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.studio-rail-head { padding: 0 10px 10px; }
.studio-rail-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.studio-rail-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.studio-rail-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.studio-rail-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.studio-rail-all {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur);
}
.studio-rail-all:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-hover);
}
.studio-rail-all.active {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-active);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.studio-rail-steps {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.studio-rail-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  font-size: 12.5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur);
}
.studio-rail-step:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.studio-rail-step.active {
  background: var(--surface-active);
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.studio-rail-num {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--surface-2);
  border-radius: 6px;
  margin-top: 1px;
}
.studio-rail-step.active .studio-rail-num { background: var(--accent); color: white; }
.studio-rail-copy { min-width: 0; flex: 1; }
.studio-rail-label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-rail-trigger {
  display: block;
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-rail-step.active .studio-rail-trigger { color: color-mix(in srgb, var(--accent) 70%, var(--text-tertiary)); }

.studio-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-subtle);
}
.studio-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.studio-toolbar-context {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 120px;
}
.studio-toolbar-mode {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.studio-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: none;
}
.studio-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.studio-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 34px 8px 32px;
  border-radius: 999px;
  font-size: 12.5px;
}
.studio-layout.is-searching .studio-search {
  padding-right: 38px;
}
.studio-search:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

.studio-toolbar-secondary {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: .92;
}
.studio-toolbar-secondary .btn-sm {
  padding: 4px 7px;
  font-size: 12px;
}
.studio-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.studio-search-clear:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Compact lang switch in toolbar (gom Tổng quan + lang, mobile density) */
.studio-lang-compact {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
}
.studio-lang-btn {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}
.studio-lang-btn.active {
  background: var(--surface-active);
  color: var(--text-primary);
}
.studio-lang-btn + .studio-lang-btn {
  border-left: 1px solid var(--border);
}
@media (min-width: 1536px) {
  /* On wide desktop, rail foot shows full lang tabs; hide duplicate compact */
  .studio-lang-compact { display: none; }
}
@media (max-width: 760px) {
  .studio-lang-compact { margin-left: 2px; }
  .studio-lang-btn { padding: 3px 7px; font-size: 10.5px; }
  /* Toolbar chỉ 1 hàng icon + search compact */
  .studio-toolbar { padding: 6px 8px; gap: 4px; }
  .studio-toolbar-context { display: none; }
  .studio-autosave, .studio-refresh { display: none; }
  .studio-toolbar-search { max-width: 100%; }
  .studio-search { padding: 6px 28px 6px 26px; font-size: 12px; }
  .studio-emoji-manage .studio-toolbar-btn-label,
  .studio-preview-toggle-label { display: none; }
}
.studio-layout.is-searching .studio-search {
  border-color: var(--border-strong);
  background: var(--surface);
}
.studio-rail-step.is-dim { opacity: 0.38; }
.studio-rail-step.has-match { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.studio-rail-match {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}
.studio-autosave {
  margin-left: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.studio-autosave::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.studio-autosave[data-state="pending"] { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); }
.studio-autosave[data-state="pending"]::before { background: var(--warning); }
.studio-autosave[data-state="saving"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.studio-autosave[data-state="saving"]::before { background: var(--accent); animation: autosave-pulse 1.1s var(--ease) infinite; }
.studio-autosave[data-state="saved"],
.studio-autosave[data-state="idle"] { color: var(--success); border-color: color-mix(in srgb, var(--success) 28%, var(--border)); }
.studio-autosave[data-state="saved"]::before,
.studio-autosave[data-state="idle"]::before { background: var(--success); }
.studio-autosave[data-state="error"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.studio-autosave[data-state="error"]::before { background: var(--danger); }
@keyframes autosave-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.studio-refresh { flex-shrink: 0; }

/* Emoji dock — layout chi tiết trong studio-pro.css */

.studio-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Inspector — drawer mặc định, mở khi bấm Xem trước */
.studio-inspector {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--studio-inspector-w), 96vw);
  z-index: 60;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  box-shadow: var(--shadow-lg);
  will-change: auto;
}
.studio-inspector.open {
  transform: translateX(0);
  will-change: transform;
}
.studio-inspector-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}
.studio-inspector-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.inspector-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inspector-drawer-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.studio-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.studio-preview-toggle.is-active {
  background: var(--surface-active);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.studio-preview-toggle-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: #1a1200;
  background: var(--warning);
  border-radius: 999px;
}
.inspector-tabs {
  display: flex;
  gap: 2px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.inspector-tabs .fd-tabs-list {
  display: flex;
  gap: 2px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.inspector-tabs .fd-tabs-list::-webkit-scrollbar { display: none; }
.inspector-tab {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 40px;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.inspector-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.inspector-tab.active {
  background: var(--surface-active);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.inspector-body:has(.inspector-panel--emoji) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.inspector-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.inspector-panel--emoji {
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 0;
}
.inspector-emoji-dock {
  flex-shrink: 0;
  padding: var(--space-3);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  z-index: 4;
}
.inspector-emoji-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.inspector-emoji-scroll--full {
  flex: 1;
  min-height: 0;
}
.inspector-panel--emoji .inspector-hint {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-3) 0;
  margin: 0;
}
.inspector-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}
.inspector-preview-note {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}
.inspector-emoji-paste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.inspector-emoji-target { font-size: 12px; }
.inspector-emoji-stats {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
}
.inspector-wallet-add {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inspector-wallet-add input { max-width: 140px; }

.studio-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

/* Editor canvas — focused step editing */
.editor-canvas {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.editor-tabs {
  display: flex;
  gap: 4px;
  padding: 8px var(--space-5);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur);
}
.editor-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }
.editor-tab.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}
.editor-tab-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-tertiary);
}
.editor-tab.active .editor-tab-count {
  background: var(--accent);
  color: white;
}

.editor-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  min-height: 0;
}
.editor-scroll--all { padding-top: var(--space-3); }

.editor-msg-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 820px;
}
.editor-msg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.editor-msg-card:hover { border-color: var(--border-strong); }
.content-field-active.editor-msg-card,
.editor-msg-card.content-field-active {
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.editor-textarea {
  min-height: 88px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.editor-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  max-width: 920px;
}

.editor-btn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--dur);
}
.editor-btn-card:hover { border-color: var(--border-strong); }
.editor-btn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.editor-btn-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.editor-btn-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.editor-btn-field span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Content fields — shared */

.content-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: var(--radius-xs);
  resize: vertical;
}
.content-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

/* Misc utilities */

.accent-text { color: var(--accent); font-weight: 600; }
.td-primary { font-weight: 500; color: var(--text-primary); }
.td-muted { color: var(--text-tertiary); font-size: 12px; }
.td-mono { font-family: var(--font-mono); font-size: 12px; }
.row-hidden, .product-card-hidden { display: none !important; }
.row-pending td { background: var(--warning-soft); }
.card-muted { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

/* Page transitions */
.page-enter { animation: pageEnter 220ms var(--ease) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  60% { transform: translateY(-2px) scale(1.01); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stagger-in > * {
  animation: pageEnter var(--dur-slow) var(--anim-spring) both;
  animation-delay: var(--stagger, 0ms);
}

.stat-card { position: relative; overflow: hidden; }
.stat-card.featured {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-delta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }
.stat-spark { display: block; margin-top: 8px; width: 100%; height: 36px; }

.chart-panel .panel-body { padding: var(--space-4); }
.chart-wrap { position: relative; height: 220px; }
.chart-canvas { width: 100%; height: 100%; display: block; }
.chart-legend { display: flex; gap: var(--space-3); font-size: 11px; color: var(--text-tertiary); }
.leg-revenue::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  margin-right: 5px;
}
.chart-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 11px;
  box-shadow: var(--shadow-md);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.ct-rev { font-weight: 600; color: var(--accent); }

/* Quick access — hàng thẻ ngang, đều nhau */



/* Queue panel */
.alert-panel {
  overflow: hidden;
}
.alert-panel .panel-head-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.alert-panel .panel-head-meta b {
  color: var(--text-primary);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.alert-list {
  padding: 8px;
  flex: 1;
  overflow-y: auto;
  max-height: min(420px, 52vh);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alert-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid transparent;
  background: var(--bg-elevated);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--dur), border-color var(--dur);
}
.alert-item:hover {
  background: color-mix(in srgb, var(--surface) 80%, var(--accent) 20%);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}
.alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.alert-icon.order { background: var(--warning-soft); color: var(--warning); }
.alert-icon.topup { background: var(--info-soft); color: var(--info); }
.alert-icon.crypto { background: var(--accent-soft); color: var(--accent); }
.alert-body { min-width: 0; }
.alert-body strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 750;
  color: var(--text-primary);
}
.alert-sep { color: var(--text-muted); font-weight: 500; opacity: 0.7; }
.alert-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  vertical-align: 1px;
}
.alert-action { flex: none; }
.alert-action .badge {
  font-size: 10px;
  white-space: nowrap;
}
.alert-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.alert-empty svg { margin: 0 auto 8px; opacity: 0.7; color: var(--success); }
.alert-foot {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}
.alert-foot .btn { flex: 1; }
.alert-empty { padding: var(--space-6); text-align: center; color: var(--text-tertiary); font-size: 13px; }
.panel-head-meta { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.panel-body { padding: var(--space-4); }

/* Filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filter-bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-bar-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
/* Products page — ít viền lồng, surface phẳng */
.products-page { display: flex; flex-direction: column; gap: var(--space-3); }
.products-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.products-page .panel {
  border-radius: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.products-page .table-toolbar {
  padding: 4px 2px 12px;
  background: transparent;
  border-bottom: 0;
}
.products-page .table-search input {
  background: transparent;
  border-color: color-mix(in srgb, var(--border) 55%, transparent);
  min-width: 220px;
}
.products-page .table-search input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

/* Mode toggle: Quản lý | Sắp xếp */
.products-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.products-mode {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  gap: 2px;
}
.products-mode-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.products-mode-btn:hover { color: var(--text-primary); }
.products-mode-btn.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
}

/* ── Sort list (chuẩn admin) ── */
.psort-panel { overflow: hidden; }
.psort-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}
.psort-toolbar-copy { display: grid; gap: 2px; min-width: 0; }
.psort-toolbar-copy strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.psort-toolbar-copy span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.psort-count {
  flex: none;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.psort-head {
  display: none;
  grid-template-columns: 40px 72px minmax(0, 1.4fr) minmax(140px, 0.9fr) 100px 132px;
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
@media (min-width: 900px) {
  .psort-head { display: grid; }
}
.psort-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.psort-row {
  display: grid;
  grid-template-columns: 40px 72px minmax(0, 1fr);
  grid-template-areas:
    "handle pos main"
    "handle pos stats"
    "handle pos status"
    "handle pos actions";
  gap: 6px 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  position: relative;
  transition: background var(--dur), box-shadow var(--dur);
}
@media (min-width: 900px) {
  .psort-row {
    grid-template-columns: 40px 72px minmax(0, 1.4fr) minmax(140px, 0.9fr) 100px 132px;
    grid-template-areas: "handle pos main stats status actions";
    padding: 10px 16px;
  }
}
.psort-row:hover { background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.psort-row.is-inactive { opacity: 0.72; }
.psort-row.is-dragging {
  opacity: 0.4;
  background: var(--bg-elevated);
}
.psort-row.is-over-before::before,
.psort-row.is-over-after::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  z-index: 2;
  pointer-events: none;
}
.psort-row.is-over-before::before { top: 0; }
.psort-row.is-over-after::after { bottom: 0; }

.psort-handle {
  grid-area: handle;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.psort-handle:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-soft);
}
.psort-handle:active { cursor: grabbing; }

.psort-pos {
  grid-area: pos;
  display: flex;
  align-items: center;
  gap: 4px;
}
.psort-pos-input {
  width: 48px;
  height: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 0 4px;
}
.psort-pos-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}
.psort-pos-of {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.psort-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.psort-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.psort-copy { min-width: 0; }
.psort-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psort-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.psort-id { font-family: var(--font-mono); opacity: 0.85; }
.psort-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.psort-stats {
  grid-area: stats;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.psort-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.psort-stock.is-low { color: var(--warning); font-weight: 650; }
.psort-sold { color: var(--text-muted); }

.psort-status { grid-area: status; }
.psort-actions {
  grid-area: actions;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.psort-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.psort-icon-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.psort-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.psort-empty { padding: var(--space-8); }

.product-grid {
  display: grid;
  /* Rộng hơn để 2 cột metrics + tên dài không bị cắt */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 14px;
  padding: 4px 0 8px;
  align-items: stretch;
}

/* Thẻ SP: chỉ 1 viền ngoài — bên trong phẳng, không khung lồng */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: visible; /* menu ⋯ không bị cắt; con tự min-width:0 */
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: none;
  transition: border-color var(--dur), box-shadow var(--dur), opacity var(--dur), background var(--dur);
}
.product-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}
.product-card.is-inactive { opacity: 0.68; }
.product-card.is-inactive .pc-name { color: var(--text-tertiary); }

.pc-accent {
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--accent), transparent 85%);
  opacity: 0.75;
  pointer-events: none;
}

.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
  min-width: 0;
}
.pc-identity {
  display: flex;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.pc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 750;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 0 !important;
  box-shadow: none !important;
}
.pc-identity-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.pc-subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
}
.pc-id { font-family: var(--font-mono); opacity: 0.8; flex-shrink: 0; }
.pc-sep { opacity: 0.35; flex-shrink: 0; }
.pc-cat {
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pc-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  max-width: 42%;
}
/* Badge trạng thái trên card: ghost, không pill nặng */
.product-card .pc-header-actions .badge {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.product-card .pc-header-actions .badge-done { color: var(--success); }
.product-card .pc-header-actions .badge-cancelled { color: var(--text-muted); }
.product-card .pc-subline .badge {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
.product-card .pc-subline .badge-crypto { color: var(--accent); }

/*
 * Metrics 2×2 — 4 cột cũ quá hẹp: giá/vốn bị cắt thành "5000(" + "đ" xuống dòng.
 * 2 cột rộng hơn → số tiền & đệm đủ chỗ.
 */
.pc-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 10px 0 6px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  overflow: visible;
}
.pc-metric {
  min-width: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-metric:last-child { padding-right: 0; }
/* Bỏ vạch dọc giữa 4 cột (layout 2×2 không cần) */
.pc-metric + .pc-metric { padding-left: 0; }
.pc-metric + .pc-metric::before { display: none; }
.pc-metric-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
  white-space: nowrap;
}
.pc-metric-input {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.pc-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  flex: 0 0 auto;
  line-height: 1.2;
}
/* USD đối chiếu dưới giá VNĐ (khách EN) */
.price-usd-hint {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #d97757);
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-usd-hint.fd-usd-hint,
.fd-description.price-usd-hint {
  margin-top: 6px;
  white-space: normal;
  color: color-mix(in srgb, var(--accent, #d97757) 88%, var(--text-muted));
}
.pc-metric .price-usd-hint {
  max-width: 100%;
}
.pc-profit-val {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pc-stock-bar {
  height: 2px;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
  border: 0;
  max-width: 100%;
}
.pc-stock-bar span {
  display: block;
  height: 100%;
  background: var(--success);
  border-radius: 999px;
  opacity: 0.85;
}

/* Meta: badge | lượt bán, emoji full-width dòng dưới — ID dài không bị cắt */
.pc-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  min-width: 0;
}
.pc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pc-field:nth-child(3) {
  grid-column: 1 / -1; /* Emoji ID full width */
}
.pc-field span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0;
}
/* API match: tối đa 2 dòng, title đầy đủ khi hover */
.pc-api {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  opacity: 0.9;
  min-width: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pc-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  min-width: 0;
}
.product-card .pc-footer .btn {
  box-shadow: none;
  flex-shrink: 0;
}
.product-card .pc-footer .btn-ghost,
.product-card .pc-footer .btn-success {
  border-color: transparent;
  background: transparent;
}
.product-card .pc-footer .btn-ghost:hover,
.product-card .pc-footer .btn-success:hover {
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border-color: transparent;
}
.product-card .pc-footer .action-menu {
  margin-left: auto;
  flex-shrink: 0;
}
.product-card .pc-footer .action-menu-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/*
 * Input trên card — specificity input.pc-input để thắng rule global `input {}`
 * min-width:0 bắt buộc: input[type=number] mặc định quá rộng → cắt chữ.
 */
input.pc-input,
textarea.pc-input,
.product-card input.pc-input,
.product-card textarea.pc-input {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 3px 0 !important;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: none !important;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
input.pc-input:hover,
textarea.pc-input:hover,
.product-card input.pc-input:hover,
.product-card textarea.pc-input:hover {
  background: transparent !important;
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
}
input.pc-input:focus,
textarea.pc-input:focus,
.product-card input.pc-input:focus,
.product-card textarea.pc-input:focus {
  outline: none !important;
  background: transparent !important;
  border-bottom-color: var(--accent) !important;
  box-shadow: none !important;
}
input.pc-input.saving,
.product-inline-input.saving { opacity: 0.55; }
input.pc-input.saved,
.product-inline-input.saved {
  border-bottom-color: var(--success) !important;
  background: transparent !important;
  color: var(--success);
}
input.pc-name,
textarea.pc-name,
.product-card input.pc-name,
.product-card textarea.pc-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  padding: 2px 0 !important;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  height: auto;
  min-height: 2.7em;
  max-height: 4.2em;
  resize: none;
  field-sizing: content;
  overflow-y: auto;
}
input.pc-price,
input.pc-cost,
input.pc-num,
.product-card input.pc-price,
.product-card input.pc-cost,
.product-card input.pc-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  padding: 1px 0 !important;
  flex: 1 1 auto;
  min-width: 0 !important;
  /* Ẩn spinner — chiếm chỗ làm cắt số */
  -moz-appearance: textfield;
  appearance: textfield;
}
input.pc-price::-webkit-outer-spin-button,
input.pc-price::-webkit-inner-spin-button,
input.pc-cost::-webkit-outer-spin-button,
input.pc-cost::-webkit-inner-spin-button,
input.pc-num::-webkit-outer-spin-button,
input.pc-num::-webkit-inner-spin-button,
.product-card input.pc-price::-webkit-outer-spin-button,
.product-card input.pc-price::-webkit-inner-spin-button,
.product-card input.pc-cost::-webkit-outer-spin-button,
.product-card input.pc-cost::-webkit-inner-spin-button,
.product-card input.pc-num::-webkit-outer-spin-button,
.product-card input.pc-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  height: 0;
  width: 0;
}
input.pc-mono,
.product-card input.pc-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--text-secondary);
  font-weight: 500;
  overflow-x: auto;
  white-space: nowrap;
  /* Cuộn ngang thay vì cắt ID emoji dài */
  text-overflow: clip;
}
/* Kho: số thuần, không badge pill */
.product-card .badge-stock,
.badge-stock {
  display: inline-block;
  max-width: 100%;
  background: transparent !important;
  color: var(--text-primary);
  border: 0 !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0 !important;
  height: auto !important;
  letter-spacing: -0.02em;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card .badge-stock.badge-pending,
.badge-stock.badge-pending {
  color: var(--warning);
  background: transparent !important;
}

/* Màn hẹp / 1 cột: metrics vẫn 2×2, header xếp gọn */
@media (max-width: 420px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  .pc-header-actions {
    max-width: none;
    flex-direction: row;
    align-items: center;
  }
}

.product-grid-empty { padding: var(--space-8); grid-column: 1 / -1; }
.product-cell, .user-avatar { display: inline-flex; align-items: center; gap: var(--space-2); }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Toggles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

/* Forms */
.hint-box {
  padding: var(--space-3) var(--space-4);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 20%, var(--border));
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-grid .full { grid-column: 1 / -1; }

.supplier-tabs {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .supplier-tabs {
    width: 100%;
  }

  .supplier-tabs .jy-tab {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}
.content-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* Pay methods */

/* Crypto multi-wallet (admin payments) */
.crypto-wallets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.crypto-wallet-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.crypto-wallet-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.crypto-wallet-primary,
.crypto-wallet-enabled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.crypto-wallet-primary input,
.crypto-wallet-enabled input {
  accent-color: var(--accent);
}
.crypto-wallet-remove {
  margin-left: auto;
  min-width: 32px;
  color: var(--text-muted);
}
.crypto-wallet-remove:hover { color: var(--danger, #c44); }
.crypto-wallet-fields { margin-top: 0; }
.crypto-wallet-fields select {
  width: 100%;
  min-height: 38px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font: inherit;
}

/* Detail views */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.detail-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.detail-card-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.detail-card-value { font-weight: 600; font-size: 14px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.proof-box { font-family: var(--font-mono); font-size: 11px; word-break: break-all; color: var(--text-secondary); }
.user-stats-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.user-stat { flex: 1; }
.user-stat-label { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.user-stat-value { font-size: 16px; font-weight: 700; }
.user-stat-value.accent { color: var(--accent); }

/* Action chips */
.action-chip {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur);
}
.action-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.action-chip.success { background: var(--success-soft); border-color: rgba(34,197,94,0.25); color: var(--success); }
.action-chip.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }
.action-menu { position: relative; margin-left: auto; }
.action-menu-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
}
.action-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 20;
}
.action-dropdown button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.action-dropdown button:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Confirm dialog */

/* Toasts extended */
.toast-item.success .toast-ico { color: var(--success); }
.toast-item.error .toast-ico { color: var(--danger); }
.toast-item.info .toast-ico { color: var(--info); }
.toast-item.leaving { animation: toastOut 240ms var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(12px); } }
.toast-x {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.toast-x:hover { color: var(--text-primary); background: var(--surface-hover); }

/* Command palette items */
.cmd-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmd-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}
.cmd-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--dur);
}
.cmd-item:hover, .cmd-item.active { background: var(--accent-soft); }
.cmd-item-icon { font-size: 16px; width: 24px; text-align: center; }
.cmd-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cmd-item-text strong { font-size: 13px; }
.cmd-item-text span { font-size: 11.5px; color: var(--text-tertiary); }

/* Shortcuts modal */
.shortcuts-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.shortcuts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
}
.shortcuts-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.shortcuts-header h2 { margin: 0; font-family: var(--font-display); font-size: 16px; }
.shortcuts-body { padding: var(--space-3) var(--space-5) var(--space-5); }
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-keys { display: flex; gap: 4px; }
.shortcut-keys kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Skeleton extended */
.skeleton-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.skeleton-stat { height: 88px; }
.skeleton-panel { height: 200px; border-radius: var(--radius-lg); }
.skeleton-row { height: 44px; margin-bottom: 8px; }

/* ==========================================================================
   Loading Skeleton — calm terracotta/cam tones (no purple/glow)
   ========================================================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    color-mix(in srgb, var(--surface-hover) 60%, var(--surface-2)) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dashboard KPI skeleton */




/* Panel skeleton */

/* Studio rail footer */
.studio-rail-foot {
  padding: var(--space-3) var(--space-2) var(--space-2);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.lang-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-2);
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.lang-tab {
  flex: 1;
  padding: 6px 4px;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  white-space: nowrap;
}
.lang-tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.studio-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.studio-actions .btn { flex: 1; font-size: 11px; }

/* Overflow menu (⋯) — Dịch EN / Khôi phục */
.studio-actions-menu { position: relative; }
.studio-actions-toggle {
  list-style: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.studio-actions-toggle::-webkit-details-marker { display: none; }
.studio-actions-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.studio-actions-item {
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.studio-actions-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.studio-actions-menu[open] .studio-actions-toggle { background: var(--surface-active); color: var(--text-primary); }

.topup-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 12px;
  margin: 2px;
}
.topup-chip button { border: none; background: transparent; color: var(--text-muted); cursor: pointer; }

/* Flow editor extras */

.flow-autosave-hint { font-size: 11px; color: var(--text-tertiary); }
.flow-pane-empty { color: var(--text-tertiary); font-size: 13px; padding: var(--space-6); text-align: center; }

.palette-insert-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

/* Palette chips */
.palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur);
}
.palette-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.palette-chip.compact { padding: 3px 8px; font-size: 10px; }
.palette-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.palette-empty { font-size: 11px; color: var(--text-muted); }
.emoji-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.emoji-chip.empty { opacity: 0.5; }

/* Emoji library */
.emoji-library { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-2); }
.emoji-library-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border: none;
  background: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.emoji-library-toggle-meta { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.emoji-library-chevron { color: var(--text-muted); }
.emoji-library-body { display: none; padding: var(--space-3); border-top: 1px solid var(--border); }
.emoji-library.open .emoji-library-body { display: block; }
.emoji-library-toolbar { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.emoji-library-search { flex: 1; }
.emoji-library-table { font-size: 12px; }
.emoji-library-table-wrap { overflow-x: auto; }
.emoji-lib-empty { text-align: center; color: var(--text-tertiary); padding: var(--space-4); }
.palette-hint { font-size: 11.5px; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.palette-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.palette-dock { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }

/* Telegram preview */
.phone-frame-wrap { display: flex; flex-direction: column; align-items: center; }
.phone-frame {
  width: 100%;
  max-width: 260px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px;
  box-shadow: var(--shadow-md);
}
.phone-notch {
  width: 60px;
  height: 5px;
  background: var(--surface-2);
  border-radius: 999px;
  margin: 4px auto 8px;
}
.tg-phone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.tg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-active);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.tg-phone-meta { flex: 1; min-width: 0; }
.tg-phone-meta strong { display: block; font-size: 12px; }
.tg-phone-meta span { font-size: 10px; color: var(--text-tertiary); }
.tg-preview-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
}
.tg-chat { padding: 12px; min-height: 120px; }
.inspector-panel--preview .phone-frame {
  max-width: none;
  width: 100%;
  border-radius: 20px;
  padding: 10px;
}
.inspector-panel--preview .tg-chat {
  padding: 14px;
  min-height: 180px;
}
.inspector-panel--preview .tg-bubble {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 14px;
}
.inspector-panel--preview .tg-phone-meta strong { font-size: 13px; }
.inspector-panel--preview .tg-kb-btn { font-size: 12.5px; padding: 9px 10px; }
.inspector-panel--preview #flow-preview-wrap {
  width: 100%;
}
.tg-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 12px 12px 12px 4px;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
.tg-time { font-size: 9px; color: var(--text-muted); text-align: right; margin-top: 4px; }
.phone-frame-caption { font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.preview-placeholder { color: var(--text-muted); font-style: italic; font-size: 12px; }
.emoji-ref { color: var(--text-secondary); font-size: 11px; }
/* Telegram-like blockquote (product detail mô tả) */
.tg-bubble blockquote.tg-bq,
.tg-bubble .tg-bq {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 3px solid var(--border-strong, #6b8cae);
  background: color-mix(in srgb, var(--surface-2, #1e2a36) 80%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: inherit;
  line-height: 1.45;
}
.tg-bubble blockquote.tg-bq b { font-weight: 600; }

/* Flow toolbar (legacy paths) */

.empty-icon { color: var(--text-muted); margin-bottom: var(--space-2); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* ========================== PREMIUM ENHANCEMENTS ========================== */

.page-toolbar {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.page-toolbar-desc {
  font-size: 13.5px;
  line-height: 1.55;
}

/* Mobile KPI optimization — no horizontal scroll */
@media (max-width: 768px) {
  
  .hero-kpi {
    padding: 0 12px;
    border-right: none;
    flex: 1 1 calc(50% - 12px);
    min-width: 100px;
  }
  .hero-kpi:first-child { padding-left: 0; }
  .hero-kpi:last-child { padding-right: 0; }
  .hero-kpi span {
    font-size: 9px;
  }
  .hero-kpi strong {
    font-size: 16px;
  }
  /* Dashboard KPI rows */
  .sm-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sm-kpi {
    min-height: 80px;
    padding: 12px;
  }
  .sm-kpi-value {
    font-size: 18px;
  }
  .sm-kpi-icon {
    width: 24px;
    height: 24px;
  }
  .sm-kpi-icon svg {
    width: 13px;
    height: 13px;
  }
}

.alert-panel.has-alerts {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
}
.alert-panel.has-alerts .panel-head {
  background: color-mix(in srgb, var(--warning-soft) 40%, var(--bg-elevated));
}

.alert-icon {
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cmd-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn 180ms var(--ease-spring) both;
}
.cmd-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}

.drawer {
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.shortcuts-panel {
  animation: modalIn 200ms var(--ease-spring) both;
}

.login-footer {
  letter-spacing: 0.02em;
}

.field input {
  background: var(--bg-elevated);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.field input:hover {
  border-color: var(--border-strong);
}

.header-search input {
  background: var(--surface);
}
.header-search input:hover {
  border-color: var(--border-strong);
}

.nav-badge {
  box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.5);
}

.refresh-pill {
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.pc-avatar {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none !important;
  border: 0 !important;
}

.badge {
  box-shadow: none;
  height: 18px;
}

.studio-rail-icon {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.empty-state {
  padding: 52px 20px;
}
.empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .quick-card,
  .product-card,
  .ops-chip,
  .icon-btn,
  .btn-primary,
  .btn,
  .panel,
  .card,
  .modal,
  .toast-item,
  .drawer,
  .cmd-panel,
  .shortcuts-panel {
    animation: none !important;
    transition: none !important;
  }
  .stat-card:hover,
  .quick-card:hover,
  .product-card:hover,
  .ops-chip:hover,
  .icon-btn:hover,
  .btn:hover,
  .btn-primary:hover,
  .panel:hover,
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* Desktop: preview cố định cột phải — vừa soạn vừa xem */
@media (min-width: 1280px) {
  .studio-layout.inspector-docked {
    grid-template-columns: var(--studio-rail-w) 1fr;
  }
  .studio-layout.inspector-docked.inspector-open {
    grid-template-columns: var(--studio-rail-w) minmax(0, 1fr) var(--studio-inspector-w);
  }
  .studio-layout.inspector-docked .studio-rail {
    grid-column: 1;
    grid-row: 1;
  }
  .studio-layout.inspector-docked .studio-main {
    grid-column: 2;
    grid-row: 1;
  }
  .studio-layout.inspector-docked .studio-inspector {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    grid-column: 3;
    grid-row: 1;
    width: auto;
    min-width: 0;
    transform: none;
    box-shadow: none;
    z-index: 1;
  }
  .studio-layout.inspector-docked:not(.inspector-open) .studio-inspector {
    display: none;
  }
  .studio-layout.inspector-docked .studio-inspector-overlay {
    display: none !important;
  }
  .studio-layout.inspector-docked .inspector-drawer-close {
    display: none;
  }
}

/* Ultra-wide: preview là cột cố định, luôn hiện — không cần bật/tắt */
@media (min-width: 1536px) {
  .studio-layout.inspector-docked.inspector-open {
    grid-template-columns: var(--studio-rail-w) minmax(0, 1fr) var(--studio-inspector-w);
  }
  /* Toggle vẫn cho phép thu gọn tạm, nhưng mặc định preview mở sẵn */
}

/* Ensure compact rail wins below 1536 even against docked rules */
@media (max-width: 1535px) and (min-width: 1280px) {
  .studio-layout.inspector-docked { grid-template-columns: 62px 1fr !important; }
  .studio-layout.inspector-docked.inspector-open { grid-template-columns: 62px minmax(0,1fr) var(--studio-inspector-w) !important; }
  .studio-preview-toggle { opacity: 0.85; }
}

/* Responsive */
@media (max-width: 1200px) {
  
  .studio-inspector { width: min(400px, 96vw); }
  .editor-btn-fields { grid-template-columns: 1fr; }
  .editor-btn-grid { grid-template-columns: 1fr; }

}
@media (max-width: 900px) {
  .workspace-main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .header-search { width: 180px; }
  .search-kbd { display: none; }

  /* Rail thu gọn thành thanh chọn bước ngang — không chiếm cột dọc */
  .studio-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .studio-rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    overflow: hidden;
  }
  .studio-rail-head { padding: 0 0 8px; }
  .studio-rail-steps {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    gap: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .studio-rail-step {
    flex: 0 0 auto;
    width: auto;
    max-width: 220px;
    scroll-snap-align: start;
  }
  .studio-rail-trigger { display: none; }
  .studio-rail-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    margin-top: 0;
    border-top: none;
  }
  .studio-rail-foot .lang-tabs { flex: 1 1 auto; margin-bottom: 0; }
  .studio-actions-menu { flex: 0 0 auto; margin-left: auto; }
  .studio-actions-toggle { width: 36px; }
  /* Overflow menu opens above the foot bar on tablet stepper */
  .studio-actions-pop { left: auto; right: 0; width: max-content; min-width: 180px; }
}
@media (max-width: 760px) {
  .header-menu { display: grid; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 240ms var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .workspace-main { padding: var(--space-4) var(--space-3) var(--space-6); }

  /* General mobile polish: tables no h-scroll where possible, compact cards */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stat-card, .ops-chip, .empty-state { padding: 12px 14px; }

  /* Header gọn cho mobile: chỉ giữ menu + tiêu đề + chuông + theme.
     Ẩn thứ phụ để không chồng chữ trong hàng 60px cố định.
     Nền đục hoàn toàn để nội dung cuộn không lộ xuyên qua. */
  .workspace-header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
    background: var(--bg-elevated);
    backdrop-filter: none;
  }
  .header-left { flex: 1; min-width: 0; }
  .header-titles { flex: 1; min-width: 0; overflow: hidden; }
  .page-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-crumb { display: none; }
  .header-search { display: none; }
  .clock { display: none; }
  .autosave { display: none; }
  .refresh-pill { display: none; }
  .header-divider { display: none; }
  .version-badge { display: none; }
  .search-kbd { display: none; }
  .header-right { gap: 4px; flex-shrink: 0; }

  .table-toolbar { flex-wrap: wrap; }
  .filter-bar { padding: var(--space-3); }

  /* Studio toolbar: 1 hàng sticky gọn — tìm kiếm + Chèn/emoji + xem trước */
  .studio-toolbar {
    flex-wrap: nowrap;
    column-gap: var(--space-2);
    padding: 8px var(--space-3);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .studio-toolbar-context { display: none; }
  .studio-autosave { display: none; }
  .studio-toolbar-search {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }
  .studio-emoji-manage .studio-toolbar-btn-label,
  .studio-preview-toggle-label { display: none; }
  .studio-emoji-manage,
  .studio-refresh,
  .studio-preview-toggle { flex: 0 0 auto; }

  /* Product grid 1 cột, padding gọn hơn */
  .product-grid { grid-template-columns: 1fr; padding: var(--space-3); gap: var(--space-3); }
  .product-card { padding: var(--space-4); }

  .form-grid { grid-template-columns: 1fr; }
  
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Điện thoại: bỏ min-column, dồn về 1 cột, thu gọn padding */
  .workspace-main { padding: var(--space-3) var(--space-2) var(--space-5); }
  .table-search { max-width: none; }
  .products-page .table-search input { min-width: 0; }

  /* Bảng: ô gọn hơn để bớt phải cuộn ngang */
  th, td { padding: 9px 10px; }
  th { font-size: 9.5px; }
  table { font-size: 12.5px; }

  /* Tap target ≥ 40px cho thao tác chính trên mobile */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-xs { min-height: 32px; }

  /* Modal sát mép hơn, dùng gần trọn màn hình */
  .modal { max-width: 100%; max-height: calc(100dvh - 16px); border-radius: var(--radius-lg); }
  .modal-backdrop { padding: 8px; }

  /* Card actions xuống hàng để không tràn */
  .pc-header-actions { flex-wrap: wrap; }
  .pc-metrics { grid-template-columns: repeat(2, 1fr); }
  .order-pnl-summary { grid-template-columns: 1fr; }

  /* Prevent horizontal scroll on lists/tables */
  .table-wrap, .filter-bar { overflow-x: hidden; }
  
}

/* ── Mobile step navigator (chỉ active step + prev/next + picker) ───────── */
.studio-mobile-stepnav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 15;
}
.stepnav-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.stepnav-btn:disabled { opacity: .4; cursor: default; }
.stepnav-current {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 13px;
  text-align: left;
  color: var(--text-primary);
}
.stepnav-num {
  font-weight: 800;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: 11px;
  flex-shrink: 0;
}
.stepnav-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.stepnav-arrow { opacity: .6; font-size: 11px; }

/* Bottom sheet cho picker bước trên mobile */
.mobile-step-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; }
.mobile-step-sheet .sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.mobile-step-sheet .sheet-panel {
  position: relative; width: 100%; max-height: 55vh;
  background: var(--bg-elevated); border-radius: 14px 14px 0 0;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet-close { font-size: 16px; background: none; border: none; color: var(--text-secondary); }
.sheet-list { overflow: auto; padding: 6px; }
.sheet-step {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; text-align: left; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-primary); font-size: 14px;
}
.sheet-step.active { background: var(--surface-active); border-color: var(--border-strong); }
.sheet-step .sheet-num {
  width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--surface-2);
  border-radius: 5px; flex-shrink: 0;
}

/* Rail peek (hover mở nhẹ để có ngữ cảnh) */
@media (max-width: 1535px) {
  .studio-rail.rail-peek .studio-rail-copy { display: block !important; }
  .studio-rail.rail-peek .studio-rail-label,
  .studio-rail.rail-peek .studio-rail-trigger { display: block; }
  .studio-rail.rail-peek { box-shadow: var(--shadow-md); transition: width .12s ease; }
}

/* Error highlight khi click từ tab Kiểm tra */
.field-error-highlight,
.msg-pro-card.field-error-highlight,
.mm-field-item.field-error-highlight {
  animation: fieldErrorFlash 1.7s ease forwards;
  border-color: var(--warning) !important;
}
@keyframes fieldErrorFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 45%, transparent); }
  40% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* ── Orders page — professional operator table ─────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nút xoá bộ lọc trong filter-bar */
.filter-bar-reset {
  margin-left: auto;
  align-self: center;
  padding: 5px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.filter-bar-reset:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: var(--danger-soft);
}

/* Cột số căn phải để so sánh tiền nhanh */
.th-num, .td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-num { font-family: var(--font-mono); font-size: 12.5px; }
.th-actions { width: 1%; }
.td-actions { text-align: right; white-space: nowrap; }
.row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Hàng có thể click — con trỏ + focus rõ ràng */
.row-clickable { cursor: pointer; }
.row-clickable:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Mã đơn là link thật (focus được bằng bàn phím) */
.cell-link {
  padding: 2px 6px;
  margin: -2px -6px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.cell-link:hover { background: var(--accent-soft); }
.cell-link:focus-visible { outline: none; box-shadow: var(--focus); }

.cell-stack { min-width: 0; }
.cell-stack .td-primary,
.cell-stack .td-muted {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Đơn chờ: vạch cam bên trái thay vì tô cả hàng (giảm nhiễu, giữ tín hiệu) */
.orders-table .row-pending td { background: color-mix(in srgb, var(--warning-soft) 55%, transparent); }
.orders-table .row-pending td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.orders-table .row-pending:hover td { background: color-mix(in srgb, var(--warning-soft) 80%, transparent); }

/* Nhãn "Tự động" cho đơn PayOS */
.auto-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--info);
  background: var(--info-soft);
  border: 1px dashed color-mix(in srgb, var(--info) 30%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}
.auto-tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--info);
}

.empty-state-action { text-align: center; padding-bottom: var(--space-4); }

/* Mobile: bảng đơn cuộn ngang bên trong panel (trang không cuộn ngang).
   table đã display:block + overflow-x:auto ở ≤760px; chống bẹp cột bằng nowrap. */
@media (max-width: 760px) {
  .orders-table th, .orders-table td { white-space: nowrap; }
  .filter-bar-reset { margin-left: 0; }
}

/* ── Orders overview — thuộc layout cam gốc, không phụ thuộc premium/apple ── */

.method-mix-label {
  color: var(--text-muted);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mix-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--info); }
.mix-crypto { background: var(--warning); }
.mix-balance { background: var(--success); }

#page-orders .filter-bar {
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--accent) 10%, var(--border));
  box-shadow: none;
}

#page-orders .fd-tabs { padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
#page-orders .fd-tab { border-radius: 7px; }
#page-orders .fd-tab.active { background: var(--surface-active); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }
#page-orders .panel { overflow: hidden; }
#page-orders .table-toolbar { background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%); }

.orders-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
}

.orders-table tbody tr { transition: background var(--dur); }
.orders-table tbody tr:hover { transform: none; }
.action-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.action-chip.success { background: color-mix(in srgb, var(--success) 14%, transparent); }

/* Order detail keeps the same orange visual language. */
.order-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface);
}

.order-detail-kicker { display: block; color: var(--text-tertiary); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; }
.order-detail-hero > div > strong { display: block; margin: 5px 0 8px; font-family: var(--font-display); font-size: 25px; letter-spacing: -.045em; }
.order-detail-hero small { display: flex; flex-wrap: wrap; gap: 5px; }
.order-detail-mark { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 17px; color: #fff; background: var(--accent-gradient); }
.order-detail-mark svg { width: 24px; height: 24px; }

.order-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start;
  margin: 0 2px 16px;
}

.order-timeline-step { display: grid; justify-items: center; gap: 5px; min-width: 72px; text-align: center; color: var(--text-muted); }
.order-timeline-step > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); font: 700 10px var(--font-mono); }
.order-timeline-step strong { display: block; font-size: 10.5px; }
.order-timeline-step small { display: block; max-width: 86px; margin-top: 1px; color: var(--text-muted); font-size: 8.5px; line-height: 1.3; }
.order-timeline-step.is-done { color: var(--success); }
.order-timeline-step.is-done > span { color: #06251d; border-color: transparent; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.order-timeline-step.is-cancelled { color: var(--danger); }
.order-timeline-step.is-cancelled > span { color: #fff; border-color: transparent; background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.order-timeline-line { height: 2px; margin-top: 12px; background: var(--border-strong); }
.order-timeline-line.is-done { background: var(--success); }
.detail-badge-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.order-detail-total { margin-top: .5rem; font-size: 1.1rem; }



@media (max-width: 760px) {

  #page-orders .table-wrap { overflow: visible; }
  .orders-table,
  .orders-table tbody { display: block; width: 100%; }
  .orders-table thead { display: none; }
  .orders-table tbody { padding: 8px; }
  .orders-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "code code status"
      "user user user"
      "pay pay time"
      "total cost profit"
      "action action action";
    gap: 10px 12px;
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .orders-table tbody tr:last-child { margin-bottom: 0; }
  .orders-table tbody tr.orders-empty-row { display: block; padding: 0; }
  .orders-table tbody tr.orders-empty-row td { display: block; width: 100%; }
  .orders-table td,
  .orders-table .row-pending td { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; white-space: normal; }
  .orders-table .row-pending { border-color: color-mix(in srgb, var(--warning) 28%, var(--border)); box-shadow: inset 3px 0 0 var(--warning); }
  .order-code-cell { grid-area: code; }
  .order-status-cell { grid-area: status; justify-self: end; }
  .order-user-cell { grid-area: user; min-width: 0; }
  .order-pay-cell { grid-area: pay; }
  .order-time-cell { grid-area: time; align-self: center; text-align: right; }
  .order-total-cell { grid-area: total; }
  .order-cost-cell { grid-area: cost; }
  .order-profit-cell { grid-area: profit; }
  .order-total-cell,
  .order-cost-cell,
  .order-profit-cell {
    min-width: 0;
    padding-top: 9px !important;
    border-top: 1px solid var(--border-subtle) !important;
    text-align: left;
  }
  .order-total-cell::before,
  .order-cost-cell::before,
  .order-profit-cell::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font: 650 9px var(--font-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .order-action-cell { grid-area: action; padding-top: 9px !important; border-top: 1px solid var(--border-subtle) !important; }
  .order-action-cell .row-actions { width: 100%; }
  .order-action-cell .action-chip { flex: 1; min-height: 36px; justify-content: center; }
  .orders-table .cell-stack .td-primary,
  .orders-table .cell-stack .td-muted { max-width: 72vw; }

  .order-timeline { grid-template-columns: 1fr; gap: 0; margin-left: 4px; }
  .order-timeline-step { min-width: 0; grid-template-columns: 26px 1fr; justify-items: start; text-align: left; }
  .order-timeline-step > div { padding: 3px 0 12px; }
  .order-timeline-step small { max-width: none; }
  .order-timeline-line { width: 2px; height: 18px; margin: -7px 0 -2px 12px; }
}

@media (max-width: 430px) {

  .order-detail-hero { padding: 14px; }
  .order-detail-mark { width: 46px; height: 46px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM jolyui.css — JolyUI components (shadcn patterns)
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   JolyUI-inspired component layer (shadcn patterns · vanilla CSS)
   https://www.jolyui.dev/docs/components
   ========================================================================== */

/* ── Field ─────────────────────────────────────────────── */
.jy-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.jy-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.jy-description {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin: 0;
}

/* ── Input ───────────────────────────────────────────── */
.jy-input,
.jy-select {
  display: flex;
  height: 36px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}

.jy-input:hover,
.jy-select:hover {
  border-color: var(--border-strong);
}

.jy-input:focus,
.jy-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--surface);
}

.jy-input::placeholder {
  color: var(--text-muted);
}

.jy-input--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Input group ─────────────────────────────────────── */
.jy-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.jy-input-group .jy-input {
  padding-left: 36px;
}

.jy-input-group-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
}

.jy-input-group--action .jy-input {
  padding-right: 72px;
}

.jy-input-group-action {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
}

/* ── Textarea ────────────────────────────────────────── */
.jy-textarea-wrap {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: border-color var(--dur), box-shadow var(--dur);
  overflow: hidden;
}

.jy-textarea-wrap:hover {
  border-color: var(--border-strong);
}

.jy-textarea-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--surface);
}

.content-field-active .jy-textarea-wrap,
.jy-textarea-wrap.is-focused {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--focus);
}

.jy-textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  max-height: 340px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  resize: none;
  overflow-y: auto;
}

.jy-textarea:focus {
  outline: none;
}

.jy-textarea-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.jy-char-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.jy-char-count--warn {
  color: var(--warning);
}

/* ── Editor toolbar ──────────────────────────────────── */
.jy-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.jy-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.jy-toolbar-group--vars {
  flex-wrap: wrap;
  gap: 4px;
}

.jy-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.jy-toolbar-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border);
}

.jy-toolbar-btn:active {
  transform: scale(0.96);
}

.jy-toolbar-btn--mono {
  font-family: var(--font-mono);
  font-size: 11px;
}

.jy-toolbar-btn--var {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 0 7px;
  color: var(--accent);
  background: var(--accent-muted);
}

.jy-toolbar-btn--var:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.jy-toolbar-btn--emoji {
  font-size: 14px;
  padding: 0 6px;
}

.jy-separator {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Tabs (shadcn) ───────────────────────────────────── */
.jy-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.jy-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}

.jy-tab:hover {
  color: var(--text-primary);
}

.jy-tab.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ── Badge & Chip ────────────────────────────────────── */

.jy-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur);
}

.jy-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.jy-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Card ──────────────────────────────────────────────── */
.jy-card {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.jy-card:hover {
  border-color: var(--border-strong);
}

.content-field-active.jy-card,
.jy-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--focus);
}

.jy-card-body {
  padding: 12px 14px 14px;
}

/* ── Combobox / Select row ─────────────────────────────── */
.jy-combobox {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
}

.jy-combobox .jy-input {
  flex: 1;
  min-width: 140px;
}

/* ── Alert / Callout ───────────────────────────────────── */

/* ── Scroll area chips dock ────────────────────────────── */

/* ── Studio content editor layout ──────────────────────── */

.studio-toolbar .jy-input-group {
  max-width: 320px;
}

.studio-toolbar .jy-input-group .jy-input {
  height: 34px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--surface);
}

.inspector-combobox {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inspector-combobox .jy-combobox {
  flex-direction: column;
}

.inspector-combobox .jy-select,
.inspector-combobox .jy-input {
  max-width: none;
}

/* Button field card */

/* Emoji palette table inputs */
.palette-table .jy-input {
  height: 32px;
  font-size: 12px;
}

/* Keyboard hint */

/* Tooltip (CSS) */
[data-jy-tip] {
  position: relative;
}

[data-jy-tip]::after {
  content: attr(data-jy-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  z-index: 30;
}

[data-jy-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Flow editor integration */
.editor-tabs.jy-tabs {
  margin: 0 var(--space-5) var(--space-3);
  width: fit-content;
}

.inspector-tabs.jy-tabs {
  display: flex;
  width: calc(100% - 16px);
  margin: 8px;
}

.inspector-tabs .jy-tab {
  flex: 1;
  justify-content: center;
}

.lang-tabs.jy-tabs {
  width: 100%;
  margin-bottom: var(--space-2);
}

.lang-tabs .jy-tab {
  flex: 1;
  justify-content: center;
  font-size: 10.5px;
  padding: 6px 4px;
}

.editor-scroll .jy-card + .jy-card {
  margin-top: var(--space-3);
}

/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM twentyfirst.css — 21st.dev UI layer (effects disabled)
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   21st.dev UI layer — vanilla port (21st.dev / Aceternity / Magic UI patterns)
   Prefix: tf-*  ·  enhances existing admin without replacing logic
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Glow tắt — calm operator UI */
}

/* ── Dotted surface — disabled for MaterialM flat look ─── */

/* ── Spotlight — disabled (calm UI, no mouse tracking) ─── */

/* ── Animated border beam (aceternity/glowing-effect) ─── */

@keyframes tfBeamSpin {
  to { --tf-beam-angle: 360deg; }
}

@property --tf-beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ── Shimmer text — static (no infinite animation) ─────── */

@keyframes tfShimmer {
  0%, 100% { background-position: 120% center; }
  50% { background-position: -20% center; }
}

/* ── Button shine (magicui/interactive-hover-button) ──── */
.btn-primary,
.tf-btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::after,
.tf-btn-shine::after { display: none; }

/* ── Bento grid (aceternity/bento-grid) ───────────────── */







/* ── Glass panel — solid ──────────────────────────────── */

/* ── Display cards — flat (no 3D) ─────────────────────── */

/* ── Hero — no glow ───────────────────────────────────── */

/* ── Ops chips — pill glow ────────────────────────────── */

/* ── Alert queue items ────────────────────────────────── */
.tf-alert-item {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.tf-alert-item:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  transform: translateX(3px);
  box-shadow: -3px 0 0 var(--accent), var(--shadow-sm);
}

.tf-alert-item .alert-icon {
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}

/* ── Tables — row spotlight ───────────────────────────── */
.tf-table-wrap table tbody tr {
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tf-table-wrap table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-muted) 80%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.tf-table-wrap .panel-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 60%, transparent), transparent);
}

/* ── Product cards — phẳng, không glow / không lift mạnh ────────── */
.product-card.tf-product-card {
  box-shadow: none !important;
  transition: border-color 200ms var(--ease), box-shadow 220ms var(--ease);
}
.product-card.tf-product-card:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1) !important;
}
.product-card.tf-product-card .pc-accent {
  opacity: 0.65;
  transition: opacity 200ms var(--ease);
}
.product-card.tf-product-card:hover .pc-accent {
  opacity: 0.9;
}

/* ── Empty state ──────────────────────────────────────── */
.tf-empty-state {
  position: relative;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 80%, var(--border));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-muted), transparent 70%),
    color-mix(in srgb, var(--surface) 50%, transparent);
}

.tf-empty-state .empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  box-shadow: var(--shadow-sm);
}

/* ── Command palette ──────────────────────────────────── */
.tf-cmd-panel {
  border-radius: var(--radius-lg) !important;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
  overflow: hidden;
}

.tf-cmd-panel::before { display: none; }

.cmd-backdrop.tf-cmd-backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
}

.cmd-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent 85%) !important;
  border-left: 2px solid var(--accent);
}

/* ── Login ────────────────────────────────────────────── */

/* ── Sidebar nav glow ─────────────────────────────────── */
.nav-item.tf-nav-item.active {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    none;
}

/* ── Header search glow on focus ──────────────────────── */
.header-search.tf-search:focus-within input {
  box-shadow: var(--focus), none;
}

.header-search.tf-search:focus-within svg {
  color: var(--accent);
}

/* ── Modal glass ──────────────────────────────────────── */
.modal.tf-modal {
  border-radius: var(--radius-xl);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  overflow: hidden;
}

.modal.tf-modal::before { display: none; }

/* ── Toast upgrade ────────────────────────────────────── */
.toast-item.tf-toast {
  border-color: color-mix(in srgb, var(--accent) 12%, var(--border-strong));
  box-shadow: var(--shadow-md), none;
}

/* ── Stat value glow ──────────────────────────────────── */

/* ── Workspace header underline glow ──────────────────── */
.workspace-header.tf-header {
  box-shadow:
    0 1px 0 var(--border),
    none;
}

/* ── Page title accent ────────────────────────────────── */
.page-title.tf-page-title {
  background: linear-gradient(135deg, var(--text-primary) 20%, color-mix(in srgb, var(--accent) 35%, var(--text-primary)));
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] .page-title.tf-page-title {
  background: linear-gradient(135deg, var(--text-primary) 30%, color-mix(in srgb, var(--accent) 50%, var(--text-primary)));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Filter bar glass ─────────────────────────────────── */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Shortcuts modal ──────────────────────────────────── */
.shortcuts-panel {
  border-radius: var(--radius-lg) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .tf-display-card:hover,
  .product-card.tf-product-card:hover,
  .tf-alert-item:hover {
    transform: none;
  }
}
/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM fulldev.css — Fulldev UI layer (fd-* components)
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   Fulldev UI layer — vanilla port (ui.full.dev / fulldotdev/ui)
   Prefix: fd-*  ·  works with existing design tokens
   ========================================================================== */

/* ── Field ─────────────────────────────────────────────── */
.fd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.fd-field[data-invalid="true"] .fd-input,
.fd-field[data-invalid="true"] .jy-textarea-wrap {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.fd-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.fd-description {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin: 0;
}

.fd-error {
  font-size: 11.5px;
  color: var(--danger);
  font-weight: 500;
  margin: 0;
}

.fd-error.hidden { display: none; }

/* ── Input ───────────────────────────────────────────── */
.fd-input {
  display: flex;
  height: 36px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.fd-input:hover { border-color: var(--border-strong); }

.fd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--surface);
}

.fd-input::placeholder { color: var(--text-muted); }

.fd-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fd-input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}

.fd-input--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Alert ─────────────────────────────────────────────── */
.fd-alert {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.fd-alert-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 13px;
  margin-top: 1px;
}

.fd-alert-body { min-width: 0; flex: 1; }

.fd-alert-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.fd-alert-desc code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-hover);
}

.fd-alert--info {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 22%, var(--border));
}

/* ── Alert Dialog ──────────────────────────────────────── */
.fd-alert-dialog-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fd-alert-dialog {
  width: 100%;
  max-width: 420px;
  animation: fdDialogIn 220ms var(--ease-spring) both;
}

@keyframes fdDialogIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.fd-alert-dialog-content {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.fd-alert-dialog-header {
  padding: 22px 22px 8px;
  text-align: center;
}

.fd-alert-dialog-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger-soft);
  color: var(--danger);
}

.fd-alert-dialog-header.info .fd-alert-dialog-icon {
  background: var(--info-soft);
  color: var(--info);
}

.fd-alert-dialog-header.warn .fd-alert-dialog-icon {
  background: var(--warning-soft);
  color: var(--warning);
}

.fd-alert-dialog-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.fd-alert-dialog-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.fd-alert-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border-subtle);
}

/* ── Tabs ────────────────────────────────────────────── */
.fd-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fd-tabs-list,
.fd-tabs.fd-tabs--line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.fd-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur);
  white-space: nowrap;
}

.fd-tab:hover { color: var(--text-primary); }

.fd-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.fd-tabs--pill .fd-tabs-list {
  border: none;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.fd-tabs--pill .fd-tab {
  margin: 0;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  padding: 7px 14px;
}

.fd-tabs--pill .fd-tab.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border-bottom: none;
}

/* ── Badge ─────────────────────────────────────────────── */
.fd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.fd-badge--secondary {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}

.fd-badge--destructive {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.fd-badge--success {
  background: var(--success-soft);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

.fd-badge--warning {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 20%, transparent);
}

/* ── Combobox ──────────────────────────────────────────── */
.fd-combobox {
  position: relative;
  min-width: 140px;
  max-width: 200px;
}

.fd-combobox-trigger {
  position: relative;
  display: flex;
  align-items: center;
}

.fd-combobox-input {
  padding-right: 28px;
  height: 32px;
  font-size: 12px;
}

.fd-combobox-chevron {
  position: absolute;
  right: 10px;
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
}

.fd-combobox-content {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.fd-combobox-content.hidden { display: none; }

.fd-combobox-list {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fd-combobox-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11.5px;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.fd-combobox-item:hover,
.fd-combobox-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.fd-combobox-item.hidden { display: none; }

.fd-combobox-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.fd-combobox-empty.hidden { display: none; }

/* ── Integration ───────────────────────────────────────── */
.editor-tabs.fd-tabs--line {
  margin: 0 var(--space-5);
  padding: 0;
}

.editor-tabs .fd-tab .filter-count,
.editor-tabs .fd-tab .fd-badge {
  font-size: 10px;
}

.content-field .fd-field-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jy-editor-toolbar .fd-combobox {
  margin-left: auto;
  flex-shrink: 0;
}

.login-card .fd-field { margin-bottom: 14px; }

.filter-bar .fd-tabs--line {
  border: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-bar .fd-tab {
  border-bottom: none;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
  margin: 0;
}

.filter-bar .fd-tab.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}

.filter-bar .fd-tab.active .fd-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-fill);
}

.filter-bar .fd-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.inspector-tabs.fd-tabs--pill {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.inspector-tabs .fd-tabs-list {
  width: 100%;
}

.inspector-tabs .fd-tab { flex: 1; justify-content: center; font-size: 11.5px; }

.form-grid .fd-field { margin-bottom: 0; }

.form-grid .fd-field.full,
.form-grid .fd-set.full { grid-column: 1 / -1; }

.products-filter-tabs.fd-tabs--line {
  border: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

.products-filter-tabs .fd-tab {
  border-bottom: none;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
  margin: 0;
}

.products-filter-tabs .fd-tab.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}

/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM materialm.css — MaterialM flow editor surfaces
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   MaterialM — Flow editor layout (MD3-inspired surfaces & lists)
   Scope: workspace--flow only
   ========================================================================== */

.workspace--flow .studio-main {
  background: var(--bg);
}

.workspace--flow {
  --mm-radius: 12px;
  --mm-radius-lg: 16px;
  --mm-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px var(--border);
  --mm-container: var(--surface);
  --mm-on-surface-variant: var(--text-secondary);
}

[data-theme="light"].workspace--flow,
[data-theme="light"] .workspace--flow {
  --mm-elevation-1: 0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--border);
}

/* ── Content wrapper (MaterialM page body) ───────────────── */
.workspace--flow .mm-content-wrap,
.workspace--flow .editor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-7);
  -webkit-overflow-scrolling: touch;
}

.workspace--flow .mm-content-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 920px;
}

.workspace--flow .editor-canvas--search .editor-scroll--search,
.workspace--flow .editor-scroll--search {
  max-width: 960px;
}

/* ── Surface panel (one card per group — no nested blocks) ─ */
.workspace--flow .mm-panel {
  background: var(--mm-container);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-elevation-1);
  overflow: hidden;
}

.workspace--flow .mm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.workspace--flow .mm-panel-head--overview {
  align-items: flex-start;
  padding: 16px 18px 12px;
}

.workspace--flow .mm-panel-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.workspace--flow .mm-panel-desc,
.workspace--flow .mm-panel-meta {
  font-size: 12px;
  color: var(--mm-on-surface-variant);
  line-height: 1.45;
}

.workspace--flow .mm-panel-meta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.workspace--flow .mm-panel-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* ── Field list (Material list tiles) ───────────────────── */
.workspace--flow .mm-field-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.workspace--flow .mm-field-item {
  border-bottom: 1px solid var(--border-subtle);
}

.workspace--flow .mm-field-item:last-child {
  border-bottom: none;
}

.workspace--flow .mm-field-item.is-collapsed {
  background: transparent;
}

.workspace--flow .mm-field-item.is-collapsed .msg-pro-card,
.workspace--flow .mm-field-item.is-collapsed.msg-pro-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.workspace--flow .mm-field-item.is-expanded {
  background: color-mix(in srgb, var(--surface-hover) 55%, transparent);
}

.workspace--flow .mm-field-item.is-expanded.content-field-active,
.workspace--flow .mm-field-item.is-expanded.is-focused {
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.workspace--flow .mm-field-editor {
  padding: 0;
}

.workspace--flow .mm-field-item.is-expanded .msg-pro-card,
.workspace--flow .mm-field-item.is-expanded.msg-pro-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.workspace--flow .mm-field-row,
.workspace--flow .field-row {
  width: 100%;
  border-radius: 0;
}

.workspace--flow .mm-field-row:hover,
.workspace--flow .field-row:hover {
  background: var(--surface-hover);
}

/* ── Page head + segmented tabs (step deck) ─────────────── */
.workspace--flow .mm-page-head,
.workspace--flow .studio-step-deck {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--space-6);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.workspace--flow .mm-page-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.workspace--flow .mm-page-head-badge,
.workspace--flow .studio-step-deck-id {
  width: 40px;
  height: 40px;
  border-radius: var(--mm-radius);
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  font-size: 14px;
  font-weight: 800;
}

.workspace--flow .studio-step-deck-copy h2,
.workspace--flow .mm-page-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.workspace--flow .studio-step-deck-copy p,
.workspace--flow .mm-page-head p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  max-width: 480px;
}

.workspace--flow .mm-segmented,
.workspace--flow .studio-step-deck-tabs {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  border: 1px solid var(--border);
}

.workspace--flow .mm-segmented .fd-tab,
.workspace--flow .studio-step-deck-tabs .fd-tab {
  border: none !important;
  border-radius: 999px !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  flex-shrink: 0;
}

.workspace--flow .mm-segmented .fd-tab.active,
.workspace--flow .studio-step-deck-tabs .fd-tab.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ── Toolbar (app bar) ─────────────────────────────────── */
.workspace--flow .studio-toolbar {
  padding: 12px var(--space-6);
  min-height: 56px;
  gap: var(--space-3);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.workspace--flow .studio-toolbar-mode {
  font-size: 15px;
}

.workspace--flow .studio-search {
  border-radius: var(--mm-radius);
  background: var(--surface-2);
  border-color: transparent;
  padding-top: 9px;
  padding-bottom: 9px;
}

.workspace--flow .studio-search:focus {
  background: var(--surface);
  border-color: var(--accent);
}

/* ── Nav rail (drawer list) ─────────────────────────────── */
.workspace--flow .studio-rail {
  padding: var(--space-4) var(--space-3);
  background: var(--bg-elevated);
}

.workspace--flow .studio-rail-step {
  border-radius: 999px;
  padding: 9px 12px;
  border: none;
}

.workspace--flow .studio-rail-step:hover {
  background: var(--surface-hover);
}

.workspace--flow .studio-rail-step.active {
  background: var(--surface-active);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
}

.workspace--flow .studio-rail-step.active .studio-rail-num {
  background: var(--accent);
  color: #fff;
}

.workspace--flow .studio-rail-all {
  border-radius: 999px;
}

.workspace--flow .studio-rail-all.active {
  box-shadow: none;
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

/* ── Button menu list ───────────────────────────────────── */
.workspace--flow .editor-btn-grid,
.workspace--flow .mm-btn-list {
  display: block;
  grid-template-columns: none;
  max-width: none;
  gap: 0;
}

.workspace--flow .mm-btn-item {
  padding: 14px 18px;
}

.workspace--flow .mm-btn-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.workspace--flow .mm-btn-item-copy {
  min-width: 0;
  flex: 1;
}

.workspace--flow .mm-btn-item-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.workspace--flow .mm-btn-item-key {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.workspace--flow .mm-btn-item-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.workspace--flow .mm-btn-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}

.workspace--flow .mm-btn-field .jy-input {
  width: 100%;
}

.workspace--flow .mm-btn-field .jy-description {
  margin: 4px 0 0;
  font-size: 10.5px;
}

/* ── Overview step list ─────────────────────────────────── */
.workspace--flow .mm-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.workspace--flow .mm-step-item {
  border-bottom: 1px solid var(--border-subtle);
}

.workspace--flow .mm-step-item:last-child {
  border-bottom: none;
}

.workspace--flow .mm-step-row,
.workspace--flow .overview-row {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 14px 18px;
  transform: none;
}

.workspace--flow .mm-step-row:hover,
.workspace--flow .overview-row:hover {
  background: var(--surface-hover);
  transform: none;
}

/* ── Search result panels ───────────────────────────────── */
.workspace--flow .mm-panel--search.search-step-block {
  border-radius: var(--mm-radius-lg);
}

.workspace--flow .search-step-head {
  position: static;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 18px;
}

.workspace--flow .search-step-body {
  padding: 0;
}

.workspace--flow .search-step-body .mm-panel--fields {
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}

.workspace--flow .search-step-section {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

.workspace--flow .mm-panel--search-summary {
  overflow: hidden;
}

.workspace--flow .search-results-banner {
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}

.workspace--flow .mm-panel--search-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.workspace--flow .search-results-list {
  max-width: none;
  gap: var(--space-3);
}

/* ── Editor note ────────────────────────────────────────── */
.workspace--flow .editor-step-note {
  border-radius: var(--mm-radius);
  margin-bottom: var(--space-3);
}

/* ── Inspector tabs (MD3) ───────────────────────────────── */
.workspace--flow .inspector-tabs {
  background: var(--surface-2);
  padding: 4px;
  gap: 4px;
  border-bottom: none;
}

.workspace--flow .inspector-tabs .fd-tabs-list {
  background: transparent;
  gap: 4px;
}

.workspace--flow .inspector-tab {
  border-radius: 8px;
}

.workspace--flow .inspector-tab.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .workspace--flow .mm-content-wrap,
  .workspace--flow .editor-scroll {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }

  .workspace--flow .mm-page-head,
  .workspace--flow .studio-step-deck {
    padding: 12px var(--space-4);
  }

  .workspace--flow .mm-btn-item-body {
    grid-template-columns: 1fr;
  }

  .workspace--flow .studio-toolbar {
    padding: 10px var(--space-4);
  }
}

@media (max-width: 760px) {
  .workspace--flow .mm-content-wrap,
  .workspace--flow .editor-scroll {
    padding: var(--space-3);
  }

  .workspace--flow .mm-panel-head {
    padding: 12px 14px 8px;
  }

  .workspace--flow .mm-btn-item {
    padding: 12px 14px;
  }

  .workspace--flow .mm-segmented,
  .workspace--flow .studio-step-deck-tabs {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .workspace--flow .mm-segmented .fd-tab,
  .workspace--flow .studio-step-deck-tabs .fd-tab {
    flex: 1;
    justify-content: center;
  }
}
/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM studio-pro.css — Studio Pro flow editor layout
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   Studio Pro — Flow editor redesign (21st.dev-inspired, minimal)
   ========================================================================== */

/* ── Height lock — chỉ editor-scroll cuộn ───────────────── */
.workspace--flow .workspace-main {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.workspace--flow .page-flow {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.studio-layout {
  overflow: hidden;
}

.studio-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  flex: 1;
}

/* Stack: emoji ghim TRÊN vùng cuộn — luôn thấy khi chỉnh mọi tin nhắn */
.studio-editor-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.studio-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Step deck — gọn, thay hero + banner ───────────────── */
.studio-step-deck {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.studio-step-deck-id {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}

.studio-step-deck-copy {
  min-width: 0;
  flex: 1;
}

.studio-step-deck-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.studio-step-deck-copy p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.studio-step-deck-tabs {
  flex-shrink: 0;
}

.studio-step-deck-tabs.fd-tabs--line {
  border: none;
  gap: 4px;
  flex-direction: row;
  align-items: center;
}

.studio-step-deck-tabs .fd-tab {
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  margin: 0;
}

.studio-step-deck-tabs .fd-tab.active {
  background: var(--surface-active);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 60%, transparent);
}

.editor-step-note {
  margin: 0 0 var(--space-3);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.editor-msg-group {
  margin-bottom: var(--space-4);
}

.editor-msg-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.editor-msg-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.editor-msg-group-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

/* ── Tìm kiếm toàn cục ─────────────────────────────────── */
.editor-canvas--search .editor-scroll--search {
  padding: var(--space-3) var(--space-4) var(--space-5);
}

.search-results-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.search-results-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.search-results-count {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-primary);
}

.search-results-query {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 820px;
}

.search-step-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.search-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
}

.search-step-num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.search-step-copy { min-width: 0; flex: 1; }
.search-step-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.search-step-trigger {
  display: block;
  font-size: 10.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-step-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.search-step-body {
  padding: var(--space-3);
}
.search-step-section + .search-step-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-subtle);
}
.search-step-section-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.search-step-body .editor-msg-grid {
  max-width: none;
}

.search-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.search-empty p { margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; }
.search-empty-hint { font-size: 12px !important; color: var(--text-tertiary) !important; line-height: 1.5; }

mark.search-hit,
.search-hit {
  background: color-mix(in srgb, var(--warning) 35%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.msg-pro-path {
  font-family: var(--font-mono);
  font-size: 10px !important;
}

/* ── Emoji dock — gọn, ít chrome ─ */
.studio-emoji-dock {
  flex-shrink: 0;
  position: relative;
  z-index: 12;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.palette-chip--more {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Emoji dock: menu "Nâng cao" (dán ID, gán nút) ─────── */

/* ── Message cards — tối giản ───────────────────────────── */
.editor-msg-grid {
  gap: 0;
  max-width: none;
}

.studio-layout:not(.is-searching) .editor-canvas:not(.editor-canvas--all) .editor-msg-grid {
  max-width: none;
}

.msg-pro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: visible;
  transition: border-color var(--dur) var(--ease);
}

.msg-pro-card:hover {
  border-color: var(--border-strong);
}

.msg-pro-card.content-field-active,
.msg-pro-card.is-focused {
  border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Focus mode: collapsed field rows ───────────────────── */
.msg-pro-card.is-collapsed { background: transparent; border-color: var(--border-subtle); }
.msg-pro-card.is-collapsed:hover { border-color: var(--border-strong); background: var(--surface); }

.field-row {
  display: grid;
  grid-template-columns: auto minmax(0, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.field-row-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.field-row-dot--warn { background: var(--warning); }
.field-row-dot--empty { background: var(--text-muted); }
.field-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-row-snippet {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-row-placeholder { color: var(--text-muted); font-style: italic; }
.field-row-char {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  justify-self: end;
}
.field-row-char.is-warn { color: var(--warning); font-weight: 700; }
.field-row:hover .field-row-label { color: var(--text-primary); }

/* Grid without the dot column when there's no issue dot */
.field-row:not(:has(.field-row-dot)) { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; }

.msg-pro-card.is-expanded { background: var(--surface); border-color: var(--border-strong); }

/* Inline variable chips inside the expanded toolbar */
.msg-pro-format-vars { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.jy-toolbar-btn--insert {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px !important;
  min-width: auto;
  font-weight: 600;
  color: var(--text-secondary);
}
.jy-toolbar-btn--insert:hover { color: var(--text-primary); background: var(--surface-hover); border-color: var(--border); }

/* ── Command menu popover ("Chèn ▾") ────────────────────── */
.insert-menu-pop {
  position: fixed;
  z-index: 200;
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insert-menu-section { display: flex; flex-direction: column; gap: 3px; }
.insert-menu-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 2px 6px;
}
.insert-menu-list { display: flex; flex-direction: column; gap: 1px; }
.insert-menu-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}
.insert-menu-item:hover { background: var(--surface-hover); }
.insert-menu-item-key {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.insert-menu-item-desc { font-size: 10.5px; color: var(--text-tertiary); }
.insert-menu-empty { font-size: 11.5px; color: var(--text-muted); padding: 4px 8px; margin: 0; }
.insert-menu-manage {
  margin-top: 2px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}
.insert-menu-manage:hover { background: var(--accent-soft); }
.insert-menu-format { display: flex; gap: 4px; }
.insert-menu-fmt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.insert-menu-fmt:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-hover); }

/* ── Emoji manager modal body ───────────────────────────── */
.emoji-manager-body { display: flex; flex-direction: column; gap: var(--space-4); }
.emoji-manager-body .emoji-library { border: 1px solid var(--border); border-radius: var(--radius-md); }

.msg-pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 6px;
}

.msg-pro-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.msg-pro-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.msg-pro-char {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.msg-pro-char.is-quiet { opacity: 0.55; }
.msg-pro-char.is-muted { color: var(--text-tertiary); }
.msg-pro-char.is-warn {
  color: var(--warning);
  font-weight: 700;
  opacity: 1;
}

.msg-pro-format {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 10px 6px;
  flex-wrap: wrap;
}

.msg-pro-format .jy-toolbar-btn {
  min-width: 22px;
  height: 22px;
  font-size: 10.5px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
}

.msg-pro-format .jy-toolbar-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

.msg-pro-format .fd-combobox {
  margin-left: auto;
  max-width: 180px;
}

.msg-pro-body {
  padding: 0 10px 10px;
}

.msg-pro-body .jy-textarea-wrap {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.msg-pro-body .jy-textarea {
  min-height: 96px;
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 12px;
}

.msg-pro-card.content-field-active .msg-pro-body .jy-textarea-wrap,
.msg-pro-card.is-focused .msg-pro-body .jy-textarea-wrap,
.msg-pro-card .jy-textarea-wrap:focus-within {
  border-color: var(--border-strong);
  box-shadow: none;
  background: var(--bg-elevated);
}

.msg-pro-body .jy-textarea-footer {
  display: none;
}

.msg-pro-body .fd-error {
  margin-top: 6px;
}

/* Ẩn clutter cũ trong step editor */
.editor-canvas .editor-step-hero,
.editor-canvas .content-editor-banner,
.editor-canvas > .fd-tabs.editor-tabs,
.editor-canvas > .fd-alert.content-editor-banner {
  display: none !important;
}

.editor-canvas {
  background: transparent;
}

.editor-scroll {
  padding-top: var(--space-4);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* Overview mode */

/* Overview: danh sách trạng thái bước (không phải tường form) */
.overview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 780px;
}

.overview-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.overview-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.overview-row:focus-visible { outline: none; box-shadow: var(--focus); }

.overview-row-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.overview-row-copy { min-width: 0; }
.overview-row-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.overview-row-trigger {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-row-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.overview-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.overview-stat--fields { color: var(--text-muted); background: var(--surface-2); }
.overview-stat--ok { color: var(--success); background: var(--success-soft); }
.overview-stat--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); }
.overview-stat--error { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

@media (max-width: 760px) {
  .overview-row { grid-template-columns: 24px 1fr; grid-template-areas: "num copy" "status status"; row-gap: 8px; }
  .overview-row-num { grid-area: num; }
  .overview-row-copy { grid-area: copy; }
  .overview-row-status { grid-area: status; flex-wrap: wrap; }
}



@media (max-width: 760px) {
  .studio-step-deck-copy p { max-width: 200px; }
  
  /* Thu gọn step deck mạnh tay để editor lên sớm */
  .studio-step-deck {
    padding: 4px 8px;
    gap: 6px;
    min-height: 0;
  }
  .studio-step-deck-id { width: 24px; height: 24px; font-size: 10px; }
  .studio-step-deck-copy h2 { font-size: 12.5px; }
  .studio-step-deck-copy p { font-size: 10px; max-width: 120px; }
  
  .studio-step-deck-tabs .fd-tab { padding: 3px 7px; font-size: 10.5px; }
  .studio-step-deck-tabs.fd-tabs--line,
  .workspace--flow .studio-step-deck-tabs {
    flex-direction: row;
  }

  /* Khi mobile stepnav đang dùng, ẩn bớt step deck để tiết kiệm chiều cao */
  .studio-mobile-stepnav + .studio-step-deck { display: none; }
}

/* ── Variable chips — bấm để chèn, tooltip giải thích ───── */

.var-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.var-chip:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.var-chip:active { transform: translateY(0); }

.var-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.var-chip-mark {
  font-size: 9px;
  opacity: 0.6;
  letter-spacing: -1px;
}

.var-chip--used {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}

.var-chip--used:hover {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, transparent);
  border-color: color-mix(in srgb, var(--success) 46%, var(--border));
}

.var-chip-check { font-size: 9px; }

/* ── Telegram preview: bàn phím nút menu ────────────────── */
.tg-keyboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.tg-kb-row {
  display: flex;
  gap: 4px;
}

.tg-kb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 8px;
  min-width: 0;
}

.tg-kb-emoji { font-size: 11px; opacity: 0.9; }

/* ── Inspector: preview lớn hơn ─────────────────────────── */
.inspector-preview-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.inspector-preview-step-num {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.inspector-panel--preview .inspector-preview-note {
  font-size: 12px;
  line-height: 1.5;
}

/* ── Inspector: emoji dạng thẻ (không bảng) ───────────── */
.inspector-panel--emoji .inspector-emoji-scroll {
  padding: 0;
}
.inspector-panel--emoji .emoji-library {
  margin-top: 0;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.inspector-panel--emoji .emoji-library + .emoji-library {
  border-top: none;
}
.inspector-panel--emoji .emoji-library-body {
  padding: var(--space-3) 0 var(--space-4);
}
.inspector-panel--emoji .palette-hint {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.palette-toolbar--stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.palette-toolbar--stack .palette-new-input,
.palette-toolbar--stack .palette-new-label {
  width: 100%;
}
.palette-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.emoji-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emoji-palette-card,
.emoji-menu-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.emoji-menu-card.is-set {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: color-mix(in srgb, var(--success) 4%, var(--surface));
}
.emoji-palette-card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.emoji-palette-card-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 18px;
}
.emoji-palette-card-copy { flex: 1; min-width: 0; }
.emoji-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}
.emoji-palette-card-id {
  margin-bottom: 10px;
}
.emoji-palette-card-id .jy-input,
.emoji-menu-input {
  width: 100%;
  font-size: 13px;
  padding: 9px 11px;
}
.emoji-tag-preview {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  word-break: break-all;
}
.emoji-palette-card-actions,
.emoji-menu-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.emoji-menu-group + .emoji-menu-group {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.emoji-menu-group-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.emoji-menu-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.emoji-menu-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.emoji-menu-key {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.emoji-menu-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.emoji-menu-card.is-set .emoji-menu-status {
  color: var(--success);
}

/* ── Preview actions: Copy / Send test ──────────────────── */
.inspector-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
}

.inspector-preview-actions .btn { flex: 1; }
.inspector-preview-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Inspector: tab Biến ────────────────────────────────── */
.inspector-panel--vars { gap: var(--space-2); }

.inspector-var-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inspector-var-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  grid-template-areas: "name sample" "desc desc";
  align-items: center;
  gap: 2px 10px;
  padding: 9px 11px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.inspector-var-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.inspector-var-row:focus-visible { outline: none; box-shadow: var(--focus); }

.inspector-hint {
  font-size: 12.5px;
  line-height: 1.5;
}

.inspector-var-name {
  grid-area: name;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.inspector-var-row:hover .inspector-var-name { color: var(--accent); }

.inspector-var-sample {
  grid-area: sample;
  justify-self: end;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-var-desc {
  grid-area: desc;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* ── Inspector: tab Kiểm tra ────────────────────────────── */
.inspector-issue-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  border-radius: 999px;
}

.inspector-issue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inspector-issue {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.inspector-issue:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.inspector-issue:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.inspector-issue-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  color: #fff;
  margin-top: 1px;
}

.inspector-issue--error { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.inspector-issue--error .inspector-issue-icon { background: var(--danger); }
.inspector-issue--warn { border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); }
.inspector-issue--warn .inspector-issue-icon { background: var(--warning); }
.inspector-issue--info { border-color: color-mix(in srgb, var(--info) 28%, var(--border)); }
.inspector-issue--info .inspector-issue-icon { background: var(--info); }

.inspector-issue-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.inspector-issue-field { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.inspector-issue-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.inspector-issues-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  background: var(--success-soft);
}

.inspector-issues-ok-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--success);
  border-radius: 50%;
}

.inspector-issues-ok strong { display: block; font-size: 12.5px; color: var(--text-primary); }
.inspector-issues-ok span { font-size: 11px; color: var(--text-secondary); }

/* ── Emoji popover trong message card ───────────────────── */

/* ── Inspector docked (desktop) ─────────────────────────── */
@media (min-width: 1280px) {
  .studio-inspector--docked .inspector-drawer-head {
    padding: 10px 12px;
  }
  .studio-inspector--docked .inspector-tabs {
    padding: 6px 8px;
  }
  .studio-inspector--docked .inspector-tab {
    min-height: 34px;
    font-size: 12px;
    padding: 7px 8px;
  }
  .studio-inspector--docked .inspector-body {
    padding: var(--space-3);
  }
  .studio-inspector--docked .inspector-panel--preview .phone-frame {
    border-radius: 14px;
    padding: 8px;
  }
  .studio-inspector--docked .inspector-preview-actions {
    margin-top: var(--space-2);
  }
}

/* ── Mobile: preview compact trong drawer ─────────────── */
@media (max-width: 760px) {
  /* Preview = bottom sheet gọn, không phải drawer full màn hình */
  .studio-inspector {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: min(72vh, 560px);
    border-left: none;
    border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 260ms var(--ease);
  }
  .studio-inspector.open { transform: translateY(0); }
  .inspector-drawer-head {
    padding: 10px 14px;
    position: relative;
  }
  /* Grip nhỏ báo hiệu kéo/sheet */
  .inspector-drawer-head::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
  }
  .inspector-tabs .fd-tab {
    font-size: 11px;
    padding: 8px 6px;
    min-height: 36px;
  }
  .inspector-body {
    padding: var(--space-3);
  }
  /* Re-cap phone frame — trước đây max-width:none làm khung phình full màn */
  .inspector-panel--preview .phone-frame {
    max-width: 340px;
    margin: 0 auto;
    border-radius: 12px;
    padding: 6px;
  }
  .inspector-panel--preview .phone-notch {
    width: 44px;
    height: 4px;
    margin: 2px auto 6px;
  }
  .inspector-panel--preview .tg-chat {
    padding: 8px;
    min-height: 100px;
  }
  .inspector-panel--preview .tg-bubble {
    font-size: 13px;
    padding: 10px 11px;
  }
  .inspector-panel--preview .tg-kb-btn {
    font-size: 11.5px;
    padding: 7px 8px;
  }
  .phone-frame-caption {
    display: none;
  }
  .inspector-preview-actions {
    margin-top: var(--space-2);
    gap: 6px;
  }
  .inspector-preview-note {
    font-size: 10px;
  }
  .emoji-palette-card,
  .emoji-menu-card {
    padding: 10px 12px;
  }
  /* Field owns the screen — expanded fills width */
  .editor-msg-grid { max-width: none; }
  .field-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .field-row:not(:has(.field-row-dot)) { grid-template-columns: minmax(0, 1fr) auto; }
  .field-row-snippet { display: none; }
}

/* ── Flow page: giảm glow/decoration toàn workspace ───── */

.workspace--flow .nav-item.tf-nav-item.active {
  box-shadow: inset 2px 0 0 var(--accent);
}
.workspace--flow .workspace-header.tf-header {
  box-shadow: 0 1px 0 var(--border);
}
.workspace--flow .page-title.tf-page-title {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--text-primary);
}
/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM sales-command.css — Sales Command layout layer
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   Sales Command — layout layer cho admin (sales manager hiện đại)
   Load cuối cascade. Không đụng logic API / autosave.
   ========================================================================== */

/* ── Shell density & calm ───────────────────────────────────────────────── */
:root {
  --sidebar-w: 248px;
  --header-h: 56px;
  --content-max: 1320px;
  --sm-gap: 16px;
  --sm-gap-lg: 20px;
  --sm-radius: 12px;
}

/* Bớt “glow / orb” — operator dashboard sạch hơn */

/* Sidebar — rail gọn, nhóm rõ */
.sidebar {
  padding: 14px 10px 12px;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-deep) 100%);
}
.sidebar-header {
  padding: 4px 10px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-dim);
}
.sidebar-logo .brand-text span:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 14.5px;
}
.brand-subtle {
  letter-spacing: 0.12em;
  font-size: 9px;
}
.nav-group {
  margin-bottom: 14px;
}
.nav-group-label {
  padding: 8px 12px 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.nav-item {
  padding: 9px 11px;
  margin-bottom: 2px;
  border-radius: 10px;
  font-size: 13px;
  gap: 11px;
  border-left: none !important;
}
.nav-item:hover {
  transform: none;
  background: var(--surface-2);
}
.nav-item.active {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  border-left: none !important;
  border-radius: 10px;
}
.nav-item.active .nav-icon {
  color: var(--accent);
}
.nav-item.active .nav-text {
  color: var(--text-primary);
  font-weight: 600;
}
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warning-soft);
  color: var(--warning);
}
.nav-badge:empty,
.nav-badge[data-count="0"],
.nav-badge:is(:not([data-count])):is([class*="0"]) {
  /* keep; JS zeros still show — dim when 0 via attribute if set */
}
.sidebar-footer {
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  gap: 2px;
  display: flex;
  flex-direction: column;
}
.sidebar-footer .nav-item {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* Header — command bar */
.workspace-header {
  height: var(--header-h);
  padding: 0 20px 0 18px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.page-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.page-crumb {
  font-size: 11.5px;
  margin-top: 1px;
  color: var(--text-tertiary);
}
.header-search {
  min-width: 200px;
}
.version-badge {
  font-size: 10px;
  opacity: 0.65;
}

/* Main canvas */
.workspace-main {
  padding: 18px 20px 36px;
}
.workspace-main > .page {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Page toolbar — gọn, 1 dòng */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0;
  min-height: 0;
}
.page-toolbar-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  max-width: 52ch;
}
.page-toolbar.page-header-compact {
  margin-bottom: 12px;
}

/* Panels — bớt “nhảy” khi hover */
.panel:hover,
.card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}
.panel,
.card {
  border-radius: var(--sm-radius);
  margin-bottom: var(--sm-gap);
}
.panel-head {
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.panel-head-meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.panel-head-meta b {
  color: var(--text-primary);
  font-weight: 700;
}

/* Tables */
.table-toolbar {
  padding: 10px 14px;
  gap: 8px;
}

/* ==========================================================================
   Dashboard — Sales Command Center
   ========================================================================== */

.sm-dash {
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap-lg);
}

/* Brief */

/* Primary KPI strip */
.sm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.sm-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--sm-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 96px;
  transition: border-color var(--dur) var(--ease);
}
.sm-kpi:hover {
  border-color: var(--border-strong);
}
.sm-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sm-kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.sm-kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sm-kpi-icon svg {
  width: 15px;
  height: 15px;
}
.sm-kpi-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sm-kpi-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: auto;
}
.sm-kpi.is-warn .sm-kpi-value { color: var(--warning); }
.sm-kpi.is-warn .sm-kpi-icon {
  background: var(--warning-soft);
  color: var(--warning);
}
.sm-kpi.is-good .sm-kpi-icon {
  background: var(--success-soft);
  color: var(--success);
}
.sm-kpi.is-accent .sm-kpi-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Workbench: queue + side */
.sm-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: var(--sm-gap);
  align-items: stretch;
}
.sm-workbench > .panel {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sm-queue .alert-list {
  flex: 1;
  max-height: 380px;
  overflow-y: auto;
}
.sm-queue.has-alerts {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}
.sm-queue .panel-head {
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}
.sm-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap);
  min-width: 0;
}
.sm-side-stack > .panel {
  margin-bottom: 0;
}

/* Snapshot metrics (compact) */
.sm-snapshot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px 14px;
}
.sm-snap {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-dim);
}
.sm-snap span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.sm-snap strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sm-snap strong.is-warn { color: var(--warning); }
.sm-snap strong.is-good { color: var(--success); }
.sm-snap strong.is-profit { color: var(--success); }
.sm-snap strong.is-loss { color: var(--danger); }

/* Quick actions — list style (sales ops) */
.sm-quick-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}
.sm-quick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.sm-quick-item:hover {
  background: var(--surface-2);
}
.sm-quick-item.is-urgent {
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}
.sm-quick-item.is-urgent:hover {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.sm-quick-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sm-quick-ico svg { width: 16px; height: 16px; }
.sm-quick-ico.is-warn { background: var(--warning-soft); color: var(--warning); }
.sm-quick-ico.is-good { background: var(--success-soft); color: var(--success); }
.sm-quick-ico.is-accent { background: var(--accent-soft); color: var(--accent); }
.sm-quick-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sm-quick-text strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-primary);
}
.sm-quick-text span {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.sm-quick-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sm-quick-badge.has-count {
  background: var(--warning-soft);
  color: var(--warning);
}
.sm-quick-chevron {
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

/* Performance block */
.sm-perf {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.85fr);
  gap: var(--sm-gap);
  align-items: stretch;
}
.sm-perf > .panel {
  margin-bottom: 0;
  height: 100%;
}
.sm-perf .chart-wrap {
  height: 240px;
}
.sm-lifetime {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}
.sm-life-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dim);
}
.sm-life-row:last-child {
  border-bottom: none;
}
.sm-life-row span {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.sm-life-row strong {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.sm-life-row strong.is-warn { color: var(--warning); }
.sm-life-row strong.is-good { color: var(--success); }

/* Hide legacy dashboard chrome when sm-dash is used */
.sm-dash .page-toolbar.page-header-compact {
  display: none;
}

/* Alert items polish inside command center */
.sm-queue .alert-item {
  border-radius: 0;
  border-bottom: 1px solid var(--border-dim);
}
.sm-queue .alert-item:hover {
  background: var(--surface-2);
}
.sm-queue .alert-empty {
  padding: 36px 20px;
}

/* ==========================================================================
   Global pages — content rhythm
   ========================================================================== */
.products-grid,
.product-grid {
  gap: 12px;
}
.btn-sm {
  border-radius: 9px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .sm-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm-workbench,
  .sm-perf {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 720px) {
  .workspace-main {
    padding: 14px 12px 28px;
  }
  .sm-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sm-kpi {
    min-height: 84px;
    padding: 12px;
  }
  .sm-kpi-value {
    font-size: 18px;
  }

  .sm-snapshot {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .header-search { display: none; }
  .version-badge { display: none; }
  .clock { display: none; }
}

/* Light theme tweaks */

[data-theme="light"] .sidebar {
  background: var(--bg-elevated);
}
[data-theme="light"] .workspace-header {
  background: rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   Shared page chrome (Orders / Products / Topups / Users / …)
   ========================================================================== */

.sm-page {
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap);
}

.sm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.sm-page-head-copy {
  min-width: 0;
  flex: 1;
}
.sm-page-kicker {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.sm-page-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--text-primary);
}
.sm-page-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 58ch;
}
.sm-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Legacy page-toolbar hidden when using sm-page-head via pageHeader */
.page-toolbar {
  display: none;
}
/* Errors still use sm-page-head; keep toolbar if ever outside sm-page */
.sm-page-head + .btn,
.sm-page > .btn {
  align-self: flex-start;
}

/* Filter rail */
.sm-filter-rail {
  padding: 10px 12px;
  border-radius: var(--sm-radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.sm-filter-bar.filter-bar,
.sm-filter-rail .filter-bar {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sm-filter-rail .filter-bar-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 650;
}
.sm-filter-rail .products-controls {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.sm-filter-rail .products-controls-row {
  gap: 12px;
}

/* Compact KPI variants for inner pages */
.sm-kpi-row--compact {
  gap: 10px;
}
.sm-kpi-row--compact .sm-kpi {
  min-height: 78px;
  padding: 12px 14px;
}
.sm-kpi-row--compact .sm-kpi-value {
  font-size: 18px;
}
.sm-kpi-row--ops {
  margin-top: 12px;
}

/* Orders ops strip */
.sm-ops-strip {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.sm-ops-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.sm-ops-strip-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.sm-health-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, var(--surface) 58%, transparent 59%),
    conic-gradient(var(--accent) calc(var(--sm-health, 0) * 1%), var(--surface-2) 0);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.sm-health-ring strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.sm-health-ring span {
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.sm-method-mix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-dim);
  font-size: 12px;
  color: var(--text-secondary);
}
.sm-method-mix-label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sm-method-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-dim);
  font-weight: 500;
}
.sm-method-pill b {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sm-method-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Tables */
.sm-table-panel {
  margin-bottom: 0;
}
.sm-table-panel .table-toolbar {
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--surface));
}
.sm-table-panel .table-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Supplier tabs in filter rail */
.sm-supplier-tabs.jy-tabs,
.sm-filter-rail .jy-tabs {
  margin: 0;
  gap: 4px;
  flex-wrap: wrap;
}
.sm-supplier-tabs .jy-tab {
  border-radius: 8px;
  font-size: 12.5px;
}

/* Products mode toggle polish */
.products-mode {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 3px;
}
.products-mode-btn {
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
}
.products-mode-btn.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Hide old order-ops-overview chrome if any leftover */

@media (max-width: 720px) {
  .sm-page-title { font-size: 17px; }
  .sm-page-actions { width: 100%; }
  .sm-method-hint { margin-left: 0; width: 100%; }
  .sm-kpi-row--compact {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Studio · Nội dung bot — gọn + emoji-first
   ========================================================================== */

.studio-emoji-dock {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}
.studio-emoji-dock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.studio-emoji-dock-head strong {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.studio-emoji-dock-head span {
  font-size: 11px;
  color: var(--text-tertiary);
}
.studio-emoji-dock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.studio-emoji-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
}
.studio-emoji-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.studio-emoji-dock-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.studio-emoji-dock-hint code {
  font-size: 10.5px;
}

/* Nhãn ngắn (Giá / Tồn / …): 1 dòng, denser */
.msg-pro-card--short .msg-pro-body {
  margin-top: 2px;
}
.msg-pro-card--short .editor-input-line,
.editor-input-line {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.msg-pro-card.has-custom-emoji {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.msg-pro-emoji-badge {
  font-size: 11px;
  opacity: 0.9;
}
.field-row-dot--emoji {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.msg-pro-format-emoji {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: 4px;
}
.editor-msg-group-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
}
.editor-step-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Studio rail denser */
.studio-rail-step {
  border-radius: 10px;
}
.studio-rail-ready {
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
}

/* Panel fields spacing */
.editor-msg-group + .editor-msg-group {
  margin-top: 12px;
}
.mm-panel--fields .mm-field-list {
  gap: 8px;
}

/* Live emoji preview (Telegram getCustomEmojiStickers) */
.emoji-live-thumb {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: middle;
  background: var(--surface-2);
  flex-shrink: 0;
}
.emoji-live-thumb.is-broken {
  opacity: 0.35;
  content: "";
}
.emoji-live-fallback {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 14px;
  border-radius: 4px;
  background: var(--surface-2);
}
.emoji-chip--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.emoji-chip-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.emoji-palette-card-icon--live {
  display: grid !important;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}
.emoji-palette-card-icon--live .emoji-live-thumb {
  width: 28px;
  height: 28px;
}
.emoji-menu-live {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  flex-shrink: 0;
  overflow: hidden;
}
.emoji-menu-live .emoji-live-thumb {
  width: 28px;
  height: 28px;
}
.emoji-insert-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.emoji-insert-preview {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 18px;
}
.emoji-insert-preview .emoji-live-thumb {
  width: 36px;
  height: 36px;
}
.studio-emoji-chip .emoji-live-thumb {
  width: 18px;
  height: 18px;
}

.pc-avatar--emoji {
  padding: 0;
  overflow: hidden;
  background: var(--surface-2) !important;
  display: grid;
  place-items: center;
}
.pc-avatar--emoji .emoji-live-thumb {
  width: 28px;
  height: 28px;
}
.pc-field--emoji .pc-emoji-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-emoji-live {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-tertiary);
}
.pc-emoji-live .emoji-live-thumb {
  width: 22px;
  height: 22px;
}
.emoji-ref--live {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 1px;
}
.emoji-ref--live .emoji-live-thumb {
  width: 18px;
  height: 18px;
}
.tg-kb-emoji {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.tg-kb-emoji .emoji-live-thumb {
  width: 16px;
  height: 16px;
}
.emoji-live-thumb--pending {
  display: inline-block;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: emoji-shimmer 1.1s ease infinite;
  border-radius: 4px;
}
@keyframes emoji-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.insert-menu-item-key--emoji {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM apple-higi.css — Apple HIG layout layer (font + colors)
   ═════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   BanHang Studio — Apple HIG layout layer (final override)
   Structure, spacing, materials inspired by macOS Settings / App Store Connect.
   No framework. Keeps existing class names & flows.
   ========================================================================== */

:root {
  /* System type stack (SF Pro on Apple devices) */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Inter", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* Apple dark materials */
  --bg: #000000;
  --bg-deep: #000000;
  --bg-elevated: #1c1c1e;
  --bg-subtle: #111113;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --surface-hover: #2c2c2e;
  --surface-active: #3a3a3c;

  --border: rgba(84, 84, 88, 0.65);
  --border-dim: rgba(84, 84, 88, 0.36);
  --border-strong: rgba(142, 142, 147, 0.55);
  --border-subtle: rgba(84, 84, 88, 0.28);

  --text-primary: #f5f5f7;
  --text: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #8e8e93;
  --text-muted: #8e8e93;

  /* BanHang brand: giữ hệ thống màu cam nhất quán thay vì lẫn xanh hệ thống. */
  --brand: #d97757;
  --accent: #ee7143;
  --accent-2: #ffb18b;
  --accent-hover: #d75d33;
  --accent-active: #bd4826;
  --accent-soft: rgba(238, 113, 67, 0.18);
  --accent-muted: rgba(238, 113, 67, 0.1);
  --accent-gradient: linear-gradient(135deg, #ffb18b 0%, #ee7143 58%, #cf542d 100%);
  --on-fill: #ffffff;

  --success: #30d158;
  --success-soft: rgba(48, 209, 88, 0.16);
  --warning: #ffd60a;
  --warning-soft: rgba(255, 214, 10, 0.14);
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.16);
  --info: #64d2ff;
  --info-soft: rgba(100, 210, 255, 0.14);

  /* Layout — Apple density */
  --sidebar-w: 260px;
  --header-h: 52px;
  --content-max: 1180px;
  --studio-rail-w: 240px;
  --studio-inspector-w: 360px;
  --tap: 44px;

  /* 8pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Continuous-ish radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --dur-fast: 120ms;

  --focus: 0 0 0 4px rgba(10, 132, 255, 0.35);

  --premium-edge: var(--border);
  --premium-shadow: var(--shadow-sm);
  --premium-shadow-hover: var(--shadow-md);
}

[data-theme="light"] {
  --bg: #f2f2f7;
  --bg-deep: #e5e5ea;
  --bg-elevated: #ffffff;
  --bg-subtle: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e5e5ea;
  --surface-hover: #e5e5ea;
  --surface-active: #d1d1d6;

  --border: rgba(60, 60, 67, 0.18);
  --border-dim: rgba(60, 60, 67, 0.1);
  --border-strong: rgba(60, 60, 67, 0.29);
  --border-subtle: rgba(60, 60, 67, 0.08);

  --text-primary: #1d1d1f;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;
  --text-muted: #8e8e93;

  --accent: #007aff;
  --accent-2: #64d2ff;
  --accent-hover: #0071e3;
  --accent-active: #0066d6;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --accent-muted: rgba(0, 122, 255, 0.08);
  --accent-gradient: linear-gradient(180deg, #1494ff 0%, #007aff 100%);

  --success: #34c759;
  --success-soft: rgba(52, 199, 89, 0.14);
  --warning: #ff9f0a;
  --warning-soft: rgba(255, 159, 10, 0.14);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.12);
  --info: #5ac8fa;
  --info-soft: rgba(90, 200, 250, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
  --focus: 0 0 0 4px rgba(0, 122, 255, 0.28);
}

/* ── Base ─────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg) !important;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -0.01em;
}

body::before,
body::after,
.workspace-ambient,
.ambient-grid,
.login-orb,
.login-grid,
.tf-border-beam::before,
.tf-border-beam::after {
  display: none !important;
}

/* ── App shell ────────────────────────────────────────── */
.app {
  min-height: 100dvh;
  background: var(--bg);
}

/* Sidebar — Settings.app style */
.sidebar {
  width: var(--sidebar-w);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent) !important;
  border-right: 1px solid var(--border-dim) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.sidebar-header {
  height: var(--header-h);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
}

.sidebar-logo .brand-mark,
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--brand, #d97757) !important;
  box-shadow: none !important;
  border: none !important;
  color: #fff !important;
}

.sidebar-logo .brand-text span:first-child,
.brand-name {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.brand-subtle,
.brand-sub {
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 12px;
}

.sidebar-nav {
  padding: var(--space-3) var(--space-3) var(--space-5);
  gap: var(--space-4);
}

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

.nav-group-label {
  margin: var(--space-2) var(--space-3) 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary) !important;
}

.nav-item,
.tf-nav-item {
  min-height: 36px;
  border-radius: 8px !important;
  border: none !important;
  padding: 0 10px !important;
  gap: 10px;
  color: var(--text-secondary);
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nav-item:hover {
  background: var(--surface-2) !important;
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  border: none !important;
}

.nav-item.active .nav-icon {
  color: var(--accent) !important;
  background: transparent !important;
}

.nav-item .nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: transparent !important;
}

.nav-item .nav-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.6;
}

.nav-badge {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 650;
  background: var(--danger);
  color: #fff;
  box-shadow: none !important;
}

.sidebar-footer {
  border-top: 1px solid var(--border-dim);
  padding: var(--space-3);
}

/* Header / workspace */
.workspace-header,
.main-header,
.content-header {
  height: var(--header-h);
  min-height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.main-content,
.content,
.workspace-main,
.page {
  background: transparent;
}

.workspace-body,
.main-scroll,
.content-scroll,
.page-body {
  padding: var(--space-6) var(--space-6) var(--space-8) !important;
  max-width: calc(var(--content-max) + 2 * var(--space-6));
}

/* Page title — large title style */
.page-header,
.page-toolbar {
  margin-bottom: var(--space-5);
  padding-left: 0 !important;
  gap: var(--space-3);
}

.page-toolbar::before {
  display: none !important;
}

.page-title,
.page-header h1,
.page-toolbar h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
}

.page-crumb,
.page-toolbar-desc,
.page-subtitle {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary) !important;
  letter-spacing: -0.01em;
}

/* Search */
.header-search,
.search-input,
.fd-input,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
select {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans);
  font-size: 15px;
  min-height: 36px;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.header-search:focus-within,
.fd-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--focus) !important;
  outline: none;
  background: var(--surface) !important;
}

/* Buttons */
.btn,
button.btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px !important;
  font-size: 14px;
  font-weight: 590;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary,
.tf-btn-shine {
  background: var(--accent) !important;
  color: var(--on-fill) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: var(--accent-hover) !important;
  box-shadow: none !important;
}

.btn-ghost,
.btn-secondary {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--surface-3) !important;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-secondary);
}

.icon-btn:hover {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
}

/* Cards / panels — grouped inset */
.panel,
.card,
.tf-glass-panel,
.stat-card,
.pay-method-card,
.dashboard-hero,
.order-ops-overview,
.product-card,
.hint-box {
  background: var(--surface) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.panel-head {
  min-height: 44px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  background: transparent;
}

.panel-head-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.panel-body {
  padding: 16px;
}

.hint-box {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--surface-2) !important;
  border-radius: 10px !important;
}

/* Stats */
.stat-card {
  padding: 16px !important;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.stat-card:hover {
  border-color: var(--border) !important;
  box-shadow: none !important;
  transform: none !important;
}

.stat-card strong,
.pay-method-card strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-card span,
.pay-method-card span {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Tables — list rows */
.table-wrap,
table {
  border-radius: var(--radius-md);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

thead th {
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-tertiary);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-dim);
}

tbody td {
  min-height: 44px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

/* Tabs */
.jy-tab,
.pay-tab,
.filter-chip,
.action-chip {
  min-height: 32px;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  font-size: 13px;
  font-weight: 590;
  background: transparent;
  color: var(--text-secondary);
}

.jy-tab.active,
.pay-tab.active,
.filter-chip.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}

.jy-tabs,
.supplier-tabs {
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border-dim);
}

/* Badges */
.badge {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 3px 7px;
  border: none;
}

/* Toggle */
.toggle-switch .toggle-slider,
.toggle-slider {
  border-radius: 999px;
}

/* Login — clean Apple card */
.login-screen {
  background: var(--bg) !important;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-container {
  width: min(400px, 100%);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.login-card,
.tf-login-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 28px 24px !important;
}

.login-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}

.login-header p {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.login-footer {
  margin-top: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Forms */
.field label,
.fd-label,
label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.fd-description,
.td-muted {
  color: var(--text-tertiary) !important;
  font-size: 12px;
}

.field-grid,
.form-grid {
  gap: 12px !important;
}

/* Crypto wallet rows already added — refine */
.crypto-wallet-row {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 12px !important;
}

/* Dashboard hero */

/* Toast / modal */
.toast,
.modal,
.sheet,
.drawer {
  border-radius: 14px !important;
  border: 1px solid var(--border-dim) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
}

/* Reduce motion noise from older layers */

/* Mobile */
@media (max-width: 900px) {
  .workspace-body,
  .main-scroll,
  .content-scroll,
  .page-body {
    padding: 16px 14px 28px !important;
  }

  .page-title,
  .page-header h1,
  .page-toolbar h1 {
    font-size: 24px !important;
  }

  .sidebar {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .btn,
  button.btn,
  .icon-btn {
    min-height: 44px;
  }

  .nav-item {
    min-height: 44px;
  }

  /* prevent horizontal scroll */
  .app,
  .workspace-body,
  .table-wrap {
    max-width: 100%;
    overflow-x: hidden;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Focus visible accessibility */
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Selection */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text-primary);
}

/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM neo-sales.css — Neo Sales Command visual layer
   ═════════════════════════════════════════════════════════════════════════ */
/* ========================================================================
   Neo Sales Command
   Final visual layer for the operating dashboard. This intentionally owns
   only the shared shell, Dashboard and Orders so existing admin workflows
   keep their current markup and behavior.
   ======================================================================== */

:root {
  --neo-panel-solid: #1d1a17;
  --neo-orange: #ef6b42;
  --neo-hot: #ffbc7e;
  --neo-cyan: #67d8e8;
  --neo-lime: #a9d993;
  --neo-grid: rgba(255, 170, 112, .055);
  --neo-line: rgba(255, 214, 183, .12);
  --neo-glow: 0 18px 58px rgba(0, 0, 0, .38);
  --neo-ease: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="light"] {
  --neo-panel-solid: #fffbf7;
  --neo-orange: #c74c28;
  --neo-hot: #f3935d;
  --neo-cyan: #168aa1;
  --neo-lime: #528b4a;
  --neo-grid: rgba(180, 78, 34, .06);
  --neo-line: rgba(70, 38, 22, .12);
  --neo-glow: 0 20px 46px rgba(82, 49, 28, .12);
}

body {
  background:
    radial-gradient(920px 460px at 74% -14%, rgba(239, 107, 66, .12), transparent 72%),
    radial-gradient(680px 440px at 2% 104%, rgba(174, 140, 255, .09), transparent 76%),
    var(--bg);
}

.workspace {
  position: relative;
  isolation: isolate;
}

.workspace::before {
  content: "";
  position: fixed;
  inset: var(--header-h) 0 0 var(--sidebar-w);
  z-index: -1;
  pointer-events: none;
  opacity: .78;
  background-image:
    linear-gradient(var(--neo-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--neo-grid) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.88), transparent 84%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.88), transparent 84%);
}

/* ── Application chrome ─────────────────────────────────────────────── */
.sidebar {
  background:
    radial-gradient(380px 260px at 0 -2%, rgba(239, 107, 66, .15), transparent 76%),
    linear-gradient(180deg, rgba(29, 26, 23, .98), rgba(12, 11, 10, .98));
  border-right: 1px solid var(--neo-line);
}

[data-theme="light"] .sidebar {
  background:
    radial-gradient(380px 260px at 0 -2%, rgba(239, 107, 66, .14), transparent 76%),
    linear-gradient(180deg, #fffaf5, #f0e8e0);
}

.sidebar-logo .brand-mark {
  position: relative;
  overflow: visible;
  background: linear-gradient(145deg, var(--neo-hot), var(--neo-orange));
  color: #24110a;
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 10px 24px rgba(239, 107, 66, .25);
}

.sidebar-logo .brand-mark::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: inherit;
  border: 1px solid rgba(255, 188, 126, .42);
  inset: -6px;
  opacity: .75;
}

.nav-item {
  position: relative;
  overflow: hidden;
  transition: color 180ms var(--neo-ease), background 180ms var(--neo-ease), transform 180ms var(--neo-ease), box-shadow 180ms var(--neo-ease) !important;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(100deg, rgba(239, 107, 66, .24), rgba(239, 107, 66, .04) 74%);
  transition: opacity 180ms var(--neo-ease);
}

.nav-item > * { position: relative; z-index: 1; }
.nav-item:hover { transform: translateX(3px) !important; background: rgba(255, 255, 255, .04); }
.nav-item:hover::before,
.nav-item.active::before { opacity: 1; }
.nav-item.active {
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--neo-hot), 0 8px 18px rgba(0, 0, 0, .14) !important;
  background: linear-gradient(100deg, rgba(239, 107, 66, .18), rgba(239, 107, 66, .025)) !important;
}

.nav-item.active .nav-icon { color: var(--neo-hot) !important; filter: drop-shadow(0 0 9px rgba(255, 154, 98, .36)); }
.nav-group-label { color: color-mix(in srgb, var(--neo-hot) 78%, var(--text-tertiary)); }

.workspace-header {
  background: color-mix(in srgb, var(--bg-elevated) 77%, transparent) !important;
  border-bottom-color: var(--neo-line) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
}

.page-title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-radius: 999px;
  vertical-align: 2px;
  background: var(--neo-lime);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--neo-lime) 14%, transparent), 0 0 16px color-mix(in srgb, var(--neo-lime) 65%, transparent);
}

.autosave {
  border-color: var(--neo-line);
  background: color-mix(in srgb, var(--neo-panel-solid) 72%, transparent);
}

.workspace-main { padding-bottom: 56px; }

/* ── Shared Neo panel primitives ─────────────────────────────────────── */
.sm-dash .panel,
.sm-page .panel,
.sm-ops-strip,
.sm-kpi,
.neo-priority-deck {
  border: 1px solid var(--neo-line);
  background: linear-gradient(140deg, color-mix(in srgb, var(--neo-panel-solid) 90%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));
  box-shadow: var(--neo-glow);
}

.sm-dash .panel,
.sm-page .panel,
.sm-ops-strip { overflow: hidden; }

.panel-head,
.neo-panel-head {
  position: relative;
  border-bottom: 1px solid var(--neo-line);
  background: linear-gradient(90deg, rgba(255,255,255,.032), transparent 65%);
}

.panel-head::before,
.neo-panel-head::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--neo-hot);
  box-shadow: 0 0 12px rgba(255, 154, 98, .68);
}

.btn-primary {
  border-color: rgba(255, 198, 157, .4);
  background: linear-gradient(135deg, var(--neo-hot), var(--neo-orange)) !important;
  color: #2a120a !important;
  box-shadow: 0 9px 22px rgba(239, 107, 66, .25);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(239, 107, 66, .34); }

.btn-ghost {
  border-color: var(--neo-line);
  background: color-mix(in srgb, var(--neo-panel-solid) 66%, transparent);
}

/* ── Dashboard hero ─────────────────────────────────────────────────── */
.neo-hero {
  position: relative;
  min-height: 252px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(260px, .72fr);
  gap: 22px;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 182, 133, .24);
  background:
    radial-gradient(circle at 86% 24%, rgba(255, 154, 98, .25), transparent 21%),
    radial-gradient(circle at 82% 106%, rgba(174, 140, 255, .17), transparent 38%),
    linear-gradient(130deg, #281914 0%, #1c1715 42%, #171515 100%);
  box-shadow: 0 25px 65px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.08);
}

[data-theme="light"] .neo-hero {
  background:
    radial-gradient(circle at 86% 24%, rgba(239, 107, 66, .22), transparent 21%),
    radial-gradient(circle at 82% 106%, rgba(119, 87, 204, .13), transparent 38%),
    linear-gradient(130deg, #fff8f1, #f8eee7 58%, #f0e7e1);
}

.neo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .52;
  background-image:
    linear-gradient(rgba(255, 203, 169, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 203, 169, .07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(120deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 72%);
}

.neo-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.neo-hero-eyebrow { margin: 0 0 11px; color: var(--neo-hot); font: 700 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.neo-hero-title { max-width: 16ch; margin: 0; font-family: var(--font-display); color: var(--text-primary); font-size: clamp(27px, 3vw, 40px); line-height: 1.02; letter-spacing: -.056em; }
.neo-hero-title strong { color: var(--neo-hot); font-weight: inherit; }
.neo-hero-sub { max-width: 59ch; margin: 14px 0 20px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.neo-hero-sub b { color: var(--text-primary); }
.neo-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.neo-hero-actions .btn { min-height: 35px; }

.neo-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(169, 217, 147, .22);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--neo-lime);
  background: rgba(92, 153, 79, .1);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.neo-live-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; animation: neoPulse 1.8s ease-in-out infinite; }

.neo-orbit {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 205px;
  align-self: center;
}
.neo-orbit::before,
.neo-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255, 194, 152, .16); border-radius: 50%; }
.neo-orbit::before { width: 220px; height: 220px; border-style: dashed; animation: neoRotate 28s linear infinite; }
.neo-orbit::after { width: 166px; height: 166px; border-color: rgba(174, 140, 255, .26); animation: neoRotate 17s linear infinite reverse; }
.neo-orbit-core {
  width: 132px;
  height: 132px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 204, 169, .28);
  background: conic-gradient(from 210deg, var(--neo-orange) calc(var(--neo-progress) * 1%), rgba(255, 255, 255, .075) 0);
  box-shadow: 0 0 0 8px rgba(10,9,8,.64), 0 0 42px rgba(239, 107, 66, .28);
  position: relative;
  isolation: isolate;
}
.neo-orbit-core::after { content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: inherit; background: #1d1714; }
[data-theme="light"] .neo-orbit-core::after { background: #fff9f3; }
.neo-orbit-core small { font: 700 9px/1 var(--font-mono); letter-spacing: .12em; color: var(--text-tertiary); text-transform: uppercase; }
.neo-orbit-core strong { margin: 5px 0 3px; font-family: var(--font-display); font-size: 27px; line-height: 1; letter-spacing: -.06em; color: var(--text-primary); }
.neo-orbit-core span { font-size: 10px; color: var(--neo-hot); }
.neo-orbit-node { position: absolute; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--neo-line); border-radius: 10px; background: rgba(19,16,14,.74); box-shadow: 0 9px 22px rgba(0,0,0,.18); color: var(--text-secondary); font: 600 10px/1 var(--font-mono); white-space: nowrap; }
[data-theme="light"] .neo-orbit-node { background: rgba(255,252,248,.82); }
.neo-orbit-node b { color: var(--text-primary); font-size: 11px; }
.neo-orbit-node::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neo-cyan); box-shadow: 0 0 10px var(--neo-cyan); }
.neo-orbit-node--stock { top: 8%; left: 4%; }
.neo-orbit-node--stock::before { background: var(--neo-lime); box-shadow: 0 0 10px var(--neo-lime); }
.neo-orbit-node--queue { right: 1%; bottom: 8%; }
.neo-orbit-node--queue::before { background: var(--neo-hot); box-shadow: 0 0 10px var(--neo-hot); }

/* ── Dashboard cards ────────────────────────────────────────────────── */
.sm-dash .sm-kpi-row { gap: 14px; }
.sm-dash .sm-kpi {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  padding: 17px;
  border-radius: 16px;
  transition: transform 220ms var(--neo-ease), border-color 220ms var(--neo-ease), box-shadow 220ms var(--neo-ease) !important;
}
.sm-dash .sm-kpi::after { content: ""; position: absolute; width: 100px; height: 100px; right: -42px; bottom: -52px; border-radius: 50%; background: var(--neo-accent-glow, rgba(255, 154, 98, .13)); filter: blur(1px); }
.sm-dash .sm-kpi:hover { transform: translateY(-5px) rotateX(1deg); border-color: color-mix(in srgb, var(--neo-card, var(--neo-hot)) 44%, var(--neo-line)); box-shadow: 0 22px 36px rgba(0,0,0,.25); }
.sm-dash .sm-kpi.is-accent { --neo-card: var(--neo-hot); --neo-accent-glow: rgba(255, 154, 98, .17); background: linear-gradient(145deg, rgba(239,107,66,.17), rgba(28,23,21,.85) 65%); }
.sm-dash .sm-kpi.is-good { --neo-card: var(--neo-lime); --neo-accent-glow: rgba(169,217,147,.13); background: linear-gradient(145deg, rgba(169,217,147,.12), rgba(28,23,21,.85) 65%); }
.sm-dash .sm-kpi.is-warn { --neo-card: var(--neo-hot); --neo-accent-glow: rgba(255,188,126,.16); background: linear-gradient(145deg, rgba(255,188,126,.14), rgba(28,23,21,.85) 65%); }
.sm-dash .sm-kpi-value { position: relative; z-index: 1; font-size: clamp(25px, 2vw, 32px); }
.sm-dash .sm-kpi-meta { position: relative; z-index: 1; }
.sm-dash .sm-kpi-icon { width: 34px; height: 34px; border-radius: 11px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, var(--neo-card, var(--text-primary)) 14%, transparent); color: var(--neo-card, var(--text-primary)); }

.sm-queue { border-radius: 16px !important; }
.sm-queue .panel-head { background: linear-gradient(90deg, rgba(255,188,126,.13), transparent 62%) !important; }
.sm-queue .alert-item { position: relative; margin: 4px 8px; border: 1px solid transparent; border-radius: 12px; transition: transform 180ms var(--neo-ease), border-color 180ms var(--neo-ease), background 180ms var(--neo-ease); }
.sm-queue .alert-item:hover { transform: translateX(5px); border-color: var(--neo-line); background: rgba(255,255,255,.04); }
.sm-queue .alert-item::after { content: ""; position: absolute; right: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--neo-hot); box-shadow: 0 0 12px var(--neo-hot); }
.sm-queue .alert-empty { min-height: 230px; background: radial-gradient(circle at 50% 42%, rgba(169,217,147,.1), transparent 42%); }
.sm-side-stack > .panel { border-radius: 16px; }
.sm-snap { background: rgba(255,255,255,.025); transition: background 180ms var(--neo-ease), transform 180ms var(--neo-ease); }
.sm-snap:hover { background: rgba(255,154,98,.09); transform: translateY(-2px); }
.sm-quick-item { border: 1px solid transparent; }
.sm-quick-item:hover { border-color: var(--neo-line); background: linear-gradient(100deg, rgba(255,154,98,.09), transparent); transform: translateX(3px); }
.sm-quick-ico { border: 1px solid var(--neo-line); }

.sm-perf .panel { border-radius: 16px; }
.sm-perf .chart-wrap { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.sm-lifetime .sm-life-row { transition: background 180ms var(--neo-ease); }
.sm-lifetime .sm-life-row:hover { background: linear-gradient(90deg, rgba(174,140,255,.1), transparent); }

/* ── Orders command workspace ───────────────────────────────────────── */
.sm-page .sm-page-head { margin-bottom: 16px; }
.sm-ops-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(0, 1.7fr);
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 3% 4%, rgba(174,140,255,.17), transparent 28%),
    linear-gradient(135deg, rgba(255,154,98,.11), rgba(28,24,22,.82) 42%, rgba(103,216,232,.07));
}
.sm-ops-strip::after { content: ""; position: absolute; width: 230px; height: 230px; right: -90px; top: -140px; border: 1px solid rgba(103,216,232,.19); border-radius: 50%; box-shadow: 0 0 0 24px rgba(103,216,232,.028), 0 0 0 58px rgba(103,216,232,.018); pointer-events: none; }
.sm-ops-strip-head { align-items: flex-start; position: relative; z-index: 1; }
.sm-ops-strip-title { font-size: 22px; }
.sm-health-ring { background: conic-gradient(var(--neo-lime) calc(var(--sm-health) * 1%), rgba(255,255,255,.09) 0); box-shadow: 0 0 0 7px rgba(8,8,7,.53), 0 0 27px rgba(169,217,147,.18); }
.sm-kpi-row--ops { position: relative; z-index: 1; align-content: center; }
.sm-ops-strip .sm-kpi { background: rgba(14,12,11,.34); border-color: rgba(255,255,255,.085); }

.neo-priority-deck {
  position: relative;
  margin: 16px 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}
.neo-priority-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--neo-line); background: linear-gradient(100deg, rgba(255,188,126,.14), transparent 58%); }
.neo-priority-head-copy { display: flex; align-items: center; gap: 11px; }
.neo-priority-head-copy > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,154,98,.16); color: var(--neo-hot); }
.neo-priority-head-copy > i svg { width: 16px; height: 16px; }
.neo-priority-head p { margin: 0; color: var(--text-tertiary); font-size: 11px; }
.neo-priority-head h3 { margin: 2px 0 0; font-size: 14px; color: var(--text-primary); }
.neo-priority-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.neo-priority-card { position: relative; min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); overflow: hidden; transition: transform 180ms var(--neo-ease), border-color 180ms var(--neo-ease), box-shadow 180ms var(--neo-ease); }
.neo-priority-card::before { content: ""; position: absolute; width: 120px; height: 120px; top: -83px; right: -58px; border-radius: 50%; background: var(--neo-card-glow, rgba(255,188,126,.13)); }
.neo-priority-card--crypto { --neo-card-glow: rgba(174,140,255,.16); }
.neo-priority-card:hover { transform: translateY(-4px); border-color: rgba(255,188,126,.29); box-shadow: 0 15px 26px rgba(0,0,0,.2); }
.neo-priority-top, .neo-priority-meta, .neo-priority-actions { position: relative; z-index: 1; }
.neo-priority-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.neo-priority-code { color: var(--neo-hot); font: 700 11px/1 var(--font-mono); letter-spacing: .04em; }
.neo-priority-name { overflow: hidden; margin: 12px 0 4px; color: var(--text-primary); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.neo-priority-amount { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 750; letter-spacing: -.04em; color: var(--text-primary); }
.neo-priority-meta { display: flex; gap: 7px; align-items: center; margin-top: 9px; color: var(--text-tertiary); font-size: 10.5px; }
.neo-priority-meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.neo-priority-actions { display: flex; gap: 7px; margin-top: 14px; }
.neo-priority-actions .btn { flex: 1; min-height: 31px; padding-inline: 9px; font-size: 11px; }

.sm-filter-rail { position: sticky; top: calc(var(--header-h) + 10px); z-index: 5; border-radius: 14px; border-color: var(--neo-line) !important; background: color-mix(in srgb, var(--neo-panel-solid) 84%, transparent) !important; box-shadow: 0 12px 28px rgba(0,0,0,.18); backdrop-filter: blur(16px); }
.fd-tabs--line .fd-tab.active { color: var(--neo-hot); box-shadow: inset 0 -2px 0 var(--neo-hot); }
.sm-table-panel { border-radius: 18px !important; }
.sm-table-panel .table-toolbar { background: linear-gradient(90deg, rgba(103,216,232,.06), transparent 52%); border-bottom-color: var(--neo-line); }
.orders-table tbody tr { transition: background 160ms var(--neo-ease), transform 160ms var(--neo-ease), box-shadow 160ms var(--neo-ease); }
.orders-table tbody tr:hover { position: relative; z-index: 1; background: linear-gradient(90deg, rgba(255,154,98,.105), rgba(255,154,98,.018)) !important; transform: scale(1.002); box-shadow: inset 3px 0 0 var(--neo-hot); }
.orders-table tbody tr.row-pending { background: linear-gradient(90deg, rgba(255,188,126,.075), transparent 72%); }
.orders-table .order-code-cell .cell-link { color: var(--neo-hot); }
.orders-table .user-avatar { background: linear-gradient(135deg, rgba(255,154,98,.3), rgba(174,140,255,.24)); border: 1px solid rgba(255,213,183,.15); }
.action-chip.success { background: rgba(169,217,147,.13); border-color: rgba(169,217,147,.29); color: var(--neo-lime); }
.action-chip.danger { background: rgba(224,122,122,.12); }

/* ── Overlays ────────────────────────────────────────────────────────── */
.drawer { border-left-color: var(--neo-line); background: linear-gradient(150deg, var(--neo-panel-solid), var(--bg-elevated)); }
.drawer-header { background: linear-gradient(90deg, rgba(255,154,98,.1), transparent); border-bottom-color: var(--neo-line); }
.order-detail-hero { overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(255,154,98,.24), transparent 35%), linear-gradient(135deg, rgba(174,140,255,.13), rgba(239,107,66,.11)); border-color: var(--neo-line); }
.order-timeline-step.is-done > span { background: var(--neo-lime); box-shadow: 0 0 16px rgba(169,217,147,.38); }

/* ── Motion and responsive ───────────────────────────────────────────── */
@keyframes neoPulse { 50% { transform: scale(.72); opacity: .5; } }
@keyframes neoRotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .neo-live-chip i,
  .neo-orbit::before,
  .neo-orbit::after { animation: none !important; }
  .sm-dash .sm-kpi:hover,
  .neo-priority-card:hover,
  .orders-table tbody tr:hover,
  .nav-item:hover { transform: none !important; }
}

@media (max-width: 1080px) {
  .neo-hero { grid-template-columns: 1fr; }
  .neo-orbit { min-height: 178px; margin-top: -10px; }
  .sm-ops-strip { grid-template-columns: 1fr; }
  .sm-kpi-row--ops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .workspace::before { left: 0; }
  .neo-hero { min-height: 0; padding: 20px; border-radius: 18px; }
  .neo-hero-title { max-width: none; font-size: 29px; }
  .neo-hero-sub { font-size: 12px; }
  .neo-orbit { min-height: 156px; transform: scale(.85); margin: -11px 0 -17px; }
  .sm-dash .sm-kpi-row { grid-template-columns: 1fr 1fr; }
  .sm-dash .sm-kpi { min-height: 112px; }
  .sm-workbench, .sm-perf { grid-template-columns: 1fr; }
  .neo-priority-cards { grid-template-columns: 1fr; }
  .sm-ops-strip { padding: 14px; }
  .sm-kpi-row--ops { grid-template-columns: 1fr 1fr; }
  .sm-filter-rail { position: static; }
}

@media (max-width: 430px) {
  .neo-hero-actions .btn { flex: 1; }
  .neo-hero-actions .btn:last-child { flex: 0; }
  .sm-dash .sm-kpi-row, .sm-kpi-row--ops { gap: 9px; }
  .sm-dash .sm-kpi { padding: 13px; }
  .sm-dash .sm-kpi-value { font-size: 23px; }
  .neo-priority-head { align-items: flex-start; flex-direction: column; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MERGED FROM premium-v3.css — Premium V3 final visual orchestration
   ═════════════════════════════════════════════════════════════════════════ */
/* ======================================================================
   BanHang Premium V3 — final visual orchestration layer
   Calm depth, strong hierarchy, operator-first responsive layout.
   ====================================================================== */

:root {
  --premium-edge: color-mix(in srgb, var(--accent) 18%, var(--border));
  --premium-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .035) inset;
  --premium-shadow-hover: 0 14px 36px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .05) inset;
}

[data-theme="light"] {
  --premium-shadow: 0 18px 44px rgba(53, 48, 40, .09), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --premium-shadow-hover: 0 24px 54px rgba(53, 48, 40, .13), 0 1px 0 rgba(255, 255, 255, .95) inset;
}

body {
  background:
    radial-gradient(circle at 76% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34rem),
    var(--bg);
}

/* Ambient grid — cùng density/feel với Mini gate (36px, low opacity) */

/* Shell */
.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--bg-elevated) 40%),
    var(--bg-elevated);
  border-right-color: color-mix(in srgb, var(--accent) 10%, var(--border));
  box-shadow: 14px 0 42px rgba(0, 0, 0, .1);
}

.sidebar::before { display: none; }

.sidebar-header,
.sidebar-nav,
.sidebar-footer { position: relative; z-index: 1; }

.sidebar-logo .brand-mark {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent);
}

.nav-group-label {
  letter-spacing: .13em;
  color: color-mix(in srgb, var(--text-muted) 82%, var(--accent));
}

.nav-item {
  border: 1px solid transparent;
  position: relative;
}

.nav-item .nav-icon {
  border-radius: 8px;
  transition: background var(--dur), color var(--dur), transform var(--dur);
}

.nav-item:hover .nav-icon { transform: translateX(1px); }

.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 17%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item.active .nav-icon {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.nav-badge {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.workspace-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  border-bottom-color: color-mix(in srgb, var(--accent) 8%, var(--border));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.page-title { letter-spacing: -.035em; }
.page-crumb { color: color-mix(in srgb, var(--text-tertiary) 88%, var(--accent)); }

.header-search {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
}

.header-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--focus);
}

.icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  color: var(--text-primary);
}

/* Common premium surfaces */
.page-toolbar {
  position: relative;
  padding-left: 14px;
}

.page-toolbar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-gradient);
}

.page-toolbar-desc { color: var(--text-secondary); }

.panel,
.card,
.tf-glass-panel {
  border-color: var(--border);
  box-shadow: none;
  background: var(--surface);
}

.btn-primary {
  background: var(--accent);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: none;
}

.stat-card {
  transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}

.stat-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

/* Orders — command center */

.order-profit-cell.is-profit,
.order-pnl-cell.is-profit strong,
.pc-metric-profit.is-profit .pc-profit-val,
.is-profit { color: var(--success) !important; }
.order-profit-cell.is-loss,
.order-pnl-cell.is-loss strong,
.pc-metric-profit.is-loss .pc-profit-val,
.is-loss { color: var(--danger, #ef4444) !important; }

.order-pnl-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}
.order-pnl-cell {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}
.order-pnl-cell span {
  display: block;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.order-pnl-cell strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -.03em;
  color: var(--text-primary);
}
.order-pnl-cell small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.order-item-pnl {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.order-item-pnl:last-child { border-bottom: 0; padding-bottom: 0; }
.order-item-pnl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.order-item-pnl-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 11.5px;
}
.order-item-pnl-grid b { color: var(--text-primary); font-weight: 650; }
.order-item-unit { margin-top: 4px; font-size: 10.5px; }

.leg-profit::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  background: var(--success);
  vertical-align: middle;
}
.ct-profit {
  display: block;
  color: var(--success);
  font-weight: 650;
  font-size: 12px;
}

.pc-metric-profit .pc-profit-val {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pc-margin-pill {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 650;
}
.pc-metric-profit.is-profit .pc-margin-pill {
  background: var(--success-soft);
  color: var(--success);
}
.pc-metric-profit.is-loss .pc-margin-pill {
  background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
  color: var(--danger, #ef4444);
}

.method-mix-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; }

.mix-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.mix-crypto { background: var(--warning); }
.mix-balance { background: var(--success); }

#page-orders .filter-bar {
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--accent) 10%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

#page-orders .fd-tabs { padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
#page-orders .fd-tab { border-radius: 7px; }
#page-orders .fd-tab.active { background: var(--surface-active); box-shadow: 0 1px 0 rgba(255,255,255,.035) inset; }

#page-orders .panel { overflow: hidden; }
#page-orders .table-toolbar { background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%); }
.orders-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.orders-table tbody tr { transition: transform .16s var(--ease), background .16s ease; }
.orders-table tbody tr:hover { transform: none; }
.orders-table .row-pending td { background: color-mix(in srgb, var(--warning-soft) 38%, transparent); }
.orders-table .row-pending:hover td { background: color-mix(in srgb, var(--warning-soft) 58%, transparent); }
.action-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.action-chip.success { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 17%, transparent), color-mix(in srgb, var(--success) 8%, transparent)); }

/* Order detail drawer */
.drawer {
  border-left-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--accent) 4%);
  box-shadow: -26px 0 70px rgba(0,0,0,.34);
}

.order-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 60%), var(--surface);
}

.order-detail-kicker { display: block; color: var(--text-tertiary); font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; }
.order-detail-hero > div > strong { display: block; margin: 5px 0 8px; font-family: var(--font-display); font-size: 25px; letter-spacing: -.045em; }
.order-detail-hero small { display: flex; flex-wrap: wrap; gap: 5px; }
.order-detail-mark { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 17px; color: #fff; background: var(--accent-gradient); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 25%, transparent); transform: rotate(-5deg); }
.order-detail-mark svg { width: 24px; height: 24px; }

.order-timeline { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: start; margin: 0 2px 16px; }
.order-timeline-step { display: grid; justify-items: center; gap: 5px; min-width: 72px; text-align: center; color: var(--text-muted); }
.order-timeline-step > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); font: 700 10px var(--font-mono); }
.order-timeline-step strong { display: block; font-size: 10.5px; }
.order-timeline-step small { display: block; max-width: 86px; margin-top: 1px; color: var(--text-muted); font-size: 8.5px; line-height: 1.3; }
.order-timeline-step.is-done { color: var(--success); }
.order-timeline-step.is-done > span { color: #06251d; border-color: transparent; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.order-timeline-step.is-cancelled { color: var(--danger); }
.order-timeline-step.is-cancelled > span { color: #fff; border-color: transparent; background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.order-timeline-line { height: 2px; margin-top: 12px; background: var(--border-strong); }
.order-timeline-line.is-done { background: var(--success); }

.detail-card { border-color: color-mix(in srgb, var(--accent) 9%, var(--border)); background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); }
.detail-badge-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.order-detail-total { margin-top: .5rem; font-size: 1.1rem; }

.emoji-insert-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: var(--radius-md);
  background: var(--accent-muted);
}
.emoji-insert-visual > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); font-size: 20px; }
.emoji-insert-visual strong,
.emoji-insert-visual small { display: block; }
.emoji-insert-visual strong { font-size: 13px; }
.emoji-insert-visual small { margin-top: 2px; color: var(--text-tertiary); font-size: 11px; }

/* Bot content studio */
.workspace--flow .studio-layout {
  background: radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem), var(--bg);
}

.workspace--flow .studio-rail {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--bg-elevated));
  border-right-color: color-mix(in srgb, var(--accent) 12%, var(--border));
}

.studio-rail-step {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.studio-rail-step:hover { border-color: var(--border); }
.studio-rail-step.active { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); box-shadow: inset 3px 0 0 var(--accent); }
.studio-rail-progress { display: block; width: 100%; height: 2px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: var(--border-subtle); }
.studio-rail-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--success)); }
.studio-rail-issue,
.studio-rail-ready { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 9px var(--font-mono); }
.studio-rail-issue { color: var(--warning); background: var(--warning-soft); }
.studio-rail-ready { color: var(--success); background: var(--success-soft); }

.workspace--flow .studio-toolbar {
  background: var(--bg-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}
.workspace--flow .studio-toolbar-search { max-width: none; }

.workspace--flow .studio-step-deck {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg-elevated) 94%, var(--accent) 6%), var(--bg-elevated));
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, var(--border));
}

.studio-step-health { display: flex; align-items: center; gap: 8px; flex: none; padding: 5px 9px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 84%, transparent); }
.studio-step-health-ring { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle closest-side, var(--surface) 71%, transparent 73%), conic-gradient(var(--success) var(--step-progress), var(--border) 0); }
.studio-step-health-ring b { font: 800 8px var(--font-mono); }
.studio-step-health-copy { display: grid; gap: 1px; }
.studio-step-health-copy strong { font-size: 10.5px; }
.studio-step-health-copy small { color: var(--text-muted); font-size: 9px; }
.studio-step-health.has-issues .studio-step-health-ring { background: radial-gradient(circle closest-side, var(--surface) 71%, transparent 73%), conic-gradient(var(--warning) var(--step-progress), var(--border) 0); }
.studio-step-health.has-issues .studio-step-health-copy strong { color: var(--warning); }

.workspace--flow .mm-panel {
  border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border));
  box-shadow: 0 12px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025);
}
.workspace--flow .mm-content-wrap,
.workspace--flow .editor-scroll { width: 100%; margin-inline: auto; }

.workspace--flow .mm-field-item.is-expanded {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, var(--surface-hover)), var(--surface-hover));
}

.workspace--flow .mm-field-item.is-expanded.content-field-active,
.workspace--flow .mm-field-item.is-expanded.is-focused {
  box-shadow: inset 3px 0 0 var(--accent), 0 14px 34px rgba(0,0,0,.12);
}

.workspace--flow .jy-textarea-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 66%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent), 0 12px 28px color-mix(in srgb, var(--accent) 7%, transparent);
}

.studio-inspector {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, var(--accent) 3%), var(--bg-elevated));
  border-left-color: color-mix(in srgb, var(--accent) 14%, var(--border));
  box-shadow: -20px 0 50px rgba(0,0,0,.16);
}

.phone-frame {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 24px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Responsive — no horizontal page scrolling */


@media (min-width: 901px) and (max-width: 1535px) {
  .workspace--flow .studio-rail { padding: 8px 4px; }
  .workspace--flow .studio-rail-head { padding-inline: 2px; }
  .workspace--flow .studio-rail-step { justify-content: center; gap: 3px; padding: 6px 3px; }
  .workspace--flow .studio-rail-issue,
  .workspace--flow .studio-rail-ready { position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; font-size: 7px; }
  .workspace--flow .studio-rail-progress { display: none; }
}

@media (max-width: 760px) {
  .workspace-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  #page-orders .table-wrap { overflow: visible; }
  .orders-table,
  .orders-table tbody { display: block; width: 100%; }
  .orders-table thead { display: none; }
  .orders-table tbody { padding: 8px; }
  .orders-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "code status"
      "user total"
      "pay time"
      "action action";
    gap: 9px 12px;
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .orders-table tbody tr:last-child { margin-bottom: 0; }
  .orders-table tbody tr.orders-empty-row { display: block; padding: 0; }
  .orders-table tbody tr.orders-empty-row td { display: block; width: 100%; }
  .orders-table tbody tr:hover { transform: none; }
  .orders-table td,
  .orders-table .row-pending td { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; white-space: normal; }
  .orders-table .row-pending { border-color: color-mix(in srgb, var(--warning) 28%, var(--border)); box-shadow: inset 3px 0 0 var(--warning); }
  .order-code-cell { grid-area: code; }
  .order-status-cell { grid-area: status; justify-self: end; }
  .order-user-cell { grid-area: user; min-width: 0; }
  .order-total-cell { grid-area: total; align-self: center; }
  .order-pay-cell { grid-area: pay; }
  .order-time-cell { grid-area: time; align-self: center; text-align: right; }
  .order-action-cell { grid-area: action; padding-top: 9px !important; border-top: 1px solid var(--border-subtle) !important; }
  .order-action-cell .row-actions { width: 100%; }
  .order-action-cell .action-chip { flex: 1; min-height: 36px; justify-content: center; }
  .orders-table .cell-stack .td-primary,
  .orders-table .cell-stack .td-muted { max-width: 46vw; }

  .order-timeline { grid-template-columns: 1fr; gap: 0; margin-left: 4px; }
  .order-timeline-step { min-width: 0; grid-template-columns: 26px 1fr; justify-items: start; text-align: left; }
  .order-timeline-step > div { padding: 3px 0 12px; }
  .order-timeline-step small { max-width: none; }
  .order-timeline-line { width: 2px; height: 18px; margin: -7px 0 -2px 12px; }

  .studio-step-health-copy { display: none; }
  .studio-step-health { padding: 4px; }
  .workspace--flow .studio-autosave {
    display: inline-flex !important;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    border-radius: 50%;
  }
  .workspace--flow .studio-autosave::before { width: 8px; height: 8px; margin: 0; }
  .workspace--flow .studio-layout { grid-template-columns: 1fr !important; }
  .workspace--flow .studio-rail { display: none !important; }
}

@media (max-width: 430px) {

  .order-detail-hero { padding: 14px; }
  .order-detail-mark { width: 46px; height: 46px; }
}

body.overlay-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   Visual QA pass — dashboard and catalog
   The empty-state layout is intentionally compact: no large dead panels
   when every queue is clear. Keep the warm orange identity, and let data
   carry the visual weight instead of a dense decorative grid.
   ══════════════════════════════════════════════════════════ */
.workspace::before { opacity: .24; }

.sm-workbench { align-items: start; }
.sm-workbench > .panel { height: auto; }
.sm-workbench--idle { display: block; }
.sm-workbench--idle .sm-side-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: start;
}
.sm-workbench--idle .sm-side-stack > .panel { min-width: 0; }
.sm-queue--empty .alert-empty {
  min-height: 116px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(132, 163, 125, .08), transparent 62%);
}
.sm-queue--empty .alert-empty p { margin: 0; max-width: 34ch; }

/* Catalog: raise hierarchy for fast scanning without adding nested boxes. */
.products-page .product-card {
  border-color: color-mix(in srgb, var(--border) 76%, var(--accent) 8%) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface)) !important;
}
.products-page .product-card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important; }
.products-page .pc-accent { background: linear-gradient(90deg, var(--accent), var(--accent-2) 42%, transparent 78%); }
.products-page .pc-header { padding-bottom: 2px; }
.products-page .pc-emoji-row { min-width: 0; }
.products-page input.pc-mono { min-width: 0; font-size: 11px; color: var(--text-secondary); }

/* Default catalog view: a decision card, not a compressed form. */
.product-overview-card {
  gap: 14px;
  min-height: 222px;
  padding: 16px !important;
}
.pc-overview-name {
  display: -webkit-box;
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pc-overview-metrics {
  display: grid;
  grid-template-columns: 1.15fr 1fr .8fr;
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.pc-overview-metrics > div { min-width: 0; }
.pc-overview-metrics span,
.pc-overview-metrics small { display: block; color: var(--text-tertiary); font-size: 10px; }
.pc-overview-metrics span { margin-bottom: 5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.pc-overview-metrics strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-overview-metrics small { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-overview-metrics .is-profit strong { color: var(--success); }
.pc-overview-metrics .is-loss strong { color: var(--danger); }
.pc-overview-stock.is-low strong { color: var(--warning); }
.pc-overview-stock.is-zero strong { color: var(--danger); }
.product-overview-card .pc-footer { margin-top: auto; }
.product-overview-card .pc-footer .btn { min-height: 32px; }

@media (max-width: 780px) {
  .workspace::before { opacity: .13; }
  .sm-workbench--idle .sm-side-stack { grid-template-columns: 1fr; }
  .pc-overview-metrics { grid-template-columns: 1.12fr 1fr .76fr; }
}

/* ══════════════════════════════════════════════════════════
   Calm unity — 1 ngôn ngữ comfort dark + terracotta
   Chặn glow / glass / spotlight / 3D / shimmer còn sót
   ══════════════════════════════════════════════════════════ */
:root {
  --ease-spring: var(--ease-out);
}

body {
  background: var(--bg);
}

.workspace-header,
.workspace--flow .studio-toolbar,
.orders-table thead th,
.fd-alert-dialog-content,
.modal-backdrop,
.cmd-overlay,
.sidebar-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Không halo / beam / spotlight */
.tf-spotlight-glow,
.tf-border-beam::before,
.tf-btn-shine::after,
.tf-glass-panel::before,
.dashboard-hero::after,
.stat-card-glow,
.login-orb,
.login-grid,
.workspace-ambient { display: none !important; }

.page-title.tf-page-title,
.dashboard-hero.tf-hero .dashboard-hero-kpis .hero-kpi strong {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: unset !important;
}

.sidebar-logo .brand-mark,
.btn-primary,
.nav-item.active,
.header-search:focus-within,
.ops-chip.tf-chip,
.toast-item {
  box-shadow: none !important;
  filter: none !important;
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* Panel / glass alias = surface phẳng */
.panel,
.card,
.glass-panel,
.tf-glass-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Modal / drawer: shadow đen nhẹ, không glow accent */
.modal,
.drawer {
  box-shadow: var(--shadow-lg) !important;
}

/* Motion: ngắn, không overshoot */
.modal,
.toast-item,
.drawer,
.fd-alert-dialog {
  animation-timing-function: var(--ease-out) !important;
}

/* ── Product cards — force flat (wins last cascade) ─────── */
.products-page .panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.product-card.tf-product-card,
.product-card {
  box-shadow: none;
  background: var(--surface);
}
.product-card.tf-product-card:hover {
  transform: none;
}
.product-card .pc-metrics,
.product-card .pc-fields,
.product-card .pc-api,
.product-card .pc-metric {
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
.product-card input.pc-input,
.product-card textarea.pc-input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.product-card input.pc-input:hover,
.product-card textarea.pc-input:hover {
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
}
.product-card input.pc-input:focus,
.product-card textarea.pc-input:focus {
  border-bottom-color: var(--accent) !important;
  box-shadow: none !important;
  background: transparent !important;
}
.product-card .pc-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.product-card .pc-api {
  white-space: normal !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.product-card .badge-stock {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
.product-card .pc-api {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .order-metric,
  .orders-table tbody tr,
  .nav-item .nav-icon { transition: none !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT UNITY — cascade winner (2026-07)
   Khóa shell + spacing + panel system. Chặn lệch từ layer neo/premium/calm.
   Không đụng logic API / autosave / product flows.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Shell — một nguồn sự thật */
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 64px;
  --header-h: 56px;
  --content-max: 1320px;

  /* Page rhythm */
  --page-pad-x: 24px;
  --page-pad-y: 20px;
  --page-pad-x-md: 16px;
  --page-pad-y-md: 16px;
  --page-pad-x-sm: 12px;
  --page-pad-y-sm: 14px;
  --page-gap: 16px;
  --page-gap-lg: 20px;

  /* Panel / card */
  --panel-radius: 14px;
  --panel-pad: 16px;
  --panel-head-h: 48px;
  --panel-gap: 12px;

  /* Sales tokens (alias) */
  --sm-gap: var(--page-gap);
  --sm-gap-lg: var(--page-gap-lg);
  --sm-radius: 12px;
}

/* ── Shell: app / sidebar / workspace ─────────────────────────────────── */

.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  padding: 14px 10px 12px !important;
  box-sizing: border-box;
}

.sidebar--collapsed {
  width: var(--sidebar-collapsed-w) !important;
}

.workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace-header {
  height: var(--header-h);
  min-height: var(--header-h);
  max-height: var(--header-h);
  padding: 0 var(--page-pad-x) !important;
  gap: 12px !important;
  box-sizing: border-box;
  overflow: hidden;
}

.header-left,
.header-right {
  min-height: 0;
  align-items: center;
}

.header-right {
  gap: 8px !important;
  flex-shrink: 0;
  max-width: 58%;
  min-width: 0;
}

.header-tool-group {
  gap: 6px !important;
  flex-shrink: 0;
}

.header-divider {
  height: 16px !important;
  margin: 0 2px;
}

/* Clock: không đẩy header — scale gọn desktop */
.bh-clock {
  width: 148px !important;
  height: 28px !important;
  max-width: 148px;
  flex-shrink: 0;
}
#topbar-clock.bh-clock {
  width: 148px !important;
  height: 28px !important;
}

.header-search {
  width: min(220px, 28vw) !important;
  flex-shrink: 1;
  min-width: 140px;
}

/* The workspace is narrower than the viewport once the desktop sidebar is open.
   Keep the header's operator controls inside that real working width. */
@media (max-width: 1535px) and (min-width: 901px) {
  .workspace-header {
    gap: 8px !important;
  }
  .header-right {
    gap: 4px !important;
  }
  .header-tool-group {
    gap: 4px !important;
  }
  .header-divider {
    display: none;
  }
  .header-search {
    width: min(170px, 18vw) !important;
    min-width: 112px;
  }
  .bh-clock,
  #topbar-clock.bh-clock {
    width: 112px !important;
    max-width: 112px;
  }
  .version-badge {
    display: none;
  }
}

.workspace-main {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) + 24px) !important;
  box-sizing: border-box;
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

/* Flow full-bleed vẫn giữ */
.workspace--flow .workspace-main {
  padding: 0 !important;
  overflow: hidden;
}
.workspace--flow .page {
  max-width: none;
}

/* ── Page chrome ─────────────────────────────────────────────────────── */

.sm-page,
.sm-dash {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap-lg);
  min-width: 0;
}

.sm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 0 2px;
}

.sm-page-head-copy {
  min-width: 0;
  flex: 1 1 200px;
}

.sm-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
}

.sm-page-title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.sm-page-sub {
  max-width: 58ch;
}

/* Toolbar card cũ — tắt khi dùng sm-page-head; nếu còn dùng thì flat */
.page-toolbar {
  display: none;
}

.sm-filter-rail {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 12px;
  border-radius: var(--sm-radius);
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Panel system — một chuẩn duy nhất ───────────────────────────────── */

.panel,
.card,
.sm-dash .panel,
.sm-page .panel,
.tf-glass-panel,
.glass-panel {
  margin-bottom: 0 !important;
  border-radius: var(--panel-radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  overflow: hidden;
  transform: none !important;
  transition: border-color var(--dur-base) var(--ease) !important;
}

.panel:hover,
.card:hover,
.sm-dash .panel:hover,
.sm-page .panel:hover {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ::before glow-dot neo làm lệch flex panel-head (thêm flex item) */
.panel-head::before,
.neo-panel-head::before,
.card-head::before {
  content: none !important;
  display: none !important;
}

.panel-head,
.card-head,
.neo-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  min-height: var(--panel-head-h);
  height: auto;
  padding: 12px var(--panel-pad) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  background: transparent !important;
  box-sizing: border-box;
}

.panel-head > span:first-child,
.panel-head > .panel-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.panel-head-meta {
  flex-shrink: 0;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  white-space: nowrap;
}

.panel-body {
  padding: var(--panel-pad) !important;
}

/* ── KPI / stat cards — không nhảy layout khi hover ──────────────────── */

.sm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--panel-gap);
  min-width: 0;
}

.sm-kpi,
.sm-dash .sm-kpi,
.stat-card,
.sm-dash .sm-kpi.is-accent,
.sm-dash .sm-kpi.is-good,
.sm-dash .sm-kpi.is-warn {
  min-height: 104px;
  padding: 14px 16px !important;
  border-radius: var(--panel-radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden;
  min-width: 0;
}

.sm-kpi::after,
.sm-dash .sm-kpi::after,
.stat-card-glow {
  display: none !important;
  content: none !important;
}

.sm-kpi:hover,
.sm-dash .sm-kpi:hover,
.stat-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.sm-kpi.is-accent {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border)) !important;
}
.sm-kpi.is-good {
  background: color-mix(in srgb, var(--success-soft) 50%, var(--surface)) !important;
}
.sm-kpi.is-warn {
  background: color-mix(in srgb, var(--warning-soft) 50%, var(--surface)) !important;
}

.sm-kpi-value,
.sm-dash .sm-kpi-value {
  font-size: 22px !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Compact KPI (products page) */
.sm-kpi-row--compact .sm-kpi {
  min-height: 88px;
  padding: 12px 14px !important;
}
.sm-kpi-row--compact .sm-kpi-value {
  font-size: 18px !important;
}

/* ── Dashboard grids ─────────────────────────────────────────────────── */

.sm-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  gap: var(--page-gap);
  align-items: start;
  min-width: 0;
}

.sm-workbench > .panel,
.sm-workbench--idle .sm-side-stack > .panel {
  height: auto;
  min-width: 0;
}

.sm-workbench--idle {
  display: block;
}

.sm-workbench--idle .sm-side-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: var(--page-gap);
  align-items: start;
}

.sm-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  min-width: 0;
}

.sm-perf {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
  gap: var(--page-gap);
  align-items: start;
  min-width: 0;
}

.sm-perf > .panel {
  min-width: 0;
  height: auto;
}

.sm-snapshot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px 14px;
  min-width: 0;
}

.sm-snap {
  min-width: 0;
  transform: none !important;
}
.sm-snap:hover {
  transform: none !important;
}

/* ── Tables / lists — không scale khi hover ──────────────────────────── */

.orders-table tbody tr,
.sm-page table tbody tr {
  transform: none !important;
}
.orders-table tbody tr:hover,
.sm-page table tbody tr:hover {
  transform: none !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.sm-queue .alert-item {
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.sm-queue .alert-item:hover {
  transform: none !important;
  background: var(--surface-2) !important;
}
.sm-queue .alert-item::after {
  display: none !important;
}

.sm-quick-item:hover {
  transform: none !important;
}

/* ── Nav active — không double border ────────────────────────────────── */

.nav-item {
  transform: none !important;
}
.nav-item:hover {
  transform: none !important;
}
.nav-item.active {
  border-left: none !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
  border-radius: var(--radius-md) !important;
  background: var(--accent-soft) !important;
}

/* ── Buttons — không nhảy ────────────────────────────────────────────── */

.btn-primary:hover,
.btn:hover,
.pay-method-card:hover {
  transform: none !important;
}

/* ── Ops strip / neo chrome — làm phẳng, giữ layout ──────────────────── */

.sm-ops-strip {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.7fr);
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--panel-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
  min-width: 0;
}
.sm-ops-strip::after {
  display: none !important;
}

.neo-priority-deck {
  border-radius: var(--panel-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
.neo-priority-card:hover {
  transform: none !important;
}

/* ── Sidebar overlay — một hành vi ───────────────────────────────────── */

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  display: block;
  transition: opacity var(--dur-base) var(--ease);
}
.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* ── Responsive — breakpoint thống nhất ─────────────────────────────── */

@media (max-width: 1200px) {
  .header-search {
    width: min(180px, 22vw) !important;
    min-width: 120px;
  }
  .bh-clock,
  #topbar-clock.bh-clock {
    width: 120px !important;
  }
}

@media (max-width: 1100px) {
  .sm-kpi-row,
  .sm-dash .sm-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm-workbench,
  .sm-perf,
  .sm-workbench--idle .sm-side-stack,
  .main-content-grid {
    grid-template-columns: 1fr;
  }

  .sm-ops-strip {
    grid-template-columns: 1fr;
  }
  .sm-kpi-row--ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .workspace-header {
    padding: 0 var(--page-pad-x-md) !important;
  }
  .workspace-main {
    padding: var(--page-pad-y-md) var(--page-pad-x-md) calc(var(--page-pad-y-md) + 20px) !important;
  }
  .header-search {
    width: 160px !important;
  }
  .search-kbd {
    display: none;
  }
  .bh-clock,
  #topbar-clock.bh-clock {
    display: none !important;
  }
  .version-badge {
    display: none;
  }
}

/* Mobile shell — một breakpoint 760 */
@media (max-width: 760px) {
  .header-menu {
    display: grid !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    width: min(280px, 86vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    padding-top: 14px !important;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .workspace-header {
    padding: 0 var(--page-pad-x-sm) !important;
    gap: 8px !important;
  }
  .workspace-main {
    padding: var(--page-pad-y-sm) var(--page-pad-x-sm) calc(var(--page-pad-y-sm) + 16px) !important;
  }

  .page-title {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-crumb,
  .header-search,
  .bh-clock,
  #topbar-clock.bh-clock,
  .autosave,
  .refresh-pill,
  .header-divider,
  .version-badge,
  .search-kbd,
  .clock {
    display: none !important;
  }

  .header-right {
    gap: 4px !important;
    max-width: none;
  }

  .sm-page-title {
    font-size: 17px !important;
  }
  .sm-page-actions {
    width: 100%;
  }
  .sm-page-actions .btn {
    flex: 1 1 auto;
  }

  .sm-kpi-row,
  .sm-dash .sm-kpi-row,
  .sm-kpi-row--ops {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sm-kpi,
  .sm-dash .sm-kpi {
    min-height: 88px;
    padding: 12px !important;
  }
  .sm-kpi-value,
  .sm-dash .sm-kpi-value {
    font-size: 18px !important;
  }

  .sm-snapshot {
    grid-template-columns: 1fr;
  }

  .sm-filter-rail {
    position: static;
  }

}

@media (max-width: 430px) {
  .workspace-main {
    padding: 12px 10px 20px !important;
  }
  .sm-kpi-row,
  .sm-dash .sm-kpi-row,
  .sm-kpi-row--ops {
    gap: 8px;
  }
  .sm-dash-hero .btn,
  .sm-dash .btn {
    min-width: 0;
  }
  .neo-hero-actions .btn,
  .neo-hero-actions .btn:last-child {
    flex: 1 1 100%;
    padding-inline: 8px;
    font-size: 12px;
    white-space: normal;
  }
  .neo-hero-actions .btn svg {
    display: none;
  }
}

/* Prevent horizontal page scroll */
.workspace-main,
.page,
.sm-page,
.sm-dash {
  max-width: 100%;
  overflow-x: clip;
}

html,
body {
  overflow-x: hidden;
}

/* Light theme: keep flat surfaces */
[data-theme="light"] .panel,
[data-theme="light"] .card,
[data-theme="light"] .sm-kpi,
[data-theme="light"] .sm-filter-rail {
  background: var(--surface) !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .card,
  .sm-kpi,
  .nav-item,
  .btn,
  .orders-table tbody tr,
  .alert-item {
    transition: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   REAL-UI FIX PASS — from Playwright screenshots 2026-07
   Header overflow, menu always-on, ops-strip 2-col crush, clock button
   ══════════════════════════════════════════════════════════════════════════ */

/* Hamburger: class list is "icon-btn header-menu" — .icon-btn {display:grid}
   was winning over .header-menu {display:none}. Force correct behavior. */
.header-menu.icon-btn,
button.header-menu {
  display: none !important;
}
@media (max-width: 760px) {
  .header-menu.icon-btn,
  button.header-menu {
    display: grid !important;
  }
}

/* Header shell — never clip tools off-screen */
.workspace-header {
  overflow: hidden !important;
  gap: 10px !important;
}
.header-left {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 42%;
}
.header-right {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  overflow: hidden;
}
.header-tool-group {
  flex: 0 1 auto;
  min-width: 0;
  gap: 6px !important;
}
.header-tool-group--actions {
  flex: 0 0 auto;
}

/* Search shrinks first when space is tight */
.header-search,
.header-search.tf-search {
  width: clamp(140px, 18vw, 220px) !important;
  min-width: 0 !important;
  flex: 1 1 140px;
  max-width: 220px;
}
@media (max-width: 1100px) {
  .header-search,
  .header-search.tf-search {
    width: clamp(120px, 16vw, 180px) !important;
    max-width: 180px;
  }
  .autosave-text { display: none; }
  .autosave { padding-inline: 8px; min-width: 22px; justify-content: center; }
}
@media (max-width: 900px) {
  .header-search,
  .header-search.tf-search,
  .bh-clock-btn,
  .version-badge,
  .header-divider {
    display: none !important;
  }
}

/* Mono text clock — always aligned, no canvas overflow */
.bh-clock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 52px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.bh-clock-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text-primary);
}
.bh-clock-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.bh-clock-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

/* Version badge compact — long "UI vYYYYMMDD-HHMM" was ~111px */
.version-badge {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px !important;
  padding: 2px 6px !important;
  flex-shrink: 0;
}
@media (max-width: 1280px) {
  .version-badge { display: none !important; }
}

/* Live + autosave compact */
.autosave,
.refresh-pill {
  flex-shrink: 0;
}

/* ── Orders ops strip: stack vertically (neo 2-col crushed the title) ── */
.sm-ops-strip {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  grid-template-columns: none !important;
  padding: 16px 18px !important;
  border-radius: var(--panel-radius, 14px) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  min-width: 0;
}
.sm-ops-strip::after {
  display: none !important;
  content: none !important;
}
.sm-ops-strip-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100%;
  margin: 0;
}
.sm-ops-strip-head > div:first-child {
  min-width: 0;
  flex: 1;
}
.sm-ops-strip-title {
  font-size: 16px !important;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-health-ring {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0;
  box-shadow: none !important;
}
.sm-kpi-row--ops {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  width: 100%;
}
.sm-ops-strip .sm-kpi {
  min-height: 88px !important;
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-dim) !important;
}
.sm-method-mix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  .sm-kpi-row--ops {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .sm-ops-strip-title {
    white-space: normal;
  }
}

/* Toast: don't cover primary content on mobile */
@media (max-width: 760px) {
  .toast-stack {
    bottom: 12px !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Sidebar off-canvas must not expand page width */
@media (max-width: 760px) {
  .sidebar:not(.open) {
    visibility: hidden;
    pointer-events: none;
  }
  .sidebar.open {
    visibility: visible;
    pointer-events: auto;
  }
  html, body, .app {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
}

/* Page head actions never force horizontal scroll */
.sm-page-head {
  width: 100%;
  min-width: 0;
}
.sm-page-actions {
  max-width: 100%;
}
.sm-page-actions .btn {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   Bảo hành — tra cứu tài khoản, phương án hoàn, phiếu BH
   ══════════════════════════════════════════════════════════ */

.wr-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0 0 10px;
  line-height: 1.6;
}
.wr-hint code,
.wr-policy-chip b {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.wr-hint kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
}

.wr-policy-chip {
  white-space: nowrap;
}

.wr-search-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wr-query {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  resize: vertical;
  min-height: 76px;
}
.wr-search-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.wr-qty-field {
  width: 110px;
  flex: 0 0 auto;
  margin: 0;
}
.wr-search-row .btn {
  height: 38px;
}

.wr-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wr-top-products {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 4px;
  font-size: 12px;
}
.wr-top-label {
  color: var(--text-tertiary);
}
.wr-top-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.wr-top-chip b {
  color: var(--warning);
}

.wr-loading {
  color: var(--text-tertiary);
  font-size: 13px;
}

.wr-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 -4px;
}
.wr-results-head h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.wr-results-head code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.wr-results-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ── Thẻ kết quả ─────────────────────────────────────── */
.wr-card {
  padding: 0;
  overflow: hidden;
  border-left: 3px solid var(--success);
}
.wr-card--expired {
  border-left-color: var(--danger);
}

.wr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.wr-cred {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.wr-cred-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 600;
  flex: 0 0 auto;
}
.wr-cred-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.wr-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.wr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.wr-block {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.wr-block:last-child {
  border-right: none;
}
.wr-block h4 {
  font-family: var(--font-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 700;
  margin: 0 0 10px;
}
.wr-block dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin: 0 0 10px;
  font-size: 12.5px;
}
.wr-block dt {
  color: var(--text-tertiary);
  white-space: nowrap;
}
.wr-block dd {
  margin: 0;
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}
.wr-block dd code {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.wr-block dd .btn-xs {
  vertical-align: middle;
  margin-left: 2px;
}

/* ── Thanh hạn bảo hành ──────────────────────────────── */
.wr-warranty-bar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wr-bar-track {
  flex: 1 1 200px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.wr-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--success), var(--accent));
  transition: width 0.3s ease;
}
.wr-card--expired .wr-bar-fill {
  background: var(--danger);
}
.wr-bar-meta {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 0 0 auto;
}

/* ── Kinh tế dòng đơn ────────────────────────────────── */
.wr-econ {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.wr-econ b {
  color: var(--text-primary);
}
.wr-econ-total {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ── Bảng phương án hoàn ─────────────────────────────── */
/* 5 cột số liệu không nén được — cho cuộn ngang trong thẻ, không đẩy cả trang */
.wr-refund-table {
  overflow-x: auto;
}
/* table-layout fixed: chia cột theo tỉ lệ cố định, không để min-content của
   tiêu đề dài bóp cột "Phương án hoàn" xuống còn vài chục pixel */
.wr-refund-table table {
  font-size: 12.5px;
  min-width: 720px;
  table-layout: fixed;
}
.wr-refund-table th {
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.35;
}
.wr-refund-table th:first-child { width: 38%; }
.wr-refund-table th:nth-child(2) { width: 14%; }
.wr-refund-table th:nth-child(3),
.wr-refund-table th:nth-child(4),
.wr-refund-table th:nth-child(5) { width: 16%; }
.wr-refund-table td {
  vertical-align: middle;
}
.wr-refund-table td:not(:first-child) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wr-row-recommended {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.wr-mode-pick {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.wr-mode-pick > span {
  flex: 1 1 auto;
  min-width: 0;
}
/* CSS chung của admin đặt input { width: 100% } → radio nuốt cả ô, phải ghim lại */
.wr-mode-pick input[type="radio"],
.wr-check input[type="checkbox"] {
  width: 14px;
  min-width: 14px;
  height: 14px;
  flex: 0 0 14px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}
.wr-mode-pick input[type="radio"] {
  margin-top: 3px;
}
.wr-mode-pick b {
  display: block;
  font-weight: 650;
}
.wr-mode-pick em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.wr-star {
  white-space: nowrap;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: 1px;
}

.wr-pos { color: var(--success); font-weight: 600; }
.wr-neg { color: var(--danger); font-weight: 600; }
.wr-zero { color: var(--text-tertiary); }
.wr-refund-out { color: var(--warning); font-weight: 600; }

.wr-note {
  margin: 0;
  padding: 10px 18px;
  font-size: 12px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border);
  line-height: 1.6;
}
.wr-note--warn {
  color: var(--warning);
}

.wr-history {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--warning);
}
.wr-history-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.wr-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ── Bảng phiếu ──────────────────────────────────────── */
/* 8 cột — cho cuộn ngang trong panel thay vì nén cột tài khoản còn vài ký tự */
.wr-claims-table {
  overflow-x: auto;
}
.wr-claims-table table {
  min-width: 1020px;
  table-layout: fixed;
}
.wr-claims-table th:nth-child(1) { width: 108px; }
.wr-claims-table th:nth-child(2) { width: 25%; }
.wr-claims-table th:nth-child(3) { width: 15%; }
.wr-claims-table th:nth-child(4) { width: 112px; }
.wr-claims-table th:nth-child(5) { width: 106px; }
.wr-claims-table th:nth-child(6) { width: 118px; }
.wr-claims-table th:nth-child(7) { width: 96px; }
.wr-claims-table td {
  vertical-align: top;
}
.wr-claims-table .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wr-td-cred {
  font-family: var(--font-mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.wr-owed { color: var(--warning); }
.wr-settled { color: var(--success); }

/* ── Form modal ──────────────────────────────────────── */
.wr-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wr-form-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.wr-form-summary > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.wr-form-summary span:first-child {
  flex: 0 0 88px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}
.wr-form-summary code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.wr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wr-form-row .fd-field {
  margin: 0;
}
.wr-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.wr-form-net {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.wr-form-net > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.wr-form-net span {
  color: var(--text-tertiary);
}
.wr-form-net-total {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-weight: 650;
}
.wr-form-net-total span {
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .wr-block {
    border-right: none;
  }
  .wr-form-row {
    grid-template-columns: 1fr;
  }
  .wr-econ-total {
    margin-left: 0;
    width: 100%;
  }
  .wr-card-head,
  .wr-block,
  .wr-warranty-bar,
  .wr-econ,
  .wr-history,
  .wr-note,
  .wr-card-actions {
    padding-left: 14px;
    padding-right: 14px;
  }
}