/* ==========================================================================
   Document Processing demos — upload + extraction UI
   Standalone pages (dark header + white section). Uses framworq.css tokens.
   Square by default; only the drop target's dashed frame is the visual anchor.
   ========================================================================== */

.dp, .dtl, .content{ --ok:#0E9F6E; --warn:#B45309; --fail:#DC2626; }
.dp{ max-width:1000px; }

/* ---- Layout: upload panel <-> result panel ------------------------------ */
.dp__stage{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  box-shadow:0 0 0 1px var(--line); }
.dp__panel{ background:#fff; padding:30px; }
.dp__panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; }
.dp__panel-title{ font-size:13px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--text-3); }
.dp__panel-note{ font-size:12.5px; color:var(--muted); }

/* ---- Dropzone ----------------------------------------------------------- */
.dz{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:44px 24px; cursor:pointer;
  border:1.5px dashed var(--line-2); background:var(--surface-2);
  transition:border-color .18s var(--ease-std), background .18s var(--ease-std);
}
.dz:hover{ border-color:var(--text-3); }
.dz.is-drag{ border-color:var(--accent); background:rgba(16,40,224,.04); }
.dz__ico{ width:44px; height:44px; color:var(--text-3); }
.dz.is-drag .dz__ico{ color:var(--accent); }
.dz__title{ font-size:16px; font-weight:600; color:var(--ink); }
.dz__hint{ font-size:13px; color:var(--muted); }
.dz__browse{ color:var(--accent); font-weight:600; }
.dz input[type=file]{ display:none; }

