:root {
  --bad: #c02626;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1d1f20;
  --muted: #6b7177;
  --line: #e6e8eb;
  --orange: #f6821f;
  --orange-ink: #b45f0a;
  --tint: #fff6ec;
  --ok: #0a8a45;
  --warn: #b45309;
  --radius: 12px;
}
* { box-sizing: border-box; }
/* `hidden` must always win over the display:grid on .login/.shell below. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.muted { color: var(--muted); }
.err { color: #c02626; font-size: 13px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.01em; }
.logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--orange); color: #fff; font-weight: 800; font-size: 13px;
}
button {
  font: inherit; cursor: pointer; border: 1px solid var(--orange); background: var(--orange);
  color: #fff; padding: 8px 14px; border-radius: 9px; font-weight: 600;
}
button.ghost { background: #fff; color: var(--ink); border-color: var(--line); font-weight: 500; }
button.link { background: none; border: none; color: var(--orange-ink); padding: 0; font-weight: 500; }
button.danger { background: #fff; color: #c02626; border-color: #f0caca; }
button:disabled { opacity: 0.5; cursor: default; }
input, select, textarea {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--ink);
}
textarea { min-height: 72px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.field { margin: 0 0 12px; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; width: 340px; display: grid; gap: 12px;
}

/* Shell */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side {
  background: var(--panel); border-right: 1px solid var(--line); padding: 20px 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.side nav { display: grid; gap: 2px; }
.side nav button {
  background: none; border: none; color: var(--ink); text-align: left; padding: 9px 11px;
  border-radius: 8px; font-weight: 500;
}
.side nav button:hover { background: var(--bg); }
.side nav button.active { background: var(--tint); color: var(--orange-ink); font-weight: 600; }
.side-foot { margin-top: auto; display: grid; gap: 6px; font-size: 13px; }
.main { padding: 26px 30px; overflow-x: auto; }

.head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; gap: 16px; }
.head h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .shell { grid-template-columns: 1fr; } .side { flex-direction: row; flex-wrap: wrap; align-items: center; } .side nav { grid-auto-flow: column; } .side-foot { margin: 0; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack > .card { margin-top: 0; }
.stack .grid2 .card { height: 100%; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 10px; font-size: 15px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: none; }
.row .t { font-weight: 600; }
.row .s { font-size: 12.5px; color: var(--muted); }

.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pill.ok { background: #e7f6ee; color: var(--ok); }
.pill.warn { background: #fdf0e0; color: var(--warn); }
.pill.draft { background: #eef1f4; color: #5a6472; }

.list-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.list-item + .list-item { margin-top: 8px; }
.list-item.sel { border-color: var(--orange); background: var(--tint); }

.empty { color: var(--muted); font-size: 14px; padding: 18px 0; text-align: center; }
.inline { display: flex; gap: 8px; align-items: center; }
.right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.flags { display: grid; gap: 6px; }
.flag { background: #fdf0e0; border: 1px solid #f6dcbb; color: var(--warn); padding: 8px 10px; border-radius: 8px; font-size: 13px; }

/* Project-centric shell */
.small { font-size: 13px; padding: 6px 10px; }
.side-section { display: grid; gap: 6px; }
.side-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: #c8ccd0; flex: none; }
.proj-opt.sel .pdot, .proj-cur .pdot { background: var(--orange); }
.side-link { background: none; border: none; color: var(--ink); text-align: left; padding: 8px 10px; border-radius: 8px; font-weight: 500; width: 100%; }
.side-link:hover { background: var(--bg); }
.side-link.active { background: var(--tint); color: var(--orange-ink); font-weight: 600; }

.ws-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.ws-head h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.ws-head .s { color: var(--muted); font-size: 13px; }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 12px; border-radius: 0; font-weight: 600; text-transform: capitalize; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--orange-ink); border-bottom-color: var(--orange); }
.metrics { display: flex; gap: 22px; }
.metrics .k { font-size: 22px; font-weight: 700; }
.metrics .s { color: var(--muted); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #fff; border: 1px solid var(--line); color: var(--muted); padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.chip.on { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); font-weight: 600; }
/* Google-Ads-style stats table */
.tablewrap { overflow-x: auto; padding: 0; }
table.stats { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.stats th, table.stats td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.stats thead th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbfc; position: sticky; top: 0; }
table.stats th.num, table.stats td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.stats td.name { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.stats td.muted { color: var(--muted); }
table.stats th.chk, table.stats td.chk { width: 34px; text-align: center; padding-right: 0; }
table.stats td.rowmenu { width: 40px; text-align: center; padding: 4px; }
table.stats tbody tr:hover { background: #fafbfc; }
table.stats tbody tr.sel { background: var(--tint); }
table.stats td.empty { text-align: center; color: var(--muted); padding: 22px; }
/* Consistent height so selecting rows never shifts the table down. */
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; min-height: 44px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; }
.bulkbar.hint { color: var(--muted); background: var(--bg); }
#bulkslot:empty { display: none; }
.bulkbar .sel-count { font-weight: 700; margin-right: 4px; }
@media (max-width: 640px) { table.stats td.name { max-width: 140px; } }

.chatlog { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.bubble { padding: 8px 12px; border-radius: 12px; max-width: 80%; white-space: pre-wrap; font-size: 14px; }
.bubble.user { align-self: flex-end; background: var(--tint); border: 1px solid #f7dcbf; }
.bubble.agent { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
/* list rows (GoLogin-style) */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: none; }
.list-row .lead { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; background: none; border: none; text-align: left; cursor: pointer; color: var(--ink); padding: 0; }
.list-row button.lead:hover .row-title { color: var(--orange-ink); }
.grow { min-width: 0; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.acct-av { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }
.acct-av.sm { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
.meta { display: flex; gap: 6px; align-items: center; flex: none; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.badge.cur { background: #eef3ff; color: #3557b7; }
.badge.mgr { background: #fdf0e0; color: var(--warn); }

/* context menu */
.menu-wrap { position: relative; flex: none; }
.menu-btn { background: none; border: 1px solid transparent; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.menu-btn:hover { background: var(--bg); color: var(--ink); }
.menu { position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(20, 24, 28, 0.18); min-width: 176px; padding: 5px; z-index: 200; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink); padding: 8px 10px; border-radius: 7px; font-weight: 500; font-size: 14px; }
.menu button:hover { background: var(--bg); }
.menu button.danger { color: #c02626; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(20, 24, 28, 0.4); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: #fff; border-radius: 16px; padding: 22px; max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.detail { display: grid; gap: 2px; }
.drow { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.drow:first-child { border-top: none; }
.dk { color: var(--muted); font-size: 13.5px; }
.dv { font-weight: 600; text-align: right; word-break: break-word; }

/* mobile */
@media (max-width: 640px) {
  .shell { grid-template-columns: 1fr; }
  .side { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 14px; border-right: none; border-bottom: 1px solid var(--line); }
  .side-section { display: block; }
  .side-head { margin-bottom: 4px; }
  .side nav, .side-section:last-of-type { display: flex; gap: 6px; flex-wrap: wrap; }
  .side-foot { margin-top: 4px; flex-direction: row; align-items: center; gap: 12px; }
  .main { padding: 18px 14px; overflow-x: hidden; }
  .meta-hide { display: none; }
  .card { padding: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .ws-head h1 { font-size: 19px; }
  .inline { flex-wrap: wrap; }
  input, select, textarea { width: 100%; }
  .drow { flex-direction: column; gap: 2px; }
  .dv { text-align: left; }
  .modal { padding: 18px; border-radius: 14px; }
  .menu { min-width: 150px; }
}

/* Auto-audit panel (Copilot tab) */
.score { display: inline-flex; align-items: baseline; gap: 1px; min-width: 58px; justify-content: center; font-size: 22px; font-weight: 800; padding: 8px 10px; border-radius: 12px; }
.score.good { background: #e7f6ee; color: var(--ok); }
.score.warn { background: #fdf0e0; color: var(--warn); }
.score.bad { background: #fdecec; color: #c0392b; }
.findings { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.finding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.finding .t { font-size: 13.5px; font-weight: 600; }
.finding .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sev { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; margin-top: 2px; }
.sev.critical { background: #fdecec; color: #c0392b; }
.sev.warning { background: #fdf0e0; color: var(--warn); }
.sev.info { background: #eef1f4; color: #5a6472; }

/* Hands-free voice toggle active state */
#chatHands.on { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); }

/* Best-practice rule presets */

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 6px; }
.crumbs .clink { color: var(--muted); cursor: pointer; }
.crumbs .clink:hover { color: var(--orange-ink); text-decoration: underline; }
.crumbs .ccur { color: var(--ink); font-weight: 600; }
.crumbs .csep { color: var(--line); }

/* Creative studio recent grid */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; align-items: start; }

/* Creative studio: platform segmented switch + favorite star */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.seg-btn { background: none; border: none; padding: 6px 14px; border-radius: 7px; font-weight: 600; color: var(--muted); }
.seg-btn.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.seg-btn[disabled] { opacity: .55; cursor: not-allowed; }
.vcard { padding: 12px; }

/* Free stock media grid */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.stock-cell { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.stock-cell img { width: 100%; height: 110px; object-fit: cover; display: block; }
.stock-cell .stock-save { position: absolute; right: 6px; bottom: 6px; opacity: 0; transition: opacity .12s; }
.stock-cell:hover .stock-save { opacity: 1; }
.stock-badge { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }

/* composer background photo selection */
.stock-cell.sel { outline: 3px solid var(--orange); outline-offset: -3px; }

/* Google sign-in button + divider on the login card */
.gbtn { width: 100%; background: #fff; color: #1d1f20; border: 1px solid var(--line); font-weight: 600; }
.gbtn:hover { background: var(--bg); }
.login-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 12px; margin: 2px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-divider span { padding: 0 10px; }

/* Reusable command / chat shell (Cursor-style) */
.cmdshell { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.cmd-log { height: 46vh; min-height: 300px; max-height: 620px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cmd-log:empty::before { content: 'Describe what you want. e.g. "bold dark banner, headline Clean your phone, orange CTA".'; color: var(--muted); font-size: 13px; }
.cmd-msg { font-size: 13.5px; line-height: 1.45; }
.cmd-msg.user { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); display: flex; gap: 8px; }
.cmd-msg.bot { color: var(--muted); white-space: pre-wrap; }
.cmd-prompt { color: var(--orange); font-weight: 700; }
.cmd-artifact { border-top: 1px dashed var(--line); padding-top: 10px; }
.cmd-input { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 8px 10px; background: var(--bg); }
.cmd-input .cmd-in { flex: 1; border: none; background: none; resize: none; font: inherit; padding: 4px 0; outline: none; max-height: 120px; }
.cmd-input .cmd-send { padding: 6px 14px; }

/* command shell: session header */

/* HTML5 studio: compact toolbar + taller chat + saved-banner thumbnails */
.cmdshell.tall .cmd-log { height: 54vh; max-height: 700px; }

/* Collapsible shell: a one-line teaser bar; the log + composer unfold on click. */
.cmd-cap { display: none; width: 100%; align-items: center; gap: 10px; padding: 11px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.cmd-cap:hover { border-color: var(--orange); color: var(--ink); }
.cmd-cap svg { width: 17px; height: 17px; flex: none; }
.cmd-cap .cap-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdshell.collapsible .cmd-cap { display: flex; }
.cmdshell.collapsible:not(.mini) .cap-chev { transform: rotate(180deg); }
.cmdshell.collapsible:not(.mini) .cmd-cap { margin-bottom: 10px; }
.cmdshell.collapsible.mini .cmd-log, .cmdshell.collapsible.mini .cmd-input { display: none !important; }

/* Campaigns daily board */
.board-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.board-filters .field { min-width: 140px; max-width: 240px; }
.kpi-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.kpi { flex: 1; min-width: 110px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.kpi-v { font-size: 18px; font-weight: 700; }
.kpi-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.board-wrap { overflow-x: auto; }
table.stats.board th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.stats.board td.bd-date { position: sticky; left: 0; background: var(--panel); font-weight: 600; white-space: nowrap; }
table.stats.board thead th:first-child { position: sticky; left: 0; z-index: 1; }
table.stats.board tfoot td { font-weight: 700; border-top: 2px solid var(--line); }


/* saved-creatives grid: cards align to the row top (no stacking margin) */
.lib-grid .list-item + .list-item { margin-top: 0; }

/* slideshow multi-image list */
.ss-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ss-item { display: flex; flex-direction: column; gap: 4px; width: 120px; }
.ss-item img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ss-item input { font-size: 11px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.ss-item [data-rm] { align-self: flex-end; font-size: 11px; }

/* collapsible "More tools" in the studio */
details.more { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 0 16px; }
details.more > summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--muted); list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '▸ '; }
details.more[open] > summary::before { content: '▾ '; }
details.more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
details.more .card { border: none; border-radius: 0; padding: 0 0 14px; }
details.more .card + .card { border-top: 1px solid var(--line); padding-top: 14px; }

/* keep chat (command-shell) media previews compact so they fit in the chat */
.cmd-artifact video, .cmd-artifact > img { max-height: 280px; max-width: 100%; width: auto; border-radius: 8px; }
.cmd-artifact .sp-video { display: flex; flex-direction: column; align-items: flex-start; }

/* accordions expand downward cleanly (no scroll-anchor jump) */
.main, .stack { overflow-anchor: none; }

/* ================= ChatGPT-style light, chat-centric theme ================= */
:root {
  --bg: #ffffff;
  --sidebar: #f9f9f9;
  --panel: #ffffff;
  --ink: #0d0d0d;
  --muted: #707079;
  --line: #e6e6e6;
  --hover: #ececec;
  --radius: 16px;
}
body { background: var(--bg); color: var(--ink); }

/* Sidebar */
.shell { grid-template-columns: 262px 1fr; }
.side { background: var(--sidebar); border-right: 1px solid #efefef; padding: 12px 10px; gap: 10px; }
.side .brand { padding: 6px 8px 2px; }
.side-section { gap: 3px; }
.side-head { padding: 10px 8px 2px; }
.side-link, .side nav button { border-radius: 10px; padding: 9px 10px; font-size: 14px; font-weight: 500; }
.side-link:hover, .side nav button:hover { background: var(--hover); }
.side-link.active, .side nav button.active { background: var(--hover); color: var(--ink); font-weight: 600; }

/* Buttons — rounded, restrained (orange stays our primary) */
button { border-radius: 12px; padding: 9px 15px; }
button.ghost:hover { background: var(--hover); }
button.small { border-radius: 10px; }

/* Inputs — rounded, soft focus */
input, select, textarea { border-radius: 12px; border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: none; border-color: #cfcfcf; box-shadow: 0 0 0 3px rgba(0,0,0,.03); }

/* Cards — softer */
.card { border-radius: 18px; border-color: var(--line); }

/* Tabs — segmented pill, like ChatGPT's top toggles */
.tabbar { border-bottom: none; gap: 4px; background: var(--sidebar); padding: 4px; border-radius: 12px; display: inline-flex; max-width: 100%; }
.tab { border-radius: 9px; padding: 6px 14px; text-transform: none; font-weight: 500; }
.tab:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.tab.active { background: var(--panel); color: var(--ink); border-bottom: none; box-shadow: 0 1px 2px rgba(0,0,0,.07); }

/* Roomier main + lighter headings */
.main { padding: 22px 26px 64px; }
.ws-head h1, .head h1 { font-size: 24px; font-weight: 600; }

/* ===== ChatGPT-style chat composer (command shell) — tick 2 ===== */
.cmdshell { border: none; background: transparent; overflow: visible; }
.cmd-log { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.cmd-log:empty { border-style: dashed; }
.cmd-input {
  border: 1px solid var(--line); border-radius: 26px; background: var(--panel);
  padding: 6px 6px 6px 18px; margin-top: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cmd-input:focus-within { border-color: #cfcfcf; box-shadow: 0 3px 16px rgba(0,0,0,.09); }
.cmd-input .cmd-prompt { display: none; }
.cmd-input .cmd-in { padding: 9px 0; max-height: 160px; }
.cmd-input .cmd-send {
  flex: none; width: 38px; height: 38px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; font-size: 0;
}
.cmd-input .cmd-send::before { content: '↑'; font-size: 19px; font-weight: 800; line-height: 1; }
.cmd-input .cmd-send:disabled { opacity: .35; }

/* Chat empty-state greeting (tick 3) */
.cmd-chip { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; }
.cmd-chip:hover { background: var(--hover); }

/* sidebar icons (tick 4) */
.side-link { display: flex; align-items: center; gap: 10px; }
.side-link svg { width: 17px; height: 17px; opacity: .72; flex: none; }
.side-link.active svg { opacity: 1; }

/* Login + final polish (tick 5) */
.login { background: var(--bg); }
.login-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 44px rgba(0,0,0,.06); padding: 32px; width: 360px; }
.login-card .brand { justify-content: center; font-size: 17px; }
.login-card .muted { text-align: center; margin: -2px 0 6px; }
.login-card input, .login-card > button, .login-divider + input { border-radius: 12px; }
.gbtn { border-radius: 12px; padding: 11px; }
.card h3 { font-weight: 600; }
.ws-head .s, .head .s { color: var(--muted); }

/* Connectors gallery + login title */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.conn-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.conn-card.off { opacity: .6; }
.conn-head { display: flex; align-items: center; gap: 10px; }
.conn-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 18px; border: 1px solid rgba(0,0,0,.08); }
.conn-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.conn-desc { font-size: 13px; color: var(--muted); flex: 1; }
.conn-foot { margin-top: 4px; }
.login-title { font-size: 22px; font-weight: 600; margin: 2px 0 0; text-align: center; letter-spacing: -.01em; }

/* Section landing: example starter cards for different businesses (tick 2) */

/* Sidebar chat history grouped by project (tick 3) */
.side { overflow: hidden; }
.chat-history { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--ink); text-align: left; padding: 7px 10px; border-radius: 9px; font-weight: 500; font-size: 13.5px; }
.chat-item:hover { background: var(--hover); }
.chat-item.sel { background: var(--hover); }
.chat-ico { flex: none; font-size: 13px; opacity: .85; }
.chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composer: project dropdown + attach (tick 4) */
.cmd-input { flex-direction: column; align-items: stretch; padding: 10px 14px; }
.cmd-tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cmd-tools .cmd-proj { width: auto; max-width: 190px; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--sidebar); border-color: var(--line); }
.cmd-tools .cmd-attach { background: none; border: 1px solid var(--line); color: var(--muted); width: 34px; height: 34px; padding: 0; border-radius: 999px; font-size: 15px; display: grid; place-items: center; }
.cmd-tools .cmd-attach:hover { background: var(--hover); }
.cmd-tools .cmd-send { margin-left: auto; }
.cmd-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cmd-att { display: inline-flex; align-items: center; gap: 6px; background: var(--sidebar); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px 4px 10px; font-size: 12px; }
.cmd-att button { background: none; border: none; color: var(--muted); padding: 0; font-size: 12px; cursor: pointer; }

/* Text chat variants (tick 5) */
.tx-var { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; background: #fff; }
.tx-var .t { font-weight: 600; }

/* Chat-centric section (Images model, tick 1) */
.studio-center { max-width: 760px; margin: 6px auto 0; }
.saved-wrap { max-width: 1120px; margin: 30px auto 0; }
.saved-h { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.cmd-tools .cmd-fmt { width: auto; max-width: 200px; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--sidebar); border-color: var(--line); }

/* Simplified composer: single-line auto-grow input + mic (tick 4 refinements) */
.cmd-input .cmd-in { min-height: 0; height: auto; resize: none; overflow-y: hidden; line-height: 1.45; padding: 8px 0; }
.cmd-tools .cmd-mic { background: none; border: 1px solid var(--line); color: var(--muted); width: 34px; height: 34px; padding: 0; border-radius: 999px; font-size: 14px; display: grid; place-items: center; }
.cmd-tools .cmd-mic:hover { background: var(--hover); }

/* Top-tier composer controls: clean SVG icons, one row, vertically centered */
.cmd-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cmd-input .cmd-attach, .cmd-input .cmd-mic { width: 36px; height: 36px; border: none; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; padding: 0; }
.cmd-input .cmd-attach:hover, .cmd-input .cmd-mic:hover { background: var(--hover); color: var(--ink); }
.cmd-input .cmd-attach svg, .cmd-input .cmd-mic svg { width: 18px; height: 18px; display: block; }
.cmd-tools .cmd-proj, .cmd-tools .cmd-fmt { height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 12px; font-size: 13px; color: var(--ink); max-width: 180px; }
.cmd-tools .cmd-proj:hover, .cmd-tools .cmd-fmt:hover { background: var(--hover); }
.cmd-input .cmd-send { margin-left: auto; width: 36px; height: 36px; padding: 0; border-radius: 999px; font-size: 0; display: grid; place-items: center; background: var(--orange); border: 1px solid var(--orange); }
.cmd-input .cmd-send::before { content: none; }
.cmd-input .cmd-send svg { width: 18px; height: 18px; color: #fff; display: block; }
.cmd-input .cmd-send:disabled { opacity: .4; }

/* Single-row composer with + menu (mic left of send) */
.cmd-input { position: relative; flex-direction: column; padding: 6px; }
.cmd-row { display: flex; align-items: center; gap: 4px; }
.cmd-row .cmd-in { flex: 1; min-height: 24px; height: auto; padding: 9px 8px; line-height: 1.4; }
.cmd-plus { flex: none; width: 36px; height: 36px; border: none; background: none; color: var(--muted); font-size: 24px; font-weight: 400; line-height: 1; border-radius: 999px; display: grid; place-items: center; padding: 0; }
.cmd-plus:hover { background: var(--hover); color: var(--ink); }
.cmd-row .cmd-mic, .cmd-row .cmd-send { flex: none; }
.cmd-plus-menu { position: absolute; bottom: calc(100% + 10px); left: 4px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 8px; min-width: 252px; z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.cmd-photo { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: none; color: var(--ink); padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.cmd-photo svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cmd-photo:hover { background: var(--hover); }
.pm-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.pm-field span { font-size: 13px; color: var(--muted); }
.pm-field select { width: auto; max-width: 150px; border-radius: 9px; padding: 6px 8px; font-size: 13px; }

/* ===== Sidebar: fixed header + scroll middle + fixed footer (own scroll) ===== */
.shell { height: 100vh; }
.main { overflow-y: auto; height: 100vh; }
.side { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding: 0; gap: 0; }
.side-header { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 14px; }
.side-header .brand { font-size: 15px; }
/* The brand slot is the Copilot entry now - the most-used door gets the
   biggest handle, ChatGPT-style. */
.side-copilot { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); padding: 6px 8px; border-radius: 10px; cursor: pointer; min-width: 0; }
.side-copilot svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.side-copilot:hover { background: var(--hover); }
.side-copilot.active { background: var(--hover); }
/* A long chat title must never widen the sidebar: the scroller clips X and
   every row is pinned to the column width, so ellipsis - not overflow - is
   what absorbs the length. Without this the folder's hover actions drift past
   the visible edge (inner width measured 577px vs 261 visible). */
.side-scroll { overflow-x: hidden; }
.proj-chats { min-width: 0; max-width: 100%; }
.chat-item { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

/* The fold under long chat lists. */
.chats-more { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.chats-more:hover { background: var(--hover); color: var(--ink); }
.side-header-actions { display: flex; gap: 2px; }
.side-icon { width: 32px; height: 32px; border: none; background: none; color: var(--muted); border-radius: 8px; display: grid; place-items: center; padding: 0; }
.side-icon:hover { background: var(--hover); color: var(--ink); }
.side-icon svg { width: 18px; height: 18px; }
.side-search { flex: none; padding: 0 10px 8px; }
.side-search input { border-radius: 999px; padding: 8px 12px; font-size: 13px; }
.side-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-history { flex: none; overflow: visible; }
.side-footer { flex: none; border-top: 1px solid #efefef; padding: 8px; }
.user-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 8px; border-radius: 12px; text-align: left; }
.user-btn:hover { background: var(--hover); }
.user-av { width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.user-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-tier { font-size: 12px; color: var(--muted); }
/* collapse */
.shell.collapsed { grid-template-columns: 0 1fr; }
.shell.collapsed .side { display: none; }

/* Centered platform switch + section title + composer chips */
.studio-top { display: flex; justify-content: center; padding: 12px 0 4px; }
.studio-title { text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 26px 0 16px; }
.cmd-below { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 4px 2px; }
.cmd-below:empty { display: none; }
.cmd-chip-b { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; }
.cmd-chip-b:hover { background: var(--hover); color: var(--ink); }
.cmd-chip-b svg { width: 15px; height: 15px; }

/* Fix collapsed sidebar: single column, main full-width */
.shell.collapsed { grid-template-columns: 1fr; }

/* Uniform square saved-creative cards (My images / videos / banners) */
/* ===== Uniform creative card (Library + all section grids) ===== */
.lib-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 18px; align-items: start; }
.cc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 246px; transition: box-shadow .16s ease, transform .16s ease; }
.cc:hover { box-shadow: 0 8px 24px rgba(20, 23, 28, .08); transform: translateY(-2px); }
.cc-media { position: relative; height: 152px; flex: none; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.cc-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.cc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; }
.cc-textprev { padding: 16px 16px; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; height: 100%; width: 100%; }
.cc-empty { color: var(--muted); font-size: 12px; }
.cc-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; font-size: 15px; pointer-events: none; }
.cc-star { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border: none; background: rgba(255,255,255,.92); color: #b9942f; border-radius: 50%; display: grid; place-items: center; font-size: 14px; padding: 0; opacity: 0; transition: opacity .12s ease; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc:hover .cc-star, .cc-star.on { opacity: 1; }
.cc-star.on { color: var(--orange); }
.cc-title { padding: 11px 13px 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.34; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(1.34em * 2 + 11px); cursor: pointer; }
.cc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding: 0 8px 0 13px; }
.cc-kind { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A creative code is an identifier, so it renders verbatim. Uppercasing it loses
   the kind prefix (i vs I) and flattens the project's CamelCase, turning
   GreenSport into GREENSPORT, which no longer matches the campaign name or the
   filename it has to be matched against. */
.cc-kind.code, .pv-kind.code { text-transform: none; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cc-acts { display: flex; gap: 1px; flex: none; }
.cc-ic { width: 28px; height: 28px; border: none; background: none; color: var(--muted); border-radius: 8px; display: grid; place-items: center; font-size: 13px; padding: 0; }
.cc-ic:hover { background: var(--hover); color: var(--ink); }
.cc-ic svg { width: 15px; height: 15px; }
.cc-ic[data-delcr]:hover { color: #c02626; }

/* ===== Full-screen chat instance (/c/<id>) — ChatGPT-style ===== */
.main.chat-mode { padding: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
.chatview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Nearly the full width of the pane, as asked. The 768px cap made sense for a
   text-only chat and starved the thing this chat actually produces: a grid of
   image variants got two cramped columns in a third of the screen. Prose stays
   readable because the message bubbles carry their own width caps. */
.cmdshell.chat-full { flex: 1 1 auto; min-height: 0; width: 100%; max-width: min(1520px, 96%); margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); display: flex; flex-direction: column; }
/* Bot text should not run 1500px wide even when the shell does. */
.cmdshell.chat-full .cmd-msg.bot { max-width: 860px; }
.cmdshell.chat-full .cmd-msg.user > span:last-child { max-width: 560px; }
/* The input row reads better slightly narrower than the artifact area. */
.cmdshell.chat-full .cmd-input { max-width: 980px; width: 100%; margin: 0 auto 18px; }
.cmdshell.chat-full .cmd-log { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; border: none; background: transparent; padding: 28px 8px 16px; }
.cmdshell.chat-full .cmd-log:empty { border: none; }


/* Owner message = light bubble on the right; AI message = plain, full width */
.cmd-msg.user { justify-content: flex-end; font-family: inherit; }
.cmd-msg.user .cmd-prompt { display: none; }
.cmd-msg.user > span:last-child { background: var(--sidebar, #f4f4f5); color: var(--ink); border-radius: 20px; padding: 10px 16px; max-width: 78%; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.cmd-msg.bot { color: var(--ink); font-size: 15px; line-height: 1.6; max-width: 100%; }

/* ===== Chats in the sidebar ===== */
.pchev { width: 15px; height: 15px; flex: none; color: var(--muted); transition: transform .15s ease; }
.pname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A count sits on its own row as a flex child. It used to be absolutely
   positioned against a folder row that no longer exists, which stacked every
   count in the middle of the project menu. */
.proj-count { flex: none; font-size: 11px; color: var(--muted); font-weight: 600; }
.proj-chats { display: flex; flex-direction: column; gap: 1px; }
.chat-item.nested { font-size: 13px; padding: 6px 9px; }
.chat-item .chat-title, .chat-title { min-width: 0; }

/* ===== Collapsed sidebar rail: a slim strip of icons, never nothing ===== */
.side-rail { display: none; }
.shell.collapsed { grid-template-columns: 60px 1fr; }
.shell.collapsed .side { display: none; }
.shell.collapsed .side-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100vh; padding: 10px 0; border-right: 1px solid var(--line); background: var(--panel); }
.rail-btn { width: 40px; height: 40px; border: none; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; padding: 0; cursor: pointer; }
.rail-btn:hover { background: var(--hover); color: var(--ink); }
.rail-btn svg { width: 20px; height: 20px; }
.rail-spacer { flex: 1 1 auto; }
.rail-av { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; border: none; font-weight: 700; font-size: 13px; display: grid; place-items: center; cursor: pointer; margin-bottom: 4px; padding: 0; line-height: 1; }

/* ===== Copilot (manage) section ===== */
.copilot-hint { max-width: 640px; margin: 14px auto 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ===== Copilot roadmap (sequential task checklist) ===== */
.roadmap { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 14px 16px; margin: 6px 0; align-self: flex-start; max-width: 96%; width: 520px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.rm-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rm-steps { display: flex; flex-direction: column; gap: 2px; }
.rm-step { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; }
.rm-step.running { background: var(--tint); }
.rm-step.done .rm-title { color: var(--muted); }
.rm-status { flex: none; width: 18px; text-align: center; font-size: 14px; }
.rm-step.running .rm-status { animation: rm-spin 1s linear infinite; }
@keyframes rm-spin { to { transform: rotate(360deg); } }
.rm-ico { flex: none; font-size: 15px; }
.rm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rm-title { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.rm-result { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }
.rm-btns { display: flex; gap: 8px; margin-top: 12px; }
.rm-run { background: var(--orange); color: #fff; border: none; border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 13px; cursor: pointer; }
.rm-run:hover { filter: brightness(1.05); }
.rm-cancel { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; }
.rm-cancel:hover { background: var(--hover); color: var(--ink); }
.rm-dl { font-size: 12px; color: var(--orange-ink); text-decoration: none; font-weight: 600; }
.rm-dl:hover { text-decoration: underline; }

/* ===== Library: content-type tabs + unified grid ===== */
.ws-head { align-items: flex-start; }
.lib-proj { width: auto; max-width: 200px; border-radius: 999px; padding: 7px 12px; font-size: 13px; }
.lib-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.lib-tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; }
.lib-tab:hover { background: var(--hover); color: var(--ink); }
.lib-tab.active { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); }
.lib-count { font-size: 11px; font-weight: 700; background: var(--hover); color: var(--muted); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.lib-tab.active .lib-count { background: #fff; color: var(--orange-ink); }

/* ===== Unified creative preview modal ===== */
.modal.modal-lg { max-width: 640px; }
.pv-stage { border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 14px; }
/* Only the Library creative modal wants a fixed-height stage; inline
   previews (SERP, UAC, PMax mocks) must GROW with the card, never clip it. */
.pv-stage.pv-fixed { height: 380px; overflow: hidden; }
.pv-fit { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.pv-frame { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pv-text { max-width: 460px; padding: 8px 20px; text-align: center; }
.pv-text .pv-h { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 12px; }
.pv-text .pv-p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.pv-text .pv-cta { display: inline-block; margin-top: 16px; background: var(--orange); color: #fff; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; }
.pv-empty { color: var(--muted); font-size: 13px; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; }
.pv-kind { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pv-acts { display: flex; gap: 2px; }
.pv-acts .cc-ic.on { color: var(--orange); }
.pv-projlabel { font-size: 12px; color: var(--muted); margin: 12px 0 6px; }

/* ===== Reports: table artifact, card, preview ===== */
.rep-artifact { width: 100%; max-width: 100%; margin: 4px 0; }
.rep-h { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 8px; text-transform: capitalize; }
.rep-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 340px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-table th, .rep-table td { padding: 7px 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.rep-table thead th { background: var(--bg); color: var(--muted); font-weight: 700; position: sticky; top: 0; z-index: 1; }
.rep-table td.num, .rep-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rep-table tbody tr:last-child td { border-bottom: none; }
.rep-table .rep-total td { font-weight: 700; background: var(--tint); position: sticky; bottom: 0; border-top: 1px solid var(--line); }
.rep-artifact .rm-dl { display: inline-block; margin-top: 8px; }
.cc-report { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; width: 100%; }
.cc-rep-ico { font-size: 30px; line-height: 1; }
.cc-rep-meta { font-size: 12.5px; color: var(--ink); font-weight: 600; text-transform: capitalize; }
.cc-rep-tot { font-size: 11px; color: var(--muted); }
.pv-report { align-self: stretch; flex: 1; width: 100%; height: 100%; overflow: auto; }
.pv-report .rep-wrap { border: none; max-height: none; }

/* Chat placeholders never wrap to a second line (one line, ellipsis if long). */
.cmd-in::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Automations ===== */
/* The app's only true state toggle. .chip.on stays a multi-select filter (project
   chips in the creative preview, account chips here), so reusing it for "enabled"
   would give two identical-looking vocabularies that mean different things. */
.switch { position: relative; width: 34px; height: 20px; flex: none; padding: 0; border: 1px solid var(--line); background: #e9ecef; border-radius: 999px; transition: background .14s ease, border-color .14s ease; }
.switch .switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.22); transition: transform .14s ease; }
.switch.on { background: var(--orange); border-color: var(--orange); }
.switch.on .switch-knob { transform: translateX(14px); }
.switch:disabled { opacity: .5; }

.auto-starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 620px; margin: 16px auto 0; }
.auto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.auto-head .saved-h { margin: 0; }

.cc-auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 12px; width: 100%; }
.cc-auto-ico { font-size: 28px; line-height: 1; }
.cc-auto-kind { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.cc-auto-sched { font-size: 11px; color: var(--muted); }
.cc-auto-meta { display: flex; align-items: center; gap: 6px; padding: 4px 13px 0; font-size: 11px; color: var(--muted); cursor: pointer; min-height: 20px; overflow: hidden; }
.cc-auto-acct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-auto-when { white-space: nowrap; }
.cc.off { opacity: .62; }
.cc.off:hover { opacity: 1; }

/* The proposed-automation confirm card, built on .roadmap. */
.autocard { max-width: 560px; }
.ac-name { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.ac-warn { background: #fdf0e0; border: 1px solid #f6dcbb; color: var(--warn); padding: 9px 11px; border-radius: 9px; font-size: 12.5px; margin-bottom: 12px; }
.ac-safe { background: #e7f6ee; border: 1px solid #cfe9dc; color: var(--ok); padding: 9px 11px; border-radius: 9px; font-size: 12.5px; margin-bottom: 12px; }
.ac-lbl { font-size: 12px; color: var(--muted); margin: 14px 0 6px; }
.ac-runs { max-height: 260px; overflow: auto; }

/* ===== Data section ===== */
/* A toast rather than alert() for "copied": alert steals focus, which is exactly
   wrong for feedback on an action the user is in the middle of. */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: #1d2330; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 60; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--warn); }

.snip { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px; background: #fff; }
.snip-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.snip-code { margin: 0; padding: 10px 12px; background: #f6f7f9; border-radius: 8px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.snip .s { margin-top: 8px; }

/* The secret is shown exactly once, so it gets its own weight on the page. */
.key-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 12px 14px; background: #f6f7f9; border: 1px solid var(--line); border-radius: 8px; word-break: break-all; user-select: all; }

/* ---- creative tests ---- */
/* The picker reuses the Library card in a select mode, so it inherits every
   thumbnail behaviour instead of growing a second component that would drift. */
.cc-pick { cursor: pointer; position: relative; }
.cc-pick .cc-media { position: relative; }
.cc-check {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 6px;
  background: var(--panel); border: 1.5px solid var(--line); display: flex; align-items: center;
  justify-content: center; font-size: 14px; line-height: 1; color: #fff;
}
.cc-pick.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-pick.sel .cc-check { background: var(--accent); border-color: var(--accent); }
.cc-blocked { opacity: .55; cursor: not-allowed; }
.cc-blockmsg { font-size: 11px; line-height: 1.3; padding: 0 8px 8px; color: var(--bad); }

/* Share of impressions by placement. This bar is the headline output: reaching
   YouTube at all is Google's own verdict on a creative, and it is rare. */
.pl-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); margin: 6px 0 10px; }
.pl-seg { display: block; height: 100%; }
.pl-youtube, .pl-youtube_watch, .pl-youtube_search { background: #e0524a; }
.pl-content { background: #4a7fe0; }
.pl-search { background: #3fa46a; }
.pl-search_partners { background: #7fbf9a; }
.pl-mixed, .pl-unknown { background: #9aa0a6; }
tr.pl-note td { padding-top: 0; border-top: 0; opacity: .75; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--tint); }

/* ---- image variants ---- */
/* Previews are for SCANNING, not admiring: cards cap at 380px instead of
   stretching to fill, so two variants sit as a comparable pair and a wide screen
   shows more of the conversation rather than one enormous banner. Click-throughs
   (PNG, the saved creative) carry the full size. */
/* ASO filmstrip: slides scroll horizontally in store order. A FIXED preview
   height with auto width keeps every slide the same visual size while the
   aspect stays honest per store (App Store 1290x2796 vs Play 1080x1920, and
   event 16:9 next to 9:16). */
.ss-strip { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px; align-items: flex-start; }
.ss-slide { flex: 0 0 auto; margin: 0; max-width: 320px; }
.ss-slide img { height: 300px; width: auto; max-width: 320px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); display: block; }
.ss-slide figcaption { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ss-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; max-width: 230px; }
.ss-edit { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--panel); }
.ss-edit-f { display: flex; flex-direction: column; gap: 3px; }
.ss-edit input { width: 100%; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: inherit; }
.ssp-h { margin: 10px 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.ssp-concepts { display: flex; gap: 10px; flex-wrap: wrap; }
.ssp-concept { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.ssp-concept img { height: 380px; width: auto; border-radius: 8px; display: block; }
.ssp-concept > .s { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ssp-concept.sel { border-color: var(--orange); background: var(--tint); }
.ssp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ssp-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: var(--panel); }
.ssp-card.sel { border-color: var(--orange); background: var(--tint); }
.ssp-title { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ssp-editrow { display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; }
.ssp-editrow input { width: 100%; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: inherit; font-weight: 600; }
.ssp-editrow input.ssp-sub { font-weight: 400; font-size: 11.5px; }
.ssp-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.ssp-tpl { color: var(--muted); font-size: 11px; margin-right: 4px; }
.ss-slide-acts { display: flex; gap: 2px; margin-top: 4px; }
.ss-act { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; background: none; border: 0; border-radius: 8px; color: var(--muted); font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; text-decoration: none; min-width: 0; }
.ss-act svg { width: 15px; height: 15px; }
.ss-act:hover { background: var(--bg); color: var(--orange-ink); }
.ss-act:disabled { opacity: .45; cursor: wait; }
.ss-act span { white-space: nowrap; }
.ss-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ss-actions label { display: flex; align-items: center; gap: 6px; }
.ss-actions select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; }
.ssp-hint { margin: -2px 0 6px; }
.ssp-results-h { margin-top: 6px; font-weight: 600; }
.ssp-search input { max-width: 320px; flex: 0 1 320px; }
.ssp-strip .iv-alt { width: 64px; height: 64px; }
.ssp-slots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ssp-slot { position: relative; width: 72px; height: 96px; border: 1.5px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg); overflow: hidden; }
.ssp-slot img { width: 100%; height: 100%; object-fit: cover; }
.ssp-slot.act { border-color: var(--orange); border-style: solid; box-shadow: 0 0 0 2px var(--tint); }
.ssp-slot-n { position: absolute; top: 3px; left: 5px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); z-index: 2; }
.ssp-slot:not(:has(img)) .ssp-slot-n { color: var(--muted); text-shadow: none; }
.ssp-slot-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.ss-prompt { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .65; font-size: 10.5px; margin-top: 1px; }
.ssp-subline { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; margin: 1px 0 4px; }
.ssp-list li { margin-bottom: 2px; }
.ssp-strip .iv-alt.on { border-color: var(--orange); }
.aso-field { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--panel); }
.aso-field.over { border-color: #c4302b55; }
.aso-field-h { display: flex; align-items: center; gap: 10px; }
.aso-field-h b { flex: none; }
.aso-field-h .s { flex: 1; }
.aso-field-v { margin-top: 6px; white-space: pre-wrap; font-size: 13px; line-height: 1.45; }
.aso-kit { display: flex; flex-direction: column; gap: 14px; }
.aso-kit-row { display: flex; gap: 14px; flex-wrap: wrap; }
.aso-icon-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.aso-icon-cell { display: flex; flex-direction: column; gap: 5px; }
.aso-icon-acts { display: flex; gap: 10px; justify-content: center; }
.aso-icon-img { width: 148px; height: 148px; border-radius: 28px; border: 1px solid var(--line); display: block; }

/* auto-fit + center: empty tracks collapse, so one card sits centred, two sit
   as a centred pair, and a batch wraps into centred rows. start-aligned with
   auto-fill it read as "stuck to the left with holes". */
.iv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); gap: 16px; margin-top: 8px; justify-content: center; }
.iv-img { max-height: 380px; object-fit: contain; }
.iv-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel); min-width: 0; }
.iv-img { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--line); }
.iv-name { font-size: 12px; opacity: .7; margin-top: 8px; }
.iv-lbl { margin-top: 8px; }
/* The strip scrolls inside itself; the card must never widen the chat column. */
.iv-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-top: 4px; }
.iv-alt { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.iv-alt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-alt:hover { border-color: var(--accent); }
.iv-alt:disabled { opacity: .5; cursor: wait; }
.iv-notes { margin-bottom: 8px; opacity: .8; }
.asset-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.asset-card > a { display: block; aspect-ratio: 1 / 1; background: var(--bg); }
.asset-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-meta { padding: 10px 12px; }
.asset-meta .t { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger-link { color: #c4302b; }
/* Equal-weight icon actions under the preview: one visual system instead of a
   mixed bag of ghost buttons and links. The sublabel line is always present so
   the row height never depends on which action carries a price. */
.iv-actions { display: flex; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.iv-act { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px; background: none; border: 0; border-radius: 10px; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-decoration: none; min-width: 0; }
.iv-act svg { width: 18px; height: 18px; margin-bottom: 1px; }
.iv-act .iv-sub { font-size: 10px; font-weight: 500; color: var(--muted); opacity: .65; min-height: 12px; line-height: 12px; white-space: nowrap; }
.iv-act:hover { background: var(--bg); color: var(--orange-ink); }
.iv-act:hover .iv-sub { color: var(--orange-ink); }
.iv-act:disabled { opacity: .45; cursor: wait; }
.iv-msg { min-height: 20px; margin-top: 4px; line-height: 20px; }
.iv-src { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.iv-src .chip { padding: 3px 10px; font-size: 12px; cursor: pointer; }
.iv-src .chip:disabled { opacity: .45; cursor: not-allowed; }
.iv-search { display: flex; gap: 6px; margin: 4px 0 6px; }
.iv-search input { flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: inherit; }

/* ---- brand + templates ---- */
.brand-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.brand-sw { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-sw input[type=color] { width: 54px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; }
.brand-hex { width: 84px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: inherit; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pa-item { position: relative; min-width: 0; }
.pa-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.adv-card > summary { cursor: pointer; font-weight: 600; }
.tpl-row { align-items: center; }
.tpl-edit textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; }
/* Every declared size, side by side. Wide output scrolls in its own box so the
   modal never scrolls sideways. */
.tpl-prev { display: flex; gap: 12px; overflow-x: auto; margin-top: 10px; padding-bottom: 6px; }
.tpl-fig { flex: 0 0 auto; margin: 0; max-width: 240px; }
.tpl-fig img { max-width: 240px; height: auto; border: 1px solid var(--line); border-radius: 8px; display: block; }

/* Token allowance: a bar, because "600 of 6000" is a ratio and a ratio reads
   faster as a length than as two numbers. */
.tk-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 6px 0 8px; }
.tk-bar.thin { height: 6px; margin: 0; min-width: 80px; }
.tk-fill { height: 100%; background: var(--orange); border-radius: 999px; transition: width .25s ease; }
.tk-fill.hot { background: var(--warn); }
/* The account line goes amber once the allowance is mostly gone, so running low is
   visible on every screen without a banner anyone has to dismiss. */
.user-tier.tier-low { color: var(--warn); font-weight: 600; }
table.stats td.neg { color: var(--warn); }
table.stats td.pos { color: #157347; }

/* A chip that is holding an override looks different from one on auto: the whole
   point of the template and language chips is that a set value is not the default. */
.cmd-chip-b.on { border-color: var(--orange); color: var(--orange-ink); font-weight: 600; }

/* Variations: a contact sheet, not a gallery. Twenty thumbnails exist to be
   compared and shortlisted, so they are small and the grid does the scrolling. */
.iv-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.iv-batch { margin-top: 10px; }
.iv-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.iv-batch-item { margin: 0; }
.iv-batch-item img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; }
.iv-batch-item figcaption { margin: 4px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Manual composer: form on the left, the result on the right, because the whole
   point is seeing what the words do to the layout while typing them. */
.studio-alt { text-align: center; margin-top: 10px; }
.mc-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 340px); gap: 18px; align-items: start; }
.mc-form { min-width: 0; }
.mc-prev { min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
.mc-prev img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.mc-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; max-height: 200px; overflow-y: auto; }
.mc-pic { padding: 0; border: 2px solid transparent; border-radius: 7px; background: none; cursor: pointer; overflow: hidden; line-height: 0; }
.mc-pic.on { border-color: var(--orange); }
.mc-pic img { width: 100%; height: 62px; object-fit: cover; display: block; }
@media (max-width: 760px) { .mc-grid { grid-template-columns: 1fr; } }

/* Wider than modal-lg, and scrollable: the manual composer is a form beside a
   preview, and at 440px the two columns collapsed onto each other so the preview
   sat on top of the buttons. */
.modal.modal-xl { max-width: 940px; max-height: 88vh; overflow-y: auto; }

/* Context layers: a row per layer with its own forget control, because forgetting
   chat inferences and forgetting uploaded product facts are different acts. */
.cx-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.cx-layer { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }

/* The workbench: blocks on the left, the assembly they produce on the right.
   Side by side because editing one without seeing the other is guesswork. */
.sys-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 16px; align-items: start; }
.sys-pre { background: #fafbfc; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; max-height: 320px; overflow-y: auto; margin: 8px 0 0; }
.card.sticky { position: sticky; top: 12px; }
@media (max-width: 1100px) { .sys-grid { grid-template-columns: 1fr; } .card.sticky { position: static; } }

/* Grouped activity: repeats fold into one row with a count; the timestamps are a
   click away rather than forty rows deep. */
.act-group { border-bottom: 1px solid var(--line); padding: 8px 0; }
.act-group summary { cursor: pointer; list-style: none; display: flex; }
.act-group summary::-webkit-details-marker { display: none; }
.act-group[open] summary { opacity: .85; }
.act-times { padding: 6px 0 2px 12px; border-left: 2px solid var(--line); margin: 6px 0 0 4px; }

/* ===== Creative CRM ===== */
.crm-table td { vertical-align: middle; }
.crm-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: inline-block; }
.crm-thumb-k { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 14px; }
.crm-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.crm-queued { background: #eef2ff; color: #4451c8; }
.crm-uploading, .crm-created { background: #f1f5f9; color: #475569; }
.crm-moderation { background: #fef3c7; color: #92400e; }
.crm-rejected { background: #fee2e2; color: #b91c1c; }
.crm-approved { background: #e0f2fe; color: #0369a1; }
.crm-testing { background: #dcfce7; color: #15803d; }
.crm-finished { background: #e5e7eb; color: #374151; }
.crm-result { background: #fce7f3; color: #9d174d; }
.crm-expand td { background: var(--bg); }
.crm-feed { padding: 6px 4px; }
.crm-ev { padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.crm-ev:last-child { border-bottom: 0; }

/* CRM empty state: show the pipeline itself, so an empty table still teaches
   what will happen here. */
.crm-empty { text-align: center; padding: 26px 16px 22px; }
.crm-empty-ladder { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 16px; }
.crm-empty-ladder .crm-chip { opacity: .9; }
.crm-empty-arrow { color: var(--muted); font-size: 12px; }
.crm-empty-how { max-width: 560px; margin: 0 auto; text-align: left; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Provenance footnote under copilot replies */
.ctx-src { margin-top: 6px; opacity: .8; }
.ctx-src-chip { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 11px; cursor: help; }

/* ---------- scene-centric video editor ---------- */
.va-ed { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.va-left { flex: 1 1 320px; min-width: 260px; }
.va-panel { flex: 1 1 300px; min-width: 250px; }
.va-prevbox { display: flex; justify-content: center; background: #eef0f4; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.va-cvwrap { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 18, 28, .18); background: #000; flex: none; }
.va-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(6,8,16,.72); color: #fff; font-size: 20px; cursor: pointer; }
.va-play:hover { background: rgba(6,8,16,.88); }
.va-scrub { position: relative; display: flex; gap: 3px; height: 10px; margin: 8px 0 8px; cursor: pointer; }
.va-scrub .seg { background: var(--line); border-radius: 3px; min-width: 6px; transition: background .15s; }
.va-scrub .seg.cur { background: #ff6b2c; }
.va-ph { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ff6b2c; pointer-events: none; border-radius: 1px; }
.va-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; }
.va-tile { flex: none; width: 78px; border: 2px solid transparent; border-radius: 10px; padding: 3px; cursor: pointer; background: none; text-align: center; }
.va-tile:hover { border-color: var(--line); }
.va-tile.sel { border-color: #ff6b2c; }
.va-tile img, .va-tile video, .va-tile .ph { width: 68px; height: 68px; object-fit: cover; border-radius: 7px; display: block; margin: 0 auto; }
.va-tile .ph { display: flex; align-items: center; justify-content: center; background: var(--bg2, #1a1d29); color: #889; font-size: 10px; }
.va-tile .s { font-size: 10px; line-height: 1.3; }
.va-tile.va-add .ph { font-size: 26px; color: #ff6b2c; background: transparent; border: 1.5px dashed var(--line); }
.va-tile.drag { opacity: .4; }
.va-tile.over { border-color: #ff6b2c; border-style: dashed; }
.va-tile { width: 96px; }
.va-tile img, .va-tile video, .va-tile .ph { width: 86px; height: 86px; }
.va-panel { min-height: 388px; }
.va-scene-acts { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; margin-bottom: 4px; }
.va-scene-acts .ghost.small { flex: none; padding: 4px 9px; font-size: 11.5px; white-space: nowrap; }
/* add-scene preset picker */
.va-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.va-preset { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; transition: border-color .12s, background .12s; color: var(--ink, #14161c); font: inherit; }
.va-preset:hover { border-color: #ff6b2c; background: rgba(255, 107, 44, .06); }
.va-preset-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 17px; font-weight: 800; background: var(--bg2, #1a1d29); color: #aab; border: 1px solid var(--line); }
.va-preset-ico.photo, .va-preset-ico.broll { color: #ff6b2c; }
.va-preset-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-preset-body b { font-size: 13px; color: var(--ink, #14161c); }
.va-preset-body span:last-child { font-size: 11.5px; color: var(--ink, #14161c); opacity: .65; line-height: 1.35; }
/* captions popover (HIG: settings grouped, bar keeps actions) */
.va-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 32px rgba(10, 12, 20, .14); padding: 10px 12px; min-width: 260px; }
.va-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.va-pop-row > span:first-child { font-size: 12px; color: var(--ink, #14161c); opacity: .7; }
.va-seg { display: inline-flex; gap: 2px; background: var(--bg2, #f1f2f5); border-radius: 8px; padding: 2px; }
.va-seg button { border: 0; background: transparent; color: var(--ink, #14161c); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.va-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(10, 12, 20, .18); }
.va-seg.swatches button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(10, 12, 20, .15); font-size: 10px; line-height: 1; color: #14161c; }
.va-seg.swatches button.on { border-color: #ff6b2c; box-shadow: 0 0 0 2px rgba(255, 107, 44, .25); }
.va-bar .va-voice { max-width: 190px; }
/* consistent control metrics across the video editor */
.va-panel input, .va-panel textarea, .va-panel select {
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--ink, #14161c); font: inherit; font-size: 13px; padding: 6px 10px;
}
.va-panel input, .va-panel select { height: 34px; }
.va-panel textarea { line-height: 1.4; min-height: 56px; }
.va-line { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; min-height: 34px; margin: 2px 0; font-size: 12.5px; }
.va-line > span:first-child { opacity: .65; }
.va-line select { width: auto; min-width: 170px; max-width: 240px; justify-self: start; }
.va-line > span:last-child { justify-self: start; }
.va-stepper { display: inline-flex; align-items: center; gap: 8px; }
.va-stepper .ghost.small, .va-scene-acts .ghost.small {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 11.5px;
}
.va-bar > button, .va-bar > select { height: 32px; display: inline-flex; align-items: center; box-sizing: border-box; }
.va-bar > button { padding: 0 12px; }
.va-bar > select { padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink, #14161c); font: inherit; font-size: 12.5px; }
.va-tile.va-add { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.va-panel .inline .primary.small { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 11.5px; }

.va-iclab svg { width: 13px; height: 13px; margin-right: 5px; flex: none; }
.va-scene-acts { align-items: center; margin-top: 8px; }

/* tiles are <button>s: the global button rule paints white text - override */
.va-tile { color: var(--ink, #14161c); }
.va-tile .s { color: var(--ink, #14161c); opacity: .75; }
.va-tile .s:last-child { opacity: .55; }
.va-topbtns { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; z-index: 5; }
.va-ic { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink, #14161c); cursor: pointer; padding: 0; }
.va-ic svg { width: 13px; height: 13px; }
.va-ic:hover:not(:disabled) { border-color: #ff6b2c; color: #ff6b2c; }
.va-ic:disabled { opacity: .35; cursor: default; }
.ads-h { font-weight: 700; margin: 16px 0 4px; padding-top: 10px; border-top: 2px solid var(--line); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.ads-line { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-top: 1px solid var(--line); }
.ads-line:hover { background: rgba(10, 12, 20, .03); }
.ads-text { flex: 1; min-width: 0; font-size: 13.5px; }
.ads-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ads-warn { color: #b45309; cursor: help; }
.ads-in { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 13.5px; padding: 4px 8px; color: var(--ink, #14161c); }
.ads-in:hover { border-color: var(--line); }
.ads-in:focus { border-color: #ff6b2c; background: #fff; outline: none; }
.ads-line .va-ic { opacity: 0; transition: opacity .12s; }
.ads-line:hover .va-ic, .ads-line:focus-within .va-ic { opacity: 1; }
/* Google-style ad preview */
.serp { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 6px 0 4px; background: #fff; }
.serp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.serp-badge { font-weight: 700; font-size: 11px; color: #14161c; }
.serp-url { font-size: 12px; color: #202124; opacity: .8; }
.serp-h { color: #1a0dab; font-size: 17px; line-height: 1.3; cursor: default; }
.serp-d { font-size: 13px; color: #4d5156; margin-top: 2px; line-height: 1.45; }
.serp-sl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 10px; }
.serp-sl a { color: #1a0dab; font-size: 14px; }
.serp-sl .s { color: #4d5156; }
/* asset tables */
.ads-tbl { display: grid; gap: 4px 10px; align-items: start; margin-top: 4px; }
.ads-tbl.sl { grid-template-columns: minmax(140px, .8fr) 1fr 1fr; }
.ads-tbl.pr { grid-template-columns: minmax(140px, .8fr) 1fr; }
.ads-th { font-size: 11px; font-weight: 700; opacity: .55; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; }
.ads-cell { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding: 2px 0; }
.ads-cell .ads-in { padding: 4px 8px; }
.ads-cell .ads-count { flex: none; font-size: 10.5px; }

/* ---------- placement preview frames ---------- */
.pv-modal .modal, #modalBack .pv-wide { max-width: 720px; }
.frame-phone { width: 300px; margin: 0 auto; background: #111318; border-radius: 34px; padding: 10px 8px 14px; box-shadow: 0 18px 50px rgba(10,12,20,.35); }
.frame-phone .fp-notch { width: 88px; height: 18px; background: #000; border-radius: 10px; margin: 0 auto 6px; }
.frame-phone .fp-screen { border-radius: 22px; overflow: hidden; background: #000; position: relative; }
.frame-phone .fp-home { width: 90px; height: 4px; background: #444; border-radius: 2px; margin: 10px auto 0; }
.frame-web { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.frame-web .fw-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f7f7f9; }
.frame-web .fw-dot { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.frame-web .fw-url { font-size: 11.5px; opacity: .6; }
.frame-web .fw-body { display: flex; gap: 16px; padding: 14px; }
.frame-web .fw-main { flex: 1; min-width: 0; }
.frame-web .fw-side { flex: none; }
.fw-line { height: 9px; border-radius: 5px; background: #e8e9ee; margin: 8px 0; }
.fw-line.w60 { width: 60%; } .fw-line.w80 { width: 80%; } .fw-line.w40 { width: 40%; } .fw-line.h16 { height: 16px; width: 70%; background: #dcdee6; }
.fw-slot { border: 1px dashed #d5d7e0; border-radius: 8px; overflow: hidden; position: relative; }
.fw-slot img, .fw-slot iframe { display: block; border: 0; }
.fw-ad-tag { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,.85); font-size: 9px; padding: 1px 5px; border-radius: 4px; color: #555; }
.frame-feed { max-width: 380px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.frame-feed .ff-top { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.frame-feed .ff-ava { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.frame-feed .ff-media img { width: 100%; display: block; }
.frame-feed .ff-actions { display: flex; gap: 16px; padding: 10px 12px; font-size: 16px; opacity: .8; }
.frame-feed .ff-cta { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #f4f5f8; font-size: 13px; font-weight: 600; }
.frame-store { background: #fff; padding: 12px 12px 4px; }
.fs-status { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; padding: 2px 6px 8px; color: #111; }
.fs-head { display: flex; gap: 12px; align-items: flex-start; }
.fs-icon { width: 64px; height: 64px; border-radius: 15px; color: #fff; font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.fs-icon img { width: 100%; height: 100%; object-fit: cover; }
.fs-name { font-size: 16px; font-weight: 700; color: #111; }
.fs-sub { font-size: 11.5px; opacity: .6; }
.fs-get { margin-top: 6px; display: inline-block; background: #0a84ff; color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 18px; border-radius: 14px; }
.fs-meta { display: flex; gap: 18px; padding: 12px 4px; font-size: 11px; opacity: .7; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.fs-shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.fs-shots img { height: 300px; border-radius: 10px; flex: none; }
/* SERP v2 */
.serp { font-family: arial, sans-serif; }
.serp-fav { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.serp-site { font-size: 13px; color: #202124; line-height: 1.15; }
.serp-site .s2 { font-size: 11.5px; color: #4d5156; }
.serp-h { font-size: 19px; }
.serp-h:hover { text-decoration: underline; cursor: pointer; }
.serp-promo { margin-top: 6px; font-size: 12.5px; color: #202124; background: #f8f9fa; border: 1px solid #e8eaed; border-radius: 8px; padding: 5px 9px; display: inline-block; }
.serp.mobile { max-width: 400px; }
.serp.mobile .serp-sl { grid-template-columns: 1fr; }
.serp-used { font-size: 11px; opacity: .55; margin: 4px 0 2px; }
/* video phone overlay */
.va-phoneov { position: absolute; inset: 0; pointer-events: none; }
.va-phoneov .ov-icons { position: absolute; right: 8px; bottom: 64px; display: flex; flex-direction: column; gap: 14px; font-size: 20px; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.va-phoneov .ov-ch { position: absolute; left: 10px; bottom: 12px; right: 60px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); font-size: 12px; }
.va-phoneov .ov-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.va-phoneov .ov-bar i { display: block; height: 100%; width: 34%; background: #f00; }

/* preview polish: one stage, one rhythm */
.pv-stage { display: flex; justify-content: center; padding: 18px; background: #eef0f4; border-radius: 12px; }
.pv-stage > * { box-shadow: 0 10px 34px rgba(15, 18, 28, .12); }
.serp-tools { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.serp { border: 0; border-radius: 14px; padding: 16px 20px; max-width: 600px; width: 100%; margin: 0; background: #fff; }
.serp.mobile { max-width: 400px; }
.serp-top { margin-bottom: 8px; }
.serp-sp { font-weight: 700; font-size: 11px; color: #202124; margin: 2px 0; }
.serp-h { margin-top: 2px; }
.serp-d { margin-top: 4px; }
.serp-promo { margin-top: 8px; }
.serp-sl { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f1f4; }
.serp-sl a { line-height: 1.3; }
.serp-sl .s { margin-top: 1px; line-height: 1.35; }
.serp-used { text-align: center; margin-top: 6px; }
.frame-feed { box-shadow: none; border: 0; }
.pv-stage .frame-feed { box-shadow: 0 10px 34px rgba(15, 18, 28, .12); }
.frame-feed .ff-top { padding: 12px 14px 10px; }
.frame-feed .ff-cta { border-top: 1px solid #eceef2; }
.frame-feed .ff-actions { border-top: 1px solid #f2f3f6; padding: 10px 14px 12px; }
/* a flex stage shrink-wraps the card to the slot: pin the page width so
   the skeleton column actually shows */
.frame-web { width: 640px; max-width: 100%; }
.frame-web .fw-body { padding: 16px; gap: 18px; }
.fw-slot { margin: 12px auto; }
.frame-web .fw-side .fw-slot { margin: 0; }
.frame-store { border-radius: 0; }
.fs-head { padding: 2px 4px; }
.fs-meta { justify-content: space-between; padding: 12px 6px; }
.fs-shots { padding: 0 4px 12px; }

/* mobile SERP must never clip: the stage grows with the card, never scrolls it */
.pv-stage { overflow: visible; align-items: flex-start; flex-wrap: wrap; }
.pv-stage.pv-fixed { overflow: hidden; align-items: center; }
.serp { min-width: 0; overflow-wrap: break-word; }
.serp.mobile { width: 100%; }
.serp-tools { flex-wrap: wrap; }

/* UAC install ad + Performance Max native display mocks */
.uad-tag { font-size: 11px; color: #5f6368; margin-bottom: 8px; }
.uad-tag b { color: #202124; font-size: 11px; }
.serp.uad { max-width: 400px; }
.uad-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.uad-icon { width: 48px; height: 48px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.uad-app { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 14.5px; color: #202124; }
.uad-app .s2 { font-size: 12px; color: #5f6368; margin-top: 2px; }
.uad-cta { display: inline-block; margin-top: 12px; background: #01875f; color: #fff; border-radius: 999px; padding: 7px 22px; font-size: 13px; font-weight: 600; }
.serp.disp { max-width: 360px; padding: 0 0 16px; overflow: hidden; }
.serp.disp .uad-tag, .serp.disp .disp-h, .serp.disp .serp-d, .serp.disp .uad-cta { margin-left: 16px; margin-right: 16px; }
.disp-img { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255, 255, 255, .92); margin-bottom: 12px; }
.disp-img span { font-size: 34px; font-weight: 800; }
.disp-img em { font-size: 10.5px; font-style: normal; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.disp-h { font-size: 16px; font-weight: 600; color: #202124; line-height: 1.35; }
.serp.disp .serp-d { margin-top: 4px; }
.serp.disp .uad-cta { background: #1a73e8; }

/* Warning tooltip: instant, dark, floats above everything */
.warn-tip { position: fixed; z-index: 300; max-width: 320px; background: #14161c; color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 26px rgba(15, 18, 28, .35); pointer-events: none; }
.warn-tip div + div { margin-top: 3px; }

/* Google-flavored placement chrome: GDN native card, Shorts, AdChoices */
.frame-native { width: 360px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; font-family: arial, sans-serif; }
.fn-media { position: relative; }
.fn-media img { max-width: 100%; }
.fn-adch, .fw-adch { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #5f6368; font-size: 10px; line-height: 16px; text-align: center; font-style: normal; }
.fn-body { padding: 12px 16px 16px; }
.fn-body .uad-tag { margin-bottom: 6px; }
.fn-h { font-size: 16px; font-weight: 700; color: #202124; line-height: 1.3; margin-bottom: 12px; }
.frame-shorts { position: relative; aspect-ratio: 9 / 16; background: #000; }
.frame-shorts .ov-icons { position: absolute; right: 8px; bottom: 96px; display: flex; flex-direction: column; gap: 14px; font-size: 20px; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sh-bot { position: absolute; left: 10px; right: 54px; bottom: 12px; color: #fff; font-size: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sh-badge { background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; }
.sh-cta { display: block; background: #1a73e8; color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; text-shadow: none; }
/* video overlay: Shorts CTA + YouTube in-stream ad chrome */
.va-phoneov .ov-cta { position: absolute; left: 10px; right: 60px; bottom: 46px; background: #1a73e8; color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; text-align: center; }
.va-phoneov .ov-ch { bottom: 84px; }
.va-phoneov .ov-adtag { position: absolute; left: 10px; bottom: 14px; color: #fff; font-size: 11.5px; background: rgba(0, 0, 0, .55); border-radius: 4px; padding: 2px 7px; }
.va-phoneov .ov-skip { position: absolute; right: 0; bottom: 34px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .5); border-right: 0; }
.va-phoneov .ov-bar.yt i { background: #fc0; }

/* Library launch console: selection, stage badges, the bulk bar */
.cc-selbox { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); background: rgba(15, 18, 28, .22); backdrop-filter: blur(2px); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s ease, background .12s ease; }
.cc:hover .cc-selbox, .cc-selbox.on, tr:hover .cc-selbox { opacity: 1; }
.cc-selbox.on { background: var(--orange); border-color: rgba(255, 255, 255, .95); }
.cc.sel { outline: 1.5px solid var(--orange); outline-offset: -1.5px; border-radius: 12px; }
.cc-stage { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; flex: none; }
.cc-stage.testing { background: #e8f0fe; color: #1a56c9; }
.cc-stage.finished { background: #e6f4ea; color: #137333; }
.lib-queued { margin: 0 0 10px; }
.lib-bulk { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 10px; background: #1d2330; color: #fff; border-radius: 12px; padding: 10px 16px; margin-top: 14px; box-shadow: 0 10px 30px rgba(15, 18, 28, .35); width: fit-content; }
.lib-bulk .link { color: #cfd4e0; }

/* Library v2: filter row, off-state icons */
.lib-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.lib-filters input { width: 240px; border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.cc-ic.off { opacity: .35; cursor: not-allowed; }
.asset-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.asset-open img, .asset-open video { display: block; width: 100%; }
.pv-lines { margin: 10px 0 4px; }
.pv-lines pre { white-space: pre-wrap; font-size: 12px; line-height: 1.5; max-height: 240px; overflow: auto; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-top: 6px; }
.pv-ytrow { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.pv-ytrow input { flex: 1; min-width: 0; }
.pv-ytrow button { flex: none; white-space: nowrap; }
.nm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.nm-chips .chip { font-family: ui-monospace, monospace; font-size: 11.5px; }
.nm-ex { margin-top: 6px; font-family: ui-monospace, monospace; color: var(--muted); }

/* Library table view + code-first cards */
.cc-title.code { font-family: ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0; }
.lib-table { width: 100%; }
.lib-table td { vertical-align: middle; }
.lib-table .lt-sel { width: 26px; position: relative; }
.lib-table .lt-sel .cc-selbox { position: static; border-color: var(--line); background: #fff; color: var(--orange-ink); }
.lib-table .lt-sel .cc-selbox.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.lib-table .lt-thumb { width: 52px; cursor: pointer; }
.lib-table .lt-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.lib-table .lt-k { display: inline-block; width: 44px; height: 44px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.lib-table .lt-code { cursor: pointer; }
.lib-table .lt-code .mono { font-size: 12px; }
.lib-table .lt-title { opacity: .65; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-table .lt-acts { white-space: nowrap; text-align: right; }
.lib-table tr.sel td { background: var(--tint); }
.cc-star-t { font-size: 14px; }
.cc-star-t.on { color: #eab308; }
.lib-table .lt-acts .cc-ic { display: inline-flex; vertical-align: middle; }
.lib-table td { padding-top: 8px; padding-bottom: 8px; }

/* Creative tests: chat widget + lifecycle board */
.tst-fab { position: fixed; right: 26px; bottom: 26px; z-index: 90; background: #1d2330; color: #fff; border-radius: 999px; padding: 12px 20px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(15, 18, 28, .35); }
.tst-fab:hover { background: #2a3242; }
.tst-widget { position: fixed; right: 26px; bottom: 26px; z-index: 95; width: 420px; max-width: calc(100vw - 40px); max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 18px 50px rgba(15, 18, 28, .28); }
.tst-widget-head { display: flex; justify-content: space-between; align-items: center; }
.kb-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.kb-col { flex: 0 0 240px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 120px; }
.kb-col.over { border-color: var(--orange); background: var(--tint); }
.kb-col.kb-collapsed { flex: 0 0 130px; min-height: 0; }
.kb-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; }
.kb-head .link { margin-left: auto; }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: grab; }
.kb-card.dragging { opacity: .5; }
.kb-card.kb-idea { background: #fffbeb; border-color: #f5e6b8; }
.kb-media img { width: 100%; height: 92px; object-fit: cover; border-radius: 7px; display: block; margin-bottom: 6px; }
.kb-row { display: flex; align-items: flex-start; gap: 4px; }
.kb-code { font-size: 11.5px; font-weight: 600; word-break: break-all; flex: 1; }
.kb-code.mono { font-family: ui-monospace, monospace; font-weight: 500; }
.kb-menu { flex: none; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; }
.kb-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kb-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 16px; }
.kb-hypo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-none { opacity: .5; text-align: center; padding: 12px 0; }
.cc-stage.scale { background: #e6f4ea; color: #137333; }
.cc-stage.stopped { background: #eceff3; color: #5f6368; }
.kb-card img { -webkit-user-drag: none; user-select: none; }
.kb-stats { margin-top: 5px; font-variant-numeric: tabular-nums; }
.cc-longname, .lt-long, .kb-long { font-family: ui-monospace, monospace; font-size: 10px; opacity: .55; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-long, .kb-long { padding: 0; }

/* Imagine: idea pitches + idea cards. Compact enough to compare four bets
   side by side; the ASCII sketch is what makes a pitch judgeable at a glance. */
.idea-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) { .idea-set { grid-template-columns: 1fr; } }
.idea-card { border: 1px solid rgba(196, 168, 96, .28); background: #fffdf6; border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(24, 22, 12, .04); }
.idea-card.saved { opacity: .7; }
.idea-top { display: flex; align-items: flex-start; gap: 8px; }
.idea-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.28; flex: 1; }
.idea-save { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(196, 168, 96, .45); background: #fff; color: #a05a12; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, transform .12s ease; }
.idea-save svg { width: 13px; height: 13px; display: block; }
.idea-save.on { color: #137333; border-color: rgba(19, 115, 51, .35); background: #f2fbf5; }
.idea-save:hover { background: #fff6df; transform: scale(1.05); }
.idea-save.on { background: #e6f4ea; border-color: #b7e0c3; color: #137333; }
.idea-hypo { color: #8a6a2a; font-weight: 500; font-size: 12.5px; margin-top: 5px; line-height: 1.45; }
.idea-mock { margin: 8px 0 0; padding: 8px 10px; background: #fff; border: 1px solid #f0e3bd; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; line-height: 1.35; color: #3f3a2c; white-space: pre; overflow-x: auto; }
.idea-mock.big { font-size: 12px; line-height: 1.4; margin-bottom: 10px; }
.idea-more { margin-top: 8px; }
.idea-more { border-top: 1px solid rgba(196, 168, 96, .22); padding-top: 8px; }
.idea-more summary { cursor: pointer; color: #8a8069; font-size: 12px; list-style: none; }
.idea-more summary::-webkit-details-marker { display: none; }
.idea-more summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.idea-more[open] summary::before { transform: rotate(90deg); }
.idea-brief { white-space: pre-wrap; margin-top: 6px; line-height: 1.5; }
.idea-kinds { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.idea-kinds .ik { border: 1px solid #e5cf9a; background: #fff; color: #8a6a2a; border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; cursor: pointer; }
.idea-kinds .ik.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.idea-kinds .ik:disabled { opacity: .8; cursor: default; }
.idea-brief-full { white-space: pre-wrap; font-size: 13px; line-height: 1.55; background: #fffbeb; border: 1px solid #f0e3bd; border-radius: 10px; padding: 12px 14px; max-height: 45vh; overflow: auto; }
.cc-ideaprev { background: #fffbeb; }
.cc.cc-idea .cc-media { background: #fffbeb; }
.kb-kinds { font-family: ui-monospace, monospace; opacity: .7; }

/* Board: lineage, test context, quick actions; test icon inline */
.kb-flow { opacity: .55; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.kb-focus { display: flex; align-items: center; gap: 8px; background: var(--tint); border: 1px solid var(--orange); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.kb-made { border: 0; background: var(--tint); color: var(--orange-ink); border-radius: 6px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.kb-test { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--muted); padding: 5px 0 0; font-size: 11px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-test:hover { color: var(--ink); }
.kb-acts { display: flex; gap: 6px; margin-top: 8px; }
.kb-act { flex: 1; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.kb-act:hover { background: var(--hover); }
.kb-act.go { border-color: #137333; color: #137333; }
.cc-kind-ico, .chip-ico, .ac-ico { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.cc-kind-ico svg, .chip-ico svg, .ac-ico svg { width: 12px; height: 12px; }
.kb-meta { flex-wrap: wrap; row-gap: 4px; }
.kb-meta .kb-hypo { flex: 1 1 100%; }

/* The wireframe we draw ourselves from the model's layout */
.idea-wire { display: flex; gap: 4px; margin: 2px 0 0; }
.idea-wire.multi .iw-screen { min-width: 0; }
.iw-frame { flex: 1 1 0; min-width: 0; }
.iw-screen { display: flex; flex-direction: column; gap: 4px; justify-content: center; background: #fff; border: 1px solid rgba(196, 168, 96, .3); border-radius: 10px; padding: 8px; overflow: hidden; max-height: 200px; box-shadow: 0 1px 2px rgba(24, 22, 12, .05); }
.idea-wire:not(.multi) .iw-screen { max-width: 170px; margin: 0 auto; }
.idea-wire.multi { align-items: flex-end; }
.idea-wire.big:not(.multi) .iw-screen { max-width: 260px; }
.iw-visual { flex: 1 1 auto; min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(45deg, #f3f4f7, #f3f4f7 6px, #eceef3 6px, #eceef3 12px); border-radius: 6px; color: #7b8190; font-size: 8.5px; line-height: 1.25; padding: 4px; }
.iw-visual.iw-logo { flex: 0 0 auto; min-height: 18px; font-size: 8px; }
.iw-h { font-size: 10.5px; font-weight: 800; line-height: 1.2; color: #14161c; }
.iw-sub { font-size: 8.5px; line-height: 1.3; color: #4d5156; }
.iw-stat { font-size: 9px; font-weight: 700; color: var(--orange-ink); background: var(--tint); border-radius: 5px; padding: 2px 5px; align-self: flex-start; }
.iw-cap { font-size: 8px; color: #7b8190; font-style: italic; }
/* The CTA reads as a button, not a banner: it sits at its own width with a
   light fill, the way a real ad button does. */
.iw-cta { align-self: center; max-width: 90%; text-align: center; background: var(--orange); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 8.5px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 1px 4px rgba(255, 107, 44, .3); line-height: 1.25; }
.iw-t { text-align: center; font-size: 8.5px; color: #a29883; margin-top: 3px; font-variant-numeric: tabular-nums; }
.iw-role { text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b0a68e; margin-bottom: 3px; }
.idea-wire.big .iw-role { font-size: 9.5px; margin-bottom: 5px; }
.idea-wire.big .iw-t { font-size: 10px; }
.idea-wire.big .iw-h { font-size: 14px; }
.idea-wire.big .iw-sub { font-size: 11px; }
.idea-wire.big .iw-cta { font-size: 11px; padding: 5px 16px; }
.idea-wire.big .iw-visual { font-size: 10.5px; min-height: 60px; }
.idea-wire.big .iw-screen { max-height: 340px; }
/* The ticket */
.idea-ticket { display: grid; grid-template-columns: 66px 1fr; gap: 5px 10px; margin-top: 8px; font-size: 12px; line-height: 1.45; }
.it-k { color: #a29883; font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; padding-top: 1px; }
.it-v { color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.idea-refh { margin: 12px 0 6px; color: #a29883; }
.idea-refs { display: flex; gap: 5px; }
.idea-refs img { width: 33%; height: 46px; object-fit: cover; border-radius: 6px; display: block; }

/* One idea, every surface: the format segment, the text-ad mock, big refs */
/* A segmented control, not a row of chips: one track, the selection is a
   raised slab inside it. */
.idea-surf { display: flex; gap: 2px; margin: 12px 0 10px; padding: 2px; background: rgba(120, 100, 50, .08); border-radius: 9px; }
.idea-surf .isf { flex: 1; border: 0; background: none; color: #6f6448; border-radius: 7px; padding: 4px 6px; font-size: 11px; font-weight: 500; cursor: pointer; position: relative; transition: background .14s ease, color .14s ease; }
.idea-surf .isf:hover { color: #3f3a2c; }
.idea-surf .isf.rec::after { content: ''; position: absolute; top: 4px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); opacity: .75; }
.idea-surf .isf.on { background: #fff; color: #14161c; font-weight: 600; box-shadow: 0 1px 3px rgba(24, 22, 12, .12); }
.idea-surf.big { padding: 3px; border-radius: 11px; }
.idea-surf.big .isf { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; }
/* The text ad rides the real SERP mock, just dialled down to card scale -
   a transform would have left its full-size box in the layout. */
.idea-serp .serp { padding: 9px 11px; border-radius: 10px; }
.idea-serp .serp-fav { width: 18px; height: 18px; font-size: 9px; }
.idea-serp .serp-site { font-size: 10px; }
.idea-serp .serp-site .s2 { font-size: 9px; }
.idea-serp .serp-sp { font-size: 9px; }
.idea-serp .serp-h { font-size: 12.5px; line-height: 1.3; }
.idea-serp .serp-d { font-size: 10px; line-height: 1.4; }
.modal .idea-serp .serp { padding: 14px 16px; }
.modal .idea-serp .serp-h { font-size: 17px; }
.modal .idea-serp .serp-d { font-size: 12.5px; }
.modal .idea-serp .serp-fav { width: 24px; height: 24px; font-size: 11px; }
.idea-none { opacity: .5; padding: 14px 0; text-align: center; }
.it-role { font-size: 12px; font-weight: 600; color: var(--orange-ink); margin-top: 12px; }
.idea-refs { display: flex; gap: 8px; }
.idea-ref { flex: 1; border: 0; padding: 0; background: none; border-radius: 10px; overflow: hidden; cursor: zoom-in; box-shadow: 0 1px 2px rgba(24, 22, 12, .08); }
.idea-ref img { width: 100%; height: 64px; object-fit: cover; display: block; transition: transform .15s ease; }
.idea-ref:hover img { transform: scale(1.06); }
.modal .idea-ref img { height: 96px; }

/* One stage for every format: switching tabs must not move the page */
.idea-stage { min-height: 232px; display: flex; align-items: center; justify-content: center; }
.idea-stage.big { min-height: 330px; }
.idea-stage > * { width: 100%; }
.idea-wire { overflow-x: auto; padding-bottom: 2px; }
/* Beats share the width instead of overflowing: five screens still fit. */
/* A storyboard is bound by the stage HEIGHT, not by the cell width: the
   screens keep 9:16, so their width follows from the height and the strip
   never makes the card taller than a static does. */
.idea-wire.multi .iw-frame { flex: 0 0 auto; min-width: 0; }
.idea-wire.multi .iw-screen { max-height: none; max-width: none; width: auto; height: 168px; }
.idea-wire.multi.n4 .iw-screen { height: 150px; }
.idea-wire.multi.n5 .iw-screen { height: 132px; }
.idea-wire.multi { justify-content: center; }
.idea-wire.big.multi .iw-screen { height: 250px; }
.idea-wire.big.multi.n4 .iw-screen { height: 232px; }
.idea-wire.big.multi.n5 .iw-screen { height: 218px; }
.idea-wire.multi .iw-screen { padding: 5px; gap: 3px; }
.idea-wire.multi .iw-h { font-size: 8.5px; }
.idea-wire.multi .iw-sub, .idea-wire.multi .iw-visual { font-size: 7.5px; }
.idea-wire.big.multi .iw-h { font-size: 11px; }
.idea-wire.big.multi .iw-sub, .idea-wire.big.multi .iw-visual { font-size: 9.5px; }
.idea-ref img { aspect-ratio: 4 / 5; height: auto; }

.idea-wire.multi .iw-cta { font-size: 7.5px; padding: 3px 8px; max-width: 100%; }
.idea-wire.big.multi .iw-cta { font-size: 9.5px; padding: 4px 10px; }

/* html5: the picture is the banner, the copy sits on it */
.iw-screen.bleed { position: relative; padding: 0; justify-content: flex-end; }
.iw-screen.bleed .iw-visual { position: absolute; inset: 0; border-radius: 0; }
.iw-screen.bleed .iw-h, .iw-screen.bleed .iw-sub, .iw-screen.bleed .iw-stat, .iw-screen.bleed .iw-cta, .iw-screen.bleed .iw-cap { position: relative; z-index: 1; margin: 0 8px; }
.iw-screen.bleed .iw-h { color: #14161c; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.iw-screen.bleed .iw-cta { margin-bottom: 8px; }
.iw-screen.bleed::after { content: ''; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,0)); }
.iw-screen.bleed > *:not(.iw-visual) { position: relative; z-index: 1; }
/* board: equal columns, a sketch on the idea card, the idea slot everywhere */
.kb-col { flex: 1 1 0; min-width: 210px; }
.kb-col.kb-collapsed { flex: 0 0 132px; }
.kb-sketch .idea-wire { margin: 0; }
.kb-sketch .iw-screen { max-width: 78px; max-height: 104px; border-radius: 7px; }
.kb-sketch .iw-role, .kb-sketch .iw-t { display: none; }
.kb-none-made { opacity: .5; font-size: 10.5px; }
.from-idea { display: inline-flex; align-items: center; gap: 4px; border: 0; background: rgba(255, 200, 60, .16); color: #8a6a2a; border-radius: 999px; padding: 1px 8px 1px 6px; font-size: 10px; font-weight: 600; font-family: ui-monospace, monospace; cursor: pointer; margin-top: 4px; }
.from-idea:hover { background: rgba(255, 200, 60, .3); }
.from-idea svg { width: 10px; height: 10px; }
.cc-idea { padding: 0 8px; }
.lt-code .from-idea { margin-top: 3px; }
/* every modal scrolls: a long ticket was unreadable below the fold */
.modal { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }

/* A draft is a creative that only exists as a brief - it should read that way:
   a dashed edge, a quiet state pill, and one clear next action. */
.kb-card.kb-draft { border: 1px dashed rgba(120, 128, 150, .45); background: #fcfcfd; box-shadow: none; }
.kb-card.kb-draft:hover { border-color: rgba(120, 128, 150, .7); }
.kb-card.kb-draft .kb-media { opacity: .92; }
.kb-badge { flex: none; font-size: 9.5px; font-weight: 500; color: #6b7280; background: rgba(120, 128, 150, .12); border-radius: 999px; padding: 1px 8px; align-self: flex-start; letter-spacing: 0; }
.kb-draftacts { gap: 4px; }
.kb-draftacts .kb-act.go { border-color: rgba(19, 115, 51, .3); background: #f4fbf6; }
.kb-draftacts .kb-act.go:hover { background: #eaf7ef; }
.kb-act.kb-more { flex: 0 0 34px; font-size: 14px; line-height: 1; padding: 4px 0; color: var(--muted); }
.cc.cc-draft { border-style: dashed; }
.cc-kind.draft { color: #7b8190; }
.pv-draftbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px dashed rgba(120, 128, 150, .4); border-radius: 12px; padding: 14px 16px; margin-top: 14px; background: #fcfcfd; }
.pv-draftbar b { font-size: 13.5px; }

/* One header for the daily screens (Board, Campaigns) */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-title h2 { margin: 0 0 2px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.sec-title .s { max-width: 62ch; line-height: 1.45; }
.sec-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-controls .chips { display: flex; gap: 5px; flex-wrap: wrap; }
.sec-controls .lib-proj { height: 32px; }
.sec-controls .ghost.small { height: 32px; }
@media (max-width: 720px) { .sec-head { align-items: flex-start; } .sec-controls { width: 100%; } }

/* The explanation lives behind an info button, not under the title */
.sec-title { display: flex; align-items: center; gap: 7px; }
.sec-title h2 { margin: 0; }
.sec-info { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: help; transition: background .12s ease, color .12s ease; }
.sec-info:hover { background: var(--hover); color: var(--ink); }
.sec-info svg { width: 16px; height: 16px; }
.err-fix { margin-left: 6px; white-space: nowrap; }
.act-by { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--muted); }
.conn-note { border-color: var(--orange); background: var(--tint); margin-bottom: 14px; }

/* Roadmap: the diff a plan has to show before it is approved */
.rm-diff { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rm-diff b { color: var(--ink); }
.rm-diff.blocked { color: #b45309; }
.rm-warn { color: var(--orange-ink); font-weight: 600; }
.rm-one { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; align-self: center; }
.rm-one:hover { background: var(--hover); }

/* The morning brief: a counter in the header and a panel over the board.
   It floats on purpose. A card above the work pushes the work down every day
   for the sake of a line you read once, so this one overlays and the board
   stays the first thing on the screen. */
.brief-anchor { position: relative; height: 0; }
.brief-btn.has-todo { border-color: var(--orange); color: var(--orange-ink); background: var(--tint); }
.brief-count { display: inline-flex; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 4px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; }
.brief-pop { position: absolute; z-index: 40; right: 0; top: 6px; width: min(440px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .14); }
.brief-grp + .brief-grp { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.brief-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.brief-pop ul { margin: 0; padding: 0; list-style: none; }
.brief-pop li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.brief-pop li + li { border-top: 1px dashed var(--line); }
.brief-pop li > span { flex: 1; min-width: 0; }
.brief-x { flex: none; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1;
  padding: 0 2px; cursor: pointer; opacity: .45; transition: opacity .12s ease, color .12s ease; }
.brief-x:hover { opacity: 1; color: var(--ink); }
.brief-foot { margin-top: 8px; text-align: right; }
@media (max-width: 720px) { .brief-pop { right: auto; left: 0; } }

/* Bell: an icon button with a count on it, the shape everyone already knows */
.icon-btn { position: relative; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 17px; height: 17px; }
.brief-btn.has-todo { border-color: var(--orange); color: var(--orange-ink); background: var(--tint); }
.icon-btn .brief-count { position: absolute; top: -5px; right: -5px; margin: 0; }
.brief-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }

/* Board tabs */
.tab-count { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.tab.active .tab-count { color: inherit; }

/* Backlog: ideas waiting to become work */
.bl-list { display: flex; flex-direction: column; gap: 8px; }
.bl-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); cursor: pointer; }
.bl-row:hover { border-color: var(--orange); }
.bl-main { min-width: 0; }
.bl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-code { font-size: 11.5px; color: var(--muted); }
.bl-age { margin-top: 2px; }
.bl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.bl-acts { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lt-stage { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }

/* Summary */
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.sum-grid .card, .sum-card { margin-top: 0; }
@media (max-width: 720px) { .bl-row { flex-direction: column; } .bl-side { align-items: flex-start; } }

/* The project switcher: you are IN a project, this is how you leave for another */
.proj-switch { position: relative; padding-bottom: 4px; }
.proj-cur { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.proj-cur:hover { background: var(--hover); }
.proj-cur.open { border-color: var(--orange); }
.proj-cur .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.proj-cur .pchev { width: 15px; height: 15px; flex: none; color: var(--muted); transform: rotate(90deg); transition: transform .12s ease; }
.proj-cur.open .pchev { transform: rotate(-90deg); }
.proj-menu { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px); max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 36px rgba(15, 23, 42, .16); }
.proj-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: 13px; cursor: pointer; text-align: left; }
.proj-opt:hover { background: var(--hover); }
.proj-opt.sel { background: var(--tint); color: var(--orange-ink); font-weight: 600; }
.proj-opt .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-menu-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
/* The composer's project is shown, not chosen: one switcher, in the sidebar */
.cmd-chip-b.static { cursor: default; opacity: .85; }
.cmd-chip-b.static:hover { background: inherit; }

/* Chat folders in the sidebar: a shelf inside a project */
.fld { margin-bottom: 1px; }
.fld-row { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.fld-row:hover { background: var(--hover); }
.fld.open > .fld-row .pchev { transform: rotate(90deg); }
.fld-ctx { color: var(--orange); font-size: 10px; flex: none; }
.fld-ico { width: 22px; height: 22px; border: 0; background: none; color: var(--muted); border-radius: 6px; padding: 0; flex: none; opacity: 0; }
.fld-row:hover .fld-ico { opacity: 1; }
.fld-ico:hover { background: var(--bg); color: var(--ink); }
.fld .proj-chats { padding-left: 12px; margin-left: 6px; border-left: 1px solid var(--line); }
.fld-add { float: right; font-weight: 500; }
.proj-chats.drop, .fld.drop > .fld-row { background: var(--tint); outline: 1px dashed var(--orange); }
.chat-item.dragging { opacity: .5; }