@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #0f0f0f;
  --surface: #181818;
  --surface-2: #212121;
  --surface-3: #2b2b2b;
  --line: #303030;
  --text: #f1f1f1;
  --muted: #aaa;
  --red: #ff0033;
  --red-2: #cc0029;
  --green: #31d158;
  --blue: #3ea6ff;
  --amber: #ffcc4d;
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* ── Scrollbars globais ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 0, 51, .22), transparent 28%),
    radial-gradient(circle at 0% 35%, rgba(62, 166, 255, .12), transparent 24%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: rgba(15, 15, 15, .86);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.yt-mark {
  display: grid;
  width: 46px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-weight: 900;
}

.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); font-size: 12px; margin-top: 2px; }

.nav {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  transition: background 120ms, color 120ms;
}

.nav button svg {
  flex-shrink: 0;
  opacity: .6;
  transition: opacity 120ms;
}

.nav button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav button:hover svg { opacity: 1; }

.nav button.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--red);
}

.nav button.active svg { opacity: 1; }

.ghost-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.sidebar-project {
  margin: 0 0 14px;
}

.sidebar-project-card {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,0,51,.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,0,51,.13), rgba(33,33,33,.82));
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.sidebar-project-card span {
  color: #ffb3c0;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.sidebar-project-card strong {
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-project-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.sidebar-project-card i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.sidebar-project-card b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
}

.sidebar-project-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  padding: 5px;
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px;
  background: transparent;
  color: #ef4444;
  font-size: 11px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s, background .15s;
  gap: 5px;
}
.sidebar-project-delete:hover {
  opacity: 1;
  background: rgba(239,68,68,.1);
}

.app-version {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.app-version span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-version strong {
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.main {
  padding: 26px;
  min-width: 0;
}

body.editor-view-active {
  overflow: hidden;
}

body.editor-view-active .main {
  height: 100vh;
  padding: 12px;
  overflow: hidden;
}

.view {
  display: none;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.view.active {
  display: grid;
  gap: 22px;
}

body.editor-view-active .view[data-view="editor"] {
  width: 100%;
  height: calc(100vh - 24px);
  max-width: none;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

body.editor-view-active .view[data-view="editor"] .view-head {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

body.editor-view-active .view[data-view="editor"] .view-head h1 {
  font-size: 30px;
}

body.editor-view-active .view[data-view="editor"] .view-head p {
  max-width: none;
}

.view-head {
  display: grid;
  gap: 10px;
  margin-bottom: 2px;
}

.view-head h1 {
  font-size: clamp(36px, 5vw, 58px);
}

.view-head p {
  max-width: 760px;
  margin: 0;
  color: #c9c9c9;
  font-size: 15px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: end;
  min-height: 310px;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,0,51,.20), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    var(--surface);
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--red);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -0.06em;
}

.hero-copy {
  max-width: 760px;
  margin: 18px 0 0;
  color: #c9c9c9;
  font-size: 16px;
}

.hero-card, .metric-card, .panel {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(24,24,24,.86);
  border-radius: var(--radius);
}

.hero-card {
  padding: 20px;
}

.hero-card span, .hero-card small, .metric-card span, .metric-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.hero-card strong {
  display: block;
  margin: 8px 0;
  color: var(--red);
  font-size: 58px;
  line-height: 1;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.advice-panel {
  border-color: rgba(255, 0, 51, .22);
  background: linear-gradient(135deg, rgba(255,0,51,.12), rgba(24,24,24,.88) 45%);
}

.advice-panel p {
  max-width: 900px;
  color: #e6e6e6;
  font-size: 18px;
  line-height: 1.55;
}

.metric-card {
  padding: 18px;
}

.metric-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 32px;
}

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.channel-head-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}

.period-filter {
  display: grid;
  gap: 6px;
  min-width: 150px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.period-filter select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111;
  color: var(--text);
  padding: 0 12px;
}

.channel-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.channel-subnav button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.channel-subnav button.active,
.channel-subnav button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.channel-panel { display: none; }
.channel-panel.active { display: block; }

.channel-brief,
.channel-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.channel-overview {
  grid-template-areas:
    "summary side"
    "videos side"
    "comments side";
}

.channel-side {
  display: grid;
  grid-area: side;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.channel-summary {
  grid-area: summary;
}

.channel-summary h2 {
  white-space: nowrap;
}

.overview-wide {
  grid-column: 1;
}

.recent-panel {
  grid-column: span 2;
}

.signal-card {
  min-height: 0;
}

.period-card {
  min-height: 0;
}

.period-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.period-stat {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #111;
}

.period-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.period-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.panel {
  padding: 22px;
  min-width: 0;
}

.panel.youtube-red {
  background: linear-gradient(135deg, rgba(255,0,51,.14), rgba(24,24,24,.9) 42%);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.panel p, .panel-head span {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.diagnosis-list, .stack-list, .check-list, .post-list, .video-list {
  display: grid;
  gap: 12px;
}

.diagnosis-item, .stack-item, .post-item, .video-row {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.channel-overview .diagnosis-item,
.channel-overview .video-row,
.channel-brief .diagnosis-item,
.channel-brief .video-row {
  background: rgba(33,33,33,.72);
}

.channel-overview .diagnosis-item p,
.channel-brief .diagnosis-item p {
  font-size: 16px;
  line-height: 1.55;
}

.channel-overview .diagnosis-item strong {
  font-size: 18px;
}

.diagnosis-item strong, .stack-item strong, .post-item strong {
  display: block;
  margin-bottom: 4px;
}

.diagnosis-item p, .stack-item p, .post-item p {
  margin: 0;
  color: #c7c7c7;
  font-size: 13px;
}

.video-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.compact-row {
  grid-template-columns: 72px minmax(0, 1fr);
}

.compact-row img {
  width: 72px;
}

.video-row img {
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.video-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minimal-video-row {
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
}

.minimal-video-row img {
  width: 110px;
}

.signal-row {
  grid-template-columns: 1fr;
}

.signal-row img {
  width: 100%;
  min-height: 150px;
  border-radius: 10px;
}

.signal-row strong {
  margin-top: 4px;
  font-size: 19px;
  white-space: normal;
  line-height: 1.28;
}

.video-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip {
  padding: 5px 9px;
  border-radius: 999px;
  background: #303030;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.overview-block {
  margin-top: 20px;
}

.overview-block h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.1;
}

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

.action-card {
  padding: 16px;
  border: 1px solid rgba(255, 0, 51, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,0,51,.13), rgba(33,33,33,.78));
}

.action-card strong {
  display: block;
  margin-bottom: 7px;
  font-size: 16px;
}

.action-card p {
  margin: 0;
  color: #d8d8d8;
  font-size: 14px;
  line-height: 1.45;
}

.chip.red { background: rgba(255,0,51,.14); color: #ffb3c0; }
.chip.blue { background: rgba(62,166,255,.14); color: #b3ddff; }

.overview-video-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

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

.overview-comment {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.overview-comment strong {
  display: block;
  margin-bottom: 8px;
  color: #ffb3c0;
}

.overview-comment p {
  margin: 0;
  color: #e1e1e1;
  font-size: 14px;
  line-height: 1.48;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.video-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.video-preview-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(33,33,33,.72);
  color: inherit;
  text-decoration: none;
}

.video-preview-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.video-preview-card strong {
  display: -webkit-box;
  min-height: 42px;
  font-size: 16px;
  line-height: 1.32;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.period-board {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
}

.period-timeline {
  display: flex;
  align-items: end;
  gap: 10px;
  min-height: 230px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #111;
  overflow-x: auto;
}

.period-bar {
  display: grid;
  grid-template-rows: minmax(80px, 1fr) auto auto;
  justify-items: center;
  gap: 6px;
  min-width: 54px;
  height: 200px;
}

.period-bar i {
  align-self: end;
  width: 30px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--red), #ff7890);
}

.period-bar span,
.period-bar small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.comment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.comment-card {
  display: grid;
  grid-template-rows: auto auto minmax(110px, 1fr) auto auto;
  gap: 12px;
  min-height: 310px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,0,51,.11), rgba(33,33,33,.84) 42%),
    var(--surface-2);
  box-shadow: 0 18px 44px rgba(0,0,0,.2);
}

.comment-rank {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,0,51,.16);
  color: #ffb3c0;
  font-size: 12px;
  font-weight: 900;
}

.comment-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
}

.comment-head strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}

.comment-date {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
}

.comment-card p {
  margin: 0;
  color: #e4e4e4;
  font-size: 16px;
  line-height: 1.52;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.comment-insight {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.26);
}

.comment-insight span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.comment-insight strong {
  color: #fff;
  font-size: 13px;
  text-align: right;
}

.comment-card a {
  color: #ffb3c0;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-ideas {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.score-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}

.bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #303030;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), #ff7a90);
}

.check-list div {
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: #d8d8d8;
}

.check-list div::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--red);
}

.clips-topline {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: end;
  flex-wrap: wrap;
}

.breadcrumb {
  display: block;
  margin-bottom: 12px;
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 850;
}

.clips-topline h1 {
  font-size: clamp(44px, 6vw, 76px);
}

.clips-topline p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #c9c9c9;
  font-size: 16px;
  line-height: 1.5;
}

