/* ---------- boot splash ---------- */
.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 60vh;
  color: var(--c-ink-soft);
  font-family: var(--font-display);
}

/* ---------- login ---------- */
.login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background-color: var(--c-bg);
  background-image: var(--pattern-dots);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.login-brand .fennec { --fs: 88px; animation: pop-in 300ms var(--ease-bounce); }
.login-brand h1 { font-size: 34px; }
.login-brand p { color: var(--c-ink-soft); margin: 0; font-size: var(--fs-sm); }
.login-cards { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 140px;
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--c-ink);
  transition: transform var(--t-pop) var(--ease-bounce);
}
.login-card:nth-child(2) { border-radius: var(--r-wonky-2); }
.login-card:active { transform: scale(0.96); }
.login-card.picked { border-color: var(--c-accent-deep); transform: translateY(-4px); }
.login-avatar {
  width: 64px; height: 64px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  border: var(--bw-sticker) solid var(--c-shadow);
}
.login-avatar[data-who='aki'] { background: #FFE6CD; color: var(--pal-orange-deep); }
.login-avatar[data-who='rabbi'] { background: #FBEFC2; color: var(--pal-yellow-deep); }
.login-pass { width: min(86vw, 340px); display: none; flex-direction: column; gap: var(--sp-3); }
.login-pass.open { display: flex; animation: rise-in var(--t-pop) var(--ease-bounce); }
.remember-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); cursor: pointer; user-select: none; }
.remember-row input { width: 20px; height: 20px; accent-color: var(--c-accent-deep); }
.login.wobble .login-pass { animation: wobble 300ms; }

/* ---------- home ---------- */
.home-head { margin-bottom: var(--sp-4); }
.home-greeting { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 2px; }
.home-greeting .fennec { --fs: 48px; }
.home-date { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.make-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--c-accent-soft);
  border: var(--bw-sticker) solid var(--c-accent);
  border-radius: var(--r-lg);
  box-shadow: 0 3px 0 var(--c-shadow);
  cursor: pointer;
  text-align: start;
  color: var(--c-accent-ink);
  font-family: var(--font-display);
  font-weight: 600;
}
.make-bar i { font-size: 18px; }
.make-bar .mb-sub { display: block; font-weight: 500; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.count-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-3) var(--sp-1);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  color: var(--c-ink);
}
.count-card .cc-n { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); }
.count-card .cc-l { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.count-card i { color: var(--c-accent-deep); margin-bottom: 2px; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.home-fanart-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.home-fanart-strip img, .home-fanart-strip .fa-ph {
  width: 88px; height: 88px; flex: 0 0 auto; object-fit: cover;
  border-radius: var(--r-md); border: var(--bw-sticker) solid var(--c-shadow);
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--c-ink-faint);
}
.mini-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mini-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  color: var(--c-ink);
}
.mini-row + .mini-row { border-top: var(--bw-thin) solid var(--c-line); }
.mini-row i { color: var(--c-accent-deep); width: 18px; text-align: center; }
.mini-row .mr-side { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* ---------- generic list/detail headers ---------- */
.screen-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.screen-head h1 { flex: 1; min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; margin-bottom: var(--sp-3); }
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); }
.filter-row .chip { flex: 0 0 auto; white-space: nowrap; }

/* ---------- scripts ---------- */
.script-meta-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.prompter {
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4);
}
.prompter h2 { margin-bottom: var(--sp-3); }
.prompter .seg-headline { font-family: var(--font-display); font-weight: 700; color: var(--c-accent-deep); margin: var(--sp-4) 0 var(--sp-2); }
.prompter .seg-lines { font-size: var(--prompter-size, 21px); line-height: 1.6; white-space: pre-wrap; }
.prompter .seg-src { font-size: var(--fs-xs); margin-top: var(--sp-1); }
.prompter-nav { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.prompter-nav .pn-pos { font-family: var(--font-display); font-weight: 600; color: var(--c-ink-soft); }
.size-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.editor-seg {
  border: var(--bw-sticker) solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--c-surface);
}

/* ---------- record ---------- */
.model-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
}
.model-banner img, .model-banner .mb-ph {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: var(--r-md); object-fit: cover;
  border: var(--bw-sticker) solid var(--c-shadow);
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--c-ink-faint);
}
.model-banner .mb-main { flex: 1; min-width: 0; }
.model-banner .mb-name { font-family: var(--font-display); font-weight: 700; }
.model-banner .mb-sub { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.cam-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 60dvh;
  background: #1a130c;
  border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cam-stage video { width: 100%; height: 100%; object-fit: cover; background: #1a130c; }
.cam-stage .cam-ph { color: #c9b9a6; text-align: center; padding: var(--sp-4); font-family: var(--font-display); }
.rec-timer {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(216, 80, 60, 0.92);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.rec-timer .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse-soft 1s infinite; }
.prompter-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 46%;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  background: rgba(26, 19, 12, 0.82);
  color: #FFF6EC;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.5;
}
.po-nav { display: flex; align-items: center; gap: var(--sp-2); position: sticky; top: 0; padding: 2px 0 var(--sp-1); background: inherit; }
.po-btn { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,0.14); color: #FFF6EC; cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.po-btn:disabled { opacity: 0.35; }
.po-btn.po-auto.on { background: var(--c-accent); color: var(--c-accent-ink); }
.po-pos { font-size: var(--fs-sm); font-weight: 700; opacity: 0.85; }
.po-auto { margin-inline-start: auto; }
.po-headline { font-weight: 700; color: var(--c-accent); font-size: 15px; margin: 2px 0 4px; }
.po-text { white-space: pre-wrap; }
.po-btn.po-coach.on { background: var(--c-accent); color: var(--c-accent-ink); }
.po-btn.po-coach.is-loading { opacity: 0.5; }
.po-word { border-radius: 4px; padding: 0 1px; transition: background 90ms linear; }
.po-word.is-now { background: var(--c-accent); color: var(--c-accent-ink); }
.po-word--cue { opacity: 0.6; font-style: italic; }
.po-pron, .po-rate { position: fixed; z-index: 60; display: flex; align-items: center; gap: 6px;
  padding: 8px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.po-pron-word { font-weight: 700; font-size: 13px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-pron-in { width: 140px; min-width: 0; font-size: 14px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink); }
.po-pron-ok { width: 32px; height: 32px; flex: none; border: none; border-radius: 50%; cursor: pointer;
  background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center; }
.po-rate-btn { border: 1px solid var(--c-line); background: transparent; color: var(--c-ink); cursor: pointer;
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.po-rate-btn.on { background: var(--c-accent); color: var(--c-accent-ink); border-color: transparent; }
.po-rate--wide { flex-direction: column; align-items: stretch; gap: 8px; max-width: min(320px, 92vw); }
.po-rate-row { display: flex; gap: 6px; }
.po-voices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border-top: 1px solid var(--c-line); padding-top: 8px; max-height: 40vh; overflow-y: auto; }
.po-voices-lbl { font-size: 11px; opacity: 0.7; width: 100%; }
.po-vrow { display: flex; gap: 4px; align-items: stretch; }
.po-vprev { flex: none; width: 34px; display: grid; place-items: center; }
.po-vprev.is-loading { opacity: 0.5; }
.po-vname { flex: 1; text-align: left; }
.cf-summary { font-size: 13px; font-weight: 600; color: var(--c-accent); margin: 2px 0 10px; }
.cf-flags { display: flex; flex-direction: column; gap: 8px; }
.cf-flag { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
.cf-flag i { margin-left: auto; opacity: 0.6; }
.cf-word { font-weight: 700; font-size: 15px; }
.cf-issue { font-size: 12px; opacity: 0.8; }
.cf-flag--pitch { border-left: 3px solid var(--c-accent); }
.cf-flag--timing { border-left: 3px solid var(--c-line); }
@media (max-width: 600px) {
  .po-pron-in { width: 116px; }
  .po-pron, .po-rate { padding: 6px; }
}
.po-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.po-media img { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); }
.po-media-clip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.14); font-size: 12px; }
.screen-head .script-title { flex: 1; min-width: 0; font-size: var(--fs-lg); font-weight: 700; border: 1px solid transparent; background: transparent; padding: 6px 8px; }
.screen-head .script-title:focus { border-color: var(--c-line); background: var(--c-surface); }
.cam-controls { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.cam-controls .btn { flex: 1; }
.cam-toggles { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* ---------- edit / render ---------- */
.render-job {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  margin-bottom: var(--sp-3);
}
.render-job .rj-main { flex: 1; min-width: 0; }
.render-job .rj-title { font-family: var(--font-display); font-weight: 600; }
.progress-track { height: 8px; background: var(--c-surface-2); border-radius: var(--r-pill); overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; background: var(--c-accent-deep); transition: width 0.4s; }

/* ---------- calendar ---------- */
.post-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  margin-bottom: var(--sp-3);
}
.post-card .pc-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; }
.post-card .pc-title { font-family: var(--font-display); font-weight: 700; flex: 1; min-width: 0; }
.post-card .pc-when { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.post-card .pc-cap { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: 4px; }
.post-card .pc-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.cal-group-head { font-family: var(--font-display); font-weight: 700; color: var(--c-ink-soft); margin: var(--sp-4) 0 var(--sp-2); }

/* ---------- ideas (pipeline) ---------- */
.idea-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  margin-bottom: var(--sp-3);
}
.idea-card .ic-top { display: flex; align-items: center; gap: var(--sp-2); }
.idea-card .ic-title { font-family: var(--font-display); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-card .ic-notes { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: 4px; }
.idea-card .ic-pipe { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--sp-3); }

/* ---------- fanart ---------- */
.fanart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.fanart-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: var(--bw-sticker) solid var(--c-shadow);
  overflow: hidden;
  background: var(--c-surface-2);
  cursor: pointer;
}
.fanart-cell img { width: 100%; height: 100%; object-fit: cover; }
.fanart-cell .fc-star {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 246, 236, 0.92);
  border: var(--bw-thin) solid var(--c-accent);
  color: var(--c-accent-deep);
  font-size: 12px;
}
.fanart-cell .fc-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  background: rgba(58, 42, 28, 0.72);
  color: #FFF6EC;
  font-size: var(--fs-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- stats ---------- */
.stat-card {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-3);
}
.stat-card .sc-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.stat-card .sc-plat { font-family: var(--font-display); font-weight: 700; flex: 1; }
.stat-card .sc-now { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); }
.spark { width: 100%; height: 56px; display: block; }
.spark rect { fill: var(--c-accent); }
.spark .spark-base { fill: var(--c-surface-2); }
.stat-figs { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; }
.stat-fig { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.stat-fig b { font-family: var(--font-display); color: var(--c-ink); }

/* ---------- settings ---------- */
.settings .card h3 { margin-bottom: var(--sp-3); }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap-min);
}
.theme-preview { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.theme-chip {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-3);
  border: var(--bw-sticker) solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
}
.theme-chip.on { border-color: var(--c-accent-deep); box-shadow: 0 2px 0 var(--c-accent-deep); }
.theme-swatch { width: 38px; height: 38px; border-radius: 50%; border: var(--bw-sticker) solid var(--c-shadow); }
.theme-swatch[data-t='aki'] { background: #FF7A1A; }
.theme-swatch[data-t='rabbi'] { background: #F2C230; }
.version-line { text-align: center; color: var(--c-ink-faint); font-size: var(--fs-xs); margin-top: var(--sp-5); }

/* ===== collaboration: bell, inbox, ping, suggested ideas, teammate bubbles ===== */
.bell { position: relative; }
.bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-pill); background: var(--c-accent);
  color: var(--c-accent-ink); font-size: 10px; font-weight: 800; line-height: 16px;
  text-align: center; box-shadow: 0 0 0 2px var(--c-bg);
}

.inbox-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.inbox-row {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3);
  background: var(--c-surface); border: var(--bw-thin) solid var(--c-line);
  border-radius: var(--r-md); color: inherit; text-decoration: none;
}
.inbox-row--unread { background: var(--c-accent-soft); border-color: var(--c-accent); }
.inbox-ic {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-accent-deep);
}
.inbox-main { min-width: 0; flex: 1; }
.inbox-title { font-weight: 700; }
.inbox-body { color: var(--c-ink-soft); font-size: var(--fs-sm); margin-top: 2px; }
.inbox-time { color: var(--c-ink-faint); font-size: var(--fs-xs); margin-top: 4px; }

.ping-card { margin-bottom: var(--sp-4); }
.ping-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.ping-avatar { flex: 0 0 auto; }
.ping-who { font-weight: 700; }

.suggest-block {
  background: var(--c-accent-soft); border: var(--bw-thin) solid var(--c-accent);
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.suggest-head { display: flex; align-items: center; gap: var(--sp-2); }
.suggest-head h3 { margin: 0; }
.chip--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.idea-card--suggested { border-left: 4px solid var(--c-accent); }

.msg--mate .msg-bubble { background: var(--c-surface-2); }
.msg--mate .msg-name { color: var(--c-ink-soft); }

/* ===== record: model expression toggles ===== */
.model-toggles { margin: var(--sp-2) 0 var(--sp-3); }
.mt-head { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--c-ink-soft); }
.mt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ===== requests / dev-loop reuse idea-card styles; status pill tones already defined ===== */

/* ===== record: live2d model stage ===== */
/* The whole page is the canvas: the screen goes full-bleed and the stage-canvas takes every
   pixel between topbar and tabbar. The model-stage is the ASPECT FRAME centered on it, sized
   in px by fitStage() - aspect changes resize only the frame, never the app layout. */
