:root {
  --bg: #f6f7f9; --card: #fff; --ink: #141a24; --muted: #5a6577; --rule: #dde2ea;
  --accent: #1f5f99; --accent-ink: #fff; --good: #2c7a50; --warn: #a8660b; --bad: #a33a2b;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141b; --card: #171e28; --ink: #e5eaf1; --muted: #9aa7ba; --rule: #2a3444;
    --accent: #79b1e4; --accent-ink: #0f141b; --good: #6cc39a; --warn: #e2a54e; --bad: #e58a78;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
/* `hidden` must always win: rules like `nav { display: flex }` otherwise override it (the menu showed when signed out). */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--card); flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--accent); }
nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
nav a, .link { color: var(--muted); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
nav a:hover, .link:hover { color: var(--accent); }
main { max-width: 760px; margin: 0 auto; padding: 28px 16px 64px; }
h1 { font-size: 28px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 20px; margin: 28px 0 10px; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; margin: 16px 0; }
label { display: block; font-weight: 600; margin: 14px 0 4px; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
input, textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button.primary, button.secondary { font: inherit; font-weight: 600; border-radius: 8px; padding: 10px 18px; cursor: pointer; border: 1px solid var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); }
button.secondary { background: transparent; color: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.tabs button { flex: 1; }
.error { color: var(--bad); margin-top: 10px; }
.jobs { list-style: none; padding: 0; margin: 0; }
.jobs li { border-top: 1px solid var(--rule); }
.jobs li:first-child { border-top: 0; }
.jobs a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--ink); text-decoration: none; align-items: baseline; }
.jobs a:hover .topic { color: var(--accent); }
.topic { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.badge { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: var(--bg); color: var(--muted); border: 1px solid var(--rule); }
.badge.AWAITING_APPROVAL, .badge.VIDEO_REVIEW { color: var(--warn); border-color: var(--warn); }
.badge.READY, .badge.PUBLISHED { color: var(--good); border-color: var(--good); }
.badge.FAILED { color: var(--bad); border-color: var(--bad); }
.script { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; max-height: 60vh; overflow: auto; font-size: 15px; }
.meter { font-size: 14px; color: var(--muted); }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; max-width: calc(100% - 32px); }
.preview { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: 8px; margin: 8px 0; }
.files { list-style: none; padding: 0; margin: 8px 0 0; }
.files li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.files li:first-child { border-top: 0; }
.fname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; flex: 1 1 200px; }
.picker select { width: auto; flex: 1 1 220px; min-width: 0; max-width: 100%; } /* no overflow past the card on phones */
.picker input[type=file] { width: auto; flex: 1 1 220px; background: none; border: 0; padding: 6px 0; }

/* plan status line: one message, one button */
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 4px solid var(--accent); }
.nudge p { margin: 0; flex: 1 1 260px; }

