/* Clipper UI — «Modern Dark (Cinema)»: глибокий графіт, один акцент (помаранчевий WAS), Inter.
   Кольори тільки через токени — компоненти не тримають сирий hex (крім брендових прев'ю шаблону). */
:root {
  --bg:#0B0E14; --bg-glow:rgba(255,95,47,.07);
  --card:#131822; --card-2:#1A202C; --card-hover:#232a38; --input:#0F131B;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --text:#F1F3F7; --muted:#98A1B3; --faint:#5E6677;
  --accent:#FF5F2F; --accent-hover:#FF7A52; --on-accent:#140803; --accent-soft:rgba(255,95,47,.12); --accent-line:rgba(255,95,47,.3);
  --green:#2FD39A; --green-soft:rgba(47,211,154,.12); --green-line:rgba(47,211,154,.25);
  --red:#FF6B6B; --red-soft:rgba(255,107,107,.12); --red-line:rgba(255,107,107,.3);
  --yellow:#E0F900; --yellow-soft:rgba(224,249,0,.16); --yellow-line:rgba(224,249,0,.25);
  --violet:#A9A3FF; --violet-soft:rgba(107,97,255,.16); --violet-line:rgba(107,97,255,.3);
  --ring:0 0 0 3px rgba(255,95,47,.35);
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-feature-settings:"cv11","ss01";
  background:radial-gradient(1200px 500px at 50% -200px, var(--bg-glow), transparent 70%), var(--bg); background-attachment:fixed;
  color:var(--text); -webkit-font-smoothing:antialiased; }
.wrap { max-width:1040px; margin:0 auto; padding:28px 16px 80px; }
h1 { font-size:28px; line-height:1.2; font-weight:700; letter-spacing:-.02em; margin:8px 0 8px; }
h1[data-icon] { display:flex; align-items:center; gap:12px; }
.h1Ic { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--r); background:var(--accent-soft); color:var(--accent); flex:none; }
h1 + .muted { font-size:14px; max-width:680px; margin:0 0 20px; }
h2 { font-size:17px; font-weight:600; letter-spacing:-.01em; margin:32px 0 12px; }
h3 { font-weight:600; letter-spacing:-.01em; }
.ic { flex:none; display:block; }

