: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="techdoc"] [data-app-view="techdoc"],
.demo-shell[data-view="wms"] [data-app-view="wms"],
.demo-shell[data-view="edi"] [data-app-view="edi"],
.demo-shell[data-view="dispatch"] [data-app-view="dispatch"],
.demo-shell[data-view="report"] [data-app-view="report"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.demo-shell[data-view="techdoc"] .browser-chrome,
.demo-shell[data-view="wms"] .browser-chrome,
.demo-shell[data-view="edi"] .browser-chrome,
.demo-shell[data-view="dispatch"] .browser-chrome { display: none; }

.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: 1fr;
  gap: 8px;
}

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


/* ============================================================================
   MANUFACTURING v2 — additions on top of the finance base.
   3-phase action board, Syspro multi-panel ERP, document compare, Smartsheet,
   EDI gateway, dispatch console + printer dialog. Appended last so these win.
   ============================================================================ */

/* ---- 3-phase action board (replaces the flat 4-col grid) ---- */
.phase-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 26px;
  padding-top: 4px;
}
.phase-col { min-width: 0; }
.phase-title {
  display: block;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* nested per-phase lists: single column, tight */
.phase-col .action-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ---- Syspro ERP: nav active state follows the open panel ---- */
.demo-shell[data-erp-panel="records"] [data-erp-nav="records"],
.demo-shell[data-erp-panel="so"] [data-erp-nav="so"],
.demo-shell[data-erp-panel="pricing"] [data-erp-nav="pricing"],
.demo-shell[data-erp-panel="inventory"] [data-erp-nav="inventory"] {
  color: var(--ink);
  background: rgba(184, 144, 207, 0.14);
}

/* show the ERP working shell for every ERP step except the login beat */
.demo-shell[data-step="erp-search"] .erp-shell,
.demo-shell[data-step="erp-select"] .erp-shell,
.demo-shell[data-step="erp-download"] .erp-shell,
.demo-shell[data-step="so-create"] .erp-shell,
.demo-shell[data-step="so-fields"] .erp-shell,
.demo-shell[data-step="so-lines"] .erp-shell,
.demo-shell[data-step="check-pricing"] .erp-shell,
.demo-shell[data-step="check-inventory"] .erp-shell,
.demo-shell[data-step="inventory-mismatch"] .erp-shell,
.demo-shell[data-step="process-shipping"] .erp-shell,
.demo-shell[data-step="hold-line"] .erp-shell {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ERP panel switching (driven by data-erp-panel on the shell) */
.erp-panel { display: none; }
.demo-shell[data-erp-panel="records"] .records-panel,
.demo-shell[data-erp-panel="so"] .so-panel,
.demo-shell[data-erp-panel="pricing"] .pricing-panel,
.demo-shell[data-erp-panel="inventory"] .inventory-panel { display: block; }

/* ---- Records panel: search + download + table of records ---- */
.records-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.records-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.search-ico { color: var(--muted); font-size: 14px; }
.records-search b {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 500;
}
.records-search b.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;
}
.records-table { display: grid; gap: 6px; }
.records-row {
  display: grid;
  grid-template-columns: 28px 1fr 1.25fr 1fr 0.6fr 0.7fr;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--body);
  font-family: var(--font-family-mono);
  font-size: 12px;
}
.records-head {
  color: var(--brand);
  background: rgba(184, 144, 207, 0.1);
  font-weight: 700;
}
.rec-check {
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}
.records-head .rec-check { border: 0; background: transparent; }
.rec-check.checked {
  border-color: rgba(108, 233, 166, 0.6);
  background: var(--green);
  box-shadow: 0 0 12px rgba(108, 233, 166, 0.3);
}
.rec-check.checked::after {
  content: "✓";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #06281a; font-size: 11px; font-weight: 800;
}
/* filtered: hide non-matching rows after search */
.records-panel.filtered .records-row:not(.records-head):not([data-record="target"]) { display: none; }
.records-row[data-record="target"].picked {
  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.12);
}
.records-download {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(108, 233, 166, 0.3);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.records-download.active { opacity: 1; transform: none; }
.records-download b { display: block; color: var(--ink); font-family: var(--font-family-display); font-weight: 650; }
.records-download small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.records-download em { color: var(--green); font-family: var(--font-family-mono); font-size: 11px; font-style: normal; }
.records-download .pdf-icon { background: rgba(108, 233, 166, 0.16); border-color: rgba(108, 233, 166, 0.34); }

.panel-label {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 650;
}

/* ---- Pricing / inventory check tables ---- */
.check-table { display: grid; gap: 7px; }
.check-row {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.8fr 0.9fr;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--body);
  font-family: var(--font-family-mono);
  font-size: 12px;
}
.check-head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; }
.check-row em { font-style: normal; text-align: right; }
.check-row .ok { color: var(--green); }
.check-row .bad { color: var(--amber); }
/* base check-item dim, lights amber when active, settles after */
.check-row.chk { opacity: 0.45; transition: opacity 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard); }
.check-row.chk.active {
  opacity: 1;
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.12);
}
.check-row.chk.done { opacity: 1; border-color: rgba(108, 233, 166, 0.34); background: rgba(108, 233, 166, 0.06); }
.check-row.chk.short { opacity: 1; border-color: rgba(245, 166, 35, 0.6); background: rgba(245, 166, 35, 0.1); box-shadow: 0 0 24px rgba(245, 166, 35, 0.16); }

