/* ============================================================
   Demo 1 — Document Metadata QA Agent
   Faithful recreation of the Asite Adoddle Files → Upload →
   metadata-bar flow, plus the purple "Asite Coworker" QA panel
   (extract-and-compare validation — NOT a chat).
   All selectors prefixed `mqa-`. Builds on tokens in main.css.
   ============================================================ */

.mqa-app { position: relative; min-height: 520px; }

/* ============================================================
   ASITE CDE SHELL — top bar · nav tabs · status rail · folder
   tree · Files explorer. The demo runs INSIDE this chrome, the
   same way workflow-design recreates the real Adoddle CDE.
   ============================================================ */
.mqa-cde {
  position: relative; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; box-shadow: var(--sh-1); overflow: hidden;
}

/* ---- dark-blue top bar ---- */
.mqa-cde-top {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 14px; color: #fff;
  background: linear-gradient(90deg, #2a6db5, #15375f);
}
.mqa-cde-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.mqa-cde-logo {
  width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
}
.mqa-cde-brandtx { letter-spacing: .04em; font-size: 14px; }
.mqa-cde-topsearch {
  display: flex; align-items: center; gap: 8px;
  width: 230px; height: 28px; padding: 0 11px; border-radius: 6px;
  background: rgba(255,255,255,.92); color: var(--text-3); font-size: 12.5px;
}
.mqa-cde-proj { display: flex; align-items: center; gap: 6px; opacity: .96; }
.mqa-cde-proj strong { font-weight: 700; }
.mqa-cde-tools { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.mqa-cde-ic { opacity: .9; display: inline-flex; }
.mqa-cde-flag {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.18);
}
.mqa-ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; font-size: 9.5px; font-weight: 800; color: #fff;
}
.mqa-ava.teal { background: #2f9c8f; }

/* ---- nav tabs ---- */
.mqa-cde-tabs {
  display: flex; align-items: center; gap: 2px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: #fff; overflow-x: auto;
}
.mqa-cde-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 11px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-2); border-bottom: 2px solid transparent;
}
.mqa-cde-tab.active { color: var(--asite-blue-text); border-bottom-color: var(--asite-blue); font-weight: 700; }

/* ---- body layout ---- */
.mqa-cde-body { position: relative; display: flex; align-items: stretch; min-height: 480px; }
.mqa-cde-body.cw { min-height: 628px; }