/* ---------- базові контроли ---------- */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-bottom:12px; box-shadow:var(--shadow); }
input,textarea,button,select { font:inherit; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--input); color:var(--text); padding:9px 12px; }
input,textarea { width:100%; margin-bottom:10px; transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:hover, textarea:hover, select:hover { border-color:var(--border-strong); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
textarea { min-height:76px; resize:vertical; line-height:1.55; }
input[type="checkbox"] { accent-color:var(--accent); width:16px; height:16px; vertical-align:-3px; }
input[type="range"] { accent-color:var(--accent); padding:0; border:none; background:none; box-shadow:none; }
select { cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:32px;
  background:var(--input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2398A1B3' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
button { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--accent); border:1px solid transparent; color:var(--on-accent);
  font-weight:600; cursor:pointer; padding:9px 18px; transition:background .15s, border-color .15s, color .15s, transform .1s var(--ease); }
button:hover { background:var(--accent-hover); }
button:active { transform:scale(.97); }
button.secondary { background:var(--card-2); color:var(--text); border-color:var(--border); font-weight:500; }
button.secondary:hover { background:var(--card-hover); border-color:var(--border-strong); }
button.small { padding:6px 12px; font-size:13px; }
/* малі акцентні — тонові: у картці кліпу їх кілька, суцільний помаранчевий кричав би */
button.small:not(.secondary) { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
button.small:not(.secondary):hover { background:var(--accent); color:var(--on-accent); }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
button.iconBtn { padding:7px; }
button.danger:hover { color:var(--red); border-color:rgba(255,107,107,.4); background:var(--red-soft); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline:none; }
.muted { color:var(--muted); font-size:13px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
a { color:var(--accent); cursor:pointer; text-decoration:none; transition:color .15s; }
a:hover { color:var(--accent-hover); }

/* статуси: пігулка з крапкою, колір не єдиний носій сенсу — текст поруч */
.status { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; background:var(--card-2); color:var(--muted); border:1px solid var(--border); white-space:nowrap; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.queued::before, .status.downloading::before, .status.transcribing::before, .status.analyzing::before { background:var(--accent); animation:pulse 1.4s ease-in-out infinite; }
.status.ready { background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
.status.error { background:var(--red-soft); color:var(--red); border-color:var(--red-line); }
@keyframes pulse { 50% { opacity:.3; } }

/* ---------- кліпи ---------- */
.score { flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:var(--r); font-weight:700; font-size:18px; letter-spacing:-.02em;
  color:var(--green); background:var(--green-soft); border:1px solid var(--green-line); font-variant-numeric:tabular-nums; }
.clip { display:flex; gap:16px; }
.clip .meta { flex:1; min-width:0; }
.clip .muted { line-height:1.6; }
video { width:100%; max-height:440px; background:#000; border-radius:var(--r); margin-bottom:10px; border:1px solid var(--border); }

/* список відео */
.videoItem { display:block; cursor:pointer; color:var(--text); padding:14px 16px; margin-bottom:8px; transition:border-color .15s, background .15s, transform .15s var(--ease); }
a.videoItem:hover, .videoItem:hover { color:var(--text); border-color:var(--border-strong); background:var(--card-2); }
.videoItem[aria-current="true"] { border-color:var(--accent); background:linear-gradient(0deg, var(--accent-soft), var(--accent-soft)), var(--card); }
.videoItem b { font-variant-numeric:tabular-nums; font-weight:600; }
.toolIc { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--card-2); color:var(--muted); vertical-align:middle; margin-right:6px; }
.author { display:inline-flex; align-items:center; gap:4px; margin-left:6px; }
.author::before { content:"·"; margin-right:2px; }

/* ---------- перегляд готового експорту ---------- */
#viewModal { display:none; position:fixed; inset:0; background:rgba(5,7,11,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:10; overflow:auto; padding:0 12px; }
#viewModal .inner { max-width:780px; margin:4vh auto; }
.capBox { margin-top:12px; border-top:1px solid var(--border); padding-top:12px; }
.capBlock { margin-bottom:10px; }
.capBlock textarea, .capBlock input { margin-bottom:4px; font-size:13px; }
.capBlock textarea { min-height:64px; }
.capLabel { font-weight:600; font-size:13px; }
.edSec .capBox { margin:0; border:none; padding:0; }
/* сторінка Нарізки: шапка відео, фільтр, компактні картки */
.detailHead { gap:10px; margin-top:8px; }
.detailHead h2 { margin:0; }
.detailBar { justify-content:space-between; gap:10px; margin:12px 0 8px; }
.detailTools { gap:6px; }
.clipTabs { display:inline-grid; grid-template-columns:repeat(3, auto); }
.clipTabs button { padding:6px 12px; font-size:13px; gap:6px; }
.tabCount { font-size:11px; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums; }
.clipTabs button[aria-pressed="true"] .tabCount { color:var(--accent); }
.scoreHint { margin:0 0 12px; font-size:12px; color:var(--faint); }
.clip.compact { padding:14px 16px; gap:14px; }
.clipHead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.clipName { color:var(--text); font-weight:600; font-size:15px; letter-spacing:-.01em; }
.clipName:hover { color:var(--accent); }
.clipTime { font-variant-numeric:tabular-nums; white-space:nowrap; }
.clipHook { margin-top:2px; font-style:italic; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clipActions { margin-top:10px; gap:6px; }
.clipActions .iconBtn { padding:6px 8px; }
.expChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.expChip { display:inline-flex; align-items:center; gap:6px; background:var(--card-2); border:1px solid var(--border); border-radius:999px; padding:3px 4px 3px 10px; font-size:12px; }
.expChip b { font-weight:600; }
.expState { color:var(--muted); }
.expChip.done .expState { color:var(--green); }
.expChip.error { border-color:var(--red-line); }
.expChip.error .expState { color:var(--red); }
.expChip.queued .expState, .expChip.rendering .expState { color:var(--accent); }
.expChip a { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--text); }
.expChip a:hover { background:rgba(255,255,255,.08); color:var(--accent); }
/* ---------- тости ---------- */
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:1000; max-width:min(420px, calc(100vw - 32px)); }
.toast { background:var(--card-2); border:1px solid var(--border-strong); border-left:3px solid var(--accent); border-radius:var(--r); padding:11px 14px; font-size:14px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6); word-break:break-word; cursor:pointer; animation:toastIn .25s var(--ease); }
.toast.error { border-left-color:var(--red); }
.toast.ok { border-left-color:var(--green); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

/* ---------- шапка: липка скляна смуга, одна на всіх сторінках ---------- */
.topBar { position:sticky; top:0; z-index:5; background:rgba(11,14,20,.72); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border); }
.topNav { max-width:1040px; margin:0 auto; padding:10px 16px; display:flex; gap:6px; align-items:center; font-size:14px; }
.topNav a { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-sm); color:var(--muted); font-weight:500; transition:color .15s, background .15s; }
.topNav a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.topNav a.active { color:var(--text); background:rgba(255,255,255,.08); }
.topNav .navLinks { display:flex; gap:2px; margin-left:12px; }
.topNav .home { color:var(--text); font-weight:700; letter-spacing:-.01em; padding-left:0; font-size:15px; }
.topNav .home:hover { background:none; }
.logoMark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--accent); color:var(--on-accent); }
.topNav .me { margin-left:auto; }
@media (max-width:560px) {
  .topNav .navLinks { margin-left:0; }
  .topNav .navLinks a span, .topNav .me span { display:none; }
  .topNav .home { font-size:0; gap:0; }
  .topNav .navLinks a, .topNav .me { padding:8px 10px; }
}

.listHead { justify-content:space-between; align-items:center; margin:32px 0 12px; }
.listHead h2 { margin:0; }
.scopeToggle { display:inline-flex; gap:2px; border:1px solid var(--border); border-radius:10px; padding:3px; background:var(--input); }
.scopeToggle button.small { border-color:transparent; border-radius:7px; background:transparent; color:var(--muted); font-weight:500; }
.scopeToggle button.small:hover { background:var(--card-2); color:var(--text); }
.scopeToggle button.small.active { background:var(--card-2); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.4); }

/* ---------- стартова ---------- */
.pageHead { padding:24px 0 8px; }
.pageHead h1 { font-size:clamp(28px, 5vw, 40px); letter-spacing:-.03em; margin:4px 0 10px; }
.pageHead .muted { font-size:15px; max-width:560px; margin:0 0 24px; }
.eyebrow { margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.tile { position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; color:var(--text);
  box-shadow:var(--shadow); transition:border-color .2s, transform .2s var(--ease), background .2s; }
a.tile:hover { color:var(--text); border-color:rgba(255,95,47,.5); background:var(--card-2); transform:translateY(-2px); }
.tileTop { display:flex; justify-content:space-between; align-items:flex-start; }
.tile .icon { display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r); background:var(--accent-soft); color:var(--accent); }
.tile .go { color:var(--faint); transition:color .2s, transform .2s var(--ease); }
a.tile:hover .go { color:var(--accent); transform:translateX(3px); }
.tile h3 { margin:16px 0 4px; font-size:16px; }
.tile p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.tile.soon { cursor:default; box-shadow:none; background:transparent; border-style:dashed; }
.tile.soon .icon { background:var(--card-2); color:var(--faint); }
.tile.soon h3, .tile.soon p { color:var(--faint); }
.tile .soonBadge { font-size:11px; font-weight:500; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:2px 9px; }

/* ---------- профіль ---------- */
.pfGrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.pfGrid label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; font-weight:500; }
.groupHead { display:flex; align-items:center; gap:8px; font-size:15px; margin:24px 0 10px; color:var(--text); }
.groupHead .ic { color:var(--accent); }
.count { font-size:12px; font-weight:500; color:var(--muted); background:var(--card-2); border-radius:999px; padding:1px 8px; }

@media (max-width:560px) {
  .clip { gap:12px; }
  .score { width:44px; height:44px; font-size:16px; }
  h1 { font-size:24px; }
}
/* ---------- випадне меню на <details>: «Експорт ▾», «Перерахувати ▾» ---------- */
.menu { position:relative; }
.menu > summary { list-style:none; }
.menu > summary::-webkit-details-marker { display:none; }
summary.btn { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--on-accent); font-weight:600; cursor:pointer;
  padding:9px 14px 9px 18px; border-radius:var(--r-sm); border:1px solid transparent; user-select:none; transition:background .15s; }
summary.btn:hover { background:var(--accent-hover); }
summary.btn.secondary { background:var(--card-2); color:var(--text); border-color:var(--border); font-weight:500; }
summary.btn.secondary:hover { background:var(--card-hover); border-color:var(--border-strong); }
summary.btn.small { padding:6px 10px 6px 12px; font-size:13px; }
.menu[open] > summary .ic:last-child { transform:rotate(180deg); }
.menuPop { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:240px; display:flex; flex-direction:column; gap:10px; padding:12px;
  background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--r); box-shadow:0 16px 40px -12px rgba(0,0,0,.7); }
.menuPop.left { right:auto; left:0; }
.menuPop > button { white-space:nowrap; }
.menuHead { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.fmtChecks { display:flex; flex-direction:column; gap:6px; }
.fmtCheck { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; }

/* мовні версії: перемикач у шапці редактора, чипи, вибір мови експорту */
.langChip { display:inline-flex; align-items:center; padding:1px 6px; border-radius:5px; font-size:11px; font-weight:600; letter-spacing:.04em;
  background:var(--violet-soft); color:var(--violet); border:1px solid var(--violet-line); }
.langPick { display:flex; flex-wrap:wrap; gap:10px; }
.langPick label { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; cursor:pointer; }
.langPick input { width:15px; height:15px; margin:0; accent-color:var(--accent); }
.edLangs { gap:6px; flex:none; }
.seg.langSeg { display:inline-flex; }
.langSeg button { padding:5px 10px; font-size:12px; font-weight:600; letter-spacing:.04em; }
.langSeg button.stale::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--yellow); margin-left:5px; }
.langNote { margin:0; padding:8px 10px; border-radius:var(--r-sm); font-size:12px; line-height:1.45; color:var(--yellow); background:var(--yellow-soft); border:1px solid var(--yellow-line); }

