/* =========================================================================
   BMD — "cinematic factory" theme (v4.1)
   Loaded after app.css. Graphite and steel, plates with rivets, film-strip
   perforations, condensed cinema titles; YouTube red is the one accent and
   amber the signal lamp. Nothing moves on its own except the gears, and only
   while videos are actually being made (body.is-busy); with "reduce motion"
   on, nothing moves at all.
   ========================================================================= */
:root {
  --bg:          #0a0b0d;
  --surface-1:   #141619;
  --surface-2:   #1a1d21;
  --surface-3:   #22262b;
  --line:        #2a2e34;
  --line-strong: #3a3f47;
  --steel:       #8a929c;
  --steel-2:     #b9c0c8;
  --text:        #e8eaed;
  --text-dim:    #a0a6ae;
  --text-faint:  #6d737c;

  --accent:      #ff2b3d;            /* YouTube red */
  --accent-deep: #c8102e;
  --accent-soft: rgba(255, 43, 61, .13);
  --amber:       #f2a33a;
  --amber-soft:  rgba(242, 163, 58, .14);
  --ok:          #4cc38a;
  --ok-soft:     rgba(76, 195, 138, .13);
  --warn:        #f2a33a;
  --warn-soft:   rgba(242, 163, 58, .13);
  --bad:         #ff4d5a;
  --bad-soft:    rgba(255, 77, 90, .13);

  --r-lg: 12px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --rivet: radial-gradient(circle, #4d535b 0 1.5px, #1d2024 2.1px, transparent 2.7px);
  --perf: repeating-linear-gradient(90deg, transparent 0 9px, #050506 9px 17px);
  --plate: linear-gradient(180deg, #1b1e22 0%, #15171a 100%);
  --sidebar-w: 236px;
}

/* ---- canvas: graphite, vignette, a whisper of film grain ----------------- */
html { background: var(--bg); }
body {
  background:
    radial-gradient(1400px 700px at 75% -25%, rgba(255,43,61,.075), transparent 60%),
    radial-gradient(1000px 800px at 0% 110%, rgba(242,163,58,.04), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.011) 0 2px, transparent 2px 7px),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}
body::before {            /* static grain + vignette: one fixed layer, never animated */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 300;
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.42) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07;
}
::selection { background: rgba(255,43,61,.35); color: #fff; }
* { scrollbar-color: #3a3f47 transparent; scrollbar-width: thin; }

/* ---- icons ---------------------------------------------------------------- */
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.icon-btn { padding: 4px 7px; }
.icon-btn .ic { width: 15px; height: 15px; }
.nav-toggle .ic { width: 20px; height: 20px; }
.topbar .nav-toggle { display: none; }
@media (max-width: 960px) { .topbar .nav-toggle { display: inline-flex; } }

/* ---- sidebar: brushed steel with a film strip down its edge -------------- */
.sidebar {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #17191c 0%, #111316 55%, #0d0f11 100%);
  border-right: 1px solid #23272c;
  padding-right: 12px;
}
.sidebar::after {         /* perforations */
  content: ""; position: absolute; top: 0; bottom: 0; right: 3px; width: 6px;
  background: repeating-linear-gradient(180deg, transparent 0 10px, #050506 10px 18px);
  border-left: 1px solid #1b1e22; pointer-events: none;
}
.brand { gap: 12px; padding: 18px 14px 16px 16px; text-decoration: none; border-bottom: 1px solid #1f2226; }
.brand-mark { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: none; box-shadow: none; border-radius: 0; }
.brand-gear { position: absolute; inset: 0; width: 46px; height: 46px; color: #555c65;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); transition: transform .8s ease, color .2s ease; }
.brand-yt { position: relative; width: 24px; height: 17px; filter: drop-shadow(0 2px 6px rgba(255,0,51,.5)); }
.brand:hover .brand-gear { transform: rotate(30deg); color: #6c737d; }
body.is-busy .brand-gear { animation: bmd-turn 12s linear infinite; }
.brand-text { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: .1em;
  color: #f1f2f4; line-height: 1; display: flex; flex-direction: column; }
.brand-text small { font-family: var(--font); font-size: 9.5px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 6px; }

.nav { padding: 4px 8px 10px 10px; }
.nav-group { display: flex; align-items: center; gap: 8px; margin: 18px 4px 6px; padding: 0;
  font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: #5c636c; }
.nav-group:first-child { margin-top: 12px; }
.nav-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #2a2e34, transparent); }
.nav a { gap: 10px; padding: 7px 10px; margin-bottom: 1px; border-radius: 7px; color: #a6acb4;
  font-size: 13.5px; position: relative; }
.nav a .nav-icon { width: 20px; display: grid; place-items: center; color: #68707a; font-size: inherit; }
.nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.nav a:hover .nav-icon { color: var(--steel-2); }
.nav a.on { background: linear-gradient(90deg, rgba(255,43,61,.15), rgba(255,255,255,.015));
  color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav a.on .nav-icon { color: var(--accent); }
.nav a.nav-sub { padding-left: 30px; font-size: 13px; }
.nav a.nav-sub::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 50%; width: 7px;
  border-left: 1px solid #353a42; border-bottom: 1px solid #353a42; border-bottom-left-radius: 4px; }
.nav a.nav-sub .nav-icon { width: 16px; }
.nav a.nav-sub .ic { width: 15px; height: 15px; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-count, .nav a.on .nav-count { background: var(--accent); color: #fff; box-shadow: 0 0 10px rgba(255,43,61,.35); }
.sidebar-foot { border-top: 1px solid #23272c; background: rgba(0,0,0,.2); }
.foot-user { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px;
  text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-user:hover, .foot-user.on { color: #fff; }
.foot-k { display: inline-flex; align-items: center; gap: 5px; }
.foot-k .ic, .foot-user .ic { width: 14px; height: 14px; }

/* ---- header: a title plate over a film strip ------------------------------- */
.topbar { background: linear-gradient(180deg, rgba(21,23,26,.94), rgba(13,14,16,.9));
  border-bottom: 0; padding-bottom: calc(var(--s4) + 8px); gap: 14px; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--perf), linear-gradient(180deg, #1b1e22, #101215);
  border-top: 1px solid #2a2e34; border-bottom: 1px solid #050506; }
.top-gear { width: 34px; height: 34px; color: #3d434b; flex: none; filter: drop-shadow(0 1px 2px #000); }
body.is-busy .top-gear { color: #5b626b; animation: bmd-turn 9s linear infinite; }
@keyframes bmd-turn { to { transform: rotate(360deg); } }
.top-title { min-width: 0; }
.topbar h1, .top-title h1 { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: .06em;
  text-transform: uppercase; color: #f3f4f6; line-height: 1.15; display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { color: var(--text-dim); margin-top: 3px; }
.topbar .sub a { color: var(--steel-2); }
.page-ic { width: 24px; height: 24px; color: var(--accent); flex: none; }
.live-toggle { color: var(--text-faint); font-size: 12px; }
.halt-form .btn { font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
@media (max-width: 960px) { .top-gear { display: none; } .topbar h1 { font-size: 19px; } }

/* ---- plates (panels, metrics) ------------------------------------------------ */
.panel, .metric {
  background:
    var(--rivet) 6px 6px / 10px 10px no-repeat,
    var(--rivet) calc(100% - 6px) 6px / 10px 10px no-repeat,
    var(--rivet) 6px calc(100% - 6px) / 10px 10px no-repeat,
    var(--rivet) calc(100% - 6px) calc(100% - 6px) / 10px 10px no-repeat,
    var(--plate);
  border: 1px solid var(--line); border-top-color: #353a41;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.32);
}
.panel-flush { background: var(--plate); }
.panel-head h2, .panel > h2 { font-family: var(--display); font-weight: 600; font-size: 15.5px;
  letter-spacing: .08em; text-transform: uppercase; color: #eef0f2; display: flex; align-items: center; gap: 9px; }
.panel-head h2::before { content: ""; flex: none; width: 4px; height: 15px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 8px rgba(255,43,61,.5); }
.panel-head h2 .ic { color: var(--steel); }
.metric .k { font-family: var(--display); letter-spacing: .14em; font-weight: 500; color: var(--text-faint); }
.metric .v { font-family: var(--display); font-weight: 600; letter-spacing: .02em; }
.metric:hover { border-color: var(--line-strong); }
.empty-icon { opacity: .35; }

/* ---- controls ------------------------------------------------------------------ */
button, .btn { background: linear-gradient(180deg, #272b31, #1d2025); border: 1px solid #383d45;
  border-top-color: #474d56; color: #e2e5e9;
  transition: filter .12s ease, border-color .12s ease, background .12s ease; }
button:hover, .btn:hover { filter: brightness(1.15); border-color: #4b525c; color: #fff; }
button.primary, .btn.primary, .btn-primary {
  background: linear-gradient(180deg, #ff4252 0%, #e3192e 55%, #c8102e 100%);
  border: 1px solid #a50e25; border-top-color: #ff6b77; color: #fff; font-weight: 650;
  box-shadow: 0 6px 18px rgba(200,16,46,.32), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
button.primary:hover, .btn.primary:hover, .btn-primary:hover { background: linear-gradient(180deg, #ff4252 0%, #e3192e 55%, #c8102e 100%); filter: brightness(1.1); border-color: #a50e25; }
button.danger, .btn.danger, .btn-danger { background: rgba(255,43,61,.08); border-color: rgba(255,43,61,.45); color: #ff7a85; }
button.danger:hover, .btn.danger:hover, .btn-danger:hover { background: rgba(255,43,61,.18); color: #ff9aa2; }
button.ghost, .btn.ghost { background: transparent; border-color: #30353c; }

input[type=text], input[type=password], input[type=url], input[type=number], input[type=search],
input[type=email], input[type=date], input[type=time], input[type=datetime-local], textarea, select {
  font: inherit; width: 100%; padding: 8px 11px; border-radius: 8px !important;
  border: 1px solid #353a42; background: #0c0d0f; color: var(--text); color-scheme: dark;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 0 0 3px rgba(255,43,61,.16) !important; }
input[type=file] { font: inherit; font-size: 12.5px; color: var(--text-dim); width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-size: 12.5px; margin-right: 10px; padding: 7px 12px;
  border-radius: 8px; border: 1px solid #383d45; background: #22262b; color: var(--text); cursor: pointer; }
input[type=color] { width: 46px; height: 32px; padding: 2px; border-radius: 8px !important;
  border: 1px solid #383d45; background: #0c0d0f; cursor: pointer; }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.filterbar { background: linear-gradient(180deg, #17191c, #121417) !important; }

table thead th { font-family: var(--display); letter-spacing: .12em; font-weight: 500; color: var(--text-faint); }
table tbody tr:hover { background: rgba(255,255,255,.025); }
tr.on td { background: var(--accent-soft); }
a { color: #ff6b77; }
a:hover { color: #ff97a0; }
.bar i { background: var(--steel-2); }
.bar.ok i { background: var(--ok); } .bar.warn i { background: var(--amber); } .bar.bad i { background: var(--bad); }
.timeline i { background: var(--accent); }
.toast { border-left-color: var(--accent); background: #1a1d21; }

/* ---- chips & status lamps --------------------------------------------------- */
.pill { background: #23272c; color: var(--text-dim); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: rgba(242,163,58,.1); color: var(--amber); }
td a:not(.btn) { color: var(--text); }
td a:not(.btn):hover { color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 650; white-space: nowrap; background: #23272c; color: var(--text-dim);
  border: 1px solid #30353c; }
.chip-live { background: var(--amber-soft); color: var(--amber); border-color: rgba(242,163,58,.3); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 8px var(--amber); display: inline-block; animation: bmd-pulse 2.4s ease-in-out infinite; }
@keyframes bmd-pulse { 50% { opacity: .4; } }
.st-researching, .st-fetching, .st-analysing, .st-producing,
.st-v-sourcing, .st-v-subtitles, .st-v-assembly, .st-v-packaging, .st-v-qa, .st-v-export, .st-v-idea
  { background: var(--amber-soft); color: var(--amber); border-color: rgba(242,163,58,.3); }
.st-needs_source, .st-ready { background: rgba(185,192,200,.1); color: var(--steel-2); }
.st-done, .st-v-ready, .st-v-uploaded { background: var(--ok-soft); color: var(--ok); border-color: rgba(76,195,138,.3); }
.st-failed, .st-v-failed, .st-v-rejected { background: var(--bad-soft); color: var(--bad); border-color: rgba(255,77,90,.3); }

/* ---- factory hero: a lit marquee over the shop floor --------------------------- */
.factory-hero { position: relative; overflow: hidden; margin-bottom: var(--s5); padding: 30px 30px 28px;
  border-radius: 14px; border: 1px solid #2c3036; border-top-color: #3a3f47;
  background:
    linear-gradient(90deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.7) 50%, rgba(10,11,13,.2) 100%),
    radial-gradient(520px 260px at 82% 50%, rgba(255,43,61,.2), transparent 70%),
    repeating-linear-gradient(135deg, #16181b 0 14px, #121417 14px 28px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.factory-hero::before, .factory-hero::after { content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: var(--perf), #0b0c0e; }
.factory-hero::before { top: 0; border-bottom: 1px solid #23272c; }
.factory-hero::after { bottom: 0; border-top: 1px solid #23272c; }
.hero-copy { position: relative; z-index: 1; max-width: calc(100% - 330px); }
@media (max-width: 1100px) { .hero-copy { max-width: none; } }
.hero-gears { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 320px; height: 200px; pointer-events: none; }
.hero-gears svg { position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.65)); }
.hero-gears .g1 { width: 168px; height: 168px; right: 70px; top: 16px; color: #2f343b; }
.hero-gears .g2 { width: 100px; height: 100px; right: 0; top: 118px; color: #282c32; }
.hero-gears .g3 { width: 70px; height: 70px; right: 220px; top: 4px; color: #24282d; }
.hero-gears .yt { width: 64px; height: 46px; right: 122px; top: 77px; filter: drop-shadow(0 4px 18px rgba(255,0,51,.6)); }
body.is-busy .hero-gears .g1 { animation: bmd-turn 16s linear infinite; }
body.is-busy .hero-gears .g2 { animation: bmd-turn 9.5s linear infinite reverse; }
body.is-busy .hero-gears .g3 { animation: bmd-turn 6.7s linear infinite reverse; }
.hero-kicker { font-family: var(--display); font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 10px; }
.hero-kicker::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
.hero-title { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #f4f5f7; line-height: 1.02; margin: 8px 0 10px; text-shadow: 0 3px 18px rgba(0,0,0,.7); }
.hero-sub { color: var(--text-dim); font-size: 13.5px; margin: 0; }
.hero-stats { display: flex; gap: 30px; margin-top: 20px; flex-wrap: wrap; }
.hero-stats div { border-left: 2px solid #33383f; padding-left: 12px; }
.hero-stats b { display: block; font-family: var(--display); font-size: 32px; font-weight: 600; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.hero-stats .hot { border-left-color: var(--amber); }
.hero-stats .hot b { color: var(--amber); text-shadow: 0 0 14px rgba(242,163,58,.35); }
.hero-stats .red { border-left-color: var(--accent); }
@media (max-width: 1100px) { .hero-gears { opacity: .3; right: -40px; } }
@media (max-width: 640px) { .hero-title { font-size: 30px; } .factory-hero { padding: 24px 18px; } }

/* ---- workshops ----------------------------------------------------------------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.shop-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 18px; border-radius: 13px; color: var(--text); text-decoration: none;
  background:
    var(--rivet) 6px 6px / 10px 10px no-repeat, var(--rivet) calc(100% - 6px) 6px / 10px 10px no-repeat,
    linear-gradient(180deg, #1c1f23, #141619);
  border: 1px solid #2c3036; border-top-color: #3a3f47;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.shop-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2f343b; transition: background .15s ease; }
.shop-gear { position: absolute; right: -36px; bottom: -44px; width: 150px; height: 150px; color: #fff; opacity: .04;
  transition: transform .9s ease, opacity .2s ease; pointer-events: none; }
.shop-card:hover { border-color: rgba(255,43,61,.45); transform: translateY(-2px); color: var(--text);
  box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.shop-card:hover::before { background: var(--accent); }
.shop-card:hover .shop-gear { transform: rotate(60deg); opacity: .075; }
.shop-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shop-icon { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(180deg, #25292f, #191b1f); border: 1px solid #383d45; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.4); }
.shop-icon .ic { width: 22px; height: 22px; }
.shop-name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.12; min-width: 0; }
.shop-head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.shop-idle { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.shop-blurb { margin: 0; color: var(--text-dim); font-size: 12.8px; min-height: 52px; position: relative; }
.kpis { display: flex; gap: 20px; flex-wrap: wrap; position: relative; }
.kpi { display: flex; flex-direction: column; }
.kpi b { font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.kpi-bad b { color: var(--bad); }
.meter { display: flex; height: 6px; border-radius: 6px; background: #0c0d0f; box-shadow: inset 0 1px 2px #000; overflow: hidden; position: relative; }
.meter i { display: block; height: 100%; }
.m-ok { background: linear-gradient(90deg, #3aa874, #4cc38a); }
.m-run { background: linear-gradient(90deg, #d88a1e, #f2a33a); }

/* ---- production line: machines on a roller conveyor --------------------------- */
.line { display: flex; align-items: center; overflow-x: auto; padding: 8px 4px 26px; position: relative; }
.line::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 10px; border-radius: 5px;
  background: radial-gradient(circle at 7px 5px, #4a5058 0 2.5px, #23272c 3px 5px, transparent 5.5px) 0 0 / 14px 10px repeat-x, #0f1113;
  border: 1px solid #23272c; box-shadow: inset 0 2px 3px #000; }
.station { flex: none; min-width: 112px; text-align: center; padding: 14px 10px 11px; border-radius: 10px; position: relative;
  background: linear-gradient(180deg, #25292f, #181a1e); border: 1px solid #353a42; border-top-color: #464c55;
  box-shadow: 0 8px 16px rgba(0,0,0,.45); }
.station::before { content: ""; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #3a3f47; }
.station.busy::before { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
.station.done::before { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.station b { display: block; font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.station span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.station.busy { border-color: rgba(242,163,58,.55); }
.station.busy b { color: var(--amber); }
.station.done b { color: var(--ok); }
.belt { flex: 1 0 18px; height: 4px; margin: 0 3px; background: linear-gradient(90deg, #2c3036, #4a5058); border-radius: 2px; position: relative; }
.belt i { position: absolute; right: -6px; top: -5px; border: 7px solid transparent; border-left-color: #4a5058; }

/* ---- chart (bars in SVG, labels in HTML so nothing stretches) ------------------ */
.chart-box { position: relative; }
.chart { width: 100%; height: 170px; display: block; }
.chart .grid-l { stroke: #23272c; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart .axis { stroke: #3a3f47; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-days { display: grid; gap: 0; margin-top: 4px; font-size: 10px; color: var(--text-faint); text-align: center; }
.chart-days span { overflow: hidden; white-space: nowrap; text-overflow: clip; }
@media (max-width: 640px) { .chart-days { font-size: 8.5px; } }
.chart-days b { display: block; font-family: var(--display); font-weight: 500; font-size: 11px; color: var(--text-dim); }
.chart-days .today { color: var(--accent); }
.bar-facts, .lg-facts { fill: #f2a33a; background: #f2a33a; }
.bar-movies, .lg-movies { fill: #ff2b3d; background: #ff2b3d; }
.bar-campaigns, .lg-campaigns { fill: #b9c0c8; background: #b9c0c8; }
.bar-reactions, .lg-reactions { fill: #6d747e; background: #6d747e; }
.legend { font-size: 11px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* ---- lists, galleries, workshop pages ------------------------------------------ */
.proj-row { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-top: 1px solid #23272c; color: var(--text); text-decoration: none; }
.proj-row:first-of-type { border-top: 0; }
.proj-row:hover { background: rgba(255,255,255,.03); color: #fff; }
.proj-row > .ic { color: var(--steel); }
.proj-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.mini-tile { position: relative; display: block; aspect-ratio: 9/16; border-radius: 9px; overflow: hidden; text-decoration: none;
  background: repeating-linear-gradient(135deg, #191b1f 0 10px, #15171a 10px 20px); border: 1px solid #30353c;
  transition: border-color .15s ease, transform .15s ease; }
.mini-tile::before, .mini-tile::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5px; z-index: 2; opacity: .85;
  background: repeating-linear-gradient(180deg, transparent 0 6px, #050506 6px 11px); }
.mini-tile::before { left: 2px; } .mini-tile::after { right: 2px; }
.mini-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.mini-noimg { width: 100%; height: 100%; display: grid; place-items: center; color: #3a3f47; font-size: 0; }
.mini-noimg::after { content: ""; width: 34px; height: 24px; border-radius: 7px; background: #2a2e34;
  -webkit-mask: linear-gradient(#000 0 0); }
.mini-badge { position: absolute; top: 7px; left: 10px; font-size: 10px; z-index: 3; }
.mini-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-size: 11px; color: #fff; z-index: 3;
  background: linear-gradient(transparent, rgba(0,0,0,.92)); line-height: 1.25; }

.hero-form { padding: var(--s5); background:
  var(--rivet) 6px 6px / 10px 10px no-repeat, var(--rivet) calc(100% - 6px) 6px / 10px 10px no-repeat,
  radial-gradient(600px 200px at 0% 0%, rgba(255,43,61,.1), transparent 70%), var(--plate); }
.hero-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-input { flex: 1 1 300px; font-size: 18px !important; padding: 14px 16px !important; }
.hero-btn { font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: 15px; padding: 12px 26px; }
.hero-more { margin-top: var(--s3); }
.hero-more > summary { cursor: pointer; color: var(--text-dim); font-size: 13px; }
.hero-more > summary:hover { color: #fff; }
.fact-preview { font-size: 13px; margin-bottom: var(--s3); }
.fact-preview ol { margin: 6px 0 0; padding-left: 1.3em; color: var(--text-dim); }
.fact-preview li { margin: 2px 0; }
.proj-card .panel-head h2 a { color: var(--text); text-decoration: none; }
.proj-card .panel-head h2 a:hover { color: #fff; }

.stepper { display: flex; margin: 0 0 var(--s5); overflow-x: auto; padding-top: 2px; }
.stp { flex: 1 1 0; min-width: 100px; position: relative; padding-top: 22px; text-align: center; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.stp::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 3px; background: #2a2e34; }
.stp i { position: absolute; top: 1px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%;
  background: #1a1d21; border: 2px solid #3a3f47; }
.stp.done { color: var(--text-dim); }
.stp.done::before, .stp.now::before { background: linear-gradient(90deg, #8a929c, #b9c0c8); }
.stp.done i { background: var(--steel-2); border-color: var(--steel-2); }
.stp.now { color: #fff; font-weight: 650; }
.stp.now i { background: var(--accent); border-color: #ff7a85; box-shadow: 0 0 0 4px rgba(255,43,61,.2), 0 0 12px rgba(255,43,61,.6); }
.scene-map { position: relative; height: 32px; border-radius: 6px; overflow: hidden; border: 1px solid #2a2e34;
  background: var(--perf) 0 0 / 100% 5px no-repeat, var(--perf) 0 100% / 100% 5px no-repeat, #0c0d0f; }
.scene-map .sc { position: absolute; top: 8px; bottom: 8px; border-radius: 2px; background: #6d747e; min-width: 3px; }
.scene-map .sc.hot { background: linear-gradient(180deg, #ff5a68, #c8102e); }
.scene-map .sc:hover { outline: 2px solid #fff; }

/* ---- AI assistants pop-up --------------------------------------------------------- */
.ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 190; width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid #a50e25; border-top-color: #ff6b77; padding: 0; justify-content: center; color: #fff; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, #ff5a68, #c8102e 70%);
  box-shadow: 0 10px 30px rgba(200,16,46,.45), inset 0 1px 0 rgba(255,255,255,.3); cursor: pointer;
  transition: transform .15s ease, filter .15s ease; }
.ai-fab .ic { width: 25px; height: 25px; }
.ai-fab:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); border-color: #a50e25; }
.ai-fab.hidden { display: none; }
.ai-box { position: fixed; right: 18px; bottom: 18px; z-index: 195; width: min(430px, calc(100vw - 24px));
  height: min(660px, calc(100vh - 36px)); display: none; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #17191c, #101215); border: 1px solid #343941; border-top-color: #454b54; border-radius: 14px;
  box-shadow: 0 26px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,43,61,.1); }
.ai-box.open { display: flex; }
.ai-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 15px; position: relative;
  background: linear-gradient(180deg, #212429, #191b1f); border-bottom: 1px solid #2a2e34; }
.ai-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--perf); opacity: .8; }
.ai-tabs { display: flex; gap: 4px; flex: 1; }
.ai-tabs button { padding: 6px 10px; font-size: 12px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-dim); }
.ai-tabs button.on { background: rgba(255,43,61,.12); border-color: rgba(255,43,61,.35); color: #fff; }
.ai-x { padding: 6px 9px; background: transparent; border: 0; color: var(--text-dim); font-size: 13px; }
.ai-x:hover { color: #fff; }
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
.ai-msg p { margin: 0 0 6px; } .ai-msg p:last-child { margin: 0; }
.ai-msg ul { margin: 4px 0; padding-left: 1.2em; }
.ai-msg.me { align-self: flex-end; background: linear-gradient(180deg, #e3192e, #b30e27); color: #fff; border-bottom-right-radius: 3px; white-space: pre-wrap; }
.ai-msg.bot { align-self: flex-start; background: #1d2024; border: 1px solid #2f343b; border-bottom-left-radius: 3px; }
.ai-msg a { color: #ff8a94; }
.ai-wait { color: var(--text-faint); font-style: italic; }
.ai-hello { margin: auto; text-align: center; color: var(--text-dim); font-size: 13px; max-width: 300px; }
.ai-hi { font-size: 34px; margin-bottom: 6px; }
.ai-small { font-size: 11px; color: var(--text-faint); }
.ai-table { margin-top: 8px; overflow-x: auto; }
.ai-tt { font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
.ai-table table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ai-table th, .ai-table td { padding: 4px 6px; border-bottom: 1px solid #2a2e34; text-align: left; white-space: nowrap; }
.ai-table th { color: var(--text-faint); font-weight: 600; }
.ai-prop { margin-top: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(242,163,58,.4); background: var(--amber-soft); }
.ai-prop.done { opacity: .7; border-color: #2a2e34; background: transparent; }
.ai-pt { font-size: 12.5px; margin-bottom: 6px; }
.ai-pa { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.ai-ok { color: var(--ok); }
.ai-chips { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; }
.ai-chips button { flex: none; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; color: var(--text-dim); }
.ai-chips button:hover { color: #fff; border-color: var(--accent); }
.ai-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #2a2e34; }
.ai-form textarea { flex: 1; resize: none; max-height: 140px; font: inherit; font-size: 13px; padding: 9px 11px; }
.ai-form button { border-radius: 10px; padding: 0 14px; }
@media (max-width: 640px) { .ai-box { right: 6px; bottom: 6px; height: calc(100vh - 12px); } .ai-fab { right: 14px; bottom: 14px; } }

@media (prefers-reduced-motion: reduce) {
  body.is-busy .top-gear, body.is-busy .brand-gear, body.is-busy .hero-gears svg, .dot-live { animation: none !important; }
}

/* The board used to snap to columns; on every live update the browser
   re-snapped and threw it back to the first column. Plain scrolling keeps
   it where you left it. */
.board { scroll-snap-type: none; }

/* ---- the workshop sections of the sidebar ------------------------------------ */
.nav-shop { margin: 6px 0 2px; border-radius: 9px; }
.nav-shop > summary { list-style: none; }
.nav-shop > summary::-webkit-details-marker { display: none; }
.nav-shop-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #c3c8cf; position: relative; }
.nav-shop-head::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid #5f6670;
  border-bottom: 1.6px solid #5f6670; transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.nav-shop[open] > .nav-shop-head::after { transform: rotate(45deg); }
.nav-shop-head .nav-count { margin-left: auto; }
.nav-shop-head .nav-count + * { margin-left: 6px; }
.nav-shop-head:hover { background: rgba(255,255,255,.04); color: #fff; }
.nav-shop-head .nav-icon { color: #7b828c; }
.nav-shop.is-here { background: linear-gradient(180deg, rgba(255,43,61,.07), rgba(255,255,255,.01)); }
.nav-shop.is-here > .nav-shop-head { color: #fff; }
.nav-shop.is-here > .nav-shop-head .nav-icon { color: var(--accent); }
.nav-shop a.nav-sub { padding-left: 34px; }
.nav-shop a.nav-sub::before { left: 21px; }

/* ---- a channel's YouTube connection and autopilot ------------------------------- */
.ap-box { margin-top: var(--s5); padding: var(--s4); border-radius: 10px; border: 1px solid #30353c;
  background: linear-gradient(180deg, rgba(255,43,61,.05), rgba(255,255,255,.01)); }
.ap-box textarea { font: inherit; }
.auto-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; gap: var(--s3);
  align-items: center; padding: 12px var(--s5); border-top: 1px solid #23272c; }
.auto-row:first-of-type { border-top: 0; }
.auto-row .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.auto-row .v { font-family: var(--display); font-size: 18px; }
@media (max-width: 900px) { .auto-row { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   Phones (and the Telegram Mini App): one column, big targets, a tab bar.
   ========================================================================= */
.tabbar { display: none; }
@media (max-width: 760px) {
  :root { --sidebar-w: 84vw; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .sidebar { z-index: 195; }
  body.nav-open::after { z-index: 190; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 180; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(20,22,25,.97), rgba(12,13,15,.99));
    border-top: 1px solid #2a2e34; box-shadow: 0 -8px 24px rgba(0,0,0,.45); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 48px; padding: 4px 2px; border: 0; border-radius: 10px; background: none;
    color: #8f96a0; font-size: 10.5px; font-weight: 600; text-decoration: none; filter: none; }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar a.on { color: #fff; background: rgba(255,43,61,.12); }
  .tabbar a.on .ic { color: var(--accent); }

  /* header: one tidy line, the page's buttons on a scrollable second line */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px calc(10px + 8px); }
  .top-title { flex: 1 1 0; }
  .topbar h1, .top-title h1 { font-size: 17px; letter-spacing: .04em; white-space: nowrap; }
  .topbar .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 11.5px; }
  .topbar-actions { order: 3; flex: 1 0 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: 2px; scrollbar-width: none; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions > * { flex: none; }
  .live-toggle span { display: none; }

  /* content: edge to edge, one column */
  .content { padding: 12px; }
  .panel { padding: 14px; border-radius: 12px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .panel-flush .panel-head, .panel-flush > p { padding-left: 14px; padding-right: 14px; }
  .g2, .g3 { grid-template-columns: 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; }
  .grid:has(> .metric) { grid-template-columns: 1fr 1fr !important; }   /* number tiles: two a row */
  .metric { padding: 12px 14px; }
  .metric .v { font-size: 24px; }
  .grid { gap: 12px; }
  .metric .v { font-size: 26px; }
  .row.wrap > * { min-width: 0; }

  /* touch: comfortable targets, and no zoom when a field is tapped on iPhone */
  button, .btn { min-height: 40px; }
  .btn-sm, button.btn-sm { min-height: 36px; padding: 6px 12px; }
  input, select, textarea { font-size: 16px !important; }
  .nav a { padding: 10px 12px; }

  /* lists that do not fit scroll sideways inside their panel */
  .tablewrap, .table-wrap { -webkit-overflow-scrolling: touch; }
  /* A wide table scrolls inside its own panel instead of widening the page
     (a page wider than the screen makes the phone zoom out - or, past 760px,
     switch to the desktop layout). */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th { white-space: nowrap; }
  .feed { max-height: 300px; }

  /* overlays stay clear of the tab bar */
  .ai-fab { width: 50px; height: 50px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ai-box { right: 0; left: 0; bottom: 0; width: 100vw; height: calc(100vh - 10px); border-radius: 14px 14px 0 0; }
  #console { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  #console .toast { font-size: 12px; }
  #console-items .toast:not(:last-child) { display: none; }     /* phones: only the latest */
  #console-restore { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); right: 12px; }

  /* factory pages */
  .factory-hero { padding: 22px 16px; }
  .hero-gears { display: none; }
  .hero-copy { max-width: none; }
  .hero-title { font-size: 28px; }
  .hero-stats { gap: 16px; }
  .hero-stats b { font-size: 24px; }
  .shop-grid { grid-template-columns: 1fr; }
  .hero-row { flex-direction: column; }
  .hero-input { flex: 1 1 auto; font-size: 17px !important; }
  .hero-btn { width: 100%; }
  .studio { grid-template-columns: 1fr !important; }
  .srow { grid-template-columns: 1fr !important; gap: 6px !important; }
  .auto-row { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .auto-row > div:first-child, .auto-row > form { grid-column: 1 / -1; }
  .auto-row form button { width: 100%; }
  .ap-box { padding: 12px; }
}
@media (max-width: 420px) {
  .g4 { grid-template-columns: 1fr !important; }
  .tabbar a span, .tabbar button span { font-size: 9.5px; }
}

/* Nested sidebar rows: a full channel under «Каналы», its pages under it. */
.nav-shop a.nav-sub.nav-d2 { padding-left: 50px; font-size: 12.8px; }
.nav-shop a.nav-sub.nav-d2::before { left: 37px; }
.nav-shop a.nav-sub.nav-d3 { padding-left: 66px; font-size: 12.3px; color: #8f96a0; }
.nav-shop a.nav-sub.nav-d3::before { left: 53px; }
.nav-shop a.nav-sub.nav-d3 .ic { width: 13px; height: 13px; }
.nav a.trail { color: #e6e8eb; }
.nav a.trail .nav-icon { color: var(--accent); }

/* The header of a full channel's pages: where it sits, and its tabs. */
.ch-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text-faint); margin-bottom: var(--s3); }
.ch-crumbs a { color: var(--text-faint); }
.ch-crumbs a:hover { color: #fff; }
.ch-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s5);
  border-bottom: 1px solid #262a30; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  color: #a6acb4; font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent;
  margin-bottom: -1px; text-decoration: none; }
.ch-tabs a .ic { width: 15px; height: 15px; color: #68707a; }
.ch-tabs a:hover { color: #fff; }
.ch-tabs a.on { color: #fff; border-bottom-color: var(--accent); }
.ch-tabs a.on .ic { color: var(--accent); }

/* =========================================================================
   Nothing may be wider than the phone. A grid cell or flex item grows to its
   content's width by default (a long title on one line, a select with a long
   option, a table) - and one such thing made the whole page wider than the
   screen, so the phone zoomed out or fell back to the desktop layout until
   the page was reopened. Cells may shrink; fields keep to their box; the
   page itself never scrolls sideways.
   ========================================================================= */
@media (max-width: 760px) {
  .grid > *, .panel, .stack > * { min-width: 0; }
  html, body { max-width: 100%; overflow-x: hidden; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  .content, .main, main { max-width: 100vw; min-width: 0; }
  select, input, textarea { max-width: 100%; }
  .content { overflow-wrap: anywhere; }
  .content pre, .content code { white-space: pre-wrap; word-break: break-word; }
  img, video, svg, canvas, iframe { max-width: 100%; }
  .feed-row .msg { overflow-wrap: anywhere; min-width: 0; }
}

/* =========================================================================
   Roles: a viewer looks and does not touch. The server refuses anything that
   changes the system; the page shows it greyed out.
   ========================================================================= */
.viewer-banner { display: flex; gap: 8px; align-items: center; }
body.is-viewer form[method="post"]:not(.viewer-ok) :is(button, input[type="submit"], select, input, textarea),
body.is-viewer [data-act="run"], body.is-viewer .ai-proposal button {
  pointer-events: none; opacity: .45; filter: grayscale(.6);
}
.ai-view-only .ai-chips button { pointer-events: none; opacity: .45; }
.ai-view-only .ai-form textarea::placeholder { color: var(--amber, #f2b544); }