.ax { --scan: color-mix(in srgb, var(--blue) 26%, transparent); --warm-bg: #F7E7E2; --warm-line: rgba(180, 83, 60, 0.45); --warm-ink: #9E4430;
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.2em 1.5em 3.4em;
  font-size: 1.68cqw; line-height: 1.45; color: var(--ink); background: var(--white); }
.ax .ax-top { display: flex; align-items: center; gap: 1.4em; margin-bottom: 0.9em; }
.ax .ax-top h3 { font-size: 1.35em; }
.ax .meter { margin-left: auto; display: flex; align-items: center; gap: 0.8em; font-size: 0.9em; color: var(--ink-soft); }
.ax .meter .bar { width: 11em; height: 0.5em; border-radius: 99px; background: rgba(47, 47, 47, 0.08); overflow: hidden; }
.ax .meter .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.ax .meter b { color: var(--charcoal); font-weight: 600; }
.ax .panel-title { margin-bottom: 0.7em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ax .ax-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 25fr 34fr 41fr; gap: 1.3em; }
.ax .col { min-width: 0; display: flex; flex-direction: column; }

.ax .chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.65em; border-radius: 99px; font-size: 0.72em; font-weight: 600; white-space: nowrap; transition: background 0.35s, color 0.35s, opacity 0.3s, transform 0.3s var(--ease); }
.ax .chip.wait { background: rgba(47, 47, 47, 0.06); color: var(--ink-soft); }
.ax .chip.now { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue-deep); }
.ax .chip.ok { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage-deep); }
.ax .chip.flag { background: var(--warm-bg); color: var(--warm-ink); }

