/* Loopelo free templates: editor layout (form beside a live, scaled preview).
   Colours come from --tpl-ui-* so the Toolbox can map them to its own theme;
   the sheet inside the preview always stays white paper. */
.tpl-editor {
  --tpl-ui-surface: #fff; --tpl-ui-paper: #EFEAE0; --tpl-ui-line: #E2DBCD; --tpl-ui-ink: #14213A;
  --tpl-ui-muted: #4A5570; --tpl-ui-accent: #1C8F5E; --tpl-ui-danger: #B42318;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: start
}
@media (max-width: 900px) { .tpl-editor { grid-template-columns: minmax(0, 1fr) } }
.tpl-editor *, .tpl-editor *::before, .tpl-editor *::after { box-sizing: border-box }
.tpl-form { display: grid; gap: 12px; padding: 18px; background: var(--tpl-ui-surface); color: var(--tpl-ui-ink); border: 1px solid var(--tpl-ui-line); border-radius: 16px; position: sticky; top: 96px }
@media (max-width: 900px) { .tpl-form { position: static } }
.tpl-form-title { margin: 0; font-size: 21px; line-height: 1.2 }
.tpl-field { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; font-weight: 700; font-size: 13.5px; color: var(--tpl-ui-muted) }
.tpl-field input[type="text"], .tpl-field textarea, .tpl-field select { width: 100%; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--tpl-ui-line); border-radius: 8px; background: var(--tpl-ui-surface); color: var(--tpl-ui-ink); font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4 }
.tpl-field textarea { min-height: 76px; resize: vertical }
.tpl-field legend, .tpl-images legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 13.5px; color: var(--tpl-ui-muted) }
.tpl-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: 15px; color: var(--tpl-ui-ink) }
.tpl-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--tpl-ui-accent) }
.tpl-picks { display: grid; gap: 6px }
.tpl-images { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px dashed var(--tpl-ui-line); border-radius: 12px }
.tpl-image-slot { display: grid; gap: 4px }
.tpl-link { min-height: 44px; justify-self: start; padding: 0; border: 0; background: none; color: var(--tpl-ui-accent); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
.tpl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border-radius: 8px; border: 0; background: transparent; color: var(--tpl-ui-ink); box-shadow: inset 0 0 0 1.5px var(--tpl-ui-line); font: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer }
.tpl-btn-primary { background: var(--tpl-ui-ink); color: var(--tpl-ui-surface); box-shadow: none }
.tpl-btn:disabled { opacity: .6; cursor: progress }
.tpl-fine { margin: 0; font-weight: 500; font-size: 13px; color: var(--tpl-ui-muted) }
.tpl-status { margin: 0; min-height: 1.2em; font-size: 14px; font-weight: 600; color: var(--tpl-ui-accent) }
.tpl-status-error { color: var(--tpl-ui-danger) }
.tpl-preview-col { display: grid; gap: 8px; min-width: 0 }
.tpl-example-note { margin: 0; font-size: 13px; font-weight: 600; color: var(--tpl-ui-muted) }
.tpl-preview { position: relative; overflow: hidden; padding: clamp(12px, 3vw, 28px); background: var(--tpl-ui-paper); border-radius: 18px }
.tpl-stage { transform-origin: top left; transform: scale(var(--tpl-fit, .5)) }
.tpl-stage .tpl-page { box-shadow: 0 20px 50px -24px rgba(20, 33, 58, .45), 0 0 0 1px #E8E2D6 }
.tpl-stage .tpl-page + .tpl-page { margin-top: 12mm }
/* Phones never show a QR code in the preview: there is nothing to scan it
   with. The short link stays visible, and the PDF and Word files keep both. */
@media screen and (max-width: 820px) { .tpl-preview .tpl-qr-code, .tpl-preview .tpl-tab-qr { display: none } }

.tpl-btn:focus-visible, .tpl-link:focus-visible { outline: 2px solid var(--tpl-ui-accent); outline-offset: 3px }