/* OmniPost - desktop-first publishing console.
   Layout: fixed rail on the side, one wide workspace, a publish bar that stays
   put while you scroll. Everything is built on a 4px rhythm and one accent. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* This page is already dark, and says so.
     Chrome's automatic dark mode rewrites the colours of any page it decides
     is a light one, and it decides by guessing. On a page that was designed
     dark it inverts what is already correct: text loses contrast, the video
     well turns pale, and the accent shifts to a colour nobody chose. Declaring
     the scheme is the switch that turns that guessing off - the browser then
     knows there is nothing to fix, and it also gives native form controls and
     scrollbars their dark styling instead of white boxes. */
  color-scheme: dark;

  /* Charcoal, and deliberately neutral - no blue in it.
     The old palette was navy, which tints everything it surrounds. That is a
     real problem for this tool and not a matter of taste: the thing on screen
     is footage, and a blue surround shifts how its colour reads. Editing
     rooms are grey for the same reason. */
  --bg: #131315;
  --bg-grad-a: #161618;
  --bg-grad-b: #131315;
  --surface: #1c1c1f;
  --surface-2: #202024;
  --surface-3: #26262b;
  --line: #2b2b31;
  --line-soft: #232327;

  /* Where video goes. Darker than any panel, so the picture is the brightest
     thing on screen and nothing frames it with a lighter edge. */
  --well: #0e0e10;

  --ink: #ececee;
  --ink-2: #b6b6bc;
  --muted: #94949a;

  /* Lilac carries the only colour in the interface.
     It earns that by staying out of the footage: cars, headlights and sunsets
     are red, amber and blue, so an amber accent competes with the picture for
     the eye while lilac never appears in it. */
  --accent: #c9b8f7;
  --accent-2: #a78bfa;
  --accent-ink: #221a33;
  --accent-soft: rgba(201, 184, 247, .13);
  --accent-line: rgba(201, 184, 247, .3);

  --ok: #7fd4a8;
  --ok-soft: rgba(127, 212, 168, .12);
  --warn: #e8b66a;
  --warn-soft: rgba(232, 182, 106, .12);
  --err: #f08c8c;
  --err-soft: rgba(240, 140, 140, .12);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;

  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 32px 64px -24px rgba(0, 0, 0, .75);
  --shadow-up: 0 -6px 28px -8px rgba(0, 0, 0, .7);

  --rail: 264px;
  --page: 1180px;
  --gap: 20px;
  --ease: cubic-bezier(.22, .68, .36, 1);
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b) 42%) fixed;
  color: var(--ink);
  /* Tajawal draws Arabic as Arabic rather than bolting it onto a Latin face,
     and its even widths keep a right-to-left line steady. The rest of the
     stack is what renders while it downloads, and if it never arrives. */
  font: 15px/1.6 Tajawal, "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", sans-serif;
  letter-spacing: .1px;
}

/* Digits that line up in a column.
   Times, sizes and percentages are read against each other - 04:12 above
   11:07 - and proportional digits make that column ragged. */
.num, .when, .meta, .tl-time, code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* The two glows are gone rather than recoloured.
   They were a blue wash across the whole page, which is exactly the tint this
   palette exists to remove. A flat surround is also the honest background for
   judging a frame. */

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.2px; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }

/* A class that sets `display` outranks the browser's own [hidden] rule, so an
   element toggled with .hidden = true stays on screen. Settle it once here. */
[hidden] { display: none !important; }

::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #3a3a42; background-clip: content-box; }

/* ------------------------------------------------------------------ rail -- */
.topbar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rail);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--surface);
  border-inline-end: 1px solid var(--line-soft);
  z-index: 40;
}

.brand { display: flex; align-items: flex-start; gap: 12px; }

.brand .logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 21px;
  box-shadow: 0 8px 22px -8px var(--accent);
  overflow: hidden;
}

.brand .logo img { width: 100%; height: 100%; display: block; }

