:root{
  --bg:#07101a;
  --bg2:#0a1220;
  --panel:#0f1b2c;
  --panel-2:#101b2b;
  --card:#172741;
  --card-2:#16263e;
  --line:rgba(234,240,255,.10);
  --line-strong:rgba(255,255,255,.14);
  --text:#eaf0ff;
  --muted:#9fb0cb;
  --muted-2:#89a0bf;
  --cyan:#00d9ff;
  --blue:#4da3ff;
  --green:#00d084;
  --orange:#ff9b3d;
  --red:#ff4d67;
  --yellow:#ffd84d;
  --violet:#9d7cff;
  --shadow:0 24px 60px rgba(0,0,0,.38);
  --shadow-soft:0 10px 24px rgba(0,0,0,.20);
  --radius:18px;
  --radius-lg:22px;
  --radius-sm:14px;
}

*{box-sizing:border-box}

html,
body{
  height:100%;
  min-height:100%;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 540px at 10% -10%, rgba(0,217,255,.12), transparent 60%),
    radial-gradient(960px 520px at 100% 0%, rgba(77,163,255,.11), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

button,
input,
select,
textarea{
  font:inherit;
}

img{
  -webkit-user-drag:none;
  user-select:none;
}

.hidden{
  display:none !important;
}

.mono{
  font-variant-numeric:tabular-nums;
}

.app{
  max-width:1780px;
  margin:0 auto;
  padding:18px;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(19,34,56,.94), rgba(12,21,35,.94));
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}

.brand-mark{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg, rgba(0,217,255,.24), rgba(77,163,255,.12)),
    linear-gradient(180deg, #102038, #0d1828);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  flex:0 0 auto;
}

.brand-mark::before{
  content:"CD";
  font-weight:900;
  letter-spacing:.08em;
  color:#dff8ff;
}

.brand-text{
  min-width:0;
}

.brand-text h1{
  margin:0;
  font-size:20px;
  font-weight:900;
  line-height:1.15;
}

.brand-text p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  color:var(--text);
  background:linear-gradient(180deg,#16263f,#122035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px 15px;
  font-weight:800;
  transition:.18s ease;
  box-shadow:var(--shadow-soft);
}

.btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.btn.primary{
  background:linear-gradient(180deg,#00d9ff,#00b8da);
  color:#03131a;
  border-color:transparent;
}

.btn.success{
  background:linear-gradient(180deg,#00d084,#00a76a);
  color:#051b14;
  border-color:transparent;
}

.btn.ghost{
  background:linear-gradient(180deg, rgba(22,38,63,.65), rgba(18,32,53,.65));
}

/* =========================================================
   LAYOUT
========================================================= */

.layout{
  display:grid;
  grid-template-columns:minmax(960px,1.25fr) minmax(430px,.75fr);
  gap:16px;
}

.left-col,
.right-col{
  display:grid;
  gap:16px;
  align-content:start;
  min-width:0;
}

.panel{
  background:linear-gradient(180deg, rgba(16,27,43,.97), rgba(12,21,35,.97));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-width:0;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}

.panel-title{
  min-width:0;
}

.panel-title h2{
  margin:0;
  font-size:17px;
  font-weight:900;
}

.panel-title p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.panel-body{
  padding:16px 18px 18px;
}

/* =========================================================
   GRIDS
========================================================= */

.input-grid,
.compare-grid,
.metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

.exec-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

/* =========================================================
   CARDS
========================================================= */

.upload-card,
.action-card,
.mini-card,
.kpi,
.spec-card,
.legend-card,
.exec-card{
  background:linear-gradient(180deg, rgba(22,38,62,.84), rgba(16,28,46,.84));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  min-width:0;
}

.upload-card h3,
.action-card h3,
.mini-card h3,
.spec-card h3,
.legend-card h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:900;
}

.upload-card p,
.action-card p,
.mini-card p,
.spec-card p,
.legend-card p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.exec-card .label{
  color:var(--muted);
  font-size:11px;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}

.exec-card .value{
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  word-break:break-word;
}

.exec-card .sub{
  margin-top:7px;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* =========================================================
   FILE INPUT
========================================================= */

.file-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.file-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:800;
  transition:.18s ease;
}

.file-label:hover{
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.file-label input{
  display:none;
}

.file-name,
.file-meta{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  word-break:break-word;
}

.analysis-mode-block{margin-bottom:16px;padding:14px;border:1px solid rgba(77,166,255,.22);border-radius:18px;background:linear-gradient(135deg,rgba(25,119,255,.09),rgba(0,217,255,.035))}
.analysis-mode-copy{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:11px}.analysis-mode-copy strong{font-size:15px}.analysis-mode-copy span{font-size:11px;color:var(--muted)}
.analysis-mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.analysis-mode{appearance:none;text-align:left;display:grid;grid-template-columns:28px 1fr;gap:1px 9px;align-items:center;padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.09);color:#d9e8f8;background:rgba(7,17,29,.72);cursor:pointer;transition:.18s}
.analysis-mode>b{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.07);color:#85bfff}.analysis-mode span{font-size:12px;font-weight:900}.analysis-mode i{font-style:normal;color:#43dfff}.analysis-mode small{font-size:9px;color:var(--muted)}
.analysis-mode.active{border-color:#39a9ff;background:linear-gradient(135deg,rgba(30,116,255,.24),rgba(0,217,255,.1));box-shadow:0 0 0 1px rgba(57,169,255,.14)}.analysis-mode.active>b{background:#1687ed;color:white}
.prepare-status{margin-top:10px;display:grid;grid-template-columns:10px 1fr;gap:2px 8px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.prepare-status>span{width:9px;height:9px;border-radius:50%;background:#65768a;margin-top:4px;grid-row:1/3}.prepare-status b{font-size:11px}.prepare-status small{font-size:9px;color:var(--muted)}.prepare-status.processing>span{background:#25a9ff;box-shadow:0 0 0 4px rgba(37,169,255,.12);animation:pulse 1s infinite}.prepare-status.ready{border-color:rgba(42,211,144,.3);background:rgba(42,211,144,.07)}.prepare-status.ready>span{background:#2ad390}.prepare-status.error{border-color:rgba(255,91,112,.34);background:rgba(255,91,112,.07)}.prepare-status.error>span{background:#ff5b70}
@keyframes pulse{50%{opacity:.4}}
@media(max-width:780px){.analysis-mode-grid{grid-template-columns:1fr 1fr}.analysis-mode-copy{display:block}.analysis-mode-copy span{display:block;margin-top:3px}}

/* =========================================================
   VIEWERS / STAGES
========================================================= */

.viewer{
  background:#09111b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  min-width:0;
}

.viewer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(16,28,45,.95), rgba(12,20,33,.95));
}

.viewer-head strong{
  font-size:13px;
}

.viewer-head span{
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

.stage{
  position:relative;
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%);
  background-size:18px 18px;
  background-position:0 0,9px 9px;
  aspect-ratio:1 / 1;
  overflow:hidden;
  isolation:isolate;
}

.stage img,
.stage canvas{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.stage img{
  position:relative;
  z-index:1;
}

.stage canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#refCanvasVis,
#currentCanvasVis{
  z-index:2;
}

#maskCanvas,
#heatCanvas{
  z-index:1;
}

.overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}

.stage-tools{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  z-index:5;
  pointer-events:none;
}

.tool-chip{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(7,16,26,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:800;
  color:#eaf0ff;
  white-space:nowrap;
}

.tool-chip.ok{
  border-color:rgba(0,208,132,.35);
  color:#c7ffe9;
}

.tool-chip.warn{
  border-color:rgba(255,155,61,.35);
  color:#ffe3c3;
}

.tool-chip.bad{
  border-color:rgba(255,77,103,.35);
  color:#ffd0da;
}

.tool-chip.violet{
  border-color:rgba(157,124,255,.35);
  color:#e8dcff;
}

/* =========================================================
   OVERLAY MARKERS
========================================================= */

.marker{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  margin:0;
  padding:0;
  border-radius:8px;
  border:2px solid var(--cyan);
  background:transparent !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.18) inset;
  pointer-events:auto;
  cursor:pointer;
  transition:opacity .16s ease, transform .16s ease, box-shadow .16s ease;
  opacity:0;
  transform:scale(.98);
  z-index:6;
  overflow:visible;
}

.marker.show{
  opacity:1;
  transform:scale(1);
}

.marker:hover,
.marker.active{
  transform:scale(1.03);
}

.marker .tag{
  position:absolute;
  left:-1px;
  top:-28px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  padding:7px 9px;
  border-radius:10px;
  white-space:nowrap;
  color:#06131b;
  background:var(--cyan);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}

.marker-score{
  position:absolute;
  right:6px;
  bottom:6px;
  min-width:24px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(7,16,26,.82);
  color:#fff;
  font:800 11px/20px Inter,system-ui,sans-serif;
  pointer-events:none;
}

.marker.minor{
  border-color:var(--cyan);
}

.marker.major{
  border-color:var(--orange);
  background:transparent !important;
}

.marker.major .tag{
  background:var(--orange);
}

.marker.critical{
  border-color:var(--red);
  background:transparent !important;
}

.marker.critical .tag{
  background:var(--red);
  color:#fff;
}

/* =========================================================
   KPI / STATUS
========================================================= */

.kpi .label{
  color:var(--muted);
  font-size:12px;
  margin-bottom:8px;
}

.kpi .value{
  font-size:22px;
  font-weight:900;
  line-height:1.05;
  word-break:break-word;
}

.kpi .sub{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.status-pass{
  color:var(--green);
}

.status-hold{
  color:var(--orange);
}

.status-stop{
  color:var(--red);
}

.status-retake{
  color:var(--yellow);
}

.qa-note{
  margin-top:14px;
  padding:13px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.code{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  word-break:break-word;
  color:#d8f6ff;
  min-height:96px;
  line-height:1.5;
  white-space:pre-wrap;
}

/* =========================================================
   DECISION BANNER
========================================================= */

.decision-banner{
  border-radius:18px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,27,43,.92), rgba(11,19,31,.92));
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}

.decision-banner.ok{
  border-color:rgba(0,208,132,.35);
  box-shadow:0 18px 40px rgba(0,208,132,.10);
}

.decision-banner.warn{
  border-color:rgba(255,155,61,.35);
  box-shadow:0 18px 40px rgba(255,155,61,.10);
}

.decision-banner.bad{
  border-color:rgba(255,77,103,.35);
  box-shadow:0 18px 40px rgba(255,77,103,.10);
}

.decision-banner.violet{
  border-color:rgba(157,124,255,.35);
  box-shadow:0 18px 40px rgba(157,124,255,.10);
}

.decision-banner-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.decision-banner-label{
  font-size:12px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9fb0c8;
}

.decision-banner-value{
  font-size:22px;
  line-height:1;
  font-weight:900;
  color:#eaf0ff;
}

.decision-banner-text{
  color:#dce7f7;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
  margin-bottom:6px;
}

.decision-banner-action{
  color:#9fb0c8;
  font-size:13px;
  line-height:1.45;
}

/* =========================================================
   GROUPS
========================================================= */

.group-stack{
  display:grid;
  gap:12px;
}

.group-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin-bottom:14px;
}