/* ---- left status rail ---- */
.mqa-cde-rail {
  width: 110px; flex: none; padding: 8px; background: #fafbfc;
  border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px;
}
.mqa-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px; text-align: center; border-radius: 8px;
  background: #fff; border: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.2; color: var(--text-3);
}
.mqa-rail-n { font-size: 17px; font-weight: 800; color: var(--text-2); }
.mqa-rail-ic { display: inline-flex; color: #fff; }
.mqa-rail-item.active { background: var(--asite-blue); border-color: var(--asite-blue); color: #fff; font-weight: 700; }
.mqa-rail-item.active .mqa-rail-lbl { color: #fff; }

/* ---- folder tree ---- */
.mqa-cde-tree {
  width: 200px; flex: none; background: #fff;
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
}
.mqa-tree-search {
  display: flex; align-items: center; gap: 6px; margin: 10px 10px 8px;
  height: 28px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text-3);
}
.mqa-tree-search input { border: none; outline: none; background: transparent; font-size: 12px; width: 100%; color: var(--text); }
.mqa-tree-scroll { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.mqa-tree-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px;
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.mqa-tree-row svg { flex: none; }
.mqa-tree-row.folder svg { color: #e0a64a; }
.mqa-tree-row.root svg, .mqa-tree-row.proj svg { color: var(--asite-blue); }
.mqa-tree-row .mqa-tree-tw svg { color: var(--text-3); }
.mqa-tree-tw { display: inline-flex; opacity: .55; }
.mqa-tree-tw.mqa-tw-empty { visibility: hidden; }
.mqa-tree-star { color: #e0a64a; flex: none; }
.mqa-tree-row.child { margin-left: 16px; }
.mqa-tree-row.child2 { margin-left: 30px; }
.mqa-tree-lbl { overflow: hidden; text-overflow: ellipsis; }
.mqa-tree-row.folder.active { background: var(--asite-blue-light); color: var(--asite-blue-text); font-weight: 700; }

/* ---- main Files area ---- */
.mqa-cde-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mqa-files-tabs { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 0 10px; }
.mqa-files-tab {
  padding: 10px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-2); border-bottom: 2px solid transparent;
}
.mqa-files-tab.active { color: var(--asite-blue-text); border-bottom-color: var(--asite-blue); font-weight: 700; }
.mqa-files-tab.cdc { display: inline-flex; align-items: center; gap: 5px; color: var(--asite-blue-text); }
.mqa-files-tab.cdc .ico { color: var(--asite-blue); }
.mqa-files-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 6px 0; flex-wrap: wrap; justify-content: flex-end; }

.mqa-cde-find {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text-3);
}
.mqa-cde-find input { border: none; outline: none; background: transparent; font-size: 12px; width: 92px; color: var(--text); }
.mqa-cde-iconbtn {
  height: 28px; min-width: 28px; padding: 0 7px; gap: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 6px; background: #fff;
  color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer;
}
.mqa-cde-iconbtn:disabled { opacity: .5; cursor: default; }

/* Upload button + dropdown (used inside the Files action bar) */
.mqa-up-wrap { position: relative; }
.mqa-btn-upload {
  height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--asite-blue); color: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s ease;
}
.mqa-btn-upload:hover { background: var(--asite-blue-hover); }
.mqa-btn-upload .ico:last-child { opacity: .85; }
.mqa-up-menu {
  position: absolute; top: calc(100% + 6px); right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-modal);
  padding: 5px; min-width: 168px; z-index: 50; display: flex; flex-direction: column; gap: 2px;
}
.mqa-up-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: none; background: transparent;
  border-radius: 5px; font-size: 13px; color: var(--text-2); cursor: pointer; text-align: left; width: 100%;
}
.mqa-up-item:hover { background: var(--bg-sunken); color: var(--text); }
.mqa-up-item .ico { color: var(--asite-blue); }

/* ---- document table ---- */
.mqa-files-tablewrap { flex: 1; overflow: auto; }
.mqa-files-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.mqa-files-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 700;
  color: var(--text-3); background: #f5f7fa; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.mqa-files-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.mqa-files-table tbody tr:hover td { background: var(--asite-blue-light); }
