/* ============================================================
   SINHVU INTAKE ADMIN — V18.1 Design Tokens + Solid Icons
   ============================================================ */

/* ============================================================
   V18.1 — DESIGN SYSTEM TOKENS
   Token-based design — mọi component reference từ đây.
   ============================================================ */
:root {
  /* === Density tokens === */
  --ds-density-xs: 4px;
  --ds-density-sm: 6px;
  --ds-density-md: 10px;
  --ds-density-lg: 14px;
  --ds-density-xl: 20px;

  /* === Typography hierarchy === */
  --ds-fs-h1: 18px;
  --ds-fs-h2: 14px;
  --ds-fs-h3: 12px;
  --ds-fs-body: 13px;
  --ds-fs-small: 12px;
  --ds-fs-meta: 11px;

  --ds-fw-h1: 700;
  --ds-fw-h2: 700;
  --ds-fw-body: 400;
  --ds-fw-medium: 500;
  --ds-fw-bold: 600;

  --ds-letter-spacing-h2: 0.5px;
  --ds-letter-spacing-mono: 0.4px;

  /* === Border radius === */
  --ds-radius-xs: 3px;
  --ds-radius-sm: 5px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-pill: 999px;

  /* === Animation === */
  --ds-anim-fast: 120ms;
  --ds-anim-default: 180ms;
  --ds-anim-slow: 300ms;
  --ds-anim-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Semantic colors (5 only) === */
  --ds-brand: #F8951D;
  --ds-brand-soft: rgba(248, 149, 29, 0.1);
  --ds-success: #16A34A;
  --ds-success-soft: rgba(22, 163, 74, 0.1);
  --ds-warn: #F59E0B;
  --ds-warn-soft: rgba(245, 158, 11, 0.1);
  --ds-danger: #E63946;
  --ds-danger-soft: rgba(230, 57, 70, 0.1);
  --ds-info: #2563EB;
  --ds-info-soft: rgba(37, 99, 235, 0.1);

  /* === Shadow tokens === */
  --ds-shadow-sm: 0 1px 2px rgba(15, 27, 48, 0.08);
  --ds-shadow-md: 0 4px 12px rgba(15, 27, 48, 0.1);
  --ds-shadow-lg: 0 12px 32px rgba(15, 27, 48, 0.15);
  --ds-shadow-xl: 0 24px 60px rgba(15, 27, 48, 0.22);
}

/* ============================================================
   V18.1 — DS ICON COMPONENT
   ============================================================ */
.ds-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
  transition: color var(--ds-anim-fast) ease;
}
.ds-icon-filled {
  fill: currentColor;
  stroke-width: 0;
}

/* Icon size variants */
.ds-icon-xs { width: 12px; height: 12px; }
.ds-icon-sm { width: 14px; height: 14px; }
.ds-icon-md { width: 16px; height: 16px; }
.ds-icon-lg { width: 20px; height: 20px; }
.ds-icon-xl { width: 24px; height: 24px; }

/* Icon tone variants */
.ds-icon-brand { color: var(--ds-brand); }
.ds-icon-success { color: var(--ds-success); }
.ds-icon-warn { color: var(--ds-warn); }
.ds-icon-danger { color: var(--ds-danger); }
.ds-icon-info { color: var(--ds-info); }
.ds-icon-muted { color: var(--c-text-muted); opacity: 0.7; }

/* Icon spacing helper trong button */
button .ds-icon,
.ds-btn-icon-gap {
  margin-right: 6px;
}
button .ds-icon:last-child {
  margin-right: 0;
}
button .ds-icon:only-child {
  margin: 0;
}

/* Inline icon trong text — align baseline */
.ds-icon-inline {
  vertical-align: -2px;
  margin-right: 4px;
}

:root {
  --brand-graphite: #525252;
  --brand-accent: #F8951D;
  --brand-accent-soft: #FEF3E2;
  --brand-accent-deep: #C66F00;

  --c-bg: #F7F6F3;
  --c-surface: #FFFFFF;
  --c-surface-2: #F2F0EB;
  --c-surface-3: #E9E6E0;
  --c-line: #E1DED7;
  --c-line-soft: #ECE9E2;
  --c-divider: #CDC9C0;

  --c-text: #1A1918;
  --c-text-muted: #65625B;
  --c-text-dim: #94908A;
  --c-placeholder: #B5B0A6;

  --c-error: #C8483A;
  --c-error-bg: #FDEFEC;
  --c-warn: #B8762A;
  --c-warn-bg: #FCEFD9;
  --c-success: #2F7A4F;
  --c-success-bg: #E8F4EC;
  --c-info: #2C5BAA;
  --c-info-bg: #EBF1FB;

  --font-sans: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  --sh-sm: 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  --sh-focus: 0 0 0 3px rgba(248,149,29,0.18);

  /* ============================================================
     V21.4.22 — BUTTON DESIGN SYSTEM TOKENS
     4 variant × 5 state. Mọi button class kế thừa từ đây.
     ============================================================ */

  /* PRIMARY — cam, action chính */
  --btn-primary-bg:           #F8951D;
  --btn-primary-text:         #FFFFFF;
  --btn-primary-border:       transparent;
  --btn-primary-bg-hover:     #E07A0E;
  --btn-primary-text-hover:   #FFFFFF;
  --btn-primary-bg-active:    #A85A05;
  --btn-primary-shadow-focus: 0 0 0 3px rgba(248,149,29,0.45);

  /* SECONDARY — navy, action phụ */
  --btn-secondary-bg:           #0F1B30;
  --btn-secondary-text:         #FFFFFF;
  --btn-secondary-border:       transparent;
  --btn-secondary-bg-hover:     #1F2D44;
  --btn-secondary-text-hover:   #FFFFFF;
  --btn-secondary-bg-active:    #2A3854;
  --btn-secondary-shadow-focus: 0 0 0 3px rgba(15,27,48,0.40);

  /* GHOST — transparent + viền, hành động phụ nhẹ */
  --btn-ghost-bg:           transparent;
  --btn-ghost-text:         #1A1918;
  --btn-ghost-border:       #CDC9C0;
  --btn-ghost-bg-hover:     #F2F0EB;
  --btn-ghost-text-hover:   #1A1918;
  --btn-ghost-border-hover: #94908A;
  --btn-ghost-bg-active:    #E5E2DA;
  --btn-ghost-shadow-focus: 0 0 0 3px rgba(248,149,29,0.30);

  /* DANGER — đỏ, hành động phá huỷ */
  --btn-danger-bg:           #C8483A;
  --btn-danger-text:         #FFFFFF;
  --btn-danger-border:       transparent;
  --btn-danger-bg-hover:     #A03A2E;
  --btn-danger-text-hover:   #FFFFFF;
  --btn-danger-bg-active:    #7A2C22;
  --btn-danger-shadow-focus: 0 0 0 3px rgba(200,72,58,0.40);

  /* DISABLED — chung mọi variant */
  --btn-disabled-opacity: 0.4;
  --btn-disabled-cursor:  not-allowed;

  /* SHARED — mọi variant */
  --btn-radius:        6px;
  --btn-radius-sm:     4px;
  --btn-padding-y:     8px;
  --btn-padding-x:     14px;
  --btn-padding-y-sm:  6px;
  --btn-padding-x-sm:  10px;
  --btn-padding-y-lg:  10px;
  --btn-padding-x-lg:  18px;
  --btn-font-weight:   500;
  --btn-font-size:     14px;
  --btn-transition:    background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  --btn-active-scale:  0.97;
}

/* ============================================================
   V21.4.22 — BUTTON DESIGN SYSTEM CLASSES
   .btn base + 4 variants. Sử dụng tokens trên.
   Kế thừa cho mọi class cũ ở phía dưới.
   ============================================================ */
.btn,
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--btn-transition);
  outline: none;
}
.btn:focus-visible {
  /* Default focus, mỗi variant override sau */
  box-shadow: var(--btn-primary-shadow-focus);
}
.btn:active:not(:disabled):not(.is-disabled) {
  transform: scale(var(--btn-active-scale));
}
.btn:disabled,
.btn.is-disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: var(--btn-disabled-cursor);
  pointer-events: none;
}

/* Sizes */
.btn--sm  { padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm); font-size: 13px; }
.btn--lg  { padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg); font-size: 15px; }

/* PRIMARY variant */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
}
.btn--primary:hover:not(:disabled):not(.is-disabled) {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
}
.btn--primary:active:not(:disabled):not(.is-disabled) {
  background: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
  box-shadow: var(--btn-primary-shadow-focus);
}

/* SECONDARY variant */
.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover:not(:disabled):not(.is-disabled) {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
}
.btn--secondary:active:not(:disabled):not(.is-disabled) {
  background: var(--btn-secondary-bg-active);
}
.btn--secondary:focus-visible {
  box-shadow: var(--btn-secondary-shadow-focus);
}

/* GHOST variant */
.btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover:not(:disabled):not(.is-disabled) {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-text-hover);
  border-color: var(--btn-ghost-border-hover);
}
.btn--ghost:active:not(:disabled):not(.is-disabled) {
  background: var(--btn-ghost-bg-active);
}
.btn--ghost:focus-visible {
  box-shadow: var(--btn-ghost-shadow-focus);
}

/* DANGER variant */
.btn--danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-border);
}
.btn--danger:hover:not(:disabled):not(.is-disabled) {
  background: var(--btn-danger-bg-hover);
  color: var(--btn-danger-text-hover);
}
.btn--danger:active:not(:disabled):not(.is-disabled) {
  background: var(--btn-danger-bg-active);
}
.btn--danger:focus-visible {
  box-shadow: var(--btn-danger-shadow-focus);
}

/* ============================================================
   V21.4.22 — ALIAS các class cũ → kế thừa từ variant trên
   KHÔNG xóa class cũ — chỉ ÉP override hover/active/focus
   bằng !important để fix bug "hover trắng → mất chữ".
   ============================================================ */

/* PRIMARY aliases — luôn cam, hover deep, không bao giờ trắng */
.save-btn,
.primary-btn,
.bcw-btn,
.bulk-action-btn,
.pc-save-btn,
.inline-note-save-btn,
.tag-add-btn,
.bsh-copy-btn,
.sd-copy-btn,
.share-btn,
.backup-btn {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--btn-primary-border) !important;
  transition: var(--btn-transition) !important;
}
.save-btn:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.bcw-btn:hover:not(:disabled),
.bulk-action-btn:hover:not(:disabled),
.pc-save-btn:hover:not(:disabled),
.inline-note-save-btn:hover:not(:disabled),
.tag-add-btn:hover:not(:disabled),
.bsh-copy-btn:hover:not(:disabled),
.sd-copy-btn:hover:not(:disabled),
.share-btn:hover:not(:disabled),
.backup-btn:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text-hover) !important;
}
.save-btn:active:not(:disabled),
.primary-btn:active:not(:disabled),
.bcw-btn:active:not(:disabled),
.bulk-action-btn:active:not(:disabled),
.pc-save-btn:active:not(:disabled),
.inline-note-save-btn:active:not(:disabled),
.tag-add-btn:active:not(:disabled),
.bsh-copy-btn:active:not(:disabled),
.sd-copy-btn:active:not(:disabled),
.share-btn:active:not(:disabled),
.backup-btn:active:not(:disabled) {
  background: var(--btn-primary-bg-active) !important;
  transform: scale(var(--btn-active-scale));
}
.save-btn:focus-visible,
.primary-btn:focus-visible,
.bcw-btn:focus-visible,
.bulk-action-btn:focus-visible,
.pc-save-btn:focus-visible,
.inline-note-save-btn:focus-visible,
.tag-add-btn:focus-visible,
.bsh-copy-btn:focus-visible,
.sd-copy-btn:focus-visible,
.share-btn:focus-visible,
.backup-btn:focus-visible {
  box-shadow: var(--btn-primary-shadow-focus) !important;
  outline: none;
}
.save-btn:disabled,
.primary-btn:disabled,
.bcw-btn:disabled,
.bulk-action-btn:disabled,
.pc-save-btn:disabled,
.inline-note-save-btn:disabled,
.tag-add-btn:disabled,
.bsh-copy-btn:disabled,
.sd-copy-btn:disabled,
.share-btn:disabled,
.backup-btn:disabled {
  opacity: var(--btn-disabled-opacity) !important;
  cursor: var(--btn-disabled-cursor) !important;
}

/* SECONDARY aliases — navy, hover lighter navy */
.ph-secondary-btn,
.sys-action-btn,
.cal-nav-btn,
.bsh-action-btn,
.sd-open-btn {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  transition: var(--btn-transition) !important;
}
.ph-secondary-btn:hover:not(:disabled),
.sys-action-btn:hover:not(:disabled),
.cal-nav-btn:hover:not(:disabled),
.bsh-action-btn:hover:not(:disabled),
.sd-open-btn:hover:not(:disabled) {
  background: var(--btn-secondary-bg-hover) !important;
  color: var(--btn-secondary-text-hover) !important;
  border-color: var(--btn-secondary-border) !important;
}
.ph-secondary-btn:active:not(:disabled),
.sys-action-btn:active:not(:disabled),
.cal-nav-btn:active:not(:disabled),
.bsh-action-btn:active:not(:disabled),
.sd-open-btn:active:not(:disabled) {
  background: var(--btn-secondary-bg-active) !important;
  transform: scale(var(--btn-active-scale));
}
.ph-secondary-btn:focus-visible,
.sys-action-btn:focus-visible,
.cal-nav-btn:focus-visible,
.bsh-action-btn:focus-visible,
.sd-open-btn:focus-visible {
  box-shadow: var(--btn-secondary-shadow-focus) !important;
  outline: none;
}

/* GHOST aliases — transparent + viền, KHÔNG bao giờ trắng-trên-trắng */
.ghost-btn,
.sp-btn,
.cal-mode-btn,
.pc-tier-btn,
.sidebar-bulk-btn,
.smart-view-btn,
.pc-tpl-tab-btn,
.inw-btn,
.rp-btn,
.pc-bulk-btn,
.sv-density-btn,
.sv-help-btn,
.sv-bell-btn,
.close-btn,
.open-btn,
.save-view-btn,
.snippet-trigger-btn,
.hc-tour-start-btn {
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-text) !important;
  border: 1px solid var(--btn-ghost-border) !important;
  transition: var(--btn-transition) !important;
}
.ghost-btn:hover:not(:disabled),
.sp-btn:hover:not(:disabled),
.cal-mode-btn:hover:not(:disabled),
.pc-tier-btn:hover:not(:disabled),
.sidebar-bulk-btn:hover:not(:disabled),
.smart-view-btn:hover:not(:disabled),
.pc-tpl-tab-btn:hover:not(:disabled),
.inw-btn:hover:not(:disabled),
.rp-btn:hover:not(:disabled),
.pc-bulk-btn:hover:not(:disabled),
.sv-density-btn:hover:not(:disabled),
.sv-help-btn:hover:not(:disabled),
.sv-bell-btn:hover:not(:disabled),
.close-btn:hover:not(:disabled),
.open-btn:hover:not(:disabled),
.save-view-btn:hover:not(:disabled),
.snippet-trigger-btn:hover:not(:disabled),
.hc-tour-start-btn:hover:not(:disabled) {
  background: var(--btn-ghost-bg-hover) !important;
  color: var(--btn-ghost-text-hover) !important;
  border-color: var(--btn-ghost-border-hover) !important;
}
.ghost-btn:active:not(:disabled),
.sp-btn:active:not(:disabled),
.cal-mode-btn:active:not(:disabled),
.pc-tier-btn:active:not(:disabled),
.sidebar-bulk-btn:active:not(:disabled),
.smart-view-btn:active:not(:disabled),
.pc-tpl-tab-btn:active:not(:disabled),
.inw-btn:active:not(:disabled),
.rp-btn:active:not(:disabled),
.pc-bulk-btn:active:not(:disabled),
.sv-density-btn:active:not(:disabled),
.sv-help-btn:active:not(:disabled),
.sv-bell-btn:active:not(:disabled),
.close-btn:active:not(:disabled),
.open-btn:active:not(:disabled),
.save-view-btn:active:not(:disabled),
.snippet-trigger-btn:active:not(:disabled),
.hc-tour-start-btn:active:not(:disabled) {
  background: var(--btn-ghost-bg-active) !important;
  transform: scale(var(--btn-active-scale));
}
.ghost-btn:focus-visible,
.sp-btn:focus-visible,
.cal-mode-btn:focus-visible,
.pc-tier-btn:focus-visible,
.sidebar-bulk-btn:focus-visible,
.smart-view-btn:focus-visible,
.pc-tpl-tab-btn:focus-visible,
.inw-btn:focus-visible,
.rp-btn:focus-visible,
.pc-bulk-btn:focus-visible,
.sv-density-btn:focus-visible,
.sv-help-btn:focus-visible,
.sv-bell-btn:focus-visible,
.close-btn:focus-visible,
.open-btn:focus-visible,
.save-view-btn:focus-visible,
.snippet-trigger-btn:focus-visible,
.hc-tour-start-btn:focus-visible {
  box-shadow: var(--btn-ghost-shadow-focus) !important;
  outline: none;
}

/* DANGER aliases */
.purge-btn-start,
.purge-btn-final,
.inw-voice-stop-btn {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-text) !important;
  border: 1px solid var(--btn-danger-border) !important;
  transition: var(--btn-transition) !important;
}
.purge-btn-start:hover:not(:disabled),
.purge-btn-final:hover:not(:disabled),
.inw-voice-stop-btn:hover:not(:disabled) {
  background: var(--btn-danger-bg-hover) !important;
}
.purge-btn-start:active:not(:disabled),
.purge-btn-final:active:not(:disabled),
.inw-voice-stop-btn:active:not(:disabled) {
  background: var(--btn-danger-bg-active) !important;
  transform: scale(var(--btn-active-scale));
}
.purge-btn-start:focus-visible,
.purge-btn-final:focus-visible,
.inw-voice-stop-btn:focus-visible {
  box-shadow: var(--btn-danger-shadow-focus) !important;
  outline: none;
}

/* PROJECT HERO ACTION BUTTONS — primary color cho proposal, ghost cho rest */
.ph-action-btn.ph-proposal-btn,
.ph-primary-btn {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--btn-primary-border) !important;
}
.ph-action-btn.ph-proposal-btn:hover:not(:disabled),
.ph-primary-btn:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text-hover) !important;
}
.ph-action-btn.ph-proposal-btn:active:not(:disabled),
.ph-primary-btn:active:not(:disabled) {
  background: var(--btn-primary-bg-active) !important;
  transform: scale(var(--btn-active-scale));
}

.ph-action-btn:not(.ph-proposal-btn):not(.ph-primary-btn),
.ph-archive-btn,
.ph-customer-btn,
.ph-timer-btn,
.ph-reminder-btn {
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-text) !important;
  border: 1px solid var(--btn-ghost-border) !important;
}
.ph-action-btn:not(.ph-proposal-btn):not(.ph-primary-btn):hover:not(:disabled),
.ph-archive-btn:hover:not(:disabled),
.ph-customer-btn:hover:not(:disabled),
.ph-timer-btn:hover:not(:disabled),
.ph-reminder-btn:hover:not(:disabled) {
  background: var(--btn-ghost-bg-hover) !important;
  color: var(--btn-ghost-text-hover) !important;
  border-color: var(--btn-ghost-border-hover) !important;
}
/* ============================================================
   END V21.4.22 BUTTON DESIGN SYSTEM
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
button { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; max-width: 100%; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
code { font-family: var(--font-mono); font-size: 12px; }
.hidden { display: none !important; }

/* ---------- LOGIN PAGE ---------- */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}
.login-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}
.login-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px;
  width: 100%;
}
.intro-panel .eyebrow,
.login-card .eyebrow,
.panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent-deep);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panel-eyebrow::before, .intro-panel .eyebrow::before, .login-card .eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--brand-accent);
}
.intro-panel h1 {
  font-size: 36px; line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 600; margin: 0 0 20px 0;
}
.intro-panel p { color: var(--c-text-muted); font-size: 16px; line-height: 1.55; margin: 0 0 32px 0; max-width: 480px; }
.system-rows { display: grid; gap: 12px; max-width: 480px; }
.system-rows > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--c-line);
  font-size: 13px;
}
.system-rows span { color: var(--c-text-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.system-rows strong { color: var(--c-text); font-weight: 500; font-family: var(--font-mono); }

.login-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 36px;
  box-shadow: var(--sh-md);
}
.login-card h2 { font-size: 24px; margin: 0 0 8px 0; font-weight: 600; letter-spacing: -0.01em; }
.login-card .muted { color: var(--c-text-muted); margin: 0 0 20px 0; font-size: 14px; }
.pass-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
  font-family: var(--font-mono);
  letter-spacing: 0.5em;
  text-align: center;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin-bottom: 16px;
  outline: none;
}
.pass-input:focus { border-color: var(--brand-accent); box-shadow: var(--sh-focus); }
.api-url-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
  border-radius: 6px;
  margin-bottom: 16px;
  color: var(--c-text-muted);
  outline: none;
  word-break: break-all;
}
.primary-btn {
  width: 100%;
  padding: 14px;
  background: var(--c-text);
  color: var(--c-surface);
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.15s;
  min-height: 48px;
}
.primary-btn:hover:not(:disabled) { background: var(--brand-accent); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.brand-logo { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo img { height: 28px; width: auto; }
.admin-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--c-text-dim);
  padding: 3px 8px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-surface);
}

/* ---------- TOPBAR ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
  position: sticky; top: 0; z-index: 50;
  flex-wrap: wrap;
  gap: 12px;
}
.topbar-title {
  display: flex; flex-direction: column; gap: 2px;
}
.topbar-title .eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--c-text-dim); text-transform: uppercase;
}
.topbar-title h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.topbar-status {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
}
.api-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
}
.api-status .dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--c-text-dim);
}
.api-status.is-ok { background: var(--c-success-bg); color: var(--c-success); }
.api-status.is-ok .dot { background: var(--c-success); }
.api-status.is-err { background: var(--c-error-bg); color: var(--c-error); }
.api-status.is-err .dot { background: var(--c-error); }
.api-status.is-loading .dot { background: var(--brand-accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.last-sync { color: var(--c-text-dim); }
.topbar-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ghost-btn {
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-text);
  background: var(--c-surface);
  transition: all 0.15s;
  min-height: 36px;
}
.ghost-btn:hover { background: var(--c-surface-2); border-color: var(--c-divider); }
.ghost-btn.is-active { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
.ghost-btn.danger { color: var(--c-error); border-color: rgba(200,72,58,0.3); }
.ghost-btn.danger:hover { background: var(--c-error-bg); }

/* ---------- BANNER ---------- */
.banner {
  padding: 14px 28px;
  font-size: 13px;
  border-bottom: 1px solid var(--c-line);
}
.banner.error { background: var(--c-error-bg); color: var(--c-error); }
.banner.success { background: var(--c-success-bg); color: var(--c-success); }
.banner.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.banner.info { background: var(--c-info-bg); color: var(--c-info); }

/* ---------- CONNECTION HEALTH PANEL ---------- */
.health-panel, .debug-panel {
  margin: 0 28px;
  padding: 18px 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  margin-top: 14px;
}
.health-panel h3, .debug-panel h3 {
  margin: 0 0 12px 0; font-size: 13px; font-weight: 600;
  color: var(--c-text); letter-spacing: -0.01em;
}
.health-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.health-item {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-text-dim);
}
.health-item.ok { background: var(--c-success-bg); border-left-color: var(--c-success); }
.health-item.miss { background: var(--c-warn-bg); border-left-color: var(--c-warn); }
.health-item.err { background: var(--c-error-bg); border-left-color: var(--c-error); }
.health-item .name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.health-item .meta { color: var(--c-text-muted); font-size: 11px; margin-top: 4px; }
.health-warnings, .health-errors {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.5;
}
.health-warnings { background: var(--c-warn-bg); color: var(--c-warn); }
.health-errors { background: var(--c-error-bg); color: var(--c-error); }
.health-warnings ul, .health-errors ul { margin: 4px 0 0 0; padding-left: 18px; }

/* ---------- DEBUG PANEL ---------- */
.debug-panel {
  font-family: var(--font-mono); font-size: 11px;
  background: #1B1A18; color: #E8E3DA; border-color: #2A2825;
}
.debug-panel h3 { color: var(--brand-accent); }
.debug-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.debug-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 4px;
  word-break: break-all;
}
.debug-row .k { color: #8C8378; flex-shrink: 0; }
.debug-row .v { color: #E8E3DA; text-align: right; }

/* ---------- DASHBOARD ---------- */
.dashboard {
  padding: 24px 28px 8px;
}
.dashboard h2 {
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  margin: 0 0 16px 0;
  font-weight: 500;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.metric-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  transition: all 0.15s;
  cursor: pointer;
}
.metric-card:hover { border-color: var(--brand-accent); box-shadow: var(--sh-sm); }
.metric-card.active { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
  margin-bottom: 6px;
}
.metric-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text);
  line-height: 1;
}
.metric-note {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 6px;
}

/* ---------- FILTERS ---------- */
.filters {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 16px 28px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-top: 16px;
}
.filter-field, .search-field {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.filter-field span, .search-field span {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim);
}
.filter-field select, .search-field input, .filter-field input {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
  outline: none;
}
.filter-field select:focus, .search-field input:focus, .filter-field input:focus {
  border-color: var(--brand-accent); box-shadow: var(--sh-focus);
}
.filter-chips {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 0 28px 16px;
}
.filter-chip {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--c-line);
  border-radius: 99px;
  background: var(--c-surface);
  color: var(--c-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px;
}
.filter-chip.active {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
  color: var(--brand-accent-deep);
  font-weight: 500;
}

/* ---------- MAIN GRID ---------- */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 220px);
  border-top: 1px solid var(--c-line);
}

/* ---------- REQUEST LIST ---------- */
.request-list {
  border-right: 1px solid var(--c-line);
  background: var(--c-surface);
  display: flex; flex-direction: column;
  min-width: 0;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.list-head {
  position: sticky; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
  z-index: 5;
}
.list-head .count { color: var(--c-text); font-weight: 500; }
.list-scroll {
  display: flex; flex-direction: column;
}
.request-card {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  transition: all 0.15s;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.request-card:hover { background: var(--c-surface-2); }
.request-card.selected {
  background: var(--brand-accent-soft);
  border-left: 3px solid var(--brand-accent);
  padding-left: 17px;
}
.req-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.req-title strong { font-size: 14px; font-weight: 600; color: var(--c-text); }
.req-company { font-size: 12px; color: var(--c-text-muted); }
.req-services { font-size: 11px; color: var(--c-text-muted); font-family: var(--font-mono); }
.req-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 11px;
}
.req-foot .right { color: var(--c-text-dim); font-family: var(--font-mono); }

/* ---------- TAGS ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 500;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.tag.success { background: var(--c-success-bg); color: var(--c-success); }
.tag.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.tag.danger { background: var(--c-error-bg); color: var(--c-error); }
.tag.info { background: var(--c-info-bg); color: var(--c-info); }
.tag.brand { background: var(--brand-accent-soft); color: var(--brand-accent-deep); }

/* ---------- DETAIL PANEL ---------- */
.detail-panel {
  background: var(--c-bg);
  display: flex; flex-direction: column; min-width: 0;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.detail-empty {
  padding: 80px 40px; text-align: center; color: var(--c-text-dim);
  display: flex; align-items: center; justify-content: center; min-height: 400px;
}
.detail-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--c-surface);
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 8px;
}
.detail-head .head-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  flex-wrap: wrap;
}
.detail-head .req-id {
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.detail-head h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  margin: 4px 0; color: var(--c-text);
}
.detail-head .sub-title { color: var(--c-text-muted); font-size: 13px; }
.detail-head .head-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.detail-section {
  background: var(--c-surface);
  margin: 14px 24px 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
}
.detail-section.snapshot { border-left: 3px solid var(--brand-accent); }
.detail-section h3 {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-accent-deep);
  margin: 0 0 14px 0;
  font-weight: 500;
}
.detail-section h3 .sub {
  color: var(--c-text-dim);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* Snapshot */
.snapshot-summary { font-size: 15px; line-height: 1.55; color: var(--c-text); margin: 0 0 14px 0; }
.snapshot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.kpi {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi .k {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim);
}
.kpi .v { font-size: 14px; color: var(--c-text); font-weight: 500; }
.kpi.high .v { color: var(--c-error); }
.kpi.warn .v { color: var(--c-warn); }
.kpi.good .v { color: var(--c-success); }

.snapshot-twocol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 14px;
}
.snapshot-card {
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--c-divider);
}
.snapshot-card.bright { border-left-color: var(--c-success); background: var(--c-success-bg); }
.snapshot-card.block { border-left-color: var(--c-error); background: var(--c-error-bg); }
.snapshot-card.next { border-left-color: var(--brand-accent); background: var(--brand-accent-soft); }
.snapshot-card .label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim);
  margin-bottom: 6px;
}
.snapshot-card ul { margin: 0; padding-left: 18px; }
.snapshot-card li { font-size: 13px; line-height: 1.5; margin-bottom: 4px; }

/* Completeness scorecard */
.completeness {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-top: 12px;
}
.score-cell {
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--c-divider);
}
.score-cell.good { border-left-color: var(--c-success); background: var(--c-success-bg); }
.score-cell.warn { border-left-color: var(--c-warn); background: var(--c-warn-bg); }
.score-cell.block { border-left-color: var(--c-error); background: var(--c-error-bg); }
.score-cell .lbl {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim);
  margin-bottom: 4px;
}
.score-cell .val { font-size: 13px; font-weight: 500; color: var(--c-text); }
.score-cell .pct { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted); }

/* Info grid */
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.info-item {
  padding: 8px 10px;
  background: var(--c-surface-2);
  border-radius: 6px;
}
.info-item .ilbl {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim);
  margin-bottom: 3px;
}
.info-item .ival { font-size: 13px; color: var(--c-text); word-break: break-word; }
.info-item .ival a { color: var(--c-info); }
.info-item.wide { grid-column: 1 / -1; }

/* Module Briefs */
.module-card {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
}
.module-card:first-child { margin-top: 0; }
.module-card .mhead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 10px;
}
.module-card .mhead h4 {
  font-size: 14px; margin: 0; font-weight: 600; color: var(--c-text);
}
.module-card .mtype {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; color: var(--c-text-dim); letter-spacing: 0.06em;
}
.module-fields { display: grid; gap: 8px; }
.mfield {
  display: grid; grid-template-columns: 200px 1fr; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--c-line-soft);
  font-size: 13px;
}
.mfield:first-child { border-top: 0; }
.mfield .mk { color: var(--c-text-muted); }
.mfield .mv { color: var(--c-text); word-break: break-word; }

/* Risks heatmap */
.heat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.heat-block {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--c-surface-2);
}
.heat-block.high { background: var(--c-error-bg); }
.heat-block.medium { background: var(--c-warn-bg); }
.heat-block.low { background: var(--c-success-bg); }
.heat-block h4 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}
.heat-block.high h4 { color: var(--c-error); }
.heat-block.medium h4 { color: var(--c-warn); }
.heat-block.low h4 { color: var(--c-success); }
.heat-block ul { margin: 0; padding-left: 18px; font-size: 13px; }
.heat-block li { margin-bottom: 4px; line-height: 1.5; }
.heat-impact {
  margin-top: 12px; padding: 10px 14px;
  background: var(--c-surface-2);
  border-radius: 6px;
  font-size: 13px; color: var(--c-text-muted);
  border-left: 3px solid var(--c-divider);
}

/* Operating plan */
.plan-list { display: grid; gap: 10px; }
.plan-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 14px; padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  font-size: 13px;
}
.plan-row .ptag {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-accent-deep);
  font-weight: 500;
}
.plan-row .ptext { color: var(--c-text); line-height: 1.5; }
.plan-list-block { margin-top: 12px; }
.plan-list-block h4 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim);
  margin: 0 0 8px 0;
}
.plan-list-block ol { margin: 0; padding-left: 20px; font-size: 13px; }
.plan-list-block li { margin-bottom: 4px; line-height: 1.5; }

/* Raw answers */
details.raw-answers {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
}
details.raw-answers > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  list-style: none;
}
details.raw-answers > summary::-webkit-details-marker { display: none; }
details.raw-answers > summary::after { content: " ▾"; color: var(--c-text-dim); }
details.raw-answers[open] > summary::after { content: " ▴"; }
.raw-table {
  border-top: 1px solid var(--c-line-soft);
  font-size: 12px; line-height: 1.5;
  max-height: 500px; overflow-y: auto;
}
.raw-row {
  display: grid; grid-template-columns: 200px 200px 1fr 100px 100px;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--c-line-soft);
  align-items: start;
}
.raw-row.head {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim);
  background: var(--c-surface-2);
  font-weight: 500;
  position: sticky; top: 0;
}
.raw-row .qid { font-family: var(--font-mono); color: var(--c-text-dim); word-break: break-word; }
.raw-row .qtext { color: var(--c-text-muted); word-break: break-word; }
.raw-row .ans { color: var(--c-text); word-break: break-word; }
.raw-row .mod { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-dim); }

/* Admin actions panel */
.actions-panel {
  background: #1B1A18;
  color: #E8E3DA;
  margin: 14px 24px 24px;
  border-radius: var(--r-lg);
  padding: 18px 22px;
}
.actions-panel h3 { color: var(--brand-accent); }
.actions-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.actions-grid .field-edit { display: flex; flex-direction: column; gap: 4px; }
.actions-grid .field-edit span {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: #8C8378;
}
.actions-grid .field-edit input,
.actions-grid .field-edit select,
.actions-grid .field-edit textarea {
  padding: 8px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #E8E3DA;
  font-size: 13px;
  outline: none;
}
.actions-grid .field-edit input:focus,
.actions-grid .field-edit select:focus,
.actions-grid .field-edit textarea:focus {
  border-color: var(--brand-accent);
}
.actions-grid .field-edit textarea { min-height: 70px; resize: vertical; font-family: inherit; }
.actions-grid .wide { grid-column: 1 / -1; }
.actions-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; gap: 10px; flex-wrap: wrap;
}
.copy-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-copy {
  padding: 6px 10px;
  font-size: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #E8E3DA;
  font-family: var(--font-mono);
  min-height: 28px;
}
.mini-copy:hover { background: rgba(255,255,255,0.1); border-color: var(--brand-accent); }
.save-btn {
  padding: 10px 18px;
  background: var(--brand-accent);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  min-height: 36px;
}
.save-btn:hover:not(:disabled) { background: var(--brand-accent-deep); }
.save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- INLINE MESSAGES ---------- */
.inline-message {
  margin: 10px 24px 0;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 6px;
}
.inline-message.error { background: var(--c-error-bg); color: var(--c-error); }
.inline-message.success { background: var(--c-success-bg); color: var(--c-success); }
.inline-message.warn { background: var(--c-warn-bg); color: var(--c-warn); }

/* ---------- FOOTER ---------- */
/* V21.1.1 — Footer chỉ là static block thấp ở cuối shell.
   Không bao giờ position: fixed/sticky → KHÔNG che button.
   Sync indicator đã move lên topbar. */
.footer {
  padding: 12px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-dim);
  border-top: 1px solid var(--c-line);
  margin-top: 0;
  background: var(--c-surface);
  position: static !important;  /* defensive — chống mọi rule khác cố set fixed */
}
.footer .footer-text { opacity: 0.75; }
.footer .footer-kbd-hint { margin-left: 16px; }
.footer kbd {
  display: inline-block; padding: 2px 6px; margin: 0 1px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: 3px; font-size: 10px; font-family: inherit;
}

/* V21.1.1 — Topbar sync indicator (replace footer status sync) */
.topbar-sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 14px;
  background: var(--c-surface-2);
  font-size: 11px; color: var(--c-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  font-family: var(--font-mono);
  white-space: nowrap;
  user-select: none;
}
.topbar-sync:hover { background: var(--c-surface-3); color: var(--c-text); }
.topbar-sync .tsync-icon { font-size: 12px; line-height: 1; }
.topbar-sync.is-syncing { color: var(--brand-accent-deep); }
.topbar-sync.is-syncing .tsync-icon {
  animation: tsyncSpin 1s linear infinite;
}
@keyframes tsyncSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .topbar-sync .tsync-text { display: none; }
  .topbar-sync { padding: 6px 8px; }
}

/* ============================================================
   RESPONSIVE — Admin V11.4
   Breakpoints: 1280, 1024, 768, 540
   ============================================================ */

@media (max-width: 1280px) {
  .main-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .login-grid { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; }
  .intro-panel h1 { font-size: 28px; }
  .filters { grid-template-columns: minmax(180px, 1.4fr) repeat(auto-fit, minmax(120px, 1fr)); }
  .main-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }
  .request-list {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    max-height: 400px;
  }
  .detail-panel { max-height: none; }
  .raw-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 16px; }
  .raw-row.head { display: none; }
  .raw-row .qid::before { content: "ID: "; color: var(--c-text-dim); }
  .raw-row .qtext::before { content: "Q: "; color: var(--c-text-dim); }
  .raw-row .ans::before { content: "A: "; color: var(--c-text-dim); }
}

@media (max-width: 768px) {
  .topbar { padding: 12px 16px; }
  .login-card { padding: 24px; }
  .pass-input { font-size: 18px; letter-spacing: 0.4em; }
  .dashboard, .filters, .filter-chips { padding-left: 16px; padding-right: 16px; }
  .health-panel, .debug-panel { margin: 14px 16px 0; }
  .detail-section, .actions-panel { margin: 14px 16px 0; padding: 16px 18px; }
  .detail-head { padding: 16px 18px; }
  .actions-panel { margin-bottom: 24px; }
  .mfield { grid-template-columns: 1fr; gap: 4px; }
  .mfield .mk { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim); }
}

@media (max-width: 540px) {
  .topbar { padding: 10px 14px; }
  .topbar-status { font-size: 10px; gap: 8px; }
  .api-status { padding: 3px 8px; }
  .last-sync { display: none; }
  .ghost-btn { padding: 8px 12px; font-size: 12px; }
  .dashboard, .filters, .filter-chips { padding-left: 14px; padding-right: 14px; }
  .filters { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
  .search-field { grid-column: 1 / -1; }
  .detail-section, .actions-panel, .health-panel, .debug-panel {
    margin-left: 14px; margin-right: 14px; padding: 14px 16px;
    border-radius: 8px;
  }
  .detail-head h2 { font-size: 18px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { padding: 12px 14px; }
  .metric-value { font-size: 22px; }
  .actions-foot { flex-direction: column; align-items: stretch; }
  .copy-row { justify-content: flex-start; }
  .save-btn { width: 100%; }
  .request-card { padding: 12px 16px; }
  .raw-row { padding: 10px 14px; }
}

/* ============================================================
   V11.5 — BRIEF COMPLETION WORKFLOW
   ============================================================ */

.bcw-section { border-left: 3px solid var(--c-info); }
.bcw-section h3 .tag { margin-left: 8px; }

.bcw-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.bcw-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  min-height: 38px;
  transition: all 0.15s;
}
.bcw-btn:hover:not(:disabled) {
  border-color: var(--brand-accent);
  background: var(--brand-accent-soft);
}
.bcw-btn.primary {
  background: var(--c-text); color: var(--c-surface); border-color: var(--c-text);
}
.bcw-btn.primary:hover:not(:disabled) {
  background: var(--brand-accent); border-color: var(--brand-accent); color: #fff;
}
.bcw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bcw-updates-count {
  display: inline-flex; align-items: center;
  padding: 6px 12px; font-size: 11px;
  background: var(--c-success-bg); color: var(--c-success);
  border-radius: 4px; font-family: var(--font-mono);
}

.gap-matrix {
  border: 1px solid var(--c-line); border-radius: 8px;
  overflow: hidden; background: var(--c-surface);
}
.gap-matrix-head, .gap-row {
  display: grid;
  grid-template-columns: 100px minmax(180px, 1fr) minmax(200px, 2fr);
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
  align-items: start;
  border-bottom: 1px solid var(--c-line-soft);
}
.gap-matrix-head {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim);
  background: var(--c-surface-2); font-weight: 500;
}
.gap-row:last-child { border-bottom: 0; }
.gap-severity {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 8px; border-radius: 4px;
  display: inline-block; font-weight: 600; text-align: center;
  width: fit-content;
}
.gap-row.severity-blocking .gap-severity {
  background: var(--c-error-bg); color: var(--c-error);
}
.gap-row.severity-blocking { background: rgba(200, 72, 58, 0.04); }
.gap-row.severity-important .gap-severity {
  background: var(--c-warn-bg); color: var(--c-warn);
}
.gap-row.severity-nice .gap-severity {
  background: var(--c-surface-2); color: var(--c-text-muted);
}
.gap-label { color: var(--c-text); font-weight: 500; }
.gap-reason { color: var(--c-text-muted); line-height: 1.5; }

.gap-empty {
  padding: 24px; text-align: center;
  background: var(--c-surface-2); border-radius: 8px;
  color: var(--c-text-muted); font-size: 14px;
}
.gap-empty.success {
  background: var(--c-success-bg); color: var(--c-success); font-weight: 500;
}

.bcw-history { margin-top: 18px; }
.bcw-history h4 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); margin: 0 0 10px 0;
}
.bcw-history-list { display: grid; gap: 8px; }
.bcw-history-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 12px; padding: 10px 12px;
  background: var(--c-surface-2); border-radius: 6px;
  font-size: 12px;
}
.src-badge {
  display: inline-flex; align-items: flex-start; justify-content: center;
  padding: 4px 8px; font-family: var(--font-mono); font-size: 9px;
  font-weight: 600; border-radius: 4px;
  height: fit-content;
}
.src-call { background: var(--c-info-bg); color: var(--c-info); }
.src-workshop { background: var(--brand-accent-soft); color: var(--brand-accent-deep); }
.src-email { background: var(--c-success-bg); color: var(--c-success); }
.src-note { background: var(--c-surface); color: var(--c-text-muted); }
.bcw-h-label { color: var(--c-text); font-weight: 500; margin-bottom: 4px; }
.bcw-h-val { color: var(--c-text); line-height: 1.5; word-break: break-word; }
.bcw-h-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--c-text-dim); margin-top: 4px;
}

/* ============================================================
   BCW MODAL OVERLAY
   ============================================================ */
.bcw-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
  animation: fadeIn 0.15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.bcw-modal {
  background: var(--c-surface);
  border-radius: 12px;
  max-width: 880px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.2s ease-out;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 28px;
  border-bottom: 1px solid var(--c-line);
  gap: 16px; flex-wrap: wrap;
}
.modal-head .eyebrow-mini {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-accent-deep); margin-bottom: 6px;
}
.modal-head h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px 0; letter-spacing: -0.01em; }
.modal-head p { font-size: 13px; color: var(--c-text-muted); margin: 0; }
.modal-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.modal-actions .ghost-btn { padding: 6px 12px; font-size: 12px; min-height: 32px; }
.modal-actions .close-btn {
  background: var(--c-surface-2); border-color: transparent;
  font-size: 14px; padding: 6px 10px;
}

/* PRECALL */
.precall-card { max-width: 760px; }
.precall-body { padding: 24px 28px; }
.precall-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 24px;
  padding: 14px 16px;
  background: var(--c-surface-2); border-radius: 8px;
}
.precall-grid .ck {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); margin-bottom: 4px;
}
.precall-grid .cv { font-size: 13px; color: var(--c-text); font-weight: 500; }
.precall-block { margin-bottom: 22px; }
.precall-block h3 {
  font-size: 12px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-accent-deep);
  margin: 0 0 10px 0; font-weight: 500;
}
.precall-block ul, .precall-block ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.precall-block li { margin-bottom: 6px; }
.precall-block.warn-block {
  padding: 14px 16px; background: var(--c-warn-bg);
  border-radius: 8px; border-left: 3px solid var(--c-warn);
}
.precall-block.warn-block h3 { color: var(--c-warn); }
.precall-questions li { padding: 10px 0; border-bottom: 1px solid var(--c-line-soft); list-style: none; counter-increment: q; position: relative; padding-left: 30px; }
.precall-questions { counter-reset: q; }
.precall-questions li::before {
  content: counter(q) ".";
  position: absolute; left: 0; top: 10px;
  font-family: var(--font-mono); font-weight: 600; color: var(--c-text-dim);
}
.precall-questions .qsev {
  display: inline-block; padding: 2px 6px;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 600; border-radius: 3px;
  margin-right: 8px;
}
.precall-questions .severity-blocking .qsev { background: var(--c-error-bg); color: var(--c-error); }
.precall-questions .severity-important .qsev { background: var(--c-warn-bg); color: var(--c-warn); }
.precall-questions .severity-nice .qsev { background: var(--c-surface-2); color: var(--c-text-muted); }
.precall-questions .qtxt { color: var(--c-text); font-weight: 500; }
.precall-questions .qrsn {
  margin-top: 4px; font-size: 12px; color: var(--c-text-muted);
  padding-left: 0; font-style: italic;
}

/* CAPTURE */
.capture-modal { max-width: 820px; }
.capture-body { padding: 20px 28px; }
.capture-fields {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 60vh; overflow-y: auto;
  padding-right: 8px;
}
.capture-field {
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
}
.capture-field.severity-blocking { border-left: 3px solid var(--c-error); }
.capture-field.severity-important { border-left: 3px solid var(--c-warn); }
.capture-field.severity-nice { border-left: 3px solid var(--c-divider); }
.cf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cf-sev {
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 600; padding: 3px 7px; border-radius: 3px;
}
.severity-blocking .cf-sev { background: var(--c-error-bg); color: var(--c-error); }
.severity-important .cf-sev { background: var(--c-warn-bg); color: var(--c-warn); }
.severity-nice .cf-sev { background: var(--c-surface-2); color: var(--c-text-muted); }
.cf-label { font-size: 14px; font-weight: 500; color: var(--c-text); }
.cf-question { font-size: 13px; color: var(--c-text-muted); margin-bottom: 10px; line-height: 1.5; }
.cf-input {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--c-line); border-radius: 6px;
  background: var(--c-bg);
  font-family: inherit; color: var(--c-text); outline: none;
  resize: vertical; min-height: 60px;
  line-height: 1.5;
}
.cf-input:focus { border-color: var(--brand-accent); box-shadow: var(--sh-focus); }
.capture-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line);
  flex-wrap: wrap; gap: 12px;
}
.filled-count {
  font-family: var(--font-mono); font-size: 12px; color: var(--c-text-muted);
}
.capture-buttons { display: flex; gap: 8px; }

/* WORKSHOP DOC */
.workshop-doc { max-width: 800px; }
.workshop-body { padding: 24px 28px; }
.ws-block { margin-bottom: 22px; }
.ws-block h3 {
  font-size: 12px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-accent-deep);
  margin: 0 0 10px 0; font-weight: 500;
}
.ws-block ul, .ws-block ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.ws-block.warn {
  padding: 14px 16px; background: var(--c-warn-bg);
  border-radius: 8px; border-left: 3px solid var(--c-warn);
}
.ws-block.warn h3 { color: var(--c-warn); }

/* ============================================================
   PRINT STYLES — for Pre-call Card + Workshop Pre-Read
   ============================================================ */
@media print {
  body * { visibility: hidden; }
  .bcw-modal-overlay, .bcw-modal-overlay * { visibility: visible; }
  .bcw-modal-overlay {
    position: absolute; inset: 0;
    background: white; padding: 0;
    overflow: visible;
  }
  .bcw-modal {
    box-shadow: none; max-width: none; width: 100%;
    border-radius: 0;
  }
  .modal-actions { display: none !important; }
  .modal-head { border-bottom: 2px solid #000; }
  .precall-block, .ws-block { page-break-inside: avoid; }
}

/* ============================================================
   RESPONSIVE — BCW
   ============================================================ */
@media (max-width: 768px) {
  .gap-matrix-head, .gap-row {
    grid-template-columns: 1fr; gap: 6px;
  }
  .gap-matrix-head { display: none; }
  .gap-row .gap-label::before { content: "Cần xác minh: "; color: var(--c-text-dim); font-size: 11px; }
  .gap-row .gap-reason::before { content: "Tại sao: "; color: var(--c-text-dim); font-size: 11px; }

  .bcw-modal-overlay { padding: 12px; }
  .modal-head { padding: 16px 18px; }
  .precall-body, .capture-body, .workshop-body { padding: 16px 18px; }
  .modal-head h2 { font-size: 18px; }
}

@media (max-width: 540px) {
  .bcw-actions { flex-direction: column; }
  .bcw-actions .bcw-btn { width: 100%; }
  .modal-actions .ghost-btn { padding: 6px 10px; font-size: 11px; }
  .precall-grid { grid-template-columns: 1fr 1fr; }
  .capture-fields { max-height: 55vh; }
  .capture-foot { flex-direction: column; align-items: stretch; }
  .capture-buttons { width: 100%; }
  .capture-buttons button { flex: 1; }
}

/* ============================================================
   V11.5.1 — UX RESTRUCTURE: Hero, Brief gauge, Collapsibles, Drawer, A4 doc
   ============================================================ */

/* HERO */
.project-view { padding: 0; }
.project-hero {
  background: var(--c-surface);
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--c-line);
}
.hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.hero-meta .req-id {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-dim);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px; align-items: center;
}
.hero-main { min-width: 0; }
.hero-company {
  font-size: 32px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 6px 0; line-height: 1.15;
  color: var(--c-text);
}
.hero-sub {
  font-size: 14px; color: var(--c-text-muted); margin-bottom: 14px;
  line-height: 1.5;
}
.hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-next {
  padding: 14px 18px;
  background: var(--brand-accent-soft);
  border-left: 3px solid var(--brand-accent);
  border-radius: 6px;
}
.hero-next .hn-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-accent-deep); margin-bottom: 6px;
}
.hero-next .hn-text {
  font-size: 15px; color: var(--c-text); line-height: 1.55; font-weight: 500;
}

/* BRIEF GAUGE */
.brief-gauge {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; flex-shrink: 0;
}
.brief-gauge svg { display: block; }
.gauge-status {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; text-align: center;
}

/* OLD detail-head — fade out, no longer used but keep for legacy compat */
.project-view .detail-head { display: none; }

/* BCW SPOTLIGHT — moved to top, give it visual weight */
.project-view .bcw-section {
  margin-top: 20px; margin-bottom: 24px;
  border-left-width: 4px;
  background: var(--c-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.project-view .bcw-actions { gap: 10px; }
.project-view .bcw-btn { padding: 12px 20px; font-size: 14px; min-height: 44px; font-weight: 500; }

/* SECONDARY GROUP LABEL */
.secondary-group-label {
  margin: 28px 24px 8px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-text-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}

/* COLLAPSIBLE SECTIONS */
.detail-section.collapsible {
  margin-top: 8px;
}
.collapsible-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 22px;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: background 0.15s;
}
.collapsible-head:hover { background: var(--c-surface-2); }
.collapsible-head .chev {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-dim); width: 14px; flex-shrink: 0;
}
.collapsible-head h3 { margin: 0; flex: 1; }
.detail-section.collapsible.is-collapsed {
  padding-bottom: 0;
}
.detail-section.collapsible:not(.is-collapsed) .collapsible-head {
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
}
.collapsible-body {
  padding: 18px 22px;
}

/* DRAWER (slide from right, replaces capture modal) */
.bcw-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: flex; justify-content: flex-end;
  animation: fadeIn 0.15s;
}
.bcw-drawer {
  background: var(--c-surface);
  width: 540px; max-width: 100vw;
  height: 100vh;
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.2);
  animation: slideInRight 0.22s ease-out;
  overflow: hidden;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid var(--c-line);
  gap: 12px;
}
.drawer-head .eyebrow-mini {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-accent-deep); margin-bottom: 6px;
}
.drawer-head h2 { font-size: 22px; font-weight: 600; margin: 0 0 6px 0; letter-spacing: -0.01em; }
.drawer-head p { font-size: 12px; color: var(--c-text-muted); margin: 0; line-height: 1.5; }

.bcw-drawer .capture-body {
  flex: 1; overflow-y: auto; padding: 18px 24px 32px;
  /* V21.1.1 — padding-bottom 32px để content cuối không sát foot, dễ đọc */
  -webkit-overflow-scrolling: touch;
}

/* V11.5.4 — Inline owner selector inside capture drawer */
.capture-owner-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.capture-owner-bar .co-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.capture-owner-bar .co-select {
  flex: 1; min-width: 180px;
  padding: 8px 32px 8px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 13px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  outline: none;
}
.capture-owner-bar .co-select:focus {
  border-color: var(--brand-accent);
  box-shadow: var(--sh-focus);
}
.capture-owner-bar .co-status {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.capture-owner-bar .co-status.ok { color: var(--c-success); }
.capture-owner-bar .co-status.warn { color: var(--c-warn); }

@media (max-width: 540px) {
  .capture-owner-bar {
    flex-direction: column; align-items: stretch;
    padding: 10px 18px;
  }
  .capture-owner-bar .co-select { width: 100%; }
  .capture-owner-bar .co-status { text-align: center; }
}

/* ============================================================
   V11.6 — PROPOSAL COMPOSER (Misa-style A4 PDF)
   ============================================================ */

/* Hero button orange highlight */
.ph-action-btn.primary-orange {
  background: var(--brand-accent);
  color: white;
  border-color: var(--brand-accent);
}
.ph-action-btn.primary-orange:hover {
  background: var(--brand-accent-deep);
  border-color: var(--brand-accent-deep);
}
.ph-action-btn.primary-orange:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-dim);
  border-color: var(--c-line);
  cursor: not-allowed;
}
/* V11.6 — Proposal button hơi to + bóng để không bị miss */
.ph-action-btn.ph-proposal-btn {
  font-weight: 600; font-size: 13px;
  padding: 10px 16px;
  min-height: 38px;
  box-shadow: 0 2px 8px rgba(248, 149, 29, 0.25);
}
.ph-action-btn.ph-proposal-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(248, 149, 29, 0.4);
  transform: translateY(-1px);
}
.ph-action-btn.ph-proposal-btn:disabled {
  box-shadow: none;
}

/* Composer container — V21.3.1: FULL SCREEN không border */
.proposal-overlay {
  background: rgba(15, 27, 48, 0.6);
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.proposal-composer {
  background: var(--c-bg);
  /* V21.3.1 — Full screen 100vw × 100vh, không border-radius. */
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  display: flex; flex-direction: column;
}
.proposal-composer .doc-toolbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  padding: 14px 22px;
}

/* Stepper */
.pc-stepper {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 22px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
}
.pc-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.pc-step:hover { border-color: var(--c-divider); }
.pc-step.is-active {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
}
.pc-step.is-done {
  background: var(--c-success-bg);
  border-color: rgba(47, 122, 79, 0.3);
}
.pc-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  background: var(--c-text); color: var(--c-surface);
  flex-shrink: 0;
}
.pc-step.is-active .pc-step-num { background: var(--brand-accent); }
.pc-step.is-done .pc-step-num { background: var(--c-success); }
.pc-step-body { min-width: 0; }
.pc-step-label { font-size: 13px; font-weight: 500; color: var(--c-text); margin-bottom: 2px; }
.pc-step-sub { font-size: 11px; color: var(--c-text-muted); line-height: 1.4; }

/* Content area */
.pc-content {
  flex: 1; overflow-y: auto;
  padding: 24px 28px;
  background: var(--c-bg);
}
.pc-hint {
  padding: 12px 16px;
  background: var(--c-info-bg);
  border-left: 3px solid var(--c-info);
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-text);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Footer */
.pc-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  gap: 12px;
}
.pc-footer .ghost-btn { padding: 10px 18px; min-height: 40px; }
.pc-footer .save-btn { padding: 10px 22px; min-height: 40px; font-size: 14px; }
.pc-foot-meta {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-muted);
}

/* Step 1 — Page set + sections */
.pc-page-set {
  display: grid; grid-template-columns: auto 1fr 1fr 1fr;
  gap: 12px; align-items: center;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin-bottom: 24px;
}
.pc-page-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); font-weight: 500;
}
.pc-radio {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.pc-radio:hover { border-color: var(--c-divider); }
.pc-radio.is-selected {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
}
.pc-radio input { margin-top: 4px; flex-shrink: 0; accent-color: var(--brand-accent); }
.pc-radio strong { font-size: 13px; color: var(--c-text); display: block; }
.pc-radio-sub { font-size: 11px; color: var(--c-text-muted); }

.pc-group { margin-bottom: 24px; }
.pc-group-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--brand-accent);
}
.pc-group-head h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--c-text); }
.pc-group-count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brand-accent-deep); font-weight: 500;
}

.pc-section-list { display: flex; flex-direction: column; gap: 8px; }
.pc-section-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.pc-section-item:hover { background: var(--c-surface-2); }
.pc-section-item.is-checked {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
}
.pc-section-item input { margin-top: 4px; accent-color: var(--brand-accent); flex-shrink: 0; }
.pc-section-body { flex: 1; min-width: 0; }
.pc-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.pc-section-code {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
  background: var(--brand-accent); color: white;
}
.pc-section-title { font-size: 13px; font-weight: 500; color: var(--c-text); }
.pc-section-desc { font-size: 12px; color: var(--c-text-muted); line-height: 1.5; margin-bottom: 6px; }
.pc-section-price {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
}
.pc-section-price .pp-low { color: #2F7A4F; }
.pc-section-price .pp-mid { color: #B8762A; }
.pc-section-price .pp-high { color: #C8483A; }
.pc-section-price .pp-sep { color: var(--c-text-dim); }
.pc-section-price .pp-unit { color: var(--c-text-dim); margin-left: 4px; }

/* Step 2 — Form grid */
.pc-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pc-field { display: flex; flex-direction: column; gap: 6px; }
.pc-field.wide { grid-column: 1 / -1; }
.pc-field span {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); font-weight: 500;
}
.pc-field input {
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-size: 14px; color: var(--c-text);
  outline: none;
  font-family: inherit;
}
.pc-field input:focus { border-color: var(--brand-accent); box-shadow: var(--sh-focus); }
.pc-field input[readonly] { background: var(--c-surface-2); color: var(--c-text-muted); }

/* Step 3 — Bulk pricing bar */
.pc-bulk-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--c-text);
  border-radius: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pc-bulk-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500; flex-shrink: 0;
}
.pc-bulk-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1; min-width: 130px;
  text-align: left;
}
.pc-bulk-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.pc-bulk-btn.pc-bulk-low:hover { border-color: #2F7A4F; background: rgba(47, 122, 79, 0.2); }
.pc-bulk-btn.pc-bulk-mid:hover { border-color: #B8762A; background: rgba(184, 118, 42, 0.2); }
.pc-bulk-btn.pc-bulk-high:hover { border-color: #C8483A; background: rgba(200, 72, 58, 0.2); }
.pc-bulk-btn strong {
  font-size: 12px; font-weight: 600; color: white;
}
.pc-bulk-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.pc-bulk-reset {
  flex: 0 0 auto; min-width: auto;
  flex-direction: row; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
}

/* Step 3 — Pricing */
.pc-totals {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 20px;
}
.pc-total-cell {
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
.pc-total-cell.highlight {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
}
.ptc-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); margin-bottom: 6px;
}
.ptc-val { font-size: 18px; font-weight: 600; color: var(--c-text); letter-spacing: -0.01em; }
.pc-total-cell.highlight .ptc-val { color: var(--brand-accent-deep); }

.pc-pricing-table {
  width: 100%; border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
}
.pc-pricing-table thead { background: var(--c-surface-2); }
.pc-pricing-table th {
  text-align: left; padding: 10px 12px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); font-weight: 500;
  border-bottom: 1px solid var(--c-line);
}
.pc-pricing-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
.pc-pricing-table tbody tr:last-child td { border-bottom: 0; }
.pc-pricing-table .pc-pcode {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-dim); font-weight: 500;
}
.pc-pricing-table .pc-price-low,
.pc-pricing-table .pc-price-mid,
.pc-pricing-table .pc-price-high {
  text-align: right;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-muted);
}
.pc-pricing-table td.is-active { font-weight: 700; color: var(--brand-accent-deep); background: var(--brand-accent-soft); }

.pc-tier-select {
  padding: 6px 28px 6px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-size: 12px; color: var(--c-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23525252' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  outline: none;
}
.pc-tier-select:focus { border-color: var(--brand-accent); }
.pc-custom-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-size: 12px; color: var(--c-text);
  outline: none;
}
.pc-custom-input:focus { border-color: var(--brand-accent); }
.pc-locked {
  display: inline-block; padding: 5px 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-muted);
}

/* Step 4 — Preview wrap */
.pc-preview-wrap {
  background: #DCDAD3;
  padding: 24px;
  border-radius: 8px;
}

/* ============================================================
   PROPOSAL DOCUMENT — Misa visual DNA (navy + orange)
   A4 portrait: 210mm × 297mm. Aspect ratio 1:1.414
   On screen we use proportional pixel sizing to preview accurately.
   ============================================================ */
.proposal-doc {
  display: flex; flex-direction: column; gap: 24px;
  font-family: "Inter", "Be Vietnam Pro", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #1A1918;
}
.pdoc-page {
  background: white;
  width: 794px;             /* 210mm @ 96dpi */
  min-height: 1123px;       /* A4 ratio — let content grow if needed */
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  position: relative;
  page-break-after: always;
  break-after: always;
  page-break-inside: avoid;
  break-inside: avoid;
  display: flex; flex-direction: column;
}
.pdoc-page:last-child { page-break-after: auto; }
/* Footer pinned ở mọi page nhờ flex-1 cho main content */
.pdoc-page > footer.psg-footer,
.pdoc-page > footer.pcv-footer {
  margin-top: auto;
}

/* COVER */
.pdoc-cover {
  background: #0F1B30;
  color: white;
  padding: 50px 60px 0;
  display: flex; flex-direction: column;
  flex: 1;
}
.pdoc-cover .pcv-grid { flex: 1; }
.pdoc-cover .pcv-footer { margin: 24px 0 32px; padding-top: 24px; }
.pcv-pattern {
  position: absolute; inset: 0; pointer-events: none;
}
.pcv-pattern svg { width: 100%; height: 100%; }
.pcv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
}
.pcv-logo { margin-bottom: 60px; }
.pcv-eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.4em;
  margin-bottom: 100px;
  color: rgba(255, 255, 255, 0.7);
}
.pcv-giant {
  font-size: 130px; line-height: 0.92;
  font-weight: 800; letter-spacing: -0.04em;
  color: white;
}
.pcv-giant > div { display: block; }
.pcv-right {
  padding-top: 80px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 40px;
}
.pcv-tagline {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px; line-height: 1.5;
}
.pcv-subtitle {
  font-size: 30px; line-height: 1.15;
  font-weight: 600;
  margin: 0 0 50px 0;
  color: white;
}
.pcv-proposal-mark {
  font-size: 22px; font-weight: 700;
  color: white;
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.pcv-info-block { margin-bottom: 22px; }
.pcv-il {
  font-size: 13px; color: rgba(255, 255, 255, 0.85);
  font-weight: 600; margin-bottom: 4px;
}
.pcv-iv {
  font-size: 12px; color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
}
.pcv-iv-list { font-size: 11px; line-height: 1.55; color: rgba(255, 255, 255, 0.65); }
.pcv-scope-line { margin-bottom: 8px; }
.pcv-scope-line strong { color: white; font-weight: 600; }
.pcv-footer {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 24px 0 0;
  margin: 32px 50px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: auto;
}
.pcv-fl {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.pcv-fv {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: white;
}

/* SERVICE GROUP PAGE — A4 layout chuẩn Misa */
.pdoc-service {
  padding: 50px 64px 0;        /* bottom space cho footer absolute */
  color: #1A1918;
}
.psg-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid #ECE9E2;
}
.psg-breadcrumb {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: #1A1918;
}
.psg-pagenum {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: #65625B;
}
.psg-pagenum-circle {
  display: inline-block;
  width: 22px; height: 22px;
  border: 1px solid #1A1918;
  border-radius: 50%;
  text-align: center; line-height: 20px;
  font-size: 10px; font-weight: 700;
  margin-left: 6px;
}
.psg-title {
  font-size: 32px; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--brand-accent);
  margin: 0 0 10px 0;
  line-height: 1.15;
}
.psg-title strong { color: var(--brand-accent-deep); font-weight: 700; }
.psg-intro {
  font-size: 13px; color: #65625B;
  line-height: 1.65;
  margin: 0 0 28px 0;
  max-width: 95%;
  column-count: 2; column-gap: 28px;
}
.psg-section {
  margin-bottom: 22px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.psg-section-head {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: var(--brand-accent);
  color: white;
  border-radius: 4px;
  margin-bottom: 4px;
}
.psg-code-pill {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.psg-section-title { font-size: 15px; font-weight: 600; }

.psg-table {
  width: 100%; border-collapse: collapse;
  margin-top: 0; font-size: 12.5px;     /* tăng từ 11.5 → 12.5px cho dễ đọc khi in */
  border: 0;
}
.psg-table tr { border-bottom: 1px dashed #DCDAD3; }
.psg-table tr:last-child { border-bottom: 0; }
.psg-table td {
  padding: 10px 14px;
  vertical-align: top;
  line-height: 1.6;
}
.psg-table .psg-k {
  width: 90px;
  font-weight: 600; color: #1A1918;
  font-size: 12px;
}

/* V11.11 — Footer A4 spread edge-to-edge giống header (justify-content: space-between).
   Logo bám trái, contact info bám phải, có khoảng trống ở giữa cho thoáng. */
.psg-footer {
  display: flex; align-items: center;
  justify-content: space-between;     /* logo trái — info phải, gap ở giữa */
  padding: 22px 64px;                  /* match padding header (64px L/R) */
  border-top: 1px solid #ECE9E2;
  background: white;
  margin-top: auto;
  flex-shrink: 0;
  gap: 28px;
  min-width: 0;
}
.psg-foot-logo {
  height: 32px !important;
  flex: 0 0 auto;
  width: auto;
}
.psg-foot-info {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;                          /* khoảng cách giữa items rộng hơn cho thoáng */
  font-family: var(--font-mono);
  font-size: 11px;
  color: #65625B;
  letter-spacing: 0.06em;
  flex: 0 1 auto;                     /* không stretch — bám phải */
  min-width: 0;
  overflow: hidden;
  justify-content: flex-end;
}
.psg-foot-info > span {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tên công ty được phép co lại với ellipsis nếu quá dài */
.psg-foot-info .psg-foot-co {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 280px;
  font-weight: 600;
  color: #1A1918;
}
.psg-foot-info .psg-foot-sep {
  color: #DCDAD3;
  flex: 0 0 auto;
  padding: 0;
}
.psg-foot-info .psg-foot-url,
.psg-foot-info .psg-foot-mail,
.psg-foot-info .psg-foot-phone {
  color: #65625B;
}
/* Khi page hẹp (preview admin) — ẩn URL trước, giữ phone + email + company */
@media (max-width: 820px) {
  .psg-foot-info .psg-foot-url,
  .psg-foot-info .psg-foot-url + .psg-foot-sep { display: none; }
  .psg-footer { padding: 18px 40px; }
}
@media (max-width: 540px) {
  .psg-foot-info .psg-foot-mail,
  .psg-foot-info .psg-foot-mail + .psg-foot-sep { display: none; }
  .psg-footer { padding: 14px 24px; gap: 16px; }
  .psg-foot-info .psg-foot-co { max-width: 140px; }
}

/* V2 — 8-field service section (1 sub-section per page) */
.pdoc-service.v2 .psg-section.v2 {
  margin-top: 20px;
}
.pdoc-service.v2 .psg-section-head {
  padding: 12px 18px;
  margin-bottom: 6px;
}
.pdoc-service.v2 .psg-code-pill { font-size: 13px; padding: 4px 11px; }
.pdoc-service.v2 .psg-section-title { font-size: 17px; }
.pdoc-service.v2 .psg-table.v2 {
  font-size: 12.5px;
  border: 1px solid #ECE9E2;
  border-radius: 4px;
  overflow: hidden;
}
.pdoc-service.v2 .psg-table.v2 .psg-k {
  width: 130px;
  background: #FAFAF9;
  border-right: 1px solid #ECE9E2;
  padding: 11px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdoc-service.v2 .psg-table.v2 td {
  padding: 11px 14px;
  line-height: 1.6;
}
.pdoc-service.v2 .psg-table.v2 tr.psg-objective td {
  background: rgba(248, 149, 29, 0.08);
  font-weight: 500;
}
.pdoc-service.v2 .psg-table.v2 tr.psg-out-of-scope td {
  background: rgba(200, 72, 58, 0.05);
  color: #65625B;
  font-style: italic;
  font-size: 11.5px;
}
.pdoc-service.v2 .psg-table.v2 tr.psg-out-of-scope .psg-k {
  background: rgba(200, 72, 58, 0.1);
  color: #C8483A;
}
.pdoc-service.v2 .psg-table.v2 tr.psg-risks td {
  background: rgba(184, 118, 42, 0.04);
  font-size: 11.5px;
}
.pdoc-service.v2 .psg-table.v2 tr.psg-risks .psg-k {
  background: rgba(184, 118, 42, 0.1);
  color: #B8762A;
}
.psg-group-intro { margin-bottom: 16px; }
.psg-intro-single { column-count: 1 !important; max-width: 100% !important; }

/* EXEC SUMMARY page */
.pdoc-exec { padding: 50px 64px 0; color: #1A1918; }
.exec-quote {
  position: relative;
  padding: 24px 32px 24px 56px;
  background: #FAFAF9;
  border-left: 4px solid var(--brand-accent);
  margin: 24px 0 28px;
  border-radius: 4px;
}
.exec-q-mark {
  position: absolute; top: 8px; left: 18px;
  font-size: 56px; color: var(--brand-accent);
  font-weight: 700; line-height: 1;
}
.exec-q-text {
  font-size: 16px; line-height: 1.65;
  color: #1A1918; font-weight: 500;
  margin: 0 0 10px 0;
}
.exec-q-attr {
  font-family: var(--font-mono); font-size: 11px;
  color: #65625B;
  letter-spacing: 0.06em;
}
.exec-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-bottom: 28px;
}
.exec-col {
  padding: 18px 20px;
  background: white;
  border: 1px solid #ECE9E2;
  border-radius: 4px;
}
.exec-col h3 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #1A1918; font-weight: 700;
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--brand-accent);
}
.exec-col p {
  font-size: 12.5px; line-height: 1.6; margin: 0 0 12px 0;
}
.exec-col ul {
  margin: 0; padding-left: 18px;
  font-size: 12.5px; line-height: 1.6;
}
.exec-col li { margin-bottom: 6px; }
.exec-bottom-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.exec-stat {
  padding: 14px 16px;
  background: white;
  border: 1px solid #ECE9E2;
  border-radius: 4px;
}
.exec-stat-highlight { background: #1A1918; color: white; border-color: #1A1918; }
.exec-stat-label {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #94908A; margin-bottom: 6px;
}
.exec-stat-highlight .exec-stat-label { color: rgba(255,255,255,0.7); }
.exec-stat-value {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 4px;
  color: #1A1918;
}
.exec-stat-value-small {
  font-size: 12px; font-weight: 600;
  line-height: 1.4; margin-bottom: 4px;
}
.exec-stat-highlight .exec-stat-value, .exec-stat-highlight .exec-stat-value-small { color: white; }
.exec-stat-sub {
  font-size: 10.5px; color: #65625B;
}
.exec-stat-highlight .exec-stat-sub { color: rgba(255,255,255,0.7); }

/* PROBLEM page */
.pdoc-problem { padding: 50px 64px 0; color: #1A1918; }
.problem-block { margin: 22px 0; }
.problem-block h3 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #1A1918; font-weight: 700;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--brand-accent);
}
.problem-block p { font-size: 13px; line-height: 1.65; margin: 0; }
.problem-twocol {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; margin: 22px 0;
}
.problem-col {
  padding: 16px 18px;
  border-radius: 4px;
  border-left: 3px solid;
}
.problem-issues { background: #FCEFEC; border-left-color: #C8483A; }
.problem-issues h3 { color: #C8483A; border-color: #C8483A; }
.problem-bright { background: #E8F4EC; border-left-color: #2F7A4F; }
.problem-bright h3 { color: #2F7A4F; border-color: #2F7A4F; }
.problem-col ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.65; }
.problem-col li { margin-bottom: 6px; }
.problem-opportunity {
  background: #FEF3E2;
  padding: 18px 22px;
  border-left: 4px solid var(--brand-accent);
  border-radius: 4px;
}
.problem-opportunity h3 { color: var(--brand-accent-deep); border-color: var(--brand-accent-deep); }
.problem-not-sell, .problem-angle { font-size: 12.5px; line-height: 1.6; margin-top: 10px !important; }

/* METHODOLOGY page */
.pdoc-method { padding: 50px 64px 0; color: #1A1918; }
.method-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.method-step {
  padding: 18px 20px;
  background: #FAFAF9;
  border: 1px solid #ECE9E2;
  border-radius: 4px;
  border-top: 3px solid var(--brand-accent);
}
.method-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.method-num {
  font-size: 36px; font-weight: 700;
  color: var(--brand-accent);
  line-height: 1;
}
.method-code {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em;
  color: var(--brand-accent-deep);
  margin-bottom: 2px;
}
.method-label { font-size: 16px; font-weight: 600; }
.method-desc { font-size: 12px; line-height: 1.6; color: #65625B; margin: 0 0 12px 0; }
.method-out-label {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #94908A; margin-bottom: 4px;
}
.method-outputs ul { margin: 0; padding-left: 16px; font-size: 11.5px; }
.method-outputs li { margin-bottom: 3px; color: #1A1918; }
.method-principles {
  margin-top: 22px;
  padding: 18px 22px;
  background: #1A1918;
  color: white;
  border-radius: 4px;
}
.method-principles h3 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-accent);
  margin: 0 0 14px 0;
}
.method-prin-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.method-prin h4 {
  font-size: 13px; font-weight: 600;
  margin: 0 0 4px 0;
  color: white;
}
.method-prin p {
  font-size: 11.5px; line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

/* TERMS page */
.pdoc-terms { padding: 50px 64px 0; color: #1A1918; }
.terms-payment, .terms-notes, .terms-next { margin: 22px 0; }
.terms-payment h3, .terms-notes h3, .terms-next h3 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--brand-accent);
}
.terms-pay-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.terms-pay-table thead { border-bottom: 2px solid #1A1918; }
.terms-pay-table th {
  padding: 8px 10px; text-align: left;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #1A1918; font-weight: 700;
}
.terms-pay-table td { padding: 10px; border-bottom: 1px solid #ECE9E2; }
.terms-notes ol, .next-steps-ol { margin: 0; padding-left: 22px; font-size: 12.5px; line-height: 1.7; }
.terms-notes li, .next-steps-ol li { margin-bottom: 6px; }
.next-steps-ol li::marker { color: var(--brand-accent); font-weight: 700; }

/* POST-LAUNCH page */
.pdoc-postlaunch { padding: 50px 64px 0; color: #1A1918; }
.postlaunch-blocks {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 14px; margin: 24px 0;
}
.postlaunch-block {
  padding: 18px 20px;
  background: #FAFAF9;
  border-left: 4px solid;
  border-radius: 4px;
}
.postlaunch-block.period-0 { border-left-color: #2C5BAA; }
.postlaunch-block.period-1 { border-left-color: var(--brand-accent); }
.postlaunch-block.period-2 { border-left-color: #2F7A4F; }
.postlaunch-period {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 6px;
}
.postlaunch-block.period-0 .postlaunch-period { color: #2C5BAA; }
.postlaunch-block.period-1 .postlaunch-period { color: var(--brand-accent-deep); }
.postlaunch-block.period-2 .postlaunch-period { color: #2F7A4F; }
.postlaunch-label {
  font-size: 14px; font-weight: 700;
  margin-bottom: 12px; color: #1A1918;
}
.postlaunch-block ul {
  margin: 0; padding-left: 16px; font-size: 11.5px; line-height: 1.6;
}
.postlaunch-block li { margin-bottom: 5px; }

/* TIMELINE PAGE — 90-day Gantt grid */
.pdoc-timeline { padding: 50px 64px 0; color: #1A1918; }
.pdoc-timeline .psg-intro { column-count: 1; max-width: 100%; }

.ptl-month-row, .ptl-day-row {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 0;
}
.ptl-label-spacer { background: transparent; }
.ptl-month-row {
  margin-top: 18px;
  border-bottom: 1px solid #1A1918;
  padding-bottom: 6px;
}
.ptl-month-row > div:nth-child(2) {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.ptl-month-cell {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.12em;
  color: var(--brand-accent-deep);
  text-align: center;
  padding: 4px 0;
  border-left: 2px solid var(--brand-accent);
}
.ptl-month-cell:first-child { border-left: 2px solid var(--brand-accent); }

.ptl-day-row {
  border-bottom: 1px solid #DCDAD3;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.ptl-day-track {
  display: grid; grid-template-columns: repeat(90, 1fr);
  gap: 0;
}
.ptl-day-tick {
  font-family: var(--font-mono); font-size: 7px;
  color: #94908A;
  text-align: center;
  padding: 2px 0 4px 0;
  border-left: 1px solid transparent;
  position: relative;
  height: 18px;
}
.ptl-day-tick.is-5::before {
  content: "";
  position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 4px; background: #DCDAD3;
}
.ptl-day-tick.is-10 {
  color: #1A1918; font-weight: 600; font-size: 8px;
}
.ptl-day-tick.is-10::before {
  content: "";
  position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 6px; background: #1A1918;
}
.ptl-day-tick.is-month {
  border-left: 1.5px solid var(--brand-accent);
  color: var(--brand-accent-deep); font-weight: 700;
}

.ptl-bars-90 {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 22px;
}
.ptl-row-90 {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px dashed #ECE9E2;
}
.ptl-row-90:last-child { border-bottom: 0; }
.ptl-row-label-90 {
  display: flex; flex-direction: column;
  padding-right: 12px; gap: 1px;
}
.ptl-code {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand-accent-deep); font-weight: 600;
  letter-spacing: 0.04em;
}
.ptl-name {
  font-size: 11px; line-height: 1.3;
  color: #1A1918;
}
.ptl-row-track-90 {
  position: relative;
  height: 22px;
}
.ptl-bg-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.ptl-month-bg {
  border-left: 1px solid #ECE9E2;
}
.ptl-month-bg:first-child {
  border-left: 1.5px solid var(--brand-accent);
}
.ptl-bar-fill {
  position: absolute;
  top: 4px; height: 14px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-accent);
  color: white;
  z-index: 1;
}
.ptl-bar-fill.phase-1 { background: #2C5BAA; }
.ptl-bar-fill.phase-2 { background: var(--brand-accent); }
.ptl-bar-fill.phase-3 { background: #2F7A4F; }
.ptl-bar-label {
  font-family: var(--font-mono); font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 4px;
}

.ptl-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 12px;
}
.ptl-card {
  padding: 12px 14px;
  background: #FAFAF9;
  border: 1px solid #ECE9E2;
  border-top: 3px solid var(--brand-accent);
}
.ptl-card.phase-1 { border-top-color: #2C5BAA; }
.ptl-card.phase-2 { border-top-color: var(--brand-accent); }
.ptl-card.phase-3 { border-top-color: #2F7A4F; }
.ptl-card-tag {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; color: var(--brand-accent-deep);
  letter-spacing: 0.06em; margin-bottom: 6px;
}
.ptl-card.phase-1 .ptl-card-tag { color: #2C5BAA; }
.ptl-card.phase-3 .ptl-card-tag { color: #2F7A4F; }
.ptl-card-text { font-size: 12px; color: #1A1918; line-height: 1.55; }

/* PRICING PAGE */
.pdoc-pricing { padding: 44px 56px; color: #1A1918; }
.ppr-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 24px; margin-bottom: 28px;
}
.ppr-tier-card {
  padding: 22px 24px;
  border-radius: 8px;
  text-align: center;
  color: white;
}
.ppr-tier-card.low { background: #2F4858; }
.ppr-tier-card.mid { background: #0F1B30; }
.ppr-tier-card.high { background: var(--brand-accent); }
.ppr-tier-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; font-weight: 700;
  margin-bottom: 4px;
}
.ppr-tier-sub {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 18px;
}
.ppr-tier-price {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.ppr-tier-feat {
  font-size: 11px; line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.ppr-grand {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  background: var(--brand-accent-soft);
  border-left: 4px solid var(--brand-accent);
  margin-bottom: 24px;
  border-radius: 4px;
}
.ppr-grand-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; font-weight: 600;
  color: var(--brand-accent-deep);
}
.ppr-grand-value {
  font-size: 26px; font-weight: 700;
  color: var(--brand-accent-deep);
  letter-spacing: -0.01em;
}
.ppr-itemized { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ppr-itemized thead { border-bottom: 2px solid #1A1918; }
.ppr-itemized th {
  text-align: left; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #1A1918; font-weight: 600;
}
.ppr-itemized td {
  padding: 7px 10px;
  border-bottom: 1px solid #ECE9E2;
}
.ppi-code { font-family: var(--font-mono); font-size: 10px; color: #94908A; }
.ppi-divider td { padding: 4px; border-bottom: 0; }
.ppi-subtotal td { background: #FAFAF9; font-size: 11px; color: #65625B; padding: 7px 10px; border-bottom: 1px solid #ECE9E2; }
.ppi-grand-row td {
  background: #1A1918; color: white;
  padding: 12px 10px; border-bottom: 0;
  font-size: 13px;
}
.ppr-note {
  margin-top: 20px;
  padding: 12px 14px;
  background: #FAFAF9;
  border-left: 3px solid #DCDAD3;
  font-size: 11px; font-style: italic;
  color: #65625B;
  line-height: 1.5;
}

/* WORKFLOW PAGE */
.pdoc-workflow { padding: 44px 56px; color: #1A1918; }
.pwf-table {
  width: 100%; border-collapse: collapse;
  margin-top: 24px; font-size: 11px;
}
.pwf-table thead {
  border-bottom: 2px solid #1A1918;
}
.pwf-table th {
  text-align: left; padding: 10px 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #1A1918; font-weight: 600;
}
.pwf-table td {
  padding: 14px;
  vertical-align: top;
  border-bottom: 1px solid #ECE9E2;
}
.pwf-step-cell {
  background: #FAFAF9;
  width: 14%;
}
.pwf-step-num {
  font-size: 32px; font-weight: 700;
  color: var(--brand-accent);
  line-height: 1;
  margin-bottom: 4px;
}
.pwf-step-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; font-weight: 600;
  color: #1A1918;
}
.pwf-list { margin: 0; padding-left: 16px; line-height: 1.5; }
.pwf-list li { margin-bottom: 4px; }
.pwf-list-orange li::marker { color: var(--brand-accent); }

/* BACK COVER */
.pdoc-back {
  background: #0F1B30;
  color: white;
  padding: 60px 70px;
  position: relative;
  display: flex; flex-direction: column;
  flex: 1;
}
.pdoc-back .pbk-content { flex: 1; display: flex; flex-direction: column; }
.pdoc-back .pbk-bottom { margin-top: auto; position: relative; left: 0; right: 0; bottom: 0; }
.pbk-pattern { position: absolute; inset: 0; pointer-events: none; }
.pbk-pattern svg { width: 100%; height: 100%; }
.pbk-content { position: relative; z-index: 1; }
.pbk-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 60px;
}
.pbk-giant {
  font-size: 110px; line-height: 0.92;
  font-weight: 800; letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 80px;
}
.pbk-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
}
.pbk-logo { height: 40px; }
.pbk-contact { text-align: left; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }

/* PRINT — A4 portrait, exact page sizing */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }
  html, body { margin: 0; padding: 0; background: white; }

  /* V12.0 — CRITICAL: override mọi rule containment/overflow trên persistent shell
     khi print. Nếu không, browser clip content theo viewport size → mất 80% nội dung. */
  body.printing-proposal #app,
  body.printing-report #app,
  body.printing-precall #app,
  body.printing-workshop #app,
  body.printing-proposal #sv-content,
  body.printing-report #sv-content,
  body.printing-precall #sv-content,
  body.printing-workshop #sv-content,
  body.printing-proposal .projects-tab,
  body.printing-report .projects-tab,
  body.printing-precall .projects-tab,
  body.printing-workshop .projects-tab,
  body.printing-proposal .project-workspace,
  body.printing-report .project-workspace,
  body.printing-precall .project-workspace,
  body.printing-workshop .project-workspace,
  body.printing-proposal .project-tab-content,
  body.printing-report .project-tab-content,
  body.printing-precall .project-tab-content,
  body.printing-workshop .project-tab-content {
    contain: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
  /* Nếu app shell có data-shell-ready=1 attribute → nó set min-height: 100vh, override */
  body.printing-proposal .app-shell,
  body.printing-report .app-shell,
  body.printing-precall .app-shell,
  body.printing-workshop .app-shell {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  /* V11.12 — Use display:none thay visibility:hidden để chuỗi parent không cascade ẩn nội dung.
     Hide everything explicitly EXCEPT the proposal preview. */
  body.printing-proposal #sv-topbar,
  body.printing-proposal #sv-footer,
  body.printing-proposal #sv-flash,
  body.printing-proposal .topbar,
  body.printing-proposal .topbar.v2,
  body.printing-proposal .project-tabs,
  body.printing-proposal .project-hero,
  body.printing-proposal .project-sidebar,
  body.printing-proposal .ws-empty,
  body.printing-proposal .quick-fab,
  body.printing-proposal .quick-drawer,
  body.printing-proposal .pc-stepper,
  body.printing-proposal .doc-toolbar,
  body.printing-proposal .pc-footer,
  body.printing-proposal .pc-error-banner,
  body.printing-proposal .inline-message,
  body.printing-proposal .footer.v2 {
    display: none !important;
  }

  /* Khi in proposal — composer overlay bỏ background tối + vị trí fixed */
  body.printing-proposal .bcw-modal-overlay,
  body.printing-proposal .proposal-overlay {
    position: static !important;
    background: white !important;
    padding: 0 !important;
    inset: auto !important;
    z-index: auto !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
  }
  body.printing-proposal .proposal-composer {
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  body.printing-proposal .pc-content {
    overflow: visible !important;
    padding: 0 !important;
    background: white !important;
    max-height: none !important;
    height: auto !important;
  }
  body.printing-proposal .pc-step4 {
    padding: 0 !important;
    background: white !important;
  }
  body.printing-proposal .pc-step4 .pc-hint { display: none !important; }
  body.printing-proposal .pc-preview-wrap {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    position: static !important;
    width: 100% !important;
  }

  /* Pages — đảm bảo break đúng */
  .proposal-doc { gap: 0 !important; box-shadow: none !important; }
  .pdoc-page {
    box-shadow: none !important;
    width: 210mm !important;
    min-height: 297mm !important;
    height: auto !important;             /* không fix height để footer không bị cut */
    margin: 0 !important;
    page-break-after: always;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: visible !important;
  }
  .pdoc-page:last-child { page-break-after: auto; }

  /* === Project Report (Báo cáo dự án) === */
  body.printing-report #sv-topbar,
  body.printing-report #sv-footer,
  body.printing-report #sv-flash,
  body.printing-report .topbar.v2,
  body.printing-report .project-tabs,
  body.printing-report .project-hero,
  body.printing-report .project-sidebar,
  body.printing-report .quick-fab,
  body.printing-report .quick-drawer,
  body.printing-report .doc-toolbar,
  body.printing-report .report-toolbar,
  body.printing-report .footer.v2,
  body.printing-report .inline-message {
    display: none !important;
  }
  body.printing-report .bcw-modal-overlay,
  body.printing-report .report-overlay {
    position: static !important;
    background: white !important;
    inset: auto !important;
    z-index: auto !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }
  body.printing-report .report-modal {
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  body.printing-report .report-document {
    overflow: visible !important;
    background: white !important;
    height: auto !important;
    max-height: none !important;
  }
  body.printing-report .rp-page {
    box-shadow: none !important;
    width: 210mm !important;
    min-height: 297mm !important;
    height: auto !important;
    margin: 0 !important;
    page-break-after: always;
    overflow: visible !important;
  }
  body.printing-report .rp-page:last-child { page-break-after: auto; }

  /* === Pre-call doc === */
  body.printing-precall #sv-topbar,
  body.printing-precall #sv-footer,
  body.printing-precall #sv-flash,
  body.printing-precall .topbar.v2,
  body.printing-precall .project-tabs,
  body.printing-precall .project-hero,
  body.printing-precall .project-sidebar,
  body.printing-precall .quick-fab,
  body.printing-precall .quick-drawer,
  body.printing-precall .doc-toolbar,
  body.printing-precall .footer.v2 {
    display: none !important;
  }
  body.printing-precall .bcw-modal-overlay,
  body.printing-precall .precall-overlay {
    position: static !important; background: white !important;
    inset: auto !important; z-index: auto !important;
    overflow: visible !important; width: auto !important; height: auto !important;
    padding: 0 !important;
  }
  body.printing-precall .precall-doc {
    position: static !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
    width: 100% !important; max-width: none !important;
    overflow: visible !important;
  }
  body.printing-precall .doc-page {
    box-shadow: none !important; width: 210mm !important;
    min-height: 297mm !important; height: auto !important;
    margin: 0 !important; overflow: visible !important;
  }

  /* === Workshop doc === */
  body.printing-workshop #sv-topbar,
  body.printing-workshop #sv-footer,
  body.printing-workshop #sv-flash,
  body.printing-workshop .topbar.v2,
  body.printing-workshop .project-tabs,
  body.printing-workshop .project-hero,
  body.printing-workshop .project-sidebar,
  body.printing-workshop .quick-fab,
  body.printing-workshop .quick-drawer,
  body.printing-workshop .doc-toolbar,
  body.printing-workshop .footer.v2 {
    display: none !important;
  }
  body.printing-workshop .bcw-modal-overlay,
  body.printing-workshop .workshop-overlay {
    position: static !important; background: white !important;
    inset: auto !important; z-index: auto !important;
    overflow: visible !important; width: auto !important; height: auto !important;
    padding: 0 !important;
  }
  body.printing-workshop .workshop-doc {
    position: static !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
    width: 100% !important; max-width: none !important;
    overflow: visible !important;
  }

  /* Backgrounds & colors print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .pc-stepper { grid-template-columns: 1fr 1fr; }
  .pc-totals { grid-template-columns: 1fr 1fr; }
  .pc-page-set { grid-template-columns: 1fr; }
  .pcv-grid { grid-template-columns: 1fr; }
  .pcv-right { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); }
  .pcv-giant { font-size: 80px; }
}
@media (max-width: 768px) {
  .pc-stepper { grid-template-columns: 1fr; gap: 8px; }
  .pc-form-grid { grid-template-columns: 1fr; }
  .pc-pricing-table { font-size: 11px; }
  .pdoc-page { padding: 24px 18px !important; min-height: auto; }
  .pcv-giant { font-size: 56px; }
  .ppr-tiers { grid-template-columns: 1fr; }
  .ptl-cards { grid-template-columns: 1fr; }
  .ptl-headers, .ptl-row { grid-template-columns: 1fr; }
  .ptl-row-label { text-align: left; padding-right: 0; }
  .pwf-step-num { font-size: 22px; }
}
.bcw-drawer .capture-fields { max-height: none; padding-right: 0; }
.bcw-drawer .capture-foot {
  border-top: 1px solid var(--c-line);
  padding: 14px 24px;
  background: var(--c-surface);
  margin: 0;
  /* V18.1.3 — Force foot luôn pinned và không bao giờ bị cắt */
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .bcw-drawer .capture-foot {
  background: var(--c-surface);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}

.ghost-btn.danger {
  color: var(--c-error);
  border-color: rgba(200, 72, 58, 0.3);
}
.ghost-btn.danger:hover { background: var(--c-error-bg); }

/* ============================================================
   PRE-CALL DOC — A4 print-ready layout
   ============================================================ */
.precall-doc {
  max-width: 820px;
  background: var(--c-bg);
  padding: 16px;
}
.doc-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px 16px; gap: 12px; flex-wrap: wrap;
}
.doc-toolbar .doc-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.doc-page {
  background: white;
  padding: 50px 56px 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  font-family: "Inter", "Be Vietnam Pro", sans-serif;
  color: #1A1918;
  /* A4 portrait approximate */
  min-height: 1100px;
}
.doc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid #1A1918;
  margin-bottom: 28px;
}
.doc-logo { height: 32px; width: auto; flex-shrink: 0; }
.doc-title { text-align: right; }
.doc-title .dt-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
}
.doc-title .dt-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: #65625B; margin-top: 4px;
}
.doc-client-block { margin-bottom: 32px; }
.doc-h1 {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 6px 0; line-height: 1.15;
}
.doc-h1-sub { font-size: 13px; color: #65625B; }
.doc-page .precall-grid {
  grid-template-columns: repeat(4, 1fr);
}
.doc-page .precall-block { page-break-inside: avoid; }
.doc-page .precall-block h3 {
  font-size: 11px; color: #1A1918;
  border-bottom: 1px solid #DCDAD3; padding-bottom: 6px; margin-bottom: 10px;
}
.doc-footer {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid #DCDAD3;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  color: #94908A;
}

/* PRINT — make sure pre-call doc prints clean */
@media print {
  .doc-toolbar { display: none !important; }
  .precall-doc { padding: 0; max-width: none; background: white; box-shadow: none; }
  .doc-page { box-shadow: none; min-height: auto; padding: 20mm; }
  .bcw-modal-overlay { background: white; padding: 0; align-items: flex-start; }
  .bcw-modal { box-shadow: none; max-width: none; width: 100%; }
}

/* ============================================================
   RESPONSIVE — Hero + Drawer + Doc
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .brief-gauge { flex-direction: row; align-self: flex-start; }
  .brief-gauge svg { width: 100px; height: 100px; }
  .bcw-drawer { width: 100vw; }
}

@media (max-width: 768px) {
  .project-hero { padding: 20px 16px 18px; }
  .hero-company { font-size: 24px; }
  .hero-sub { font-size: 13px; }
  .hero-next { padding: 12px 14px; }
  .secondary-group-label { margin-left: 16px; margin-right: 16px; }
  .collapsible-head { padding: 12px 16px; }
  .collapsible-body { padding: 14px 16px; }
  .doc-page { padding: 24px 20px; min-height: auto; }
  .doc-h1 { font-size: 22px; }
  .doc-page .precall-grid { grid-template-columns: 1fr 1fr; }
  .drawer-head { padding: 18px 18px; }
  .bcw-drawer .capture-body { padding: 14px 18px; }
  .bcw-drawer .capture-foot { padding: 12px 18px; }
}

/* ============================================================
   V11.5.2 — UI REBUILD: Top-tab nav + Project Workspace
   ============================================================ */

/* App shell — full-height layout */
.app-shell.v2 {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Top-tab navbar */
.topbar.v2 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
  position: sticky; top: 0; z-index: 50;
}
.topbar-brand .brand-logo img { height: 26px; }
.top-tabs {
  display: flex; gap: 4px;
  justify-self: center;
}
.top-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--c-text-muted);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s;
  background: transparent;
  min-height: 40px;
}
.top-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.top-tab.is-active {
  background: var(--c-text);
  color: var(--c-surface);
  border-color: var(--c-text);
}
.top-tab .tt-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top-tab .tt-icon .ds-icon {
  width: 16px; height: 16px;
}
/* V18.1 — Icon hover state in tabs */
.top-tab .ds-icon { transition: transform var(--ds-anim-fast) ease; }
.top-tab:hover .ds-icon { transform: scale(1.06); }
.top-tab.is-active .ds-icon { color: var(--c-surface); }
.topbar-right {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
}
.topbar-right .last-sync { color: var(--c-text-dim); }
.topbar-right .ghost-btn { padding: 6px 12px; font-size: 12px; min-height: 32px; }

/* Tab content container */
.tab-content {
  flex: 1;
  display: block;
  background: var(--c-bg);
}

/* ============================================================
   DASHBOARD TAB
   ============================================================ */
.dashboard-tab {
  padding: 28px 32px;
  max-width: 1400px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}
.dashboard-tab h2 {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-dim);
  margin: 0 0 14px 0;
  font-weight: 500;
}

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.kpi-big {
  padding: 22px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: var(--sh-sm);
  transition: transform 0.15s;
}
.kpi-big:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.kpi-big.kpi-warn { border-left: 3px solid var(--c-warn); }
.kpi-big.kpi-info { border-left: 3px solid var(--c-info); }
.kpi-big.kpi-success { border-left: 3px solid var(--c-success); }
.kbig-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim); margin-bottom: 8px;
}
.kbig-value {
  font-size: 36px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--c-text); line-height: 1; margin-bottom: 8px;
}
.kbig-note {
  font-size: 12px; color: var(--c-text-muted); line-height: 1.4;
}

/* Pipeline */
.dash-pipeline {
  background: var(--c-surface);
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
}
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.stage-col {
  background: var(--c-surface-2);
  border-radius: 8px;
  padding: 14px;
  min-height: 280px;
  display: flex; flex-direction: column;
}
.stage-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.stage-label {
  font-size: 12px; font-weight: 500; color: var(--c-text);
}
.stage-count {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--c-surface);
  padding: 3px 8px; border-radius: 99px;
  color: var(--c-text-muted); font-weight: 500;
}
.stage-body {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.stage-card {
  text-align: left;
  background: var(--c-surface);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s;
  position: relative;
}
.stage-card:hover {
  border-color: var(--brand-accent);
  box-shadow: var(--sh-sm);
}
.sc-name { font-size: 13px; font-weight: 500; color: var(--c-text); margin-bottom: 2px; word-break: break-word; }
.sc-company { font-size: 11px; color: var(--c-text-muted); }
.sc-risk-dot {
  position: absolute; top: 8px; right: 10px;
  color: var(--c-error); font-size: 10px;
}
.stage-empty {
  font-size: 12px; color: var(--c-text-dim); font-style: italic;
  padding: 20px 0; text-align: center;
}
.stage-more {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--c-divider);
  font-size: 11px; color: var(--c-text-dim);
  text-align: center; font-family: var(--font-mono);
}

/* Workload table */
.dash-workload {
  background: var(--c-surface);
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
}
.workload-table { display: flex; flex-direction: column; gap: 8px; }
.wl-row {
  display: grid; grid-template-columns: 200px 100px 1fr;
  gap: 16px; align-items: center;
  padding: 10px 14px;
  background: var(--c-surface-2); border-radius: 6px;
}
.wl-row.unassigned { background: var(--c-warn-bg); }
.wl-row.unassigned .wl-name { color: var(--c-warn); font-weight: 600; }
.wl-name { font-size: 13px; font-weight: 500; color: var(--c-text); }
.wl-count { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-muted); }
.wl-bar {
  height: 6px; background: var(--c-line); border-radius: 99px; overflow: hidden;
}
.wl-fill {
  height: 100%; background: var(--brand-accent);
  transition: width 0.4s ease;
}
.wl-empty { padding: 24px; text-align: center; color: var(--c-text-dim); }

/* ============================================================
   PROJECTS TAB — Sidebar + Workspace
   V12.4 — auto grid để workspace tự fill khi sidebar collapsed
   ============================================================ */
.projects-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);  /* sidebar tự co theo content, workspace fill remaining */
  height: calc(100vh - 60px - 36px);
  overflow: hidden;
  position: relative;
}

.project-sidebar {
  width: 320px;       /* explicit width khi expanded → grid auto = 320px */
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
  flex-shrink: 0;
}
.sidebar-head {
  display: flex; gap: 8px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-soft);
}
.sidebar-search {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-bg);
  outline: none;
  min-width: 0;
}
.sidebar-search:focus { border-color: var(--brand-accent); box-shadow: var(--sh-focus); }
.sidebar-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: 16px;
  font-weight: 600;
}
.sidebar-toggle:hover { background: var(--c-divider); color: var(--c-text); }
.sidebar-meta {
  padding: 8px 16px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-dim);
  border-bottom: 1px solid var(--c-line-soft);
}
.sidebar-list {
  flex: 1; overflow-y: auto;
}
.sb-item {
  display: grid; grid-template-columns: 16px 1fr;
  gap: 10px; align-items: flex-start;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  background: transparent;
  transition: background 0.1s;
}
.sb-item:hover { background: var(--c-surface-2); }
.sb-item.is-selected {
  background: var(--brand-accent-soft);
  border-left: 3px solid var(--brand-accent);
  padding-left: 13px;
}
.sb-dot { font-size: 10px; margin-top: 5px; }
.sb-dot.dot-success { color: var(--c-success); }
.sb-dot.dot-warn { color: var(--c-warn); }
.sb-dot.dot-brand { color: var(--brand-accent); }
.sb-dot.dot-neutral { color: var(--c-text-dim); }
.sb-body { min-width: 0; }
.sb-name {
  font-size: 13px; font-weight: 500; color: var(--c-text);
  margin-bottom: 2px; word-break: break-word;
}
.sb-sub { font-size: 11px; color: var(--c-text-muted); margin-bottom: 4px; }
.sb-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mini-tag {
  font-family: var(--font-mono); font-size: 9px;
  padding: 2px 5px; border-radius: 3px;
  background: var(--c-surface-2); color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mini-tag.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.mini-tag.danger { background: var(--c-error-bg); color: var(--c-error); }
.mini-tag.info { background: var(--c-info-bg); color: var(--c-info); }
.sb-empty {
  padding: 32px 20px; text-align: center;
  color: var(--c-text-dim); font-size: 13px; font-style: italic;
}

/* Project Workspace */
.project-workspace {
  background: var(--c-bg);
  overflow-y: auto;
  position: relative;
  min-width: 0;
}
.ws-empty {
  padding: 80px 40px;
  text-align: center;
  color: var(--c-text-dim);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 60vh;
}
.ws-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.ws-empty h2 { font-size: 18px; font-weight: 500; color: var(--c-text-muted); margin: 0 0 8px 0; }
.ws-empty p { font-size: 13px; color: var(--c-text-dim); max-width: 400px; line-height: 1.5; }

/* PROJECT HERO V2 — sticky */
.project-hero.v2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 28px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 20;
}
.project-hero.v2.sticky { /* sticky already applied above */ }
.ph-left .brief-gauge svg { width: 100px; height: 100px; }
.ph-left .gauge-status { font-size: 9px; }
.ph-main { min-width: 0; }
.ph-meta {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.ph-id {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-dim);
}
.ph-company {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 4px 0; line-height: 1.2;
  color: var(--c-text);
}
.ph-sub {
  font-size: 13px; color: var(--c-text-muted); margin-bottom: 8px;
}
.ph-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-actions {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.ph-action-btn {
  padding: 8px 14px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  white-space: nowrap;
  min-height: 32px;
  transition: all 0.15s;
}
.ph-action-btn:hover {
  border-color: var(--brand-accent);
  background: var(--brand-accent-soft);
  color: var(--brand-accent-deep);
}
.ph-action-btn.primary {
  background: var(--c-text); color: var(--c-surface); border-color: var(--c-text);
}
.ph-action-btn.primary:hover {
  background: var(--brand-accent); border-color: var(--brand-accent); color: #fff;
}

/* Project sub-tabs */
.project-tabs {
  display: flex; gap: 0;
  padding: 0 28px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 142px; z-index: 15;
}
.ptab {
  padding: 14px 20px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  transition: all 0.15s;
  text-align: left;
}
.ptab-label { font-size: 13px; font-weight: 500; color: var(--c-text-muted); }
.ptab-sub { font-size: 10px; color: var(--c-text-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.ptab:hover .ptab-label { color: var(--c-text); }
.ptab.is-active { border-bottom-color: var(--brand-accent); }
.ptab.is-active .ptab-label { color: var(--c-text); font-weight: 600; }
.ptab.is-active .ptab-sub { color: var(--brand-accent-deep); }

/* Tab content area */
.project-tab-content {
  padding: 24px 28px 80px;
}
.ws-content { display: flex; flex-direction: column; gap: 18px; }

/* Override detail-section margins inside ws-content */
.ws-content .detail-section { margin: 0; }

/* QUICK ACTION FAB */
.quick-fab {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-text);
  color: var(--c-surface);
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 50;
  transition: all 0.2s;
  border: 0; cursor: pointer;
}
.quick-fab:hover {
  background: var(--brand-accent);
  transform: scale(1.05);
}
.quick-drawer { width: 480px; }

/* V11.5.3 — Quick drawer light theme overrides (fix poor contrast) */
.quick-drawer .actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quick-drawer .actions-grid .wide { grid-column: 1 / -1; }
.quick-drawer .actions-grid .field-edit {
  display: flex; flex-direction: column; gap: 6px;
}
.quick-drawer .actions-grid .field-edit span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
  font-weight: 500;
}
.quick-drawer .actions-grid .field-edit input,
.quick-drawer .actions-grid .field-edit select,
.quick-drawer .actions-grid .field-edit textarea {
  padding: 10px 12px;
  background: var(--c-bg);                   /* light background, not transparent */
  border: 1px solid var(--c-line);            /* solid visible border */
  border-radius: 6px;
  color: var(--c-text);                       /* dark text for contrast */
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 40px;
}
.quick-drawer .actions-grid .field-edit input::placeholder,
.quick-drawer .actions-grid .field-edit textarea::placeholder {
  color: var(--c-text-dim);
  opacity: 0.7;
}
.quick-drawer .actions-grid .field-edit input:focus,
.quick-drawer .actions-grid .field-edit select:focus,
.quick-drawer .actions-grid .field-edit textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: var(--sh-focus);
  background: var(--c-surface);
}
.quick-drawer .actions-grid .field-edit textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}
.quick-drawer .actions-grid .field-edit select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.quick-drawer .capture-foot {
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line);
  /* V18.1.3 — Đảm bảo nút Lưu luôn nhìn thấy ở đáy drawer */
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .quick-drawer .capture-foot {
  background: var(--c-surface-3);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}
.quick-drawer .filled-count {
  font-size: 12px;
  color: var(--c-text-muted);
  font-family: var(--font-sans);
  flex: 1;
}
.quick-drawer .capture-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.quick-drawer .capture-buttons .save-btn {
  min-width: 110px;
}

/* ============================================================
   V11.5.3 — PROJECT REPORT DOC (printable A4 portrait)
   ============================================================ */
.report-overlay { background: rgba(20, 18, 15, 0.6); align-items: flex-start; padding: 24px 16px; }
.report-doc {
  background: var(--c-bg);
  max-width: 920px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  padding-bottom: 16px;
}
.report-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 5;
}
.report-toolbar .doc-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.report-document {
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 24px;
  /* Document base font for A4 readability */
  font-family: "Inter", "Be Vietnam Pro", sans-serif;
  color: #1A1918;
  font-size: 13px;
  line-height: 1.55;
}

/* Each .rp-page is rendered as a sheet that prints to a single A4 page */
.rp-page {
  background: white;
  padding: 56px 64px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  /* A4: 210mm × 297mm. Approximate min-height for visual on screen */
  min-height: 1100px;
  page-break-after: always;
}
.rp-page:last-child { page-break-after: auto; }

/* ----- COVER PAGE ----- */
.rp-cover {
  display: flex; flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, #FAFAF9 0%, white 50%);
}
.rp-cover-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 2px solid #1A1918;
}
.rp-logo { height: 32px; }
.rp-cover-org { text-align: right; }
.rp-cover-org-line {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rp-cover-org-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: #65625B; letter-spacing: 0.04em;
  margin-top: 2px;
}

.rp-cover-body { flex: 1; padding-top: 40px; }
.rp-cover-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-accent-deep);
  margin-bottom: 18px;
}
.rp-cover-company {
  font-size: 44px; line-height: 1.1;
  font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  color: #1A1918;
}
.rp-cover-client {
  font-size: 16px; color: #65625B; margin-bottom: 38px;
}

.rp-cover-gauge-wrap {
  display: flex; align-items: center; gap: 32px;
  padding: 24px 28px;
  background: #FAFAF9;
  border-left: 4px solid var(--brand-accent);
  border-radius: 4px;
  margin-bottom: 36px;
}
.rp-cover-gauge-wrap .brief-gauge svg { width: 130px; height: 130px; }
.rp-cover-gauge-side { flex: 1; }
.rp-cover-status {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: #1A1918; margin-bottom: 6px;
}
.rp-cover-action {
  font-size: 14px; color: #65625B; line-height: 1.55;
}

.rp-cover-meta {
  width: 100%; border-collapse: collapse;
  margin-bottom: 36px;
}
.rp-cover-meta tr { border-bottom: 1px solid #ECE9E2; }
.rp-cover-meta tr:last-child { border-bottom: 0; }
.rp-meta-k {
  width: 35%; padding: 10px 14px 10px 0;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #94908A; font-weight: 500;
  vertical-align: top;
}
.rp-meta-v {
  padding: 10px 0;
  font-size: 13px; color: #1A1918; font-weight: 500;
}

.rp-cover-toc {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #DCDAD3;
}
.rp-toc-title {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #94908A; font-weight: 600;
  margin-bottom: 12px;
}
.rp-toc-list {
  margin: 0; padding-left: 22px;
  font-size: 13px; line-height: 1.8;
  color: #1A1918;
}
.rp-toc-list li::marker { color: var(--brand-accent); font-weight: 600; }

.rp-cover-footer {
  display: flex; justify-content: space-between;
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid #DCDAD3;
  font-family: var(--font-mono); font-size: 10px;
  color: #94908A;
}

/* ----- SECTION PAGES ----- */
.rp-section-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 2px solid #1A1918;
  margin-bottom: 28px;
}
.rp-section-num {
  font-family: var(--font-mono); font-size: 38px;
  font-weight: 600;
  color: var(--brand-accent);
  line-height: 1;
}
.rp-section-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
  color: #1A1918;
}
.rp-section-sub {
  font-size: 13px; color: #65625B; line-height: 1.5;
}

.rp-summary {
  font-size: 16px; line-height: 1.6;
  color: #1A1918;
  margin: 0 0 28px 0;
  padding: 18px 22px;
  background: #FAFAF9;
  border-left: 3px solid var(--brand-accent);
  border-radius: 4px;
}

.rp-block { margin-bottom: 24px; }
.rp-block:last-child { margin-bottom: 0; }
.rp-block h3 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #1A1918; font-weight: 600;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #ECE9E2;
}
.rp-block.highlight {
  padding: 18px 22px;
  background: #FEF3E2;
  border-left: 3px solid var(--brand-accent);
  border-radius: 4px;
  border-bottom: 0;
}
.rp-block.highlight h3 { border-bottom: 0; padding-bottom: 0; color: var(--brand-accent-deep); }
.rp-block.highlight p { margin: 0; font-size: 14px; line-height: 1.6; }
.rp-block.bright { background: #E8F4EC; border-left-color: #2F7A4F; }
.rp-block.bright h3 { color: #2F7A4F; }
.rp-block.block-issues { background: #FCEFEC; border-left-color: #C8483A; }
.rp-block.block-issues h3 { color: #C8483A; }

.rp-twocol {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.rp-twocol .rp-block {
  margin-bottom: 0;
  padding: 14px 18px;
  border-radius: 4px;
  border-left: 3px solid;
}
.rp-twocol .rp-block ul {
  margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6;
}

.rp-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.rp-kpi {
  padding: 12px 14px;
  background: #FAFAF9;
  border: 1px solid #ECE9E2;
  border-radius: 4px;
}
.rp-kpi-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #94908A; margin-bottom: 6px;
}
.rp-kpi-value {
  font-size: 15px; font-weight: 500; color: #1A1918;
}

/* ----- TABLES ----- */
.rp-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; line-height: 1.5;
}
.rp-table thead {
  border-bottom: 2px solid #1A1918;
}
.rp-table thead th {
  text-align: left; padding: 8px 12px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #1A1918; font-weight: 600;
}
.rp-table tbody tr {
  border-bottom: 1px solid #ECE9E2;
}
.rp-table tbody tr:last-child { border-bottom: 0; }
.rp-table td {
  padding: 8px 12px;
  vertical-align: top;
  word-break: break-word;
}
.rp-table .rp-q-cell {
  width: 36%;
  font-weight: 500;
  color: #65625B;
}
.rp-table-total td {
  font-weight: 600; color: #1A1918;
  border-top: 2px solid #1A1918 !important;
  padding-top: 12px !important;
}
.rp-score-good td { color: #2F7A4F; }
.rp-score-warn td { color: #B8762A; }
.rp-score-block td { color: #C8483A; font-weight: 500; }

.rp-gaps .rp-q { font-size: 13px; color: #1A1918; font-weight: 500; }
.rp-gaps .rp-r { margin-top: 4px; font-size: 12px; color: #65625B; font-style: italic; }
.rp-row-blocking { background: #FCEFEC; }
.rp-row-important { background: #FCEFD9; }

.rp-sev {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rp-sev-blocking { background: #C8483A; color: white; }
.rp-sev-important { background: #B8762A; color: white; }
.rp-sev-nice { background: #DCDAD3; color: #1A1918; }

.rp-src {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 700;
  padding: 3px 7px; border-radius: 3px;
}
.rp-src-call { background: #EBF1FB; color: #2C5BAA; }
.rp-src-workshop { background: #FEF3E2; color: var(--brand-accent-deep); }
.rp-src-email { background: #E8F4EC; color: #2F7A4F; }
.rp-src-note { background: #ECE9E2; color: #65625B; }

.rp-time {
  font-family: var(--font-mono); font-size: 11px;
  color: #65625B; line-height: 1.4;
}

/* ----- MODULE BLOCK ----- */
.rp-module-block {
  margin-bottom: 28px;
  padding: 18px 22px;
  background: #FAFAF9;
  border-left: 3px solid var(--brand-accent);
  border-radius: 4px;
  page-break-inside: avoid;
}
.rp-module-block:last-child { margin-bottom: 0; }
.rp-module-title {
  font-size: 16px; font-weight: 600;
  margin: 0 0 12px 0;
  color: #1A1918;
}
.rp-module-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: #65625B; font-weight: 400;
}
.rp-module-table { background: white; border-radius: 4px; }

/* ----- HEAT MAP ----- */
.rp-heat {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 20px;
}
.rp-heat-col {
  padding: 14px 16px;
  border-radius: 4px;
}
.rp-heat-col.high { background: #FCEFEC; border-left: 3px solid #C8483A; }
.rp-heat-col.medium { background: #FCEFD9; border-left: 3px solid #B8762A; }
.rp-heat-col.low { background: #E8F4EC; border-left: 3px solid #2F7A4F; }
.rp-heat-col h3 {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 8px 0; padding: 0; border: 0;
  font-weight: 600;
}
.rp-heat-col.high h3 { color: #C8483A; }
.rp-heat-col.medium h3 { color: #B8762A; }
.rp-heat-col.low h3 { color: #2F7A4F; }
.rp-heat-col ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }
.rp-heat-col li { margin-bottom: 4px; }
.rp-heat-col p { margin: 0; font-size: 12.5px; color: #65625B; font-style: italic; }

/* ----- BRIEF FIELD ----- */
.rp-brief-field {
  margin-bottom: 12px;
  padding: 12px 16px;
  background: #FAFAF9;
  border-left: 3px solid var(--brand-accent);
  border-radius: 4px;
}
.rp-brief-field:last-child { margin-bottom: 0; }
.rp-brief-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #94908A; margin-bottom: 6px; font-weight: 500;
}
.rp-brief-value {
  font-size: 13px; line-height: 1.6; color: #1A1918;
  white-space: pre-wrap;
}

/* ----- LISTS ----- */
.rp-ol, .rp-ul { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.7; }
.rp-ol li, .rp-ul li { margin-bottom: 6px; }
.rp-ol li::marker { color: var(--brand-accent-deep); font-weight: 600; }

/* ----- NOTES & ACTIVITY ----- */
.rp-note {
  padding: 12px 16px;
  background: #FAFAF9;
  border-left: 3px solid #DCDAD3;
  border-radius: 4px;
  margin-bottom: 10px;
}
.rp-note-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: #65625B; margin-bottom: 6px;
}
.rp-note-body {
  font-size: 13px; line-height: 1.55; color: #1A1918;
}

/* ----- APPENDIX ----- */
.rp-appendix .rp-table { font-size: 11.5px; }
.rp-answers .rp-qid { font-family: var(--font-mono); color: #94908A; font-size: 11px; }
.rp-answers .rp-mod { font-family: var(--font-mono); color: #65625B; font-size: 11px; }

/* ----- DOCUMENT FOOTER ----- */
.rp-document-footer {
  display: flex; justify-content: space-between;
  padding: 14px 24px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: #94908A;
  border-top: 1px solid #DCDAD3;
}

.rp-empty { color: #94908A; font-style: italic; font-size: 13px; }

/* ============================================================
   PRINT — A4 portrait
   ============================================================ */
@media print {
  @page {
    size: A4 portrait;
    margin: 14mm;
  }
  body * { visibility: hidden; }
  .report-overlay, .report-overlay * { visibility: visible; }
  .report-overlay {
    position: absolute; inset: 0;
    background: white;
    padding: 0;
    overflow: visible;
    display: block;
  }
  .report-doc {
    box-shadow: none; max-width: none; width: 100%;
    border-radius: 0; padding-bottom: 0;
    background: white;
  }
  .report-toolbar { display: none !important; }
  .report-document { padding: 0; gap: 0; }
  .rp-page {
    box-shadow: none; padding: 0; margin: 0;
    min-height: auto;
    page-break-after: always;
    background: white;
  }
  .rp-page:last-child { page-break-after: auto; }
  .rp-cover { background: white !important; }
  .rp-section-head, .rp-block, .rp-module-block, .rp-heat-col,
  .rp-twocol, .rp-kpi-row { page-break-inside: avoid; }
  .rp-table thead { display: table-header-group; } /* repeat header on each printed page */
  .rp-table tr { page-break-inside: avoid; }
  .rp-document-footer {
    display: none; /* per-page footer comes from @page rule, not this */
  }
}

/* Responsive: smaller screens — keep readable */
@media (max-width: 768px) {
  .report-document { padding: 12px; }
  .rp-page { padding: 28px 24px; min-height: auto; }
  .rp-cover-company { font-size: 32px; }
  .rp-section-num { font-size: 28px; }
  .rp-section-title { font-size: 18px; }
  .rp-cover-gauge-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rp-cover-gauge-wrap .brief-gauge svg { width: 100px; height: 100px; }
  .rp-kpi-row { grid-template-columns: 1fr 1fr; }
  .rp-twocol { grid-template-columns: 1fr; }
  .rp-heat { grid-template-columns: 1fr; }
}

/* SYSTEM TAB */
.system-tab {
  padding: 28px 32px;
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}
.system-block {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 22px 26px;
}
.system-block.dark {
  background: #1B1A18; color: #E8E3DA; border-color: #2A2825;
}
.system-block.dark h2 { color: var(--brand-accent); }
.system-block h2 {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-text-dim); margin: 0 0 14px 0; font-weight: 500;
}
.sys-spreadsheet {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-muted); margin: 0 0 14px 0;
}

/* Activity / Notes / Logs lists in Data tab */
.activity-list, .notes-list, .logs-list { display: flex; flex-direction: column; gap: 8px; }
.act-row, .note-row, .log-row {
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.act-meta, .note-meta { font-size: 12px; margin-bottom: 4px; }
.act-meta .muted, .note-meta .muted, .log-time { color: var(--c-text-dim); font-family: var(--font-mono); font-size: 11px; }
.act-note, .note-body { color: var(--c-text); margin-top: 4px; }
.act-changes summary { font-size: 11px; color: var(--c-text-muted); cursor: pointer; margin-top: 6px; }
.act-changes pre {
  font-size: 10px; background: var(--c-bg); padding: 8px 10px; border-radius: 4px;
  overflow-x: auto; margin: 6px 0 0 0;
}
.log-row {
  display: grid; grid-template-columns: 70px 140px 1fr 140px;
  gap: 12px; align-items: center;
  font-size: 12px;
}
.log-row.level-error { border-left: 3px solid var(--c-error); background: var(--c-error-bg); }
.log-row.level-warn { border-left: 3px solid var(--c-warn); background: var(--c-warn-bg); }
.log-level {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
  background: var(--c-surface); text-align: center;
}
.log-action { font-family: var(--font-mono); font-size: 11px; color: var(--c-text); }
.log-msg { color: var(--c-text-muted); }

.footer.v2 {
  padding: 8px 20px;
  font-size: 10px;
  color: var(--c-text-dim);
  text-align: right;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-mono);
  height: 36px;
  display: flex; align-items: center; justify-content: flex-end;
}

/* ============================================================
   RESPONSIVE — V2
   ============================================================ */
@media (max-width: 1280px) {
  .pipeline-grid { grid-template-columns: repeat(3, 1fr); }
  .pipeline-grid .stage-col:nth-child(n+4) { display: none; }
}
@media (max-width: 1024px) {
  .topbar.v2 { grid-template-columns: 1fr auto; gap: 8px; padding: 0 12px; }
  .top-tabs { grid-column: 1 / -1; order: 2; padding: 0 12px 8px; justify-self: stretch; }
  .top-tab { padding: 8px 12px; font-size: 12px; flex: 1; justify-content: center; }
  .top-tab .tt-icon { display: none; }
  .topbar-right { order: 1; gap: 8px; }
  .projects-tab { grid-template-columns: 1fr; height: auto; }
  .project-sidebar { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .project-hero.v2 { grid-template-columns: 1fr; gap: 14px; }
  .ph-left { display: flex; align-self: flex-start; }
  .ph-actions { flex-direction: row; flex-wrap: wrap; }
  .pipeline-grid { grid-template-columns: 1fr 1fr; }
  .pipeline-grid .stage-col:nth-child(n+3) { display: none; }
  .project-tabs { top: 0; position: relative; }
}
@media (max-width: 768px) {
  .dashboard-tab { padding: 16px; }
  .system-tab { padding: 16px; }
  .kbig-value { font-size: 28px; }
  .pipeline-grid { grid-template-columns: 1fr; }
  .pipeline-grid .stage-col:nth-child(n+2) { display: block; }
  .wl-row { grid-template-columns: 1fr; gap: 8px; }
  .project-tab-content { padding: 16px 12px 60px; }
  .project-hero.v2 { padding: 14px 16px; }
  .ph-company { font-size: 20px; }
  .quick-drawer { width: 100vw; }
  .quick-fab { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 18px; }
  .ptab { padding: 10px 12px; }
  .ptab-label { font-size: 12px; }
  .ptab-sub { display: none; }
}
@media (max-width: 540px) {
  .top-tab { padding: 6px 8px; font-size: 11px; }
  .top-tab .tt-label { font-size: 11px; }
  .topbar-right .last-sync { display: none; }
  .ph-actions .ph-action-btn { font-size: 11px; padding: 6px 10px; min-height: 28px; }
}

/* ============================================================
   V11.12 — PERSISTENT SHELL DOM
   Topbar/footer/content/modals wrappers tạo 1 lần, không bao giờ rebuild.
   Mỗi render chỉ swap NỘI DUNG bên trong shell → không có khoảnh khắc empty.
   ============================================================ */
.app-shell.v2[data-shell-ready="1"] {
  display: block;        /* không dùng flex để tránh layout recompute mỗi render */
  min-height: 100vh;
  background: var(--c-bg);
}
#sv-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-surface);    /* explicit bg để không thấy gì xuyên qua */
}
#sv-content {
  display: block;
  background: var(--c-bg);
  /* contain layout — ngăn changes trong content không trigger reflow ngoài */
  contain: layout style paint;
  min-height: calc(100vh - 200px);
}
#sv-modals { position: fixed; top: 0; left: 0; width: 100%; height: 0; z-index: 100; pointer-events: none; }
#sv-modals > * { pointer-events: auto; }
#sv-footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  /* V21.1.1 — Footer là static block ở cuối shell, KHÔNG bao giờ fixed/sticky.
     Sync indicator + version đều đã render qua topbar. */
  position: static;
}
#sv-flash { position: fixed; bottom: 16px; right: 16px; z-index: 200; pointer-events: none; }

/* ============================================================
   V21.1.1 — Z-INDEX MAP (single source of truth)
   ----------------------------------------------------------
     0-9   : content normal flow
     50    : sticky topbar, sticky section headers
     100   : modal layer (#sv-modals)
     200   : toast/flash (#sv-flash)
     8500-9100 : drawers + dialogs (customer, compare, snippet, tag, palette, help)
     9500-9700 : tour overlay + hint popover
     9999  : global loader bar (top 3px)
     99999 : bootstrap loader
   ============================================================ */

/* Khi đang render lại content, override mọi animation/transition */
#sv-content,
#sv-content > *,
#sv-content > * > * {
  animation-duration: 0s !important;
  transition: none !important;
}
/* Trừ những element user chủ động interact */
#sv-content button,
#sv-content input,
#sv-content select,
#sv-content textarea {
  transition: background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease !important;
}

/* V11.12 — View Transitions API DISABLED. Persistent shell + replaceChildren
   đã đủ tránh flicker, không cần VT (đôi khi VT gây flash thay vì fix). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
}

/* ============================================================
   V12.6 — PROJECT HERO REDESIGN — gọn, balanced, ngay ngắn
   ============================================================ */
.project-hero.v3 {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
[data-theme="dark"] .project-hero.v3 { background: var(--c-surface-2); }

/* V18.1.1 FIX — Sticky hero với solid bg + drop shadow khi scrolled
   Tránh content bên dưới scroll nhìn xuyên qua hero */
.project-hero.v3.sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-surface);
  /* Drop shadow nặng hơn ở dưới để tách rõ với content scroll */
  box-shadow: 0 4px 16px rgba(15, 27, 48, 0.08), 0 1px 0 var(--c-line);
  /* Backdrop blur để hơi smooth khi scroll content qua */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Margin bottom để tách */
  margin-bottom: 16px;
  /* Border bottom đậm hơn */
  border-bottom: 1px solid var(--c-line);
}
[data-theme="dark"] .project-hero.v3.sticky {
  background: var(--c-surface-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 1px 0 var(--c-line);
}

/* Top meta row — small ID + warnings */
.project-hero.v3 .ph-topmeta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;  /* V16.6 — wrap to next row khi quá nhiều buttons */
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-dim);
  letter-spacing: 0.4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line-soft);
  min-height: 36px;
}
/* V16.6 — Push health dial sang phải khi có chỗ */
.project-hero.v3 .ph-topmeta .ph-health-dial {
  margin-left: auto;
}
/* V16.6 — Mobile compact hero buttons */
@media (max-width: 768px) {
  .project-hero.v3 .ph-topmeta {
    gap: 6px;
    padding-bottom: 8px;
  }
  .project-hero.v3 .ph-topmeta .ph-health-dial {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .ph-customer-btn .tab-add-label,
  .ph-reminder-btn span:nth-of-type(2),
  .ph-timer-btn span:nth-of-type(2) {
    display: none;  /* hide labels, keep icons */
  }
}
.project-hero.v3 .ph-id {
  text-transform: uppercase;
  word-break: break-all;
  flex: 0 1 auto;
}
.project-hero.v3 .tag.warn.small {
  font-size: 10px;
  padding: 2px 8px;
}

/* Main row — gauge + info + CTA */
.project-hero.v3 .ph-mainrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

/* Gauge wrapper */
.ph-gauge-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.brief-gauge.compact {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.brief-gauge.compact svg {
  display: block;
  flex: 0 0 auto;
}
.gauge-status.compact {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  font-family: var(--font-mono);
}

/* Info column */
.project-hero.v3 .ph-info {
  min-width: 0;
}
.project-hero.v3 .ph-company {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--c-text);
  line-height: 1.2;
  word-break: break-word;
}
.project-hero.v3 .ph-sub {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-bottom: 10px;
}
.project-hero.v3 .ph-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.project-hero.v3 .ph-tags .tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Primary CTA column */
.project-hero.v3 .ph-cta {
  flex: 0 0 auto;
}
.project-hero.v3 .ph-proposal-btn {
  font-size: 14px;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-deep));
  color: white;
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(248,149,29,0.25);
  transition: transform 80ms, box-shadow 80ms;
  white-space: nowrap;
}
.project-hero.v3 .ph-proposal-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(248,149,29,0.35);
}
.project-hero.v3 .ph-proposal-btn:disabled {
  background: var(--c-surface-3);
  color: var(--c-text-dim);
  box-shadow: none;
  cursor: not-allowed;
}

/* Secondary actions row — 4 nhỏ ngang */
.project-hero.v3 .ph-secondary-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--c-line-soft);
}
.project-hero.v3 .ph-secondary-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  color: var(--c-text);
  cursor: pointer;
  font-family: inherit;
  transition: background 80ms, border-color 80ms;
  white-space: nowrap;
  min-width: 0;
}
.project-hero.v3 .ph-secondary-btn:hover {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
}
.project-hero.v3 .ph-secondary-btn span:first-child {
  font-size: 14px;
}

/* Mobile ≤768px — stack mainrow */
@media (max-width: 768px) {
  .project-hero.v3 {
    padding: 14px 16px;
  }
  .project-hero.v3 .ph-mainrow {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }
  .project-hero.v3 .ph-cta {
    grid-column: 1 / -1;
  }
  .project-hero.v3 .ph-proposal-btn {
    width: 100%;
    padding: 12px 16px;
  }
  .project-hero.v3 .ph-secondary-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-hero.v3 .ph-company { font-size: 18px; }
  .ph-gauge-wrap svg { width: 72px !important; height: 72px !important; }
}
@media (max-width: 480px) {
  .project-hero.v3 .ph-mainrow {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .project-hero.v3 .ph-info { text-align: center; }
  .project-hero.v3 .ph-tags { justify-content: center; }
  .ph-gauge-wrap { margin: 0 auto; }
  .project-hero.v3 .ph-secondary-actions { grid-template-columns: 1fr 1fr; }
}
/* V16.8 — Default 3 columns (đã bỏ Cập nhật nhanh) */
.project-hero.v3 .ph-secondary-actions {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .project-hero.v3 .ph-secondary-actions { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .project-hero.v3 .ph-secondary-btn { padding: 8px 6px; font-size: 11px; }
}

/* ============================================================
   V12.5 — Inline share links trong proposal history row
   ============================================================ */
.phist-share-inline {
  display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.phist-share-inline .share-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  font-size: 11px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--c-text);
  transition: background 80ms;
  white-space: nowrap;
}
.phist-share-inline .share-btn:hover { background: var(--brand-accent-soft); border-color: var(--brand-accent); }
.phist-share-inline .share-compact { color: var(--c-info); border-color: rgba(44,91,170,0.2); }
.phist-share-inline .share-compact:hover { background: var(--c-info-bg); border-color: var(--c-info); }
.phist-share-inline .share-full { color: var(--brand-accent-deep); border-color: rgba(248,149,29,0.2); }
.phist-share-inline .share-full:hover { background: var(--brand-accent-soft); border-color: var(--brand-accent); }
.phist-share-inline .open-btn {
  padding: 4px 9px;
  font-size: 12px;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  transition: background 80ms;
}
.phist-share-inline .open-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
@media (max-width: 768px) {
  .phist-share-inline { flex-direction: column; align-items: stretch; }
  .phist-share-inline .share-btn,
  .phist-share-inline .open-btn { justify-content: center; }
}

/* ============================================================
   V12.3 — Global loading bar (top of viewport)
   ============================================================ */
.sv-global-loader {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-line-soft);
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.sv-global-loader.is-active { opacity: 1; }
.sv-global-loader::before {
  content: "";
  position: absolute; left: -40%; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
  animation: svLoaderSlide 1.1s ease-in-out infinite;
}
@keyframes svLoaderSlide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ============================================================
   V12.3 — Workspace loading skeleton
   ============================================================ */
.ws-loading {
  padding: 40px 36px;
  text-align: center;
  background: white;
  border-radius: 12px;
  margin: 16px;
}
.ws-loading h2 {
  font-size: 18px;
  color: var(--c-text);
  margin: 16px 0 4px;
}
.ws-loading p {
  font-size: 13px;
  color: var(--c-text-muted);
  margin: 0 0 24px;
}
.loader-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--c-line);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton-blocks {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; margin: 0 auto;
}
.skel {
  background: linear-gradient(90deg, var(--c-surface-2), var(--c-surface-3), var(--c-surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-hero { height: 100px; }
.skel-tabs { height: 36px; max-width: 60%; }
.skel-content { height: 140px; }
.skel-content.short { height: 80px; max-width: 80%; }

/* ============================================================
   V12.3 — Sidebar collapsed RAIL (chỉ thanh dọc gọn)
   ============================================================ */
.project-sidebar.is-collapsed {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  flex: 0 0 56px !important;
  padding: 0 !important;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
}
.sidebar-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%;
  padding: 16px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--c-text);
  gap: 8px;
  transition: background 100ms;
}
.sidebar-rail:hover { background: var(--c-surface-2); }
.rail-icon { font-size: 20px; }
.rail-text {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 12px 0;
  color: var(--c-text-muted);
}
.rail-count {
  background: var(--brand-accent);
  color: white;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
  min-width: 22px;
  text-align: center;
}
.rail-chev {
  margin-top: auto;
  font-size: 18px;
  color: var(--c-text-dim);
  transition: transform 100ms;
}
.sidebar-rail:hover .rail-chev { transform: translateX(3px); color: var(--brand-accent); }


/* ============================================================
   V12.2 — Dashboard block layout (title row TRÊN + content row DƯỚI)
   ============================================================ */
.dash-block {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 16px;
}
.dash-block-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line-soft);
}
.dash-block-head h2 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--c-text);
  font-family: var(--font-mono);
  margin: 0 0 3px;
}
.dash-block-head .section-sub {
  font-size: 11px;
  color: var(--c-text-muted);
  margin: 0;
}
.dash-block-head .ghost-btn {
  flex: 0 0 auto;
}
.section-head-with-action {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.section-head-with-action h2 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--c-text);
  font-family: var(--font-mono);
  margin: 0;
}
.section-head-with-action .section-sub {
  font-size: 11px; color: var(--c-text-muted);
  margin: 0;
}
.kpi-row-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kpi-row-grid.full-width {
  width: 100%;
}
.kpi-row-grid .kpi-big {
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  min-width: 0;        /* cho phép card co lại trong grid */
}
.kpi-row-grid .kpi-big.kpi-success { background: var(--c-success-bg); border-color: rgba(47, 122, 79, 0.2); }
.kpi-row-grid .kpi-big.kpi-info { background: var(--c-info-bg); border-color: rgba(44, 91, 170, 0.15); }
.kpi-row-grid .kpi-big.kpi-warn { background: var(--c-warn-bg); border-color: rgba(184, 118, 42, 0.18); }

.dash-funnel {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 16px;
}
.dash-funnel h2 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  margin: 0 0 16px;
}
.funnel-bars { display: flex; flex-direction: column; gap: 10px; }
.funnel-row {
  display: grid; grid-template-columns: 180px 1fr 90px;
  gap: 12px; align-items: center;
}
.funnel-label {
  font-size: 12px; font-weight: 600;
  color: var(--c-text);
}
.funnel-bar-wrap {
  position: relative;
  height: 32px; background: var(--c-surface-2);
  border-radius: 4px; overflow: hidden;
  display: flex; align-items: center;
}
.funnel-bar {
  height: 100%; transition: width 400ms ease-out;
  border-radius: 4px;
}
.funnel-count {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 600; color: white;
  font-family: var(--font-mono);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.funnel-drop {
  font-size: 11px; color: var(--c-text-muted);
  text-align: right; font-family: var(--font-mono);
}

/* V12.2 — Tablet 1024px */
@media (max-width: 1024px) {
  .kpi-row-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-block-head { flex-wrap: wrap; }
}
/* V12.2 — Mobile 768px */
@media (max-width: 768px) {
  .kpi-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-block { padding: 14px; margin-bottom: 12px; }
  .dash-block-head { padding-bottom: 10px; margin-bottom: 12px; }
  .funnel-row { grid-template-columns: 1fr; gap: 4px; }
  .funnel-label { font-size: 11px; }
  .funnel-drop { font-size: 10px; text-align: left; }
  .pipeline-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pipeline-grid .stage-col { padding: 10px; }
  .pipeline-grid .stage-card { padding: 8px 10px; }
  .pipeline-grid .stage-card .sc-name { font-size: 12px; }
  .pipeline-grid .stage-card .sc-company { font-size: 11px; }
  .dashboard-tab { padding: 12px; }
  .kpi-big { padding: 12px; }
  .kbig-value { font-size: 22px; }
  .kbig-label { font-size: 10px; }
  .kbig-note { font-size: 10px; }
}
/* V12.2 — Mobile compact 640px (ẩn note để card gọn) */
@media (max-width: 640px) {
  .kpi-row-grid .kpi-big .kbig-note { display: none; }
}
/* V12.2 — Small mobile 540px */
@media (max-width: 540px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
  .pipeline-grid { grid-template-columns: 1fr; }
  .kbig-value { font-size: 20px; }
  .funnel-bar-wrap { height: 28px; }
  .funnel-count { font-size: 11px; }
  .sd-link-input-wrap { flex-wrap: wrap; }
  .sd-copy-btn, .sd-open-btn { flex: 1 1 calc(50% - 3px); }
}

/* ============================================================
   V12.0 — TOPBAR USER MENU (gọn 5 buttons → 1 avatar dropdown)
   ============================================================ */
.topbar-right.v2 {
  display: flex; align-items: center; gap: 10px;
  position: relative;
}
.pill-compact {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 14px;
  font-size: 11px; font-weight: 500;
  background: var(--c-surface-2); color: var(--c-text-muted);
  letter-spacing: 0.2px;
}
.pill-compact .dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.pill-compact.is-ok .dot { background: var(--c-success); }
.pill-compact.is-err .dot { background: var(--c-error); }
.pill-compact.is-loading .dot { background: var(--brand-accent); animation: pulse 1.2s ease infinite; }
.pill-compact .label-text { display: inline; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.user-menu-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 22px;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
  font-size: 12px;
  color: var(--c-text);
}
.user-menu-trigger:hover { background: var(--c-surface-2); border-color: var(--c-divider); }
.user-menu-trigger.is-open { background: var(--brand-accent-soft); border-color: var(--brand-accent); }
.umt-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-deep));
  color: white; font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.5px;
}
.umt-chevron { font-size: 9px; color: var(--c-text-muted); }

.user-menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  min-width: 240px;
  z-index: 100;
  overflow: hidden;
  animation: dropFadeIn 80ms ease-out;
}
@keyframes dropFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.umd-head {
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
}
.umd-name {
  font-size: 13px; font-weight: 600; color: var(--c-text);
  margin-bottom: 2px;
}
.umd-sync {
  font-size: 11px; color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.umd-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  font-family: inherit;
  transition: background 80ms;
}
.umd-item:hover { background: var(--c-surface-2); }
.umd-item.danger { color: var(--c-error); }
.umd-item.danger:hover { background: var(--c-error-bg); }
.umd-item > span:first-child {
  width: 18px; text-align: center; font-size: 14px;
}
.umd-divider {
  border: 0; border-top: 1px solid var(--c-line);
  margin: 4px 0;
}

/* Mobile responsive — bottom nav for top tabs, simpler header */
@media (max-width: 768px) {
  .topbar.v2 {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand right" "tabs tabs";
    padding: 8px 12px;
    gap: 8px;
  }
  .topbar-brand { grid-area: brand; }
  .topbar-right.v2 { grid-area: right; }
  .top-tabs {
    grid-area: tabs;
    border-top: 1px solid var(--c-line);
    padding-top: 6px;
    margin-top: 4px;
    justify-content: center;
  }
  .pill-compact .label-text { display: none; }     /* chỉ giữ dot màu */
  .pill-compact { padding: 5px 6px; }
  .user-menu-trigger {
    padding: 3px 8px 3px 3px;
    font-size: 11px;
  }
  .umt-avatar { width: 24px; height: 24px; font-size: 10px; }
  .user-menu-dropdown {
    min-width: 220px;
    right: 0;
    max-width: calc(100vw - 24px);
  }
  /* Body content padding cho nhỏ */
  #sv-content { padding-top: 4px; }
  /* Project workspace stack */
  .project-workspace { padding: 12px; }
  .project-hero, .project-hero.v2 {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 14px 16px;
  }
  .ph-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: flex-start;
  }
  .ph-action-btn {
    flex: 1 1 calc(50% - 6px); min-width: 0;
    font-size: 11px; padding: 8px 10px;
  }
  /* Composer modal full-screen mobile */
  .bcw-modal.proposal-composer,
  .bcw-modal.report-modal,
  .bcw-modal.workshop-doc {
    width: 100vw !important; height: 100vh !important;
    max-width: 100vw !important; max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .bcw-drawer.capture-drawer { width: 100vw !important; }
  /* Pricing table on mobile — stack */
  .pc-pricing-table { font-size: 10px; }
  .pc-totals { grid-template-columns: 1fr; }
  /* History table responsive */
  .phist-row { grid-template-columns: 1fr !important; }
  /* Sidebar on mobile — full width */
  .project-sidebar {
    max-height: 280px;
    overflow-y: auto;
  }
}

@media (max-width: 540px) {
  .top-tab .tt-icon { font-size: 13px; }
  .top-tab .tt-label { font-size: 11px; }
  .ph-action-btn { flex: 1 1 100%; }
  .pc-stepper { grid-template-columns: 1fr; gap: 4px; }
  .pc-step { padding: 8px 10px; }
  .pc-bulk-bar { flex-wrap: wrap; gap: 6px; }
  .pc-bulk-btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 8px 10px; font-size: 11px; }
}

/* V11.13 — Capture modal generic fields (luôn show kể cả khi không có gap) */
.capture-generic {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px dashed var(--c-line);
}
.capture-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  margin: 0 0 10px;
  font-family: var(--font-mono);
}
.capture-empty-notice {
  background: var(--c-success-bg);
  padding: 12px 14px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-success);
  margin-bottom: 12px;
}
.capture-empty-notice strong {
  color: var(--c-success);
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.capture-empty-notice p {
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
}
.capture-field.severity-note {
  background: var(--c-surface);
  border-left-color: var(--c-info) !important;
}
.cf-sev.info {
  background: var(--c-info-bg);
  color: var(--c-info);
}

/* ============================================================
   V11.8 — FLICKER MITIGATION (legacy — vẫn giữ cho fallback path)
   ============================================================ */
.app-shell { background: var(--c-bg); }
.proposal-composer .pc-content {
  /* Composer scrollable area — disable transition để khi render lại không nháy */
  background: var(--c-surface-2);
  contain: layout style paint;
  will-change: scroll-position;
}
.pc-pricing-table {
  /* Disable bất kỳ transition nào trên row khi render lại */
  contain: layout style;
}
.pc-pricing-table tr { transition: none !important; }
.pc-totals { contain: layout style; }
.pc-bulk-bar { contain: layout style; }
/* Custom price input — không lose focus khi total update */
.pc-custom-input { transition: none !important; }
.pc-custom-input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
}

/* ============================================================
   V11.8 — PROPOSAL LIFECYCLE
   ============================================================ */

/* Section header với actions row (sectionWrap upgraded) */
.section-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.section-head-row h3 { margin: 0; }

/* Proposal history actions in header */
.proposal-hist-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.proposal-hist-actions .save-btn {
  background: var(--brand-accent); color: #fff; border: 0;
  padding: 8px 14px; border-radius: var(--r-md); font-weight: 600;
  font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.proposal-hist-actions .save-btn:hover { background: var(--brand-accent-deep); }
.proposal-hist-actions .ghost-btn {
  background: var(--c-surface); border: 1px solid var(--c-line);
  padding: 6px 12px; border-radius: var(--r-md); cursor: pointer;
  font-size: 13px; color: var(--c-text);
}
.proposal-hist-actions .ghost-btn:hover { background: var(--c-surface-2); }
/* V12.8 — Mobile: nén header actions */
@media (max-width: 768px) {
  .proposal-hist-actions {
    width: 100%; justify-content: space-between;
  }
  .proposal-hist-actions .save-btn {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
  .section-head-row {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .section-head-row h3 {
    width: 100%;
    font-size: 14px !important;
  }
}

/* Proposal history table */
.proposal-hist-table {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
}
.phist-row {
  display: grid;
  grid-template-columns: 1.7fr 1.5fr 0.9fr 1.1fr 0.7fr 1.1fr;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line-soft);
  align-items: center;
  font-size: 13px;
}
.phist-row:last-child { border-bottom: 0; }
.phist-row.phist-head {
  background: var(--c-surface-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
}
.phist-row .phist-id strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text);
}
.phist-row .phist-total {
  font-weight: 600;
  color: var(--brand-accent-deep);
}
.phist-row .phist-views strong { font-size: 14px; }
.phist-row .muted.small { font-size: 11px; color: var(--c-text-dim); margin-top: 2px; }
.phist-row .phist-actions { display: flex; gap: 6px; }
.phist-row .phist-actions .ghost-btn.small {
  padding: 4px 10px; font-size: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); cursor: pointer; color: var(--c-text);
  white-space: nowrap;
}
.phist-row .phist-actions .ghost-btn.small:hover {
  background: var(--brand-accent-soft); border-color: var(--brand-accent);
}

/* Status badge */
.prop-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 4px;
}
.prop-badge.prop-st-draft        { background: #E9E6E0; color: #65625B; }
.prop-badge.prop-st-sent         { background: #EBF1FB; color: #2C5BAA; }
.prop-badge.prop-st-viewed       { background: #FCEFD9; color: #B8762A; }
.prop-badge.prop-st-negotiating  { background: #FEF3E2; color: #C66F00; }
.prop-badge.prop-st-signed       { background: #E8F4EC; color: #2F7A4F; }
.prop-badge.prop-st-lost         { background: #FDEFEC; color: #C8483A; }

.prop-status-select {
  display: block; width: 100%;
  padding: 4px 6px; font-size: 11px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text);
  cursor: pointer;
}
.prop-status-select:focus { outline: none; box-shadow: var(--sh-focus); }

/* Empty state */
.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  border: 1px dashed var(--c-divider);
}
.empty-state p { margin: 4px 0; }
.empty-state .small { font-size: 12px; color: var(--c-text-dim); }

/* Composer toolbar — Save button + share link */
.proposal-composer .doc-toolbar .modal-actions {
  display: flex; align-items: center; gap: 8px;
}
.proposal-composer .pc-save-btn {
  background: var(--brand-accent) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 8px 16px !important;
  font-weight: 600;
  font-size: 13px;
}
.proposal-composer .pc-save-btn:hover:not(:disabled) {
  background: var(--brand-accent-deep) !important;
}
.proposal-composer .pc-save-btn:disabled {
  opacity: 0.6; cursor: not-allowed;
}
.proposal-composer .doc-meta-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-accent);
  font-weight: 600;
}
/* Inline status indicator trong toolbar */
.pc-save-status {
  font-size: 11px; font-weight: 600;
  margin-left: 4px;
  font-family: var(--font-mono);
}
.pc-save-status.saving { color: var(--brand-accent); }
.pc-save-status.ok { color: var(--c-success); }

/* Inline error banner ngay trong composer */
.pc-error-banner {
  background: var(--c-error-bg);
  color: var(--c-error);
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-error);
  font-size: 13px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.pc-error-banner strong { margin-right: 6px; }
.pc-err-close {
  background: transparent; border: 1px solid var(--c-error);
  color: var(--c-error); padding: 2px 10px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.pc-err-close:hover { background: var(--c-error); color: white; }

/* Responsive — proposal history */
@media (max-width: 1024px) {
  .phist-row { grid-template-columns: 1.5fr 1.3fr 1fr 1fr; }
  .phist-row .phist-views, .phist-row .phist-date { display: none; }
  .phist-row.phist-head .phist-views, .phist-row.phist-head .phist-date { display: none; }
}
/* V12.8 — MOBILE: stack thành card layout, không dùng grid */
@media (max-width: 768px) {
  .phist-row.phist-head { display: none !important; }
  .phist-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    grid-template-columns: none !important;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-surface);
  }
  .phist-row .phist-id {
    display: flex; flex-direction: column; gap: 2px;
  }
  .phist-row .phist-id strong {
    font-size: 13px !important;
  }
  /* Trong card: status + total + date 1 row gọn */
  .phist-row .phist-status,
  .phist-row .phist-total,
  .phist-row .phist-date,
  .phist-row .phist-views {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--c-line-soft);
  }
  .phist-row .phist-status::before { content: "Trạng thái:"; color: var(--c-text-muted); font-size: 11px; }
  .phist-row .phist-total::before { content: "Giá trị:"; color: var(--c-text-muted); font-size: 11px; font-weight: 400; }
  .phist-row .phist-date::before { content: "Cập nhật:"; color: var(--c-text-muted); font-size: 11px; }
  .phist-row .phist-views::before { content: "Lượt xem:"; color: var(--c-text-muted); font-size: 11px; }
  /* Actions wrap toàn bộ button trong row cuối, tất cả nằm cùng vùng */
  .phist-row .phist-actions {
    width: 100%;
    display: flex !important; flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 4px;
    border-top: 1px solid var(--c-line);
    padding-top: 10px;
  }
  .phist-row .phist-actions .ghost-btn.small {
    flex: 1 1 calc(50% - 3px);
    padding: 8px 10px !important;
    font-size: 12px !important;
    justify-content: center;
    min-width: 0;
  }
  /* Inline share buttons stack ngang cùng row */
  .phist-row .phist-share-inline {
    display: flex !important; flex-direction: row !important;
    flex-wrap: wrap !important; gap: 6px !important;
    width: 100%;
  }
  .phist-row .phist-share-inline .share-btn {
    flex: 1 1 calc(50% - 30px);
    justify-content: center;
    padding: 8px 6px !important;
    min-width: 0;
  }
  .phist-row .phist-share-inline .open-btn {
    flex: 0 0 auto;
    padding: 8px 12px !important;
  }
}
@media (max-width: 480px) {
  .phist-row .phist-share-inline .share-btn {
    flex: 1 1 100%;
  }
  .phist-row .phist-share-inline .open-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ============================================================
   V12.4/V12.8 — MOBILE PROJECTS TAB — sidebar thành DRAWER, workspace full-width
   ============================================================ */
@media (max-width: 768px) {
  .projects-tab {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .project-sidebar.is-collapsed { display: none !important; }
  /* V12.8 — Sidebar drawer: solid bg, NO leak workspace through */
  .project-sidebar:not(.is-collapsed) {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 88vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    z-index: 150 !important;
    background: var(--c-surface) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    animation: slideInLeft 200ms ease-out;
    overflow-y: auto;
  }
  /* Backdrop overlay */
  .project-sidebar:not(.is-collapsed)::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 27, 48, 0.55);
    z-index: -1;
    /* Click ngoài drawer → toggleSidebar (handler trong JS) */
  }
  @keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  .project-workspace {
    width: 100% !important;
    padding: 12px !important;
  }
  .mobile-list-fab {
    display: flex !important;
    position: fixed; bottom: 16px; left: 16px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--c-text);
    color: white;
    border: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    align-items: center; justify-content: center;
    font-size: 20px;
    z-index: 90;
    cursor: pointer;
  }
}
.mobile-list-fab { display: none; }
/* V12.8 — Mobile drawer backdrop (chỉ hiển thị trên mobile khi drawer mở) */
.mobile-sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  .mobile-sidebar-backdrop {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 27, 48, 0.55);
    z-index: 140;
    cursor: pointer;
    animation: backdropFade 200ms ease-out;
    border: 0;
    padding: 0;
  }
  @keyframes backdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ============================================================
   V12.4 — MOBILE PROJECT HERO REBUILD
   ============================================================ */
@media (max-width: 768px) {
  /* Hero: stack proper rows */
  .project-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    grid-template-columns: none !important;
  }
  /* ID code wraps + truncates */
  .req-id, .ph-id {
    font-size: 9px !important;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
  }
  /* Project name proper size */
  .ph-company, .hero-company {
    font-size: 18px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }
  .ph-sub, .hero-sub {
    font-size: 12px !important;
    color: var(--c-text-muted);
  }
  /* Tags wrap, not overflow */
  .ph-tags, .hero-tags {
    display: flex !important; flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .ph-tags .tag, .hero-tags .tag {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  /* Gauge centered above main content */
  .ph-gauge, .gauge-circle {
    width: 64px !important; height: 64px !important;
    flex-shrink: 0;
  }
  .ph-gauge-text, .gauge-pct {
    font-size: 16px !important;
  }
  /* Hero left + right stack */
  .ph-left, .ph-right, .hero-main, .hero-actions {
    width: 100% !important;
  }
  /* Hero gauge + name in one row at top, then stack info */
  .ph-head-row {
    display: flex; gap: 12px; align-items: center;
  }
  /* Action buttons */
  .ph-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-top: 8px;
  }
  .ph-action-btn {
    width: 100% !important;
    flex: none !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   V12.2 — MOBILE UX OVERHAUL
   ============================================================ */

/* === Header tablet ≤ 1024px: gọn lại === */
@media (max-width: 1024px) {
  .topbar.v2 { padding: 8px 12px; gap: 8px; }
  .top-tabs { gap: 4px; }
  .top-tab { padding: 8px 12px; font-size: 12px; }
  .top-tab .tt-icon { font-size: 13px; }
}

/* === Header mobile ≤ 768px: grid 2 hàng (brand+menu top, tabs bottom) === */
@media (max-width: 768px) {
  .topbar.v2 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand right"
      "tabs tabs";
    padding: 10px 14px;
    gap: 8px;
    border-bottom: 1px solid var(--c-line);
  }
  .topbar-brand { grid-area: brand; }
  .topbar-right.v2 { grid-area: right; gap: 6px; }
  .top-tabs {
    grid-area: tabs;
    width: 100%;
    background: var(--c-surface-2);
    margin: 6px -14px -10px;
    padding: 8px 14px;
    border-top: 1px solid var(--c-line);
    border-radius: 0;
    justify-content: space-around;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .top-tabs::-webkit-scrollbar { display: none; }
  .top-tab {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    padding: 8px 8px;
    font-size: 11px;
    min-width: 0;
  }
  .top-tab .tt-icon { display: none; }
  .pill-compact {
    padding: 4px 6px;
    font-size: 10px;
  }
  .pill-compact .label-text { display: none; }
  .user-menu-trigger {
    padding: 3px 8px 3px 3px;
    font-size: 11px;
  }
  .umt-avatar { width: 22px; height: 22px; font-size: 9px; }
  .user-menu-dropdown {
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - 24px);
  }

  /* === Project workspace mobile === */
  .projects-tab {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .project-sidebar {
    max-height: 220px;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    padding: 10px;
  }
  .project-sidebar .sb-item {
    padding: 8px 10px;
  }
  .project-sidebar .sb-name { font-size: 12px; }
  .project-sidebar .sb-sub { font-size: 11px; }
  .project-workspace {
    padding: 12px;
  }
  .project-hero, .project-hero.v2 {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 14px 16px;
  }
  .ph-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: flex-start;
    margin-top: 10px;
  }
  .ph-action-btn {
    flex: 1 1 calc(50% - 6px); min-width: 0;
    font-size: 11px; padding: 8px 10px;
  }
  .project-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .project-tabs::-webkit-scrollbar { display: none; }
  .ptab {
    flex: 0 0 auto;
    padding: 10px 12px;
    white-space: nowrap;
  }
  .ptab .ptab-sub { display: none; }
  .ptab .ptab-label { font-size: 12px; }

  /* === Modals & drawers mobile === */
  .bcw-modal-overlay,
  .proposal-overlay,
  .bcw-drawer-backdrop {
    padding: 0 !important;
    align-items: stretch;
  }
  .bcw-modal,
  .proposal-composer,
  .report-modal,
  .precall-doc,
  .workshop-doc {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .bcw-drawer { width: 100vw !important; }
  .doc-toolbar {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 6px;
  }
  .doc-toolbar .modal-actions { flex-wrap: wrap; gap: 6px; }
  .modal-actions .save-btn,
  .modal-actions .ghost-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* === Pricing & composer mobile === */
  .pc-stepper { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pc-step {
    padding: 8px 10px;
    flex-direction: column; align-items: flex-start;
  }
  .pc-step .pc-step-num { font-size: 12px; }
  .pc-step .pc-step-label { font-size: 11px; }
  .pc-step .pc-step-sub { display: none; }
  .pc-form-grid { grid-template-columns: 1fr !important; }
  .pc-pricing-table {
    font-size: 10px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .pc-pricing-table th, .pc-pricing-table td { padding: 6px 8px; }
  .pc-bulk-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
  }
  .pc-bulk-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 10px;
    font-size: 11px;
  }
  .pc-totals { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pc-totals .ptc-val { font-size: 16px; }
  .pc-totals .ptc-label { font-size: 10px; }
  .pc-footer {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  .pc-footer .save-btn { flex: 1 1 auto; }

  /* === Capture drawer mobile === */
  .bcw-drawer.capture-drawer .capture-fields {
    padding: 12px;
  }
  .capture-field { padding: 12px; }
  .cf-input { font-size: 13px; }
  .capture-foot {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }

  /* === Tables & raw answers === */
  .raw-table {
    font-size: 11px;
    overflow-x: auto;
  }
  .raw-row {
    display: block;
    padding: 10px;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .raw-row > span {
    display: block;
    margin: 2px 0;
  }
  .raw-row > span:first-child::before {
    content: "ID: ";
    color: var(--c-text-muted);
    font-size: 10px;
    text-transform: uppercase;
  }
  .raw-row.head { display: none; }

  /* === Footer mobile === */
  .footer.v2 {
    padding: 12px 16px;
    font-size: 11px;
    text-align: center;
  }
}

/* === Small mobile ≤540px === */
@media (max-width: 540px) {
  .topbar.v2 { padding: 8px 12px; }
  .topbar-brand img { height: 24px; }
  .top-tab { padding: 6px 4px; font-size: 10px; }
  .ph-action-btn { flex: 1 1 100%; }
  .pc-stepper { grid-template-columns: 1fr; }
  .pc-step .pc-step-num { font-size: 11px; }
  .pc-bulk-btn { flex: 1 1 100%; }
  .pc-totals { grid-template-columns: 1fr; }
}


/* ============================================================
   V13.1 — SYSTEM TAB REDESIGN (Operating Intelligence Center)
   ============================================================ */
.system-tab { padding: 20px; }
.system-tab h2 { margin: 0 0 4px; }

/* === Hero stats === */
.sys-hero-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.sys-kpi {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 0;
}
.sys-kpi-success { background: var(--c-success-bg); border-color: rgba(47,122,79,0.18); }
.sys-kpi-warn    { background: var(--c-warn-bg);    border-color: rgba(184,118,42,0.18); }
.sys-kpi-info    { background: var(--c-info-bg);    border-color: rgba(44,91,170,0.15); }
.sys-kpi-label {
  font-size: 10px; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.sys-kpi-value {
  font-size: 20px; font-weight: 700; color: var(--c-text);
  line-height: 1.1; word-break: break-word;
}
.sys-kpi-note {
  font-size: 11px; color: var(--c-text-dim); margin-top: 4px;
  word-break: break-word;
}

/* === Connection panel === */
.sys-conn-grid {
  display: grid; gap: 8px;
}
.sys-info-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 12px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  font-size: 13px;
  align-items: center;
}
.sys-info-label {
  color: var(--c-text-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.4px;
  font-family: var(--font-mono); font-weight: 600;
}
.sys-info-value {
  color: var(--c-text); word-break: break-all;
}
.sys-info-value.mono {
  font-family: var(--font-mono); font-size: 11px;
}

/* === Sheet health grid === */
.sys-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.sys-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--c-divider);
}
.sys-sheet-item.ok { border-left-color: var(--c-success); }
.sys-sheet-item.miss { border-left-color: var(--c-error); background: var(--c-error-bg); }
.sys-sheet-icon {
  font-size: 18px; font-weight: 700;
  width: 24px; text-align: center; flex: 0 0 auto;
}
.sys-sheet-item.ok .sys-sheet-icon { color: var(--c-success); }
.sys-sheet-item.miss .sys-sheet-icon { color: var(--c-error); }
.sys-sheet-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--c-text); word-break: break-all;
}
.sys-sheet-meta {
  font-size: 10px; color: var(--c-text-muted); margin-top: 2px;
}
.sys-alerts {
  margin-top: 12px;
  padding: 10px 14px; border-radius: 6px;
  font-size: 12px;
}
.sys-alerts.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.sys-alerts.err  { background: var(--c-error-bg); color: var(--c-error); }
.sys-alerts strong { display: block; margin-bottom: 6px; }
.sys-alerts ul { margin: 0; padding-left: 20px; }
.sys-alerts li { margin: 2px 0; }

/* === Custom domain config === */
.sys-config-block {
  display: flex; flex-direction: column; gap: 8px;
}
.sys-config-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.sys-config-input {
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: var(--font-mono);
  background: var(--c-surface);
  color: var(--c-text);
}
.sys-config-input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
}
.sys-config-help {
  font-size: 12px; color: var(--c-text-muted);
  line-height: 1.5; margin: 0;
}
.sys-config-help.small { font-size: 11px; }

/* === Quick actions === */
.sys-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sys-action-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit; font-size: 13px;
  color: var(--c-text);
  transition: background 80ms, border-color 80ms;
  text-align: left;
}
.sys-action-btn:hover { background: var(--brand-accent-soft); border-color: var(--brand-accent); }
.sys-action-btn span:first-child { font-size: 16px; flex: 0 0 auto; }
.sys-action-btn.danger { border-color: rgba(200,72,58,0.3); color: var(--c-error); }
.sys-action-btn.danger:hover { background: var(--c-error-bg); border-color: var(--c-error); }

.sys-debug-block .debug-grid {
  display: grid; gap: 4px;
}
.sys-debug-block .debug-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 12px;
  padding: 6px 12px;
  font-size: 11px; font-family: var(--font-mono);
  background: var(--c-surface-2);
  border-radius: 4px;
}
.sys-debug-block .debug-row .k { color: var(--c-text-muted); font-weight: 600; }
.sys-debug-block .debug-row .v { color: var(--c-text); word-break: break-all; }

/* === Mobile system tab === */
@media (max-width: 1024px) {
  .sys-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sys-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .system-tab { padding: 12px; }
  .sys-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-info-row { grid-template-columns: 1fr; gap: 4px; padding: 10px; }
  .sys-quick-actions { grid-template-columns: 1fr; }
  .sys-debug-block .debug-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   V13.2 — DANGER ZONE (purge test data)
   ============================================================ */
.sys-danger-block {
  border: 2px solid var(--c-error) !important;
  background: linear-gradient(180deg, var(--c-error-bg), white) !important;
}
.sys-danger-block .dash-block-head {
  border-bottom-color: rgba(200, 72, 58, 0.3);
}
.purge-warning-text {
  font-size: 13px; color: var(--c-text); line-height: 1.6; margin: 0 0 10px;
}
.purge-warning-text.danger {
  color: var(--c-error); font-weight: 600;
  background: white; border-left: 3px solid var(--c-error);
  padding: 10px 14px; border-radius: 4px;
}
.purge-sheet-list {
  font-size: 12px; color: var(--c-text-muted);
  font-family: var(--font-mono);
  background: white; border-radius: 6px;
  padding: 12px 24px; margin: 8px 0;
}
.purge-sheet-list li { margin: 3px 0; }

.purge-btn-start {
  padding: 12px 22px; font-size: 14px; font-weight: 600;
  background: white; color: var(--c-error);
  border: 2px solid var(--c-error); border-radius: var(--r-md);
  cursor: pointer; font-family: inherit;
  margin-top: 4px;
}
.purge-btn-start:hover {
  background: var(--c-error); color: white;
}

.purge-confirm h3 {
  color: var(--c-error); margin: 0 0 10px;
}
.purge-required-phrase {
  background: var(--c-text); color: white;
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  padding: 14px 24px; border-radius: var(--r-md);
  text-align: center; letter-spacing: 4px;
  margin: 10px 0;
  user-select: none;
}
.purge-confirm-input {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 18px; font-weight: 600;
  border: 2px solid var(--c-error);
  border-radius: var(--r-md);
  text-align: center; letter-spacing: 3px;
  background: white;
}
.purge-confirm-input:focus {
  outline: 0; box-shadow: 0 0 0 3px rgba(200,72,58,0.2);
}
.purge-actions-row {
  display: flex; gap: 8px; margin-top: 14px;
}
.purge-actions-row .ghost-btn {
  flex: 0 0 auto; padding: 12px 20px;
}
.purge-btn-final {
  flex: 1 1 auto;
  padding: 12px 22px;
  background: var(--c-error); color: white;
  border: 0; border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.purge-btn-final:hover:not(:disabled) {
  background: #A03A2E;
  transform: translateY(-1px);
}
.purge-btn-final:disabled {
  background: var(--c-text-dim); cursor: not-allowed; opacity: 0.5;
}

/* === Purge report === */
.purge-report {
  padding: 16px;
  background: var(--c-success-bg);
  border-radius: var(--r-md);
}
.purge-report h3 {
  color: var(--c-success); margin: 0 0 8px; font-size: 16px;
}
.purge-report p { margin: 0 0 12px; font-size: 13px; }
.purge-report-grid {
  display: grid; gap: 6px; margin-bottom: 14px;
}
.purge-report-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: white; border-radius: 4px;
  font-size: 12px; font-family: var(--font-mono);
}
.purge-report-item.ok { border-left: 3px solid var(--c-success); }
.purge-report-item.err { border-left: 3px solid var(--c-error); color: var(--c-error); }
.purge-report-item.muted { border-left: 3px solid var(--c-divider); color: var(--c-text-muted); }
.purge-report-item strong {
  font-size: 11px; font-weight: 700;
}
.purge-report .save-btn {
  background: var(--brand-accent); color: white; border: 0;
  padding: 10px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}

/* ============================================================
   V13.4 — Proposal Templates picker (Step 1)
   ============================================================ */
.pc-templates {
  background: linear-gradient(135deg, var(--brand-accent-soft), white);
  border: 1px solid var(--brand-accent);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.pc-templates-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
}
.pc-templates-head strong {
  font-size: 13px; color: var(--brand-accent-deep);
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pc-templates-head .muted.small {
  font-size: 11px; color: var(--c-text-muted);
}
.pc-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.pc-template-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 80ms, border-color 80ms, box-shadow 80ms;
}
.pc-template-card:hover {
  border-color: var(--brand-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(248,149,29,0.15);
}
.pct-icon {
  font-size: 22px; flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-accent-soft);
  border-radius: 8px;
}
.pct-body { flex: 1 1 auto; min-width: 0; }
.pct-title {
  font-size: 13px; font-weight: 600; color: var(--c-text);
  margin-bottom: 2px;
}
.pct-sub {
  font-size: 11px; color: var(--c-text-muted);
  line-height: 1.4; margin-bottom: 4px;
}
.pct-meta {
  font-size: 10px; color: var(--c-text-dim);
  font-family: var(--font-mono);
  display: flex; gap: 4px; align-items: center;
}
.pct-sep { color: var(--c-divider); }

@media (max-width: 768px) {
  .pc-templates-grid { grid-template-columns: 1fr 1fr; }
  .pct-icon { width: 32px; height: 32px; font-size: 18px; }
  .pct-title { font-size: 12px; }
  .pct-sub { font-size: 10px; }
}
@media (max-width: 480px) {
  .pc-templates-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V13.5 — Email Draft dialog
   ============================================================ */
.share-dialog.email-draft-dialog {
  max-width: 720px;
}
.share-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 27, 48, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.share-dialog {
  background: white;
  max-width: 560px; max-height: 90vh; overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  width: 100%;
}
.share-dialog .sd-head {
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.share-dialog .sd-head h3 { margin: 0 0 4px; font-size: 18px; }
.share-dialog .sd-head p { margin: 0; font-size: 12px; color: var(--c-text-muted); }
.share-dialog .sd-head .close-btn {
  flex: 0 0 auto; padding: 4px 10px; font-size: 16px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-text-muted);
}
.share-dialog .sd-section {
  padding: 18px 24px;
}
.ed-field {
  display: block; margin-bottom: 14px;
}
.ed-field span {
  display: block;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--c-text-muted);
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.ed-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
}
.ed-input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
}
.ed-body {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}
.ed-success-banner {
  text-align: center;
  padding: 24px;
  background: var(--c-success-bg);
  border-radius: var(--r-md);
}
.ed-success-banner strong {
  display: block;
  color: var(--c-success);
  font-size: 18px;
  margin-bottom: 8px;
}
.ed-success-banner p {
  font-size: 13px; color: var(--c-text-muted);
  margin: 0 0 14px;
}
.ed-success-banner .save-btn {
  display: inline-block;
  padding: 12px 22px;
  background: var(--brand-accent); color: white;
  border-radius: var(--r-md);
  text-decoration: none; font-weight: 600;
  font-size: 13px;
}
.ed-success-banner .save-btn:hover { background: var(--brand-accent-deep); }

/* Email button trong inline share */
.phist-share-inline .share-email {
  color: var(--c-info); border-color: rgba(44,91,170,0.2);
}
.phist-share-inline .share-email:hover {
  background: var(--c-info-bg); border-color: var(--c-info);
}

/* ============================================================
   V13.6 — Sidebar filter presets
   ============================================================ */
.sidebar-presets {
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
}
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sp-title {
  font-size: 9px; font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  font-family: var(--font-mono);
}
.sp-clear {
  background: transparent; border: 0;
  font-size: 10px; color: var(--c-error);
  cursor: pointer; padding: 0;
  font-family: inherit;
}
.sp-clear:hover { text-decoration: underline; }
.sp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.sp-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 8px;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit; font-size: 11px;
  color: var(--c-text);
  transition: background 60ms, border-color 60ms;
  text-align: left;
  min-width: 0;
}
.sp-btn .sp-icon { font-size: 12px; flex: 0 0 auto; }
.sp-btn .sp-label {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-btn:hover { border-color: var(--brand-accent); }
.sp-btn.is-active {
  background: var(--c-text); color: white; border-color: var(--c-text);
  font-weight: 600;
}
.sp-btn.is-disabled { opacity: 0.55; cursor: help; }

.sp-btn.sp-tone-brand.is-active   { background: var(--brand-accent);  border-color: var(--brand-accent); }
.sp-btn.sp-tone-info.is-active    { background: var(--c-info);        border-color: var(--c-info); }
.sp-btn.sp-tone-warn.is-active    { background: var(--c-warn);        border-color: var(--c-warn); }
.sp-btn.sp-tone-success.is-active { background: var(--c-success);     border-color: var(--c-success); }
.sp-btn.sp-tone-danger.is-active  { background: var(--c-error);       border-color: var(--c-error); }

@media (max-width: 480px) {
  .sp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V13.7 — Cmd+K Command Palette
   ============================================================ */
.cmd-palette-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 27, 48, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 16px;
  animation: cpFadeIn 100ms ease-out;
  pointer-events: auto;
}
@keyframes cpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cmd-palette {
  background: white;
  border-radius: 12px;
  width: 100%; max-width: 640px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 96px);
  overflow: hidden;
  animation: cpSlideDown 120ms ease-out;
}
@keyframes cpSlideDown {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cmd-palette-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line);
}
.cmd-palette-icon { font-size: 18px; }
.cmd-palette-input {
  flex: 1 1 auto;
  border: 0; outline: 0;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  color: var(--c-text);
}
.cmd-palette-input::placeholder { color: var(--c-text-dim); }
.cmd-palette-kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--c-surface-2);
  padding: 3px 8px; border-radius: 4px;
  color: var(--c-text-muted);
  border: 1px solid var(--c-line);
}

.cmd-palette-results {
  overflow-y: auto;
  max-height: 60vh;
  padding: 6px;
}
.cmd-palette-empty {
  padding: 32px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 13px;
}
.cmd-palette-group {
  margin-bottom: 4px;
}
.cmd-palette-group-head {
  font-size: 10px; font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 8px 12px 4px;
  font-family: var(--font-mono);
}
.cmd-palette-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0; border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 13px;
  color: var(--c-text);
  transition: background 60ms;
}
.cmd-palette-item.is-active {
  background: var(--brand-accent-soft);
}
.cmd-palette-item:hover { background: var(--c-surface-2); }
.cmd-palette-item.is-active:hover { background: var(--brand-accent-soft); }
.cpi-icon {
  font-size: 18px; flex: 0 0 auto;
  width: 28px; text-align: center;
}
.cpi-body { flex: 1 1 auto; min-width: 0; }
.cpi-label {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpi-sub {
  font-size: 11px; color: var(--c-text-muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-palette-enter {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--brand-accent); color: white;
  padding: 3px 8px; border-radius: 4px;
  flex: 0 0 auto;
}
.cmd-palette-foot {
  display: flex; gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  font-size: 11px; color: var(--c-text-muted);
  font-family: var(--font-mono);
}

/* Footer kbd hint */
.footer.v2 {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.footer-kbd-hint {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--c-text-muted);
}
.footer-kbd-hint kbd {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  background: var(--c-surface-2);
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--c-line);
  color: var(--c-text);
}

@media (max-width: 640px) {
  .cmd-palette-overlay { padding: 16px; }
  .cmd-palette { max-height: calc(100vh - 32px); }
  .cmd-palette-input { font-size: 14px; }
  .cpi-sub { display: none; }
  .footer-kbd-hint { display: none; }
}

/* ============================================================
   V13.8 — Bulk Actions
   ============================================================ */
.sidebar-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 14px;
  font-size: 11px; color: var(--c-text-muted);
}
.sidebar-bulk-btn {
  background: transparent; border: 1px solid var(--c-line);
  padding: 4px 10px; border-radius: var(--r-sm);
  font-size: 10px; cursor: pointer; font-family: inherit;
  color: var(--c-text-muted);
  transition: all 80ms;
}
.sidebar-bulk-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.sidebar-bulk-btn.is-active {
  background: var(--brand-accent); color: white;
  border-color: var(--brand-accent);
}

.bulk-toolbar {
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin: 8px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.bulk-toolbar.has-selection {
  background: var(--c-surface);
  border-color: var(--brand-accent-deep);
}
.bulk-info {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px;
}
.bulk-info strong { color: var(--brand-accent-deep); font-size: 13px; }
.bulk-link {
  background: transparent; border: 0; color: var(--c-info);
  font-family: inherit; cursor: pointer; font-size: 11px;
  padding: 0; text-decoration: underline;
}
.bulk-link:hover { color: var(--brand-accent-deep); }
.bulk-link.danger { color: var(--c-error); }

.bulk-actions {
  display: grid; gap: 6px;
  grid-template-columns: 1fr 1fr;
}
.bulk-select {
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: white;
  font-family: inherit;
  cursor: pointer;
}
.bulk-select:focus { outline: 2px solid var(--brand-accent); outline-offset: -1px; }
.bulk-action-btn {
  padding: 6px 10px;
  font-size: 11px;
  background: var(--c-text);
  color: white; border: 0;
  border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit;
}
.bulk-action-btn:hover { background: var(--brand-accent-deep); }

.bulk-progress {
  background: var(--c-info-bg); padding: 8px 10px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--c-info);
}
.bulk-progress-bar {
  flex: 1 1 auto; height: 6px;
  background: white; border-radius: 3px;
  overflow: hidden;
}
.bulk-progress-fill {
  height: 100%; background: var(--c-info);
  transition: width 200ms ease-out;
}

/* Sidebar items khi bulk mode */
/* V19.0.4 FIX — bug bulk mode: grid 2 cột (16px 1fr) thêm checkbox thành 3 children
   → wrap row gãy → tên dự án vỡ thành 1 ký tự / dòng. Fix: bulk mode dùng flex 3 cột. */
.project-sidebar.is-bulk-mode .sb-item {
  cursor: pointer;
  padding-left: 10px;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  grid-template-columns: none !important;
}
.project-sidebar.is-bulk-mode .sb-item .sb-dot {
  flex: 0 0 auto;
  margin-top: 5px;
}
.project-sidebar.is-bulk-mode .sb-item .sb-body {
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}
.sb-item.is-bulk-checked {
  background: var(--brand-accent-soft) !important;
  border-left: 3px solid var(--brand-accent);
  padding-left: 7px !important;
}
.sb-bulk-checkbox {
  flex: 0 0 16px !important;
  width: 16px; height: 16px;
  margin-right: 0;
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--brand-accent);
}
/* Đảm bảo sb-name tiếng Việt không bị break từng ký tự */
.sb-name {
  word-break: normal;
  overflow-wrap: break-word;
}
/* Mini-tag không bị wrap dọc trong bulk mode */
.project-sidebar.is-bulk-mode .sb-tags {
  flex-wrap: wrap;
}
.project-sidebar.is-bulk-mode .mini-tag {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .bulk-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   V13.9 — Advanced Analytics
   ============================================================ */
.dash-analytics .anly-section { margin-bottom: 24px; }
.dash-analytics .anly-section:last-child { margin-bottom: 0; }
.anly-h3 {
  font-size: 12px; font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono);
  margin: 0 0 12px;
}

/* === Monthly chart === */
.anly-chart-wrap {
  background: var(--c-surface-2);
  border-radius: 8px;
  padding: 16px;
}
.anly-svg-chart {
  width: 100%;
  max-height: 240px;
  display: block;
}
.anly-chart-legend {
  display: flex; gap: 18px; justify-content: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.anly-chart-legend .lg-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle;
}
.lg-dot.lg-sent { background: #2C5BAA; }
.lg-dot.lg-signed { background: #2F7A4F; }
.lg-dot.lg-lost { background: #C8483A; }

/* === 2-column stat cards === */
.anly-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}
.anly-stat-card {
  background: var(--c-surface-2);
  border-radius: 8px;
  padding: 16px;
  border-left: 3px solid var(--c-divider);
}
.anly-stat-card.velocity { border-left-color: var(--c-info); }
.anly-stat-card.lost { border-left-color: var(--c-error); }
.anly-stat-label {
  font-size: 10px; font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.anly-stat-value {
  font-size: 28px; font-weight: 700; color: var(--c-text);
  line-height: 1.1;
  margin-bottom: 4px;
}
.anly-stat-sub {
  font-size: 11px; color: var(--c-text-muted);
  line-height: 1.4;
}
.anly-lost-list {
  margin: 4px 0 0; padding: 0; list-style: none;
}
.anly-lost-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; font-size: 12px;
}
.anly-lost-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--c-error);
  flex: 0 0 auto;
}

/* === Owner table === */
.anly-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.anly-table th, .anly-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
}
.anly-table th {
  background: var(--c-surface-2);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-weight: 700;
}
.anly-table th.r, .anly-table td.r { text-align: right; }
.anly-table td.success { color: var(--c-success); font-weight: 600; }
.anly-table td.mono { font-family: var(--font-mono); font-size: 11px; }
.anly-bar-wrap {
  display: inline-block;
  width: 60px; height: 6px;
  background: var(--c-surface-3);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 6px;
  overflow: hidden;
}
.anly-bar {
  height: 100%; transition: width 400ms ease-out;
}

/* === Service mix bars === */
.anly-bars {
  display: flex; flex-direction: column; gap: 6px;
}
.anly-bar-row {
  display: grid; grid-template-columns: 160px 1fr 80px;
  gap: 12px; align-items: center;
  font-size: 12px;
}
.anly-bar-label {
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anly-bar-track {
  height: 18px;
  background: var(--c-surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.anly-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-deep));
  transition: width 500ms ease-out;
}
.anly-bar-count {
  text-align: right;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-muted);
}

/* Mobile */
@media (max-width: 768px) {
  .anly-grid-2 { grid-template-columns: 1fr; }
  .anly-bar-row { grid-template-columns: 100px 1fr 50px; gap: 8px; }
  .anly-bar-label { font-size: 11px; }
  .anly-table { font-size: 11px; }
  .anly-table th, .anly-table td { padding: 6px 8px; }
  .anly-bar-wrap { display: none; }
}
@media (max-width: 540px) {
  .anly-stat-value { font-size: 22px; }
  .anly-svg-chart { font-size: 9px; }
  .anly-chart-legend { gap: 10px; flex-wrap: wrap; }
}

/* ============================================================
   V14.0 — Calendar / Gantt Tab
   ============================================================ */
.calendar-tab { padding: 20px; }
.cal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cal-head h2 {
  font-size: 16px; font-weight: 700; margin: 0 0 4px;
  font-family: var(--font-mono); letter-spacing: 0.4px;
}
.cal-head .section-sub {
  font-size: 12px; color: var(--c-text-muted); margin: 0;
}
.cal-mode-switch {
  display: flex; gap: 4px;
  background: var(--c-surface-2);
  padding: 4px; border-radius: var(--r-md);
}
.cal-mode-btn {
  padding: 8px 14px;
  background: transparent; border: 0;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 12px; font-family: inherit;
  color: var(--c-text-muted);
  transition: all 100ms;
}
.cal-mode-btn:hover { color: var(--c-text); }
.cal-mode-btn.is-active {
  background: white; color: var(--c-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  font-weight: 600;
}
.cal-empty {
  padding: 60px 24px; text-align: center;
  background: var(--c-surface-2); border-radius: var(--r-md);
  color: var(--c-text-muted);
}

/* === Gantt === */
.cal-gantt {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-gantt-header {
  display: grid; grid-template-columns: 220px 1fr;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  height: 40px;
  position: sticky; top: 0; z-index: 5;
}
.cal-gantt-label-col {
  padding: 10px 14px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  border-right: 1px solid var(--c-line);
  display: flex; align-items: center;
}
.cal-gantt-track-head {
  position: relative;
  height: 100%;
}
.cal-month-marker {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: 10px; color: var(--c-text-muted);
  font-family: var(--font-mono); font-weight: 600;
  padding-left: 6px;
  border-left: 1px solid var(--c-line);
}
.cal-today-line {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--c-error);
  z-index: 2;
}
.cal-today-label {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  background: var(--c-error); color: white;
  padding: 2px 6px; border-radius: 2px;
  font-size: 9px; font-weight: 700;
  white-space: nowrap;
}
.cal-gantt-body {
  max-height: 70vh;
  overflow-y: auto;
}
.cal-gantt-row {
  display: grid; grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--c-line-soft);
  background: white; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  padding: 0;
  transition: background 80ms;
}
.cal-gantt-row:hover { background: var(--c-surface-2); }
.cal-gantt-row.is-current { background: var(--brand-accent-soft); }
.cal-gantt-label {
  padding: 10px 14px;
  border-right: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.cgl-name {
  font-size: 12px; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cgl-sub {
  font-size: 10px; color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-gantt-track {
  position: relative;
  height: 40px;
}
.cal-gantt-bar {
  position: absolute; top: 8px; bottom: 8px;
  border-radius: 4px;
  display: flex; align-items: center;
  gap: 4px;
  padding: 0 6px;
  color: white;
  font-size: 10px; font-weight: 600;
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cgb-status {
  text-overflow: ellipsis; overflow: hidden;
}
.cgb-priority { flex: 0 0 auto; }

/* === Month grid === */
.cal-month {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-month-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.cal-month-title {
  flex: 1 1 auto;
  margin: 0; font-size: 16px; font-weight: 700;
  color: var(--c-text);
}
.cal-nav-btn {
  width: 30px; height: 30px;
  background: white; border: 1px solid var(--c-line);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 16px; font-family: inherit;
}
.cal-nav-btn:hover { background: var(--brand-accent-soft); border-color: var(--brand-accent); }
.cal-nav-btn.cal-nav-today {
  width: auto; padding: 0 12px;
  font-size: 12px; font-weight: 600;
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.cal-month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-wkday {
  padding: 8px;
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mono);
}
.cal-cell {
  min-height: 96px;
  padding: 6px;
  border-right: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  background: white;
  position: relative;
}
.cal-cell.empty { background: var(--c-surface-2); }
.cal-cell.is-today { background: var(--brand-accent-soft); }
.cal-cell.is-weekend { background: rgba(0,0,0,0.02); }
.cal-cell.is-today.is-weekend { background: var(--brand-accent-soft); }
.cal-cell-num {
  font-size: 12px; font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.cal-cell.is-today .cal-cell-num {
  color: var(--brand-accent-deep);
}
.cal-cell-events {
  display: flex; flex-direction: column; gap: 2px;
}
.cal-event {
  padding: 3px 6px;
  border: 0; border-radius: 3px;
  font-size: 10px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 80ms;
}
.cal-event:hover { opacity: 0.85; }
.cal-more {
  font-size: 9px; color: var(--c-text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
}

/* Mobile */
@media (max-width: 768px) {
  .cal-head { flex-direction: column; align-items: stretch; }
  .cal-mode-switch { width: 100%; }
  .cal-mode-btn { flex: 1 1 50%; text-align: center; }
  .cal-gantt-header,
  .cal-gantt-row { grid-template-columns: 140px 1fr; }
  .cal-gantt-label { padding: 8px 10px; }
  .cgl-sub { display: none; }
  .cal-month-grid { font-size: 10px; }
  .cal-cell { min-height: 60px; padding: 4px; }
  .cal-cell-num { font-size: 10px; }
  .cal-event { font-size: 9px; padding: 2px 4px; }
}
@media (max-width: 540px) {
  .calendar-tab { padding: 12px; }
  .cal-month-grid { font-size: 9px; }
  .cal-cell { min-height: 50px; }
}

/* ============================================================
   V14.1 — Drive folder section
   ============================================================ */
.drive-info-row {
  font-size: 12px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.drive-info-row code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--c-surface-2);
  padding: 2px 6px; border-radius: 3px;
  color: var(--c-text-muted);
}

.drive-subfolders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.drive-subfolder {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  transition: all 80ms;
}
.drive-subfolder:hover {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent);
  transform: translateY(-1px);
}
.ds-icon { font-size: 18px; flex: 0 0 auto; }
.ds-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.drive-actions-foot {
  display: flex; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line-soft);
}
.drive-actions-foot .ghost-btn.small {
  padding: 6px 12px; font-size: 11px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; color: var(--c-text);
}
.drive-actions-foot .ghost-btn.small:hover { background: var(--c-surface-2); }
.drive-actions-foot .ghost-btn.small.danger { color: var(--c-error); border-color: rgba(200,72,58,0.3); }
.drive-actions-foot .ghost-btn.small.danger:hover { background: var(--c-error-bg); }

.drive-empty {
  padding: 18px;
  background: var(--c-surface-2);
  border-radius: 8px;
  text-align: center;
}
.drive-empty p {
  margin: 0 0 16px;
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.drive-empty-actions {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap;
}
.drive-empty-actions .save-btn {
  padding: 10px 20px;
  background: var(--brand-accent); color: white; border: 0;
  border-radius: var(--r-md); cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.drive-empty-actions .save-btn:hover:not(:disabled) { background: var(--brand-accent-deep); }
.drive-empty-actions .save-btn:disabled { opacity: 0.6; cursor: wait; }
.drive-empty-actions .ghost-btn {
  padding: 10px 20px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); cursor: pointer;
  font-size: 13px; color: var(--c-text);
}

@media (max-width: 540px) {
  .drive-subfolders { grid-template-columns: 1fr; }
  .drive-empty-actions { flex-direction: column; }
  .drive-empty-actions .save-btn,
  .drive-empty-actions .ghost-btn { width: 100%; }
}

/* ============================================================
   V14.2 — DARK MODE + Search highlight + Archive preset
   ============================================================ */

/* Search highlighting */
.search-mark {
  background: var(--brand-accent-soft);
  color: var(--brand-accent-deep);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Archive preset — neutral tone */
.sp-btn.sp-tone-neutral.is-active {
  background: var(--c-text-muted);
  border-color: var(--c-text-muted);
}

/* === DARK MODE === */
[data-theme="dark"] {
  --c-bg: #1A1918;
  --c-surface: #25231F;
  --c-surface-2: #2D2A24;
  --c-surface-3: #3A372F;
  --c-line: #3A372F;
  --c-line-soft: #2D2A24;
  --c-divider: #4A463E;

  --c-text: #F0EDE6;
  --c-text-muted: #B8B3AA;
  --c-text-dim: #807C73;
  --c-placeholder: #65625B;

  --c-error: #E07466;
  --c-error-bg: rgba(200, 72, 58, 0.18);
  --c-warn: #E0A45D;
  --c-warn-bg: rgba(184, 118, 42, 0.18);
  --c-success: #6FB58F;
  --c-success-bg: rgba(47, 122, 79, 0.18);
  --c-info: #6B95DC;
  --c-info-bg: rgba(44, 91, 170, 0.18);

  --brand-accent-soft: rgba(248, 149, 29, 0.18);

  --sh-sm: 0 1px 2px rgba(0,0,0,0.4);
  --sh-md: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  --sh-focus: 0 0 0 3px rgba(248,149,29,0.3);
}
[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }
[data-theme="dark"] .topbar.v2 { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
[data-theme="dark"] .top-tab.is-active { background: var(--c-text); color: var(--c-bg); }
[data-theme="dark"] .footer.v2 { background: var(--c-surface); border-top: 1px solid var(--c-line); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--c-surface-2); color: var(--c-text);
  border-color: var(--c-line);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--c-placeholder); }

[data-theme="dark"] .ws-content,
[data-theme="dark"] .project-workspace,
[data-theme="dark"] .dash-block,
[data-theme="dark"] .detail-section,
[data-theme="dark"] .system-block,
[data-theme="dark"] .pc-templates,
[data-theme="dark"] .project-hero.v3,
[data-theme="dark"] .cal-gantt,
[data-theme="dark"] .cal-month {
  background: var(--c-surface);
  border-color: var(--c-line);
}
[data-theme="dark"] .sb-item:hover,
[data-theme="dark"] .pc-section-item:hover,
[data-theme="dark"] .stage-card:hover,
[data-theme="dark"] .ph-secondary-btn:hover { background: var(--c-surface-2); }
[data-theme="dark"] .sb-item.is-selected { background: rgba(248, 149, 29, 0.12); }
[data-theme="dark"] .ghost-btn,
[data-theme="dark"] .save-btn,
[data-theme="dark"] button { color: var(--c-text); }
[data-theme="dark"] .save-btn { color: white; }
[data-theme="dark"] .pill-compact { background: var(--c-surface-2); }
[data-theme="dark"] .user-menu-trigger { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .user-menu-dropdown { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="dark"] .umd-head { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .umd-item:hover { background: var(--c-surface-2); }
[data-theme="dark"] .cmd-palette { background: var(--c-surface); }
[data-theme="dark"] .cmd-palette-search { border-color: var(--c-line); }
[data-theme="dark"] .cmd-palette-foot { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .cmd-palette-input { color: var(--c-text); }
[data-theme="dark"] .share-dialog,
[data-theme="dark"] .bcw-modal,
[data-theme="dark"] .precall-doc,
[data-theme="dark"] .workshop-doc,
[data-theme="dark"] .report-modal,
[data-theme="dark"] .proposal-composer { background: var(--c-surface); }
[data-theme="dark"] .stage-card { background: var(--c-surface-2); }
[data-theme="dark"] .ph-secondary-btn { background: var(--c-surface-2); }
[data-theme="dark"] code,
[data-theme="dark"] pre { background: var(--c-surface-2); color: var(--c-text); }

/* Print mode luôn force light theme */
@media print {
  html[data-theme="dark"] { --c-bg: white; --c-surface: white; --c-surface-2: #F2F0EB; --c-text: #1A1918; --c-text-muted: #65625B; }
  html[data-theme="dark"] body { background: white !important; color: black !important; }
}

/* ============================================================
   V14.3 — Diagnostic log panel
   ============================================================ */
.sys-diag-block {
  background: linear-gradient(180deg, var(--c-info-bg), white) !important;
  border-color: rgba(44, 91, 170, 0.3) !important;
}
[data-theme="dark"] .sys-diag-block {
  background: linear-gradient(180deg, var(--c-info-bg), var(--c-surface)) !important;
}
.sys-diag-wrap {
  display: flex; flex-direction: column; gap: 10px;
}
.sys-diag-textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  resize: vertical;
  white-space: pre;
  min-height: 280px;
}
.sys-diag-textarea:focus {
  outline: 2px solid var(--c-info);
  outline-offset: -1px;
}

/* ============================================================
   V14.4 — DARK MODE COMPREHENSIVE FIX
   ============================================================ */

/* === Dashboard KPIs === */
[data-theme="dark"] .kpi-big,
[data-theme="dark"] .kpi-row-grid .kpi-big {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text);
}
[data-theme="dark"] .kbig-label,
[data-theme="dark"] .sys-kpi-label { color: var(--c-text-muted); }
[data-theme="dark"] .kbig-value,
[data-theme="dark"] .sys-kpi-value { color: var(--c-text); }
[data-theme="dark"] .kbig-note,
[data-theme="dark"] .sys-kpi-note { color: var(--c-text-dim); }

/* Tone variants (success/warn/info) — soft bg, vẫn nhận biết */
[data-theme="dark"] .kpi-big.kpi-success,
[data-theme="dark"] .sys-kpi-success { background: rgba(47, 122, 79, 0.15); border-color: rgba(47, 122, 79, 0.3); }
[data-theme="dark"] .kpi-big.kpi-warn,
[data-theme="dark"] .sys-kpi-warn    { background: rgba(184, 118, 42, 0.15); border-color: rgba(184, 118, 42, 0.3); }
[data-theme="dark"] .kpi-big.kpi-info,
[data-theme="dark"] .sys-kpi-info    { background: rgba(44, 91, 170, 0.15); border-color: rgba(44, 91, 170, 0.3); }

/* === System tab — sys-info-row, sys-sheet-grid === */
[data-theme="dark"] .sys-info-row { background: var(--c-surface-2); }
[data-theme="dark"] .sys-info-label { color: var(--c-text-muted); }
[data-theme="dark"] .sys-info-value { color: var(--c-text); }
[data-theme="dark"] .sys-sheet-item { background: var(--c-surface-2); }
[data-theme="dark"] .sys-sheet-item.miss { background: rgba(200, 72, 58, 0.15); }
[data-theme="dark"] .sys-sheet-name { color: var(--c-text); }
[data-theme="dark"] .sys-sheet-meta { color: var(--c-text-muted); }
[data-theme="dark"] .sys-action-btn {
  background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-text);
}
[data-theme="dark"] .sys-action-btn:hover {
  background: rgba(248,149,29,0.15); border-color: var(--brand-accent);
}

/* === Calendar Gantt === */
[data-theme="dark"] .cal-gantt {
  background: var(--c-surface);
  border-color: var(--c-line);
}
[data-theme="dark"] .cal-gantt-header {
  background: var(--c-surface-2);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .cal-gantt-label-col {
  color: var(--c-text-muted);
  border-right-color: var(--c-line);
}
[data-theme="dark"] .cal-month-marker {
  color: var(--c-text-muted);
  border-left-color: var(--c-line);
}
[data-theme="dark"] .cal-gantt-row {
  background: var(--c-surface);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .cal-gantt-row:hover { background: var(--c-surface-2); }
[data-theme="dark"] .cal-gantt-row.is-current { background: rgba(248,149,29,0.12); }
[data-theme="dark"] .cal-gantt-label {
  border-right-color: var(--c-line);
}
[data-theme="dark"] .cgl-name { color: var(--c-text); }
[data-theme="dark"] .cgl-sub { color: var(--c-text-muted); }

/* === Calendar Month grid === */
[data-theme="dark"] .cal-month {
  background: var(--c-surface);
  border-color: var(--c-line);
}
[data-theme="dark"] .cal-month-nav {
  background: var(--c-surface-2);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .cal-month-title { color: var(--c-text); }
[data-theme="dark"] .cal-nav-btn {
  background: var(--c-surface);
  border-color: var(--c-line); color: var(--c-text);
}
[data-theme="dark"] .cal-nav-btn:hover { background: rgba(248,149,29,0.15); }
[data-theme="dark"] .cal-wkday {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .cal-cell {
  background: var(--c-surface);
  border-right-color: var(--c-line);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .cal-cell.empty { background: var(--c-bg); }
[data-theme="dark"] .cal-cell.is-today { background: rgba(248,149,29,0.12); }
[data-theme="dark"] .cal-cell.is-weekend { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .cal-cell-num { color: var(--c-text); }
[data-theme="dark"] .cal-more { color: var(--c-text-muted); }
[data-theme="dark"] .cal-mode-switch { background: var(--c-surface-2); }
[data-theme="dark"] .cal-mode-btn { color: var(--c-text-muted); }
[data-theme="dark"] .cal-mode-btn.is-active {
  background: var(--c-surface);
  color: var(--c-text);
}
[data-theme="dark"] .cal-empty {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
}

/* === Analytics === */
[data-theme="dark"] .anly-stat-card { background: var(--c-surface-2); }
[data-theme="dark"] .anly-chart-wrap { background: var(--c-surface-2); }
[data-theme="dark"] .anly-table th { background: var(--c-surface-2); color: var(--c-text-muted); }
[data-theme="dark"] .anly-table td { color: var(--c-text); border-bottom-color: var(--c-line); }
[data-theme="dark"] .anly-bar-track { background: var(--c-surface-3); }
[data-theme="dark"] .anly-bar-row { color: var(--c-text); }
[data-theme="dark"] .funnel-bar-wrap { background: var(--c-surface-3); }
[data-theme="dark"] .funnel-label { color: var(--c-text); }

/* === Dashboard pipeline === */
[data-theme="dark"] .pipeline-grid .stage-col { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .pipeline-grid .stage-card { background: var(--c-surface); }
[data-theme="dark"] .pipeline-grid .sc-name { color: var(--c-text); }
[data-theme="dark"] .pipeline-grid .sc-company { color: var(--c-text-muted); }
[data-theme="dark"] .pipeline-grid .stage-empty { color: var(--c-text-dim); }
[data-theme="dark"] .pipeline-grid .stage-more { color: var(--c-text-dim); }
[data-theme="dark"] .pipeline-grid .stage-head { color: var(--c-text); }

/* === Workload === */
[data-theme="dark"] .wl-row { background: var(--c-surface-2); }
[data-theme="dark"] .wl-name { color: var(--c-text); }
[data-theme="dark"] .wl-bar { background: var(--c-surface-3); }

/* === Section / table generic === */
[data-theme="dark"] table th {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] table td {
  color: var(--c-text);
  border-bottom-color: var(--c-line-soft);
}
[data-theme="dark"] .raw-table .raw-row { border-bottom-color: var(--c-line-soft); }
[data-theme="dark"] .raw-table .raw-row.head { background: var(--c-surface-2); color: var(--c-text-muted); }

/* === Filter presets === */
[data-theme="dark"] .sidebar-presets { background: var(--c-surface-2); border-bottom-color: var(--c-line); }
[data-theme="dark"] .sp-btn {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-text);
}
[data-theme="dark"] .sp-btn:hover { border-color: var(--brand-accent); }

/* === Bulk toolbar === */
[data-theme="dark"] .bulk-toolbar {
  background: rgba(248, 149, 29, 0.10);
  border-color: var(--brand-accent);
}
[data-theme="dark"] .bulk-select {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text);
}

/* === Drive section === */
[data-theme="dark"] .drive-subfolder {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text);
}
[data-theme="dark"] .drive-subfolder:hover {
  background: rgba(248, 149, 29, 0.15);
}
[data-theme="dark"] .drive-empty { background: var(--c-surface-2); }
[data-theme="dark"] .drive-empty p { color: var(--c-text-muted); }
[data-theme="dark"] .drive-info-row code {
  background: var(--c-surface-2); color: var(--c-text-muted);
}

/* === Proposal history === */
[data-theme="dark"] .proposal-hist-table { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="dark"] .phist-row { border-bottom-color: var(--c-line-soft); }
[data-theme="dark"] .phist-row.phist-head {
  background: var(--c-surface-2); color: var(--c-text-muted);
}
[data-theme="dark"] .phist-share-inline .share-btn,
[data-theme="dark"] .phist-share-inline .open-btn {
  background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-text);
}

/* === Proposal composer (modal) === */
[data-theme="dark"] .pc-stepper { background: var(--c-surface-2); }
[data-theme="dark"] .pc-step { color: var(--c-text); }
[data-theme="dark"] .pc-step.is-active { background: var(--c-surface-3); }
[data-theme="dark"] .pc-bulk-bar { background: var(--c-surface-2); }
[data-theme="dark"] .pc-totals { background: var(--c-surface-2); }
[data-theme="dark"] .pc-pricing-table th { background: var(--c-surface-2); color: var(--c-text-muted); }
[data-theme="dark"] .pc-pricing-table td { color: var(--c-text); border-bottom-color: var(--c-line-soft); }
[data-theme="dark"] .pc-section-item {
  background: var(--c-surface-2); border-color: var(--c-line);
}
[data-theme="dark"] .pc-section-item.is-checked { background: rgba(248, 149, 29, 0.15); border-color: var(--brand-accent); }
[data-theme="dark"] .pc-radio { background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-text); }
[data-theme="dark"] .pc-radio.is-selected { background: rgba(248, 149, 29, 0.15); border-color: var(--brand-accent); }
[data-theme="dark"] .pc-template-card {
  background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-text);
}
[data-theme="dark"] .pc-template-card:hover { border-color: var(--brand-accent); }

/* === Detail section / module brief === */
[data-theme="dark"] .detail-section { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="dark"] .module-card { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .snapshot-card { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .kpi { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .score-cell { background: var(--c-surface-2); border-color: var(--c-line); }

/* === BCW history === */
[data-theme="dark"] .bcw-history-row { background: var(--c-surface-2); }
[data-theme="dark"] .activity-list .act-row { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .notes-list .note-row { background: var(--c-surface-2); border-color: var(--c-line); }

/* === Login page dark === */
[data-theme="dark"] .login-grid .login-card,
[data-theme="dark"] .intro-panel { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="dark"] .login-topbar { border-bottom-color: var(--c-line); }
[data-theme="dark"] .system-rows > div { background: var(--c-surface-2); border-color: var(--c-line); }

/* === Misc text colors === */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--c-text); }
[data-theme="dark"] .muted { color: var(--c-text-muted); }
[data-theme="dark"] .small { color: var(--c-text-dim); }

/* ============================================================
   V14.4 — DARK MODE ROUND 2 — composer + filter presets fixes
   ============================================================ */

/* === Composer step 1 Templates picker === */
[data-theme="dark"] .pc-templates {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.08), var(--c-surface-2)) !important;
  border-color: rgba(248, 149, 29, 0.3) !important;
}
[data-theme="dark"] .pc-templates-head strong { color: var(--brand-accent); }
[data-theme="dark"] .pc-template-card {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pc-template-card:hover {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 2px 8px rgba(248, 149, 29, 0.2);
}
[data-theme="dark"] .pct-icon { background: rgba(248, 149, 29, 0.15); }
[data-theme="dark"] .pct-title { color: var(--c-text); }
[data-theme="dark"] .pct-sub { color: var(--c-text-muted); }
[data-theme="dark"] .pct-meta { color: var(--c-text-dim); }

/* === Composer step 3 Pricing bulk bar === */
[data-theme="dark"] .pc-bulk-bar {
  background: var(--c-surface-2) !important;
}
[data-theme="dark"] .pc-bulk-btn {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pc-bulk-btn strong { color: var(--c-text); }
[data-theme="dark"] .pc-bulk-btn .pc-bulk-sub { color: var(--c-text-muted); }
[data-theme="dark"] .pc-bulk-btn:hover {
  background: rgba(248, 149, 29, 0.15) !important;
  border-color: var(--brand-accent) !important;
}
[data-theme="dark"] .pc-bulk-low:hover    { background: rgba(47,122,79,0.15) !important; border-color: var(--c-success) !important; }
[data-theme="dark"] .pc-bulk-mid:hover    { background: rgba(184,118,42,0.15) !important; border-color: var(--c-warn) !important; }
[data-theme="dark"] .pc-bulk-high:hover   { background: rgba(200,72,58,0.15) !important; border-color: var(--c-error) !important; }
[data-theme="dark"] .pc-bulk-reset:hover  { background: var(--c-surface-3) !important; }

/* Pricing table cells trong dark */
[data-theme="dark"] .pc-pricing-table .pc-price-low,
[data-theme="dark"] .pc-pricing-table .pc-price-mid,
[data-theme="dark"] .pc-pricing-table .pc-price-high { color: var(--c-text-muted); }
[data-theme="dark"] .pc-pricing-table .pc-price-low.is-active   { color: var(--c-success); background: rgba(47,122,79,0.18); font-weight: 600; }
[data-theme="dark"] .pc-pricing-table .pc-price-mid.is-active   { color: var(--brand-accent); background: rgba(248,149,29,0.18); font-weight: 600; }
[data-theme="dark"] .pc-pricing-table .pc-price-high.is-active  { color: var(--c-error); background: rgba(200,72,58,0.18); font-weight: 600; }
[data-theme="dark"] .pc-tier-select {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pc-custom-input {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pc-locked { color: var(--c-text-muted); }

/* Step 1 hint banner */
[data-theme="dark"] .pc-hint {
  background: rgba(44, 91, 170, 0.12);
  border-left-color: var(--c-info);
  color: var(--c-text);
}
[data-theme="dark"] .pc-hint strong { color: var(--c-info); }

/* Composer toolbar + footer */
[data-theme="dark"] .doc-toolbar {
  background: var(--c-surface-2);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .doc-meta { color: var(--c-text-muted); }
[data-theme="dark"] .pc-footer {
  background: var(--c-surface-2);
  border-top-color: var(--c-line);
}
[data-theme="dark"] .pc-foot-meta { color: var(--c-text-muted); }
[data-theme="dark"] .pc-stepper { background: var(--c-surface); border-bottom-color: var(--c-line); }

/* === Sidebar filter presets buttons fix === */
[data-theme="dark"] .sp-btn {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .sp-btn:hover {
  background: var(--c-surface-2) !important;
  border-color: var(--brand-accent) !important;
}
[data-theme="dark"] .sp-btn.is-disabled { opacity: 0.45; }
[data-theme="dark"] .sp-btn.sp-tone-brand.is-active   { background: var(--brand-accent) !important; color: white !important; border-color: var(--brand-accent) !important; }
[data-theme="dark"] .sp-btn.sp-tone-info.is-active    { background: var(--c-info) !important; color: white !important; }
[data-theme="dark"] .sp-btn.sp-tone-warn.is-active    { background: var(--c-warn) !important; color: white !important; }
[data-theme="dark"] .sp-btn.sp-tone-success.is-active { background: var(--c-success) !important; color: white !important; }
[data-theme="dark"] .sp-btn.sp-tone-danger.is-active  { background: var(--c-error) !important; color: white !important; }
[data-theme="dark"] .sp-btn.sp-tone-neutral.is-active { background: var(--c-text-muted) !important; color: var(--c-bg) !important; }
[data-theme="dark"] .sp-btn .sp-icon { filter: none; }
[data-theme="dark"] .sp-title { color: var(--c-text-muted); }

/* Sidebar bulk button + meta */
[data-theme="dark"] .sidebar-bulk-btn {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text-muted) !important;
}
[data-theme="dark"] .sidebar-bulk-btn:hover { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
[data-theme="dark"] .sidebar-bulk-btn.is-active { background: var(--brand-accent) !important; color: white !important; }
[data-theme="dark"] .sidebar-meta { color: var(--c-text-muted); }
[data-theme="dark"] .sidebar-search {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .sidebar-search::placeholder { color: var(--c-text-dim); }
[data-theme="dark"] .sidebar-toggle {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border-color: var(--c-line);
}

/* Sidebar items dark colors */
[data-theme="dark"] .sb-item { background: var(--c-surface); border-bottom: 1px solid var(--c-line-soft); }
[data-theme="dark"] .sb-name { color: var(--c-text); }
[data-theme="dark"] .sb-sub { color: var(--c-text-muted); }
[data-theme="dark"] .sb-empty { color: var(--c-text-dim); }
[data-theme="dark"] .sb-item.is-bulk-checked { background: rgba(248, 149, 29, 0.12) !important; }

/* Sidebar empty state */
[data-theme="dark"] .ws-empty {
  background: var(--c-surface);
  color: var(--c-text-muted);
}
[data-theme="dark"] .ws-empty h2 { color: var(--c-text); }

/* Section-head-row + sub */
[data-theme="dark"] .section-head-row h3 { color: var(--c-text); }
[data-theme="dark"] .section-sub { color: var(--c-text-muted); }
[data-theme="dark"] .section-head-with-action h2 { color: var(--c-text); }

/* Misc form elements */
[data-theme="dark"] select option {
  background: var(--c-surface-2);
  color: var(--c-text);
}

/* Drawer backdrop dark */
[data-theme="dark"] .bcw-drawer-backdrop,
[data-theme="dark"] .bcw-modal-overlay,
[data-theme="dark"] .proposal-overlay {
  background: rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .bcw-drawer { background: var(--c-surface); }
[data-theme="dark"] .drawer-head { border-bottom-color: var(--c-line); }
[data-theme="dark"] .drawer-head h2 { color: var(--c-text); }
[data-theme="dark"] .eyebrow-mini { color: var(--c-text-muted); }
[data-theme="dark"] .capture-body { background: var(--c-surface); }
[data-theme="dark"] .capture-field { background: var(--c-surface-2); border-color: var(--c-line); }
[data-theme="dark"] .cf-label { color: var(--c-text); }
[data-theme="dark"] .cf-question { color: var(--c-text-muted); }
[data-theme="dark"] .cf-input {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .capture-foot {
  background: var(--c-surface-2);
  border-top-color: var(--c-line);
}
[data-theme="dark"] .capture-owner-bar {
  background: var(--c-surface-2);
  border-bottom-color: var(--c-line);
}
[data-theme="dark"] .co-label { color: var(--c-text-muted); }
[data-theme="dark"] .co-select {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}

/* ============================================================
   V14.5 — Audit Log Viewer
   ============================================================ */
.audit-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  font-size: 13px;
}
.audit-wrap {
  display: flex; flex-direction: column; gap: 14px;
}

/* Filters */
.audit-filters {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.audit-filters label {
  display: flex; flex-direction: column; gap: 4px;
}
.audit-filters label > span {
  font-size: 10px; font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono);
}
.audit-filter-select {
  padding: 8px 12px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface);
  font-family: inherit; font-size: 12px;
  color: var(--c-text);
  cursor: pointer;
}
[data-theme="dark"] .audit-filter-select {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text);
}

/* Stats summary */
.audit-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.audit-stat {
  background: var(--c-surface-2);
  padding: 10px 14px;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.audit-stat strong {
  font-size: 18px; font-weight: 700; color: var(--c-text);
  line-height: 1.1;
}
.audit-stat span {
  font-size: 10px; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  font-family: var(--font-mono);
}

/* Entries */
.audit-entries {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 4px;
}
.audit-entry {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--c-divider);
}
[data-theme="dark"] .audit-entry { background: var(--c-surface); border-left-color: var(--c-line); }
.audit-entry-icon {
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.audit-entry-body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.audit-entry-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.audit-entry-head strong {
  color: var(--c-text);
  font-family: var(--font-mono);
}
.audit-entry-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--c-surface-3);
  color: var(--c-text-muted);
  font-weight: 600;
}
.audit-entry-status.status-created,
.audit-entry-status.status-success,
.audit-entry-status.status-purged { background: var(--c-success-bg); color: var(--c-success); }
.audit-entry-status.status-error,
.audit-entry-status.status-fail { background: var(--c-error-bg); color: var(--c-error); }
.audit-entry-status.status-sent,
.audit-entry-status.status-viewed { background: var(--c-info-bg); color: var(--c-info); }
.audit-entry-status.status-signed { background: var(--c-success-bg); color: var(--c-success); }
.audit-entry-status.status-lost { background: var(--c-error-bg); color: var(--c-error); }
.audit-entry-status.status-negotiating { background: var(--c-warn-bg); color: var(--c-warn); }
.audit-entry-status.status-draft { background: var(--c-surface-3); color: var(--c-text-muted); }
.audit-entry-owner {
  font-size: 11px;
  color: var(--c-text-muted);
}
.audit-entry-link {
  font-size: 10px;
  color: var(--brand-accent);
  background: transparent; border: 0;
  padding: 0; cursor: pointer;
  font-family: var(--font-mono);
  text-decoration: underline;
  margin-left: auto;
}
.audit-entry-link:hover { color: var(--brand-accent-deep); }
.audit-entry-note {
  font-size: 12px;
  color: var(--c-text);
  line-height: 1.5;
  word-break: break-word;
}
.audit-entry-time {
  font-size: 10px; color: var(--c-text-dim);
  font-family: var(--font-mono);
}

/* Mobile */
@media (max-width: 768px) {
  .audit-filters { grid-template-columns: 1fr; }
  .audit-stats-row { grid-template-columns: 1fr 1fr 1fr; }
  .audit-stat strong { font-size: 16px; }
  .audit-entries { max-height: 480px; }
}

/* ============================================================
   V14.6 — NOTIFICATION SYSTEM (bell + dropdown + toast)
   ============================================================ */

/* Bell button + badge */
.sv-bell-wrap { position: relative; display: inline-flex; align-items: center; }
.sv-bell-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  padding: 0;
}
.sv-bell-btn:hover {
  background: var(--c-surface-2);
  transform: translateY(-1px);
}
.sv-bell-btn.is-open {
  background: var(--c-surface-2);
  border-color: var(--c-accent);
}
.sv-bell-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
.sv-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
/* V18.1 — Hero buttons inline icon align */
.ph-customer-btn .ds-icon,
.ph-reminder-btn .ds-icon,
.ph-timer-btn .ds-icon,
.ph-archive-btn .ds-icon {
  margin-right: 0;
  width: 14px; height: 14px;
}
/* V18.1 — FAB icon centering */
.sv-fab-main .ds-icon {
  margin: 0;
}
.sv-fab-action .ds-icon {
  margin: 0;
}
.sv-fab-timer-badge {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.sv-fab-timer-badge .ds-icon {
  color: #fff;
  width: 14px;
  height: 14px;
}
.sv-bell-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #E63946;
  color: #fff;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--c-bg);
  /* V16.9 — Bỏ pulse animation tránh nháy. Đã đủ noticeable với màu đỏ + shadow */
}

/* Dropdown panel */
.sv-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  z-index: 1000;
  overflow: hidden;
  animation: dropdownIn .18s ease-out;
}
[data-theme="dark"] .sv-bell-dropdown {
  background: var(--c-surface-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.sv-bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
[data-theme="dark"] .sv-bell-head { background: var(--c-surface); }
.sv-bell-title { font-size: 13px; font-weight: 700; color: var(--c-text); }
.sv-bell-actions { display: flex; gap: 6px; }
.sv-bell-action {
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all .15s ease;
}
.sv-bell-action:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* Empty state */
.sv-bell-empty {
  padding: 32px 20px;
  text-align: center;
}
.sv-bell-empty .emp-icon { font-size: 32px; opacity: 0.5; margin-bottom: 8px; }
.sv-bell-empty .emp-text {
  font-size: 13px; font-weight: 600; color: var(--c-text);
  margin-bottom: 4px;
}
.sv-bell-empty .emp-sub {
  font-size: 11px; color: var(--c-text-muted); line-height: 1.5;
}

/* List + items */
.sv-bell-list {
  max-height: 480px; overflow-y: auto;
}
.sv-bell-item {
  display: grid;
  grid-template-columns: 8px 1fr 24px;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-divider);
  cursor: pointer;
  transition: background .12s ease;
}
.sv-bell-item:last-child { border-bottom: none; }
.sv-bell-item:hover { background: var(--c-surface-2); }
[data-theme="dark"] .sv-bell-item:hover { background: var(--c-surface-3); }
.sv-bell-item .bi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-line);
  margin-top: 6px;
}
.sv-bell-item.is-unread .bi-dot { background: #F8951D; }
.sv-bell-item.kind-view .bi-dot { background: #2563EB; }
.sv-bell-item.kind-new_submission .bi-dot { background: #16A34A; }
.sv-bell-item.is-read { opacity: 0.7; }
.sv-bell-item .bi-content { min-width: 0; }
.sv-bell-item .bi-title {
  font-size: 12px; font-weight: 600; color: var(--c-text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.sv-bell-item .bi-body {
  font-size: 11px; color: var(--c-text-muted);
  line-height: 1.4;
  word-break: break-word;
}
.sv-bell-item .bi-meta {
  font-size: 10px; color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.sv-bell-item .bi-dismiss {
  width: 20px; height: 20px;
  background: transparent;
  border: none;
  color: var(--c-text-dim);
  cursor: pointer;
  font-size: 16px; line-height: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.sv-bell-item:hover .bi-dismiss { opacity: 1; }
.sv-bell-item .bi-dismiss:hover { background: var(--c-surface-3); color: var(--c-text); }

/* Toast container + cards */
#sv-toast-container {
  position: fixed;
  top: 76px; right: 16px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: 360px;
}
.sv-toast {
  pointer-events: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid #F8951D;
  border-radius: 10px;
  padding: 12px 36px 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  position: relative;
  cursor: pointer;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .25s ease, transform .25s ease;
  min-width: 280px;
}
[data-theme="dark"] .sv-toast {
  background: var(--c-surface-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}
.sv-toast.show { opacity: 1; transform: translateX(0); }
.sv-toast.dismissing { opacity: 0; transform: translateX(40px); }
.sv-toast.is-view { border-left-color: #2563EB; }
.sv-toast.is-new { border-left-color: #16A34A; }
.sv-toast-title {
  font-size: 13px; font-weight: 700; color: var(--c-text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.sv-toast-body {
  font-size: 12px; color: var(--c-text-muted);
  line-height: 1.4;
}
.sv-toast-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  background: transparent;
  border: none;
  color: var(--c-text-dim);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
.sv-toast-close:hover { background: var(--c-surface-3); color: var(--c-text); }

/* Mobile: full-width toast bottom */
@media (max-width: 768px) {
  #sv-toast-container {
    top: auto; bottom: 16px;
    left: 16px; right: 16px;
    max-width: none;
  }
  .sv-toast { min-width: 0; }
  .sv-bell-dropdown {
    width: calc(100vw - 24px);
    right: -8px;
  }
}

/* Dark mode polish */
[data-theme="dark"] .sv-bell-btn { border-color: var(--c-line); }
[data-theme="dark"] .sv-bell-btn:hover { background: var(--c-surface-3); }
[data-theme="dark"] .sv-bell-badge { box-shadow: 0 0 0 2px var(--c-surface); }

/* ============================================================
   V14.7 — SMART AGING + FOLLOW-UP
   ============================================================ */

/* Aging badge inline (cạnh tên dự án ở sidebar + project header) */
.aging-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 10px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;
}
.aging-badge.is-compact {
  padding: 1px 5px;
  font-size: 9px;
}
.aging-badge .ab-icon { font-size: 10px; }
.aging-badge .ab-label { letter-spacing: 0.3px; }

.aging-badge.tone-warn {
  background: rgba(248, 149, 29, 0.14);
  color: #B97515;
}
.aging-badge.tone-danger {
  background: rgba(230, 57, 70, 0.14);
  color: #C5333D;
}
.aging-badge.cat-critical {
  background: #E63946;
  color: #fff;
  /* V16.9 — Bỏ pulse animation tránh nháy. Status đã rõ qua màu đỏ */
}

[data-theme="dark"] .aging-badge.tone-warn {
  background: rgba(248, 149, 29, 0.22);
  color: #FFB74D;
}
[data-theme="dark"] .aging-badge.tone-danger {
  background: rgba(230, 57, 70, 0.25);
  color: #FF8085;
}
[data-theme="dark"] .aging-badge.cat-critical {
  background: #C5333D;
  color: #fff;
}

/* Sidebar preset badge số */
.sp-btn .sp-badge {
  margin-left: auto;
  background: #E63946;
  color: #fff;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1;
}
.sp-btn.is-active .sp-badge {
  background: rgba(255,255,255,0.25);
}

/* Dashboard "Cần chú ý" section */
.dash-aging-alert {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.06), rgba(248, 149, 29, 0.04));
  border: 1px solid rgba(230, 57, 70, 0.18);
  border-left: 4px solid #E63946;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
[data-theme="dark"] .dash-aging-alert {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.12), rgba(248, 149, 29, 0.08));
  border-color: rgba(230, 57, 70, 0.32);
}

.dash-aging-alert h2 {
  color: #C5333D !important;
  margin: 0;
}
[data-theme="dark"] .dash-aging-alert h2 { color: #FF8085 !important; }

.aging-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.aging-counter {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: default;
  text-align: left;
}
.aging-counter.critical {
  cursor: pointer;
  border-color: rgba(230, 57, 70, 0.3);
}
.aging-counter.critical:hover {
  background: rgba(230, 57, 70, 0.05);
  transform: translateY(-1px);
}
.aging-counter .ac-icon { font-size: 24px; line-height: 1; }
.aging-counter .ac-num {
  font-size: 22px; font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
  line-height: 1;
}
.aging-counter .ac-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
}
.aging-counter.critical .ac-num { color: #C5333D; }
.aging-counter.stale .ac-num { color: #B97515; }
.aging-counter.warning .ac-num { color: #B97515; }
[data-theme="dark"] .aging-counter { background: var(--c-surface-2); }
[data-theme="dark"] .aging-counter.critical .ac-num { color: #FF8085; }
[data-theme="dark"] .aging-counter.stale .ac-num,
[data-theme="dark"] .aging-counter.warning .ac-num { color: #FFB74D; }

/* List of stale items */
.aging-list {
  display: flex; flex-direction: column; gap: 6px;
}
.aging-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.aging-item:hover {
  background: var(--c-surface-2);
  transform: translateX(2px);
}
.aging-item.cat-critical { border-left: 3px solid #E63946; }
.aging-item.cat-stale { border-left: 3px solid #F8951D; }
.aging-item.cat-warning { border-left: 3px solid #F8951D; opacity: 0.9; }
[data-theme="dark"] .aging-item { background: var(--c-surface-2); }
[data-theme="dark"] .aging-item:hover { background: var(--c-surface-3); }

.aging-item .ai-left { flex: 1; min-width: 0; }
.aging-item .ai-name {
  font-size: 14px; font-weight: 600; color: var(--c-text);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aging-item .ai-meta {
  font-size: 11px; color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.aging-item .ai-meta .muted { color: var(--c-text-dim); }
.aging-item .ai-right { flex: 0 0 auto; }
.aging-item .ai-right .aging-badge {
  margin-left: 0;
  padding: 4px 10px;
  font-size: 11px;
}

/* "Xem tất cả" link */
.aging-more {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--c-line);
  color: var(--c-accent);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.aging-more:hover {
  background: var(--c-accent);
  color: #fff;
  border-style: solid;
}

/* Mobile */
@media (max-width: 768px) {
  .aging-counters { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .aging-counter { padding: 8px 10px; gap: 8px; }
  .aging-counter .ac-icon { font-size: 18px; }
  .aging-counter .ac-num { font-size: 18px; }
  .aging-counter .ac-label { font-size: 9px; }
  .aging-item { padding: 10px 12px; gap: 10px; }
  .aging-item .ai-name { font-size: 13px; }
  .dash-aging-alert { padding: 16px; border-radius: 10px; }
}

/* ============================================================
   V14.8 — SETTINGS CENTER + BACKUP/EXPORT HUB
   ============================================================ */

/* Settings advanced — grid of cards */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.settings-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 16px;
}
.settings-card.settings-card-wide { grid-column: 1 / -1; }
[data-theme="dark"] .settings-card { background: var(--c-surface); }

.settings-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-divider);
}
.settings-card-head .sc-icon { font-size: 18px; }
.settings-card-head .sc-title {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--c-text);
}
.settings-card-body {
  display: flex; flex-direction: column; gap: 10px;
}
.settings-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 13px; color: var(--c-text);
}
.settings-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #F8951D;
  cursor: pointer;
}
.settings-help {
  font-size: 11px; color: var(--c-text-muted);
  margin: 0; line-height: 1.5;
}

/* Aging thresholds grid */
.settings-aging-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 10px 0 14px;
}
.settings-aging-col {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
[data-theme="dark"] .settings-aging-col { background: var(--c-surface-2); }
.settings-aging-col strong {
  font-size: 11px; font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.settings-aging-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.settings-aging-row label {
  flex: 1;
  color: var(--c-text);
}
.sys-config-input.small {
  width: 60px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: var(--font-mono);
  text-align: right;
}
.settings-aging-unit {
  font-size: 10px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  width: 32px;
}

/* Backup banner */
.backup-banner {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  border-left: 4px solid;
}
.backup-banner.ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: #16A34A;
}
.backup-banner.warn {
  background: rgba(248, 149, 29, 0.1);
  border-color: #F8951D;
}
.backup-banner strong {
  display: block;
  font-size: 13px;
  color: var(--c-text);
  margin-bottom: 2px;
}
.backup-banner p {
  font-size: 11px;
  color: var(--c-text-muted);
  margin: 0;
  font-family: var(--font-mono);
}
[data-theme="dark"] .backup-banner.ok { background: rgba(34, 197, 94, 0.15); }
[data-theme="dark"] .backup-banner.warn { background: rgba(248, 149, 29, 0.18); }

/* Backup action grid */
.backup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.backup-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all .15s ease;
  font-family: inherit;
}
.backup-btn:hover:not(:disabled) {
  background: var(--c-surface-2);
  border-color: var(--c-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.backup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.backup-btn.primary {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.12), rgba(248, 149, 29, 0.04));
  border-color: rgba(248, 149, 29, 0.4);
}
.backup-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.2), rgba(248, 149, 29, 0.08));
  border-color: var(--c-accent);
}
.backup-btn .bb-icon {
  font-size: 24px;
  flex: 0 0 auto;
}
.backup-btn .bb-title {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  margin-bottom: 2px;
}
.backup-btn .bb-sub {
  font-size: 11px; color: var(--c-text-muted);
  font-family: var(--font-mono);
}
[data-theme="dark"] .backup-btn { background: var(--c-surface-2); }
[data-theme="dark"] .backup-btn:hover:not(:disabled) { background: var(--c-surface-3); }

/* Backup history */
.backup-history h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  margin: 0 0 10px;
}
.backup-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.backup-history-list li {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  font-size: 12px;
}
[data-theme="dark"] .backup-history-list li { background: var(--c-surface); }
.backup-history-list .bh-kind { font-weight: 600; color: var(--c-text); }
.backup-history-list .bh-meta {
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.backup-history-list .bh-time {
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* Mobile */
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-aging-grid { grid-template-columns: 1fr; }
  .backup-grid { grid-template-columns: 1fr 1fr; }
  .backup-btn { padding: 12px; }
  .backup-btn .bb-icon { font-size: 20px; }
  .backup-history-list li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 480px) {
  .backup-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V14.9 — PROJECT ACTIVITY TIMELINE
   ============================================================ */

.project-timeline-section {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
[data-theme="dark"] .project-timeline-section { background: var(--c-surface-2); }

.project-timeline-section .section-head-with-action {
  margin-bottom: 16px;
}
.project-timeline-section h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text);
  margin: 0;
}
.ptl-actions {
  display: flex; gap: 6px;
}
.ptl-actions .ghost-btn {
  font-size: 11px;
  padding: 4px 10px;
}

.ptl-loading,
.ptl-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--c-text-muted);
  font-size: 13px;
}
.ptl-empty-icon {
  font-size: 32px;
  opacity: 0.5;
  margin-bottom: 8px;
}

/* Timeline structure */
.project-timeline {
  display: flex; flex-direction: column; gap: 18px;
}
.ptl-group { }
.ptl-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  padding: 6px 10px;
  background: var(--c-surface-2);
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 8px;
}
[data-theme="dark"] .ptl-group-label { background: var(--c-surface-3); }

.ptl-events {
  position: relative;
  padding-left: 12px;
}
.ptl-events::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-divider);
}

.ptl-event {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
.ptl-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-divider);
  position: relative;
  z-index: 1;
}
[data-theme="dark"] .ptl-marker { background: var(--c-surface-2); }
.ptl-icon {
  font-size: 14px;
  line-height: 1;
}

.ptl-event.kind-audit .ptl-marker { border-color: #2563EB; }
.ptl-event.kind-bcw .ptl-marker { border-color: #16A34A; }
.ptl-event.kind-note .ptl-marker { border-color: #F8951D; }
.ptl-event.kind-activity .ptl-marker { border-color: #6B7280; }

.ptl-body {
  min-width: 0;
  padding-top: 4px;
}
.ptl-head-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 4px;
}
.ptl-action {
  font-weight: 600;
  color: var(--c-text);
}
.ptl-actor {
  font-size: 12px;
  font-family: var(--font-mono);
}
.ptl-time {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--c-text-dim);
  margin-left: auto;
}
.ptl-diff {
  font-size: 12px;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  padding: 8px 12px;
  border-radius: 6px;
  word-break: break-word;
  line-height: 1.5;
}
[data-theme="dark"] .ptl-diff { background: var(--c-surface-3); }

/* Mobile */
@media (max-width: 768px) {
  .project-timeline-section { padding: 16px; border-radius: 10px; }
  .ptl-events { padding-left: 4px; }
  .ptl-events::before { left: 13px; }
  .ptl-event { gap: 8px; grid-template-columns: 22px 1fr; }
  .ptl-marker { width: 22px; height: 22px; border-width: 2px; }
  .ptl-icon { font-size: 11px; }
  .ptl-time { margin-left: 0; width: 100%; }
  .ptl-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   V15.0 — QUICK SNIPPETS LIBRARY
   ============================================================ */

/* Snippet trigger button (inside textarea field labels) */
.field-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.snippet-trigger-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all .15s ease;
}
.snippet-trigger-btn:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
[data-theme="dark"] .snippet-trigger-btn { background: var(--c-surface-3); }

/* Snippet picker dialog (overlay) */
.snippet-picker-overlay {
  z-index: 9000;
}
.snippet-picker-dialog {
  max-width: 640px;
  width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex; flex-direction: column;
}
.snippet-picker-search {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin-bottom: 14px;
  font-family: inherit;
  color: var(--c-text);
  box-sizing: border-box;
}
.snippet-picker-search:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(248, 149, 29, 0.15);
}
[data-theme="dark"] .snippet-picker-search { background: var(--c-surface-3); }

.snippet-section {
  margin-bottom: 14px;
}
.snippet-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 6px;
  padding: 0 4px;
}

.snippet-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.snippet-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .12s ease;
}
.snippet-item:hover {
  background: var(--c-surface-2);
  border-color: var(--c-accent);
  transform: translateX(2px);
}
[data-theme="dark"] .snippet-item { background: var(--c-surface-2); }
[data-theme="dark"] .snippet-item:hover { background: var(--c-surface-3); }

.snip-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.snip-title {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  flex: 1;
}
.snip-tag {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--c-surface-3);
  color: var(--c-text-muted);
}
.snip-subject {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-style: italic;
}
.snip-preview {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.snippet-empty {
  padding: 20px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 13px;
  background: var(--c-surface-2);
  border-radius: 8px;
}

/* Snippets manager in System tab */
.snippets-defaults {
  margin-bottom: 14px;
}
.snippets-defaults summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  user-select: none;
}
.snippets-defaults summary:hover { color: var(--c-text); }
.snippets-defaults-list {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px;
}
.snippet-default-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-divider);
  border-radius: 6px;
  font-size: 12px;
}
[data-theme="dark"] .snippet-default-row { background: var(--c-surface-2); }
.snippet-default-title {
  color: var(--c-text);
  font-weight: 500;
}

.snippets-empty {
  padding: 20px;
  text-align: center;
  background: var(--c-surface-2);
  border-radius: 8px;
}

.snippets-custom-list {
  display: flex; flex-direction: column; gap: 12px;
}
.snippet-edit-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  background: var(--c-surface-2);
  border-radius: 8px;
  border: 1px solid var(--c-line);
}
[data-theme="dark"] .snippet-edit-row { background: var(--c-surface); }
.se-row1 {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  gap: 8px;
  align-items: center;
}
.snippet-edit-body {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  resize: vertical;
}
.ghost-btn.danger {
  color: #C5333D;
  border-color: rgba(230, 57, 70, 0.3);
}
.ghost-btn.danger:hover {
  background: #E63946;
  color: #fff;
  border-color: #E63946;
}

/* Mobile */
@media (max-width: 768px) {
  .snippet-picker-dialog { max-height: 90vh; }
  .snippets-defaults-list { grid-template-columns: 1fr; }
  .se-row1 { grid-template-columns: 90px 1fr 32px; gap: 6px; }
}

/* ============================================================
   V15.1 — SMART ACTION SUGGESTIONS PANEL
   ============================================================ */

.smart-suggestions-section {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.08), rgba(248, 149, 29, 0.02));
  border: 1px solid rgba(248, 149, 29, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
[data-theme="dark"] .smart-suggestions-section {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.14), rgba(248, 149, 29, 0.05));
  border-color: rgba(248, 149, 29, 0.32);
}

.ssg-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ssg-head h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-accent);
  margin: 0;
}
.ssg-count {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  background: var(--c-surface);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
}
[data-theme="dark"] .ssg-count { background: var(--c-surface-2); }

.ssg-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ssg-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  border-left: 4px solid var(--c-line);
}
[data-theme="dark"] .ssg-card { background: var(--c-surface-2); }
.ssg-card.tone-warn { border-left-color: #F8951D; }
.ssg-card.tone-danger { border-left-color: #E63946; }
.ssg-card.tone-info { border-left-color: #2563EB; }
.ssg-card.tone-success { border-left-color: #16A34A; }

.ssg-icon {
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ssg-body { min-width: 0; }
.ssg-title {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  margin-bottom: 2px;
}
.ssg-reason {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.5;
}

.ssg-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
.ssg-actions .save-btn.small,
.ssg-actions .ghost-btn.small {
  font-size: 11px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
  .smart-suggestions-section { padding: 12px 14px; }
  .ssg-card {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .ssg-icon { font-size: 18px; }
  .ssg-actions {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
  .ssg-actions .save-btn.small { flex: 1; }
}

/* ============================================================
   V15.2 — KANBAN DRAG-DROP PIPELINE
   ============================================================ */

.pipeline-grid.kanban-mode .stage-col {
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pipeline-grid.kanban-mode .stage-col.is-drag-target {
  background: linear-gradient(180deg, rgba(248, 149, 29, 0.14), rgba(248, 149, 29, 0.04));
  border: 2px dashed #F8951D !important;
  box-shadow: 0 0 0 4px rgba(248, 149, 29, 0.08);
}
[data-theme="dark"] .pipeline-grid.kanban-mode .stage-col.is-drag-target {
  background: linear-gradient(180deg, rgba(248, 149, 29, 0.22), rgba(248, 149, 29, 0.08));
}

.pipeline-grid.kanban-mode .stage-col.is-saving::after {
  content: "💾 Đang lưu...";
  position: absolute;
  top: 8px; right: 8px;
  font-size: 10px;
  color: #F8951D;
  background: var(--c-surface);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  border: 1px solid #F8951D;
  z-index: 5;
  /* V16.9 — Bỏ pulse opacity */
}

/* Kanban card variant */
.kanban-card {
  display: grid !important;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
.kanban-card:active { cursor: grabbing; }

.kanban-card.is-dragging {
  opacity: 0.4;
  transform: scale(0.95);
  cursor: grabbing;
}

.kanban-card .sc-drag-handle {
  font-size: 14px;
  color: var(--c-text-dim);
  font-weight: 700;
  letter-spacing: -2px;
  cursor: grab;
  text-align: center;
  flex-shrink: 0;
}
.kanban-card:hover .sc-drag-handle { color: var(--c-accent); }

.kanban-card .sc-content {
  min-width: 0;
}
.kanban-card .sc-name {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kanban-card .sc-company {
  font-size: 11px;
  color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Empty stage with drag-target highlight */
.pipeline-grid.kanban-mode .stage-col.is-drag-target .stage-empty {
  color: #F8951D;
  font-weight: 600;
  background: rgba(248, 149, 29, 0.05);
  border: 1px dashed rgba(248, 149, 29, 0.3);
  border-radius: 6px;
  padding: 12px;
}

/* Mobile: drag chỉ hỗ trợ basic, ưu tiên click flow */
@media (max-width: 768px) {
  .kanban-card .sc-drag-handle { display: none; }
  .kanban-card { grid-template-columns: 1fr auto; }
}

/* ============================================================
   V15.3 — UNIVERSAL SEARCH (palette enhancements)
   ============================================================ */

/* Group head with "+X more" indicator */
.cmd-palette-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
}
.cmd-palette-group-head .cpg-more {
  font-size: 9px;
  color: var(--c-text-dim);
  font-weight: 500;
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

/* Search history chips */
.cph-history { padding-bottom: 4px; }
.cph-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 12px 6px;
}
.cph-chip {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.cph-chip:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
[data-theme="dark"] .cph-chip { background: var(--c-surface-3); }

/* Group color accents — distinguish kinds */
.cmd-palette-group:has(.cpi-icon) .cmd-palette-item:hover { background: var(--c-surface-2); }

/* Distinct icon color per kind (subtle) */
.cmd-palette-item .cpi-icon {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* ============================================================
   V15.4 — HELP PANEL + WHAT'S NEW
   ============================================================ */

/* Topbar Help button */
.sv-help-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  padding: 0;
}
.sv-help-btn:hover {
  background: var(--c-surface-2);
  transform: translateY(-1px);
}
.sv-help-btn.has-new {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.12), rgba(248, 149, 29, 0.04));
  border-color: var(--c-accent);
  /* V16.9 — Bỏ pulse animation tránh nháy. Dot badge đã đủ visible */
}
.sv-help-icon { font-size: 16px; }
.sv-help-badge {
  position: absolute;
  top: 0; right: 0;
  width: 8px; height: 8px;
  background: #F8951D;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  font-size: 0;
}
[data-theme="dark"] .sv-help-btn:hover { background: var(--c-surface-3); }

/* Help dialog — V16.6 fixed layout */
.help-panel-overlay { z-index: 9100; }
.help-panel-dialog {
  max-width: 720px !important;
  width: calc(100vw - 32px) !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;  /* override .share-dialog overflow-y:auto */
  background: var(--c-surface);
}
[data-theme="dark"] .help-panel-dialog { background: var(--c-surface-2); }

.help-panel-dialog .sd-head {
  flex: 0 0 auto;
  padding: 18px 24px 14px !important;
  position: relative;
}
.help-panel-dialog .sd-head h3 {
  font-size: 17px !important;
  font-weight: 700;
  margin-bottom: 2px;
}
.help-panel-dialog .sd-head .close-btn {
  position: absolute;
  top: 14px; right: 16px;
}

.help-tabs {
  display: flex; gap: 4px;
  padding: 0 24px 12px;
  border-bottom: 1px solid var(--c-divider);
  margin-bottom: 0;
  flex: 0 0 auto;
}
.help-tab {
  padding: 8px 16px;
  font-size: 13px; font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.help-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.help-tab.is-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.help-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 24px;
  min-height: 0;  /* critical for flex scroll */
}

.help-panel-dialog .purge-actions-row {
  flex: 0 0 auto;
  padding: 14px 24px !important;
  border-top: 1px solid var(--c-divider);
  margin: 0 !important;
}

.help-intro {
  font-size: 13px;
  color: var(--c-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Shortcuts table */
.shortcuts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.shortcuts-table td {
  padding: 6px 12px;
  vertical-align: middle;
}
.shortcuts-table td:first-child {
  width: 200px;
  text-align: right;
}
.shortcut-kbd {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--c-text);
  white-space: nowrap;
}
[data-theme="dark"] .shortcut-kbd { background: var(--c-surface-3); }

.shortcut-desc {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.4;
}

/* Features list */
.features-list {
  display: flex; flex-direction: column; gap: 12px;
}
.feature-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 4px solid var(--c-accent);
}
[data-theme="dark"] .feature-card { background: var(--c-surface); }
.feature-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.feature-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.feature-meta { flex: 1; min-width: 0; }
.feature-title {
  font-size: 14px; font-weight: 700;
  color: var(--c-text);
  margin-bottom: 2px;
}
.feature-version {
  font-size: 10px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.feature-desc {
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.feature-action {
  font-size: 11px !important;
  padding: 5px 12px !important;
}

/* Mobile */
@media (max-width: 768px) {
  .help-panel-dialog { max-height: 92vh; }
  .shortcuts-table td:first-child {
    width: auto;
    text-align: left;
    display: block;
    padding-bottom: 2px;
  }
  .shortcuts-table td {
    display: block;
    padding-left: 0;
  }
  .shortcuts-table tr {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-divider);
  }
  .feature-head { gap: 8px; }
  .feature-icon { font-size: 20px; }
  .feature-title { font-size: 13px; }
}

/* ============================================================
   V15.5 — PROJECT HEALTH SCORE + HEATMAP
   ============================================================ */

/* Dashboard heatmap section */
.dash-health-heatmap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .dash-health-heatmap { background: var(--c-surface-2); }

.dash-health-heatmap h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text);
  margin: 0;
}

.hh-legend {
  display: flex; gap: 12px;
  flex-wrap: wrap;
}
.hh-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
}
.hh-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Heatmap grid */
.health-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.hm-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 64px;
  transition: transform .15s ease, box-shadow .15s ease;
  color: #fff;
  font-family: inherit;
}
.hm-tile:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 2;
}
.hm-tile .hm-name {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.hm-tile .hm-score {
  font-size: 22px; font-weight: 700;
  font-family: var(--font-mono);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  align-self: flex-end;
}

/* Per-project health dial trong project hero */
.ph-health-dial {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  padding: 4px 12px 4px 4px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: help;
}
[data-theme="dark"] .ph-health-dial { background: var(--c-surface-3); }
.ph-health-dial svg {
  flex-shrink: 0;
}
.ph-health-dial .phd-text {
  display: flex; flex-direction: column;
  line-height: 1;
}
.ph-health-dial .phd-score {
  font-size: 16px; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--c-text);
}
.ph-health-dial .phd-label {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.ph-health-dial.tone-success .phd-label { color: #16A34A; }
.ph-health-dial.tone-info .phd-label { color: #2563EB; }
.ph-health-dial.tone-warn .phd-label { color: #B97515; }
.ph-health-dial.tone-danger .phd-label { color: #C5333D; }

/* Mobile */
@media (max-width: 768px) {
  .health-heatmap-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .hm-tile { min-height: 56px; padding: 8px 10px; }
  .hm-tile .hm-name { font-size: 11px; }
  .hm-tile .hm-score { font-size: 18px; }
  .hh-legend { gap: 6px; }
  .ph-health-dial { padding: 2px 8px 2px 2px; }
  .ph-health-dial svg { width: 36px; height: 36px; }
}

/* ============================================================
   V15.6 — SALES FORECAST + WIN-RATE ANALYTICS
   ============================================================ */

.dash-sales-forecast {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 18px;
}
[data-theme="dark"] .dash-sales-forecast { background: var(--c-surface-2); }

.dash-sales-forecast h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text);
  margin: 0;
}

/* Forecast scenario cards */
.forecast-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fc-scenario {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  position: relative;
}
[data-theme="dark"] .fc-scenario { background: var(--c-surface-3); }
.fc-scenario.worst { border-left: 4px solid #E63946; }
.fc-scenario.realistic {
  border-left: 4px solid #F8951D;
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.08), rgba(248, 149, 29, 0.02));
  transform: scale(1.03);
  z-index: 1;
}
[data-theme="dark"] .fc-scenario.realistic {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.15), rgba(248, 149, 29, 0.05));
}
.fc-scenario.best { border-left: 4px solid #16A34A; }

.fc-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  margin-bottom: 6px;
}
.fc-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: var(--font-mono);
}
.fc-note {
  font-size: 11px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  line-height: 1.4;
}

/* Conversion funnel */
.forecast-funnel { }
.forecast-funnel h3 {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  margin: 0 0 10px;
}
.funnel-bars {
  display: flex; flex-direction: column; gap: 8px;
}
.funnel-row { }
.fr-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.fr-label {
  font-size: 12px; font-weight: 600;
  color: var(--c-text);
}
.fr-count {
  font-size: 14px; font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
}
.fr-drop {
  font-size: 10px;
  color: #E63946;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-left: auto;
}
.fr-bar-wrap {
  height: 8px;
  background: var(--c-surface-2);
  border-radius: 4px;
  overflow: hidden;
}
[data-theme="dark"] .fr-bar-wrap { background: var(--c-surface-3); }
.fr-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.fr-bar.kind-sent { background: #94A3B8; }
.fr-bar.kind-viewed { background: #2563EB; }
.fr-bar.kind-negotiating { background: #F8951D; }
.fr-bar.kind-signed { background: linear-gradient(90deg, #16A34A, #22C55E); }

/* Metrics row */
.forecast-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fm-card {
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .fm-card { background: var(--c-surface-3); }
.fm-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
}
.fm-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
}

/* Top opportunities */
.forecast-opportunities { }
.forecast-opportunities h3 {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  margin: 0 0 8px;
}
.opp-list {
  display: flex; flex-direction: column; gap: 4px;
}
.opp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
[data-theme="dark"] .opp-row { background: var(--c-surface-3); }
.opp-row:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: translateX(2px);
}
.opp-row:hover .opp-meta,
.opp-row:hover .opp-views,
.opp-row:hover .opp-status,
.opp-row:hover .opp-value { color: #fff; }
.opp-name {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opp-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--c-text-muted);
}
.opp-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--c-surface);
}
.opp-status.tone-warn { color: #F8951D; }
.opp-status.tone-info { color: #2563EB; }
.opp-views { font-family: var(--font-mono); }
.opp-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
}

/* Mobile */
@media (max-width: 768px) {
  .forecast-scenarios { grid-template-columns: 1fr; }
  .fc-scenario.realistic { transform: none; }
  .forecast-metrics { grid-template-columns: 1fr 1fr; }
  .opp-row { grid-template-columns: 1fr auto; gap: 6px; padding: 8px 12px; }
  .opp-meta { grid-column: 1 / -1; margin-top: 2px; }
  .dash-sales-forecast { padding: 16px; }
}

/* ============================================================
   V15.7 — TAGS & CATEGORIES SYSTEM
   ============================================================ */

/* Tag dot cluster (sidebar items — compact) */
.tag-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--c-bg);
  box-sizing: border-box;
}
.tag-dot-more {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  font-weight: 600;
  margin-left: 2px;
}

/* Tag chip row trong project hero */
.project-tag-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 0;
  align-items: center;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.tag-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.tag-chip .tc-icon { font-size: 12px; }
.tag-chip .tc-x {
  font-size: 14px;
  margin-left: 2px;
  opacity: 0.5;
  line-height: 1;
}
.tag-chip:hover .tc-x { opacity: 1; }

.tag-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 500;
  border: 1px dashed var(--c-line);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.tag-add-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(248, 149, 29, 0.06);
}

/* Tag picker dialog */
.tag-picker-overlay { z-index: 9050; }
.tag-picker-dialog {
  max-width: 480px;
  width: calc(100vw - 32px);
}
.tag-picker-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.tag-pick-item {
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .12s ease;
}
[data-theme="dark"] .tag-pick-item { background: var(--c-surface-2); }
.tag-pick-item:hover {
  background: var(--c-surface-2);
  transform: translateX(2px);
}
[data-theme="dark"] .tag-pick-item:hover { background: var(--c-surface-3); }
.tag-pick-item.is-active {
  border-width: 2px;
  font-weight: 700;
}
.tpi-icon { font-size: 22px; line-height: 1; text-align: center; }
.tpi-body { min-width: 0; }
.tpi-label {
  font-size: 13px; font-weight: 600;
  margin-bottom: 2px;
}
.tpi-desc {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.tpi-check {
  font-size: 16px;
  color: var(--c-accent);
  font-weight: 700;
}

/* Tags manager in System tab */
.tags-defaults {
  margin-bottom: 14px;
}
.tags-defaults summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  user-select: none;
}
.tags-defaults summary:hover { color: var(--c-text); }
.tags-defaults-list {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
}
.tag-def-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 6px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-divider);
  border-radius: 6px;
  font-size: 12px;
}
[data-theme="dark"] .tag-def-row { background: var(--c-surface-2); }
.tag-def-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  border: 1px solid;
  border-radius: 999px;
}
.tag-def-desc {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}

.tags-custom-list {
  display: flex; flex-direction: column; gap: 8px;
}
.tag-edit-row {
  display: grid;
  grid-template-columns: 60px 1fr 28px 130px 1fr 36px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 8px;
  border: 1px solid var(--c-line);
}
[data-theme="dark"] .tag-edit-row { background: var(--c-surface); }
.tag-color-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
  box-sizing: border-box;
}

/* Mobile */
@media (max-width: 768px) {
  .tag-edit-row {
    grid-template-columns: 50px 1fr 24px 36px;
    gap: 6px;
  }
  .tag-edit-row > select,
  .tag-edit-row > input:nth-of-type(3) {
    grid-column: 1 / -1;
  }
  .tag-def-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   V15.8 — INLINE QUICK NOTE + VOICE INPUT
   ============================================================ */

.inline-note-widget {
  margin-top: 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  transition: all .2s ease;
}
[data-theme="dark"] .inline-note-widget { background: var(--c-surface); }

/* Collapsed state */
.inline-note-widget.collapsed {
  padding: 0;
}
.inw-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-radius: 10px;
  transition: background .15s ease;
}
.inw-trigger:hover {
  background: var(--c-surface-3);
}
[data-theme="dark"] .inw-trigger:hover { background: var(--c-surface-2); }

.inw-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
  background: var(--c-surface);
  border-radius: 50%;
  border: 1px dashed var(--c-line);
  color: var(--c-text-muted);
}
.inw-trigger:hover .inw-icon {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  border-style: solid;
}
[data-theme="dark"] .inw-icon { background: var(--c-surface-2); }

.inw-preview {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--c-text);
}
.inw-preview.muted { color: var(--c-text-muted); font-style: italic; }
.inw-preview-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
.inw-preview-meta {
  font-size: 10px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
}
.inw-shortcut {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--c-text-dim);
  padding: 3px 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

/* Expanded state */
.inline-note-widget.expanded {
  padding: 14px 16px;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(248, 149, 29, 0.08);
}

.inw-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.inw-title {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text);
}

.inline-note-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
  color: var(--c-text);
  box-sizing: border-box;
  margin-bottom: 8px;
}
.inline-note-textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(248, 149, 29, 0.15);
}
/* V21.4.2 — is-recording state đã bỏ (voice removed) */

/* ============================================================
   V21.4.3 — QC TRIỆT ĐỂ: button hover design system + drawer pin chân
   ============================================================
   User báo: hover ghost-btn chuyển trắng (mất visual feedback),
   các action button design không nhất quán, drawer Quick Edit
   vẫn ẩn nút Lưu khi nội dung dài.
   Fix: tất cả ghost-btn / action button hover phải có brand accent
   rõ rệt. Drawer foot pin với specificity cao + !important.
   ============================================================ */

/* === BUTTON HOVER — đồng bộ design system: brand color rõ === */
.ghost-btn:hover:not(:disabled):not(.close-btn):not(.danger),
.inw-btn:hover:not(:disabled):not(.is-disabled),
.bcw-btn:hover:not(:disabled),
.sys-action-btn:hover {
  background: var(--brand-accent-soft, rgba(248,149,29,0.12)) !important;
  border-color: var(--brand-accent, #F8951D) !important;
  color: var(--brand-accent-deep, #B26A12) !important;
  box-shadow: 0 2px 8px rgba(248,149,29,0.15);
}

/* Save button hover — đậm hơn (đã có rule, nhưng add !important) */
.save-btn:hover:not(:disabled),
.inw-btn.save:hover:not(:disabled),
.pc-save-btn:hover:not(:disabled) {
  background: var(--brand-accent-deep, #B26A12) !important;
  border-color: var(--brand-accent-deep, #B26A12) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(248,149,29,0.3);
}

/* Close button (X) hover — đỏ nhẹ để báo "đóng" */
.close-btn:hover,
.ghost-btn.close-btn:hover {
  background: rgba(230,57,70,0.08) !important;
  border-color: rgba(230,57,70,0.4) !important;
  color: #E63946 !important;
}

/* Danger button hover */
.ghost-btn.danger:hover,
.btn.danger:hover {
  background: #E63946 !important;
  border-color: #E63946 !important;
  color: #fff !important;
}

/* === DRAWER PIN CHÂN TRIỆT ĐỂ — high specificity + !important === */
/* Drawer container: ép layout flex column 100dvh */
.bcw-drawer-backdrop > .bcw-drawer,
.bcw-drawer.quick-drawer,
.bcw-drawer.capture-drawer {
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Body scroll: flex 1 + overflow auto + min-height 0 (tránh flexbox overflow bug) */
.bcw-drawer.quick-drawer .capture-body,
.bcw-drawer.capture-drawer .capture-body,
.bcw-drawer .capture-body,
.bcw-drawer .quick-body,
.bcw-drawer .drawer-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* Footer pin: position sticky bottom 0 + flex-shrink 0 + z-index cao */
.bcw-drawer.quick-drawer .capture-foot,
.bcw-drawer.capture-drawer .capture-foot,
.bcw-drawer .capture-foot,
.bcw-drawer .quick-foot,
.bcw-drawer > .drawer-foot {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  background: var(--c-surface, #fff) !important;
  border-top: 1.5px solid var(--c-line, #E5E2DA) !important;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* Buttons inside foot phải có visual hover rõ */
.bcw-drawer .capture-foot .save-btn,
.bcw-drawer .capture-foot .ghost-btn {
  min-height: 40px;
  padding: 10px 18px !important;
  font-weight: 600;
  font-size: 13.5px;
}

/* Modal trung tâm (precall, workshop, report) — pin foot tương tự */
.bcw-modal:not(.proposal-composer) {
  display: flex !important;
  flex-direction: column !important;
  max-height: 92dvh !important;
  overflow: hidden !important;
}
.bcw-modal:not(.proposal-composer) > .modal-foot,
.bcw-modal:not(.proposal-composer) > .doc-foot {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  background: var(--c-surface, #fff) !important;
  border-top: 1.5px solid var(--c-line, #E5E2DA) !important;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* END V21.4.3 */

/* ============================================================
   V21.4.4 — Tag Picker rebuild: chip wrap + search + sort selected
   ============================================================ */

.tag-picker-dialog.v2 {
  max-width: 640px !important;
  width: 100%;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
  background: var(--c-surface, #fff);
}

/* Header compact */
.tp2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--c-line, #E5E2DA);
  gap: 12px;
}
.tp2-head-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.tp2-head-left strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}
.tp2-count {
  font-size: 11.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  padding: 2px 8px;
  background: var(--c-surface-2);
  border-radius: 10px;
}

/* Search bar */
.tp2-search {
  position: relative;
  margin: 12px 20px 8px;
  display: flex;
  align-items: center;
}
.tp2-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  opacity: 0.6;
}
.tp2-search-input {
  width: 100%;
  padding: 9px 36px;
  border: 1.5px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  font-size: 13px;
  font-family: inherit;
  color: var(--c-text);
  outline: none;
  box-sizing: border-box;
}
.tp2-search-input:focus {
  border-color: var(--brand-accent, #F8951D);
  box-shadow: 0 0 0 3px rgba(248, 149, 29, 0.12);
}
.tp2-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp2-search-clear:hover {
  background: var(--c-text-muted);
  color: #fff;
}

/* Body scroll */
.tp2-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 16px;
  min-height: 0;
}

/* Group section */
.tp2-group {
  margin-bottom: 16px;
}
.tp2-group:last-child {
  margin-bottom: 0;
}
.tp2-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  font-family: var(--font-mono, monospace);
}
.tp2-group-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  opacity: 0.7;
}

/* Chips wrap */
.tp2-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tag chip — compact, inline-flex, color theo tag */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: 18px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 130ms ease;
  white-space: nowrap;
}
.tag-chip:hover:not(.is-active) {
  background: var(--c-surface-2);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.tag-chip.is-active {
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.tag-chip.is-active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  filter: brightness(0.96);
}
.tag-chip-icon {
  font-size: 14px;
  line-height: 1;
}
.tag-chip-label {
  line-height: 1.2;
}
.tag-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}
.tag-chip-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
  opacity: 0.6;
}
.tag-chip:hover .tag-chip-add {
  background: var(--brand-accent, #F8951D);
  color: #fff;
  opacity: 1;
}

/* Empty state */
.tp2-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--c-text-muted);
  font-size: 13px;
}
.tp2-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* Footer hint */
.tp2-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  text-align: center;
  font-size: 11.5px;
}

/* Mobile */
@media (max-width: 640px) {
  .tag-picker-dialog.v2 {
    max-width: 100% !important;
    max-height: 92dvh;
  }
  .tag-chip {
    font-size: 12px;
    padding: 6px 10px 6px 8px;
  }
}

/* END V21.4.4 */

/* ============================================================
   V21.4.5 — Time Tracking activity types + Brief share dialog
   ============================================================ */

/* === TIME ENTRY: Activity chip grid === */
.te-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
@media (min-width: 540px) {
  .te-activity-grid { grid-template-columns: repeat(6, 1fr); }
}
.te-activity-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1.5px solid var(--c-line, #E5E2DA);
  background: var(--c-surface, #fff);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--c-text);
  transition: all 130ms ease;
}
.te-activity-chip:hover:not(.is-active) {
  background: rgba(248,149,29,0.06);
  border-color: rgba(248,149,29,0.4);
  transform: translateY(-1px);
}
.te-activity-chip.is-active {
  background: var(--brand-accent-soft, rgba(248,149,29,0.14));
  border-color: var(--brand-accent, #F8951D);
  color: var(--brand-accent-deep, #B26A12);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(248,149,29,0.18);
}
.te-act-icon {
  font-size: 22px;
  line-height: 1;
}
.te-act-label {
  font-size: 11px;
  text-align: center;
}

/* Time entry dialog row layout */
.time-entry-dialog.v2 {
  max-width: 540px !important;
}
.time-entry-dialog.v2 .ed-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* === BRIEF SHARE DIALOG === */
.brief-share-dialog {
  max-width: 720px !important;
  width: 100%;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}
/* V21.4.8 — Brief share dialog header rõ ràng */
.brief-share-dialog .bsh-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid var(--c-line, #E5E2DA) !important;
  background: var(--c-surface, #fff);
  flex-shrink: 0;
}
.brief-share-dialog .bsh-head-text {
  flex: 1;
  min-width: 0;
}
.brief-share-dialog .bsh-head h3 {
  margin: 0 0 4px !important;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
}
.brief-share-dialog .bsh-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-text-muted);
  line-height: 1.4;
}
.brief-share-dialog .bsh-head .close-btn {
  flex-shrink: 0;
}
/* Body padding ngang đồng đều */
.brief-share-dialog .bsh-loading,
.brief-share-dialog .bsh-error,
.brief-share-dialog .bsh-url-row,
.brief-share-dialog .bsh-actions,
.brief-share-dialog .bsh-grid,
.brief-share-dialog .bsh-info {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
.brief-share-dialog .bsh-loading {
  padding-top: 36px !important;
  padding-bottom: 24px !important;
  text-align: center;
}
.brief-share-dialog .bsh-error {
  margin: 16px 22px !important;
  padding: 14px 16px !important;
}
.brief-share-dialog .bsh-error-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.brief-share-dialog .bsh-fallback {
  margin: 12px 0 4px;
}
.bsh-loading {
  padding: 40px 24px;
  text-align: center;
}
.bsh-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--c-line);
  border-top-color: var(--brand-accent, #F8951D);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: bshSpin 0.9s linear infinite !important;
}
@keyframes bshSpin {
  to { transform: rotate(360deg); }
}
.bsh-error {
  margin: 16px 22px;
  padding: 14px 16px;
  background: rgba(230,57,70,0.06);
  border: 1px solid rgba(230,57,70,0.25);
  border-left: 3px solid #E63946;
  border-radius: 8px;
  color: var(--c-text);
}
.bsh-error strong {
  display: block;
  color: #E63946;
  margin-bottom: 4px;
}
.bsh-error p {
  margin: 0 0 8px;
  font-size: 12.5px;
}

.bsh-url-row {
  display: flex;
  gap: 8px;
  padding: 14px 22px 0;
}
.bsh-url-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1.5px solid var(--c-line);
  border-radius: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--c-text);
  outline: none;
}
.bsh-url-input:focus {
  border-color: var(--brand-accent);
}
.bsh-copy-btn {
  flex-shrink: 0;
  padding: 10px 18px !important;
  font-weight: 600;
}

.bsh-actions {
  display: flex;
  gap: 8px;
  padding: 12px 22px 0;
  flex-wrap: wrap;
}
.bsh-action-btn {
  flex: 1;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--c-text);
  transition: all 130ms ease;
}
.bsh-action-btn:hover {
  background: var(--brand-accent-soft, rgba(248,149,29,0.12));
  border-color: var(--brand-accent);
  color: var(--brand-accent-deep, #B26A12);
  transform: translateY(-1px);
}

.bsh-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 16px 22px 0;
}
@media (max-width: 640px) {
  .bsh-grid { grid-template-columns: 1fr; }
}
.bsh-qr,
.bsh-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bsh-qr-label,
.bsh-preview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}
.bsh-qr img {
  align-self: center;
}
.bsh-info {
  margin: 16px 22px 16px;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-radius: 8px;
  line-height: 1.5;
}

/* END V21.4.5 */
[data-theme="dark"] .inline-note-textarea { background: var(--c-surface-2); }

/* Action buttons */
.inw-actions {
  display: flex; align-items: center; gap: 6px;
}
.inw-spacer { flex: 1; }
.inw-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-text);
  cursor: pointer;
  transition: all .15s ease;
}
[data-theme="dark"] .inw-btn { background: var(--c-surface-2); }
.inw-btn:hover:not(:disabled):not(.is-disabled) {
  background: var(--c-surface-2);
  border-color: var(--c-accent);
  transform: translateY(-1px);
}
[data-theme="dark"] .inw-btn:hover:not(:disabled):not(.is-disabled) {
  background: var(--c-surface-3);
}
.inw-btn:disabled,
.inw-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inw-btn.voice {}
.inw-btn.voice.is-active {
  background: #E63946;
  color: #fff;
  border-color: #E63946;
  /* V16.9 — Bỏ pulse animation. Đỏ + label "Dừng" đã đủ noticeable */
}

.inw-btn.save {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  font-weight: 600;
}
.inw-btn.save:hover:not(:disabled) {
  background: #E07F0E;
  border-color: #E07F0E;
}
.inw-btn.save:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-dim);
  border-color: var(--c-line);
}

.inw-draft-hint {
  font-size: 10px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-top: 6px;
  font-style: italic;
}

/* Mobile */
@media (max-width: 768px) {
  .inw-trigger { gap: 8px; padding: 8px 12px; }
  .inw-icon { width: 24px; height: 24px; font-size: 14px; }
  .inw-shortcut { display: none; }
  .inline-note-widget.expanded { padding: 12px; }
  .inw-actions { flex-wrap: wrap; }
  .inw-spacer { display: none; }
  .inw-btn { font-size: 11px; padding: 5px 10px; flex: 1; justify-content: center; }
  .inw-btn.save { flex-basis: 100%; margin-top: 4px; }
}

/* ============================================================
   V15.9 — CUSTOMER PROFILE (MINI-CRM)
   ============================================================ */

/* Hero customer button */
.ph-customer-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  margin-left: 6px;
  transition: all .15s ease;
}
.ph-customer-btn:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: translateY(-1px);
}
.ph-customer-btn.has-related {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04));
  color: #7C3AED;
  border-color: #7C3AED;
}
.ph-customer-btn.has-related:hover {
  background: #7C3AED;
  color: #fff;
}
[data-theme="dark"] .ph-customer-btn { background: var(--c-surface-3); }
[data-theme="dark"] .ph-customer-btn.has-related {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0.08));
  color: #B197FC;
}

/* Sidebar related indicator */
.mini-tag.related {
  background: rgba(124, 58, 237, 0.12);
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.3);
  cursor: pointer;
}
.mini-tag.related:hover {
  background: #7C3AED;
  color: #fff;
}
[data-theme="dark"] .mini-tag.related { background: rgba(124, 58, 237, 0.22); color: #B197FC; }

/* Customer drawer overlay */
.customer-drawer-overlay {
  z-index: 8500;
}

.customer-drawer {
  background: var(--c-surface);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.customer-drawer.wide {
  width: 720px;
}
[data-theme="dark"] .customer-drawer { background: var(--c-surface-2); }

.cd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
  flex-wrap: wrap;
  gap: 8px;
}
[data-theme="dark"] .cd-head { background: var(--c-surface); }
.cd-head h2 {
  font-size: 15px; font-weight: 700;
  margin: 0;
}
.cd-head .muted.small { width: 100%; font-size: 11px; margin: 0; }

/* Customer header in detail view */
.cd-customer-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--c-divider);
}
.cd-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F8951D, #E07F0E);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(248, 149, 29, 0.3);
}
.cd-info { min-width: 0; flex: 1; }
.cd-info h2 {
  font-size: 16px; font-weight: 700;
  margin: 0 0 2px;
  color: var(--c-text);
}
.cd-company {
  font-size: 12px;
  color: var(--c-text-muted);
}
.cd-contact {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}

/* Aggregate tags */
.cd-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--c-divider);
}

/* Stats grid */
.cd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-divider);
}
.cd-stat {
  background: var(--c-surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
[data-theme="dark"] .cd-stat { background: var(--c-surface-3); }
.cd-stat.highlight {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.12), rgba(248, 149, 29, 0.04));
  border: 1px solid rgba(248, 149, 29, 0.3);
}
[data-theme="dark"] .cd-stat.highlight {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.22), rgba(248, 149, 29, 0.08));
}
.cd-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 2px;
}
.cd-stat-value {
  font-size: 16px; font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
}
.cd-stat.highlight .cd-stat-value { color: #F8951D; }
[data-theme="dark"] .cd-stat.highlight .cd-stat-value { color: #FFB74D; }

.cd-recency {
  padding: 8px 18px;
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-divider);
}
.cd-recency .muted { color: var(--c-text-dim); }
[data-theme="dark"] .cd-recency { background: var(--c-surface); }

/* Projects timeline */
.cd-projects {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}
.cd-projects h3 {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  margin: 0 0 10px;
}
.cd-project-list {
  display: flex; flex-direction: column; gap: 6px;
}
.cd-project {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
[data-theme="dark"] .cd-project { background: var(--c-surface-3); }
.cd-project:hover {
  border-color: var(--c-accent);
  transform: translateX(2px);
}
.cd-project.is-current {
  border-color: var(--c-accent);
  background: rgba(248, 149, 29, 0.05);
}
[data-theme="dark"] .cd-project.is-current {
  background: rgba(248, 149, 29, 0.12);
}
.cdp-name {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.cdp-current {
  font-size: 10px;
  color: #F8951D;
  font-weight: 700;
}
.cdp-meta {
  font-size: 11px;
  color: var(--c-text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}

/* Customer list grid (browse all) */
.cd-customer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 14px 18px;
  overflow-y: auto;
  max-height: calc(90vh - 100px);
}
.cd-customer-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s ease;
}
[data-theme="dark"] .cd-customer-card { background: var(--c-surface-3); }
.cd-customer-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ccc-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F8951D, #E07F0E);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.ccc-body { min-width: 0; }
.ccc-name {
  font-size: 13px; font-weight: 700;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccc-company {
  font-size: 11px;
  margin-bottom: 4px;
}
.ccc-stats {
  font-size: 11px;
  color: var(--c-text);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.ccc-stats .muted { color: var(--c-text-dim); }
.ccc-tags {
  display: flex; gap: 3px;
  margin-top: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .customer-drawer { width: calc(100vw - 16px); max-height: 95vh; }
  .customer-drawer.wide { width: calc(100vw - 16px); }
  .cd-customer-grid { grid-template-columns: 1fr; }
  .cd-stats { grid-template-columns: 1fr 1fr; }
  .cd-customer-head { padding: 14px; gap: 10px; }
  .cd-avatar { width: 44px; height: 44px; font-size: 18px; }
}

/* ============================================================
   V16.0 — SAVED SMART VIEWS
   ============================================================ */

.sidebar-smart-views {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--c-divider);
}
.smart-views-list {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 6px;
}
.smart-view-btn {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--c-text);
  transition: all .12s ease;
}
.smart-view-btn:hover {
  background: var(--c-surface-2);
  border-color: var(--c-line);
}
[data-theme="dark"] .smart-view-btn:hover { background: var(--c-surface-3); }
.smart-view-btn.is-active {
  border-width: 1px;
  font-weight: 600;
}
.sv-icon {
  font-size: 14px;
  text-align: center;
}
.sv-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-count {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--c-surface-3);
  color: var(--c-text-muted);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
[data-theme="dark"] .sv-count { background: var(--c-surface); }

.save-view-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: 1px dashed var(--c-line);
  border-radius: 6px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.save-view-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(248, 149, 29, 0.05);
}

/* ============================================================
   V16.1 — PROJECT REMINDERS + SCHEDULING
   ============================================================ */

/* Hero reminder button */
.ph-reminder-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  margin-left: 6px;
  transition: all .15s ease;
}
.ph-reminder-btn:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: translateY(-1px);
}
.ph-reminder-btn.has-reminders {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  color: #B97515;
  border-color: #F59E0B;
}
[data-theme="dark"] .ph-reminder-btn { background: var(--c-surface-3); }
[data-theme="dark"] .ph-reminder-btn.has-reminders {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08));
  color: #FFB74D;
}

/* Reminder dialog */
.reminder-dialog-overlay { z-index: 8400; }
.reminder-dialog {
  max-width: 540px;
  width: calc(100vw - 32px);
  border-radius: 14px;
  overflow: hidden;
}
/* V18.1.3 — Polish reminder dialog: clean label typography, proper rhythm */
.reminder-dialog .rd-body {
  padding: 18px 22px 4px 22px;
}
.reminder-dialog .rd-field {
  display: block;
  margin-bottom: 14px;
}
.reminder-dialog .rd-label {
  display: block;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.reminder-dialog .rd-current-due {
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: 11px;
  margin-left: 6px;
}
.reminder-dialog .rd-input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  font-style: normal;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  box-sizing: border-box;
}
.reminder-dialog .rd-input:focus {
  outline: 2px solid var(--brand-accent, #F8951D);
  outline-offset: -1px;
  border-color: var(--brand-accent, #F8951D);
}
.reminder-dialog .rd-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}
.reminder-dialog .rd-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
[data-theme="dark"] .reminder-dialog .rd-foot { background: var(--c-surface-3); }
.reminder-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -4px 0 14px 0;
}
.rp-btn {
  font-size: 11px;
  padding: 5px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.rp-btn:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
[data-theme="dark"] .rp-btn { background: var(--c-surface-3); }

/* Project reminders list (data tab) */
.project-reminders-section {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid #F59E0B;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .project-reminders-section { background: var(--c-surface-2); }

.project-reminders-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text);
  margin: 0;
}

.reminders-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px;
}
.reminder-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  transition: all .15s ease;
}
[data-theme="dark"] .reminder-row { background: var(--c-surface-3); }
.reminder-row.is-overdue {
  border-color: #E63946;
  background: rgba(230, 57, 70, 0.05);
}
[data-theme="dark"] .reminder-row.is-overdue { background: rgba(230, 57, 70, 0.12); }
.reminder-row.is-done { opacity: 0.55; }

.rm-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--c-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.reminder-row.is-done .rm-check {
  background: #16A34A;
  border-color: #16A34A;
  color: #fff;
}
.rm-check:hover { border-color: var(--c-accent); color: var(--c-accent); }

.rm-body { min-width: 0; }
.rm-title {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
}
.reminder-row.is-done .rm-title { text-decoration: line-through; }
.rm-note {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.rm-meta {
  font-size: 11px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.rm-meta .is-overdue { color: #E63946; font-weight: 700; }

.rm-actions {
  display: flex; gap: 4px;
}
.rm-action {
  font-size: 11px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 5px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all .15s ease;
}
.rm-action:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* Dashboard upcoming widget */
.dash-upcoming-reminders {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-left: 4px solid #F59E0B;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .dash-upcoming-reminders {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.05));
  border-color: rgba(245, 158, 11, 0.32);
}
.dash-upcoming-reminders h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: #B97515;
  margin: 0;
}
[data-theme="dark"] .dash-upcoming-reminders h2 { color: #FFB74D; }

.upcoming-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.upcoming-item {
  display: grid;
  grid-template-columns: 110px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s ease;
}
.upcoming-item:hover {
  border-color: #F59E0B;
  transform: translateX(2px);
}
.upcoming-item.is-overdue {
  border-color: #E63946;
  background: rgba(230, 57, 70, 0.04);
}
[data-theme="dark"] .upcoming-item { background: var(--c-surface-2); }
[data-theme="dark"] .upcoming-item.is-overdue { background: rgba(230, 57, 70, 0.12); }

.uc-time {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.upcoming-item.is-overdue .uc-time { color: #E63946; }
.uc-body { min-width: 0; }
.uc-title {
  font-size: 12px; font-weight: 600;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uc-client {
  font-size: 10px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.uc-done {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--c-text-muted);
  font-weight: 700;
}
.uc-done:hover { background: #16A34A; color: #fff; border-color: #16A34A; }

/* Mobile */
@media (max-width: 768px) {
  .upcoming-list { grid-template-columns: 1fr; }
  .upcoming-item { grid-template-columns: 90px 1fr 24px; padding: 8px 10px; }
  .reminder-row { grid-template-columns: 26px 1fr; gap: 8px; }
  .rm-actions { grid-column: 1 / -1; margin-top: 4px; justify-content: flex-end; }
  .reminder-presets { gap: 4px; }
  .rp-btn { font-size: 10px; padding: 4px 9px; }
}

/* ============================================================
   V16.2 — WORKFLOW AUTOMATION RULES
   ============================================================ */

.rules-list {
  display: flex; flex-direction: column; gap: 8px;
}
.rule-row {
  display: grid;
  grid-template-columns: 36px 1fr 50px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  border-left: 3px solid var(--c-line);
  transition: all .15s ease;
}
[data-theme="dark"] .rule-row { background: var(--c-surface); }
.rule-row.is-enabled {
  border-left-color: #16A34A;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.04), transparent 30%);
}
[data-theme="dark"] .rule-row.is-enabled {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), transparent 30%);
}

.rule-icon {
  font-size: 22px;
  text-align: center;
}
.rule-body { min-width: 0; }
.rule-name {
  font-size: 13px; font-weight: 700;
  color: var(--c-text);
  margin-bottom: 2px;
}
.rule-desc {
  font-size: 11px;
  color: var(--c-text-muted);
  line-height: 1.5;
}
.rule-stats {
  font-size: 10px;
  color: #16A34A;
  font-family: var(--font-mono);
  margin-top: 4px;
  font-weight: 600;
}

/* Toggle switch */
.rule-toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 44px;
  height: 24px;
}
.rule-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.rule-toggle-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--c-line);
  border-radius: 12px;
  transition: background .2s ease;
  cursor: pointer;
}
.rule-toggle input:checked + .rule-toggle-track {
  background: #16A34A;
}
.rule-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.rule-toggle input:checked + .rule-toggle-track .rule-toggle-knob {
  transform: translateX(20px);
}

/* Rule history */
.rules-history-details {
  margin-top: 14px;
}
.rules-history-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  user-select: none;
}
.rules-history-list {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.rule-event-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--c-surface);
  border-radius: 6px;
  font-size: 12px;
}
[data-theme="dark"] .rule-event-row { background: var(--c-surface-3); }
.rev-icon { font-size: 14px; text-align: center; }
.rev-action {
  font-weight: 600;
  color: var(--c-text);
}
.rev-meta {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 768px) {
  .rule-row { grid-template-columns: 28px 1fr 44px; gap: 10px; padding: 10px 12px; }
  .rule-icon { font-size: 18px; }
}

/* ============================================================
   V16.3 — TIME TRACKING + PROFITABILITY
   ============================================================ */

/* Timer hero button */
.ph-timer-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  margin-left: 6px;
  transition: all .15s ease;
}
.ph-timer-btn:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: translateY(-1px);
}
.ph-timer-btn.has-hours {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.04));
  color: #0891B2;
  border-color: #06B6D4;
}
[data-theme="dark"] .ph-timer-btn { background: var(--c-surface-3); }
[data-theme="dark"] .ph-timer-btn.has-hours {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(6, 182, 212, 0.08));
  color: #67E8F9;
}

/* Active timer bar */
.active-timer-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #fff;
  border-radius: 10px;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
  /* V16.9 — Bỏ pulse box-shadow tránh repaint mỗi frame */
}
.atb-icon { font-size: 18px; }
.atb-label {
  font-size: 12px; font-weight: 500;
  opacity: 0.9;
}
.atb-time {
  font-size: 16px; font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 1px;
}
.atb-task {
  font-size: 11px;
  font-style: italic;
  opacity: 0.9;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atb-stop {
  margin-left: auto;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.atb-stop:hover { background: #fff; color: #0891B2; }

/* Project time log section */
.project-timelog-section {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid #06B6D4;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .project-timelog-section { background: var(--c-surface-2); }
.project-timelog-section.is-empty { border-left-color: var(--c-divider); }

.project-timelog-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text);
  margin: 0;
}

.timelog-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px;
}
.timelog-row {
  display: grid;
  grid-template-columns: 90px 60px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-size: 12px;
}
[data-theme="dark"] .timelog-row { background: var(--c-surface-3); }
.timelog-row.is-non-billable { opacity: 0.65; }
.tl-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-muted);
}
.tl-hours {
  font-weight: 700;
  font-family: var(--font-mono);
  color: #06B6D4;
}
.tl-desc {
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-actions { display: flex; gap: 4px; align-items: center; }
.tl-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--c-surface-3);
  border-radius: 4px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.tl-action {
  font-size: 11px;
  padding: 3px 7px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
}
.tl-action:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.tl-action.danger:hover { background: #E63946; border-color: #E63946; }

/* Time entry dialog */
.time-entry-dialog-overlay { z-index: 8400; }
.time-entry-dialog {
  max-width: 480px;
  width: calc(100vw - 32px);
}

/* Dashboard profitability widget */
.dash-profitability {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(6, 182, 212, 0.02));
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-left: 4px solid #06B6D4;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
[data-theme="dark"] .dash-profitability {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.14), rgba(6, 182, 212, 0.05));
  border-color: rgba(6, 182, 212, 0.32);
}

.dash-profitability h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: #0891B2;
  margin: 0;
}
[data-theme="dark"] .dash-profitability h2 { color: #67E8F9; }

.profit-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 18px;
}
.po-stat {
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
[data-theme="dark"] .po-stat { background: var(--c-surface-2); }
.po-stat.highlight {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.04));
  border-color: #06B6D4;
}
[data-theme="dark"] .po-stat.highlight {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(6, 182, 212, 0.08));
}
.po-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.po-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
}
.po-stat.highlight .po-value { color: #0891B2; }
[data-theme="dark"] .po-stat.highlight .po-value { color: #67E8F9; }
.po-note {
  font-size: 10px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.profit-section { margin-top: 14px; }
.profit-section h3 {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  margin: 0 0 8px;
}
.profit-section.warn h3 { color: #C5333D; }

.profit-list { display: flex; flex-direction: column; gap: 4px; }
.profit-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s ease;
}
[data-theme="dark"] .profit-row { background: var(--c-surface-2); }
.profit-row:hover {
  border-color: #06B6D4;
  transform: translateX(2px);
}
.pr-name {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-rate {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #16A34A;
}
.pr-rate.warn { color: #E63946; }
.pr-meta {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}

/* Mobile */
@media (max-width: 768px) {
  .timelog-row { grid-template-columns: 80px 50px 1fr; gap: 6px; padding: 6px 10px; }
  .tl-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 4px; }
  .profit-overview { grid-template-columns: 1fr; }
  .profit-row { grid-template-columns: 1fr auto; gap: 8px; padding: 8px 12px; }
  .pr-meta { grid-column: 1 / -1; margin-top: 2px; }
  .active-timer-bar { padding: 8px 12px; }
  .atb-task { display: none; }
  .atb-time { font-size: 14px; }
}

/* ============================================================
   V16.4 — DAILY BRIEFING DIALOG
   ============================================================ */

.briefing-dialog-overlay { z-index: 8200; }

.briefing-dialog {
  background: var(--c-surface);
  width: 760px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  border-radius: 12px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
[data-theme="dark"] .briefing-dialog { background: var(--c-surface-2); }

.bf-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.06), rgba(248, 149, 29, 0.02));
}
[data-theme="dark"] .bf-head {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.14), rgba(248, 149, 29, 0.05));
}
.bf-head h2 {
  font-size: 18px; font-weight: 800;
  margin: 0 0 4px;
  color: var(--c-text);
  letter-spacing: 0.5px;
}
.bf-subtitle {
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 0;
  font-family: var(--font-mono);
}

.bf-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--c-divider);
  background: var(--c-surface-2);
}
[data-theme="dark"] .bf-actions { background: var(--c-surface-3); }

.bf-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 16px;
}

.bf-plain {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  background: var(--c-surface-2);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--c-text);
}
[data-theme="dark"] .bf-plain { background: var(--c-surface); }

/* Sections */
.bf-section {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-line);
  border-radius: 10px;
  padding: 14px 16px;
}
[data-theme="dark"] .bf-section { background: var(--c-surface-3); }
.bf-section.tone-danger { border-left-color: #E63946; }
.bf-section.tone-warn { border-left-color: #F8951D; }
.bf-section.tone-info { border-left-color: #2563EB; }
.bf-section.tone-success { border-left-color: #16A34A; }
.bf-section.tone-brand { border-left-color: #7C3AED; }

.bf-section h3 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-text);
  margin: 0 0 10px;
}
.bfs-icon { font-size: 16px; }
.bfs-count {
  font-size: 11px;
  color: var(--c-text-muted);
  font-weight: 500;
}

.bf-items {
  display: flex; flex-direction: column; gap: 4px;
}
.bf-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .12s ease;
}
[data-theme="dark"] .bf-item { background: var(--c-surface-2); }
.bf-item:hover {
  border-color: var(--c-accent);
  transform: translateX(2px);
}
.bfi-primary {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
}
.bfi-meta {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}

/* Pipeline snapshot */
.bf-pipeline {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.06), rgba(248, 149, 29, 0.02));
  border: 1px solid rgba(248, 149, 29, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
}
[data-theme="dark"] .bf-pipeline {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.14), rgba(248, 149, 29, 0.05));
}
.bf-pipeline h3 {
  font-size: 12px; font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-text);
  margin: 0 0 10px;
}
.bf-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bfp-card {
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
[data-theme="dark"] .bfp-card { background: var(--c-surface-2); }
.bfp-card.highlight {
  background: linear-gradient(135deg, #F8951D, #E07F0E);
  border-color: #F8951D;
  color: #fff;
}
.bfp-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  margin-bottom: 2px;
}
.bfp-card.highlight .bfp-label { color: rgba(255,255,255,0.85); }
.bfp-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-mono);
}
.bfp-card.highlight .bfp-value { color: #fff; }
.bfp-meta {
  font-size: 10px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.bfp-card.highlight .bfp-meta { color: rgba(255,255,255,0.85); }

/* Mobile */
@media (max-width: 768px) {
  .briefing-dialog { width: calc(100vw - 16px); max-height: 95vh; }
  .bf-head { padding: 14px 16px; }
  .bf-head h2 { font-size: 15px; }
  .bf-content { padding: 14px 16px; }
  .bf-plain { padding: 14px 16px; font-size: 11px; }
  .bf-pipeline-grid { grid-template-columns: 1fr; }
  .bf-actions { padding: 10px 14px; }
}

/* ============================================================
   V16.5 — MOBILE FAB + QUICK CAPTURE SPEED DIAL
   ============================================================ */

.sv-shell-fab {
  position: fixed;
  bottom: 0; right: 0;
  z-index: 7500;
  pointer-events: none;
}
.sv-shell-fab > * { pointer-events: auto; }

.sv-fab-wrap {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 7501;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: auto;
}

.sv-fab-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: -1;
  animation: fabBackdropFadeIn 0.2s ease;
}
[data-theme="dark"] .sv-fab-backdrop { background: rgba(0,0,0,0.6); }
@keyframes fabBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Main FAB button */
.sv-fab-main {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F8951D, #E07F0E);
  color: #fff;
  border: none;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(248, 149, 29, 0.45), 0 2px 8px rgba(0,0,0,0.1);
  transition: transform .25s ease, box-shadow .25s ease;
  font-family: inherit;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sv-fab-main:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(248, 149, 29, 0.55), 0 4px 12px rgba(0,0,0,0.15);
}
.sv-fab-main:active {
  transform: scale(0.95);
}
.sv-fab-main.is-expanded {
  transform: rotate(45deg);
}
.sv-fab-main.is-expanded:hover {
  transform: rotate(45deg) scale(1.06);
}

/* V16.9 — Active timer pulse — slower + subtle để không gây flicker */
.sv-fab-main.has-timer::before {
  content: "";
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid #06B6D4;
  animation: fabTimerPulse 3s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.6;
}
@keyframes fabTimerPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.2; }
}

/* Timer mini badge */
.sv-fab-timer-badge {
  position: absolute;
  bottom: 50px; right: 50px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #06B6D4;
  color: #fff;
  font-size: 14px;
  border: 2px solid #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  /* V16.9 — Bỏ pulse animation */
}
.sv-fab-timer-badge:hover { background: #0891B2; }

/* Speed dial actions */
.sv-fab-actions {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
  align-items: flex-end;
}
.sv-fab-action-row {
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  animation: fabActionFadeIn 0.25s ease forwards;
  animation-delay: inherit;
}
@keyframes fabActionFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.sv-fab-label {
  background: var(--c-text);
  color: var(--c-bg);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
[data-theme="dark"] .sv-fab-label {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.sv-fab-action {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: all 0.15s ease;
  font-family: inherit;
}
[data-theme="dark"] .sv-fab-action { background: var(--c-surface-2); }
.sv-fab-action:hover:not(.is-disabled) {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(248, 149, 29, 0.35);
}
.sv-fab-action.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--c-surface-2);
}

/* Mobile: hide on print */
@media print {
  .sv-fab-wrap { display: none !important; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sv-fab-wrap { bottom: 16px; right: 16px; gap: 8px; }
  .sv-fab-main { width: 52px; height: 52px; font-size: 22px; }
  .sv-fab-action { width: 40px; height: 40px; font-size: 16px; }
  .sv-fab-label { padding: 5px 10px; font-size: 11px; }
}

/* Hide FAB when toast container is on top (mobile collision) */
@media (max-width: 768px) {
  #sv-toast-container ~ .sv-fab-wrap {
    bottom: 90px;
  }
}

/* ============================================================
   V16.6 — HOTFIX: Z-INDEX HIERARCHY + LAYOUT CLEANUP
   ============================================================ */

/* Z-index layers — clearly stacked */
#sv-topbar { z-index: 50; }
.sv-bell-dropdown { z-index: 1000; }
#sv-toast-container { z-index: 9999; }
.sv-shell-fab { z-index: 7500; }
.sv-fab-wrap { z-index: 7501; }
.cmd-palette-overlay { z-index: 9000; }
.snippet-picker-overlay { z-index: 9000; }
.help-panel-overlay { z-index: 9100; }
.tag-picker-overlay { z-index: 9050; }
.customer-drawer-overlay { z-index: 8500; }
.reminder-dialog-overlay { z-index: 8400; }
.time-entry-dialog-overlay { z-index: 8400; }
.briefing-dialog-overlay { z-index: 8200; }
.share-dialog-overlay:not([class*="-overlay"]) { z-index: 200; }

/* FAB hide khi có dialog open (avoid double overlay) */
/* V21.2.3 — BUG FIX: thêm bcw-drawer-backdrop (Ghi cuộc gọi/Capture/Cập nhật nhanh)
   để FAB cam không đè foot drawer (3 nút Đóng/Xoá/Lưu).
   Pattern body:has() đảm bảo bất kỳ drawer/dialog mở nào đều hide FAB. */
body:has(.help-panel-overlay) .sv-fab-wrap,
body:has(.cmd-palette-overlay) .sv-fab-wrap,
body:has(.snippet-picker-overlay) .sv-fab-wrap,
body:has(.briefing-dialog-overlay) .sv-fab-wrap,
body:has(.customer-drawer-overlay) .sv-fab-wrap,
body:has(.reminder-dialog-overlay) .sv-fab-wrap,
body:has(.time-entry-dialog-overlay) .sv-fab-wrap,
body:has(.tag-picker-overlay) .sv-fab-wrap,
body:has(.bcw-drawer-backdrop) .sv-fab-wrap,
body:has(.compare-overlay) .sv-fab-wrap,
body:has(.share-dialog-overlay) .sv-fab-wrap {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease;
}

/* V21.2.3 — Hide #sv-flash khi drawer mở để không che foot */
body:has(.bcw-drawer-backdrop) #sv-flash {
  bottom: 90px !important; /* push lên trên foot */
}

/* V21.2.3 — Capture-foot defensive: padding-bottom safe-area cho iOS notch + force visible */
.bcw-drawer .capture-foot {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 10;
}
.bcw-drawer .capture-foot button { min-height: 44px; }

/* V21.2.4 — Reminder preset chip + tag picker visual feedback rõ rệt */
.reminder-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rp-btn {
  padding: 8px 14px; min-height: 36px;
  background: var(--c-surface-2, #F7F6F3);
  border: 1px solid var(--c-line, #E8E5DD);
  border-radius: 18px;
  font-size: 13px; font-weight: 500;
  color: var(--c-text, #1A1918);
  cursor: pointer; font-family: inherit;
  transition: all 100ms ease;
}
.rp-btn:hover:not(:disabled) {
  border-color: var(--brand-accent, #F8951D);
  background: rgba(248,149,29,0.08);
}
.rp-btn.is-selected {
  background: var(--brand-accent, #F8951D);
  color: #fff;
  border-color: var(--brand-accent-deep, #B26A12);
  box-shadow: 0 2px 8px rgba(248,149,29,0.35);
  font-weight: 600;
}
.rp-btn.is-selected::before { content: "✓ "; }
.rp-btn.is-disabled, .rp-btn:disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
  text-decoration: line-through;
}
.rd-datetime {
  font-family: inherit; font-size: 14px;
  padding: 10px 12px;
}
@media (max-width: 540px) {
  .reminder-presets { gap: 6px; }
  .rp-btn { padding: 8px 12px; font-size: 12px; min-height: 40px; }
}

/* V21.2.4 — Tag pick item visual feedback ngay khi click */
.tag-pick-item {
  transition: transform 100ms ease, border-color 100ms ease, background 100ms ease;
  cursor: pointer;
}
.tag-pick-item:active { transform: scale(0.97); }
.tag-pick-item.is-active {
  border-width: 2px !important;
  box-shadow: 0 2px 8px rgba(248,149,29,0.15);
}
.tag-pick-item.is-active .tpi-check {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--brand-accent, #F8951D);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  margin-left: auto;
}

/* V21.2.8 — REMOVE V21.2.5 anti-jump rule (nó là root cause flicker + 4 chip phình)
   Rule cũ set min-height:60vh CHO CẢ .pc-step-body (chip stepper body) →
   4 chip top phình thành 4 cột rỗng cao 60vh.
   Plus animation fade-in trên 4 step containers gây flicker khi chuyển bước.
   → XÓA HẲN, để layout tự nhiên co theo nội dung. */
.pc-step1, .pc-step2, .pc-step3, .pc-step4 {
  min-height: 0;
  animation: none;
}
/* Stepper indicator có visual feedback */
.pc-step-indicator {
  transition: all 180ms ease;
  cursor: pointer;
}
.pc-step-indicator:not(.disabled):hover {
  transform: translateY(-1px);
}
.pc-step-indicator.is-done {
  opacity: 0.85;
}
.pc-step-indicator.is-done .step-num {
  background: var(--c-success, #2D7A3E) !important;
  color: #fff;
}
.pc-step-indicator.is-done .step-num::before { content: "✓"; }
.pc-step-indicator.is-done .step-num > span { display: none; }

/* Templates grid: 2 cột mobile, 3 cột tablet, 4 cột desktop — phủ đủ 12+ templates */
.pc-templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) { .pc-templates-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1100px) { .pc-templates-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.pc-template-card { min-height: 110px; }

/* V21.2.5 — Banner "Đã apply template" rõ rệt khi template active */
.pc-template-applied-banner {
  margin: 12px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(248,149,29,0.12), rgba(248,149,29,0.06));
  border: 1px solid rgba(248,149,29,0.4);
  border-radius: 10px;
  font-size: 13px;
  color: var(--brand-accent-deep, #B26A12);
  display: flex; justify-content: space-between; align-items: center;
  animation: pcBannerSlide 280ms ease-out;
}
@keyframes pcBannerSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.pc-template-applied-banner strong { color: var(--brand-accent-deep, #B26A12); }
.pc-template-applied-banner button {
  font-size: 12px; padding: 6px 12px;
  background: transparent; border: 1px solid var(--brand-accent-deep, #B26A12);
  color: var(--brand-accent-deep, #B26A12); border-radius: 14px;
  cursor: pointer; font-family: inherit;
}
.pc-template-applied-banner button:hover { background: var(--brand-accent-deep, #B26A12); color: #fff; }

/* V16.6 — Skeleton loading visual fix */
.ws-loading {
  padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.ws-loading h2 {
  font-size: 16px; font-weight: 600;
  color: var(--c-text);
  margin: 0;
}
.ws-loading p {
  font-size: 12px; color: var(--c-text-muted);
  margin: 0;
}
.skeleton-blocks {
  width: 100%; max-width: 800px;
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 20px;
}
.skel {
  background: linear-gradient(90deg, var(--c-surface-2) 0%, var(--c-surface-3) 50%, var(--c-surface-2) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 2.4s ease-in-out infinite;
  border-radius: 10px;
}
.skel.skel-hero { height: 110px; }
.skel.skel-tabs { height: 40px; max-width: 480px; }
.skel.skel-content { height: 180px; }
.skel.skel-content.short { height: 80px; max-width: 70%; }
@keyframes skelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.loader-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--c-line);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spinnerRot 0.8s linear infinite;
}
@keyframes spinnerRot {
  to { transform: rotate(360deg); }
}

/* V16.6 — Cmd+K palette stable (anti-flicker) */
.cmd-palette {
  contain: layout style;  /* prevent reflow propagation */
}
.cmd-palette-input {
  /* Stable input — không bị mất focus khi DOM swap */
  will-change: contents;
}

/* V16.6 — Topmeta wrap responsive */
@media (max-width: 1100px) {
  .project-hero.v3 .ph-topmeta {
    gap: 6px;
  }
  .project-hero.v3 .ph-topmeta .ph-customer-btn,
  .project-hero.v3 .ph-topmeta .ph-reminder-btn,
  .project-hero.v3 .ph-topmeta .ph-timer-btn {
    padding: 3px 9px;
    font-size: 10px;
  }
}

/* ============================================================
   V16.7 — PERFORMANCE: Top progress bar + revalidate indicator
   ============================================================ */

/* V16.9 — Top progress bar — chỉ hiện khi class is-active, hidden bằng display none */
#sv-top-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 99999;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  display: none;  /* hidden by default, JS toggle */
}
#sv-top-progress.is-active,
#sv-top-progress.is-done {
  display: block;
}
#sv-top-progress::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent 0%, #F8951D 50%, transparent 100%);
  transform: translateX(-100%);
}
#sv-top-progress.is-active::before {
  animation: progressActive 1.4s ease-in-out infinite;
}
#sv-top-progress.is-done::before {
  animation: none;
  transform: translateX(330%);
  transition: transform 0.4s ease;
}
@keyframes progressActive {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* Revalidate indicator (subtle bottom-left toast) */
.sv-revalidate-indicator {
  position: fixed;
  bottom: 16px; left: 16px;
  z-index: 99998;
  background: var(--c-text);
  color: var(--c-bg);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
[data-theme="dark"] .sv-revalidate-indicator {
  background: var(--c-surface-3);
  color: var(--c-text);
}
.sv-revalidate-indicator.is-active {
  opacity: 0.92;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .sv-revalidate-indicator {
    bottom: auto;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
  }
  .sv-revalidate-indicator.is-active {
    transform: translateX(-50%) translateY(0);
  }
}

/* Optimistic detail flag — subtle visual hint */
.project-workspace[data-optimistic="1"] .ws-content {
  opacity: 0.96;
}

/* ============================================================
   V17.0 — PERFORMANCE DIAGNOSTIC PANEL
   ============================================================ */
.sys-perf-diag-block { }
.sys-perf-diag-block h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-accent);
}

.perf-heavy-sheets { margin-top: 14px; }
.perf-heavy-sheets h3,
.perf-recommendations h3 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  margin: 0 0 8px;
}

.perf-heavy-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.perf-heavy-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--c-line);
  font-size: 12px;
}
[data-theme="dark"] .perf-heavy-row { background: var(--c-surface-3); }
.perf-heavy-row.is-warn { border-left-color: #F8951D; }
.perf-heavy-row.is-critical { border-left-color: #E63946; background: rgba(230, 57, 70, 0.05); }
[data-theme="dark"] .perf-heavy-row.is-critical { background: rgba(230, 57, 70, 0.12); }
.phr-name { font-weight: 600; color: var(--c-text); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phr-bar-wrap {
  height: 8px; background: var(--c-surface); border-radius: 4px; overflow: hidden;
}
[data-theme="dark"] .phr-bar-wrap { background: var(--c-surface-2); }
.phr-bar { height: 100%; background: linear-gradient(90deg, #F8951D, #E63946); border-radius: 4px; transition: width 0.3s ease; }
.phr-count { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted); text-align: right; font-weight: 600; }

.perf-recommendations { margin-top: 14px; }
.perf-rec-list { display: flex; flex-direction: column; gap: 6px; }
.perf-rec-item {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  border-left: 3px solid;
}
.perf-rec-item.is-ok {
  background: rgba(22, 163, 74, 0.08);
  border-left-color: #16A34A;
  color: #16803F;
}
.perf-rec-item.is-warn {
  background: rgba(248, 149, 29, 0.08);
  border-left-color: #F8951D;
  color: var(--c-text);
}
.perf-rec-item.is-danger {
  background: rgba(230, 57, 70, 0.08);
  border-left-color: #E63946;
  color: var(--c-text);
  font-weight: 500;
}
[data-theme="dark"] .perf-rec-item.is-ok { background: rgba(22, 163, 74, 0.18); color: #4ADE80; }
[data-theme="dark"] .perf-rec-item.is-warn { background: rgba(248, 149, 29, 0.18); }
[data-theme="dark"] .perf-rec-item.is-danger { background: rgba(230, 57, 70, 0.22); }

.perf-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .perf-heavy-row { grid-template-columns: 1fr; gap: 4px; }
  .phr-name, .phr-count { font-size: 11px; }
}

/* ============================================================
   V17.1 — PROJECT COMPARISON TOOL
   ============================================================ */
.compare-overlay { z-index: 8800; }
.compare-drawer {
  background: var(--c-surface);
  width: 1100px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
[data-theme="dark"] .compare-drawer { background: var(--c-surface-2); }

.cmp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.02));
  flex: 0 0 auto;
}
[data-theme="dark"] .cmp-head { background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.05)); }
.cmp-head h2 { font-size: 17px; font-weight: 700; margin: 0 0 2px; color: var(--c-text); }

.cmp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  min-height: 0;
}

.cmp-row {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--c-divider);
  align-items: stretch;
}
.cmp-row:hover:not(.cmp-header-row) {
  background: var(--c-surface-2);
}
[data-theme="dark"] .cmp-row:hover:not(.cmp-header-row) { background: var(--c-surface-3); }

.cmp-row.has-diff {
  background: rgba(248, 149, 29, 0.04);
}
.cmp-row.has-diff .cmp-label {
  color: var(--c-accent);
  font-weight: 700;
}
[data-theme="dark"] .cmp-row.has-diff { background: rgba(248, 149, 29, 0.12); }

.cmp-row.cmp-header-row {
  position: sticky; top: 0;
  z-index: 2;
  background: var(--c-surface-2);
  border-bottom: 2px solid var(--c-accent);
}
[data-theme="dark"] .cmp-row.cmp-header-row { background: var(--c-surface-3); }

.cmp-label {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--c-surface-2);
  border-right: 1px solid var(--c-divider);
  display: flex; align-items: center;
}
[data-theme="dark"] .cmp-label { background: var(--c-surface-3); }

.cmp-cell {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--c-text);
  border-right: 1px solid var(--c-divider);
  display: flex; align-items: center;
  word-break: break-word;
}
.cmp-cell:last-child { border-right: none; }

.cmp-cell.tone-success { color: #16A34A; font-weight: 600; }
.cmp-cell.tone-danger { color: #C5333D; font-weight: 600; }
.cmp-cell.tone-warn { color: #B97515; font-weight: 600; }
.cmp-cell.tone-info { color: #2563EB; }
.cmp-cell.tone-brand { color: var(--c-accent); font-weight: 600; }
.cmp-cell.tone-neutral { color: var(--c-text-muted); }

[data-theme="dark"] .cmp-cell.tone-success { color: #4ADE80; }
[data-theme="dark"] .cmp-cell.tone-danger { color: #FF8085; }
[data-theme="dark"] .cmp-cell.tone-warn { color: #FFB74D; }
[data-theme="dark"] .cmp-cell.tone-info { color: #60A5FA; }

.cmp-project-head {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  font-family: inherit;
  position: relative;
  border-right: 1px solid var(--c-divider);
}
.cmp-project-head:last-child { border-right: none; }
.cmp-project-head:hover {
  background: rgba(248, 149, 29, 0.08);
}

.cph-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.cph-id { font-size: 10px; margin-top: 2px; }
.cph-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  color: var(--c-text-muted);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.cph-remove:hover { background: #E63946; color: #fff; border-color: #E63946; }

.cmp-foot {
  display: flex; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--c-divider);
  background: var(--c-surface-2);
  flex: 0 0 auto;
}
[data-theme="dark"] .cmp-foot { background: var(--c-surface); }

@media (max-width: 768px) {
  .compare-drawer { width: calc(100vw - 16px); }
  .cmp-label { font-size: 10px; padding: 8px 10px; }
  .cmp-cell { font-size: 11px; padding: 8px 10px; }
  .cph-name { font-size: 12px; }
}

/* ============================================================
   V17.2 — ARCHIVE SYSTEM
   ============================================================ */
.ph-archive-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  margin-left: 6px;
  transition: all .15s ease;
}
.ph-archive-btn:hover {
  background: #475569;
  color: #fff;
  border-color: #475569;
}

.sys-archive-block { }
.sys-archive-block h2 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.archive-stats { display: flex; gap: 12px; margin-top: 10px; }
.as-stat {
  background: var(--c-surface-2);
  padding: 10px 14px;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .as-stat { background: var(--c-surface-3); }
.as-stat strong { font-size: 18px; color: var(--c-text); font-family: var(--font-mono); }
.as-stat span { font-size: 11px; color: var(--c-text-muted); }

.auto-archive-panel {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-radius: 10px;
  border-left: 3px solid var(--c-accent);
}
[data-theme="dark"] .auto-archive-panel { background: var(--c-surface-3); }
.auto-archive-panel h3 {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text);
  margin: 0 0 6px;
}
.auto-archive-config {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.auto-archive-preview {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--c-surface);
  border-radius: 6px;
}
[data-theme="dark"] .auto-archive-preview { background: var(--c-surface-2); }
.auto-archive-list {
  margin: 8px 0 0; padding-left: 20px;
  font-size: 12px;
  font-family: var(--font-mono);
}
.auto-archive-list li { padding: 3px 0; }

.archived-list-wrap { margin-top: 14px; }
.archived-list-wrap h3 {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  margin: 0 0 8px;
}
.archived-list { display: flex; flex-direction: column; gap: 6px; }
.archived-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: 6px;
}
[data-theme="dark"] .archived-row { background: var(--c-surface-3); }
.ar-info { flex: 1; min-width: 0; }
.ar-info strong { font-size: 13px; color: var(--c-text); }
.ar-meta { margin-top: 2px; font-family: var(--font-mono); }
.ar-reason { margin-top: 2px; font-style: italic; }

@media (max-width: 768px) {
  .auto-archive-config { flex-direction: column; align-items: stretch; }
  .archived-row { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* ============================================================
   V18.2.0 — UNIFIED MODAL FOUNDATION
   Mục đích: chuẩn hoá mọi overlay/modal/drawer/dialog về cùng
   1 quy tắc — sticky foot, z-index nhất quán, mobile full-screen,
   dark mode đồng bộ, backdrop blur. Không phá pattern cũ — chỉ
   thêm rules áp lên top.
   Bug V18.1.3 (Quick drawer thiếu nút Lưu, Reminder dialog xấu)
   sẽ không tái phát ở modal mới nhờ pattern này.
   ============================================================ */

:root {
  /* Z-index scale chuẩn — mọi overlay tuân thủ */
  --z-modal-base: 8000;
  --z-modal-dialog: 8100;
  --z-modal-popup: 8200;
  --z-modal-tooltip: 8400;
  --z-modal-cmd: 9000;
  --z-modal-toast: 9999;

  /* Modal sizing tokens */
  --m-radius: 14px;
  --m-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
  --m-shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4);
  --m-head-pad: 18px 22px;
  --m-body-pad: 18px 22px;
  --m-foot-pad: 14px 22px;
  --m-max-height: 90vh;
  --m-max-height-mobile: 100vh;
  --m-min-width: 320px;
  --m-backdrop-blur: 4px;
}

/* ---------- Layer 1: tất cả overlay backdrop tuân chung quy tắc ---------- */
.share-dialog-overlay,
.bcw-modal-overlay,
.bcw-drawer-backdrop,
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 25, 0.5);
  -webkit-backdrop-filter: blur(var(--m-backdrop-blur));
  backdrop-filter: blur(var(--m-backdrop-blur));
  padding: 16px;
  box-sizing: border-box;
  animation: svModalFadeIn 0.16s ease-out;
}
.bcw-drawer-backdrop {
  /* Drawer dán phải, không center */
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

[data-theme="dark"] .share-dialog-overlay,
[data-theme="dark"] .bcw-modal-overlay,
[data-theme="dark"] .bcw-drawer-backdrop,
[data-theme="dark"] .cmd-palette-overlay {
  background: rgba(0, 0, 0, 0.65);
}

@keyframes svModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Layer 2: z-index nhất quán theo loại ---------- */
/* Base modals (capture/workshop/precall/proposal/report/email/snippet/customer/compare) */
.share-dialog-overlay { z-index: var(--z-modal-base); }
.bcw-modal-overlay { z-index: var(--z-modal-base); }
.bcw-drawer-backdrop { z-index: var(--z-modal-base); }

/* Dialogs (reminder/time-entry/briefing/tag/help/whatsnew) */
.reminder-dialog-overlay { z-index: var(--z-modal-dialog); }
.time-entry-dialog-overlay { z-index: var(--z-modal-dialog); }
.briefing-dialog-overlay { z-index: var(--z-modal-dialog); }
.tag-picker-overlay { z-index: var(--z-modal-dialog); }
.help-panel-overlay { z-index: var(--z-modal-dialog); }
.snippet-picker-overlay { z-index: var(--z-modal-dialog); }
.customer-drawer-overlay { z-index: var(--z-modal-dialog); }
.email-draft-overlay { z-index: var(--z-modal-dialog); }
.compare-overlay { z-index: var(--z-modal-dialog); }

/* Cmd+K palette (cao nhất ngoại trừ toast) */
.cmd-palette-overlay { z-index: var(--z-modal-cmd); }

/* Toast vẫn cao nhất — không động */
#sv-toast-container { z-index: var(--z-modal-toast); }

/* ---------- Layer 3: tất cả modal container tuân chung sizing ---------- */
.share-dialog,
.bcw-modal,
.briefing-dialog,
.customer-drawer,
.compare-drawer,
.reminder-dialog,
.time-entry-dialog,
.tag-picker-dialog,
.snippet-picker-dialog,
.help-panel-dialog,
.email-draft-dialog {
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  max-height: var(--m-max-height);
  min-width: var(--m-min-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: svModalSlideUp 0.2s ease-out;
}

[data-theme="dark"] .share-dialog,
[data-theme="dark"] .bcw-modal,
[data-theme="dark"] .briefing-dialog,
[data-theme="dark"] .customer-drawer,
[data-theme="dark"] .compare-drawer,
[data-theme="dark"] .reminder-dialog,
[data-theme="dark"] .time-entry-dialog,
[data-theme="dark"] .tag-picker-dialog,
[data-theme="dark"] .snippet-picker-dialog,
[data-theme="dark"] .help-panel-dialog,
[data-theme="dark"] .email-draft-dialog {
  background: var(--c-surface);
  box-shadow: var(--m-shadow-dark);
}

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

/* ---------- Layer 4: foot sticky bắt buộc cho mọi pattern ---------- */
.share-dialog .purge-actions-row,
.share-dialog .sd-foot,
.bcw-modal .modal-foot,
.bcw-modal .composer-actions,
.briefing-dialog .briefing-foot,
.customer-drawer .cd-foot,
.compare-drawer .cmp-foot,
.reminder-dialog .rd-foot,
.time-entry-dialog .te-foot,
.bcw-drawer .capture-foot,
.snippet-picker-dialog .sp-foot,
.help-panel-dialog .help-foot {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line);
  padding: var(--m-foot-pad);
  z-index: 5;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .share-dialog .purge-actions-row,
[data-theme="dark"] .share-dialog .sd-foot,
[data-theme="dark"] .bcw-modal .modal-foot,
[data-theme="dark"] .bcw-modal .composer-actions,
[data-theme="dark"] .briefing-dialog .briefing-foot,
[data-theme="dark"] .customer-drawer .cd-foot,
[data-theme="dark"] .compare-drawer .cmp-foot,
[data-theme="dark"] .reminder-dialog .rd-foot,
[data-theme="dark"] .time-entry-dialog .te-foot,
[data-theme="dark"] .bcw-drawer .capture-foot,
[data-theme="dark"] .snippet-picker-dialog .sp-foot,
[data-theme="dark"] .help-panel-dialog .help-foot {
  background: var(--c-surface-3);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

/* ---------- Layer 5: head có border-bottom + padding chuẩn ---------- */
.share-dialog .sd-head,
.bcw-modal .modal-head,
.bcw-drawer .drawer-head {
  flex-shrink: 0;
  border-bottom: 1px solid var(--c-line);
  padding: var(--m-head-pad);
  background: var(--c-surface);
  z-index: 4;
}

/* ---------- Layer 6: body cuộn được, chiếm phần giữa ---------- */
/* Chỉ áp lên class body explicit — tránh ảnh hưởng các modal cũ
   có cấu trúc nhiều cấp div phức tạp. Modal mới phải dùng 1 trong
   các class body dưới để được sticky foot/scrollable body chuẩn. */
.bcw-modal .modal-body,
.bcw-modal .composer-body,
.bcw-modal .precall-body,
.bcw-modal .workshop-body,
.bcw-modal .report-body,
.briefing-dialog .briefing-body,
.customer-drawer .cd-body,
.compare-drawer .cmp-body,
.bcw-drawer .capture-body,
.snippet-picker-dialog .sp-body,
.help-panel-dialog .help-panel-body,
.reminder-dialog .rd-body,
.time-entry-dialog .te-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Layer 7: close button ✕ luôn nhất quán ---------- */
.share-dialog .close-btn,
.bcw-modal .close-btn,
.bcw-drawer .close-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 0.12s ease;
}
.share-dialog .close-btn:hover,
.bcw-modal .close-btn:hover,
.bcw-drawer .close-btn:hover {
  background: var(--c-surface-2);
}
[data-theme="dark"] .share-dialog .close-btn:hover,
[data-theme="dark"] .bcw-modal .close-btn:hover,
[data-theme="dark"] .bcw-drawer .close-btn:hover {
  background: var(--c-surface-3);
}

/* ---------- Layer 8: mobile responsive — full-screen overlay ---------- */
@media (max-width: 640px) {
  .share-dialog-overlay,
  .bcw-modal-overlay,
  .cmd-palette-overlay {
    padding: 0;
    align-items: stretch;
  }
  .share-dialog,
  .bcw-modal,
  .briefing-dialog,
  .customer-drawer,
  .compare-drawer,
  .reminder-dialog,
  .time-entry-dialog,
  .tag-picker-dialog,
  .snippet-picker-dialog,
  .help-panel-dialog,
  .email-draft-dialog {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    border-radius: 0;
    min-width: 0;
  }
  .bcw-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ---------- Layer 9: scroll lock body khi modal mở ---------- */
body:has(.share-dialog-overlay),
body:has(.bcw-modal-overlay),
body:has(.bcw-drawer-backdrop),
body:has(.cmd-palette-overlay) {
  overflow: hidden;
  /* Giữ vị trí cuộn — không nhảy lên đầu */
}

/* ---------- Layer 10: focus trap visual — outline rõ trong modal ---------- */
.share-dialog *:focus-visible,
.bcw-modal *:focus-visible,
.bcw-drawer *:focus-visible {
  outline: 2px solid var(--brand-accent, #F8951D);
  outline-offset: 2px;
}

/* ---------- Layer 11: FAB ẩn khi BẤT KỲ modal nào mở ---------- */
body:has(.share-dialog-overlay) .sv-fab-wrap,
body:has(.bcw-modal-overlay) .sv-fab-wrap,
body:has(.bcw-drawer-backdrop) .sv-fab-wrap,
body:has(.cmd-palette-overlay) .sv-fab-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* END V18.2.0 UNIFIED MODAL FOUNDATION */

/* ============================================================
   V18.2.1 — HERO CONSOLIDATION
   Restructure hero theo 3 tier rõ ràng. Class .v4 ensures các
   rule mới chỉ áp khi V18.2.1 active — backward compat 100%.
   ============================================================ */

/* ─── Tier 0 — Identity row (ID + warning + health) ─── */
.project-hero.v4 .ph-tier0 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0;
}
.project-hero.v4 .ph-tier0-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.project-hero.v4 .ph-tier0-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.project-hero.v4 .ph-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  background: var(--c-surface-2);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}
[data-theme="dark"] .project-hero.v4 .ph-id { background: var(--c-surface-3); }

/* ─── Tier 1 — Main row (gauge + info + tags) ─── */
.project-hero.v4 .ph-mainrow {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.project-hero.v4 .ph-gauge-wrap {
  flex-shrink: 0;
}
.project-hero.v4 .ph-info {
  flex: 1;
  min-width: 0;
}
.project-hero.v4 .ph-company {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--c-text);
}
.project-hero.v4 .ph-sub {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.project-hero.v4 .ph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ─── Tier 2 — Primary actions (4 button đậm, dùng thường xuyên) ─── */
.project-hero.v4 .ph-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.project-hero.v4 .ph-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
  white-space: nowrap;
}
.project-hero.v4 .ph-primary-btn:hover {
  background: var(--c-surface-2);
  border-color: var(--c-text-muted);
}
[data-theme="dark"] .project-hero.v4 .ph-primary-btn:hover {
  background: var(--c-surface-3);
}
.project-hero.v4 .ph-pb-icon {
  font-size: 14px;
  line-height: 1;
}

/* CTA Tạo Proposal — nổi bật cam */
.project-hero.v4 .ph-primary-cta {
  background: var(--brand-accent, #F8951D);
  color: #fff;
  border-color: var(--brand-accent, #F8951D);
  font-weight: 600;
}
.project-hero.v4 .ph-primary-cta:hover {
  background: var(--brand-accent-deep, #C8741A);
  border-color: var(--brand-accent-deep, #C8741A);
}
.project-hero.v4 .ph-primary-cta.is-warn {
  background: #B8762A;
  border-color: #B8762A;
}
.project-hero.v4 .ph-primary-cta.is-warn::before {
  content: "⚠";
  margin-right: 4px;
}

/* ─── Tier 3 — Tools row (toolbar gọn, ngang hàng nhỏ) ─── */
.project-hero.v4 .ph-tools-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  margin-bottom: 8px;
  border-top: 1px dashed var(--c-line);
}
.project-hero.v4 .ph-tools-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  flex-shrink: 0;
}
.project-hero.v4 .ph-tools-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
/* Force tools buttons cùng style nhỏ gọn */
.project-hero.v4 .ph-tools-group > button,
.project-hero.v4 .ph-tools-group > a,
.project-hero.v4 .ph-tools-group > span > button {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-surface-2);
  border: 1px solid transparent;
  color: var(--c-text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.project-hero.v4 .ph-tools-group > button:hover,
.project-hero.v4 .ph-tools-group > a:hover {
  background: var(--c-surface-3);
  border-color: var(--c-line);
  color: var(--c-text);
}
[data-theme="dark"] .project-hero.v4 .ph-tools-group > button {
  background: var(--c-surface-3);
}
[data-theme="dark"] .project-hero.v4 .ph-tools-group > button:hover {
  background: var(--c-surface-2);
}

/* Mobile responsive — Tier 2 grid 2 cột, Tier 3 wrap */
@media (max-width: 640px) {
  .project-hero.v4 .ph-tier0 {
    flex-direction: column;
    align-items: stretch;
  }
  .project-hero.v4 .ph-tier0-right {
    align-self: flex-end;
  }
  .project-hero.v4 .ph-mainrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .project-hero.v4 .ph-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .project-hero.v4 .ph-primary-cta {
    grid-column: 1 / -1;
  }
  .project-hero.v4 .ph-primary-btn {
    padding: 10px 8px;
    font-size: 12px;
    justify-content: center;
  }
  .project-hero.v4 .ph-tools-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .project-hero.v4 .ph-tools-label {
    font-size: 9px;
  }
}

/* END V18.2.1 HERO CONSOLIDATION */

/* ============================================================
   V18.2.2 — HOTFIX: Capture-foot save button visibility
   Bug: filled-count chiếm width rộng → buttons wrap xuống dòng 2
   → bị FAB cam che. Fix: column layout, buttons trên hàng đầu,
   filled-count xuống làm subtext nhỏ.
   ============================================================ */

.bcw-drawer .capture-foot.capture-foot-v2,
.bcw-modal .capture-foot.capture-foot-v2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 22px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
  z-index: 5;
}
[data-theme="dark"] .bcw-drawer .capture-foot.capture-foot-v2,
[data-theme="dark"] .bcw-modal .capture-foot.capture-foot-v2 {
  background: var(--c-surface);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3);
}

/* Buttons row — 3 nút ngang hàng, save-btn flex-grow lấp chỗ trống */
.capture-foot-v2 .capture-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
}
.capture-foot-v2 .capture-buttons > .ghost-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 12px;
}
.capture-foot-v2 .capture-buttons > .save-btn {
  flex: 1;
  min-width: 140px;
  font-weight: 600;
  white-space: nowrap;
}

/* Filled count subtext — nhỏ gọn, không ăn chỗ buttons */
.capture-foot-v2 .cf-subtext {
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 10px;
  color: var(--c-text-dim);
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 0;
}
.capture-foot-v2 .cf-subtext .cf-autosave-hint {
  color: var(--c-success, #2F7A4F);
  margin-left: 2px;
}

/* Mobile narrow: buttons có thể wrap nhưng vẫn nhìn rõ */
@media (max-width: 480px) {
  .capture-foot-v2 .capture-buttons {
    flex-wrap: wrap;
  }
  .capture-foot-v2 .capture-buttons > .ghost-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    text-align: center;
  }
  .capture-foot-v2 .capture-buttons > .save-btn {
    flex: 1 1 100%;
    min-width: 0;
    order: -1;
    padding: 12px 16px;
  }
}

/* ─── Layer 11 enhancement — ẩn FAB triệt để khi modal mở ─── */
/* V18.2.0 chỉ ẩn .sv-fab-wrap. Hotfix V18.2.2: ẩn cả wrapper ngoài
   .sv-shell-fab để đảm bảo không còn FAB nào nổi trên modal. */
body:has(.share-dialog-overlay) .sv-shell-fab,
body:has(.bcw-modal-overlay) .sv-shell-fab,
body:has(.bcw-drawer-backdrop) .sv-shell-fab,
body:has(.cmd-palette-overlay) .sv-shell-fab {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

/* Fallback cho browser KHÔNG support :has() (Firefox cũ < 121).
   Khi state.bcwModal hoặc reminderDialog open, body sẽ có class
   sv-modal-open (set từ JS) — CSS này ẩn FAB theo class luôn. */
body.sv-modal-open .sv-shell-fab,
body.sv-modal-open .sv-fab-wrap {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* END V18.2.2 HOTFIX */

/* ============================================================
   V18.4 — EMPTY STATES + LOADING POLISH + DENSITY TOGGLE
   3 phần:
     1. Density variants — compact / comfortable / spacious
     2. Unified empty state component .sv-empty-state
     3. Loading skeleton .sv-skeleton
   ============================================================ */

/* ─── 1. Density variants — override khi html[data-density=...] ─── */
/* Comfortable = default; Compact = đặc hơn; Spacious = thoáng hơn */
html[data-density="compact"] {
  --ds-density-xs: 3px;
  --ds-density-sm: 4px;
  --ds-density-md: 8px;
  --ds-density-lg: 12px;
  --ds-density-xl: 16px;
  --m-head-pad: 14px 18px;
  --m-body-pad: 14px 18px;
  --m-foot-pad: 10px 18px;
  font-size: 13px;
}
html[data-density="compact"] .sb-item,
html[data-density="compact"] .sc-card {
  padding: 8px 10px;
}
html[data-density="compact"] .ph-primary-btn {
  padding: 7px 11px;
  font-size: 12px;
}
html[data-density="compact"] .project-hero.v4 .ph-mainrow { gap: 14px; margin-bottom: 12px; }
html[data-density="compact"] .project-hero.v4 .ph-tier0 { margin-bottom: 8px; }
html[data-density="compact"] .project-hero.v4 .ph-primary-actions { padding-top: 8px; margin-bottom: 8px; }
html[data-density="compact"] .project-hero.v4 .ph-tools-row { padding-top: 8px; }
html[data-density="compact"] .ph-company { font-size: 19px; }

html[data-density="spacious"] {
  --ds-density-xs: 6px;
  --ds-density-sm: 10px;
  --ds-density-md: 14px;
  --ds-density-lg: 22px;
  --ds-density-xl: 32px;
  --m-head-pad: 22px 28px;
  --m-body-pad: 22px 28px;
  --m-foot-pad: 18px 28px;
  font-size: 15px;
}
html[data-density="spacious"] .sb-item,
html[data-density="spacious"] .sc-card {
  padding: 14px 18px;
}
html[data-density="spacious"] .ph-primary-btn {
  padding: 12px 18px;
  font-size: 14px;
}
html[data-density="spacious"] .project-hero.v4 .ph-mainrow { gap: 24px; margin-bottom: 22px; }
html[data-density="spacious"] .project-hero.v4 .ph-tier0 { margin-bottom: 16px; }
html[data-density="spacious"] .project-hero.v4 .ph-primary-actions { padding-top: 18px; margin-bottom: 16px; }
html[data-density="spacious"] .project-hero.v4 .ph-tools-row { padding-top: 14px; }
html[data-density="spacious"] .ph-company { font-size: 26px; }

/* ─── 2. Empty state component thống nhất ─── */
.sv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px;
  color: var(--c-text-muted);
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line);
}
[data-theme="dark"] .sv-empty-state { background: var(--c-surface-3); }
.sv-empty-state.is-compact { padding: 18px 16px; }
.sv-empty-state .sves-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.7;
  margin-bottom: 4px;
}
.sv-empty-state.is-compact .sves-icon { font-size: 20px; }
.sv-empty-state .sves-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.sv-empty-state.is-compact .sves-title { font-size: 13px; }
.sv-empty-state .sves-desc {
  font-size: 12px;
  margin: 0;
  line-height: 1.55;
  color: var(--c-text-muted);
}
.sv-empty-state .sves-action {
  margin-top: 8px;
  font-size: 12px;
}
/* Tone variants */
.sv-empty-state.success { background: rgba(47, 122, 79, 0.06); border-color: rgba(47, 122, 79, 0.3); }
.sv-empty-state.warn { background: rgba(248, 149, 29, 0.06); border-color: rgba(248, 149, 29, 0.3); }
.sv-empty-state.danger { background: rgba(230, 57, 70, 0.06); border-color: rgba(230, 57, 70, 0.3); }
[data-theme="dark"] .sv-empty-state.success { background: rgba(47, 122, 79, 0.14); }
[data-theme="dark"] .sv-empty-state.warn { background: rgba(248, 149, 29, 0.14); }
[data-theme="dark"] .sv-empty-state.danger { background: rgba(230, 57, 70, 0.14); }

/* ─── 3. Loading skeleton ─── */
.sv-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}
.sv-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-radius: 8px;
}
[data-theme="dark"] .sv-skeleton-row { background: var(--c-surface-3); }
.sv-skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--c-line) 0%, var(--c-surface) 50%, var(--c-line) 100%);
  background-size: 200% 100%;
  animation: svSkelShimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .sv-skeleton-line {
  background: linear-gradient(90deg, var(--c-surface-2) 0%, var(--c-surface-3) 50%, var(--c-surface-2) 100%);
  background-size: 200% 100%;
}
.sv-skeleton-line.w-40 { width: 40%; }
.sv-skeleton-line.w-70 { width: 70%; }
.sv-skeleton-line.w-90 { width: 90%; }
@keyframes svSkelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Density picker UI (cho System tab) ─── */
.sv-density-picker {
  display: inline-flex;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
[data-theme="dark"] .sv-density-picker { background: var(--c-surface-3); }
.sv-density-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.sv-density-btn:hover { color: var(--c-text); }
.sv-density-btn.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .sv-density-btn.is-active { background: var(--c-surface-2); }

/* END V18.4 */

/* ============================================================
   V19.0.1 — HELP CENTER (large dialog với 6 tabs + search)
   Mở qua icon ❓ topbar — chiếm 90vw × 90vh để đủ chỗ cho
   tài liệu chi tiết (6 luồng + 30 từ điển + 15 FAQ + 10 tour).
   ============================================================ */

.help-center-overlay { z-index: 9100; }
.help-center-dialog {
  width: min(1100px, 92vw);
  max-width: 92vw;
  height: min(840px, 90vh);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* ─── Header ─── */
.help-center-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
}
.hc-head-left { flex: 1; min-width: 0; }
.hc-head-left h3 { margin: 0 0 4px; font-size: 18px; }
.hc-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hc-search-input {
  width: 280px;
  max-width: 30vw;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color 0.12s ease;
}
.hc-search-input:focus {
  outline: 2px solid var(--brand-accent, #F8951D);
  outline-offset: -1px;
  border-color: var(--brand-accent, #F8951D);
}

/* ─── Tabs ─── */
.hc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 18px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
}
[data-theme="dark"] .hc-tabs { background: var(--c-surface-3); }
.hc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.hc-tab:hover {
  background: var(--c-surface);
  color: var(--c-text);
}
[data-theme="dark"] .hc-tab:hover { background: var(--c-surface-2); }
.hc-tab.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 600;
  border-color: var(--c-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .hc-tab.is-active { background: var(--c-surface-2); }
.hc-tab-icon { font-size: 14px; line-height: 1; }

/* ─── Body container ─── */
.hc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 !important;
}

/* ─── Tab Flows: 2-column layout ─── */
.hc-flows-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  min-height: 500px;
}
.hc-flows-list {
  border-right: 1px solid var(--c-line);
  overflow-y: auto;
  padding: 12px 8px;
  background: var(--c-surface-2);
}
[data-theme="dark"] .hc-flows-list { background: var(--c-surface-3); }
.hc-flow-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.12s ease;
}
.hc-flow-item:hover { background: var(--c-surface); }
[data-theme="dark"] .hc-flow-item:hover { background: var(--c-surface-2); }
.hc-flow-item.is-active {
  background: var(--c-surface);
  border-color: var(--brand-accent, #F8951D);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .hc-flow-item.is-active { background: var(--c-surface-2); }
.hcf-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.hcf-meta { flex: 1; min-width: 0; }
.hcf-title { font-size: 13px; font-weight: 600; color: var(--c-text); line-height: 1.3; margin-bottom: 2px; }
.hcf-summary { font-size: 11px; line-height: 1.4; }

.hc-flow-content {
  overflow-y: auto;
  padding: 22px 28px;
}
.hcfc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 18px;
}
.hcfc-icon { font-size: 32px; line-height: 1; }
.hcfc-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.hcfc-section { margin-bottom: 18px; }
.hcfc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.hcfc-section p { margin: 0; line-height: 1.65; font-size: 13px; }
.hcfc-steps {
  margin: 0;
  padding-left: 22px;
  line-height: 1.7;
  font-size: 13px;
}
.hcfc-steps li { margin-bottom: 6px; }
.hcfc-tips ul {
  margin: 0;
  padding-left: 22px;
  line-height: 1.6;
  font-size: 13px;
}
.hcfc-tips ul li { margin-bottom: 4px; }
.hcfc-value {
  background: rgba(47, 122, 79, 0.06);
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 3px solid var(--c-success, #2F7A4F);
}
[data-theme="dark"] .hcfc-value { background: rgba(47, 122, 79, 0.12); }
.hcfc-tips {
  background: rgba(248, 149, 29, 0.05);
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 3px solid var(--brand-accent, #F8951D);
}
[data-theme="dark"] .hcfc-tips { background: rgba(248, 149, 29, 0.12); }
.hcfc-shortcuts .hcfc-kbds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shortcut-kbd {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 11px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: var(--c-text);
}
[data-theme="dark"] .shortcut-kbd { background: var(--c-surface-3); }

/* ─── Tab Glossary: table 3 cột ─── */
.hc-glossary { padding: 22px 28px; }
.hc-glossary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hc-glossary-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--c-line);
  background: var(--c-surface-2);
}
[data-theme="dark"] .hc-glossary-table th { background: var(--c-surface-3); }
.hc-glossary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.hcg-term {
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}
.hcg-vn { color: var(--c-text); font-weight: 500; }
.hcg-desc { font-size: 12px; line-height: 1.5; }

/* ─── Tab FAQ: accordion ─── */
.hc-faq { padding: 22px 28px; }
.hc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hc-faq-item {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  overflow: hidden;
}
.hc-faq-item.is-open { border-color: var(--brand-accent, #F8951D); }
.hc-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.hc-faq-q:hover { background: var(--c-surface-2); }
[data-theme="dark"] .hc-faq-q:hover { background: var(--c-surface-3); }
.hc-faq-marker {
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-text-muted);
  flex-shrink: 0;
  width: 14px;
}
.hc-faq-qtext { flex: 1; line-height: 1.4; }
.hc-faq-a {
  padding: 0 14px 14px 38px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-text-muted);
}

/* ─── Tab Tour ─── */
.hc-tour-wrap { padding: 22px 28px; }
.hc-tour-intro {
  text-align: center;
  background: var(--c-surface-2);
  padding: 24px 28px;
  border-radius: 12px;
  margin-bottom: 24px;
}
[data-theme="dark"] .hc-tour-intro { background: var(--c-surface-3); }
.hc-tour-intro h2 { margin: 0 0 10px; font-size: 22px; }
.hc-tour-intro p { font-size: 13px; line-height: 1.65; color: var(--c-text-muted); margin: 0 auto 14px; max-width: 580px; }
.hc-tour-start-btn {
  font-size: 14px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  margin: 4px 0 !important;
}
.hc-tour-steps-preview { margin-top: 16px; }
.hc-tour-steps-preview .hcfc-steps li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--c-line);
}
.hc-tour-steps-preview .hcfc-steps li:last-child { border-bottom: none; }

/* ─── Footer ─── */
.hc-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 22px !important;
}
.hc-foot-hint { flex: 1; }

/* ─── Mobile responsive ─── */
@media (max-width: 768px) {
  .help-center-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .help-center-head { flex-direction: column !important; }
  .hc-head-right { width: 100%; }
  .hc-search-input { flex: 1; max-width: none; width: auto; }
  .hc-tabs { padding: 8px; gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
  .hc-tab { font-size: 11px; padding: 6px 10px; }
  .hc-tab-icon { font-size: 12px; }
  .hc-flows-wrap { grid-template-columns: 1fr; }
  .hc-flows-list { border-right: none; border-bottom: 1px solid var(--c-line); max-height: 200px; }
  .hc-flow-content { padding: 16px 18px; }
  .hcfc-head h2 { font-size: 18px; }
  .hc-glossary, .hc-faq, .hc-tour-wrap { padding: 16px 18px; }
}

/* END V19.0.1 HELP CENTER */

/* ============================================================
   V19.0.2 — INLINE COACH HINTS
   Dot "?" 14×14px nhỏ + popover 320px hiển thị nội dung.
   Auto-hide sau 14 ngày dùng admin. Toggle trong Cài đặt.
   ============================================================ */

/* Dot "?" — đặt cạnh element cần hướng dẫn */
.sv-hint-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand-accent, #F8951D);
  color: #fff;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.55;
  transition: all 0.15s ease;
  box-shadow: 0 0 0 0 rgba(248, 149, 29, 0.4);
  animation: svHintPulse 2.6s ease-out infinite;
}
.sv-hint-dot:hover {
  opacity: 1;
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(248, 149, 29, 0.18);
  animation: none;
}
@keyframes svHintPulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(248, 149, 29, 0); }
  20% { box-shadow: 0 0 0 4px rgba(248, 149, 29, 0.25); }
}

/* Anchor wrapper — để dot không phá layout sẵn có */
.sv-with-hint,
.sv-with-hint-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Popover overlay (full screen, để click ngoài đóng popover) */
.sv-hint-popover-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9500;
  pointer-events: auto;
}

/* Popover content */
.sv-hint-popover {
  position: fixed;
  z-index: 9501;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--brand-accent, #F8951D);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0;
  overflow: hidden;
  animation: svHintFadeIn 0.18s ease-out;
}
[data-theme="dark"] .sv-hint-popover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
}
@keyframes svHintFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sv-hint-popover .shp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 6px;
}
.sv-hint-popover .shp-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  flex: 1;
}
.sv-hint-popover .shp-close {
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
  padding: 0 !important;
  flex-shrink: 0;
  margin-top: -2px;
  margin-right: -4px;
}
.sv-hint-popover .shp-body {
  padding: 0 14px 12px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.sv-hint-popover .shp-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
[data-theme="dark"] .sv-hint-popover .shp-foot { background: var(--c-surface-3); }
.sv-hint-popover .shp-foot button {
  font-size: 11px !important;
  padding: 5px 10px !important;
}

/* Mobile: dot hơi lớn hơn để dễ chạm + popover full width */
@media (max-width: 640px) {
  .sv-hint-dot { width: 18px; height: 18px; font-size: 11px; }
  .sv-hint-popover { width: calc(100vw - 32px) !important; max-width: 360px; left: 16px !important; right: 16px !important; }
}

/* In .top-tabs row — dot sát mép phải để không phá layout 4 tab */
.top-tabs .sv-hint-dot {
  margin-left: 8px;
  align-self: center;
}

/* Trong eyebrow-mini (capture/quick drawer head) — dot inline đẹp */
.eyebrow-mini .sv-hint-dot { vertical-align: text-bottom; }

/* Trong .ph-tools-label — dot canh giữa với label uppercase nhỏ */
.ph-tools-label .sv-hint-dot { margin-left: 6px; }

/* Trong sidebar .sp-title — dot ngay cạnh tiêu đề mục */
.sp-title .sv-hint-dot { margin-left: 6px; }

/* Trong .ph-primary-actions — dot ở góc trên trái nhỏ gọn */
.ph-primary-actions .sv-hint-dot {
  position: absolute;
  top: -8px;
  left: -8px;
}

/* FAB hint dot — đặt nổi ngoài góc phải trên FAB main */
.sv-fab-wrap .sv-hint-dot {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  font-size: 11px;
  z-index: 7510;
}

/* END V19.0.2 INLINE COACH HINTS */

/* ============================================================
   V19.0.3 — INTERACTIVE TOUR OVERLAY
   Mask cut-out highlight vùng target + tooltip floating + nav.
   Khởi động từ Help Center → tab Tour → "Bắt đầu tour ngay".
   ============================================================ */

.sv-tour-root {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
}
.sv-tour-root > * { pointer-events: auto; }

/* Spotlight: highlight 1 vùng cụ thể bằng box-shadow trick */
.sv-tour-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8, 12, 22, 0.62);
  border: 2px solid var(--brand-accent, #F8951D);
  transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  animation: svTourSpotlightPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
[data-theme="dark"] .sv-tour-spotlight {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
}
@keyframes svTourSpotlightPulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(8, 12, 22, 0.62), 0 0 0 4px rgba(248, 149, 29, 0); }
  50% { box-shadow: 0 0 0 9999px rgba(8, 12, 22, 0.62), 0 0 0 8px rgba(248, 149, 29, 0.18); }
}

/* Mask full nếu không có target (bước cuối cùng "phim-tat") */
.sv-tour-mask-full {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .sv-tour-mask-full { background: rgba(0, 0, 0, 0.78); }

/* Tooltip — luôn nổi trên overlay */
.sv-tour-tooltip {
  position: fixed;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28), 0 8px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 9700;
  animation: svTourTooltipIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] .sv-tour-tooltip {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
  border-color: var(--c-surface-3);
}
@keyframes svTourTooltipIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tooltip arrows — small triangle pointing to target */
.sv-tour-tooltip::before {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border: 8px solid transparent;
}
.sv-tour-tooltip.arrow-top::before {
  top: -16px; left: 50%; transform: translateX(-50%);
  border-bottom-color: var(--c-surface);
}
.sv-tour-tooltip.arrow-bottom::before {
  bottom: -16px; left: 50%; transform: translateX(-50%);
  border-top-color: var(--c-surface);
}
.sv-tour-tooltip.arrow-left::before {
  left: -16px; top: 50%; transform: translateY(-50%);
  border-right-color: var(--c-surface);
}
.sv-tour-tooltip.arrow-right::before {
  right: -16px; top: 50%; transform: translateY(-50%);
  border-left-color: var(--c-surface);
}
[data-theme="dark"] .sv-tour-tooltip.arrow-top::before { border-bottom-color: var(--c-surface); }
[data-theme="dark"] .sv-tour-tooltip.arrow-bottom::before { border-top-color: var(--c-surface); }
[data-theme="dark"] .sv-tour-tooltip.arrow-left::before { border-right-color: var(--c-surface); }
[data-theme="dark"] .sv-tour-tooltip.arrow-right::before { border-left-color: var(--c-surface); }

/* Progress bar trên cùng tooltip */
.stt-progress-bar {
  height: 4px;
  background: var(--c-surface-2);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .stt-progress-bar { background: var(--c-surface-3); }
.stt-progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-accent, #F8951D), var(--brand-accent-deep, #C8741A));
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip head + body */
.stt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 6px;
}
.stt-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  flex: 1;
}
.stt-close {
  width: 26px !important;
  height: 26px !important;
  font-size: 14px !important;
  padding: 0 !important;
  flex-shrink: 0;
  margin-top: -3px;
  margin-right: -6px;
}
.stt-body {
  padding: 0 18px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-text-muted);
  max-height: 240px;
  overflow-y: auto;
}

/* Action hint — gợi ý bước tiếp theo (in nghiêng cam) */
.stt-action-hint {
  margin: 0 18px 12px;
  padding: 8px 12px;
  background: rgba(248, 149, 29, 0.08);
  border-left: 3px solid var(--brand-accent, #F8951D);
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--brand-accent-deep, #C8741A);
  line-height: 1.5;
}
[data-theme="dark"] .stt-action-hint {
  background: rgba(248, 149, 29, 0.18);
  color: var(--brand-accent, #F8951D);
}

/* Footer: Bỏ qua | Quay lại | Tiếp */
.stt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
[data-theme="dark"] .stt-foot { background: var(--c-surface-3); }
.stt-skip {
  font-size: 11px !important;
  padding: 6px 10px !important;
  color: var(--c-text-muted) !important;
}
.stt-nav {
  display: flex;
  gap: 6px;
}
.stt-nav button {
  font-size: 12px !important;
  padding: 7px 14px !important;
  font-weight: 500 !important;
}
.stt-next {
  min-width: 100px;
  font-weight: 600 !important;
}

/* Mobile: tooltip full-width near bottom */
@media (max-width: 640px) {
  .sv-tour-tooltip {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px);
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 16px !important;
  }
  .sv-tour-tooltip::before { display: none; }
  .stt-body { max-height: 35vh; }
}

/* END V19.0.3 INTERACTIVE TOUR */

/* ============================================================
   V19.0.4 — HOTFIX:
     1. Help Center 6 luồng → accordion
     2. Sidebar bulk mode CSS đã fix ở trên
     3. Smart Filter dropdown gộp Smart Views + Filter nhanh
   ============================================================ */

/* ─── 1. Help Center accordion ─── */
.hc-flows-accordion {
  padding: 16px 22px 22px;
}
.hc-flows-intro {
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--brand-accent, #F8951D);
}
[data-theme="dark"] .hc-flows-intro { background: var(--c-surface-3); }

.hc-flows-list-acc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hc-flow-acc-item {
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.hc-flow-acc-item.is-open {
  border-color: var(--brand-accent, #F8951D);
}
[data-theme="dark"] .hc-flow-acc-item { background: var(--c-surface-2); }

.hc-flow-acc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.hc-flow-acc-head:hover { background: var(--c-surface-2); }
[data-theme="dark"] .hc-flow-acc-head:hover { background: var(--c-surface-3); }
.hc-flow-acc-item.is-open .hc-flow-acc-head {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
}
[data-theme="dark"] .hc-flow-acc-item.is-open .hc-flow-acc-head {
  background: var(--c-surface-3);
}
.hc-flow-acc-marker {
  font-size: 14px;
  color: var(--c-text-muted);
  flex-shrink: 0;
  width: 14px;
  margin-top: 2px;
}
.hc-flow-acc-head .hcf-icon { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.hc-flow-acc-head .hcf-meta { flex: 1; min-width: 0; }
.hc-flow-acc-head .hcf-title {
  font-size: 14px; font-weight: 600; color: var(--c-text);
  margin-bottom: 2px; line-height: 1.4;
}
.hc-flow-acc-head .hcf-summary {
  font-size: 12px; line-height: 1.5;
}

.hc-flow-acc-body {
  padding: 18px 22px 20px 44px;
}

/* ─── 3. Smart Filter dropdown ─── */
.sidebar-smart-filter {
  margin: 8px 8px 12px;
  position: relative;
}

.ssf-trigger-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.ssf-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
  min-width: 0;
}
.ssf-trigger:hover {
  border-color: var(--c-text-muted);
  background: var(--c-surface-2);
}
[data-theme="dark"] .ssf-trigger:hover { background: var(--c-surface-3); }
.ssf-trigger.has-filter {
  border-color: var(--brand-accent, #F8951D);
  background: rgba(248, 149, 29, 0.06);
  color: var(--brand-accent-deep, #C8741A);
  font-weight: 600;
}
[data-theme="dark"] .ssf-trigger.has-filter {
  background: rgba(248, 149, 29, 0.12);
  color: var(--brand-accent, #F8951D);
}
.sidebar-smart-filter.is-open .ssf-trigger {
  border-color: var(--brand-accent, #F8951D);
  background: var(--c-surface-2);
}
.ssf-trigger-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ssf-trigger-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssf-trigger-caret { font-size: 11px; color: var(--c-text-muted); flex-shrink: 0; }

.ssf-clear {
  flex-shrink: 0;
  width: 36px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.ssf-clear:hover {
  background: var(--c-error-bg, #FEE);
  color: var(--c-error, #E63946);
  border-color: var(--c-error, #E63946);
}

/* Panel dropdown */
.ssf-panel {
  margin-top: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: ssfFadeIn 0.18s ease-out;
}
[data-theme="dark"] .ssf-panel {
  background: var(--c-surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
@keyframes ssfFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ssf-section { padding: 8px 10px; }
.ssf-section + .ssf-section { border-top: 1px solid var(--c-line); }

.ssf-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 8px;
}
.ssf-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.ssf-section-count {
  font-size: 10px;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
}

.ssf-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ssf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.ssf-item:hover { background: var(--c-surface-2); }
[data-theme="dark"] .ssf-item:hover { background: var(--c-surface-3); }
.ssf-item.is-active {
  background: rgba(248, 149, 29, 0.1);
  color: var(--brand-accent-deep, #C8741A);
  font-weight: 600;
}
[data-theme="dark"] .ssf-item.is-active {
  background: rgba(248, 149, 29, 0.18);
  color: var(--brand-accent, #F8951D);
}

.ssf-item-icon { font-size: 14px; flex-shrink: 0; line-height: 1; }
.ssf-item-label { flex: 1; min-width: 0; }
.ssf-item-count {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  flex-shrink: 0;
}
[data-theme="dark"] .ssf-item-count { background: var(--c-surface-3); }
.ssf-item-count.tone-danger { background: rgba(230, 57, 70, 0.15); color: #E63946; }
.ssf-item-count.tone-warn { background: rgba(248, 149, 29, 0.15); color: #B8762A; }
.ssf-item-count.tone-success { background: rgba(47, 122, 79, 0.15); color: #2F7A4F; }
.ssf-item-count.tone-info { background: rgba(44, 91, 170, 0.15); color: #2C5BAA; }
.ssf-item-count.tone-brand { background: rgba(248, 149, 29, 0.18); color: var(--brand-accent-deep); }

.ssf-foot-hint {
  padding: 8px 12px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  font-size: 11px;
  text-align: center;
}
[data-theme="dark"] .ssf-foot-hint { background: var(--c-surface-3); }

/* Mobile: dropdown full width */
@media (max-width: 768px) {
  .ssf-panel { font-size: 13px; }
}

/* END V19.0.4 */

/* ============================================================
   V19.0.5 — HOTFIX: Capture-foot save button STILL missing
   Round 2 fix sau V18.2.2. Thay vì position: sticky (có thể fail
   trên Safari khi parent overflow:hidden + animation transform),
   ép flex layout strict + defensive !important visibility.
   .bcw-drawer giữ flex column tự nhiên — foot là flex item có
   flex-shrink: 0 → tự ở đáy không cần sticky.
   ============================================================ */

/* Drawer container — flex column strict, KHÔNG dùng grid (tránh conflict children) */
.bcw-drawer {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Head — natural height, không co */
.bcw-drawer .drawer-head {
  flex: 0 0 auto !important;
}

/* Owner bar nếu có — natural height */
.bcw-drawer .capture-owner-bar {
  flex: 0 0 auto !important;
}

/* Body — chiếm hết remaining space, cuộn nội bộ */
.bcw-drawer .capture-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Foot — LUÔN ở đáy, KHÔNG co, defensive visibility */
.bcw-drawer .capture-foot,
.bcw-drawer .capture-foot.capture-foot-v2 {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Bỏ position: sticky vì flex đã guarantee position */
  position: relative !important;
  bottom: auto !important;
  /* Giữ visual như V18.2.2 */
  background: var(--c-surface) !important;
  border-top: 1px solid var(--c-line);
  padding: 14px 22px !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
  z-index: 5;
  flex-shrink: 0;
  /* Safe area cho iPhone X / notch devices */
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

/* Buttons row trong foot — đảm bảo visible */
.bcw-drawer .capture-foot.capture-foot-v2 .capture-buttons {
  display: flex !important;
  flex-direction: row !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
}

/* Mỗi nút trong capture-buttons — defensive visible */
.bcw-drawer .capture-foot.capture-foot-v2 .capture-buttons > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
}

/* Nút Lưu kết quả gọi — flex grow lấp full chiều rộng */
.bcw-drawer .capture-foot.capture-foot-v2 .capture-buttons > .save-btn {
  flex: 1 1 auto !important;
  min-width: 140px;
  font-weight: 600;
  white-space: nowrap;
}

/* Filled count subtext nhỏ phía dưới */
.bcw-drawer .capture-foot.capture-foot-v2 .cf-subtext {
  display: block !important;
  visibility: visible !important;
  text-align: center;
  font-size: 10px;
  color: var(--c-text-dim);
  margin: 0;
}

/* Mobile narrow — buttons wrap nhưng save-btn full-width hàng đầu */
@media (max-width: 480px) {
  .bcw-drawer .capture-foot.capture-foot-v2 .capture-buttons {
    flex-wrap: wrap;
  }
  .bcw-drawer .capture-foot.capture-foot-v2 .capture-buttons > .save-btn {
    flex: 1 1 100%;
    order: -1;
    padding: 12px 16px;
  }
  .bcw-drawer .capture-foot.capture-foot-v2 .capture-buttons > .ghost-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}

/* END V19.0.5 ROBUST FIX */

/* ============================================================
   V20.0.5 — INDUSTRY CONTEXT SECTION (Brief tab)
   Hiển thị Q_INDUSTRY_* + Q_IND_* answers từ Customer Form V20.0.1+
   ============================================================ */

.industry-context-section {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.04) 0%, rgba(248, 149, 29, 0.08) 100%);
  border: 1px solid rgba(248, 149, 29, 0.15);
  border-left: 3px solid var(--brand-accent, #F8951D);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .industry-context-section {
  background: linear-gradient(135deg, rgba(248, 149, 29, 0.08) 0%, rgba(248, 149, 29, 0.14) 100%);
  border-color: rgba(248, 149, 29, 0.25);
}

.industry-context-section .ws-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.industry-context-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.industry-context-section .section-sub {
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.45;
}

.industry-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--brand-accent, #F8951D);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.industry-answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.industry-answer-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 0;
}
[data-theme="dark"] .industry-answer-card {
  background: var(--c-surface-2);
}

.iac-question {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: 4px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.iac-answer {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.industry-empty {
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: 8px;
  text-align: center;
  font-style: italic;
}
[data-theme="dark"] .industry-empty { background: var(--c-surface-2); }

@media (max-width: 640px) {
  .industry-answers-grid { grid-template-columns: 1fr; }
  .industry-context-section .ws-section-head { flex-direction: column; }
  .industry-badge { align-self: flex-start; }
}

/* END V20.0.5 */

/* ============================================================
   V21.2.0 — PHASE 3-7 FIXES (state, modules, print, perf, test)
   ============================================================ */

/* PHASE 3 — Quick note button visibility (V21.2.0)
   Tăng prominence cho nút Lưu trong inline note + capture drawer */
.inline-note-save-btn,
.inline-note-actions .save-btn,
.capture-foot .save-btn {
  background: var(--brand-accent, #F8951D) !important;
  color: #fff !important;
  font-weight: 600;
  border: 1px solid var(--brand-accent-deep, #B26A12);
  box-shadow: 0 2px 6px rgba(248, 149, 29, 0.25);
  min-width: 120px;
}
.inline-note-save-btn:hover,
.inline-note-actions .save-btn:hover,
.capture-foot .save-btn:hover {
  background: var(--brand-accent-deep, #B26A12) !important;
  box-shadow: 0 4px 10px rgba(248, 149, 29, 0.35);
}

/* PHASE 3 — Disabled button state khi đang loading (chống double-click) */
button[disabled],
button.is-loading,
.save-btn[disabled],
.ghost-btn[disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
button.is-loading::after {
  content: " ⏳";
  display: inline-block;
  animation: tsyncSpin 1s linear infinite;
}

/* PHASE 4 — Manual Time Entry dialog defensive styles
   Inherit từ .share-dialog nhưng đảm bảo có đủ width + foot pinned */
.time-entry-dialog {
  min-width: 480px;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.time-entry-dialog .te-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
}
.time-entry-dialog .te-foot {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--c-surface);
}
@media (max-width: 540px) {
  .time-entry-dialog { min-width: 0; width: 100vw; max-width: 100vw; }
  .time-entry-dialog .te-body { padding: 14px 16px; }
}

/* PHASE 4 — Help Center accordion item hover feedback */
.hc-flow-acc-head,
.hc-faq-q {
  cursor: pointer !important;
  user-select: none;
  transition: background-color 80ms ease;
}
.hc-flow-acc-head:hover,
.hc-faq-q:hover {
  background: var(--c-surface-2, #f5f5f5);
}
.hc-flow-acc-head:active,
.hc-faq-q:active { transform: scale(0.998); }

/* PHASE 5 — UNIVERSAL PRINT SAFETY (V21.2.0)
   Override mọi thứ có thể che/cắt nội dung khi in.
   Áp dụng cho tất cả body.printing-* class. */
@media print {
  /* Hide chrome elements globally */
  .topbar-sync,
  .sv-fab-wrap,
  .sv-global-loader,
  #sv-flash,
  #sv-toast-container,
  .sv-bootstrap-loader,
  .help-panel-overlay,
  .cmd-palette-overlay,
  .snippet-picker-overlay,
  .tag-picker-overlay {
    display: none !important;
  }
  /* Defensive — không có element nào cap height/cắt content */
  .pdoc-page,
  .doc-page,
  .rp-document,
  .precall-doc,
  .ws-section,
  .detail-section {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Mọi position fixed → static để không duplicate hoặc che */
  body :not(.pdoc-page):not(.doc-page) {
    position: static !important;
  }
  /* Page break giúp block không cắt giữa */
  .pdoc-page,
  .doc-page,
  .rp-document-page,
  .pcv-cover,
  .psg-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Force background colors trong print (cam, navy của brand) */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* PHASE 6 — Apply Template visual feedback (V21.2.0)
   Khi user click button, cho 1 pulse animation rõ rệt để biết đã trigger */
.pc-template-card {
  position: relative;
  overflow: hidden;
}
.pc-template-card.is-applied {
  border-color: var(--brand-accent, #F8951D) !important;
  background: var(--brand-accent-soft, #FFF4E5) !important;
  box-shadow: 0 0 0 2px var(--brand-accent, #F8951D) !important;
}
.pc-template-card.is-applied::after {
  content: "✓ ĐÃ ÁP DỤNG";
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-accent-deep, #B26A12);
  letter-spacing: 0.05em;
  font-family: var(--font-mono, monospace);
}
@keyframes pcTemplatePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.pc-template-card.is-applied {
  animation: pcTemplatePulse 0.4s ease-out;
}

/* PHASE 6 — Calendar mode-switch button feedback (chống double click) */
.cal-mode-btn:active { transform: scale(0.96); }
.cal-mode-btn[disabled] {
  opacity: 0.5; cursor: wait !important; pointer-events: none;
}

/* PHASE 6 — Loading skeleton cho project list khi đang fetch */
.sv-skeleton {
  background: linear-gradient(90deg,
    var(--c-surface-2, #f0f0f0) 0%,
    var(--c-surface-3, #e8e8e8) 50%,
    var(--c-surface-2, #f0f0f0) 100%);
  background-size: 200% 100%;
  animation: svSkelShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  min-height: 14px;
}
@keyframes svSkelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* END V21.2.0 PHASE 3-7 fixes */

/* ============================================================
   V21.2.6 — KILL ALL ANIMATIONS / TRANSITIONS (debug flicker)
   ============================================================
   Anh báo: mỗi thao tác màn hình "chớp" 1 cái → để xác định
   root cause, em tắt TOÀN BỘ animation + transition.

   Nếu hết flicker → gốc là animation nặng/lệch frame → bật
   lại từng cái có chọn lọc.

   Nếu vẫn flicker → gốc là re-render toàn page (innerHTML
   reset) → em sẽ chuyển fix sang surgical update DOM.

   Override này đặt cuối file để thắng mọi rule trên.
   ============================================================ */
*, *::before, *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* Whitelist 2 thứ KHÔNG được tắt vì nó là loading indicator,
   nếu tắt thì người dùng tưởng app treo: */
.sv-bootstrap-loader { animation-duration: 1s !important; }
.sv-skeleton { animation-duration: 1.4s !important; }

/* Tắt cả scroll-behavior smooth — scroll smooth cũng có thể
   gây cảm giác "chớp" khi page bị scroll lại đầu lúc render */
html { scroll-behavior: auto !important; }

/* END V21.2.6 KILL ANIMATIONS */

/* ============================================================
   V21.2.7 — SELECTIVE RE-ENABLE micro-transition (an toàn)
   ============================================================
   V21.2.6 tắt hết → confirm hết flicker → root cause là animation
   trên container lớn (fade-in step, slide drawer, page transition).

   V21.2.7: GIỮ kill-all ở trên (backstop), BẬT LẠI transition
   ngắn 120ms chỉ cho element NHỎ — đủ feedback, không gây chớp:
   - Button/chip: hover/active màu nền, border, text
   - Input/textarea/select: focus ring (box-shadow)
   - Link: hover color
   - FAB + flash toast: micro feedback

   KHÔNG re-enable:
   - Drawer slide (.bcw-drawer): mở/đóng instant
   - Modal/overlay fade: instant
   - Page step transition (.pc-step1-4): instant
   - Card/dashboard fade-in: instant
   ============================================================ */
button:not([disabled]),
.btn:not(.btn-disabled),
.sv-btn,
.chip,
.tag-pick-item,
.rp-btn,
.nav-item,
.sidebar-item,
.dashboard-tab,
a,
input:not([type="hidden"]),
textarea,
select,
.sv-fab,
.sv-fab-wrap,
#sv-flash,
.toast,
.kpi-card[role="button"],
.proposal-card[role="button"] {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease,
    transform 120ms ease !important;
}

/* Hover lift micro nếu có — chỉ scale 1px tránh layout shift */
.sv-fab:hover, .btn-primary:hover, .sv-btn:hover {
  transform: translateY(-1px) !important;
}
.sv-fab:active, .btn-primary:active, .sv-btn:active {
  transform: translateY(0) !important;
}

/* END V21.2.7 SELECTIVE RE-ENABLE */

/* ============================================================
   V21.2.8 — Templates group header + Mini card style
   ============================================================ */
.pc-templates-group {
  margin-top: 14px;
}
.pc-templates-group:first-child {
  margin-top: 8px;
}
.pc-templates-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 4px 10px;
  flex-wrap: wrap;
}
.pc-templates-group-head strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}
.pc-templates-group-head .muted {
  color: var(--c-text-muted);
  font-size: 11.5px;
}

/* Mini card: nén lại, thấp hơn, nhẹ hơn so với card to */
.pc-template-card.is-mini {
  min-height: 88px;
  padding: 10px 12px;
  background: var(--c-surface-2);
}
.pc-template-card.is-mini .pct-icon {
  font-size: 22px;
}
.pc-template-card.is-mini .pct-title {
  font-size: 12.5px;
}
.pc-template-card.is-mini .pct-sub {
  font-size: 11px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-template-card.is-mini .pct-meta {
  font-size: 10.5px;
}

/* Mini grid: 4 cột mobile, 5 cột desktop để gọn */
.pc-templates-grid--mini {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .pc-templates-grid--mini { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .pc-templates-grid--mini { grid-template-columns: repeat(4, 1fr); }
}

/* END V21.2.8 */

/* ============================================================
   V21.2.9 — Phase A UX rebuild: tabs templates + segmented L/M/H
   ============================================================ */

/* --- Step 1 numbered headers --- */
.pc-page-set-top {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-page-set-top .pc-page-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.pc-step1-tplhead, .pc-step1-secthead {
  margin: 22px 0 8px;
}
.pc-step1-tplhead .pc-page-label,
.pc-step1-secthead .pc-page-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

/* --- Templates tabs segmented --- */
.pc-templates-tabs-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
}
.pc-templates-tabs {
  display: inline-flex;
  background: var(--c-surface-2);
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
}
.pc-tpl-tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 7px;
  transition: background 120ms ease, color 120ms ease;
}
.pc-tpl-tab-btn:hover {
  color: var(--c-text);
}
.pc-tpl-tab-btn.is-active {
  background: var(--c-surface);
  color: var(--brand-accent-deep, #B26A12);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-weight: 600;
}
.pc-templates-tab-hint {
  display: block;
  margin: 8px 0 12px;
  color: var(--c-text-muted);
  font-size: 11.5px;
}

/* --- Step 3 segmented L/M/H buttons --- */
.pc-tier-cell {
  text-align: center;
}
.pc-tier-seg {
  display: inline-flex;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}
.pc-tier-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: background 100ms ease, color 100ms ease;
}
.pc-tier-btn:hover {
  color: var(--c-text);
}
.pc-tier-btn.is-active {
  background: var(--brand-accent, #F8951D);
  color: #fff;
  font-weight: 600;
}
.pc-tier-btn--cus {
  font-size: 14px;
  padding: 6px 10px;
}
.pc-tier-btn--cus.is-active {
  background: var(--c-text);
  color: #fff;
}
.pc-custom-inline {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}
.pc-custom-inline input.pc-custom-input {
  width: 90px;
  padding: 6px 8px;
  font-size: 12px;
  text-align: right;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
}
.pc-custom-inline input.pc-custom-input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
}

/* --- Sticky footer override (đã có nhưng đảm bảo dính bottom flex) --- */
.proposal-composer .pc-footer {
  flex-shrink: 0;  /* không bị shrink nếu content overflow */
  position: relative;
  z-index: 2;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* --- Stepper top: sticky khi scroll --- */
.proposal-composer .pc-stepper {
  flex-shrink: 0;
}

/* Mobile: tabs full width */
@media (max-width: 720px) {
  .pc-templates-tabs {
    display: flex;
    width: 100%;
  }
  .pc-tpl-tab-btn {
    flex: 1 1 50%;
    padding: 10px 8px;
    font-size: 12px;
  }
  .pc-tier-seg {
    flex-wrap: nowrap;
  }
  .pc-tier-btn {
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* END V21.2.9 */

/* ============================================================
   V21.3.0 — Phase B: Step 1 layout 2 cột + sticky stepper + summary
   ============================================================ */

/* --- Sticky stepper khi user scroll Step 1 --- */
.proposal-composer .pc-stepper {
  position: sticky;
  top: 0;
  z-index: 5;
  /* dùng background đầy để che content scroll bên dưới */
  background: var(--c-surface-2);
  backdrop-filter: blur(4px);
}

/* --- Step 1 layout 2 cột (desktop ≥1100px) --- */
.pc-step1-grid {
  display: block;
}

@media (min-width: 1100px) {
  .pc-step1-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
    align-items: start;
  }
  .pc-step1-side {
    position: sticky;
    top: 12px;            /* dưới sticky stepper khoảng 12px */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pc-step1-main {
    min-width: 0;        /* tránh grid item overflow */
  }
  /* Bỏ padding-set-top default — đã wrap trong side-card */
  .pc-step1-grid .pc-page-set-top {
    margin: 0;
  }
}

/* Mobile / tablet: stack dọc */
@media (max-width: 1099px) {
  .pc-step1-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }
}

/* --- Side card chung style (định dạng + summary) --- */
.pc-side-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 14px 16px;
}

/* --- Summary KPI panel --- */
.pc-side-summary {
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
}
.pc-side-summary .pc-page-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--c-text);
}
.pc-side-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-line);
}
.pc-kpi-row:last-child {
  border-bottom: none;
}
.pc-kpi-label {
  font-size: 11.5px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pc-kpi-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-kpi-money {
  font-family: var(--font-mono);
  color: var(--brand-accent-deep, #B26A12);
  font-size: 16px;
}
.pc-kpi-tpl {
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-kpi-tpl em.muted {
  font-style: italic;
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: 11.5px;
}

/* END V21.3.0 */

/* ============================================================
   V21.3.1 — Step 2 layout 2 cột + Live Cover A4 preview
   ============================================================ */
.pc-step2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 1100px) {
  .pc-step2-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
    align-items: start;
  }
  .pc-step2-preview {
    position: sticky;
    top: 12px;
  }
}

.pc-step2-form {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 18px 20px;
}
.pc-step2-form .pc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 8px;
}
.pc-step2-form .pc-field.wide { grid-column: 1 / -1; }
.pc-step2-form .pc-field { display: flex; flex-direction: column; gap: 4px; }
.pc-step2-form .pc-field span {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pc-step2-form .pc-field input {
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: var(--c-surface);
}
.pc-step2-form .pc-field input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
  border-color: var(--brand-accent);
}
.pc-step2-form .pc-field input[readonly] {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

/* --- Live preview A4 cover --- */
.pc-step2-preview .pc-page-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--c-text);
}
.pc-cover-preview-wrap {
  background: var(--c-surface-2);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
}
.pc-cover-preview {
  /* A4 portrait ratio 1:√2 ≈ 1:1.414. Width ~380px → height ~537px. */
  background: #fff;
  width: 100%;
  aspect-ratio: 210 / 297;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(15, 27, 48, 0.18);
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  font-family: "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  color: #1a1a1a;
}
.pc-cover-preview::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #F8951D, #B26A12);
}
.pcp-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: auto;
}
.pcp-brand strong {
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #1a1a1a;
}
.pcp-brand-sub {
  font-size: 9px;
  color: #888;
  letter-spacing: 0.5px;
}
.pcp-mid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: auto 0;
}
.pcp-clientline {
  font-size: 9px;
  color: #888;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pcp-headline {
  font-size: 22px;
  line-height: 1.18;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.3px;
}
.pcp-headline:empty::before, .pcp-subtitle:empty::before {
  content: attr(data-placeholder);
  color: #ccc;
  font-style: italic;
}
.pcp-subtitle {
  font-size: 12px;
  color: #555;
  margin: 0;
  line-height: 1.4;
}
.pcp-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #eee;
}
.pcp-foot > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pcp-foot-mid { text-align: center; }
.pcp-foot-right { text-align: right; }
.pcp-foot-label {
  font-size: 8px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pcp-foot strong {
  font-size: 10px;
  color: #1a1a1a;
  font-weight: 600;
}

/* END V21.3.1 */

/* ============================================================
   V21.3.4 — Fix PDF layout: section head text rõ + footer không cắt
   ============================================================ */

/* Override .psg-section-head — block FULL WIDTH, text trắng đậm rõ */
.pdoc-service.v2 .psg-section-head {
  display: flex !important;
  align-items: center;
  width: 100%;
  gap: 14px;
  padding: 14px 18px !important;
  background: #F8951D;          /* màu đặc, không var() để chắc chắn render */
  color: #FFFFFF !important;
  border-radius: 6px;
  margin-bottom: 6px;
  min-height: 44px;
  box-sizing: border-box;
}
.pdoc-service.v2 .psg-section-head .psg-code-pill {
  background: rgba(0, 0, 0, 0.32) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 5px 11px !important;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.06em;
}
.pdoc-service.v2 .psg-section-head .psg-section-title {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.35;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);  /* tăng contrast cho html2canvas */
}

/* Table 8-field — label cột trái 150px, padding rộng hơn, border đậm hơn */
.pdoc-service.v2 .psg-table.v2 {
  margin-top: 8px;
  border: 1.5px solid #E5E2DA !important;
  border-radius: 6px;
}
.pdoc-service.v2 .psg-table.v2 .psg-k {
  width: 150px !important;
  background: #F7F5EE !important;
  border-right: 1.5px solid #E5E2DA !important;
  padding: 13px 16px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #1A1918 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: top;
}
.pdoc-service.v2 .psg-table.v2 td:not(.psg-k) {
  padding: 13px 18px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #2A2823 !important;
  vertical-align: top;
}
.pdoc-service.v2 .psg-table.v2 tr {
  border-bottom: 1px solid #ECE9E2 !important;
}
.pdoc-service.v2 .psg-table.v2 tr:last-child {
  border-bottom: 0 !important;
}

/* Footer — đảm bảo HIỆN ĐỦ chữ, không bị cắt */
.pdoc-page > footer.psg-footer {
  flex-shrink: 0 !important;
  padding: 18px 48px !important;
  min-height: 56px;
  background: #FFFFFF;
  border-top: 1.5px solid #ECE9E2;
}
.pdoc-page > footer.psg-footer .psg-foot-info {
  font-size: 10.5px !important;
  letter-spacing: 0.04em;
}
.pdoc-page > footer.psg-footer .psg-foot-logo {
  height: 28px !important;
}

/* PDF export mode (when html2canvas reads): page TUYỆT ĐỐI không clip footer */
.pdoc-page {
  padding-bottom: 0 !important;
  /* footer đã có bg trắng + border-top, đảm bảo render đầy đủ */
}

/* END V21.3.4 */

/* ============================================================
   V21.3.5 — Pin chân tất cả modal/drawer + brief blocker + origin banner
   ============================================================ */

/* === DRAWER: capture, quick-edit — height 100dvh, footer pinned === */
.bcw-drawer {
  height: 100dvh !important;          /* dynamic viewport — account for mobile address bar */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}
.bcw-drawer .capture-body,
.bcw-drawer .quick-body,
.bcw-drawer .drawer-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0;
}
.bcw-drawer .capture-foot,
.bcw-drawer .quick-foot,
.bcw-drawer > .drawer-foot {
  flex-shrink: 0 !important;
  position: relative !important;       /* không sticky — flex auto bottom */
  background: var(--c-surface);
  border-top: 1.5px solid var(--c-line);
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

/* === MODAL trung tâm (precall, workshop, report, NOT proposal-composer) === */
.bcw-modal:not(.proposal-composer) {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden;
}
.bcw-modal:not(.proposal-composer) > .modal-head,
.bcw-modal:not(.proposal-composer) > .doc-toolbar {
  flex-shrink: 0;
}
.bcw-modal:not(.proposal-composer) > .precall-body,
.bcw-modal:not(.proposal-composer) > .workshop-body,
.bcw-modal:not(.proposal-composer) > .report-body,
.bcw-modal:not(.proposal-composer) > .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
/* Modal foot pin cho precall/workshop/report nếu có */
.bcw-modal:not(.proposal-composer) > .modal-foot {
  flex-shrink: 0;
  background: var(--c-surface);
  border-top: 1.5px solid var(--c-line);
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

/* === BRIEF BLOCKER DIALOG === */
.brief-blocker-overlay {
  z-index: 200;
}
.brief-blocker-modal {
  max-width: 720px !important;
  width: 100%;
  background: var(--c-surface);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
}
.brief-blocker-modal .modal-head {
  background: linear-gradient(135deg, rgba(200,72,58,0.06), rgba(248,149,29,0.04));
  border-bottom: 1px solid var(--c-line);
}
.brief-blocker-modal .blocker-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px;
  min-height: 0;
}
.brief-blocker-modal .blocker-section {
  margin-bottom: 22px;
}
.brief-blocker-modal .blocker-section h3 {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--c-text-muted);
}
.brief-blocker-modal .blocker-section--blocking h3 {
  color: #C8483A;
}
.brief-blocker-modal .blocker-section--important h3 {
  color: #B8762A;
}
.brief-blocker-modal .blocker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brief-blocker-modal .blocker-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(200, 72, 58, 0.04);
  border: 1px solid rgba(200, 72, 58, 0.18);
  border-left: 3px solid #C8483A;
  border-radius: 8px;
}
.brief-blocker-modal .blocker-item.important {
  background: rgba(184, 118, 42, 0.04);
  border-color: rgba(184, 118, 42, 0.18);
  border-left-color: #B8762A;
}
.brief-blocker-modal .blocker-info {
  flex: 1;
  min-width: 0;
}
.brief-blocker-modal .blocker-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.brief-blocker-modal .blocker-info p {
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
}
.brief-blocker-modal .blocker-item button {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 14px;
  background: var(--c-surface);
  border: 1px solid #C8483A;
  color: #C8483A;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.brief-blocker-modal .blocker-item.important button {
  border-color: #B8762A;
  color: #B8762A;
}
.brief-blocker-modal .blocker-item button:hover {
  background: #C8483A;
  color: #fff;
}
.brief-blocker-modal .blocker-item.important button:hover {
  background: #B8762A;
  color: #fff;
}
.brief-blocker-modal .blocker-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: var(--c-surface-2);
  border-top: 1.5px solid var(--c-line);
  gap: 12px;
}

/* Flash highlight khi jump-to-fix */
.flash-highlight {
  animation: flashYellow 2.4s ease-out;
}
@keyframes flashYellow {
  0%, 30% {
    background: rgba(248, 149, 29, 0.25) !important;
    box-shadow: 0 0 0 4px rgba(248, 149, 29, 0.15) !important;
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

/* === ORIGIN BANNER trên Proposal Composer === */
.pc-origin-banner {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-origin-banner.from-form {
  background: linear-gradient(135deg, rgba(47, 122, 79, 0.08), rgba(248, 149, 29, 0.04));
  border: 1px solid rgba(47, 122, 79, 0.25);
  border-left: 3px solid #2F7A4F;
}
.pc-origin-banner.manual {
  background: rgba(101, 98, 91, 0.06);
  border: 1px solid var(--c-line);
  border-left: 3px solid #65625B;
}
.pc-orig-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-text);
}
.pc-orig-row strong {
  font-weight: 600;
}
.pc-orig-row .pc-orig-icon {
  font-size: 14px;
}
.pc-orig-row .pc-orig-meta {
  font-size: 11.5px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}
.pc-orig-hint {
  font-size: 11.5px;
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* Origin badges INLINE trên field Step 2 */
.pc-field-origin-badge {
  display: inline-block;
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-mono);
  vertical-align: middle;
}
.pc-field-origin-badge.auto {
  background: rgba(47, 122, 79, 0.12);
  color: #2F7A4F;
}
.pc-field-origin-badge.tpl {
  background: rgba(248, 149, 29, 0.12);
  color: #B26A12;
}
.pc-field-origin-badge.manual {
  background: rgba(101, 98, 91, 0.12);
  color: #65625B;
}

/* END V21.3.5 */

/* ============================================================
   V21.3.7 — Quick Note Voice UI rebuild: timer + waveform + voice panel
   ============================================================ */

/* Header rec indicator */
.inw-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inw-rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(230, 57, 70, 0.1);
  border: 1px solid rgba(230, 57, 70, 0.3);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #E63946;
}
.inw-rec-dot {
  width: 8px; height: 8px;
  background: #E63946;
  border-radius: 50%;
  animation: inwPulseDot 1s ease-in-out infinite !important;
}
@keyframes inwPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.inw-rec-timer {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Voice panel — IDLE state (button to ấn để start) */
.inw-voice-panel {
  margin: 10px 0;
  padding: 14px 16px;
  background: var(--c-surface-2, #f7f5ee);
  border: 1px dashed var(--c-line, #DCDAD3);
  border-radius: 10px;
  transition: all 200ms ease;
}
.inw-voice-panel.is-disabled {
  opacity: 0.55;
}
.inw-voice-start-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--c-surface, #fff);
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--c-text);
  transition: all 150ms ease;
}
.inw-voice-start-btn:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--brand-accent, #F8951D);
  background: rgba(248, 149, 29, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(248, 149, 29, 0.12);
}
.inw-voice-start-btn:disabled,
.inw-voice-start-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.inw-voice-start-btn .inw-voice-mic {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.inw-voice-start-btn strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--c-text);
}
.inw-voice-start-btn .inw-voice-hint {
  display: block;
  font-size: 11px;
  color: var(--c-text-muted);
}

/* Voice panel — RECORDING state (waveform + timer + stop) */
.inw-voice-panel.is-recording {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.06), rgba(248, 149, 29, 0.04));
  border: 1.5px solid rgba(230, 57, 70, 0.4);
  border-style: solid;
}
.inw-voice-rec-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.inw-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  flex-shrink: 0;
}
.inw-wave-bar {
  width: 4px;
  background: linear-gradient(180deg, #E63946, #F8951D);
  border-radius: 3px;
  animation: inwWaveBar 1.1s ease-in-out infinite !important;
  opacity: 0.85;
  display: inline-block;
}
.inw-wave-bar:nth-child(1)  { height: 18px; animation-delay: 0s; }
.inw-wave-bar:nth-child(2)  { height: 32px; animation-delay: 0.1s; }
.inw-wave-bar:nth-child(3)  { height: 22px; animation-delay: 0.2s; }
.inw-wave-bar:nth-child(4)  { height: 38px; animation-delay: 0.3s; }
.inw-wave-bar:nth-child(5)  { height: 26px; animation-delay: 0.4s; }
.inw-wave-bar:nth-child(6)  { height: 34px; animation-delay: 0.15s; }
.inw-wave-bar:nth-child(7)  { height: 18px; animation-delay: 0.25s; }
.inw-wave-bar:nth-child(8)  { height: 30px; animation-delay: 0.05s; }
.inw-wave-bar:nth-child(9)  { height: 22px; animation-delay: 0.35s; }
.inw-wave-bar:nth-child(10) { height: 36px; animation-delay: 0.2s; }
.inw-wave-bar:nth-child(11) { height: 18px; animation-delay: 0.4s; }
.inw-wave-bar:nth-child(12) { height: 28px; animation-delay: 0.1s; }
@keyframes inwWaveBar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
  50%      { transform: scaleY(1);    opacity: 1;   }
}

.inw-voice-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inw-voice-info strong {
  font-size: 13px;
  font-weight: 600;
  color: #E63946;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inw-voice-info .inw-voice-time {
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.inw-voice-info .muted.small {
  font-size: 10.5px;
  color: var(--c-text-muted);
}

.inw-voice-stop-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #E63946;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.25);
  transition: all 150ms ease;
}
.inw-voice-stop-btn:hover {
  background: #D32938;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(230, 57, 70, 0.35);
}
.inw-voice-stop-btn span:first-child {
  font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 720px) {
  .inw-voice-rec-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .inw-waveform { width: 100%; height: 32px; }
  .inw-voice-stop-btn { width: 100%; justify-content: center; padding: 12px; }
}

/* END V21.3.7 */

/* ============================================================
   V21.4.0 — Notes feed timeline + audio player
   ============================================================ */

.notes-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
}
.note-feed-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 0;
}
.nfi-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nfi-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F8951D, #B26A12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(248, 149, 29, 0.25);
}
.nfi-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, var(--c-line), transparent);
  margin-top: 4px;
  min-height: 16px;
}
.nfi-card {
  flex: 1;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  min-width: 0;
}
.nfi-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.nfi-meta strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}
.nfi-time {
  font-size: 11px;
  color: var(--c-text-muted);
  font-family: var(--font-mono, monospace);
}
.nfi-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.nfi-audio {
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(248,149,29,0.06), rgba(178,106,18,0.04));
  border: 1px solid rgba(248,149,29,0.2);
  border-radius: 8px;
}
.nfi-audio-label {
  font-size: 11px;
  font-weight: 600;
  color: #B26A12;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nfi-audio audio {
  display: block;
  height: 32px;
  border-radius: 4px;
}
[data-theme="dark"] .nfi-card {
  background: var(--c-surface);
  border-color: var(--c-line);
}

/* Inline note widget — audio preview slot */
.inw-audio-preview {
  margin: 8px 0;
}
.inw-audio-preview audio {
  border-radius: 4px;
  height: 32px;
}

/* END V21.4.0 */

/* ============================================================
   V21.4.1 — Snippet Quick Chips bar (thay modal pop-up)
   ============================================================ */
.inw-snippet-chips {
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(248,149,29,0.04), rgba(248,149,29,0.02));
  border: 1px dashed rgba(248,149,29,0.25);
  border-radius: 8px;
}
.inw-chips-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-accent-deep, #B26A12);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.inw-chips-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.inw-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, #DCDAD3);
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms ease;
  white-space: nowrap;
}
.inw-chip:hover {
  background: var(--brand-accent, #F8951D);
  color: #fff;
  border-color: var(--brand-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(248,149,29,0.25);
}
.inw-chip.is-recent {
  background: rgba(248,149,29,0.12);
  border-color: rgba(248,149,29,0.4);
  color: var(--brand-accent-deep, #B26A12);
}
.inw-chip-icon {
  font-size: 10px;
  color: var(--brand-accent, #F8951D);
}
.inw-chip-more {
  background: transparent;
  border-style: dashed;
  color: var(--c-text-muted);
  font-weight: 700;
  letter-spacing: 1px;
}
.inw-chip-more:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-text-muted);
  transform: none;
  box-shadow: none;
}

/* END V21.4.1 */