/* Midnight Forge - skin.
 *
 * Loaded AFTER styles.css so it wins on the cascade. styles.css is minified and
 * still carries the old orange gradients, Cinzel headings and grey borders in
 * long single lines; rewriting those by hand risks breaking layout rules that
 * are working. Everything visual is restated here instead, against the
 * variables in theme.css, so one palette change moves the whole app.
 */

/* --- page ------------------------------------------------------------ */
body {
  background: var(--bg) !important;
  color: var(--text);
}

/* The old theme scattered orange embers over the page. */
.embers {
  opacity: .35 !important;
  background-image: radial-gradient(circle, var(--primary) 1px, transparent 1px) !important;
}

/* --- top bar ---------------------------------------------------------- */
.topbar {
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 30px;
}
.topbar h1 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topbar p { color: var(--text-3); }
.brand-logo { width: 64px; height: 64px; border-radius: var(--radius-sm); }

/* --- cards ------------------------------------------------------------ */
.forge-card {
  background: var(--panel) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--elev) !important;
}
.card-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 24px;
}
.card-heading h2 {
  font-family: var(--font-display) !important;
  font-weight: 650;
  font-size: 19px;
  color: var(--text);
}
.card-heading p { color: var(--text-3); }

/* The stage number badge - a soft ember disc drawn from the forge mark. */
.card-heading .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-hi) !important;
  font-size: 15px !important;
  font-weight: 700;
}

/* --- stage tabs ------------------------------------------------------- */
.stage-bar { gap: 8px; }
.stage-tab {
  background: var(--panel) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-3) !important;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.stage-tab:hover { background: var(--panel-2) !important; color: var(--text-2) !important; }
.stage-tab.active {
  background: var(--primary-soft) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
.stage-tab .stage-num {
  background: var(--panel-3);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.stage-tab.active .stage-num { background: var(--primary); color: var(--on-primary); }

/* --- fields ----------------------------------------------------------- */
select, input, textarea, .ss-input {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-soft) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}
select:focus, input:focus, textarea:focus, .ss-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
label span, .field-title { color: var(--text-2); }
.field-title span:last-child { color: var(--muted); }
small { color: var(--muted); }

/* --- buttons ---------------------------------------------------------- */
/* One filled copper-orange action per panel; everything else is a quiet outline.
 * The weight rule itself lives in ui-polish.js - this only supplies the look. */
.forge-btn, .secondary-btn, .copy-btn, .text-btn {
  font-family: var(--font);
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.forge-btn:not(.primary), .secondary-btn, .copy-btn {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text-2) !important;
}
.forge-btn:not(.primary):hover:not(:disabled),
.secondary-btn:hover, .copy-btn:hover {
  background: var(--primary-soft) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
  transform: none;
}
.forge-btn.primary {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--on-primary) !important;
  font-weight: 650 !important;
}
.forge-btn.primary:hover:not(:disabled) {
  background: var(--primary-hi) !important;
  border-color: var(--primary-hi) !important;
  transform: none;
}
.forge-btn:disabled, .forge-btn[disabled] {
  opacity: .38 !important;
  filter: none !important;
  cursor: not-allowed;
}
.text-btn { color: var(--primary-hi) !important; }

/* --- chips ------------------------------------------------------------ */
.chip {
  background: var(--primary-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--primary-hi) !important;
}

/* --- output and quality ----------------------------------------------- */
.output-box, .quality-box, .songs-box, .handoff-box, .export-box,
.sig-box, .cover-cur-box, .vibe-box, .phase-section, .generator-box,
.presets-section, .history-section, .social-post-section,
.video-prompt-section, .export-section, .instrumental-section,
.beat-section,
.quality-analysis, .rhyme-analysis, .syllable-counter,
.conflict-detector, .critique-section, .reference-section,
.perspective-section, .api-section, .batch-section,
.hook-generator-section {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius) !important;
}
.quality-track { background: var(--panel-3); }
.quality-track span { background: linear-gradient(90deg, var(--primary-dark), var(--primary-hi)) !important; }

