/*
 * Seminar Engine Admin — shared light theme
 *
 * Design tokens mirror the customer-facing dashboard at app.seminarengine.com
 * (seminar-engine/dashboard/src/styles/globals.css). The 4 admin tools at
 * logs.mynextlevel.ai/seminar-engine/{admin,templates,launch,bulk-import}/
 * all link to this file so they stay visually consistent with the dashboard
 * and with each other.
 *
 * Deployed to: /var/www/call-logs/seminar-engine/styles.css
 * Served at:   https://logs.mynextlevel.ai/seminar-engine/styles.css
 */

:root {
  --acc:       hsl(244 100% 67%);
  --acc-soft:  hsl(240 92% 96%);
  --acc-dim:   hsl(244 100% 85%);
  --acc-deep:  hsl(244 78% 58%);
  --ink:       hsl(222 47% 11%);
  --ink-dim:   hsl(215 25% 27%);
  --ink-soft:  hsl(215 16% 65%);
  --bg:        hsl(210 40% 98%);
  --surface:   hsl(0 0% 100%);
  --line:      hsl(220 13% 91%);
  --line-soft: hsl(210 40% 96%);
  --positive:      hsl(161 94% 30%);
  --positive-soft: hsl(152 81% 96%);
  --negative:      hsl(0 72% 51%);
  --negative-soft: hsl(0 86% 97%);
  --warning:       hsl(32 95% 44%);
  --warning-soft:  hsl(48 100% 96%);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 24px 28px;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
}

.container { max-width: 1100px; margin: 0 auto; }

/* === Top nav strip === */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--acc);
  z-index: 9999;
  pointer-events: none;
}
.portal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.nxlvl-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nxlvl-page-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.nxlvl-back-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.15s;
  flex-shrink: 0;
}
.nxlvl-back-link:hover { color: var(--acc); }
.portal-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.portal-tabs a {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}
.portal-tabs a:hover { color: var(--ink); background: var(--line-soft); }
.portal-tabs a.active { color: var(--acc-deep); background: var(--acc-soft); }
@media (max-width: 900px) {
  .portal-tabs { justify-content: flex-start; order: 3; flex-basis: 100%; margin-top: 4px; }
}

/* === Header === */
.header { margin-bottom: 24px; }
.header h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.header h1 span {
  font-size: 10px;
  font-weight: 600;
  background: var(--acc-soft);
  color: var(--acc-deep);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  text-transform: uppercase;
}
.header p {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 6px;
  line-height: 1.6;
}
.header a { color: var(--acc-deep); text-decoration: none; }
.header a:hover { text-decoration: underline; }
.header .tenant-badge {
  display: inline-block;
  background: var(--line-soft);
  color: var(--ink-dim);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-left: 8px;
  vertical-align: middle;
}

/* === Toolbar === */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.filter-group {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.filter-group button {
  background: transparent;
  color: var(--ink-soft);
  border: 0;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.filter-group button.active { background: var(--acc-soft); color: var(--acc-deep); }
.filter-group button:hover:not(.active) { color: var(--ink); }

/* === Buttons === */
.btn-primary {
  background: var(--acc);
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  font-family: inherit;
}
.btn-primary:hover { background: var(--acc-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--ink-soft); cursor: not-allowed; }
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-secondary:hover { background: var(--line-soft); border-color: var(--ink-soft); }
.btn-ghost {
  background: transparent;
  color: var(--ink-dim);
  border: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-ghost:hover { color: var(--ink); background: var(--line-soft); }
.btn-danger { color: var(--negative); }
.btn-danger:hover { color: var(--negative); background: var(--negative-soft); }

/* === Cards === */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card.archived { opacity: 0.6; }
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.card-subtitle {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 4px;
}
.card h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.card .hint {
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 16px;
  line-height: 1.6;
}
.card .hint code,
code.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--line-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
  color: var(--ink);
}

/* === Badges === */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge.active { background: var(--positive-soft); color: var(--positive); }
.badge.archived { background: var(--line-soft); color: var(--ink-soft); }
.badge.series { background: var(--warning-soft); color: var(--warning); margin-left: 6px; }

/* === Form fields === */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 11px;
  color: var(--ink-dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field input,
.field select,
.field textarea {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.field textarea { resize: vertical; min-height: 64px; }
.field .helper { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
.field .helper code {
  background: var(--line-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--ink);
}
.field .helper a { color: var(--acc-deep); text-decoration: none; }
.field .helper a:hover { text-decoration: underline; }

/* === Card actions === */
.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.card-actions .meta { font-size: 11px; color: var(--ink-soft); flex: 1; }

/* === Empty + loading === */
.empty {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
}
.empty h3 { font-size: 14px; color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.empty p { font-size: 12px; color: var(--ink-dim); line-height: 1.6; }
.loading { font-size: 13px; color: var(--ink-soft); padding: 24px; text-align: center; }
.empty-block {
  background: var(--line-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12px;
}
.empty-block strong { color: var(--ink); }
.empty-block a { color: var(--acc-deep); text-decoration: none; }
.empty-block a:hover { text-decoration: underline; }

/* === Toast === */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 1000;
  display: none;
  max-width: 320px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.toast.success { background: var(--positive-soft); color: var(--positive); border: 1px solid var(--positive); }
.toast.error { background: var(--negative-soft); color: var(--negative); border: 1px solid var(--negative); }

/* === Reminder cadence editor (templates) === */
.cadence-list { display: flex; flex-direction: column; gap: 8px; }
.cadence-row {
  display: grid;
  grid-template-columns: 100px 110px 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--line-soft);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 8px;
}
.cadence-row input,
.cadence-row select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}
.cadence-row .channels { display: flex; gap: 8px; align-items: center; }
.cadence-row .channels label {
  font-size: 11px;
  color: var(--ink-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cadence-row .channels input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--acc); }
.cadence-row .remove {
  background: transparent;
  color: var(--negative);
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}
.cadence-row .remove:hover { background: var(--negative-soft); border-radius: 4px; }
.cadence-add { margin-top: 6px; }

/* === Wizard mode picker === */
.pickrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.picktab {
  background: var(--surface);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.picktab.active { background: var(--acc-soft); border-color: var(--acc-dim); color: var(--acc-deep); }
.picktab:hover:not(.active) { border-color: var(--ink-soft); color: var(--ink); }

/* === Wizard preview boxes === */
.preview-box {
  background: var(--acc-soft);
  border: 1px solid var(--acc-dim);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}
.preview-box .preview-label {
  font-size: 10px;
  color: var(--acc-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.preview-box .preview-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink);
}

/* === Wizard advanced toggle === */
.advanced-toggle {
  background: transparent;
  color: var(--acc-deep);
  border: 0;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.advanced-toggle:hover { color: var(--acc); }
.advanced-block { display: none; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.advanced-block.open { display: block; }

/* === Wizard actions row === */
.actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
}
.actions .left { flex: 1; font-size: 11px; color: var(--ink-soft); }

/* === Wizard series block === */
.series-block {
  margin-top: 14px;
  padding: 16px;
  background: var(--warning-soft);
  border: 1px dashed var(--warning);
  border-radius: 8px;
}
.series-block h3 {
  font-size: 12px;
  color: var(--warning);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.series-block .helper { color: var(--ink-dim); font-size: 12px; }

/* === Wizard success card === */
.success-card {
  background: var(--positive-soft);
  border: 1px solid var(--positive);
  border-radius: 12px;
  padding: 28px 30px;
}
.success-card h2 { color: var(--positive); font-size: 16px; margin-bottom: 14px; }
.success-card .row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.success-card .row label { font-size: 11px; color: var(--ink-dim); flex-shrink: 0; width: 90px; }
.success-card .row input {
  flex: 1;
  background: var(--line-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.success-card .row .copy {
  background: var(--acc);
  color: #fff;
  border: 0;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.success-card .row .copy:hover { background: var(--acc-deep); }
.success-card .pre-baked-actions { margin-top: 18px; display: flex; gap: 8px; }

/* === Bulk-import preview table === */
.preview-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 12px;
}
.preview-table th {
  background: var(--line-soft);
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  color: var(--ink-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.preview-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: top;
}
.preview-table tr.row-error { background: var(--negative-soft); }
.preview-table tr.row-error td { color: var(--negative); }
.preview-table tr.row-warn { background: var(--warning-soft); }
.preview-table tr.row-warn td { color: var(--warning); }
.preview-table .note { font-size: 11px; color: var(--ink-soft); display: block; margin-top: 2px; }
.preview-table .note.error { color: var(--negative); }
.preview-table .note.warn { color: var(--warning); }

/* === Bulk-import summary === */
.summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
}
.summary .stat { display: flex; flex-direction: column; gap: 2px; }
.summary .stat .num {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.summary .stat .label {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.summary .stat.error .num { color: var(--negative); }
.summary .stat.warn .num { color: var(--warning); }
.summary .stat.ok .num { color: var(--positive); }

/* === Bulk-import progress === */
.progress {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  display: none;
}
.progress.active { display: block; }
.progress-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: var(--acc);
  width: 0%;
  transition: width 0.2s;
}

/* === Bulk-import results === */
.results-list { margin-top: 12px; font-size: 13px; color: var(--ink); }
.results-list .row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.results-list .row.ok { color: var(--ink); }
.results-list .row.err { color: var(--negative); }
.results-list .row code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--line-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--ink);
}
.results-list .row a { color: var(--acc-deep); text-decoration: none; margin-left: auto; font-size: 12px; }
.results-list .row a:hover { text-decoration: underline; }

/* === Tenant switcher (replaces the static tenant-badge across all admin tools) === */
.tenant-switcher {
  display: inline-block;
  position: relative;
  margin-left: 8px;
  vertical-align: middle;
  padding: 0;
  background: transparent;
  border: 0;
}
.tenant-switcher__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  max-width: 280px;
}
.tenant-switcher__button:hover {
  background: var(--line-soft);
  border-color: var(--ink-soft);
}
.tenant-switcher__button[aria-expanded="true"] {
  border-color: var(--acc);
  background: var(--acc-soft);
  color: var(--acc-deep);
}
.tenant-switcher__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.tenant-switcher__caret {
  color: var(--ink-soft);
  font-size: 10px;
  margin-top: 1px;
}
.tenant-switcher__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  padding: 8px;
  min-width: 320px;
  max-width: 420px;
}
.tenant-switcher__filter {
  width: 100%;
  background: var(--line-soft);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 6px;
}
.tenant-switcher__filter::placeholder { color: var(--ink-soft); }
.tenant-switcher__filter:focus {
  outline: 0;
  background: var(--surface);
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.tenant-switcher__list {
  max-height: 360px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tenant-switcher__list li { padding: 0; margin: 0; }
.tenant-switcher__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.1s;
}
.tenant-switcher__item:hover { background: var(--line-soft); }
.tenant-switcher__item--current {
  background: var(--acc-soft);
  color: var(--acc-deep);
  font-weight: 600;
}
.tenant-switcher__item--current::after {
  content: '✓';
  color: var(--acc-deep);
  font-weight: 700;
}
.tenant-switcher__item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-switcher__item-slug {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tenant-switcher__empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
}

/* === Modal === */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}
.modal-card h2 { font-size: 14px; color: var(--ink); margin-bottom: 8px; font-weight: 600; }
.modal-card p.hint { font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; line-height: 1.5; }
.modal-row { display: flex; flex-direction: column; gap: 10px; }
.modal-row > div > label {
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.modal-row > div > select,
.modal-row > div > input {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
}
.modal-row > div > input:focus,
.modal-row > div > select:focus {
  outline: 0;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* === Code example block === */
.code-example {
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--ink-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 12px;
  overflow-x: auto;
  line-height: 1.55;
}

/* === Soft warnings (templates >= 25, etc.) === */
.soft-warning {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}