/* ---- videos list ---- */
.phead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.phead h1 { margin: 0; }
.vpanel { margin-top: 20px; }
.vhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vhead h2 { margin: 0; }
.vsearch { width: auto; flex: 1 1 200px; max-width: 280px; }
.fbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; }
.fchip { font: inherit; font-size: 14px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.fchip b { font-variant-numeric: tabular-nums; }
.fchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vsect h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; }
.vsect.needs h3 { color: var(--warn); }
.vmonth h4 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 2px 6px; }
.vcards { display: grid; gap: 12px; }
.vcard { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; color: var(--ink); text-decoration: none; }
.vcard.needs { border-color: var(--warn); }
.vcard:hover .vtitle, .vrow:hover .vrowtitle { color: var(--accent); }
.vthumb { position: relative; aspect-ratio: 16 / 9; background: #1b222d; }
.vthumb img, .vmini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vchip { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: #fbf3e6; color: #8a5208; }
.vplay { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); }
.vplay::after { content: ""; position: absolute; left: 22px; top: 16px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.vdur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.concept { min-height: 128px; gap: 16px; background: linear-gradient(135deg, #1f3550, #2d5a86); color: #fff; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.cstage { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cidea { font-size: 15px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.cidea small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.vbody { padding: 12px 14px 14px; }
.vtitle { font-weight: 700; line-height: 1.3; margin-bottom: 8px; overflow-wrap: anywhere; }
.steps { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.step { display: inline-flex; align-items: center; gap: 5px; }
.sdot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; }
.step.ok .sdot { background: var(--good); }
.step.now .sdot { background: var(--warn); box-shadow: 0 0 0 3px rgba(168,102,11,.18); }
.step.now { color: var(--ink); font-weight: 600; }
.sline { flex: 1; height: 2px; background: var(--rule); min-width: 12px; }
.sline.ok { background: var(--good); }
.vbtn { display: block; margin-top: 12px; text-align: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 10px; padding: 11px; }
.vrows { display: grid; gap: 8px; }
.vrow { display: flex; gap: 12px; align-items: center; padding: 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.vmini { position: relative; width: 112px; flex: none; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #1f3550, #2d5a86); }
.vyt { position: absolute; left: 5px; bottom: 5px; background: #e00; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; }
.vrowtext { min-width: 0; }
.vrowtitle { font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.vrowstatus { font-size: 12px; color: var(--muted); margin-top: 3px; }
.vrow.PUBLISHED .vrowstatus { color: var(--good); font-weight: 700; }
.vrow.FAILED .vrowstatus { color: var(--bad); font-weight: 700; }
.more { width: 100%; margin-top: 12px; }
@media (min-width: 720px) {
  .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cidea.muted-idea { font-weight: 500; opacity: .75; font-size: 14px; }

/* ---- owner: needs attention ---- */
.attn h2 { margin: 6px 0 4px; }
.attn-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.attn-video { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.attn-pre { white-space: pre-wrap; font-size: 12px; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 10px; max-height: 260px; overflow: auto; }
.attn-diag { background: var(--bg); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 6px; margin: 10px 0; white-space: pre-wrap; }
.attn-diag p { margin: 6px 0 0; }
.attn-result { font-size: 14px; margin: 10px 0 0; color: var(--muted); }
.attn-result.failed, .attn-result.refused { color: var(--bad); }
.attn-result.done { color: var(--good); }

/* ---- upgrade panel ---- */
dialog.upsell { border: 0; border-radius: 16px; padding: 22px 18px 16px; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
dialog.upsell::backdrop { background: rgba(10, 14, 20, .55); }
.upsell h2 { margin: 0 32px 6px 0; font-size: 22px; line-height: 1.2; }
.upsell-x { position: absolute; right: 12px; top: 10px; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.upsell-results { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 15px; }
.upsell-opt { position: relative; border: 1px solid var(--rule); border-radius: 12px; padding: 14px; margin: 12px 0; }
.upsell-opt.best { border: 2px solid var(--accent); }
.upsell-opt.small { background: var(--bg); }
.upsell-tag { position: absolute; top: -11px; left: 12px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
.upsell-name { font-size: 17px; margin-bottom: 4px; }
.upsell-name span { color: var(--muted); }
.upsell-sum { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.upsell-points { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.upsell-opt button, .upsell-opt .btnlink { width: 100%; }
.btnlink { display: block; text-align: center; text-decoration: none; font-weight: 600; border-radius: 8px; padding: 10px 18px; border: 1px solid var(--accent); color: var(--accent); }
.upsell-fine { font-size: 12px; color: var(--muted); margin: 6px 0 0; text-align: center; }
.upsell-credit { font-size: 14px; color: var(--good); font-weight: 600; margin: 0 0 8px; }
.upsell-safe { font-size: 14px; color: var(--good); margin: 10px 0; }

/* ---- demo ---- */
.demobar { padding: 8px 16px; background: #fbf3e6; color: #6b4206; font-size: 14px; border-bottom: 1px solid #ecd3a8; }
.demobar .link { color: #6b4206; text-decoration: underline; }
.demobar-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.demotour { margin: 8px 0 2px; padding-left: 22px; }
.demotour li { margin: 3px 0; }
.demotour a { color: #6b4206; font-weight: 600; }
.demotour li.done a { color: #2c7a50; font-weight: 500; }
.demodone { margin: 6px 0 0; font-weight: 600; }
.afterdemo { text-align: center; max-width: 520px; margin: 24px auto 0; }
.afterdemo .card { text-align: center; }
button.big { font-size: 18px; padding: 14px 24px; width: 100%; }
.demodone button { margin-top: 6px; }

/* ---- dictation: mic inside the box ---- */
.dictate-field { position: relative; }
.dictate-field.multi textarea { padding-right: 46px; padding-bottom: 12px; }
.dictate-field.single input { padding-right: 46px; }
button.dictate { position: absolute; right: 7px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, box-shadow .15s; }
.dictate-field.multi button.dictate { bottom: 9px; }
.dictate-field.single button.dictate { top: 50%; transform: translateY(-50%); }
button.dictate svg { width: 18px; height: 18px; }
button.dictate:hover, button.dictate:focus-visible { background: var(--rule); color: var(--ink); }
button.dictate:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.dictate.on { background: var(--bad); color: #fff; box-shadow: 0 0 0 6px rgba(229, 138, 120, .2); }
.dictate-field.listening textarea, .dictate-field.listening input { border-color: var(--bad); outline-color: var(--bad); }
.dictate-msg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.dictate-msg:empty { display: none; }
.dictate-msg.live { color: var(--bad); cursor: pointer; }
.dictate-msg .bars { display: inline-flex; gap: 2px; align-items: center; height: 12px; }
.dictate-msg .bars i { display: block; width: 3px; height: 4px; border-radius: 2px; background: currentColor; animation: wave 1s ease-in-out infinite; }
.dictate-msg .bars i:nth-child(2) { animation-delay: .15s; } .dictate-msg .bars i:nth-child(3) { animation-delay: .3s; }
.dictate-msg .bars i:nth-child(4) { animation-delay: .45s; } .dictate-msg .bars i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .dictate-msg .bars i { animation: none; height: 8px; } button.dictate { transition: none; } }