/* Template studio — same surfaces, type and teal accent as the rest of the app. */
.modal.modal-lg:has(.template-studio) {
  display: flex;
  flex-direction: column;
  width: min(1120px, 96vw);
  max-width: min(1120px, 96vw);
  max-height: min(880px, 92dvh);
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.template-studio {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(840px, 92dvh);
  min-height: 0;
  overflow: hidden;
  direction: rtl;
  background: var(--surface);
  color: var(--text);
}

.template-studio-header {
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.template-studio-title-main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}

.template-studio-subtitle {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.template-studio-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
}

.template-studio-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--surface);
}

.ts-gallery {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 24px;
  background: var(--bg-2);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.ts-gallery-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-choose-direction { font-size: 11px; }
.ts-scope-help { margin: 0 0 16px; color: var(--text-3); font-size: 12px; line-height: 1.65; }
.ts-gallery-sub {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}

.template-library { gap: 12px; }

.ts-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.ts-target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.ts-target:hover { background: var(--surface-hover); color: var(--text); }

.ts-target.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--text);
}

.ts-target-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.ts-preview-head,
.ts-preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.ts-preview-head strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.ts-demo-toggle {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
}

.ts-demo-toggle input,
.ts-music-field input[type="checkbox"] { accent-color: var(--accent); }

.ts-preview-footer .template-clear-option { font-size: 11px; min-height: 30px; padding: 6px 10px; }

.ts-control-label { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.ts-control-label output {
  font-size: 11px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ts-background-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  background: var(--surface-2);
  padding: 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}

.ts-background-pick img { width: 54px; height: 34px; border-radius: 4px; object-fit: cover; }

.ts-position-controls { display: flex; gap: 6px; }
.ts-position-controls button {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 8px;
  cursor: pointer;
}

.ts-position-controls button.is-active {
  background: var(--accent-soft);
  color: var(--text);
  border-color: var(--accent);
}

.ts-advanced {
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: 4px;
}

.ts-advanced summary {
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.ts-mobile-back { display: none; }

.template-library-tools {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -16px -18px 0;
  padding: 16px 18px 10px;
  gap: 10px;
  border: 0;
  background: var(--bg-2);
}

.template-search-row { display: flex; align-items: center; gap: 8px; }

.template-library-search {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.template-library-search::placeholder { color: var(--text-muted); }

.template-library-search:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.template-clear-option {
  width: auto;
  flex: none;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface);
  font-size: 12px;
  font-weight: 650;
}

.template-clear-option:hover {
  border-color: var(--accent);
  color: var(--text);
}

.template-group-chips {
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
  gap: 6px;
}

.template-group-chip {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 650;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-2);
}

.template-group-chip.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.template-group-chip span {
  font-size: 10px;
  font-weight: 700;
  opacity: 1;
  color: var(--text-3);
}

.template-group-chip.is-active span { color: var(--accent); }

.template-style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.template-style-chips[hidden] { display: none; }

.template-style-chips button {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.template-style-chips button.is-active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.template-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.template-results-heading strong { font-size: 13px; font-weight: 700; }
.template-library-count { font-size: 11px; font-weight: 650; color: var(--text-3); }
.template-library-hint { text-align: end; }

.template-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.template-preset-card {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: 0;
  background: var(--surface);
  overflow: hidden;
  gap: 0;
  text-align: start;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}

.template-preset-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  background: var(--surface);
  color: var(--text);
}

.template-preset-card.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--surface);
}

.template-card-preview.is-rendered {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  background: #0c121d;
}

.template-card-preview.is-rendered::before,
.template-card-preview.is-rendered::after { display: none; }

.template-rendered-preview,
.ts-template-hero,
.ts-template-hero-wrap > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.template-preview-play {
  position: absolute;
  inset: auto 8px 8px auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(8, 12, 20, 0.55);
  color: #fff;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-out);
}

.template-preset-card:hover .template-preview-play,
.template-preset-card:focus-visible .template-preview-play { opacity: 1; }

.template-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
}

.template-card-info .template-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}

.template-card-info .template-card-kind {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}

.template-card-kind span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-weight: 600;
}

.template-card-check {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 7;
  width: 20px;
  height: 20px;
  color: var(--text-on-accent);
  background: var(--accent);
}

.ts-config {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  background: var(--surface);
  border-inline-start: 1px solid var(--divider);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.ts-config-empty {
  width: 100%;
  margin: 12px 0 auto;
  padding: 8px 4px 20px;
  justify-items: stretch;
  text-align: center;
}

.ts-config-empty::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2) 58%, var(--bg));
}

.ts-config-active {
  padding: 0 0 12px;
  border: 0;
  background: transparent;
}