.brand h1 { font-size: 19px; }
.brand p { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.topbar .row {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}

/* Section links sit above the state cluster so the rail reads top-to-bottom. */
.rail-nav { display: flex; flex-direction: column; gap: 4px; }

.rail-nav a {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.rail-nav a:hover { background: var(--surface-2); color: var(--ink); }
.rail-nav a.on { background: var(--accent-soft); color: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge.live { color: var(--ok); border-color: rgba(127, 212, 168, .3); background: var(--ok-soft); }
.badge.live::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.badge.demo { color: var(--warn); border-color: rgba(232, 182, 106, .3); background: var(--warn-soft); }
.badge.demo::before { background: var(--warn); }

.lang-btn,
.topbar .link {
  appearance: none;
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}

.lang-btn:hover,
.topbar .link:hover { background: var(--surface-3); color: var(--ink); border-color: #3a3a42; }

/* ------------------------------------------------------------- workspace -- */
main {
  margin-inline-start: var(--rail);
  max-width: var(--page);
  padding: 40px 44px 132px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.card {
  position: relative;
  padding: 26px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  /* Flat. The gradient was a decoration that made every card slightly brighter
     at the top than the card above it, so a column of them read as uneven
     lighting rather than as one surface. */
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card > h2 { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; font-size: 16.5px; }

.step {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head h2 { font-size: 16.5px; }

.lead { margin-bottom: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.hint, .meta-line, .sub { color: var(--muted); font-size: 12.5px; line-height: 1.6; }

.note {
  margin: 14px 0;
  padding: 13px 15px;
  border-radius: var(--r);
  border: 1px solid rgba(232, 182, 106, .28);
  border-inline-start: 3px solid var(--warn);
  background: var(--warn-soft);
  color: #e9cb9a;
  font-size: 13.5px;
  line-height: 1.7;
}

/* -------------------------------------------------------------- dropzone -- */
.dropzone {
  display: grid;
  place-items: center;
  padding: 46px 24px;
  border-radius: var(--r-lg);
  border: 1.5px dashed #33333a;
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(201, 184, 247, .05), transparent 70%),
    var(--surface);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}

/* Once a clip is loaded the dropzone is no longer the subject of the page, so
   it gives its height back. It stays rather than disappearing: without it there
   is no way to swap clips without clearing the current one first. */
.dropzone.loaded { padding: 16px 20px; }
.dropzone.loaded .dz-icon { font-size: 20px; }
.dropzone.loaded .dz-idle { grid-auto-flow: column; align-items: center; gap: 11px; }
.dropzone.loaded .dz-idle span { display: none; }

.dropzone:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.dropzone.drag { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }

.dz-idle { display: grid; justify-items: center; gap: 7px; text-align: center; }

.dz-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 19px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: 27px;
}

.dz-idle strong { font-size: 15.5px; font-weight: 600; }
.dz-idle span { color: var(--muted); font-size: 12.5px; }

.progress { margin-top: 16px; }
.bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s var(--ease);
}
.progress-text { margin-top: 8px; color: var(--muted); font-size: 12.5px; }

/* The stage: the clip, and what is true about it, side by side. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* The well is darker than every panel around it, so the picture is the
   brightest thing on screen. A lighter frame would set the eye's white point
   above the footage and every shot would read as flat. */
.stage-well {
  background: var(--well);
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.stage-well video { width: 100%; max-height: 360px; display: block; background: var(--well); }

.stage-facts { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.stage-facts .name { font-size: 15px; font-weight: 600; word-break: break-word; }

.timecode { margin-top: 14px; }
.timecode .num {
  display: block;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--accent);
  line-height: 1.1;
}
.timecode span + span { font-size: 11.5px; color: var(--muted); }

.stage-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.stage-actions .size { color: var(--muted); font-size: 12.5px; }
.stage-actions .link { margin-inline-start: auto; }

/* One column below a laptop. Side by side on a phone would leave the video
   too small to judge and the timecode too narrow to read. */
@media (max-width: 860px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stage-facts { justify-content: flex-start; }
  .timecode { margin-top: 8px; }
  .timecode .num { font-size: 24px; }
}

#library-wrap { margin-top: 20px; }

.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.lib-item {
  position: relative;
  padding: 12px 13px;
  padding-inline-end: 32px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}

.lib-item:hover { border-color: #3a3a42; background: var(--surface-2); }
.lib-item.active { border-color: var(--accent-line); background: var(--accent-soft); }

.lib-item .name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-item .meta { color: var(--muted); font-size: 11.5px; }

.lib-item .del {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}

.lib-item:hover .del { opacity: 1; }
.lib-item .del:hover { background: var(--err-soft); color: var(--err); }

/* ------------------------------------------------------------- platforms -- */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px; }

.platform {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 17px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}

.platform:hover { border-color: #3a3a42; transform: translateY(-1px); }

.platform.selected {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), rgba(201, 184, 247, .04));
  box-shadow: inset 0 0 0 1px rgba(201, 184, 247, .14);
}

.platform.off { opacity: .5; cursor: not-allowed; }
.platform.off:hover { transform: none; border-color: var(--line-soft); }

.platform input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: inherit;
}

.platform > span { display: grid; gap: 3px; min-width: 0; }

.p-name { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.p-name .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1.5px solid var(--muted); }
.platform.is-live .p-name .dot { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.p-detail { color: var(--muted); font-size: 12.5px; }

.p-warn {
  display: block;
  margin-top: 4px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  color: #e9cb9a;
  font-size: 11.5px;
  line-height: 1.55;
}

.connect {
  justify-self: start;
  margin-top: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s var(--ease);
}

.connect:hover { background: rgba(201, 184, 247, .2); }

.checks { display: grid; gap: 8px; margin-top: 14px; }

/* These lines say what the tool is about to do, so they are quiet. The amber
   is kept for `.bad` - the one case the tool cannot handle by itself. */
.check {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--line-soft);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.check b { color: var(--ink); font-weight: 600; }

.check.bad {
  border-color: rgba(232, 182, 106, .26);
  background: var(--warn-soft);
  color: #e9cb9a;
}

.check.bad b { color: #e9cb9a; }

#platform-hint:not(:empty) { margin-top: 12px; }

/* ---------------------------------------------------------------- fields -- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

.field { display: grid; gap: 7px; margin-bottom: 14px; }
.grid .field { margin-bottom: 0; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field > span small { color: var(--muted); font-weight: 500; }

input[type="text"],
input[type="password"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}

input::placeholder, textarea::placeholder { color: #6c6c74; }
input:hover, select:hover, textarea:hover { border-color: #3a3a42; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { resize: vertical; min-height: 96px; line-height: 1.7; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 34px;
}

html[dir="rtl"] select {
  background-position: 18px 50%, 13px 50%;
  padding-inline-end: 13px;
  padding-inline-start: 34px;
}

/* Chrome draws its own day/month/year hints using the browser language, and in
   Arabic they come out mirrored inside an LTR field. Pin the field, then hide
   the hint while empty and show our own (see .dt-ph). */
input[type="datetime-local"], input[type="date"], input[type="time"] {
  direction: ltr;
  text-align: start;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.72) sepia(.2) saturate(3) hue-rotate(155deg);
  cursor: pointer;
}

.dt-wrap { position: relative; display: block; }

.dt-wrap .dt-ph {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 14px;
  display: flex;
  align-items: center;
  color: #6c6c74;
  font-size: 14px;
  pointer-events: none;
}

.dt-wrap input:not(.has-value)::-webkit-datetime-edit { opacity: 0; }
.dt-wrap input.has-value + .dt-ph { display: none; }

.counter { color: var(--muted); font-size: 11.5px; }

.copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}

.copy-row code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: none; }

code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-3);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- buttons -- */
.primary {
  appearance: none;
  padding: 12px 26px;
  border: none;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px var(--accent);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}

.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px var(--accent);
  filter: brightness(1.06);
}

.primary:active:not(:disabled) { transform: translateY(0); }
.primary:disabled { background: var(--surface-3); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.primary.small { padding: 9px 18px; font-size: 13.5px; }
a.primary { display: inline-block; }

.ghost {
  appearance: none;
  padding: 9px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.ghost:hover { background: var(--surface-3); color: var(--ink); }

.link {
  appearance: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color .16s var(--ease);
}

.link:hover { color: #e2d8fc; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--err); }
.link.danger:hover { color: #f6c6c6; }

.actions {
  position: sticky;
  bottom: 22px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(28, 28, 32, .94);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.actions .hint { margin: 0; }

/* ---------------------------------------------------------- tiktok panel -- */
.tt-panel {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
}

.tt-account {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.tt-account img { width: 38px; height: 38px; border-radius: 50%; }
.tt-account .who { font-weight: 600; }
.tt-account .handle { color: var(--muted); font-size: 13px; }

.tt-group { margin-bottom: 16px; }
.tt-group .lbl { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tt-group .req { color: var(--err); }
.tt-inline { display: flex; flex-wrap: wrap; gap: 8px; }

.tt-opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}

.tt-opt:hover { border-color: #3a3a42; }
.tt-opt.picked { border-color: var(--accent-line); background: var(--accent-soft); }
.tt-opt.off { opacity: .5; cursor: not-allowed; }
.tt-opt input { accent-color: var(--accent); margin-top: 3px; }
.tt-opt .hint { display: block; margin-top: 2px; }

.tt-legal {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.tt-error { padding: 11px 13px; border-radius: var(--r-sm); background: var(--err-soft); color: var(--err); font-size: 13px; }

/* ------------------------------------------------------------- overrides -- */
.overrides { display: grid; gap: 9px; margin-top: 16px; }

.override { border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--surface); overflow: hidden; }
.override > summary { padding: 12px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; transition: background .16s var(--ease); }
.override > summary::-webkit-details-marker { display: none; }
.override > summary:hover { background: var(--surface-2); }
.override[open] > summary { border-bottom: 1px solid var(--line-soft); }
.override .body { padding: 15px; }

.custom {
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ jobs -- */
.jobs { display: grid; gap: 11px; }

.job { padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--surface); }
.job-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.job-head strong { font-size: 14.5px; }
.job-head .when { margin-inline-start: auto; color: var(--muted); font-size: 12px; }

.tasks { display: flex; flex-wrap: wrap; gap: 8px; }

.task {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.task.done { border-color: rgba(127, 212, 168, .32); background: var(--ok-soft); color: var(--ok); }
.task.failed { border-color: rgba(240, 140, 140, .32); background: var(--err-soft); color: var(--err); }
.task.running { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.task .link { font-size: 12.5px; }

.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.err-line {
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--err);
  background: var(--err-soft);
  color: #f3b6b6;
  font-size: 12.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ fold -- */

/* A group of controls that is usually left alone.
   Distinct from `.explain` on purpose: that hides words, this hides controls,
   and the two must not look alike or a closed fold reads as a paragraph and
   nobody opens it. So this one is a full-width bar with a chevron - the shape
   the eye already knows means "there is more under here". */
.fold {
  margin: 14px 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
}

.fold > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--r);
  transition: color .16s var(--ease), background .16s var(--ease);
}

.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }

/* Drawn rather than typed: a text arrow inherits the page's direction and
   flips with it, so the same character points at the heading in Arabic and
   away from it in English. */
.fold > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s var(--ease);
  margin-block-start: -3px;
}

.fold[open] > summary::before { transform: rotate(45deg); margin-block-start: 1px; }
.fold > summary:hover { color: var(--ink); background: var(--surface-2); }
.fold[open] > summary { color: var(--ink); border-end-start-radius: 0; border-end-end-radius: 0; }

.fold-body { padding: 2px 15px 15px; border-top: 1px solid var(--line-soft); }
.fold-body > .grid:first-child, .fold-body > .field:first-child { margin-top: 13px; }

/* The last thing on the card, and the quietest. */
.quiet-row { margin-top: 16px; }

/* --------------------------------------------------------------- explain -- */

.explain { margin: 10px 0 14px; }

.explain > summary {
  display: inline-block;
  width: fit-content;
  padding: 3px 0;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px dotted var(--line);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}

/* Both spellings: WebKit still needs its own pseudo-element to drop the arrow. */
.explain > summary::-webkit-details-marker { display: none; }
.explain > summary::marker { content: ""; }

.explain > summary:hover { color: var(--ink-2); border-bottom-color: var(--accent-line); }

.explain[open] > summary { color: var(--ink-2); margin-bottom: 8px; }

/* The prose inside has already spaced itself; a second margin from the wrapper
   would open a gap the closed state does not have, so the page would shift. */
.explain > .lead, .explain > .note { margin-top: 0; }

/* ------------------------------------------------------------ blog studio -- */

.lang-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.lang-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; cursor: pointer; user-select: none;
}
.lang-chip:hover { border-color: var(--accent-line); }
.lang-chip input { margin: 0; }
/* `.on` as well as `:has()`: the tick is authoritative state held in JS, and
   the class carries it even where `:has()` is unsupported. */
.lang-chip:has(input:checked), .lang-chip.on {
  border-color: var(--accent-line); background: var(--accent-soft);
}

.kw-field { margin-top: 10px; }
.kw-field > span { font-size: 12.5px; }

/* The article renders on a white page, because that is where it is going. The
   studio is dark and previewing a blog post on a dark background would be
   previewing something the reader never sees. */
.post-preview {
  width: 100%; height: 460px; margin: 10px 0 4px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
}

/* A note that is not a tip. `.note` is already amber, so an amber warning next
   to an amber instruction reads as one long block of the same voice - and the
   one that says "this is your password" has to be the one that stands out. */
.note.secret {
  border-color: rgba(240, 140, 140, .3);
  border-inline-start-color: var(--err);
  background: var(--err-soft);
  color: #f3b6b6;
}

.job-scheduled { margin-top: 9px; color: var(--warn); font-size: 12.5px; }
.empty { padding: 38px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ----------------------------------------------------------------- toast -- */
.toast {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  z-index: 100;
  max-width: 380px;
  padding: 13px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(38, 38, 43, .97);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  animation: toast-in .22s var(--ease);
}

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.toast.ok { border-color: rgba(127, 212, 168, .4); color: var(--ok); }
.toast.err { border-color: rgba(240, 140, 140, .4); color: var(--err); }

/* ----------------------------------------------------------- brand marks -- */
.p-logo { width: 17px; height: 17px; flex: none; fill: currentColor; vertical-align: -3px; }

.platform[data-key="youtube"]   .p-logo { color: #ff0033; }
.platform[data-key="instagram"] .p-logo { color: #e1306c; }
.platform[data-key="tiktok"]    .p-logo { color: #ffffff; }
.platform[data-key="facebook"]  .p-logo { color: #0866ff; }
.platform[data-key="threads"]   .p-logo { color: #ffffff; }
.platform[data-key="blogger"]   .p-logo { color: #ff8000; }

.task[data-p="youtube"]   .p-logo { color: #ff0033; }
.task[data-p="instagram"] .p-logo { color: #e1306c; }
.task[data-p="facebook"]  .p-logo { color: #0866ff; }
.task[data-p="blogger"]   .p-logo { color: #ff8000; }

.task .p-logo { width: 14px; height: 14px; }
.override > summary .p-logo { width: 15px; height: 15px; opacity: .85; }

/* --------------------------------------------------------- settings page -- */
.steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 34px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
}

.tag { margin-inline-start: 8px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.tag.free { background: var(--ok-soft); color: var(--ok); }
.tag.paid { background: var(--err-soft); color: var(--err); }
.tag.cheapest { background: var(--accent-soft); color: var(--accent); }

.status { font-size: 12.5px; font-weight: 600; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.muted { color: var(--muted); }

.row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
main .row { margin-top: 14px; }

.toggle { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.toggle input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ============================================================ blog studio == */
.draft {
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  overflow: hidden;
}

.draft + .draft { margin-top: 10px; }

.draft-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.draft-head:hover { background: var(--surface-2); }
.draft-head strong { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; }
.draft-head .when { color: var(--muted); font-size: 12px; }

.draft-state {
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}

.draft-state.draft { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.draft-state.published { border-color: rgba(127, 212, 168, .32); background: var(--ok-soft); color: var(--ok); }
.draft-state.failed { border-color: rgba(240, 140, 140, .32); background: var(--err-soft); color: var(--err); }

/* The draggable timeline for one shot.
   The bar is the whole clip; the lit region is the shot. `touch-action: none`
   is not optional - without it a phone scrolls the page instead of moving the
   handle, which makes the whole control feel broken on the device it matters
   most on. */
.tl {
  position: relative;
  height: 40px;
  margin: 4px 0 10px;
  border-radius: 10px;
  background: var(--surface-2, #131c31);
  border: 1px solid var(--line-soft, #27324f);
  touch-action: none;
  user-select: none;
  cursor: pointer;
}

.tl-range {
  position: absolute; top: 0; bottom: 0;
  background: var(--accent-soft);
  border-inline: 2px solid var(--accent, #5b8cff);
  cursor: grab;
}

.tl-range:active { cursor: grabbing; }

/* Wide enough to catch a thumb: the visual edge is 2px, the target is 26. */
.tl-h {
  position: absolute; top: -4px; bottom: -4px;
  width: 26px;
  display: grid; place-items: center;
  cursor: ew-resize;
}

.tl-h::after {
  content: "";
  width: 6px; height: 26px;
  border-radius: 3px;
  background: var(--accent, #5b8cff);
  box-shadow: 0 0 0 3px rgba(14, 14, 16, .6);
}

/* Physical left/right, not logical. The page is RTL, but the bar is a clock:
   time runs left to right and the range is positioned with a physical `left`
   percentage. Logical properties would flip the handles and put the start of
   the shot on the end of the bar. */
.tl-h-a { left: -13px; }
.tl-h-b { right: -13px; }

/* Where the player currently is, so the bar and the video agree. */
.tl-play {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: #fff;
  opacity: .75;
  pointer-events: none;
}

.tl-time {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* What the model said it saw. Sits between the head and the editing body so
   it reads as a caption on the shot, not as part of the controls. */
.draft-why {
  padding: 0 16px 10px 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.draft-body { padding: 16px; border-top: 1px solid var(--line-soft); }
.draft-body textarea { min-height: 340px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

.draft-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.draft-actions .hint { margin-inline-start: auto; }

/* ================================================================ tablet == */
@media (max-width: 1080px) {
  :root { --rail: 0px; --gap: 16px; }

  .topbar {
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-inline-end: none;
    border-bottom: 1px solid var(--line-soft);
  }

  .brand p { display: none; }
  .rail-nav { flex-direction: row; gap: 6px; }
  .topbar .row { margin-top: 0; flex-direction: row; align-items: center; width: auto; }
  .lang-btn, .topbar .link { width: auto; }

  main { margin-inline-start: 0; padding: 24px 20px 130px; }
}

/* ================================================================= phone == */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .brand h1 { font-size: 17px; }
  .brand .logo { width: 36px; height: 36px; font-size: 18px; }
  .rail-nav { order: 3; width: 100%; }
  .rail-nav a { flex: 1; text-align: center; padding: 8px 10px; font-size: 12.5px; }
  .badge { padding: 6px 10px; font-size: 11.5px; }
  .lang-btn, .topbar .link { padding: 7px 11px; font-size: 12.5px; }

  main { padding: 16px 14px 128px; gap: 12px; }

  .card { padding: 18px 16px; border-radius: 14px; }
  .card > h2, .section-head h2 { font-size: 15.5px; }

  .dropzone { padding: 34px 16px; }
  .dz-icon { width: 52px; height: 52px; font-size: 23px; }
  .preview video { max-height: 260px; }

  /* One platform per row: taps are easier to hit than they are to aim. */
  .platforms { grid-template-columns: 1fr; gap: 9px; }
  .library { grid-template-columns: 1fr 1fr; }
  .lib-item .del { opacity: 1; }
  .grid { grid-template-columns: 1fr; gap: 12px; }

  /* The publish bar leaves the flow and pins to the bottom of the screen. */
  .actions {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    border-radius: 0;
    border-inline: none;
    border-bottom: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-up);
  }

  .actions .primary { width: 100%; padding: 15px; font-size: 16px; }
  .actions .hint { text-align: center; }

  .job { padding: 15px; }
  .job-head { flex-wrap: wrap; gap: 8px; }
  .job-head .when { margin-inline-start: 0; width: 100%; }

  .toast { inset-inline: 14px; inset-block-end: 96px; max-width: none; }

  .tt-panel { padding: 16px; }
  .tt-inline { flex-direction: column; }
  .tt-opt { width: 100%; }

  .draft-head { flex-wrap: wrap; }
  .draft-body textarea { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Taking a clip in by link, directly under the drop zone. */
.link-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.link-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
}

.link-row input:focus {
  outline: none;
  border-color: var(--accent-line);
}

.link-row button { flex: 0 0 auto; }

#link-note { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }