/* قاطع البثّ المباشر — ثيم داكن على نسق محرّرات الفيديو */
:root {
  color-scheme: dark;
  --bg: #0a0d10; --panel: #11161b; --panel-2: #151b21; --surface: #182026; --surface-2: #202a31;
  --input: #0d1217; --border: #2b363d; --border-strong: #52606b;
  --text: #edf2f7; --muted: #9aa7b1; --subtle: #74818b;
  --accent: #2dd4bf; --accent-ink: #042f2e; --accent-2: #60a5fa;
  --warn: #f59e0b; --danger: #fb7185; --ok: #34d399; --live: #ef4444;
  --bg-2: #161d23;
  --r: 8px; --rs: 6px;
  --font: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
/* ---- الثيم الفاتح ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f4; --panel: #ffffff; --panel-2: #f7f9fb; --surface: #f1f4f7; --surface-2: #e6ebf0;
  --input: #ffffff; --border: #d5dce3; --border-strong: #aeb9c4;
  --text: #16202a; --muted: #4f5d6b; --subtle: #7a8794;
  --accent: #0f9f8f; --accent-ink: #ffffff; --accent-2: #2563eb;
  --warn: #b45309; --danger: #dc2626; --ok: #15803d; --live: #dc2626;
  --code-bg: #f1f4f7; --bg-2: #dfe5eb;
}
:root[data-theme="light"] .ovbar .ovrec { background: rgba(79,93,107,.3); }
:root[data-theme="light"] .ovbar .ovwin { border-color: #16202a; background: rgba(22,32,42,.08); }
:root[data-theme="light"] .pill.ok { background: rgba(21,128,61,.12); }
:root[data-theme="light"] .pill.off { background: rgba(79,93,107,.12); }
:root[data-theme="light"] .pill.warn { background: rgba(180,83,9,.12); }
:root[data-theme="light"] .pill.bad { background: rgba(220,38,38,.12); }
:root[data-theme="light"] .ed-canvas { background-color: #dfe5eb; background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); }
:root[data-theme="light"] .toast { box-shadow: 0 12px 40px rgba(0,0,0,.18); }
:root[data-theme="light"] .drawer, :root[data-theme="light"] .menu { box-shadow: 0 16px 48px rgba(0,0,0,.2); }
:root[data-theme="light"] .caption span, :root[data-theme="light"] .rfov .win .lbl { color: #fff; }
:root[data-theme="light"] kbd { color: var(--text); }
:root[data-theme="light"] .modebtn.on { background: rgba(15,159,143,.1); }
:root[data-theme="light"] .ed-tab.on { background: rgba(15,159,143,.12); }
/* ---- الإنجليزية: خطّ واتجاه ---- */
html[lang="en"] body { font-family: "Inter", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
html[lang="en"] th, html[lang="en"] td, html[lang="en"] .modebtn { text-align: left; }
html[lang="en"] .menu .mi { text-align: left; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.7 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
::selection { background: rgba(45,212,191,.35); }

/* ---- الهيكل ---- */
#app { display: flex; flex-direction: column; height: 100%; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.chips { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.feedsel { width: auto; min-width: 220px; max-width: 360px; padding: 4px 10px; font-weight: 600; }
.chip { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 2px 11px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.chip i.off { background: var(--subtle); }
.tabs { display: flex; gap: 2px; }
.tab { background: transparent; border: 0; padding: 5px 11px; border-radius: var(--rs); color: var(--muted); cursor: pointer; white-space: nowrap; }
.tab.active, .tab:hover { background: var(--surface); color: var(--text); }
.userbox { color: var(--muted); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.userbox .role { font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; color: var(--subtle); }
main { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }

/* ---- عناصر ---- */
input[type=text], input[type=password], input[type=number], input[type=time], select, textarea {
  background: var(--input); border: 1px solid var(--border); border-radius: var(--rs); padding: 6px 10px; color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(45,212,191,.45); outline-offset: 0; border-color: var(--accent); }
textarea { min-height: 70px; resize: vertical; }
label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.field { margin-bottom: 9px; }
.btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rs); padding: 6px 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--border-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 3px 9px; font-size: 12.5px; }
.btn.icon { padding: 5px 8px; font-family: var(--mono); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 11px 12px; }
.panel h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); font-size: 12.5px; }
.spacer { flex: 1; }
.mono { font-family: var(--mono); direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.pill.ok { background: rgba(52,211,153,.15); color: var(--ok); }
.pill.off { background: rgba(155,167,177,.15); color: var(--muted); }
.pill.warn { background: rgba(245,158,11,.15); color: var(--warn); }
.pill.bad { background: rgba(251,113,133,.15); color: var(--danger); }
.pill.live { background: var(--live); color: #fff; }
.toast { position: fixed; bottom: 18px; inset-inline-start: 18px; background: var(--surface-2); border: 1px solid var(--border-strong); padding: 10px 14px; border-radius: var(--r); box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 60; max-width: 420px; }
.toast.err { border-color: var(--danger); }
.hint { font-size: 12.5px; color: var(--subtle); }
.empty { padding: 26px; text-align: center; color: var(--subtle); }
kbd { font: 11px var(--mono); background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--text); }

/* ---- الدخول ---- */
.login { max-width: 360px; margin: 12vh auto; }
.login h1 { font-size: 22px; margin: 0 0 6px; }

/* ---- الفيديو ---- */
.video-wrap { position: relative; background: #000; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--border); }
.video-wrap video { width: 100%; height: 100%; display: block; background: #000; }
.video-badge { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; gap: 6px; align-items: center; }
.caption { position: absolute; bottom: 12px; inset-inline: 40px; text-align: center; pointer-events: none; }
.caption span { display: inline-block; background: rgba(0,0,0,.65); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 15px; line-height: 1.5; max-width: 100%; }

/* ---- الاستوديو ---- */
.studio { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 12px; height: calc(100vh - 78px); }
.studio .left { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.strip { position: relative; height: 40px; background: var(--input); border: 1px solid var(--border); border-radius: var(--rs); direction: ltr; overflow: hidden; cursor: pointer; flex: 0 0 auto; }
.strip .rec { position: absolute; top: 24px; height: 6px; background: rgba(96,165,250,.35); }
.strip .seg { position: absolute; top: 31px; height: 4px; background: rgba(45,212,191,.4); }
.strip .live { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--live); }
.strip .tick { position: absolute; top: 2px; font: 10px var(--mono); color: var(--subtle); transform: translateX(-50%); }
.strip .hover { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; opacity: .6; pointer-events: none; }
.hcards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.hcards .card { flex: 0 0 170px; }
.transcript { display: flex; flex-direction: column; min-height: 0; }
.tlist { flex: 1; overflow: auto; min-height: 0; padding: 4px 2px; }
.tline { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 5px 8px; border-radius: var(--rs); cursor: pointer; align-items: start; }
.tline:hover { background: var(--surface); }
.tline.sel { background: rgba(45,212,191,.12); outline: 1px solid rgba(45,212,191,.4); }
.tline.inrange { background: rgba(96,165,250,.10); }
.tline .t { font-family: var(--mono); font-size: 12px; color: var(--subtle); padding-top: 3px; direction: ltr; }
.tline .x { font-size: 14.5px; }
.tline .tr { grid-column: 2; color: var(--accent-2); font-size: 13.5px; }
.tpara { cursor: default; line-height: 1.75; }
.tpara:hover { background: transparent; }
.tpara .x { font-size: 15px; }
.ts { cursor: pointer; border-radius: 4px; padding: 1px 3px; transition: background .12s; }
.ts:hover { background: var(--surface-2); }
.ts::selection, .tpara ::selection { background: rgba(45,212,191,.35); }
.ts.sel { background: rgba(45,212,191,.16); box-shadow: 0 0 0 1px rgba(45,212,191,.45); }
/* 30 Sep 2026 (item 6): before the DVR window — final colours only, no new colour; reused in both the
   studio list (.ts) and the cutter's own transcript pane (.tline.tpara.notime .ts, see below). Class name
   picked to avoid the `.rec` collision documented in HANDOVER 9-ج٥ — check with grep before reusing "rec". */
.ts-novideo { opacity: .55; cursor: not-allowed; }
.tpara .tr { display: inline; }
.tline mark { background: rgba(245,158,11,.35); color: inherit; padding: 0 2px; border-radius: 3px; }
.search { display: flex; gap: 6px; margin-bottom: 8px; }
.selbar { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--rs); padding: 6px 10px; margin-bottom: 8px; }

/* ---- الجدار ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer; }
.tile:hover { border-color: var(--border-strong); }
.tile .video-wrap { border: 0; border-radius: 0; }
.tile .meta { padding: 8px 10px; }
.tile-ctl { position: absolute; inset-inline-start: 8px; bottom: 8px; z-index: 3; }
.tile-snd { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); color: #fff; }
.tile-snd.on { background: var(--accent); color: #04211c; }
.tile .meta .h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.tile .meta .last { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .meta .st { font-size: 12px; color: var(--subtle); }
.wall-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 10px; }
.feedtag { color: var(--accent-2); font-weight: 600; margin-inline-end: 6px; }

/* ---- القصّ ---- */
.clip-layout { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(280px, 1fr); gap: 12px; }
.timeline { position: relative; height: 84px; background: var(--input); border: 1px solid var(--border); border-radius: var(--rs); user-select: none; cursor: crosshair; overflow: hidden; direction: ltr; }
.timeline .rec { position: absolute; top: 56px; height: 10px; background: rgba(96,165,250,.35); }
.timeline .seg { position: absolute; top: 70px; height: 6px; background: rgba(45,212,191,.35); }
.timeline .range { position: absolute; top: 0; bottom: 0; background: rgba(45,212,191,.16); border-inline: 2px solid var(--accent); }
.timeline .head { position: absolute; top: 0; bottom: 0; width: 2px; background: #f5b400; }
.timeline .tick { position: absolute; top: 2px; font: 10.5px var(--mono); color: var(--subtle); transform: translateX(-50%); white-space: nowrap; }
.timeline .tickline { position: absolute; top: 18px; height: 32px; width: 1px; background: var(--border); }
.timeline .live { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--live); }
.tl-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.inout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.inout .box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 8px; }
.inout .box img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; border-radius: 4px; display: block; margin: 6px 0; }
.inout .box .tm { font-family: var(--mono); direction: ltr; font-size: 13px; }

/* ---- كليبات AI ---- */
.ai-setup { max-width: 760px; }
.ai-results { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.5fr); gap: 12px; }
.sug { border: 1px solid var(--border); border-radius: var(--rs); padding: 9px 11px; margin-bottom: 8px; background: var(--surface); cursor: pointer; }
.sug:hover { border-color: var(--border-strong); }
.sug.on { border-color: var(--accent); background: rgba(45,212,191,.08); }
.sug .h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sug .h b { font-size: 14.5px; }
.sug .m { font-size: 12px; color: var(--subtle); display: flex; gap: 8px; }
.score { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 8px; }
.preset { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 8px 10px; cursor: pointer; text-align: center; }
.preset.on { border-color: var(--accent); background: rgba(45,212,191,.1); }