.ax .srcs { display: flex; flex-direction: column; gap: 0.5em; }
.ax .src {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65em; row-gap: 0.3em; align-items: center;
  padding: 0.6em 0.7em; border: 1px solid var(--line); border-radius: 0.5em; background: var(--white); font-size: 0.82em;
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
.ax .ftype {
  grid-row: span 2; width: 3.3em; height: 4.1em; border-radius: 0.3em 1em 0.3em 0.3em; border: 1px solid var(--line-strong); background: var(--ivory);
  display: grid; place-items: end center; padding-bottom: 0.5em; font-size: 0.6em; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft);
}
.ax .ftype.t-email { color: var(--blue-deep); }
.ax .ftype.t-sheet { color: var(--sage-deep); }
.ax .src b { font-weight: 600; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .src .sub { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; min-width: 0; }
.ax .src .sub small { color: var(--ink-soft); font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .src.on { border-color: var(--blue); box-shadow: 0 0 0 0.22em var(--scan); }
.ax .src.done { background: color-mix(in srgb, var(--sage) 7%, var(--white)); border-color: color-mix(in srgb, var(--sage-deep) 28%, transparent); }
.ax .src.held { background: color-mix(in srgb, var(--warm-bg) 45%, var(--white)); border-color: var(--warm-line); }

.ax .paper-wrap { position: relative; flex: 1; min-height: 0; }
.ax .paper {
  position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column;
  padding: 1.3em 1.3em 1.1em; border: 1px solid var(--line); border-radius: 0.35em; background: #fff;
  box-shadow: 0 0.9em 2em -1.1em rgba(21, 37, 61, 0.35); font-size: 0.72em; line-height: 1.45;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.ax .paper.out { opacity: 0; transform: translateX(-1.4em); }

.ax .e-head { display: grid; gap: 0.3em; padding-bottom: 0.8em; border-bottom: 1px solid var(--line-strong); color: var(--ink-soft); }
.ax .e-head em { display: inline-block; width: 5.8em; font-style: normal; font-weight: 600; font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; }
.ax .e-head b { font-weight: 600; color: var(--charcoal); }
.ax .e-body { display: grid; gap: 0.75em; padding-top: 0.9em; }
.ax .e-body small { color: var(--ink-soft); }

.ax .k-sheet { padding: 0; }
.ax .s-bar { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.9em; background: color-mix(in srgb, var(--sage) 16%, var(--white)); border-bottom: 1px solid var(--line); font-weight: 600; color: var(--sage-deep); }
.ax .s-bar i { width: 0.9em; height: 0.9em; border-radius: 0.15em; background: var(--sage-deep); }
.ax .s-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ax .s-grid td { padding: 0.5em 0.6em; border: 1px solid var(--line); white-space: nowrap; }
.ax .s-grid td:first-child { width: 2em; text-align: center; background: var(--ivory-soft); color: var(--ink-soft); font-size: 0.85em; }
.ax .s-cols td { background: var(--ivory-soft); color: var(--ink-soft); text-align: center; font-size: 0.85em; padding: 0.25em; }
.ax .s-title { font-weight: 700; color: var(--charcoal); }
.ax .s-th td { font-weight: 600; color: var(--ink-soft); }
.ax .s-tot td { font-weight: 700; color: var(--charcoal); border-top: 1.5px solid var(--charcoal); }
.ax .s-grid .n { text-align: right; }

.ax .p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding-bottom: 0.9em; border-bottom: 2px solid var(--charcoal); }
.ax .p-vendor { display: block; font-family: var(--serif); font-size: 1.4em; font-weight: 600; line-height: 1.2; color: var(--charcoal); }
.ax .p-addr { display: block; margin-top: 0.2em; color: var(--ink-soft); font-size: 0.9em; }
.ax .p-title { text-align: right; font-weight: 700; letter-spacing: 0.16em; font-size: 1.1em; color: var(--charcoal); white-space: nowrap; }
.ax .p-title small { display: block; margin-top: 0.25em; font-weight: 500; letter-spacing: 0; font-size: 0.8em; color: var(--ink); }
.ax .p-lines { width: 100%; margin-top: 1.2em; border-collapse: collapse; }
.ax .p-lines th { text-align: left; padding: 0.35em 0; border-bottom: 1px solid var(--line-strong); font-size: 0.8em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.ax .p-lines td { padding: 0.55em 0; border-bottom: 1px solid var(--line); }
.ax .p-lines .n { text-align: right; font-variant-numeric: tabular-nums; padding-left: 0.6em; white-space: nowrap; }
.ax .p-tot { width: 64%; margin: 1em 0 0 auto; display: flex; flex-direction: column; gap: 0.15em; font-variant-numeric: tabular-nums; }
.ax .p-tot > span { display: flex; justify-content: space-between; padding: 0.12em 0.35em; }
.ax .p-tot .due { margin-top: 0.3em; padding-top: 0.45em; border-top: 1.5px solid var(--charcoal); font-weight: 700; color: var(--charcoal); }

.ax .k-receipt { align-items: center; justify-content: center; background: linear-gradient(135deg, #D9D3C8, #C9C2B5); }
.ax .rcpt {
  display: flex; flex-direction: column; gap: 0.25em; width: 74%; padding: 1.1em 1em 1.3em; transform: rotate(-2.5deg);
  background: #FBFAF6; box-shadow: 0 0.8em 1.6em -0.8em rgba(0, 0, 0, 0.45); font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; color: #3A3733;
}
.ax .r-name { text-align: center; font-weight: 700; letter-spacing: 0.08em; }
.ax .r-addr, .ax .r-date, .ax .r-thanks { text-align: center; font-size: 0.82em; color: #6B665E; }
.ax .r-date { margin-bottom: 0.5em; }
.ax .r-line { display: flex; justify-content: space-between; gap: 1em; }
.ax .r-sub { margin-top: 0.35em; padding-top: 0.35em; border-top: 1px dashed #A9A399; }
.ax .r-total { font-weight: 700; font-size: 1.1em; }
.ax .smudge { position: relative; filter: blur(0.06em); }
.ax .smudge::after { content: ''; position: absolute; left: 6%; top: -20%; width: 46%; height: 140%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 96, 64, 0.5), rgba(120, 96, 64, 0)); }
.ax .r-thanks { margin-top: 0.6em; }

.ax [data-f] { border-radius: 0.3em; transition: background 0.3s, box-shadow 0.3s; }
.ax [data-f].hl { background: color-mix(in srgb, var(--blue) 14%, transparent); box-shadow: 0 0 0 0.25em var(--scan); }
.ax [data-f].got { background: color-mix(in srgb, var(--sage) 12%, transparent); }
.ax [data-f].bad { background: var(--warm-bg); box-shadow: 0 0 0 0.25em var(--warm-line); }
.ax tbody[data-f].hl td, .ax tbody[data-f].got td { background: inherit; }
.ax tbody[data-f].hl { outline: 0.25em solid var(--scan); }
.ax .scan { position: absolute; left: 0; right: 0; top: 0; height: 3em; margin-top: -1.5em; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 14%, transparent) 50%, transparent);
  transition: transform 0.38s var(--ease), opacity 0.3s; }
.ax .scan::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--blue); opacity: 0.7; }
.ax .scan.on { opacity: 1; }

.ax .rows { display: flex; flex-direction: column; gap: 0.5em; }
.ax .row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 3.4em; align-items: center; gap: 0.6em; }
.ax .lbl { font-size: 0.68em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ax .val {
  display: block; height: 2.3em; padding: 0 0.6em; line-height: 2.3em; font-style: normal; font-size: 0.86em; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line-strong); border-radius: 0.4em; background: var(--ivory);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.ax .row.typing .val { border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 0.2em var(--scan); }
.ax .row.fill .val { border-color: color-mix(in srgb, var(--sage-deep) 32%, transparent); background: color-mix(in srgb, var(--sage) 8%, var(--white)); }
.ax .row.bad .val { border-color: var(--warm-line); background: color-mix(in srgb, var(--warm-bg) 60%, var(--white)); color: var(--warm-ink); }
.ax .conf { justify-self: end; font-size: 0.72em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ax .conf.hi { color: var(--sage-deep); }
.ax .conf.mid { color: var(--blue-deep); }
.ax .conf.low { padding: 0.15em 0.5em; border-radius: 99px; background: var(--warm-bg); color: var(--warm-ink); }
.ax .checks { display: flex; flex-wrap: wrap; gap: 0.5em; min-height: 1.75em; margin-top: 0.8em; }
.ax .checks .chip { opacity: 0; transform: scale(0.85); }
.ax .checks .chip.in { opacity: 1; transform: none; }

.ax .dest { display: flex; flex-direction: column; gap: 0.25em; margin-top: auto; padding: 0.8em 0.9em; border: 1px solid var(--line); border-radius: 0.6em; background: var(--ivory); opacity: 0.55; transition: opacity 0.35s, background 0.35s, border-color 0.35s; }
.ax .dest span { font-size: 0.68em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ax .dest b { font-weight: 600; font-size: 0.92em; color: var(--charcoal); }
.ax .dest.in { opacity: 1; }
.ax .dest.ok { border-color: color-mix(in srgb, var(--sage-deep) 32%, transparent); background: color-mix(in srgb, var(--sage) 8%, var(--white)); }
.ax .dest.held { border-color: var(--warm-line); background: color-mix(in srgb, var(--warm-bg) 60%, var(--white)); }
.ax .dest.held b { color: var(--warm-ink); }

.ax .toast {
  position: absolute; left: 50%; bottom: 0.9em; transform: translate(-50%, 1.2em); opacity: 0;
  display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1.3em; border-radius: 0.8em; white-space: nowrap;
  background: var(--charcoal); color: var(--ivory); font-size: 0.95em; box-shadow: 0 1em 2.4em -1em rgba(0, 0, 0, 0.5);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.ax .toast.show { opacity: 1; transform: translate(-50%, 0); }
.ax .toast b { color: var(--sage); font-weight: 600; }
.ax .tick-i { display: inline-block; flex-shrink: 0; width: 1.2em; height: 1.2em; border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%23FFFDF9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

.ax.still * { transition: none !important; }

@media (max-width: 700px) {
  .ax { position: relative; inset: auto; padding: 1.2em 1em 4.6em; font-size: 3.1cqw; }
  .ax .ax-top { flex-wrap: wrap; gap: 0.4em 1em; }
  .ax .meter { margin-left: 0; }
  .ax .meter .bar { width: 7em; }
  .ax .ax-grid { grid-template-columns: 1fr; gap: 1.1em; }
  .ax .col-src { display: none; }
  .ax .paper-wrap { flex: none; height: 22em; }
  .ax .dest { margin-top: 0.8em; }
  .ax .toast { white-space: normal; width: max-content; max-width: 90%; }
}

.tieout.extraction { background: var(--ivory); }