.ship-outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.outcome-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.outcome-card.visible { opacity: 1; transform: none; }
.outcome-card b { display: block; margin-bottom: 5px; font-family: var(--font-family-display); font-size: 14px; }
.outcome-card small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ok-card.visible { border-color: rgba(108, 233, 166, 0.36); background: rgba(108, 233, 166, 0.07); }
.ok-card b { color: var(--green); }
.hold-card.visible { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.08); }
.hold-card b { color: var(--amber); }

/* ---- Document compare ---- */
.compare-app { position: relative; height: 100%; display: flex; flex-direction: column; }
.compare-stage {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: 12px;
  padding: 22px;
}
.compare-doc {
  align-self: center;
  padding: 16px;
  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);
}
.compare-doc header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.compare-doc header b { color: var(--ink); font-family: var(--font-family-mono); font-size: 12px; }
.doc-tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 700;
}
.doc-tag.amber { color: #201304; background: var(--amber); }
.doc-tag.green { color: #06281a; background: var(--green); }
.compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-family-mono);
  font-size: 12px;
}
.compare-row:last-child { margin-bottom: 0; }
.compare-row b { color: var(--muted); font-weight: 500; }
.compare-row em { color: var(--ink); font-style: normal; }
.compare-row.active {
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.12);
}
.compare-row.match { border-color: rgba(108, 233, 166, 0.36); background: rgba(108, 233, 166, 0.07); }
.compare-row.match em { color: var(--green); }
.compare-link {
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0.25;
  transition: opacity 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.compare-link.match { opacity: 1; background: linear-gradient(90deg, transparent, var(--green), transparent); }
.compare-verdict {
  margin: 0 22px 20px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.compare-verdict.visible {
  opacity: 1; transform: none;
  border-color: rgba(108, 233, 166, 0.34);
  background: rgba(108, 233, 166, 0.07);
  color: var(--green);
}

/* ---- Smartsheet (work management) ---- */
.wms-app { position: relative; height: 100%; }
.wms-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="wms-login"] .wms-login-card {
  opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto;
}
.wms-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(108, 233, 166, 0.34);
  color: #06281a; background: var(--green);
  font-size: 18px; font-weight: 800;
}
.wms-shell {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 18px;
  opacity: 0;
  transition: opacity 240ms var(--ease-standard);
}
.demo-shell[data-step="wms-search"] .wms-shell,
.demo-shell[data-step="wms-update"] .wms-shell,
.demo-shell[data-step="wms-attach"] .wms-shell { opacity: 1; }
.wms-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.wms-top > b { color: var(--ink); font-family: var(--font-family-display); font-size: 16px; font-weight: 700; }
.wms-search {
  display: flex; align-items: center; gap: 8px;
  min-width: 220px; min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.wms-search b { color: var(--ink); font-family: var(--font-family-mono); font-size: 12px; }
.wms-search b.typing::after {
  content: ""; display: inline-block; width: 7px; height: 13px; margin-left: 3px; vertical-align: -2px;
  background: var(--amber); animation: blink 700ms steps(1) infinite;
}
.wms-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 0.9fr 0.9fr 0.8fr;
  gap: 6px;
}
.wms-cell {
  min-height: 42px;
  display: flex; align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--body);
  font-family: var(--font-family-mono);
  font-size: 12px;
}
.wms-cell.head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; }
.wms-cell.target { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.045); }
.demo-shell[data-step="wms-search"] .wms-cell.target,
.demo-shell[data-step="wms-update"] .wms-cell.target,
.demo-shell[data-step="wms-attach"] .wms-cell.target {
  border-color: rgba(245, 166, 35, 0.4);
  background: rgba(245, 166, 35, 0.06);
}
.wms-cell.target.filled { border-color: rgba(108, 233, 166, 0.34); background: rgba(108, 233, 166, 0.06); color: var(--ink); }
.wms-cell b.typing::after {
  content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px;
  background: var(--amber); animation: blink 700ms steps(1) infinite;
}