.mqa-link { color: var(--asite-blue-text); text-decoration: none; cursor: pointer; }
.mqa-link:hover { text-decoration: underline; }
.mqa-fc-chk { width: 30px; }
.mqa-chk { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 3px; vertical-align: middle; }
.mqa-fc-flag { width: 26px; text-align: center; color: var(--text-3); }
.mqa-flag { color: #c2a23a; }
.mqa-fc-t { width: 30px; }
.mqa-t-ico { display: inline-flex; }
.mqa-t-ico.blue .ico { color: #2f74c0; }
.mqa-t-ico.green .ico { color: #2f9c6a; }
.mqa-t-ico.red .ico { color: #cf6b5f; }
.mqa-fc-rev { font-variant-numeric: tabular-nums; }
.mqa-dash { color: #9aa6b6; }
.mqa-pub { display: inline-flex; align-items: center; gap: 6px; color: var(--asite-blue-text); }
.mqa-pub-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px; background: #2f9c8f; color: #fff; font-size: 8.5px; font-weight: 800;
}
.mqa-fc-sep { border-left: 1px solid var(--line); }
.mqa-fc-dim { color: var(--text-3); }

/* ---- footer ---- */
.mqa-files-foot {
  display: flex; align-items: center; gap: 18px; padding: 9px 14px;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3);
}
.mqa-cde-rpp { display: inline-flex; align-items: center; gap: 4px; }
.mqa-cde-rpp strong { color: var(--text-2); }
.mqa-cde-showing { margin-left: auto; }
.mqa-cde-pager { display: inline-flex; gap: 4px; }
.mqa-cde-pager .pg {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
}
.mqa-cde-pager .pg.active { background: var(--asite-blue); color: #fff; border-color: var(--asite-blue); }
.mqa-cde-customise { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }

/* ---- upload metadata bar overlay (docks over the Files body) ---- */
.mqa-up-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(15,30,52,.34); padding: 14px; overflow: auto;
}
.mqa-up-overlay .mqa-up-main,
.mqa-up-overlay .mqa-cw { box-shadow: 0 10px 30px -12px rgba(8,24,46,.32), 0 2px 6px rgba(8,24,46,.10); }

@media (max-width: 900px) {
  .mqa-cde-rail, .mqa-cde-tree { display: none; }
}

/* ============================================================
   DRAG / SELECT MODAL
   ============================================================ */
.mqa-drop {
  border-radius: 10px; background: transparent;
  padding: 8px 16px 4px; text-align: center; cursor: pointer;
  transition: background .15s ease;
}
.mqa-drop:hover { background: var(--asite-blue-light); }
.mqa-drop.drag {
  background: var(--asite-blue-light);
  outline: 2px dashed var(--asite-blue); outline-offset: -6px;
}
.mqa-file-input { display: none; }
.mqa-drop-files {
  display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin: 4px 0 16px;
}
.mqa-ft { display: inline-flex; line-height: 0; }
.mqa-ft svg { display: block; }
.mqa-ft-img { color: #ec5f88; }
.mqa-ft-xls { color: #1f9d57; }
.mqa-ft-doc { color: #2f6dff; }
.mqa-ft-pdf { color: #e0443a; }
.mqa-drop-cloud { line-height: 0; margin: 0 auto 12px; }
.mqa-drop-cloud svg { display: inline-block; }
.mqa-drop-t { font-size: 18px; font-weight: 700; color: var(--text); }
.mqa-drop-s { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.mqa-drop-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin: 16px auto 0; max-width: 560px; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.mqa-drop-hint .ico { color: var(--asite-blue); flex-shrink: 0; }
.mqa-drop-hint b { color: var(--text-2); }
.mqa-drop-sample {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--asite-blue); font-weight: 600; text-decoration: underline;
}
.mqa-drop-sample:hover { color: var(--asite-blue-dark, var(--asite-blue)); }
.mqa-drop-sample:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.mqa-drop-dl { color: var(--text-2); font-weight: 600; text-decoration: underline; cursor: pointer; }
.mqa-drop-dl:hover { color: var(--asite-blue); }

/* ============================================================
   METADATA BAR (upload grid)
   ============================================================ */
.mqa-up { display: flex; align-items: flex-start; gap: 16px; }
.mqa-up-main {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; box-shadow: var(--sh-1); overflow: hidden;
}
.mqa-up-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.mqa-up-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.mqa-up-title .ico { color: var(--asite-blue); }
.mqa-up-path { font-weight: 500; color: var(--text-3); font-size: 12px; }
.mqa-up-tools { display: flex; align-items: center; gap: 8px; }

/* Smart Scan — product's existing blue action */
.mqa-smartscan {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px;
  border: none; border-radius: 5px;
  background: transparent; color: var(--asite-blue-text);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease;
}
.mqa-smartscan .ico { color: var(--asite-blue); }
.mqa-smartscan:hover { background: var(--asite-blue-light); }
.mqa-smartscan:disabled { opacity: .8; cursor: default; }

/* NEW — Asite Coworker, in the Asite purple chat gradient */
.mqa-coworker {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px;
  border: none; border-radius: 5px;
  background: transparent; color: #5a3cf0;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.mqa-coworker:hover { background: #F1ECFE; }
.mqa-coworker:active { transform: translateY(1px); }
.mqa-coworker.on { background: #EEE9FE; box-shadow: inset 0 0 0 1px rgba(123, 47, 247, .35); }
.mqa-cw-spark { display: inline-flex; }
.mqa-cw-spark .ico { color: #6d34f0; }

.mqa-up-icons { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.mqa-up-icons button {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 5px; color: var(--text-3); cursor: pointer;
  transition: background .12s, color .12s;
}
.mqa-up-icons button:hover { background: #fff; color: var(--asite-blue); }

.mqa-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,99,177,.3); border-top-color: var(--asite-blue-text);
  display: inline-block; animation: mqa-spin .65s linear infinite;
}
.mqa-spin.sm { width: 13px; height: 13px; border-color: rgba(123,47,247,.3); border-top-color: #5a3cf0; }
@keyframes mqa-spin { to { transform: rotate(360deg); } }

/* The wide, horizontally-scrolling grid */
.mqa-grid-scroll { overflow-x: auto; overflow-y: hidden; }
.mqa-grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.mqa-grid thead th {
  text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--text-2);
  background: #F4F7FB; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft);
  white-space: nowrap; vertical-align: middle;
}
.mqa-grid tbody td {
  padding: 9px 10px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); vertical-align: middle;
}
.mqa-grid-no {
  min-width: 38px !important; width: 38px; text-align: center; color: var(--text-3);
  font-size: 12px; font-weight: 600; background: #F4F7FB;
}
.mqa-grid tbody .mqa-grid-no { background: #fff; }
.mqa-req { color: var(--err); margin-left: 2px; font-weight: 700; }
.mqa-th-flag { position: relative; }
.mqa-th-flag .ico { color: var(--text-3); }
.mqa-th-dot { position: absolute; top: 5px; left: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--err); }

/* validation cell highlight */
.mqa-cell.v-bad   { background: #FFF4F2; }
.mqa-cell.v-miss  { background: #FFF8EC; }
.mqa-cell.v-ok    { background: #F4FBF7; }

/* grid controls */
.mqa-in {
  width: 100%; height: 32px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff;
  font-size: 12.5px; color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s;
}
.mqa-in:focus { border-color: var(--asite-blue); box-shadow: var(--ring); }

/* required-empty → red outline (matches real Asite) */
.mqa-cell.miss .mqa-in,
.mqa-cell.miss .mqa-multi,
.mqa-cell.v-miss .mqa-in,
.mqa-cell.v-miss .mqa-multi { border-color: var(--err); box-shadow: 0 0 0 2px rgba(194,73,95,.14); }
.mqa-cell.v-bad .mqa-in { border-color: #E2925A; }

/* native select with custom caret */
.mqa-selwrap { position: relative; }
select.mqa-sel {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 24px; cursor: pointer;
}
.mqa-sel-caret { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: flex; }

/* multi-select trigger */
.mqa-multi {
  display: flex; align-items: center; text-align: left; padding-right: 24px; cursor: pointer; overflow: hidden;
}
.mqa-multi-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mqa-multi.ph .mqa-multi-lab { color: var(--text-3); }

.mqa-cell-file { display: flex; align-items: center; gap: 7px; }
.mqa-file-ic { color: var(--asite-blue); flex-shrink: 0; display: flex; }
.mqa-file-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 196px; }
.mqa-file-x {
  width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 4px; color: var(--err); cursor: pointer;
}
.mqa-file-x:hover { background: #FBEAEE; }
.mqa-cell-static { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }

.mqa-flagbox { display: flex; align-items: center; justify-content: center; }
.mqa-flagbox input { width: 15px; height: 15px; accent-color: var(--asite-blue); }

.mqa-datewrap { position: relative; display: flex; }
.mqa-date { padding-right: 30px; cursor: pointer; }
.mqa-date-btn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--asite-blue); cursor: pointer; border-radius: 4px;
}
.mqa-date-btn:hover { background: var(--asite-blue-light); }

.mqa-radio { display: flex; gap: 12px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.mqa-radio label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mqa-radio input { accent-color: var(--asite-blue); }

.mqa-mini-file {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; font-size: 12px; color: var(--text-2); cursor: pointer;
}
.mqa-mini-file:hover { border-color: var(--asite-blue); color: var(--asite-blue-text); }
.mqa-assoc { display: flex; align-items: center; gap: 6px; }
.mqa-assoc-add {
  width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-strong); border-radius: 4px; background: #fff; color: var(--asite-blue); cursor: pointer;
}
.mqa-assoc-add:hover { border-color: var(--asite-blue); background: var(--asite-blue-light); }

/* footer */
.mqa-up-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-top: 1px solid var(--line); background: var(--bg-sunken); }
.mqa-grid-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.mqa-grid-status .ico { flex-shrink: 0; }
.mqa-grid-status.ok { color: var(--ok); } .mqa-grid-status.ok .ico { color: var(--ok); }
.mqa-grid-status.warn { color: var(--warn); } .mqa-grid-status.warn .ico { color: var(--warn); }
.mqa-up-foot-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ============================================================
   ASITE COWORKER — Metadata QA panel
   ============================================================ */
.mqa-cw {
  width: 360px; flex-shrink: 0; height: 588px; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh-2); overflow: hidden;
}
.mqa-cw-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 13px; color: #fff;
  background: linear-gradient(95deg, #7b2ff7 0%, #5a3cf0 42%, #2f6dff 100%);
}
.mqa-cw-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mqa-cw-orb { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255,255,255,.18); }
.mqa-cw-name { font-size: 14px; font-weight: 700; }
.mqa-cw-sub { font-size: 11.5px; opacity: .85; }
.mqa-cw-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(255,255,255,.12); border-radius: 6px; color: #fff; cursor: pointer; transition: background .12s; }
.mqa-cw-close:hover { background: rgba(255,255,255,.24); }

.mqa-cw-body { flex: 1; min-height: 0; overflow-y: auto; background: #F6F7FB; }

/* intro */
.mqa-qa-intro { padding: 26px 20px; text-align: center; }
.mqa-qa-intro-ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #5a3cf0; background: #EEE9FE; }
.mqa-qa-intro-t { font-size: 15px; font-weight: 700; color: var(--text); }
.mqa-qa-intro p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 8px 0 16px; }
.mqa-qa-run { width: 100%; justify-content: center; }

/* failure state (real document upload/read failed) */
.mqa-qa-fail { padding: 26px 20px; text-align: center; }
.mqa-qa-fail-ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--warn); background: var(--warn-bg); }
.mqa-qa-fail-t { font-size: 15px; font-weight: 700; color: var(--text); }
.mqa-qa-fail p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 8px 0 16px; }

/* loader */
.mqa-qa-loading { padding: 24px 18px; }
.mqa-cklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mqa-ck { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.mqa-ck .ico { color: var(--ok); }
.mqa-ck.active { color: var(--text); font-weight: 600; }
.mqa-ck.done { color: var(--text-2); }
.mqa-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-block; }

/* results */
.mqa-qa-results { padding: 14px 13px 4px; }
.mqa-qa-sum { display: flex; gap: 7px; }
.mqa-qa-pill { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.mqa-qa-pill b { display: block; font-size: 18px; line-height: 1.1; }
.mqa-qa-pill.ok { background: var(--ok-bg); color: var(--ok); }
.mqa-qa-pill.bad { background: #FBEAEE; color: var(--err); }
.mqa-qa-pill.miss { background: var(--warn-bg); color: var(--warn); }

.mqa-qa-banner { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; padding: 9px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.mqa-qa-banner .ico { flex-shrink: 0; margin-top: 1px; }
.mqa-qa-banner.ok { background: var(--ok-bg); color: var(--ok); }
.mqa-qa-banner.warn { background: var(--warn-bg); color: #9a6a10; }

.mqa-qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mqa-qa-row { background: #fff; border: 1px solid rgba(15,23,42,.09); border-left-width: 3px; border-radius: 8px; padding: 9px 11px; }
.mqa-qa-row.ok { border-left-color: var(--ok); }
.mqa-qa-row.bad { border-left-color: var(--err); }
.mqa-qa-row.miss { border-left-color: var(--warn); }
.mqa-qa-row-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mqa-qa-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.mqa-qa-badge.ok { background: var(--ok-bg); color: var(--ok); }
.mqa-qa-badge.bad { background: #FBEAEE; color: var(--err); }
.mqa-qa-badge.miss { background: var(--warn-bg); color: var(--warn); }
.mqa-qa-field { font-size: 12.5px; font-weight: 700; color: var(--text); }
.mqa-qa-kv { display: flex; align-items: baseline; gap: 6px; font-size: 12px; margin-top: 2px; }
.mqa-qa-kv span { color: var(--text-3); min-width: 86px; flex-shrink: 0; }
.mqa-qa-kv b { color: var(--text); word-break: break-word; }
.mqa-qa-kv b.ok { color: var(--ok); }
.mqa-qa-kv b.bad { color: var(--err); }
.mqa-qa-empty { color: var(--text-3); font-style: italic; }
.mqa-qa-fix {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px; border: 1px solid #C9DEF6; border-radius: 6px;
  background: var(--asite-blue-light); color: var(--asite-blue-text); font-size: 12px; font-weight: 600; cursor: pointer;
}
.mqa-qa-fix:hover { background: #DCEAFB; }

.mqa-cw-foot { display: flex; gap: 8px; padding: 12px 13px; border-top: 1px solid var(--line); background: #fff; position: sticky; bottom: 0; }
.mqa-cw-foot .btn { flex: 1; justify-content: center; }

/* ============================================================
   FLOATING POPOVERS (multiselect + calendar) — on <body>
   ============================================================ */
.mqa-pop {
  position: fixed; z-index: 1200; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--sh-modal); overflow: hidden;
}
.mqa-acc-pop { padding: 6px; min-width: 168px; max-height: 260px; overflow-y: auto; }
.mqa-acc-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 5px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.mqa-acc-item:hover { background: var(--bg-sunken); }
.mqa-acc-item input { width: 15px; height: 15px; accent-color: var(--asite-blue); }
.mqa-acc-item.all { border-bottom: 1px solid var(--line-soft); border-radius: 0; margin-bottom: 2px; font-weight: 600; color: var(--text); }

/* calendar */
.mqa-cal { width: 248px; padding: 10px; }
.mqa-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mqa-cal-nav { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 6px; color: var(--asite-blue); cursor: pointer; }
.mqa-cal-nav:hover { background: var(--asite-blue-light); }
.mqa-cal-my { display: flex; gap: 6px; }
.mqa-cal-pick { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--text); padding: 4px 8px; border-radius: 6px; }
.mqa-cal-pick .ico { color: var(--text-3); }
.mqa-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.mqa-cal-dows span { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-3); padding: 4px 0; }
.mqa-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mqa-cal-day { height: 30px; border: none; background: transparent; border-radius: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.mqa-cal-day:hover { background: var(--asite-blue-light); }
.mqa-cal-day.out { color: var(--text-4, #b8c0cc); }
.mqa-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--asite-blue); color: var(--asite-blue-text); font-weight: 700; }
.mqa-cal-clear { width: 100%; margin-top: 8px; padding: 7px; border: none; border-top: 1px solid var(--line-soft); background: transparent; color: var(--asite-blue-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mqa-cal-clear:hover { background: var(--bg-sunken); }

/* ============================================================
   CONFIRM-SAVE MODAL
   ============================================================ */
.mqa-confirm-q { font-size: 13.5px; color: var(--text); margin: 0 0 12px; }
.mqa-confirm-warn, .mqa-confirm-ok, .mqa-confirm-info { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.mqa-confirm-warn .ico, .mqa-confirm-ok .ico, .mqa-confirm-info .ico { flex-shrink: 0; margin-top: 1px; }
.mqa-confirm-warn { background: var(--warn-bg); color: #9a6a10; }
.mqa-confirm-ok { background: var(--ok-bg); color: var(--ok); }
.mqa-confirm-info { background: var(--asite-blue-light); color: var(--asite-blue-text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .mqa-up.cw-open { flex-direction: column; }
  .mqa-cw { width: 100%; height: 520px; }
}