/* ══════════════════════════════════════════════════════════════════
   CREATIVE QA — visual feedback tool. cqa- prefixed, shell tokens
   (var(--panel/--ink/--line/--muted)) so dark mode mostly comes free.
══════════════════════════════════════════════════════════════════ */
.cqa-app .panel{padding:22px}
/* the hidden attr must ALWAYS win — several cqa elements carry author display rules
   (flex/block) that would otherwise defeat [hidden] (empty state, ad bar, ad iframe) */
.cqa-app [hidden]{display:none!important}
/* merged header: title + import actions on one row, tools right underneath (one panel, not two) */
.cqa-headrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.cqa-h1{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.cqa-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cqa-actions .pm-btn{height:36px;padding:0 13px;font-size:12.5px}

.cqa-main{display:block}
/* horizontal toolbar above the canvas (tools left · colour/size/undo right) */
.cqa-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f8fafc)}
/* notes · pins · downloads row under the canvas */
.cqa-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;align-items:start}
@media(max-width:960px){.cqa-bottom{grid-template-columns:1fr}}
.cqa-box{border:1px solid var(--line);border-radius:12px;padding:14px}

/* stage */
.cqa-stage-wrap{min-width:0}
.cqa-adbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:9px 12px;
  border-radius:10px;background:#f4f1ff;border:1px solid #e4dcfb;font-size:12.5px;color:#5a4bb0;font-weight:700}
