:root {
  --tpl-page-w-px: 954px;
  --tpl-page-h-px: 1696px;
  --tpl-strip-w-px: 954px;

  --tpl-ppi: 264;
  --tpl-font-px: 40.3333;
  --tpl-print-scale: 0.363636;

  --tpl-gap: 28px;
  --tpl-scale: 1;

  --tpl-margin-top-px: 0px;
  --tpl-margin-left-px: 0px;
  --tpl-margin-right-px: 0px;
  --tpl-margin-bottom-px: 0px;

  /* UI theme vars */
  --tpl-ui-base-colour: #000000;
  /* default page text + toolbar icon/text */
  --tpl-ui-colour-1: #ffffff;
  /* Home background */
  --tpl-ui-colour-2: #ffffff;
  /* other buttons background */
  --tpl-ui-line-colour: #444444;
  /* outlines */
  --tpl-ui-base-rgb: 0, 0, 0;

  --ui-font-px: 14px;

  --preview-bg: #e9e9e9;
  --page-border: rgba(0, 0, 0, 0.18);
  --page-shadow: rgba(0, 0, 0, 0.18);

  /* IMPORTANT: now dynamic (JS updates this based on actual toolbar height) */
  --topbar-h: 64px;
  --leftbar-w: 320px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--ui-font-px);
  background: var(--preview-bg);
  color: #111;
}

.toolbar {
  background: #f6f6f6;
  border: 1px solid #ddd;
}

/* Top toolbar now has 2 rows */
.toolbar--top {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 10px 16px;

  border-left: none;
  border-right: none;
  border-top: none;

  position: sticky;
  top: 0;
  z-index: 60;
}

.toolbar__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.toolbar__group {
  display: grid;
  gap: 6px;
}

.toolbar__label {
  font-size: 12px;
  opacity: 0.85;
}

.toolbar select {
  font: inherit;
  padding: 6px 10px;
  height: 34px;
}

/* Make top-toolbar inputs match selects */
.toolbar--top input[type="text"],
.toolbar--top input[type="number"] {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  height: 34px;
}

.toolbar__spacer {
  flex: 1 1 auto;
}

.toolbar__group--buttons {
  display: flex;
  gap: 8px;
  align-items: end;
}

.btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.btn:hover {
  background: #fafafa;
}

.btn:active {
  transform: translateY(1px);
}

.margins-row {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: nowrap;
}

.mini-field {
  display: grid;
  gap: 4px;
}

.mini-field span {
  font-size: 12px;
  opacity: 0.85;
}

.mini-field input {
  width: 64px;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  height: 34px;
}

/* Compact 6-char hex inputs with visible prefix */
.hex-mini {
  display: grid;
  grid-template-columns: auto 9ch;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 34px;
}

.hex-mini__prefix {
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-right: 1px solid #e4e4e4;
  opacity: 0.75;
  font-size: 12px;
}

.hex-mini__input {
  width: 9ch;
  border: none;
  outline: none;
  padding: 6px 8px;
  font: inherit;
  text-transform: uppercase;
  height: 34px;
}

/* Specific widths for new controls */
#indentToolbar {
  width: 84px;
}

#watermarkUrl {
  width: 280px;
  max-width: 280px;
}

/* Left toolbar now sits below the measured top bar */
.toolbar--left {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  height: calc(100vh - var(--topbar-h));
  width: var(--leftbar-w);
  z-index: 55;

  border-left: none;
  border-bottom: none;
  border-top: none;

  padding: 12px;
  overflow: auto;
}

.left__block {
  padding: 10px;
  border: 1px solid #e0e0e0;
  background: #f6f6f6;
  border-radius: 10px;
  margin-bottom: 12px;
}

.left__block--add {
  padding-bottom: 12px;
}

.left__title {
  font-weight: 600;
  margin-bottom: 10px;
}

.add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  font: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}

.icon-btn:hover {
  background: #fafafa;
}

.icon-btn:active {
  transform: translateY(1px);
}

.icon-btn--small {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.icon-btn--danger {
  border-color: #d8b0b0;
}

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

.sections-list {
  display: grid;
  gap: 12px;
}

.section-card {
  border: 1px solid #e0e0e0;
  background: #f6f6f6;
  border-radius: 10px;
  overflow: hidden;
}

.section-card__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.section-card__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-card__controls {
  display: flex;
  gap: 6px;
}

.section-card__body {
  padding: 10px;
}

.field-row {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.field-row--two {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field-col {
  display: grid;
  gap: 6px;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}

.field-row input[type="text"],
.field-row select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 10px;
}

.checkbox-line input {
  margin: 0;
}

.hex-input {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.hex-prefix {
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-right: 1px solid #e4e4e4;
  opacity: 0.75;
}

.hex-input input {
  border: none !important;
  outline: none;
  padding: 7px 10px;
}

/* Workspace now shrinks to fit beneath the real toolbar height */
.workspace {
  height: calc(100vh - var(--topbar-h));
  padding: 16px;
  padding-left: calc(var(--leftbar-w) + 16px);
}

.tpl-doc {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tpl-preview {
  height: 100%;
  width: 100%;
  display: block;
}

.tpl-flow {
  width: var(--tpl-strip-w-px);
  height: var(--tpl-page-h-px);

  margin: 0;
  padding: 0;

  font-size: calc(var(--tpl-font-px) * 1px);
  line-height: 1.25;

  column-width: var(--tpl-page-w-px);
  column-gap: 28px;
  column-fill: auto;

  background-color: var(--preview-bg);
  background-image:
    repeating-linear-gradient(to right,
      #fff 0,
      #fff var(--tpl-page-w-px),
      transparent var(--tpl-page-w-px),
      transparent calc(var(--tpl-page-w-px) + 28px)),
    repeating-linear-gradient(to right,
      var(--page-border) 0,
      var(--page-border) 1px,
      transparent 1px,
      transparent calc(var(--tpl-page-w-px) - 1px),
      var(--page-border) calc(var(--tpl-page-w-px) - 1px),
      var(--page-border) var(--tpl-page-w-px),
      transparent var(--tpl-page-w-px),
      transparent calc(var(--tpl-page-w-px) + 28px));

  background-repeat: repeat-x;
  background-size: calc(var(--tpl-page-w-px) + 28px) 100%;
  background-position: 0 0;

  filter: drop-shadow(0 8px 28px var(--page-shadow));

  transform: scale(var(--tpl-scale));
  transform-origin: top left;
}

.section-block {
  break-before: column;

  width: var(--tpl-page-w-px);
  height: var(--tpl-page-h-px);
  box-sizing: border-box;

  padding:
    var(--tpl-margin-top-px) var(--tpl-margin-right-px) var(--tpl-margin-bottom-px) var(--tpl-margin-left-px);

  overflow: hidden;

  color: var(--tpl-ui-base-colour);
}

/* Page toolbar button theming */
.tpl-toolbar-btn {
  border-color: var(--tpl-ui-line-colour);
  background: var(--tpl-ui-colour-2);
  color: var(--tpl-ui-base-colour);
}

.tpl-page-toolbar>.tpl-toolbar-btn:first-child {
  background: var(--tpl-ui-colour-1);
}

.content-placeholder {
  break-inside: avoid;
  padding: 28px;
}

.content-placeholder__title {
  font-weight: 600;
  margin-bottom: 8px;
}

.content-placeholder__meta {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 10px;
}

.content-placeholder__json {
  margin: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.25;
  overflow: auto;
}

.empty-doc {
  break-inside: avoid;
  padding: 28px;
}

.empty-doc__title {
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-doc__text {
  opacity: 0.8;
  max-width: 520px;
}

@media print {

  .toolbar--top,
  .toolbar--left {
    display: none !important;
  }

  .workspace {
    height: auto;
    padding: 0;
  }

  .tpl-doc {
    overflow: visible;
    width: auto;
    height: auto;
  }

  .tpl-preview {
    display: block;
    width: auto;
    height: auto;
  }

  @page {
    size:
      calc((var(--tpl-page-w-px) / 1px) / var(--tpl-ppi) * 1in) calc((var(--tpl-page-h-px) / 1px) / var(--tpl-ppi) * 1in);
    margin: 0;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .tpl-flow {
    width: var(--tpl-page-w-px);
    height: auto;

    column-width: auto;
    column-gap: 0;

    background: transparent;
    filter: none;

    transform: none;

    zoom: var(--tpl-print-scale);

    margin: 0 !important;
    padding: 0 !important;
  }

  .section-block {
    break-before: page;
  }
}