/* ---- EDI gateway ---- */
.edi-app { height: 100%; display: flex; flex-direction: column; }
.edi-stage {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: stretch;
  gap: 12px;
  padding: 18px;
}
.edi-raw, .edi-structured {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.edi-raw header, .edi-structured header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.edi-raw header b, .edi-structured header b { color: var(--ink); font-family: var(--font-family-mono); font-size: 12px; }
.edi-raw pre {
  margin: 0;
  color: var(--body);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}
.edi-seg {
  display: block;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background 140ms var(--ease-standard), color 140ms var(--ease-standard);
}
.edi-seg.active { color: #201304; background: rgba(245, 166, 35, 0.82); }
.edi-arrow { align-self: center; text-align: center; color: var(--brand); font-size: 22px; }
.edi-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 36px;
  margin-bottom: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-family-mono);
  font-size: 12px;
}
.edi-field b { color: var(--muted); font-weight: 500; }
.edi-field em { color: var(--ink); font-style: normal; min-height: 14px; }
.edi-field em.typing::after {
  content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px;
  background: var(--amber); animation: blink 700ms steps(1) infinite;
}
.edi-field.filled { border-color: rgba(108, 233, 166, 0.3); background: rgba(108, 233, 166, 0.05); }
.edi-line-table { display: grid; gap: 5px; margin-top: 10px; }
.edi-lrow {
  display: grid; grid-template-columns: 1.3fr 0.6fr 0.7fr; gap: 8px;
  min-height: 28px; align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-family-mono); font-size: 11px; color: var(--body);
}
.edi-lrow.head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; }
.edi-lrow.filled { border-color: rgba(108, 233, 166, 0.3); background: rgba(108, 233, 166, 0.05); }

/* ---- Dispatch console ---- */
.dispatch-app { position: relative; height: 100%; display: flex; flex-direction: column; }
.dispatch-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding: 18px; }
.dispatch-table { display: grid; gap: 6px; align-content: start; }
.disp-row {
  display: grid; grid-template-columns: 1fr 1fr 0.9fr 0.9fr 0.9fr; gap: 8px;
  align-items: center; min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--body); font-family: var(--font-family-mono); font-size: 11.5px;
}
.disp-head { color: var(--brand); background: rgba(184, 144, 207, 0.1); font-weight: 700; }
.disp-row em { font-style: normal; color: var(--muted); }
.disp-row.routed { border-color: rgba(108, 233, 166, 0.3); background: rgba(108, 233, 166, 0.05); }
.disp-row.routed em { color: var(--green); }
.disp-row.hold { border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.07); }
.disp-row.hold em { color: var(--amber); }
.dispatch-emails { display: grid; gap: 12px; align-content: start; }
.wh-email {
  padding: 13px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.5;
  transition: opacity 200ms var(--ease-standard), border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.wh-email.active { opacity: 1; border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.06); }
.wh-email.sent { opacity: 1; border-color: rgba(108, 233, 166, 0.34); background: rgba(108, 233, 166, 0.06); }
.wh-email header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.wh-email header em { font-style: normal; font-family: var(--font-family-mono); font-size: 11px; color: var(--muted); }
.wh-email.sent header em { color: var(--green); }
.wh-email p { margin: 4px 0 0; color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.wh-email .wh-shipments { color: var(--ink); }

/* Printer settings dialog (modal over the dispatch console) */
.printer-dialog {
  position: absolute; left: 50%; top: 50%; z-index: 16;
  width: min(420px, calc(100% - 48px));
  padding: 18px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.96);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.46);
  opacity: 0;
  transform: translate(-50%, -44%) scale(0.96);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.demo-shell[data-step="printer-open"] .printer-dialog,