.clip-quota {
  min-width: 170px;
  padding: 14px;
  border: 1px solid rgba(99, 102, 241, .7);
  border-radius: 8px;
  background: rgba(24,24,24,.86);
  text-align: left;
}

.clip-quota span,
.clip-quota small {
  display: block;
  color: #9bb8ff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.clip-quota strong {
  display: block;
  margin: 4px 0;
  color: #fff;
  font-size: 18px;
}

.clip-upload-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: stretch;
}

.clip-drop,
.clip-upload-status {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(24,24,24,.78);
}

.clip-drop {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 28px;
  border-style: dashed;
  cursor: pointer;
}

.clip-drop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.clip-drop div {
  max-width: 520px;
  text-align: center;
}

.clip-drop span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.clip-drop strong {
  display: block;
  margin: 12px 0;
  font-size: 24px;
}

.clip-drop p {
  margin: 0;
  color: #c9c9c9;
  line-height: 1.5;
}

.clip-upload-status {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 22px;
}

.clip-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.clip-status-head strong {
  font-size: 16px;
}

.clip-status-head span {
  color: #dbe8ff;
  font-weight: 900;
}

.clip-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #303030;
}

.clip-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, #6aa5ff 0 8px, #3d74ff 8px 16px);
}

.clip-primary,
.clip-secondary {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 950;
}

.clip-primary {
  background: #fff;
  color: #111;
}

.clip-primary:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.clip-secondary {
  width: 100%;
  background: var(--surface-2);
  color: #fff;
}

.clip-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: fit-content;
}

.clip-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 0 16px;
  transition: background .12s, color .12s;
}

.clip-tabs button:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.clip-tabs button.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.clip-tab-panel {
  display: none;
}

.clip-tab-panel.active {
  display: block;
}

.clip-projects-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 22px;
  align-items: start;
}

.clip-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.project-folder {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.project-folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background .1s;
}

.project-folder[open] .project-folder-header {
  border-bottom-color: var(--line);
}

.project-folder-header:hover { background: rgba(255,255,255,.03); }
.project-folder-header::marker,
.project-folder-header::-webkit-details-marker { display: none; }

.project-folder-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.project-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.clip-project-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  transition: border-color .12s;
}

.clip-project-card:hover { border-color: rgba(255,255,255,.15); }
.clip-project-card.proj-deleting { opacity: .4; pointer-events: none; }

.clip-project-thumb {
  position: relative;
  height: 170px;
  overflow: hidden;
  background: #111;
}

.clip-project-thumb video,
.clip-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}

.clip-project-thumb::after {
  content: '';
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
}

.clip-project-thumb span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  color: #fff;
  font-weight: 900;
}

.clip-project-info {
  padding: 12px;
  display: grid;
  gap: 5px;
}

.clip-project-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-project-rename {
  width: 100%;
  height: 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  padding: 0 8px;
  outline: none;
}

.clip-project-rename:focus { border-color: rgba(255,255,255,.45); }

.clip-project-info small {
  color: var(--muted);
  font-size: 11px;
}

.clip-project-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
}

.proj-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
  flex-shrink: 0;
}

.proj-btn:hover { background: var(--surface-3); color: var(--text); border-color: rgba(255,255,255,.15); }

.proj-delete-btn:hover {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.35);
  color: #fca5a5;
}

.transcribe-project-btn {
  flex: 1;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .1s, color .1s;
}

.transcribe-project-btn:hover { background: var(--surface-3); color: var(--text); }

.clip-empty {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
}

.clip-insights {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.clip-insights article {
  display: grid;
  gap: 6px;
}

.clip-insights strong {
  font-size: 44px;
  line-height: .9;
}

.clip-insights span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.clip-projects-inline {
  margin-top: 24px;
}

.clip-projects-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.clip-projects-head > strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
}

.clip-insights-row {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.clip-insights-row strong {
  color: var(--text);
  font-weight: 800;
}

.clip-results {
  display: grid;
  gap: 24px;
}

.clip-result-card {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr) 190px;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(20,20,20,.82);
  overflow: hidden;
}

/* drawer ocupa as 3 colunas */
.clip-caption-drawer {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  background: rgba(10,10,10,.6);
}

.clip-select-subtitle-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
}
.clip-select-subtitle-btn:hover { color: #fff; border-color: rgba(255,255,255,.2); }

.clip-phone {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  width: 200px;
  aspect-ratio: 9 / 16;
  border-radius: 0;
  background: #090909;
  cursor: pointer;
}

.clip-phone video {
  width: 100%;
  height: 100%;
}

.clip-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  filter: blur(18px) saturate(1.12) brightness(.72);
  transform: scale(1.12);
}

.clip-video-main {
  position: absolute;
  inset: 0;
  z-index: 1;
  object-fit: cover;
  background: transparent;
}

.clip-phone::before,
.clip-phone::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.clip-phone::before {
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.20));
  opacity: 1;
  transition: opacity .18s ease;
  z-index: 2;
}

.clip-phone.is-playing::before {
  opacity: 0;
}