/* ---------- редактор кліпу: повноекранний, 3 колонки ---------- */
[hidden] { display:none !important; }
body.edOpen { overflow:hidden; }
.ed { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; background:var(--bg); }
.edHead { position:relative; z-index:5; display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border); background:rgba(11,14,20,.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.edHeadTitle { flex:1; min-width:0; display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:-.01em; }
.edHeadTitle #mTitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edDirty { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:2px 10px; }
.edDirty::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.edBody { flex:1; min-height:0; display:grid; grid-template-columns:232px minmax(0,1fr) 340px; }
.edClips, .edPanel { overflow:auto; background:var(--card); }
.edClips { border-right:1px solid var(--border); padding:12px 10px; }
.edPanel { border-left:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:10px; }
.edColHead { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:2px 6px 10px; }

/* список кліпів */
.edClip { width:100%; display:flex; gap:10px; align-items:flex-start; text-align:left; background:transparent; border:1px solid transparent; color:var(--text);
  font-weight:500; padding:8px; border-radius:var(--r-sm); margin-bottom:4px; }
.edClip:hover { background:var(--card-2); border-color:var(--border); }
.edClip[aria-current="true"] { background:var(--accent-soft); border-color:rgba(255,95,47,.45); }
.edClipScore { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-sm); background:var(--green-soft); color:var(--green); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.edClipMeta { min-width:0; display:flex; flex-direction:column; gap:2px; }
.edClipTitle { font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.edClipMeta .muted { font-size:12px; font-variant-numeric:tabular-nums; }

/* центр: сцена, транспорт, таймлайн, транскрипт */
.edMain { min-width:0; overflow:auto; padding:16px 20px 20px; display:flex; flex-direction:column; gap:12px; }
.edStageWrap { display:flex; justify-content:center; }
#mStage { position:relative; background:#000; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); box-shadow:0 20px 50px -20px rgba(0,0,0,.8); flex:none; }
#mStage.vertical { height:min(58vh, 680px); aspect-ratio:9/16; }
#mStage.horizontal { width:min(100%, calc(52vh * 16 / 9)); aspect-ratio:16/9; }
#mStage video { display:block; border:none; margin:0; max-height:none; border-radius:0; cursor:pointer; }
#mTitleOverlay { display:none; position:absolute; text-align:center; color:#fff; font-weight:700; font-family:Arial, sans-serif; line-height:1.15; pointer-events:none; }
/* безпечні зони соцмереж: затемнені поля під інтерфейсом мережі + рамка безпечної області */
#edSafeZone { position:absolute; inset:0; pointer-events:none; }
#edSafeZone i { position:absolute; background:rgba(0,0,0,.55); }
#edSafeZone b { position:absolute; border:1px dashed var(--red); }
.edZoneBar { justify-content:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.edZoneSeg { display:inline-grid; }
.edZoneSeg button { padding:4px 10px; }
.edZoneWarn { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.edZoneWarn.bad { color:var(--red); }
.edZoneWarn.ok { color:var(--green); }
#edSubs { display:none; position:absolute; text-align:center; font-weight:700; font-family:"Helvetica Neue", Arial, sans-serif; line-height:1.2; pointer-events:none; }
.edSubLine.plate { background:rgba(0,0,0,.62); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
/* емуляція брендового шаблону WAS (фрейм 878:16 з Figma WAS_OUT, 1080x1920) */
#mLogoPrev { display:none; position:absolute; top:5.2%; left:3.1%; width:21.8%; aspect-ratio:235/194; background:#C5C5C5;
  -webkit-mask:url(/was-logo.png) no-repeat center/contain; mask:url(/was-logo.png) no-repeat center/contain; pointer-events:none; }
#mBalloonPrev { display:none; position:absolute; top:72.9%; left:1%; right:1%; min-height:7.4%; background:#E0F900;
  border-radius:5px; padding:5px 3.8%; align-items:center; justify-content:center; }
#mBalloonText { color:#000; font-weight:400; font-size:20px; line-height:0.93; display:block; width:100%;
  white-space:pre-wrap; word-break:break-word; text-align:center; outline:none; cursor:text; }

.edTransport { display:flex; flex-direction:column; align-items:center; gap:10px; }
.edTransportMain { justify-content:center; gap:6px; }
.edTransport button.iconBtn { width:38px; height:38px; padding:0; }
.edPlay { width:48px !important; height:48px !important; border-radius:50%; }
#edLoop[aria-pressed="true"] { color:var(--accent); border-color:rgba(255,95,47,.45); background:var(--accent-soft); }
.edTime { min-width:210px; font-size:14px; font-variant-numeric:tabular-nums; margin-left:8px; }
.edTime b { font-weight:600; }
.edMarks { justify-content:center; gap:8px; }
.edMarks button { padding:7px 12px; }
kbd { font:600 11px/1 Inter, system-ui, sans-serif; padding:3px 6px; border-radius:5px; background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--muted); margin-left:2px; }

.edTl { user-select:none; -webkit-user-select:none; }
.edTlTrack { position:relative; height:44px; border-radius:var(--r-sm); background:var(--input); border:1px solid var(--border); cursor:pointer; touch-action:none; }
.edTlRange { position:absolute; top:0; bottom:0; background:var(--accent-soft); border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); }
.edTlHandle { position:absolute; top:-4px; bottom:-4px; width:12px; margin-left:-6px; background:var(--accent); border-radius:4px; cursor:ew-resize; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.5); }
.edTlHandle::after { content:""; position:absolute; left:5px; top:35%; bottom:35%; width:2px; background:var(--on-accent); opacity:.6; border-radius:1px; }
.edTlHandle:hover { background:var(--accent-hover); }
.edTlHead { position:absolute; top:-6px; bottom:-6px; width:2px; margin-left:-1px; background:var(--text); pointer-events:none; z-index:3; border-radius:1px; }
.edTlDot { position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; padding:0; transform:rotate(45deg); border-radius:3px;
  background:var(--yellow); border:2px solid var(--bg); z-index:2; cursor:pointer; }
.edTlDot:hover { transform:rotate(45deg) scale(1.2); background:var(--yellow); }
.edTlScale { display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:4px; font-variant-numeric:tabular-nums; }
.edTimes { gap:14px; }
.edTimes label { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; font-weight:500; }
.edTimes input { width:96px; margin:0; padding:7px 10px; font-variant-numeric:tabular-nums; }
.edKeys { margin-left:auto; font-size:12px; color:var(--faint); }
.edTranscript { background:var(--input); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; font-size:13px; line-height:1.75; max-height:200px; overflow:auto; }
.edTranscript .trSeg { cursor:pointer; border-radius:4px; padding:1px 2px; transition:background .15s, color .15s; }
.edTranscript .trSeg:hover { background:var(--card-2); }
.edTranscript .trSeg.in { color:var(--text); }
.edTranscript .trSeg.out { color:var(--faint); }
.edTranscript .trSeg.now { background:var(--accent-soft); color:var(--accent); }

/* права панель: секції-картки як плитки головної */
.edSec { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:10px; }
.edSec h4 { margin:0; font-size:13px; font-weight:600; letter-spacing:.02em; }
.edSecHead { display:flex; justify-content:space-between; align-items:center; }
.switch { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; }
.edHint { margin:0; font-size:12px; line-height:1.5; }
.edField { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.edRange { display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--muted); }
.edRange output { color:var(--text); font-variant-numeric:tabular-nums; }
.edRange input { margin:0; }
#edTitleInput { margin:0; }
#edTitleBody { display:flex; flex-direction:column; gap:10px; }
#edTitleBody.off { opacity:.4; pointer-events:none; }
#edTitleStyle { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
#edTitleStyle .edRange { width:100%; }

