/* =========================================================================
   UC1 — PR Validation & PR-to-PO Automation
   Module styles. Built on the Eko tokens in styles.css; adds only what the
   flow module needs. Kept in its own file so the mockup's captured styles
   stay untouched.
   ========================================================================= */

:root {
  --uc-ink:        #212121;
  --uc-ink-2:      #5B6670;
  --uc-ink-3:      #68737C;   /* 4.6:1 on --uc-bg — small Thai text must pass AA */
  --uc-ink-4:      #8A949C;   /* decorative only: icons, legend swatches, dots */
  --uc-line:       #E8EBEA;
  --uc-line-2:     #D8DEDC;
  --uc-bg:         #F7F9F8;
  --uc-surface:    #FFFFFF;
  --uc-code:       #F4F6F5;

  --uc-ok:         #06A97D;   /* within tolerance / PO-ready */
  --uc-ok-bg:      #E8F8F3;
  --uc-ok-ink:     #047A5B;   /* AA on --uc-ok-bg for pill text */
  --uc-warn:       #B4741A;   /* correction required */
  --uc-warn-bg:    #FDF3E4;
  --uc-warn-ink:   #8F5B12;
  --uc-block:      #C0392B;   /* blocked / missing evidence */
  --uc-block-bg:   #FBECEA;
  --uc-info:       #1B6FB8;   /* dedupe / linked */
  --uc-info-bg:    #E9F2FA;
  --uc-ext:        #7A4FBF;   /* the external A2A agent */
  --uc-ext-bg:     #F2ECFB;

  --uc-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------- shell ---- */
.uc { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--uc-bg); }