.clip-subtitle {
  position: absolute;
  left: var(--subtitle-x, 50%);
  top: var(--subtitle-y, 52%);
  width: min(88%, 320px);
  color: var(--subtitle-color, #fff);
  font-family: var(--subtitle-font, Inter, sans-serif);
  font-size: var(--subtitle-size, 26px);
  font-weight: 950;
  line-height: 1.03;
  text-align: center;
  transform: translate(-50%, -50%);
  text-shadow:
    2px 2px 0 var(--subtitle-stroke, #000),
    -2px 2px 0 var(--subtitle-stroke, #000),
    2px -2px 0 var(--subtitle-stroke, #000),
    -2px -2px 0 var(--subtitle-stroke, #000),
    0 0 16px rgba(0,0,0,.9);
  z-index: 3;
  border: 1px solid transparent;
  background: transparent;
  cursor: move;
  touch-action: none;
}

.clip-phone.subtitle-selected .clip-subtitle {
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px rgba(62,166,255,.25);
}

.clip-subtitle.position-top,
.clip-subtitle.position-middle,
.clip-subtitle.position-bottom { bottom: auto; }
.clip-subtitle.style-pop { letter-spacing: .01em; }
.clip-subtitle.style-clean {
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.clip-subtitle.style-neon {
  color: #f6ff00;
  text-shadow:
    2px 2px 0 #151515,
    -2px 2px 0 #151515,
    2px -2px 0 #151515,
    -2px -2px 0 #151515,
    0 0 14px rgba(246,255,0,.78);
}
.clip-subtitle.style-highlight {
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 0 auto;
  padding: 5px 9px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 11, 70, .94), rgba(255, 92, 0, .88));
  box-shadow: 0 8px 22px rgba(255, 0, 51, .28);
}

.clip-subtitle.style-box {
  padding: 7px 11px;
  border-radius: 6px;
  background: rgba(0,0,0,.86);
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.16);
}

.clip-subtitle.anim-pop-in {
  animation: captionPopIn .28s cubic-bezier(.2, 1.3, .35, 1) both;
}

.clip-subtitle.anim-slide-up {
  animation: captionSlideUp .28s ease both;
}

.clip-subtitle.anim-bounce {
  animation: captionBounce .34s cubic-bezier(.2, 1.4, .45, 1) both;
}

.clip-subtitle.anim-shake {
  animation: captionShake .32s steps(2, end) both;
}

.clip-subtitle.anim-pulse {
  animation: captionPulse .72s ease-in-out both;
}

.clip-subtitle.anim-flicker {
  animation: captionFlicker .7s linear both;
}

.clip-subtitle.anim-typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: captionTypewriter .75s steps(12, end) both;
}

@keyframes captionPopIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes captionSlideUp {
  from { opacity: 0; transform: translate(-50%, -38%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes captionBounce {
  0% { transform: translate(-50%, -50%) scale(.84); }
  70% { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes captionShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); }
  25% { transform: translate(calc(-50% - 3px), -50%) rotate(1deg); }
  50% { transform: translate(calc(-50% + 3px), -50%) rotate(-1deg); }
  75% { transform: translate(calc(-50% - 2px), -50%) rotate(1deg); }
}

@keyframes captionPulse {
  0% { transform: translate(-50%, -50%) scale(.96); filter: brightness(1); }
  55% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.45); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@keyframes captionFlicker {
  0%, 18%, 30%, 44%, 100% { opacity: 1; filter: brightness(1.25); }
  12%, 26%, 38% { opacity: .45; filter: brightness(.85); }
}

@keyframes captionTypewriter {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.clip-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  color: #111;
  font-size: 0;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: auto;
  transition: opacity .15s ease, transform .15s ease, background .12s;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.clip-play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.clip-phone.is-playing .clip-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
}

.clip-phone.is-playing:hover .clip-play {
  opacity: .75;
  transform: translate(-50%, -50%) scale(.85);
}

.clip-play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 17px 0 0 22px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid #111;
}

.clip-phone.is-playing .clip-play::before,
.clip-phone.is-playing .clip-play::after {
  content: '';
  position: absolute;
  top: 17px;
  width: 7px;
  height: 22px;
  border: 0;
  background: #111;
  border-radius: 2px;
  margin: 0;
}

.clip-phone.is-playing .clip-play::before { left: 18px; }
.clip-phone.is-playing .clip-play::after { left: 31px; }

.clip-mini-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 36px 12px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0;
  transition: opacity .18s ease;
}

.clip-phone:hover .clip-mini-controls,
.clip-phone.is-playing .clip-mini-controls {
  opacity: 1;
}

.clip-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clip-time-label {
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  margin-left: auto;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

.subtitle-hud {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.hud-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.hud-summary {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.hud-label {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hud-row .hud-label { margin-bottom: 0; }

.hud-section { display: grid; }

.hud-size-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.hud-size-btn {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}

.hud-size-btn:hover { background: #303030; border-color: rgba(255,255,255,.18); }
.hud-size-btn--up { color: #fff; }

.hud-size-value {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.hud-save-btn {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .1s, color .1s;
}

.hud-save-btn:hover { background: var(--surface-3); color: var(--text); }

.caption-delay-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  color: #a5b4cf;
  font-size: 11px;
  font-weight: 900;
}

.caption-sync-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
}

.caption-sync-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.caption-sync-label {
  color: #a5b4cf;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.caption-delay-range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
  border: none;
  outline: none;
  cursor: pointer;
}

.caption-delay-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #60a5fa;
  border: 2px solid #0d1420;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(96,165,250,.4);
}

.caption-delay-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #60a5fa;
  border: 2px solid #0d1420;
  cursor: pointer;
}

.caption-delay-value {
  color: #60a5fa;
  font-size: 11px;
  font-weight: 800;
  font-family: ui-monospace, monospace;
  min-width: 44px;
  text-align: right;
}

.caption-sync-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(96,165,250,.3);
  border-radius: 8px;
  background: rgba(37,99,235,.18);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.caption-sync-btn:hover {
  background: rgba(37,99,235,.3);
  border-color: rgba(96,165,250,.55);
  color: #bfdbfe;
}

.caption-sync-btn.syncing {
  background: rgba(234,179,8,.18);
  border-color: rgba(234,179,8,.4);
  color: #fde047;
  cursor: default;
  animation: syncPulse 1s ease-in-out infinite;
}

.caption-sync-btn.synced {
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.4);
  color: #86efac;
}

@keyframes syncPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

.caption-words-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.caption-words-row > span {
  color: #a5b4cf;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.caption-words-group {
  display: flex;
  gap: 3px;
}

.caption-word-btn {
  min-width: 32px;
  min-height: 26px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: transparent;
  color: #7d8aa4;
  font-size: 11px;
  font-weight: 800;
  padding: 0 6px;
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}

.caption-word-btn:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.caption-word-btn.active {
  background: rgba(59,130,246,.28);
  border-color: rgba(96,165,250,.5);
  color: #93c5fd;
}

.subtitle-hud-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.subtitle-hud-head strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.subtitle-hud-head span {
  display: block;
  margin-top: 2px;
  color: #76839e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.caption-toggle {
  position: relative;
  width: 24px;
  min-height: 14px;
  border-radius: 999px;
  background: #2563eb;
  padding: 0;
}

.caption-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.caption-tabs {
  display: flex;
  gap: 2px;
  align-items: center;
}

.caption-tabs button {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7d8aa4;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
}

.caption-tabs button.active {
  border-color: #fff;
  color: #fff;
}

.caption-library-title {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.caption-preset-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.caption-animation-library {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.caption-preset-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 16%, rgba(96, 165, 250, .18), transparent 28%),
    #1f2937;
  color: #fff;
  padding: 6px;
  line-height: 1;
  text-align: center;
}

.caption-preset-card span,
.caption-preset-card strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption-preset-card span {
  color: rgba(255,255,255,.72);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.caption-preset-card strong {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.caption-preset-card.active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,.18);
}

.caption-preset-card.preset-highlight strong {
  color: #fff;
  background: #ff0b46;
  padding: 2px 6px;
  border-radius: 3px;
}

.caption-preset-card.preset-neon {
  color: #faff00;
  background: #222f3e;
  text-shadow: 0 0 8px rgba(250,255,0,.55);
}

.caption-preset-card.preset-box span,
.caption-preset-card.preset-box strong {
  background: #020617;
  padding: 2px 5px;
  border-radius: 3px;
}

.caption-preset-card.preset-clean {
  background: #e5e7eb;
  color: #111827;
}

.caption-preset-card.preset-pop strong {
  font-size: 13px;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}

.caption-animation-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3);
  color: #fff;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color .1s, background .1s;
}

.caption-animation-card:hover { background: #2a2a2a; border-color: rgba(255,255,255,.18); }

.caption-animation-card span,
.caption-animation-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.caption-animation-card span {
  font-size: 11px;
  font-weight: 800;
}

.caption-animation-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.caption-animation-card::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: #60a5fa;
  transform: translateY(-50%);
  opacity: .72;
}

.caption-animation-card.anim-pop-in::after { transform: translateY(-50%) scale(1.25); }
.caption-animation-card.anim-slide-up::after { top: 62%; box-shadow: 0 -8px 0 rgba(96,165,250,.32); }
.caption-animation-card.anim-typewriter::after { width: 5px; height: 22px; }
.caption-animation-card.anim-shake::after { right: 13px; box-shadow: 7px 0 0 rgba(96,165,250,.42), -7px 0 0 rgba(96,165,250,.42); }
.caption-animation-card.anim-bounce::after { height: 18px; width: 18px; border-radius: 50%; }
.caption-animation-card.anim-pulse::after { box-shadow: 0 0 0 8px rgba(96,165,250,.15); }
.caption-animation-card.anim-flicker::after { background: #f6ff00; box-shadow: 0 0 16px rgba(246,255,0,.65); }

.caption-animation-card.active {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.caption-panel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subtitle-hud button {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
}

.subtitle-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.subtitle-segment button {
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #111827;
  color: #cbd5e1;
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitle-segment button:hover,
.subtitle-segment button.active {
  border-color: rgba(255,0,51,.45);
  background: var(--red);
  color: #fff;
}

.caption-style-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(2,6,23,.42);
}

.caption-style-head,
.caption-style-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.caption-style-head span,
.caption-style-row span {
  color: #a5b4cf;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.caption-style-head strong,
.caption-style-row b {
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.caption-swatch-row,
.caption-position-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.caption-position-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.caption-swatch-row button,
.caption-position-row button {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}

.caption-swatch-row button:hover,
.caption-position-row button:hover {
  background: #2a2a2a;
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}

.caption-swatch-row button i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}

.caption-swatch-row button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption-swatch-row button.active,
.caption-position-row button.active {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
  color: #fff;
}

.subtitle-hud label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: #a5b4cf;
  font-size: 11px;
  font-weight: 900;
}

.subtitle-hud input[type="range"] {
  width: 100%;
}

.subtitle-hud [data-save-caption-template] {
  justify-self: stretch;
  min-width: 0;
  min-height: 36px;
  border-radius: 9px;
  background: #ff0b46;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-inline-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111;
  padding: 0;
  transition: background .14s, transform .14s;
}

.clip-inline-toggle:hover {
  background: #fff;
  transform: scale(1.08);
}

/* quando tocando, o toggle vira botão de pause com dois traços */
.clip-inline-toggle { position: relative; }

.clip-phone.is-playing .clip-inline-toggle svg { opacity: 0; }

.clip-phone.is-playing .clip-inline-toggle::before,
.clip-phone.is-playing .clip-inline-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px;
  height: 10px;
  background: #111;
  border-radius: 1px;
  transform: translateY(-50%);
}

.clip-phone.is-playing .clip-inline-toggle::before { left: 8px; }
.clip-phone.is-playing .clip-inline-toggle::after  { right: 8px; }

.clip-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: height .14s ease;
  position: relative;
}

.clip-phone:hover .clip-progress-track { height: 6px; }

.clip-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width .1s linear;
}

.suggested-title-label,
.original-title {
  display: block;
}

.suggested-title-label {
  margin-bottom: 5px;
  color: #ffb3c0;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.original-title {
  margin: -2px 0 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Coluna 2: centro ── */
.clip-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 16px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.clip-center-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.clip-center-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clip-menu-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.clip-menu-btn:hover,
.clip-menu-btn.active { background: rgba(255,255,255,.1); color: #fff; }

.clip-transcript-scroll {
  flex: 1;
  min-height: 0;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}

.clip-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.clip-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.clip-action-btn:hover { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }

.clip-publish-pill {
  margin-left: auto;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  padding: 0 18px;
  cursor: pointer;
  transition: opacity .12s;
}
.clip-publish-pill:hover { opacity: .88; }

/* ── Coluna 3: stats ── */
.clip-stats-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
}

.clip-published-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clip-pub-number {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.clip-pub-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

.clip-platform-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clip-platform-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.clip-platform-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-platform-views {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.clip-insights-btn {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: transparent;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.clip-insights-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* legado — mantido para compatibilidade */
.clip-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}

.clip-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}

.clip-panel-title {
  min-width: 0;
}

.clip-time-range {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  letter-spacing: .02em;
}

.clip-panel-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clip-score-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,0,51,.22), rgba(255,0,51,.08));
  border: 1px solid rgba(255,0,51,.28);
}