/* ---- فيديوهاتي ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer; }
.card:hover { border-color: var(--border-strong); }
.card .th { aspect-ratio: 16/9; background: #000; position: relative; }
.card .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .th .dur { position: absolute; bottom: 6px; inset-inline-end: 6px; background: rgba(0,0,0,.7); font: 11.5px var(--mono); padding: 1px 6px; border-radius: 4px; direction: ltr; }
.card .th .st { position: absolute; top: 6px; inset-inline-start: 6px; }
.card .b { padding: 7px 10px; }
.card .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .m { font-size: 12px; color: var(--subtle); display: flex; justify-content: space-between; gap: 6px; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(560px, 100%); background: var(--panel); border-inline-end: 1px solid var(--border); box-shadow: 0 0 60px rgba(0,0,0,.6); z-index: 40; overflow: auto; padding: 14px; }
.drawer video { width: auto; max-width: 100%; max-height: 56vh; display: block; margin: 0 auto; border-radius: var(--rs); background: #000; }
.cmenu-list { display: flex; flex-direction: column; gap: 6px; }
.cm-item { justify-content: space-between; text-align: start; padding: 10px 12px; font-size: 14.5px; }
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39; }

/* ---- الفيدات ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.code { font-family: var(--mono); direction: ltr; unicode-bidi: embed; background: var(--input); border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; font-size: 12.5px; word-break: break-all; display: inline-block; max-width: 100%; }

@media (max-width: 900px) {
  .studio, .clip-layout, .ai-results, .wall-grid { grid-template-columns: 1fr; height: auto; }
  .tlist { max-height: 45vh; }
  .brand span.t { display: none; }
}

/* ---- خطوة تسليم الكليب ---- */
.pubbar { position: fixed; bottom: 16px; inset-inline: 16px; z-index: 70; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r); padding: 10px 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.pubbar .pb-t { font-weight: 600; }
.pubbar .pb-link { color: var(--accent-2); font-size: 12.5px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,8,12,.62); backdrop-filter: blur(3px); }
.modal .box { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); max-height: calc(100vh - 40px); overflow: auto; }
.ai-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; text-align: center; }
.ai-wait .spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--accent); animation: lcspin 1s linear infinite; }
@keyframes lcspin { to { transform: rotate(360deg); } }
.sheet { width: min(640px, 100%); }
.sheet h2 { font-size: 17px; margin: 0; }
.sheet .sec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.sheet .sec h3 { margin-bottom: 8px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.chipsin { display: flex; flex-wrap: wrap; gap: 6px; background: var(--input); border: 1px solid var(--border); border-radius: var(--rs); padding: 5px 8px; min-height: 38px; align-items: center; }
.chipsin .tag { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 8px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.chipsin .tag b { cursor: pointer; color: var(--muted); font-weight: 400; }
.chipsin input { flex: 1; min-width: 120px; background: transparent; border: 0; padding: 2px 4px; }
.chipsin input:focus { outline: none; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: auto; }
.summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 6px 10px; font-size: 13px; color: var(--muted); display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* ---- الترجمة (سبتايتل) ---- */
.subs { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 12px; }
.jobs .job { border: 1px solid var(--border); border-radius: var(--rs); padding: 8px 10px; margin-bottom: 6px; cursor: pointer; background: var(--surface); }
.jobs .job:hover { border-color: var(--border-strong); }
.jobs .job.on { border-color: var(--accent); background: rgba(45,212,191,.08); }
.jobs .job .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobs .job .m { font-size: 12px; color: var(--subtle); display: flex; justify-content: space-between; gap: 6px; }
.stepbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 8px 10px; margin-bottom: 8px; }
.stepbar .k { font-weight: 600; color: var(--muted); min-width: 70px; }
.cues { overflow: auto; max-height: 52vh; border: 1px solid var(--border); border-radius: var(--rs); }
.cues table { min-width: 720px; }
.cues th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.cues td { padding: 5px 6px; }
.cues tr.on td { background: rgba(45,212,191,.10); }
.cues .tm { width: 92px; font-family: var(--mono); direction: ltr; font-size: 12px; padding: 4px 6px; }
.cues textarea { min-height: 38px; padding: 4px 8px; font-size: 13.5px; }
.cues .ops { white-space: nowrap; }
.overlay { position: absolute; inset-inline: 6%; bottom: 6%; text-align: center; pointer-events: none; }
.overlay.top { bottom: auto; top: 6%; }
.overlay span { display: inline-block; color: #fff; font-size: clamp(14px, 2.6vw, 26px); line-height: 1.35; white-space: pre-wrap; text-shadow: 0 0 2px #000, 0 0 6px #000, 1px 1px 0 #000; padding: 2px 8px; }
.overlay.box span { background: rgba(0,0,0,.55); text-shadow: none; border-radius: 4px; }
.dirty { color: var(--warn); font-size: 12.5px; }
@media (max-width: 900px) { .subs { grid-template-columns: 1fr; } .grid3 { grid-template-columns: 1fr; } }

/* ---- نتائج كليبات AI: بطاقات كاملة ---- */
.aigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.aicard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.aicard.done { border-color: rgba(52,211,153,.5); }
.aicard .video-wrap { border: 0; border-radius: 0; }
.aicard .video-wrap.shaped { aspect-ratio: auto; background: #0b0f13; display: flex; justify-content: center; }
.shape-wrap { position: relative; height: 300px; max-width: 100%; cursor: pointer; }
.shape-prev { height: 100%; width: auto; display: block; background: #000; }
.shape-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); pointer-events: none; }
.shape-time { position: absolute; bottom: 6px; inset-inline-start: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.aicard .b { padding: 10px 12px; }
.aicard .field { margin-bottom: 6px; }
.aitxt { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
details summary { cursor: pointer; }

/* ---- إجراءات بطاقة الكليب + قائمة النشر ---- */
.card .acts { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.card .acts .btn { padding: 2px 8px; font-size: 12px; }
.menu { position: absolute; z-index: 70; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 16px 48px rgba(0,0,0,.6); padding: 6px; min-width: 260px; display: flex; flex-direction: column; }
.menu .mi { background: transparent; border: 0; text-align: right; padding: 7px 10px; border-radius: var(--rs); cursor: pointer; }
.menu .mi:hover { background: var(--surface); }
.menu .mi:disabled { color: var(--subtle); cursor: not-allowed; }
.menu .sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ---- شريط التشغيل في شاشة القصّ ---- */
.transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 8px 0; }
.transport .side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.transport .side.end { justify-content: flex-end; }
.transport .center { display: flex; gap: 5px; align-items: center; justify-content: center; }
.transport .play { width: 52px; height: 40px; font-size: 18px; justify-content: center; background: var(--surface-2); border-color: var(--border-strong); }
.winrange { width: 220px; }
input[type=range] { accent-color: var(--accent); }
.cvprev { width: 100%; max-width: 360px; aspect-ratio: 16/9; object-fit: cover; background: #000; border-radius: var(--rs); display: block; margin-top: 8px; }
@media (max-width: 900px) { .transport { grid-template-columns: 1fr; } .transport .side.end { justify-content: flex-start; } }

/* ---- التحويل بين القياسات ---- */
.rfbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rfov { position: absolute; inset: 0; z-index: 3; }
.rfov .mask { position: absolute; inset: 0; background: rgba(0,0,0,.35); pointer-events: none; }
.rfov .win { position: absolute; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); cursor: grab; touch-action: none; }
.rfov .win.on { border-color: var(--accent); box-shadow: 0 0 0 9999px rgba(0,0,0,.35), 0 0 12px var(--accent); }
.rfov .win .lbl { position: absolute; top: 4px; inset-inline-start: 6px; background: rgba(0,0,0,.7); color: #fff; font: 700 12px var(--mono); padding: 0 6px; border-radius: 4px; }
.rfov .win:active { cursor: grabbing; }
.scenes { position: relative; height: 62px; background: var(--input); border: 1px solid var(--border); border-radius: var(--rs); direction: ltr; margin: 6px 0; overflow: hidden; }
.scenes .scene { position: absolute; top: 3px; bottom: 3px; background: #10161b center/cover no-repeat; border: 1px solid rgba(96,165,250,.45); border-radius: 4px; font-size: 11px; display: flex; align-items: flex-end; overflow: hidden; white-space: nowrap; cursor: pointer; direction: rtl; }
.scenes .scene .cap { width: 100%; padding: 2px 6px; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); color: #fff; overflow: hidden; text-overflow: ellipsis; }
.scenes .scene.on { border: 2px solid var(--accent); box-shadow: inset 0 0 0 1px rgba(45,212,191,.5); }
.scenes .scene i { font-style: normal; color: var(--subtle); }
.scenes .head { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; z-index: 4; }
/* ١٥ أيلول ٢٠٢٦: شريط الكليب صار تايم لاين ثانياً — مؤشّر دائم بمقبض يُسحب، وكتلة «بلا قصّ» تُعرف بحدّها المتقطّع.
   بلا ألوان جديدة: لون المؤشّر نفسه (#f5b400) وشكل مثلّث مقبض التايم لاين نفسه. */
.scenes .head[hidden] { display: none; }
.scenes .head { pointer-events: none; }   /* الخيط نفسه لا يبتلع نقرة الكتلة تحته؛ المقبض وحده يُمسك */
.scenes .head .grip { pointer-events: auto; }
.scenes .head .grip { position: absolute; top: -1px; left: -9px; width: 0; height: 0; cursor: grab; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #f5b400; filter: drop-shadow(0 0 1px #16202a); touch-action: none; }
.scenes .head .grip:active { cursor: grabbing; }
.scenes .scene.neutral { border-style: dashed; opacity: .72; }
.transport .rates { display: inline-flex; gap: 2px; }
.transport .rates .btn.rate { padding: 4px 7px; font: 600 11.5px var(--mono); }
.rftools { margin: 6px 0; }
.rftools .wins { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rftools .winrow { padding: 4px 8px; border-radius: var(--rs); cursor: pointer; border: 1px solid transparent; }
.rftools .winrow.on { border-color: var(--accent); background: rgba(45,212,191,.08); }
.rfprevwrap { display: flex; justify-content: center; }
.rfprev { cursor: pointer; width: auto; height: auto; max-width: 100%; max-height: 78vh; border-radius: 6px; display: block; border: 1px solid var(--border-strong); background: #000; }
/* width:100% مع سقف ارتفاع كان يمطّ الكانفاس (نسبة الصندوق ≠ نسبة الصورة)؛ الحجم الذاتي مع سقفين يحفظ النسبة */

/* ---- مقابض التكبير وأشكال السبليت ---- */
.rfov .win .hd { position: absolute; width: 14px; height: 14px; background: var(--accent); border: 2px solid #0a0d10; border-radius: 3px; cursor: nwse-resize; z-index: 4; }
.rfov .win .hd.nw { top: -7px; left: -7px; } .rfov .win .hd.se { bottom: -7px; right: -7px; }
.rfov .win .hd.ne { top: -7px; right: -7px; cursor: nesw-resize; } .rfov .win .hd.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.rfov .win:not(.on) .hd { display: none; }
.shapes { margin-top: 8px; gap: 6px; }
.btn.shape { padding: 4px 10px; }
.spicon svg rect { fill: rgba(255,255,255,.18); stroke: currentColor; stroke-width: 1; }
.btn.shape.primary .spicon svg rect { fill: rgba(4,47,46,.35); stroke: #042f2e; }

/* ---- لوحة المشهد: مجموعات واضحة ---- */
.rftools .grp { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.rftools .eyebrow { font-size: 11.5px; letter-spacing: .06em; color: var(--subtle); font-weight: 600; margin-bottom: 6px; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modebtn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 8px 10px; text-align: right; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.modebtn b { font-size: 14px; }
.modebtn span { font-size: 12px; color: var(--muted); }
.modebtn:hover { border-color: var(--border-strong); }
.modebtn.on { border-color: var(--accent); background: rgba(45,212,191,.1); }
.modebtn.on b { color: var(--accent); }
@media (max-width: 900px) { .modes { grid-template-columns: 1fr; } }

/* ---- درج الكليب: مجموعات الإجراءات ---- */
.acts-grp { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 10px; }
.acts-grp .eyebrow { font-size: 11.5px; letter-spacing: .06em; color: var(--subtle); font-weight: 600; margin-bottom: 6px; }
.acts-grp .hint { margin: 4px 0 0; }

/* ---- منتقي الملفات ---- */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--r); padding: 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: rgba(45,212,191,.06); }
.dropzone.has { border-style: solid; border-color: var(--ok); }
.dropzone .dz-main { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.dropzone .dz-ico { font-size: 22px; color: var(--accent); }
.dropzone .dz-file { justify-content: center; margin-top: 6px; }
.dropzone .fname { font-size: 12.5px; color: var(--ok); direction: ltr; unicode-bidi: embed; }

/* ---- محرّر القصّ على نسق Spearow ---- */
.editor { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100vh - 52px); background: var(--bg); }
.ed-top { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ed-top .rfbar { margin: 0; }
.ed-title { font-weight: 600; }
.ed-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.ed-body { display: grid; grid-template-columns: 62px 320px minmax(0, 1fr) 340px; min-height: 0; }
.ed-rail { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; background: var(--panel); border-inline-end: 1px solid var(--border); }
.ed-tab { background: transparent; border: 1px solid transparent; border-radius: var(--rs); color: var(--muted); padding: 8px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; }
.ed-tab .ico { font-size: 18px; }
.ed-tab:hover { background: var(--surface); color: var(--text); }
.ed-tab.on { background: rgba(45,212,191,.12); color: var(--accent); border-color: rgba(45,212,191,.35); }
.ed-panel { background: var(--panel); border-inline-end: 1px solid var(--border); overflow: auto; min-height: 0; }
.ed-pane { padding: 12px; }
.ed-pane h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ed-pane .tlist { max-height: none; }
.ed-panel .rftools { border: 0; border-radius: 0; padding: 12px; margin: 0; }
.ed-panel .rftools:not([hidden]) + .shape-hint { display: none; }
.ed-canvas { display: flex; align-items: center; justify-content: center; padding: 16px; min-width: 0; min-height: 0; overflow: hidden;
  background-color: #0b1016; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
.ed-video { width: 100%; max-width: calc((100vh - 330px) * 16 / 9); max-height: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.ed-props { background: var(--panel); border-inline-start: 1px solid var(--border); overflow: auto; min-height: 0; padding: 12px; }
.ed-props .panel { border: 0; padding: 0; margin: 0 0 12px; background: transparent; }
.ed-bottom { background: var(--panel); border-top: 1px solid var(--border); padding: 6px 12px 8px; }
.ed-bottom .transport { margin: 0 0 6px; }
.ed-tracks { display: flex; flex-direction: column; gap: 4px; }
.ed-track { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.ed-trlabel { font-size: 11.5px; color: var(--subtle); display: flex; align-items: center; justify-content: flex-end; padding-inline-end: 4px; }
.ed-track .timeline { height: 62px; }
.ed-track .scenes { margin: 0; height: 56px; }
/* 15 Sep 2026: the scene-strip header (.sc-col/.sc-head) is gone — the track hides with the strip, so it
   hid its own buttons; they moved to .cl-actions, which does not depend on the strip or on the aspect. */
.ed-track .scenes[hidden] { display: none !important; }
#scene-track:has(.scenes[hidden]) { display: none; }
@media (max-width: 1100px) { .ed-body { grid-template-columns: 56px 260px minmax(0, 1fr); } .ed-props { display: none; } }
@media (max-width: 900px) { .editor { height: auto; } .ed-body { grid-template-columns: 1fr; } .ed-rail { flex-direction: row; } }

/* ---- البروفايل والإعدادات ---- */
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.avatar:hover { border-color: var(--accent); }
.menu .mh { padding: 6px 10px 4px; font-size: 12.5px; color: var(--muted); }
.menu .mi-x { float: inline-end; color: var(--subtle); font-size: 12px; }
.menu .mi { display: flex; justify-content: space-between; gap: 12px; }

/* ---- شاشة القصّ: الترتيب القديم بمظهر المحرّر ---- */
.cl-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 52px); }
.cl-body { padding: 12px 14px; }
.cl-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-canvas { border-radius: var(--r); border: 1px solid var(--border); padding: 12px; }
.cl-canvas .ed-video { max-height: none; max-width: min(100%, 1100px, calc((100vh - 380px) * 16 / 9)); }
/* الفيديو مقيّد بارتفاع الشاشة حتى يبقى شريط التشغيل والتايم لاين ظاهرين بلا تمرير */
.cl-left .rftools { margin: 0; }
.cl-right { min-width: 0; }
.cl-right .panel { margin-bottom: 10px; }
.pip { padding: 8px 10px; }
.pip .pip-wrap { cursor: pointer; width: 62%; max-width: 260px; margin-inline-end: auto; }
.pip .row { flex-wrap: nowrap; }
.pip .pip-wrap:hover { outline: 2px solid var(--accent); }
.cl-right .tlist { max-height: 40vh; }

.aspectsel { width: auto; min-width: 200px; padding: 4px 10px; font-weight: 600; }

/* ---- صفحة الترجمة والكابشن (شكل فقط) ---- */
.svcs { max-width: 1000px; }
.svc { opacity: .95; }
.steps-list { margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 13.5px; }
.steps-list li { margin-bottom: 4px; }

/* ---- المتحدّثون والشريط السفلي (شكل) ---- */
.spk-rows { display: flex; flex-direction: column; gap: 6px; }
.spk-row { display: grid; grid-template-columns: 24px 1.2fr 1.4fr auto auto auto auto; gap: 6px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 6px 8px; }
.spk-row input { padding: 4px 8px; }
.spk-n { color: var(--subtle); text-align: center; }
.lt-overlay { position: absolute; inset-inline-start: 5%; bottom: 8%; z-index: 4; pointer-events: none; }
.lt { display: inline-flex; flex-direction: column; background: linear-gradient(90deg, #c8102e, #7a0a1c); color: #fff; padding: 6px 14px 6px 22px; border-inline-start: 6px solid #fff; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.45); min-width: 220px; }
.lt b { font-size: 16px; line-height: 1.3; }
.lt span { font-size: 12.5px; opacity: .9; }
.timeline .ltmark { position: absolute; top: 34px; height: 4px; background: #c8102e; border-radius: 2px; }
@media (max-width: 900px) { .spk-row { grid-template-columns: 1fr 1fr; } }

/* ---- مؤشّر الفأرة على التايم لاين ---- */
.timeline .tlhover { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.55); pointer-events: none; z-index: 2; }
.timeline .tlhover-t { position: absolute; top: 20px; left: 4px; font: 11px var(--mono); background: rgba(0,0,0,.75); color: #fff; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.timeline { cursor: col-resize; }

/* ---- مقبضا IN/OUT على التايم لاين ---- */
.timeline .range { pointer-events: none; }
.timeline .rh { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; pointer-events: auto; z-index: 3; }
.timeline .rh::after { content: ''; position: absolute; top: 22px; bottom: 6px; width: 6px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 1px #0a0d10; }
.timeline .rh.in { left: -6px; } .timeline .rh.in::after { left: 3px; }
.timeline .rh.out { right: -6px; } .timeline .rh.out::after { right: 3px; }
.timeline .rh:hover::after { background: #fff; }

/* ---- مؤشّر الرأس والنطاق القابل للسحب ---- */
.timeline .head { width: 2px; z-index: 4; }
.timeline .head .grip { position: absolute; top: 0; left: -8px; width: 18px; height: 16px; background: #f5b400; border-radius: 0 0 6px 6px; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.timeline .head .grip::after { content: ''; position: absolute; left: 5px; top: 16px; border: 4px solid transparent; border-top: 6px solid #f5b400; }
.timeline .head .grip:active { cursor: grabbing; }
.timeline .rmove { position: absolute; top: 22px; bottom: 6px; left: 8px; right: 8px; cursor: move; pointer-events: auto; }
.timeline .rmove:hover { background: rgba(45,212,191,.12); }

.strip .hover { background: #f5b400; opacity: .9; }
.scenes .head { background: #f5b400; }

/* ---- مكتبة القوالب على الكليب (شكل) ---- */
.tpl-row { display: grid; grid-template-columns: 34px 1fr auto auto auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 6px 8px; }
.tpl-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; flex: 0 0 auto; }
.tpl-info { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.tpl-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tpl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tpl-card:hover { border-color: var(--accent); }
.tpl-card .tpl-thumb { width: 100%; aspect-ratio: 16/9; border-radius: 6px; background: linear-gradient(135deg, var(--c), transparent 80%), #111; display: flex; align-items: flex-end; justify-content: flex-start; padding: 8px; }
.lt-overlay { inset: 0; inset-inline-start: 0; bottom: auto; display: flex; flex-direction: column; }
.lt { position: absolute; inset-inline-start: 5%; background: linear-gradient(90deg, var(--c, #c8102e), color-mix(in srgb, var(--c, #c8102e) 55%, #000)); }
.lt.pos-bottom { bottom: 8%; } .lt.pos-top { top: 6%; } .lt.pos-middle { top: 42%; }
.lt.tpl-breaking { padding: 4px 14px; border-inline-start: 0; border-radius: 999px; min-width: 0; } .lt.tpl-breaking b { font-size: 13px; letter-spacing: .06em; }
.lt.tpl-source, .lt.tpl-guest_logo { background: rgba(0,0,0,.55); border-inline-start: 0; min-width: 0; padding: 4px 10px; } .lt.tpl-source b, .lt.tpl-guest_logo b { font-size: 12px; font-weight: 500; }
.lt.tpl-quote { inset-inline: 8%; min-width: 0; padding: 10px 16px; border-inline-start-width: 8px; } .lt.tpl-quote b { font-size: 15px; white-space: normal; }
.lt.tpl-headline { inset-inline-start: 0; width: 100%; border-radius: 0; border-inline-start: 0; padding-inline-start: 5%; }

.btn.big { padding: 8px 18px; font-size: 15px; }

/* شريط النظرة العامة تحت التايم لاين + البحث بالساعة */
.ovbar { position: relative; height: 18px; margin: 2px 0 6px; background: var(--bg-2, rgba(127,127,127,.15)); border-radius: 4px; overflow: hidden; cursor: pointer; user-select: none; }
.ovbar .ovrec { position: absolute; top: 6px; height: 6px; background: rgba(127,127,127,.45); border-radius: 2px; }
.ovbar .ovclip { position: absolute; top: 4px; height: 10px; background: var(--accent, #2dd4bf); opacity: .8; border-radius: 2px; }
.ovbar .ovwin { position: absolute; top: 0; bottom: 0; border: 1px solid var(--fg, #fff); border-radius: 3px; background: rgba(255,255,255,.12); cursor: grab; box-sizing: border-box; }
.ovbar .ovwin:active { cursor: grabbing; }
.ovbar .ovlbl { position: absolute; top: 1px; font: 10px var(--mono); opacity: .7; pointer-events: none; }
.ovbar .ovlbl.l { left: 4px; } .ovbar .ovlbl.r { right: 4px; }
.tl-tools .sep { width: 1px; height: 18px; background: rgba(127,127,127,.4); margin: 0 2px; }
.tl-tools .goinput { width: 74px; text-align: center; padding: 3px 6px; }
.tl-tools .gozone { width: auto; padding: 3px 4px; }
.tl-tools .goeq { min-width: 90px; }
.timeline { cursor: grab; }
.timeline:active { cursor: grabbing; }

/* بيئة التطوير: تمييز لا يُخطئه العين */
body.env-dev { border-top: 5px solid #f59e0b; }
body.env-dev .brand::after { content: 'DEV'; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: #f59e0b; color: #1a1a1a; font: 700 11px var(--mono); letter-spacing: .08em; vertical-align: middle; }

/* ---- التايم لاين المعتمد (٧ أيلول): منطقة خضراء، IN/OUT أصفر بمقبضين كبيرين وبطاقتين، مؤشّر أصفر بعلم وبطاقة وقت ---- */
.timeline .rh { width: 16px; }
.timeline .rh.in { left: -8px; } .timeline .rh.out { right: -8px; }
.timeline .rh::after { top: 26px; bottom: 8px; width: 10px; border-radius: 5px; background: #facc15; box-shadow: 0 0 0 2px #16202a; }
.timeline .rh.in::after { left: 3px; } .timeline .rh.out::after { right: 3px; }
.timeline .rh:hover::after { background: #fde68a; }
.timeline .rtag { position: absolute; top: 1px; font: 700 10.5px var(--mono); background: #facc15; color: #16202a; border: 1px solid #16202a; border-radius: 4px; padding: 0 5px; line-height: 15px; cursor: ew-resize; pointer-events: auto; z-index: 5; user-select: none; }
.timeline .rtag.in { left: -14px; } .timeline .rtag.out { right: -14px; }
.timeline .range { border-inline: 3px solid #facc15; }
.timeline .range.tracking { background: rgba(220,38,38,.14); border-inline-color: #dc2626; }
.timeline .range.tracking .rh::after, .timeline .range.tracking .rtag { background: #dc2626; color: #fff; }
.timeline .head { width: 3px; background: #facc15; box-shadow: 0 0 0 1px #16202a; transform: translateX(-1px); }
.timeline .head .grip { top: -1px; left: -9px; width: 0; height: 0; background: none; border-radius: 0; box-shadow: none; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #facc15; filter: drop-shadow(0 0 1px #16202a); }
.timeline .head .grip::after { display: none; }
.timeline .head .htag { position: absolute; bottom: 2px; left: 6px; font: 600 10.5px var(--mono); background: #facc15; color: #16202a; border: 1px solid #16202a; border-radius: 4px; padding: 0 5px; line-height: 15px; white-space: nowrap; pointer-events: none; }
.btn.rec { background: #15803d; color: #fff; border-color: #15803d; font-weight: 700; }
.btn.rec:hover { background: #166534; }
.btn.rec.on { background: #dc2626; border-color: #dc2626; }

/* ---- شريط الصور (المرحلة 2) ---- */
.timeline { height: 132px; }
.timeline .thumb { position: absolute; top: 20px; height: 72px; object-fit: cover; opacity: .92; pointer-events: none; user-select: none; }
.timeline .tickline { top: 18px; height: 4px; }
.timeline .rec { top: 104px; height: 8px; }
.timeline .seg { top: 116px; height: 8px; }
.timeline .rh::after { top: 24px; bottom: 10px; }
.timeline .rmove { top: 20px; bottom: 10px; }
.timeline .tlhover-t { top: 96px; }
.tlprev { position: absolute; transform: translate(-50%, -100%); width: 168px; background: #16202a; border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; z-index: 20; }
.tlprev img { display: block; width: 160px; height: 90px; object-fit: cover; border-radius: 4px; background: #000; }
.tlprev .t { color: #fff; font-size: 11px; text-align: center; padding-top: 3px; }

/* ---- الشريط العامّ أوضح + أزرار مدّة النافذة ---- */
.ovbar { height: 30px; background: var(--input); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ovbar .ovrec { top: 11px; height: 8px; }
.ovbar .ovclip { top: 9px; height: 12px; }
.ovbar .ovtick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.ovbar .ovlbl { top: 2px; font-size: 10px; }
.ovbar .ovlbl.m { transform: translateX(-50%); }
.ovbar .ovwin { border: 2px solid var(--text); background: rgba(255,255,255,.14); border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.ovbar .ovwin:hover { background: rgba(255,255,255,.24); }
.ovbar .ovwin .ovgrip { width: 6px; height: 12px; border-inline: 2px solid var(--text); opacity: .8; pointer-events: none; }
.tl-tools .winpre { padding: 3px 9px; font-size: 12px; }

.timeline .range.partial { background: transparent; border-inline: 0; }
.timeline .range.partial .rh.in, .timeline .range.partial .rh.out { left: -8px; right: auto; }
.timeline .range.partial .rtag.in, .timeline .range.partial .rtag.out { left: -14px; right: auto; }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }

.btn.iobtn { background: #facc15; color: #16202a; border-color: #ca8a04; font-weight: 700; }
.btn.iobtn:hover { background: #fde047; }
.timeline .range.tracking { background: rgba(220,38,38,.22); }

/* نصّ التفريغ في القصّ: فقرات بلا أوقات، الجمل داخل الكليب مظلّلة */
.tline.tpara.notime { display: block; padding: 6px 8px; border-bottom: 1px solid var(--border); line-height: 1.9; }
.tline.tpara.notime .ts { cursor: pointer; border-radius: 3px; padding: 0 2px; }
.tline.tpara.notime .ts:hover { background: rgba(255,255,255,.08); }
.tline.tpara.notime .ts.sel { background: rgba(45,212,191,.22); box-shadow: 0 0 0 1px rgba(45,212,191,.35); }

/* ---- المرحلة 3: حدود اللقطات، أوائل الجمل، كثافة الكلام ---- */
.timeline .rec { top: 100px; height: 6px; }   /* 15 Sep 2026: .rec here is the DVR recording bar. The IN/OUT band's tracking modifier is `.tracking`, never `.rec` — it used to be, and this rule silently gave the band the bar's 6px geometry. */
.timeline .seg { top: 110px; height: 18px; border-radius: 3px; overflow: hidden; font-size: 10.5px; line-height: 18px; padding: 0 4px; color: var(--text); white-space: nowrap; direction: rtl; text-align: right; }
.timeline .seg.lbl { background: rgba(45,212,191,.28); }
.timeline .cut { position: absolute; top: 20px; height: 72px; width: 2px; background: rgba(239,68,68,.85); z-index: 1; pointer-events: none; }
.ovbar .ovden { position: absolute; bottom: 2px; background: rgba(45,212,191,.5); border-radius: 1px; pointer-events: none; }
.pill.bad { color: var(--danger); }

/* ---- توحيد ألوان الأزرار على هوية القاطع (٧ أيلول): IN/OUT و«ابدأ الكليب» بلون Ready الأخضر؛ الأصفر للتايم لاين فقط ---- */
/* مملوءة لا مؤطّرة (أوضح على الفاتح): لون الأزرار الأساسية نفسه في الثيمين */
.btn.iobtn, .btn.rec { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn.iobtn:hover, .btn.rec:hover { filter: brightness(1.08); }
.btn.rec.on { background: var(--live); color: #fff; border-color: var(--live); }

/* اللمس: السحب على الشريط ومقابضه بالإصبع بلا تمرير الصفحة */
.timeline, .ovbar, .timeline .rh, .timeline .rtag, .timeline .head .grip, .ovbar .ovwin { touch-action: none; }
@media (pointer: coarse) { .timeline .rh { width: 28px; } .timeline .rh.in { left: -14px; } .timeline .rh.out { right: -14px; } .timeline .rh::after { width: 14px; } .timeline .rtag { padding: 2px 8px; line-height: 20px; } }
/* نافذة الاختصارات */
.modal-box table.keys { width: 100%; border-collapse: collapse; margin-top: 8px; }
.modal-box table.keys td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.modal-box table.keys td:first-child { width: 42%; white-space: nowrap; }
.modal-box kbd { font: 600 12px var(--mono); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 7px; }

/* تقدّم الرندر على بطاقة الكليب */
.card .th .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.45); }
.card .th .prog .bar { height: 100%; background: var(--accent); transition: width .4s; }
/* الجدار بالصور */
.tile .still { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.tile .tile-ctl { display: flex; gap: 4px; }
/* القياس والأشكال بجانب المعاينة */
.rfside { padding: 10px; }
.rfside .rfbar { margin-bottom: 8px; }
.rfside .rfprevwrap { margin: 6px 0; }
.rfside .rftools { margin-top: 8px; }

/* الشكل فوق المعاينة وأشكال السبليت عموداً بجانبها */
.rfmodes { margin: 6px 0 8px; }
.rfmodes .modes { gap: 6px; }
.rfmodes .modebtn { padding: 6px 8px; }
.rfmodes .modebtn b { font-size: 13px; }
.rfmodes .modebtn span { font-size: 11px; }
.rfprevrow { display: flex; gap: 8px; align-items: flex-start; }
.rfprevrow .panel { flex: 1; min-width: 0; }
.shapes.col { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 0 0 auto; }
.shapes.col .btn.shape { justify-content: flex-start; padding: 6px 8px; font-size: 12px; white-space: nowrap; }

/* ---- إعادة ترتيب مساحة القصّ (٧ أيلول): الفيديو بقدر ما يسمح الارتفاع، اليمين يأخذ الباقي، والتايم لاين بعرض الصفحة ---- */
.cl-body.clip-layout { grid-template-columns: auto minmax(360px, 1fr); align-items: start; padding-bottom: 0; }
.cl-canvas { padding: 0; border: 0; background: transparent; width: fit-content; }
.cl-canvas .ed-video { max-width: min(100%, calc((100vh - 470px) * 16 / 9)); min-width: 520px; }
.cl-bottom { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cl-bottom .transport { margin: 6px 0 0; }
.cl-right .panel.rfside .rfprev { max-height: calc(100vh - 470px); }
@media (max-width: 1100px) { .cl-body.clip-layout { grid-template-columns: 1fr; } .cl-canvas { width: auto; } .cl-canvas .ed-video { min-width: 0; max-width: 100%; } }

/* ---- ثلاثة أعمدة: إعدادات | فيديو | حيّ+نصّ ---- */
:root { --workh: calc(100vh - 470px); }
.cl-body.clip-layout.cl3 { grid-template-columns: minmax(250px, 300px) auto minmax(240px, 1fr); align-items: start; gap: 10px; }
.cl-col { max-height: var(--workh); overflow: auto; min-width: 0; }
.cl-col .panel { margin-bottom: 8px; }
.cl-canvas .ed-video { max-width: min(100%, calc(var(--workh) * 16 / 9)); min-width: 480px; }
/* المعاينة صغيرة (كانت كبيرة جداً) */
.rfside .rfprev { max-height: 200px; }
.rfside .rfprevwrap { margin: 4px 0; }
.rfside h3 { font-size: 13px; margin: 0 0 4px; }
.rfside .rfbar { margin-bottom: 6px; }
.rfside .rfbar select { max-width: 100%; }
.cl-side .pip { margin-bottom: 8px; }
.cl-side .pip .pip-wrap { max-height: 150px; }
.cl-side .cl-transcript .tlist { max-height: calc(var(--workh) - 230px); min-height: 120px; overflow: auto; }
.cl-side .cl-transcript h3 { font-size: 13px; margin: 0 0 4px; }
@media (max-width: 1100px) { .cl-body.clip-layout.cl3 { grid-template-columns: 1fr; } .cl-col { max-height: none; } .cl-canvas .ed-video { min-width: 0; max-width: 100%; } }

/* ---- شبكة القصّ النهائية: [إعدادات | فيديو | حيّ+نصّ بكامل الارتفاع] والتايم لاين تحت الأوّلين ---- */
.cl-grid { display: grid; grid-template-columns: minmax(250px, 300px) auto minmax(340px, 520px); grid-template-rows: auto auto; gap: 10px; padding: 12px 14px; align-items: start; }
.cl-grid .cl-right { grid-column: 1; grid-row: 1; }
.cl-grid .cl-left { grid-column: 2; grid-row: 1; }
.cl-grid .cl-side { grid-column: 3; grid-row: 1 / span 2; max-height: calc(100vh - 130px); }
.cl-grid .cl-bottom { grid-column: 1 / span 2; grid-row: 2; padding: 0; }
.cl-side .pip .pip-wrap { max-height: 220px; }
.cl-side .cl-transcript .tlist { max-height: calc(100vh - 470px); }
@media (max-width: 1100px) { .cl-grid { grid-template-columns: 1fr; } .cl-grid .cl-right, .cl-grid .cl-left, .cl-grid .cl-side, .cl-grid .cl-bottom { grid-column: 1; grid-row: auto; max-height: none; } }

/* ---- شبكة القصّ بفواصل + درج يمين ---- */
.cl-grid2 { --sidew: 420px; --workh: 420px; display: grid; grid-template-columns: minmax(0, 1fr) 8px var(--sidew); grid-template-rows: var(--workh) 8px auto; gap: 0 4px; padding: 10px 14px 14px; align-items: stretch; }
.cl-grid2 .cl-left { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
.cl-grid2 .cl-canvas { width: 100%; height: var(--workh); display: flex; align-items: flex-start; justify-content: center; }
.cl-grid2 .cl-canvas .ed-video { min-width: 0; max-width: min(100%, calc(var(--workh) * 16 / 9)); max-height: var(--workh); }
.cl-grid2 .cl-vsplit { grid-column: 2; grid-row: 1; cursor: col-resize; border-radius: 4px; background: transparent; }
.cl-grid2 .cl-vsplit:hover, .cl-grid2 .cl-hsplit:hover { background: rgba(127,127,127,.35); }
.cl-grid2 .cl-side { grid-column: 3; grid-row: 1; max-height: var(--workh); overflow: auto; }
.cl-grid2 .cl-hsplit { grid-column: 1 / span 3; grid-row: 2; cursor: row-resize; border-radius: 4px; }
.cl-grid2 .cl-bottom { grid-column: 1 / span 3; grid-row: 3; padding: 0; }
.cl-side .cl-transcript .tlist { max-height: calc(var(--workh) - 250px); }
.cl-drawer { position: fixed; top: 52px; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: var(--panel); border-inline-start: 1px solid var(--border); box-shadow: -16px 0 48px rgba(0,0,0,.35); z-index: 40; display: flex; flex-direction: column; }
.cl-drawer-head { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.cl-drawer-tabs { display: flex; gap: 6px; }
.cl-drawer-body { padding: 12px; overflow: auto; flex: 1; }
.cl-drawer .rfprev { max-height: 340px; }
.cl-drawer .panel { border: 0; padding: 0; margin: 0 0 12px; background: transparent; }
.cl-drawer .rftools { margin: 0; }
/* ١٥ أيلول ٢٠٢٦: الدرج يحجز مكانه بدل أن يغطّي الأزمنة المتأخّرة من التايم لاين (أي OUT).
   الحشو فيزيائي لأن الدرج نفسه مثبّت على اليمين الفيزيائي (right: 0) والصفحة rtl. تحت ١١٠٠px يبقى السلوك القائم. */
/* 15 Sep 2026: the reservation is clamped to the free space instead of being a flat 440px.
   Measured with the drawer open: a flat 440px left the work column 376px at a 1280px window and 246px at
   1150px, and the transport's centre row (IN … OUT: 409px, and it cannot wrap) then spilled out of it.
   The work column needs ~420px, and everything else on the page costs ~460px (page padding, the splitter
   and the 420px transcript column) — hence 900px: below that window width the reservation gives way, and
   at and above it the drawer still reserves its full width and covers nothing of the timeline.
   Measured after the change (window / reserved / work column / transport overflow):
   2000/440/1096/0 · 1600/440/696/0 · 1400/440/496/0 · 1280/380/436/0 · 1150/250/444/0. */
.cl-wrap.drawer-open { padding-right: min(440px, max(0px, 100vw - 900px)); }
@media (max-width: 1100px) { .cl-grid2 { grid-template-columns: 1fr; grid-template-rows: auto; } .cl-grid2 .cl-left, .cl-grid2 .cl-side, .cl-grid2 .cl-bottom { grid-column: 1; grid-row: auto; max-height: none; } .cl-grid2 .cl-vsplit, .cl-grid2 .cl-hsplit { display: none; } .cl-grid2 .cl-canvas { height: auto; } .cl-grid2 .cl-canvas .ed-video { max-width: 100%; max-height: none; } }

/* النصّ يمتدّ إلى الأسفل بكامل العمود، والتايم لاين تحت الفيديو فقط (طلب المستخدم) */
.cl-grid2 .cl-side { grid-row: 1 / span 3; max-height: none; align-self: stretch; display: flex; flex-direction: column; }
.cl-grid2 .cl-side .cl-transcript { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cl-grid2 .cl-side .cl-transcript .tlist { flex: 1; max-height: none; min-height: 160px; overflow: auto; }
.cl-grid2 .cl-vsplit { grid-row: 1 / span 3; }
.cl-grid2 .cl-hsplit { grid-column: 1; }
.cl-grid2 .cl-bottom { grid-column: 1; }
.cl-grid2 { align-items: stretch; grid-template-rows: var(--workh) 8px auto; }
.cl-grid2 .cl-side { max-height: calc(100vh - 110px); }

/* الاستوديو: عمودان بفاصل قابل للسحب */
.studio.resizable { --sidew: 420px; grid-template-columns: minmax(0, 1fr) 8px var(--sidew); gap: 0 4px; }
.studio .st-vsplit { cursor: col-resize; border-radius: 4px; touch-action: none; }
.studio .st-vsplit:hover { background: rgba(127,127,127,.35); }
.cl-grid2 .cl-vsplit, .cl-grid2 .cl-hsplit { touch-action: none; }
@media (max-width: 900px) { .studio.resizable { grid-template-columns: 1fr; } .studio .st-vsplit { display: none; } }

/* ---- الهاتف (≤ 900px): مبسّط للمشاهدة والقصّ الأساسي ---- */
@media (max-width: 900px) {
  .topbar { gap: 8px; padding: 6px 10px; flex-wrap: nowrap; overflow-x: auto; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 6px 10px; }
  .studio { height: auto; }
  /* القصّ: الفيديو ثم التحكّم ثم الشريط ثم النصّ؛ لا حيّ صغير ولا فواصل */
  .cl-grid2 { padding: 8px; gap: 8px; display: flex; flex-direction: column; }
  .cl-grid2 .cl-left { order: 1; }
  .cl-grid2 .cl-bottom { order: 2; }
  .cl-grid2 .cl-side { order: 3; max-height: none; display: block; }
  .cl-grid2 .cl-side .pip { display: none; }
  .cl-grid2 .cl-canvas { height: auto; }
  .cl-grid2 .cl-canvas .ed-video { max-width: 100%; max-height: none; min-width: 0; }
  .cl-side .cl-transcript .tlist { max-height: 40vh; }
  .ed-top { flex-wrap: wrap; gap: 6px; }
  .transport { display: flex; flex-direction: column; gap: 6px; }
  .transport .center { flex-wrap: wrap; }
  .transport .play { width: 44px; height: 40px; }
  .transport .side { flex-wrap: wrap; }
  .transport .side.end { position: sticky; bottom: 0; background: var(--bg); padding: 6px 0; z-index: 5; border-top: 1px solid var(--border); }
  .timeline { height: 118px; }
  .timeline .thumb { top: 20px; height: 60px; }
  .timeline .rec { top: 90px; }
  .timeline .seg { top: 100px; height: 16px; font-size: 10px; }
  .tl-tools { gap: 4px; }
  .tl-tools .winrange, .tl-tools .goeq { display: none; }
  .tl-tools .goinput { width: 64px; }
  .ovbar { height: 24px; }
  .inout { grid-template-columns: 1fr 1fr; }
  .inout .box img { display: none; }
  .cl-drawer { width: 100vw; max-width: 100vw; top: 0; }
  .tlprev { display: none; }
  .btn.big { padding: 10px 14px; }
}
@media (max-width: 600px) {
  .tl-tools .sep { display: none; }
  .ed-top .ed-sep { display: none; }
  .transport .center .btn.sm.icon { padding: 6px 7px; }
}

/* شريحة اسم المتحدّث (تظهر فقط حين قُرئ الاسم من شريط الاسم) */
.spk { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.35); border-radius: 999px; padding: 0 8px; margin-inline-end: 6px; line-height: 20px; vertical-align: middle; user-select: none; }

/* ---- البند ٨ (٩ أيلول ٢٠٢٦): طبقة خطّة المشاهد على التايم لاين ----
   أخضر شفيف فوق شريط الصور بلا حجبها ولا اعتراض السحب؛ الأصفر يبقى للمؤشّر وIN/OUT وحدهما.
   حدود المشاهد الداخلية خطّ رفيع، والشارة تظهر حين يتّسع المكان، وأدوار الكلام شريط متناوب تحتها. */
.timeline .planlay { position: absolute; inset: 0; pointer-events: none; }
.timeline .planlay[hidden] { display: none; }
.timeline .plan-sc { position: absolute; top: 21px; height: 12px; border-radius: 3px; background: rgba(52,211,153,.18); box-shadow: inset 0 0 0 1px rgba(52,211,153,.45); overflow: hidden; }
.timeline .plan-sc.on { background: rgba(52,211,153,.40); box-shadow: inset 0 0 0 1px var(--ok); }
.timeline .plan-lbl { display: block; font-size: 9.5px; font-weight: 700; line-height: 12px; text-align: center; white-space: nowrap; overflow: hidden; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.timeline .plan-edge { position: absolute; top: 19px; bottom: 0; width: 2px; background: rgba(52,211,153,.75); }
/* ٩ أيلول ٢٠٢٦ (البند ٤): أدوار الكلام نزلت إلى نطاق خالٍ (46–50) — كانت تحت علامات القوالب .ltmark (30–44) فتختفي */
.timeline .plan-turn { position: absolute; top: 46px; height: 4px; border-radius: 2px; background: rgba(52,211,153,.16); }
.timeline .plan-turn.alt { background: rgba(52,211,153,.34); }
/* أوائل الجمل داخل النافذة المعروضة (المرحلة ٣): علامة رفيعة أسفل الشريط */
.timeline .segstart { position: absolute; bottom: 0; height: 9px; width: 1px; background: rgba(45,212,191,.6); pointer-events: none; }

/* ---- 15 Sep 2026 (items 1 and 2): one action row, and a transport that cannot spill over its neighbours ----
   The regression: `.cl-wrap.drawer-open { padding-right: 440px }` narrows .cl-bottom, and the transport's
   end column is a bare `1fr` track holding the action buttons, so at 2000px with the drawer open the column
   was 335px for 460px of buttons: they wrapped into a stack that sat over the transcript column.
   Fix in two parts: the buttons now live in their own wrapping row (.cl-actions) inside .cl-bottom, and the
   transport's flexible columns may shrink (minmax(0,1fr)) so grid content can never overflow the page. */
/* ---- 15 Sep 2026 (item 3): a transport that gives way instead of sliding over its neighbour ----
   Measured on the clip screen, drawer open, six widths (px of overlap between control boxes):
     2000 · 0 | 1600 · 0 | 1400 · 3 overlaps (×2/×1.5/×1 under OUT, 41×17px) | 1280 · 4 | 1150 · 4 | 1000 · 0
   Cause: the transport was a three-column grid `minmax(0,1fr) auto minmax(0,1fr)` whose third track had
   been emptied when the action buttons moved out — it still took a third of the free space — and the
   flexible tracks may shrink below their content. At 1400 with the drawer reserving 440px the work column
   is 496px: the centre row takes 409px of it and the two 1fr tracks got ~35px each, so .side spilled out
   of its track and landed on OUT. A grid track clips nothing, so the spill was a real overlap.
   Now it is a wrapping flex: .side asks for 280px and gives way to its own line when the line is too
   short, and .center may wrap too, so no arrangement can put one control on top of another. */
@media (min-width: 901px) {
  .cl-bottom .transport { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; }
  .cl-bottom .transport > .side { flex: 1 1 280px; min-width: 0; }
  .cl-bottom .transport > .center { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
}
/* The user's own suggestion for the narrow window: shrink the controls rather than let them pile up.
   Only padding and the mono size of the rate buttons — no colour, no layout rule. */
@media (min-width: 901px) and (max-width: 1500px) {
  .cl-bottom .transport .btn.sm.icon { padding: 5px 7px; }
  .cl-bottom .transport .rates .btn.rate { padding: 3px 5px; font-size: 11px; }
  .cl-bottom .transport .play { width: 46px; }
  .cl-actions .btn.sm { padding: 5px 8px; }
}
/* The action row wraps group by group: scene tools, then the outputs — not one button stranded alone. */
.cl-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 6px 0 0; min-width: 0; }
.cl-actions .act-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cl-actions .act-grp.end { margin-inline-start: auto; }
.cl-actions .spacer { min-width: 12px; }
/* The removed "start the clip here" button was the only sign that OUT is following the playhead; IN carries it
   now with the same live colour .btn.rec.on used — no new colour decision. */
.btn.iobtn.on { background: var(--live); color: #fff; border-color: var(--live); }
/* Phone: the cut button stays reachable, exactly as `.transport .side.end` kept it before the row moved. */
@media (max-width: 900px) { .cl-actions { position: sticky; bottom: 0; background: var(--bg); padding: 6px 0; z-index: 5; border-top: 1px solid var(--border); } }

/* ---- 15 Sep 2026 (item 2): tracking has to be visible while the clip plays, not after the stop ----
   The band (.range.tracking, called .range.rec until round four) was the only sign and it is OUT−IN wide:
   2px at the press of IN, growing 3.55px/s on a five-minute window, under a 22% wash over the thumbnails
   — and, as round four then measured, drawn below the strip entirely. So: the strip itself carries a ring
   and a red flag from the first instant, neither of which depends on the band's width, and the band's
   own wash goes up so it reads over the thumbnails once it is wide. Same red as before (#dc2626, the
   colour already decided for this state) — louder, not different; the light and dark palettes are untouched. */
.tlwrap { position: relative; min-width: 0; }
.tlwrap .tlrec { position: absolute; top: 3px; left: 8px; z-index: 6; pointer-events: none;   /* physical left on purpose:
    time on this strip runs left to right whatever the page direction, and the right edge is the live edge the playhead
    is heading for — the same reason .tlhover-t and .head .htag are placed with `left` too. */
  font: 700 11.5px var(--font); color: #fff; background: #dc2626; border-radius: 999px; padding: 1px 9px;
  box-shadow: 0 1px 8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.25); white-space: nowrap; }
.tlwrap .tlrec[hidden] { display: none; }
.timeline.tracking { box-shadow: inset 0 0 0 2px #dc2626; }
.timeline .range.tracking { background: rgba(220,38,38,.34); }

/* ---- 15 Sep 2026 (round four): where IN was put, readable from the first instant ----
   At the press of IN the band is OUT−IN wide, i.e. 2px, so .rh.in, .rh.out and both their tags land on
   the same pixel and nothing says where the clip started; the user saw the strip turn red but not the
   start point. While tracking — and only while tracking — the IN edge becomes a full-height line with
   its tag above everything, and the OUT tag steps aside: during tracking OUT *is* the playhead, which
   already carries its own yellow flag and time card, so a second chip on the same pixel was the noise
   rather than the signal. Nothing is added outside the tracking state, and the colour is the same
   #dc2626 this state already owns — made legible, not changed. */
.timeline .range.tracking .rh.in::after { top: 0; bottom: 0; left: 6px; width: 3px; border-radius: 0; background: #dc2626; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.timeline .range.tracking .rtag.in { z-index: 7; box-shadow: 0 1px 6px rgba(0,0,0,.55); }
.timeline .range.tracking .rtag.out { display: none; }