.template-toolbar,
.template-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.template-toolbar > div:first-child,
.template-editor-head > div:nth-child(2) {
  display: grid;
  gap: 4px;
}

.template-toolbar > div:last-child,
.template-editor-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-toolbar b,
.template-editor-head b { font-size: 18px; color: #173640; }
.template-toolbar span,
.template-editor-head span { color: #6d838a; }

.template-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.template-summary section {
  display: grid;
  gap: 7px;
  padding: 18px;
  background: #fff;
  border: 1px solid #d5e4e8;
  border-top: 4px solid #13b4b0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(28, 66, 76, .07);
}

.template-summary small { font-weight: 800; color: #71888f; }
.template-summary b { font-size: 28px; color: #173640; }

.voucher-template-manager { padding: 0; overflow: hidden; }
.template-filters { display: grid; grid-template-columns: minmax(260px, 1fr) 190px 190px; gap: 14px; padding: 18px; background: #f5f9fa; border-bottom: 1px solid #d8e6e9; }
.template-filters label { display: grid; gap: 6px; font-weight: 700; color: #37535b; }
.template-filters input,
.template-filters select { min-height: 44px; border: 1px solid #c9dade; border-radius: 7px; background: #fff; padding: 0 12px; font: inherit; }
.voucher-template-table td { vertical-align: middle; }
.voucher-template-name { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.voucher-template-name > i { width: 14px; height: 40px; flex: 0 0 auto; border-radius: 5px; }
.voucher-template-name > span { display: grid; gap: 3px; }
.voucher-template-name small { max-width: 390px; color: #70868d; white-space: normal; }
.template-role { display: inline-block; margin: 2px; padding: 4px 7px; border-radius: 999px; background: #e7f4f5; color: #176d72; font-size: 11px; font-weight: 800; }
.template-role.user { background: #eef0fb; color: #5755a0; }
.template-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 255px; }
.template-actions button { border: 1px solid #bcd5da; border-radius: 5px; background: #fff; color: #176d86; padding: 6px 8px; cursor: pointer; font-weight: 700; }
.template-actions button:hover { background: #eaf6f8; }
.template-actions button.danger { color: #b54a4a; border-color: #e5c4c4; }
.template-count { padding: 14px 18px; border-top: 1px solid #dce8eb; color: #60767d; font-weight: 700; }
.template-empty { padding: 36px !important; text-align: center; color: #71888f; }

.voucher-template-editor { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 18px; align-items: start; }
.template-editor-fields { display: grid; gap: 18px; }
.template-editor-fields .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.template-editor-fields .field { display: grid; gap: 6px; }
.template-editor-fields .field.wide { grid-column: 1 / -1; }
.template-editor-fields textarea { min-height: 88px; resize: vertical; }
.template-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #e0eaec; }
.template-section-title h2 { margin: 0; }
.template-active { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #d5e5e8; border-radius: 8px; background: #f7fbfb; }
.template-active span { display: grid; gap: 2px; }
.template-role-section { display: grid; gap: 10px; }
.template-role-section > div { display: flex; flex-wrap: wrap; gap: 8px; }
.template-role-section label { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #d0e0e3; border-radius: 7px; background: #fff; }
.template-user-section { display: grid; gap: 10px; }
.template-user-section > b small { color: #71888f; font-weight: 500; }
.template-user-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 220px; overflow: auto; padding: 10px; border: 1px solid #d5e5e8; border-radius: 8px; background: #f8fbfc; }
.template-user-section label { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #fff; }
.template-user-section label > span { display: grid; gap: 2px; }
.template-user-section label small,
.template-user-section > p { color: #71888f; }
.template-html-field textarea { min-height: 270px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.template-variables { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.template-variables button { padding: 6px 8px; border: 1px solid #b9d8de; border-radius: 5px; background: #edf8f9; color: #176d7c; cursor: pointer; font: 700 12px ui-monospace, monospace; }
.sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sample-grid label { display: grid; gap: 5px; color: #60767d; font-weight: 700; }
.sample-grid label:last-child { grid-column: 1 / -1; }
.sample-grid input { min-height: 40px; border: 1px solid #cbdde0; border-radius: 6px; padding: 0 10px; }
.template-live-preview { position: sticky; top: 18px; display: grid; gap: 14px; }
.template-live-preview > div { display: flex; justify-content: space-between; align-items: center; }
.template-live-preview h2 { margin: 0; }
.template-live-preview > div span { padding: 5px 8px; border-radius: 5px; background: #e5f4f5; color: #14747b; font-weight: 800; }
.template-live-preview iframe { width: 100%; min-height: 560px; border: 1px solid #c9dbdf; border-radius: 8px; background: #eef5f6; }
.template-live-preview > small { color: #70868d; }
.form-error { padding: 11px 13px; border-radius: 7px; background: #fff0f0; color: #a63d3d; font-weight: 700; }
.voucher-result-preview { display: grid; gap: 8px; margin-top: 16px; }
.voucher-result-preview > b { color: #274a55; }
.voucher-result-preview iframe { width: 100%; min-height: 420px; border: 1px solid #c9dbdf; border-radius: 8px; background: #eef5f6; }

@media (max-width: 1100px) {
  .template-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voucher-template-editor { grid-template-columns: 1fr; }
  .template-live-preview { position: static; }
}

@media (max-width: 700px) {
  .template-toolbar,
  .template-editor-head { align-items: stretch; flex-direction: column; }
  .template-summary,
  .template-filters,
  .template-editor-fields .form-grid,
  .sample-grid,
  .template-user-section > div { grid-template-columns: 1fr; }
  .template-editor-fields .field.wide,
  .sample-grid label:last-child { grid-column: auto; }
  .template-live-preview iframe { min-height: 430px; }
}