.clip-score-badge strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.clip-score-badge span {
  color: rgba(255,179,192,.8);
  font-size: 10px;
  font-weight: 800;
  margin-top: 2px;
}

/* legacy detail kept for any remaining references */
.clip-detail {
  display: grid;
  gap: 12px;
}

.clip-transcript-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.clip-transcript-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.transcribe-inline-btn,
.transcribe-project-btn {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
}

.transcribe-project-btn {
  margin-top: 12px;
  width: 100%;
}

.transcribe-inline-btn {
  justify-self: start;
}

/* quando dentro da action bar, herda o estilo clip-action-btn */
.clip-actions-bar .transcribe-inline-btn {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  width: auto;
}

.transcribe-inline-btn:disabled,
.transcribe-project-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.clip-transcript {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow: auto;
  padding-right: 6px;
}

.clip-transcript p {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 2px 0;
  background: transparent;
  color: #d8d8d8;
  font-size: 12px;
  line-height: 1.55;
}

.clip-transcript p.active {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.clip-transcript p.active time {
  color: #ffb3c0;
}

.clip-transcript time {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

.clip-transcript button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.clip-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.clip-card-actions > button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: #cfcfcf;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.clip-card-actions > button:hover {
  border-color: rgba(255,255,255,.2);
  background: var(--surface-3);
  color: #fff;
}

.clip-card-actions .publish-pill {
  margin-left: auto;
  min-width: 80px;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 800;
}

.clip-card-actions .publish-pill:hover {
  background: var(--red-2);
  border-color: var(--red-2);
}

/* clip-side-stats removed — content merged into clip-panel */

.subtitle-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(110px, .7fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(10,10,10,.55);
}

.subtitle-editor-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.subtitle-editor-head strong {
  font-size: 14px;
}

.subtitle-editor-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.subtitle-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.subtitle-field.wide {
  grid-column: span 2;
}

.subtitle-field input,
.subtitle-field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #111;
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
}

.subtitle-field input[type="color"] {
  padding: 3px;
}

.clip-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.clip-meta-grid div {
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
}

.clip-meta-grid strong,
.clip-meta-grid span {
  display: block;
}

.clip-meta-grid strong {
  font-size: 18px;
}

.clip-meta-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.clip-caption {
  margin: 0;
  color: #d8d8d8;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.clip-publish-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clip-publish-row button,
.clip-publish-row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: var(--surface-2);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s, transform .1s;
}
.clip-publish-row button svg { flex-shrink: 0; }
.clip-publish-row button:hover { opacity: .85; transform: scale(1.03); }
.clip-publish-row button:active { transform: scale(.97); }