.screen--stage { max-width: none; padding: 0; margin: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: none; }
body.stage-open #app { overflow: hidden; display: flex; flex-direction: column; }
.stage-canvas { position: relative; flex: 1 1 auto; min-height: 0; background: #171310; overflow: hidden; display: grid; place-items: center; }
/* No painted-on background inside the frame: black behind the layers, exactly what the
   render produces. The hairline edge is what marks the output region. */
.model-stage { background: #000; border-radius: 4px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,246,236,0.3), 0 10px 30px rgba(0,0,0,0.4); z-index: 0; }
/* The strip the rail leaves is 264px on a 375px phone and this row wants ~384: unwrapped, the
   take timer was pushed out of its own bar and sat underneath the rail buttons. It wraps now,
   so a narrow stage puts the record button and the timer on their own line instead of shoving
   them under something else. */
.rec-overlay { position: absolute; left: 8px; right: 64px; bottom: 10px; z-index: 42; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; pointer-events: none; }
.rec-overlay > * { pointer-events: auto; }
.rec-oc-side { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.rec-oc-side--r { margin-inline-start: auto; }
.rec-oc-main { flex: 1 1 140px; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.rec-oc-main > * { pointer-events: auto; }
.rec-oc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; background: rgba(20,12,6,0.74); color: #FFF6EC; border: none; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.rec-overlay .btn--primary, .rec-overlay .btn--danger { padding: 12px 26px; font-size: var(--fs-md); border-radius: var(--r-pill); box-shadow: 0 3px 14px rgba(0,0,0,0.45); }
.rec-overlay .av-timer { background: rgba(20,12,6,0.74); color: #FFF6EC; padding: 4px 10px; border-radius: var(--r-pill); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.l2d-canvas, .shared-model-canvas { width: 100%; height: 100%; display: block; }

/* ===== record: avatar capture controls ===== */
.avatar-controls { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.av-timer { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-ink-soft); }

/* ===== record: model view (pan/zoom) toolbar ===== */
.model-stage { position: relative; }
.view-bar { position: absolute; bottom: 84px; right: 64px; display: flex; gap: var(--sp-1); z-index: 41; }
.view-btn { width: 34px; height: 34px; border-radius: var(--r-pill); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); display: grid; place-items: center; box-shadow: var(--shadow-pop); cursor: pointer; }
.view-btn:active { transform: translateY(1px); }

/* ===== record: scene backdrop behind the avatar ===== */
.model-stage .scene-host { position: absolute; inset: 0; z-index: 0; }
.model-stage .model-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transform-origin: center center; pointer-events: none; }
.model-stage .model-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.model-stage .model-layer .l2d-canvas { pointer-events: none; }
/* The published model texture is PORTRAIT (1080x1920) while the stage rect is landscape.
   Stretching it to fill was why the model came out distorted on the canvas the moment the
   stage started showing the shared texture instead of drawing its own fit. Contain keeps
   the proportions the viewer sees. */
.model-stage .shared-model-canvas { pointer-events: none; object-fit: contain; }
.model-stage .model-pixel-hit-target { position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: none; }
.scene-host img { display: block; }

/* ===== record: teleprompter overlay — TOP of the canvas, so script + timeline show together ===== */
.stage-canvas .prompter-overlay {
  position: absolute; left: 0; right: 56px; top: 0; bottom: auto; max-height: 44%; z-index: 45;
  overflow-y: auto; padding: var(--sp-2) var(--sp-4); white-space: pre-wrap;
  background: rgba(20, 12, 6, 0.72); color: #fff; font-size: var(--fs-md);
  line-height: 1.45; font-weight: 600; -webkit-overflow-scrolling: touch;
  border-bottom-right-radius: var(--r-md);
}

/* ===== record: face-tracking mesh indicator (small, not a self-view) ===== */
.mesh-indicator { position: absolute; top: var(--sp-2); right: 64px; width: 88px; height: 66px; z-index: 40; background: rgba(20,12,6,0.5); border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.25); }
.track-screen { max-width: 460px; }

/* ===== tracking settings sliders ===== */
.ts-row { margin: var(--sp-3) 0; }
.ts-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.ts-val { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ts-range { width: 100%; accent-color: var(--c-accent); height: 26px; }

/* ===== audio meter + recording review ===== */
.meter { height: 14px; background: var(--c-surface-2); border-radius: var(--r-pill); overflow: hidden; }
.meter-fill { height: 100%; width: 0%; background: var(--c-accent); transition: width 60ms linear; }
.review-video { width: 100%; max-height: 48vh; border-radius: var(--r-md); background: #000; display: block; }

/* ===== project editor ===== */
.clip-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.clip-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); }
.clip-idx { width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface-2); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); flex: 0 0 auto; }
.clip-main { flex: 1; min-width: 0; }
.clip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-footer { margin-top: var(--sp-4); }

