/* ══════════════════════════════════════════════════════════════════
   Template Generator — modal styles
   Replaces the never-shipped "Closed Loop · Dramaturgical Analysis"
   placeholder with a real feature. Follows the same .xxx-overlay /
   .xxx-box pattern as export-panel-overlay / shortcuts-overlay, and
   uses only real EHDarkMuse tokens (var(--gold) etc.) — no new colors
   introduced. See INTEGRATION.md, "Design tokens used."
   ══════════════════════════════════════════════════════════════════ */

.tplgen-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  z-index:10050; padding:24px;
}
.tplgen-overlay.open{ display:flex; }

.tplgen-box{
  width:min(1320px,96vw); height:min(880px,92vh);
  background:var(--panel); border:1px solid var(--border2);
  border-radius:14px; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* ── Header ─────────────────────────────────────────────────────── */
.tplgen-header{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tplgen-header .tplgen-icon{ color:var(--gold2); font-size:18px; }
.tplgen-header h2{
  font-family:var(--ff-cinzel); font-size:16px; font-weight:600;
  letter-spacing:.5px; color:var(--text); margin:0;
}
.tplgen-beta{
  font-family:var(--ff-mono); font-size:9px; letter-spacing:1px;
  color:var(--gold2); border:1px solid var(--gold3); border-radius:20px;
  padding:2px 8px; text-transform:uppercase;
}
.tplgen-header .sp{ flex:1; }
.tplgen-close{
  background:none; border:none; color:var(--text3); cursor:pointer;
  font-size:16px; padding:4px 8px; line-height:1;
}
.tplgen-close:hover{ color:var(--text); }

/* ── Stepper ────────────────────────────────────────────────────── */
.tplgen-stepper{
  display:flex; align-items:center; gap:0;
  padding:14px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0; overflow-x:auto;
}
.tplgen-step{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  opacity:.45; transition:opacity .2s;
}
.tplgen-step.active,.tplgen-step.done{ opacity:1; }
.tplgen-step-dot{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:11px;
  border:1px solid var(--border2); color:var(--text2); flex-shrink:0;
}
.tplgen-step.active .tplgen-step-dot{
  background:var(--gold); border-color:var(--gold); color:var(--bg);
}
.tplgen-step.done .tplgen-step-dot{
  background:transparent; border-color:var(--gold2); color:var(--gold2);
}
.tplgen-step-label{
  font-family:var(--ff-cinzel); font-size:11.5px; letter-spacing:.3px;
  color:var(--text2); white-space:nowrap;
}
.tplgen-step.active .tplgen-step-label{ color:var(--text); }
.tplgen-step-line{
  width:34px; height:1px; background:var(--border2); margin:0 10px;
  flex-shrink:0;
}

/* ── Body layout ────────────────────────────────────────────────── */
.tplgen-body{ flex:1; display:flex; min-height:0; }
.tplgen-main{
  flex:1; min-width:0; overflow-y:auto; padding:18px 20px;
  display:flex; flex-direction:column; gap:16px;
}
.tplgen-rail{
  width:280px; flex-shrink:0; border-left:1px solid var(--border);
  display:flex; flex-direction:column; min-height:0;
}

/* ── Section shells ─────────────────────────────────────────────── */
.tplgen-panel{
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px;
}
.tplgen-panel-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.tplgen-panel-title{
  font-family:var(--ff-cinzel); font-size:12px; letter-spacing:.4px;
  color:var(--text); font-weight:600;
}
.tplgen-panel-title .count{ color:var(--text3); font-weight:400; }
.tplgen-panel-head .sp{ flex:1; }
.tplgen-info-dot{
  color:var(--text3); font-size:11px; cursor:help; border:1px solid var(--border2);
  border-radius:50%; width:14px; height:14px; display:inline-flex;
  align-items:center; justify-content:center;
}

/* ── Song list ──────────────────────────────────────────────────── */
.tplgen-drop{
  border:1.5px dashed var(--border2); border-radius:8px;
  padding:22px; text-align:center; color:var(--text3);
  font-family:var(--ff-crimson); font-size:12.5px; font-style:italic;
  cursor:pointer; transition:border-color .15s,color .15s;
}
.tplgen-drop:hover,.tplgen-drop.drag{ border-color:var(--gold3); color:var(--text2); }
.tplgen-songlist{ max-height:230px; overflow-y:auto; }
.tplgen-song-row{
  display:grid; grid-template-columns:22px 1fr 60px 56px 40px 22px;
  gap:10px; align-items:center; padding:7px 4px;
  border-bottom:1px solid var(--border); font-size:12px;
}
.tplgen-song-row:last-child{ border-bottom:none; }
.tplgen-song-num{ color:var(--text3); font-family:var(--ff-mono); font-size:11px; }
.tplgen-song-name{
  color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tplgen-song-row.analyzed .tplgen-song-name{ color:var(--text); }
.tplgen-song-meta{ color:var(--text3); font-family:var(--ff-mono); font-size:11px; text-align:right; }
.tplgen-song-status{ text-align:center; }
.tplgen-song-remove{
  background:none; border:none; color:var(--text3); cursor:pointer; font-size:12px;
}
.tplgen-song-remove:hover{ color:var(--crimson2); }
.tplgen-spinner{
  width:11px; height:11px; border-radius:50%;
  border:2px solid var(--border2); border-top-color:var(--gold2);
  animation:tplgen-spin .7s linear infinite; display:inline-block;
}
@keyframes tplgen-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .tplgen-spinner{ animation-duration:1.6s; } }

/* ── Analysis charts ────────────────────────────────────────────── */
.tplgen-charts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.tplgen-chart-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px 8px;
}
.tplgen-chart-title{
  font-family:var(--ff-cinzel); font-size:10px; letter-spacing:.4px;
  color:var(--text2); text-transform:uppercase; margin-bottom:6px;
}
.tplgen-chart-card canvas{ width:100%; display:block; }
.tplgen-donut-legend{
  display:flex; flex-direction:column; gap:3px; font-size:10px;
  font-family:var(--ff-mono); margin-top:6px;
}
.tplgen-donut-legend span.sw{
  width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:6px;
}

/* ── Status / CTA row ───────────────────────────────────────────── */
.tplgen-status-row{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
}
.tplgen-status-icon{ color:var(--gold2); font-size:15px; }
.tplgen-status-text .t1{ font-size:12.5px; color:var(--text); }
.tplgen-status-text .t2{ font-size:11px; color:var(--text3); }
.tplgen-status-row .sp{ flex:1; }

/* ── Buttons (extend existing .btn family, don't replace it) ──── */
.btn.tplgen-cta{
  background:var(--gold); color:var(--bg); border:none;
  font-family:var(--ff-cinzel); letter-spacing:.6px; font-size:11.5px;
  padding:9px 18px; border-radius:7px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.btn.tplgen-cta:hover{ background:var(--gold2); }
.btn.tplgen-cta:disabled{ opacity:.4; cursor:not-allowed; }
.btn.tplgen-ghost{
  background:transparent; color:var(--text2); border:1px solid var(--border2);
  font-family:var(--ff-cinzel); letter-spacing:.5px; font-size:11px;
  padding:8px 14px; border-radius:7px; cursor:pointer;
}
.btn.tplgen-ghost:hover{ border-color:var(--gold3); color:var(--text); }

/* ── Detected clusters (step 3) ─────────────────────────────────── */
.tplgen-cluster-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; display:flex; align-items:center; gap:12px;
}
.tplgen-cluster-swatch{ width:6px; align-self:stretch; border-radius:3px; }
.tplgen-cluster-info{ flex:1; min-width:0; }
.tplgen-cluster-name{ font-size:13px; color:var(--text); margin-bottom:2px; }
.tplgen-cluster-name input{
  background:var(--bg3); border:1px solid var(--border2); border-radius:5px;
  color:var(--text); font-family:var(--ff-crimson); font-size:13px;
  padding:4px 8px; width:100%; max-width:280px;
}
.tplgen-cluster-meta{ font-size:11px; color:var(--text3); font-family:var(--ff-mono); }
.tplgen-coherence{
  font-family:var(--ff-cinzel); font-size:9.5px; letter-spacing:.5px;
  padding:2px 8px; border-radius:20px; text-transform:uppercase;
}
.tplgen-coherence.strong{ color:var(--s1); border:1px solid var(--s1); }
.tplgen-coherence.mixed{ color:var(--gold2); border:1px solid var(--gold3); }
.tplgen-coherence.weak{ color:var(--crimson2); border:1px solid var(--crimson); }

/* ── Review (step 5) ────────────────────────────────────────────── */
.tplgen-review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.tplgen-review-row{
  display:flex; justify-content:space-between; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:12px;
}
.tplgen-review-row .k{ color:var(--text3); }
.tplgen-review-row .v{ color:var(--text); font-family:var(--ff-mono); }

/* ── Integration cards ──────────────────────────────────────────── */
.tplgen-integration{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tplgen-integration-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column; gap:8px;
}
.tplgen-integration-icon{
  width:30px; height:30px; border-radius:8px; background:var(--ehdm-purple-dim,rgba(139,92,246,.12));
  display:flex; align-items:center; justify-content:center; color:var(--gold2); font-size:14px;
}
.tplgen-integration-card h4{
  font-family:var(--ff-cinzel); font-size:12px; color:var(--text); margin:0;
}
.tplgen-integration-card p{
  font-family:var(--ff-crimson); font-size:11.5px; color:var(--text3);
  margin:0; line-height:1.4; flex:1;
}

/* ── Library rail (right side) ──────────────────────────────────── */
.tplgen-rail-head{
  display:flex; align-items:center; gap:8px; padding:14px 14px 10px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.tplgen-rail-head h3{
  font-family:var(--ff-cinzel); font-size:12px; color:var(--text); margin:0; flex:1;
}
.tplgen-rail-search{
  margin:10px 14px; background:var(--bg2); border:1px solid var(--border2);
  border-radius:7px; padding:6px 10px; display:flex; align-items:center; gap:6px;
}
.tplgen-rail-search input{
  background:none; border:none; color:var(--text); font-size:11.5px;
  outline:none; width:100%; font-family:var(--ff-crimson);
}
.tplgen-rail-search input::placeholder{ color:var(--text3); }
.tplgen-rail-list{ flex:1; overflow-y:auto; padding:0 14px 14px; display:flex; flex-direction:column; gap:8px; }

.tplgen-tpl-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:9px;
  padding:9px 10px; cursor:pointer; transition:border-color .15s;
}
.tplgen-tpl-card:hover{ border-color:var(--gold3); }
.tplgen-tpl-card canvas{ width:100%; height:36px; display:block; margin-bottom:6px; }
.tplgen-tpl-name-row{ display:flex; align-items:center; gap:6px; }
.tplgen-tpl-name{ font-size:12px; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tplgen-tpl-fav{ background:none; border:none; cursor:pointer; font-size:12px; color:var(--text3); padding:0; }
.tplgen-tpl-fav.on{ color:var(--gold2); }
.tplgen-tpl-meta{ font-size:10.5px; color:var(--text3); font-family:var(--ff-mono); margin-top:2px; }
.tplgen-rail-empty{
  padding:20px 14px; text-align:center; font-family:var(--ff-crimson);
  font-style:italic; font-size:12px; color:var(--text3);
}
.tplgen-rail-footer{
  padding:10px 14px; border-top:1px solid var(--border); font-size:10.5px;
  color:var(--text3); font-family:var(--ff-mono); flex-shrink:0;
}

/* ── Footer nav (back / next) ───────────────────────────────────── */
.tplgen-footer{
  display:flex; align-items:center; gap:10px; padding:14px 20px;
  border-top:1px solid var(--border); flex-shrink:0;
}
.tplgen-footer .sp{ flex:1; }

@media (max-width:900px){
  .tplgen-rail{ display:none; }
  .tplgen-charts{ grid-template-columns:repeat(2,1fr); }
  .tplgen-integration{ grid-template-columns:1fr; }
}