.publish-btn--youtube   { background: #ff0000; color: #fff; }
.publish-btn--instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.publish-btn--tiktok    { background: #010101; color: #fff; border: 1px solid #69c9d0; }

.clip-publish-board {
  display: grid;
}

.clip-publish-list {
  display: grid;
  gap: 14px;
}

.publish-clip-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.publish-clip-card img {
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  object-fit: cover;
  background: #090909;
}

.publish-clip-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.publish-clip-card h3 {
  margin: 6px 0 10px;
  font-size: 22px;
}

.publish-clip-card p {
  margin: 0 0 14px;
  color: #d8d8d8;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.calendar-plan {
  display: grid;
  gap: 8px;
}

.calendar-plan div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-2);
}

.calendar-plan strong {
  color: var(--red);
}

.analytics-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.analytics-card {
  min-height: 260px;
}

.analytics-card.wide {
  grid-column: span 2;
}

.analytics-card.locked {
  border-color: rgba(62,166,255,.24);
  background:
    linear-gradient(135deg, rgba(62,166,255,.10), rgba(24,24,24,.88) 44%),
    rgba(24,24,24,.86);
}

.bar-chart {
  display: grid;
  gap: 12px;
}

.chart-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 74px;
  gap: 12px;
  align-items: center;
}

.chart-row strong {
  overflow: hidden;
  color: #e9e9e9;
  font-size: 12px;
  text-transform: capitalize;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-track {
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #111;
}

.chart-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), #ff7890);
  box-shadow: 0 0 26px rgba(255,0,51,.24);
}

.chart-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.stacked-chart {
  display: grid;
  gap: 14px;
}

.stacked-bar {
  display: flex;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111;
}

.stacked-segment {
  min-width: 4px;
  height: 100%;
}

.chart-legend {
  display: grid;
  gap: 8px;
}

.legend-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #dcdcdc;
  font-size: 12px;
}

.legend-item i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
}

.donut-wrap {
  display: grid;
  place-items: center;
  gap: 12px;
}

.donut {
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--red) var(--shorts-deg), #3ea6ff 0);
}

.donut::after {
  content: attr(data-label);
  display: grid;
  width: 94px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.api-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.api-links a {
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.api-links .connect-youtube {
  background: var(--red);
  color: #fff;
}

.private-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.private-stat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111;
}

.private-stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.private-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.post-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 18px;
  align-items: start;
}

.composer-panel {
  display: grid;
  gap: 18px;
  background:
    linear-gradient(145deg, rgba(255, 0, 51, .10), rgba(24,24,24,.92) 34%),
    rgba(24,24,24,.86);
}

.composer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, .8fr) 150px 120px;
  gap: 12px;
  align-items: end;
}

.composer-grid label,
.composer-copy,
.image-lab label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.composer-grid input,
.composer-grid select,
.composer-copy textarea,
.image-lab textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111;
  color: var(--text);
  padding: 12px;
  font-size: 14px;
  outline: none;
}

.composer-grid input,
.composer-grid select {
  min-height: 44px;
}

.composer-copy textarea,
.image-lab textarea {
  resize: vertical;
  line-height: 1.5;
}

.composer-grid input:focus,
.composer-grid select:focus,
.composer-copy textarea:focus,
.image-lab textarea:focus {
  border-color: rgba(255, 0, 51, .58);
  box-shadow: 0 0 0 3px rgba(255, 0, 51, .12);
}

.channel-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.channel-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: #e7e7e7;
  font-size: 12px;
  font-weight: 850;
}

.channel-picker input {
  accent-color: var(--red);
}

.image-lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: stretch;
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.composer-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--red);
  color: white;
  font-size: 12px;
  font-weight: 950;
}

.chatgpt-link {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--text);
  color: #111;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.composer-actions .secondary-action {
  background: #303030;
  color: var(--text);
}

.composer-actions .confirm-action {
  background: var(--text);
  color: #111;
}

.image-preview {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,0,51,.20), rgba(62,166,255,.12)),
    #141414;
  text-align: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.image-preview strong {
  font-size: 18px;
}

.image-preview span {
  max-width: 190px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.chatgpt-prompt-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(10,10,10,.62);
}

.chatgpt-prompt-box[hidden] {
  display: none;
}

.chatgpt-prompt-box strong {
  display: block;
  margin-bottom: 4px;
}

.chatgpt-prompt-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.chatgpt-prompt-box textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111;
  color: #e9e9e9;
  padding: 12px;
  resize: vertical;
  line-height: 1.45;
}

.post-side {
  display: grid;
  gap: 18px;
}

.network-preview-list,
.schedule-list {
  display: grid;
  gap: 10px;
}

.network-card,
.schedule-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}

.network-head,
.schedule-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.network-head strong,
.schedule-head strong {
  font-size: 13px;
}

.network-head span,
.schedule-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.network-card p,
.schedule-card p {
  margin: 0;
  padding: 12px;
  color: #e1e1e1;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.network-image-strip {
  height: 96px;
  background:
    linear-gradient(135deg, rgba(255,0,51,.28), transparent 48%),
    linear-gradient(45deg, rgba(62,166,255,.15), rgba(255,255,255,.04)),
    #161616;
}

.network-image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-card {
  border-color: rgba(255, 0, 51, .22);
}

.schedule-card .chip {
  margin-left: 6px;
}

.schedule-process-btn {
  width: 100%;
  margin: 0 0 10px;
}

.schedule-card.status-pending_approval {
  border-color: rgba(255, 204, 77, .38);
}

.schedule-card.status-dry_run_ok {
  border-color: rgba(49, 209, 88, .34);
}

.schedule-card.status-paused {
  opacity: .72;
}

.schedule-meta {
  padding: 0 12px 10px;
  display: grid;
  gap: 8px;
}

.schedule-meta div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.schedule-meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.schedule-target {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #dcdcdc;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.schedule-target.prepared {
  background: rgba(49, 209, 88, .14);
  color: var(--green);
}

.schedule-target.pending_approval {
  background: rgba(255, 204, 77, .14);
  color: var(--amber);
}

.schedule-log {
  margin: 0;
  padding: 0 12px 10px 28px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.schedule-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.schedule-actions button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.schedule-actions button:hover {
  background: rgba(255,255,255,.1);
}

.meta-safe-panel {
  border-color: rgba(62,166,255,.28);
}

.meta-safe-summary {
  display: grid;
  gap: 10px;
}

.meta-safe-summary p {
  margin: 0;
  color: #ddd;
  font-size: 12px;
  line-height: 1.45;
}

.meta-safe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meta-safe-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  padding: 8px;
  color: #fff;
  font-size: 12px;
}

.meta-safe-grid strong {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.meta-safe-warn {
  color: var(--amber) !important;
}

.meta-safe-risks {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.compact-plan div {
  grid-template-columns: 44px 1fr;
}

.idea-lab {
  margin-bottom: 28px;
}

.idea-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 160px 140px 120px 150px;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.idea-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.idea-form input, .idea-form select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #121212;
  color: var(--text);
  padding: 0 12px;
}

.idea-form button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-weight: 900;
}

.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.idea-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.idea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-mini-button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.primary-mini-button:disabled {
  opacity: .64;
}

.developed-script-panel {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(255,0,51,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,0,51,.12), rgba(18,18,18,.96) 36%);
}

.developed-script-panel[hidden] {
  display: none;
}

.developed-script-card {
  display: grid;
  gap: 18px;
}

