/* Autoclipper admin — visual system.
 *
 * Ported from the approved design prototype
 * (artifacts/admin-redesign-handoff/src/styles.css). Every rule is scoped under
 * `.acp` because this file loads alongside styles.css, which keeps the live
 * and tasks workspaces on their own look: unscoped, the eleven shared class
 * names (.panel, .button, .progress, .brand, .table-wrap, ...) would restyle
 * screens this redesign does not cover.
 *
 * Generated once and then maintained by hand; the generator lived in the
 * migration session and is not part of the build.
 */

/* Inter, self-hosted. `default-src 'self'` in the CSP (api.go) covers font-src,
 * so a CDN or Google Fonts link would simply be blocked. Cyrillic ships first
 * because the whole interface is Russian; latin follows for ids and logins.
 * Licence: SIL OFL 1.1, see assets/fonts/LICENSE-Inter.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --canvas: #090b10;
  --shell: #0c0f15;
  --surface: #11151d;
  --surface-raised: #171c26;
  --surface-hover: #1d2430;
  --surface-selected: rgba(118, 228, 181, 0.08);
  --line: #293142;
  --line-strong: #3a445a;
  --text: #f2f5f8;
  --text-secondary: #98a4b7;
  --text-subtle: #6f7a8c;
  --text-disabled: #596477;
  --accent: #76e4b5;
  --accent-hover: #8aecbf;
  --accent-pressed: #5fcf9f;
  --accent-ink: #07150f;
  --success: #61d3a0;
  --info: #68b5ff;
  --warning: #ffc86b;
  --danger: #ff7d8c;
  --success-bg: rgba(97, 211, 160, 0.1);
  --info-bg: rgba(104, 181, 255, 0.1);
  --warning-bg: rgba(255, 200, 107, 0.1);
  --danger-bg: rgba(255, 125, 140, 0.1);
  --focus-ring: rgba(118, 228, 181, 0.55);
  --overlay: rgba(5, 7, 11, 0.76);
  --sidebar-width: 220px;
}
.acp {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f2f5f8;
  background: #090b10;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.acp, .acp *, .acp *::before, .acp *::after {
  box-sizing: border-box;
}
.acp button,
.acp input,
.acp textarea,
.acp select {
  font: inherit;
}
.acp button,
.acp a,
.acp input,
.acp textarea,
.acp select,
.acp summary {
  outline: none;
}
.acp button:focus-visible,
.acp a:focus-visible,
.acp input:focus-visible,
.acp textarea:focus-visible,
.acp select:focus-visible,
.acp summary:focus-visible {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--focus-ring);
}
.acp button,
.acp a {
  -webkit-tap-highlight-color: transparent;
}
.acp button:disabled {
  cursor: not-allowed;
}
.acp img {
  display: block;
  max-width: 100%;
}
.acp h1,
.acp h2,
.acp h3,
.acp p {
  margin: 0;
}
.acp h1,
.acp h2,
.acp h3 {
  letter-spacing: -0.02em;
}
.acp ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.acp ::-webkit-scrollbar-track {
  background: transparent;
}
.acp ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #344054;
  background-clip: padding-box;
}
.acp ::-webkit-scrollbar-thumb:hover {
  background: #47556d;
  background-clip: padding-box;
}
.acp .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.acp .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.acp .text-subtle {
  color: var(--text-subtle);
}
.acp .text-success {
  color: var(--success) !important;
}
.acp .text-warning {
  color: var(--warning) !important;
}
.acp .text-danger {
  color: var(--danger) !important;
}
.acp .body-copy {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.acp .app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--canvas);
}
.acp .app-shell.has-collapsed-sidebar {
  --sidebar-width: 72px;
}
.acp .sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  min-width: 0;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--shell);
}
.acp .sidebar__brand-row {
  display: flex;
  height: 72px;
  flex: 0 0 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
}
.acp .brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.acp .brand__mark {
  flex: 0 0 auto;
  color: var(--accent);
}
.acp .brand__name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-overflow: clip;
}
.acp .sidebar__nav {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
  padding: 8px 10px 20px;
}
.acp .sidebar__primary,
.acp .nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acp .nav-group__label {
  margin: 5px 12px 7px;
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.acp .nav-item {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
.acp .nav-item > span:not(.nav-count) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .nav-item:hover {
  background: var(--surface-raised);
  color: var(--text);
}
.acp .nav-item.is-active {
  background: var(--surface-selected);
  color: var(--text);
}
.acp .nav-item.is-active::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -10px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  content: "";
}
.acp .nav-item.is-active svg {
  color: var(--accent);
}
.acp .nav-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.acp .sidebar__footer {
  display: flex;
  min-height: 74px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 10px 10px;
  border-top: 1px solid var(--line);
}
.acp .profile-button {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.acp .profile-button:hover {
  background: var(--surface-raised);
}
.acp .profile-button__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.acp .profile-button__copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .profile-button__copy small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .avatar {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #354155;
  border-radius: 50%;
  background: #202938;
  color: #dce4ef;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.acp .avatar--admin {
  border-color: #34654f;
  background: #1e4737;
  color: #ddf8eb;
}
.acp .sidebar__collapse {
  flex: 0 0 auto;
}
.acp .sidebar__mobile-close,
.acp .mobile-topbar,
.acp .sidebar-scrim {
  display: none;
}
.acp .sidebar .sidebar__mobile-close {
  display: none;
}
.acp .has-collapsed-sidebar .sidebar__brand-row {
  justify-content: center;
  padding: 0;
}
.acp .has-collapsed-sidebar .brand__name,
.acp .has-collapsed-sidebar .nav-item > span:not(.nav-count),
.acp .has-collapsed-sidebar .nav-group__label,
.acp .has-collapsed-sidebar .profile-button__copy,
.acp .has-collapsed-sidebar .profile-button > svg,
.acp .has-collapsed-sidebar .nav-count,
.acp .has-collapsed-sidebar .sidebar__collapse {
  display: none;
}
.acp .has-collapsed-sidebar .nav-item {
  display: flex;
  justify-content: center;
  padding: 0;
}
.acp .has-collapsed-sidebar .nav-item.is-active::before {
  left: -10px;
}
.acp .has-collapsed-sidebar .profile-button {
  display: flex;
  justify-content: center;
  padding: 0;
}
.acp .app-main {
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
}
.acp .page {
  min-width: 0;
  height: 100%;
  background: var(--canvas);
}
.acp .page--standard {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 26px 32px;
}
.acp .page--workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  padding: 22px 24px 0;
}
.acp .page-header {
  display: flex;
  min-height: 62px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
}
.acp .page-header__copy {
  min-width: 0;
}
.acp .page-header h1 {
  color: var(--text);
  font-size: 27px;
  font-weight: 700;
  line-height: 34px;
}
.acp .page-header p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}
.acp .page-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.acp .eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.acp .page-toolbar,
.acp .montage-toolbar {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.acp .page--standard .page-toolbar {
  margin-bottom: 18px;
}
.acp .tabs {
  display: flex;
  min-width: 0;
  align-self: stretch;
  gap: 6px;
}
.acp .tab {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.acp .tab:hover {
  color: var(--text);
}
.acp .tab.is-active {
  color: var(--text);
  font-weight: 600;
}
.acp .tab.is-active::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  content: "";
}
.acp .tab__count {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.acp .toolbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.acp .button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.acp .button:active:not(:disabled) {
  transform: translateY(1px);
}
.acp .button--sm {
  min-height: 32px;
  padding: 0 11px;
  font-size: 12px;
}
.acp .button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.acp .button--primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}
.acp .button--primary:active:not(:disabled) {
  border-color: var(--accent-pressed);
  background: var(--accent-pressed);
}
.acp .button--secondary {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
}
.acp .button--secondary:hover:not(:disabled) {
  border-color: #4d5b74;
  background: var(--surface-raised);
}
.acp .button--soft {
  border-color: rgba(118, 228, 181, 0.24);
  background: var(--surface-selected);
  color: var(--accent);
}
.acp .button--soft:hover:not(:disabled) {
  background: rgba(118, 228, 181, 0.14);
}
.acp .button--ghost,
.acp .button--danger-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}
.acp .button--ghost:hover:not(:disabled) {
  background: var(--surface-raised);
  color: var(--text);
}
.acp .button--danger-ghost {
  color: var(--danger);
}
.acp .button--danger-ghost:hover:not(:disabled) {
  background: var(--danger-bg);
}
.acp .button--danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #24070c;
}
.acp .button--danger:hover:not(:disabled) {
  background: #ff93a0;
}
.acp .button:disabled {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text-disabled);
  opacity: 0.78;
}
.acp .icon-button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.acp .icon-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--text);
}
.acp .search-field {
  display: grid;
  width: min(290px, 30vw);
  min-width: 210px;
  height: 38px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-secondary);
}
.acp .search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(118, 228, 181, 0.12);
}
.acp .search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}
.acp .search-field input::placeholder {
  color: var(--text-subtle);
}
.acp .search-field button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
}
.acp .field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}
.acp .field__label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.acp .field__hint {
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 16px;
}
.acp .field input,
.acp .field textarea,
.acp .field select,
.acp .copy-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.acp .field input,
.acp .field select,
.acp .copy-field input {
  height: 38px;
  padding: 0 11px;
}
.acp .field textarea {
  min-height: 86px;
  padding: 10px 11px;
  line-height: 1.5;
  resize: vertical;
}
.acp .field input::placeholder,
.acp .field textarea::placeholder {
  color: var(--text-subtle);
}
.acp .field input:hover,
.acp .field textarea:hover,
.acp .field select:hover,
.acp .copy-field input:hover {
  border-color: var(--line-strong);
}
.acp .field input:focus,
.acp .field textarea:focus,
.acp .field select:focus,
.acp .copy-field input:focus {
  border-color: var(--accent);
}
.acp .field--compact {
  gap: 0;
}
.acp .select-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}
.acp .select-wrap select {
  min-width: 148px;
  appearance: none;
  padding-right: 34px;
}
.acp .select-wrap > svg {
  position: absolute;
  top: 50%;
  right: 10px;
  pointer-events: none;
  transform: translateY(-50%);
  color: var(--text-secondary);
}
.acp .field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.acp .form-stack,
.acp .drawer-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.acp .status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(152, 164, 183, 0.07);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.acp .status--success {
  border-color: rgba(97, 211, 160, 0.28);
  background: var(--success-bg);
  color: var(--success);
}
.acp .status--info {
  border-color: rgba(104, 181, 255, 0.28);
  background: var(--info-bg);
  color: var(--info);
}
.acp .status--warning {
  border-color: rgba(255, 200, 107, 0.28);
  background: var(--warning-bg);
  color: var(--warning);
}
.acp .status--danger {
  border-color: rgba(255, 125, 140, 0.28);
  background: var(--danger-bg);
  color: var(--danger);
}
.acp .status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.acp .progress {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #273142;
}
.acp .progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}
.acp .progress__bar--success {
  background: var(--success);
}
.acp .progress__bar--warning {
  background: var(--warning);
}
.acp .panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.acp .panel__header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.acp .panel__header h2 {
  font-size: 15px;
  font-weight: 650;
  line-height: 21px;
}
.acp .panel__header p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 17px;
}
.acp .panel__actions {
  display: flex;
  gap: 8px;
}
.acp .stats-grid {
  display: grid;
  gap: 10px;
}
.acp .stats-grid--vertical {
  grid-template-columns: 1fr;
}
.acp .stats-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.acp .stat {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.acp .stat strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.acp .stat > span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}
.acp .stat small {
  margin-top: 6px;
  color: var(--text-subtle);
  font-size: 11px;
}
.acp .stat--accent strong {
  color: var(--accent);
}
.acp .stat--success strong {
  color: var(--success);
}
.acp .stat--info strong {
  color: var(--info);
}
.acp .stat--danger strong {
  color: var(--danger);
}
.acp .notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(104, 181, 255, 0.22);
  border-radius: 8px;
  background: var(--info-bg);
  color: var(--info);
  font-size: 12px;
}
.acp .notice > div {
  min-width: 0;
}
.acp .notice strong {
  color: inherit;
  font-size: 12px;
  font-weight: 600;
}
.acp .notice p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 16px;
}
.acp .notice--success {
  border-color: rgba(97, 211, 160, 0.22);
  background: var(--success-bg);
  color: var(--success);
}
.acp .notice--warning {
  border-color: rgba(255, 200, 107, 0.22);
  background: var(--warning-bg);
  color: var(--warning);
}
.acp .notice--danger {
  border-color: rgba(255, 125, 140, 0.22);
  background: var(--danger-bg);
  color: var(--danger);
}
.acp .check-row,
.acp .radio-row {
  position: relative;
  display: grid;
  min-height: 50px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.acp .check-row:hover,
.acp .radio-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}
.acp .check-row:has(input:checked),
.acp .radio-row:has(input:checked) {
  border-color: rgba(118, 228, 181, 0.42);
  background: var(--surface-selected);
}
.acp .check-row input,
.acp .radio-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.acp .check-row__box,
.acp .radio-row__circle {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--canvas);
  color: transparent;
}
.acp .check-row input:checked + .check-row__box {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.acp .radio-row__circle {
  border-radius: 50%;
}
.acp .radio-row input:checked + .radio-row__circle {
  border: 5px solid var(--accent);
  background: var(--canvas);
}
.acp .check-row__copy,
.acp .radio-row__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.acp .check-row__copy strong,
.acp .radio-row__copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
}
.acp .check-row__copy span,
.acp .radio-row__copy span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 15px;
}
.acp .choice-list,
.acp .radio-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.acp .choice-list--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.acp .toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.acp .toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.acp .toggle__track {
  display: flex;
  width: 32px;
  height: 18px;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #242c39;
  transition: background 120ms ease, border-color 120ms ease;
}
.acp .toggle__track span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 120ms ease, background 120ms ease;
}
.acp .toggle input:checked + .toggle__track {
  border-color: var(--accent);
  background: rgba(118, 228, 181, 0.18);
}
.acp .toggle input:checked + .toggle__track span {
  background: var(--accent);
  transform: translateX(14px);
}
.acp .key-value {
  display: flex;
  margin: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.acp .key-value > div {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
}
.acp .key-value > div:last-child {
  border-bottom: 0;
}
.acp .key-value dt {
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .key-value dd {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}
.acp .inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.acp .inline-link:hover {
  color: var(--accent-hover);
}
.acp .table-wrap {
  width: 100%;
  max-width: 100%;
  contain: inline-size paint;
  overflow: auto;
}
.acp .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.acp .data-table th {
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #0f131b;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.acp .data-table td {
  min-height: 58px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  vertical-align: middle;
}
.acp .data-table tbody tr:last-child td {
  border-bottom: 0;
}
.acp .data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.015);
}
.acp .data-table tr.is-selected td {
  background: var(--surface-selected);
}
.acp .data-table td > strong,
.acp .data-table td > small {
  display: block;
}
.acp .data-table td > strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.acp .data-table td > small {
  margin-top: 3px;
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .table-panel {
  min-height: 0;
}
.acp .table-progress {
  display: grid;
  min-width: 110px;
  grid-template-columns: minmax(60px, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.acp .table-progress--wide {
  min-width: 135px;
}
.acp .person-cell,
.acp .channel-cell {
  display: flex;
  min-width: 160px;
  align-items: center;
  gap: 9px;
}
.acp .person-cell > div,
.acp .channel-cell > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.acp .person-cell strong,
.acp .channel-cell strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .person-cell small,
.acp .channel-cell small {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .channel-avatar {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #3b495f;
  border-radius: 7px;
  background: #202938;
  color: #dce4ef;
  font-size: 10px;
  font-weight: 700;
}
.acp .disclosure {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.acp .disclosure summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
}
.acp .disclosure summary::-webkit-details-marker {
  display: none;
}
.acp .disclosure summary svg {
  transition: transform 180ms ease;
}
.acp .disclosure[open] summary svg {
  transform: rotate(90deg);
}
.acp .disclosure__body {
  padding: 0 12px 12px;
}
.acp .detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acp .overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: var(--overlay);
}
.acp .overlay--center {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.acp .drawer {
  display: grid;
  width: min(var(--drawer-width), calc(100vw - 24px));
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line-strong);
  background: var(--shell);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
  animation: acp-drawer-in 180ms ease both;
}
@keyframes acp-drawer-in {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.acp .drawer__header,
.acp .modal__header {
  display: flex;
  min-height: 76px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.acp .drawer__header h2,
.acp .modal__header h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
}
.acp .drawer__header p,
.acp .modal__header p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 17px;
}
.acp .drawer__body,
.acp .modal__body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
}
.acp .drawer__footer,
.acp .modal__footer {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: #0e1219;
}
.acp .drawer-total {
  display: flex;
  margin-right: auto;
  flex-direction: column;
  gap: 2px;
}
.acp .drawer-total span {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .drawer-total strong {
  font-size: 13px;
}
.acp .modal {
  display: grid;
  width: min(520px, calc(100vw - 32px));
  max-height: min(850px, calc(100dvh - 40px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--shell);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
}
.acp .modal--lg {
  width: min(760px, calc(100vw - 32px));
}
.acp .modal--sm {
  width: min(420px, calc(100vw - 32px));
}
.acp .toast {
  position: fixed;
  z-index: 140;
  right: 24px;
  bottom: 24px;
  display: grid;
  max-width: 440px;
  min-height: 48px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(97, 211, 160, 0.3);
  border-radius: 9px;
  background: #15221d;
  color: var(--success);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  font-size: 12px;
}
.acp .toast--info {
  border-color: rgba(104, 181, 255, 0.3);
  background: #121c27;
  color: var(--info);
}
.acp .toast--danger {
  border-color: rgba(255, 125, 140, 0.3);
  background: #25151a;
  color: var(--danger);
}
.acp .toast button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}
.acp .form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acp .form-section--flat {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.acp .form-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.acp .form-section__heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.acp .form-section h3 {
  font-size: 13px;
  font-weight: 650;
}
.acp .step-number {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .acp *,
.acp *::before,
.acp *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Assignments */
.acp .assignment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: start;
  gap: 16px;
}
.acp .capacity-list {
  display: grid;
  gap: 10px;
}
.acp .capacity-row {
  display: grid;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.acp .capacity-row:hover {
  border-color: var(--line-strong);
}
.acp .capacity-row__top,
.acp .capacity-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.acp .capacity-row__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.acp .capacity-row__identity > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.acp .capacity-row__identity strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.acp .capacity-row__identity span {
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.acp .capacity-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .capacity-row__facts b {
  color: var(--text);
  font-weight: 650;
}
.acp .capacity-row__coverage {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.acp .capacity-row__coverage > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acp .capacity-row__coverage span {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .capacity-row__coverage small {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .capacity-row__bottom {
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.acp .capacity-row__bottom > span {
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .capacity-row__bottom strong {
  color: var(--text);
}
.acp .assignment-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acp .compact-panel {
  padding: 14px;
}
.acp .compact-panel .panel__header {
  min-height: 0;
  padding: 0 0 10px;
  border-bottom: 0;
}
.acp .compact-panel .body-copy {
  margin-bottom: 12px;
}
.acp .assignment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.acp .drawer-context {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.acp .drawer-context > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acp .drawer-context strong {
  font-size: 12px;
}
.acp .drawer-context span {
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .choice-list--people {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 3px;
}
.acp .assignment-preview {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(118, 228, 181, 0.22);
  border-radius: 8px;
  background: var(--surface-selected);
  color: var(--accent);
}
.acp .assignment-preview > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acp .assignment-preview strong {
  color: var(--text);
  font-size: 12px;
}
.acp .assignment-preview span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 16px;
}
/* Research */
.acp .research-layout {
  display: grid;
  min-height: 650px;
  grid-template-columns: minmax(300px, 0.8fr) minmax(440px, 1.2fr);
  grid-template-rows: minmax(460px, auto) auto;
  gap: 14px;
}
.acp .research-list-panel,
.acp .research-detail-panel,
.acp .research-jobs-panel {
  min-height: 0;
}
.acp .research-list-panel .panel__header {
  min-height: 54px;
}
.acp .record-list {
  display: flex;
  max-height: 570px;
  flex-direction: column;
  overflow-y: auto;
}
.acp .record-row {
  display: grid;
  min-height: 82px;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.acp .record-row:last-child {
  border-bottom: 0;
}
.acp .record-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.acp .record-row.is-selected {
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}
.acp .record-row img {
  width: 96px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
}
.acp .record-row__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.acp .record-row__copy strong,
.acp .record-row__copy span,
.acp .record-row__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .record-row__copy strong {
  font-size: 12px;
  font-weight: 650;
}
.acp .record-row__copy span {
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .record-row__copy small {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .research-detail-panel {
  padding: 14px;
}
.acp .record-detail__hero {
  position: relative;
  height: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #05070a;
}
.acp .record-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acp .record-detail__hero::after {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 11, 0.16);
  content: "";
}
.acp .record-detail__overlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(8, 11, 16, 0.74);
  color: var(--text);
  transform: translate(-50%, -50%);
}
.acp .record-detail__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 12px;
}
.acp .record-detail__heading h2 {
  font-size: 16px;
  line-height: 22px;
}
.acp .record-detail__heading p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .research-detail-panel .key-value,
.acp .research-detail-panel .notice {
  margin-bottom: 12px;
}
.acp .research-jobs-panel {
  grid-column: 1 / -1;
}
.acp .job-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.acp .job-row {
  display: grid;
  min-height: 96px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 10px 12px;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
}
.acp .job-row:last-child {
  border-right: 0;
}
.acp .job-row__main {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
}
.acp .job-row__main > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.acp .job-row__main strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .job-row__main span {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .job-state {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--text-subtle);
}
.acp .job-state--success {
  background: var(--success);
}
.acp .job-state--info {
  background: var(--info);
}
.acp .job-state--danger {
  background: var(--danger);
}
.acp .job-row__progress {
  display: grid;
  width: 110px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--info);
  font-size: 10px;
}
.acp .benchmarks-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.acp .benchmark-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.acp .benchmark-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.acp .benchmark-overview .stat {
  min-height: 80px;
  padding: 11px 12px;
}
.acp .benchmark-overview .stat strong {
  font-size: 18px;
}
.acp .run-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.acp .run-row {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}
.acp .run-row:last-child {
  border-bottom: 0;
}
.acp .run-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.acp .run-row strong {
  font-size: 11px;
}
.acp .run-row span {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .upload-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.acp .upload-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Montage */
.acp .montage-toolbar {
  min-width: 0;
}
.acp .master-detail {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: clamp(365px, 34%, 420px) minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
}
.acp .queue-panel,
.acp .inspector,
.acp .template-inspector {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  background: var(--surface);
}
.acp .queue-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 46px;
}
.acp .queue-panel__scroll {
  min-height: 0;
  overflow-y: auto;
}
.acp .queue-panel__footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
  background: #0e1219;
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}
.acp .pagination button,
.acp .pagination b {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
}
.acp .pagination button {
  cursor: pointer;
}
.acp .pagination button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.acp .pagination b {
  background: var(--surface-raised);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
}
.acp .clip-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 82px;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.acp .clip-row:last-child {
  border-bottom: 0;
}
.acp .clip-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.acp .clip-row.is-selected {
  background: var(--surface-selected);
}
.acp .clip-row.is-selected::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
  content: "";
}
.acp .clip-row img {
  width: 96px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
  background: #07090d;
}
.acp .clip-row__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.acp .clip-row__copy strong,
.acp .clip-row__copy span,
.acp .clip-row__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .clip-row__copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.acp .clip-row__copy span {
  color: var(--text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.acp .clip-row__copy small {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .clip-row__state {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.acp .clip-row__state .progress {
  width: 86px;
}
.acp .clip-row__state > small {
  color: var(--text-subtle);
  font-size: 9px;
  white-space: nowrap;
}
.acp .inspector,
.acp .template-inspector,
.acp .template-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.acp .inspector__header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #0f131b;
}
.acp .inspector__header > div {
  min-width: 0;
}
.acp .inspector__header h2 {
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .inspector__header p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.acp .inspector__body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 12px;
}
.acp .inspector__footer {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #0e1219;
}
.acp .inspector__footer .button--primary {
  min-width: 180px;
}
.acp .footer-hint {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 15px;
}
.acp .footer-hint svg {
  flex: 0 0 auto;
  color: var(--success);
}
.acp .media-player {
  position: relative;
  flex: 0 0 auto;
  min-height: 230px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #040609;
}
.acp .media-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acp .media-player__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  height: 38px;
  grid-template-columns: auto auto minmax(70px, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  background: rgba(5, 7, 10, 0.9);
  color: #e7ecf2;
}
.acp .media-player__controls > span {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.acp .media-player__timeline {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}
.acp .media-player__timeline span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.acp .media-player--portrait {
  width: min(100%, 320px);
  min-height: 0;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
}
.acp .selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.acp .selection-section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
.acp .selection-section__heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.acp .selection-section__heading > div {
  min-width: 0;
}
.acp .selection-section h3 {
  font-size: 13px;
  font-weight: 650;
}
.acp .selection-section p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 15px;
}
.acp .editor-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}
.acp .editor-section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.acp .editor-section__heading h3 {
  font-size: 14px;
}
.acp .editor-section__heading p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .save-state {
  color: var(--warning);
  font-size: 10px;
  white-space: nowrap;
}
.acp .save-state--saved {
  color: var(--success);
}
.acp .region-editor {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(300px, 1fr);
  align-items: start;
  gap: 12px;
}
.acp .portrait-composition {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #05070a;
}
.acp .portrait-composition__camera,
.acp .portrait-composition__content {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
}
.acp .portrait-composition__camera {
  top: 0;
  height: var(--camera-height);
  border-bottom: 2px solid var(--info);
}
.acp .portrait-composition__content {
  bottom: 0;
  height: var(--content-height);
  border-top: 2px solid var(--accent);
}
.acp .portrait-composition img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acp .portrait-composition__camera img {
  object-position: 50% 38%;
}
.acp .portrait-composition__camera > span,
.acp .portrait-composition__content > span {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(5, 8, 12, 0.8);
  color: var(--text);
  font-size: 8px;
}
.acp .safe-area,
.acp .template-canvas__safe {
  position: absolute;
  z-index: 2;
  inset: 7% 5% 13%;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.acp .region-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acp .region-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0e1219;
}
.acp .region-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.acp .region-card__title strong {
  font-size: 11px;
}
.acp .region-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.acp .region-card--camera .region-dot {
  background: var(--info);
}
.acp .range-control,
.acp .template-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acp .range-control > span,
.acp .template-range > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .range-control b,
.acp .template-range strong {
  font-weight: 500;
}
.acp .range-control em,
.acp .template-range em {
  color: var(--text);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.acp .range-control input,
.acp .template-range input {
  width: 100%;
  accent-color: var(--accent);
}
.acp .numeric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.acp .numeric-grid span {
  display: flex;
  min-width: 0;
  height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text-subtle);
  font-size: 9px;
}
.acp .numeric-grid b {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 500;
}
.acp .character-count {
  align-self: flex-end;
  margin-top: -5px;
  color: var(--text-subtle);
  font-size: 9px;
}
.acp .template-applied {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(118, 228, 181, 0.22);
  border-radius: 8px;
  background: var(--surface-selected);
  color: var(--accent);
}
.acp .template-applied > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acp .template-applied strong {
  color: var(--text);
  font-size: 11px;
}
.acp .template-applied span {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 15px;
}
.acp .transcript-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.acp .transcript-list > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.acp .transcript-list span {
  color: var(--text-subtle);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.acp .transcript-list input {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0d1118;
  color: var(--text);
  font-size: 10px;
}
.acp .render-review {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  align-items: start;
  gap: 12px;
}
.acp .render-review__media {
  display: flex;
  min-height: 0;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080a0f;
}
.acp .render-review__side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}
.acp .quality-card,
.acp .decision-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
.acp .quality-card > h3,
.acp .decision-form > h3 {
  font-size: 13px;
}
.acp .quality-card__heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.acp .quality-card__heading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acp .quality-card__heading h3 {
  font-size: 12px;
}
.acp .quality-card__heading p {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .quality-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.acp .quality-icon--warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.acp .review-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acp .review-note > span {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .review-secondary-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.acp .decision-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.acp .inspector__footer--review {
  align-items: center;
}
.acp .render-progress-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0e1219;
}
.acp .render-progress-card__top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.acp .render-progress-card__top > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acp .render-progress-card__top h3 {
  font-size: 13px;
}
.acp .render-progress-card__top p {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .render-progress-card__top > strong {
  color: var(--info);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.acp .render-spinner {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--info);
}
.acp .render-spinner svg {
  animation: acp-spin 1.8s linear infinite;
}
@keyframes acp-spin {
  to { transform: rotate(360deg); }
}
.acp .render-stages {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .render-stages span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.acp .render-stages .is-done {
  color: var(--success);
}
.acp .render-stages .is-active {
  color: var(--info);
}
.acp .empty-inspector {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  color: var(--success);
}
.acp .empty-inspector h2 {
  color: var(--text);
  font-size: 17px;
}
.acp .empty-inspector p {
  max-width: 360px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
/* Templates */
.acp .master-detail--templates {
  grid-template-columns: clamp(360px, 34%, 420px) minmax(0, 1fr);
}
.acp .template-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 94px;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.acp .template-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.acp .template-row.is-selected {
  background: var(--surface-selected);
}
.acp .template-row.is-selected::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  content: "";
}
.acp .template-row__preview {
  position: relative;
  width: 48px;
  height: 70px;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #05070a;
}
.acp .template-row__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acp .template-row__preview span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}
.acp .template-row__copy,
.acp .template-row__meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.acp .template-row__copy strong,
.acp .template-row__copy span,
.acp .template-row__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .template-row__copy strong {
  font-size: 12px;
  font-weight: 600;
}
.acp .template-row__copy span {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .template-row__copy small,
.acp .template-row__meta small {
  color: var(--text-subtle);
  font-size: 9px;
}
.acp .template-row__meta {
  align-items: flex-end;
}
.acp .template-inspector__body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(260px, 0.9fr) minmax(290px, 1.1fr);
  align-items: start;
  gap: 14px;
  overflow-y: auto;
  padding: 14px;
}
.acp .template-inspector__preview {
  display: flex;
  min-height: 100%;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080a0f;
}
.acp .template-inspector__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acp .template-canvas {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #030508;
}
.acp .template-canvas__camera,
.acp .template-canvas__game {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
}
.acp .template-canvas__camera {
  top: 0;
  height: var(--split);
  border-bottom: 2px solid var(--info);
}
.acp .template-canvas__game {
  bottom: 0;
  height: calc(100% - var(--split));
  border-top: 2px solid var(--accent);
}
.acp .template-canvas__camera img,
.acp .template-canvas__game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acp .template-canvas__camera > span,
.acp .template-canvas__game > span {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(3, 5, 8, 0.84);
  color: var(--text-secondary);
  font-size: 8px;
}
.acp .template-canvas__hook,
.acp .template-canvas__captions {
  position: absolute;
  z-index: 3;
  right: 6%;
  left: 6%;
  padding: 4px 5px;
  border: 1px solid rgba(255, 200, 107, 0.72);
  border-radius: 4px;
  background: rgba(6, 8, 12, 0.72);
  color: #fff;
  font-size: clamp(7px, 0.65vw, 10px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}
.acp .template-canvas__hook {
  top: var(--hook-y);
}
.acp .template-canvas__captions {
  top: var(--captions-y);
  border-color: rgba(118, 228, 181, 0.72);
}
.acp .template-canvas__hook.is-editable,
.acp .template-canvas__captions.is-editable {
  box-shadow: 0 0 0 2px rgba(255, 200, 107, 0.12);
}
.acp .template-canvas__captions.is-editable {
  box-shadow: 0 0 0 2px rgba(118, 228, 181, 0.12);
}
.acp .template-canvas__format {
  position: absolute;
  z-index: 4;
  right: 5px;
  bottom: 5px;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(3, 5, 8, 0.78);
  color: var(--text-subtle);
  font-size: 7px;
}
.acp .template-editor {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  background: var(--surface);
}
.acp .template-editor__body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 370px);
}
.acp .template-editor__stage {
  display: flex;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #080a0f;
}
.acp .template-editor__stage .template-canvas {
  width: min(100%, 380px);
}
.acp .template-editor__controls {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px;
}
.acp .editor-control-group {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
.acp .editor-control-group h3 {
  font-size: 13px;
}
.acp .coordinate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.acp .code-field textarea {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.6;
}
/* Team */
.acp .team-panel,
.acp .recovery-panel {
  min-height: 0;
}
.acp .access-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(460px, 1.3fr);
  align-items: start;
  gap: 14px;
}
.acp .access-guide {
  padding: 16px;
}
.acp .access-guide .panel__header {
  min-height: 0;
  padding: 0 0 14px;
  border-bottom: 0;
}
.acp .access-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.acp .access-step > span {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}
.acp .access-step > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acp .access-step strong {
  font-size: 12px;
}
.acp .access-step p {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 16px;
}
.acp .recovery-list {
  display: flex;
  max-height: 560px;
  flex-direction: column;
  overflow-y: auto;
}
.acp .recovery-row {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
}
.acp .recovery-row:last-child {
  border-bottom: 0;
}
.acp .link-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-align: center;
}
.acp .link-result__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.acp .link-result > div:not(.copy-field) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acp .link-result strong {
  font-size: 14px;
}
.acp .link-result p {
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .copy-field {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
/* Live */
.acp .priority-value {
  display: inline-flex;
  min-width: 34px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.acp .lease-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.acp .lease-cell button {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
}
.acp .lease-cell button:hover {
  background: var(--danger-bg);
  color: var(--danger);
}
.acp .runs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 14px;
}
.acp .run-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.acp .live-run-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
.acp .live-run-card__top {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.acp .live-run-card__top > div {
  min-width: 0;
}
.acp .live-run-card h3 {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .live-run-card p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .live-run-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.acp .live-run-card__metrics span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-subtle);
  font-size: 9px;
  text-align: center;
}
.acp .live-run-card__metrics b {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}
.acp .component-health {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--text-secondary);
  font-size: 9px;
}
.acp .component-health span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.acp .health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
}
.acp .health-dot--good {
  background: var(--success);
}
.acp .live-run-card footer {
  display: flex;
  min-height: 34px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.acp .leases-panel {
  min-width: 0;
}
.acp .current-leases {
  display: flex;
  flex-direction: column;
}
.acp .current-leases > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.acp .current-leases > div:last-child {
  border-bottom: 0;
}
.acp .current-leases > div > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.acp .current-leases strong {
  font-size: 11px;
}
.acp .current-leases span {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .analytics-page,
.acp .progress-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.acp .analytics-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 14px;
}
.acp .advanced-settings {
  border: 1px solid var(--line);
  border-radius: 8px;
}
.acp .advanced-settings summary {
  padding: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.acp .advanced-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
/* Data */
.acp .import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.acp .import-panel {
  padding-bottom: 0;
}
.acp .import-panel > .field,
.acp .import-panel > .notice {
  margin: 14px 14px 0;
}
.acp .panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: #0e1219;
}
.acp .export-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(350px, 0.95fr);
  align-items: stretch;
  gap: 14px;
}
.acp .export-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
}
.acp .export-icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(118, 228, 181, 0.3);
  border-radius: 10px;
  background: var(--surface-selected);
  color: var(--accent);
}
.acp .export-card__copy {
  min-width: 0;
}
.acp .export-card__copy h2 {
  font-size: 21px;
}
.acp .export-card__copy p {
  max-width: 560px;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 18px;
}
.acp .export-card__meta {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.acp .export-card__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px;
  border-right: 1px solid var(--line);
}
.acp .export-card__meta > div:last-child {
  border-right: 0;
}
.acp .export-card__meta span {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .export-card__meta strong {
  color: var(--text);
  font-size: 12px;
}
.acp .export-card > .button {
  grid-column: 1 / -1;
  justify-self: start;
}
.acp .manifest-list {
  display: flex;
  flex-direction: column;
}
.acp .manifest-list > div {
  display: grid;
  min-height: 62px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
}
.acp .manifest-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.acp .manifest-list > div > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acp .manifest-list strong {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}
.acp .manifest-list span,
.acp .manifest-list small {
  color: var(--text-secondary);
  font-size: 10px;
}
.acp .export-manifest > .notice {
  margin: 13px;
}
@media (max-width: 1250px) {
  .acp .app-shell {
    --sidebar-width: 72px;
  }
  .acp .sidebar__brand-row {
    justify-content: center;
    padding: 0;
  }
  .acp .brand__name,
.acp .nav-item > span:not(.nav-count),
.acp .nav-group__label,
.acp .profile-button__copy,
.acp .profile-button > svg,
.acp .nav-count,
.acp .sidebar__collapse {
    display: none;
  }
  .acp .nav-item {
    display: flex;
    justify-content: center;
    padding: 0;
  }
  .acp .profile-button {
    display: flex;
    justify-content: center;
    padding: 0;
  }
  .acp .page--standard {
    padding-inline: 20px;
  }
  .acp .page--workspace {
    padding-inline: 18px;
  }
  .acp .master-detail,
.acp .master-detail--templates {
    grid-template-columns: 335px minmax(0, 1fr);
  }
  .acp .clip-row,
.acp .record-row {
    grid-template-columns: 74px minmax(0, 1fr);
  }
  .acp .clip-row img,
.acp .record-row img {
    width: 74px;
    height: 44px;
  }
  .acp .clip-row__state,
.acp .record-row > .status {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .acp .region-editor {
    grid-template-columns: 170px minmax(260px, 1fr);
  }
  .acp .run-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1020px) {
  .acp .stats-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .acp .assignment-layout,
.acp .runs-layout,
.acp .access-layout,
.acp .export-layout {
    grid-template-columns: 1fr;
  }
  .acp .assignment-summary {
    display: grid;
    grid-template-columns: 1fr;
  }
  .acp .assignment-summary .stats-grid--vertical {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .acp .research-layout {
    grid-template-columns: 330px minmax(0, 1fr);
  }
  .acp .job-list {
    grid-template-columns: 1fr;
  }
  .acp .job-row {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .acp .job-row:last-child {
    border-bottom: 0;
  }
  .acp .analytics-grid {
    grid-template-columns: 1fr;
  }
  .acp .template-editor__body {
    grid-template-columns: minmax(360px, 1fr) 320px;
  }
}
@media (max-width: 900px) {
  .acp .app-shell,
.acp .app-shell.has-collapsed-sidebar {
    display: block;
    --sidebar-width: 280px;
  }
  .acp .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    transform: translateX(-102%);
    transition: transform 180ms ease;
  }
  .acp .sidebar.is-open {
    transform: translateX(0);
  }
  .acp .sidebar-scrim {
    position: fixed;
    z-index: 29;
    inset: 0;
    display: block;
    border: 0;
    background: var(--overlay);
  }
  .acp .sidebar__brand-row {
    justify-content: space-between;
    padding: 0 18px;
  }
  .acp .brand__name,
.acp .nav-item > span:not(.nav-count),
.acp .nav-group__label,
.acp .profile-button__copy,
.acp .profile-button > svg,
.acp .nav-count {
    display: initial;
  }
  .acp .nav-item {
    display: grid;
    justify-content: initial;
    padding: 0 12px;
  }
  .acp .profile-button {
    display: grid;
    justify-content: initial;
    padding: 7px;
  }
  .acp .sidebar__mobile-close {
    display: inline-flex !important;
  }
  .acp .sidebar__collapse {
    display: none;
  }
  .acp .app-main {
    height: 100dvh;
  }
  .acp .mobile-topbar {
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: var(--shell);
  }
  .acp .mobile-topbar .brand__name {
    display: inline;
  }
  .acp .page {
    height: calc(100dvh - 56px);
  }
  .acp .page--standard,
.acp .page--workspace {
    overflow-y: auto;
    padding: 18px 16px 24px;
  }
  .acp .page--workspace {
    display: block;
  }
  .acp .page-header {
    min-height: 60px;
  }
  .acp .page-header h1 {
    font-size: 24px;
  }
  .acp .page-toolbar,
.acp .montage-toolbar {
    align-items: flex-end;
    flex-direction: column;
  }
  .acp .tabs {
    width: 100%;
    overflow-x: auto;
  }
  .acp .toolbar-actions {
    width: 100%;
    padding-bottom: 8px;
  }
  .acp .search-field {
    width: 100%;
  }
  .acp .master-detail,
.acp .master-detail--templates {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
  }
  .acp .queue-panel {
    min-height: 360px;
    max-height: 440px;
    border-radius: 9px;
  }
  .acp .inspector,
.acp .template-inspector,
.acp .template-editor {
    min-height: 720px;
    border-radius: 9px;
  }
  .acp .research-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .acp .research-jobs-panel {
    grid-column: auto;
  }
  .acp .record-list {
    max-height: 340px;
  }
  .acp .import-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .acp .page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .acp .page-header__actions .button {
    width: 100%;
  }
  .acp .tabs {
    gap: 0;
  }
  .acp .tab {
    padding-inline: 8px;
    font-size: 12px;
  }
  .acp .toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .acp .toolbar-actions > * {
    width: 100%;
  }
  .acp .select-wrap select {
    width: 100%;
  }
  .acp .assignment-summary .stats-grid--vertical,
.acp .stats-grid--four,
.acp .benchmark-stats,
.acp .benchmark-overview,
.acp .run-cards,
.acp .import-grid,
.acp .field-row,
.acp .choice-list--two {
    grid-template-columns: 1fr;
  }
  .acp .capacity-row__coverage {
    grid-template-columns: 1fr;
  }
  .acp .capacity-row__top,
.acp .capacity-row__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
  .acp .selection-grid,
.acp .render-review,
.acp .template-inspector__body,
.acp .region-editor {
    grid-template-columns: 1fr;
  }
  .acp .portrait-composition {
    width: min(260px, 100%);
    margin-inline: auto;
  }
  .acp .template-editor__body {
    display: flex;
    flex-direction: column;
  }
  .acp .template-editor__stage {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .acp .inspector__footer,
.acp .drawer__footer,
.acp .modal__footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .acp .inspector__footer .button,
.acp .drawer__footer .button,
.acp .modal__footer .button {
    width: 100%;
  }
  .acp .review-secondary-actions {
    width: 100%;
    flex-direction: column;
  }
  .acp .review-secondary-actions .button {
    width: 100%;
  }
  .acp .export-card {
    grid-template-columns: 1fr;
  }
  .acp .export-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .acp .export-card__meta > div:nth-child(2) {
    border-right: 0;
  }
  .acp .overlay--center {
    padding: 8px;
  }
  .acp .modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .acp .drawer {
    width: 100vw;
  }
  .acp .toast {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
}

/* ------------------------------------------------------------------------- */
/* Takeover of the document shell.                                           */
/*                                                                           */
/* The redesign carries its own brand, navigation and profile menu inside the */
/* sidebar, so the topbar from index.html would be a second, competing one.   */
/* This is the same mechanism the live workspace already uses for its         */
/* one-screen layout (`main.live-view` in styles.css): the admin root asks for */
/* the whole viewport and the document chrome steps aside.                    */
/* ------------------------------------------------------------------------- */

body:has(main.admin-view) {
  overflow: hidden;
}

body:has(main.admin-view) .topbar {
  display: none;
}

main.admin-view {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 100vw would add the scrollbar's width to the grid and push the page into a
   horizontal scroll on Windows; the main element is already viewport-wide. */
.acp .app-shell {
  width: 100%;
}

/* The legacy banner and save indicator live outside <main>, so they survive the
   takeover. They are kept — an error must never be swallowed — but restyled to
   the new palette and lifted out of the layout, since admin screens report
   through the toast and these two only fire from shared shell code. */
body:has(main.admin-view) #global-error.banner {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 90;
  width: min(560px, calc(100vw - 24px));
  margin: 0;
  transform: translateX(-50%);
  border-color: rgba(255, 125, 140, 0.4);
  border-radius: 10px;
  background: #1a1015;
  color: var(--danger);
  font-size: 12px;
}

body:has(main.admin-view) #save-status {
  right: 16px;
  bottom: 16px;
  color: var(--text-subtle);
  font-size: 12px;
}

/* ------------------------------------------------------------------------- */
/* Profile menu.                                                             */
/*                                                                           */
/* The prototype's profile button answered with a toast saying the area was   */
/* out of scope. Production has to carry what the old topbar did — who you    */
/* are signed in as, and the way out — so the button opens a real menu.       */
/* ------------------------------------------------------------------------- */

.acp .sidebar__footer {
  position: relative;
}

.acp .acp-profile-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 10px;
  z-index: 40;
  display: flex;
  width: max-content;
  min-width: 190px;
  max-width: calc(100vw - 32px);
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.acp .acp-profile-menu__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.acp .acp-profile-menu__head strong {
  font-size: 13px;
  font-weight: 600;
}

.acp .acp-profile-menu__action {
  justify-content: flex-start;
}

/* Collapsed to 72 px the footer is too narrow to hang a menu off its left
   edge without leaving the viewport. */
.acp .has-collapsed-sidebar .acp-profile-menu {
  left: 0;
}

/* ------------------------------------------------------------------------- */
/* Production media surfaces.                                               */
/*                                                                          */
/* The prototype used still images and a decorative control bar. These are   */
/* the working parts: a real player, the frame marker that writes the        */
/* rectangles a render uses, and the 9:16 preview drawn from the plan.       */
/* ------------------------------------------------------------------------- */

.acp .media-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #040609;
}

.acp .media-player--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  text-align: center;
}

.acp .media-player--empty p {
  max-width: 30ch;
  color: var(--text-secondary);
  font-size: 12px;
}

.acp .media-player--empty svg {
  color: var(--warning);
}

/* --- frame marker -------------------------------------------------------- */

.acp .frame-marker {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.acp .frame-marker__surface {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #05070a;
  cursor: crosshair;
  touch-action: none;
}

.acp .frame-marker__surface.is-drawing {
  border-color: var(--accent);
}

.acp .frame-marker__surface .media-player {
  min-height: 0;
  border: 0;
  border-radius: 0;
}

/* The player must not swallow the drag that draws a rectangle. */
.acp .frame-marker__surface video {
  pointer-events: none;
}

.acp .frame-marker__rect {
  position: absolute;
  border: 2px solid var(--accent);
  background: rgba(118, 228, 181, 0.12);
  pointer-events: none;
}

.acp .frame-marker__rect--webcam {
  border-color: var(--info);
  background: rgba(104, 181, 255, 0.14);
}

.acp .frame-marker__rect b {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.acp .frame-marker__rect--webcam b {
  background: var(--info);
  color: #06121f;
}

.acp .frame-marker__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.acp .frame-marker__mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.acp .frame-marker__mode:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.acp .frame-marker__mode.is-active {
  border-color: var(--accent);
  background: var(--surface-selected);
  color: var(--text);
}

.acp .region-dot--camera {
  background: var(--info);
}

.acp .frame-marker__readout {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.acp .frame-marker__suggestion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.acp .frame-marker__suggestion svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.acp .frame-marker__suggestion > div {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
}

.acp .frame-marker__suggestion strong {
  font-size: 12px;
  font-weight: 600;
}

.acp .frame-marker__suggestion span {
  color: var(--text-secondary);
  font-size: 11px;
}

/* --- vertical preview ---------------------------------------------------- */

.acp .portrait-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.acp .portrait-preview__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.acp .portrait-preview__slot {
  position: absolute;
  border: 1px dashed rgba(118, 228, 181, 0.5);
}

.acp .portrait-preview__slot--webcam {
  border-color: rgba(104, 181, 255, 0.55);
}

.acp .portrait-preview__slot b {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 4px;
  background: rgba(5, 7, 10, 0.78);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 500;
}

.acp .portrait-preview__text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid rgba(255, 200, 107, 0.5);
  text-align: center;
}

.acp .portrait-preview__text span {
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acp .portrait-preview__captions {
  border-color: rgba(104, 181, 255, 0.5);
}

.acp .safe-area {
  position: absolute;
  border: 1px dashed rgba(152, 164, 183, 0.35);
  pointer-events: none;
}

/* Under 680 px the marker and the preview stop competing for one row. */
@media (max-width: 680px) {
  .acp .region-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .acp .portrait-composition {
    width: min(100%, 210px);
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------------- */
/* Template canvas — production variants.                                    */
/*                                                                           */
/* The prototype hard-coded a camera box and a game box. A real template body */
/* declares its slots, so the canvas draws whatever the body has, and the two */
/* named looks become slot modifiers.                                         */
/* ------------------------------------------------------------------------- */

.acp .template-canvas__slot {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--accent);
  background: rgba(118, 228, 181, 0.07);
}

.acp .template-canvas__slot--webcam {
  border-color: var(--info);
  background: rgba(104, 181, 255, 0.09);
}

.acp .template-canvas__slot--broll {
  border-color: var(--warning);
  background: rgba(255, 200, 107, 0.08);
}

.acp .template-canvas__slot > span {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1px 5px;
  background: rgba(5, 7, 10, 0.8);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 500;
}

/* A JSON body shown for reading, not editing. */
.acp .code-block {
  max-height: 260px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b0e14;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}

/* The editor's back link sits in the toolbar row on its own. */
.acp .page--workspace > .page-toolbar:has(> .button:only-child) {
  justify-content: flex-start;
}

/* A table cell holding a right-aligned number or action. */
.acp .data-table th.is-right,
.acp .data-table td.is-right {
  text-align: right;
}

.acp .data-table td.is-right .button,
.acp .data-table td.is-right .table-progress {
  justify-content: flex-end;
  margin-left: auto;
}

/* The moments inspector lists the clips already cut from a moment; the table
   inside a panel-less inspector needs its own top rule. */
.acp .inspector__body > .table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ------------------------------------------------------------------------- */
/* Queue panel with a heading.                                               */
/*                                                                           */
/* The prototype's queue panel was two rows — the scrolling list and the      */
/* footer. Production names each queue («На разметке», «Ожидают выдачи»,      */
/* «Моменты после кластерного ревью»), so a heading row is added when there   */
/* is a title; without this the fixed two-row grid pushed the list into the   */
/* footer's row.                                                             */
/* ------------------------------------------------------------------------- */

.acp .queue-panel:has(> .panel__header) {
  grid-template-rows: auto minmax(0, 1fr) 46px;
}

/* The prototype's rows led with a 96 px thumbnail. Production has no still for
   a clip that has not been rendered yet, so the copy takes that column and the
   row keeps its proportions instead of leaving a gap. */
.acp .clip-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* An empty state standing in for the list must not be centred inside a grid
   row sized for a list item. */
.acp .queue-panel__scroll > .empty-inspector {
  height: 100%;
}

/* A composition that cannot be built yet says which step is missing. */
.acp .portrait-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.acp .portrait-preview--empty p {
  color: var(--text-subtle);
  font-size: 11px;
  text-align: center;
}

/* The download control is a link, not a button — the endpoint answers with the
   file itself. In the card's grid it must not stretch to fill the leftover row
   the way a block-level child otherwise would. */
.acp .export-card > .button {
  align-self: start;
  min-height: 34px;
}

/* ------------------------------------------------------------------------- */
/* Narrow-width corrections found in the 820 px pass.                        */
/* ------------------------------------------------------------------------- */

/* The search field asks for 210 px and the filter select for its widest option;
   side by side they exceed what the tabs leave over. Allowed to shrink they both
   fit on one row, so only the stacked toolbar below 900 px wraps — wrapping on
   desktop split them onto two rows with room to spare. */
.acp .toolbar-actions .field--compact {
  min-width: 0;
}

@media (max-width: 900px) {
  .acp .toolbar-actions {
    flex-wrap: wrap;
  }
}

/* The template strip is a two-column grid (icon + copy). Production adds a link
   to the template's editor, which had nowhere to go and was crushed to the width
   of its own border; it now takes a row of its own. */
.acp .template-applied {
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

.acp .template-applied > .button {
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .acp .template-applied {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .acp .template-applied > .button {
    grid-column: 2;
    justify-self: start;
  }
}

/* ------------------------------------------------------------------------- */
/* Phone-width corrections found in the 390 px pass.                         */
/* ------------------------------------------------------------------------- */

@media (max-width: 680px) {
  /* Side by side, the status chip took the row and left the clip's name as an
     ellipsis. Stacked, the name gets the full width and the chip sits under it,
     which is the only arrangement where both stay readable.

     Flex rather than a one-column grid: the row's other children would land in
     an implicit second column and share the width all over again. */
  .acp .clip-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .acp .clip-row__state {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .acp .clip-row__state > small {
    margin-left: auto;
  }

  /* A long clip name and its badge must wrap rather than push the badge out of
     the panel. */
  .acp .inspector__header,
  .acp .panel__header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Record and template rows have the same two-column problem. */
  .acp .record-row,
  .acp .template-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

@media (max-width: 900px) {
  /* The collapsed-rail rule hides the profile copy at 1020 px, and the drawer
     rule brings it back with `display: initial` — which for a <span> means
     `inline`, so the column direction stopped applying and the name ran into the
     role on one line. */
  .acp .profile-button__copy {
    display: flex;
  }
}

/* The prototype exported a Notice action slot but never used one, so it carried
   no rule. Production does use it — the empty benchmark state offers a way
   forward — and it needs to sit beside the copy rather than under it. */
.acp .notice__action {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

@media (max-width: 680px) {
  .acp .notice {
    flex-wrap: wrap;
  }

  .acp .notice__action {
    width: 100%;
  }
}

/* --- Ассеты: библиотека вставок ----------------------------------------- */

.acp .asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.acp .asset-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
.acp .asset-card__frame {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: #080b10;
  cursor: pointer;
}
.acp .asset-card__frame:disabled {
  cursor: default;
}
.acp .asset-card__poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.acp .asset-card__poster--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .asset-card__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.acp .asset-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
}
.acp .asset-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.acp .asset-card__heading h3 {
  margin: 0;
  font-size: 11px;
  line-height: 15px;
}
.acp .asset-card__error {
  margin: 0;
  color: var(--danger);
  font-size: 9px;
}
/* Provenance is the reason this library exists, so it reads as a table rather
   than as one more line of grey meta. */
.acp .asset-card__provenance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  gap: 2px 8px;
  font-size: 9px;
}
.acp .asset-card__provenance dt {
  color: var(--text-subtle);
}
.acp .asset-card__provenance dd {
  overflow: hidden;
  margin: 0;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .asset-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text-subtle);
  font-size: 9px;
}
.acp .asset-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.acp .asset-card__tags .tag {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 9px;
}
.acp .asset-preview {
  width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  background: #000;
}

/* The native file input cannot be styled, so the label is the button and the
   input itself is only reachable through it. */
.acp .file-field {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.acp .file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.acp .file-field__label {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #131924;
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
}
.acp .file-field__input:focus-visible + .file-field__name,
.acp .file-field__input:focus-visible ~ .file-field__label {
  outline: 2px solid var(--accent);
}
.acp .file-field__name {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Вставки на клипе ---------------------------------------------------- */

.acp .insert-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.acp .insert-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0e1219;
}
.acp .insert-row__poster {
  width: 56px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: #080b10;
  object-fit: cover;
}
.acp .insert-row__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.acp .insert-row__copy strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .insert-row__copy span {
  color: var(--text-subtle);
  font-size: 9px;
}
.acp .insert-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

@media (max-width: 680px) {
  .acp .insert-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Стримеры: профили каналов ------------------------------------------- */

.acp .profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.acp .profile-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
/* The source frame, 16:9, with the camera where it actually sits. */
.acp .camera-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #080b10;
}
.acp .camera-frame__box {
  position: absolute;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  background: rgba(118, 228, 181, 0.14);
}
.acp .camera-frame__empty {
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .profile-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
}
.acp .profile-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.acp .profile-card__heading h3 {
  overflow: hidden;
  margin: 0;
  font-size: 11px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .profile-card__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  gap: 2px 8px;
  font-size: 9px;
}
.acp .profile-card__facts dt {
  color: var(--text-subtle);
}
.acp .profile-card__facts dd {
  overflow: hidden;
  margin: 0;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Счётчик знаков и состояние черновика делят одну строку под полем хука. */
.acp .hook-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* --- Журнал рендеров ----------------------------------------------------- */

.acp .render-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acp .render-row__clip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acp .render-row__clip strong {
  font-size: 10px;
}
.acp .render-row__clip span {
  color: var(--text-subtle);
  font-size: 9px;
}
.acp .render-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* The sound track.
 *
 * The editor has no timeline, and this is not one: it is the only place where
 * where a sound sits relative to the clip and to the other sounds is visible at
 * all. A cue is drawn at its own width so two stings a second apart do not read
 * as one, and the draft marker shows where the next click landed before
 * anything is saved. */
.acp .sound-strip {
  position: relative;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: #0d1118;
  border: 1px solid #1e2530;
  cursor: crosshair;
  overflow: hidden;
}
.acp .sound-strip__cue {
  position: absolute;
  top: 6px;
  bottom: 6px;
  min-width: 3px;
  border-radius: 3px;
  background: #4ea1ff;
}
.acp .sound-strip__draft {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #6ee7a8;
}

/* Time marks on the sound track. Without them a position is something you
 * guess at, and the whole point of the strip is that you can see where a sound
 * sits. */
.acp .sound-strip {
  padding-bottom: 12px;
}
.acp .sound-strip__tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 10px;
  color: #5b6675;
  pointer-events: none;
}
.acp .sound-strip__tick::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 1px;
  height: 5px;
  background: #232b36;
}
.acp .insert-row .btn {
  flex: none;
}

/* --- Монтаж → На разметке: три колонки ------------------------------------ */
/*                                                                           */
/* The one stage that asks three questions at once — which clip, what is in   */
/* the frame, what will be rendered. As a single scrolling inspector the      */
/* vertical preview and the render button sat a page below the player they    */
/* describe, so placing a sound or checking a crop meant scrolling between    */
/* the two halves of one decision. Everything here is scoped to this tab: the */
/* other Монтаж tabs keep the two-column master-detail they were built as.    */

.acp .master-detail--markup {
  grid-template-columns: clamp(240px, 19vw, 270px) minmax(560px, 1fr) clamp(340px, 25vw, 380px);
}
/* Nothing selected, or a clip still being cut: the middle takes the rail's
 * width rather than leaving an empty third column beside an empty state. */
.acp .master-detail--markup > .markup-wide {
  min-width: 0;
  grid-column: 2 / -1;
}

.acp .markup-workbench {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 10px;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  background: var(--surface);
}
.acp .markup-workbench__header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.acp .markup-workbench__title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.acp .markup-workbench__title h2 {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acp .markup-workbench__title p {
  color: var(--text-secondary);
  font-size: 11px;
}
.acp .markup-workbench__tabs .tabs {
  gap: 2px;
}
.acp .markup-workbench__panel {
  min-height: 0;
  overflow-y: auto;
}

/* The picture, once, for both jobs: watching and marking. A second <video>
 * would double the fetch and let the two drift to different frames. */
/* Sized by width, never by height. The rectangles are fractions of this box,
 * so the box has to be exactly the picture: a letterboxed surface would map a
 * drawn rectangle onto the wrong part of the source frame. */
.acp .markup-media-stage {
  min-height: 0;
}
.acp .markup-media-stage .frame-marker__surface {
  display: block;
  /* Bounded by the viewport's height as well as the column's width, or on a
   * short screen the picture takes the room the controls under it need — and
   * an `auto` grid row lets it overflow rather than shrink. */
  width: min(100%, 62vh);
  margin-inline: auto;
}
.acp .markup-media-stage .media-player {
  width: 100%;
  min-height: 0;
}
/* Idle, the surface is an ordinary player with the saved rectangles drawn over
 * it, so the native controls have to get their clicks back. */
.acp .frame-marker__surface:not(.is-marking) {
  cursor: default;
}
.acp .frame-marker__surface:not(.is-marking) video {
  pointer-events: auto;
}
.acp .frame-marker__surface:not(.is-marking) .frame-marker__rect {
  opacity: 0.45;
}
.acp .frame-marker__controls {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

/* --- навигатор по отрезку ------------------------------------------------- */
/*                                                                           */
/* Read-only: it seeks and nothing else. The marks are drawn, never dragged,  */
/* and no call here writes bounds — they were decided in «Отборе моментов»    */
/* and a queued render already quotes them.                                   */

.acp .clip-navigator {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}
.acp .clip-navigator__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 26px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0d1118;
  cursor: pointer;
}
.acp .clip-navigator__bar:disabled {
  cursor: default;
  opacity: 0.5;
}
.acp .clip-navigator__segment {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(118, 228, 181, 0.16);
  pointer-events: none;
}
.acp .clip-navigator__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  pointer-events: none;
}
.acp .clip-navigator__mark--key {
  width: 1px;
  background: var(--info);
}
.acp .clip-navigator__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #f4f7fb;
  pointer-events: none;
}
.acp .clip-navigator__scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.acp .clip-navigator__span {
  color: var(--text-secondary);
}
.acp .clip-navigator__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.acp .clip-navigator__readout {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-left: auto;
  color: var(--text-subtle);
  font-size: 10px;
}
.acp .clip-navigator__now {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- правая колонка: что уйдёт в рендер ----------------------------------- */

.acp .markup-context-rail .inspector__header {
  min-height: 0;
  padding: 10px 12px;
}
.acp .inspector__body--markup {
  display: grid;
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}
/* Pinned: the composition is the thing being judged, and it must not scroll
 * away under the block that changes it. */
.acp .markup-context-rail__stage {
  display: flex;
  justify-content: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.acp .markup-context-rail__stage .portrait-composition {
  width: min(100%, 116px);
}
/* A 340px column has no room for a three-across card: the title wrapped to four
 * lines and pushed everything below it out of sight. */
.acp .markup-context-rail .template-applied {
  grid-template-columns: 22px minmax(0, 1fr);
}
.acp .markup-context-rail .template-applied > .button {
  grid-column: 2;
  justify-self: start;
}
/* The one prominent action of the screen, in a narrow rail: the hint above it
 * rather than beside it, and the button the full width it needs. */
.acp .markup-context-rail .inspector__footer {
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.acp .markup-context-rail .footer-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.acp .markup-context-rail .inspector__footer .button--primary {
  min-width: 0;
  justify-content: center;
}
.acp .markup-context-rail__scroll {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 10px 12px 12px;
}
.acp .markup-context-rail__hook {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Narrow column: the listen and remove buttons get their own row rather than
 * squeezing the name of the sound to nothing. */
.acp .markup-context-rail .insert-row--sound {
  grid-template-columns: minmax(0, 1fr);
}
.acp .markup-context-rail .insert-row--sound {
  gap: 6px;
  padding: 6px 7px;
}
.acp .markup-context-rail .insert-row__actions {
  justify-content: flex-start;
}
/* Three named buttons in a 260px row: the icons are what pushed «Убрать» onto
 * a second line, and the words are the accessible name either way. */
.acp .markup-context-rail .insert-row__actions .button svg {
  display: none;
}
.acp .markup-context-rail .template-applied {
  align-items: flex-start;
}

/* A sound row is copy plus actions; the b-roll grid it borrowed has a poster
 * column it never fills, which squeezed the title and wrapped the buttons. */
.acp .insert-row--sound {
  grid-template-columns: minmax(0, 1fr) auto;
}
.acp .insert-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

@media (max-width: 1440px) {
  .acp .master-detail--markup {
    grid-template-columns: clamp(220px, 18vw, 260px) minmax(480px, 1fr) clamp(300px, 24vw, 340px);
  }
}
/* Below this the three columns stop fitting. The queue moves above the work
 * instead of squeezing the player, and stays visible rather than hiding. */
@media (max-width: 1180px) {
  .acp .master-detail--markup {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 340px);
  }
  .acp .master-detail--markup > .queue-panel--markup {
    max-height: 200px;
    grid-column: 1 / -1;
    border-radius: 9px;
  }
  /* The queue is above the work now, so the picture has to give up the height
   * it costs — the navigator and the tabs under it are not optional. */
  .acp .markup-media-stage .frame-marker__surface {
    width: min(100%, 46vh);
  }
  .acp .master-detail--markup > .markup-wide {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .acp .master-detail--markup {
    grid-template-columns: minmax(0, 1fr);
  }
  .acp .master-detail--markup > .queue-panel--markup,
.acp .master-detail--markup > .markup-wide {
    grid-column: auto;
  }
  .acp .markup-workbench,
.acp .markup-context-rail {
    overflow: visible;
  }
  .acp .markup-workbench {
    grid-template-rows: auto;
  }
  .acp .markup-media-stage .frame-marker__surface {
    width: 100%;
    height: auto;
  }
  .acp .inspector__body--markup {
    grid-template-rows: auto auto;
    overflow: visible;
  }
}

/* --- Публикация ---------------------------------------------------------- */
/* The release cabinet reuses the review inspector's two-column grid: the file
   on the left, everything said about it on the right. Only the caption block is
   new, because it is the one thing on the page that has to be shown verbatim. */
.acp .release-facts {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}
.acp .release-settings {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.acp .caption-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1219;
}
.acp .caption-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.acp .caption-preview__head h3 {
  font-size: 13px;
}
.acp .caption-preview__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* The counter sits beside the state instead of hanging off a field. */
.acp .caption-preview__meta .character-count {
  align-self: baseline;
  margin-top: 0;
}
/* Wrapped rather than scrolled sideways, and in the page font rather than a
   monospace one: this is the text as TikTok will show it, and a preview in
   another face is a preview of something else. The line breaks are the
   caption's own, so they are preserved exactly. */
.acp .caption-preview__text {
  min-height: 64px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A panel body's own children each bring their padding; a bare paragraph does
   not, and a hint flush against the panel edge reads as a layout bug. */
.acp .release-panel-note {
  padding: 0 16px 14px;
  color: var(--text-secondary);
  font-size: 11px;
}

.acp .master-detail--release {
  grid-template-columns: clamp(300px, 26%, 360px) minmax(0, 1fr);
}
/* A hint is a hint: at body size it competes with the caption it explains. */
.acp .release-hint {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

/* Подключение аккаунта к TikTok: состояние и две кнопки под ним. Колонка узкая,
   поэтому всё складывается в столбик, а не растягивает таблицу. */
.acp .account-connection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.acp .account-connection span {
  font-size: 9px;
}