:root { --qc-stage-bg: #07090d; }

body { -webkit-tap-highlight-color: transparent; }

/* ── login ── */
.login-body { background:
  radial-gradient(1200px 600px at 50% -10%, #16202e 0%, #0d1117 60%); }

/* ── capture shell ── */
.capture-main { padding: 0; }
.capture-step { min-height: calc(100vh - 56px); }

.offline-banner {
  position: sticky; top: 0; z-index: 30;
  background: #b54708; color: #fff; padding: .5rem 1rem; font-size: .85rem;
  text-align: center;
}

#btn-capture { font-size: 1.15rem; }

/* ── annotate ── */
.annotate-stage, .confirm-stage {
  position: relative; width: 100%;
  height: calc(100vh - 56px - 56px);
  background: var(--qc-stage-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#annotate-canvas { touch-action: none; max-width: 100%; max-height: 100%; }
#confirm-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-spinner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(7,9,13,.55); color: #fff;
}

.annotate-toolbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem;
  padding: .5rem .75rem; min-height: 56px;
  background: #11151c; border-top: 1px solid #2a2f37;
}
.tool-color {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #444; cursor: pointer;
}
.tool-color.active { border-color: #4dabf7; box-shadow: 0 0 0 2px #4dabf7; }
.tool-width {
  width: 34px; height: 30px; border: 1px solid #444; background: #1b2027; color: #ddd;
  border-radius: 6px; cursor: pointer; line-height: 1; font-size: .8rem;
}
.tool-width.active { border-color: #4dabf7; color: #fff; }
.tool-mode {
  height: 30px; padding: 0 .55rem; border: 1px solid #444; background: #1b2027; color: #ddd;
  border-radius: 6px; cursor: pointer; line-height: 1; font-size: .8rem; white-space: nowrap;
}
.tool-mode.active { border-color: #4dabf7; color: #fff; background: #1f3043; }

/* ── history ── */
.qc-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; background:#222; }
.status-badge { font-size: .7rem; }

/* ── overlay editor ── */
.oe-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 0; height: calc(100vh - 56px); }
.oe-canvas-pane { position: relative; background: var(--qc-stage-bg); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
#oe-stage { position: relative; max-width: 100%; max-height: 100%; }
#oe-stage > #oe-img { display: block; max-width: 100%; max-height: calc(100vh - 80px); position: relative; z-index: 0; }
/* live server-baked layer, sized exactly over the base image, behind the handles */
#oe-baked { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#oe-overlay { z-index: 2; }
/* when the baked layer is showing, element nodes become faint grab-boxes only */
#oe-stage.baked-shown .oe-el {
  background: transparent !important; border-color: transparent !important;
  color: transparent !important; outline: 1px dashed rgba(77,171,247,.40);
}
#oe-stage.baked-shown .oe-el.selected { outline: 1px solid #4dabf7; }
#oe-stage.baked-shown .oe-el > img,
#oe-stage.baked-shown .oe-ph-label { visibility: hidden; }
.oe-el {
  position: absolute; cursor: move; user-select: none; touch-action: none;
  outline: 1px dashed rgba(77,171,247,.0);
}
.oe-el.selected { outline: 1px solid #4dabf7; outline-offset: 1px; }
.oe-handle {
  position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px;
  background: #4dabf7; border: 2px solid #fff; border-radius: 50%;
  cursor: nwse-resize; display: none; touch-action: none; z-index: 6;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.oe-el.selected .oe-handle { display: block; }
.oe-el-text { white-space: pre; line-height: 1.05; }
.oe-side { background: #11151c; border-left: 1px solid #2a2f37; overflow-y: auto; padding: .75rem; }
.oe-toolbar { display: flex; gap: .35rem; flex-wrap: wrap; padding: .5rem .75rem;
  background: #0e1218; border-bottom: 1px solid #2a2f37; }
.oe-template-list .list-group-item { cursor: pointer; }
.oe-template-list .active-badge { font-size:.65rem; }
.oe-field-row { display:flex; gap:.4rem; align-items:center; }

/* dashboard table */
.dash-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; background:#222; cursor: pointer; }
.sub-row.selected { outline: 2px solid #4dabf7; }