: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: 1fr;
  gap: 12px;
  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: 620px;
  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;
}

/* The step indicator lists ALL steps in a grid beneath the screen. Each step
   has a status dot: dim while pending, amber while in progress, and green +
   glowing once done (the line itself also picks up a soft green glow). */
.action-panel {
  min-width: 0;
  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;
}

.action-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

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

/* Done — green circle + slight glow */
.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);
}

.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="notify"] .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="notify"] .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);
}

.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="notify"] .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;
}

.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;
  overflow: hidden;
  transition: background 140ms var(--ease-standard), box-shadow 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 {
  background: rgba(245, 166, 35, 0.16);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.38), inset 0 0 18px rgba(245, 166, 35, 0.12);
}

.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,
.demo-shell[data-step="portal-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,
.demo-shell[data-step="check-existing"] .erp-shell,
.demo-shell[data-step="open-booking"] .erp-shell,
.demo-shell[data-step="slot-entry"] .erp-shell,
.demo-shell[data-step="dock-time-entry"] .erp-shell,
.demo-shell[data-step="confirm-booking"] .erp-shell,
.demo-shell[data-step="capture-confirmation"] .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: 8px;
}

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

.form-head span {
  padding: 5px 9px;
  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;
}

.logistics-doc-app .pdf-stage {
  padding: 18px;
}

.manifest-sheet {
  width: min(690px, 92%);
  aspect-ratio: auto;
  min-height: 422px;
  padding: 0;
}

.manifest-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.manifest-meta .pdf-field.wide {
  grid-column: span 3;
}

.manifest-table {
  gap: 6px;
  margin-top: 12px;
}

.manifest-table .table-row {
  grid-template-columns: 0.75fr 1.25fr 0.55fr 0.55fr;
}

.manifest-table .table-head {
  min-height: 28px;
}

.excel-window {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(33, 115, 70, 0.3);
  background: #f8faf8;
  color: #313136;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.excel-titlebar {
  height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 0 14px;
  background: #217346;
  color: #ffffff;
}

.excel-titlebar b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-display);
  font-size: 14px;
}

.excel-titlebar em {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-style: normal;
}

.excel-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 800;
}

.excel-formula {
  height: 30px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #d9ded9;
  background: #eef3ef;
}

.excel-formula span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #217346;
  border-right: 1px solid #d9ded9;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 700;
}

.excel-formula b {
  min-width: 0;
  padding: 0 10px;
  color: #4c4c50;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.excel-grid {
  display: grid;
  grid-template-columns: 34px 1.05fr 1.35fr 0.82fr 1.45fr 0.8fr;
  grid-auto-rows: 33px;
  padding: 0 12px 0 0;
  background: #f8faf8;
}

.excel-corner,
.excel-col,
.excel-row,
.excel-cell {
  border-right: 1px solid #dfe4df;
  border-bottom: 1px solid #dfe4df;
}

.excel-corner,
.excel-col,
.excel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef3ef;
  color: #6d746d;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
}

.excel-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #ffffff;
  color: #404041;
  font-family: var(--font-family-mono);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
}

.excel-cell.pdf-field {
  border-radius: 0;
}

.excel-cell b {
  min-width: 0;
  color: #313136;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-heading {
  grid-column: span 1;
  color: #217346;
  background: #e6f2eb;
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 800;
}

.sheet-heading.muted {
  color: #7a7a7f;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 600;
}

.label-cell,
.table-label {
  color: #217346;
  background: #eef8f2;
  font-weight: 700;
}

.table-label {
  color: #ffffff;
  background: #217346;
}

.logistics-validation .data-panel {
  display: flex;
  flex-direction: column;
}

.portal-app .erp-top {
  min-height: 46px;
}

.portal-login-card .erp-icon {
  background: linear-gradient(135deg, var(--amber), var(--brand));
}

.portal-shell {
  grid-template-columns: 170px minmax(0, 1fr);
}

.portal-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.portal-toolbar {
  margin-bottom: 12px;
}

.portal-toolbar b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 16px;
}

.portal-search {
  min-width: 128px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.045);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.reservations-board {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(160px, 0.75fr) minmax(320px, 1.6fr) minmax(160px, 0.85fr);
  gap: 10px;
}

