/* CutFrame Brand Board v0.27 / Wireframe v0.24.
   Presentation layer over the pinned current UI. Runtime, routes, media and
   saved-edit contracts continue to use the existing application scripts. */
:root:root {
  --bg: #241033;
  --sidebar-bg: #3d1b54;
  --fg: #f1ebf8;
  --fg-strong: #ffffff;
  --fg-muted: #dccbee;
  --fg-dim: #c0a9dc;
  --page-border: #7a4cad;
  --surface: #fbf3e1;
  --surface-hover: #f6e7c4;
  --surface-strong: #f1ebf8;
  --surface-focus: #fbf3e1;
  --border: #efd79e;
  --border-strong: #c79a3c;
  --border-accent: #e8c169;
  --border-hover: #d9a93f;
  --accent: #d9a93f;
  --accent-on: #241033;
  --accent-text: #efd79e;
  --accent-dim: #fbf3e1;
  --accent-hover: #c79a3c;
  --accent-press: #a87a1e;
  --brand: #7a4cad;
  --brand-dim: #f1ebf8;
  --brand-text: #dccbee;
  --accent-purple: #dccbee;
  --stage-bg: #14101c;
  --timeline-canvas-bg: #14101c;
  --timeline-control-bg: #2a2434;
  --timeline-wave: #e8c169;
  --timeline-segment: rgba(122,76,173,.22);
  --timeline-segment-border: #c0a9dc;
  --timeline-ruler: rgba(241,235,248,.5);
  --timeline-grid: rgba(192,169,220,.26);
  --timeline-label: #dccbee;
  --bg-wash: linear-gradient(#241033, #241033);
  --glow: 0 8px 30px rgba(12,8,15,.14);
  --scrim: rgba(36,16,51,.66);
  --focus-ring: 2px solid #e8c169;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --screen-sidebar: 248px;
  --screen-topbar: 60px;
  --app-card-surface: #fbf3e1;
  --app-control-surface: #f1ebf8;
  --app-disabled-surface: #f1ebf8;
  --app-disabled-fg: #7a7186;
  --ui-card-surface: #fbf3e1;
  --ui-card-border: #e8c169;
  --ui-card-shadow: none;
  --ui-card-shadow-hover: none;
  --thumbnail-control-bg: #f1ebf8;
  --thumbnail-control-fg: #241033;
  --thumbnail-control-placeholder: #63359a;
  --thumbnail-control-disabled-bg: #f5f3f6;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f3f0;
  --sidebar-bg: #4e2a78;
  --fg: #241033;
  --fg-strong: #14101c;
  --fg-muted: #4e2a78;
  --fg-dim: #63359a;
  --page-border: #c0a9dc;
  --accent-text: #6b4e14;
  --brand-text: #63359a;
  --accent-purple: #7a4cad;
  --bg-wash: linear-gradient(#f6f3f0, #f6f3f0);
  --scrim: rgba(36,16,51,.42);
  --focus-ring: 2px solid #63359a;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f6f3f0;
    --sidebar-bg: #4e2a78;
    --fg: #241033;
    --fg-strong: #14101c;
    --fg-muted: #4e2a78;
    --fg-dim: #63359a;
    --page-border: #c0a9dc;
    --accent-text: #6b4e14;
    --brand-text: #63359a;
    --accent-purple: #7a4cad;
    --bg-wash: linear-gradient(#f6f3f0, #f6f3f0);
    --scrim: rgba(36,16,51,.42);
    --focus-ring: 2px solid #63359a;
  }
}

/* Cards carry the same readable Light tokens in both themes. Media wells
   below deliberately own their neutral footage background. */
:root:root :is(
  .hero, .project-card, .clip-card, .bs-card, .pub-card, .stat-tile,
  .grid-empty, .lib-table, .editor-script, .editor-side, .transport,
  .timeline, .trim-row, .splice-strip, .editorial-brief,
  .campaign-publish-card, .pub-note, .pub-queue-item,
  .workspace-naming-card, .workspace-picker, .bs-kit-row, .bs-foot,
  .editor-route-loading-card, .app-boot-card,
  .modal-box, .set-section, .detail-output-summary, .connection-card,
  .lrn-card, .proc-timeline, .chapter-clip, .oauth-provider-card, .tics-card,
  .stage-row, .cal-day, .cal-entry, .filler-review-item, .type-list-item,
  .rerun-choice, .proc-log, .publish-copy-list, .highlights-list, .queue-list,
  .transcript-list, .chapters-list, .chapter-edit-list, .renders-list,
  .project-more-menu, .project-menu-help, .gs-panel, .toast
) {
  color-scheme: light;
  --surface: #fbf3e1;
  --surface-hover: #f6e7c4;
  --surface-strong: #f1ebf8;
  --surface-focus: #fbf3e1;
  --fg: #241033;
  --fg-strong: #14101c;
  --fg-muted: #4e2a78;
  --fg-dim: #63359a;
  --border: #efd79e;
  --border-strong: #c79a3c;
  --accent: #d9a93f;
  --accent-on: #241033;
  --accent-text: #6b4e14;
  --accent-dim: #fbf3e1;
  --brand: #7a4cad;
  --brand-dim: #f1ebf8;
  --brand-text: #63359a;
  --accent-purple: #7a4cad;
  --success: #2f7d52;
  --warning: #b4482a;
  --focus-ring: 2px solid #63359a;
  /* Supersedes the old important white-card normalization in app.css. */
  background: #fbf3e1 !important;
  color: #241033;
  border: 2px solid #e8c169;
  border-radius: var(--r-xl);
  box-shadow: none;
}
:root:root .proc-card {
  /* The processing card is a light cream panel but keeps its own gradient
     background, so it takes the light-card text tokens without the shared
     card background reset above. */
  color-scheme: light;
  --fg: #241033;
  --fg-strong: #14101c;
  --fg-muted: #4e2a78;
  --fg-dim: #63359a;
  --accent-text: #6b4e14;
  --brand-text: #63359a;
  color: #241033;
}
:root:root :is(.project-card, .clip-card, .bs-card, .pub-card):hover {
  background: #fbf3e1;
  border-color: #e8c169;
}
:root:root :is(.hero, .bs-card, .pub-note, .campaign-publish-card) { padding: 20px 22px; }
:root:root :is(.lib-table, .grid-empty) { overflow: hidden; }
:root:root .lib-table { border-collapse: separate; border-spacing: 0; }
:root:root .lib-table :is(th, td) { border-bottom-color: #efd79e; }
:root:root .lib-table th { background: #f6e7c4; color: #4e2a78; }
:root:root .lib-table tbody tr:hover { background: #f6e7c4; }

/* Purple rail, legible account controls and the existing responsive drawer. */
:root:root .app-sidebar {
  --surface: #4e2a78;
  --surface-hover: #63359a;
  --surface-strong: #63359a;
  --fg: #f1ebf8;
  --fg-strong: #ffffff;
  --fg-muted: #dccbee;
  --fg-dim: #c0a9dc;
  --accent-text: #efd79e;
  --brand-text: #dccbee;
  --border: #7a4cad;
  --border-strong: #9a6fc6;
  background: var(--sidebar-bg);
  color: #f1ebf8;
  border-right: 2px solid #7a4cad;
}
:root:root .sidebar-brand { gap: 10px; }
:root:root .brand-mark { width: 32px; height: 32px; border-radius: 8px; }
:root:root .brand-name { font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
:root:root .sidebar-item { font-size: 14px; border-radius: 10px; }
:root:root .sidebar-section-title { font-size: 11px; color: #c0a9dc; }
:root:root .sidebar-item.active {
  background: #63359a;
  color: #efd79e;
  border-color: transparent;
}
:root:root .sidebar-account { background: #63359a; border: 2px solid #7a4cad; color: #ffffff; }
:root:root .sidebar-account .account-sub { color: #dccbee; }
:root:root .sidebar-account:hover { background: #4e2a78; border-color: #9a6fc6; }
:root:root .app-topbar { background: var(--bg); border-bottom: 2px solid var(--page-border); }
:root:root .breadcrumb { font-weight: 650; }
:root:root .cost-pill { background: #f1ebf8; border: 1px solid #9a6fc6; color: #241033; }
:root:root .cost-pill .label { color: #4e2a78; }
:root:root .cost-pill .value { color: #6b4e14; }

/* Fields, chips and secondary actions stay lilac on gold cards. Existing
   disabled, selected, focus, error and visibility behavior stays in the base. */
:root:root :is(.btn, .theme-toggle, .route-back, .start-tab, .clip-sort,
  .fchip, .view-toggle, .view-toggle button, .tool-group, .editor-receipts,
  .legend-chip, .chip, .project-tag, .pub-q-state) {
  background: #f1ebf8;
  border-color: #9a6fc6;
  color: #241033;
}
:root:root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea, .bs-input, .url-input) {
  background: #f1ebf8;
  border-color: #c0a9dc;
  color: #241033;
}
:root:root :is(input, textarea)::placeholder { color: #63359a; opacity: 1; }
:root:root :is(.btn, .theme-toggle, .route-back, .start-tab, .fchip, .view-toggle button):hover:not(:disabled) {
  background: #dccbee;
  color: #241033;
}
:root:root :is(.btn-primary, .start-tab.active, .fchip.active, .view-toggle button.active, .chip.active) {
  background: #d9a93f;
  border-color: #c79a3c;
  color: #241033;
}
:root:root .btn-primary:hover:not(:disabled) { background: #c79a3c; }
:root:root .btn-quiet { background: transparent; border-color: transparent; color: var(--fg-muted); }
:root:root .btn-quiet:hover:not(:disabled) { background: #f1ebf8; color: #241033; }
:root:root .btn-danger { color: #b4482a; border-color: #b4482a; }
:root:root .chip.brand { background: #7a4cad; color: #ffffff; border-color: #7a4cad; }
:root:root :is(.chip.ok, .pub-q-state.is-published) { background: #f1ebf8; color: #2f7d52; border-color: #2f7d52; }
:root:root :is(.chip.warn, .pub-q-state.is-blocked) { background: #f1ebf8; color: #b4482a; border-color: #b4482a; }
:root:root .pub-q-state.is-scheduled { background: #f1ebf8; color: #63359a; border-color: #9a6fc6; }
:root:root .legend-chip.audio-chip { color: #3e6ca8; border-color: #3e6fa8; }
:root:root :is(.btn, .theme-toggle, .fchip, input, select, textarea):focus-visible {
  outline: 2px solid #63359a;
  outline-offset: 2px;
}
:root:root .app-sidebar :focus-visible { outline-color: #e8c169; }

/* Home: main action, Learn more and Shape the output retain distinct surfaces. */
:root:root .dashboard-hello-title { font-size: 32px; font-weight: 750; }
:root:root .hero { border-color: #d9a93f; }
:root:root .hero-title { font-size: 26px; font-weight: 750; }
:root:root .screen-head h2 { font-size: 24px; font-weight: 750; }
:root:root .drop-zone { background: #efd79e; border: 2px dashed #c79a3c; box-shadow: none; }
:root:root .drop-icon { color: #6b4e14; }
:root:root .drop-main { font-size: 17px; font-weight: 650; }
:root:root .drop-browse { color: #6b4e14; }
:root:root .home-action { width: 100%; min-width: 0; background: #4e2a78 !important; border: 2px solid #63359a; color: #ffffff; }
:root:root .home-action:hover { background: #63359a !important; border-color: #9a6fc6; }
:root:root .home-action-title { color: #ffffff; font-size: 17px; }
:root:root .home-action-sub { color: #dccbee; }
:root:root .home-action-icon { color: #efd79e; background: transparent; border-color: #9a6fc6; }
:root:root .home-capabilities {
  --fg: #241033;
  --fg-muted: #4e2a78;
  --fg-dim: #63359a;
  color: #241033;
  background: #f1ebf8;
  border: 2px solid #9a6fc6;
  border-radius: var(--r-xl);
  padding: 16px;
}
:root:root .home-capabilities-head { align-items: start; flex-wrap: wrap; gap: 8px; }
:root:root .home-capabilities-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
:root:root .home-capability {
  color: #241033;
  background: transparent !important;
  border: 0;
  border-top: 2px solid #9a6fc6;
  border-radius: 0;
  padding: 14px 0;
}
:root:root .home-capability:hover { background: #dccbee !important; }
:root:root .home-capability-icon, :root:root .home-capabilities-link { color: #63359a; }
:root:root .home-capability div span { color: #4e2a78; }
:root:root .home-capabilities-sub { color: #4e2a78; }
@media (min-width: 1250px) {
  #screen-home:not([hidden]):not(.new-project-mode) {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 20px;
    align-items: start;
  }
  #screen-home:not(.new-project-mode) > * { grid-column: 1 / -1; order: 4; min-width: 0; }
  #screen-home:not(.new-project-mode) > .interrupted-banner { order: -1; }
  #screen-home:not(.new-project-mode) > .dashboard-hello { order: 0; margin-bottom: 0; }
  #screen-home:not(.new-project-mode) > .hero { order: 1; grid-column: 1; grid-row: span 2; margin: 0; }
  #screen-home:not(.new-project-mode) > .home-actions { order: 2; grid-column: 2; grid-template-columns: minmax(0,1fr); margin: 0; }
  #screen-home:not(.new-project-mode) > .home-capabilities { order: 3; grid-column: 2; margin: 0; }
}

/* Projects/Library media, editor footage and timeline canvas stay neutral.
   No crop, overlay, positioning or playback rule is changed here. */
:root:root :is(.project-thumb, .project-thumb img, .project-thumb video,
  .clip-thumb-wrap, .clip-card video, .clip-card-still, .thumbnail-frame,
  .thumbnail-frame img, .player-wrap, .bs-stinger, .transition-preview-frame,
  .transition-thumb, .tl-lane, .seam-freeze-frame, .hosted-optical-visual) { background: #14101c; }
:root:root :is(.player-wrap, .timeline) { border: 2px solid #e8c169; }
:root:root .editor-side > .rail-sec { border: 0; border-bottom: 1px solid #efd79e; background: transparent; }
:root:root .editor-script .script-head { border-bottom-color: #efd79e; }
:root:root .transport { border-radius: 0 0 var(--r-lg) var(--r-lg); }
:root:root .timeline { overflow: hidden; }
:root:root .bs-card h3 { font-size: 17px; font-weight: 650; }
:root:root .bs-preview { color: #f1ebf8; }
:root:root .pub-status { background: #f1ebf8; color: #4e2a78; border: 1px solid #c0a9dc; border-radius: var(--r-pill); padding: 4px 10px; }
:root:root .pub-status.is-connected { color: #2f7d52; border-color: #2f7d52; }
:root:root .pub-q-state { width: 136px; min-width: 136px; display: inline-flex; align-items: center; justify-content: center; text-align: center; letter-spacing: 0; }
:root:root .pub-q-plat { width: 136px; min-width: 136px; }
:root:root .pub-queue-item { display: grid; grid-template-columns: 132px 136px minmax(0,1fr) 136px; gap: 12px; }
:root:root .pub-q-plat { display: inline-flex; justify-content: center; padding: 4px 8px; border: 1px solid #c0a9dc; border-radius: var(--r-pill); background: #f1ebf8; color: #4e2a78; }
:root:root .pub-q-note { grid-column: 3 / -1; max-width: none; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  :root:root .pub-queue-item { grid-template-columns: minmax(0,1fr) 136px; align-items: start; }
  :root:root .pub-q-clip { grid-column: 1 / -1; order: -1; white-space: normal; }
  :root:root .pub-q-date { grid-column: 1 / -1; }
  :root:root .pub-q-plat { grid-column: 1; min-width: 0; width: 100%; }
  :root:root .pub-q-state { grid-column: 2; }
  :root:root .pub-q-note { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 600px) {
  :root:root :is(.hero, .bs-card, .pub-note, .campaign-publish-card) { padding: 16px; }
  :root:root .dashboard-hello-title { font-size: 28px; }
  :root:root .home-actions { grid-template-columns: minmax(0,1fr); }
  :root:root .pub-q-date { min-width: 0; flex-basis: 100%; }
  :root:root .pub-q-plat { min-width: 0; width: auto; flex: 1; }
  :root:root .pub-q-state { flex: 0 0 136px; }
}

/* Legacy Light normalization also marked some fields/control groups important.
   Keep the approved lilac secondary surface and dark text in those controls. */
:root:root :is(.gs-input, .bs-input, .vocab-input, .cap-ctl select,
  .set-field input, .set-field select, .detail-search input, .content-type-field,
  .fchip-row, .view-toggle, .tool-group, .cap-seg-btns, .cap-preset,
  .aspect-toggle, .editor-clip-nav, .clip-status, .tp-rate, .tp-rate select,
  .tp-btn, .publish-copy-btn, .vol-key-controls, .type-controls) {
  background: #f1ebf8 !important;
  color: #241033 !important;
  border-color: #c0a9dc;
}
/* The counter sets a page text token in app.css; match its lilac control surface. */
:root:root .editor-clip-nav > #editor-clip-position { color: #241033; }
:root:root .publish-copy-item { background: #fbf3e1 !important; color: #241033 !important; border-color: #efd79e; }
:root:root .app-topbar { background: var(--bg) !important; }
:root:root .app-topbar .gs-input { background: #f1ebf8 !important; color: #241033 !important; }
:root:root :is(button, select, input, textarea):disabled {
  background: #f1ebf8 !important;
  color: #7a7186 !important;
  -webkit-text-fill-color: #7a7186;
  opacity: .65;
}
:root:root :is(.mobile-nav-toggle, .mobile-nav-close) { background: #f1ebf8; color: #241033; border-color: #9a6fc6; }

:root:root .app .app-topbar { background: var(--bg) !important; }
:root:root .app-sidebar .sidebar-item.active { background: #63359a; color: #efd79e; }
:root:root .theme-toggle-icon { color: #63359a; }
:root:root .pub-logo.fb { background: #14101c; }