/* RFQ workspace visual layer (tabs, comparison, negotiation, new RFQ).
   Builds on the "sourcing telemetry" layer in app.css: quiet white planes under the RFQ hero,
   data shown as heat, bars, rings and tracks. Class prefix: rq- (shared), plus one per tab. */

/* ---------- Shared bits ---------- */
.rq-av { --av: var(--steel); --sz: 32px; width: var(--sz); height: var(--sz); border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--av) 13%, #fff); color: var(--av); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 22%, #fff);
  font-size: calc(var(--sz) * .36); font-weight: 720; font-variation-settings: var(--cond); letter-spacing: .01em; line-height: 1; user-select: none; }
.rq-avs { display: flex; align-items: center; }
.rq-avs .rq-av { box-shadow: 0 0 0 2px #fff; }
.rq-avs .rq-av + .rq-av { margin-left: -7px; }
.rq-avs .small { margin-left: 8px; }
.rq-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rq-who .badge { margin-left: 4px; }
.rq-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-note { padding: 10px 20px; border-bottom: 1px solid var(--rule-2); background: #FAFBFD; }
.rq-bar { display: block; height: 6px; border-radius: 99px; background: var(--rule-2); overflow: hidden; }
.rq-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sky-ink); transform-origin: left; animation: rq-grow .6s cubic-bezier(.3,.7,.2,1) both; }
@keyframes rq-grow { from { transform: scaleX(0); } }
.rq-empty { text-align: center; padding: 34px 20px 30px; color: var(--steel); }
.rq-empty .title { color: var(--ink); font-weight: 680; font-size: 15px; margin: 6px 0 2px; }
svg.rq-ill[aria-hidden="true"] { width: 120px; height: 64px; display: block; margin: 0 auto; }
.rq-k { font-size: 12.5px; font-weight: 600; color: var(--steel); }
.rq-big { font-size: 26px; font-weight: 720; font-variation-settings: var(--cond); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.01em; }
.rq-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 620; white-space: nowrap;
  background: var(--rule-2); color: var(--ink-2); }
.rq-chip svg { width: 12px; height: 12px; }
.rq-chip.green { background: var(--descent-soft); color: var(--win); }
.rq-chip.blue { background: var(--sky-soft); color: var(--sky-ink); }
.rq-chip.amber { background: var(--amber-soft); color: var(--amber-ink); }
.rq-chip.red { background: var(--red-soft); color: var(--red); }
.rq-chip.violet { background: var(--violet-soft); color: var(--violet); }
.rq-chip.oxide { background: var(--oxide-soft); color: var(--oxide-btn-h); }
.rq-rank { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--rule-2); color: var(--ink-2);
  font-size: 12px; font-weight: 720; font-variation-settings: var(--cond); font-variant-numeric: tabular-nums; }
