/* ══════════════════════════════════════════════════════════════════
   CREATIVE QA (PSD vs build) — the pane is a thin host around a
   self-contained React bundle (tools/creative-qa-psd/app/, built from
   ~/Documents/SelfQA-FromPSD — see UPLOAD-NOTES for the rebuild recipe).
   The app runs ENTIRELY in the iframe: total isolation from shell.css,
   which is the point — its Tailwind reset must never touch the suite.
══════════════════════════════════════════════════════════════════ */
.cqp-app{max-width:none;width:100%;padding:0 24px}
.cqp-appbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 16px;border-radius:14px;background:linear-gradient(120deg,#0b1226,#13213c);color:#dbe4f5}
.cqp-appbar-ico{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:rgba(13,148,136,.25);color:#5eead4;font-size:14px}
.cqp-appbar-name{font-size:15px;font-weight:800;color:#fff}
.cqp-appbar-name b{color:#5eead4}
.cqp-appbar-tag{font-size:11.5px;color:#8fa3c6;font-weight:600}
.cqp-appbar-trust{margin-left:auto;font-size:11.5px;color:#9db4d4;font-weight:700}
.cqp-appbar-trust i{color:#5eead4;margin-right:5px}
.cqp-frame-wrap{border:1px solid var(--line,#e2e8f0);border-radius:14px;overflow:hidden;background:#fff}
/* height is only the pre-load fallback — once the app loads, the lazy-mount
   script sizes the frame to the app's full content (inline style wins), so
   the page is the ONE scroller instead of the frame scrolling inside it */
#cqpFrame{display:block;width:100%;height:max(720px,calc(100vh - 170px));border:0}
html.dark .cqp-frame-wrap{border-color:#2a3446}