/* ==========================================================================
   ViralCore — workspace (dashboard)
   Loaded after glass.css; adds the visual-first components and trims the shell.
   ========================================================================== */

/* ------------------------------------------------------------------- shell */
.app { grid-template-columns: 236px 1fr; gap: 16px; padding: 16px; }
.grid.two { align-items: start; }
.sidebar { gap: 18px; padding: 16px 12px; }
.nav { gap: 2px; }
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 0; }
.nav-group > span {
  display: block; padding: 0 10px 6px; font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.nav button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 0.86rem; color: var(--muted); border: 1px solid transparent; background: none;
  width: 100%; cursor: pointer; text-align: left; transition: background .18s, color .18s;
}
.nav button.active { color: var(--text); background: var(--panel-2); border-color: var(--stroke-soft); }

.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 12px;
  border: 1px solid var(--stroke-soft); background: var(--panel);
}
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; color: var(--sig-ink); background: var(--sig);
}
.user-chip div { min-width: 0; display: grid; }
.user-chip b { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip small { font-size: 0.68rem; color: var(--faint); }
.user-chip .icon-btn { margin-left: auto; }
.icon-btn.sm { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ stats */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  position: relative; overflow: hidden; padding: 16px 16px 12px; border-radius: 18px;
  border: 1px solid var(--stroke-soft); background: var(--panel);
  display: grid; gap: 6px;
}
.stat .top { display: flex; align-items: center; justify-content: space-between; }
.stat .lbl { font-size: 0.74rem; color: var(--muted); }
.stat .ico { width: 26px; height: 26px; color: var(--sig-text); opacity: .8; }
.stat .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.stat .v { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.stat .delta { font-size: 0.72rem; font-weight: 600; color: var(--good); }
.stat .delta.down { color: var(--bad); }
.stat .spark-wrap { margin-top: 4px; height: 34px; }
.spark-svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------- pipeline */
.stage-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.stage-col {
  position: relative; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--stroke-soft);
  background: var(--panel); display: grid; gap: 8px; cursor: pointer; transition: border-color .2s, transform .2s var(--ease);
}
.stage-col:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--sig) 34%, transparent); }
.stage-col .n { font-size: 0.66rem; color: var(--faint); letter-spacing: .1em; }
.stage-col .name { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 560; }
.stage-col .name svg { width: 15px; height: 15px; stroke: var(--sig-text); fill: none; stroke-width: 1.7; }
.stage-col .count { font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; }
.stage-col .count small { font-size: .68rem; font-weight: 500; color: var(--faint); margin-left: 4px; }
.stage-col .track { height: 4px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.stage-col .track i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--sig), var(--sig-2)); }

/* ------------------------------------------------------------------- bars */
.bars { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.bar-label { font-size: 0.78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1; }
.bar-track { grid-column: 1; height: 8px; border-radius: 6px; background: var(--inset); overflow: hidden; }
.bar-track i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--sig), color-mix(in oklab, var(--accent) 55%, var(--sig)));
  animation: grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes grow { from { width: 0 !important; } }
