: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;
}

.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) {
  /* recon view: keep the 3-column oversell panels within the 560px canvas at compact */
  .validation-grid { padding: 10px; gap: 8px; }
  .escalation-note { font-size: 9.5px; line-height: 1.32; padding: 7px 9px; margin-top: 5px; }
  .review-tag { margin-top: 5px; padding: 6px 10px; }
  .hold-badge { margin-top: 3px; padding: 6px 10px; }
  .exception-panel .data-row { min-height: 0; }

  .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; }

/* ============================================================================
   ASPECT-RATIO-PROOF LAYOUT FIXES (appended last, wins)
   1) PDF "Purchase Order" sheet was sized by a fixed aspect-ratio that made the
      box shorter than its content -> overflow:hidden clipped the PO-total row.
      Size it to its content instead (still capped to the stage).
   2) The ERP order form was ~26px too tall for its track and bled over the
      status bar. Contain the shell + trim the form so Post Order always clears.
   ============================================================================ */
/* --- PDF sheet --- */
.pdf-stage { padding: 16px; }
.invoice-sheet { aspect-ratio: auto !important; height: auto; max-height: 100%; width: min(430px, 60%); padding: 22px 24px; }
.invoice-head { margin-bottom: 14px; }
.invoice-meta { margin-bottom: 12px; gap: 9px; }
.invoice-meta .pdf-field { min-height: 46px; }
.invoice-table { margin-top: 12px; gap: 6px; }

/* --- ERP order form vs status bar --- */
.erp-shell { overflow: hidden; }
.erp-content { padding: 14px; }
.invoice-form.order-entry-form { min-height: 0; padding: 12px 14px; }
.form-head { margin-bottom: 8px; }
.form-grid { gap: 7px; margin-bottom: 8px; }
.erp-field { min-height: 42px; }
.line-table { gap: 4px; margin: 4px 0 6px; }
.line-row { min-height: 24px; }
.post-button { margin-top: 4px; }

/* ===== ROBUST status-bar containment (overlap-proof regardless of form height) =====
   Pin the status bar to the bottom of the ERP app and reserve its height inside the
   scrolling shell, so the order form / Post Order button can never paint over it. */
.erp-app { position: relative; }
.erp-statusbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.erp-shell { overflow: hidden; padding-bottom: 40px; }
.erp-toolbar { margin-bottom: 10px; }
.invoice-form.order-entry-form { min-height: 0; padding: 10px 12px; }
.form-head { margin-bottom: 6px; }
.form-grid { gap: 6px; margin-bottom: 6px; }
.erp-field { min-height: 38px; }
.line-table { gap: 4px; margin: 4px 0; }
.line-row { min-height: 22px; }
.post-button { margin-top: 2px; min-height: 36px; }

/* ============================================================
   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; }