.reservation-column {
  min-width: 0;
  min-height: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.reservation-column.primary {
  background: rgba(255, 255, 255, 0.045);
}

.reservation-column.muted {
  opacity: 0.68;
}

.reservation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reservation-head b {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reservation-head span {
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.reservation-filter {
  min-height: 26px;
  margin-bottom: 9px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.empty-reservations {
  min-height: 188px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--faint);
  font-size: 12px;
}

.reservation-card {
  position: relative;
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  transition: border-color 180ms var(--ease-standard), background 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard), opacity 180ms var(--ease-standard);
}

.reservation-card i {
  width: 5px;
  height: 100%;
  border-radius: 999px;
  background: rgba(108, 233, 166, 0.74);
}

.reservation-card strong {
  display: block;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.reservation-card b {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 12px;
  line-height: 1.2;
}

.reservation-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  line-height: 1.25;
}

.reservation-card em {
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-style: normal;
  text-align: right;
}

.reservation-card.active,
.reservation-card.updated {
  border-color: rgba(245, 166, 35, 0.58);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.12);
}

.reservation-card.updated strong {
  color: var(--green);
}

.context-menu {
  position: absolute;
  left: 38%;
  top: 238px;
  z-index: 12;
  min-width: 132px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateY(-5px) scale(0.98);
  pointer-events: none;
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}

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

.context-menu button {
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.context-menu button.active,
.context-menu button:hover {
  border-color: rgba(245, 166, 35, 0.42);
  background: rgba(245, 166, 35, 0.09);
}

.reservation-modal {
  position: absolute;
  inset: 24px 32px 28px;
  z-index: 10;
  display: grid;
  grid-template-rows: 38px 34px minmax(0, 1fr) 38px;
  border: 1px solid rgba(184, 144, 207, 0.28);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.98);
  color: var(--body);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  overflow: hidden;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.reservations-board:has(.reservation-modal.open) .reservation-column,
.reservations-board:has(.reservation-modal.open) .context-menu {
  opacity: 0.12;
  filter: blur(4px);
  transition: opacity 220ms var(--ease-standard), filter 220ms var(--ease-standard);
}

.reservation-modal.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.modal-titlebar {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 0 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
}

.modal-titlebar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

.modal-titlebar b {
  min-width: 0;
  font-family: var(--font-family-display);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-titlebar i {
  color: var(--muted);
  font-style: normal;
  font-size: 18px;
}

.modal-steps {
  display: grid;
  grid-template-columns: 0.88fr 1.56fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.025);
}

.modal-steps span {
  color: var(--muted);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
}

.modal-steps span.active {
  color: var(--green);
}

.modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 0.88fr 1.56fr 0.9fr;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.calendar-panel,
.time-panel,
.summary-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-top b,
.time-panel > b,
.summary-panel > b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.calendar-top span {
  color: var(--muted);
  font-size: 18px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-grid em,
.calendar-grid span {
  aspect-ratio: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.calendar-grid span.target {
  color: #141018;
  background: rgba(184, 144, 207, 0.88);
}

.calendar-grid span.target.active {
  color: #101511;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(108, 233, 166, 0.14);
}

.time-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-panel > span {
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
}

.time-slice {
  min-height: 32px;
  padding: 7px 11px;
  line-height: 1.25;
  border: 1px solid rgba(184, 144, 207, 0.25);
  border-radius: 6px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.055);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.time-slice.target.active,
.time-slice.selected {
  color: var(--ink);
  border-color: rgba(108, 233, 166, 0.36);
  background: rgba(108, 233, 166, 0.12);
  box-shadow: inset 0 0 0 1px rgba(108, 233, 166, 0.12), 0 0 20px rgba(108, 233, 166, 0.1);
}

.summary-panel {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.modal-field {
  min-height: 40px;
  display: grid;
  grid-template-rows: auto minmax(14px, 1fr);
  align-content: center;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgba(184, 144, 207, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.modal-field.comment {
  min-height: 58px;
}

.modal-field b:empty::before { content: "\2014"; color: var(--muted); }
.modal-field span {
  display: block;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 8.5px;
  line-height: 1.05;
  white-space: nowrap;
}

.modal-field b {
  display: block;
  min-height: 14px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 11.5px;
  line-height: 1.15;
  align-self: center;
}

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

.modal-field.active {
  border-color: rgba(245, 166, 35, 0.48);
  background: rgba(245, 166, 35, 0.08);
}

.modal-field.filled {
  border-color: rgba(108, 233, 166, 0.32);
  background: rgba(108, 233, 166, 0.075);
}

.save-reservation-button {
  justify-self: end;
  align-self: center;
  min-height: 28px;
  margin-right: 14px;
  padding: 5px 14px;
  border: 1px solid rgba(108, 233, 166, 0.28);
  border-radius: 999px;
  color: #111811;
  background: var(--green);
  font-family: var(--font-family-display);
  font-size: 11px;
  font-weight: 800;
}

.save-reservation-button.active {
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.34);
  transform: scale(0.98);
}

.reservation-success {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 22;
  width: min(330px, calc(100% - 48px));
  padding: 18px;
  border: 1px solid rgba(108, 233, 166, 0.34);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(19, 11, 25, 0.96);
  text-align: center;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.44);
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.96);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.reservation-success.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.reservation-success b {
  display: block;
  color: var(--green);
  font-family: var(--font-family-display);
  font-size: 22px;
}

.reservation-success span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.portal-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 255px);
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
}

.dock-board,
.booking-panel {
  min-width: 0;
  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);
}

.dock-board {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}

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

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

.board-head span {
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.dock-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 54px repeat(7, minmax(48px, 1fr));
  gap: 5px;
}

.dock-grid > div {
  min-height: 29px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.time-head {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.door-label {
  display: flex;
  align-items: center;
  padding-left: 6px;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.dock-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--body);
  background: rgba(184, 144, 207, 0.12) !important;
  border-color: rgba(184, 144, 207, 0.2) !important;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  line-height: 1.2;
  text-align: center;
}

.dock-block.muted {
  opacity: 0.56;
}

.dock-block em {
  color: var(--muted);
  font-style: normal;
}

.carrier-slot {
  grid-column: span 3;
  border-color: rgba(245, 166, 35, 0.44) !important;
  background: rgba(245, 166, 35, 0.1) !important;
  color: var(--ink);
  transition: transform 180ms var(--ease-standard), border-color 180ms var(--ease-standard), background 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.carrier-slot.match {
  transform: scale(1.05);
  border-color: rgba(245, 166, 35, 0.76) !important;
  box-shadow: 0 0 28px rgba(245, 166, 35, 0.2);
}

.carrier-slot.booked {
  border-color: rgba(108, 233, 166, 0.6) !important;
  background: rgba(108, 233, 166, 0.12) !important;
  color: var(--green);
}

.carrier-slot.booked em {
  color: var(--green);
}

.portal-toast {
  min-height: 39px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(108, 233, 166, 0.3);
  border-radius: 8px;
  color: var(--green);
  background: rgba(108, 233, 166, 0.07);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.portal-toast.visible {
  opacity: 1;
  transform: none;
}

.booking-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard), border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

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

.booking-panel.booked {
  border-color: rgba(108, 233, 166, 0.34);
  box-shadow: 0 0 28px rgba(108, 233, 166, 0.08);
}

.portal-field {
  min-height: 38px;
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}

.portal-field span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.portal-field b {
  display: block;
  min-height: 14px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

.portal-field.filled {
  border-color: rgba(108, 233, 166, 0.3);
  background: rgba(108, 233, 166, 0.055);
}

.booking-panel .post-button {
  width: 100%;
  min-height: 34px;
  margin-top: auto;
  font-size: 12px;
}

.record-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(500px, calc(100% - 56px));
  padding: 20px;
  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);
  transform: translate(-50%, -44%) scale(0.96);
}

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

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

.record-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.record-row b {
  color: var(--ink);
}

.record-row em {
  color: var(--green);
  font-style: normal;
}

.record-row strong {
  color: var(--muted);
  font-weight: 600;
}

.logistics-report-stage {
  overflow: hidden;
}

.logistics-complete {
  width: min(610px, calc(100% - 56px));
}

/* ============================================================================
   Compact-desktop tier (single breakpoint).
   The demo renders at one of two design widths fed by the embed wrapper:
   ~1200px (full desktop) or ~640px (this tier). Goal: windows get tighter,
   nav rails fold away, panels stack — but it stays a windowed DESKTOP scene,
   never a single-column mobile app.
   ============================================================================ */
@media (max-width: 760px) {
  .demo-shell {
    padding: 14px;
  }

  .demo-header {
    grid-template-columns: 1fr;
  }

  .replay-button {
    justify-self: start;
  }

  /* Fewer step columns on phones so labels don't get too narrow. */
  .action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
  }

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

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

  /* Portal: drop the rail, focus the active reservation column. The booking
     modal keeps its desktop calendar | time | summary layout (it fits at
     640px) so the sections never overlap. */
  .erp-shell,
  .portal-shell {
    grid-template-columns: 1fr;
  }

  .reservations-board {
    grid-template-columns: 1fr;
  }

  .reservation-column.muted {
    display: none;
  }

  /* Validation: stack each box as label-on-top, value-below so narrow columns
     don't truncate or wrap mid-line. */
  .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: the floating spotlight uses fixed pixel offsets that don't
     track the (taller, wrapped) rows on narrow widths, so it bleeds past the
     list. Replace it with a highlight on the actual row being scanned, which
     lines up exactly like the opened state. */
  .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  ·  triggered by ?embed=1 on the iframe src (engine sets the
   [data-embed] attribute). Strips the standalone page chrome so only the
   recording card shows, sized to its container by the embed wrapper.
   ============================================================================ */
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;
}

/* Bare mode (?embed=1&bare=1): drop the demo's own card frame so it blends
   straight into the host surface — no outer outline, no letterbox. */
.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, shared approach with finance) ===== */
[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);
}
[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); }
[data-theme="light"] .login-card,[data-theme="light"] .erp-login-card,[data-theme="light"] .portal-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"] .portal-app,[data-theme="light"] .erp-side,[data-theme="light"] .erp-content,
[data-theme="light"] .portal-content,[data-theme="light"] .erp-top,[data-theme="light"] .reservations-board,
[data-theme="light"] .reservation-column,[data-theme="light"] .reservation-card,[data-theme="light"] .reservation-modal,
[data-theme="light"] .modal-titlebar,[data-theme="light"] .modal-steps,[data-theme="light"] .modal-body,
[data-theme="light"] .calendar-panel,[data-theme="light"] .time-panel,[data-theme="light"] .summary-panel,
[data-theme="light"] .time-slice,[data-theme="light"] .modal-field,[data-theme="light"] .booking-panel,
[data-theme="light"] .portal-field,[data-theme="light"] .erp-field,[data-theme="light"] .invoice-form,[data-theme="light"] .line-row,
[data-theme="light"] .drive-card,[data-theme="light"] .excel-window,[data-theme="light"] .pdf-app,[data-theme="light"] .pdf-toolbar,
[data-theme="light"] .reservation-success,[data-theme="light"] .report-app,[data-theme="light"] .post-dialog,
[data-theme="light"] .record-dialog,[data-theme="light"] .completion-checklist,[data-theme="light"] .logistics-confirmation { background: #ffffff; }
[data-theme="light"] .reservation-column.primary { background: #faf7fc; }
[data-theme="light"] .excel-cell { background: rgba(29,16,34,0.015); }
[data-theme="light"] .mail-row.active { background: rgba(146,100,162,0.10); }

/* ===== 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"] .portal-login-card .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"] .primary-action,
[data-theme="light"] .new-mail-button,
[data-theme="light"] .compose-send-button,
[data-theme="light"] .save-reservation-button { color: #ffffff !important; }
/* "Extracted shipment" popup -> light surface, readable text */
[data-theme="light"] .extract-card { background: #ffffff; border-color: var(--line); }
[data-theme="light"] .extract-card > span { color: var(--brand); }
[data-theme="light"] .extract-card b { color: var(--ink); }
[data-theme="light"] .extract-card em { color: var(--ink); }
/* green Excel titlebar keeps a white heading */
[data-theme="light"] .excel-titlebar b,
[data-theme="light"] .excel-titlebar em { color: #ffffff; }
/* faint column-header row -> readable */
[data-theme="light"] .table-label { color: var(--muted); }
[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); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

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

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