.bar-val { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bars.compact .bar-row { grid-template-columns: minmax(0, 1fr) 48px; }

/* -------------------------------------------------------------- calendar */
.heat { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 6px; align-items: center; }
.heat .h { font-size: 0.66rem; color: var(--faint); text-align: center; letter-spacing: .06em; }
.heat .p { font-size: 0.7rem; color: var(--muted); }
.heat .cell {
  height: 26px; border-radius: 7px; border: 1px solid var(--stroke-soft);
  background: var(--inset); display: grid; place-items: center; font-size: 0.62rem; color: var(--faint);
}
.heat .cell.pub { background: color-mix(in oklab, var(--sig) 26%, transparent); border-color: color-mix(in oklab, var(--sig) 40%, transparent); color: var(--sig-ink); font-weight: 700; }
html[data-theme="dark"] .heat .cell.pub { color: #06251e; }
.heat .cell.wait { background: color-mix(in oklab, var(--warn) 18%, transparent); border-color: color-mix(in oklab, var(--warn) 38%, transparent); }
.heat .cell.sched { background: color-mix(in oklab, var(--accent) 20%, transparent); border-color: color-mix(in oklab, var(--accent) 34%, transparent); }

/* -------------------------------------------------------------- platform mix */
.mix { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-svg { width: 132px; height: 132px; flex: none; }
.legend { display: grid; gap: 8px; flex: 1; min-width: 150px; }
.legend span { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend b { margin-left: auto; color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ format cards */
.research-bar { display: flex; gap: 10px; align-items: center; }
.research-bar .glass-inset { display: flex; align-items: center; gap: 9px; padding: 0 12px; height: 42px; border-radius: 12px; }
.research-bar .glass-inset svg { width: 16px; height: 16px; color: var(--faint); }
.research-bar input { background: none; border: 0; color: var(--text); font: 500 0.9rem var(--font); width: 100%; outline: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--stroke-soft);
  background: var(--panel); color: var(--muted); font-size: 0.76rem; cursor: pointer; transition: color .2s, border-color .2s;
}
.chip.on { color: var(--text); border-color: color-mix(in oklab, var(--sig) 40%, transparent); background: color-mix(in oklab, var(--sig) 10%, transparent); }

.format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.format-card {
  padding: 16px; border-radius: 18px; border: 1px solid var(--stroke-soft);
  background: var(--panel);
  display: grid; gap: 12px; transition: border-color .2s, transform .2s var(--ease);
}
.format-card:hover { border-color: color-mix(in oklab, var(--sig) 30%, transparent); transform: translateY(-2px); }
.format-card .head { display: flex; align-items: flex-start; gap: 10px; }
.format-card .rank {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex: none;
  font-size: 0.7rem; font-weight: 700; color: var(--sig-ink); background: var(--sig);
}
.format-card h3 { font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.format-card .hook { color: var(--muted); font-size: 0.8rem; line-height: 1.45; font-style: italic; }
.format-card .meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.format-card .plat { display: flex; gap: 6px; }
.format-card .plat .plogo { width: 14px; height: 14px; color: var(--faint); }
.format-card .metrics { display: flex; gap: 14px; margin-left: auto; }
.format-card .metrics span { font-size: 0.7rem; color: var(--faint); }
.format-card .metrics b { display: block; font-size: 0.88rem; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.ring-score { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.ring-score svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-score b { position: relative; font-size: 0.68rem; font-weight: 700; }

/* ---------------------------------------------------------- post preview */
.post {
  border-radius: 16px; border: 1px solid var(--stroke-soft); overflow: hidden; background: var(--panel);
}
.post .ph { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.post .ph .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sig); color: var(--sig-ink); display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.post .ph b { font-size: 0.8rem; }
.post .ph small { display: block; font-size: 0.68rem; color: var(--faint); }
.post .ph .plogo { width: 15px; height: 15px; margin-left: auto; color: var(--muted); }
.post .art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.post .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post .art .play { position: absolute; inset: 0; display: grid; place-items: center; }
.post .art .play span { width: 46px; height: 46px; border-radius: 50%; background: rgba(6,9,15,.55); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; backdrop-filter: blur(4px); }
.post .art .play svg { width: 18px; height: 18px; fill: #fff; }
.post .body { padding: 13px; display: grid; gap: 8px; }
.post .body p { font-size: 0.84rem; line-height: 1.55; color: var(--text); }
.post .body .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post .body .tags span { font-size: 0.68rem; color: var(--sig-text); }
.post .foot { display: flex; gap: 14px; padding: 0 13px 13px; color: var(--faint); font-size: 0.7rem; }
.post .foot span { display: inline-flex; align-items: center; gap: 5px; }

.voice-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 0.72rem; border: 1px solid var(--stroke-soft); color: var(--muted);
}
.vchip.ok { color: var(--good); border-color: color-mix(in oklab, var(--good) 34%, transparent); background: color-mix(in oklab, var(--good) 10%, transparent); }
.vchip.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 34%, transparent); background: color-mix(in oklab, var(--bad) 10%, transparent); }

/* ----------------------------------------------------------------- scenes */
.scenes { display: grid; gap: 8px; }
.scene {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px;
  border-radius: 12px; border: 1px solid var(--stroke-soft); background: var(--panel);
}
.scene .t { font-size: 0.66rem; color: var(--sig-text); font-weight: 700; padding-top: 2px; }
.scene p { font-size: 0.8rem; line-height: 1.45; }
.scene small { display: block; margin-top: 3px; font-size: 0.7rem; color: var(--faint); }

.render-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.render-tile { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke-soft); background: var(--bg-1); }
.render-tile img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; opacity: .85; }
.render-tile .ov { position: absolute; inset: auto 0 0 0; padding: 8px; background: linear-gradient(0deg, rgba(4,6,12,.92), transparent); display: grid; gap: 6px; }
.render-tile .ov b { font-size: 0.7rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.render-tile .pill { position: absolute; top: 7px; left: 7px; font-size: 0.6rem; padding: 3px 7px; }
.render-tile .pill.warn { background: rgba(6,9,15,.7); }

/* ----------------------------------------------------------------- engage */
.engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.etch {
  padding: 14px; border-radius: 16px; border: 1px solid var(--stroke-soft);
  background: var(--panel); display: grid; gap: 10px;
}
.etch .who { display: flex; align-items: center; gap: 8px; }
.etch .who .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--stroke-soft); display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; color: var(--muted); }
.etch .who b { font-size: 0.74rem; }
.etch .who .plogo { width: 13px; height: 13px; margin-left: auto; color: var(--faint); }
.etch .q { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.etch .draft { font-size: 0.78rem; line-height: 1.45; padding: 9px 11px; border-radius: 10px; background: var(--inset); border: 1px dashed var(--stroke-soft); }
.etch .bar { display: flex; align-items: center; gap: 8px; }
.etch .bar .track { flex: 1; height: 4px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.etch .bar .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--sig)); }

.lead-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lead {
  padding: 14px; border-radius: 16px; border: 1px solid var(--stroke-soft);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, var(--panel)), var(--panel));
  display: grid; gap: 9px;
}
.lead .top { display: flex; align-items: center; gap: 8px; }
.lead .top b { font-size: 0.78rem; }
.lead .sig { display: flex; gap: 6px; flex-wrap: wrap; }
.lead .sig span { font-size: 0.64rem; padding: 3px 8px; border-radius: 999px; background: var(--inset); color: var(--muted); }
.lead p { font-size: 0.76rem; color: var(--muted); line-height: 1.45; }

/* -------------------------------------------------------------- approvals */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--stroke-soft); background: none;
  color: var(--muted); font-size: 0.78rem; cursor: pointer;
}
.tabs button.on { color: var(--text); background: var(--panel-2); border-color: var(--stroke); }
.approval-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.apcard {
  display: grid; grid-template-columns: 68px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: 16px; border: 1px solid var(--stroke-soft); background: var(--panel);
}
.apcard .thumb { width: 68px; height: 68px; border-radius: 11px; object-fit: cover; }
.apcard .thumb.alt { display: grid; place-items: center; background: var(--inset); color: var(--muted); }
.apcard .thumb.alt .plogo { width: 24px; height: 24px; }
.apcard b { font-size: 0.82rem; }
.apcard small { display: block; color: var(--faint); font-size: 0.7rem; margin-top: 3px; }
.apcard .acts { display: flex; gap: 6px; }
.apcard .acts .btn { height: 32px; padding: 0 12px; font-size: 0.76rem; }

/* --------------------------------------------------------------- settings */
.provider-grid { display: grid; gap: 8px; }
.provider {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--stroke-soft); background: var(--panel);
}
.provider .kind { font-size: 0.66rem; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.provider b { font-size: 0.84rem; font-weight: 600; }
.provider small { grid-column: 1; color: var(--muted); font-size: 0.74rem; }
.provider .state { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.provider .state.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }

.toggles { display: grid; gap: 8px; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--stroke-soft); background: var(--panel);
  font-size: 0.82rem;
}
.toggle-row small { display: block; color: var(--faint); font-size: 0.7rem; margin-top: 2px; }

.platform-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.plat {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--stroke-soft); background: var(--panel); font-size: 0.78rem; color: var(--muted);
}
.plat .plogo { width: 15px; height: 15px; }
.plat.region { color: var(--faint); }

/* ---------------------------------------------------------------- helpers */
.stack { display: grid; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.empty { padding: 18px; text-align: center; color: var(--faint); font-size: 0.82rem; }


/* ------------------------------------------------------------ extras */
.link-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.link-row input {
  flex: 1; height: 42px; padding: 0 13px; border-radius: 12px; outline: none;
  border: 1px solid var(--stroke-soft); background: var(--inset); color: var(--text);
  font: 500 0.86rem var(--font);
}
.link-row input:focus { border-color: color-mix(in oklab, var(--sig) 50%, transparent); }

.voice-profile { display: grid; gap: 10px; padding: 13px; border-radius: 14px; border: 1px solid var(--stroke-soft); background: var(--panel); }
.voice-profile h4 { margin: 0; font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.voice-profile .rowchips { display: flex; gap: 6px; flex-wrap: wrap; }
.voice-profile .rowchips span { font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; background: var(--inset); color: var(--muted); }
.voice-profile .rowchips span.ban { color: var(--bad); background: color-mix(in oklab, var(--bad) 10%, transparent); }

.stages-mini { display: flex; gap: 6px; flex-wrap: wrap; }
.stages-mini span {
  font-size: 0.68rem; padding: 5px 10px; border-radius: 999px; color: var(--muted);
  border: 1px solid var(--stroke-soft); background: var(--panel);
}
.stages-mini span b { color: var(--sig-text); font-weight: 600; }

.letterchip {
  width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center;
  font-size: 0.5rem; font-weight: 700; background: var(--inset); color: var(--faint); flex: none;
}


/* light theme: lift surfaces off the pale background */
html[data-theme=light] .stat,
html[data-theme=light] .format-card,
html[data-theme=light] .etch,
html[data-theme=light] .lead,
html[data-theme=light] .apcard,
html[data-theme=light] .provider,
html[data-theme=light] .stage-col,
html[data-theme=light] .toggle-row,
html[data-theme=light] .plat,
html[data-theme=light] .scene,
html[data-theme=light] .post,
html[data-theme=light] .voice-profile {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(16, 18, 28, 0.12);
}
html[data-theme=light] .bar-track,
html[data-theme=light] .scene small { color: #5a6178; }
html[data-theme=light] .bar-track { background: rgba(16, 18, 28, 0.07); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stage-strip { grid-template-columns: repeat(3, 1fr); }
  .format-grid, .approval-grid { grid-template-columns: 1fr; }
  .engage-grid, .lead-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; }
  .sidebar .nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
  .nav-group { flex: none; }
  .nav-group { margin: 0; display: flex; align-items: center; gap: 4px; }
  .nav-group > span { display: none; }
  .side-foot { flex-direction: row; align-items: center; gap: 10px; margin: 0; width: 100%; }
  .side-foot .ver { display: none; }
  .grid.two { grid-template-columns: 1fr; }
  .render-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .stage-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .engage-grid, .lead-grid { grid-template-columns: 1fr; }
  .render-grid { grid-template-columns: repeat(3, 1fr); }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .top-actions .search { display: none; }
  .heat { grid-template-columns: 34px repeat(7, 1fr); }
}