.cqa-adbar .pm-btn{height:32px;padding:0 12px;font-size:12px}
/* rulers: fixed 22px strips around the scrollable stage (grid), toggled from the zoom bar */
.cqa-stage-outer{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:22px minmax(0,1fr)}
.cqa-stage-outer .cqa-stage{grid-area:2/2;border-top-left-radius:0;border-top-right-radius:0}
.cqa-ruler-corner{grid-area:1/1;display:grid;place-items:center;font:700 8.5px Inter,system-ui,sans-serif;color:var(--muted);
  background:var(--soft,#f3f6fb);border:1px solid var(--line);border-right:none;border-bottom:none;border-radius:10px 0 0 0}
.cqa-ruler-h{grid-area:1/2;width:100%;height:22px;display:block;background:var(--soft,#f3f6fb);
  border:1px solid var(--line);border-left:none;border-bottom:none;border-radius:0 10px 0 0}
.cqa-ruler-v{grid-area:2/1;width:22px;height:100%;display:block;background:var(--soft,#f3f6fb);
  border:1px solid var(--line);border-top:none;border-right:none;border-radius:0 0 0 10px}
.cqa-stage-outer.cqa-norulers{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.cqa-norulers .cqa-ruler-corner,.cqa-norulers .cqa-ruler-h,.cqa-norulers .cqa-ruler-v{display:none}
.cqa-norulers .cqa-stage{grid-area:1/1;border-top-left-radius:14px;border-top-right-radius:14px}
#cqaRulersBtn[aria-pressed="true"]{background:#1159da;border-color:#1159da;color:#fff}
html.dark .cqa-ruler-corner,html.dark .cqa-ruler-h,html.dark .cqa-ruler-v{background:#141a23}
.cqa-stage{position:relative;height:650px;overflow:auto;border:1px solid var(--line);border-radius:14px;
  background:repeating-conic-gradient(#f1f3f7 0% 25%, #fafbfd 0% 50%) 50%/22px 22px;
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:16px}
.cqa-stage.cqa-drop{outline:3px dashed #1159da;outline-offset:-8px}
/* side-by-side panes: live HTML5 ad LEFT, the screenshot being annotated RIGHT */
.cqa-adpane,.cqa-canvaspane{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;max-width:100%}
.cqa-adpane{position:relative;padding-top:4px}
/* the × sits ON the ad pane so it's obvious what it closes */
.cqa-adx{position:absolute;right:-10px;top:-10px;z-index:6;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:#334155;color:#fff;font:700 15px/22px Inter,sans-serif;text-align:center;box-shadow:0 3px 10px rgba(16,24,40,.35)}
.cqa-adx:hover{background:#e5484d}
.cqa-tag{display:inline-flex;align-items:center;gap:6px;font:800 10.5px Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;
  border-radius:6px;padding:3px 9px;line-height:1.5}
.cqa-tag-h5{background:#fff1e8;color:#c2410c;border:1px solid #f9cfb2}
.cqa-tag-ss{background:#e9f9f1;color:#0d6b53;border:1px solid #bfe9d4}
.cqa-canvas-holder{position:relative;line-height:0;padding:4px}
#cqaCanvas{box-shadow:0 10px 34px rgba(16,24,40,.18);border-radius:4px;background:#fff;touch-action:none;cursor:crosshair}
#cqaAdFrame{border:1px solid var(--line);border-radius:4px;background:#fff;display:block;flex:none}
html.dark .cqa-tag-h5{background:#3a2410;border-color:#7c4a1d;color:#f7b27a}
html.dark .cqa-tag-ss{background:#0d2b21;border-color:#1b4d3c;color:#7fdcb2}
#cqaTextEditor{position:absolute;z-index:20}
#cqaTextEditor input{font:700 13px Inter,system-ui,sans-serif;padding:6px 9px;border:2px solid #1159da;border-radius:8px;min-width:190px;box-shadow:0 8px 22px rgba(16,24,40,.25)}
.cqa-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);text-align:center;padding:26px;pointer-events:none}
.cqa-empty i{font-size:30px;color:#1159da}
.cqa-empty b{color:var(--ink);font-size:15px}
.cqa-empty span{font-size:12.5px;max-width:420px;line-height:1.6}

/* zoom bar + strip */
.cqa-zoombar{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.cqa-zoombar .pm-icon-btn{width:30px;height:30px}
#cqaZoomPct{min-width:46px;text-align:center;font-size:12.5px;font-weight:800}
.cqa-keys{margin-left:auto;font-size:11px;color:var(--muted)}
.cqa-keys b{display:inline-block;min-width:15px;text-align:center;background:var(--soft,#eef2f7);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:10px}
.cqa-strip{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.cqa-thumb{position:relative;flex:none;border:2px solid var(--line);border-radius:9px;padding:0;background:#fff;cursor:pointer;line-height:0;overflow:visible}
.cqa-thumb img{height:54px;border-radius:7px;display:block}
.cqa-thumb.on{border-color:#1159da;box-shadow:0 4px 14px rgba(17,89,218,.25)}
.cqa-thumb-n{position:absolute;left:4px;bottom:4px;background:rgba(15,23,42,.72);color:#fff;font:800 9.5px Inter,sans-serif;border-radius:5px;padding:1px 5px;line-height:1.4}
.cqa-thumb-marks{position:absolute;right:-5px;top:-5px;background:#e5484d;color:#fff;font:800 9.5px Inter,sans-serif;border-radius:9px;min-width:16px;text-align:center;padding:1px 4px;line-height:1.4}
.cqa-thumb-x{position:absolute;left:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:#334155;color:#fff;font:700 11px/15px Inter,sans-serif;text-align:center;opacity:0;transition:.12s}
.cqa-thumb:hover .cqa-thumb-x{opacity:1}
/* "+" tile: add more screens (click or drop files on it) */
.cqa-thumb-add{width:58px;height:58px;display:grid;place-items:center;border-style:dashed;border-color:#9db6e4;
  color:#1159da;font-size:17px;background:var(--soft,#f6f8fc)}
.cqa-thumb-add:hover{border-color:#1159da;background:#eef3fe}
.cqa-strip.cqa-drop{outline:2px dashed #1159da;outline-offset:3px;border-radius:10px}
html.dark .cqa-thumb-add{background:#122341;border-color:#2c4a80;color:#8fb4f7}

/* side panel */
.cqa-side h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 9px}
.cqa-side h3 + .cqa-side h3{margin-top:16px}
.cqa-tools{display:flex;flex-wrap:wrap;gap:7px}
.cqa-tool{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font:600 12px Inter,system-ui,sans-serif;cursor:pointer;transition:.12s}
.cqa-tool:hover{border-color:#9db6e4;background:var(--soft,#f6f8fc)}
.cqa-tool.on{border-color:#1159da;background:#eef3fe;color:#0d3f9e;font-weight:800}
.cqa-tool i{width:14px;text-align:center;font-size:12px}
.cqa-opts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cqa-opts label{font-size:11.5px;font-weight:700;color:var(--muted)}
#cqaColor{width:38px;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
#cqaWidth{width:auto;padding:6px 8px;font-size:12.5px}
.cqa-opts .pm-btn{height:32px;padding:0 11px;font-size:12px}
#cqaNote{width:100%;min-height:74px;resize:vertical;font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:10px}
#cqaNoteCount{text-align:right;font-size:10.5px;color:var(--muted);margin:3px 0 14px}
.cqa-pinrow{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.cqa-pinbadge{flex:none;width:20px;height:20px;border-radius:50%;color:#fff;font:800 11px/20px Inter,sans-serif;text-align:center}
.cqa-pinrow input{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--line);border-radius:8px}
.cqa-pinx{flex:none;width:20px;height:20px;border:none;border-radius:6px;background:transparent;color:var(--muted);font-size:14px;cursor:pointer}
.cqa-pinx:hover{background:#fdeceb;color:#e5484d}
.cqa-pinempty{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.cqa-dl{display:grid;gap:8px;margin-top:2px}
/* download buttons must read as ACTIVE actions (they looked disabled): darker text + border,
   a colour-coded icon per format, and an obvious hover */
.cqa-dl .pm-btn{width:100%;justify-content:flex-start;color:var(--ink);font-weight:700;border-color:#c3cfe2}
.cqa-dl .pm-btn i{width:17px;text-align:center;font-size:14px}
#cqaDlPng i{color:#16a34a}
#cqaDlJpg i{color:#0ea5a4}
#cqaDlZip i{color:#e0930b}
#cqaDlPdf i{color:#e5484d}
#cqaDlDoc i{color:#1159da}
.cqa-dl .pm-btn:hover{border-color:#1159da;background:#eef3fe;color:#0d3f9e}
html.dark .cqa-dl .pm-btn{border-color:#3a4a63}
.cqa-dlnote{margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.5}
/* hosted share link (Pro) */
#cqaDlShare i{color:#7c3aed}
.cqa-pro-chip{margin-left:auto;font:800 9px/1.6 Inter,sans-serif;letter-spacing:.06em;background:#f4f1ff;color:#6d28d9;border:1px solid #ddd3fb;border-radius:5px;padding:1px 6px}
.cqa-share-out{margin-top:10px}
.cqa-share-row{display:flex;gap:6px}
.cqa-share-row input{flex:1;min-width:0;font:600 12px ui-monospace,Menlo,monospace;padding:8px 10px;border:1px solid #b9c8e6;border-radius:8px;background:#f6f9ff;color:#0d3f9e}
.cqa-share-copy{flex:none;display:inline-flex;align-items:center;gap:6px;border:none;border-radius:8px;background:#1159da;color:#fff;font:700 12px Inter,sans-serif;padding:0 12px;cursor:pointer;text-decoration:none}
.cqa-share-copy:hover{background:#0d3f9e}
.cqa-share-open{background:#4f46e5}
.cqa-share-note{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.55}
.cqa-share-note b{color:#b4231f}
html.dark .cqa-pro-chip{background:#241a3f;border-color:#4a3579;color:#c4b5ff}
html.dark .cqa-share-row input{background:#101a2e;border-color:#2c4a80;color:#8fb4f7}
/* share quality chooser (Standard vs Optimized, real sizes shown) */
.cqa-pick-overlay{position:fixed;inset:0;z-index:99995;background:rgba(10,14,24,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.cqa-pick{position:relative;width:min(430px,100%);background:#fff;border-radius:16px;padding:22px;box-shadow:0 24px 70px rgba(8,12,24,.45)}
.cqa-pick h3{font:800 15.5px Inter,system-ui,sans-serif;margin:0 0 7px;display:flex;align-items:center;gap:8px}
.cqa-pick h3 i{color:#7c3aed}
.cqa-pick-sub{font-size:12px;color:#5b6675;line-height:1.6;margin:0 0 14px}
.cqa-pick-x{position:absolute;right:12px;top:10px;width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:#8a93a6;font-size:17px;cursor:pointer}
.cqa-pick-x:hover{background:#f1f4f9;color:#16233c}
.cqa-pick-opt{display:block;width:100%;text-align:left;border:1.5px solid #d7dfeb;border-radius:12px;background:#fff;padding:12px 14px;margin-bottom:9px;cursor:pointer;transition:.12s;font-family:inherit}
.cqa-pick-opt:hover:not(:disabled){border-color:#1159da;background:#f4f8ff}
.cqa-pick-opt.is-reco{border-color:#7c3aed;background:#faf8ff}
.cqa-pick-opt.is-reco:hover{border-color:#6d28d9;background:#f4efff}
.cqa-pick-opt:disabled{opacity:.55;cursor:not-allowed}
.cqa-pick-t{display:flex;align-items:center;gap:8px}
.cqa-pick-t b{font:800 13px Inter,sans-serif;color:#16233c}
.cqa-pick-t em{font:800 9px/1.7 Inter,sans-serif;font-style:normal;letter-spacing:.05em;text-transform:uppercase;background:#f4f1ff;color:#6d28d9;border:1px solid #ddd3fb;border-radius:5px;padding:0 6px}
.cqa-pick-t em.over{background:#fdeceb;color:#b4231f;border-color:#f5c6c3}
.cqa-pick-s{display:block;margin-top:3px;font-size:11.5px;color:#5b6675}
html.dark .cqa-pick{background:#1b2028}
html.dark .cqa-pick-t b{color:#e8ebf2}
html.dark .cqa-pick-sub,html.dark .cqa-pick-s{color:#9aa3b2}
html.dark .cqa-pick-opt{background:#161b22;border-color:#323b48}
html.dark .cqa-pick-opt:hover:not(:disabled){background:#14213a;border-color:#3f78e6}
html.dark .cqa-pick-opt.is-reco{background:#1d1830;border-color:#5b43a8}
html.dark .cqa-pick-t em{background:#241a3f;border-color:#4a3579;color:#c4b5ff}

/* dark mode */
html.dark .cqa-stage{background:repeating-conic-gradient(#151c26 0% 25%, #1b2430 0% 50%) 50%/22px 22px}
html.dark .cqa-tool{background:var(--panel);}
html.dark .cqa-tool.on{background:#122341;color:#8fb4f7}
html.dark .cqa-adbar{background:#1c1832;border-color:#3a2f5e;color:#c4b5ff}
html.dark .cqa-thumb{background:var(--panel)}