/* ===== mail ===== */
.mail-foldrow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
.mail-foldrow .chip { flex: 0 0 auto; }
.mail-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mail-row { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; padding: var(--sp-3); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); cursor: pointer; }
.mail-row:active { background: var(--c-surface-2); }
.mail-row--unread { border-inline-start: 3px solid var(--c-accent); }
.mail-row--unread .mail-from, .mail-row--unread .mail-subj { font-weight: 800; }
.mail-row-top { display: flex; align-items: center; gap: var(--sp-2); }
.mail-from { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { font-size: var(--fs-xs); color: var(--c-ink-faint); flex: 0 0 auto; }
.mail-subj { font-size: var(--fs-sm); color: var(--c-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-pager { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.mail-meta { padding: var(--sp-2) 0 var(--sp-3); border-bottom: var(--bw-thin) solid var(--c-line); margin-bottom: var(--sp-3); }
.mail-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.mail-attach .chip { text-decoration: none; }
.mail-body { line-height: 1.5; overflow-wrap: anywhere; }
.mail-body img { max-width: 100%; height: auto; }
.mail-body a { color: var(--c-accent-deep); }
.mail-text { white-space: pre-wrap; font: inherit; margin: 0; }

/* ===== record stage loading + model menu ===== */
.stage-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; color: var(--c-ink-faint); }
/* small on-screen icon rail — the model is one layer; these work with or without it */
.stage-rail { position: absolute; top: 8px; right: 8px; bottom: 8px; z-index: 41; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.stage-rail::-webkit-scrollbar { width: 0; height: 0; }
.rail-btn { width: 40px; height: 40px; flex: 0 0 auto; border: none; border-radius: 50%; background: rgba(20,12,4,0.62); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.rail-btn:active { transform: scale(0.94); }
.rail-btn.on { background: var(--c-accent); color: var(--c-accent-ink); }
.model-pop .sheet-actions { gap: var(--sp-2); }
@media (max-width: 420px) { .rail-btn { width: 36px; height: 36px; font-size: 15px; } }
/* Phone: shrink rail items so all of them (incl. Audio/mic at the bottom) fit without needing to scroll a thin strip */
@media (max-width: 600px) { .stage-rail { gap: 4px; } .rail-btn { width: 34px; height: 34px; font-size: 14px; } .rail-item { gap: 0; } .rail-lbl { font-size: 8px; max-width: 42px; } }

/* ===== handcam layer ===== */
.handcam-pip { position: absolute; z-index: 5; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 4px 14px rgba(0,0,0,0.3); cursor: grab; touch-action: none; }
.handcam-pip--static { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); cursor: default; }
.handcam-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.handcam-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(20,12,4,0.7); color: #fff; font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.handcam-resize { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; background: rgba(255,255,255,0.9); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.handcam-flip { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(20,12,4,0.7); color: #fff; font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.review-stage { position: relative; width: 100%; max-height: 54vh; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; background: #000; }
.review-stage .review-video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; background: transparent; z-index: 1; }
.review-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.review-stage .handcam-pip--static { pointer-events: none; }
.review-sticker { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.review-sticker img { width: 100%; display: block; }

/* ===== stage avatar rail + layer panel + asset/scene pickers + stickers ===== */
.rail-btn--avatar { padding: 0; overflow: hidden; background: var(--c-accent); }
.rail-avatar { width: 100%; height: 100%; display: grid; place-items: center; }
.rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.expr-panel { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--sp-2); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); margin-bottom: var(--sp-3); }
.layer-panel { position: absolute; left: 8px; top: 8px; z-index: 40; width: 210px; max-height: calc(100% - 16px); overflow-y: auto; background: rgba(255,253,249,0.97); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(0,0,0,0.18); padding: var(--sp-2); }
.lp-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.lp-head .lp-x { margin-inline-start: auto; }
.lp-row { display: flex; align-items: center; gap: 4px; padding: 3px 2px; border-radius: 6px; }
.lp-row.lp-off { opacity: 0.5; }
.lp-icon { width: 18px; text-align: center; color: var(--c-ink-soft); }
.lp-label { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-btn { width: 24px; height: 24px; border: none; background: none; color: var(--c-ink-soft); cursor: pointer; border-radius: 5px; flex: 0 0 auto; }
.lp-btn:active { background: var(--c-surface-2); }
.lp-btn.lp-rm { color: var(--c-danger); }
.scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); max-height: 46vh; overflow-y: auto; }
.scene-card { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); cursor: pointer; align-items: stretch; }
.scene-card-prev img { width: 100%; height: 100%; object-fit: cover; }
.scene-card--none { align-items: center; justify-content: center; gap: 4px; color: var(--c-ink-soft); }
.scene-card-prev { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.scene-prev-inner { position: absolute; inset: 0; }
.scene-card-name { font-size: var(--fs-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.asset-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--sp-2); }
.asset-tabs .chip { flex: 0 0 auto; }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); max-height: 50vh; overflow-y: auto; }
.asset-tile { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); cursor: pointer; }
.asset-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--c-surface-2); }
.asset-tile span { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--c-ink-soft); }
.sticker-layer { position: absolute; z-index: 5; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.sticker-img { width: 100%; display: block; pointer-events: none; }

/* ===== aspect-ratio selector + camera preview ===== */
.aspect-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); overflow-x: auto; }
.aspect-label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-soft); display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.aspect-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 4px 10px; background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-soft); }
.aspect-btn.on { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }
.aspect-box { display: inline-block; width: 14px; background: currentColor; border-radius: 2px; opacity: 0.55; }
.aspect-btn.on .aspect-box { opacity: 1; }
.cam-preview { width: 100%; max-height: 40vh; border-radius: var(--r-md); background: #000; display: block; transform: scaleX(-1); }

/* ===== always-on level meter ===== */
.rec-meterv { position: absolute; left: 8px; bottom: 66px; z-index: 41; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.rec-meterv .fa-microphone { color: rgba(255,255,255,0.85); font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.rec-meterv-track { width: 8px; height: 96px; border-radius: 4px; background: rgba(20,12,6,0.55); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.rec-meterv-fill { width: 100%; height: 0%; background: var(--c-accent); border-radius: 4px; }

/* ===== create hub ===== */
.create-choices { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.create-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); text-decoration: none; color: inherit; }
.create-card:active { background: var(--c-surface-2); }
.cc-ico { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-ink-soft); font-size: 20px; }
.cc-ico--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-title { font-weight: 700; font-size: var(--fs-lg); }
.cc-sub { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.create-recent { margin-top: var(--sp-2); }
.empty--soft { padding: var(--sp-5) var(--sp-3); }

/* ===== project preview player ===== */
.pv-root { margin: var(--sp-2) 0 var(--sp-3); }
.pv-stage { position: relative; width: auto; max-width: 100%; height: 44vh; max-height: 44vh; aspect-ratio: 1080 / 1920; margin: 0 auto; background: #000; border-radius: var(--r-md); overflow: hidden; display: block; }
.pv-stage[style*="1920 / 1080"], .pv-stage { /* aspect set inline */ }
.pv-bg { position: absolute; inset: 0; }
.pv-layer { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); pointer-events: none; }
.pv-model { background: transparent; }
.pv-video { width: 100%; height: 100%; object-fit: cover; background: transparent; display: block; }
.pv-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5); }
.pv-card-logo { font-weight: 800; letter-spacing: 2px; opacity: 0.7; font-size: var(--fs-md); }
.pv-card-title { font-weight: 800; font-size: var(--fs-2xl); line-height: 1.1; }
.pv-card-sub { font-weight: 600; opacity: 0.75; }
.pv-layer-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-layer--edit { pointer-events: auto; cursor: grab; outline: 2px solid var(--c-accent); outline-offset: -2px; touch-action: none; }
.pv-layer-resize { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 4px; background: var(--c-accent); box-shadow: 0 0 0 1px #fff; cursor: nwse-resize; display: none; z-index: 5; }
.pv-layer--edit .pv-layer-resize { display: block; }
.pv-overlays { position: absolute; inset: 0; pointer-events: none; }
.pv-ovl { position: absolute; transform: translate(-50%, -50%); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); pointer-events: auto; cursor: grab; touch-action: none; }
.pv-ovl-media { width: 100%; display: block; object-fit: cover; background: #000; }
.pv-blk { position: absolute; transform: translate(-50%, -50%); }
.pv-blk-media { width: 100%; display: block; }
.pv-ovl--edit { pointer-events: auto; cursor: grab; outline: 2px solid var(--c-accent); outline-offset: 1px; touch-action: none; }
.pv-ovl-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 4px; background: var(--c-accent); box-shadow: 0 0 0 1px #fff; cursor: nwse-resize; display: none; }
.pv-ovl--edit .pv-ovl-resize { display: block; }
.pv-ovl-rot { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent); color: #fff; box-shadow: 0 0 0 1px #fff; cursor: grab; display: none; place-items: center; font-size: 10px; touch-action: none; }
.pv-ovl--edit .pv-ovl-rot { display: grid; }
.pv-ovl-crop { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 4px; background: rgba(20,12,6,0.78); color: #fff; box-shadow: 0 0 0 1px #fff; cursor: pointer; display: none; place-items: center; font-size: 10px; touch-action: none; }
.pv-ovl--edit .pv-ovl-crop { display: grid; }
.pv-ovl--crop .pv-ovl-crop { background: var(--c-accent); }
.pv-crop-h { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--c-accent); display: none; touch-action: none; z-index: 6; }
.pv-crop-l, .pv-crop-r { cursor: ew-resize; }
.pv-crop-t, .pv-crop-b { cursor: ns-resize; }
.pv-ovl--crop .pv-crop-h { display: block; }
.pv-caplayer { position: absolute; inset: 0; pointer-events: none; }
.pv-caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 88%; padding: 2px 6px; border-radius: 8px; text-align: center; font-weight: 700; font-size: clamp(13px, 4vw, 22px); line-height: 1.15; pointer-events: none; z-index: 46; white-space: pre-wrap; cursor: grab; touch-action: none; }
.pv-caption--edit { min-width: 48px; min-height: 1.1em; cursor: text; caret-color: var(--c-accent); pointer-events: auto; touch-action: auto; user-select: text; -webkit-user-select: text; }
/* Same rule as the live stage: the words select, the frame just outside the box moves the
   caption. A pseudo-element is hit-tested as its owner, so this IS the grab area - an
   outline is painted only and cannot be grabbed. */
.pv-caption--edit::after { content: ''; position: absolute; inset: -14px; border: 2px dashed var(--c-accent); border-radius: 12px; cursor: grab; }
.pv-caption--edit:empty::before { content: 'Type your caption…'; opacity: 0.6; }
.pv-caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.caption-spell-pop { position: fixed; z-index: 10000; min-width: 164px; padding: 6px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-card); color: var(--c-ink); box-shadow: 0 10px 30px rgba(0,0,0,0.24); display: grid; gap: 4px; font-size: 12px; }
.caption-spell-pop-word { font-weight: 800; padding: 2px 4px 4px; }
.caption-spell-pop button { border: 0; background: transparent; color: inherit; text-align: left; padding: 7px 8px; border-radius: 6px; font: inherit; }
.caption-spell-pop button:hover { background: var(--c-soft); }
.dict-list { display: grid; gap: var(--sp-2); }
.dict-row { gap: var(--sp-2); }
.pv-caption [data-weebe-mention="1"] { color: inherit; text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: .12em; text-underline-offset: .16em; }
.pv-captools { position: absolute; left: 4px; top: 4px; width: min(calc(100% - 70px), 360px); max-height: 72%; z-index: 47; display: flex; flex-direction: column; background: rgba(20,12,6,0.9); border-radius: var(--r-md); pointer-events: auto; overflow: hidden; }
.pv-captools-grip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: grab; color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.12); flex: 0 0 auto; }
.pv-captools-rows { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pv-captools-rez { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; border-right: 3px solid rgba(255,255,255,0.5); border-bottom: 3px solid rgba(255,255,255,0.5); border-bottom-right-radius: var(--r-md); }
.pv-captools-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-captools-ic { color: rgba(255,255,255,0.85); font-size: 13px; width: 15px; text-align: center; }
.pv-capcolor { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); padding: 0; cursor: pointer; }
.pv-captool.btn { background: rgba(255,255,255,0.16); border-color: transparent; color: #FFF6EC; padding: 3px 10px; min-height: 0; font-weight: 700; }
.pv-captools-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.28); margin: 0 2px; flex: 0 0 auto; }
.pv-capfont { background: rgba(255,255,255,0.16); color: #FFF6EC; border: none; border-radius: var(--r-sm); padding: 3px 6px; font-size: 12px; font-weight: 700; max-width: 100px; }
.pv-capfont option { color: #111; }
.pv-capsize { width: 84px; accent-color: var(--c-accent); flex: 0 0 auto; }
.pv-capsizelbl { color: #FFF6EC; font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; }
.pv-captgl.btn { background: rgba(255,255,255,0.16); border-color: transparent; color: #FFF6EC; padding: 3px 0; min-height: 0; font-weight: 800; width: 30px; flex: 0 0 auto; text-align: center; }
.pv-captgl.is-on { background: var(--c-accent); color: #fff; }
.pv-tgl-i { font-style: italic; }
.pv-tgl-u { text-decoration: underline; }
.pv-tgl-s { text-decoration: line-through; }
.pv-tgl-o { -webkit-text-stroke: 0.6px #FFF6EC; }
.pv-caplinkrow { gap: 5px; }
.pv-caplink-input { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,0.14); border: none; border-radius: var(--r-sm); color: #FFF6EC; padding: 4px 8px; font-size: 12px; }
.pv-caplink-input::placeholder { color: rgba(255,255,255,0.5); }
.pv-mentionrow { align-items: stretch; gap: 6px; flex-direction: column; }
.mention-cards { display: flex; flex-direction: column; gap: 4px; width: 100%; max-height: 220px; overflow-y: auto; }
.mention-card { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 42px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.1); color: #FFF6EC; border-radius: var(--r-sm); padding: 3px 7px; cursor: pointer; text-align: left; }
.mention-card--active, .mention-card:hover { background: rgba(255,255,255,0.22); border-color: var(--c-accent); }
.mention-card__img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: rgba(0,0,0,0.3); flex: 0 0 auto; }
.mention-card__ph { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); font-size: 15px; flex: 0 0 auto; }
.mention-card__name { font-size: 12px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.mention-card__type { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 6px; border-radius: var(--r-pill); flex: 0 0 auto; }
.mention-card__type--character { background: #7A4DBF; color: #fff; }
.mention-card__type--series { background: #2E7DB8; color: #fff; }
.mention-card__type--product { background: #3FA66A; color: #fff; }
.mention-card__type--brand { background: #B8862E; color: #fff; }

/* Card-style picker: which hover card a viewer gets for the tag under the caret. Each
   chip is a real miniature drawn by the shared card renderer, so the choice is made by
   sight. Shared by the Go Live and record caption editors. */
.pv-cardtplrow { align-items: stretch; gap: 6px; flex-direction: column; }
.pv-cardtpl-list { display: flex; gap: 6px; width: 100%; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.pv-cardtpl-empty { font-size: 11px; color: rgba(255,255,255,0.6); }
.pv-cardtpl { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; padding: 5px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: #FFF6EC; cursor: pointer; }
.pv-cardtpl--active, .pv-cardtpl:hover { background: rgba(255,255,255,0.2); border-color: var(--c-accent); }
.pv-cardtpl__name { font-size: 10px; font-weight: 700; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .pv-cardtpl-list { gap: 5px; }
  .pv-cardtpl__name { max-width: 84px; }
}

/* ---- Go Live captions: a data-class stage layer (text + style + animation) ---- */
.gl-cap { position: absolute; z-index: 30; min-width: 40px; min-height: 24px; touch-action: none; cursor: grab; }
.gl-cap__rot { width: 100%; border-radius: 8px; text-align: center; }
.gl-cap__anim { width: 100%; overflow: hidden; }
.gl-cap__text { width: 100%; font-weight: 700; line-height: 1.15; white-space: pre-wrap; word-break: break-word; outline: none; }
.gl-cap__text a { color: var(--gl-cap-link, inherit); text-decoration: underline; text-underline-offset: 2px; }
.gl-cap__text [data-weebe-mention="1"] { color: var(--gl-cap-link, inherit); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: .12em; text-underline-offset: .16em; }
.gl-cap--edit { cursor: grab; }
/* The editing frame sits OUTSIDE the box as a pseudo-element: it is a real grab area for
   moving the caption, and because it never participates in layout the measured layer box
   (and therefore what viewers are sent) is identical whether editing or not. */
.gl-cap--edit::before { content: ''; position: absolute; inset: -14px; border: 2px dashed var(--c-accent); border-radius: 12px; }
.gl-cap--edit .gl-cap__text { cursor: text; touch-action: auto; user-select: text; -webkit-user-select: text; }
.gl-cap__text[contenteditable="true"]:empty::before { content: 'Type your caption…'; opacity: 0.6; }
.gl-cap__x, .gl-cap__rez { opacity: 0; transition: opacity 0.15s; }
.gl-cap:hover .gl-cap__x, .gl-cap:hover .gl-cap__rez, .gl-cap--edit .gl-cap__x, .gl-cap--edit .gl-cap__rez { opacity: 1; }
.gl-cap__text--ticker { display: inline-block; width: max-content; max-width: none; white-space: nowrap; padding-left: 100%; animation: gl-cap-ticker linear infinite; }
.gl-cap__anim--pulse { animation: gl-cap-pulse ease-in-out infinite; }
.gl-cap__anim--slide-left { animation: gl-cap-slide-left ease-out 1 both; }
.gl-cap__anim--slide-right { animation: gl-cap-slide-right ease-out 1 both; }
.gl-cap__anim--slide-up { animation: gl-cap-slide-up ease-out 1 both; }
.gl-cap__anim--slide-down { animation: gl-cap-slide-down ease-out 1 both; }
@keyframes gl-cap-ticker { to { transform: translate3d(-100%, 0, 0); } }
@keyframes gl-cap-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gl-cap-slide-left { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gl-cap-slide-right { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gl-cap-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gl-cap-slide-down { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.gl-shape { position: absolute; z-index: 29; min-width: 16px; min-height: 12px; touch-action: none; cursor: grab; }
.gl-shape__rot { width: 100%; height: 100%; }
.gl-shape__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gl-shape--edit .gl-shape__rot { outline: 2px dashed var(--c-accent); outline-offset: 3px; }
.gl-shape__x, .gl-shape__rez { opacity: 0; transition: opacity 0.15s; }
.gl-shape:hover .gl-shape__x, .gl-shape:hover .gl-shape__rez, .gl-shape--edit .gl-shape__x, .gl-shape--edit .gl-shape__rez { opacity: 1; }
.gl-world { position: absolute; z-index: 28; min-width: 48px; min-height: 27px; touch-action: none; cursor: grab; background: #05060a; overflow: hidden; }
.gl-world__canvas { display: block; width: 100%; height: 100%; }
.gl-world__badge { position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); border-radius: 4px; padding: 2px 6px; pointer-events: none; }
.gl-world__fault { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12px; color: #ffd7d7; background: rgba(26,8,8,0.86); pointer-events: none; }
.gl-world__x, .gl-world__rez { opacity: 0; transition: opacity 0.15s; }
.gl-world:hover .gl-world__x, .gl-world:hover .gl-world__rez { opacity: 1; }
.gl-world-panel { display: flex; flex-direction: column; gap: 10px; }
.gl-world-panel .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gl-world-panel .req { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--c-line, #3a3a3a); border-radius: 6px; }
.gl-world-panel .req b { flex: 1; }
.worlds .worlds-list, .worlds-editor .cards { display: flex; flex-direction: column; gap: 10px; }
.worlds-editor .screen-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.worlds-editor .screen-head h1 { flex: 1 1 auto; margin: 0; font-size: 20px; }
.worlds-editor .tabs { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0; border-bottom: 1px solid var(--c-line, #333); margin-bottom: 10px; }
.worlds-editor .tab { flex: 0 0 auto; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: inherit; opacity: 0.75; white-space: nowrap; }
.worlds-editor .tab.is-active { opacity: 1; background: var(--c-accent-soft, rgba(255,176,103,0.18)); font-weight: 700; }
.worlds-editor .worlds-body { display: flex; flex-direction: column; gap: 10px; }
.worlds-editor .field { display: flex; flex-direction: column; gap: 4px; }
.worlds-editor .field > span:first-child { font-size: 12px; opacity: 0.75; }
.worlds-editor .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.worlds-editor .card { border: 1px solid var(--c-line, #333); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.worlds-editor .card.is-selected { border-color: var(--c-accent, #FFB067); }
.worlds-editor .badge { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--c-accent, #FFB067); color: #1B1206; font-weight: 700; }
.worlds-editor .worlds-build { height: calc(100vh - 200px); min-height: 480px; }
.worlds-editor--build { max-width: none; margin: 0; padding: 6px 8px 6px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; animation: none; }
.worlds-editor--build .tabs { margin-bottom: 4px; flex: 0 0 auto; }
.worlds-editor--build .screen-head { flex: 0 0 auto; }
.worlds-editor--build .worlds-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.worlds-editor--build .worlds-build { flex: 1 1 auto; height: auto; min-height: 0; display: flex; flex-direction: column; }
.worlds-editor--build .we { flex: 1 1 auto; height: auto; min-height: 0; }
.worlds-editor .worlds-name { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; }
.worlds-editor .worlds-name:hover, .worlds-editor .worlds-name:focus { border-color: var(--c-line, #333); outline: none; background: var(--c-surface, rgba(0,0,0,0.04)); }
.worlds-editor .btn.is-on { background: var(--c-accent, #FFB067); color: #1B1206; }
.control-link { border: 1px solid var(--c-line, #333); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.control-link .row { display: flex; flex-wrap: wrap; gap: 8px; }
.worlds .worlds-sub { font-size: 14px; margin: 14px 0 4px; opacity: 0.8; }
@media (max-width: 900px) { .worlds-editor .worlds-build { height: auto; min-height: 88vh; } }
@media (max-width: 600px) { .worlds-editor .row .input { flex: 1 1 120px; } .worlds-editor .screen-head h1 { flex-basis: 100%; } }
.ws-toolbar { align-items: center; }
.ws-notices { display: flex; flex-direction: column; gap: 6px; }
.ws-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: rgba(255,176,103,0.14); font-size: 13px; }
.ws-notice--bad { background: rgba(200,60,60,0.18); }
.ws-notice ul { margin: 0; padding-left: 18px; flex-basis: 100%; }
.ws-stage { display: flex; gap: 10px; min-height: 60vh; }
.ws-canvas { position: relative; flex: 1 1 auto; min-width: 0; height: 60vh; overflow: hidden; background: #0f1014; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 20px 20px; border-radius: 8px; touch-action: none; cursor: grab; outline: none; }
.ws-canvas:focus { box-shadow: inset 0 0 0 1px var(--c-accent, #FFB067); }
.ws-edges, .ws-nodes { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; }
.ws-edges { width: 1px; height: 1px; pointer-events: none; }
.ws-edge { fill: none; stroke: #aaa; stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.ws-edge--cond { stroke-dasharray: 6 4; stroke: #e0b060; }
.ws-edge.is-selected { stroke: #FFB067; stroke-width: 3; }
.ws-edge-label { fill: #ddd; font-size: 11px; font-family: ui-monospace, monospace; pointer-events: none; }
.ws-node { position: absolute; box-sizing: border-box; border: 1px solid var(--k, #666); border-left-width: 6px; border-radius: 8px; background: #1b1c22; color: #eee; cursor: grab; user-select: none; overflow: hidden; }
.ws-node.is-selected { box-shadow: 0 0 0 2px var(--c-accent, #FFB067); }
.ws-node.is-start .ws-node__head { color: var(--c-accent, #FFB067); }
.ws-node__head { display: flex; align-items: center; gap: 6px; padding: 4px 8px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.85; }
.ws-node__lock { margin-left: auto; }
.ws-node__world { margin-left: auto; font-weight: 600; opacity: 0.8; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-node__world.is-missing { color: #f88; opacity: 1; }
.ws-node__world + .ws-node__lock { margin-left: 4px; }
.stories-meta { padding: 0 0 8px; }
.worlds-editor .worlds-stories { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ws-node__body { padding: 2px 8px 6px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #888; border: 2px solid #1b1c22; cursor: crosshair; z-index: 2; }
.ws-port--in { left: -7px; top: 50%; margin-top: -6px; }
.ws-port--out { right: -7px; }
.ws-port.is-on { background: var(--c-accent, #FFB067); }
.ws-port:hover { background: #fff; }
.ws-props { flex: 0 0 360px; max-width: 360px; display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: 60vh; padding: 4px; }
.ws-props h3, .ws-props h4 { margin: 4px 0; }
.ws-json { font-family: ui-monospace, monospace; font-size: 12px; }
.ws-effects, .ws-options { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 800px) { .ws-stage { flex-direction: column; } .ws-canvas { height: 46vh; } .ws-props { flex: 1 1 auto; max-width: none; max-height: none; } }
.gl-shape-addrow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.gl-shape-add { flex: 0 0 auto; }
.gl-groupbox { position: absolute; z-index: 60; border: 2px solid #FFB067; border-radius: 4px; background: rgba(255,176,103,0.10); cursor: grab; touch-action: none; }
.gl-groupbox:active { cursor: grabbing; }
.gl-groupbox__h { position: absolute; width: 16px; height: 16px; background: #FFB067; border: 2px solid #1B1206; border-radius: 3px; touch-action: none; }
.gl-groupbox__h--tl { left: -9px; top: -9px; cursor: nwse-resize; }
.gl-groupbox__h--tr { right: -9px; top: -9px; cursor: nesw-resize; }
.gl-groupbox__h--bl { left: -9px; bottom: -9px; cursor: nesw-resize; }
.gl-groupbox__h--br { right: -9px; bottom: -9px; cursor: nwse-resize; }
.gl-groupbox--noscale .gl-groupbox__h { display: none; }
.gl-groupbox--locked { border-style: dashed; cursor: not-allowed; }
.gl-groupbox__tools { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; display: flex; gap: 4px; padding: 4px; border-radius: 6px; background: #1B1206; border: 1px solid #FFB067; }
.gl-groupbox__btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: #2E2113; color: #FFF6EC; font-size: 12px; cursor: pointer; }
.gl-groupbox__btn:hover { background: #3D2C19; }
.gl-groupbox__btn.is-on { background: #FFB067; color: #1B1206; }
.lp-row--grouped { border-left: 3px solid #FFB067; padding-left: 5px; }
.lp-row--groupon { background: rgba(255,176,103,0.18); }
.lp-pick.is-on, .lp-grouped { color: #FFB067; }
.lp-head__hint { color: #FFB067; opacity: .75; margin-left: auto; font-size: 12px; }
.lp-pick--grouped { color: #1B1206; background: #FFB067; border-radius: 5px; }
.gl-captools { position: fixed; left: 16px; top: 90px; right: auto; bottom: auto; width: min(calc(100vw - 24px), 390px); max-height: min(78vh, 560px); z-index: 220; }
.gl-captools-corner { position: absolute; width: 16px; height: 16px; cursor: grab; touch-action: none; }
.gl-captools-corner--tl { left: 0; top: 0; border-left: 3px solid rgba(255,255,255,0.45); border-top: 3px solid rgba(255,255,255,0.45); border-top-left-radius: var(--r-md); }
.gl-captools-corner--tr { right: 0; top: 0; border-right: 3px solid rgba(255,255,255,0.45); border-top: 3px solid rgba(255,255,255,0.45); border-top-right-radius: var(--r-md); }
.gl-captools-corner--bl { left: 0; bottom: 0; border-left: 3px solid rgba(255,255,255,0.45); border-bottom: 3px solid rgba(255,255,255,0.45); border-bottom-left-radius: var(--r-md); }
.gl-captools-corner--br { right: 0; bottom: 0; border-right: 3px solid rgba(255,255,255,0.45); border-bottom: 3px solid rgba(255,255,255,0.45); border-bottom-right-radius: var(--r-md); }
.gl-cap-alpha { width: 38px; height: 12px; accent-color: var(--c-accent); flex: 0 0 auto; }
.wb-checker { background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.25) 75%), linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.25) 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.wb-swatch { width: 34px; height: 26px; padding: 0; border-radius: 6px; border: 2px solid rgba(255,255,255,0.45); cursor: pointer; flex: 0 0 auto; background-color: #2b2015; background-image: linear-gradient(var(--wb-swatch, #fff), var(--wb-swatch, #fff)), linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.3) 75%), linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.3) 75%); background-size: 100% 100%, 10px 10px, 10px 10px; background-position: 0 0, 0 0, 5px 5px; }
.wb-swatch:hover { border-color: var(--c-accent); }
.wb-swatch--none { background-image: linear-gradient(to bottom right, transparent 45%, #ff5a5a 45%, #ff5a5a 55%, transparent 55%); }
.wb-cp { position: fixed; z-index: 300; width: 208px; padding: 10px; border-radius: 10px; background: #1B1206; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 10px 34px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 8px; color: #FFF6EC; }
.wb-cp__title { font-size: 11px; font-weight: 700; opacity: 0.85; }
.wb-cp__sv { position: relative; height: 116px; border-radius: 7px; cursor: crosshair; touch-action: none; background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, var(--wb-hue, #f00)); }
.wb-cp__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.6); pointer-events: none; }
.wb-cp__row { display: flex; align-items: center; gap: 7px; }
.wb-cp__ic { font-size: 12px; opacity: 0.85; width: 13px; text-align: center; }
.wb-cp__preview { width: 26px; height: 20px; flex: 0 0 auto; border-radius: 5px; border: 1px solid rgba(255,255,255,0.4); background-image: linear-gradient(var(--wb-swatch, #fff), var(--wb-swatch, #fff)), linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.3) 75%), linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.3) 75%); background-size: 100% 100%, 8px 8px, 8px 8px; background-position: 0 0, 0 0, 4px 4px; }
.wb-cp__hue, .wb-cp__alpha { flex: 1 1 auto; height: 16px; border-radius: 8px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.wb-cp__hue { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.wb-cp__alpha { background-image: linear-gradient(to right, transparent, var(--wb-solid, #fff)), linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.3) 75%), linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.3) 75%); background-size: 100% 100%, 8px 8px, 8px 8px; background-position: 0 0, 0 0, 4px 4px; }
.wb-cp__hue::-webkit-slider-thumb, .wb-cp__alpha::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #1B1206; cursor: pointer; }
.wb-cp__hue::-moz-range-thumb, .wb-cp__alpha::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #1B1206; cursor: pointer; }
.wb-cp__pct { font-size: 11px; font-weight: 700; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.wb-cp__hex { width: 100%; padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); background: #2E2113; color: #FFF6EC; font: 12px ui-monospace, "Courier New", monospace; text-transform: uppercase; }
@media (max-width: 480px) { .wb-cp { width: min(84vw, 208px); } }
.gl-cap-num { width: 52px; background: rgba(255,255,255,0.16); color: #FFF6EC; border: none; border-radius: var(--r-sm); padding: 3px 6px; font-size: 12px; font-weight: 700; text-align: center; }
.gl-cap-num::-webkit-inner-spin-button { opacity: 1; }
.gl-cap-animtoggle { background: rgba(255,255,255,0.16); border-color: transparent; color: #FFF6EC; font-weight: 700; }
.gl-cap-animtoggle.is-open .fa-chevron-down { transform: rotate(180deg); }
.gl-cap-animbody { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 2px 4px; border-left: 2px solid rgba(255,255,255,0.2); }
.gl-cap-animrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gl-cap-animrow .chip { font-size: 11px; }
.gl-cap-tagpending { outline: 2px dashed var(--c-accent); outline-offset: 1px; border-radius: 3px; background: rgba(255,122,26,0.18); }
.mention-typefilter { position: relative; flex: 0 0 auto; }
.mention-typefilter__btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: rgba(255,255,255,0.16); color: #FFF6EC; border-radius: var(--r-sm); padding: 4px 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.mention-typefilter__btn.is-open .fa-chevron-down { transform: rotate(180deg); }
.mention-typefilter__menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: 160px; background: rgba(20,12,6,0.97); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-sm); padding: 6px; }
.mention-typefilter__item { display: flex; align-items: center; gap: 7px; color: #FFF6EC; font-size: 11px; font-weight: 700; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.mention-typefilter__item:hover { background: rgba(255,255,255,0.12); }
.mention-typefilter__item input { accent-color: var(--c-accent); margin: 0; }
.mention-typefilter__item .fa-solid { width: 14px; text-align: center; font-size: 11px; color: rgba(255,255,255,0.7); }
.gl-cap-item { display: flex; flex-direction: column; gap: 2px; }
.gl-cap-row__tags { display: flex; gap: 4px; flex-wrap: wrap; padding-left: 30px; }
.gl-cap-tagchip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--c-accent); background: rgba(255,122,26,0.14); border-radius: var(--r-pill); padding: 1px 7px; }
.gl-cap-animtoggle .fa-chevron-down { font-size: 9px; }
.gl-cap-animtoggle.is-active { color: var(--c-accent); }
.gl-cappanel { width: min(calc(100vw - 24px), 320px); }
.gl-cappanel__body { padding: 8px; overflow-y: auto; max-height: min(60vh, 420px); }
.gl-cappanel .gl-cap-row { background: rgba(255,255,255,0.1); color: #FFF6EC; }
.gl-cappanel .gl-cap-row .lp-btn { color: #FFF6EC; }
.gl-cap-lockhost .gl-locktb__row { flex-wrap: wrap; }
.gl-cap-lockhost .gl-locktb__name, .gl-cap-lockhost .gl-locktb__btn, .gl-cap-lockhost .gl-locktb__field { color: rgba(255,246,236,0.85); }
.gl-cap-lockhost .gl-locktb__btn:hover { background: rgba(255,255,255,0.16); }
.gl-cap-lockhost .gl-locktb__btn.on { background: var(--c-accent); color: #fff; }
.gl-cap-lockhost .gl-locktb__range { border-top-color: rgba(255,255,255,0.2); }
.gl-cap-lockhost .gl-locktb__num { background: rgba(255,255,255,0.14); border-color: transparent; color: #FFF6EC; width: 52px; }
.gl-cap-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.gl-cap-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: var(--r-sm); background: rgba(0,0,0,0.06); }
.gl-cap-row__name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.gl-cap-row__anim { color: var(--c-accent); font-size: 11px; flex: 0 0 auto; }
.pv-capcolorfield { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.pv-capcolorin { width: 26px; height: 22px; padding: 0; border: 2px solid rgba(255,255,255,0.7); border-radius: 6px; background: transparent; cursor: pointer; flex: 0 0 auto; }
.pv-capcolorin::-webkit-color-swatch-wrapper { padding: 1px; }
.pv-capcolorin::-webkit-color-swatch { border: none; border-radius: 4px; }
.pv-captools-lbl { color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 700; }
.pv-cc { position: absolute; top: var(--sp-2); right: var(--sp-2); background: rgba(20,12,4,0.78); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.pv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); color: rgba(255,255,255,0.8); font-size: 28px; }
.pv-empty p { font-size: var(--fs-sm); margin: 0; }
.pv-transport { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.pv-play { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--c-accent); color: var(--c-accent-ink); font-size: 16px; cursor: pointer; }
.pv-scrub { position: relative; flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: var(--r-pill); background: linear-gradient(var(--c-surface-2), var(--c-surface-2)) center / 100% 6px no-repeat; }
.pv-scrub-fill { height: 6px; width: 0%; background: var(--c-accent); border-radius: var(--r-pill); }
.pv-time { font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* ===== timeline ===== */
.sec-h { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.tl { position: relative; display: flex; gap: 3px; height: 56px; padding: 3px; background: var(--c-surface-2); border-radius: var(--r-md); overflow: hidden; }
.tl-seg { min-width: 12px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tl-seg--card { background: repeating-linear-gradient(45deg, var(--c-line), var(--c-line) 6px, transparent 6px, transparent 12px); color: var(--c-ink-faint); font-size: var(--fs-xs); font-weight: 700; min-width: 22px; }
.tl-clip { position: relative; border: 2px solid transparent; background: var(--c-accent-soft); color: var(--c-ink); cursor: pointer; flex-direction: column; gap: 0; padding: 0; }
.tl-clip--sel { border-color: var(--c-accent-deep); }
.tl-clip-n { font-weight: 800; font-size: var(--fs-sm); }
.tl-clip-d { font-size: 10px; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.tl-empty { color: var(--c-ink-soft); font-size: var(--fs-sm); display: flex; align-items: center; padding: 0 var(--sp-3); }
.tl-playhead { position: absolute; top: 3px; bottom: 3px; left: 0; width: 2px; background: var(--c-ink); pointer-events: none; }

/* ===== multi-track timeline editor ===== */
.tl-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.tle-root { margin-top: var(--sp-1); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.tle-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tle-inner { position: relative; }
.tle-ruler { position: relative; border-bottom: var(--bw-thin) solid var(--c-line); background: var(--c-surface-2); }
.tle-corner { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--c-ink-faint); text-transform: uppercase; background: var(--c-surface-2); z-index: 3; }
.tle-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--c-line); }
.tle-tick span { position: absolute; left: 3px; top: 4px; font-size: 10px; color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.tle-rows { position: absolute; left: 0; top: 0; }
.tle-row { position: relative; border-bottom: var(--bw-thin) solid var(--c-line); }
.tle-label { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 3px 6px; background: var(--c-surface-2); border-right: var(--bw-thin) solid var(--c-line); }
.tle-label-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tle-track-name { font-size: 11px; font-weight: 700; color: var(--c-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tle-z { align-self: flex-start; font-size: 8px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--c-surface); color: var(--c-ink-faint); line-height: 1.5; }
.tle-z--front { background: rgba(63,166,106,0.2); color: #3FA66A; }
.tle-z--back { background: rgba(224,122,95,0.22); color: #E07A5F; }
.tle-label--model { border-right: 2px solid var(--c-accent); }
.tle-label--model .tle-track-name { color: var(--c-accent); }
.tle-row--rec-now { box-shadow: inset 3px 0 0 var(--c-accent); }
.tle-row--rec-now .tle-area { background: rgba(255,122,26,0.06); }
.tle-ph-tag { position: absolute; top: 2px; left: 4px; white-space: nowrap; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px 4px 4px 0; background: var(--c-ink); color: var(--c-surface); pointer-events: none; }
.tle-ph-tag--back { background: #E07A5F; color: #fff; }
.tle-block--model { opacity: 0.9; border: 1px dashed rgba(255,255,255,0.5); }
.tle-block--model .tle-block-label { color: #fff; }
.tle-add { width: 20px; height: 20px; flex: 0 0 auto; border: none; border-radius: 6px; background: var(--c-surface); color: var(--c-ink-soft); font-size: 15px; line-height: 1; cursor: pointer; }
.tle-area { position: absolute; top: 0; }
.tle-block { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; display: flex; align-items: center; padding: 0 8px; color: #fff; cursor: grab; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); touch-action: none; }
.tle-block--sel { box-shadow: inset 0 0 0 2px var(--c-ink), 0 0 0 2px var(--c-ink); }
.tle-block-label { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,0.25); pointer-events: none; position: relative; z-index: 2; }
.tle-wave { position: absolute; left: 0; top: 7px; width: 100%; height: calc(100% - 14px); pointer-events: none; opacity: 0.5; z-index: 1; }
.tle-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; touch-action: none; z-index: 3; }
.tle-resize::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 40%; border-radius: 2px; background: rgba(255,255,255,0.7); }
.tle-block { gap: 6px; }
.tle-thumb { height: 100%; width: auto; aspect-ratio: 1 / 1; flex: 0 0 auto; object-fit: cover; border-radius: 6px 0 0 6px; display: block; background: rgba(0,0,0,0.35); pointer-events: none; }
.tle-block--thumb { padding-left: 0; }
.tle-block-label > i { margin-right: 4px; }
.tle-block--drag { opacity: 0.9; z-index: 6; box-shadow: 0 6px 16px rgba(0,0,0,0.4); cursor: grabbing; }
.tle-area--drop { background: rgba(91,143,240,0.16); outline: 2px dashed var(--c-accent); outline-offset: -3px; border-radius: 6px; }
.tle-insert { position: absolute; left: 0; height: 3px; margin-top: -1px; background: var(--c-accent); border-radius: 2px; z-index: 7; box-shadow: 0 0 0 1px #fff, 0 0 6px rgba(91,143,240,0.6); pointer-events: none; }
.tle-insert::before { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 1px #fff; }
.tle-playhead { position: absolute; top: 0; width: 2px; background: var(--c-ink); pointer-events: none; z-index: 4; }
.panel-host { margin-top: var(--sp-3); }
.panel-hint { text-align: center; }
.ce-asset { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); }

/* ===== selected clip editor ===== */
.clip-editor { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); }
.ce-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ce-title { font-weight: 700; }
.ce-trims { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ce-trim { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ce-trim--btn { justify-content: flex-end; }
.input--num { width: 100%; }
.ta { width: 100%; resize: vertical; min-height: 64px; font: inherit; }

@media (max-width: 420px) {
  .ce-trims { flex-direction: column; gap: var(--sp-2); }
  .pv-stage { width: 100%; height: auto; max-height: 46vh; }
}

.asset-import-row { margin: var(--sp-2) 0 var(--sp-3); }
.asset-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.asset-thumb { display: block; border: 1px solid var(--c-line); border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--c-surface); line-height: 0; }
.asset-thumb img { height: 72px; width: auto; max-width: 128px; object-fit: cover; display: block; }
.asset-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink-soft); text-decoration: none; }
.asset-chip:hover, .asset-thumb:hover { border-color: var(--c-accent-deep); }

.blog-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.blog-row .blog-check { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-accent-deep); flex: 0 0 auto; }
.blog-row .li-main { flex: 1 1 auto; min-width: 0; }
.chip--mini { font-size: 11px; padding: 1px var(--sp-1); }
.select-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); background: var(--c-surface); border-top: 1px solid var(--c-line); }
.select-bar .sb-count { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-inline-end: auto; }
.blog-hero { display: block; border: 1px solid var(--c-line); border-radius: var(--radius-sm, 8px); overflow: hidden; margin-bottom: var(--sp-3); line-height: 0; }
.blog-hero img { width: 100%; height: auto; max-height: 220px; object-fit: cover; display: block; }
.blog-body { font-size: var(--fs-md); line-height: 1.7; color: var(--c-ink); }
.blog-body p { margin: 0 0 var(--sp-3); }
.blog-body h1, .blog-body h2, .blog-body h3 { font-family: var(--font-display); margin: var(--sp-4) 0 var(--sp-2); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-3) 0; }
.blog-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }

.blog-link { display: flex; align-items: flex-start; gap: var(--sp-3); }
.blog-thumb { flex: 0 0 auto; width: 64px; height: 48px; border-radius: var(--radius-sm, 8px); object-fit: cover; background: var(--c-surface); border: 1px solid var(--c-line); }
.blog-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--c-ink-faint); }
.blog-text { flex: 1 1 auto; min-width: 0; }
.blog-meta { font-size: var(--fs-xs); color: var(--c-ink-faint); margin-top: 2px; }
.blog-title-txt em, .seg-lines em, .seg-headline em, .blog-body em, .li-title em { font-style: italic; }

.pv-blk--embed { aspect-ratio: 16 / 9; }
.pv-embed { width: 100%; height: 100%; border: 0; display: block; border-radius: 4px; }

.inline-field { position: relative; }
.screen-head .inline-field { flex: 1 1 auto; min-width: 0; }
.inline-wrap { position: relative; }
.inline-edit-btn { position: absolute; top: 0; right: 0; opacity: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink-soft); cursor: pointer; transition: opacity .12s; }
.inline-wrap:hover .inline-edit-btn, .inline-field:focus-within .inline-edit-btn { opacity: 1; }
.inline-bar { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.blog-title { font-size: var(--fs-xl); margin: 0; }
.blog-excerpt { color: var(--c-ink-soft); }
.blog-hero-edit { display: block; width: 100%; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--c-surface); position: relative; cursor: pointer; line-height: 0; margin-bottom: var(--sp-3); }
.blog-hero-img { width: 100%; height: auto; max-height: 280px; object-fit: cover; display: block; }
.blog-hero-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); height: 120px; color: var(--c-ink-faint); font-size: var(--fs-sm); line-height: 1.4; }
.blog-hero-pen { position: absolute; top: var(--sp-2); right: var(--sp-2); background: rgba(0,0,0,0.55); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

.recovery-banner { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); background: var(--c-accent-soft); border: 1px solid var(--c-accent); border-radius: var(--radius-sm, 8px); font-size: var(--fs-sm); }
.recovery-banner .rb-text { flex: 1 1 auto; }
.recovery-banner i { color: var(--c-accent-deep); }

.rail-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rail-item--track { position: relative; }
.rail-item--track .rail-btn.chip--on { background: var(--c-accent); color: var(--c-accent-ink); }
.rail-gear { position: absolute; top: -4px; right: -4px; left: auto; width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: #fff; display: grid; place-items: center; font-size: 10px; cursor: pointer; z-index: 3; padding: 0; }
.rail-lbl { font-size: 9px; line-height: 1.05; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7); max-width: 48px; text-align: center; }
@media (max-width: 420px) { .rail-lbl { font-size: 8px; } }

.enrich-row { display: flex; gap: var(--sp-2); }
.enrich-btn { flex: 1 1 auto; }

/* Blog-post entity review (suggest → field-by-field approve) */
.ent-field { margin-top: var(--sp-4); }
.ent-field > .label { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.ent-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ent-row { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink); font: inherit; cursor: pointer; }
.ent-row.is-on { border-color: var(--c-accent); background: var(--c-accent-soft); }
.ent-row.is-locked { opacity: .7; cursor: default; }
.ent-check { color: var(--c-ink-faint); display: inline-flex; }
.ent-row.is-on .ent-check { color: var(--c-accent-deep); }
.ent-name { flex: 1 1 auto; font-weight: 600; font-size: 14px; }
.ent-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ent-badge--match { background: var(--c-ok); color: #fff; }
.ent-badge--new { background: var(--c-warn); color: #3A2E00; }
.ent-badge--done { background: var(--c-surface-2); color: var(--c-ink-soft); }

/* Script: prompt-edit label row, improve/history actions, revision list */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.script-actions { display: flex; gap: var(--sp-2); margin: var(--sp-3) 0; }
.script-actions .script-improve { flex: 1 1 auto; }
.rev-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 56vh; overflow-y: auto; }
.rev-row { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.rev-meta { flex: 1 1 auto; min-width: 0; }
.rev-label { font-weight: 600; font-size: 13px; color: var(--c-ink); }
.rev-when { font-size: 11px; color: var(--c-ink-faint); }

/* Card takes (script screen chips + takes sheet) */
.script-actions { flex-wrap: wrap; }
.take-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 52vh; overflow-y: auto; }
.take-row { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.take-row--chosen { border-color: var(--c-accent); background: var(--c-accent-soft); }
.take-info { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0;
  background: none; border: 0; padding: 0; font: inherit; color: var(--c-ink); text-align: left; cursor: pointer; }
.take-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink-soft); flex: 0 0 auto; }
.take-row--chosen .take-ic { background: var(--c-accent); color: #fff; }
.take-meta { display: flex; flex-direction: column; min-width: 0; }
.take-label { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take-sub { font-size: 11px; color: var(--c-ink-faint); }
.take-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.take-player { padding: 4px 0 8px; }
.take-player video { width: 100%; max-height: 40vh; border-radius: var(--r-sm); background: #000; }
.take-player audio { width: 100%; }

/* Record: source picker + deep-link back bar + per-card takes on the prompter */
.rec-back { margin-bottom: var(--sp-2); }
.rec-back .back-link { margin-bottom: 0; }
.po-takes { position: relative; }
.po-count { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--r-pill); background: var(--c-accent); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1; }
.review-voice { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.review-voice-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-pill); background: var(--c-accent); color: #fff; font-size: 18px; flex: 0 0 auto; }
.review-voice audio, .review-audio { flex: 1 1 auto; width: 100%; min-width: 0; }

/* In-record script editor: full-screen drawer over the stage (the stage keeps running under it) */
.rec-editor { position: fixed; inset: 0; z-index: 46; background: var(--c-bg); display: flex; flex-direction: column;
  padding-top: var(--safe-top); }
.rec-editor-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-line); flex: 0 0 auto; }
.rec-editor-title { font-family: var(--font-display); font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-editor-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) var(--sp-3) calc(var(--sp-4) + var(--safe-bottom)); }

/* Record: embedded video editor section */
.rec-video-sec { margin-top: var(--sp-4); }
.rec-video-sec > .sec-h { margin-bottom: var(--sp-2); }
.rec-proj-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; padding: 5px 8px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); margin-bottom: var(--sp-2); }
.rec-proj-bar .btn { flex: 0 0 auto; }
.rec-render-chip { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700;
  background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer; white-space: nowrap; }
.rec-render-chip--bad { background: var(--c-danger); color: #fff; }
/* The bar floats over the stage in the strip the rail leaves it - 263px on a 375px phone, and
   in landscape only 200px. Five controls do not fit that, and with no floor the video's NAME
   is what flex takes the space from: it measured 30px, an ellipsis. The name asks for a small
   share and grows into what is left, so the render status wraps to a second line only when it
   has to, and the name stays readable either way. */
.rec-proj-bar--overlay { position: absolute; top: 8px; left: 8px; right: 64px; z-index: 40; margin: 0; padding: 0;
  border: none; background: transparent; gap: 6px; flex-wrap: wrap; row-gap: 6px; pointer-events: none; }
.rec-proj-bar--overlay > * { pointer-events: auto; }
.rec-proj-bar--overlay .rec-proj-title { flex: 1 1 96px; min-width: 96px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background: rgba(20,12,6,0.74); color: #FFF6EC; padding: 6px 12px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); box-shadow: 0 2px 8px rgba(0,0,0,0.35); text-decoration: none; }
.rec-proj-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--r-pill); background: var(--c-accent); color: #fff; flex: 0 0 auto; }
.rec-proj-title { flex: 1 1 40px; min-width: 0; font-family: var(--font-display); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-ink); text-align: left;
  background: none; border: 0; padding: 0; font-size: 15px; cursor: pointer; }
button.rec-proj-title { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Timeline: edge-trim handles + snap guide */
.tle-resize--l { right: auto; left: 0; }
.tle-resize--l::after { right: auto; left: 4px; }
.tle-snapline { position: absolute; top: 0; width: 0; border-left: 2px solid var(--c-accent); z-index: 7; pointer-events: none; }

.take-row { flex-wrap: wrap; }
.take-actions { margin-inline-start: auto; }

.avatar-controls { flex-wrap: wrap; }
.avatar-controls .rec-proj-chip { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

/* Clips library */
.clips-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
@media (min-width: 700px) { .clips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .clips-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clips-grid--sheet { max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.clip-card { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden;
  display: flex; flex-direction: column; text-align: left; }
.clip-card--pick { padding: 0; font: inherit; color: inherit; cursor: pointer; }
.clip-card--pick:active { border-color: var(--c-accent); }
.clip-thumb { aspect-ratio: 16 / 10; background: #000; display: grid; place-items: center; color: #FFF6EC; font-size: 22px; }
.clip-thumb video, .clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-thumb--audio { background: var(--c-accent); }
.clip-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clip-label { font-weight: 700; font-size: 13px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.clip-sub { font-size: 11px; color: var(--c-ink-faint); }
.clip-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }

.clip-thumb video, .clip-thumb img { object-fit: contain; }
.clip-sort-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-ink-faint); font-weight: 700; }

/* Scrubbable timeline: playhead grab handle + seek affordances */
.tle-playhead { overflow: visible; }
.tle-ph-grab { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px;
  pointer-events: auto; touch-action: none; cursor: ew-resize; display: grid; place-items: center; }
.tle-ph-grab::after { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c-ink);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.tle-ruler { cursor: ew-resize; }
.tle-area { cursor: default; }
.tle-area .tle-block { cursor: grab; }

/* Voiceover reference monitor: the working video played behind the model while recording */
.pv-stage--monitor { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; min-height: 0;
  aspect-ratio: auto; background: transparent; pointer-events: none; }
.model-stage .rec-refmon { z-index: auto; }
.btn--on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Model rail item: eye toggle to hide/show the live model */
.rail-item--model { position: relative; }
.rail-eye { position: absolute; top: -4px; left: -4px; width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: #fff; display: grid; place-items: center; font-size: 11px; cursor: pointer; z-index: 3; padding: 0; }
.rail-eye.is-off { background: var(--c-danger, #d9534f); }

/* Timeline overlay: a compact translucent panel across the BOTTOM of the stage (where the
   script used to sit) — the model + prompter show through it; an opacity slider fades it. */
.stage-canvas .rec-timeline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 44;
  max-height: 52%; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(20, 12, 6, 0.9); color: #FFF6EC; border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.rec-timeline-grip { flex: 0 0 auto; height: 26px; cursor: ns-resize; touch-action: none; display: grid; place-items: center; position: relative; z-index: 2; }
.rec-timeline-grip::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.rec-timeline-grip::before { content: ''; width: 56px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.6); }
.rec-timeline-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 8px; }
.stage-panel { position: absolute; left: 3%; top: 8%; width: min(84%, 340px); max-height: 72%; z-index: 46;
  display: flex; flex-direction: column; overflow: hidden; background: rgba(255,253,249,0.97);
  border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.stage-panel-grip { display: flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: grab; flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--c-ink);
  border-bottom: var(--bw-thin) solid var(--c-line); background: var(--c-surface-2); }
.stage-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px; }
.stage-panel-rez { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
  border-right: 3px solid var(--c-line); border-bottom: 3px solid var(--c-line); border-bottom-right-radius: var(--r-md); }

/* ---- go live screen ---- */
.screen--golive { overflow-y: auto; padding-bottom: 200px; }
.screen--golive .stage-canvas { flex: 0 0 auto; height: 54vh; }
.gl-layout { display: contents; }
.gl-panel { display: none; }
.gl-dock__row { display: flex; gap: var(--sp-2); align-items: center; }
.gl-dock__row .gl-targets { flex: 1 1 auto; min-width: 0; }
.gl-dock__row .gl-record { white-space: nowrap; }
/* THE DOCK IS THE PHONE AND TABLET LAYOUT - it exists only below 1100px, where the wide
   layout hides it, so these rules are scoped to it rather than to a width guess. One line
   per job, in `order` so the DOM stays as the screen builds it: the targets scroll on their
   own line (as a single nowrap row they were being crushed to zero width and could not be
   seen or tapped at all), aspects and history share the next, and Record sits beside Go Live
   on the last. Both are block buttons, so they must be given a basis of 0 or each demands
   the full row width and the rest of the dock collapses. */
.gl-dock .gl-dock__row { flex-wrap: wrap; row-gap: var(--sp-1); }
.gl-dock .gl-dock__row .gl-targets { order: 1; flex: 1 1 100%; padding: var(--sp-1) 0; scrollbar-width: none; }
.gl-dock .gl-dock__row .gl-targets::-webkit-scrollbar { height: 0; }
/* The bases are what decide the lines: aspects asks for little and scrolls, so history always
   fits beside it, and the two big buttons ask for enough that they cannot join that line on a
   phone - they pair up on their own instead of one of them being squeezed until its label
   wraps. */
.gl-dock .gl-dock__row .gl-aspects { order: 2; flex: 1 1 120px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gl-dock .gl-dock__row .gl-aspects::-webkit-scrollbar { height: 0; }
.gl-dock .gl-dock__row .gl-history { order: 3; flex: 0 0 auto; }
.gl-dock .gl-dock__row .gl-record { order: 4; flex: 1 1 45%; min-width: 0; }
.gl-dock .gl-dock__row .gl-start { order: 5; flex: 1 1 45%; min-width: 0; }
/* The dock is the one place a target card is stacked above other controls rather than
   filling the screen, so it takes the compact form the wide layout already uses and holds
   its subtitle to one line - three cards of wrapped text made this row taller than the
   whole rest of the dock. */
.gl-dock .gl-target { min-width: 112px; flex-basis: 112px; padding: var(--sp-1) var(--sp-2); }
.gl-dock .gl-target small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-aspects { display: flex; gap: var(--sp-1); flex: 0 0 auto; }
.gl-panel__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); margin: var(--sp-2) 0; }
.mixer-cap { display: grid; gap: var(--sp-2); padding: var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface-2); }
.mixer-cap__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.mixer-cap__head strong { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mixer-cap-video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: rgba(0,0,0,0.85); border-radius: var(--r-sm); }
.mixer-cap__actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.status-pill--live { background: var(--c-danger); color: #fff; }
.bgm-preview { width: 100%; aspect-ratio: 16 / 9; max-height: 150px; border: 0; border-radius: var(--r-sm); background: #000; }
.bgm-player-host { margin: var(--sp-2) 0; }
.stage-bg-img { position: absolute; transform: translate(-50%, -50%); touch-action: none; cursor: move; }
.stage-bg-img__img { display: block; width: 100%; height: auto; }
.model-stage, .stage-rail, .layer-panel, .stage-panel, .gl-panel, .gl-dock { user-select: none; -webkit-user-select: none; }
.model-stage img, .stage-panel img, .gl-panel img { -webkit-user-drag: none; }
.screen--golive .model-layer { position: absolute; }
.capture-layer { position: absolute; touch-action: none; cursor: move; overflow: hidden; }
.capture-layer .capture-video { width: 100%; display: block; background: rgba(0,0,0,0.85); border-radius: var(--r-sm); }
.capture-layer .handcam-resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; border-right: 3px solid rgba(255,255,255,0.7); border-bottom: 3px solid rgba(255,255,255,0.7); }

/* The episode layer. It looks and drags like a capture because it IS an ordinary layer - the
   only thing that makes it special is that its pixels never leave this machine. */
.gl-wa-layer .gl-wa-video { width: 100%; display: block; background: #000; border-radius: var(--r-sm); }
/* SUBTITLE LOOK. A browser's default cue styling is a solid black box, which is not what most
   people want on a watchalong. Same three modes the companion's VOD player has always had, and
   the same default: outline, no background. */
.gl-wa-layer .gl-wa-video::cue { background: none; color: #fff; font-size: 1.05em; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.6); }
.gl-wa-layer--subs-bg .gl-wa-video::cue { background: rgba(0,0,0,0.7); text-shadow: none; }
.gl-wa-layer--subs-off .gl-wa-video::cue { visibility: hidden; }
/* Size and font as CLASSES, not custom properties: var() inside ::cue is not reliably resolved
   across browsers, and a control that silently does nothing is worse than no control. */
.gl-wa-layer--fs75 .gl-wa-video::cue { font-size: 0.787em; }
.gl-wa-layer--fs90 .gl-wa-video::cue { font-size: 0.945em; }
.gl-wa-layer--fs100 .gl-wa-video::cue { font-size: 1.05em; }
.gl-wa-layer--fs115 .gl-wa-video::cue { font-size: 1.208em; }
.gl-wa-layer--fs135 .gl-wa-video::cue { font-size: 1.417em; }
.gl-wa-layer--fs160 .gl-wa-video::cue { font-size: 1.68em; }
.gl-wa-layer--ff-system .gl-wa-video::cue { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.gl-wa-layer--ff-sans .gl-wa-video::cue { font-family: Arial, Helvetica, sans-serif; }
.gl-wa-layer--ff-serif .gl-wa-video::cue { font-family: Georgia, 'Times New Roman', serif; }
.gl-wa-layer--ff-rounded .gl-wa-video::cue { font-family: 'Trebuchet MS', Verdana, sans-serif; }
.gl-wa-layer--ff-mono .gl-wa-video::cue { font-family: 'Cascadia Mono', Consolas, monospace; }

/* A dense control row. These are preferences, not primary actions - they do not get to be
   full-width buttons stacked down the panel. */
.gl-wa-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gl-wa-line > .help { flex: none; }
.gl-wa-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.gl-wa-sep { flex: 1; }
.gl-wa-pct { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--c-ink); min-width: 34px; text-align: center; }
.gl-wa-look { flex-wrap: wrap; }
.gl-wa-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font: inherit; font-size: 11px; line-height: 1.6; border-radius: 999px; border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); cursor: pointer; flex: none; }
.gl-wa-chip:hover { background: var(--c-surface-2); }
.gl-wa-chip.is-on { background: var(--c-accent); color: var(--c-accent-ink, #fff); border-color: transparent; font-weight: 600; }
.gl-wa-sel { font: inherit; font-size: 11px; padding: 3px 6px; border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); flex: none; }
.gl-wa-badge--armed { background: var(--c-warn, #b8860b); }
/* The transport. Reserves the bottom-right corner so the buttons never sit under the resize
   grip - the two used to overlap and you could not tell which one you were grabbing. */
.gl-wa-chrome { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 5px 28px 6px 6px; background: rgba(0,0,0,0.66); border-radius: 0 0 var(--r-sm) var(--r-sm); opacity: 0; transition: opacity 120ms; cursor: default; }
.gl-wa-layer:hover .gl-wa-chrome, .gl-wa-layer:focus-within .gl-wa-chrome { opacity: 1; }
.gl-wa-row { display: flex; align-items: center; gap: var(--sp-2); }
.gl-wa-spacer { flex: 1; }
.gl-wa-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; font-size: 11px; cursor: pointer; flex: none; }
.gl-wa-btn:hover { background: rgba(255,255,255,0.26); }
.gl-wa-time { color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The scrub bar IS the feature - a watchalong is the creator seeking. Tall hit area, thin line. */
.gl-wa-seek { position: relative; height: 14px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.gl-wa-seek::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.22); }
.gl-wa-seek__buf { position: absolute; left: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.34); width: 0; }
.gl-wa-seek__fill { position: absolute; left: 0; height: 4px; border-radius: 2px; background: var(--c-accent, #e94560); width: 0; }
.gl-wa-seek__head { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #fff; left: 0; transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.gl-wa-seek:hover .gl-wa-seek__head { width: 13px; height: 13px; }
.gl-wa-vol { width: 62px; accent-color: var(--c-accent, #e94560); flex: none; }
/* Above the chrome so the corner stays grabbable, and it is the only thing in that corner. */
.gl-wa-layer .handcam-resize { z-index: 4; }
/* Fullscreen puts the wrap itself on the screen, so the video has to fill it rather than keep
   the percentage width it carries as a stage layer. */
.gl-wa-layer:fullscreen { width: 100% !important; height: 100%; left: 0 !important; top: 0 !important; background: #000; display: grid; place-items: center; }
.gl-wa-layer:fullscreen .gl-wa-video { max-height: 100vh; width: auto; max-width: 100vw; }
.gl-wa-layer:fullscreen .handcam-resize { display: none; }
.gl-wa-layer:fullscreen .gl-wa-chrome { opacity: 1; }

.gl-wa-panel { display: grid; gap: 8px; }
.gl-wa-panel > .help { font-size: 11px; margin: 0; }
/* One card per episode. Several can run at once - two side by side to compare them, or one
   beside whatever it is being shown against - so the panel is a LIST, not a single form. */
.gl-wa-card { display: grid; gap: 6px; padding: 8px; border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface-2); }
.gl-wa-card__head { display: flex; align-items: center; gap: var(--sp-2); }
.gl-wa-card__head strong { min-width: 0; overflow-wrap: anywhere; margin-right: auto; }
.gl-wa-card__x { background: transparent; color: var(--c-ink); }
.gl-wa-card__x:hover { background: var(--c-danger); color: #fff; }
.gl-wa-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 3px; background: var(--c-danger); color: #fff; }
.gl-wa-panel textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: var(--sp-2); border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
.gl-wa-file { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-sm); background: var(--c-surface); overflow-wrap: anywhere; font-size: 12px; }
/* Picking WHAT is being watched out of the catalogue - a typed name is the fallback, not the
   mechanism. Solid surfaces only, no gradients. */
.gl-wa-series { display: grid; gap: var(--sp-2); position: relative; }
.gl-wa-series input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 5px 7px; border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
.gl-wa-results { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.gl-wa-result { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; padding: var(--sp-2); border: none; background: transparent; color: var(--c-ink); font: inherit; cursor: pointer; }
.gl-wa-result:hover, .gl-wa-result:focus-visible { background: var(--c-surface-2); }
.gl-wa-result img { width: 34px; height: 46px; object-fit: cover; border-radius: 3px; flex: none; background: var(--c-surface-2); }
.gl-wa-result__noimg { width: 34px; height: 46px; display: grid; place-items: center; border-radius: 3px; background: var(--c-surface-2); flex: none; }
.gl-wa-result__txt { display: grid; gap: 1px; min-width: 0; }
.gl-wa-result__txt strong { overflow-wrap: anywhere; }
.gl-wa-result--none { display: block; cursor: default; color: var(--c-ink-2, inherit); }
.gl-wa-result--none:hover { background: transparent; }
.gl-wa-picked { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-2); }
.gl-wa-picked img { width: 34px; height: 46px; object-fit: cover; border-radius: 3px; flex: none; }
.gl-wa-picked__txt { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.gl-wa-picked__txt strong { overflow-wrap: anywhere; }
.gl-wa-ep { display: flex; align-items: center; gap: var(--sp-2); }
.gl-wa-line input[type=number] { width: 64px; font: inherit; font-size: 12px; padding: 3px 6px; border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
.gl-wa-ep input { width: 84px; font: inherit; padding: var(--sp-2); border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
@media (max-width: 520px) {
  .gl-wa-ep { flex-wrap: wrap; }
  .gl-wa-chrome { opacity: 1; }
}
.mixer-row__ctl { display: grid; gap: 3px; }
.mixer-mute { width: 26px; height: 26px; border-radius: 50%; border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); display: grid; place-items: center; font-size: 12px; }
.mixer-mute.on { background: var(--c-danger); color: #fff; }
.meter--slim { height: 4px; }
.status-pill--warn { background: var(--c-warn); color: var(--c-ink); }
.card-swatches { display: flex; gap: var(--sp-2); }
.card-swatch { flex: 1; min-height: 44px; border-radius: var(--r-sm); border: 2px solid var(--c-line); display: grid; place-items: center; font-weight: 700; cursor: pointer; }
.card-swatch--surface { background: var(--c-surface); color: var(--c-ink); }
.card-swatch--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.card-swatch--ink { background: var(--c-ink); color: var(--c-bg); }
.card-swatch--on { border-color: var(--c-focus); outline: 2px solid var(--c-focus); }
.scene-preset__btn { width: 30px; height: 30px; border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface-2); display: grid; place-items: center; }
.scene-preset__btn--go { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
.scene-preset__btn--on { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.scene-preset-list__hd { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; margin: var(--sp-2) 0 var(--sp-1); }
.gl-delay { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.bgm-inline { display: flex; gap: var(--sp-1); align-items: center; }
.gl-preload { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.gl-scene-push, .scene-push { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: var(--bw-thin) solid var(--c-accent); border-radius: var(--r-sm); background: var(--c-surface-2); font-weight: 700; font-size: 13px; line-height: 1.35; }
.gl-scene-push { margin: var(--sp-1) 0; }
.scene-push { margin-bottom: var(--sp-2); }
.gl-scene-push__note, .scene-push__note { flex-basis: 100%; font-weight: 500; font-size: 11px; color: var(--c-ink-soft); }
.gl-scene-push > span:not([class]), .scene-push > span:not([class]) { flex: 1 1 auto; min-width: 0; }
.gl-publish-alert { border: var(--bw-thin) solid var(--c-danger, #c62828); border-radius: var(--r-sm); padding: var(--sp-2); margin: var(--sp-1) 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.gl-publish-alert__msg { display: flex; align-items: center; gap: var(--sp-1); font-weight: 700; color: var(--c-danger, #c62828); }
.gl-publish-alert__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.gl-sync { border-top: 1px solid var(--border); padding-top: var(--sp-2); margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.gl-sync__head { display: flex; align-items: center; gap: var(--sp-1); font-size: 12px; font-weight: 700; color: var(--text-2); }
.gl-sync__hint { font-weight: 500; font-size: 11px; opacity: .75; }
.gl-sync-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gl-sync-row__label { flex: 1; min-width: 72px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-sync-row__value { min-width: 54px; text-align: center; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; }
@media (max-width: 480px) { .gl-sync-row__label { flex-basis: 100%; } }
.status-pill--ok { border-color: var(--c-ok, #2e7d32); color: var(--c-ok, #2e7d32); }
.scene-monitor__cap { font-size: 12px; font-weight: 700; opacity: 0.7; margin: 2px 0 var(--sp-1); }
.scene-preset { cursor: pointer; }
.scene-preset--active { border: var(--bw-thin) solid var(--c-accent); background: var(--c-surface-2); }
.gl-float { position: fixed; z-index: 80; display: flex; flex-direction: column; background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-float, 0 8px 30px rgba(0,0,0,0.25)); }
.gl-float__grip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-bottom: var(--bw-thin) solid var(--c-line); cursor: move; touch-action: none; font-weight: 700; }
.gl-float__grip span { flex: 1; }
.gl-float__x { width: 24px; height: 24px; border-radius: var(--r-sm); border: 0; background: transparent; display: grid; place-items: center; }
.gl-float__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2); }
.gl-float__rez { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; border-right: 3px solid var(--c-line); border-bottom: 3px solid var(--c-line); border-bottom-right-radius: var(--r-md); touch-action: none; }
.gl-panel__sec + .gl-panel__sec { border-top: var(--bw-thin) solid var(--c-line); margin-top: var(--sp-2); }
.expr-panel--overlay { position: absolute; left: var(--sp-2); right: 64px; bottom: 84px; z-index: 42; margin: 0; max-height: 34%; overflow-y: auto; background: rgba(28,20,12,0.86); border-color: rgba(255,255,255,0.16); }
.expr-panel--overlay .chip { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2); }
.expr-panel--overlay .chip--on { background: var(--c-accent); color: var(--c-accent-ink); }
.expr-panel--overlay .help { color: rgba(255,255,255,0.8); }
.gl-stream-host { display: grid; gap: var(--sp-2); }
.gl-card[data-key="stream"] { flex: 2 1 0; max-width: 620px; }
.gl-card[data-key="stream"] .gl-dock__row { flex-wrap: wrap; }
.gl-card[data-key="stream"] .gl-start { min-width: 160px; }
.gl-veil { position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 60; }
.gl-trans { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.gl-trans__lbl { color: var(--c-ink-soft); }
.gl-trans .btn { flex: 1; min-width: 0; padding-left: 4px; padding-right: 4px; }
@media (min-width: 1100px) {
  body:has(.screen--golive-wide) #app { max-width: none; }
  body:has(.screen--golive-wide) .screen { max-width: none; }
  .screen--golive-wide { padding-bottom: 96px; padding-inline: var(--sp-2); }
  /* Content-sized column that SCROLLS - a flex-collapse chain here let the canvas's own
     min-height overflow its box and paint over the panel strip (the "cropped" dock). */
  .screen--golive-wide .gl-layout { display: flex; flex-direction: column; gap: var(--sp-2); }
  .screen--golive-wide .gl-center { display: flex; flex-direction: column; min-width: 0; }
  .screen--golive-wide .stage-canvas { flex: 0 0 auto; height: min(60vh, calc(100dvh - 320px)); min-height: 240px; }
  .screen--golive-wide .stage-rail { top: auto; left: 8px; right: 8px; bottom: 8px; flex-direction: row; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .gl-openbar { display: flex; gap: var(--sp-1); justify-content: center; }
  .gl-openbar:empty { display: none; }
  /* Wrap, never squeeze: a crushed Stream card clipped its own Record/Go Live controls.
     The stream card always gets a full-width row; the other panels share the next one. */
  .gl-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); padding-bottom: var(--sp-1); }
  .gl-card { flex: 1 1 300px; min-width: 240px; border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); display: flex; flex-direction: column; max-height: 30vh; }
  .gl-card[data-key="stream"] { flex: 1 1 100%; max-width: none; }
  .gl-card__head { display: flex; align-items: center; gap: var(--sp-1); padding: 4px var(--sp-2); border-bottom: var(--bw-thin) solid var(--c-line); }
  .gl-card__head strong { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gl-card__btn { width: 22px; height: 22px; border: 0; background: transparent; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 11px; color: var(--c-ink-soft); }
  .gl-card__btn:hover { background: var(--c-surface-2); }
  .gl-card__btn--x:hover { background: var(--c-danger); color: #fff; }
  .gl-card__body { overflow-y: auto; overflow-x: hidden; padding: var(--sp-2); }
  .gl-card--collapsed .gl-card__body { display: none; }
  .gl-card--collapsed { max-height: none; flex: 0 0 auto; min-width: 160px; }
  .screen--golive .rail-item--dockable { display: none; }
  .screen--golive .gl-dock { display: none; }
  .screen--golive .gl-dock__row { align-items: center; }
  .screen--golive .gl-dock__row .gl-start { flex: 0 0 auto; width: auto; min-width: 200px; margin: 0 0 0 var(--sp-2); }
  .screen--golive .gl-dock__row .gl-record { flex: 0 0 auto; width: auto; min-width: 132px; margin: 0; }
  .screen--golive .gl-targets { padding: var(--sp-1) 0; }
  .screen--golive .gl-target { min-width: 112px; flex-basis: 112px; padding: var(--sp-1) var(--sp-2); }
}
.gl-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h, 64px) + var(--safe-bottom, 0px));
  width: min(100%, var(--content-max, 680px));
  background: var(--c-bg);
  border-top: var(--bw-thin) solid var(--c-line);
  padding: 0 var(--sp-3) var(--sp-2);
  z-index: 45;
}
.gl-dock .gl-start { margin-bottom: 0; }
.gl-dock .gl-live-panel { max-height: 38vh; overflow-y: auto; margin-bottom: 0; }
.gl-targets { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-3) 0 var(--sp-2); scroll-snap-type: x proximity; }
.gl-target { min-width: 132px; flex: 0 0 132px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 2px var(--sp-2); align-items: center; text-align: left; padding: var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); scroll-snap-align: start; }
.gl-target i { grid-row: 1 / span 2; font-size: 22px; }
.gl-target__name { font-weight: 800; }
.gl-target small { color: var(--c-ink-muted); line-height: 1.15; }
.gl-target--on { border-color: var(--c-accent); background: var(--c-accent-soft); }
.gl-start { margin-bottom: var(--sp-3); }
.gl-live-panel { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); margin-bottom: calc(var(--safe-bottom) + var(--sp-3)); }
.gl-live-head { display: flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.gl-live-head [data-live-elapsed] { margin-left: auto; }
.gl-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-danger); display: inline-block; }
.gl-status-list { display: grid; gap: var(--sp-2); }
.gl-status { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2); border-radius: var(--r-sm); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); text-align: left; }
.gl-status--btn { width: 100%; cursor: pointer; }
.gl-status small { grid-column: 2 / 4; color: var(--c-ink-muted); }
.gl-status--bad small, .gl-status--bad strong { color: var(--c-danger); }
.gl-vis { display: flex; gap: var(--sp-2); }
.gl-vis .btn { flex: 1; min-width: 0; }
.gl-toggle { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-weight: 700; }
.gl-checks { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gl-checks label { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); }
.gl-chipline { display: flex; gap: var(--sp-2); padding: var(--sp-1) 0; }
.gl-notice { display: grid; gap: var(--sp-1); padding: var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-2); }
.gl-cat-results { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.gl-cover { width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--r-sm); background: rgba(0,0,0,0.08); }
.gl-cover-wrap { margin-bottom: var(--sp-2); }
.gl-cover--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); aspect-ratio: 16 / 9; color: var(--c-ink-soft); font-size: var(--fs-sm); border: var(--bw-sticker) dashed var(--c-line); background: var(--c-surface-2); }
.gl-cover-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gl-cover-input { display: none; }
.mixer-row { display: grid; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); margin-bottom: var(--sp-1); }
.mixer-row__head { display: grid; grid-template-columns: 18px minmax(0,1fr) repeat(3, auto); gap: var(--sp-2); align-items: center; }
.mixer-row__head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
.mixer-mute { width: 34px; height: 34px; }
.mixer-row input[type="range"], .bgm-now input[type="range"] { width: 100%; }
.mixer-row--bgm { background: var(--c-surface-2); }
.bgm-results { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.bgm-result { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-2); align-items: center; text-align: left; padding: var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); }
.bgm-result img, .bgm-card img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-sm); background: rgba(0,0,0,0.08); }
.bgm-art { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-2); }
.bgm-result span, .bgm-main { display: grid; gap: 2px; min-width: 0; }
.bgm-result small, .bgm-main small, .bgm-main span { color: var(--c-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgm-card { display: grid; grid-template-columns: 40px 1fr 38px 38px; gap: var(--sp-2); align-items: center; padding: var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.bgm-actions { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; }
.scene-monitor { width: 100%; aspect-ratio: 16 / 9; display: block; background: rgba(0,0,0,0.85); border-radius: var(--r-sm); margin-bottom: var(--sp-2); }
.scene-preset-list { display: grid; gap: var(--sp-2); }
.scene-preset { display: grid; grid-template-columns: 20px minmax(0,1fr) 30px 30px 30px; gap: var(--sp-1); align-items: center; padding: var(--sp-1) var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.scene-preset strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-preset__kind { color: var(--c-ink-muted); }
.gl-card-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chat-layer { position: absolute; z-index: 30; touch-action: none; border-radius: var(--r-md); cursor: move; }
.screen-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: rgba(0,0,0,0.85); }
@media (max-width: 420px) {
  .gl-target { min-width: 118px; flex-basis: 118px; grid-template-columns: 24px 1fr; }
  .scene-preset { grid-template-columns: 22px minmax(0,1fr) auto auto 34px; font-size: var(--fs-xs); }
  .scene-preset .btn { padding-left: 7px; padding-right: 7px; }
  .bgm-card { grid-template-columns: 40px minmax(0,1fr) 34px 34px; }
}
.po-grip { display: inline-flex; align-items: center; cursor: grab; color: rgba(255,255,255,0.7); padding: 0 4px; flex: 0 0 auto; touch-action: none; }
.po-rez { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize;
  border-right: 3px solid rgba(255,255,255,0.55); border-bottom: 3px solid rgba(255,255,255,0.55); }
.project-editor--compact { display: flex; flex-direction: column; gap: 6px; }
.tl-bar--compact { margin: 0; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-bar--compact .btn { background: rgba(255,255,255,0.12); border-color: transparent; color: #FFF6EC; }
.tl-bar--compact .tl-rec { color: #e5484d; }
.tl-bar--compact .tl-rec:active { background: rgba(229,72,77,0.25); }
.tl-bar-extras { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.75); font-size: 12px; }
.tl-volwrap { position: relative; display: inline-flex; }
.tl-volpop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px;
  background: rgba(20,12,6,0.95); border-radius: var(--r-md); box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.tl-vol-range { writing-mode: vertical-lr; direction: rtl; height: 100px; width: 22px; accent-color: var(--c-accent); }
.tl-vol-lbl { color: #FFF6EC; font-size: 11px; font-weight: 700; }
.stage--land .tl-volpop { flex-direction: row; padding: 8px 10px; }
.stage--land .tl-vol-range { writing-mode: horizontal-tb; direction: ltr; width: 110px; height: auto; }
.tl-opacity { width: 68px; accent-color: var(--c-accent); }
.project-editor--compact .panel-host:empty, .project-editor--compact .panel-host .panel-hint { display: none; }
.project-editor--compact .clip-editor { background: rgba(255,255,255,0.08); border-radius: var(--r-sm); padding: 6px 8px; margin-top: 0; }
.project-editor--compact .ce-title, .project-editor--compact .label { color: #FFF6EC; }

/* stage--land now only flips small popovers: the chrome sits on the page-shaped canvas, so a
   landscape FRAME no longer moves the rail, the project bar or the prompter around. */

.gl-audiotell { position: absolute; left: 8px; bottom: 8px; z-index: 55; display: grid; gap: 3px; pointer-events: none; }
.gl-audiotell.is-empty::after { content: 'no audio'; font-size: 10px; font-weight: 800; color: #fff; background: var(--c-danger); padding: 2px 6px; border-radius: var(--r-pill); }
.gl-at-row { display: grid; grid-template-columns: 34px 74px; gap: 5px; align-items: center; }
.gl-at-row span { font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gl-at-row u { display: block; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.55); overflow: hidden; }
.gl-at-row i { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width 90ms linear; }
.gl-at-row.is-silent i { background: var(--c-danger); }
.gl-at-row.is-muted { opacity: 0.45; }
.gl-at-row.is-muted i { background: var(--c-ink-muted); }

.dev-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.dev-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 72px; gap: var(--sp-2); align-items: center; padding: var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.dev-row__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dev-row__head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
.dev-row.is-dead { opacity: 0.5; }
.dev-row .btn { margin: 0; }
@media (max-width: 600px) { .dev-row { grid-template-columns: minmax(0,1fr) 64px 60px; } }
.dev-row--app { grid-template-columns: minmax(0,1fr) auto 72px; }

.capture-layer .capture-crop-edge { position: absolute; z-index: 3; background: var(--c-accent); opacity: 0; border-radius: 4px; transition: opacity 120ms; }
.capture-layer:hover .capture-crop-edge { opacity: 0.75; }
.capture-layer .capture-crop-edge[data-edge="l"] { left: 2px; top: 50%; transform: translateY(-50%); width: 8px; height: 36px; cursor: ew-resize; }
.capture-layer .capture-crop-edge[data-edge="r"] { right: 2px; top: 50%; transform: translateY(-50%); width: 8px; height: 36px; cursor: ew-resize; }
.capture-layer .capture-crop-edge[data-edge="t"] { top: 2px; left: 50%; transform: translateX(-50%); height: 8px; width: 36px; cursor: ns-resize; }
.capture-layer .capture-crop-edge[data-edge="b"] { bottom: 2px; left: 50%; transform: translateX(-50%); height: 8px; width: 36px; cursor: ns-resize; }

.gl-model-ph { position: absolute; z-index: 3; aspect-ratio: 9 / 16; display: grid; place-items: center; font-size: 44px; color: var(--c-ink-muted); opacity: 0.4; border: 2px dashed var(--c-line); border-radius: var(--r-md); pointer-events: none; }

.gl-locktb { position: absolute; z-index: 70; background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-float, 0 8px 30px rgba(0,0,0,0.25)); padding: 4px; max-width: calc(100% - 8px); }
.gl-locktb__row { display: flex; align-items: center; gap: 2px; }
.gl-locktb__name { display: flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 10px; font-weight: 800; color: var(--c-ink-muted); max-width: 110px; }
.gl-locktb__name em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-locktb__btn { width: 30px; height: 30px; display: grid; place-items: center; border: none; background: transparent; color: var(--c-ink-muted); border-radius: var(--r-sm); font-size: 13px; cursor: pointer; }
.gl-locktb__btn:hover { background: var(--c-bg); }
.gl-locktb__btn.on { background: var(--c-accent); color: #fff; }
.gl-locktb__x { margin-left: 2px; }
.gl-locktb__range { display: grid; gap: 4px; padding: 6px 6px 4px; border-top: var(--bw-thin) solid var(--c-line); margin-top: 4px; }
.gl-locktb__field { display: grid; grid-template-columns: 58px 64px auto; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--c-ink-muted); }
.gl-locktb__num { width: 100%; padding: 3px 6px; border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-ink); font-size: 12px; }
.gl-locktb__unit { font-weight: 600; }
.gl-overlay-faults { position: absolute; inset: 0; z-index: 76; pointer-events: none; }
.gl-overlay-fault { position: absolute; width: min(360px, calc(100% - 12px)); display: grid; gap: 5px; padding: 10px 12px; color: #fff; background: rgba(116, 22, 22, 0.97); border: 2px solid #ffb0a6; border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0,0,0,0.38); pointer-events: auto; user-select: text; }
.gl-overlay-fault strong { font-size: 13px; line-height: 1.25; }
.gl-overlay-fault__detail { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.gl-overlay-fault__action { font-size: 11px; line-height: 1.3; color: #ffe4df; }
.gl-overlay-fault__retry { justify-self: start; margin-top: 2px; }
.gl-capture-fault { display: grid; gap: 6px; margin-bottom: 8px; padding: 10px 12px; color: #fff; background: #741616; border: 2px solid #ffb0a6; border-radius: var(--r-md); user-select: text; }
.gl-capture-fault__detail { font-size: 12px; overflow-wrap: anywhere; }
.gl-capture-fault__action { font-size: 11px; line-height: 1.35; color: #ffe4df; }
@media (max-width: 480px) { .gl-locktb__name { max-width: 64px; } .gl-locktb__btn { width: 34px; height: 34px; } }

/* ---------- broadcast history ---------- */
.bc-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); }
.bc-list { display: grid; gap: var(--sp-3); }
.bc-card { padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: var(--bw-sticker) solid var(--c-shadow); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.bc-card .ic-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bc-card .ic-title { font-family: var(--font-display); font-weight: 700; flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-card .ic-notes { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: 4px; }
.bc-error { color: var(--c-danger); }
.bc-figs { margin-top: var(--sp-2); gap: var(--sp-3); }
.bc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.bc-motion { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.bc-motion .ic-notes { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.bc-motion .btn { flex: 0 0 auto; text-decoration: none; }
.gl-history { flex: 0 0 auto; text-decoration: none; }
@media (min-width: 600px) {
  .bc-card .ic-title { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .bc-summary { gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); }
  .bc-actions .btn { flex: 1 1 auto; justify-content: center; }
  .bc-motion .ic-notes { flex: 1 1 100%; }
  .bc-motion .btn { flex: 1 1 auto; justify-content: center; }
}
.gl-cap-livebadge { color: rgba(255,255,255,0.45); font-size: 10px; }
.gl-cap-livebadge.is-on { color: #3FA66A; }
.gl-gloss { padding: 8px; overflow-y: auto; max-height: min(70vh, 520px); }
.gl-gloss__body { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.gl-gloss__term { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 6px; }
.gl-gloss__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #FFF6EC; font-size: 12px; }
.gl-gloss__head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-gloss__lang { display: flex; align-items: center; gap: 6px; padding: 3px 0 0 10px; }
.gl-gloss__code { font-size: 10px; font-weight: 800; color: rgba(255,246,236,0.6); width: 24px; flex: 0 0 auto; }

.gl-overlay-fault { position: relative; padding-right: 30px; }
.gl-overlay-fault__close { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; line-height: 1; padding: 0; border-radius: var(--r-sm); opacity: 0.75; }
.gl-overlay-fault__close:hover { opacity: 1; }

/* Alerts management */
.alerts { display: flex; flex-direction: column; gap: var(--sp-3); }
.al-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.al-head h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.al-intro { margin: 0; }
.al-channel { display: inline-flex; align-items: center; gap: 6px; }
.al-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.al-card-head h3 { margin: 0; }
.al-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.al-grid .field { margin: 0; }
.al-actions { margin-top: var(--sp-2); }
.al-remove { margin-left: auto; }
.al-addrow { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.al-addrow input { flex: 1 1 auto; min-width: 0; }
.al-events { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.al-event { display: flex; align-items: center; gap: var(--sp-2); border-top: 1px solid var(--line, rgba(0,0,0,0.08)); padding-top: var(--sp-2); }
.al-event:first-child { border-top: 0; padding-top: 0; }
.al-event-ic { flex: 0 0 auto; width: 28px; text-align: center; opacity: 0.7; }
.al-event-main { flex: 1 1 auto; min-width: 0; }
.al-event-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-event-sub { font-size: 12px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-event-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.al-event-time { font-size: 11px; opacity: 0.6; }
@media (min-width: 860px) {
  .al-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .al-addrow { flex-direction: column; }
  .al-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== quick search overlay ===== */
.qs-scrim { position: fixed; inset: 0; z-index: 90; background: var(--c-overlay); display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--safe-top) + 8vh) var(--sp-3) var(--sp-3); }
.qs-panel { width: min(100%, 560px); max-height: min(70vh, 620px); display: flex; flex-direction: column; background: var(--c-surface); border: var(--bw-sticker) solid var(--c-shadow); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.qs-inrow { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-thin) solid var(--c-line); color: var(--c-ink-soft); }
.qs-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-md); outline: none; }
.qs-x { width: 34px; height: 34px; border: 0; background: transparent; border-radius: var(--r-md); color: var(--c-ink-soft); cursor: pointer; display: grid; place-items: center; }
.qs-x:active { background: var(--c-surface-2); }
.qs-list { flex: 1; min-height: 120px; overflow-y: auto; padding: var(--sp-2); -webkit-overflow-scrolling: touch; }
.qs-group { font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--sp-2) var(--sp-2) 2px; }
.qs-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-md); color: var(--c-ink); }
.qs-row:active, .qs-row.is-active { background: var(--c-surface-2); }
.qs-ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-ink-soft); }
.qs-main { display: grid; gap: 1px; min-width: 0; }
.qs-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-sub { font-size: var(--fs-xs); color: var(--c-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-empty, .qs-hint { padding: var(--sp-3); color: var(--c-ink-faint); text-align: center; }
@media (max-width: 600px) { .qs-scrim { padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-2); } .qs-panel { max-height: calc(100dvh - var(--safe-top) - var(--sp-4)); } }

/* ===== intonation trainer ===== */
.screen--trainer { max-width: 680px; }
.tr-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tr-script { max-width: 70%; }
.tr-script-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-pos { margin-inline-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-ink-soft); }
.tr-progress { height: 8px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; margin-bottom: var(--sp-3); }
.tr-progress-fill { height: 100%; background: var(--c-accent); border-radius: var(--r-pill); transition: width 200ms ease; }
.tr-card { background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.tr-headline { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2); }
.tr-headline i { color: var(--c-ok, #2f9e44); }
.tr-text { font-size: var(--fs-lg); line-height: 1.5; font-weight: 600; margin-bottom: var(--sp-3); white-space: pre-wrap; }
.tr-text .po-word { cursor: pointer; border-radius: 4px; }
.tr-text .po-word.is-now { background: var(--c-accent-soft); }
.tr-text .po-word--cue { color: var(--c-ink-faint); font-style: italic; }
.tr-reclive { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-danger); font-weight: 700; margin: 0 0 var(--sp-2); }
.tr-reclive i { animation: tr-blink 1.1s infinite; }
@keyframes tr-blink { 50% { opacity: 0.25; } }
.tr-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tr-act { flex: 1 1 30%; min-width: 96px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); cursor: pointer; }
.tr-act:active { transform: translateY(1px); }
.tr-act--guide.on { background: var(--c-accent); color: var(--c-accent-ink); border-color: transparent; }
.tr-act--guide.is-loading { opacity: 0.6; }
.tr-act--rec { background: var(--c-accent); color: var(--c-accent-ink); border-color: transparent; }
.tr-act--rec.is-rec { background: var(--c-danger); color: #fff; }
.tr-feedback { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--bw-thin) solid var(--c-line); }
.tr-feedback--clean .tr-summary i { color: var(--c-ok, #2f9e44); }
.tr-summary { font-weight: 700; margin: 0 0 var(--sp-1); }
.tr-nav { display: flex; gap: var(--sp-2); }
.tr-hint { text-align: center; margin-top: var(--sp-3); }
@media (max-width: 420px) { .tr-text { font-size: var(--fs-md); } .tr-act { min-width: 84px; } }

/* ---------- WeeBe ID sign-in ---------- */
.login-alert {
  width: min(86vw, 420px);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-sticker) solid var(--c-danger);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-md);
  line-height: 1.45;
  text-align: center;
}
.login-sso { width: min(86vw, 340px); }
.login-sso-note { width: min(86vw, 340px); text-align: center; margin: 0; }
.login-alt {
  background: none;
  border: none;
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  text-decoration: underline;
}
.login-card { text-decoration: none; }
.login [hidden], .chan-filter [hidden] { display: none !important; }

/* ---------- channel scope ---------- */
.chan-filter { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.chan-filter-btn { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chan-filter-btn[disabled] { opacity: 0.6; cursor: default; }
.chan-filter-warn { font-size: var(--fs-xs); color: var(--c-danger); }
.chan-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; margin-bottom: var(--sp-3); }
.chan-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.chan-row:hover { background: var(--c-surface-2); }
.chan-row input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--c-accent-deep); }
.chan-row-name { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.chan-row-slug { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.chan-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: var(--sp-2);
  padding: 1px 8px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.chan-badge:hover { border-color: var(--c-accent); color: var(--c-accent-deep); }
.chan-badge--none { opacity: 0.7; }
.chan-choose { width: 100%; }
.chan-choose-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; }
.chan-choose-label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 420px) {
  .login-alert, .login-sso, .login-sso-note { width: 100%; }
  .login-cards { gap: var(--sp-3); }
  .login-card { width: 118px; }
  .chan-badge { max-width: 55vw; }
  .chan-filter { width: 100%; }
  .chan-filter-btn { max-width: 100%; }
}

/* Performers */
.performers .perf-cards { display: flex; flex-direction: column; gap: 10px; }
.performers .cc-ico img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.performer-editor .screen-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.performer-editor .screen-head h1 { flex: 1 1 auto; margin: 0; font-size: 20px; }
.performer-editor .tabs { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0; border-bottom: 1px solid var(--c-line, #333); margin-bottom: 10px; }
.performer-editor .tab { flex: 0 0 auto; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: inherit; opacity: 0.75; white-space: nowrap; }
.performer-editor .tab.is-active { opacity: 1; background: var(--c-accent-soft, rgba(255,176,103,0.18)); font-weight: 700; }
.performer-editor .perf-cols { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 12px; align-items: start; }
.performer-editor .perf-preview { position: sticky; top: 8px; aspect-ratio: 9 / 16; background: #05060a; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.performer-editor .perf-preview__canvas { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
.performer-editor .perf-preview__note { font-size: 12px; padding: 6px 8px; background: rgba(0,0,0,0.6); color: #fff; }
.performer-editor .perf-preview__note[data-tone="bad"] { color: #ffb4b4; }
.performer-editor .perf-preview__note[data-tone="warn"] { color: #ffd98a; }
.performer-editor .perf-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.performer-editor .cards { display: flex; flex-direction: column; gap: 10px; }
.performer-editor .card { border: 1px solid var(--c-line, #333); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.performer-editor .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.performer-editor .row.is-bound { border-left: 3px solid var(--c-accent, #FFB067); padding-left: 6px; }
.performer-editor .field { display: flex; flex-direction: column; gap: 4px; }
.performer-editor .field > span:first-child { font-size: 12px; opacity: 0.75; }
.performer-editor .badge { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--c-accent, #FFB067); color: #1B1206; font-weight: 700; }
.performer-editor .perf-slider { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 120px; flex: 1 1 120px; }
.performer-editor .perf-part-thumb { width: 44px; height: 44px; object-fit: contain; background: rgba(255,255,255,0.06); border-radius: 6px; }
.performer-editor .help.is-bad { color: #f88; }
.performer-editor h3 { margin: 8px 0 0; font-size: 15px; }
@media (max-width: 720px) {
  .performer-editor .perf-cols { grid-template-columns: 1fr; }
  .performer-editor .perf-preview { position: relative; top: 0; aspect-ratio: 3 / 4; max-height: 46vh; }
  .performer-editor .screen-head h1 { flex-basis: 100%; }
  .performer-editor .row .input { flex: 1 1 120px; }
}
.perf-panel { display: flex; flex-direction: column; gap: 8px; }
.perf-panel .perf-list { display: flex; flex-direction: column; gap: 6px; }
.perf-panel .perf-row { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--c-line, #3a3a3a); border-radius: 6px; }
.perf-panel .perf-row.is-active { border-color: var(--c-accent, #FFB067); }
.perf-panel .perf-meta { font-size: 11px; opacity: 0.75; }
.perf-panel .perf-looks { display: flex; flex-wrap: wrap; gap: 4px; }
.perf-panel .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.perf-panel .field { display: flex; flex-direction: column; gap: 4px; }
.perf-panel .field > span:first-child { font-size: 12px; opacity: 0.75; }

.gl-flat { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.gl-flat__status { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.gl-flat__settings { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.gl-flat__settings label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.gl-flat__preview { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; touch-action: none; }
.gl-flat__box { position: absolute; border: 1px solid rgba(255,255,255,0.75); background: rgba(255,176,103,0.22); cursor: grab; user-select: none; min-width: 8px; min-height: 8px; }
.gl-flat__box.is-hidden { border-style: dashed; background: rgba(255,255,255,0.08); }
.gl-flat__box.is-fault { border-color: var(--c-danger, #c62828); background: rgba(198,40,40,0.25); }
.gl-flat__box-label { position: absolute; left: 4px; top: 2px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; max-width: calc(100% - 8px); pointer-events: none; }
.gl-flat__rez { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: rgba(255,255,255,0.85); }
.gl-flat__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ddd; font-size: 12px; }
.gl-flat__rows { display: flex; flex-direction: column; gap: 4px; }
.gl-flat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); font-size: 12px; }
.gl-flat__row.is-blocked { opacity: 0.6; }
.gl-flat__row.is-fault { border-color: var(--c-danger, #c62828); }
.gl-flat__name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-flat__btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 2px 4px; }
.gl-flat__fit { width: auto; padding: 2px 4px; font-size: 12px; }
.gl-flat__op { width: 70px; }
.gl-flat__fault { flex-basis: 100%; color: var(--c-danger, #c62828); }
.gl-flat__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
@media (max-width: 480px) { .gl-flat__settings label { flex: 1 1 45%; } .gl-flat__op { width: 50px; } }

/* Productions */
.prod .create-card { margin-bottom: var(--sp-3); }
.prod-worker { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; border-radius: var(--r-md); border: var(--bw-thin) solid var(--c-line); background: var(--c-surface); font-size: var(--fs-sm); }
.prod-worker[data-state='on'] { border-color: var(--c-ok); color: var(--c-ok); }
.prod-worker[data-state='off'] { border-color: var(--c-danger); color: var(--c-danger); font-weight: 700; }
.prod-section { margin-top: var(--sp-5); }
.prod-section h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.prod-job { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); }
.prod-job[data-status='failed'] { border-color: var(--c-danger); }
.prod-job .ic-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.prod-bar { height: 6px; margin-top: var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.prod-bar > span { display: block; height: 100%; background: var(--c-accent); }
.prod-error, .prod-lines { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.prod-error { background: #FBE7E3; color: var(--c-danger); font-weight: 700; }
.prod-lines { background: var(--c-surface-2); color: var(--c-ink-soft); }
.prod-sheet { margin: 0 0 var(--sp-4); }
.prod-sheet img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: var(--bw-thin) solid var(--c-line); background: #000; }
.prod-sheet figcaption ol { margin: var(--sp-2) 0 0; padding-left: var(--sp-6); columns: 2; column-gap: var(--sp-6); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.prod-row { padding: var(--sp-2) 0; border-bottom: var(--bw-thin) solid var(--c-line); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 600px) { .prod-sheet figcaption ol { columns: 1; } .prod-worker { align-items: flex-start; } }
html[data-dark='true'] .prod-error { background: #3A1A16; }