:root {
  --page-bg: #0d0812;
  --ink: #ffffff;
  --body: rgba(255, 255, 255, 0.78);
  --muted: rgba(255, 255, 255, 0.56);
  --faint: rgba(255, 255, 255, 0.36);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --panel: rgba(255, 255, 255, 0.045);
  --brand: #b890cf;
  --brand-deep: #9264a2;
  --brand-soft: rgba(184, 144, 207, 0.16);
  --amber: #f5a623;
  --green: #6ce9a6;
  --blue: #84caff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(146, 100, 162, 0.2), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(245, 166, 35, 0.08), transparent 30%),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  color: var(--body);
  font-family: var(--font-family-body);
  overflow-x: hidden;
}

button {
  font: inherit;
}

.demo-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 34px);
}

.demo-header {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  margin-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}

.brand img {
  width: 150px;
  height: auto;
  display: block;
}

.header-copy {
  max-width: 820px;
}

.label-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.label-mono::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 16px rgba(245, 166, 35, 0.55);
}

h1 {
  margin: 8px 0 8px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0;
}

.header-copy p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.55;
}

.replay-button {
  justify-self: end;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 160ms var(--ease-standard), background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}

.replay-button:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 144, 207, 0.55);
  background: var(--brand-soft);
}

.recording-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.026));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.recording-window {
  padding: 14px;
}

.mock-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: stretch;
}

.mock-app {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.browser-chrome {
  height: 42px;
  display: grid;
  grid-template-columns: 10px 10px 10px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.045);
}

.browser-chrome > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.browser-chrome > span:nth-child(1) {
  background: var(--amber);
}

.browser-chrome > span:nth-child(2) {
  background: var(--brand);
}

.browser-chrome > span:nth-child(3) {
  background: var(--green);
}

.address-pill {
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-shell:not([data-view="login"]):not([data-view="inbox"]) .browser-chrome {
  display: none;
}

.demo-shell:not([data-view="login"]):not([data-view="inbox"]) .screen-canvas {
  border-radius: 8px;
}

.screen-canvas {
  position: relative;
  min-height: clamp(560px, 63vh, 700px);
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    #100a16;
  background-size: 32px 32px;
  overflow: hidden;
}

.app-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.992);
  pointer-events: none;
  transition: opacity 260ms var(--ease-standard), transform 260ms var(--ease-standard);
}

.demo-shell[data-view="login"] [data-app-view="login"],
.demo-shell[data-view="inbox"] [data-app-view="inbox"],
.demo-shell[data-view="pdf"] [data-app-view="pdf"],
.demo-shell[data-view="validation"] [data-app-view="validation"],
.demo-shell[data-view="erp"] [data-app-view="erp"],
.demo-shell[data-view="report"] [data-app-view="report"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.action-panel {
  min-width: 0;
  min-height: 100%;
  max-height: clamp(560px, 63vh, 700px);
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 144, 207, 0.34) transparent;
}

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

.action-list li {
  display: none;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
  opacity: 0.48;
  transition: opacity 180ms var(--ease-standard), border-color 180ms var(--ease-standard), background 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.action-list li.revealed {
  display: grid;
  animation: actionIn 220ms var(--ease-standard);
}

@keyframes actionIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 0.48;
    transform: none;
  }
}

.action-list b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 13px;
  line-height: 1.25;
}

.action-list li.done {
  opacity: 0.72;
}

.action-list li.active {
  opacity: 1;
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.08);
  transform: translateX(-2px);
}

.login-view {
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-card {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
}

.login-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: min(260px, calc(100% - 42px));
  min-height: 116px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.9);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.96);
  pointer-events: none;
}

.login-loading span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(184, 144, 207, 0.24);
  border-top-color: var(--amber);
  animation: spin 700ms linear infinite;
}

.login-loading b {
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.demo-shell[data-step="loading"] .login-loading {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}

.demo-shell[data-step="loading"] .login-card {
  opacity: 0.36;
  filter: blur(1px);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.email-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.35), rgba(146, 100, 162, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink);
}

.email-icon svg {
  display: block;
}

.login-logo b,
.mail-side > b,
.mail-toolbar b,
.reader-head b,
.attachment-card b,
.pdf-toolbar b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-weight: 650;
}

.input-row {
  display: block;
  margin-top: 12px;
}

.input-row span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.input-row b {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.input-row b.typing::after {
  content: "";
  width: 7px;
  height: 14px;
  margin-left: 3px;
  background: var(--amber);
  animation: blink 700ms steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.primary-action {
  width: 100%;
  min-height: 42px;
  margin-top: 18px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px rgba(146, 100, 162, 0.2);
}

.primary-action.pressed,
.attachment-card.pressed {
  transform: scale(0.99);
  filter: brightness(1.12);
}

.mail-app {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 170px minmax(230px, 0.75fr) minmax(320px, 1.25fr);
}

.mail-side {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: rgba(29, 16, 34, 0.62);
}

.mail-side > b {
  font-size: 14px;
  margin-bottom: 16px;
}

.side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

.side-item.active {
  color: var(--ink);
  background: rgba(184, 144, 207, 0.14);
}

.side-item i {
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--amber);
  color: #201304;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.mail-list {
  position: relative;
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.scan-highlight {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 58px;
  z-index: 0;
  height: 68px;
  border: 1px solid rgba(245, 166, 35, 0.58);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.04), rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.04));
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
  opacity: 0;
  transition: top 240ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 160ms var(--ease-standard), border-color 180ms var(--ease-standard);
}

.scan-highlight::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: scanPass 760ms linear infinite;
}

.demo-shell[data-step="scan-inbox"] .scan-highlight {
  opacity: 1;
}

.demo-shell[data-scan="ops"] .scan-highlight {
  top: 58px;
}

.demo-shell[data-scan="vendor"] .scan-highlight {
  top: 134px;
  border-color: rgba(108, 233, 166, 0.54);
  box-shadow: 0 0 28px rgba(108, 233, 166, 0.14);
}

.demo-shell[data-scan="facilities"] .scan-highlight {
  top: 210px;
}

@keyframes scanPass {
  from {
    left: -38%;
  }
  to {
    left: 102%;
  }
}

.mail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin-bottom: 8px;
}

.mail-toolbar span {
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.new-mail-button {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 3;
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.demo-shell[data-step="share-invoice"] .new-mail-button {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  box-shadow: 0 10px 28px rgba(146, 100, 162, 0.22);
}

.demo-shell[data-step="share-invoice"] .mail-toolbar span {
  opacity: 0;
}

.mail-row {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--body);
  text-align: left;
}

.mail-row i,
.reader-head i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.vendor-mail i,
.reader-head i {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.84), rgba(146, 100, 162, 0.9));
  color: #201304;
}

.mail-row b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 13px;
  line-height: 1.25;
}

.mail-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-row em {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}

.demo-shell[data-step="read-email"] .vendor-mail,
.demo-shell[data-step="download"] .vendor-mail {
  border-color: rgba(245, 166, 35, 0.36);
  background: rgba(245, 166, 35, 0.055);
}

.demo-shell[data-step="read-email"] .vendor-mail,
.demo-shell[data-step="download"] .vendor-mail {
  border-color: rgba(108, 233, 166, 0.32);
  background: rgba(108, 233, 166, 0.06);
}

.demo-shell[data-step="archive-email"] .vendor-mail {
  border-color: rgba(245, 166, 35, 0.36);
  background: rgba(245, 166, 35, 0.06);
}

.vendor-mail.archived {
  opacity: 0.42;
}

.vendor-mail.archived::after {
  content: "Archived";
  position: absolute;
  right: 9px;
  bottom: 8px;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.mail-reader {
  position: relative;
  padding: 16px;
  min-width: 0;
}

.reader-message {
  position: absolute;
  inset: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.reader-message {
  opacity: 0;
  transform: translateY(8px);
  padding: 18px;
  pointer-events: none;
}

.demo-shell[data-step="read-email"] .reader-message,
.demo-shell[data-step="download"] .reader-message,
.demo-shell[data-step="share-invoice"] .reader-message,
.demo-shell[data-step="archive-email"] .reader-message {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.reader-head {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 18px;
}

.reader-head > div {
  min-width: 0;
  flex: 1;
}

.archive-source-button {
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), background 180ms var(--ease-standard);
}

.demo-shell[data-step="archive-email"] .archive-source-button {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.archive-source-button.active,
.archive-source-button.archived {
  border-color: rgba(108, 233, 166, 0.34);
  color: var(--green);
  background: rgba(108, 233, 166, 0.08);
}

.reader-head small,
.attachment-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.reader-message p {
  margin: 0 0 16px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.55;
}

.read-word {
  display: inline;
  padding: 1px 2px;
  border-radius: 4px;
  transition: background 120ms var(--ease-standard), color 120ms var(--ease-standard);
}

.read-word.active {
  color: #201304;
  background: rgba(245, 166, 35, 0.82);
}

.attachment-card {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.48);
  overflow: hidden;
  transition: transform 120ms var(--ease-standard), filter 120ms var(--ease-standard), border-color 180ms var(--ease-standard);
}

.demo-shell[data-step="download"] .attachment-card {
  border-color: rgba(245, 166, 35, 0.44);
}

.compose-window {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 18;
  width: min(440px, calc(100% - 44px));
  padding: 16px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.94);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.compose-window.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.compose-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.compose-title b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 17px;
}

.compose-title span,
.compose-field span {
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.compose-field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.compose-field b,
.compose-body {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
  white-space: pre-line;
}

.compose-body {
  min-height: 84px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  line-height: 1.5;
}

.compose-field b.typing::after,
.compose-body.typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--amber);
  animation: blink 700ms steps(1) infinite;
}

.compose-attachment {
  width: fit-content;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(108, 233, 166, 0.26);
  border-radius: 999px;
  color: var(--green);
  background: rgba(108, 233, 166, 0.07);
  font-family: var(--font-family-mono);
  font-size: 11px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}

.compose-attachment.visible {
  opacity: 1;
  transform: none;
}

.compose-send-button {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 750;
}

.compose-send-button.active {
  border-color: rgba(245, 166, 35, 0.58);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.compose-sent {
  margin: 10px 0 0;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 12px;
  opacity: 0;
}

.compose-sent.visible {
  opacity: 1;
}

.pdf-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  background: rgba(184, 144, 207, 0.2);
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 800;
}