.demo-shell[data-step="printer-send"] .printer-dialog {
  opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto;
}
.printer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.printer-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 16px; }
.printer-head span { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.printer-select {
  position: relative;
  display: grid; grid-template-columns: 54px 1fr 16px; align-items: center; gap: 8px;
  min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.printer-select > span { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.printer-select b { color: var(--ink); font-family: var(--font-family-display); font-size: 13px; font-weight: 600; }
.printer-select .chev { color: var(--muted); font-style: normal; }
.printer-select.active { border-color: rgba(245, 166, 35, 0.55); box-shadow: 0 0 22px rgba(245, 166, 35, 0.14); }
.printer-menu {
  display: grid; gap: 6px;
  margin-top: 8px; padding: 8px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: rgba(13, 8, 18, 0.7);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}
.printer-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.printer-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;
}
.printer-menu button.active { border-color: rgba(108, 233, 166, 0.32); color: var(--ink); background: rgba(108, 233, 166, 0.07); }
.printer-jobs { display: grid; gap: 8px; margin-top: 12px; }
.printer-job {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px; 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; color: var(--body);
  opacity: 0.5;
}
.printer-job.active { opacity: 1; border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.06); }
.printer-job.done { opacity: 1; border-color: rgba(108, 233, 166, 0.34); background: rgba(108, 233, 166, 0.06); }
.printer-job em { font-style: normal; color: var(--muted); }
.printer-job.active em { color: var(--amber); }
.printer-job.done em { color: var(--green); }

/* reader message visibility for this demo's inbox steps */
.demo-shell[data-step="read-quote-email"] .reader-message,
.demo-shell[data-step="download-quote"] .reader-message { opacity: 1; transform: none; pointer-events: auto; }

/* vendor row highlight on this demo's steps */
.demo-shell[data-step="read-quote-email"] .vendor-mail,
.demo-shell[data-step="download-quote"] .vendor-mail {
  border-color: rgba(108, 233, 166, 0.32);
  background: rgba(108, 233, 166, 0.06);
}
.demo-shell[data-step="download-quote"] .attachment-card { border-color: rgba(245, 166, 35, 0.44); }

/* ===== Compact tier additions for the new views ===== */
@media (max-width: 760px) {
  .phase-board { grid-template-columns: 1fr; gap: 12px 0; }
  .phase-col .action-list { grid-template-columns: 1fr 1fr; gap: 8px 16px; }

  .records-row { grid-template-columns: 24px 1fr 1fr 0.8fr; font-size: 11px; }
  .records-row span:nth-child(5), .records-row span:nth-child(6),
  .records-head span:nth-child(5), .records-head span:nth-child(6) { display: none; }

  .compare-stage { grid-template-columns: 1fr; gap: 10px; }
  .compare-link { display: none; }

  .edi-stage { grid-template-columns: 1fr; }
  .edi-arrow { display: none; }

  .wms-grid { grid-template-columns: 1fr 1fr; }
  .wms-cell:nth-child(5n), .wms-cell:nth-child(5n-1) { display: none; }

  .dispatch-body { grid-template-columns: 1fr; }
  .disp-row { grid-template-columns: 1fr 1fr 0.9fr; font-size: 11px; }
  .disp-row span:nth-child(4), .disp-row span:nth-child(5),
  .disp-head span:nth-child(4), .disp-head span:nth-child(5) { display: none; }
}

/* ===== Light-mode touch-ups for new surfaces ===== */
[data-theme="light"] .records-row,
[data-theme="light"] .records-search,
[data-theme="light"] .records-download,
[data-theme="light"] .check-row,
[data-theme="light"] .outcome-card,
[data-theme="light"] .compare-doc,
[data-theme="light"] .compare-row,
[data-theme="light"] .compare-verdict,
[data-theme="light"] .wms-login-card,
[data-theme="light"] .wms-cell,
[data-theme="light"] .wms-search,
[data-theme="light"] .edi-raw,
[data-theme="light"] .edi-structured,
[data-theme="light"] .edi-field,
[data-theme="light"] .edi-lrow,
[data-theme="light"] .disp-row,
[data-theme="light"] .wh-email,
[data-theme="light"] .printer-dialog,
[data-theme="light"] .printer-select,
[data-theme="light"] .printer-menu,
[data-theme="light"] .printer-job { background: #ffffff; }
[data-theme="light"] .wms-icon { color: #ffffff; }
[data-theme="light"] .edi-seg.active,
[data-theme="light"] .doc-tag.amber { color: #ffffff; }

/* ============================================================================
   POINTERS ON THE RIGHT (sidebar) — the 3 phase groups stack vertically.
   Sized toward the homepage 1440x554 landscape slot. Appended last => wins.
   ============================================================================ */
.mock-workspace { grid-template-columns: minmax(0, 1fr) 340px; 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;
}
.phase-board { grid-template-columns: 1fr; gap: 13px; padding-top: 0; }
.phase-col .action-list { gap: 9px; }
@media (max-width: 760px) {
  .mock-workspace { grid-template-columns: 1fr; }
  .action-panel { max-height: none; }
  .action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
  .phase-board { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}
[data-theme="light"] .action-panel { background: rgba(255,255,255,0.7); }

/* ===== EDI raw stream fit (linked file) — the ~10 wrapping segments overflowed by 42px ===== */
.edi-stage { padding: 14px; gap: 10px; }
.edi-raw, .edi-structured { padding: 12px; }
.edi-raw header, .edi-structured header { margin-bottom: 8px; }
.edi-raw pre { font-size: 9.5px; line-height: 1.34; }
.edi-field { min-height: 32px; margin-bottom: 6px; padding: 7px 10px; }
.edi-line-table { margin-top: 8px; }
.edi-lrow { min-height: 26px; }

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

/* grouped action-list phase headings (standardized pointers) */
.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; }
.action-list li.phase.revealed, .action-list li.phase.active, .action-list li.phase.done { opacity: 1; }

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