/* вибір формату: картки з мініатюрою пропорції */
.fmtCards { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.fmtCard { flex-direction:column; gap:3px; padding:10px 4px 8px; background:var(--card-2); border:1px solid var(--border); color:var(--muted); font-weight:500; border-radius:var(--r-sm); }
.fmtCard:hover { background:var(--card-hover); border-color:var(--border-strong); color:var(--text); }
.fmtCard[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--text); }
.fmtCard b { font-size:13px; font-weight:600; }
.fmtCard small { font-size:11px; color:var(--muted); }
.fmtMini { position:relative; display:block; background:#05070b; border:1.5px solid var(--border-strong); border-radius:4px; margin-bottom:4px; overflow:hidden; }
.fmtMini.v { width:24px; height:42px; }
.fmtMini.h { width:48px; height:27px; margin:7px 0 12px; background:linear-gradient(135deg, #2a3140, #151a24); }
.fmtMini i { position:absolute; left:2px; right:2px; border-radius:1px; }
.fmtMini.pip .logo { top:3px; left:3px; width:6px; height:4px; right:auto; background:#C5C5C5; }
.fmtMini.pip .win { top:10px; height:17px; background:#4a4f5a; }
.fmtMini.pip .bar { top:29px; height:6px; background:var(--yellow); }
.fmtMini.crop { background:linear-gradient(135deg, #2a3140, #151a24); }
.fmtMini.crop .frame { top:2px; bottom:2px; left:5px; right:5px; border:1.5px dashed var(--accent); border-radius:2px; }
.fmtCard[aria-pressed="true"] .fmtMini { border-color:var(--accent); }

/* пресети шаблонів з Figma: міні-макет 9:16 */
.tplRow { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.tplBtn { flex-direction:column; gap:5px; background:var(--card-2); font-weight:500; border:1px solid var(--border); border-radius:var(--r-sm);
  padding:8px 4px 6px; color:var(--muted); font-size:11px; }
.tplBtn:hover { background:var(--card-hover); border-color:var(--border-strong); color:var(--text); }
.tplBtn[aria-pressed="true"] { border-color:var(--accent); color:var(--text); background:var(--accent-soft); }
.tplMini { display:block; width:27px; height:48px; background:#000; border-radius:3px; position:relative; }
.tplMini .win { position:absolute; left:2px; right:2px; height:21px; background:#4a4f5a; border-radius:2px; }
.tplMini .bar { position:absolute; left:2px; right:2px; height:6px; border-radius:2px; }

/* свотчі брендової палітри */
.swatchRow { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.swatches { display:flex; gap:5px; }
.swatch { width:24px; height:24px; padding:0; border-radius:6px; background:var(--sw); border:2px solid var(--border); }
.swatch:hover { background:var(--sw); border-color:var(--border-strong); transform:scale(1.08); }
.swatch[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* сегментований перемикач (стиль субтитрів) */
.seg { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; border:1px solid var(--border); border-radius:10px; padding:3px; background:var(--input); }
.seg button { background:transparent; border-color:transparent; color:var(--muted); font-weight:500; font-size:12px; padding:6px 4px; border-radius:7px; }
.seg button:hover { background:var(--card-2); color:var(--text); }
.seg button[aria-pressed="true"] { background:var(--card-2); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.4); }

.subLines { max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:4px; margin-right:-4px; padding-right:4px; }
.subLine { display:flex; gap:6px; align-items:center; border-radius:var(--r-sm); }
.subLine input { margin:0; font-size:13px; padding:6px 8px; }
.subLine.now input { border-color:var(--accent); background:var(--accent-soft); }
.subTime { flex:none; width:58px; padding:6px 4px; font-size:11px; font-weight:500; background:var(--card-2); border-color:var(--border); color:var(--muted); font-variant-numeric:tabular-nums; }
.subTime:hover { color:var(--text); background:var(--card-hover); }
#mCropList { display:flex; flex-wrap:wrap; gap:4px; }
.cropChip { display:inline-flex; gap:4px; align-items:center; background:var(--card-2); border:1px solid var(--border); border-radius:999px; padding:3px 4px 3px 10px; font-size:12px; font-variant-numeric:tabular-nums; }
.cropChip a { color:var(--text); }
.chipX { padding:3px; border-radius:50%; background:transparent; color:var(--muted); border:none; }
.chipX:hover { background:var(--red-soft); color:var(--red); }

@media (max-width:1100px) {
  .edBody { grid-template-columns:minmax(0,1fr) 320px; }
  .edClips { display:none; }
}
@media (max-width:760px) {
  .edBody { display:block; overflow:auto; }
  .edPanel { border-left:none; border-top:1px solid var(--border); }
  .edMain { overflow:visible; padding:12px; }
  .edKeys { display:none; }
  #mStage.vertical { height:60vh; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* матеріал: звʼязки роботи з іншими інструментами */
.matChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.matChip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border:1px solid var(--border); border-radius:999px; background:var(--card-2); color:var(--muted); font-size:12px; line-height:18px; text-decoration:none; }
a.matChip:hover { color:var(--text); border-color:var(--border-strong); }
.matChip.ok { color:var(--green); border-color:var(--green-line); background:var(--green-soft); }

/* транскрипція на Mac-ах: хто працює і скільки зроблено */
.jobLine { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--muted); font-size:12px; }
.jobLine button { margin-left:auto; }
.workerDot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--border-strong); margin-right:6px; }
.workerDot.on { background:var(--green); }

/* сценарій (С3): службові вставки, поза сценарієм, виправлені імена */
.scriptCard { margin:12px 0; }
.scTitle .ic { display:inline-block; vertical-align:-3px; margin-right:4px; }
.scInfo { margin-top:10px; }
.scMarker { display:flex; gap:8px; font-size:13px; color:var(--muted); margin-bottom:3px; }
.tc { flex:none; min-width:74px; color:var(--muted); font-variant-numeric:tabular-nums; }
.scHead { font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin:6px 0 4px; }
.scResults { display:flex; flex-wrap:wrap; gap:6px; }

/* завантаження файлу з комп'ютера */
.upZone { margin:10px 0; border:1px dashed var(--border-strong); border-radius:var(--r-sm, 10px); padding:14px 16px; background:var(--input); transition:border-color .15s, background .15s; }
.upZone.drag { border-color:var(--accent); background:var(--accent-soft); }
.upIdle { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--text); font-size:14px; }
.upIdle .muted { flex-basis:100%; font-size:12px; }
.upBusy { display:flex; flex-direction:column; gap:8px; }
.upRow { display:flex; align-items:center; gap:10px; font-size:13px; }
.upRow .upName { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.upBar { height:6px; border-radius:999px; background:var(--card-2); overflow:hidden; }
.upBar i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; }
.linkBtn { background:none; border:none; padding:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.linkBtn:hover { background:none; color:var(--accent-hover); }

/* подкаст (П1): зведення, таблиця вирізів */
.pcTitle { flex:1; min-width:0; font-size:20px; font-weight:600; background:transparent; border-color:transparent; padding:6px 8px; margin:0; }
.pcTitle:hover, .pcTitle:focus { border-color:var(--border); background:var(--input); }
.pcSummary { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:10px 0; }
.pcStat { display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card); min-width:110px; }
.pcStat b { font-size:20px; font-variant-numeric:tabular-nums; }
.pcStatNote { display:flex; flex-direction:column; justify-content:center; gap:6px; align-items:flex-start; margin-left:auto; }
.pcAudio { width:100%; margin:6px 0 4px; }
.tableWrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.pcCuts { width:100%; border-collapse:collapse; min-width:720px; font-size:13px; }
.pcCuts th { text-align:left; font-weight:500; color:var(--muted); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--border); }
.pcCuts td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.pcCuts tr:last-child td { border-bottom:none; }
.pcCuts tr.off td:not(:first-child) { opacity:.55; }
.pcCuts input[type=checkbox] { width:auto; margin:2px 0 0; }
.pcCuts .sub { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.pcKind { display:inline-block; padding:1px 8px; border-radius:999px; background:var(--card-2); font-size:12px; white-space:nowrap; }
.pcKind.k-patrons, .pcKind.k-link, .pcKind.k-outro { background:var(--accent-soft); color:var(--accent); }
.pcTime { white-space:nowrap; font-variant-numeric:tabular-nums; }
.pcTime input { width:66px; margin:0 2px; padding:4px 6px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.pcText { max-width:420px; }
.pcActs { white-space:nowrap; }
.pcMissing, .pcExpired { color:var(--red); }

/* подкаст (П2): таймлайн — хвилеформа, вирізи, вставки; під нею — смуга готового епізоду */
.pcTl { margin:8px 0 14px; padding:12px 14px 14px; border:1px solid var(--border); border-radius:var(--r); background:var(--card); }
.pcTlHead { gap:12px; margin-bottom:8px; }
.pcTlHead h2 { margin:0; font-size:16px; }
.pcTlHead #pcTlHint { flex:1; min-width:0; font-size:12.5px; font-variant-numeric:tabular-nums; }
.pcTlZoom { gap:6px; margin-left:auto; }
.pcTlZoom .iconBtn { width:30px; font-size:16px; line-height:1; }
.pcTlWave { display:block; width:100%; height:128px; touch-action:none; cursor:pointer; border-radius:var(--r-sm); background:var(--input); }
.pcTlScroll { display:block; width:100%; margin:6px 0 0; }
.pcTlPlanHead { display:flex; justify-content:space-between; margin:10px 0 4px; font-variant-numeric:tabular-nums; }
.pcTlPlan { position:relative; height:14px; border-radius:4px; background:var(--input); overflow:hidden; }
.pcTlBlock { position:absolute; top:0; bottom:0; padding:0; min-width:1px; border:none; border-radius:0; background:var(--faint); box-shadow:inset -1px 0 0 var(--bg); }
.pcTlBlock:hover { background:var(--muted); }
.pcTlBlock.is-insert { background:var(--green); }
.pcTlNow { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--accent); pointer-events:none; }
.pcTlSel { gap:8px; margin-top:8px; padding:8px 10px; border-radius:var(--r-sm); background:var(--red-soft); flex-wrap:nowrap; }
.pcTlSel label { gap:6px; font-size:13px; white-space:nowrap; }
.pcTlSelTime { font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pcTlSelText { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcCuts tr.pcSel td { background:var(--red-soft); }
.pcChapters td { vertical-align:middle; }
.pcChPaste { margin:10px 0 14px; }
.pcChPaste textarea { font-variant-numeric:tabular-nums; resize:vertical; }
.pcChPaste .row { gap:8px; align-items:center; }
.pcTx { position:relative; margin-top:14px; }
.pcTxHead { gap:10px; margin-bottom:6px; }
.pcTxHead h3 { margin:0; font-size:14px; }
#pcTxFind { width:220px; padding:5px 10px; font-size:13px; }
.pcTxHint { margin-left:auto; font-size:12px; }
.pcTxBody { position:relative; max-height:340px; overflow:auto; padding:10px 12px; border-radius:var(--r-sm); background:var(--input); font-size:14px; line-height:1.75; }
.pcTxBody p { margin:0 0 10px; }
.pcTxBody p:last-child { margin-bottom:0; }
.pcTxTc { display:inline; background:none; border:none; padding:0 8px 0 0; color:var(--faint); font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; cursor:pointer; }
.pcTxTc:hover { background:none; color:var(--accent); }
.pcTxBody span { cursor:pointer; border-radius:3px; }
.pcTxBody span:hover { background:var(--card-2); }
.pcTxBody span.x, .pcTxKey.x { color:var(--faint); text-decoration:line-through; text-decoration-color:var(--red); }
.pcTxBody span.o, .pcTxKey.o { text-decoration:underline dashed var(--red); text-underline-offset:3px; }
.pcTxBody span.hit, .pcTxKey.hit { background:var(--yellow-soft); }
.pcTxBody span.hitNow { outline:1px solid var(--yellow); }
.pcTxBody span.now, .pcTxKey.now { background:var(--accent-soft); color:var(--text); }
/* легенда позначок тексту */
.pcTxLegend { gap:6px 16px; flex-wrap:wrap; align-items:center; margin:0 0 8px; font-size:12px; }
.pcTxKey { color:var(--text); padding:0 3px; border-radius:3px; }
.pcTxHelp { position:relative; }
.pcTxHelp summary { list-style:none; cursor:pointer; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); border-radius:50%; font-size:11px; }
.pcTxHelp summary::-webkit-details-marker { display:none; }
.pcTxHelp[open] summary { border-color:var(--accent); color:var(--accent); }
.pcTxHelpPop { position:absolute; right:0; top:calc(100% + 6px); z-index:6; width:min(420px, 80vw); padding:8px 10px; background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); font-size:13px; line-height:1.5; box-shadow:var(--shadow); }
.pcTxHelpPop p { margin:0; }
.pcTxHelpPop p + p { margin-top:6px; }
.pcTxPop { position:absolute; z-index:5; gap:8px; padding:6px 8px; background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); box-shadow:var(--shadow); white-space:nowrap; }
.pcTxEdit { padding:1px 4px; font-size:14px; }
.pcChTitle { width:55%; }
.pcChTitle input { width:100%; padding:5px 8px; font-size:13px; }
/* П3 · блок «Готовий епізод» — фінальний крок сторінки */
.pcBuild { margin:28px 0 8px; padding:20px 22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.pcBuild::before { content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--border-strong); }
.pcBuild.is-idle::before, .pcBuild.is-queued::before, .pcBuild.is-building::before { background:var(--accent); }
.pcBuild.is-done::before { background:var(--green); }
.pcBuild.is-stale::before { background:var(--accent); }
.pcBuild.is-error::before { background:var(--red); }
.pcBuildHead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.pcBuildHead h2 { margin:2px 0 0; font-size:20px; }
.pcPill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; background:var(--card-2); color:var(--muted); border:1px solid var(--border); }
.pcPill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pcPill.is-busy { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.pcPill.is-busy::before { animation:pulse 1.2s ease-in-out infinite; }
.pcPill.is-ok { color:var(--green); background:var(--green-soft); border-color:var(--green-line); }
.pcPill.is-warn { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.pcPill.is-err { color:var(--red); background:var(--red-soft); border-color:var(--red-line); }

.pcOut { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; margin-bottom:18px; }
.pcOutItem { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r); background:var(--card-2); border:1px solid var(--border); }
.pcOutItem .ic { color:var(--accent); flex:none; margin-top:1px; }
.pcOutItem b { display:block; font-size:14px; font-weight:600; }
.pcOutItem span { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4; }

.pcBuildAction { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pcBuildCta { padding:13px 26px; font-size:16px; border-radius:var(--r); min-height:48px; box-shadow:0 8px 24px -10px rgba(255,95,47,.6); }
.pcBuildCta.small { padding:8px 14px; font-size:13px; min-height:0; box-shadow:none; margin-left:auto; flex:none; }
.pcBuildCta:disabled { box-shadow:none; }

.pcProgress { padding:14px 16px; border-radius:var(--r); background:var(--card-2); border:1px solid var(--border); }
.pcProgressBar { height:6px; border-radius:999px; background:var(--input); overflow:hidden; }
.pcProgressBar i { display:block; height:100%; width:35%; border-radius:inherit; background:var(--accent); animation:pcIndet 1.6s ease-in-out infinite alternate; }
@keyframes pcIndet { from { transform:translateX(-30%); } to { transform:translateX(290%); } }
.pcProgressText { display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:13.5px; font-variant-numeric:tabular-nums; }

.pcNotice { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:var(--r); margin-bottom:14px; border:1px solid; }
.pcNotice > .ic { flex:none; align-self:flex-start; margin-top:2px; }
.pcNotice b { display:block; font-size:14px; color:var(--text); }
.pcNotice span { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.pcNotice.is-warn { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.pcNotice.is-err { background:var(--red-soft); border-color:var(--red-line); color:var(--red); }
.pcNotice.is-info { background:var(--card); border-color:var(--border); color:var(--muted); }
.pcAddAudio { margin:8px 0 14px; }
.pcAddAudio .pcNotice { margin-bottom:8px; }

.pcFile { padding:16px; border-radius:var(--r); background:var(--card-2); border:1px solid var(--border); }
.pcFile.is-stale { opacity:.7; }
.pcFileHead { display:flex; gap:12px; align-items:center; }
.pcFileIcon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:10px; background:var(--green-soft); color:var(--green); }
.pcFile.is-stale .pcFileIcon { background:var(--accent-soft); color:var(--accent); }
.pcFileName { min-width:0; }
.pcFileName b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcFileName .muted { font-size:12.5px; font-variant-numeric:tabular-nums; }
.pcFile .pcAudio { margin:14px 0 12px; }
.pcFileActs { display:flex; gap:8px; flex-wrap:wrap; }
.pcDl { min-height:44px; padding:10px 16px; flex:1 1 170px; }

.pcBuild + .pcBuild { margin-top:16px; }
.pcField { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.pcField > label, .pcFieldHead label { font-size:13px; font-weight:600; color:var(--text); }
.pcFieldHead { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.pcField textarea { width:100%; min-height:190px; resize:vertical; line-height:1.55; font-size:14px; }
.pcHint { font-size:12.5px; color:var(--muted); }
.pcSlugRow { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--input); overflow:hidden; }
.pcSlugRow .muted { padding:0 0 0 12px; white-space:nowrap; font-size:13px; }
.pcSlugRow input { flex:1; min-width:120px; margin:0; border:none; box-shadow:none; background:transparent; padding:10px 12px 10px 2px; font-variant-numeric:tabular-nums; }
.pcSlugRow:focus-within { border-color:var(--accent); box-shadow:var(--ring); }
.pcFooterPrev summary { cursor:pointer; font-size:12.5px; color:var(--muted); }
.pcFooterPrev pre { margin:8px 0 0; padding:10px 12px; border-radius:var(--r-sm); background:var(--card-2); border:1px solid var(--border); font:12.5px/1.5 inherit; color:var(--muted); white-space:pre-wrap; }
.pcSeg { display:inline-flex; padding:3px; gap:3px; border-radius:var(--r); background:var(--input); border:1px solid var(--border); align-self:flex-start; }
.pcSeg button { background:transparent; color:var(--muted); border:none; padding:8px 14px; font-weight:500; font-size:13.5px; min-height:38px; }
.pcSeg button.on { background:var(--card-2); color:var(--text); box-shadow:0 0 0 1px var(--border-strong); }
.pcSeg button:hover { background:var(--card-2); }
.pcSlots { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; }
.pcSlots input { width:auto; padding:6px 10px; font-size:13px; color-scheme:dark; }
.pcCover { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.pcCoverPrev { width:220px; height:220px; flex:none; border-radius:var(--r); overflow:hidden; background:var(--card-2); border:1px solid var(--border); }
.pcCoverPrev img { width:100%; height:100%; display:block; object-fit:cover; }
.pcCoverEmpty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; text-align:center; color:var(--faint); font-size:12.5px; }
.pcCoverCtl { flex:1; min-width:240px; display:flex; flex-direction:column; gap:12px; }
.pcRange { display:flex; flex-direction:column; gap:4px; max-width:320px; }
.pcRange input { width:100%; }
.pcField > label .pcHint { font-weight:400; margin-left:6px; }
.pcCoverThumb { width:42px; height:42px; border-radius:10px; object-fit:cover; flex:none; }
.pcNotionLine { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:13px; }
.pcNotionLine a { color:var(--accent); }
.pcPubNote { margin:12px 0 0; font-size:12.5px; }
.pcPubReset { margin-top:10px; font-size:12.5px; color:var(--muted); }
@media (max-width: 720px) { .pcSlugRow { flex-direction:column; align-items:stretch; } .pcSlugRow .muted { padding:8px 12px 0; } }

@media (max-width: 720px) {
  .pcBuild { padding:16px; }
  .pcBuildCta { width:100%; }
  .pcBuildCta.small { width:auto; }
  .pcNotice { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pcProgressBar i { width:100%; opacity:.6; }
}
.pcExpiring { color:var(--accent); }
.pcLib { margin:12px 0 6px; border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--card); }
.pcLib summary { cursor:pointer; font-weight:500; }
.pcLib > .row { margin-top:10px; }
.pcLib > .row .muted { flex:1; min-width:220px; font-size:12px; }
.pcLibList { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.pcLibList li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pcLibTitle { flex:1; min-width:180px; margin:0; padding:5px 8px; font-size:13px; }

/* «Стаття»: вибір сценарію, поля чернетки, блоки */
.arResults { margin:8px 0; }
.arPick { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:10px 12px; margin:8px 0; border:1px solid var(--accent); border-radius:var(--r-sm); background:var(--accent-soft); }
.arPick > div { flex:1; min-width:0; }
.arModeRow { gap:12px; margin:10px 0; }
.arSeg { grid-template-columns:repeat(2, 1fr); min-width:240px; }
.arSegSmall { min-width:200px; }
.arActions { gap:10px; margin:6px 0 14px; flex-wrap:wrap; }
#arDetail { margin-top:22px; }
.arTitleH { margin:0; font-size:18px; flex:1; min-width:0; }
.arMeta, .arBlock { display:flex; flex-direction:column; gap:12px; }
.arBlockHead { justify-content:space-between; }
.arField { display:flex; flex-direction:column; gap:4px; }
.arLabel { font-size:13px; font-weight:500; color:var(--muted); }
.arField input, .arField textarea { width:100%; }
.arField textarea { resize:vertical; field-sizing:content; min-height:3.2em; line-height:1.55; }
.arHint { font-size:12px; }
.arCount { font-variant-numeric:tabular-nums; }
.arCount.arOver { color:var(--red); }
.arGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .arGrid { grid-template-columns:1fr; } }
.arRemoved { margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:13px; }
.btnLink { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent); font-weight:600; }
.btnLink:hover { background:var(--accent-hover); color:var(--on-accent); }

/* Поле «Випуск» (С5, shared/master.js) */
.msBox { margin:0 0 12px; }
.msHead { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 8px; color:var(--text); }
.msHead .ic { color:var(--accent); }
.msResults { display:flex; flex-direction:column; gap:4px; }
.msResults:empty { display:none; }
.msRow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; justify-content:flex-start; text-align:left; padding:8px 12px;
  background:var(--card-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-sm); font-weight:400; cursor:pointer; }
.msRow:hover { background:var(--card-2); border-color:var(--accent); }
.msW { font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.msName { flex:1 1 180px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msTag { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:1px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.msTag.is-ok { color:var(--green); background:var(--green-soft); border-color:transparent; }
.msTag.is-warn { color:var(--yellow); background:var(--yellow-soft); border-color:transparent; }
.msRow:focus-visible { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.msRow.is-missing { cursor:default; opacity:.6; }
.msRow.is-missing:hover { border-color:var(--border); }
.msFile { display:block; font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; }
.msNotion { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); margin-left:auto; }
.msNotion:hover { color:var(--accent); }
.msAllBtn { margin-left:auto; }
/* вікно «Усі випуски» */
.msCat { position:fixed; inset:0; z-index:40; background:rgba(5,7,11,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; justify-content:center; padding:4vh 12px; }
.msCatInner { width:min(860px, 100%); max-height:92vh; display:flex; flex-direction:column; padding:16px; }
.msCatHead { align-items:center; gap:10px; margin-bottom:10px; }
.msCatHead h2 { margin:0; }
.msCatHead button { margin-left:auto; }
.msCatList { overflow:auto; min-height:0; }
.msChosen { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:8px 12px; border-radius:var(--r-sm); background:var(--accent-soft); overflow-wrap:anywhere; }
.msChosen .ic { color:var(--accent); flex:none; }
.msChosen button { margin-left:auto; flex:none; }
/* «Стаття»: фото під слотом — кадри з випуску й свої файли; обране — з галочкою */
.arPhotos { display:flex; flex-direction:column; gap:8px; padding-top:4px; border-top:1px dashed var(--border); }
.arPhotosHead { justify-content:space-between; flex-wrap:wrap; gap:8px; }
.arPhotosHead .row { gap:6px; }
.arThumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.arThumb { position:relative; padding:0; border:2px solid transparent; border-radius:var(--r-sm); background:var(--bg); overflow:hidden; cursor:pointer; aspect-ratio:16/9; }
.arThumb img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.arThumb:hover img { opacity:1; }
.arThumb[aria-pressed="true"] { border-color:var(--accent); }
.arThumb[aria-pressed="true"] img { opacity:1; }
.arThumbOn { position:absolute; top:4px; right:4px; display:flex; padding:2px; border-radius:50%; background:var(--accent); color:var(--on-accent); }
.arThumbT { position:absolute; left:4px; bottom:4px; padding:0 5px; border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; opacity:.85; }
.btnLink.arUpload { padding:6px 12px; font-size:13px; font-weight:500; background:var(--card-2); color:var(--text); border:1px solid var(--border); cursor:pointer; }
.btnLink.arUpload:hover { background:var(--card-hover); color:var(--text); border-color:var(--border-strong); }
.arCaps { display:flex; flex-direction:column; gap:6px; }
.arCap { display:flex; align-items:center; gap:8px; }
.arCap img { width:64px; height:36px; object-fit:cover; border-radius:4px; flex:none; }
.arCap input { flex:1; padding:6px 10px; font-size:13px; }
.arTr { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.arTr .row { gap:8px; flex-wrap:wrap; }
.arTrNotes summary { cursor:pointer; font-size:13px; color:var(--muted); }

/* Подкаст: кроки епізоду — липка смуга зі станом і п'ять розділів (17.10) */
.pcSteps { position:sticky; top:62px; z-index:4; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:6px 0 12px; padding:6px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg); box-shadow:var(--shadow); }
.pcStepBtn { display:flex; align-items:center; gap:8px; min-width:0; padding:6px 8px; border:1px solid transparent; border-radius:var(--r-sm); background:transparent; text-align:left; cursor:pointer; }
.pcStepBtn:hover { background:var(--card-hover); }
.pcStepBtn.is-here { border-color:var(--border-strong); background:var(--card); }
.pcStepNo { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:600; background:var(--card-hover); color:var(--muted); }
.pcStepTxt { display:flex; flex-direction:column; min-width:0; }
.pcStepTxt b { font-size:13px; font-weight:600; color:var(--text); }
.pcStepTxt span { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcStepBtn.is-done .pcStepNo { background:var(--green-soft); color:var(--green); }
.pcStepBtn.is-warn .pcStepNo { background:var(--accent-soft); color:var(--accent); }
.pcStepBtn.is-error .pcStepNo { background:var(--red-soft); color:var(--red); }
.pcStepBtn.is-busy .pcStepNo { background:var(--violet-soft); color:var(--violet); }
.pcSec { margin:22px 0; scroll-margin-top:130px; }
.pcSecHead { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); font-size:18px; }
.pcSecHead span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:13px; }
.pcSec h3 { margin:0; font-size:15px; }
.pcMp3 { width:100%; margin-top:8px; }
#detail.pcNotReady #pcS2, #detail.pcNotReady #pcS3, #detail.pcNotReady #pcS4, #detail.pcNotReady #pcS5 { display:none; }
@media (max-width:720px) {
  .pcSteps { grid-template-columns:repeat(5, minmax(0, 1fr)); top:52px; }
  .pcStepTxt span { display:none; }
}

/* Вхід і запрошення (17.10): одна картка по центру, без шапки — людина ще не увійшла */
.authWrap { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.authBox { width:100%; max-width:380px; }
.authBox .authLogo { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-weight:700; font-size:18px; }
.authBox h1 { font-size:22px; margin:0 0 6px; }
.authBox label { display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
.authBox button[type="submit"] { width:100%; margin-top:6px; }
.authErr { color:var(--red); font-size:13px; min-height:18px; margin:4px 0 0; }
/* Профіль: люди й запрошення */
.pfPerson { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pfPerson.is-off { opacity:.6; }
.pfLink { display:flex; gap:8px; align-items:center; }
.pfLink input { margin:0; flex:1; font-size:13px; }
.pfPassGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.pfPassGrid input { margin:0; }
@media (max-width:720px) { .pfPassGrid { grid-template-columns:1fr; } }

/* Voice Over (18.10): форма начитки і список фраз з варіантами.
   Inter (і системний шрифт Mac) ставить знак наголосу після голосної, над наступною літерою — тексту з наголосами інший шрифт */
.voStressFont, .voText, .voCtx textarea, .voPhrase { font-family:"Helvetica Neue", Arial, sans-serif; }
.voText { min-height:120px; font-size:16px; line-height:1.5; }
.voBar { margin:-2px 0 10px; gap:12px; }
.voCount { margin-left:auto; font-variant-numeric:tabular-nums; }
.voCtx { margin:0 0 12px; }
.voCtx summary { cursor:pointer; color:var(--muted); font-size:13px; margin-bottom:8px; }
.voCtx textarea { min-height:52px; }
.voGrid { margin-bottom:6px; }
.voGrid select, .voGrid input { margin:0; }
.voHint { font-size:13px; margin:6px 0 12px; }
.voWarn { color:var(--yellow); }
.voSliders { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px 18px; margin:0 0 16px; align-items:end; }
.voSeg { margin-top:4px; }
.voCheck { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.voCheck input { width:auto; margin:0; }
.voGoRow { gap:12px; }
.voGroup { padding:14px 16px; }
.voPhrase { font-size:15px; line-height:1.5; white-space:pre-wrap; margin-bottom:8px; }
.voGroupMeta { gap:8px; }
.voGroupActs { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.voTakes { margin-top:10px; border-top:1px solid var(--border); }
.voTake { padding:10px 0; border-bottom:1px solid var(--border); }
.voTake:last-child { border-bottom:none; padding-bottom:0; }
.voTakeHead { gap:8px; }
.voTakeMeta { font-size:12px; }
.voTakePlay { margin-top:8px; gap:8px; }
.voTakePlay audio { flex:1; min-width:240px; height:36px; }
.voErr { color:var(--red); font-size:13px; margin:6px 0 0; }
/* Voice Over v2: «Текст | Мій голос», запис, «Знайти в сценарії» */
.voMode { display:inline-grid; grid-template-columns:repeat(2, auto); margin-bottom:14px; }
.voMode button { padding:6px 16px; font-size:13px; display:inline-flex; align-items:center; gap:6px; justify-content:center; }
#voForm.isSts .voTtsOnly { display:none; }
.voRecBox { margin-bottom:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r); background:var(--input); }
.voRecRow { gap:12px; flex-wrap:wrap; }
#voRecBtn { display:inline-flex; align-items:center; gap:8px; }
#voRecBtn.recording { background:var(--red-soft); color:var(--red); border-color:var(--red-line); }
.voDot { width:10px; height:10px; border-radius:50%; background:var(--red); display:inline-block; }
.voSq { width:10px; height:10px; border-radius:2px; background:currentColor; display:inline-block; }
.voRecTime { font-variant-numeric:tabular-nums; min-width:76px; }
.voLevel { flex:1; min-width:120px; height:6px; border-radius:3px; background:var(--card-2); overflow:hidden; }
.voLevel > div { width:0; height:100%; background:var(--green); transition:width 60ms linear; }
.voLevel > div.hot { background:var(--red); }
.voFileBtn { margin-left:auto; }
.voClipRow { margin-top:10px; gap:10px; }
.voClipRow audio { flex:1; min-width:220px; height:36px; }
.voClipName { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voRecHelp { font-size:12px; margin:8px 0 0; }
.voFindRow { gap:10px; align-items:flex-end; margin:0 0 10px; }
.voWidLabel { flex:0 1 260px; }
.voWidLabel input { margin:0; }
.voFound { position:relative; margin:0 0 12px; padding:12px 14px; border:1px solid var(--violet-line); border-radius:var(--r); background:var(--violet-soft); }
.voFoundClose { position:absolute; top:8px; right:8px; }
.voFound > p.muted { margin:0 32px 0 0; font-size:13px; }
.voFoundNote { margin-bottom:8px !important; }
.voMatch + .voMatch { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.voMatchHead { gap:8px; margin-right:32px; }
.voDiff { display:grid; grid-template-columns:52px 1fr; gap:8px; margin-top:8px; }
.voDiffLbl { font-size:12px; color:var(--muted); padding-top:2px; }
.voDiff p { margin:0; font-family:"Helvetica Neue", Arial, sans-serif; font-size:14px; line-height:1.5; }
.voDiffCtx { color:var(--muted); }
.voDiff del { color:var(--red); background:var(--red-soft); text-decoration:line-through; border-radius:3px; padding:0 2px; }
.voDiff ins { color:var(--green); background:var(--green-soft); text-decoration:none; border-radius:3px; padding:0 2px; }
.voMatchActs { gap:8px; margin-top:10px; }
.voOrig { gap:8px; margin:0 0 8px; }
.voOrig audio { flex:1; min-width:220px; height:32px; }
@media (max-width:640px) {
  .voFileBtn { margin-left:0; }
  .voWidLabel { flex:1 1 100%; }
  .voDiff { grid-template-columns:1fr; gap:2px; }
}