/* --- dialogs and toasts ----------------------------------------------- */
.dialog-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
.dialog-head h3 { font-family: var(--font-display) !important; color: var(--text); }
.dialog-head p { color: var(--text-3); }
dialog::backdrop { background: rgba(7, 5, 4, .86); }
.toast {
  background: var(--panel-3) !important;
  border: 1px solid var(--line) !important;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.technique-option {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-sm);
  color: var(--text-2);
}

/* --- the search dropdown --------------------------------------------- */
.ss-list {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev);
}
.ss-opt { color: var(--text-2); border-bottom: 1px solid var(--line-soft); }
.ss-opt.active, .ss-opt:hover { background: var(--primary-soft); color: var(--text); }
.ss-opt.chosen { color: var(--primary-hi); }
.ss-group { color: var(--primary-hi); background: var(--panel-2); }
.ss-caret { color: var(--primary); }

/* --- status lines ----------------------------------------------------- */
.ui-status {
  border-left: 3px solid var(--primary) !important;
  background: var(--primary-soft) !important;
  color: var(--text-2) !important;
}

/* --- the gate --------------------------------------------------------- */
#email-gate, #code-gate, #restore-gate {
  background: var(--bg) !important;
  left: 0 !important; right: 0 !important; width: 100vw !important;
  margin: 0 !important; box-sizing: border-box !important;
  transform: none !important; overflow-y: auto;
}
#email-gate > div, #code-gate > div, #restore-gate > div {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  width: min(480px, calc(100vw - 32px)) !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  margin-left: auto !important; margin-right: auto !important;
}
#email-gate h2, #code-gate h2, #restore-gate h2 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  font-weight: 650;
}
@media (max-width: 600px) {
  #email-gate, #code-gate, #restore-gate { padding: 16px !important; }
  #email-gate > div, #code-gate > div, #restore-gate > div { padding: 24px 18px !important; }
  #email-gate > img, #code-gate > img { max-width: 240px !important; margin-bottom: 16px !important; }
}
/* Organized button browser for the long genre/subgenre catalog. */
.sound-browser{grid-column:1/-1;border:1px solid var(--line-soft);background:var(--panel-2);border-radius:12px;padding:16px;margin:4px 0 10px}
.sound-browser-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.sound-browser-head>div:first-child{display:flex;flex-direction:column;gap:3px}
.sound-browser-head strong{color:var(--primary-hi);font-size:15px}
.sound-browser-head span{color:var(--text-3);font-size:11px}
.sound-summary{min-width:180px;text-align:right;display:flex;flex-direction:column;gap:2px}
.sound-summary strong{color:var(--text);font-size:13px}
.sound-step{margin-top:12px}
.sound-step>b{display:block;color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.sound-choice-grid{display:flex;flex-wrap:wrap;gap:7px;max-height:210px;overflow:auto;padding:1px 3px 3px 1px}
.sound-choice{border:1px solid var(--line);background:var(--panel);color:var(--text-2);border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;line-height:1.15;cursor:pointer;transition:.15s ease}
.sound-choice:hover{border-color:var(--primary);color:var(--text);transform:translateY(-1px)}
.sound-choice.selected{border-color:var(--primary-hi);background:var(--primary-soft);color:var(--primary-hi);box-shadow:0 0 0 1px var(--primary-soft2)}
.sound-choice-grid.families .sound-choice{border-radius:8px;font-weight:700}
.sound-choice-grid.subgenres .sound-choice{font-size:11px}
.native-sound-selects{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:10px}
.native-sound-selects summary{cursor:pointer;color:var(--text-3);font-size:11px}
.native-sound-slot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.sound-empty{color:var(--text-3);font-size:12px;margin:0}
.profile-button-browser{width:100%}
.profile-button-browser .profile-list{max-height:230px}
.profile-picked{color:var(--text-2);font-size:12px;margin-top:10px;padding:8px 10px;border-left:3px solid var(--primary);background:var(--primary-soft)}
.profile-picked strong{color:var(--primary-hi)}
.native-profile-select{margin-top:10px}
.native-profile-select summary{cursor:pointer;color:var(--text-3);font-size:11px}
.profile-select-slot{margin-top:8px}
@media(max-width:700px){.sound-browser-head{flex-direction:column}.sound-summary{text-align:left;min-width:0}.native-sound-slot{grid-template-columns:1fr}.sound-choice{padding:9px 11px}.sound-choice-grid{max-height:260px}}