.developed-script-card h3 {
  margin: 10px 0 6px;
  font-size: 30px;
  line-height: 1.05;
}

.script-promise {
  max-width: 920px;
  color: #f0f0f0;
  font-size: 18px;
  line-height: 1.45;
}

.developed-script-card section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(33,33,33,.74);
}

.developed-script-card h4 {
  margin: 0 0 10px;
  font-size: 17px;
}

.developed-script-card p,
.developed-script-card li {
  color: #dedede;
  font-size: 15px;
  line-height: 1.55;
}

.developed-script-card ol {
  margin: 0;
  padding-left: 20px;
}

.script-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.script-chip-list span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,0,51,.14);
  color: #ffced6;
  font-size: 13px;
  font-weight: 850;
}

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

.script-delivery-grid div {
  min-width: 0;
}

.script-loading {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: #fff;
  font-weight: 850;
}

.editor-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.editor-panel .panel-head {
  padding: 18px 18px 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,0,51,.12), rgba(24,24,24,.95));
}

.open-editor {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s;
}
.open-editor:hover { background: var(--red-2); }

.open-editor--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.open-editor--ghost:hover { background: var(--surface-2); }

.editor-offline-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 420px;
  text-align: center;
  color: var(--muted);
}

.editor-offline-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  margin-bottom: 4px;
}

.editor-offline-state strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.editor-offline-state p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 340px;
}

.editor-offline-state code {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background: #0d0d0d;
  border: 1px solid var(--line);
  color: #a5f3a5;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  letter-spacing: .02em;
}

.editor-offline-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.editor-panel iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 620px;
  border: 0;
  background: #0f0f0f;
}

body.editor-view-active .editor-panel {
  min-height: 0;
}

body.editor-view-active .editor-panel iframe {
  height: 100%;
  min-height: 0;
}

.idea-card h3 {
  margin: 0;
  font-size: 18px;
}

.idea-card p {
  margin: 0;
  color: #d0d0d0;
}

.idea-card ol {
  margin: 0;
  padding-left: 18px;
  color: #d8d8d8;
}

.copy-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #111;
  color: var(--text);
  font-weight: 800;
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .grid.two, .grid.three, .metric-grid, .hero, .idea-form, .post-studio, .composer-grid, .image-lab, .analytics-board, .channel-brief, .channel-overview, .period-board, .action-grid, .overview-video-strip, .overview-comment-strip, .comment-list, .script-delivery-grid, .clip-upload-panel, .clip-result-card, .publish-clip-card, .subtitle-editor { grid-template-columns: 1fr; }
  .subtitle-field.wide { grid-column: auto; }
  .clips-topline { display: grid; }
  .clip-projects-head { flex-wrap: wrap; }
  .clip-insights-row { flex-wrap: wrap; }
  .clip-phone { width: min(280px, 100%); justify-self: center; }
  .channel-overview { grid-template-areas: "summary" "side" "videos" "comments"; }
  .channel-side { position: static; }
  .channel-summary, .recent-panel { grid-column: auto; grid-row: auto; }
  .analytics-card.wide { grid-column: auto; }
  .editor-panel iframe { height: 720px; }

  body.editor-view-active {
    overflow: auto;
  }

  body.editor-view-active .main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  body.editor-view-active .view[data-view="editor"] {
    height: auto;
  }

  body.editor-view-active .editor-panel {
    height: min(78vh, 760px);
  }

  body.editor-view-active .editor-panel iframe {
    height: 100%;
  }
}

/* ── Platform config button ── */
.platform-config-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  flex-shrink: 0;
}
.clip-platform-row:hover .platform-config-btn { opacity: 1; }
.platform-config-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Social Config Modal ── */
.social-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.social-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
}

.social-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 16px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  overflow: hidden;
}

.social-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.social-modal-platform {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}

.social-modal-header h2 {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.social-modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.social-modal-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.social-modal-desc {
  margin: 0;
  padding: 12px 20px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.social-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
}

.social-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.social-field span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.social-field input {
  height: 38px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #fff;
  padding: 0 12px;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  transition: border-color .12s;
}
.social-field input:focus { outline: none; border-color: rgba(255,255,255,.28); }

.social-field-link {
  font-size: 11px;
  color: var(--blue);
  text-decoration: none;
  margin-top: 2px;
}
.social-field-link:hover { text-decoration: underline; }

.social-modal-status {
  margin: 0 20px 4px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.social-modal-status--ok   { background: rgba(49,209,88,.12); color: #31d158; border: 1px solid rgba(49,209,88,.2); }
.social-modal-status--warn { background: rgba(255,204,77,.10); color: var(--amber); border: 1px solid rgba(255,204,77,.2); }

.social-modal-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.social-modal-cancel {
  flex: 1;
  height: 40px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.social-modal-cancel:hover { background: rgba(255,255,255,.06); color: #fff; }

.social-modal-save {
  flex: 2;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: opacity .12s;
}
.social-modal-save:hover { opacity: .88; }
.social-modal-save:disabled { opacity: .5; cursor: wait; }

.social-field-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}


/* -- Transcrições ------------------------------------------- */
.transcripts-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.transcript-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 20px;
}
.transcript-thumb {
  width: 140px;
  height: 79px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}
.transcript-card-body { flex: 1; min-width: 0; }
.transcript-card-title { font-size: 14px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.transcript-card-meta { font-size: 11px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.transcript-card-actions { display: flex; gap: 8px; }
.transcript-detail-panel { margin-top: 20px; }
.transcript-text { margin-top: 16px; max-height: 520px; overflow-y: auto; padding-right: 8px; }
.transcript-segment { display: flex; gap: 14px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.transcript-segment:last-child { border-bottom: none; }
.transcript-time { min-width: 38px; font-size: 11px; color: var(--muted); font-family: monospace; padding-top: 2px; flex-shrink: 0; }
.transcript-segment p { margin: 0; font-size: 13px; line-height: 1.65; }

/* -- Transcript overrides -- */
.transcript-card-actions .ghost-button,
#transcriptRefreshBtn,
#transcriptDetailClose {
  width: auto;
  padding: 0 18px;
  font-size: 12px;
  min-height: 34px;
}
.transcript-card-actions .clip-primary,
#transcriptDetailPDF {
  padding: 0 18px;
  min-height: 34px;
  font-size: 12px;
}
.transcript-card {
  align-items: center;
}
.transcript-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.transcript-card-meta {
  margin-bottom: 10px;
}

/* ── Dark Channel Pipeline ──────────────────────────────────── */

.pipeline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
}

.pipeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pipeline-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pipeline-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #e11d48;
  background: rgba(225,29,72,.12);
  border: 1px solid rgba(225,29,72,.25);
  border-radius: 4px;
  padding: 2px 8px;
  width: fit-content;
  margin-bottom: 4px;
}

.pipeline-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.pipeline-subtitle {
  font-size: 13px;
  opacity: .6;
  margin: 0;
}

.pipeline-run-all-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e11d48;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, opacity .15s;
  flex-shrink: 0;
}
.pipeline-run-all-btn:hover { background: #be123c; }
.pipeline-run-all-btn:disabled { opacity: .5; cursor: not-allowed; }

.pipeline-agent-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
}

.pipeline-agent-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #1a1a1a;
}

.pipeline-agent-num {
  font-size: 28px;
  font-weight: 800;
  color: #333;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-top: 2px;
}

.pipeline-agent-info {
  flex: 1;
  min-width: 0;
}

.pipeline-agent-info h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
}

.pipeline-agent-info p {
  font-size: 12px;
  opacity: .55;
  margin: 0;
}

.pipeline-agent-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-size: 12px;
  opacity: .8;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .2s;
}
.status-dot.idle { background: #333; }
.status-dot.running { background: #f59e0b; animation: pulse-dot 1s infinite; }
.status-dot.done { background: #22c55e; }
.status-dot.error { background: #ef4444; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.pipeline-agent-config {
  padding: 14px 20px;
  border-bottom: 1px solid #1a1a1a;
}

.pipeline-config-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.pipeline-config-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pipeline-config-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
}

.niche-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.niche-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  transition: all .15s;
}
.niche-chip.active {
  background: rgba(225,29,72,.15);
  border-color: rgba(225,29,72,.4);
  color: #f43f5e;
}
.niche-chip:hover:not(.active) { border-color: #444; color: #ccc; }

.ghost-select {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #fff;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.ghost-select:focus { border-color: #e11d48; }

.ghost-input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #fff;
  padding: 7px 12px;
  font-size: 12px;
  outline: none;
  width: 100%;
}
.ghost-input::placeholder { opacity: .4; }
.ghost-input:focus { border-color: #e11d48; }

.pipeline-agent-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #e11d48;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
  height: 34px;
}
.pipeline-agent-btn:hover { background: #be123c; }
.pipeline-agent-btn:disabled { opacity: .45; cursor: not-allowed; }
.pipeline-agent-btn.ghost {
  background: transparent;
  border: 1px solid #333;
  color: #ccc;
}
.pipeline-agent-btn.ghost:hover { background: #1a1a1a; color: #fff; }

.pipeline-agent-results {
  padding: 16px 20px;
}

.pipeline-results-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pipeline-result-tag {
  font-size: 11px;
  font-weight: 600;
  background: rgba(225,29,72,.12);
  border: 1px solid rgba(225,29,72,.2);
  color: #f43f5e;
  border-radius: 4px;
  padding: 2px 8px;
}

.pipeline-result-meta {
  font-size: 11px;
  opacity: .45;
}

.pipeline-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #1e1e1e;
}

.pipeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pipeline-table th {
  background: #0d0d0d;
  color: #666;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #1e1e1e;
  white-space: nowrap;
}

.pipeline-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #131313;
  vertical-align: middle;
  max-width: 280px;
}

.pipeline-table tr:last-child td { border-bottom: none; }
.pipeline-table tr:hover td { background: #0d0d0d; }

.pipeline-video-link {
  color: #e2e2e2;
  text-decoration: none;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pipeline-video-link:hover { color: #f43f5e; }

.niche-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #1e1e1e;
  color: #aaa;
  white-space: nowrap;
}

.obs-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.obs-tag.obs-viral { background: rgba(225,29,72,.15); color: #f43f5e; }
.obs-tag.obs-ótimo-desempenho { background: rgba(34,197,94,.12); color: #4ade80; }
.obs-tag.obs-bom-desempenho { background: rgba(234,179,8,.12); color: #facc15; }
.obs-tag.obs-em-crescimento { background: #1e1e1e; color: #888; }

.pipeline-extract-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #999;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.pipeline-extract-btn:hover { border-color: #e11d48; color: #f43f5e; }
.pipeline-extract-btn:disabled { opacity: .4; cursor: not-allowed; }

.pipeline-extraction-progress {
  padding: 12px 20px;
  border-bottom: 1px solid #1a1a1a;
}

.pipeline-progress-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pipeline-progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: .8;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.progress-dot.pending { background: #333; }
.progress-dot.running { background: #f59e0b; animation: pulse-dot 1s infinite; }
.progress-dot.done { background: #22c55e; }
.progress-dot.error { background: #ef4444; }

.progress-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.pipeline-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-transcript-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0d0d0d;
  border-radius: 8px;
  border: 1px solid #1a1a1a;
}

.pipeline-transcript-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pipeline-transcript-item-body strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipeline-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.pipeline-connector-line {
  width: 2px;
  height: 32px;
  background: linear-gradient(to bottom, #1e1e1e, #333, #1e1e1e);
  border-radius: 2px;
}

/* Agente 3 — Ideias */
.pipeline-ideas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pipeline-idea-card {
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.pipeline-idea-card:hover { border-color: #2a2a2a; }

.pipeline-idea-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.pipeline-idea-num {
  font-size: 22px;
  font-weight: 800;
  color: #222;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.pipeline-idea-body {
  flex: 1;
  min-width: 0;
}

.pipeline-idea-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.4;
}

.pipeline-idea-hook {
  font-size: 12px;
  opacity: .6;
  margin: 0 0 8px;
  line-height: 1.45;
}

.pipeline-idea-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pipeline-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #1e1e1e;
  color: #888;
}
.pipeline-tag.potential-alto { background: rgba(225,29,72,.12); color: #f43f5e; }
.pipeline-tag.potential-medioalto { background: rgba(234,179,8,.12); color: #facc15; }
.pipeline-tag.potential-medio { background: #1a1a1a; color: #888; }

.pipeline-idea-expand {
  background: transparent;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: transform .2s, color .15s;
  display: flex;
  align-items: center;
}
.pipeline-idea-expand:hover { color: #e11d48; }

.pipeline-idea-detail {
  padding: 0 16px 16px;
  border-top: 1px solid #151515;
}

.pipeline-idea-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #151515;
  margin-bottom: 12px;
}

.pipeline-idea-meta-grid > div > strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .4;
  margin-bottom: 4px;
}

.pipeline-idea-meta-grid > div > p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.pipeline-roteiro {
  margin-bottom: 12px;
}

.pipeline-roteiro strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .4;
  margin-bottom: 6px;
}

.pipeline-roteiro ol,
.pipeline-roteiro ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pipeline-roteiro li {
  font-size: 12px;
  line-height: 1.5;
}

.pipeline-idea-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.pipeline-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .35;
}
.pipeline-section-divider::before,
.pipeline-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #1e1e1e;
}

/* ═══════════════════════════════════════════════════════════
   CENTRAL IA + PRODUÇÃO + COMMAND BAR + VISUAL UPGRADES
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Tokens adicionais ── */
:root {
  --neon: #00d4ff;
  --violet: #8b5cf6;
  --glow-neon: 0 0 14px rgba(0,212,255,.3), 0 0 36px rgba(0,212,255,.12);
  --glow-violet: 0 0 14px rgba(139,92,246,.3);
}

/* ── Animações ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,.15); }
  50%       { box-shadow: 0 0 22px rgba(0,212,255,.4); }
}

/* ── Skeleton ── */
.skeleton {
  border-radius: 6px;
  background: var(--surface-2);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton--text { width: 100%; height: 13px; margin-bottom: 8px; display: block; }

/* ── Sidebar glow on active ── */
.nav button { transition: background 120ms, color 120ms, box-shadow 180ms; }
.nav button.active { box-shadow: inset 3px 0 0 var(--red), 0 0 18px rgba(255,0,51,.08); }

.nav button[data-view-target="channel"],
.nav button[data-view-target="ideas"],
.nav button[data-view-target="transcripts"],
.nav button[data-view-target="pipeline"],
.nav button[data-view-target="central-ia"] {
  display: none;
}

.view[data-view="dashboard"] > .hero,
.view[data-view="dashboard"] > .metric-grid,
.view[data-view="dashboard"] > .advice-panel {
  display: none;
}

.content-pipeline-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding: 28px 0 26px;
  border-bottom: 1px solid var(--line);
}

.content-pipeline-hero h1 {
  max-width: 860px;
  margin: 6px 0 10px;
  font-size: clamp(40px, 5vw, 78px);
  line-height: .92;
  letter-spacing: 0;
}

.pipeline-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 10px;
  min-width: 300px;
}

.content-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.agent-stage-card,
.pipeline-routing article {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  padding: 20px;
  min-height: 260px;
}

.stage-kicker {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,0,51,.16);
  color: #ffedf1;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-stage-card h2,
.pipeline-routing h2 {
  margin: 14px 0 8px;
  font-size: 24px;
  line-height: 1.05;
}

.agent-stage-card p,
.pipeline-routing p,
.pipeline-routing li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.agent-deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.agent-deliverables span {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(62,166,255,.12);
  color: #dcefff;
  border: 1px solid rgba(62,166,255,.22);
  font-size: 12px;
  font-weight: 800;
}

.agent-stage-card strong {
  display: block;
  margin-top: auto;
  color: #fff;
  font-size: 12px;
  word-break: break-word;
}

.agent-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.agent-run-btn {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.agent-run-btn:disabled {
  cursor: wait;
  opacity: .6;
}

.agent-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-status--running,
.agent-status--queued,
.agent-status--waiting_codex {
  color: #9ed5ff;
}

.agent-status--completed {
  color: #8ff0b0;
}

.agent-status--failed {
  color: #ff8aa0;
}

.agent-history-panel {
  display: grid;
  grid-template-columns: minmax(240px, .36fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  padding: 20px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
}

.agent-history-panel h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.agent-history-panel p,
.muted {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.agent-history-list {
  display: grid;
  gap: 10px;
}

.agent-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
}

.agent-history-item strong,
.agent-history-item span {
  display: block;
}

.agent-history-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.agent-result-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.agent-result-links a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  background: rgba(62,166,255,.18);
  border: 1px solid rgba(62,166,255,.24);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

.agent-result-links em {
  color: #ff8aa0;
  font-style: normal;
  font-size: 12px;
}

.pipeline-routing {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  margin-top: 16px;
}

.pipeline-routing article {
  min-height: 0;
}

.pipeline-routing ol {
  margin: 12px 0 0 20px;
  padding: 0;
}

@media (max-width: 1080px) {
  .content-pipeline-hero,
  .content-stage-grid,
  .agent-history-panel,
  .pipeline-routing {
    grid-template-columns: 1fr;
  }

  .pipeline-quick-actions {
    min-width: 0;
  }
}

/* ── Command Bar ── */
.cmd-bar {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 72px;
}
.cmd-bar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
}
.cmd-bar-box {
  position: relative;
  width: min(580px, calc(100vw - 32px));
  background: #131313;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  box-shadow: 0 32px 100px rgba(0,0,0,.8), var(--glow-neon);
  overflow: hidden;
  animation: fade-in-up .14s ease;
}
.cmd-bar-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #1e1e1e;
}
.cmd-bar-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.cmd-bar-search input::placeholder { color: #555; }
.cmd-bar-search kbd {
  padding: 3px 8px;
  border: 1px solid #333;
  border-radius: 6px;
  color: #555;
  font-size: 11px;
  font-family: inherit;
  background: #1a1a1a;
  white-space: nowrap;
}
.cmd-bar-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 380px;
  overflow-y: auto;
}
.cmd-bar-group {
  padding: 8px 18px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #444;
}
.cmd-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  transition: background 80ms;
  border-radius: 0;
}
.cmd-bar-item:hover,
.cmd-bar-item--active {
  background: #1e1e1e;
  color: var(--neon);
}
.cmd-bar-icon { width: 18px; text-align: center; color: #444; font-size: 11px; }
.cmd-bar-item--active .cmd-bar-icon { color: var(--neon); }
.cmd-bar-footer {
  display: flex;
  gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid #1a1a1a;
  font-size: 11px;
  color: #444;
}
.cmd-bar-footer kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  font-family: inherit;
  background: #181818;
  color: #666;
  font-size: 10px;
  margin-right: 3px;
}

/* ── Central IA ── */
.ia-input-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.ia-input-bar input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
}
.ia-input-bar input:focus {
  border-color: var(--neon);
  box-shadow: var(--glow-neon);
}
.ia-run-all-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--neon) 0%, var(--violet) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 150ms, transform 100ms;
  flex-shrink: 0;
}
.ia-run-all-btn:hover { opacity: .88; transform: translateY(-1px); }
.ia-run-all-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ia-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.ia-tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fade-in-up .2s ease;
}
.ia-tool-card--wide { grid-column: 1 / -1; }
.ia-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
  font-family: inherit;
}
.ia-tool-btn:hover { background: var(--surface-3); border-color: var(--neon); box-shadow: var(--glow-neon); }
.ia-result-box {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid #1e1e1e;
  font-size: 13px;
  line-height: 1.65;
  min-height: 90px;
  animation: fade-in-up .18s ease;
  transition: border-color 200ms;
}
.ia-result-box:not(.ia-result-box--empty) { border-color: #2a2a2a; }
.ia-result-box--empty { color: #444; font-style: italic; }
.ia-result-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
  line-height: 1.5;
}
.ia-result-item:last-child { border-bottom: none; }
.ia-result-item strong { display: block; font-size: 13px; margin-bottom: 3px; }
.ia-copy-btn {
  background: transparent;
  border: none;
  color: #444;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 120ms;
}
.ia-copy-btn:hover { color: var(--neon); }
.ia-ai-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #1e1e1e;
  color: #555;
}
.ia-ai-badge--ai {
  background: rgba(0,212,255,.12);
  color: var(--neon);
  border: 1px solid rgba(0,212,255,.2);
}

/* ── Produção Kanban ── */
.producao-board {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 24px;
  min-height: 520px;
  align-items: flex-start;
  scrollbar-width: thin;
}
.producao-board::-webkit-scrollbar { height: 6px; }
.producao-board::-webkit-scrollbar-track { background: transparent; }
.producao-board::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
.kanban-col {
  flex-shrink: 0;
  width: 172px;
  background: var(--surface);
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 150ms;
}
.kanban-col--done {
  border-color: rgba(49,209,88,.3);
  background: rgba(49,209,88,.04);
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid #1a1a1a;
}
.kanban-stage-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #555;
}
.kanban-col--done .kanban-stage-label { color: var(--green); }
.kanban-count {
  font-size: 10px;
  font-weight: 700;
  color: #444;
  background: #1a1a1a;
  border-radius: 999px;
  padding: 1px 7px;
}
.kanban-cards {
  padding: 8px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background 160ms;
}
.kanban-drop-active { background: rgba(0,212,255,.06); }
.kanban-card {
  background: var(--surface-2);
  border: 1px solid #242424;
  border-radius: 8px;
  padding: 10px;
  cursor: grab;
  transition: box-shadow 150ms, border-color 150ms, transform 120ms;
  animation: fade-in-up .15s ease;
  user-select: none;
}
.kanban-card:hover { border-color: #383838; box-shadow: 0 4px 16px rgba(0,0,0,.4); transform: translateY(-1px); }
.kanban-card--dragging { opacity: .4; cursor: grabbing; transform: rotate(1deg); }
.kanban-card-title { font-size: 12px; font-weight: 600; line-height: 1.4; }
.kanban-card-note { font-size: 11px; color: #555; margin-top: 4px; line-height: 1.4; }
.kanban-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.kanban-card-date { font-size: 10px; color: #444; }
.kanban-card-del {
  border: none;
  background: transparent;
  color: #444;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 120ms, background 120ms;
  line-height: 1;
}
.kanban-card-del:hover { color: var(--red); background: rgba(255,0,51,.1); }