.ts-config-active-kicker {
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.ts-config-active-name {
  direction: unset;
  text-align: start;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.ts-config-active-note {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.ts-template-hero-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #0c121d;
}

.ts-music-status {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.ts-music-description { color: var(--text-3); font-size: 12px; line-height: 1.6; margin: 8px 0 12px; }

.ts-config-block {
  padding: 14px 0;
  border-top: 1px solid var(--divider);
}

.ts-config-block-title {
  color: var(--text-2);
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 10px;
}

.ts-music-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.ts-music-field input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.ts-music-field select {
  min-width: 0;
  width: 100%;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  padding: 0 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
}

.ts-music-field input[type="range"] { accent-color: var(--accent); width: 100%; cursor: pointer; }

.ts-music-field input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.ts-music-field:has(input[type="checkbox"]) { flex-direction: row; justify-content: space-between; align-items: center; }

.template-studio button:focus-visible,
.template-studio input:focus-visible,
.template-studio select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ts-picker { background: var(--surface); }
.ts-pick-grid { padding-bottom: 8px; }

@media (min-width: 1280px) {
  .template-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .template-studio-body { grid-template-columns: minmax(0, 1fr) 280px; }
  .template-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-gallery { padding: 14px; }
  .template-library-tools { margin: -14px -14px 0; padding: 14px 14px 10px; }
}

@media (max-width: 760px) {
  .modal.modal-lg:has(.template-studio) {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: 94dvh;
  }

  .template-studio { height: min(94dvh, 920px); }
  .template-studio-body { display: flex; flex-direction: column; overflow-y: auto; }
  .ts-gallery, .ts-config { overflow: visible; flex: none; }
  .ts-config { border-inline-start: 0; border-top: 1px solid var(--divider); }
  .ts-target { font-size: 11px; padding: 8px 4px; }
  .ts-mobile-back { display: inline-flex; margin-bottom: 12px; }
  .template-studio-header { padding: 12px 14px; }
  .template-library-tools { top: 0; }
  .template-card-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-preset-card, .template-preview-play { transition: none; }
  .template-preset-card:hover { transform: none; }
}

/* Start with a comparison. Only the explicit apply action changes the film. */
.template-studio-body.is-directions { display: block; overflow-y: auto; }
.ts-directions { padding: 28px; }
.ts-directions-heading { max-width: 620px; margin-bottom: 24px; }
.ts-direction-eyebrow { font-size: 12px; color: var(--accent); font-weight: 650; }
.ts-directions-heading h2 { margin: 8px 0; font-size: 25px; font-weight: 650; letter-spacing: -.4px; }
.ts-directions-heading p, .ts-direction-brief p { margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.75; }
.ts-direction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ts-direction-card {
  min-width: 0; padding: 0; overflow: hidden; text-align: start; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text);
  background: var(--surface-2); font: inherit;
}
.ts-direction-card:hover { border-color: var(--border-strong); }
.ts-direction-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ts-direction-copy { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ts-direction-copy strong { font-size: 15px; font-weight: 650; }
.ts-direction-copy > span { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.ts-direction-copy .ts-direction-choice { margin-top: 6px; color: var(--accent); }
.ts-direction-card.is-selected .ts-direction-choice::before { content: "✓ "; }
.ts-direction-demo { margin: 14px 0 22px; font-size: 11px; color: var(--text-3); line-height: 1.6; }
.ts-direction-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ts-direction-none { padding: 8px 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.ts-direction-none[aria-pressed="true"] { color: var(--accent); }
.ts-direction-apply:disabled { opacity: .45; cursor: default; }
.ts-direction-status { min-height: 20px; margin: 12px 0 22px; color: var(--text-3); font-size: 12px; line-height: 1.65; }
.ts-direction-brief { padding: 16px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.ts-direction-brief summary { font-size: 13px; cursor: pointer; }
.ts-direction-brief p { margin: 12px 0; }
.ts-direction-brief label { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; font-size: 12px; }
.ts-direction-brief input, .ts-direction-brief textarea {
  box-sizing: border-box; width: 100%; max-width: 100%; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; color: var(--text); background: var(--bg-2);
  font: inherit; font-size: 13px; line-height: 1.5; resize: vertical;
}
.ts-direction-brief-text { margin-top: 12px; }
.ts-direction-library { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 16px; color: var(--text-3); font-size: 12px; }
.ts-direction-library button { font-size: 12px; }
.tl-template-label { display: flex; align-items: center; gap: 5px; }
.tl-template-help { width: 17px; height: 17px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--text-2); font: inherit; font-size: 10px; line-height: 1; cursor: pointer; }
.tl-template-block { font-family: inherit; text-align: start; }
.tl-template-block:focus-visible, .tl-template-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.template-track-help p, .template-track-help li { font-size: 13px; line-height: 1.8; }
.template-track-help ul { padding-inline-start: 20px; }
@media (max-width: 760px) {
  .ts-directions { padding: 20px 16px; }
  .ts-directions-heading h2 { font-size: 22px; }
  .ts-direction-grid { grid-template-columns: 1fr; }
  .ts-direction-copy { padding: 12px; gap: 5px; }
  .ts-direction-actions { align-items: stretch; flex-direction: column; }
  .ts-direction-none { text-align: start; }
}