/* Styles for pages not yet migrated to Components/UI (project wizard, media library, voices, platform).
   Generated from the old minified app.css: unused rules dropped, colors mapped to tokens.css,
   uppercase eyebrows, gradients and heavy weights removed. Delete rules as pages migrate. */

.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.page-heading h1 { max-width:760px; font-size:var(--text-xl); line-height:1.25; letter-spacing:-.011em; font-weight:600; margin:0; }
.page-heading p { color:var(--muted); font-size:var(--text-base); margin:.25rem 0 0; }
.compact-heading { align-items:center; }
.compact-heading h1 { font-size:var(--text-xl); }
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); min-height:48px; }
.panel-heading h2 { font-size:var(--text-base); margin:0; font-weight:600; }
.panel-heading a { font-size:.78rem; font-weight:600; }
.empty-state { min-height:290px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }
.empty-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:var(--radius-lg); background:var(--surface-2); color:var(--muted); margin-bottom:.75rem; }
.empty-state h3 { font-size:1.05rem; font-weight:600; }
.empty-state p { max-width:410px; color:var(--muted); font-size:.85rem; }
.local-mode { padding:.5rem .75rem; border:1px solid var(--line-strong); border-radius:var(--radius-lg); font-size:var(--text-xs); font-weight:600; color:var(--muted); background:#fff; }
.local-mode i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--muted); margin-right:.35rem; }
.helper-text { text-align:center; color:var(--muted); font-size:var(--text-xs); margin:.7rem 0 0; }
.result-label { font-size:var(--text-xs); font-weight:600; color:var(--muted); }
.preserve-lines { white-space:pre-line; }
@media(max-width:800px) {
  .page-heading { align-items:flex-start; flex-direction:column; }
  .page-heading .btn { width:100%; }
}
.back-link { display:inline-block; font-size:var(--text-xs); font-weight:600; margin-bottom:.75rem; }
.review-title { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.review-title h1 { font-size:1.75rem; margin:.35rem 0 0; }
/* Configurações e integrações */
.integration-featured { display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.4rem; }
.integration-logo { display:grid; place-items:center; width:56px; height:56px; border-radius:var(--radius-lg); font-weight:600; }
.openai-logo { background:var(--ink); color:#fff; }
.integration-title { display:flex; align-items:flex-start; justify-content:space-between; }
.integration-title h2 { font-size:1.25rem; margin:.25rem 0; }
.integration-body>p { font-size:.76rem; color:var(--muted); margin:0 0 1.2rem; }
.integration-state { padding:.3rem .55rem; border-radius:var(--radius-lg); background:var(--line); color:var(--muted); font-size:var(--text-xs); font-weight:600; }
.integration-state.connected { background:var(--accent-soft); color:var(--accent); }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.settings-grid small { display:block; color:var(--muted); font-size:var(--text-xs); margin:.35rem 0; }
.integration-toggle { display:flex; align-items:center; gap:.65rem; margin:1rem 0; cursor:pointer; }
.integration-toggle input { display:none; }
.integration-toggle>span { width:38px; height:22px; border-radius:var(--radius-lg); background:var(--line-strong); position:relative; transition:.15s; }
.integration-toggle>span:after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; left:3px; top:3px; box-shadow:var(--shadow-sm); transition:.15s; }
.integration-toggle input:checked+span { background:var(--purple); }
.integration-toggle input:checked+span:after { left:19px; }
.integration-toggle div { display:flex; flex-direction:column; }
.integration-toggle strong { font-size:.72rem; }
.integration-toggle small { font-size:var(--text-xs); color:var(--muted); }
.settings-actions { display:flex; gap:.6rem; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:1.8rem 0 .8rem; }
.section-heading h2 { font-size:1.25rem; margin:.25rem 0 0; }
.section-heading p { max-width:470px; font-size:var(--text-xs); color:var(--muted); margin:0; }
@media(max-width:700px) {
  .settings-grid { grid-template-columns:1fr; }
  .integration-featured { grid-template-columns:1fr; }
  .section-heading { display:block; }
  .section-heading p { margin-top:.5rem; }
}
.version-pill { display:inline-flex; align-items:center; padding:.38rem .6rem; border-radius:var(--radius-lg); background:var(--accent-soft); color:var(--ink-2); font-size:var(--text-xs); font-weight:600; white-space:nowrap; }
.editor-heading { margin-bottom:1rem; }
.editor-heading .review-title p { font-size:.75rem; color:var(--muted); margin:.4rem 0 0; }
.editor-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr); gap:1rem; align-items:start; }
.editor-form-panel { padding:1.35rem; }
.editor-panel-heading,.versions-heading,.comparison-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1.15rem; }
.editor-panel-heading h2,.versions-heading h2,.comparison-heading h2 { font-size:1.05rem; margin:.3rem 0 0; }
.editor-panel-heading>span,.versions-heading>span { font-size:var(--text-xs); color:var(--muted); font-weight:600; }
.editor-field { margin-bottom:1rem; }
.editor-field textarea { resize:vertical; line-height:1.55; }
.editor-field .tall-textarea { min-height:260px; }
.editor-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.editor-save-box { display:grid; grid-template-columns:1fr auto; align-items:end; gap:1rem; background:var(--surface-2); border:1px solid var(--surface-2); border-radius:var(--radius-lg); padding:1rem; margin-top:1.25rem; }
.editor-save-box .btn { min-width:180px; }
.versions-panel { padding:1.15rem; position:sticky; top:1rem; }
.versions-intro { font-size:var(--text-xs); line-height:1.5; color:var(--muted); }
.versions-list { display:grid; gap:.55rem; }
.version-card { display:grid; grid-template-columns:auto 1fr auto; gap:.65rem; width:100%; text-align:left; border:1px solid var(--line); background:#fff; border-radius:var(--radius); padding:.75rem; color:var(--ink); transition:.15s; }
.version-card:hover,.version-card.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px rgba(10,122,95,.07); }
.version-number { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius); background:var(--accent-soft); color:var(--ink-2); font-size:var(--text-xs); font-weight:600; }
.version-card div { display:flex; flex-direction:column; min-width:0; }
.version-card strong { font-size:var(--text-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.version-card small { font-size:var(--text-xs); color:var(--muted); margin:.12rem 0; }
.version-card p { font-size:var(--text-xs); line-height:1.4; color:var(--ink-2); margin:.2rem 0 0; }
.current-tag { align-self:start; padding:.18rem .38rem; border-radius:var(--radius-lg); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:600; }
.comparison-panel { padding:1.3rem; margin-top:1rem; }
.comparison-heading { align-items:center; }
.comparison-legend { display:flex; justify-content:flex-end; gap:1rem; font-size:var(--text-xs); color:var(--muted); margin:-.45rem 0 .7rem; }
.comparison-legend i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--line-strong); margin-right:.3rem; }
.comparison-legend i.changed { background:var(--tone-warn-fg); }
.comparison-row { display:grid; grid-template-columns:125px 1fr 1fr; border-top:1px solid var(--line); }
.comparison-row.is-changed { background:var(--tone-warn-bg); }
.comparison-label,.comparison-value { padding:.85rem; }
.comparison-label { display:flex; flex-direction:column; }
.comparison-label span { font-size:var(--text-xs); font-weight:600; }
.comparison-label small { font-size:var(--text-xs); color:var(--muted); }
.comparison-row.is-changed .comparison-label small { color:var(--tone-warn-fg); }
.comparison-value { border-left:1px solid var(--line); }
.comparison-value strong { display:block; font-size:var(--text-xs); color:var(--muted); margin-bottom:.35rem; }
.comparison-value p { font-size:var(--text-xs); line-height:1.5; color:var(--ink-2); margin:0; max-height:180px; overflow:auto; }
.comparison-value.previous { background:rgba(246,244,248,.55); }
@media(max-width:1000px) {
  .editor-grid { grid-template-columns:1fr; }
  .versions-panel { position:static; }
  .versions-list { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:760px) {
  .editor-two-columns { grid-template-columns:1fr; }
  .editor-save-box { grid-template-columns:1fr; }
  .versions-list { grid-template-columns:1fr; }
  .comparison-row { grid-template-columns:1fr; }
  .comparison-label { padding-bottom:.3rem; }
  .comparison-value { border-left:0; border-top:1px dashed var(--line); }
}
/* Biblioteca e geração de mídia */
.media-heading { margin-bottom:1.2rem; }
.media-toolbar { display:grid; grid-template-columns:minmax(180px,.55fr) minmax(280px,1fr) auto; align-items:end; gap:1rem; padding:1rem 1.15rem; margin-bottom:1rem; }
.media-stage { display:flex; align-items:center; justify-content:flex-end; gap:.35rem; padding-bottom:.55rem; }
.media-stage>span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--accent-soft); color:var(--ink-2); font-size:var(--text-xs); font-weight:600; }
.media-stage small { font-size:var(--text-xs); font-weight:600; color:var(--ink-2); }
.media-stage i { width:18px; height:1px; background:var(--line-strong); }
.media-studio-grid { display:grid; grid-template-columns:minmax(300px,.7fr) minmax(420px,1.3fr); gap:1rem; align-items:start; }
.media-action-panel { overflow:hidden; scroll-margin-top:1rem; }
.media-limit { font-size:var(--text-xs); font-weight:600; color:var(--muted); }
.media-panel-body { padding:1.15rem; }
.upload-zone { display:flex; min-height:148px; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1.5px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--surface-2); cursor:pointer; transition:.15s; }
.upload-zone:hover { border-color:var(--purple); background:var(--surface-3); }
.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-zone>span { display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius); background:var(--accent-soft); color:var(--ink-2); font-weight:600; margin-bottom:.55rem; }
.upload-zone strong { font-size:.76rem; }
.upload-zone small { font-size:var(--text-xs); color:var(--muted); margin-top:.25rem; }
.media-warning { display:grid; grid-template-columns:1fr auto; background:var(--tone-warn-bg); border:1px solid var(--tone-warn-fg); border-radius:var(--radius); padding:.75rem; margin-bottom:1rem; }
.media-warning strong,.media-warning span { display:block; }
.media-warning strong { font-size:var(--text-xs); }
.media-warning span { font-size:var(--text-xs); color:var(--tone-warn-fg); }
.media-warning a { grid-row:1/3; grid-column:2; align-self:center; font-size:var(--text-xs); font-weight:600; }
.adjustment-source { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:.7rem; align-items:center; background:var(--surface-2); border:1px solid var(--surface-2); border-radius:var(--radius-lg); padding:.6rem; margin-bottom:1rem; }
.adjustment-source img { width:56px; height:56px; border-radius:var(--radius); object-fit:cover; }
.adjustment-source div { display:flex; flex-direction:column; min-width:0; }
.adjustment-source strong { font-size:var(--text-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adjustment-source small { font-size:var(--text-xs); color:var(--muted); line-height:1.4; }
.adjustment-source button { border:0; background:transparent; color:var(--muted); font-size:1.1rem; }
.aspect-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.aspect-option { display:flex; flex-direction:column; align-items:center; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); padding:.6rem; }
.aspect-option:hover,.aspect-option.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px rgba(10,122,95,.06); }
.aspect-option strong { font-size:var(--text-xs); margin:.35rem 0 .05rem; }
.aspect-option small { font-size:var(--text-xs); color:var(--muted); }
.aspect-shape { display:block; border:2px solid var(--muted); border-radius:3px; }
.aspect-option.selected .aspect-shape { border-color:var(--purple); background:var(--accent-soft); }
.media-library-title { margin-top:1.6rem; }
.media-library-title p { font-weight:600; }
.media-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; }
.media-card { overflow:hidden; position:relative; }
.media-card.selected-final { border-color:var(--accent); box-shadow:0 0 0 2px rgba(10,122,95,.08); }
.media-thumb { position:relative; aspect-ratio:1/1; background:var(--line); overflow:hidden; }
.media-thumb img { width:100%; height:100%; object-fit:cover; transition:.2s; }
.media-card:hover .media-thumb img { transform:scale(1.025); }
.final-ribbon { position:absolute; top:.6rem; left:.6rem; padding:.3rem .5rem; border-radius:var(--radius-lg); background:var(--accent); color:#fff; font-size:var(--text-xs); font-weight:600; box-shadow:var(--shadow-sm); }
.media-card-body { padding:.85rem; }
.media-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.media-card-title strong { font-size:var(--text-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-card-title span { flex:none; font-size:var(--text-xs); font-weight:600; color:var(--muted); background:var(--line); border-radius:var(--radius-lg); padding:.2rem .35rem; }
.media-card-body>small { display:block; color:var(--muted); font-size:var(--text-xs); margin-top:.3rem; }
.version-link { display:inline-block; color:var(--accent); background:var(--surface-2); border-radius:var(--radius-lg); font-size:var(--text-xs); font-weight:600; padding:.2rem .38rem; margin-top:.55rem; }
.media-card-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:1px solid var(--line); }
.media-select-button,.media-adjust-button { display:block; width:100%; border:0; background:var(--surface-2); color:var(--ink); padding:.6rem .55rem; text-align:center; font-size:var(--text-xs); font-weight:600; }
.media-card-actions>*+* { border-left:1px solid var(--line); }
.media-select-button:hover,.media-adjust-button:hover { background:var(--accent-soft); }
.media-adjust-button { color:var(--ink-2); }
.media-select-button.selected { color:var(--accent); background:var(--accent-soft); }
.media-empty { min-height:220px; }
@media(max-width:1150px) {
  .media-toolbar { grid-template-columns:1fr 1.5fr; }
  .media-stage { grid-column:1/3; justify-content:flex-start; }
  .media-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
  .media-studio-grid { grid-template-columns:1fr; }
  .media-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px) {
  .media-toolbar { grid-template-columns:1fr; }
  .media-stage { grid-column:auto; flex-wrap:wrap; }
  .media-grid { grid-template-columns:1fr; }
  .media-heading .local-mode { display:none; }
}
.voice-studio-grid { display:grid; grid-template-columns:minmax(340px,.85fr) minmax(430px,1.15fr); gap:1rem; align-items:start; }
.script-preview { max-height:265px; overflow:auto; background:var(--ink); color:var(--surface-2); border-radius:var(--radius-lg); padding:1rem; margin-top:1rem; }
.script-preview .result-label { color:var(--muted); }
.script-preview p { font-size:var(--text-xs); line-height:1.6; white-space:pre-line; margin:.55rem 0; color:var(--line); }
.script-preview small { font-size:var(--text-xs); color:var(--muted); }
@media(max-width:1050px) {
  .voice-studio-grid { grid-template-columns:1fr; }
}
.project-steps { display:flex; gap:.5rem; flex-wrap:wrap; }
.project-steps button { border:1px solid var(--line-strong); background:white; border-radius:var(--radius); padding:.75rem 1rem; color:var(--ink-2); font-weight:600; }
.project-steps button.active { background:var(--ink); color:white; border-color:var(--ink); }
.project-steps small { display:block; font-size:var(--text-xs); opacity:.8; }
.project-preview { display:block; max-width:100%; max-height:540px; object-fit:contain; margin:1rem 0; border-radius:var(--radius); }
.project-workspace .page-heading { margin-top:1rem; }
.project-workspace .editor-heading .back-link { display:none; }
.website-preview { display:block; max-width:100%; max-height:320px; object-fit:contain; border:1px solid var(--surface-2); border-radius:var(--radius); }
.website-metadata { white-space:pre-wrap; overflow-wrap:anywhere; max-height:200px; overflow:auto; font-size:var(--text-xs); }

.kicker { display: none; }

/* Jade marks selection/approval only; hovers stay neutral. */
.aspect-option:hover:not(.selected) { background: var(--surface-2); border-color: var(--line-strong); box-shadow: none; }
.version-card:hover:not(.selected) { background: var(--surface-2); border-color: var(--line-strong); box-shadow: none; }
.media-select-button:hover:not(.selected), .media-adjust-button:hover { background: var(--surface-3); }