.pte { padding: clamp(14px, 3vw, 28px) clamp(12px, 3vw, 28px) 64px; }

.pte-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.pte-status { font-size: .85rem; color: var(--text-2); }

/* Line editor — sticky so it stays in reach while scrolling the page */
.pte-lineedit {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-lg, 0 12px 35px rgba(30, 41, 59, .17));
}
.pte-lineedit[hidden] { display: none; }
.pte-lineedit textarea { min-height: 44px; font: inherit; resize: vertical; width: 100%; }
.pte-hint { font-weight: 400; color: var(--text-2); margin-left: 6px; }
.pte-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pte-opts .field { min-width: 80px; }
.pte-lineedit .field span { font-size: .75rem; }
.pte-lineedit input[type="number"] { width: 84px; }
.pte-lineedit input[type="color"] { width: 44px; height: 34px; padding: 2px; }
.pte-blur input { width: 120px; }
.pte-lineedit:not([data-bg="solid"]) .pte-bgcolor,
.pte-lineedit:not([data-bg="blur"]) .pte-blur { display: none; }
.pte-advanced summary { cursor: pointer; font-size: .8rem; color: var(--text-2); }
.pte-advanced[open] summary { margin-bottom: 8px; }
.pte-fontinfo.error { color: var(--danger, #c62828); }

.pte-bounds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-in);
}
.pte-bounds legend { padding: 0 4px; font-size: .72rem; color: var(--text-2); }
.pte-fontinfo { font-size: .8rem; color: var(--text-2); }
.pte-fontinfo:empty { display: none; }

.pte-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pte-zoom { display: inline-flex; gap: 4px; margin-left: auto; }
#btn-zoom-fit { min-width: 64px; }
.pte-tools[hidden] { display: none; }
.pte-tools button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }

#empty-state { text-align: center; }
#empty-state[hidden] { display: none; }
.dropzone.over { border-color: var(--accent); background: var(--accent-bg); }

.pte-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pte-nav[hidden] { display: none; }
#page-indicator { min-width: 110px; text-align: center; font-weight: 600; font-size: .9rem; }

/* PDF stage */
.pte-stage { overflow: auto; }
#zoom-wrap { margin: 0 auto; }
#editor-container {
  position: relative;
  transform-origin: top left;
  background: #fff;
  box-shadow: var(--shadow-lg, 0 12px 35px rgba(30, 41, 59, .17));
  display: none;
}
#pdf-canvas { position: absolute; top: 0; left: 0; z-index: 1; }
#text-overlay { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; }

.pdf-paragraph {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: 1px solid transparent;
  pointer-events: auto;
  cursor: text;
}
.pdf-paragraph:hover { outline-color: var(--accent); background: rgba(26, 95, 208, .06); }
.pdf-paragraph:focus-visible { outline: 2px solid var(--accent); }
.pdf-paragraph.changed { outline: 2px solid var(--warn); background: rgba(245, 158, 11, .12); }

.pdf-paragraph.selected { outline: 1px dashed var(--accent); }

#preview-mask { position: absolute; z-index: 3; pointer-events: none; }
#preview-mask[hidden] { display: none; }
#selection-box { position: absolute; outline: 2px solid var(--accent); outline-offset: 1px; z-index: 4; pointer-events: none; }
#selection-box[hidden] { display: none; }
#selection-box .preview-text { position: absolute; inset: 0; white-space: pre; overflow: visible; }
#selection-box button {
  position: absolute;
  pointer-events: auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  padding: 0;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
#selection-box [data-action="move"] { left: -13px; top: -30px; cursor: move; }
#selection-box [data-action="resize"] { right: -13px; bottom: -30px; cursor: nwse-resize; }

@media (max-width: 640px) {
  .pte-lineedit .field { min-width: 0; flex: 1; }
}