/* Selected-file row */
.dp__file{ display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--line-2); background:#fff; }
.dp__file-ico{ width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; }
.dp__file-ico svg{ width:18px; height:18px; }
.dp__file-main{ min-width:0; flex:1; }
.dp__file-name{ font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp__file-meta{ font-size:12.5px; color:var(--muted); }
.dp__file-x{ flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:#fff; cursor:pointer; color:var(--text-3); }
.dp__file-x:hover{ border-color:var(--ink); color:var(--ink); }

.dp__actions{ display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.dp__actions .fq-meta{ margin-left:auto; }

/* ---- Processing stepper ------------------------------------------------- */
.dp__steps{ display:flex; flex-direction:column; gap:2px; }
.step{ display:flex; align-items:center; gap:14px; padding:13px 0; }
.step__dot{ flex:0 0 auto; width:26px; height:26px; border:1.5px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; color:var(--muted); background:#fff; }
.step__dot svg{ width:14px; height:14px; }
.step__label{ font-size:14.5px; color:var(--text-3); }
.step__sub{ font-size:12.5px; color:var(--muted); }
.step.is-active .step__dot{ border-color:var(--accent); color:var(--accent); }
.step.is-active .step__label{ color:var(--ink); font-weight:600; }
.step.is-done .step__dot{ border-color:var(--ok); background:var(--ok); color:#fff; }
.step.is-done .step__label{ color:var(--ink); }
.step__spin{ width:14px; height:14px; border:2px solid rgba(16,40,224,.25); border-top-color:var(--accent);
  border-radius:999px !important; animation:dp-spin .7s linear infinite; }
@keyframes dp-spin{ to{ transform:rotate(360deg); } }

/* ---- Result card -------------------------------------------------------- */
.res__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--line); }
.res__supplier{ font-size:22px; font-weight:600; letter-spacing:-.4px; color:var(--ink); }
.res__sub{ font-size:13.5px; color:var(--text-3); margin-top:4px; }
.res__amt{ text-align:right; }
.res__amt-n{ font-size:26px; font-weight:600; letter-spacing:-.6px; color:var(--ink); }
.res__amt-l{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }

/* status pill */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  letter-spacing:.3px; padding:4px 10px; border:1px solid var(--line-2); color:var(--text-2); background:#fff; }
.pill::before{ content:""; width:6px; height:6px; border-radius:999px !important; background:var(--muted); }
.pill--ok{ color:var(--ok); border-color:rgba(14,159,110,.35); background:rgba(14,159,110,.06); }
.pill--ok::before{ background:var(--ok); }
.pill--warn{ color:var(--warn); border-color:rgba(180,83,9,.32); background:rgba(180,83,9,.06); }
.pill--warn::before{ background:var(--warn); }
.pill--fail{ color:var(--fail); border-color:rgba(220,38,38,.32); background:rgba(220,38,38,.06); }
.pill--fail::before{ background:var(--fail); }

/* field grid */
.res__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  box-shadow:0 0 0 1px var(--line); margin:22px 0; }
.res__cell{ background:#fff; padding:14px 16px; min-width:0; }
.res__k{ font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.res__v{ font-size:15px; color:var(--ink); margin-top:5px; word-break:break-word; }
.res__v.is-empty{ color:var(--muted); }

/* line items */
.res__section-t{ font-size:13px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text-3); margin:26px 0 12px; }
.litab{ width:100%; border-collapse:collapse; font-size:14px; }
.litab th{ text-align:left; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line); }
.litab td{ padding:11px 12px; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:top; }
.litab tr:last-child td{ border-bottom:0; }
.litab .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.litab .desc{ color:var(--ink); }

/* totals */
.res__totals{ margin-left:auto; margin-top:16px; width:min(340px,100%); }
.res__totals .row{ display:flex; justify-content:space-between; padding:7px 0; font-size:14.5px; color:var(--text-2); }
.res__totals .row.grand{ border-top:1px solid var(--line); margin-top:4px; padding-top:12px;
  font-size:17px; font-weight:600; color:var(--ink); }
.res__totals .num{ font-variant-numeric:tabular-nums; }

/* validation note */
.res__note{ background:#F6F7F9; border-left:3px solid var(--muted); padding:14px 18px; margin-top:22px;
  font-size:14px; color:var(--text-2); }
.res__note.is-warn{ border-left-color:var(--warn); background:rgba(180,83,9,.05); }
.res__note.is-fail{ border-left-color:var(--fail); background:rgba(220,38,38,.05); }
.res__note b{ color:var(--ink); }

/* confirmations */
.res__confirm{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--line); }
.chipc{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text-2);
  border:1px solid var(--line-2); padding:7px 12px; background:#fff; }
.chipc svg{ width:15px; height:15px; color:var(--ok); }
.chipc a{ color:var(--accent); font-weight:600; }
.res__confirm .fq-btn{ margin-left:auto; }

/* error */
.dp__error{ display:flex; gap:12px; padding:16px 18px; border:1px solid rgba(220,38,38,.3);
  background:rgba(220,38,38,.05); color:var(--fail); font-size:14px; }
.dp__error svg{ width:20px; height:20px; flex:0 0 auto; }
.dp__error b{ display:block; color:var(--fail); margin-bottom:2px; }
.dp__error span{ color:var(--text-2); }

/* how-it-works strip */
.dp__how{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  box-shadow:0 0 0 1px var(--line); margin-top:40px; }
.dp__how-item{ background:#fff; padding:22px; }
.dp__how-n{ font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.4px; }
.dp__how-t{ font-size:15px; font-weight:600; color:var(--ink); margin-top:10px; }
.dp__how-d{ font-size:13px; color:var(--text-3); margin-top:6px; line-height:1.55; }

/* ---- Multi-file queue + per-file jobs ----------------------------------- */
.dp__file + .dp__file{ margin-top:10px; }
.dp__queue-note{ font-size:12.5px; color:var(--muted); margin:14px 2px 0; }

.job__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.job__fi{ width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; }
.job__fi svg{ width:16px; height:16px; }
.job__name{ font-weight:600; font-size:14.5px; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job__status{ margin-left:auto; flex:0 0 auto; font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; padding:4px 10px; border:1px solid var(--line-2); color:var(--text-3); background:#fff; }
.job__status.is-processing{ color:var(--accent); border-color:rgba(16,40,224,.3); background:rgba(16,40,224,.05); }
.job__status.is-done{ color:var(--ok); border-color:rgba(14,159,110,.35); background:rgba(14,159,110,.06); }
.job__status.is-sent{ color:var(--text-2); }
.job__status.is-failed{ color:var(--fail); border-color:rgba(220,38,38,.32); background:rgba(220,38,38,.06); }
.job + .job{ border-top:1px solid var(--line); margin-top:26px; padding-top:26px; }
.run__foot{ display:flex; align-items:center; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.run__foot .fq-meta{ margin-left:auto; }

/* ---- Page tabs (Upload / History) --------------------------------------- */
.dp__tabs{ display:inline-flex; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); margin-top:18px; }
.dp__tab{ background:#fff; padding:9px 18px; font-size:13.5px; font-weight:500; color:var(--text-3); }
.dp__tab:hover{ color:var(--ink); }
.dp__tab.is-active{ background:var(--ink); color:#fff; }

/* ---- Dashboard: KPIs + history table ------------------------------------ */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  box-shadow:0 0 0 1px var(--line); }
.kpi{ background:#fff; padding:22px 24px; min-width:0; }
.kpi__n{ font-size:30px; font-weight:600; letter-spacing:-.8px; color:var(--ink); line-height:1.05; }
.kpi__n small{ font-size:16px; font-weight:500; color:var(--text-3); letter-spacing:-.2px; }
.kpi__l{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-top:8px; }

.dp__filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:30px 0 14px; }
.dp__filter .fq-chip{ padding:6px 13px; }

.dtable-wrap{ overflow-x:auto; box-shadow:0 0 0 1px var(--line); }
.dtable{ width:100%; border-collapse:collapse; font-size:14px; min-width:720px; background:#fff; }
.dtable th{ text-align:left; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap; }
.dtable td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:middle; }
.dtable tr:last-child td{ border-bottom:0; }
.dtable tbody tr{ transition:background .15s var(--ease-std); }
.dtable tbody tr:hover{ background:var(--surface-2); }
.dtable .supplier{ color:var(--ink); font-weight:600; }
.dtable .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dtable .when{ color:var(--text-3); white-space:nowrap; }
.dtable .drive{ color:var(--accent); font-weight:600; white-space:nowrap; }
.dtable .muted{ color:var(--muted); }
.dp__empty{ background:#fff; box-shadow:0 0 0 1px var(--line); padding:56px 24px; text-align:center; }
.dp__empty h3{ font-size:18px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.dp__empty p{ font-size:14px; color:var(--text-3); margin:0; }

.dtable tbody tr.is-click{ cursor:pointer; }

/* ---- Single-invoice detail dashboard ------------------------------------ */
.dtl{ max-width:1120px; display:flex; flex-direction:column; gap:20px; }
.dcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:14px; }
.dcrumb a{ color:var(--text-3); } .dcrumb a:hover{ color:var(--ink); }

.dsec{ background:#fff; box-shadow:0 0 0 1px var(--line); padding:26px; }
.dsec__t{ font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-3);
  margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.dsec__t .count{ color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; }
.dgrid2{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start; }
/* equal-height variant: both columns stretch to the taller one */
.dgrid2--even{ align-items:stretch; }
.candcol{ display:flex; flex-direction:column; gap:20px; height:100%; }
.candcol > .dsec:last-child{ flex:1 1 auto; }

/* processing status */
.pstat{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.pstep{ display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--line-2);
  background:var(--surface-2); font-size:13.5px; color:var(--text-2); flex:1 1 150px; }
.pstep .tick{ width:18px; height:18px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--ok); color:#fff; border-radius:999px !important; }
.pstep .tick svg{ width:11px; height:11px; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; font-size:14px; font-weight:600;
  border:1px solid var(--line-2); color:var(--text-2); }
.badge__dot{ width:9px; height:9px; border-radius:999px !important; background:currentColor; }
.badge--ok{ color:var(--ok); border-color:rgba(14,159,110,.4); background:rgba(14,159,110,.07); }
.badge--warn{ color:var(--warn); border-color:rgba(180,83,9,.35); background:rgba(180,83,9,.07); }
.badge--fail{ color:var(--fail); border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.07); }

/* validation checklist */
.vlist{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); }
.vitem{ background:#fff; padding:12px 15px; display:flex; align-items:center; gap:11px; font-size:14px; color:var(--text-2); }
.vitem .vi{ width:20px; height:20px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:999px !important; color:#fff; }
.vitem .vi svg{ width:12px; height:12px; }
.vitem.ok .vi{ background:var(--ok); } .vitem.warn .vi{ background:var(--warn); } .vitem.fail .vi{ background:var(--fail); }
.vitem b{ color:var(--ink); font-weight:600; }

/* AI insights */
.ins{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); }
.ins__c{ background:#fff; padding:16px 18px; min-width:0; }
.ins__l{ font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.ins__v{ font-size:17px; color:var(--ink); margin-top:6px; font-weight:600; }
.ins__v.sm{ font-size:14.5px; font-weight:500; }
.conf{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.conf__bar{ flex:1; height:6px; background:var(--surface-tint); position:relative; }
.conf__fill{ position:absolute; inset:0 auto 0 0; background:var(--accent); }

/* timeline */
.tl__i{ position:relative; padding:0 0 20px 26px; border-left:1px solid var(--line); }
.tl__i:last-child{ border-left-color:transparent; padding-bottom:0; }
.tl__d{ position:absolute; left:-6px; top:1px; width:12px; height:12px; border-radius:999px !important;
  background:var(--ok); box-shadow:0 0 0 3px #fff; }
.tl__t{ font-size:14px; font-weight:600; color:var(--ink); }
.tl__ts{ font-size:12.5px; color:var(--muted); margin-top:2px; }

/* document preview */
.docprev__frame{ width:100%; aspect-ratio:3/4; background:var(--surface-2); border:1px solid var(--line); }
.docprev__frame iframe{ width:100%; height:100%; border:0; display:block; }
.docprev__ph{ width:100%; aspect-ratio:3/4; background:var(--surface-2); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted);
  text-align:center; padding:24px; }
.docprev__ph svg{ width:38px; height:38px; color:var(--text-3); }
.docprev__acts{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* database preview (key/value) */
.kv{ width:100%; border-collapse:collapse; font-size:14px; box-shadow:0 0 0 1px var(--line); background:#fff; }
.kv td{ padding:13px 16px; border-bottom:1px solid var(--line); }
.kv tr:last-child td{ border-bottom:0; }
.kv td:first-child{ color:var(--muted); width:230px; font-size:12px; letter-spacing:.3px; text-transform:uppercase; vertical-align:middle; }
.kv td:last-child{ color:var(--ink); font-weight:500; }

@media (max-width:900px){ .dgrid2{ grid-template-columns:1fr; } }
@media (max-width:820px){
  .dp__panel{ padding:22px; }
  .res__grid{ grid-template-columns:repeat(2,1fr); }
  .dp__how{ grid-template-columns:repeat(2,1fr); }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .ins{ grid-template-columns:repeat(2,1fr); }
  .dsec{ padding:20px; }
}
@media (max-width:560px){
  .vlist{ grid-template-columns:1fr; }
  .ins{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .res__grid{ grid-template-columns:1fr; }
  .dp__how{ grid-template-columns:1fr; }
  .litab .hide-sm{ display:none; }
}

/* ==========================================================================
   Overview dashboard (console) — KPI grid, charts, feeds, due-date monitor
   ========================================================================== */
.ov{ display:flex; flex-direction:column; gap:20px; }
.kpis--6{ grid-template-columns:repeat(6,1fr); }
.kpi--accent .kpi__n{ color:var(--accent); }
.kpi--warn   .kpi__n{ color:var(--warn); }
.kpi--fail   .kpi__n{ color:var(--fail); }
.kpi--ok     .kpi__n{ color:var(--ok); }
.kpi__sub{ font-size:11.5px; color:var(--muted); margin-top:4px; }

.ov-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.ov-2--wide{ grid-template-columns:1.5fr 1fr; }
.ov-2--even{ align-items:stretch; }

.dsec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 18px; }
.dsec__head .dsec__t{ margin:0; }
.dsec__seg{ display:inline-flex; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); }
.dsec__seg span{ background:#fff; padding:5px 11px; font-size:12px; color:var(--text-3); cursor:pointer; }
.dsec__seg span.is-active{ background:var(--ink); color:#fff; }

/* vertical bar chart */
.vbars{ display:flex; align-items:flex-end; gap:5px; height:180px; padding-top:8px; }
.vbar{ flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; min-width:0; height:100%; }
.vbar__fill{ width:100%; max-width:24px; background:var(--accent); min-height:2px; }
.vbar__fill.is-zero{ background:var(--line-2); }
.vbar__x{ font-size:10px; color:var(--muted); white-space:nowrap; }
.vbar:hover .vbar__fill{ background:var(--accent-light); }

/* horizontal bars */
.hbars{ display:flex; flex-direction:column; gap:13px; }
.hbar{ display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:12px; }
.hbar__l{ font-size:13.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar__track{ height:10px; background:var(--surface-tint); position:relative; overflow:hidden; }
.hbar__fill{ position:absolute; inset:0 auto 0 0; background:var(--accent); min-width:2px; }
.hbar__v{ font-size:13px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* donut + legend */
.donut-wrap{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.dleg{ display:flex; flex-direction:column; gap:12px; }
.dleg__i{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-2); }
.dleg__sw{ width:12px; height:12px; flex:0 0 auto; }
.dleg__i b{ color:var(--ink); }
.dleg__i span{ color:var(--muted); }

/* activity feed */
.feed{ display:flex; flex-direction:column; }
.feed__i{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.feed__i:last-child{ border-bottom:0; }
.feed__d{ width:9px; height:9px; border-radius:999px !important; background:var(--ok); margin-top:5px; flex:0 0 auto; }
.feed__m{ min-width:0; }
.feed__t{ font-size:13.5px; color:var(--ink); }
.feed__t b{ font-weight:600; }
.feed__ts{ font-size:12px; color:var(--muted); margin-top:2px; }

/* validation summary list */
.vsum{ display:flex; flex-direction:column; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); }
.vsum__i{ display:flex; align-items:center; gap:12px; padding:12px 15px; background:#fff; font-size:14px; color:var(--text-2); }
.vsum__n{ margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.vsum__ic{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:999px !important;
  background:rgba(180,83,9,.1); color:var(--warn); flex:0 0 auto; }
.vsum__ic svg{ width:12px; height:12px; }

/* due-date monitor */
.due{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.due--over{ color:var(--fail); } .due--soon{ color:var(--warn); } .due--ok{ color:var(--text-3); font-weight:500; }
.due__dot{ width:6px; height:6px; border-radius:999px !important; background:currentColor; flex:0 0 auto; }
.duerow{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.duerow:last-child{ border-bottom:0; }
.duerow__m{ min-width:0; flex:1; }
.duerow__s{ font-size:13.5px; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.duerow__d{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.duerow__amt{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13.5px; color:var(--ink); }

@media (max-width:1000px){ .ov-2, .ov-2--wide{ grid-template-columns:1fr; } }
@media (max-width:900px){ .kpis--6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .kpis--6{ grid-template-columns:repeat(2,1fr); } .hbar{ grid-template-columns:96px 1fr auto; } }

/* ==========================================================================
   Receipt + Resume (ATS) consoles — extra bits
   ========================================================================== */
/* extra pill variants */
.pill--info{ color:var(--accent); border-color:rgba(16,40,224,.3); background:rgba(16,40,224,.06); }
.pill--info::before{ background:var(--accent); }
.pill--muted{ color:var(--text-3); }
.pill--muted::before{ background:var(--muted); }

/* skill tags */
.sktags{ display:flex; flex-wrap:wrap; gap:8px; }
.sktag{ font-size:12.5px; padding:5px 10px; border:1px solid var(--line-2); color:var(--text-2); background:#fff; }
.sktag--ok{ color:var(--ok); border-color:rgba(14,159,110,.35); background:rgba(14,159,110,.06); }
.sktag--miss{ color:var(--fail); border-color:rgba(220,38,38,.3); background:rgba(220,38,38,.05); }

/* select */
.fq-sel{ width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); padding:11px 14px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.fq-sel:focus{ outline:none; border-color:var(--ink); }

/* big score */
.scorebig{ font-size:40px; font-weight:600; letter-spacing:-1.2px; line-height:1; color:var(--ink); }
.scorebig small{ font-size:18px; color:var(--muted); font-weight:500; letter-spacing:0; }

/* avatars */
.avatar-lg{ width:46px; height:46px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; border-radius:999px !important; flex:0 0 auto; }
.avatar-sm{ width:30px; height:30px; background:var(--surface-tint); color:var(--text-2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; border-radius:999px !important; flex:0 0 auto; }

/* position cards (recruiting) */
.pos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); }
.poscard{ display:block; background:#fff; padding:22px; transition:background .18s var(--ease-std); }
.poscard:hover{ background:var(--surface-2); }
.poscard__t{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.3px; }
.poscard:hover .poscard__t{ color:var(--accent); }
.poscard__meta{ font-size:12.5px; color:var(--muted); margin-top:5px; }
.poscard__stats{ display:flex; gap:22px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.poscard__stat b{ font-size:20px; font-weight:600; color:var(--ink); display:block; line-height:1; }
.poscard__stat span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }

/* candidate identity row */
.cand-id{ display:flex; align-items:center; gap:14px; }
.cand-id__m{ min-width:0; }
.cand-id__n{ font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cand-id__s{ font-size:13px; color:var(--text-3); }

/* score bars reuse .hbar; add a score chip in tables */
.scorechip{ display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
.scorechip__bar{ width:54px; height:6px; background:var(--surface-tint); position:relative; }
.scorechip__fill{ position:absolute; inset:0 auto 0 0; background:var(--accent); }

@media (max-width:1000px){ .pos-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pos-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Lead Sourcing Machine — leads console
   ========================================================================== */
.kpis--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ .kpis--3{ grid-template-columns:repeat(1,1fr); } }
.kpis--5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .kpis--5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .kpis--5{ grid-template-columns:repeat(2,1fr); } }

/* text input (mirrors .fq-sel) */
.fq-inp{ width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); padding:11px 14px; }
.fq-inp:focus{ outline:none; border-color:var(--ink); }
.fq-inp::placeholder{ color:var(--muted); }

/* rating stars */
.lstars{ display:inline-flex; gap:1px; vertical-align:middle; }
.lstar{ color:var(--line-2); font-size:14px; line-height:1; }
.lstar.is-on{ color:#E8A317; }

/* leads list — campaign filter cards */
.lcamps{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.lcamp-card{ text-align:left; background:#fff; border:1px solid var(--line-2); padding:11px 15px; cursor:pointer;
  min-width:148px; transition:border-color .15s, background .15s; font-family:inherit; }
.lcamp-card:hover{ border-color:var(--ink); }
.lcamp-card.is-sel{ border-color:var(--accent); background:rgba(16,40,224,.04); box-shadow:inset 0 0 0 1px var(--accent); }
.lcamp-card__t{ font-size:14px; font-weight:600; color:var(--ink); }
.lcamp-card__l{ font-size:12px; color:var(--text-3); margin-top:2px; }
.lcamp-card__s{ font-size:12px; color:var(--muted); margin-top:8px; }
.lcamp-card__s b{ color:var(--text-2); }
.lcamp-card__hot{ color:var(--fail); font-weight:600; }

/* website cell */
.lweb{ font-size:13px; color:var(--accent); }
.lweb--no{ color:var(--fail); opacity:.85; }

/* leads list — filter group divider */
.fq-chip--sep{ margin-left:9px; position:relative; }
.fq-chip--sep::before{ content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:1px; height:16px; background:var(--line-2); }

/* leads list — inline search */
.lsearch{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:#fff; padding:0 10px; min-width:200px; }
.lsearch svg{ width:15px; height:15px; color:var(--muted); flex:0 0 auto; }
.lsearch input{ border:none; outline:none; font-family:inherit; font-size:13px; color:var(--ink); padding:7px 0; width:100%; background:transparent; }
/* leads table cells — business / contact / location in view */
.lbiz__n{ font-size:14.5px; font-weight:600; color:var(--ink); }
.lbiz__s{ font-size:12.5px; color:var(--text-3); margin-top:2px; }
.lcontact{ display:flex; flex-direction:column; gap:2px; }
.lcontact__i{ font-size:13px; color:var(--text-2); white-space:nowrap; }
.lcontact__i--e{ color:var(--text-3); }
.lloc__c{ font-size:14px; color:var(--text-2); }
.lloc__n{ font-size:12.5px; color:var(--muted); margin-top:2px; }

/* campaign card (lead detail) */
.lcamp__row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.lcamp__ico{ width:40px; height:40px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(16,40,224,.06); color:var(--accent); }
.lcamp__ico svg{ width:19px; height:19px; }
.lcamp__main{ flex:1; min-width:140px; }
.lcamp__term{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.2px; }
.lcamp__loc{ font-size:13px; color:var(--text-3); margin-top:3px; }
.lcamp__stat{ text-align:center; padding:0 6px; }
.lcamp__stat b{ display:block; font-size:22px; font-weight:600; color:var(--ink); line-height:1; }
.lcamp__stat span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }

/* channel chips (lead detail) */
.lchips{ display:flex; flex-wrap:wrap; gap:8px; }
.lchip{ font-size:12.5px; padding:6px 11px; border:1px solid var(--line-2); color:var(--accent);
  background:rgba(16,40,224,.04); font-weight:500; transition:background .15s; }
.lchip:hover{ background:rgba(16,40,224,.09); }

/* key-value list (lead detail contact) */
.lkvs{ display:flex; flex-direction:column; }
.lkv{ display:grid; grid-template-columns:118px 1fr; gap:14px; padding:9px 0; border-top:1px solid var(--line); font-size:14px; }
.lkv:first-child{ border-top:none; padding-top:0; }
.lkv__k{ color:var(--muted); font-size:12.5px; }
.lkv__v{ color:var(--text-2); word-break:break-word; }
.lkv__v a{ color:var(--accent); }

/* source-leads form */
.lform{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:720px; margin-bottom:22px; }
.lfield{ display:flex; flex-direction:column; gap:8px; }
.lfield--sm{ grid-column:1 / -1; max-width:240px; }
.lfield--full{ grid-column:1 / -1; }
.lhint{ font-size:12px; color:var(--muted); }
textarea.fq-inp{ resize:vertical; min-height:48px; line-height:1.5; }
.lrun-focus{ font-size:13px; color:var(--text-3); font-style:italic; margin-top:6px; }

/* source-leads run view */
.lrun-head{ margin-bottom:18px; }
.lrun-q{ font-size:14px; color:var(--text-2); }
.lrun-q b{ color:var(--ink); }
.lfound{ margin-top:16px; font-size:13.5px; color:var(--text-2); display:flex; align-items:center; gap:9px; }
.lresult-h{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }

@media (max-width:640px){ .lform{ grid-template-columns:1fr; } }

/* ==========================================================================
   Shopify Competitor Monitor
   ========================================================================== */
/* responsive KPI grid (7 cards wrap cleanly) */
.kpis--auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px;
  background:var(--line); box-shadow:0 0 0 1px var(--line); }

/* topbar campaign selector */
.campsel{ display:flex; align-items:center; gap:8px; margin-right:6px; }
.campsel__l{ font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.campsel__s{ height:36px; padding:0 34px 0 13px; font-size:13.5px; line-height:34px;
  min-width:170px; max-width:230px; text-overflow:ellipsis; background-position:right 11px center; }
@media (max-width:720px){ .campsel__l{ display:none; } .campsel__s{ min-width:130px; max-width:160px; } }

/* mini campaign chip */
.chip-mini{ display:inline-block; font-size:11.5px; padding:2px 9px; border:1px solid var(--line-2);
  border-radius:999px; color:var(--text-3); background:var(--surface-2); white-space:nowrap; }

/* product thumbnails */
.pthumb{ width:40px; height:40px; object-fit:cover; border-radius:8px; box-shadow:0 0 0 1px var(--line);
  flex:0 0 auto; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; }
.pthumb--ph{ font-size:12px; font-weight:600; color:var(--muted); }

/* product cell (table) */
.pbiz{ display:flex; align-items:center; gap:12px; min-width:0; }
.pbiz__m{ min-width:0; }
.pbiz__n{ font-weight:600; color:var(--ink); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.pbiz__s{ font-size:12.5px; color:var(--muted); }
.pprice{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.prrp{ white-space:nowrap; }
.prrp__was{ color:var(--muted); text-decoration:line-through; font-size:13px; }
.prrp__off{ color:var(--ok); font-weight:600; font-size:12.5px; margin-left:2px; }

/* change feed (overview + changes page) */
.chgfeed{ display:flex; flex-direction:column; }
.chg{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); }
.chgfeed .chg:last-child{ border-bottom:0; }
.chg:hover{ background:var(--surface-2); }
.chg__m{ min-width:0; flex:1; }
.chg__t{ font-weight:600; color:var(--ink); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chg__meta{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.chg__d{ font-size:13px; color:var(--text-2); margin-top:4px; font-variant-numeric:tabular-nums; }
.chg__ov{ color:var(--muted); }
.chg__ar{ color:var(--line-2); margin:0 2px; }
.chg__nv{ color:var(--ink); font-weight:600; }
.chg__r{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; }
.chg__ts{ font-size:12px; color:var(--muted); white-space:nowrap; }

/* day-grouped change log */
.chgday{ margin-bottom:8px; }
.chgday__h{ font-size:12.5px; font-weight:600; color:var(--text-3); padding:16px 0 6px; position:sticky; top:0; }

/* mini stacked bar chart */
.tchart{ display:flex; align-items:flex-end; gap:5px; height:150px; padding-top:8px; }
.tcol{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; min-width:0; }
.tcol__bar{ width:100%; max-width:26px; display:flex; flex-direction:column-reverse; border-radius:3px 3px 0 0; overflow:hidden; background:var(--surface-tint); min-height:2px; }
.tcol__bar span{ display:block; width:100%; }
.tcol__x{ font-size:10px; color:var(--muted); margin-top:6px; height:12px; white-space:nowrap; }

/* product detail header */
.phead{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.phero{ width:80px; height:80px; object-fit:cover; border-radius:12px; box-shadow:0 0 0 1px var(--line);
  flex:0 0 auto; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; }
.phero--ph{ font-size:22px; font-weight:600; color:var(--muted); }
.phead__m{ min-width:0; flex:1; }
.phead__pills{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.phead__price{ text-align:right; }

/* price sparkline */
.spark{ margin-top:4px; }
.spark__svg{ width:100%; height:120px; display:block; }
.spark__ax{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; }

/* scan health rows */
.scanlist{ display:flex; flex-direction:column; }
.scanrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.scanlist .scanrow:last-child{ border-bottom:0; }
.scanrow__l{ display:flex; align-items:center; min-width:0; }
.scanrow--link:hover{ background:var(--surface-2); }

/* add-products progress + list */
.addprog{ display:flex; align-items:center; gap:14px; margin:4px 0 18px; }
.addprog__bar{ flex:1; height:8px; background:var(--surface-tint); border-radius:999px; overflow:hidden; }
.addprog__bar span{ display:block; height:100%; background:var(--accent); transition:width .4s var(--ease-std); }
.addprog__t{ font-size:13px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.addlist{ display:flex; flex-direction:column; }
.addrow{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.addlist .addrow:last-child{ border-bottom:0; }
.addrow__i{ width:22px; height:22px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-size:12px; font-weight:700; }
.addrow.is-done .addrow__i{ background:rgba(14,159,110,.12); color:var(--ok); }
.addrow.is-done .addrow__i svg{ width:12px; height:12px; }
.addrow.is-invalid .addrow__i{ background:rgba(220,38,38,.1); color:var(--fail); }
.addrow.is-wait .addrow__i{ color:var(--muted); }
.addrow__u{ flex:1; min-width:0; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.addrow__u a{ color:var(--accent); font-weight:500; }
.addrow__r{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.addlist__price{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }