/* Colours, corners, shadows, spacing and motion live in tokens.css */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: Poppins, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4em; }
h1 { font-size: 1.25rem; }
h2 { font-size: 19px; } /* section heading (Design Book 13) */
h3 { font-size: 0.95rem; }
p { margin: 0 0 0.8em; }
.wrap { max-width: 920px; margin: 0 auto; padding: 16px 16px 80px; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.center { text-align: center; }
.pad { padding: 40px 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } .grid2.keep { grid-template-columns: 1fr 1fr; } }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--navy); color: #fff;
}
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 500; white-space: nowrap; margin-right: auto; }
.brand b { font-weight: 700; }
.logo { width: 30px; height: 30px; color: var(--navy-2); display: inline-flex; flex: none; }
.logo svg { width: 100%; height: 100%; }

/* Main tabs: in the header on wide screens, a bottom tab bar on phones */
.tabs { display: flex; gap: 4px; align-items: center; }
.tabs a { display: flex; align-items: center; gap: 6px; color: #cdd6e6; text-decoration: none; padding: 7px 12px; border-radius: 9px; font-size: 0.85rem; white-space: nowrap; }
.tabs a.active { color: var(--navy); background: var(--gold); font-weight: 600; }
.tabs svg, .menu summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Credit balance pill (always visible; tap to top up) */
.credit-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--gold); color: var(--navy); text-decoration: none; font-weight: 700; font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background .3s, color .3s; }
.credit-pill svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.credit-pill:hover, .credit-pill.active { background: #ffe14d; color: var(--navy); }
.credit-pill.low { background: #b42318; color: #fff; }
.credit-pill.low svg { stroke: #fff; }
.credit-pill.up { animation: pill-up 1.2s ease; }
.credit-pill.down { animation: pill-down 1.2s ease; }
@keyframes pill-up { 30% { background: #1f9d55; transform: scale(1.08); } }
@keyframes pill-down { 30% { background: color-mix(in srgb, var(--gold) 45%, transparent); } }
.credit-pill[hidden] { display: none; }
@media (max-width: 400px) { .brand b { display: none; } .topbar { gap: 8px; } .credit-pill { padding: 0 10px; } }

/* Account menu (Admin, Password, Sign out) */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary, .menu summary.active { background: var(--gold); color: var(--navy); }
.menu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; display: grid; }
.menu-list a, .menu-list .link { text-align: left; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.menu-list a:hover, .menu-list .link:hover, .menu-list a.active { background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
.menu-list a[hidden] { display: none; }

@media (max-width: 760px) {
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    justify-content: space-around; gap: 0;
    background: var(--navy); border-top: 1px solid rgba(255,255,255,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabs { right: 20%; }
  .tabs a { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 0.66rem; border-radius: 10px; }
  .tabs a.active { background: transparent; color: var(--gold); }
  .tabs svg { width: 22px; height: 22px; }
  .menu.tools { position: fixed; right: 0; bottom: 0; width: 20%; z-index: 16; }
  .menu.tools summary { width: 100%; height: auto; border-radius: 0; background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); font-size: 0.66rem; color: #cdd6e6; }
  .menu.tools[open] summary, .menu.tools summary.active { background: var(--navy); color: var(--gold); }
  .menu.tools summary svg { width: 22px; height: 22px; }
  .menu.tools summary .plabel { display: block; }
  .menu.tools .menu-list { position: fixed; right: 8px; left: auto; top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); max-height: 70vh; overflow: auto; min-width: 200px; }
  .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Never let anything push the page wider than the phone */
html, body { max-width: 100%; overflow-x: hidden; }
select { text-overflow: ellipsis; }
.wrap > * { min-width: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.hero { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; border: 0; }
.hero .muted { color: #b9c5da; }

label { display: block; font-weight: 500; font-size: 0.82rem; margin: 0 0 6px; }
.field { margin-bottom: 14px; }
input[type=text], input:not([type]), input[type=url], input[type=email], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 40px;
}
.hero textarea { background: #fff; color: #0f172a; border: 0; font-size: 0.95rem; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hero label { color: #dfe6f2; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

.btn { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 8px 16px; min-height: 38px; font-size: 0.88rem; cursor: pointer; background: var(--navy); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--bad); border: 1px solid currentColor; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.link { background: none; border: 0; font: inherit; cursor: pointer; }

.jobs { display: grid; gap: 10px; }
.job { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.job:hover { border-color: var(--muted); }
.thumb { width: 96px; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--navy) center / cover no-repeat; display: grid; place-items: center; color: var(--gold); font-size: 1.3rem; }
.job h3 { margin: 0 0 4px; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pill { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--line); color: var(--ink); }
.pill.review { background: var(--gold); color: var(--gold-ink); }
.pill.published { background: var(--ok); color: #fff; }
.pill.failed { background: var(--bad); color: #fff; }
.pill.work { background: #2453a8; color: #fff; }
.bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--gold); transition: width 0.6s; }

video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; display: block; }
.thumbimg { width: 100%; max-width: 360px; border-radius: 10px; display: block; }
.log { font-size: 0.82rem; max-height: 260px; overflow: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.log div { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.log .warn { color: var(--warn); }
.log .error { color: var(--bad); }
.issues li { margin-bottom: 8px; }
.notice { border-left: 4px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--card)); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 0.9rem; }
.notice.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card)); }
.counter { float: right; font-weight: 400; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; max-width: calc(100% - 32px); z-index: 20; }
details summary { cursor: pointer; font-weight: 600; }

/* Ideas & series */
.ideas { display: grid; gap: 8px; }
.idea { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line, #e3e7ef); border-radius: 10px; background: var(--card); }
.idea .num { font-weight: 700; color: var(--gold); min-width: 1.6em; padding-top: 8px; }
.idea input[type=checkbox] { width: 20px; height: 20px; margin-top: 10px; }
.idea .topic { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.idea select { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: inherit; }
.idea .grow { min-width: 0; }
@media (max-width: 520px) { .idea { grid-template-columns: auto 1fr auto; } .idea .num { display: none; } }

/* Premium thumbnail choice */
.thumbpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.thumbpick figure { margin: 0; border: 2px solid transparent; border-radius: 12px; padding: 6px; }
.thumbpick figure.chosen { border-color: var(--gold); }
.thumbpick figcaption { margin-top: 6px; font-weight: 600; text-align: center; }

.btn.google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; gap: 10px; }
.center { text-align: center; }

/* Admin money tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(127,127,127,.25); white-space: nowrap; }
.tbl input:not([type=checkbox]) { min-width: 0; }
.tbl tr.neg td { background: rgba(220, 38, 38, .14); }
.tbl tr.warn td { background: rgba(245, 158, 11, .14); }
.tbl tr.ok td { background: rgba(22, 163, 74, .10); }
@media (max-width: 560px) { .row.spread > .btn.gold { width: 100%; } }

/* Sign in / Create account switch */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.08); margin: 4px 0 14px; }
.seg button { font: inherit; font-weight: 600; border: 0; border-radius: 9px; padding: 10px; min-height: 42px; cursor: pointer; background: transparent; color: #cdd6e6; }
.seg button.on { background: #fff; color: var(--navy); }

/* Landing page (signed out) */
.land-hero { display: grid; gap: 24px; align-items: center; grid-template-columns: 1.1fr 0.9fr; margin: 28px 0 10px; }
.land-copy .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.land-title { font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.12; margin: 0 0 12px; }
.land-sub { color: var(--muted); font-size: 0.95rem; max-width: 46ch; }
.ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 4px var(--navy); }
.land-block { margin: 34px 0; }
.land-block h2 { font-size: 1.15rem; margin-bottom: 12px; }
.steps3 { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.steps3 .card { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-static { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: .9rem; }
.plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.plan { margin: 0; }
.plan .price { font-size: 1.35rem; font-weight: 700; margin: 6px 0 2px; }
.plan .price span { font-size: .85rem; font-weight: 500; color: var(--muted); }
.land-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; border-top: 1px solid var(--line); padding: 18px 0 10px; color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
  .land-hero, .steps3 { grid-template-columns: 1fr; }
  .land-hero { margin-top: 12px; }
}
.btn.chip { min-height: 32px; padding: 5px 12px; font-weight: 500; font-size: .8rem; text-align: left; }
details.faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
details.faq p { margin: 8px 0 0; }
input[type=search] { width: 100%; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 42px; }

/* Compact buttons in a two-column grid (video page actions and downloads). */
.btngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: .8rem; border-radius: 9px; font-weight: 600; width: 100%; }
@media (min-width: 760px) { .btngrid { grid-template-columns: repeat(4, 1fr); } }

/* Folders and the voice button */
.thumb.fold { background: linear-gradient(135deg, var(--gold), #e0a800); color: var(--gold-ink); }
.job.folder { border-left: 3px solid var(--gold); }
.btn.mic { min-width: 46px; padding: 0 12px; }
.btn.mic.listening { background: var(--bad); color: #fff; border-color: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }

.foldersec { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Scene editor */
.scenebody { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; margin-top: 10px; }
.scenebody > .grow { min-width: 0; }
.thumbtile { width: 150px; border-radius: 8px; border: 1px solid var(--line); background-color: #000; background-repeat: no-repeat; }
@media (max-width: 560px) { .scenebody { grid-template-columns: 1fr; } .thumbtile { width: 120px; } }
/* Editor stage B: each visual's own small picture and how long it shows */
.visrow { gap: 10px; align-items: center; margin: 4px 0 6px; }
.pictile { width: 96px; flex: none; border-radius: 6px; border: 1px solid var(--line); background-color: #000; background-repeat: no-repeat; }
.addpic { border-top: 1px dashed var(--line); padding-top: 8px; }
.lineedit { display: grid; gap: 4px; margin-bottom: 8px; }
.fxbox { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.fxbox summary { cursor: pointer; padding: 4px 0; }
.scene textarea, .scene input:not([type=checkbox]) { width: 100%; }

/* Templates */
.tplgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tpl h3 { margin: 10px 0 4px; }
.tplmedia { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--navy); display: grid; place-items: center; }
.tplmedia.tall { aspect-ratio: 9 / 16; max-height: 360px; margin: 0 auto; }
.tplmedia img { width: 100%; height: 100%; object-fit: cover; }
.tplnone { color: #cdd6e6; padding: 10px; text-align: center; }

/* Talk to the studio */
.assist-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--gold); color: var(--gold-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 9; display: grid; place-items: center; padding: 0; }
.assist-fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assist-panel { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; z-index: 9; }
.assist-log { max-height: 220px; overflow: auto; display: grid; gap: 6px; margin: 8px 0; }
.assist-me, .assist-bot { padding: 8px 10px; border-radius: 10px; font-size: 0.92rem; }
.assist-me { background: var(--navy-2); color: #fff; justify-self: end; }
.assist-bot { background: var(--bg); justify-self: start; }

/* On phones the bottom tab bar is there: keep the microphone button and its panel above it */
@media (max-width: 760px) {
  .assist-fab { bottom: calc(86px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .assist-panel { bottom: calc(144px + env(safe-area-inset-bottom)); }
}

.menu .plabel { display: none; }

/* ---------- My videos: YouTube-style shelves (a sideways row that opens into a full list) ---------- */
.pagetitle { font-size: 1.25rem; margin: 4px 0 10px; }
.shelf { margin-bottom: 18px; }
.shelf-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 6px 0; color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; text-align: left; }
.shelf-head .chev { margin-left: auto; transition: transform .2s ease; color: var(--muted); }
.shelf-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.shelf-title { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 6px; }
.shelf-title h2 { margin: 0; }
.shelf-tools { flex-wrap: nowrap; margin: 4px 0 6px; }
.shelf-tools input { flex: 1; min-width: 0; }
.shelf-tools select { width: auto; }
.shelf-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tile { flex: 0 0 auto; width: 200px; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.tile-img { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--navy-2) center / cover no-repeat; display: grid; place-items: center; color: var(--gold); overflow: hidden; }
.tile-img.has > svg { display: none; }
.tile-img.fold { background: linear-gradient(135deg, #ffd400, #e8b400); color: #2b2200; }
.tile.more .tile-img { color: #fff; font-weight: 600; font-size: .9rem; }
.tile-img .dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.78); color: #fff; font-size: .72rem; padding: 1px 5px; border-radius: 4px; }
.tile-img.fold .dur { background: rgba(0,0,0,.65); }
.tile-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.tile-bar i { display: block; height: 100%; background: var(--gold); }
.tile-title { font-size: .86rem; font-weight: 600; line-height: 1.3; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .74rem; color: var(--muted); margin-top: 3px; }
.tile-meta .pill { font-size: .68rem; padding: 1px 7px; }
.thumb.has { color: transparent; }
@media (max-width: 760px) { .tile { width: 168px; } }

/* ---------- Talk to the studio: the page behind is blurred so the conversation stands out ---------- */
.assist-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(5, 12, 26, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.assist-panel { z-index: 31; }
body.assist-open .assist-fab { display: none; }
.assist-log { max-height: 46vh; }
.assist-listen { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); margin: 0 0 6px; }
.assist-listen .dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: pulse 1s infinite ease-in-out; }
.btn.mic.on { background: #e5484d; color: #fff; border-color: #e5484d; }
@keyframes pulse { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
.typing { display: inline-flex; gap: 4px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .assist-listen .dot, .typing span { animation: none; } }
@media (max-width: 760px) {
  .assist-panel { left: 10px; right: 10px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Phone tab bar: one continuous bar; the Profile tab sits on it at exactly the same height as the others */
@media (max-width: 760px) {
  .tabs { right: 0; padding-right: calc(20% + 4px); }
  .menu.tools summary { background: transparent; border-top: 0; padding: 12px 2px calc(12px + env(safe-area-inset-bottom)); }
  .menu.tools[open] summary, .menu.tools summary.active { background: transparent; }
}
.thumb.has > svg { display: none; }

/* Studio helpers: "Best settings" and "Learn from a video" */
.row.helpers { gap: 8px; margin: -2px 0 8px; }
.row.helpers .btn { width: auto; color: #fff; border-color: rgba(255,255,255,.35); }
.helper-box { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; color: #fff; }
.helper-box .muted { color: #cdd6e6; }
.helper-box .btn.ghost { color: #fff; }
.addons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.addon { display: block; text-decoration: none; color: var(--ink); margin: 0; }
a.addon:hover { border-color: var(--gold); }

/* ⋮ menu on every video (vertical dots, bottom-right corner of the card) */
.tile, .job { position: relative; }
.job:has(.dots) { padding-right: 34px; }
.tile:has(.dots) .tile-meta { padding-right: 30px; }
.dots { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.dots:hover, .dots:focus-visible { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--ink); }
.dotmenu { position: fixed; z-index: 40; min-width: 220px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.35); padding: 6px; display: grid; }
.dotmenu button { text-align: left; font: inherit; font-size: 0.92rem; padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.dotmenu button:hover, .dotmenu button:focus-visible { background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
.dotmenu button.bad { color: #e5484d; }

/* The price a person pays: green, bold and easy to see */
.price { color: #22c55e; font-weight: 800; font-size: 1.08rem; letter-spacing: .2px; white-space: nowrap; }
.chip.active { background: var(--gold); color: var(--navy); }
.menu-list .menu-head { padding: 10px 12px 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Two menus: the profile icon (top right) and Tools (bottom right on phones, beside the profile icon on wide screens) */
.menu summary .plabel { display: none; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.acct .menu-list { min-width: 200px; }
@media (min-width: 761px) { .menu.tools { order: 3; } .menu.acct { order: 4; } }
.menu-list { max-height: calc(100vh - 90px); overflow: auto; }
/* Menus open over the page (fixed), so a short page never cuts them off */
.menu.acct .menu-list { position: fixed; top: calc(58px + env(safe-area-inset-top)); right: 10px; }
@media (min-width: 761px) { .menu.tools .menu-list { position: fixed; top: 58px; right: 56px; } }

/* YouTube-sized pieces (Oct 18 pass): text never auto-enlarged by the phone, calm folder tiles
   (dark like a YouTube playlist, small icon, gold only as an accent), two-column templates on phones. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.thumb.fold, .tile-img.fold { background: var(--navy-2); color: var(--gold); }
.tile-img.fold::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 34%; background: rgba(0,0,0,.35); }
.tile-img.fold .dur { z-index: 1; }
.tile-img.fold svg { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .tplgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tpl { padding: 10px; }
  .tpl h3 { font-size: .86rem; margin-top: 8px; }
  .tpl p { font-size: .74rem; margin-bottom: 6px; }
  .tpl .btn { min-height: 32px; font-size: .78rem; padding: 4px 8px; }
  .tplmedia.tall { max-height: 220px; }
}

/* Video and folder cards in rows: 80% of the earlier size (YouTube-like density) */
.tile { width: 160px; }
@media (max-width: 760px) { .tile { width: 134px; } }
.tile-title { font-size: .8rem; }
.tile-meta { font-size: .7rem; }
.tile-img .dur { font-size: .66rem; }
.tile-img svg { width: 18px; height: 18px; }

/* When Tools or the profile menu is open, the page behind is softly blurred and dimmed */
body:has(.menu[open])::after { content: ''; position: fixed; inset: 0; z-index: 14; background: rgba(5, 12, 26, .22); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); animation: fadein var(--t-mid) var(--ease-out) both; }
.menu[open] { z-index: 17; }
/* The header (which holds both menus) rises above the blur so the open menu stays sharp */
body:has(.menu[open]) .topbar { z-index: 20; }


/* ================= Stage 1 (iPhone feel): one soft, calm layer on top of everything ================= */

/* Cards: large soft corners, hairline border, layered shadow */
.card, .job, .idea, .tpl, .dotmenu, .menu-list { border-radius: var(--r-lg); border-color: var(--line); }
.card { box-shadow: var(--shadow), var(--glow); padding: var(--s-4); margin-bottom: var(--s-4); }
.job { border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--s-2); }
.job:hover { border-color: var(--line); }
.thumb, .tile-img { border-radius: var(--r-sm); }
video { border-radius: var(--r-md); }
.notice { border-radius: var(--r-sm); }
.menu-list, .dotmenu { box-shadow: var(--shadow-up); }

/* Fields: calmer, 44px tall, soft focus ring */
input[type=text], input:not([type]), input[type=url], input[type=email], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  border-radius: var(--r-sm); min-height: var(--tap); border-color: var(--line);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent); }

/* Buttons: 44px tap targets, pill-soft corners, physical press */
.btn { min-height: var(--tap); border-radius: var(--r-sm); transition: transform var(--t-mid) var(--ease-spring), background-color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.btn.sm { min-height: 40px; border-radius: var(--r-sm); }
.btn.gold { box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.btn.chip { min-height: 36px; border-radius: var(--r-pill); }
.btn:active:not([disabled]), .tile:active, .job:active, .tabs a:active, .menu summary:active, .credit-pill:active, .dots:active, .dotmenu button:active, .menu-list a:active, .assist-fab:active {
  transform: scale(var(--press-scale)); transition-duration: 90ms;
}
.tile, .job, .tabs a, .menu summary, .credit-pill, .dots, .assist-fab, .shelf-head { transition: transform var(--t-mid) var(--ease-spring), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.menu-list a, .menu-list .link, .dotmenu button { min-height: var(--tap); display: flex; align-items: center; }
.dots { width: var(--tap); height: var(--tap); right: -4px; bottom: -4px; }

/* Frosted-glass top bar and bottom tab bar: content scrolls softly underneath */
/* The blur lives on a ::before layer: a backdrop-filter on .topbar itself would trap the fixed phone tab bar inside it. */
.topbar { background: transparent; isolation: isolate; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media (max-width: 760px) {
  .tabs { background: var(--glass) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .menu.tools summary { background: transparent !important; }
  .tabs { border-top: 1px solid rgba(255,255,255,.06); }
  .tabs a { min-height: var(--tap); }
}

/* Gentle reveals: pages, menus and status chips fade in instead of popping */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
#app.enter > * { animation: rise var(--t-slow) var(--ease-out) both; }
.menu[open] .menu-list, .dotmenu { animation: pop var(--t-mid) var(--ease-spring) both; transform-origin: bottom right; }
.acct[open] .menu-list { transform-origin: top right; }
.pill { transition: background-color var(--t-slow) var(--ease-out), color var(--t-slow) var(--ease-out); }
.bar > i, .tile-bar > i { transition: width .8s var(--ease-out); }
.toast { border-radius: var(--r-md); box-shadow: var(--shadow-up); animation: rise var(--t-mid) var(--ease-spring) both; }

/* Rows glide and settle like the Photos app */
.shelf-row { scroll-snap-type: x mandatory; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tile { scroll-snap-align: start; }

/* Floating mic: never covers buttons (pages leave room for it) and shrinks while you scroll down */
.wrap { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { .wrap { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } }
.assist-fab { transition: transform var(--t-mid) var(--ease-spring), opacity var(--t-fast) var(--ease-out); }
body.scrolling-down .assist-fab { transform: scale(.72); opacity: .82; }

/* Video player follows the real shape of the video (no black bars on Shorts) */
video.fit-tall { max-width: 340px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  #app.enter > *, .menu[open] .menu-list, .dotmenu, .toast { animation: fadein var(--t-mid) ease both; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  body.scrolling-down .assist-fab { transform: none; }
}

/* ===== Redesign stage 2: bottom sheets, Tools sheet on phones, desktop side rail ===== */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(5, 12, 26, .32); animation: fadein var(--t-mid) var(--ease-out) both; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 85vh; display: flex; flex-direction: column; margin: 0 auto; max-width: 560px;
  background: var(--card); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-up);
  padding-bottom: env(safe-area-inset-bottom); animation: sheet-up var(--t-slow) var(--ease-spring) both; transition: transform var(--t-mid) var(--ease-out); }
.sheet.out { animation: sheet-down var(--t-fast) var(--ease-out) both; }
.sheet-back.out { animation: fadeout var(--t-fast) var(--ease-out) both; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fadeout { to { opacity: 0; } }
.sheet-grip { display: grid; place-items: center; padding: 10px 0 4px; cursor: grab; touch-action: none; }
.sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.sheet-body { overflow: auto; padding: 4px var(--s-5) var(--s-5); overscroll-behavior: contain; }
.sheet-title { margin: 6px 0 6px; font-size: 1.05rem; text-align: center; }
.sheet-title.small { font-size: 0.85rem; color: var(--muted); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sheet-text { margin: 0 0 var(--s-4); color: var(--muted); text-align: center; font-size: 0.9rem; line-height: 1.5; }
.sheet-actions { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.sheet-actions .btn { min-height: 48px; font-size: 0.95rem; border-radius: var(--r-md); }
.sheet-actions .btn.danger { background: var(--bad); color: #fff; border: 0; }
.sheet-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 6px; font-weight: 700; font-size: 1.4rem; }
.sheet-icon.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.sheet-list { display: grid; }
.sheet-list button { font: inherit; font-size: 0.95rem; text-align: left; min-height: 50px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-spring); }
.sheet-list button:active { background: color-mix(in srgb, var(--gold) 18%, var(--card)); transform: scale(var(--press-scale)); }
.sheet-list button.bad { color: var(--bad); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }
body.sheet-open { overflow: hidden; }

/* Tools menu on phones: a floating card above the bottom-right of the tab bar (not full width) */
@media (max-width: 760px) {
  .menu.tools .menu-list { position: fixed; left: auto; right: 10px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(62vw, 280px); min-width: 0; max-height: 72vh;
    border-radius: var(--r-lg); padding: 6px; z-index: 30; transform-origin: bottom right; transition: transform var(--t-mid) var(--ease-out); }
  .menu.tools .menu-list a { min-height: 46px; font-size: 0.95rem; }
}

/* Smooth page change: the old page fades a little while the new one loads, then the new one rises in */
#app { transition: opacity var(--t-fast) var(--ease-out); }
#app.leave { opacity: .35; }

/* Computers: a side rail on the left instead of a stretched phone layout */
@media (min-width: 1100px) {
  .tabs { position: fixed; top: 56px; left: 0; bottom: 0; width: 210px; z-index: 5; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--s-5) var(--s-3);
    background: var(--card); border-right: 1px solid var(--line); }
  .tabs a { color: var(--ink); padding: 12px 14px; border-radius: var(--r-md); font-size: 0.92rem; gap: 12px; }
  .tabs a:hover { background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
  .tabs a.active { background: color-mix(in srgb, var(--gold) 26%, var(--card)); color: var(--ink); }
  #app { margin-left: calc(210px + max(var(--s-4), (100% - 210px - 920px) / 2)); margin-right: auto; }
  .topbar { z-index: 12; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .menu.tools .menu-list { animation: fadein var(--t-mid) ease both !important; }
  .sheet.out { animation: fadeout var(--t-fast) ease both; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ===== Redesign stage 3: forms grouped like iPhone Settings ===== */
.fgroup { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-md); padding: var(--s-3) var(--s-4) var(--s-4); margin: 0 0 var(--s-3); }
.card:not(.hero) .fgroup { background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: var(--line); }
.fgroup-h { margin: 0 0 var(--s-2); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9fb0cc; }
.card:not(.hero) .fgroup-h { color: var(--muted); }
.fgroup .field:last-child, .fgroup .grid2:last-child .field { margin-bottom: 0; }
.fgroup .check { margin: 4px 0 10px; }
details.adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: var(--tap); margin: calc(-1 * var(--s-3)) 0 0; padding: var(--s-2) 28px var(--s-2) 0; position: relative; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--t-mid) var(--ease-spring); }
details.adv[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.adv[open] > summary { margin-bottom: var(--s-2); }
details.adv:not([open]) { padding-bottom: var(--s-1); }
.adv-sub { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.78rem; opacity: .8; }
details.adv[open] > :not(summary) { animation: rise var(--t-slow) var(--ease-out) both; }

/* ===== Redesign stage 4: skeletons, ready check-mark, "…" button ===== */
.sk { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--r-sm); }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 55%, transparent), transparent); animation: shimmer 1.4s var(--ease-out) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk.ln { height: 11px; margin-top: 9px; border-radius: 6px; }
.sk.ln.short { width: 55%; }
.tile.skel, .job.skel { pointer-events: none; }
.tile.skel .tile-img { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.job.skel .thumb { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn.more { width: var(--tap); min-width: var(--tap); padding: 0; }
.celebrate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; pointer-events: none; background: rgba(5, 12, 26, .18); animation: fadein var(--t-mid) var(--ease-out) both; }
.celebrate.out { animation: fadeout 380ms var(--ease-out) both; }
.celebrate-card { display: grid; justify-items: center; gap: 10px; padding: 22px 28px; border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-up); animation: pop var(--t-slow) var(--ease-spring) both; }
.celebrate svg { width: 64px; height: 64px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.celebrate circle { stroke: var(--ok); stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw 600ms var(--ease-out) forwards; }
.celebrate path { stroke: var(--ok); stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 360ms 480ms var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } .celebrate circle, .celebrate path { animation: none; stroke-dashoffset: 0; } }

/* ===== Redesign stage 5: placeholder cards for things being written ===== */
.skel-card { display: grid; gap: 0; }
.skel-card .sk.ln { margin-top: 10px; }
.skel-label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.skel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; animation: breathe 1.4s var(--ease-out) infinite; }
@keyframes breathe { 50% { opacity: .35; transform: scale(.8); } }
.hero .skel-card, .hero + .skel-card { color: var(--ink); }
.helper-box + .skel-card, #helperout .skel-card, #ihelper .skel-card { margin: 8px 0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); box-shadow: none; }
#helperout .sk, #ihelper .sk { background: rgba(255,255,255,.1); }
#helperout .skel-label, #ihelper .skel-label { color: #cdd6e6; }
@media (prefers-reduced-motion: reduce) { .skel-dot { animation: none; } }
.mythumb { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mythumb figcaption { margin-bottom: 6px; }
.sheet-form { display: grid; gap: 6px; }
.sheet-form input { min-height: 48px; }
.sheet-list button.folder-opt { display: flex; align-items: center; gap: 12px; }
.sheet-list button.folder-opt.cur { color: var(--muted); }
/* Select several videos, then move them */
.selbar { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 25; width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-up); animation: sheet-up var(--t-slow) var(--ease-spring) both; }
@media (min-width: 761px) { .selbar { bottom: 24px; } }
#mvroot.selecting a.job { position: relative; padding-left: 44px; }
#mvroot.selecting a.job::before { content: ''; position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid var(--muted); transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
#mvroot.selecting a.job.picked { outline: 2px solid var(--gold); }
#mvroot.selecting a.job.picked::before { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--card); }

.shelf-tools { flex-wrap: wrap; }
.shelf-tools #mvq { flex: 1 1 100%; }
.shelf-tools #mvs { flex: 1 1 auto; width: auto; }
.shelf-tools #mvsel { flex: 0 0 auto; width: auto; }
/* Scene editor controls stay compact */
.scenehead { flex-wrap: nowrap; gap: 8px; }
.scenehead .btn, .scene .own .btn, .scene .addscene { width: auto; flex: 0 0 auto; }
.scenehead .btn.mv { width: var(--tap); padding: 0; }
.scene .own { flex-wrap: wrap; align-items: center; }
.scene .addscene { margin-top: var(--s-3); }
.scene.new { border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent); }
.accent-voice { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.accent-voice audio { width: 100%; max-width: 260px; height: 36px; }
.accent-voice .btn { width: auto; flex: 0 0 auto; }
.accentbtn { margin-top: 6px; width: auto; }
/* Thumbnail Studio */
.engines { border: 0; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 8px; }
.engines legend { margin-bottom: 6px; color: #dfe6f2; }
.engine { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); cursor: pointer; color: #fff; }
.engine input { margin-top: 4px; }
.engine > span { display: grid; gap: 2px; }
.engine .small { color: #cdd6e6; }
.engine:has(input:checked) { border-color: var(--gold); background: rgba(255, 212, 0, .08); }
.engine.off { opacity: .5; cursor: not-allowed; }
.thumbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); margin-top: var(--s-3); }
.thumbcard { position: relative; margin: 0; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.thumbcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--navy); }
.thumbcard img.vertical { aspect-ratio: 9 / 16; max-height: 420px; object-fit: contain; }
.thumbcard img.square { aspect-ratio: 1; }
.thumbcard figcaption, .thumbcard > p, .thumbcard.failed { padding: 10px 12px; }
.thumbcard .btn { width: auto; }
.thumbcard .tip { color: var(--ok); margin-top: 4px; }
.thumbimg-sk { aspect-ratio: 16 / 9; border-radius: 0; }
.thumbimg-sk.vertical { aspect-ratio: 9 / 16; max-height: 420px; }
.thumbimg-sk.square { aspect-ratio: 1; }
.thumbcard.skel .sk.ln { margin: 10px 12px 0; }
.thumbcard.skel .skel-label { padding: 10px 12px; }
.tscore { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: var(--r-pill); font-weight: 700; font-size: 0.85rem; color: #fff; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }
.tscore.hi { background: rgba(15, 138, 75, .9); }
.tscore.mid { background: rgba(180, 83, 9, .9); }
/* Two-choice switch (Same idea / New topic) */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); gap: 2px; }
.segbtn { font: inherit; font-size: 0.85rem; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: var(--r-pill); min-height: 38px; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.segbtn.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.learned li { margin-bottom: 4px; }
/* What to make next */
.lessons { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.lessons li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; }
.lessons li span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--ok); }
.lessons li.avoid span { background: var(--bad); }
.ideacards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.ideacard .btn { width: auto; }
.tscore.inline { position: static; flex: none; }
.stattable { display: grid; }
.statrow { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.qualityline { margin: 6px 0 0; }
/* Studio Team */
.teamrow { display: flex; flex-wrap: wrap; gap: 8px; }
.teammate { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); color: #dfe6f2; }
.teamanswer .teammate { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.teammate.on .ava { animation: breathe 1.4s var(--ease-out) infinite; }
.ava { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.68rem; font-weight: 700; color: #fff; flex: none; background: #475569; }
.ava-trends { background: #0ea5e9; } .ava-strategist { background: #dc2626; } .ava-writer { background: #7c3aed; } .ava-hook { background: #ea580c; }
.ava-director { background: #0891b2; } .ava-thumbnail { background: #db2777; } .ava-analyst { background: #059669; } .ava-social { background: #2563eb; }
.ava-ads { background: #ca8a04; } .ava-email { background: #4f46e5; }
.working { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.teamsteps { padding-left: 20px; display: grid; gap: 6px; font-size: 0.92rem; }
.teamvids { display: grid; gap: 8px; }
.teamvid { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.teamvid .btn { width: auto; flex: none; }
.byrole { margin-top: 12px; }
.byrole summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.rolepart { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.rolepart ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- My videos: dark studio look (matches the design mock-up) ---------- */
body.dark-page {
  --bg: #0a1730; --card: #13264a; --ink: #f2f5fb; --muted: #9fb0c9; --line: rgba(255, 255, 255, 0.09);
  background: radial-gradient(120% 60% at 50% 0%, #10244a 0%, #0a1730 60%) fixed, #0a1730;
}
body.dark-page .card { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
body.dark-page input, body.dark-page select { background: #0f2042; color: var(--ink); border-color: rgba(255,255,255,.12); }
body.dark-page .btn.ghost { color: var(--ink); border-color: rgba(255,255,255,.16); }
.brand b { color: var(--gold); }
@media (max-width: 400px) { .brand b { display: inline; } .brand { font-size: .9rem; } }
@media (max-width: 340px) { .brand b { display: none; } }

.mvhead h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 0; }
.mvhead p { color: var(--muted); margin: 0 0 12px; font-size: .95rem; }
.mvtools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.mvsearch { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.mvsearch svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.mvsearch input { padding-left: 36px; border-radius: 999px; min-height: 40px; }
.mvtools select { width: auto; max-width: 128px; border-radius: 999px; min-height: 40px; font-size: .82rem; }
.mvtools .btn { border-radius: 999px; min-height: 40px; }
#mvchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
#mvchips::-webkit-scrollbar { display: none; }
#mvchips .chip { flex: none; display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
#mvchips .chip b { font-weight: 700; color: var(--muted); font-size: .74rem; }
#mvchips .chip.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
#mvchips .chip.on b { color: var(--gold-ink); }

.shelf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.shelf-top h2 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.shelf-top .cnt { font-size: .85rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.seeall { background: none; border: 0; padding: 4px 0; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.seeall svg.up { transform: rotate(-90deg); }
.shelf + .shelf { border-top: 1px solid var(--line); }
.mvfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.mvfoot .btn { font-size: 13px; min-height: 44px; padding: 8px 10px; white-space: nowrap; }

/* Tiles: rounded thumbnail, small play button in the middle, duration, progress line */
.tile { position: relative; }
.tile-img { border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.playbtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 14, 28, .55); border: 2px solid rgba(255,255,255,.9); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.playbtn svg { margin-left: 2px; }
.tile-img.has > .playbtn { display: grid; }
.thumb .playbtn { width: 28px; height: 28px; }
.thumb.has { color: #fff; }
.tile-img .dur { font-weight: 600; border-radius: 6px; padding: 1px 6px; }
.tile-bar { height: 4px; }
.tile-title { font-size: .92rem; font-weight: 700; margin-top: 8px; padding-right: 22px; }
.tile-meta .pill { font-size: .72rem; padding: 2px 9px; }
.tile .dots { position: absolute; right: -4px; bottom: 0; }
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 12px; }
.tilegrid .tile { width: auto; }
.tile.picked .tile-img { outline: 3px solid var(--gold); outline-offset: 2px; }
.tile.picked .tile-img::after { content: "✓"; position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-weight: 800; }
#mvroot.selecting .tile .dots { display: none; }

/* Folder art: a coloured folder with thumbnails peeking out behind it */
  background: radial-gradient(90% 90% at 20% 80%, color-mix(in srgb, var(--fc) 55%, #000) 0%, color-mix(in srgb, var(--fc) 22%, #08122a) 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.ftile .tile-title i.live { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.fbar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); margin-top: 6px; width: 80%; overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.ftools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ftools .dotc { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.5); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 8px 0 12px; }
.swatch { display: grid; justify-items: center; gap: 4px; background: none; border: 0; color: var(--ink); font: inherit; font-size: .72rem; cursor: pointer; padding: 4px 0; border-radius: 10px; }
.swatch span { width: 38px; height: 38px; border-radius: 50%; background: var(--sw); border: 2px solid rgba(127,127,127,.35); }
.swatch.on span { outline: 3px solid var(--gold); outline-offset: 2px; }
.selbar { gap: 8px; }
.selbar #selcount { margin-right: auto; }
.mvtools .btn, .mvtools select { flex: none; width: auto; }
.mvsearch { flex: 1 1 auto; }
.mvsearch input { width: 100%; }
#mvchips { flex-wrap: nowrap; }
.playbtn { width: 30px; height: 30px; border-width: 1.6px; }
.playbtn svg { width: 11px; height: 11px; }
.tile-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.tile-meta .pill { white-space: nowrap; flex: none; }
.tile-meta > span:not(.pill) { overflow: hidden; text-overflow: ellipsis; }
.tile-meta { padding-right: 26px; }
@media (max-width: 760px) { .shelf-row .tile { width: 150px; } }
.ftools { display: grid; grid-template-columns: repeat(4, 1fr); }
.ftools .btn { width: auto; padding: 6px 8px; font-size: .8rem; }
@media (max-width: 420px) { .ftools { grid-template-columns: 1fr 1fr; } }
.selbar #selcount { font-size: .8rem; white-space: nowrap; }
/* Question 101: four buttons (All, Delete, Settings, Move): the count sits on its own line above them. */
.selbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
.selbar #selcount { flex: 1 0 100%; text-align: center; margin: 0; }
.selbar .btn { flex: 1 1 0; width: auto; min-width: 0; padding-left: 6px; padding-right: 6px; }
.ftools #fset { grid-column: 1 / -1; }

/* Studio / Autopilot helpers */
.surprise svg { margin-right: 2px; }
.boxcount { display: block; text-align: right; font-size: .72rem; color: #9fb0c9; margin-top: 2px; min-height: 1em; }
.boxcount.near { color: #ffd76a; }
textarea.flash { animation: flash .6s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(255,212,0,.0); } 30% { box-shadow: 0 0 0 4px rgba(255,212,0,.55); } 100% { box-shadow: 0 0 0 0 rgba(255,212,0,0); } }
.recentchips { display: flex; gap: 6px; overflow-x: auto; align-items: center; padding: 6px 0 2px; scrollbar-width: none; color: #cdd6e6; }
.recentchips::-webkit-scrollbar { display: none; }
.rchip { flex: none; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: .76rem; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.qpicks { display: flex; gap: 6px; margin-top: 6px; }
.qp { flex: 1; font: inherit; font-size: .8rem; font-weight: 600; padding: 5px 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.qp.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { textarea.flash { animation: none; } }
.fbar { background: color-mix(in srgb, var(--muted) 28%, transparent); }

/* ---------- Facebook-size cards: exactly 3 across on a phone, swipe for more ---------- */
.shelf-row { gap: 10px; }
.shelf-row > .tile { flex: 0 0 calc((100% - 20px) / 3); width: auto; min-width: 0; }
@media (min-width: 761px) { .shelf-row > .tile { flex-basis: calc((100% - 40px) / 5); } }
.tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
@media (min-width: 761px) { .tilegrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile-img { border-radius: 10px; }
.tile-title { font-size: .8rem; font-weight: 600; line-height: 1.28; margin-top: 6px; padding-right: 16px; }
.tile-meta { font-size: .68rem; gap: 4px; margin-top: 3px; padding-right: 16px; }
.tile-meta .pill { font-size: .62rem; padding: 1px 6px; line-height: 1.5; }
.tile .dots { width: 26px; height: 26px; right: -6px; bottom: -2px; }
.tile .dots svg { width: 16px; height: 16px; }
.ftile .dots { bottom: 6px; }
.playbtn { width: 24px; height: 24px; border-width: 1.4px; }
.playbtn svg { width: 9px; height: 9px; }
.tile-img .dur { font-size: .62rem; padding: 0 4px; right: 4px; bottom: 4px; border-radius: 4px; }
.tile-bar { height: 3px; }
.fbar { height: 3px; margin-top: 5px; width: 85%; }
.ftile .tile-title i.live { width: 9px; height: 9px; margin-right: 4px; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.shelf-top { margin: 14px 0 8px; align-items: center; }
.shelf-top h2 { font-size: 1.05rem; font-weight: 700; }
.shelf-top .cnt { font-size: .78rem; }
.seeall { font-size: .8rem; text-decoration: none; color: var(--gold); padding: 4px 2px; }
.seeall svg { width: 13px; height: 13px; }
a.seeall { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.mvhead h1 { font-size: 1.35rem; font-weight: 700; margin-top: 2px; }
.mvhead p { font-size: .8rem; margin-bottom: 10px; }
.mvtools { gap: 6px; }
.mvsearch input, .mvtools select, .mvtools .btn { min-height: 36px; font-size: .78rem; }
#mvchips .chip { font-size: .72rem; padding: 4px 10px; }
#mvchips .chip b { font-size: .66rem; }
.foldersec .shelf-top { margin-top: 0; }
@media (prefers-color-scheme: light) { body:not(.dark-page) .seeall { color: #1d4ed8; } }
/* Navy folders (the default) get a soft edge so they stand out on the navy page */
.swatch span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
/* No scroll bar line under the sideways rows (swipe still works) */
.shelf-row { scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
.swatches { grid-template-columns: repeat(6, 1fr); gap: 8px; } .swatch span { width: 34px; height: 34px; }

/* ---------- Folder art (#143): coloured folder (navy by default) with the first video in front, round play button ---------- */
.fart { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(90% 90% at 20% 80%, color-mix(in srgb, var(--fc) 55%, #000) 0%, color-mix(in srgb, var(--fc) 22%, #08122a) 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.fcount { position: absolute; right: 7px; bottom: 7px; display: inline-flex; gap: 4px; align-items: center; background: rgba(0,0,0,.72); color: #fff; font-size: .74rem; font-weight: 700; padding: 2px 7px; border-radius: 7px; }
.fpin { position: absolute; left: 7px; top: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); }
.fcount { font-size: .62rem; padding: 1px 5px; right: 4px; bottom: 4px; gap: 3px; }
.fcount svg { width: 10px; height: 10px; }
.fpin { width: 18px; height: 18px; left: 5px; top: 5px; }
.fart[style*="--fc:#20396a"] { background: radial-gradient(90% 90% at 20% 80%, #1d3866 0%, #0b1730 75%); }
.fart { aspect-ratio: 16 / 10; border-radius: 10px; }
.fback { position: absolute; left: 5%; top: 8%; width: 90%; height: 86%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.fphoto { position: absolute; left: 16%; right: 7%; top: 30%; bottom: 10%; border-radius: 6px; background: center / cover no-repeat; box-shadow: -4px 4px 10px rgba(0,0,0,.45); overflow: hidden; }
.fphoto:not(.has) { background-image: linear-gradient(135deg, color-mix(in srgb, var(--fc) 35%, #1b2c50), #14213d); }
.fphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,8,20,.5)); }
.fplay { position: absolute; left: 7%; bottom: 8%; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(8,12,24,.55); border: 2px solid #fff; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.fplay svg { width: 10px; height: 10px; margin-left: 2px; }
.fart .fcount { right: 9%; bottom: 13%; border-radius: 999px; padding: 1px 6px; background: rgba(6,10,22,.82); }

/* ---------- Readable "Facebook size" text (decided 18 Oct): 3 across, never tiny ---------- */
.tile-title { font-size: 13px; line-height: 1.3; }
.tile-meta { font-size: 11.5px; }
.tile-meta .pill { font-size: 10.5px; padding: 1px 7px; }
.shelf-top h2 { font-size: 19px; }
.shelf-top .cnt { font-size: 13px; }
.seeall, a.seeall { font-size: 13px; }
.mvhead h1 { font-size: 26px; }
.mvhead p { font-size: 13px; }
/* Shorts are tall (9:16), like on YouTube, so the whole thumbnail shows */
.tile-img.tall { aspect-ratio: 9 / 16; }
/* "New folder" tile */
.tile.newfolder { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.nf-art { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); color: var(--gold); font-size: 26px; font-weight: 300; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); text-decoration: underline; cursor: pointer; }
.tilegrid .morebtn { grid-column: 1 / -1; }
.fsearch { margin: 4px 0 10px; }

/* ---------- Niche Packs ---------- */
.nichebar { margin: 2px 0 10px; }
.nichelabel { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9fb0c9; margin-bottom: 6px; }
.nichechips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nichechips::-webkit-scrollbar { display: none; }
.nchip { flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nchip.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.nchip.more { color: var(--gold); border-style: dashed; }
.nichebox .nichetopics, .nichetopics { display: flex; flex-wrap: wrap; gap: 6px; }
.nichebox .rchip { max-width: 100%; }
.rchip.dark { color: var(--ink); background: color-mix(in srgb, var(--gold) 12%, var(--card)); border-color: color-mix(in srgb, var(--gold) 40%, transparent); white-space: normal; text-align: left; max-width: 100%; }
.vtag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(127,127,127,.18); color: inherit; }
.vtag.v-high { background: #15803d; color: #fff; }
.vtag.v-medium { background: #b45309; color: #fff; }
.vtag.v-lower { background: #475569; color: #fff; }
.ngrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 761px) { .ngrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ncard { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.ncard b { font-size: 13.5px; line-height: 1.3; }
.ncard p { margin: 6px 0 8px; font-size: 12px; line-height: 1.4; }
.nstar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.nstar.on { color: var(--gold); }
.hero .nstar { color: #cdd6e6; } .hero .nstar.on { color: var(--gold); }
.chip-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.chip-btn.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.kv span { color: var(--muted); }
.ntools { display: grid; gap: 8px; }
@media (min-width: 761px) { .ntools { grid-template-columns: 1fr 1fr; } }
.ntool { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ntool > svg { color: var(--gold); flex: none; }
.ntool span { display: grid; }

/* ---- Easy navigation: ‹ 3 of 10 › on a video page, swipe animation, folder drag ---- */
.jobtop { align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.vpager { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vp-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #d6dbe4); background: var(--card, #fff); color: inherit; display: grid; place-items: center; cursor: pointer; }
.vp-btn:disabled { opacity: .35; cursor: default; }
.vp-btn:not(:disabled):hover { border-color: var(--brand, #20396a); }
.vp-mid { display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-size: 11.5px; min-width: 92px; text-align: center; }
.vp-mid b { font-size: 13px; }
.vp-mid .small { font-size: 10.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
svg.flip { transform: rotate(180deg); }
#app.swipe-next { animation: swipe-out-left .16s ease forwards; }
#app.swipe-prev { animation: swipe-out-right .16s ease forwards; }
@keyframes swipe-out-left { to { transform: translateX(-28px); opacity: 0; } }
@keyframes swipe-out-right { to { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #app.swipe-next, #app.swipe-prev { animation: none; } }
.draghint { font-size: 11.5px; margin: -4px 0 8px; }
.tilegrid.sortable .ftile { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tilegrid.dragging .ftile:not(.drag-chosen) { transition: transform .15s; }
.ftile.drag-chosen { position: relative; box-shadow: 0 10px 28px rgba(0,0,0,.35); border-radius: 12px; z-index: 5; }

/* ---- "See all" a little smaller (80%) ---- */
.seeall, a.seeall { font-size: 10.5px; }
.seeall svg { width: 11px; height: 11px; }

/* ---- Niche chooser: one button with an arrow, opens a list ---- */
.npick { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 13px; font-weight: 600; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.npick.on { border-color: var(--gold); }
.npick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npick-arrow { flex: none; color: var(--gold); }
.npick-list { max-height: 58vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.npick-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8b97ad); margin: 12px 0 4px; }
.npick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.npick-row b { display: block; font-size: 13px; }
.npick-row .small { display: block; font-size: 11.5px; line-height: 1.35; }
.npick-row:hover, .npick-row:focus-visible { background: rgba(127,127,127,.12); }
.npick-row.on { border-color: var(--gold); background: rgba(255,194,26,.1); }
.npick-tick { color: var(--gold); font-weight: 700; }

/* ---- Today's ideas: newest list on top (can be minimised), earlier lists folded below ---- */
.ilist { position: relative; padding: 12px 14px; }
.ilist + .ilist { margin-top: 8px; }
.ilatest { position: absolute; top: -9px; left: 14px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink, #1a1a1a); }
.ihead { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.ihead b { display: block; font-size: 13px; }
.ihead .small { display: block; font-size: 11.5px; }
.itoggle { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--gold); }
.itoggle svg.up { transform: rotate(-90deg); }
.itoggle svg.down { transform: rotate(90deg); }
.ibody { margin-top: 10px; }
.ihist { margin-top: 18px; }
.ihist .shelf-top { margin-bottom: 6px; }
.ideas.compact .idea { padding: 8px 10px; gap: 8px; }
.ideas.compact .idea b { font-size: 13px; line-height: 1.3; }
.ideas.compact .idea .small { font-size: 11.5px; }
.ideas.compact .idea input[type=checkbox] { margin-top: 2px; }
.ideas.compact .idea .num { padding-top: 0; }
.ideas.compact .idetail { margin-top: 4px; display: grid; gap: 2px; }
.ideas.compact .idetail[hidden] { display: none; }
.idea.made { opacity: .72; }
.madetag { color: #22c55e; font-weight: 600; }
.imore { font-size: 11.5px; }
.ifoot { margin-top: 10px; gap: 8px; }

/* ---- Niche Packs page: High / Medium / Lower groups can be minimised ---- */
.ngroup-head { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; color: inherit; background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: left; }
.ngroup-head h2 { margin: 0; flex: 1; }
.ngroup.closed .ngrid { display: none; }
.ngroup + .ngroup { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.tq-title { display: block; font-size: 13px; line-height: 1.35; margin-top: 2px; }

/* ---- Shape filter + Sort into folders (My videos) ---- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shapebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 10px; }
.shapebar select { flex: 1 1 40%; min-width: 0; text-overflow: ellipsis; font: inherit; font-size: 12px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; }
.shapebar select.on { border-color: var(--gold); color: var(--gold); }
.shapebar .btn { width: auto; white-space: nowrap; font-size: 12px; }
.srtlist { max-height: 56vh; overflow-y: auto; margin: 6px -4px 0; padding: 0 4px; }
.srtrow { display: grid; grid-template-columns: 1fr minmax(0, 46%); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.srtrow .small { font-size: 12px; line-height: 1.3; }
.srtrow select { font: inherit; font-size: 11.5px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: inherit; min-width: 0; width: 100%; }

/* Dubbing language picker (⋮ → Dub into other languages) */
.dub-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 6px; }
.dub-lang { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); font-size: 13px; cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.dub-lang input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.dub-lang:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--card)); }
.dub-note { margin: 4px 0 10px; font-size: 11.5px; text-align: center; }

/* ---------- AI Video Learning Lab ---------- */
.labhead h1 { font-size: 26px; margin: 4px 0 2px; }
.labhead p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.lh1 { font-size: 19px; margin: 0; line-height: 1.25; }
.lh2 { font-size: 19px; margin: 0 0 8px; }
.lh3 { font-size: 13px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.flabel { display: block; font-size: 10.5px; font-weight: 600; margin-bottom: 6px; }
.ldepths { display: grid; gap: 8px; }
.ldepth { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.ldepth input { margin-top: 3px; flex: none; width: auto; }
.ldepth b { display: block; font-size: 13px; }
.ldepth small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ldepth:has(input:checked) { border-color: var(--gold); }
/* Study videos: link box with "Save for later" beside it, the Saved links line, and the depth choices in one frame. */
.lurlrow { display: flex; gap: 8px; }
.lurlrow input { flex: 1; min-width: 0; background: var(--bg); }
.lurlrow .btn { width: auto; white-space: nowrap; flex: none; }
.lsavedline { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 30%, var(--card)); font: inherit; font-size: 13px; color: inherit; cursor: pointer; text-align: left; margin: -4px 0 8px; }
.lsavedline .seeall { flex: none; }
#lsavedlist { margin: 0 0 14px; }
.ldhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ldhead .flabel { margin: 0; }
.ldepths.lbox { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lbox .ldepth { border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.lbox .ldepth:first-child { border-top: 0; }
.lbox .ldepth:has(input:checked) { background: color-mix(in srgb, var(--gold) 6%, transparent); box-shadow: inset 3px 0 0 var(--gold); border-color: var(--line); }
.lbox.folded .ldepth small { display: none; }
.lbox.folded .ldepth input { margin-top: 1px; }
.lprev { display: flex; gap: 10px; align-items: center; margin: -4px 0 12px; }
.lprev img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
/* Learning Lab "Saved links": numbered rows with a small picture, the link, ▶ (study now) and ✕ (remove). */
.lsaved { list-style: none; margin: 0 0 6px; padding: 0; }
.lsrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.lsnum { min-width: 22px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.lsrow img { width: 56px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; }
.lslink { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 11.5px; }
.lsrow .btn.sm { width: auto; min-width: 30px; min-height: 30px; padding: 4px 8px; font-size: 11.5px; flex: none; border-radius: 10px; }
.lh2 .cnt { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.lstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.lstats b { display: block; font-size: 19px; }
.lstats span { font-size: 10.5px; color: var(--muted); }
.lrun { display: block; color: inherit; text-decoration: none; }
.lstatus { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--line); }
.lstatus.s-done { background: #1f7a4a; color: #fff; }
.lstatus.s-working, .lstatus.s-queued { background: var(--gold); color: #111; }
.lstatus.s-failed { background: #b3261e; color: #fff; }
.lstages { list-style: none; padding: 0; margin: 8px 0; font-size: 11.5px; }
.lstages li { display: flex; gap: 8px; align-items: center; padding: 3px 0; color: var(--muted); }
.lstages li.st-done, .lstages li.st-working { color: inherit; }
.lstages li.st-failed { color: #e5534b; }
.lstages .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; margin: 0 3px; }
.lstages .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold); border-right-color: transparent; display: inline-block; animation: lspin .8s linear infinite; }
@keyframes lspin { to { transform: rotate(360deg); } }
.llist { display: grid; gap: 10px; }
.lcard { display: flex; gap: 10px; color: inherit; text-decoration: none; }
.lthumb { position: relative; width: 132px; flex: none; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--line); }
.lthumb img { width: 100%; height: 100%; object-fit: cover; }
.lthumb .dur { position: absolute; right: 4px; bottom: 4px; font-size: 10.5px; background: rgba(0,0,0,.75); color: #fff; padding: 1px 5px; border-radius: 4px; }
.lmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.ltitle { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lmeta .small { font-size: 11.5px; }
.lerr { color: #e5534b; }
.lhero { display: flex; gap: 12px; align-items: flex-start; }
.lhero img { width: 120px; flex: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.ltech { border-top: 1px solid var(--line); padding: 10px 0; }
.ltech b { font-size: 13px; }
.lev { font-size: 10.5px; white-space: nowrap; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); }
.lev.ev-observed { border-color: #1f7a4a; }
.ltechbtns { gap: 8px; align-items: center; margin-top: 6px; }
.ltechbtns .btn { width: auto; font-size: 11.5px; }
.ltechbtns .btn.on { border-color: var(--gold); color: var(--gold); }
.lscenes > div { display: flex; gap: 10px; border-top: 1px solid var(--line); padding: 6px 0; }
.lscenes > div > span { flex: none; width: 44px; font-size: 11.5px; }
.lscenes p { margin: 0; }
.tstamp { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gold); text-decoration: none; }
.lbrain { padding-left: 18px; margin: 4px 0 0; }
#labroot .check { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
#labroot .check input { width: auto; }

/* ---------- Tools tab: a WhatsApp-style list ---------- */
.tsearch { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 44px; margin: 0 0 8px; color: var(--muted); }
.tsearch input { border: 0; background: transparent; padding: 10px 0; font-size: 13px; flex: 1; min-width: 0; outline: none; box-shadow: none; }
.tlist { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 14px; padding: 11px 4px; text-decoration: none; color: inherit; border-radius: 12px; }
.trow[hidden] { display: none; }
.trow:active { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.tico { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.ttext { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-bottom: 11px; margin-bottom: -11px; border-bottom: 1px solid var(--line); }
.trow:last-child .ttext { border-bottom: 0; }
.ttext b { font-size: 15px; font-weight: 600; }
.ttext span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Folded sections (Fact-check, Add your own sound, Use your own thumbnail): one line until opened */
details.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
details.fold > summary b { font-size: 15px; }
details.fold > summary .small { font-size: 11.5px; }
details.fold > summary .seeall { flex: none; font-size: 10.5px; color: var(--gold); display: inline-flex; align-items: center; gap: 2px; }
details.fold[open] > summary .seeall svg { transform: rotate(90deg); }
details.fold[open] > summary { margin-bottom: 10px; }
details.fold.inner { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
details.fold .seeall .o, details.fold[open] > summary .seeall .c { display: none; }
details.fold[open] > summary .seeall .o { display: inline; }
/* Video page: actions and downloads as compact pills, not a tall two-column grid */
.jobmain .btngrid { display: flex; flex-wrap: wrap; gap: 8px; }
.jobmain .btngrid .btn { width: auto; flex: 1 1 auto; min-height: 38px; padding: 6px 14px; font-size: 12.5px; }
.jobmain .btngrid .btn.more { flex: 0 0 auto; }
/* Downloads: three equal buttons per row; a leftover button keeps the same size (Design Book 62c) */
.jobmain .btngrid.dlgrid { display: grid; grid-template-columns: repeat(3, 1fr); }
.jobmain .btngrid.dlgrid .btn { width: 100%; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Switch at the top of tools that share one Tools row (Video ideas, Repurpose a video) */
.groupbar { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); margin: 0 0 12px; }
.groupbar a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 999px; font-size: 12px; white-space: nowrap; font-weight: 600; text-decoration: none; color: var(--muted); }
.groupbar a.on { background: var(--gold); color: #111; }
/* Learning Lab: the three part buttons under "What the brain knows" (same look as the group bar, as buttons). */
.labtabs { border-radius: 18px; }
.labtabs button { flex: 1; min-height: 40px; padding: 6px 6px; border: 0; border-radius: 14px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; color: var(--muted); cursor: pointer; }
.labtabs button.on { background: var(--gold); color: #111; }
.lhist .shelf-top { align-items: center; }
.lbrainrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 8px 0; font: inherit; font-size: 13px; color: inherit; cursor: pointer; }

/* Add-ons: one compact list per group (name, one line, where to find it, Free/Premium tag) */
.alist { padding: 4px 16px; }
.arow { display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.arow:last-child { border-bottom: 0; }
.arow .ttext { border: 0; padding: 0; margin: 0; }
.arow .ttext b { font-size: 13px; }
.arow .ttext span { font-size: 11.5px; white-space: normal; }
.arow .ttext small { font-size: 10.5px; color: var(--muted); font-style: italic; }
.apill { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.apill.free { background: color-mix(in srgb, #1f7a4a 18%, transparent); color: #1f9a5a; }
.apill.prem { background: color-mix(in srgb, var(--gold) 22%, transparent); color: #b88a00; }
details.howto > summary { list-style: none; margin: 0; }
details.howto > summary::-webkit-details-marker { display: none; }
details.howto[open] > summary { margin-bottom: 6px; }

/* Studio and Autopilot forms: settings sit two to a row on phones too (much shorter forms) */
@media (max-width: 560px) {
  .fgroup .grid2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fgroup .grid2 .field { margin-bottom: 0; min-width: 0; }
  .fgroup .grid2 label { font-size: 10.5px; }
  .fgroup .grid2 select { font-size: 12.5px; padding-left: 10px; padding-right: 26px; text-overflow: ellipsis; min-width: 0; width: 100%; }
}

/* ---------- Course Builder ---------- */
.cmodule { padding-top: 14px; padding-bottom: 6px; }
.clesson { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.clesson .ctick input { width: 18px; height: 18px; margin-top: 8px; }
.clesson .cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clesson .ctitle { font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.clesson .cbody .small { font-size: 11.5px; }
.clesson .cmins { flex: none; font-size: 10.5px; margin-top: 10px; }
.clesson:has(input[type=checkbox]:not(:checked)) .cbody { opacity: .45; }
.clesson.cmade:has(input[type=checkbox]) .cbody { opacity: 1; }
.clesson.cmade .ctitle { background: transparent; border-color: transparent; padding-left: 0; }
.ltotlink { display: block; color: inherit; text-decoration: none; }
.ltotlink .seeall { float: right; font-size: 10.5px; color: var(--gold); font-weight: 600; margin-top: 6px; }
details.tech2 { border-bottom: 1px solid var(--line); padding: 10px 0; }
details.tech2:last-child { border-bottom: 0; }
details.tech2 > summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
details.tech2 > summary::-webkit-details-marker { display: none; }
details.tech2 > summary input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
details.tech2 .ttext { border: 0; padding: 0; margin: 0; }
details.tech2 .ttext b { font-size: 13px; }
details.tech2 .ttext span { font-size: 11.5px; white-space: normal; }
.tbar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow-up, 0 6px 20px rgba(0,0,0,.25)); }
.tbar[hidden] { display: none; }
/* Tools rows: main link, number on the right, arrow for details */
.trow { padding: 0; gap: 6px; }
.trow .tmain { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 11px 0 11px 4px; text-decoration: none; color: inherit; }
.trow .ttext span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trow .ttext { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tlist .trow { border-bottom: 1px solid var(--line); border-radius: 0; }
.tlist .trow:last-of-type { border-bottom: 0; }
.tside { flex: none; display: flex; flex-direction: column; align-items: flex-end; min-width: 46px; text-align: right; }
.tside b { font-size: 15px; color: var(--gold); line-height: 1.1; }
.tside small { font-size: 10px; color: var(--muted); max-width: 70px; line-height: 1.15; }
.texp { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.texp svg { transform: rotate(90deg); transition: transform .2s ease; }
.trow.open .texp svg { transform: rotate(-90deg); }
.tpin { color: var(--gold); font-size: 12px; }
.tdet { padding: 2px 4px 14px 66px; border-bottom: 1px solid var(--line); }
.tdet p { margin: 0 0 8px; }
.tstats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 11.5px; color: var(--muted); }
.tstats b { color: inherit; font-size: 13px; color: var(--gold); }
.trow.dragging { background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.35); border-radius: 14px; transform: scale(1.02); position: relative; z-index: 3; }
.tlist { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.trow .tmain, .trow .tmain * { -webkit-user-drag: none; }

/* ---- History lists for background tools (Course Builder, Autopilot suggestions) ---- */
.hist .shelf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hist .lh2 { margin: 0; font-size: 19px; }
.hrow { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.hrow:first-child { border-top: 0; }
.hmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; }
button.hmain { cursor: pointer; }
.hmain b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmain span { font-size: 11.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.hside small { font-size: 10.5px; opacity: .6; }
.hstat { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.hstat.ok { background: rgba(16,185,129,.15); color: #059669; }
.hstat.wait { background: rgba(234,179,8,.16); color: #a16207; }
.hstat.bad { background: rgba(239,68,68,.14); color: #dc2626; }
.hbtn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(127,127,127,.12); color: inherit; display: grid; place-items: center; cursor: pointer; }
.bgnote { display: flex; gap: 10px; align-items: flex-start; }
.bgnote .spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(127,127,127,.25); border-top-color: var(--gold, #c9a227); animation: bgspin 1s linear infinite; margin-top: 2px; }
@keyframes bgspin { to { transform: rotate(360deg); } }

/* ---- My Page (link in bio) editor ---- */
.mpurl { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm, 12px); overflow: hidden; background: var(--card); color: var(--ink); }
.mpurl span { padding: 0 2px 0 12px; font-size: 12px; opacity: .6; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.mpurl input { border: 0 !important; box-shadow: none !important; padding-left: 0 !important; min-width: 0; flex: 1; background: transparent !important; color: var(--ink) !important; }
.mpthemes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mpth { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; }
.mpth i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--bg) 55%, var(--acc) 55%); box-shadow: 0 0 0 1px rgba(127,127,127,.3); }
.mpth.on i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold, #c9a227); }
.mpth span { font-size: 10.5px; }
.mplrow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.mplrow:first-child { border-top: 0; }
.mplrow .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mpctl { display: flex; flex-direction: column; gap: 6px; }
.mpctl button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(127,127,127,.12); color: inherit; display: grid; place-items: center; cursor: pointer; }
.mpctl button:disabled { opacity: .35; }
.mpvrow { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.mpvrow:first-child { border-top: 0; }
.mpvrow .grow { display: flex; flex-direction: column; min-width: 0; }
.mpvrow b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpvrow small { font-size: 11.5px; opacity: .65; }
.mpvn { flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; background: var(--gold, #c9a227); color: #111; }
.mpvn:empty { background: transparent; }
.mplive .mplink { margin: 0 0 10px; font-size: 13px; word-break: break-all; }
.mplive .mplink a { font-weight: 600; }
.lbl { display: block; font-size: 10.5px; font-weight: 600; margin-bottom: 6px; }

/* ---- AI Trend Intelligence (Research) ---- */
.tsrcpick { display: flex; flex-direction: column; }
.tsrcrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); cursor: pointer; }
.tsrcrow:first-child { border-top: 0; }
.tsrcrow input { flex: none; }
.tsrcrow .grow { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.tsrcrow small { font-size: 11.5px; opacity: .65; }
.tsrcrow.off { cursor: default; }
.tsrcrow.off .grow { opacity: .6; }
.tsrcrow em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tsrcrow em.free { background: rgba(16,185,129,.15); color: #059669; }
.tsrcrow em.paid { background: rgba(234,179,8,.16); color: #a16207; }
.tsrcrow em.na { background: rgba(127,127,127,.15); opacity: .8; }
.tsrcs { display: flex; flex-wrap: wrap; gap: 6px; }
.tsrc { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(127,127,127,.12); }
.tsrc.ok { background: rgba(16,185,129,.14); color: #047857; }
.tsrc.bad { background: rgba(239,68,68,.12); color: #b91c1c; }
.twarn { background: rgba(234,179,8,.14); border-radius: 10px; padding: 8px 10px; }
.tkick { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #b8860b); }
.topp > summary { list-style: none; cursor: pointer; }
.topp > summary::-webkit-details-marker { display: none; }
.topp-h { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.topp-h .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topp-h b { font-size: 13px; font-weight: 600; }
.topp-h small { font-size: 11.5px; opacity: .7; }
.topp.top .topp-h b { font-size: 15px; }
.tscore { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--gold, #f5c518); color: #111; }
.tbadges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tbadges span { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(37,99,235,.12); color: #1d4ed8; }
.tparts { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.tpart { display: grid; grid-template-columns: 110px 1fr 74px; align-items: center; gap: 8px; font-size: 11.5px; }
.tpart i { height: 6px; border-radius: 3px; background: rgba(127,127,127,.18); overflow: hidden; }
.tpart i b { display: block; height: 100%; background: var(--gold, #c9a227); }
.tpart em { font-style: normal; opacity: .7; text-align: right; }
.ttitles { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.ttitles span { font-size: 12.5px; padding: 6px 10px; border-radius: 10px; background: rgba(127,127,127,.1); }
.tevs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tev { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.tev a { font-weight: 500; word-break: break-word; }
.tev small { font-size: 11px; opacity: .7; }
.tevk { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.tsecs { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.tsecs li span, .tsecs li small { display: block; opacity: .8; }
.tsecs li small { font-size: 11px; opacity: .6; }
.tfacts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.tbrief .small { margin: 0 0 6px; }
/* Niche pack on Studio: one tidy line; Details opens the rest */
.nicheline { display: flex; align-items: center; gap: 8px; }
.nicheline b { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nichebox .nicheline .seeall { flex: none; font-size: 11.5px; color: #f5c518 !important; text-decoration: none; }
.nicheline .btn { flex: none; }
.lfused { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* Series Studio: character cards two across, picture on top */
.shead { margin: 16px 2px 8px; }
.schars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.schar { display: flex; flex-direction: column; gap: 4px; padding: 10px; margin: 0; min-width: 0; }
.spic { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--line); display: grid; place-items: center; margin-bottom: 4px; }
.spic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spic a { display: block; width: 100%; height: 100%; }
.spic span { font-size: 40px; font-weight: 700; color: var(--muted); }
.schar .sname { font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.schar .srole { font-size: 11.5px; line-height: 1.3; }
.schar label { font-size: 10.5px; margin-top: 2px; }
.schar .scp, .schar select { font-size: 11.5px; padding: 6px 8px; border-radius: 8px; min-width: 0; width: 100%; }
.svoice { display: flex; gap: 6px; align-items: center; }
/* #310: one ID card per character (picture, details, sizes, voice). */
.sid { display: flex; flex-direction: column; gap: 4px; padding: 10px; margin: 0 0 10px; min-width: 0; }
.sidtop { display: flex; gap: 10px; align-items: flex-start; }
.sidpic { width: 84px; flex: 0 0 84px; margin: 0; }
.sidpic span { font-size: 28px; }
.sidmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sid .sname { font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.sid .srole { font-size: 11.5px; line-height: 1.3; }
.sid label { font-size: 10.5px; margin-top: 2px; }
.sid .scp, .sid select { font-size: 11.5px; padding: 6px 8px; border-radius: 8px; min-width: 0; width: 100%; }
.sidh input { width: 90px; font-size: 13px; padding: 4px 8px; border-radius: 8px; margin-left: 6px; }
.svoice select { flex: 1; }
.shear { width: auto; flex: none; padding: 6px 8px; font-size: 10.5px; white-space: nowrap; }
.sdet summary { cursor: pointer; color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* Review queue */
.revbanner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; text-decoration: none; color: inherit; }
.revbanner > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.revbanner .small { font-size: 11.5px; }
.revbadge { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.revgo { font-size: 22px; color: var(--muted); }
.revchips { margin: 0 0 12px; gap: 6px; }
.revchips .chip-btn { font-size: 11.5px; padding: 5px 10px; }
.revchips .chip-btn b { font-weight: 700; margin-left: 2px; }
.revitem video { width: 100%; aspect-ratio: 16 / 9; display: block; margin: 0 auto 10px; border-radius: 12px; background: #000; }
.revtitle { font-size: 15px; margin: 6px 0 2px; line-height: 1.3; }
.revv { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.revv.pass { background: #dcfce7; color: #166534; }
.revv.warn { background: #fef3c7; color: #92400e; }
.revv.fail { background: #fee2e2; color: #991b1b; }
.revv.none { background: var(--line); color: var(--muted); }
.revchecks { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.revchecks li { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.4; }
.revchecks li > span:first-child { flex: none; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; margin-top: 1px; }
.revchecks li.pass > span:first-child { background: #dcfce7; color: #166534; }
.revchecks li.warn > span:first-child { background: #fef3c7; color: #92400e; }
.revchecks li.fail > span:first-child { background: #fee2e2; color: #991b1b; }
.revnot { margin: 4px 0 10px; }
.revpost .field { margin-bottom: 8px; }
.revbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.revbtns .btn { width: 100%; text-align: center; }
.revbtns .btn.gold { grid-column: 1 / -1; }
.revdone { text-align: center; padding: 28px 16px; }

/* Auto on the Studio form */
.atag { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; letter-spacing: .02em; }
.atag.auto { background: var(--gold); color: var(--gold-ink); }
.atag.default, .atag.pack { background: rgba(255,255,255,.16); color: #dfe6f2; }
.atag.you { padding: 0; background: none; }
.atag.you button { font: inherit; font-size: 10px; font-weight: 600; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; border-radius: 999px; padding: 1px 7px; cursor: pointer; }
.autoline { margin: 2px 0 12px; }
.autoline-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 9px 12px; }
.autoline-tag { flex: none; font-size: 10.5px; font-weight: 700; color: var(--gold-ink); background: var(--gold); border-radius: 999px; padding: 2px 9px; display: inline-flex; align-items: center; gap: 5px; }
.autoline-tag .spin { width: 10px; height: 10px; border-width: 2px; }
.autoline-text { flex: 1; min-width: 0; font-size: 11.5px; color: #e6ecf6; line-height: 1.4; }
#autoline .seeall, #autoline .seeall:visited { color: var(--gold); flex: none; font-size: 11.5px; }
.atitles { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.atitles-h { font-size: 10.5px; font-weight: 600; color: #dfe6f2; text-transform: uppercase; letter-spacing: .05em; }
.atitles-h span { text-transform: none; letter-spacing: 0; font-weight: 400; color: #b9c5da; }
.atitle { display: flex; align-items: flex-start; gap: 8px; text-align: left; width: 100%; font: inherit; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.atitle.on { border-color: var(--gold); background: rgba(255,212,0,.12); }
.atitle .abody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atitle .abody b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.atitle .abody span { font-size: 11.5px; color: #b9c5da; line-height: 1.35; }
.arank { flex: none; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; margin-top: 1px; white-space: nowrap; }
.arank.r1 { background: var(--gold); color: var(--gold-ink); }
.arank.r2, .arank.r3 { background: rgba(255,255,255,.18); color: #fff; }
.arank.mine { background: none; border: 1px solid rgba(255,255,255,.3); color: #dfe6f2; }
.amismatch { color: #e6ecf6; margin: 0 0 8px; font-size: 11.5px; }
.arepeat { border-color: rgba(255,180,80,.45); }
/* Series Studio: character and location sheets */
.ssheetgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.ssheet { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.ssheet img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--line); }

/* Upload boxes: a soft rounded drop area with a pill "Choose file" button (Design Book 21) */
input[type=file]:not([hidden]) { width: 100%; font: inherit; font-size: 12.5px; color: var(--muted); background: var(--card); border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 16px; padding: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
input[type=file]:not([hidden]):hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, var(--card)); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 12.5px; color: var(--navy); background: var(--gold); border: 0; border-radius: 999px; padding: 8px 16px; margin-right: 12px; cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--gold) 35%, transparent); }

/* Main buttons go full width, left to right (Design Book 18, Idowu 20 Oct). A button given its own width keeps it. */
form > .btn.gold:not(.sm), .card > .btn.gold:not(.sm), .card > .row.spread > .btn.gold:not(.sm) { display: flex; width: 100%; }
.card > .row.spread:has(> .btn.gold:not(.sm)) { flex-wrap: wrap; }
.card > .row.spread:has(> .btn.gold:not(.sm)) > span { flex: 1 1 100%; }

/* My videos: status chips spread edge to edge; Niche, Shape and Sort into folders on one line (Idowu 20 Oct) */
#mvchips { justify-content: space-between; }
.shapebar { flex-wrap: nowrap; }
.shapebar select { flex: 1 1 0; }
.shapebar .btn { flex: none; padding-left: 10px; padding-right: 10px; }

/* Tools with parts (Trend Intelligence, Repurpose a video): the part's name is its box title (Idowu 20 Oct) */
.card > .parttitle { font-size: 19px; margin: 0 0 4px; }
.grouphint { margin: 0 0 10px; }

/* Any main button marked .main is full width wherever it sits; its row lets the note above it take its own line */
.btn.main { display: flex; width: 100%; }
.row:has(> .btn.main) { flex-wrap: wrap; }
.row:has(> .btn.main) > span { flex: 1 1 100%; }

/* In a button grid the main (gold) button takes the whole row; a single sub button after it does too (Idowu 20 Oct) */
.btngrid > .btn.gold:not(.sm) { grid-column: 1 / -1; }
.btngrid > .btn.gold:not(.sm) + .btn:last-child { grid-column: 1 / -1; }
/* Sub buttons under a main button: one line, normal height, never a big block (Idowu 20 Oct) */
.btngrid > .btn.gold:not(.sm) ~ .btn:not(.gold) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; padding: 8px 10px; font-size: 13px; }

/* Page top with a button beside the title (e.g. Autopilot's Folders) */
.labhead-row { align-items: center; flex-wrap: nowrap; }
.labhead-row .btn { width: auto; flex: none; color: inherit; }
/* Light mode: every See all is the same blue (folded boxes and the Auto line used yellow, hard to read on white); time stamps a darker gold */
@media (prefers-color-scheme: light) {
  body:not(.dark-page) details.fold > summary .seeall, body:not(.dark-page) #autoline .seeall, body:not(.dark-page) #autoline .seeall:visited { color: #1d4ed8; }
  body:not(.dark-page) .tstamp { color: #9a6b00; }
}
.scenehead .check { align-items: center; }
.scenehead .check input { margin-top: 0; }
/* Review queue: Tidy up (short videos, many at once) */
.revtidy { margin-bottom: 12px; }
.revtidy .tidyall { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.tidylist { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line); margin-bottom: 10px; }
.tidyrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.tidyrow input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.tidyrow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tidyrow b { font-size: 13px; font-weight: 600; }
.tidyrow .small { font-size: 11.5px; }
.foldrow { align-items: center; justify-content: space-between; cursor: default; }
.foldrow .btn { flex: none; width: auto; }

/* Studio Team chat (#70) */
.tmlist { padding: 4px 14px; }
.tmrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.tmrow:last-child { border-bottom: 0; }
.tava { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-weight: 700; font-size: 17px; }
.tava.group { width: 44px; height: 44px; }
.tava.group svg { stroke: #fff; }
.tmmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tmmeta b { font-size: 13px; }
.tmjob { font-weight: 500; color: var(--muted); }
.tmlast { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmwhen { flex: none; font-size: 10.5px; align-self: flex-start; margin-top: 4px; }
.chathead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chathead h1 { font-size: 19px; margin: 0; }
.chatbox { max-height: calc(100vh - 360px); min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; }
.bub { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.bub.them { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: var(--gold); color: var(--gold-ink); border-bottom-right-radius: 6px; }
.exrow { display: flex; flex-wrap: wrap; gap: 6px; }
.exrow .chip-btn { white-space: normal; text-align: left; }
.actcard { align-self: flex-start; width: 92%; margin: 0; padding: 12px; }
.actcard b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.actcard p { margin: 4px 0 8px; }
.actthumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.actthumbs figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.actthumbs img { width: 100%; border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; }
.composer { margin-top: 10px; }
.composer textarea { margin-bottom: 8px; }
/* Posting calendar (#74) */
.calchips { margin-bottom: 10px; }
.cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 4px; vertical-align: 1px; }
.calcard { padding: 12px; }
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calhead .btn { width: 36px; padding: 4px; }
.calhead b { font-size: 15px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calwk span { text-align: center; font-size: 10.5px; color: var(--muted); padding-bottom: 2px; }
.calcell { position: relative; min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; cursor: pointer; }
.calcell.empty { border: 0; background: none; cursor: default; }
.calcell.past { opacity: .55; }
.calcell.today .caln { background: var(--ink); color: var(--card); border-radius: 50%; width: 20px; height: 20px; display: inline-grid; place-items: center; }
.calcell.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.caln { font-size: 12px; font-weight: 600; }
.caldots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.caldots i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--c); border-radius: 8px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; padding: 0 3px; }
.calwarn { position: absolute; top: 2px; right: 3px; font-size: 10px; font-weight: 800; color: var(--bad); }
.calsum { margin: 10px 0 0; }
.calchan { margin: 4px 0; }
.calover { color: var(--bad); font-weight: 600; }
.calvid { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.calthumb { flex: none; width: 96px; aspect-ratio: 16/9; border-radius: 8px; background: var(--line) center/cover no-repeat; }
.calmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calmeta b { font-size: 13px; }
.calmeta .small { font-size: 11.5px; }
.cst.scheduled { color: #2563eb; font-weight: 600; }
.cst.posted { color: #16a34a; font-weight: 600; }
.cst.waiting { color: #b45309; font-weight: 600; }
.cst.planned { color: #7c3aed; font-weight: 600; }
.revbadge.cal { background: #2563eb; color: #fff; display: inline-grid; place-items: center; }
.revbadge.cal svg { stroke: #fff; }

.calopen { width: auto; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.calpick { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.calcell.full { border-color: var(--bad); }
.calcell:disabled { cursor: default; }
.calfree { font-size: 9px; color: #16a34a; font-weight: 600; }
.caltimes { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.caltimes .row { gap: 6px; flex-wrap: wrap; }
.caltimes .chip-btn:disabled { opacity: .35; }

/* Autopilot: ranked titles and Auto per suggested video (#69 A6/A7) */
.ititles { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
.ititle { display: flex; gap: 6px; align-items: baseline; text-align: left; font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.ititle.on { border-color: var(--gold); background: rgba(255, 212, 0, .12); font-weight: 600; }
.irank { flex: none; font-size: 10.5px; font-weight: 700; opacity: .7; }
.iauto { margin-top: 2px; }

.iextra { grid-column: 1 / -1; }
.cyt { display: block; margin-top: 3px; }
/* Tools list, compact (WhatsApp size): one-line descriptions, a smaller round icon, the number on one line */
.trow .tmain { gap: 12px; padding: 9px 0 9px 2px; }
.tico { width: 42px; height: 42px; }
.tico svg { width: 20px; height: 20px; }
.trow .ttext b { font-size: 14px; }
.trow .ttext span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; -webkit-line-clamp: unset; }
.tside { min-width: 40px; }
.tside b { font-size: 14px; }
.tside small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; font-size: 9.5px; }
.texp { width: 30px; height: 30px; }
.tdet { padding-left: 56px; }

/* Posting calendar: the video wall (#76): 3 days a row, each day a small tile of its videos (folder look) */
.calviews { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.calviews .calhide { margin: 0 0 0 auto; font-size: 11.5px; align-items: center; }
.calviews .calhide input { margin-top: 0; width: 16px; height: 16px; }
.vwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vwtile { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--line); padding: 0; cursor: pointer; font: inherit; color: #fff; }
.vwtile.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.vwtile.empty { background: transparent; opacity: .55; }
.vwtile.empty .vwdate { color: var(--muted); text-shadow: none; background: none; }
.vwgrid { position: absolute; inset: 0; display: grid; gap: 2px; }
.vwtile.n2 .vwgrid { grid-template-columns: 1fr 1fr; }
.vwtile.n3 .vwgrid, .vwtile.n4 .vwgrid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.vwtile.n3 .vwthumb:first-child { grid-row: 1 / 3; }
.vwthumb { background: #20396a center / cover no-repeat; min-height: 0; }
.vwmore { display: grid; place-items: center; background: rgba(11, 29, 58, .85); font-size: 12px; font-weight: 700; }
.vwdate { position: absolute; left: 4px; top: 3px; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.vwplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .5); display: grid; place-items: center; }
.vwplay svg { width: 12px; height: 12px; fill: #fff; stroke: #fff; }
.vwcount { position: absolute; right: 4px; top: 3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.vwchans { position: absolute; left: 5px; bottom: 4px; display: flex; gap: 2px; }
.vwchans .cdot { margin: 0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.revdonebox { border-left: 4px solid #16a34a; margin-bottom: 12px; }

/* Queue (#80) */
.qsum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.qpill { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.qpill b { font-size: 13px; }
.qpill.making b { color: #b45309; } .qpill.up b { color: #2563eb; } .qpill.done b { color: #16a34a; }
.qsec h2 { display: flex; align-items: center; gap: 8px; }
.qcount { font-size: 12px; font-weight: 700; background: var(--line); border-radius: 999px; padding: 1px 8px; }
.qitem { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.qthumb { flex: none; width: 88px; aspect-ratio: 16/9; border-radius: 8px; background: var(--line) center/cover no-repeat; }
.qthumb.tall { width: 50px; aspect-ratio: 9/16; }
.qmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.qmeta b { font-size: 13px; }
.qmeta .small { font-size: 11.5px; }
.qline { display: flex; align-items: center; gap: 8px; }
.qline b { font-size: 11.5px; min-width: 34px; text-align: right; }
.qbar { flex: 1; height: 7px; border-radius: 6px; background: var(--line); overflow: hidden; }
.qbar i { display: block; height: 100%; background: #f59e0b; border-radius: 6px; transition: width .6s ease; }
.qbar.up i { background: #2563eb; }
.qplace { color: var(--muted); }
.qok { color: #16a34a; font-weight: 600; }
.revbadge.qb { background: #0ea5e9; display: inline-grid; place-items: center; }
.revbadge.qb svg { stroke: #fff; }

/* ---- Round progress ring (#81; half size, 20 Oct) and "did not finish" card (#83) ---- */
.pwrap { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.pring { --p: 0; --rs: 20px; --rc: var(--gold, #c9a227); flex: none; width: var(--rs); height: var(--rs); border-radius: 50%; display: grid; place-items: center; position: relative; }
.pring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(127,127,127,.22) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.pring i { position: relative; font-style: normal; font-weight: 700; color: #fff; font-size: 11px; line-height: 1; }
.pnum { font-size: 10.5px; font-weight: 700; min-width: 28px; }
.pring.done, .pring.bad { background: #16a34a; }
.pring.bad { background: #dc2626; }
.pring.done::before, .pring.bad::before { display: none; }
.bgnote .pwrap { margin-top: 1px; }
.failnote b { color: #dc2626; }
.jobring { align-items: center; margin-top: 8px; }
.ntag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-bottom: 6px;
  background: hsl(var(--nh) 70% 92%); color: hsl(var(--nh) 60% 30%); }
body.dark-page .ntag { background: hsl(var(--nh) 45% 22%); color: hsl(var(--nh) 80% 82%); }
@media (prefers-color-scheme: dark) { .ntag { background: hsl(var(--nh) 45% 22%); color: hsl(var(--nh) 80% 82%); } }
.shelf-sub { margin: -6px 0 8px; }
button.atile { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.atile .fart { filter: saturate(.75); }

/* ---- Bottom bar: Create · My videos · Publish · Team · Tools (#96); Settings now live in the profile menu ---- */
@media (max-width: 760px) {
  .tabs { right: 0 !important; padding-right: 4px !important; }
}
.tabs a { position: relative; }
.tabdot { position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid var(--navy); }
@media (min-width: 761px) { .tabdot { top: 3px; left: 22px; } }
/* The switch on top of the Create and Publish parts */
.hubbar { box-sizing: border-box; width: calc(100% - 32px); max-width: 888px; margin: 14px auto 0; overflow-x: auto; scrollbar-width: none; }
.hubbar::-webkit-scrollbar { display: none; }
.hubbar[hidden] { display: none; }
.hubbar + #app { padding-top: 10px; }
body.dark-page .hubbar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
@media (min-width: 1100px) {
  .hubbar { width: auto; max-width: 888px; margin-left: calc(210px + max(var(--s-4), (100% - 210px - 920px) / 2) + 16px); margin-right: auto; }
  .hubbar:not([hidden]) { width: min(888px, calc(100% - 210px - 64px)); }
  .tabdot { left: 26px; top: 8px; }
}
/* #84 Video files after posting */
.frcard select { width: 100%; margin-top: 4px; }
.frlock { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; margin-top: 10px; }
.frbtns { display: flex; gap: 12px; }
.fileline { margin: 8px 0 0; }
body.dark-page .frcard { margin-top: 16px; }
/* ---- Spending (Credit page) and Our real costs (Admin) ---- */
.sphead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sphead h2 { margin: 0; display: flex; gap: 6px; align-items: center; }
.sppick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px 0 8px; padding-bottom: 2px; }
.sppick::-webkit-scrollbar { display: none; }
.spchip { flex: none; border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.spchip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink, #111); }
.spdates { display: flex; gap: 10px; margin-bottom: 8px; }
.spdates label { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.spdates input { width: 100%; }
.sptotals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.sptotals span { background: color-mix(in srgb, var(--gold) 12%, var(--card)); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.sptotals small { font-size: 10.5px; opacity: .75; }
.sptotals b { font-size: 17px; }
.spday { margin-top: 10px; }
.spdayhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.spname { display: flex; flex-direction: column; min-width: 0; }
.spname b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spamt { flex: none; font-size: 13px; }
.spamt.plus { color: #16a34a; }
.spfree { background: color-mix(in srgb, var(--gold) 10%, transparent); padding: 8px 10px; border-radius: 10px; }

/* Learning Lab: a video-file link has no YouTube picture, so it gets a film icon (#103) */
.lprevicon, .lsicon { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--gold) 14%, var(--card)); color: var(--gold-ink, var(--ink)); }
.lprevicon { width: 112px; aspect-ratio: 16 / 9; }
.lsicon { width: 56px; aspect-ratio: 16 / 9; }
/* Search demand (#124): the measured facts under each search */
.sdfacts { margin: 6px 0 0; padding-left: 18px; }
.sdfacts li { margin: 2px 0; }
/* The thumbnail-score .tscore (absolute, corner) also matched the Trend Intelligence score circles and pushed them
   out of view (C38): inside an opportunity or search card the circle sits in the row. */
.topp-h .tscore { position: static; backdrop-filter: none; padding: 0; }
.sdpick { display: flex; align-items: center; padding-top: 11px; }
.sdpick input { width: 18px; height: 18px; accent-color: var(--gold, #f5c518); }
.sdanswer { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 212, 0, .12); }
.sdterms, .sdranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sdterms li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.sdterms li .grow { flex: 1 1 140px; font-weight: 600; }
.sdterms li small, .sdranks li small { font-size: 11.5px; opacity: .75; }
.sdranks li { display: flex; flex-direction: column; font-size: 13px; }
.sdup { color: #0f8a4b; font-style: normal; font-weight: 600; }
.sddown { color: #b42318; font-style: normal; font-weight: 600; }
.sdterms .sdmk { flex: none; font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gold, #f5c518); background: rgba(255, 212, 0, .14); color: inherit; cursor: pointer; }
/* Country picker (#132): the search box sits just above the list */
.ctryq { margin-bottom: 6px; }
/* My videos top (#147, Idowu 22 Oct): every control the same height (38px), the same pill shape and border, lined up
   on both edges. Row 1: search, Sort into folders, Select. Row 2: status chips as equal parts, edge to edge.
   Row 3: the three menus (Niche, Shape, Sort order) in equal thirds. */
.mvtools { gap: 8px; align-items: stretch; }
.mvsearch input, .mvtools select, .mvtools .btn, .shapebar select, .shapebar .btn { height: 38px; min-height: 38px; box-sizing: border-box; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); margin: 0; }
#mvroot .mvtools select, #mvroot .shapebar select { padding: 0 26px 0 11px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
body:not(.dark-page) #mvroot .shapebar select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.mvsearch input { padding: 0 12px 0 34px; }
.mvsearch svg { left: 12px; width: 16px; height: 16px; }
.mvtools .btn, .shapebar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.shapebar select { max-width: none; width: auto; }
.mvtools .btn { flex: none; }
#mvchips { justify-content: flex-start; gap: 6px; padding: 0 0 10px; }
#mvchips .chip { flex: 1 0 auto; justify-content: center; height: 32px; box-sizing: border-box; padding: 0 10px; }
.shapebar { gap: 8px; margin: 0 0 12px; align-items: stretch; }
.shapebar select { flex: 1 1 0; min-width: 0; }
.shapebar .btn svg { flex: none; }
/* One video (#150): the page heading is "One video"; the question inside the box is a section heading */
.hero .hero-q { font-size: 19px; margin: 0 0 10px; }

/* Switches (#151): the Learning Lab parts look like every other switch; the lit part moves softly. */
.labtabs { border-radius: 999px; }
.labtabs button { border-radius: 999px; min-height: 0; padding: 8px 6px; }
.groupbar a, .groupbar button { transition: background-color .25s ease, color .25s ease; }

/* Thumbnail Director (#153): the recommended option and the director's notes */
.thumbcard { position: relative; }
.trecin { display: inline-block; background: var(--gold); color: #111; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.thumbcard .trec { position: absolute; left: 8px; top: 8px; background: var(--gold); color: #111; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.thumbcard .tdir { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--gold) 12%, transparent); }
.thumbcard .tscore.ph { width: auto; height: auto; min-width: 0; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; line-height: 1.3; display: inline-flex; align-items: center; }
/* #168: every thumbnail of a video as a card: tap (or Select) to choose the one used */
.tchoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tchoices:has(> .tchoice:only-child) { grid-template-columns: 1fr; }
.tchoice { margin: 0; border-radius: 12px; padding: 6px; border: 2px solid transparent; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.tchoice[data-tsel] { cursor: pointer; }
.tchoice.chosen { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.tchoice figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tchoice .tsel { font-size: 11.5px; font-weight: 700; color: #0f8a4b; }
.tchoice .btn { width: auto; min-height: 30px; padding: 4px 12px; }
.tchoice .thumbimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }
/* #170: ideas already made: green score, a tick mark instead of the tick box, folded under "Made already" */
.tscore.done { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
.tscore.doing { background: #f59e0b !important; color: #111 !important; border-color: #f59e0b !important; }
.sdmade { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; }
.sdmade.made { background: #16a34a; color: #fff; }
.sdmade.making { background: #f59e0b; color: #111; }
.sdstate.made { color: #0f8a4b; font-weight: 700; }
.sdstate.making { color: #b45309; font-weight: 700; }
.sdmadefold > summary { padding: 2px 0; }
.sdmadefold .topp { box-shadow: none; border: 1px solid var(--line); margin-top: 10px; }
/* #170: Many videos: ideas already made stay in the list, marked and not ticked */
.idea.made .topic { opacity: .7; }
.idea .imade { margin-top: 4px; }
.idea .imade a { font-weight: 600; }
/* #174: result lists (Research, Search demand) as compact rows close together, each with See more / See less;
   the best one has a gold star and opens by itself */
details.topp { margin: 0 0 5px; padding: 7px 12px; border-radius: 12px; }
details.topp[open] { padding: 14px 16px; margin-bottom: 10px; }
details.topp > summary .tsum { display: flex; align-items: center; gap: 8px; }
details.topp > summary .tsum .topp-h { flex: 1; min-width: 0; margin-bottom: 0; align-items: center; }
details.topp[open] > summary .tsum { margin-bottom: 8px; }
details.topp .topp-h .tscore { width: 32px; height: 32px; font-size: 12px; }
details.topp .topp-h .grow { gap: 0; }
details.topp .topp-h b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
details.topp .topp-h small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.topp .tbadges { display: none; }
details.topp[open] .tbadges { display: flex; }
.tmore { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--gold, #b8860b); white-space: nowrap; }
.tmore svg { transition: transform .2s; }
details.topp[open] > summary .tmore svg { transform: rotate(90deg); }
.tmore .o, details.topp[open] > summary .tmore .c { display: none; }
details.topp[open] > summary .tmore .o { display: inline; }
details.topp.top .tkick { margin: 0 0 6px; }
.tstar { color: #f5b301; font-size: 13px; }
details.topp.top .topp-h b { font-size: 14px; }
details.topp .sdpick input { width: 18px; height: 18px; }
body:not(.dark-page) .tmore { color: #1d4ed8; }

/* #175 (Idowu 22 Oct): results as one list like the Tools page. One box, thin lines between rows, a round down
   arrow on each row; a made row keeps its place with a green circle. */
.rlist { padding: 4px 14px; }
.rbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rbar .btn.sm { flex: none; width: auto; padding: 5px 12px; font-size: 11.5px; min-height: 0; }
details.topp.rrow { margin: 0; padding: 10px 0; border-radius: 0; background: none; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); }
details.topp.rrow:last-child { border-bottom: 0; }
details.topp.rrow[open] { padding: 12px 0 14px; margin: 0; }
details.topp.rrow > summary .tsum { gap: 10px; }
.rdown { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: inherit; opacity: .8; }
.rdown svg { transform: rotate(90deg); transition: transform .2s; }
details.topp.rrow[open] > summary .rdown svg { transform: rotate(-90deg); }
details.topp.rrow.top .tkick { margin: 0 0 6px; }
details.topp.rrow .rbody { padding-left: 2px; }
/* #175: Today's idea rows in the same list style */
.ideas.compact.rlist-in { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; }
.ideas.compact.rlist-in .idea { grid-template-columns: auto auto 1fr auto; align-items: center; border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); padding: 10px 0; margin: 0; }
.ideas.compact.rlist-in .idea:last-child { border-bottom: 0; }
.ideas.compact.rlist-in .idea .num { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; background: rgba(212, 160, 23, .14); }
.ideas.compact.rlist-in .idea.made { opacity: 1; }
.ideas.compact.rlist-in .idea.made .num { background: #22c55e; color: #fff; }
.ideas.compact.rlist-in .idea .grow { align-self: center; }
.ideas.compact.rlist-in .rdown { background: none; cursor: pointer; padding: 0; }
.ideas.compact.rlist-in .rdown[aria-expanded="true"] svg { transform: rotate(-90deg); }
.ideas.compact.rlist-in .sdmade { width: 20px; text-align: center; }
/* #176: "Make several at once" joins the list box; the last row's line is the divider */
.rlist .rfoot { border-top: 0; padding: 12px 0 10px; }

/* #177 (Idowu 22 Oct): history rows: "View" drops the result open right under the row (turns into "Minimise"),
   the status and time sit under it, Delete lives in the ⋮ menu. Same on every page with a history list. */
.hview { display: inline-flex; align-items: center; gap: 3px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--gold, #d4a017); background: rgba(212, 160, 23, .12); color: inherit; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hrow.on .hview { background: var(--gold, #d4a017); color: #111; }
.hside .hok { color: #10b981; font-weight: 600; opacity: 1; }
.hdots { font-size: 18px; line-height: 1; font-weight: 700; }
.hrow.on { border-bottom: 0; }
.hdrop { padding: 4px 0 10px; }
/* #186 (Idowu 22 Oct): back to the look he chose: an opened result shows as boxes inside the history card. */
.hdrop > div > .card, .hdrop > div > section.card { box-shadow: none; border: 1px solid var(--line); margin: 8px 0; padding: 12px; }
.hdrop .labhead, .hdrop .shelf-top h2 { font-size: 15px; }
.hview svg.down { transform: rotate(90deg); }
.hview svg.up { transform: rotate(-90deg); }
/* #178: a design still being made on the video page */
.tchoice .tmaking { display: grid; place-items: center; aspect-ratio: 16 / 9; background: rgba(127,127,127,.12); border-radius: 10px; animation: tpulse 1.4s ease-in-out infinite; }
@keyframes tpulse { 50% { opacity: .55; } }

/* #179: Search demand: a small yellow button in the search box jumps to "Your channel on YouTube search";
   "Your channel checks" is glued under it with a line, both keeping their round corners. */
#sdform { position: relative; }
.sdjump { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--gold, #f5c400); color: #111; display: grid; place-items: center; cursor: pointer; z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.card.joined-top { margin-bottom: 0; }
/* #184 (Idowu's picture, 22 Oct): joined boxes touch, each keeps its round corners (the small curves show where one
   ends and the next begins), with a short light line in the middle of the join. */
.card.joined-bottom { margin-top: 0; position: relative; }
.card.joined-bottom::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: var(--line); }
#sdhist #sdout:not(:empty) { margin: 4px 0 8px; }

/* #180: a red bin on each thumbnail on the video page; upload row (choose file · Upload) on one line, no folds */
.tchoice { position: relative; }
/* #182: just a red bin outline, to the right of Select (not on the picture, no round background) */
.tchoice .tbin { flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #dc2626; display: grid; place-items: center; cursor: pointer; }
.tchoice .tbin:disabled { opacity: .5; }
.tadd { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 8px; }
.tuprow { display: flex; align-items: center; gap: 8px; }
.tuprow input[type=file] { flex: 1; min-width: 0; font-size: 12px; }
.tuprow .btn { flex: none; width: auto; }
.tchoice figcaption { justify-content: flex-start; }
.tchoice figcaption > span.small:first-child { flex-basis: 100%; text-align: left; }

/* #185: the thumbnail in use is shown big on top (full width); the others are the smaller cards under it */
.tchoice.main { grid-column: 1 / -1; }
.tchoice.main figcaption > span.small:first-child b { font-size: 13px; }

/* #186: "Your channel checks" sits inside the "Your channel on YouTube search" box, under a thin line */
#sdchan #sdchist { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }

/* #188: "You have made this video before" popup */
.reps { display: grid; gap: 10px; max-height: 50vh; overflow: auto; }
.rep { display: flex; gap: 10px; align-items: center; }
.rep .repimg { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.rep .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep b { font-size: 13px; line-height: 1.3; }
/* #189: "See all" under the top 5 searches */
.rlist .rmorebtn { display: flex; align-items: center; gap: 4px; margin: 10px 0 4px; }
.rlist .rmore > details.topp.rrow:last-child { border-bottom: 1px solid var(--line); }
.seeall svg.up { transform: rotate(-90deg); }
/* ---- Recently deleted (My videos) ---- */
.rdlist { display: grid; gap: 8px; }
.rdrow { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.rdthumb { width: 96px; aspect-ratio: 16/9; border-radius: 8px; background: rgba(127,127,127,.3) center/cover; grid-row: span 2; }
.rdthumb.tall { width: 54px; aspect-ratio: 9/16; justify-self: center; }
.rdmeta { display: flex; flex-direction: column; min-width: 0; }
.rdmeta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdbtns { display: flex; gap: 6px; }
.rdbtns .btn { width: auto; }
.rdnote { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

/* #197: My presenter page */
.pphoto { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 2px solid var(--line); }
.ptests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ptest { margin: 0; padding: 8px; }
.ptest video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #000; display: block; }
.ptest .tmaking { display: grid; place-items: center; aspect-ratio: 1 / 1; background: rgba(127,127,127,.12); border-radius: 10px; animation: tpulse 1.4s ease-in-out infinite; }
.ptest figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.ptest .tbin { flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #dc2626; display: grid; place-items: center; cursor: pointer; }
/* #198: Upload video progress bar */
.upbar { height: 8px; border-radius: 99px; background: rgba(127,127,127,.18); overflow: hidden; margin-top: 10px; }
.upbar i { display: block; height: 100%; width: 0; background: var(--gold, #f5c400); transition: width .3s; }
/* J (#200): idea of the day card on One video */
.idday { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.idday .grow { display: flex; flex-direction: column; min-width: 0; }
.idday b { font-size: 13px; line-height: 1.3; }
.idday .btn { flex: none; width: auto; }
.revbadge.ida { background: rgba(245, 196, 0, .18); color: #b8860b; }
.clesson .epstat:empty{display:none}
/* #21: tints, not fixed colours, so the box reads in light and dark mode alike */
.stotal { background: rgba(127, 127, 127, .08); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; color: inherit; }
.strow { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.strow b { white-space: nowrap; }
.stsum { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-size: 13px; }

/* #17 (Idowu 23 Oct, docs/design/history-row-reference.jpg; #19: the concept only, in the site's own colours): every
   history row ("Your shows", "Your courses"...) is its own rounded bar with a soft shadow under it and a number on the left. */
.hlist { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; }
.hlist .hrow, .hlist .hrow:first-child { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 9px 10px 9px 9px; box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .28), 0 1px 3px rgba(15, 23, 42, .06); }
.hlist .hrow.on { border-color: var(--gold, #d4a017); }
.hnum { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gold, #d4a017); color: #111; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
/* #20 (Idowu 23 Oct): List / Pictures / Gallery switch for lists with pictures ("Your shows"). Same buttons in all three. */
.hacts { display: flex; align-items: center; gap: 8px; flex: none; }
.hpic { display: none; }
.hlayouts { display: flex; gap: 6px; margin: 2px 0 10px; }
.hlay { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; opacity: .75; }
.hlay[aria-checked="true"] { border-color: var(--gold, #d4a017); background: rgba(212, 160, 23, .14); opacity: 1; }
.lay-pics .hrow, .lay-cards .hrow { position: relative; display: grid; align-items: start; column-gap: 10px; row-gap: 6px; }
.lay-pics .hpic, .lay-cards .hpic { grid-area: pic; display: flex; aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #20396a, #3a5c96); align-items: flex-end; justify-content: center; }
.hpic img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: center 15%; }
.hpic.many img { object-position: center 20%; }
.hpic b { align-self: center; color: #fff; font-size: 26px; font-weight: 700; opacity: .9; }
.lay-pics .hnum, .lay-cards .hnum { position: absolute; top: 14px; left: 14px; width: 24px; height: 24px; font-size: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.lay-pics .hmain, .lay-cards .hmain { grid-area: main; }
.lay-pics .hmain b, .lay-cards .hmain b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.lay-pics .hside, .lay-cards .hside { grid-area: side; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lay-pics .hacts, .lay-cards .hacts { grid-area: acts; justify-self: end; align-self: end; }
.lay-pics .hrow { grid-template-columns: 42% 1fr auto; grid-template-areas: "pic main main" "pic side acts"; }
.lay-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lay-cards .hrow { grid-template-columns: 1fr auto; grid-template-areas: "pic pic" "main main" "side acts"; padding: 8px; }
.lay-cards .hside { flex-direction: column; align-items: flex-start; }
.lay-cards .hdrop, .lay-cards > p { grid-column: 1 / -1; }
/* #24: the mic inside every writing box (mic.js) */
.micwrap { position: relative; display: block; }
.micwrap > textarea { padding-right: 46px; width: 100%; box-sizing: border-box; }
.micbtn { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--gold, #ffd21f); color: #111; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.micbtn.on { background: #e5484d; color: #fff; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .45); } 50% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .micbtn.on { animation: none; } }
/* #28: the upload bar shown on every page while a video uploads (uploader.js) */
#upchip { position: fixed; left: 16px; right: 84px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 18; display: block; overflow: hidden; border-radius: 999px; background: var(--card, #fff); color: inherit; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); text-decoration: none; height: 34px; }
#upchip .upchip-bar { position: absolute; inset: 0 auto 0 0; background: rgba(212, 160, 23, .35); transition: width .4s ease; }
#upchip .upchip-text { position: relative; display: block; padding: 0 14px; line-height: 34px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Money book (Admin, #237) */
.mbh { font-size: 13px; margin: 14px 0 4px; }
.mbbar { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--gold) 15%, transparent); margin-top: 4px; width: 140px; max-width: 100%; }
.mbbar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.mbgood { color: #16a34a; }
.mbbad { color: #dc2626; }
.mbtable { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 4px 8px; font-size: 11.5px; padding: 6px 0; }
.mbform { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 4px; }
.mbform input, .mbform select { font: inherit; font-size: 11.5px; min-width: 0; }
.mbday summary { list-style: none; cursor: pointer; }
.mbday summary::-webkit-details-marker { display: none; }
.mbline { display: flex; justify-content: space-between; font-size: 11.5px; padding: 3px 0 3px 10px; }
.mbook .sptotals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbook .sptotals span { min-width: 0; }
.mbook .sptotals small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbook .sptotals b { font-size: 15px; }
/* Admin lists in the Search demand look (#238) */
.hmore { margin: -4px 4px 4px; padding: 8px 12px; border: 1px solid var(--gold, #d4a017); border-top: 0; border-radius: 0 0 14px 14px; font-size: 11.5px; }
.hmore .mbline { padding-left: 0; }
.adminbar { overflow-x: auto; scrollbar-width: none; }
.adminbar::-webkit-scrollbar { display: none; }
.adminbar a { flex: none; padding: 8px 12px; }
.mbplat { display: grid; grid-template-columns: 1fr 96px; gap: 6px 10px; align-items: center; font-size: 12px; }
.mbplat input { font: inherit; font-size: 12px; width: 100%; min-width: 0; }
.mbplat small { display: block; font-size: 10.5px; opacity: .7; }

/* Cartoon studio: five steps on a show (#240) */
.ssteps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 4px 0 8px; }
.sstep { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 10.5px; font-weight: 600; color: inherit; cursor: pointer; min-width: 0; }
.sstep span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sstepn { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--card); border: 1.5px solid var(--line); }
.sstep.done .sstepn { background: var(--gold, #d4a017); border-color: var(--gold, #d4a017); color: #111; }
.sauto { display: flex; margin: 0 0 6px; }
.sstephead { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 8px; scroll-margin-top: 70px; }
.sstephead .sstepn { background: var(--gold, #d4a017); border-color: var(--gold, #d4a017); color: #111; margin-top: 2px; }
.sstephead h2 { margin: 0; font-size: 19px; }
.sstephead p { margin: 2px 0 0; }
.sapprove { margin: 4px 0 12px; }
.sok { color: #059669; margin: 0; }
.stotal:empty { display: none; }

/* Production plan, stage A (#242) */
.pplanline { display: block; margin-top: 2px; }
.pplan { scroll-margin-top: 70px; }
.pphead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.ph { font-size: 15px; margin: 14px 0 6px; display: flex; gap: 8px; align-items: center; }
.pill.pok { background: rgba(16,185,129,.15); color: #059669; }
.pscene { border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin: 0 0 10px; }
.pschead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.pscene input, .pscene select, .pscene textarea { font: inherit; font-size: 12px; width: 100%; min-width: 0; box-sizing: border-box; }
.pscene textarea { margin-top: 4px; }
.pnum { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--gold, #d4a017); color: #111; font-size: 11px; font-weight: 700; }
.pline { font-size: 12.5px; margin: 4px 0; display: flex; gap: 6px; align-items: flex-start; }
.ped { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.prow { display: flex; gap: 6px; align-items: center; min-width: 0; }
.prow select, .prow input:not([type="number"]) { flex: 1; min-width: 0; }
.prow label { display: flex; align-items: center; gap: 4px; }
.prow label input { width: 56px; }
.pshot { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.pacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.pacts .btn { width: auto; }

/* Model test (#244) */
.mtgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mtcell { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.mtcell img, .mtcell video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.mtcell figcaption { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.mtcell figcaption .btn { font-size: 11px; padding: 5px 8px; }
.mtfail { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; font-size: 11px; color: #dc2626; background: rgba(239,68,68,.08); padding: 6px; overflow: hidden; }
.mtfail span { font-size: 9.5px; opacity: .8; word-break: break-word; }

/* Character size cards and line-up (#245) */
.sspec summary { cursor: pointer; }
.sspecf { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sspecf label { display: flex; flex-direction: column; gap: 2px; }
.sspecf input, .sspecf textarea { font: inherit; font-size: 12px; width: 100%; box-sizing: border-box; }
.slineup img { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; margin: 0 0 8px; }
#sbiblecard label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
#sbiblecard textarea { font: inherit; font-size: 12px; }
/* Storyboard (#32): one panel per shot, two across on a phone; 16:9 pictures (9:16 for tall shows). */
.pboard { margin-top: 14px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 4px; }
.sbrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .sbrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sbgrid.tall .sbrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbcell { margin: 0; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; overflow: hidden; background: var(--card, #fff); min-width: 0; }
.sbcell.ok { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a inset; }
.sbpic { position: relative; aspect-ratio: 16 / 9; background: #f1f5f9; display: flex; align-items: center; justify-content: center; text-align: center; }
.sbgrid.tall .sbpic { aspect-ratio: 9 / 16; }
.sbpic a, .sbpic img { display: block; width: 100%; height: 100%; }
.sbpic img { object-fit: cover; }
.sbstale { position: absolute; left: 6px; top: 6px; background: #f59e0b; color: #fff; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.sbok { position: absolute; right: 6px; top: 6px; background: #16a34a; color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.sbcell figcaption { padding: 6px 8px 8px; font-size: 11.5px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.sbcell figcaption .small { font-size: 11px; }
.sbacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sbacts .btn { width: auto; padding: 4px 10px; font-size: 11.5px; }
.sbredo { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sbredo textarea, .sbredo select { font: inherit; font-size: 11.5px; width: 100%; box-sizing: border-box; }
.sbhist { display: flex; gap: 6px; overflow-x: auto; }
.sbold { flex: 0 0 31%; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: none; cursor: pointer; text-align: left; }
.sbold img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px 8px 0 0; }
.sbold span { padding: 0 4px 4px; font-size: 10.5px; }
/* Warnings (question 20): the owner's red bar while something is wrong. */
#alertbar { display: flex; flex-direction: column; gap: 2px; margin: 8px 16px 0; padding: 10px 14px; border-radius: 14px; background: #fee2e2; color: #991b1b; text-decoration: none; font-size: 13px; }
#alertbar span { font-size: 11.5px; }
.warnrow { border-left: 3px solid #dc2626; padding: 6px 10px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
/* The numbered production steps (#249): yellow to do, green done, blue working, grey coming. */
.sbox { background: var(--card, #fff); border-radius: 16px; margin: 0 0 10px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); border: 1px solid var(--line, #e5e7eb); }
.sbox > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.sbox > summary::-webkit-details-marker { display: none; }
.sbnext { margin: 10px 0 0; }
.sbnext .linkbtn { font-weight: 600; }
.sbn { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: #fcd34d; color: #78350f; }
.sbox.done .sbn { background: #16a34a; color: #fff; }
.sbox.working .sbn { background: #2563eb; color: #fff; animation: sbpulse 1.4s ease-in-out infinite; }
.sbox.coming .sbn { background: #e5e7eb; color: #6b7280; }
.sbox.check .sbn { background: #dc2626; color: #fff; }
@keyframes sbpulse { 50% { opacity: .55; } }
.sbt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sbt b { font-size: 13px; }
.sbt .small { font-size: 11.5px; }
.sbchev { width: 8px; height: 8px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
.sbox[open] .sbchev { transform: rotate(-135deg); }
.sbbody { padding: 0 14px 14px; }
.sbbody > .card { box-shadow: none; border: 0; padding: 0; margin: 0 0 10px; background: transparent; }
.sbapp { margin-top: 10px; }
.sphase { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin: 18px 2px 8px; font-weight: 600; }
.sprog { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.sprog .bar { flex: 1; height: 6px; border-radius: 6px; background: #e5e7eb; overflow: hidden; }
.sprog .bar i { display: block; height: 100%; background: #16a34a; }
/* The episode buttons: 3 across (#249). */
.epgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.epbtn { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 14px; border: 1px solid var(--line, #e5e7eb); background: var(--card, #fff); text-decoration: none; color: inherit; min-width: 0; }
.epbtn b { font-size: 13px; }
.epbtn .small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epbtn.done { border-color: #16a34a; background: #f0fdf4; }
.epbtn.started { border-color: #fcd34d; }
.epbtn .epbar { height: 4px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin-top: 4px; }
.epbtn .epbar i { display: block; height: 100%; background: #16a34a; }
.epbtn.off { opacity: .5; }
.bgcancel { margin-top: 8px; width: auto; }
.epnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; }
.stylepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
.stylepick button { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--card, #fff); display: flex; flex-direction: column; text-align: left; cursor: pointer; font: inherit; }
.stylepick button.on { border-color: #f5b301; }
.stylepick .sthumb { aspect-ratio: 16 / 9; background: #e2e8f0; display: block; width: 100%; object-fit: cover; }
.stylepick span { font-size: 11px; padding: 4px 6px 6px; }
/* The show library (#250): an item's pictures, card and buttons. */
.libitem { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 8px 10px; margin: 0 0 8px; }
.libitem > summary { cursor: pointer; }
.libpics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.libpics a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.libpics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #f1f5f9; }
.libpics .liblocsheet { grid-column: 1 / -1; }
.libpics .liblocsheet img { aspect-ratio: auto; object-fit: contain; background: #fff; }
.libviews { margin: 4px 0 6px; }
.libvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.libvgrid .check { margin: 0; }
.libacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.libacts .btn { width: auto; }
.libitem textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; }
/* Stage 2b: the continuity checker's notes on a storyboard panel. */
.sbcheck { font-size: 11px; border-radius: 8px; padding: 4px 6px; margin-top: 4px; display: block; }
.sbcheck.bad { background: #fef2f2; color: #991b1b; }
.sbcheck.ok { background: #f0fdf4; color: #166534; }
.sbcheck.small { background: #fffbeb; color: #92400e; }
.lesson { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.lesson label { flex: 1; margin: 0; }
.lesson.off label { opacity: .5; }

/* #326: the picture viewer (tap a picture, swipe through the step's pictures) */
.viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(6, 12, 24, .96); color: #fff; display: flex; flex-direction: column; touch-action: none; }
.viewer .vtop { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 8px; }
.viewer .vtop span { flex: 1; opacity: .85; }
.viewer .vtop a { color: #ffd21f; }
.viewer .vclose { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 50%; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }
.viewer .vstage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 8px; }
.viewer .vstage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; transition: transform .15s ease; user-select: none; -webkit-user-drag: none; }
.viewer .vcap { text-align: center; margin: 8px 16px calc(14px + env(safe-area-inset-bottom)); opacity: .85; min-height: 1em; }
.viewer .vnav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); color: #fff; border: 0; width: 40px; height: 56px; border-radius: 12px; font-size: 28px; cursor: pointer; }
.viewer .vnav.prev { left: 6px; } .viewer .vnav.next { right: 6px; }
.viewer .vnav:disabled { opacity: .25; }
body.viewing { overflow: hidden; }

/* #347: the One video page's notices fold into one, with "See N more" beside it */
.homenotes { display: flex; flex-direction: column; gap: 0; }
.homenotes .hnmore { align-self: flex-end; margin: -4px 4px 10px; }
/* #347: the show library shelf (no step number). */
.sbox.shelf .sbn { background: #e0e7ff; color: #1e3a8a; }
/* Change posting date (question 102) */
.rslist { display: grid; gap: 6px; margin: 4px 0 10px; max-height: 40vh; overflow: auto; }
.rsrow { display: grid; gap: 1px; }
.rsrow .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rsscope { display: grid; gap: 2px; margin: 6px 0; }
.calvid .rsbtn { display: inline-block; margin-top: 2px; font-size: 11.5px; }

/* #270: Thumbnail Studio "start from one of your videos": search + a clean list with a tiny picture. */
.tjoblist { margin-top: 6px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); }
.tjobrow { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.tjobrow:last-of-type { border-bottom: 0; }
.tjobrow img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--line); }
.tjobrow span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tjobrow.on { background: color-mix(in srgb, var(--gold) 16%, var(--card)); }
.tjobmore { margin: 6px 8px; }

/* #276: brand kit logo preview: a 16:9 frame with the logo at its real share of the height. */
.blogoprev { position: relative; aspect-ratio: 16 / 9; margin-top: 4px; border-radius: var(--r-sm); background: linear-gradient(135deg, #20396a, #0b1d3a); overflow: hidden; }
.blogomark { position: absolute; display: flex; align-items: center; justify-content: center; min-width: 8%; color: #fff; font-size: 10.5px; font-weight: 700; opacity: .92; }
.blogomark img { height: 100%; width: auto; display: block; }

/* Idea 49: the folded price breakdown under a price */
.pricebd { margin-top: 6px; color: inherit; }
.pricebd summary { cursor: pointer; text-decoration: underline; }
.pricebd p { margin: 4px 0 0; }

/* #11 point 4: an approved storyboard picture folds its description and notes */
.sbmore summary { cursor: pointer; color: var(--muted, #64748b); padding: 2px 0; }
.sbmore[open] summary { margin-bottom: 2px; }
.sbmore > span { display: block; }

/* #11 point 28: Thumbnail Studio History, one row per batch */
#tlib { display: block; }
.thist { border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); margin: 0 0 8px; color: var(--ink); }
.thist > summary { display: flex; gap: 10px; align-items: center; padding: 8px; cursor: pointer; list-style: none; }
.thist > summary::-webkit-details-marker { display: none; }
.thist > summary img, .thist-ph { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: #e2e8f0; }
.thist > summary img.vertical { width: 40px; aspect-ratio: 9 / 16; }
.thist > summary > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.thist > summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thist > .thumbgrid { padding: 0 8px 8px; }

/* #11 point 19: schedule several videos, each with its own day */
.aplist { display: grid; gap: 6px; }
.aprow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.aprow .apt { display: flex; flex-direction: column; min-width: 0; }
.aprow .apt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aprow input[type=datetime-local] { grid-column: 2; width: 100%; }
.aprow input[type=datetime-local]:disabled { opacity: .5; }

/* #11 points 26/29: brand kit Video look previews */
.vlook .dsgprev { display: block; width: 100%; max-width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-top: 6px; border: 1px solid var(--line); }
.vlook .dsgprev[hidden] { display: none; }

/* #19 (Idowu, 30 Oct): My videos filters in two fixed rows of four (no sideways scrolling); the Removed note sits under
   the rows across the full width instead of pushing the chips about. */
#mvchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; flex-wrap: initial; padding: 2px 0 10px; }
#mvchips .chip { justify-content: center; min-width: 0; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mvchips .mvnote { grid-column: 1 / -1; margin: 4px 0 0; }

/* #21 (Idowu, 30 Oct): a History row's number says how far it is: gold still to do, green everything made, blue
   everything posted. */
.hnum.complete { background: #22a35a; color: #fff; }
.hnum.posted { background: #2f7de1; color: #fff; }

/* #21: removed videos: faded, black and white, with a label (the dark overlay keeps the label readable). */
.tile.removed .tile-img, .job.removed .thumb { filter: grayscale(1) brightness(.75); position: relative; }
.tile.removed .tile-img::after, .job.removed .thumb::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.35) 0 10px, rgba(0,0,0,.2) 10px 20px); border-radius: inherit; }
.rmbadge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: rgba(15, 20, 30, .92); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(255,255,255,.35); }
.tile.removed .tile-title, .job.removed h3 { opacity: .75; }