.qt-tool {
  position: relative;
  --qt-ink: oklch(26% .035 238);
  --qt-muted: oklch(46% .025 238);
  --qt-line: oklch(87% .015 238);
  --qt-soft: oklch(97% .008 238);
  --qt-paper: oklch(99% .003 238);
  --qt-accent: oklch(42% .09 221);
  --qt-accent-soft: oklch(95% .023 220);
  --qt-review: oklch(41% .087 62);
  color: var(--qt-ink);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.qt-tool * { box-sizing: border-box; }
.qt-tool button, .qt-tool input, .qt-tool select { font: inherit; }
.qt-tool button { cursor: pointer; }
.qt-tool button:disabled { cursor: not-allowed; opacity: .48; }
.qt-tool :is(button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid oklch(67% .1 220); outline-offset: 3px; }
.qt-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.8rem; }
.qt-eyebrow { margin: 0 0 .6rem; font-size: .68rem; letter-spacing: .14em; font-weight: 800; color: var(--qt-accent); }
.qt-intro h2 { font-size: 1.65rem; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 .65rem; }
.qt-intro p:not(.qt-eyebrow) { margin: 0; color: var(--qt-muted); }
.qt-local { display: inline-flex; gap: .55rem; align-items: center; white-space: nowrap; color: var(--qt-muted); font-size: .73rem; padding-top: .2rem; }
.qt-local span { color: var(--qt-accent); font-size: .5rem; }
.qt-request { display: grid; grid-template-columns: minmax(240px, 1fr) 150px 110px; gap: 1rem; padding-bottom: 1.4rem; }
.qt-request label { display: block; margin-bottom: .5rem; font-size: .77rem; font-weight: 700; }
.qt-tool :is(input, select) { width: 100%; min-height: 42px; background: var(--qt-paper); color: var(--qt-ink); border: 1px solid var(--qt-line); border-radius: 5px; padding: .55rem .65rem; }
.qt-tool input::placeholder { color: oklch(53% .018 238); opacity: 1; }
.qt-tool input:hover, .qt-tool select:hover { border-color: oklch(69% .025 238); }
.qt-tool input:focus, .qt-tool select:focus { border-color: var(--qt-accent); }
.qt-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.qt-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.qt-tool .button.small { font-size: .75rem; min-height: 36px; padding: .5rem .8rem; }
.qt-text-button { border: 0; background: transparent; color: var(--qt-muted); padding: .5rem 0; font-size: .76rem !important; text-decoration: underline; text-underline-offset: 3px; }
.qt-text-button:hover { color: var(--qt-ink); }
.qt-draft { margin: 0; color: var(--qt-muted); font-size: .71rem; }
.qt-scroll-hint { display: none; }
.qt-table-scroll { overflow-x: auto; border-block: 1px solid var(--qt-line); scrollbar-gutter: stable; }
.qt-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 790px; font-size: .82rem; }
.qt-table th, .qt-table td { position: relative; text-align: left; vertical-align: top; border-bottom: 1px solid var(--qt-line); padding: .65rem .8rem; }
.qt-table thead th { padding-top: 1rem; padding-bottom: .9rem; background: var(--qt-soft); }
.qt-table thead th:first-child, .qt-table tbody th { width: 175px; position: sticky; left: 0; z-index: 1; }
.qt-table thead th:first-child { vertical-align: bottom; padding-bottom: 1.4rem; }
.qt-table tbody th { background: var(--qt-paper); font-size: .75rem; font-weight: 700; vertical-align: middle; }
.qt-table tbody th small { display: block; font-size: .64rem; color: var(--qt-muted); font-weight: 400; margin-top: .25rem; line-height: 1.45; }
.qt-table td { min-width: 190px; background: var(--qt-paper); }
.qt-table :is(input, select) { min-height: 37px; font-size: .79rem; }
.qt-supplier-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .45rem; }
.qt-supplier-top > span { font-size: .59rem; letter-spacing: .09em; color: var(--qt-muted); font-weight: 700; }
.qt-remove { background: none; border: 0; padding: .15rem 0 .15rem .4rem; font-size: .62rem !important; color: var(--qt-muted); text-decoration: underline; text-underline-offset: 3px; }
.qt-remove:hover { color: var(--qt-ink); }
.qt-table .qt-name-input { background: transparent; border: 1px solid transparent; padding-inline: .25rem; margin-left: -.25rem; width: calc(100% + .5rem); font-size: .96rem; font-weight: 700; }
.qt-table .qt-name-input:hover, .qt-table .qt-name-input:focus { border-color: var(--qt-line); background: var(--qt-paper); }
.qt-supplier-status { display: inline-block; margin-top: .4rem; min-height: 17px; color: var(--qt-muted); font-weight: 500; font-size: .65rem; }
.qt-supplier-status.qt-lowest { color: var(--qt-accent); font-weight: 800; }
.qt-supplier-status.qt-incomplete { color: var(--qt-review); }
.qt-output-row td { font-size: .83rem; padding-top: .9rem; padding-bottom: .9rem; }
.qt-total-row th, .qt-total-row td { border-bottom: 0; font-weight: 800; }
.qt-total-row td { font-size: 1.13rem; letter-spacing: -.02em; padding-block: .8rem; }
.qt-total-row td.qt-lowest-total { color: var(--qt-accent); background: var(--qt-accent-soft); }
.qt-table .qt-review-row th, .qt-table .qt-review-row td { border-bottom: none; padding-top: 1rem; padding-bottom: 1.15rem; }
.qt-table .qt-review-row th { vertical-align: top; }
.qt-review-row ul { margin: 0; padding: 0 0 0 .9rem; }
.qt-review-row li, .qt-complete-note { font-size: .68rem; line-height: 1.55; color: var(--qt-muted); }
.qt-review-row li + li { margin-top: .45rem; }
.qt-review-row li.qt-issue { color: var(--qt-review); }
.qt-result { display: flex; align-items: center; justify-content: space-between; gap: 1.7rem; padding: 1.6rem 0 1.4rem; border-bottom: 1px solid var(--qt-line); }
.qt-result > div { min-width: 0; max-width: 72ch; }
.qt-result-kicker { margin: 0 0 .45rem; color: var(--qt-review); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.qt-result-ready .qt-result-kicker { color: var(--qt-accent); }
.qt-result h3 { font-size: 1.1rem; letter-spacing: -.025em; line-height: 1.4; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.qt-result p:last-child { color: var(--qt-muted); font-size: .74rem; line-height: 1.65; margin: 0; }
.qt-result .button { flex-shrink: 0; white-space: nowrap; }
.qt-method { font-size: .75rem; color: var(--qt-muted); margin-top: 1.1rem; }
.qt-method summary { display: list-item; width: fit-content; cursor: pointer; color: var(--qt-ink); font-weight: 700; padding-block: .3rem; }
.qt-method > div { max-width: 75ch; padding-top: .4rem; }
.qt-method p { font-size: .75rem; line-height: 1.75; margin-block: .7rem; }
.qt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 850px) {
  .qt-intro { flex-direction: column; gap: .8rem; }
  .qt-request { grid-template-columns: minmax(0, 1fr) 110px; }
  .qt-item-field { grid-column: 1 / -1; }
  .qt-table { min-width: 790px; }
  .qt-scroll-hint { display: block; margin: 0 0 .7rem; color: var(--qt-muted); font-size: .68rem; }
  .qt-result { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 480px) {
  .qt-intro h2 { font-size: 1.35rem; }
  .qt-table thead th:first-child, .qt-table tbody th { width: 135px; }
  .qt-table th, .qt-table td { padding-inline: .6rem; }
  .qt-table tbody th { font-size: .69rem; }
  .qt-toolbar-actions { gap: .85rem; }
  .qt-request { gap: .8rem; }
}