.attachment-card em {
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-style: normal;
}

.download-bar {
  position: absolute;
  left: 66px;
  right: 12px;
  bottom: 10px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.download-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--green));
  transition: width 520ms var(--ease-standard);
}

.pdf-app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pdf-toolbar {
  height: 46px;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.pdf-toolbar span,
.pdf-toolbar em {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.pdf-toolbar em {
  color: var(--amber);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.pdf-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.invoice-sheet {
  position: relative;
  width: min(440px, 72%);
  aspect-ratio: 0.76;
  padding: 28px;
  border-radius: 8px;
  background: #f4f2f6;
  color: #404041;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.invoice-head span {
  color: #643974;
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 700;
}

.invoice-head b {
  color: #643974;
  font-family: var(--font-family-display);
  font-size: 24px;
}

.invoice-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.pdf-field {
  position: relative;
  border-radius: 7px;
  transition: background 140ms var(--ease-standard), box-shadow 140ms var(--ease-standard), outline-color 140ms var(--ease-standard);
}

.invoice-meta .pdf-field {
  min-height: 54px;
  padding: 9px 10px;
  background: #e5e2e8;
}

.pdf-field span {
  color: #7a7a7f;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  font-weight: 600;
}

.pdf-field b {
  display: block;
  margin-top: 4px;
  color: #404041;
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.invoice-table {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.table-row {
  display: grid;
  grid-template-columns: 1.4fr 0.42fr 0.72fr;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #e5e2e8;
  color: #404041;
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.table-head {
  background: #d3b6e3;
  color: #331e3c;
  font-weight: 700;
}

.table-total {
  background: #b890cf;
  color: #1d1022;
  font-weight: 800;
}

.pdf-field.active {
  outline: 2px solid var(--amber);
  background: rgba(245, 166, 35, 0.2);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.26);
}

.extract-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: min(260px, calc(100% - 56px));
  padding: 13px;
  border: 1px solid rgba(108, 233, 166, 0.28);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.9);
  opacity: 0;
  transform: translateY(12px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.demo-shell[data-step="extract"] .extract-card {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}

.extract-card > span {
  display: block;
  margin-bottom: 10px;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 650;
}

.extract-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.extract-card b,
.extract-card em {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.extract-card b {
  color: var(--muted);
  font-weight: 500;
}

.extract-card em {
  color: var(--ink);
}

.workspace-app,
.erp-app,
.report-app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.workspace-top,
.erp-top {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.workspace-top b,
.erp-top b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 700;
}

.workspace-top span,
.erp-top span {
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-picker {
  position: relative;
  z-index: 12;
}

.company-trigger {
  min-height: 32px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.company-trigger.active,
.company-trigger.selected {
  border-color: rgba(245, 166, 35, 0.58);
  color: var(--ink);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.company-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 230px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.company-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.company-menu button {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--body);
  background: transparent;
  text-align: left;
  font-family: var(--font-family-display);
  font-size: 13px;
}

.company-menu button.active,
.company-menu button:hover {
  border-color: rgba(108, 233, 166, 0.32);
  color: var(--ink);
  background: rgba(108, 233, 166, 0.07);
}

.demo-shell[data-step="erp-login"] .company-picker {
  opacity: 0;
  pointer-events: none;
}

.validation-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 14px;
  padding: 18px;
  align-items: stretch;
}

.data-panel,
.status-card,
.output-log,
.csv-card,
.share-mail-card,
.archive-card,
.drive-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.data-panel {
  padding: 14px;
}

.data-panel > span,
.status-card > span,
.output-log > span,
.csv-card > span,
.share-mail-card > span,
.archive-card > span,
.drive-card > span {
  display: block;
  margin-bottom: 12px;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
}

.data-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.data-row b,
.data-row em {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.data-row b {
  color: var(--muted);
  font-weight: 500;
}

.data-row em {
  color: var(--ink);
  text-align: right;
}

.query-chip,
.ready-badge {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-family-mono);
  font-size: 12px;
  text-align: center;
}

.validation-item {
  opacity: 0.42;
  transition: opacity 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}

.validation-item.active {
  opacity: 1;
  border-color: rgba(245, 166, 35, 0.58);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 24px rgba(245, 166, 35, 0.12);
}

.validation-item.complete,
.ready-badge.complete {
  opacity: 1;
  border-color: rgba(108, 233, 166, 0.38);
  background: rgba(108, 233, 166, 0.07);
  color: var(--green);
}

.erp-app {
  overflow: hidden;
}

.erp-login-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(420px, calc(100% - 48px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.demo-shell[data-step="erp-login"] .erp-login-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.erp-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: #201304;
  background: var(--amber);
  font-family: var(--font-family-display);
  font-weight: 800;
}

.erp-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.demo-shell[data-step="select-company"] .erp-shell,
.demo-shell[data-step="new-invoice"] .erp-shell,
.demo-shell[data-step="header-entry"] .erp-shell,
.demo-shell[data-step="line-entry"] .erp-shell,
.demo-shell[data-step="post-invoice"] .erp-shell {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.erp-side {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: rgba(29, 16, 34, 0.62);
}

.erp-side > b {
  display: block;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.erp-content {
  min-width: 0;
  padding: 16px;
}

.erp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ghost-action,
.primary-action.compact {
  width: auto;
  min-height: 30px;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.ghost-action {
  border: 1px solid var(--line-strong);
  color: var(--body);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-family-display);
  font-weight: 650;
}

.ghost-action.active,
.primary-action.compact.active,
.post-button.active {
  border-color: rgba(245, 166, 35, 0.58);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.invoice-form {
  min-height: 342px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard), visibility 220ms var(--ease-standard), border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.invoice-form.open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.form-head b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 18px;
}

.form-head span {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.form-head span.posted {
  color: var(--green);
  background: rgba(108, 233, 166, 0.08);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.erp-field {
  min-height: 50px;
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.erp-field span {
  display: block;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
  margin-bottom: 6px;
}

.erp-field b {
  display: block;
  min-height: 20px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.erp-field.filled,
.erp-line.visible {
  border-color: rgba(108, 233, 166, 0.32);
  background: rgba(108, 233, 166, 0.055);
}

.erp-field.active,
.erp-line.active {
  border-color: rgba(245, 166, 35, 0.54);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 24px rgba(245, 166, 35, 0.12);
}

.line-table {
  display: grid;
  gap: 5px;
  margin: 6px 0 8px;
}

.line-row {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.8fr 0.6fr;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.line-head {
  color: var(--brand);
  background: rgba(184, 144, 207, 0.1);
  font-weight: 700;
}

.erp-line {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard);
}

.erp-line.visible {
  opacity: 1;
  transform: none;
}

.post-button {
  min-height: 40px;
  margin-top: 2px;
  padding: 9px 18px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-weight: 700;
}

.invoice-form.posted {
  border-color: rgba(108, 233, 166, 0.32);
  box-shadow: 0 0 34px rgba(108, 233, 166, 0.08);
}

.report-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.report-item {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard), border-color 180ms var(--ease-standard), background 180ms var(--ease-standard);
}

.report-item.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.report-item.active {
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.07);
}

.post-dialog,
.confirm-dialog,
.export-loading,
.export-success-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100% - 48px));
  padding: 22px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.94);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  text-align: center;
  transform: translate(-50%, -44%) scale(0.96);
}

.post-dialog.visible,
.confirm-dialog.visible,
.export-loading.visible,
.export-success-dialog.visible {
  transform: translate(-50%, -50%) scale(1);
}

.post-dialog > span {
  display: block;
  margin-bottom: 10px;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
}

.post-dialog > b,
.confirm-dialog > b,
.export-loading > b,
.export-success-dialog > b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 24px;
  line-height: 1.12;
}

.post-dialog > em {
  display: block;
  margin-top: 9px;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.post-dialog .export-button {
  margin-top: 18px;
}

.confirm-dialog div {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.confirm-dialog button {
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.055);
  font-family: var(--font-family-display);
  font-weight: 700;
}

.confirm-dialog button:last-child {
  color: #201304;
  background: var(--amber);
  border-color: rgba(245, 166, 35, 0.7);
}

.confirm-dialog button.active {
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.28);
  transform: scale(0.98);
}

.export-loading {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.export-loading i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(184, 144, 207, 0.24);
  border-top-color: var(--amber);
  animation: spin 720ms linear infinite;
}

.export-success-dialog {
  border-color: rgba(108, 233, 166, 0.34);
}

.export-success-dialog b {
  color: var(--green);
}

.status-card,
.output-log,
.csv-card,
.share-mail-card,
.archive-card,
.drive-card {
  padding: 14px;
}

.status-card b {
  display: block;
  color: var(--green);
  font-family: var(--font-family-display);
  font-size: 22px;
  line-height: 1.1;
}

.status-card em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.output-log {
  grid-column: span 2;
}

.log-row,
.archive-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--body);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.log-row b {
  color: var(--muted);
  font-weight: 500;
}

.log-row.complete span:nth-child(2),
.archive-row em {
  color: var(--green);
}

.csv-card {
  grid-column: span 2;
  position: relative;
  min-height: 214px;
}

.archive-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.archive-row b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.export-button,
.send-button,
.archive-button {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 700;
}

.export-button.active,
.send-button.active,
.archive-button.active {
  border-color: rgba(245, 166, 35, 0.58);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.export-dialog {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.74);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.export-dialog.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.export-dialog b {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
}

.export-dialog div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.export-dialog button {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.05);
}

.export-dialog button:last-child {
  color: #201304;
  background: var(--amber);
  border-color: rgba(245, 166, 35, 0.7);
}

.export-dialog button.active {
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.28);
  transform: scale(0.98);
}

.export-success,
.sent-message {
  margin: 10px 0 0;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 12px;
  opacity: 0;
}

.export-success.visible,
.sent-message.visible {
  opacity: 1;
}

.export-success {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.compose-card {
  display: grid;
  gap: 8px;
}

.compose-card div:not(.attach-chip) {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  min-height: 32px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.compose-card b {
  color: var(--muted);
  font-weight: 500;
}

.compose-card em {
  min-width: 0;
  color: var(--ink);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attach-chip {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(108, 233, 166, 0.26);
  border-radius: 999px;
  color: var(--green);
  background: rgba(108, 233, 166, 0.07);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.archive-card.archived .archive-row em {
  color: var(--green);
}

.sync-window {
  min-height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.sync-window i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(184, 144, 207, 0.24);
  border-top-color: var(--amber);
  animation: spin 720ms linear infinite;
}

.sync-window.complete i {
  border-color: rgba(108, 233, 166, 0.3);
  animation: none;
}

.sync-window b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
}

.sync-window.complete b {
  color: var(--green);
}

.completion-checklist {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(520px, calc(100% - 56px));
  padding: 20px;
  border: 1px solid rgba(108, 233, 166, 0.3);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.94);
  transform: translate(-50%, -44%) scale(0.96);
}

.completion-checklist.visible {
  transform: translate(-50%, -50%) scale(1);
}

.demo-shell[data-step="complete"] .report-item.visible:not([data-report="complete"]) {
  opacity: 0.34;
  filter: blur(1px);
}

.completion-checklist > b {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 22px;
}

.completion-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.check-item {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0.42;
}

.check-item::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.check-item.checked {
  color: var(--body);
  opacity: 1;
}

.check-item.checked::before {
  border-color: rgba(108, 233, 166, 0.6);
  background: var(--green);
  box-shadow: 0 0 14px rgba(108, 233, 166, 0.28);
}

.check-item.final {
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 750;
}


/* ============================================================================
   SHARED TREATMENTS (parity with logistics-idw-demo): single-column workspace,
   all-steps green-glow grid indicator, compact tier, embed/bare modes.
   Appended last so they override the finance base scene styles.
   ============================================================================ */

/* Screen full width; step grid below. */
.mock-workspace {
  grid-template-columns: 1fr;
  gap: 12px;
}

.screen-canvas {
  min-height: 620px;
}

/* Step indicator: ALL steps in a grid beneath the screen. Dim while pending,
   amber while in progress, green + glowing once done. */
.action-panel {
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 12px 2px 0;
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px 22px;
}

/* Also match the .revealed/.active/.done states so the finance base rules
   (which use display:grid + an amber box) can't override the flat dot+label. */
.action-list li,
.action-list li.revealed,
.action-list li.active,
.action-list li.done {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* nudge the dot to sit on the first text line */
.action-list li::before {
  margin-top: 4px;
}

.action-list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard);
}

.action-list b {
  display: block;
  font-family: var(--font-family-display);
  font-size: 13px;
  line-height: 1.3;
  color: var(--faint);
  transition: color 240ms var(--ease-standard), text-shadow 240ms var(--ease-standard);
}

.action-list li.active::before {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
}

.action-list li.active b { color: var(--ink); }

.action-list li.done::before {
  background: var(--green);
  box-shadow: 0 0 11px rgba(108, 233, 166, 0.8);
}

.action-list li.done b {
  color: var(--ink);
  text-shadow: 0 0 12px rgba(108, 233, 166, 0.3);
}

/* Calendar-style day circles (if any) stay square. */
.calendar-grid em,
.calendar-grid span {
  aspect-ratio: 1;
  min-height: 0;
}

/* ===== Compact tier ===== */
@media (max-width: 760px) {
  .action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
  }

  /* Fold app nav rails for full-width content. */
  .mail-side,
  .erp-side {
    display: none;
  }

  .mail-app {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
  }

  /* ERP: drop the reserved nav-rail track so the invoice form uses full width. */
  .erp-shell {
    grid-template-columns: 1fr;
  }

  /* Validation: stack label-on-top / value-below. */
  .data-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    min-height: 0;
    padding: 9px 11px;
  }

  .data-row b,
  .data-row em {
    text-align: left;
  }

  /* Inbox scan: align highlight to the actual scanned row (no floating bleed). */
  .scan-highlight {
    display: none;
  }

  .demo-shell[data-scan="ops"] [data-mail="ops"],
  .demo-shell[data-scan="vendor"] .vendor-mail {
    border-color: rgba(245, 166, 35, 0.5);
    background: rgba(245, 166, 35, 0.07);
  }
}

/* ===== Embed mode (?embed=1) + bare mode (?bare=1) ===== */
html[data-embed],
html[data-embed] body {
  min-height: 0;
  background: transparent;
}

html[data-embed] body { overflow: hidden; }

.demo-shell[data-embed] {
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.demo-shell[data-embed] .demo-header { display: none; }
.demo-shell[data-embed] .recording-window { padding: 10px; }

.demo-shell[data-bare] .recording-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.demo-shell[data-bare] .recording-window { padding: 0; }

/* ============================================================================
   LIGHT MODE  (prototype). Activated when <html data-theme="light"> — set by
   the engine from ?theme=light or a host postMessage. The demo is ~85% token
   driven, so most of light mode is a token flip; the rest re-skins the dark
   surfaces that were hardcoded white-on-dark.
   ============================================================================ */
[data-theme="light"] {
  --page-bg: #f4f1f9;
  --ink: #1d1022;
  --body: rgba(29, 16, 34, 0.84);
  --muted: rgba(29, 16, 34, 0.58);
  --faint: rgba(29, 16, 34, 0.42);
  --line: rgba(29, 16, 34, 0.12);
  --line-strong: rgba(29, 16, 34, 0.20);
  --panel: rgba(29, 16, 34, 0.035);
  --brand: #7e4e90;
  --brand-deep: #643974;
  --brand-soft: rgba(146, 100, 162, 0.12);
  --amber: #c77f12;
  --green: #16a34a;
  --blue: #2563eb;
  --shadow: 0 20px 50px rgba(29, 16, 34, 0.14);
}

/* Page + canvas backgrounds (grid lines flip from white to dark). */
[data-theme="light"] body {
  background:
    linear-gradient(rgba(29, 16, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 16, 34, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(146, 100, 162, 0.12), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(245, 166, 35, 0.07), transparent 30%),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}
[data-theme="light"] .screen-canvas {
  background:
    linear-gradient(rgba(29, 16, 34, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 16, 34, 0.03) 1px, transparent 1px),
    #fbf9fd;
  background-size: 32px 32px;
}
[data-theme="light"] .recording-card { background: linear-gradient(180deg, #ffffff, #faf8fc); }
[data-theme="light"] .browser-chrome { background: rgba(29, 16, 34, 0.035); }
[data-theme="light"] .address-pill { background: rgba(29, 16, 34, 0.05); }
[data-theme="light"] .action-panel { background: rgba(255, 255, 255, 0.7); }

/* Re-skin the white-veil scene surfaces as light panels (cards, panes, rows,
   tables, fields, modals). Keep them defined by their (now-dark) borders. */
[data-theme="light"] .login-card,
[data-theme="light"] .mail-app,
[data-theme="light"] .mail-side,
[data-theme="light"] .mail-list,
[data-theme="light"] .mail-reader,
[data-theme="light"] .reader-message,
[data-theme="light"] .attachment-card,
[data-theme="light"] .compose-window,
[data-theme="light"] .data-panel,
[data-theme="light"] .data-row,
[data-theme="light"] .query-chip,
[data-theme="light"] .ready-badge,
[data-theme="light"] .erp-app,
[data-theme="light"] .erp-side,
[data-theme="light"] .erp-content,
[data-theme="light"] .erp-toolbar,
[data-theme="light"] .invoice-form,
[data-theme="light"] .erp-field,
[data-theme="light"] .erp-line,
[data-theme="light"] .company-menu,
[data-theme="light"] .report-app,
[data-theme="light"] .post-dialog,
[data-theme="light"] .record-dialog,
[data-theme="light"] .completion-checklist,
[data-theme="light"] .mock-app,
[data-theme="light"] .pdf-app,
[data-theme="light"] .invoice-sheet,
[data-theme="light"] .extract-card,
[data-theme="light"] .excel-window {
  background: #ffffff;
}
[data-theme="light"] .mail-row.active,
[data-theme="light"] .side-item.active { background: rgba(146, 100, 162, 0.10); }
[data-theme="light"] .excel-grid .excel-cell,
[data-theme="light"] .erp-line { background: rgba(29, 16, 34, 0.015); }
[data-theme="light"] .primary-action,
[data-theme="light"] .compose-send-button,
[data-theme="light"] .new-mail-button { color: #ffffff; }
/* ===== Match the home page light theme (neutral grays, not lavender) ===== */
[data-theme="light"] {
  --page-bg: #f7f7f8;
  --ink: #2a2730; --body: rgba(42,39,48,0.86); --muted: rgba(42,39,48,0.58); --faint: rgba(42,39,48,0.42);
  --line: rgba(20,18,24,0.11); --line-strong: rgba(20,18,24,0.17); --panel: rgba(20,18,24,0.03);
  --shadow: 0 18px 44px rgba(40,40,42,0.12);
}
[data-theme="light"] body {
  background:
    linear-gradient(rgba(20,18,24,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,24,0.028) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(146,100,162,0.10), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(245,166,35,0.05), transparent 30%),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}
[data-theme="light"] .screen-canvas {
  background:
    linear-gradient(rgba(20,18,24,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,24,0.025) 1px, transparent 1px),
    #f7f7f8;
  background-size: 32px 32px;
}
[data-theme="light"] .recording-card { background: linear-gradient(180deg, #ffffff, #fbfbfc); }
[data-theme="light"] .browser-chrome { background: rgba(20,18,24,0.03); }
[data-theme="light"] .address-pill { background: rgba(20,18,24,0.045); }

/* ===== Light-mode polish: icon circles, buttons, dark surfaces ===== */
[data-theme="light"] .email-icon,
[data-theme="light"] .erp-icon,
[data-theme="light"] .vendor-mail i,
[data-theme="light"] .reader-head i,
[data-theme="light"] .side-item i {
  background: linear-gradient(135deg, #9264a2, #643974);
  color: #ffffff;
}
[data-theme="light"] .email-icon svg { color: #ffffff; stroke: #ffffff; }
[data-theme="light"] .post-button,
[data-theme="light"] .export-button { color: #ffffff !important; }
[data-theme="light"] .extract-card > span { color: var(--brand); }
[data-theme="light"] .extract-card b,
[data-theme="light"] .extract-card em { color: var(--ink); }
[data-theme="light"] .login-loading { background: rgba(247,247,248,0.92); border-color: var(--line); }
[data-theme="light"] .login-loading b { color: var(--ink); }
/* ============================================================================
   POINTERS ON THE RIGHT (sidebar) — overrides the below-grid step treatment.
   Sized toward the homepage 1440x554 landscape slot. Appended last => wins.
   ============================================================================ */
.mock-workspace { grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: stretch; }
.screen-canvas { min-height: 560px; }
.action-panel {
  min-width: 0; min-height: 100%; max-height: 560px;
  display: flex; flex-direction: column;
  padding: 14px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(13, 8, 18, 0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(184,144,207,0.34) transparent;
}
.action-panel::before {
  content: "IDW actions"; display: block; margin-bottom: 12px;
  color: var(--brand); font-family: var(--font-family-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.action-list { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (max-width: 760px) {
  .mock-workspace { grid-template-columns: 1fr; }
  .action-panel { max-height: none; }
  .action-panel::before { display: none; }
  .action-list { grid-template-columns: 1fr 1fr; gap: 9px 16px; }
}
[data-theme="light"] .action-panel { background: rgba(255,255,255,0.7); }

/* ============================================================================
   RETAIL / E-COMMERCE (Distribution Desk) additions — built on the Finance base.
   New views (inventory export + reconciliation workbook), the oversell hero,
   the reconciliation report, and the phased right-hand step list.
   Appended last so it wins.
   ============================================================================ */

/* Reveal the two new views. */
.demo-shell[data-view="inventory"] [data-app-view="inventory"],
.demo-shell[data-view="tracker"]   [data-app-view="tracker"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---- Phased right-hand step list -------------------------------------------- */
.action-list li.phase {
  margin-top: 10px;
  padding: 0 0 2px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.action-list li.phase:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.action-list li.phase::before { display: none; }
.action-list li.phase b {
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---- Inventory export view (two download buttons) --------------------------- */
.inventory-app { height: 100%; display: flex; flex-direction: column; }
.export-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; padding: 20px; align-content: center;
}
.export-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}
.export-card.done { border-color: rgba(108, 233, 166, 0.34); box-shadow: 0 0 30px rgba(108,233,166,0.07); }
.export-card h3 { margin: 0; color: var(--ink); font-family: var(--font-family-display); font-size: 17px; }
.export-card .src { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.export-meta {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: rgba(255,255,255,0.03);
  font-family: var(--font-family-mono); font-size: 12px;
}
.export-meta b { color: var(--muted); font-weight: 500; }
.export-meta em { color: var(--ink); font-style: normal; }
.dl-button {
  min-height: 40px; margin-top: auto;
  border: 1px solid rgba(184, 144, 207, 0.38); border-radius: 999px;
  color: var(--ink); background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display); font-size: 13px; font-weight: 700;
}
.dl-button.active { border-color: rgba(245, 166, 35, 0.58); box-shadow: 0 0 26px rgba(245, 166, 35, 0.16); transform: scale(0.99); }
.dl-button.done { background: rgba(108, 233, 166, 0.1); border-color: rgba(108, 233, 166, 0.4); color: var(--green); }
.dl-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; }
.dl-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--green)); transition: width 560ms var(--ease-standard); }
.dl-status { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.dl-status.done { color: var(--green); }

/* ---- Reconciliation workbook (spreadsheet skin) ---------------------------- */
.tracker-view { height: 100%; display: grid; place-items: center; padding: 24px; }
.tracker-card {
  width: min(760px, 94%); overflow: hidden; border-radius: 8px;
  background: #eef6ef; color: #264232; box-shadow: 0 22px 60px rgba(0,0,0,0.34);
}
.tracker-head {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; background: #217346; color: #fff;
  font-family: var(--font-family-display); font-weight: 800;
}
.tracker-head small { font-weight: 600; opacity: 0.9; }
.tracker-formula {
  height: 32px; display: grid; grid-template-columns: 44px 1fr;
  border-bottom: 1px solid rgba(33,115,70,0.18); color: #2b5f43;
  font-family: var(--font-family-mono); font-size: 12px;
}
.tracker-formula span, .tracker-formula b { display: flex; align-items: center; padding: 0 12px; }
.tracker-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 0.9fr 1fr; font-family: var(--font-family-mono); font-size: 12px; }
.tracker-cell {
  min-height: 46px; display: flex; align-items: center; padding: 0 14px;
  border-right: 1px solid rgba(33,115,70,0.14); border-bottom: 1px solid rgba(33,115,70,0.14);
  background: rgba(255,255,255,0.6); color: #264232;
}
.tracker-cell.head { color: #fff; background: #217346; font-weight: 850; }
.tracker-cell.target { background: rgba(245,166,35,0.16); }
.tracker-cell.match { color: #17492c; }
.tracker-cell.variance { color: #8a2b2b; background: rgba(245,166,35,0.32); box-shadow: inset 0 0 0 2px rgba(196,92,42,0.42); font-weight: 850; }
.tracker-cell.variance-status { color: #8a2b2b; background: rgba(245,166,35,0.22); font-weight: 850; }

/* ---- Reconciliation checks + oversell HERO --------------------------------- */
.validation-item.exception { opacity: 1; }
.validation-item.exception.active,
.validation-item.exception.complete {
  border-color: rgba(255, 143, 143, 0.6);
  background: rgba(255, 143, 143, 0.12);
  box-shadow: 0 0 26px rgba(255, 143, 143, 0.14);
  color: var(--red, #ff8f8f);
}
.exception-panel { border-color: rgba(255, 143, 143, 0.3) !important; }
.hold-badge {
  margin-top: 4px; padding: 9px 11px; border: 1px solid rgba(255,143,143,0.5);
  border-radius: 999px; color: #ff8f8f; background: rgba(255,143,143,0.1);
  font-family: var(--font-family-mono); font-size: 11px; text-align: center;
  opacity: 0.4; transition: opacity 200ms var(--ease-standard);
}
.demo-shell[data-step="flag-hold"] .hold-badge { opacity: 1; }
.escalation-note {
  margin-top: 10px; padding: 13px; border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 8px; color: var(--amber); background: rgba(245, 166, 35, 0.1);
  font-family: var(--font-family-mono); font-size: 11.5px; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.demo-shell[data-step="flag-hold"] .escalation-note { opacity: 1; transform: none; }

/* ---- Reconciliation report (reuses report-view stage) ---------------------- */
.recon-report {
  position: absolute; left: 50%; top: 50%;
  width: min(640px, calc(100% - 48px)); padding: 22px;
  border: 1px solid rgba(184, 144, 207, 0.34); border-radius: 8px;
  background: rgba(19, 11, 25, 0.96); box-shadow: 0 22px 60px rgba(0,0,0,0.42);
  transform: translate(-50%, -44%) scale(0.96);
}
.recon-report.visible { transform: translate(-50%, -50%) scale(1); }
.recon-report > b { display: block; margin-bottom: 4px; color: var(--ink); font-family: var(--font-family-display); font-size: 20px; }
.recon-report > span { display: block; margin-bottom: 14px; color: var(--brand); font-family: var(--font-family-mono); font-size: 11px; font-weight: 700; }
.recon-table { display: grid; gap: 5px; }
.recon-row {
  display: grid; grid-template-columns: 1.1fr 0.7fr 0.7fr 0.7fr 1fr; gap: 8px; align-items: center;
  min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255,255,255,0.035); font-family: var(--font-family-mono); font-size: 11px; color: var(--body);
}
.recon-row.head { color: var(--brand); background: rgba(184,144,207,0.1); font-weight: 700; }
.recon-row .matched { color: var(--green); font-weight: 700; }
.recon-row .hold { color: var(--amber); font-weight: 700; }
.recon-row.flagged { border-color: rgba(245,166,35,0.42); background: rgba(245,166,35,0.07); }
.recon-summary { margin-top: 12px; color: var(--muted); font-family: var(--font-family-mono); font-size: 11.5px; line-height: 1.5; }
.recon-report .export-button { margin-top: 16px; width: 100%; }

/* ---- ERP shell reveal for the retail step names ---------------------------- */
.demo-shell[data-step="new-order"] .erp-shell,
.demo-shell[data-step="header-entry"] .erp-shell,
.demo-shell[data-step="line-entry"] .erp-shell,
.demo-shell[data-step="post-order"] .erp-shell,
.demo-shell[data-step="posted"] .erp-shell {
  opacity: 1; transform: none; pointer-events: auto;
}
.demo-shell[data-step="new-order"] .order-entry-form,
.demo-shell[data-step="header-entry"] .order-entry-form,
.demo-shell[data-step="line-entry"] .order-entry-form,
.demo-shell[data-step="post-order"] .order-entry-form,
.demo-shell[data-step="posted"] .order-entry-form { } /* form .open is driven by the scenario */

/* ---- Email login card (sign into email before composing) ------------------- */
.email-login-card {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  width: min(420px, calc(100% - 48px)); padding: 24px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: rgba(255, 255, 255, 0.055); box-shadow: 0 18px 50px rgba(0,0,0,0.36);
  opacity: 0; transform: translate(-50%, -46%) scale(0.98); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.demo-shell[data-step="email-login"] .email-login-card {
  opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto;
}
.demo-shell[data-step="email-login"] .mail-app { filter: blur(1px); opacity: 0.5; }
.demo-shell[data-step="email-loading"] .email-login-card { opacity: 0.4; filter: blur(1px); }
.demo-shell[data-step="email-loading"] .mail-app { filter: blur(1px); opacity: 0.5; }

/* Compose "New email" button visible during the compose/send phase. */
.demo-shell[data-step="compose"] .new-mail-button,
.demo-shell[data-step="send"] .new-mail-button {
  opacity: 1; transform: none; pointer-events: auto;
  box-shadow: 0 10px 28px rgba(146, 100, 162, 0.22);
}

/* ============================================================================
   v2 fixes — inventory lives inside the ERP Inventory tab; export button +
   confirm dialog in that window; solid email sign-in over a darkened inbox.
   Appended last so it wins.
   ============================================================================ */

/* ERP side-nav active state, driven by step (replaces the static .active). */
.demo-shell[data-step="new-order"]      [data-erp-nav="orders"],
.demo-shell[data-step="header-entry"]   [data-erp-nav="orders"],
.demo-shell[data-step="line-entry"]     [data-erp-nav="orders"],
.demo-shell[data-step="post-order"]     [data-erp-nav="orders"],
.demo-shell[data-step="posted"]         [data-erp-nav="orders"],
.demo-shell[data-step="pull-vendor"]    [data-erp-nav="inventory"],
.demo-shell[data-step="pull-system"]    [data-erp-nav="inventory"],
.demo-shell[data-step="report"]         [data-erp-nav="inventory"],
.demo-shell[data-step="export-confirm"] [data-erp-nav="inventory"],
.demo-shell[data-step="export-loading"] [data-erp-nav="inventory"],
.demo-shell[data-step="export-done"]    [data-erp-nav="inventory"] {
  color: var(--ink);
  background: rgba(184, 144, 207, 0.14);
}

/* Keep the ERP shell visible through the whole inventory phase. */
.demo-shell[data-step="pull-vendor"]    .erp-shell,
.demo-shell[data-step="pull-system"]    .erp-shell,
.demo-shell[data-step="report"]         .erp-shell,
.demo-shell[data-step="export-confirm"] .erp-shell,
.demo-shell[data-step="export-loading"] .erp-shell,
.demo-shell[data-step="export-done"]    .erp-shell {
  opacity: 1; transform: none; pointer-events: auto;
}

/* Swap the ERP content between the order form and the inventory panel. */
.inventory-panel { display: none; }
.demo-shell[data-step="pull-vendor"]    .inventory-panel,
.demo-shell[data-step="pull-system"]    .inventory-panel,
.demo-shell[data-step="report"]         .inventory-panel,
.demo-shell[data-step="export-confirm"] .inventory-panel,
.demo-shell[data-step="export-loading"] .inventory-panel,
.demo-shell[data-step="export-done"]    .inventory-panel { display: block; }

.demo-shell[data-step="pull-vendor"]    .erp-toolbar,
.demo-shell[data-step="pull-system"]    .erp-toolbar,
.demo-shell[data-step="report"]         .erp-toolbar,
.demo-shell[data-step="export-confirm"] .erp-toolbar,
.demo-shell[data-step="export-loading"] .erp-toolbar,
.demo-shell[data-step="export-done"]    .erp-toolbar,
.demo-shell[data-step="pull-vendor"]    .order-entry-form,
.demo-shell[data-step="pull-system"]    .order-entry-form,
.demo-shell[data-step="report"]         .order-entry-form,
.demo-shell[data-step="export-confirm"] .order-entry-form,
.demo-shell[data-step="export-loading"] .order-entry-form,
.demo-shell[data-step="export-done"]    .order-entry-form { display: none; }

/* Within the inventory panel: downloads first, then the report + export. */
.inv-report { display: none; }
.demo-shell[data-step="report"]         .inv-report,
.demo-shell[data-step="export-confirm"] .inv-report,
.demo-shell[data-step="export-loading"] .inv-report,
.demo-shell[data-step="export-done"]    .inv-report { display: block; }
.demo-shell[data-step="report"]         .inv-downloads,
.demo-shell[data-step="export-confirm"] .inv-downloads,
.demo-shell[data-step="export-loading"] .inv-downloads,
.demo-shell[data-step="export-done"]    .inv-downloads { display: none; }

.inv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.inv-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 18px; }
.inv-head span { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.inv-downloads .export-grid { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inventory-panel .export-card { padding: 16px; gap: 10px; }
.inventory-panel .export-card h3 { font-size: 16px; }
.recon-report-inner { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.recon-report-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.recon-report-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 17px; }
.recon-report-head span { color: var(--brand); font-family: var(--font-family-mono); font-size: 11px; font-weight: 700; }
.recon-report-inner .export-button { width: 100%; margin-top: 14px; }

/* Export confirm/loading/success dialogs float above the ERP content. */
.erp-app .confirm-dialog,
.erp-app .export-loading,
.erp-app .export-success-dialog { z-index: 20; }

/* ---- Email sign-in: solid panel over a properly darkened inbox ------------- */
.reader-placeholder { height: 100%; display: grid; place-items: center; color: var(--faint); font-family: var(--font-family-mono); font-size: 12px; }
.email-login-card {
  z-index: 30;
  background: #15101c;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
}
.demo-shell[data-step="email-login"]   .mail-app,
.demo-shell[data-step="email-loading"] .mail-app { opacity: 0.08; filter: blur(3px); }
.demo-shell[data-step="complete"]      .mail-app { opacity: 0.14; filter: blur(3px); }

/* ============================================================================
   v3 polish — review fixes (both QA passes).
   ============================================================================ */

/* (Visual #4) Vendor Portal sign-in gets a distinct box/distribution glyph + tint
   so it doesn't read as a clone of the Email Client sign-in. */
.email-icon.portal-icon {
  background: linear-gradient(135deg, rgba(132, 201, 255, 0.55), rgba(146, 100, 162, 0.85));
}

/* (Visual #1) Reconciliation checks view gets real app chrome: badge + toolbar. */
.ws-badge {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-right: 9px;
  border-radius: 6px; border: 1px solid rgba(245, 166, 35, 0.4);
  background: rgba(245, 166, 35, 0.16); color: var(--amber);
  font-family: var(--font-family-display); font-size: 12px; font-weight: 800;
  vertical-align: middle;
}
.workspace-top b { display: inline-flex; align-items: center; }
.ws-toolbar {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}
.ws-tab {
  padding: 5px 11px; border-radius: 999px;
  color: var(--muted); font-family: var(--font-family-mono); font-size: 11px;
}
.ws-tab.active { color: var(--ink); background: rgba(184, 144, 207, 0.16); }
.ws-status { margin-left: auto; color: var(--amber); font-family: var(--font-family-mono); font-size: 11px; }

/* (Visual #2) ERP form labels + line-grid header more legible; line striping. */
.erp-field span { font-size: 11px; color: rgba(255, 255, 255, 0.62); }
.line-head { font-size: 11px; color: var(--brand-strong, #d3b6e3); background: rgba(184, 144, 207, 0.16); }
.line-row.erp-line:nth-of-type(odd) { background: rgba(255, 255, 255, 0.05); }
.line-row.erp-line:nth-of-type(even) { background: rgba(255, 255, 255, 0.025); }

/* (Visual #3) Order document sits inside the window with breathing room. */
.invoice-sheet { width: min(420px, 60%); aspect-ratio: 0.82; max-height: 92%; }

/* (Logic Minor 1) Export dialogs: solid card + scrim over the report behind. */
.demo-shell[data-step="export-confirm"] .erp-shell,
.demo-shell[data-step="export-loading"] .erp-shell,
.demo-shell[data-step="export-done"]    .erp-shell { opacity: 0.5; filter: blur(2px); }
.erp-app .confirm-dialog,
.erp-app .export-loading,
.erp-app .export-success-dialog {
  background: #16101e;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
}

/* (Logic Minor 2) Final rail dot turns green at completion. */
.demo-shell[data-step="complete"] .action-list li[data-action="complete"].active::before {
  background: var(--green); box-shadow: 0 0 11px rgba(108, 233, 166, 0.8);
}
.demo-shell[data-step="complete"] .action-list li[data-action="complete"].active b {
  color: var(--ink); text-shadow: 0 0 12px rgba(108, 233, 166, 0.3);
}

/* (Logic Minor 3) Post Order press reads clearly. */
#postOrderButton.active {
  transform: scale(0.97);
  filter: brightness(1.15);
  border-color: rgba(245, 166, 35, 0.72);
  box-shadow: 0 0 30px rgba(245, 166, 35, 0.32);
}

/* (Logic Minor 5) Workbook fx formula text contrast. */
.tracker-formula b { color: #1c4a32; font-weight: 600; }
.tracker-formula span { color: #2b5f43; font-weight: 700; }

/* ============================================================================
   v4 — flow fixes + ERP status bar + inventory SKU grid (generic labels only).
   ============================================================================ */

/* (Flow) Purchase-order table now carries a SKU column. */
.invoice-table .table-row { grid-template-columns: 0.8fr 1.5fr 0.4fr 0.72fr; }

/* (UI #6) Inventory: compact source/download cards + a real SKU data grid. */
.inv-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.inv-source {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.04);
  transition: border-color 180ms var(--ease-standard);
}
.inv-source.done { border-color: rgba(108, 233, 166, 0.34); }
.inv-source-top { display: flex; align-items: center; justify-content: space-between; }
.inv-source-top b { color: var(--ink); font-family: var(--font-family-display); font-size: 14px; }
.inv-source .src { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.inv-source .dl-button { min-height: 32px; margin-top: 2px; }

.inv-grid { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.inv-grid-row {
  display: grid; grid-template-columns: 0.8fr 1.6fr 1fr 1fr; align-items: center;
  min-height: 40px; border-bottom: 1px solid var(--line);
  font-family: var(--font-family-mono); font-size: 12px;
}
.inv-grid-row:last-child { border-bottom: 0; }
.inv-grid-row > span, .inv-grid-row > b { padding: 0 12px; border-right: 1px solid var(--line); height: 100%; display: flex; align-items: center; }
.inv-grid-row > span:last-child, .inv-grid-row > b:last-child { border-right: 0; }
.inv-grid-row.head { color: var(--brand-strong, #d3b6e3); background: rgba(184, 144, 207, 0.14); font-weight: 700; }
.inv-grid-row b { color: var(--ink); justify-content: flex-end; font-weight: 700; }

/* (UI #2) ERP status bar — generic record/company/user/status cues. */
.erp-statusbar {
  display: none; align-items: center; gap: 20px;
  min-height: 30px; padding: 0 16px;
  border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  color: var(--muted); font-family: var(--font-family-mono); font-size: 10.5px;
}
.erp-statusbar .sb-status { margin-left: auto; color: var(--green); }
.demo-shell[data-step="new-order"]      .erp-statusbar,
.demo-shell[data-step="header-entry"]   .erp-statusbar,
.demo-shell[data-step="line-entry"]     .erp-statusbar,
.demo-shell[data-step="post-order"]     .erp-statusbar,
.demo-shell[data-step="posted"]         .erp-statusbar,
.demo-shell[data-step="pull-vendor"]    .erp-statusbar,
.demo-shell[data-step="pull-system"]    .erp-statusbar,
.demo-shell[data-step="report"]         .erp-statusbar,
.demo-shell[data-step="export-confirm"] .erp-statusbar,
.demo-shell[data-step="export-loading"] .erp-statusbar,
.demo-shell[data-step="export-done"]    .erp-statusbar { display: flex; }

/* (Flow) Human-in-the-loop tag on the held line. */
.review-tag {
  margin-top: 8px; padding: 8px 11px;
  border: 1px solid rgba(132, 201, 255, 0.42); border-radius: 999px;
  color: var(--blue, #84caff); background: rgba(132, 201, 255, 0.08);
  font-family: var(--font-family-mono); font-size: 11px; text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.demo-shell[data-step="flag-hold"] .review-tag { opacity: 1; transform: none; }


/* ============================================================================
   NON-PROFIT (Donor operations) v2 — CRM-centric restructure.
   The Donor CRM is the hub for Phases 1-3: a single crm view whose content
   switches by [data-crm-state] (pending · donations · donor-database ·
   receipts). Accounting + Email are separate views. Built on the Retail/
   Finance base; appended last so it wins.
   ============================================================================ */

/* ---- View reveal (any NEW data-view must be added here) -------------------- */
.demo-shell[data-view="crm"]  [data-app-view="crm"],
.demo-shell[data-view="acct"] [data-app-view="acct"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Donor sign-in glyph tint (distinct from email). */
.email-icon.donor-icon {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.5), rgba(146, 100, 162, 0.85));
}

/* ============================================================================
   DONOR CRM HUB (reuses .erp-app / .erp-shell / .erp-side)
   ============================================================================ */
.crm-app { overflow: hidden; }
.crm-shell { opacity: 1; transform: none; pointer-events: auto; }
.crm-content { position: relative; padding: 16px; display: flex; flex-direction: column; min-height: 0; }

.crm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.crm-heading { color: var(--ink); font-family: var(--font-family-display); font-size: 18px; font-weight: 700; }
.crm-sub { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.crm-tools { display: flex; align-items: center; gap: 12px; }
.pull-summary {
  padding: 4px 11px; border-radius: 999px; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  font-family: var(--font-family-mono); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pull-summary.done { color: var(--green); background: rgba(108, 233, 166, 0.08); border-color: rgba(108, 233, 166, 0.36); }
#extractAllButton, #generateReceiptsButton, #createDonorButton { width: auto; }

/* CRM panes — only the active [data-crm-state] pane is shown */
.crm-pane { display: none; flex-direction: column; min-height: 0; }
.crm-app[data-crm-state="pending"]        .crm-pane[data-crm-pane="pending"],
.crm-app[data-crm-state="dedup"]          .crm-pane[data-crm-pane="pending"],
.crm-app[data-crm-state="donations"]      .crm-pane[data-crm-pane="donations"],
.crm-app[data-crm-state="donor-database"] .crm-pane[data-crm-pane="donor-database"],
.crm-app[data-crm-state="batches"]        .crm-pane[data-crm-pane="batches"],
.crm-app[data-crm-state="receipts"]       .crm-pane[data-crm-pane="receipts"] {
  display: flex;
  animation: paneIn 240ms var(--ease-standard);
}
@keyframes paneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* CRM nav active state follows the crm-state (dedup keeps Pending lit) */
.crm-app[data-crm-state="pending"]        [data-crm-nav="pending"],
.crm-app[data-crm-state="dedup"]          [data-crm-nav="pending"],
.crm-app[data-crm-state="donations"]      [data-crm-nav="donations"],
.crm-app[data-crm-state="donor-database"] [data-crm-nav="donor-database"],
.crm-app[data-crm-state="batches"]        [data-crm-nav="batches"],
.crm-app[data-crm-state="receipts"]       [data-crm-nav="receipts"] {
  color: var(--ink); background: rgba(184, 144, 207, 0.14);
}

/* ---- Pending donations table ---------------------------------------------- */
/* Capped height so the 12 sources overflow; the scenario auto-scrolls top to
   bottom while pulling so each source flips Queued -> Pulling -> Pulled in view. */
.intake-table {
  display: grid; gap: 5px; min-height: 0; max-height: 380px; overflow: hidden;
  scroll-behavior: smooth;
}
.intake-row {
  display: grid; grid-template-columns: 1.5fr 1.1fr 0.85fr 0.5fr; gap: 10px; align-items: center;
  min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); font-family: var(--font-family-mono); font-size: 11.5px;
  transition: border-color 180ms var(--ease-standard), background 180ms var(--ease-standard);
}
.intake-head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; min-height: 30px; }
.src-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-family: var(--font-family-display); font-weight: 650; font-size: 12.5px; }
.src-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #6c757d); flex: none; }
.src-type { color: var(--muted); }
.src-pill {
  justify-self: start; padding: 3px 10px; border-radius: 999px;
  color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  font-family: var(--font-family-mono); font-size: 10px; font-weight: 600;
}
.src-pill.pulling { color: var(--amber); background: rgba(245, 166, 35, 0.1); border-color: rgba(245, 166, 35, 0.4); }
.src-pill.pulled  { color: var(--green); background: rgba(108, 233, 166, 0.08); border-color: rgba(108, 233, 166, 0.36); }
.src-count { justify-self: end; color: var(--ink); font-weight: 700; font-size: 13px; }
.intake-row.pulling { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.07); }
.intake-row.pulled  { border-color: rgba(108, 233, 166, 0.28); background: rgba(108, 233, 166, 0.045); }

/* ---- Donations queue ------------------------------------------------------- */
.donation-table { display: grid; gap: 6px; }
.don-row {
  display: grid; grid-template-columns: 0.85fr 0.85fr 0.9fr 0.6fr 0.95fr 0.8fr; gap: 10px; align-items: center;
  min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); font-family: var(--font-family-mono); font-size: 12px;
  transition: border-color 180ms var(--ease-standard), background 180ms var(--ease-standard);
}
.don-row.head, .don-head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; min-height: 34px; }
.don-row .d-first, .don-row .d-last { color: var(--ink); font-family: var(--font-family-display); font-weight: 650; }
.don-row .d-chan, .don-row .d-amt { color: var(--body); }
.d-match { color: var(--muted); }
.d-region { color: var(--muted); justify-self: start; }
.don-row.active { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.07); }
.don-row.resolved { border-color: rgba(108, 233, 166, 0.28); background: rgba(108, 233, 166, 0.045); }
.d-match.matched { color: var(--green); font-weight: 700; }
.d-match.newdonor { color: var(--blue); font-weight: 700; }
.d-region.set { color: var(--ink); font-weight: 700; }
.d-region.region-missing { color: var(--amber); font-weight: 700; }
.d-last.d-last-missing { color: var(--amber); font-weight: 700; }
.d-first.active, .d-last.active { color: var(--amber); }
.d-last.fixed, .d-first.fixed { color: var(--green); }
.don-row.hero { border-color: rgba(245, 166, 35, 0.55); background: rgba(245, 166, 35, 0.08); box-shadow: 0 0 24px rgba(245,166,35,0.1); }
.don-row.hero.resolved { border-color: rgba(108, 233, 166, 0.36); background: rgba(108, 233, 166, 0.06); box-shadow: none; }

/* ---- Daily batch (export) -------------------------------------------------- */
.batch-table { display: grid; gap: 6px; }
.batch-row {
  display: grid; grid-template-columns: 1fr 0.7fr 0.9fr 1fr; gap: 10px; align-items: center;
  min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); font-family: var(--font-family-mono); font-size: 12px; color: var(--body);
}
.batch-head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; min-height: 32px; }
.batch-row span:first-child { color: var(--ink); font-family: var(--font-family-display); font-weight: 650; }
.batch-row span:last-child { color: var(--ink); }
.batch-total { color: var(--ink); background: rgba(184, 144, 207, 0.12); font-weight: 700; }
.batch-export-card {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin-top: 14px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: rgba(13, 8, 18, 0.5);
  opacity: 0; transform: translateY(10px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard), border-color 240ms var(--ease-standard);
}
.batch-export-card.visible { opacity: 1; transform: none; }
.batch-export-card.done { border-color: rgba(108, 233, 166, 0.36); background: rgba(108, 233, 166, 0.05); }
.batch-file-icon {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid rgba(108, 233, 166, 0.34); background: rgba(108, 233, 166, 0.12);
  color: var(--green); font-family: var(--font-family-mono); font-size: 11px; font-weight: 800;
}
.batch-file-meta { min-width: 0; }
.batch-file-meta b { display: block; color: var(--ink); font-family: var(--font-family-display); font-size: 14px; font-weight: 700; }
.batch-file-meta small { display: block; margin-top: 2px; color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.batch-export-state {
  padding: 5px 12px; border-radius: 999px; color: var(--amber);
  background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.4);
  font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.batch-export-state.done { color: var(--green); background: rgba(108, 233, 166, 0.1); border-color: rgba(108, 233, 166, 0.4); }
#exportBatchButton { width: auto; }
#exportBatchButton.active { border-color: rgba(245, 166, 35, 0.58); box-shadow: 0 0 22px rgba(245, 166, 35, 0.16); }

/* ---- Donor database (search-driven) --------------------------------------- */
.db-search {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.03);
}
.db-search-label { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.db-search-box {
  min-width: 0; display: flex; align-items: center; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.06);
}
.db-search-box b { color: var(--ink); font-family: var(--font-family-mono); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.db-search-box b.typing::after { content: ""; width: 7px; height: 14px; margin-left: 3px; background: var(--amber); animation: blink 700ms steps(1) infinite; }
.db-search-button { min-height: 30px; }
.db-search-button.active { border-color: rgba(245, 166, 35, 0.58); box-shadow: 0 0 22px rgba(245, 166, 35, 0.16); }

.db-results { position: relative; min-height: 0; }
.db-record {
  padding: 16px; border: 1px solid rgba(108, 233, 166, 0.28); border-radius: 8px; background: rgba(108, 233, 166, 0.04);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.db-record.visible { opacity: 1; transform: none; pointer-events: auto; }
.db-record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.db-record-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 16px; font-weight: 700; }
.db-copied {
  padding: 4px 11px; border-radius: 999px; color: var(--green);
  background: rgba(108, 233, 166, 0.1); border: 1px solid rgba(108, 233, 166, 0.4);
  font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 700;
  opacity: 0; transform: translateY(-3px); transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}
.db-copied.visible { opacity: 1; transform: none; }
.db-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.db-field { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.035); }
.db-field span { display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--font-family-mono); font-size: 9.5px; }
.db-field b { display: block; min-height: 16px; color: var(--ink); font-family: var(--font-family-display); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.db-region-field { border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.06); }
.db-region-field.copied { border-color: rgba(108, 233, 166, 0.4); background: rgba(108, 233, 166, 0.08); }
.db-region-field.copied b { color: var(--green); }

.db-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 20px; border: 1px dashed var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, 0.02);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.db-empty.visible { opacity: 1; transform: none; pointer-events: auto; }
.db-empty-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted);
  font-family: var(--font-family-display); font-size: 20px; font-weight: 800;
}
.db-empty b { color: var(--ink); font-family: var(--font-family-display); font-size: 16px; }
.db-empty small { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
#createDonorButton.active { border-color: rgba(245, 166, 35, 0.58); box-shadow: 0 0 22px rgba(245, 166, 35, 0.16); }

/* ---- CRM status bar -------------------------------------------------------- */
.crm-statusbar {
  display: flex; align-items: center; gap: 20px; margin-top: auto;
  min-height: 30px; padding: 0 2px; padding-top: 14px;
  color: var(--muted); font-family: var(--font-family-mono); font-size: 10.5px;
}
.crm-statusbar .sb-status { margin-left: auto; color: var(--green); }

/* Dim + blur the CRM shell while any centered overlay is open (scrim). */
.crm-app:has(.report-item.visible) .crm-shell {
  filter: blur(4px); opacity: 0.12;
  transition: opacity 220ms var(--ease-standard), filter 220ms var(--ease-standard);
}
/* dim the donor list behind the generated receipt sheet */
.crm-view:has(.receipt-sheet.rendered) .rcpt-table {
  opacity: 0.1; filter: blur(3px);
  transition: opacity 240ms var(--ease-standard), filter 240ms var(--ease-standard);
}

/* ============================================================================
   CENTERED OVERLAYS (reuse showReport / .report-item visible/active)
   ============================================================================ */

/* De-duplication window */
.dedup-window {
  position: absolute; left: 50%; top: 50%; z-index: 22;
  width: min(540px, calc(100% - 48px)); padding: 20px;
  border: 1px solid rgba(184, 144, 207, 0.34); border-radius: 8px;
  background: #15101c; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate(-50%, -44%) scale(0.96); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.dedup-window.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.dedup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dedup-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 18px; }
.dedup-status { color: var(--amber); font-family: var(--font-family-mono); font-size: 11px; font-weight: 600; }
.dedup-status.done { color: var(--green); }
.dedup-list { display: grid; gap: 5px; }
.dedup-row {
  display: grid; grid-template-columns: 1.3fr 1.1fr 0.7fr auto; gap: 10px; align-items: center;
  min-height: 32px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255, 255, 255, 0.03); font-family: var(--font-family-mono); font-size: 11.5px; color: var(--body);
  transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), opacity 220ms var(--ease-standard);
}
.dedup-head-row { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; min-height: 28px; }
.dedup-row span:first-child { color: var(--ink); font-family: var(--font-family-display); font-weight: 650; }
.dedup-row.scan { border-color: rgba(184, 144, 207, 0.5); background: rgba(184, 144, 207, 0.08); }
.dedup-row.dupe { border-color: rgba(245, 166, 35, 0.6); background: rgba(245, 166, 35, 0.1); }
.dedup-row.removed { opacity: 0.32; text-decoration: line-through; }
.dd-tag {
  justify-self: end; padding: 2px 9px; border-radius: 999px; color: var(--amber);
  background: rgba(245, 166, 35, 0.12); border: 1px solid rgba(245, 166, 35, 0.5);
  font-family: var(--font-family-mono); font-size: 9.5px; font-weight: 700; white-space: nowrap;
  opacity: 0; transition: opacity 160ms var(--ease-standard);
}
.dd-tag.visible { opacity: 1; }
.dedup-confirm {
  margin: 12px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-family-mono); font-size: 11px; text-align: center;
}
.dedup-confirm.done { color: var(--green); border-color: rgba(108, 233, 166, 0.36); background: rgba(108, 233, 166, 0.08); }

/* No results popup (donor-database failed search) */
.noresults-window {
  position: absolute; left: 50%; top: 50%; z-index: 22;
  width: min(360px, calc(100% - 48px)); display: grid; place-items: center; gap: 10px; padding: 26px 22px;
  border: 1px solid rgba(245, 166, 35, 0.4); border-radius: 8px;
  background: #15101c; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); text-align: center;
  opacity: 0; transform: translate(-50%, -44%) scale(0.96); pointer-events: none;
  transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.noresults-window.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.nr-icon {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(245, 166, 35, 0.45); color: var(--amber);
  background: rgba(245, 166, 35, 0.08); font-family: var(--font-family-display); font-size: 22px; font-weight: 800;
}
.noresults-window b { color: var(--ink); font-family: var(--font-family-display); font-size: 17px; }
.noresults-window small { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; line-height: 1.5; }

/* Region record missing window (HERO) */
.region-missing-window {
  position: absolute; left: 50%; top: 50%; z-index: 21;
  width: min(500px, calc(100% - 48px)); padding: 20px;
  border: 1px solid rgba(245, 166, 35, 0.45); border-radius: 8px;
  background: #15101c; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate(-50%, -44%) scale(0.96); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.region-missing-window.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.region-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.region-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 18px; }
.region-status { color: var(--amber); font-family: var(--font-family-mono); font-size: 11px; font-weight: 600; }
.region-status.done { color: var(--green); }
.region-lookup { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.rl-field { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 24px; }
.rl-field span { color: var(--muted); font-family: var(--font-family-mono); font-size: 10.5px; }
.rl-field b { color: var(--ink); font-family: var(--font-family-mono); font-size: 12px; font-weight: 600; }
.rl-resolve {
  margin-top: 4px; padding: 9px 11px; border: 1px solid rgba(245, 166, 35, 0.4); border-radius: 8px;
  color: var(--amber); background: rgba(245, 166, 35, 0.08);
  font-family: var(--font-family-mono); font-size: 11px; text-align: center;
}
.rl-resolve.done { color: var(--green); border-color: rgba(108, 233, 166, 0.4); background: rgba(108, 233, 166, 0.08); font-weight: 700; }
.region-note {
  margin: 12px 0 0; padding: 11px 13px; border: 1px solid rgba(245, 166, 35, 0.45); border-radius: 8px;
  color: var(--amber); background: rgba(245, 166, 35, 0.1);
  font-family: var(--font-family-mono); font-size: 11px; line-height: 1.5;
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.region-note.visible { opacity: 1; transform: none; }

/* Create new donor popup */
.record-dialog {
  position: absolute; left: 50%; top: 50%; z-index: 23;
  width: min(560px, calc(100% - 48px)); padding: 20px;
  border: 1px solid rgba(184, 144, 207, 0.34); border-radius: 8px;
  background: #15101c; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate(-50%, -44%) scale(0.96); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.record-dialog.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.record-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 18px; }
.record-badge {
  padding: 5px 11px; border-radius: 999px; color: var(--blue);
  background: rgba(132, 201, 255, 0.08); border: 1px solid rgba(132, 201, 255, 0.4);
  font-family: var(--font-family-mono); font-size: 11px; font-weight: 600;
}
.record-badge.created { color: var(--green); background: rgba(108, 233, 166, 0.08); border-color: rgba(108, 233, 166, 0.36); }
.record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rec-field {
  min-height: 46px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard);
}
.rec-field span { display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--font-family-mono); font-size: 9.5px; }
.rec-field b { display: block; min-height: 16px; color: var(--ink); font-family: var(--font-family-display); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.rec-field.active { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.07); }
.rec-field.filled { border-color: rgba(108, 233, 166, 0.28); background: rgba(108, 233, 166, 0.05); }
.rec-field b.typing::after {
  content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px; vertical-align: -1px;
  background: var(--amber); animation: blink 700ms steps(1) infinite;
}
.record-save-button {
  width: 100%; min-height: 38px; margin-top: 14px;
  border: 1px solid rgba(184, 144, 207, 0.38); border-radius: 999px; color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display); font-size: 13px; font-weight: 700;
}
.record-save-button.active { border-color: rgba(245, 166, 35, 0.58); box-shadow: 0 0 26px rgba(245, 166, 35, 0.16); transform: scale(0.99); }

/* Tax receipts generated window */
.receipts-window {
  position: absolute; left: 50%; top: 50%; z-index: 22;
  width: min(380px, calc(100% - 48px)); display: grid; place-items: center; gap: 10px; padding: 26px 22px;
  border: 1px solid rgba(108, 233, 166, 0.4); border-radius: 8px;
  background: #15101c; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); text-align: center;
  opacity: 0; transform: translate(-50%, -44%) scale(0.96); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.receipts-window.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.rw-icon {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--green); background: rgba(108, 233, 166, 0.1); border: 1px solid rgba(108, 233, 166, 0.4);
}
.receipts-window b { color: var(--ink); font-family: var(--font-family-display); font-size: 17px; }
.receipts-window small { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; line-height: 1.5; }

/* ============================================================================
   RECEIPTS PANE (checkbox list + rendered receipt sheet)
   ============================================================================ */
.crm-app[data-crm-state="receipts"] .crm-pane[data-crm-pane="receipts"] {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px;
}
.rcpt-table { display: grid; gap: 6px; align-content: start; }
.rcpt-row {
  display: grid; grid-template-columns: 30px minmax(0, 1.2fr) 0.9fr 0.7fr; gap: 10px; align-items: center;
  min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); font-family: var(--font-family-mono); font-size: 12px;
  transition: border-color 180ms var(--ease-standard), background 180ms var(--ease-standard);
}
.rcpt-head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; min-height: 30px; }
.rc-check {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(255, 255, 255, 0.05);
}
.rcpt-head .rc-check { border: 0; background: transparent; }
.rc-check i {
  width: 11px; height: 11px; opacity: 0; transform: scale(0.6); transition: opacity 140ms var(--ease-standard), transform 140ms var(--ease-standard);
  background:
    linear-gradient(45deg, transparent 44%, #15101c 44%, #15101c 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #15101c 44%, #15101c 56%, transparent 56%);
}
.rc-check.checked { border-color: rgba(108, 233, 166, 0.55); background: var(--green); }
.rc-check.checked i { opacity: 1; transform: none; }
.rcpt-row .rc-donor { color: var(--ink); font-family: var(--font-family-display); font-weight: 650; }
.rcpt-row .rc-num { color: var(--body); }
.rc-status { justify-self: start; color: var(--muted); }
.rcpt-row.selected { border-color: rgba(108, 233, 166, 0.28); background: rgba(108, 233, 166, 0.04); }
.rcpt-row.active { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.07); }
.rcpt-row.issued { border-color: rgba(108, 233, 166, 0.3); background: rgba(108, 233, 166, 0.05); }
.rc-status.issued { color: var(--green); font-weight: 700; }

/* The sample receipt renders as a CENTERED overlay over the receipts pane so the
   FULL card is always visible (never clipped by the table or the status bar). */
.receipt-stage { position: static; }
.receipt-sheet {
  position: absolute; left: 50%; top: 50%; z-index: 24;
  width: min(330px, calc(100% - 40px)); max-height: calc(100% - 28px); height: auto;
  padding: 18px 20px;
  border-radius: 8px; background: #f4f2f6; color: #404041;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55); overflow: auto;
  opacity: 0; transform: translate(-50%, -44%) scale(0.97); pointer-events: none;
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.receipt-sheet.rendered { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.receipt-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.receipt-head span { color: #643974; font-family: var(--font-family-display); font-size: 12px; font-weight: 700; }
.receipt-head b { color: #643974; font-family: var(--font-family-display); font-size: 16px; letter-spacing: 0.02em; }
.receipt-reg { margin-bottom: 11px; color: #7a7a7f; font-family: var(--font-family-mono); font-size: 9.5px; }
.receipt-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.receipt-meta .rcpt-field.addr { grid-column: 1 / -1; }
.rcpt-field { min-height: 42px; padding: 7px 9px; border-radius: 7px; background: #e5e2e8; }
.rcpt-field span { color: #7a7a7f; font-family: var(--font-family-mono); font-size: 8.5px; font-weight: 600; }
.rcpt-field b { display: block; margin-top: 3px; color: #404041; font-family: var(--font-family-display); font-size: 11px; font-weight: 700; line-height: 1.2; }
.receipt-amount { display: grid; gap: 5px; }
.ra-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 5px 10px; border-radius: 6px; background: #e5e2e8; color: #404041; font-family: var(--font-family-mono); font-size: 10.5px; }
.ra-row b { font-weight: 800; }
.ra-total { background: #b890cf; color: #1d1022; }
.receipt-foot { margin-top: 10px; color: #7a7a7f; font-family: var(--font-family-mono); font-size: 9px; text-align: center; }

/* ============================================================================
   ACCOUNTING SYSTEM (reuses .erp-app shell + login pattern)
   ============================================================================ */
.acct-app { overflow: hidden; }
.acct-login-card {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  width: min(420px, calc(100% - 48px)); padding: 24px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: #15101c; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  opacity: 0; transform: translate(-50%, -46%) scale(0.98); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.demo-shell[data-step="acct-login"] .acct-login-card,
.demo-shell[data-step="acct-loading"] .acct-login-card {
  opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto;
}
/* During login the accounting content stays fully hidden behind a blank
   backdrop (mirrors the retail/finance ERP login that hides erp-shell). */
.demo-shell[data-step="acct-loading"] .acct-login-card span,
.demo-shell[data-step="acct-loading"] .acct-login-card b { opacity: 0.5; }

.acct-shell { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard); }
.demo-shell[data-step="post-totals"] .acct-shell,
.demo-shell[data-step="posted"]      .acct-shell { opacity: 1; transform: none; pointer-events: auto; }

.demo-shell[data-step="post-totals"] [data-acct-nav="donations"],
.demo-shell[data-step="posted"]      [data-acct-nav="donations"] {
  color: var(--ink); background: rgba(184, 144, 207, 0.14);
}

/* Acct content owns a bounded height; the form scrolls inside it if needed so the
   Post button always sits clearly above the status bar (never collides). */
.acct-shell .erp-content { display: flex; flex-direction: column; min-height: 0; padding: 10px 16px 6px; }
.acct-form { display: block; min-height: 0; flex: 1 1 auto; opacity: 1; transform: none; visibility: visible; pointer-events: auto; overflow-y: auto; }
.acct-form .post-button { margin-top: 10px; }
.acct-section-label { margin: 8px 0 4px; color: var(--brand); font-family: var(--font-family-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.acct-form .erp-field b.typing::after,
.acct-line span.typing::after, .region-line span.typing::after {
  content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px; vertical-align: -1px;
  background: var(--amber); animation: blink 700ms steps(1) infinite;
}
/* Acct form override: shrink to fit the bounded content (no min-height push). */
.acct-form.invoice-form { min-height: 0; flex: 0 0 auto; padding: 10px 12px; overflow: visible; }
.acct-form .form-head { margin-bottom: 6px; }
.acct-form .form-head b { font-size: 15px; }
.acct-form .form-head span { padding: 3px 9px; }
.acct-form .form-grid { margin-bottom: 4px; gap: 6px; }
.acct-form .erp-field { min-height: 32px; padding: 4px 9px; }
.acct-form .erp-field span { font-size: 9px; margin-bottom: 1px; }
.acct-form .erp-field b { font-size: 12px; }
.acct-form .line-table { gap: 3px; margin: 2px 0 3px; }
.acct-form .line-row { min-height: 20px; padding: 1px 9px; font-size: 10px; }
.acct-form .acct-section-label { margin: 5px 0 2px; font-size: 9px; }
.acct-form .post-button { min-height: 32px; margin-top: 7px; padding: 6px 18px; }
.region-lines .line-row { grid-template-columns: 0.9fr 0.6fr 0.7fr 0.9fr; }
.acct-lines .line-row { grid-template-columns: 0.6fr 1.6fr 0.7fr; }
.region-line span[data-rl], .acct-line span[data-gl-amt] { color: var(--ink); }
.region-line.active, .acct-line.active { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.07); }
.region-line.filled, .acct-line.filled { border-color: rgba(108, 233, 166, 0.28); background: rgba(108, 233, 166, 0.045); }
.region-total { color: var(--ink); background: rgba(184, 144, 207, 0.12); font-weight: 700; }
.region-total.filled { border-color: rgba(108, 233, 166, 0.4); }
.erp-field.filled, .erp-field[data-acct-field].filled { border-color: rgba(108, 233, 166, 0.28); background: rgba(108, 233, 166, 0.05); }
.erp-field.active { border-color: rgba(245, 166, 35, 0.54); background: rgba(245, 166, 35, 0.08); }

.acct-statusbar { display: none; }
.demo-shell[data-step="post-totals"] .acct-statusbar,
.demo-shell[data-step="posted"]      .acct-statusbar { display: flex; }
#postAcctButton.active {
  transform: scale(0.97); filter: brightness(1.15);
  border-color: rgba(245, 166, 35, 0.72); box-shadow: 0 0 30px rgba(245, 166, 35, 0.32);
}
.acct-form.posted { border-color: rgba(108, 233, 166, 0.32); box-shadow: 0 0 34px rgba(108, 233, 166, 0.08); }

/* ============================================================================
   EMAIL — two attachment chips + step reveals for the new step names
   ============================================================================ */
.compose-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.compose-attachments .compose-attachment { margin-top: 0; }
.demo-shell[data-step="email-summary"] .new-mail-button,
.demo-shell[data-step="compose"] .new-mail-button,
.demo-shell[data-step="send"] .new-mail-button {
  opacity: 1; transform: none; pointer-events: auto; box-shadow: 0 10px 28px rgba(146, 100, 162, 0.22);
}
.demo-shell[data-step="email-login"]   .mail-app,
.demo-shell[data-step="email-loading"] .mail-app { opacity: 0.08; filter: blur(3px); }
.demo-shell[data-step="complete"]      .mail-app { opacity: 0.14; filter: blur(3px); }

/* Final rail dot turns green at completion (mirrors retail). */
.demo-shell[data-step="complete"] .action-list li[data-action="complete"].active::before {
  background: var(--green); box-shadow: 0 0 11px rgba(108, 233, 166, 0.8);
}
.demo-shell[data-step="complete"] .action-list li[data-action="complete"].active b {
  color: var(--ink); text-shadow: 0 0 12px rgba(108, 233, 166, 0.3);
}

/* Light mode parity for the new dark surfaces. */
[data-theme="light"] .record-dialog,
[data-theme="light"] .region-missing-window,
[data-theme="light"] .dedup-window,
[data-theme="light"] .receipts-window,
[data-theme="light"] .acct-login-card { background: #ffffff; }
[data-theme="light"] .intake-row,
[data-theme="light"] .don-row,
[data-theme="light"] .rcpt-row,
[data-theme="light"] .dedup-row { background: rgba(29, 16, 34, 0.015); }
[data-theme="light"] .record-save-button { color: #ffffff; }
[data-theme="light"] .rc-check.checked i {
  background:
    linear-gradient(45deg, transparent 44%, #ffffff 44%, #ffffff 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #ffffff 44%, #ffffff 56%, transparent 56%);
}

/* ============================================================
   UNIFIED PILL BUTTON STANDARD (global) — sleek, consistent
   height across every CTA/pill button in every flow.
   Appended last so it wins the cascade. Height = ~32px.
   ============================================================ */
.primary-action,
.primary-action.compact,
.ghost-action,
.ghost-action.db-search-button,
.db-search-button,
.ghost-button,
.company-trigger,
.company-trigger.selected,
.post-button,
.export-button,
.archive-source-button,
.compose-send-button,
.save-reservation-button,
.record-save-button,
.new-mail-button,
.dl-button,
.replay-button {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  border-radius: 999px;
}

.action-list li.phase { grid-column: 1 / -1; }