.group-summary-card{
  border-radius:14px;
  padding:12px;
  background:rgba(12,20,31,.72);
  border:1px solid rgba(255,255,255,.07);
}

.group-summary-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.group-summary-title{
  font-size:13px;
  font-weight:800;
  color:#eaf0ff;
}

.group-summary-meta{
  color:#9fb0c8;
  font-size:12px;
  line-height:1.45;
}

.group-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(21,36,58,.90), rgba(16,27,43,.90));
  overflow:hidden;
}

.group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.group-head h3{
  margin:0;
  font-size:14px;
  font-weight:900;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.08);
}

.item-list{
  padding:12px;
  display:grid;
  gap:10px;
}

.issue{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:.16s ease;
}

.issue:hover,
.issue.active{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.13);
}

.issue-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.issue-title{
  font-weight:900;
  font-size:13px;
}

.issue-severity{
  font-size:11px;
  font-weight:900;
  padding:6px 8px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}

.issue-severity.minor{
  background:rgba(0,217,255,.14);
  color:var(--cyan);
}

.issue-severity.major{
  background:rgba(255,155,61,.14);
  color:var(--orange);
}

.issue-severity.critical{
  background:rgba(255,77,103,.16);
  color:#ff8ba0;
}

.issue-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0;
}

.mini-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#dbe7f8;
  font-size:11px;
  font-weight:800;
}