.rq-rank.r1 { background: var(--night); color: #fff; }
/* Ring gauge (score / readiness / fit) — conic, no JS. */
.rq-ring, .rq-fit { --p: 0; --c: var(--sky-ink); --sz: 64px; width: var(--sz); height: var(--sz); border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--rule-2) 0); position: relative; }
.rq-ring::before, .rq-fit::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.rq-ring > *, .rq-fit > * { position: relative; }
.rq-ring .num { font-size: 20px; font-weight: 720; font-variation-settings: var(--cond); }
.rq-ring.good { --c: var(--descent); } .rq-ring.mid { --c: #E09B1A; } .rq-ring.low { --c: var(--red); }
.rq-fit { --sz: 36px; --c: var(--sky-ink); }
.rq-fit::before { inset: 3.5px; }
.rq-fit .num { font-size: 12.5px; font-weight: 720; font-variation-settings: var(--cond); }

/* ---------- Suppliers tab ---------- */
.rq-gate-t { font-weight: 680; font-size: 15px; margin-bottom: 2px; }
.rq-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.rq-stage { padding: 16px 20px 16px; position: relative; min-width: 0; }
.rq-stage + .rq-stage { border-left: 1px solid var(--rule-2); }
.rq-stage + .rq-stage::before { content: ""; position: absolute; left: -6px; top: 22px; width: 10px; height: 10px; background: #fff; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); transform: rotate(45deg); }
.rq-stage .k { font-size: 12.5px; font-weight: 600; color: var(--steel); }
.rq-stage .v { font-size: 28px; font-weight: 720; font-variation-settings: var(--cond); line-height: 1.1; margin: 2px 0 8px; }
.rq-stage .s { font-size: 12px; color: var(--steel); margin-top: 6px; }
.rq-stage.eng .rq-bar > span { background: var(--sky); }
.rq-stage.quo .rq-bar > span { background: var(--descent); }
.rq-stage.quo .v { color: var(--win); }
.rq-stage.out .rq-bar > span { background: #F3B4A6; }
@media (max-width: 760px) { .rq-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rq-stage:nth-child(3) { border-left: 0; } .rq-stage:nth-child(n+3) { border-top: 1px solid var(--rule-2); } .rq-stage:nth-child(3)::before { display: none; } .rq-stage { padding: 14px 16px; } }
.rq-pips .pips { max-width: 160px; }
.rq-pips .pips-lbl { display: none; }
.rq-sup td { padding-top: 11px; padding-bottom: 11px; }
.rq-track { display: flex; flex-direction: column; gap: 3px; min-width: 132px; }
.rq-track .dots { display: inline-flex; align-items: center; }
.rq-track .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--steel-2); background: #fff; flex: none; }
.rq-track .dots i.on { background: var(--sky-ink); border-color: var(--sky-ink); }
.rq-track .dots i.on:last-child { background: var(--descent); border-color: var(--descent); }
.rq-track .dots i.x { background: #F3B4A6; border-color: #E07A62; }
.rq-track .dots b { width: 18px; height: 2px; background: var(--rule); }
.rq-track .dots b.on { background: var(--sky-ink); }
.rq-rem { display: inline-flex; align-items: center; gap: 3px; }
.rq-rem i { width: 4px; height: 12px; border-radius: 2px; background: #E2A23B; opacity: .75; }
.rq-rem .num { margin-left: 4px; font-weight: 650; }
.rq-link .btn svg { width: 14px; height: 14px; }
.pick-card .rq-av { margin-top: 1px; }

/* ---------- Overview tab ---------- */
.ov-facts-card { overflow: hidden; }
.ov-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.ov-fact { padding: 14px 20px; background: #fff; min-width: 0; }
.ov-fact.wide { grid-column: span 2; }
.ov-fact .v { font-weight: 650; font-size: 14.5px; margin-top: 2px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ov-desc { padding: 16px 20px 18px; font-size: 14px; line-height: 1.6; max-width: 92ch; }
.ov-facts:last-child { border-bottom: 0; }
@media (max-width: 700px) {
  .ov-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-fact { padding: 12px 16px; }
  .ov-desc { padding: 14px 16px; }
}
.ov-items td { vertical-align: top; }
.ov-ln { display: inline-grid; place-items: center; min-width: 24px; height: 22px; border-radius: 6px; background: var(--rule-2); color: var(--steel); font-size: 12px; font-weight: 650; font-variation-settings: var(--cond); }
.ov-desc-cell { font-weight: 560; min-width: 220px; }
.ov-qty { font-size: 17px; font-weight: 720; font-variation-settings: var(--cond); letter-spacing: -.01em; }
.ov-unit { font-size: 12px; color: var(--steel); font-weight: 600; }
.ov-terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 32px; align-items: start; }
@media (max-width: 760px) { .ov-terms { grid-template-columns: minmax(0, 1fr); } }
.ov-wbar { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; }
.ov-wbar span { min-width: 4px; transform-origin: left; animation: rq-grow .7s cubic-bezier(.3,.7,.2,1) both; }
.ov-wleg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.ov-wleg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.ov-wleg b { font-weight: 700; margin-left: 2px; }
.ov-int { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ov-int > div { background: #fff; border: 1px solid #F1D3C6; border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.ov-int .v { font-size: 18px; font-weight: 720; font-variation-settings: var(--cond); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .ov-int { grid-template-columns: minmax(0, 1fr); } }
.ov-qs { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.ov-qs li { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rule-2); counter-increment: q; }
.ov-qs li:last-child { border-bottom: 0; }
.ov-qs li::before { content: counter(q); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-soft); color: var(--sky-ink); font-size: 11.5px; font-weight: 700; flex: none; }
.ov-qs .grow { flex: 1 1 200px; }
.ov-side { display: flex; flex-direction: column; gap: 16px; }
.ov-side > .card + .card, .ov-side > .card.mt { margin-top: 0; }
.ov-ai .card-head h2 svg { color: var(--violet); }
.ov-ready { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--rule-2); }
.ov-verdict { font-weight: 720; font-size: 16px; font-variation-settings: "wdth" 108; }
.ov-verdict.good { color: var(--win); } .ov-verdict.mid { color: var(--amber-ink); } .ov-verdict.low { color: var(--red); }
.ov-issues { list-style: none; margin: 0; padding: 0; }
.ov-issues li { padding: 12px 0 12px 12px; border-bottom: 1px solid var(--rule-2); position: relative; }
.ov-issues li:last-child { border-bottom: 0; padding-bottom: 0; }
.ov-issues li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--rule); }
.ov-issues li.ov-sev-high::before { background: var(--red); }
.ov-issues li.ov-sev-medium::before { background: #E2A23B; }
.ov-issues li:last-child::before { bottom: 2px; }
.ov-issue { font-weight: 650; margin: 6px 0 2px; }
.ov-clear { display: flex; gap: 8px; align-items: flex-start; padding: 12px 0 2px; color: var(--win); font-weight: 600; font-size: 13.5px; }
.ov-clear svg { width: 18px; height: 18px; flex: none; }
.ov-scan { display: grid; gap: 8px; }
.ov-scan .skel { height: 12px; }
.ov-scan .skel:nth-child(2) { width: 82%; } .ov-scan .skel:nth-child(3) { width: 64%; }

/* ---------- Quotes & comparison tab ---------- */
.qt-sum { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); overflow: hidden; }
.qt-sum > div { padding: 16px 20px 18px; min-width: 0; }
.qt-sum > div + div { border-left: 1px solid var(--rule-2); }
.qt-lead { background: linear-gradient(135deg, var(--descent-soft), #fff 70%); }
.qt-lead .rq-k svg { color: var(--win); }
.qt-lead-n { font-weight: 720; font-size: 17px; font-variation-settings: "wdth" 108; }
.qt-of { font-size: 15px; color: var(--steel-2); font-weight: 650; }
.qt-gauge { height: 6px; border-radius: 99px; background: var(--rule-2); margin: 10px 0 5px; position: relative; }
.qt-gauge::after { content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--steel); }
.qt-gauge span { display: block; height: 100%; border-radius: inherit; background: var(--descent); transform-origin: left; animation: rq-grow .6s cubic-bezier(.3,.7,.2,1) both; }
.qt-gauge.over span { background: var(--red); }
@media (max-width: 1100px) { .qt-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qt-sum > div:nth-child(3) { border-left: 0; } .qt-sum > div:nth-child(n+3) { border-top: 1px solid var(--rule-2); } }
@media (max-width: 560px) { .qt-sum { grid-template-columns: minmax(0, 1fr); } .qt-sum > div + div { border-left: 0; border-top: 1px solid var(--rule-2); } }

.qt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.qt-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.qt-legend i.b { background: var(--descent-soft); box-shadow: inset 0 0 0 1px #B6E6D1; }
.qt-legend i.h { background: linear-gradient(90deg, #fff, rgba(210,56,15,.16)); box-shadow: inset 0 0 0 1px var(--rule); }
.qt-mx { font-size: 13px; }
.qt-mx th, .qt-mx td { padding: 9px 12px; }
.qt-mx thead th { vertical-align: bottom; }
.qt-stick { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 210px; max-width: 300px; box-shadow: inset -1px 0 0 var(--rule-2); }
.qt-mx tfoot .qt-stick { background: #FAFBFD; }
@media (max-width: 640px) { .qt-stick { min-width: 150px; max-width: 170px; } }
.qt-item { font-weight: 560; line-height: 1.35; }
.qt-sh { min-width: 138px; text-align: left; white-space: normal; }
.qt-sh-in { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.qt-sh .nm { font-weight: 680; font-size: 13px; max-width: 120px; }
.qt-sh.lead { box-shadow: inset 0 3px 0 var(--descent); }
.qt-c { background: rgba(210, 56, 15, calc(var(--heat, 0) * .13)); transition: background .15s; }
.qt-c .p { font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.qt-c .p svg { width: 13px; height: 13px; }
.qt-c .g { font-size: 11.5px; color: var(--steel); font-weight: 600; }
.qt-c.best { background: var(--descent-soft); color: var(--win); }
.qt-c.best .g { color: var(--win); }
.qt-mx tbody tr:hover td { filter: brightness(.985); }
.qt-mx tbody tr:hover .qt-stick { box-shadow: inset 3px 0 0 var(--sky-ink), inset -1px 0 0 var(--rule-2); }
.qt-miss { background: repeating-linear-gradient(135deg, #FAFBFD 0 6px, #F1F3F8 6px 12px); color: var(--steel-2); }
.qt-tot td { border-top: 1px solid var(--rule); vertical-align: top; }
.qt-tot .p { font-size: 15px; font-weight: 720; font-variation-settings: var(--cond); }
.qt-tot .best { background: var(--descent-soft); color: var(--win); }
.qt-mini { height: 5px; border-radius: 99px; background: var(--rule-2); margin: 6px 0 3px auto; max-width: 120px; display: flex; justify-content: flex-end; }
.qt-mini span { display: block; height: 100%; border-radius: inherit; background: var(--steel-2); }
.qt-tot .best .qt-mini span { background: var(--descent); }
.qt-mx tfoot td { font-weight: 560; }
.qt-mx tfoot .qt-stick { font-weight: 650; }
.qt-win { color: var(--win); font-weight: 720 !important; }
.qt-i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--steel-2); color: var(--steel); font-size: 10px; font-weight: 700; cursor: help; vertical-align: 1px; margin-left: 2px; }
.qt-score { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.qt-score .rq-bar { width: 56px; }
.qt-score .rq-bar > span { background: var(--night); }
.qt-score b { min-width: 30px; }
.qt-fl { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.qt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.qt-sc { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.qt-sc:hover { border-color: var(--steel-2); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.qt-sc.lead { border-color: #9ED9BF; background: linear-gradient(180deg, #F5FCF8, #fff 60%); }
.qt-sc-v .num { font-size: 26px; font-weight: 720; font-variation-settings: var(--cond); }
.qt-crits { display: grid; gap: 8px; margin-top: 12px; }
.qt-crit { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; gap: 10px; align-items: center; font-size: 12.5px; }
.qt-crit .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-crit .v { text-align: right; font-weight: 650; }
.qt-crit .rq-bar > span { background: var(--sky); }
.qt-crit .rq-bar.top > span { background: var(--descent); }
.qt-crit .rq-bar.na { background: repeating-linear-gradient(90deg, var(--rule-2) 0 4px, transparent 4px 7px); }
.qt-eval .card-head h2 svg { color: var(--violet); }
.qt-ai { background: var(--violet-soft); border-radius: var(--r-md); padding: 12px 14px; color: #2E1D63; font-size: 13.5px; line-height: 1.55; }
.qt-rankbars { display: grid; gap: 4px; }
.qt-rb { display: grid; grid-template-columns: 34px minmax(0, 220px) minmax(60px, 1fr) 44px 210px; gap: 12px; align-items: center; padding: 6px 0; }
.qt-rb .nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 620; }
.qt-rb .rq-bar { height: 8px; }
.qt-rb .rq-bar > span { background: var(--steel-2); }
.qt-rb.rec .rq-bar > span { background: var(--sky-ink); }
.qt-rb .rc { text-align: right; }
.qt-rb .sc { font-weight: 720; text-align: right; }
@media (max-width: 640px) { .qt-rb { grid-template-columns: 34px minmax(0, 1fr) 44px; } .qt-rb .rq-bar { grid-column: 2 / 4; grid-row: 2; } .qt-rb .rc { grid-column: 2 / 4; } .qt-rb .rc:empty { display: none; } }
.qt-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qt-flags li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qt-list .rq-who b { max-width: 200px; }
@media (max-width: 480px) { .qt-crit { grid-template-columns: minmax(0, 1fr) 64px 26px; gap: 8px; } .qt-cards { padding: 14px; grid-template-columns: minmax(0, 1fr); } }

/* ---------- Negotiation tab ---------- */
.ng-grid { align-items: start; }
.ng-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ng-side > .card + .card { margin-top: 0; }
.ng-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ng-p { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-md); cursor: pointer; background: #fff; transition: border-color .12s, background .12s, box-shadow .12s; min-width: 0; }
.ng-p:hover { border-color: var(--steel-2); }
.ng-p input { width: 16px; height: 16px; accent-color: var(--oxide-btn); margin: 0; flex: none; }
.ng-p .grow { display: flex; flex-direction: column; line-height: 1.3; }
.ng-p .nm { font-weight: 620; font-size: 13px; }
.ng-p:has(input:checked) { border-color: var(--sky-ink); background: #F7F9FF; box-shadow: 0 0 0 3px var(--sky-soft); }
.ng-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ng-p .rq-chip { height: 19px; font-size: 11px; padding: 0 6px; }
.ng-p { align-items: flex-start; } .ng-p input { margin-top: 5px; }
.ng-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1300px) { .ng-kinds { grid-template-columns: minmax(0, 1fr); } }
.ng-kind { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 10px 12px; }
.ng-kind input { margin: 0; accent-color: var(--oxide-btn); }
.ng-kind .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--rule-2); color: var(--ink-2); }
.ng-kind .ic svg { width: 14px; height: 14px; }
.ng-kind .small { grid-column: 2 / -1; line-height: 1.4; }
.ng-kind:has(input:checked) { border-color: var(--oxide-btn); box-shadow: 0 0 0 3px var(--oxide-soft); }
.ng-kind:has(input:checked) .ic { background: var(--oxide-btn); color: #fff; }
.ng-sl { display: flex; flex-wrap: wrap; gap: 6px; }
.ng-slp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: #fff; border: 1px solid var(--rule); font-size: 13px; font-weight: 620; }
.ng-stand { display: grid; gap: 12px; }
.ng-st { display: flex; gap: 10px; align-items: center; }
.ng-st .rq-bar > span { background: var(--steel-2); }
.ng-st.lead .rq-bar > span { background: var(--descent); }
.ng-best { color: var(--win); font-weight: 700; }
.ng-tl { list-style: none; margin: 0; padding: 0; }
.ng-node { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.ng-node:last-child { padding-bottom: 0; }
.ng-node::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--rule-2); }
.ng-node:last-child::before { display: none; }
.ng-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: #fff; font-weight: 720; font-size: 14px; position: relative; z-index: 1; }
.ng-dot svg { width: 15px; height: 15px; }
.ng-node.first .ng-dot { background: #fff; color: var(--steel); box-shadow: inset 0 0 0 2px var(--rule); }
.ng-node.live .ng-dot { background: var(--sky-ink); box-shadow: 0 0 0 4px var(--sky-soft); }
.ng-node.bafo .ng-dot { background: var(--oxide-btn); }
.ng-node.next .ng-dot { background: #fff; color: var(--oxide-btn); box-shadow: inset 0 0 0 2px var(--oxide-btn); border: 0; }
.ng-node.next .ng-body { border: 1.5px dashed #E4A28A; background: #FFF9F6; border-radius: var(--r-md); padding: 10px 14px; gap: 10px; }
.ng-body { min-width: 0; padding-top: 6px; }
.ng-move { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.ng-when .t { font-size: 12.5px; }
.ng-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.ng-part { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); background: #F7F8FC; border: 1px solid var(--rule-2); min-width: 0; }
.ng-part.rev { background: #F3FBF7; border-color: #CBEBDC; }
.ng-part.rev .tiny { color: var(--win); font-weight: 620; }
.ng-drafts { border-color: var(--sky-ink); box-shadow: 0 0 0 3px var(--sky-soft); }
.ng-draft { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; }
@media (max-width: 640px) { .ng-node { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } .ng-dot { width: 28px; height: 28px; font-size: 12.5px; } .ng-node::before { left: 13px; top: 28px; } }
/* Deadline rings inside these tabs: keep the ring's own pixel size (the global aria-hidden svg rule shrinks it). */
#tab-body .ring svg { width: 100%; height: 100%; }

/* ---------- Auction tab ---------- */
#tab-body .copy-field .input { font-family: inherit; font-variation-settings: var(--cond); font-size: 12.5px; color: var(--ink-2); }
.au-made { border-color: var(--descent); box-shadow: 0 0 0 3px var(--descent-soft); }
.au-made .card-head h2 svg { color: var(--win); }
.au-link { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 560px) { .au-link { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.au-gl { width: 26px !important; height: 24px !important; color: var(--steel-2); flex: none; }
.au-type.on .au-gl { color: var(--oxide-btn); }
.au-type input { accent-color: var(--oxide-btn); margin: 0; }
.au-list { display: grid; }
.au-item { padding: 16px 20px; border-bottom: 1px solid var(--rule-2); }
.au-item:last-child { border-bottom: 0; }
.au-item.live { background: linear-gradient(90deg, rgba(255,90,46,.06), transparent 50%); }
.au-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--rule-2); color: var(--ink-2); }
.au-ic .au-gl { color: var(--ink-2); width: 22px !important; height: 20px !important; }
.au-res { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
@media (max-width: 800px) { .au-res { grid-template-columns: minmax(0, 1fr); } }
.au-bars { display: grid; gap: 8px; }
.au-bar { display: grid; grid-template-columns: 30px 24px minmax(0, 150px) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.au-bar .nm { font-weight: 620; }
.au-bar .rq-bar { height: 8px; }
.au-bar .rq-bar > span { background: var(--steel-2); }
.au-bar.win .rq-bar > span { background: var(--descent); }
.au-bar.win .num { color: var(--win); }
@media (max-width: 560px) { .au-bar { grid-template-columns: 30px 24px minmax(0, 1fr) auto; } .au-bar .rq-bar { grid-column: 3 / -1; grid-row: 2; } }
.au-meta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: #F7F8FC; }

/* ---------- Award tab ---------- */
.aw-win { overflow: hidden; border-color: #9ED9BF; background: radial-gradient(520px 200px at 0% 0%, rgba(52,214,158,.16), transparent 70%), #fff; animation: pop-in .35s cubic-bezier(.2,.9,.3,1.1) both; }
.aw-win-main { display: flex; gap: 18px; align-items: center; padding: 20px 22px; flex-wrap: wrap; }
.aw-trophy { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--descent); color: #fff; box-shadow: 0 10px 22px -12px rgba(14,159,110,.9); flex: none; }
.aw-trophy svg { width: 26px; height: 26px; }
.aw-name { font-size: 19px; font-weight: 720; font-variation-settings: var(--wide); letter-spacing: -.01em; }
.aw-amt { margin-left: auto; text-align: right; min-width: 0; }
.aw-amt .rq-big { font-size: 30px; }
.aw-amt .aw-sav { justify-content: flex-end; }
@media (max-width: 700px) { .aw-amt { margin-left: 0; text-align: left; width: 100%; } .aw-amt .aw-sav { justify-content: flex-start; } .aw-win-main { padding: 16px; } }
.aw-win-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid #D5EEE2; background: rgba(255,255,255,.6); }
.aw-sav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.aw-sav .small { color: var(--steel); }
#aw-sav:empty { display: none; }
.aw-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.aw-chain li { position: relative; min-width: 0; padding-right: 14px; }
.aw-node { position: relative; height: 34px; display: flex; align-items: center; margin-bottom: 8px; }
.aw-node::after { content: ""; position: absolute; left: 34px; right: -14px; top: 50%; height: 2px; margin-top: -1px; background: var(--rule); }
.aw-chain li:last-child .aw-node::after { display: none; }
.aw-chain li.ap-approved .aw-node::after { background: var(--descent); }
.aw-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--rule); color: var(--steel); font-weight: 720; font-size: 13px; position: relative; z-index: 1; }
.aw-dot svg { width: 16px; height: 16px; }
.ap-approved .aw-dot { background: var(--descent); box-shadow: none; color: #fff; }
.ap-rejected .aw-dot { background: var(--red); box-shadow: none; color: #fff; }
.ap-pending .aw-dot { background: var(--amber-soft); box-shadow: inset 0 0 0 2px #E2A23B, 0 0 0 4px rgba(226,162,59,.18); color: var(--amber-ink); }
.ap-cancelled { opacity: .6; }
.aw-step { min-width: 0; padding-right: 6px; }
.aw-step .badge { flex: none; }
@media (max-width: 760px) {
  .aw-chain { grid-auto-flow: row; }
  .aw-chain li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
  .aw-node { height: auto; margin: 0; align-items: flex-start; }
  .aw-node::after { left: 16px; right: auto; width: 2px; top: 34px; bottom: -16px; height: auto; margin: 0; }
  .aw-chain li:last-child { padding-bottom: 0; }
}
.aw-top { padding-bottom: 4px; }
.aw-rank { display: grid; gap: 6px; }
.aw-r { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(50px, 110px) 36px auto; gap: 10px; align-items: center; font-size: 13px; }
.aw-r .nm { font-weight: 600; }
.aw-r .rq-bar > span { background: var(--steel-2); }
.aw-r.lead .rq-bar > span { background: var(--oxide-btn); }
@media (max-width: 480px) { .aw-r { grid-template-columns: 32px minmax(0, 1fr) 36px auto; } .aw-r .rq-bar { display: none; } }
.aw-diff td { background: #FFFBF2; }
.aw-ok { color: var(--win); display: inline-flex; vertical-align: -2px; }
.aw-ok svg { width: 14px; height: 14px; }

/* ---------- Inbox tab ---------- */
.ib-q { padding: 18px 20px; }
.ib-thread { display: grid; gap: 12px; }
.ib-msg { display: flex; gap: 10px; align-items: flex-start; }
.ib-msg.out { justify-content: flex-end; padding-left: 44px; }
.ib-bub { background: #F3F5FA; border-radius: 4px 14px 14px 14px; padding: 10px 14px; max-width: 760px; min-width: 0; }
.ib-bub.reply { background: #F7F9FF; border: 1px solid #D6DEFF; border-radius: 14px 4px 14px 14px; flex: 1 1 auto; max-width: 820px; }
.ib-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 4px; }
.ib-text { font-size: 14.5px; line-height: 1.55; }
.ib-bub .textarea { background: #fff; }
.ib-conf { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ib-conf .rq-bar { width: 48px; height: 5px; }
.ib-conf .rq-bar > span { background: var(--violet); }
@media (max-width: 640px) { .ib-msg.out { padding-left: 0; } .ib-q { padding: 14px; } .ib-conf { margin-left: 0; } }
.ib-none { display: flex; gap: 10px; align-items: center; }
.ib-okic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--descent-soft); color: var(--win); flex: none; }
.ib-okic svg { width: 14px; height: 14px; }
.ib-past summary { cursor: pointer; color: var(--sky-ink); font-weight: 600; }
.ib-a { padding-left: 10px; border-left: 2px solid var(--sky-soft); margin-top: 4px; }
.ib-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #E2A23B; color: #fff; font-size: 11px; margin-left: 2px; }
.ib-item { padding: 12px 14px; position: relative; }
.ib-item.rv { background: linear-gradient(90deg, #FFF6E5, transparent 70%); }
.ib-item.rv::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #E2A23B; }
.ib-item.active { background: var(--sky-soft); }
.ib-item.active::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--sky-ink); }
.ib-row { display: flex; gap: 10px; align-items: flex-start; }
.ib-item .rq-chip { height: 20px; font-size: 11.5px; padding: 0 7px; }
.ib-dir { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--steel-2); }
.ib-dir svg { width: 13px; height: 13px; }
.ib-dir.in { color: var(--win); } .ib-dir.out { color: var(--sky-ink); }
.ib-split .detail { padding: 20px 22px; }
.ib-kv { padding: 10px 12px; background: #FAFBFD; border-radius: var(--r-sm); border: 1px solid var(--rule-2); }
.ib-ai { background: var(--violet-soft); border-radius: var(--r-md); padding: 12px 14px; color: #2E1D63; font-size: 13.5px; }
.ib-ai svg { color: var(--violet); }
.ib-body { font-size: 14px; line-height: 1.65; padding: 14px 16px; border-radius: 4px 14px 14px 14px; background: #F3F5FA; max-width: 720px; }
.ib-body.out { border-radius: 14px 4px 14px 14px; background: #F2F5FF; margin-left: auto; }
.ib-files { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r-md); color: var(--ink); max-width: 100%; background: #fff; transition: border-color .12s, box-shadow .12s; }
.ib-file:hover { text-decoration: none; border-color: var(--steel-2); box-shadow: var(--shadow-pop); }
.ib-file svg { color: var(--red); }

/* ---------- Audit tab ---------- */
.au-tl { --c: var(--steel-2); list-style: none; margin: 0; padding: 0; }
.au-seg { overflow-x: auto; max-width: 100%; }
.au-seg button { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.au-sw { width: 8px; height: 8px; border-radius: 50%; background: var(--steel-2); }
.au-sw.k-all { display: none; }
.k-ai { --c: var(--violet); } .k-human { --c: var(--oxide-btn); } .k-supplier { --c: var(--descent); } .k-system { --c: #5A6585; }
.au-sw.k-ai, .au-sw.k-human, .au-sw.k-supplier, .au-sw.k-system { background: var(--c); }
.au-day { position: sticky; top: calc(var(--top-h) + 4px); z-index: 2; padding: 4px 0 10px; }
.au-day:not(:first-child) { padding-top: 10px; }
.au-day span { display: inline-block; font-size: 12.5px; font-weight: 650; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: 2px 10px; text-transform: none; }
.au-ev { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.au-ev::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--rule-2); }
.au-ev:last-child::before, .au-ev:has(+ .au-day)::before { display: none; }
.au-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #fff); font-size: 12px; font-weight: 720; position: relative; z-index: 1; }
.au-dot svg { width: 14px; height: 14px; }
.au-main { min-width: 0; padding-top: 4px; }
.au-kv { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.au-kv span { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #F5F6FA; border: 1px solid var(--rule-2); color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; }
.au-kv i { font-style: normal; color: var(--steel); }

/* ---------- New RFQ: AI composer (the page's one night surface) ---------- */
.rn-comp { position: relative; overflow: hidden; border-radius: 20px; background: var(--night); color: #E6EAFA; padding: 22px 24px 24px;
  background-image: radial-gradient(640px 300px at 100% 0%, rgba(124,149,255,.22), transparent 70%), radial-gradient(520px 260px at 0% 120%, rgba(160,130,255,.16), transparent 70%); }
.rn-comp::after { content: ""; position: absolute; right: -150px; top: -170px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(169,180,220,.12); box-shadow: 0 0 0 60px rgba(169,180,220,.03), 0 0 0 120px rgba(169,180,220,.025); pointer-events: none; }
.rn-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rn-head h2 { color: #fff; font-size: 19px; font-variation-settings: var(--wide); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rn-head h2 svg { color: #C3CEFF; width: 18px; height: 18px; }
.rn-opt { font-size: 12px; font-weight: 600; color: var(--mist); background: rgba(255,255,255,.08); border-radius: 99px; padding: 2px 9px; font-variation-settings: normal; }
.rn-sub { color: var(--mist); font-size: 13.5px; margin-top: 4px; max-width: 70ch; }
.rn-head .btn { color: var(--mist); }
.rn-head .btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.rn-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px 22px; margin-top: 16px; }
.rn-main { min-width: 0; }
.rn-text { min-height: 168px; font-size: 15px; line-height: 1.6; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(169,180,220,.28); color: #fff; resize: vertical; transition: border-color .15s, box-shadow .15s, background .15s; }
.rn-text::placeholder { color: var(--mist-2); }
.rn-text:focus { border-color: #9DB0FF; background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px rgba(124,149,255,.22); }
.rn-ex { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.rn-ex-k { font-size: 12.5px; color: var(--mist-2); font-weight: 600; margin-right: 2px; }
.rn-chip { border: 1px solid rgba(169,180,220,.3); background: rgba(255,255,255,.04); color: #DCE2F8; border-radius: 99px; height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.rn-chip:hover { background: rgba(255,255,255,.1); border-color: rgba(169,180,220,.55); }
.rn-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.rn-attach { background: rgba(255,255,255,.06); border-color: rgba(169,180,220,.3); color: #fff; cursor: pointer; }
.rn-attach:hover { background: rgba(255,255,255,.12); }
.rn-fname { color: var(--mist); min-width: 0; overflow-wrap: anywhere; }
.rn-fname b { color: #fff; }
.rn-fname .linkish { color: #C3CEFF; }
.rn-fname .sev-high { color: #FF9A7C; }
#ai-go { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px -12px rgba(255,90,46,.9); }
.rn-stages { list-style: none; margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-dark); background: rgba(10,18,48,.55); align-self: start; display: grid; gap: 11px; }
.rn-st-h { font-size: 12.5px; font-weight: 650; color: var(--mist-2); }
.rn-st { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--mist); transition: color .2s; }
.rn-st .d { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(169,180,220,.4); flex: none; position: relative; transition: background .2s, border-color .2s; }
.rn-st.now { color: #fff; }
.rn-st.now .d { border-color: #9DB0FF; border-top-color: transparent; animation: spin .8s linear infinite; }
.rn-st.done { color: #fff; }
.rn-st.done .d { background: var(--mint); border-color: var(--mint); }
.rn-st.done .d::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--night); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rn-stages.busy { border-color: rgba(124,149,255,.45); box-shadow: 0 0 0 4px rgba(124,149,255,.1); }
.rn-out { grid-column: 1 / -1; }
.rn-out:empty { display: none; }
.rn-out .alert { border-color: transparent; }
.rn-out .alert.success { background: rgba(52,214,158,.14); color: #9FF0D0; }
.rn-out .alert.warn { background: rgba(245,181,68,.13); color: #F7D58E; }
.rn-out .alert.error { background: rgba(255,90,46,.14); color: #FFB59E; }
.rn-wait { color: var(--mist); font-size: 13.5px; }
.rn-wait .spinner { border-color: rgba(169,180,220,.3); border-top-color: #9DB0FF; }
@media (max-width: 900px) { .rn-body { grid-template-columns: minmax(0, 1fr); } .rn-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rn-st-h { grid-column: 1 / -1; } }
@media (max-width: 560px) { .rn-comp { padding: 18px 16px; border-radius: 16px; } .rn-stages { grid-template-columns: minmax(0, 1fr); } .rn-tools #ai-go { width: 100%; } .rn-head h2 { font-size: 17px; } }
.rn-foot { border-top: 1px solid var(--rule-2); background: #FAFBFD; border-radius: 0 0 var(--r-lg) var(--r-lg); position: sticky; bottom: 0; z-index: 3; }

/* ---------- RFQ form: section steps + criteria bar ---------- */
.rf-steps { position: sticky; top: calc(var(--top-h) + 8px); z-index: 4; display: flex; gap: 4px; padding: 6px; margin: -4px 0 18px; border: 1px solid var(--rule); border-radius: 14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-x: auto; scrollbar-width: none; }
.rf-steps::-webkit-scrollbar { display: none; }
.rf-step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; color: var(--steel); font-weight: 620; font-size: 13px; white-space: nowrap; flex: 1 0 auto; transition: background .12s, color .12s; }
.rf-step:hover { background: var(--rule-2); color: var(--ink); text-decoration: none; }
.rf-step .d { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 720; background: var(--rule-2); color: var(--steel); flex: none; transition: background .2s, color .2s; }
.rf-step.ok { color: var(--ink); }
.rf-step.ok .d { background: var(--descent); color: #fff; }
.rf-step .l { display: inline-flex; flex-direction: column; line-height: 1.15; }
.rf-step .o { font-size: 10.5px; font-weight: 550; color: var(--steel-2); }
.rf-sec { scroll-margin-top: calc(var(--top-h) + 76px); }
.rf-sec + .rf-sec { border-top: 1px solid var(--rule-2); margin-top: 22px; }
.rf-sec + .rf-sec > .section-title:first-child { margin-top: 20px; }
.rf-sec + .rf-sec > .private-box { margin-top: 20px; }
.rf-sw { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.rf-wbar { position: relative; display: flex; gap: 2px; height: 10px; border-radius: 99px; background: var(--rule-2); overflow: hidden; }
.rf-wbar span { display: block; height: 100%; transition: width .25s ease; }
.rf-wbar .over { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); }
@media (max-width: 640px) { .rf-step .o { display: none; } .rf-step { padding: 6px 8px; } }
@media (max-width: 560px) { .rn-stages:not(.busy) { display: none; } }
.ib-box .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.ib-box .seg button { white-space: nowrap; }
.ib-dh { flex-wrap: nowrap; }
@media (max-width: 640px) { .ib-dh { flex-wrap: wrap; } .ib-split .detail { padding: 16px 14px; } }
.aw-hist td:last-child { min-width: 240px; }
.aw-hist .rq-who span { white-space: nowrap; }