.uc-head {
  flex: 0 0 auto; background: var(--uc-surface); border-bottom: 1px solid var(--uc-line);
  padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.uc-head-titles { min-width: 0; flex: 1 1 320px; }
.uc-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--uc-ink-3); margin-bottom: 2px;
}
.uc-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--uc-ink); line-height: 22px; }
.uc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.uc-btn {
  height: 30px; padding: 0 12px; font-family: inherit; font-size: 12px; font-weight: 500;
  border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--uc-line-2); background: var(--uc-surface); color: var(--uc-ink-2);
  white-space: nowrap;
}
.uc-btn:hover:not(:disabled) { border-color: var(--uc-ink-3); color: var(--uc-ink); }
.uc-btn:disabled { opacity: .45; cursor: not-allowed; }
.uc-btn--go { background: var(--green); border-color: var(--green); color: #fff; }
.uc-btn--go:hover:not(:disabled) { background: #05B384; border-color: #05B384; color: #fff; }
.uc-btn--danger { color: var(--uc-block); border-color: #E8C4BF; }
.uc-btn--danger:hover:not(:disabled) { background: var(--uc-block-bg); border-color: var(--uc-block); color: var(--uc-block); }
.uc-btn .icon { width: 11px; height: 11px; }

/* ------------------------------------------------------------- tabs ----- */
.uc-tabs {
  flex: 0 0 auto; background: var(--uc-surface); border-bottom: 1px solid var(--uc-line);
  padding: 0 16px; display: flex; gap: 2px; overflow-x: auto;
}
.uc-tab {
  appearance: none; border: 0; background: none; font-family: inherit; font-size: 13px;
  font-weight: 500; color: var(--uc-ink-3); padding: 9px 12px 8px; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 7px;
}
.uc-tab:hover { color: var(--uc-ink-2); }
.uc-tab.is-active { color: var(--uc-ink); border-bottom-color: var(--green); }
.uc-count {
  font-family: var(--uc-mono); font-size: 10px; font-weight: 600; min-width: 18px; height: 16px;
  padding: 0 5px; border-radius: 8px; background: var(--uc-code); color: var(--uc-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.uc-tab.is-active .uc-count { background: var(--uc-ok-bg); color: var(--uc-ok); }
.uc-count[data-tone="warn"]  { background: var(--uc-warn-bg);  color: var(--uc-warn); }
.uc-count[data-tone="block"] { background: var(--uc-block-bg); color: var(--uc-block); }

.uc-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.uc-panel[hidden] { display: none !important; }

/* ------------------------------------------------------------- cards ---- */
.uc-card { background: var(--uc-surface); border: 1px solid var(--uc-line); border-radius: 6px; margin-bottom: 14px; }
.uc-card-head {
  padding: 10px 14px; border-bottom: 1px solid var(--uc-line);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.uc-card-title { font-size: 13px; font-weight: 600; color: var(--uc-ink); margin: 0; }
.uc-card-sub { font-size: 12px; color: var(--uc-ink-3); }
.uc-card-body { padding: 14px; }
.uc-card-body--flush { padding: 0; }

.uc-note {
  font-size: 12px; line-height: 1.6; color: var(--uc-ink-2);
  background: var(--uc-code); border-left: 3px solid var(--uc-line-2);
  padding: 9px 12px; border-radius: 0 4px 4px 0; margin: 0 0 12px;
}
.uc-note b { color: var(--uc-ink); font-weight: 600; }
.uc-note--scope { border-left-color: var(--uc-warn); background: var(--uc-warn-bg); }
.uc-note--ext { border-left-color: var(--uc-ext); background: var(--uc-ext-bg); }

/* ------------------------------------------------------------- flow ----- */
.uc-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 0 12px; }
.uc-stage {
  flex: 0 0 178px; background: var(--uc-surface); border: 1px solid var(--uc-line);
  border-radius: 6px; padding: 10px 11px; position: relative;
}
.uc-stage + .uc-stage { margin-left: 26px; }
.uc-stage + .uc-stage::before {
  content: ''; position: absolute; left: -26px; top: 50%; width: 26px; height: 1px;
  background: var(--uc-line-2);
}
.uc-stage + .uc-stage::after {
  content: ''; position: absolute; left: -8px; top: 50%; margin-top: -3px;
  border-left: 5px solid var(--uc-line-2); border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.uc-stage.is-live { border-color: var(--green); box-shadow: 0 0 0 2px rgba(6,198,146,.14); }
.uc-stage.is-done { border-color: #C9E7DC; }
.uc-stage--ext { border-color: #DCCFF2; background: var(--uc-ext-bg); }
.uc-stage-n {
  font-family: var(--uc-mono); font-size: 10px; font-weight: 600; color: var(--uc-ink-3);
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}
.uc-stage--ext .uc-stage-n { color: var(--uc-ext); }
.uc-stage-name { font-size: 12px; font-weight: 600; color: var(--uc-ink); line-height: 1.35; margin-bottom: 4px; }
.uc-stage-io { font-size: 10.5px; line-height: 1.45; color: var(--uc-ink-3); }
.uc-stage-metric {
  margin-top: 7px; padding-top: 7px; border-top: 1px dotted var(--uc-line-2);
  font-family: var(--uc-mono); font-size: 11px; font-weight: 600; color: var(--uc-ink-2);
  font-variant-numeric: tabular-nums;
}
.uc-badge-ext {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--uc-ext); color: #fff; padding: 1px 5px; border-radius: 3px;
}

/* ------------------------------------------------------------- stats ---- */
.uc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--uc-line); border: 1px solid var(--uc-line); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.uc-stat { background: var(--uc-surface); padding: 10px 12px; }
.uc-stat-k { font-size: 10.5px; font-weight: 500; color: var(--uc-ink-3); letter-spacing: .02em; margin-bottom: 3px; }
.uc-stat-v { font-family: var(--uc-mono); font-size: 19px; font-weight: 600; color: var(--uc-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.uc-stat-x { font-size: 10.5px; color: var(--uc-ink-3); margin-top: 2px; }
.uc-stat[data-tone="ok"]    .uc-stat-v { color: var(--uc-ok); }
.uc-stat[data-tone="warn"]  .uc-stat-v { color: var(--uc-warn); }
.uc-stat[data-tone="block"] .uc-stat-v { color: var(--uc-block); }

/* ------------------------------------------------------------- table ---- */
.uc-scroll { overflow-x: auto; }
.uc-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.uc-table th, .uc-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--uc-line); vertical-align: top; }
.uc-table thead th {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--uc-ink-3); background: var(--uc-code); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.uc-table tbody tr:last-child td { border-bottom: 0; }
.uc-table tbody tr.is-click { cursor: pointer; }
.uc-table tbody tr.is-click:hover { background: var(--row-hover); }
.uc-table tbody tr.is-sel { background: var(--row-selected); }
.uc-num { font-family: var(--uc-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uc-mono { font-family: var(--uc-mono); font-size: 11px; color: var(--uc-ink-2); }

/* ------------------------------------------------------------- pills ---- */
.uc-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap; letter-spacing: .01em;
}
.uc-pill--ok    { background: var(--uc-ok-bg);    color: var(--uc-ok-ink); }
.uc-pill--warn  { background: var(--uc-warn-bg);  color: var(--uc-warn-ink); }
.uc-pill--block { background: var(--uc-block-bg); color: var(--uc-block); }
.uc-pill--info  { background: var(--uc-info-bg);  color: var(--uc-info); }
.uc-pill--ext   { background: var(--uc-ext-bg);   color: var(--uc-ext); }
.uc-pill--mute  { background: var(--uc-code);     color: var(--uc-ink-3); }

/* ------------------------------------------------------------- detail --- */
.uc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .uc-split { grid-template-columns: 1fr; } }

.uc-kv { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 5px 12px; font-size: 12px; }
.uc-kv dt { color: var(--uc-ink-3); }
.uc-kv dd { margin: 0; color: var(--uc-ink); word-break: break-word; }

.uc-finding { border: 1px solid var(--uc-line); border-radius: 5px; padding: 11px 12px; margin-bottom: 10px; }
.uc-finding[data-sev="none"]       { border-left: 3px solid var(--uc-ok); }
.uc-finding[data-sev="correction"] { border-left: 3px solid var(--uc-warn); }
.uc-finding[data-sev="block"]      { border-left: 3px solid var(--uc-block); }
.uc-finding-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.uc-finding-sku { font-family: var(--uc-mono); font-size: 11.5px; font-weight: 600; color: var(--uc-ink); }
.uc-finding-msg { font-size: 12px; line-height: 1.55; color: var(--uc-ink-2); margin: 0 0 8px; }

.uc-math {
  font-family: var(--uc-mono); font-size: 11px; line-height: 1.7; background: var(--uc-code);
  border-radius: 4px; padding: 8px 10px; color: var(--uc-ink-2); font-variant-numeric: tabular-nums;
}
.uc-math b { color: var(--uc-ink); font-weight: 600; }
.uc-math .r { color: var(--uc-block); font-weight: 600; }
.uc-math .g { color: var(--uc-ok); font-weight: 600; }

.uc-cite {
  font-size: 11.5px; line-height: 1.6; color: var(--uc-ink-2);
  border-left: 2px solid var(--uc-ok); padding-left: 9px; margin: 8px 0 0;
}
.uc-cite b { color: var(--uc-ink); font-weight: 600; }
.uc-cite--rej { border-left-color: var(--uc-block); color: var(--uc-ink-3); }
.uc-cite-clause { font-style: italic; color: var(--uc-ink-3); display: block; margin-top: 3px; }

/* ------------------------------------------------------------- approval - */
.uc-apv { border: 1px solid var(--uc-line-2); border-radius: 6px; background: var(--uc-surface); margin-bottom: 14px; overflow: hidden; }
.uc-apv-head { padding: 10px 14px; background: var(--uc-code); border-bottom: 1px solid var(--uc-line); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.uc-apv-title { font-size: 13px; font-weight: 600; color: var(--uc-ink); }
.uc-apv-body { padding: 13px 14px; }
.uc-apv-hash {
  font-family: var(--uc-mono); font-size: 10.5px; color: var(--uc-ink-3);
  background: var(--uc-code); padding: 2px 6px; border-radius: 3px; word-break: break-all;
}
.uc-apv-foot { padding: 11px 14px; border-top: 1px solid var(--uc-line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uc-apv-who { font-size: 11.5px; color: var(--uc-ink-3); margin-right: auto; }

/* ------------------------------------------------------------- trace ---- */
.uc-trace { font-size: 11.5px; }
.uc-trace-row { display: grid; grid-template-columns: 52px 108px 128px minmax(0, 1fr) 62px; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--uc-line); align-items: baseline; }
.uc-trace-row:last-child { border-bottom: 0; }
.uc-trace-row.is-err { background: var(--uc-block-bg); }
.uc-trace-row.is-warn { background: var(--uc-warn-bg); }
.uc-trace-seq { font-family: var(--uc-mono); font-size: 10px; color: var(--uc-ink-3); font-variant-numeric: tabular-nums; }
.uc-trace-agent { font-size: 10.5px; font-weight: 600; color: var(--uc-ink-2); }
.uc-trace-ev { font-family: var(--uc-mono); font-size: 10.5px; color: var(--uc-info); word-break: break-all; }
.uc-trace-detail { color: var(--uc-ink-2); line-height: 1.5; }
.uc-trace-cost { font-family: var(--uc-mono); font-size: 10.5px; color: var(--uc-ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.uc-trace-head { position: sticky; top: 0; background: var(--uc-code); z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--uc-ink-3); }

/* ------------------------------------------------------------- ocr ------ */
.uc-pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.uc-page { border: 1px solid var(--uc-line); border-radius: 5px; padding: 10px 11px; background: var(--uc-surface); }
.uc-page[data-cls="text"]    { border-left: 3px solid var(--uc-ok); }
.uc-page[data-cls="scanned"] { border-left: 3px solid var(--uc-warn); }
.uc-page[data-cls="mixed"]   { border-left: 3px solid var(--uc-info); }
.uc-page[data-cls="garbled"] { border-left: 3px solid var(--uc-block); }
.uc-page-n { font-family: var(--uc-mono); font-size: 10px; color: var(--uc-ink-3); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 6px; }
.uc-page-why { font-size: 11px; line-height: 1.5; color: var(--uc-ink-2); margin: 6px 0 0; }
.uc-page-eng { font-size: 10.5px; color: var(--uc-ink-3); margin-top: 6px; padding-top: 6px; border-top: 1px dotted var(--uc-line-2); font-family: var(--uc-mono); }

.uc-bar { height: 10px; border-radius: 5px; background: var(--uc-code); overflow: hidden; display: flex; margin: 8px 0 6px; }
.uc-bar i { display: block; height: 100%; }
.uc-bar i[data-k="text"]    { background: var(--uc-ok); }
.uc-bar i[data-k="mixed"]   { background: var(--uc-info); }
.uc-bar i[data-k="scanned"] { background: var(--uc-warn); }
.uc-bar i[data-k="garbled"] { background: var(--uc-block); }
.uc-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--uc-ink-2); }
.uc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.uc-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------------- empty ---- */
.uc-empty { text-align: center; padding: 40px 20px; color: var(--uc-ink-3); font-size: 13px; }
.uc-empty b { display: block; color: var(--uc-ink-2); font-size: 14px; font-weight: 600; margin-bottom: 5px; }

.uc-log { max-height: 260px; overflow: auto; border: 1px solid var(--uc-line); border-radius: 5px; }

/* =========================================================================
   OPERATOR UI — the surface a procurement officer actually works in.
   Everything above this line is the evaluator's audit surface.
   ========================================================================= */

/* ------------------------------------------------------- persona bar ---- */
.op-topbar {
  flex: 0 0 auto; background: var(--uc-surface); border-bottom: 1px solid var(--uc-line);
  padding: 9px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.op-brand { min-width: 0; flex: 1 1 240px; }
.op-brand-k {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--uc-ink-3);
}
.op-brand-t { font-size: 15px; font-weight: 600; color: var(--uc-ink); line-height: 20px; }

.op-who {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--uc-line-2); border-radius: 20px; background: var(--uc-surface);
  cursor: pointer; font-family: inherit;
}
.op-who:hover { border-color: var(--uc-ink-3); }
.op-av {
  width: 28px; height: 28px; border-radius: 50%; flex: none; color: #fff;
  font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  letter-spacing: .02em;
}
.op-who-txt { text-align: left; line-height: 1.25; }
.op-who-n { font-size: 12.5px; font-weight: 600; color: var(--uc-ink); }
.op-who-r { font-size: 10.5px; color: var(--uc-ink-3); }
.op-who .icon { width: 9px; height: 9px; color: var(--uc-ink-3); }

.op-menu {
  position: absolute; right: 16px; top: 52px; z-index: 40; width: 288px;
  background: var(--uc-surface); border: 1px solid var(--uc-line-2); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; overflow: hidden;
}
.op-menu[hidden] { display: none; }
.op-menu-k {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--uc-ink-3); padding: 7px 10px 5px;
}
.op-menu-i {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer;
  border-radius: 6px;
}
.op-menu-i:hover { background: var(--uc-code); }
.op-menu-i.is-on { background: var(--uc-ok-bg); }
.op-menu-i-n { font-size: 12.5px; font-weight: 500; color: var(--uc-ink); }
.op-menu-i-r { font-size: 10.5px; color: var(--uc-ink-3); }
.op-menu-i-c {
  margin-left: auto; font-family: var(--uc-mono); font-size: 10.5px; font-weight: 600;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--uc-warn-bg); color: var(--uc-warn);
  display: inline-flex; align-items: center; justify-content: center;
}
.op-menu-i-c[data-zero="1"] { background: var(--uc-code); color: var(--uc-ink-3); }

/* ------------------------------------------------------------ nav ------ */
.op-nav {
  flex: 0 0 auto; background: var(--uc-surface); border-bottom: 1px solid var(--uc-line);
  padding: 0 16px; display: flex; gap: 4px;
}
.op-navbtn {
  appearance: none; border: 0; background: none; font-family: inherit; font-size: 13.5px;
  font-weight: 500; color: var(--uc-ink-3); padding: 10px 13px 9px; cursor: pointer;
  border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.op-navbtn:hover { color: var(--uc-ink-2); }
.op-navbtn.is-active { color: var(--uc-ink); border-bottom-color: var(--green); }
.op-navbtn--quiet { margin-left: auto; color: var(--uc-ink-3); font-size: 12.5px; }
.op-badge {
  font-family: var(--uc-mono); font-size: 10.5px; font-weight: 700; min-width: 19px; height: 18px;
  padding: 0 6px; border-radius: 9px; background: var(--uc-warn); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.op-badge[data-zero="1"] { background: var(--uc-code); color: var(--uc-ink-3); }

/* ------------------------------------------------------- work canvas --- */
.op-body { flex: 1; min-height: 0; overflow: auto; background: var(--uc-bg); }
.op-col { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }
.op-col--wide { max-width: 1180px; }

.op-group { margin-bottom: 26px; }
.op-group-h {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--uc-line);
}
.op-group-t { font-size: 13px; font-weight: 600; color: var(--uc-ink); margin: 0; }
.op-group-s { font-size: 12px; color: var(--uc-ink-3); }

/* ------------------------------------------------------------ task ----- */
.op-task {
  background: var(--uc-surface); border: 1px solid var(--uc-line); border-radius: 8px;
  margin-bottom: 10px; overflow: hidden;
}
.op-task--urgent { border-left: 3px solid var(--uc-warn); }
.op-task--block  { border-left: 3px solid var(--uc-block); }
.op-task--ok     { border-left: 3px solid var(--uc-ok); }
.op-task--wait   { border-left: 3px solid var(--uc-line-2); }
.op-task--warn   { border-left: 3px solid var(--uc-warn); }

.op-task-main { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; }
.op-task-ico {
  width: 30px; height: 30px; border-radius: 7px; flex: none; display: flex;
  align-items: center; justify-content: center; margin-top: 1px;
}
.op-task-ico .icon { width: 13px; height: 13px; }
.op-task--urgent .op-task-ico { background: var(--uc-warn-bg); color: var(--uc-warn); }
.op-task--block  .op-task-ico { background: var(--uc-block-bg); color: var(--uc-block); }
.op-task--ok     .op-task-ico { background: var(--uc-ok-bg);    color: var(--uc-ok); }
.op-task--wait   .op-task-ico { background: var(--uc-code);     color: var(--uc-ink-4); }
.op-task--warn   .op-task-ico { background: var(--uc-warn-bg); color: var(--uc-warn); }

.op-task-txt { min-width: 0; flex: 1; }
.op-task-t {
  font-size: 14px; font-weight: 600; color: var(--uc-ink); line-height: 1.4; margin: 0 0 3px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.op-task-why { font-size: 12.5px; line-height: 1.55; color: var(--uc-ink-2); margin: 0; }
.op-task-meta {
  font-size: 11.5px; color: var(--uc-ink-3); margin-top: 5px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.op-task-meta b { color: var(--uc-ink-2); font-weight: 500; }
.op-task-id {
  font-family: var(--uc-mono); font-size: 11.5px; font-weight: 600; color: var(--uc-ink-2);
  background: var(--uc-code); padding: 1px 7px; border-radius: 4px; letter-spacing: .01em;
}
.op-task--warn .op-task-id  { background: var(--uc-warn-bg);  color: var(--uc-warn-ink); }
.op-task--block .op-task-id { background: var(--uc-block-bg); color: var(--uc-block); }
.op-task-amt {
  font-family: var(--uc-mono); font-size: 17px; font-weight: 600; color: var(--uc-ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; flex: none;
}
.op-task-amt small { display: block; font-family: var(--sans, inherit); font-size: 10.5px; font-weight: 400; color: var(--uc-ink-3); }

.op-task-foot {
  padding: 10px 15px; border-top: 1px solid var(--uc-line); background: #FCFDFD;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.op-task-foot .op-spacer { margin-left: auto; }

.op-btn {
  height: 32px; padding: 0 14px; font-family: inherit; font-size: 12.5px; font-weight: 500;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--uc-line-2); background: var(--uc-surface); color: var(--uc-ink-2);
  white-space: nowrap;
}
.op-btn:hover:not(:disabled) { border-color: var(--uc-ink-3); color: var(--uc-ink); }
.op-btn:disabled { opacity: .45; cursor: not-allowed; }
.op-btn--go { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.op-btn--go:hover:not(:disabled) { background: #05B384; border-color: #05B384; }
.op-btn--warn { background: var(--uc-warn); border-color: var(--uc-warn); color: #fff; font-weight: 600; }
.op-btn--warn:hover:not(:disabled) { filter: brightness(.94); }
.op-btn--ghost { border-color: transparent; background: none; }
.op-btn--ghost:hover { background: var(--uc-code); border-color: transparent; }
.op-btn .icon { width: 11px; height: 11px; }

/* --------------------------------------------------------- evidence ---- */
.op-ev { border-top: 1px solid var(--uc-line); background: #FBFCFC; }
.op-ev[hidden] { display: none; }
.op-ev-in { padding: 13px 15px; }
.op-ev-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--uc-ink-3); margin: 0 0 8px;
}
.op-ev-h + .op-ev-h { margin-top: 16px; }
.op-disc {
  appearance: none; border: 0; background: none; font-family: inherit; font-size: 12px;
  font-weight: 500; color: var(--uc-info); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.op-disc:hover { text-decoration: underline; }

/* ------------------------------------------------------------ line ----- */
.op-line {
  display: grid; grid-template-columns: 26px minmax(0,1fr) 92px 92px 78px;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--uc-line); align-items: baseline;
  font-size: 12px;
}
.op-line:last-child { border-bottom: 0; }
.op-line-n { font-family: var(--uc-mono); font-size: 10.5px; color: var(--uc-ink-3); }
.op-line-d { min-width: 0; }
.op-line-sku { font-family: var(--uc-mono); font-size: 10.5px; color: var(--uc-ink-3); }
.op-line-v { font-family: var(--uc-mono); font-variant-numeric: tabular-nums; text-align: right; }
.op-line-hd { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--uc-ink-3); }
.op-line-hd .op-line-v { text-align: right; }

/* --------------------------------------------------------- overview ---- */
.op-hero {
  background: var(--uc-surface); border: 1px solid var(--uc-line); border-radius: 10px;
  padding: 20px 22px; margin-bottom: 16px;
}
.op-hero-t { font-size: 17px; font-weight: 600; color: var(--uc-ink); margin: 0 0 5px; }
.op-hero-s { font-size: 13px; line-height: 1.6; color: var(--uc-ink-2); margin: 0; max-width: 62ch; }

.op-split3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.op-metric { background: var(--uc-surface); border: 1px solid var(--uc-line); border-radius: 9px; padding: 15px 16px; }
.op-metric-k { font-size: 11.5px; color: var(--uc-ink-3); margin-bottom: 6px; }
.op-metric-v {
  font-family: var(--uc-mono); font-size: 26px; font-weight: 600; line-height: 1;
  color: var(--uc-ink); font-variant-numeric: tabular-nums;
}
.op-metric-v small { font-size: 13px; font-weight: 500; color: var(--uc-ink-3); }
.op-metric-x { font-size: 11.5px; color: var(--uc-ink-3); margin-top: 6px; line-height: 1.5; }
.op-metric[data-tone="ok"]    .op-metric-v { color: var(--uc-ok); }
.op-metric[data-tone="warn"]  .op-metric-v { color: var(--uc-warn); }
.op-metric[data-tone="block"] .op-metric-v { color: var(--uc-block); }

.op-funnel { display: flex; flex-direction: column; gap: 8px; }
.op-fun-row { display: grid; grid-template-columns: 150px minmax(0,1fr) 74px; gap: 12px; align-items: center; font-size: 12.5px; }
.op-fun-k { color: var(--uc-ink-2); }
.op-fun-bar { height: 22px; border-radius: 4px; background: var(--uc-code); overflow: hidden; }
.op-fun-bar i { display: block; height: 100%; border-radius: 4px; }
.op-fun-v { font-family: var(--uc-mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ toast ---- */
.op-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.op-toast {
  background: #1F2A26; color: #fff; border-radius: 8px; padding: 11px 14px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 22px rgba(0,0,0,.24);
  display: flex; gap: 10px; align-items: flex-start;
}
.op-toast b { font-weight: 600; }
.op-toast-i { flex: none; margin-top: 2px; }
.op-toast-i .icon { width: 12px; height: 12px; }
.op-toast--ok .op-toast-i    { color: #4FD1A8; }
.op-toast--warn .op-toast-i  { color: #F0B95C; }
.op-toast--block .op-toast-i { color: #F08A78; }

/* ------------------------------------------------------------ empty ---- */
.op-zero { text-align: center; padding: 54px 20px; }
.op-zero-i { width: 44px; height: 44px; border-radius: 50%; background: var(--uc-ok-bg); color: var(--uc-ok);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.op-zero-i .icon { width: 18px; height: 18px; }
.op-zero-t { font-size: 15px; font-weight: 600; color: var(--uc-ink); margin: 0 0 5px; }
.op-zero-s { font-size: 12.5px; color: var(--uc-ink-3); margin: 0; line-height: 1.6; }

/* ------------------------------------------------------------ tour ----- */
.tour-veil { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.tour-veil[hidden] { display: none; }
.tour-veil-fill { position: absolute; background: rgba(15,22,20,.56); pointer-events: auto; transition: all .18s ease; }
.tour-ring {
  position: absolute; border: 2px solid var(--green); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(6,198,146,.22); pointer-events: none; transition: all .18s ease;
}
.tour-card {
  position: fixed; z-index: 72; width: 352px; max-width: calc(100vw - 28px);
  background: var(--uc-surface); border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.26);
  overflow: hidden; pointer-events: auto;
}
.tour-card-h { padding: 13px 15px 0; }
.tour-step {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); margin-bottom: 4px;
}
.tour-t { font-size: 14.5px; font-weight: 600; color: var(--uc-ink); margin: 0 0 6px; line-height: 1.35; }
.tour-b { font-size: 12.5px; line-height: 1.65; color: var(--uc-ink-2); margin: 0 0 12px; padding: 0 15px; }
.tour-b b { color: var(--uc-ink); font-weight: 600; }
.tour-b .uc-mono { font-size: 11px; }
.tour-f { padding: 10px 15px; border-top: 1px solid var(--uc-line); display: flex; align-items: center; gap: 8px; background: #FCFDFD; }
.tour-dots { display: flex; gap: 4px; margin-right: auto; }
.tour-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--uc-line-2); display: block; }
.tour-dots i.is-on { background: var(--green); }
.tour-x { position: absolute; right: 9px; top: 9px; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; color: var(--uc-ink-3); border-radius: 5px; }
.tour-x:hover { background: var(--uc-code); color: var(--uc-ink); }
.tour-x .icon { width: 10px; height: 10px; }

@media (max-width: 720px) {
  .op-task-main { flex-wrap: wrap; }
  .op-task-amt { text-align: left; }
  .op-line { grid-template-columns: 22px minmax(0,1fr) 78px; }
  .op-line > .op-line-v:nth-child(4), .op-line > .op-line-v:nth-child(5) { display: none; }
  .op-fun-row { grid-template-columns: 108px minmax(0,1fr) 60px; }
}

/* ------------------------------------------------------- real ingest ---- */
.op-drop {
  border: 2px dashed var(--uc-line-2); border-radius: 10px; background: var(--uc-surface);
  padding: 26px 22px; text-align: center; transition: border-color .15s, background .15s;
}
.op-drop.is-over { border-color: var(--green); background: var(--uc-ok-bg); }
.op-drop-i { width: 42px; height: 42px; border-radius: 50%; background: var(--uc-code);
  color: var(--uc-ink-4); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 11px; }
.op-drop-i .icon { width: 17px; height: 17px; }
.op-drop-t { font-size: 15px; font-weight: 600; color: var(--uc-ink); margin: 0 0 5px; }
.op-drop-s { font-size: 12.5px; line-height: 1.65; color: var(--uc-ink-3); margin: 0 auto 14px; max-width: 52ch; }
.op-drop-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.op-drop input[type=file] { display: none; }

.op-files { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.op-file {
  background: var(--uc-surface); border: 1px solid var(--uc-line); border-radius: 7px;
  padding: 11px 13px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 11px; align-items: start;
}
.op-file-i { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--uc-code); color: var(--uc-ink-3); }
.op-file-i .icon { width: 11px; height: 11px; }
.op-file.is-done .op-file-i { background: var(--uc-ok-bg); color: var(--uc-ok); }
.op-file.is-err  .op-file-i { background: var(--uc-block-bg); color: var(--uc-block); }
.op-file-n { font-size: 13px; font-weight: 600; color: var(--uc-ink); word-break: break-all; }
.op-file-s { font-size: 11.5px; color: var(--uc-ink-3); margin-top: 3px; line-height: 1.55; }
.op-file-s b { color: var(--uc-ink-2); font-weight: 500; }
.op-file-r { font-family: var(--uc-mono); font-size: 11px; color: var(--uc-ink-3); text-align: right; white-space: nowrap; }
.op-prog { height: 4px; border-radius: 2px; background: var(--uc-code); margin-top: 7px; overflow: hidden; }
.op-prog i { display: block; height: 100%; background: var(--green); border-radius: 2px; transition: width .2s; }

.op-pagechips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.op-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  background: var(--uc-code); color: var(--uc-ink-2);
}
.op-chip[data-c="text"]    { background: var(--uc-ok-bg);    color: var(--uc-ok); }
.op-chip[data-c="scanned"] { background: var(--uc-warn-bg);  color: var(--uc-warn); }
.op-chip[data-c="mixed"]   { background: var(--uc-info-bg);  color: var(--uc-info); }
.op-chip[data-c="garbled"] { background: var(--uc-block-bg); color: var(--uc-block); }