.mini-chip.ok{
  border-color:rgba(0,208,132,.30);
}

.mini-chip.warn{
  border-color:rgba(255,155,61,.30);
}

.mini-chip.bad{
  border-color:rgba(255,77,103,.30);
}

.issue-desc{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

/* =========================================================
   PANTONE / SEGMENT TOGGLE / LISTS
========================================================= */

.pantone-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.pantone-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  font-size:12px;
  font-weight:800;
  max-width:100%;
}

.pantone-swatch{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  flex:0 0 auto;
}

.segment-toggle{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.segment-toggle button{
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  transition:.16s ease;
}

.segment-toggle button:hover{
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.segment-toggle button.active{
  background:linear-gradient(180deg, rgba(0,217,255,.16), rgba(77,163,255,.10));
  border-color:rgba(0,217,255,.24);
}

.empty{
  padding:18px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:16px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  background:rgba(255,255,255,.02);
}

.list{
  display:grid;
  gap:9px;
  margin-top:12px;
}

.list .row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}

.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  margin-top:6px;
  background:var(--cyan);
  flex:0 0 auto;
}

.legend-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}

.legend-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.legend-pill .box{
  width:14px;
  height:14px;
  border-radius:4px;
  flex:0 0 auto;
}

/* =========================================================
   BUSY OVERLAY
========================================================= */

#busyOverlay{
  position:fixed;
  inset:0;
  background:rgba(4,9,16,.54);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

#busyOverlay.show{
  display:flex;
}

.busy-card{
  width:min(520px,calc(100vw - 40px));
  padding:20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(19,34,56,.97), rgba(12,21,35,.97));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.busy-title{
  font-size:18px;
  font-weight:900;
  margin:0 0 6px;
}

.busy-sub{
  font-size:13px;
  color:var(--muted);
  margin:0 0 12px;
  line-height:1.5;
}

.progress{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.progress > span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transition:width .25s ease;
}

.scanline{
  position:absolute;
  left:0;
  right:0;
  height:56px;
  top:-56px;
  background:linear-gradient(180deg, rgba(0,217,255,0), rgba(0,217,255,.18), rgba(0,217,255,0));
  animation:scanY 2.1s linear infinite;
  pointer-events:none;
}

@keyframes scanY{
  from{transform:translateY(0)}
  to{transform:translateY(420px)}
}

/* =========================================================
   OPENCV NOTE
========================================================= */

.opencv-loading-note{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9998;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(7,16,26,.82);
  border:1px solid rgba(255,255,255,.10);
  color:#d9f4ff;
  font:600 12px/1.35 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}

