/* Edit PDF, version C. Square, aligned, tool color is the card identity. */
.editor { display: flex; flex-direction: column; width: 100%; gap: 14px; align-items: stretch; }
.editor .toprow, .editor .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.cell { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; min-width: 7rem; }
.cell select, .props input, .props select {
  height: 36px; border: 1px solid #c5d0dc; background: #fff; color: #0f172a;
  font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; padding: 0 8px;
  border-radius: 0 !important; min-width: 0;
}
.props input[type=checkbox] { width: 16px; height: 16px; padding: 0; accent-color: #0078D4; }
.props input[type=color] { padding: 2px; width: 100%; }
.props input[type=range] { padding: 0; accent-color: #0078D4; }
.props { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 10px 12px; width: 100%; }
.props .opt { display: none; }
.editor.mode-text .props .for-text,
.editor.mode-text .props .for-ink,
.editor.mode-box .props .for-box,
.editor.mode-box .props .for-ink,
.editor.mode-arrow .props .for-arrow,
.editor.mode-arrow .props .for-ink,
.editor.mode-draw .props .for-draw,
.editor.mode-draw .props .for-ink,
.editor.mode-image .props .for-image { display: flex; }
.props label.opt, .props .toggles {
  flex-direction: column; gap: 4px; margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b;
}
.props label.wide { grid-column: span 2; }
.props .toggles { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 8px; grid-column: span 2; text-transform: none; letter-spacing: 0; }
.chip { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; height: 36px; line-height: 34px; padding: 0 12px;
  border: 1px solid #c5d0dc; background: #fff; color: #334155; font-size: 13px; font-weight: 700;
}
.chip input:checked + span { background: #0f172a; color: #fff; border-color: #0f172a; }
.chip input:focus-visible + span { outline: 2px solid #0078D4; outline-offset: 2px; }
.props label.fill-toggle { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; align-self: end; height: 36px; }
.fill-toggle input { position: static; opacity: 1; width: 16px; height: 16px; }
.tool-pick { display: flex; width: 100%; }
.tool-pick label { position: relative; margin: 0; display: block; }
.tool-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-text { --c: #0078D4; }
.t-box { --c: #0F766E; }
.t-arrow { --c: #C2410C; }
.t-draw { --c: #6D28D9; }
.t-image { --c: #0369A1; }
.vc .toprow { justify-content: flex-end; }
.vc .tool-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vc .tool-pick .tcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 72px;
  padding: 10px 12px; background: #fff; border: 1px solid #e6e6e6; border-top: 3px solid var(--c); cursor: pointer;
}
.vc .tool-pick .tname { font-weight: 700; font-size: 15px; color: var(--c); }
.vc .tool-pick .thint { font-size: 12px; font-weight: 600; color: #64748b; letter-spacing: 0; }
.vc .tool-pick input:checked + .tcard { background: var(--c); border-color: var(--c); }
.vc .tool-pick input:checked + .tcard .tname,
.vc .tool-pick input:checked + .tcard .thint { color: #fff; }
.vc .tool-pick input:focus-visible + .tcard { outline: 2px solid #005A9E; outline-offset: 2px; }
.vc .props { border: 1px solid #e6e6e6; border-left: 4px solid #0078D4; padding: 14px; background: #fff; }
.vc.mode-box .props { border-left-color: #0F766E; }
.vc.mode-arrow .props { border-left-color: #C2410C; }
.vc.mode-draw .props { border-left-color: #6D28D9; }
.vc.mode-image .props { border-left-color: #0369A1; }
.frame { position: relative; width: 100%; display: none; justify-content: center; background: #f8fafc; border: 1px solid #e6e6e6; padding: 16px; }
#pageCv { max-width: 100%; height: auto; display: block; background: #fff; box-shadow: 0 0 0 1px #94a3b8; }
#overlay { position: absolute; cursor: crosshair; touch-action: none; background: transparent; z-index: 2; }
.editor .actions { justify-content: space-between; }
.editor .actions .grow { display: flex; gap: 8px; flex-wrap: wrap; }
.editor .info { font-size: 14px; color: #475569; text-align: left; width: 100%; line-height: 1.5; margin: 0; }
@media (max-width: 900px) {
  .props { grid-template-columns: 1fr 1fr; }
  .props label.wide, .props .toggles { grid-column: span 2; }
  .vc .tool-pick { grid-template-columns: 1fr 1fr; }
}