.opencv-loading-note.hidden{
  display:none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

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

@media (max-width:1120px){
  .input-grid,
  .compare-grid,
  .metric-grid,
  .summary-grid,
  .legend-grid,
  .exec-grid{
    grid-template-columns:1fr;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .top-actions{
    width:100%;
    justify-content:flex-start;
  }

  .brand-text p{
    white-space:normal;
  }
}

@media (max-width:760px){
  .app{
    padding:12px;
  }

  .panel-head,
  .panel-body,
  .topbar{
    padding-left:14px;
    padding-right:14px;
  }

  .summary-grid{
    gap:10px;
  }

  .viewer-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .viewer-head span{
    text-align:left;
  }

  .issue-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .stage-tools{
    left:10px;
    right:10px;
    bottom:10px;
  }

  .tool-chip{
    max-width:100%;
  }

  .decision-banner-top{
    flex-direction:column;
    align-items:flex-start;
  }
}

.issue-actions .mini-chip{background:rgba(0,0,0,.18);cursor:pointer}
.issue-actions .mini-chip:hover{transform:translateY(-1px)}
.marker{pointer-events:auto}


/* V12.15 diagnostic overlay hardening */
.marker .tag{
  top:-22px;
  padding:5px 7px;
  border-radius:7px;
  font-size:9px;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.marker-score{display:none !important;}
.marker:hover,.marker.active{
  transform:scale(1);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 16px rgba(0,0,0,.22);
}
.marker[data-large-region="1"] .tag{display:none;}
.diagnostic-score[data-tone="good"]{border-color:#bfe9d5;background:#f7fffb}
.diagnostic-score[data-tone="warn"]{border-color:#f3d7a8;background:#fffaf2}
.diagnostic-score[data-tone="bad"]{border-color:#efc0c8;background:#fff7f8}
.diagnostic-score[data-tone="neutral"]{border-color:#dfe9f2;background:#fff}
@media(max-width:720px){
  .marker .tag{display:none;}
  .marker{border-width:2px;border-radius:6px;}
}


/* V12.17 — operator-first compact compare + clickable diagnostic regions */
.diagnostic-findings-panel{margin-top:12px;border:1px solid #d8e4ef;border-radius:16px;background:#fff;padding:12px;color:#102238}
.diagnostic-findings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.diagnostic-findings-head strong{font-size:14px}.diagnostic-findings-head span{font-size:11px;color:#607489}
.compact-findings .group-summary-grid{display:none}.compact-findings .group-card{margin:0;border:0;border-top:1px solid #e6eef5;border-radius:0;padding:0}.compact-findings .group-card:first-child{border-top:0}.compact-findings .group-head{padding:9px 2px}.compact-findings .issue{padding:10px;border-radius:10px;margin:5px 0;background:#f8fbfe;border:1px solid #e2ebf3}.compact-findings .issue-desc{font-size:12px}.compact-findings .issue-meta-row{margin:5px 0}.compact-findings .issue-actions{display:none!important}
/* The active diagnostic tab is also the visual layer selector. */
.diagnostic-tabs button.active{background:#0878f9;border-color:#0878f9;color:#fff;box-shadow:0 4px 12px rgba(8,120,249,.18)}
.marker{border-width:3px!important;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 3px 14px rgba(0,0,0,.2)!important}.marker.minor{border-color:#ff9f0a}.marker.major{border-color:#ff453a}.marker.critical{border-color:#8e5cff}.marker.active{border-width:4px!important;filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}

/* V12.28: a global artwork mismatch must remain visible without obscuring the
   production image. It is intentionally different from normal defect boxes. */
.marker.design-mismatch-zone,
.marker.design-mismatch-zone.critical,
.marker.design-mismatch-zone.major{
  border:3px solid #ff243f !important;
  background:rgba(255,36,63,.18) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.88),0 0 18px rgba(255,36,63,.38) !important;
  border-radius:10px !important;
  z-index:7;
}
.marker.design-mismatch-zone .tag{
  display:block !important;
  background:#e91535 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:0 3px 12px rgba(80,0,12,.32) !important;
}
.pantone-section{display:none}
@media(max-width:720px){
  .app-head p,.marker-legend-panel,.panel-title p{display:none!important}
  .diagnostic-filter-panel{padding:10px;margin-bottom:10px}.diagnostic-filter-head{margin-bottom:8px}.diagnostic-filter-head span{display:none}.tolerance-pill{padding:5px 8px}
  .diagnostic-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.diagnostic-tabs button{padding:8px 4px;font-size:10px}
  .diagnostic-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.diagnostic-score{padding:7px 5px}.diagnostic-score b{font-size:14px}.diagnostic-score small{font-size:8px;line-height:1.15}.diagnostic-focus{display:none}
  .compare-grid{gap:8px}.viewer-head{padding:8px 9px}.viewer-head span{font-size:9px}
  .stage-tools .tool-chip:not(#objectChip){display:none}.tool-chip{padding:5px 7px;font-size:9px}
  .diagnostic-findings-head span{display:none}.compact-findings .issue-meta-row .mini-chip:nth-child(n+3){display:none}
  #advancedBtn,#exportBtn{display:none!important}
}

/* ==========================================================
   V12.18 COMPACT PASS/FAIL UI
   ========================================================== */
:root{ --result-glow: rgba(71,85,105,.08); }
body{ transition:background .25s ease; background:#f5f8fc !important; }
body.result-pass{ --result-glow:rgba(22,163,74,.22); background:linear-gradient(180deg,#eefcf3 0,#f7fafc 34%,#f5f8fc 100%) !important; }
body.result-fail{ --result-glow:rgba(220,38,38,.22); background:linear-gradient(180deg,#fff0f0 0,#f7fafc 34%,#f5f8fc 100%) !important; }
body.result-review{ --result-glow:rgba(245,158,11,.18); background:linear-gradient(180deg,#fff8e8 0,#f7fafc 34%,#f5f8fc 100%) !important; }
.app{ max-width:1440px; margin:0 auto; padding:12px; }
.left-col{ display:flex; flex-direction:column; gap:12px; }
.qa-section{ order:-20; box-shadow:0 0 0 2px var(--result-glow),0 18px 45px var(--result-glow) !important; }
.input-section{ order:-10; }
.compare-section{ order:0; }
.pantone-section{ display:none !important; }
.compact-legend{ display:none !important; }
.topbar{ padding:12px 14px !important; min-height:auto !important; }
.brand-text p{ font-size:12px !important; margin-top:2px !important; }
.top-actions{ gap:6px !important; }
#exportBtn,#advancedBtn{ display:none !important; }
.top-actions .btn{ min-height:38px !important; padding:0 14px !important; }
.input-section .panel-head p{ display:none; }
#zoneToggle{ display:none !important; }
.input-section .panel-body{ padding-top:10px !important; }
.upload-card p{ display:none !important; }
.file-meta{ display:none !important; }
.upload-card{ padding:12px !important; }
.upload-actions{ gap:6px !important; }
.upload-btn{ min-height:38px !important; }
.compare-section>.panel-head{ display:none !important; }
.diagnostic-filter-head{ display:none !important; }
.diagnostic-focus{ display:none !important; }
.diagnostic-filter-panel{ padding:0 !important; border:0 !important; background:transparent !important; }
.diagnostic-tabs{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px !important; position:sticky; top:0; z-index:8; background:rgba(248,250,252,.94); backdrop-filter:blur(12px); padding:6px 0; }
.diagnostic-tabs [data-diagnostic="area"]{ display:none !important; }
.diagnostic-tabs button{ min-height:42px !important; padding:0 8px !important; }
.diagnostic-score-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; margin:8px 0 12px !important; }
.diagnostic-score{ min-height:74px !important; padding:10px 12px !important; }
.diagnostic-score span{ font-size:11px !important; }
.diagnostic-score b{ font-size:20px !important; }
.diagnostic-score small{ font-size:10px !important; }
.compare-grid{ gap:8px !important; }
.viewer{ overflow:hidden; border-radius:14px !important; }
.viewer-head{ min-height:38px !important; padding:8px 10px !important; }
.stage{ background:#f7f8fa !important; }
.stage img{ object-fit:contain !important; }
.stage-tools{ opacity:.82; }
.tool-chip:not(#objectChip):not(#viewChip){ display:none !important; }
#viewToggle{ display:none !important; }
.diagnostic-findings-panel{ margin-top:10px !important; }
.diagnostic-findings-head span{ display:none !important; }
.group-summary-grid{ display:none !important; }
.group-stack .group-card:has(.empty){ display:none; }
.qa-section>.panel-head{ display:none !important; }
.qa-section .panel-body{ padding:0 !important; }
#operatorResult{ margin:0 !important; border-radius:18px !important; padding:16px 18px !important; min-height:auto !important; display:grid !important; grid-template-columns:auto 1fr auto; gap:8px 18px; align-items:center; }
#operatorStatus{ grid-row:1/4; font-size:14px !important; min-width:76px; text-align:center; }
#operatorHeadline{ font-size:28px !important; line-height:1.05 !important; }
#operatorConfidence{ font-size:22px !important; }
#operatorResult .operator-grid,#operatorMessage,#operatorAction,#techToggle{ display:none !important; }
#decisionBanner,.exec-grid,.tech-detail{ display:none !important; }
#operatorResult.pass{ background:linear-gradient(135deg,#f0fff4,#e6f8ed) !important; border:1px solid #86efac !important; box-shadow:0 0 0 1px rgba(34,197,94,.08),0 12px 34px rgba(22,163,74,.14) !important; }
#operatorResult.hold,#operatorResult.stop{ background:linear-gradient(135deg,#fff2f2,#ffe7e7) !important; border:1px solid #fca5a5 !important; box-shadow:0 0 0 1px rgba(239,68,68,.08),0 12px 34px rgba(220,38,38,.14) !important; }
#operatorResult.retake{ background:linear-gradient(135deg,#fff8e8,#fff0c9) !important; border:1px solid #fcd34d !important; }
@media (max-width:720px){
  .app{ padding:8px 6px; }
  .topbar{ gap:8px !important; }
  .brand-mark{ width:34px !important; height:34px !important; }
  .brand-text h1{ font-size:14px !important; }
  .brand-text p{ display:none !important; }
  .top-actions .btn{ min-height:34px !important; padding:0 10px !important; font-size:11px !important; }
  .input-grid{ grid-template-columns:1fr 1fr !important; gap:7px !important; }
  .upload-card h3{ font-size:11px !important; }
  .file-row{ display:block !important; }
  .upload-actions{ display:flex !important; }
  .upload-btn{ min-height:34px !important; padding:0 8px !important; font-size:10px !important; }
  .file-name{ font-size:9px !important; margin-top:5px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .diagnostic-tabs{ gap:3px !important; }
  .diagnostic-tabs button{ min-height:38px !important; padding:0 3px !important; font-size:9px !important; }
  .diagnostic-score-grid{ gap:4px !important; }
  .diagnostic-score{ padding:7px 6px !important; min-height:62px !important; }
  .diagnostic-score b{ font-size:15px !important; }
  .diagnostic-score small{ display:none !important; }
  .compare-grid{ grid-template-columns:1fr 1fr !important; gap:4px !important; }
  .viewer-head span{ display:none !important; }
  .viewer-head strong{ font-size:10px !important; }
  .stage{ min-height:360px !important; height:min(62vh,560px) !important; }
  .stage-tools{ left:6px !important; bottom:6px !important; }
  .tool-chip{ font-size:8px !important; padding:4px 6px !important; }
  #operatorResult{ grid-template-columns:auto 1fr auto; padding:12px !important; gap:5px 8px; }
  #operatorStatus{ min-width:54px; font-size:10px !important; }
  #operatorHeadline{ font-size:19px !important; }
  #operatorConfidence{ font-size:17px !important; }
  .diagnostic-findings-panel{ border-radius:12px !important; }
}

/* V12.19 — mobile compare presentation: never squeeze isolated caps into slivers */
@media (max-width: 760px){
  .compare-grid{grid-template-columns:1fr !important;gap:10px !important}
  .stage{height:auto !important;min-height:0 !important;aspect-ratio:4/5 !important}
  .stage img{object-fit:contain !important;object-position:center center !important}
  #technicalViews .compare-grid{grid-template-columns:1fr !important}
}


/* V12.20 — two-option camera/file input */
.upload-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.upload-actions .upload-btn{width:100%;min-height:46px;white-space:nowrap}
@media (max-width:760px){
  .upload-card p,.file-meta{display:none!important}
  .upload-actions{grid-template-columns:1fr 1fr;gap:8px}
  .upload-actions .upload-btn{font-size:13px;padding:11px 8px}
}