* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #181a1f;
  --panel-2: #20232a;
  --line: #30343d;
  --text: #eef1f5;
  --muted: #9aa3af;
  --teal: #20c7a6;
  --amber: #f5b84b;
  --rose: #ee5d72;
  --violet: #8d7bff;
  --blue: #4e9cff;
  --shadow: rgba(0, 0, 0, 0.28);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 0%, rgba(141, 123, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 18% 8%, rgba(32, 199, 166, 0.14), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
  border-right: 1px solid var(--line);
  background: rgba(16, 17, 20, 0.84);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  color: #07110f;
  font-weight: 900;
}

img.brand-mark {
  display: block;
  object-fit: contain;
  padding: 0;
  background: transparent;
  box-shadow: 0 12px 30px rgba(53, 214, 194, 0.16);
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.new-project,
.primary,
.ghost {
  border: 0;
  border-radius: 8px;
  min-height: 38px;
  padding: 9px 14px;
  color: var(--text);
  font-weight: 700;
}

.primary {
  background: linear-gradient(135deg, var(--teal), #22a6d8);
  color: #05110f;
}

.new-project {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--teal), #22a6d8);
  color: #05110f;
}

.ghost {
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.sidebar-label {
  flex: 0 0 auto;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.agent-list {
  flex: 0 0 auto;
  display: grid;
  gap: 5px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(48, 52, 61, 0.72);
  margin-bottom: 14px;
}

.agent,
.project-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.agent {
  min-height: auto;
  padding: 8px 11px;
}

.agent span {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

#projectList {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  border-top: 0;
}

.project-search {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}

.project-search span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.project-search input {
  width: 100%;
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  min-height: 32px;
  padding: 0 10px;
  background: rgba(5, 8, 13, 0.72);
  color: var(--text);
  outline: none;
}

.project-search input:focus {
  border-color: rgba(45, 212, 191, 0.48);
}

.project-stage-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.project-stage-tabs button {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  min-height: 30px;
  padding: 0 8px;
  background: rgba(18, 22, 29, 0.7);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.project-stage-tabs button.is-active {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(45, 212, 191, 0.1);
  color: var(--text);
}

.project-stage-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}

.project-stage-summary span,
.project-stage-dot {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 999px;
  padding: 3px 6px;
  background: rgba(18, 22, 29, 0.7);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.project-stage-dot {
  display: inline-block;
  margin-right: 5px;
  color: #bfdbfe;
}

.project-stage-dot.export,
.project-stage-summary .export {
  border-color: rgba(45, 212, 191, 0.34);
  color: var(--teal);
}

.project-stage-dot.video,
.project-stage-summary .video {
  border-color: rgba(96, 165, 250, 0.34);
  color: var(--blue);
}

.project-stage-dot.audit,
.project-stage-summary .audit {
  border-color: rgba(255, 196, 87, 0.34);
  color: var(--amber);
}

.project-stage-dot.archive,
.project-stage-summary .archive {
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--muted);
}

.production-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.production-status.run {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.1);
  color: var(--blue);
}

.production-status.warn {
  border-color: rgba(245, 184, 75, 0.36);
  background: rgba(245, 184, 75, 0.1);
  color: var(--amber);
}

.production-status.danger {
  border-color: rgba(238, 93, 114, 0.4);
  background: rgba(238, 93, 114, 0.12);
  color: #ff9aa7;
}

.production-status.done {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.1);
  color: var(--teal);
}

.production-status.top-status {
  padding: 7px 10px;
  font-size: 12px;
}

.project-empty {
  border: 1px dashed rgba(42, 49, 59, 0.86);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.project-row {
  position: relative;
  min-width: 0;
  border-bottom: 0;
}

.project-delete {
  position: absolute;
  top: 9px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.38);
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.project-delete svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-row:hover .project-delete,
.project-row:focus-within .project-delete {
  opacity: 1;
}

.project-delete:hover {
  border-color: rgba(238, 93, 114, 0.38);
  background: rgba(238, 93, 114, 0.12);
  color: #ff9aa7;
}

.agent span,
.agent small,
.project-item span,
.project-item small {
  display: block;
}

.project-item {
  min-height: auto;
  border-radius: 8px;
  padding: 8px 36px 8px 10px;
  background: rgba(24, 26, 31, 0.48);
}

.project-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.project-line strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.project-mini-progress {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.project-mini-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.agent small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.agent:hover,
.project-item:hover,
.agent.is-active,
.project-row.is-active .project-item {
  border-color: rgba(32, 199, 166, 0.45);
  background: rgba(32, 199, 166, 0.1);
}

.agent:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.project-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: 34vh;
  min-height: 0;
}

.workspace {
  min-width: 0;
  padding: 24px;
}

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

.eyebrow {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 22px;
}

.status-strip,
.toolbar,
.panel-head,
.flow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-strip {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#projectStatus,
.pill,
.sync-status {
  border: 1px solid rgba(245, 184, 75, 0.35);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(245, 184, 75, 0.08);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
}

.sync-status {
  border-color: rgba(78, 156, 255, 0.32);
  background: rgba(78, 156, 255, 0.08);
  color: #b9d6ff;
}

.sync-status.pending,
.sync-status.syncing {
  border-color: rgba(245, 184, 75, 0.35);
  background: rgba(245, 184, 75, 0.08);
  color: var(--amber);
}

.sync-status.synced {
  border-color: rgba(32, 199, 166, 0.36);
  background: rgba(32, 199, 166, 0.09);
  color: var(--teal);
}

.sync-status.offline {
  border-color: rgba(238, 93, 114, 0.38);
  background: rgba(238, 93, 114, 0.1);
  color: #ff9aa7;
}

.overview,
.config-grid,
.voice-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.62fr 0.74fr 1fr auto;
  gap: 12px;
  margin-bottom: 18px;
}

.legacy-voice-panel {
  display: none !important;
}

#segmentPanel.is-visible {
  grid-template-columns: minmax(0, 1fr);
}

#segmentPanel .segment-workbench-card {
  position: static;
}

#storyboardPanel.is-visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#storyboardPanel[hidden],
#storyboardPanel:not(.is-visible) {
  display: none !important;
}

#storyboardPanel .storyboard-workbench-card {
  margin-top: 0;
  min-height: 0;
  border-color: rgba(54, 62, 78, 0.82);
  background: #12161c;
}

/* Compact production flow: keep guidance in one place, reduce repeated big banners. */
.next-step {
  min-height: 48px !important;
  margin-bottom: 12px !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  background: rgba(17, 23, 34, 0.72) !important;
}

.next-step > div {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}

.next-step span {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.08) !important;
  color: #93a4b8 !important;
  font-size: 11px !important;
}

.next-step strong {
  overflow: hidden;
  color: #dbe5f3;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-step button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 13px;
}

.workflow-guide {
  grid-template-columns: repeat(6, minmax(112px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.guide-card {
  min-height: 68px !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  background: rgba(17, 23, 34, 0.66) !important;
}

.guide-index {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
}

.guide-card strong {
  font-size: 13px !important;
}

.guide-card small,
.guide-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-card small {
  font-size: 11px !important;
}

.guide-card em {
  color: #9fafc3 !important;
  font-size: 11px !important;
}

.guide-card.current {
  border-color: rgba(53, 214, 194, 0.45) !important;
  background: rgba(53, 214, 194, 0.075) !important;
}

.guide-card.current em,
.guide-card.current strong {
  color: #dffef9 !important;
}

.script-action-bar {
  margin: 10px 0 14px !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  background: rgba(17, 23, 34, 0.7) !important;
}

.script-action-bar > div {
  display: flex !important;
  align-items: baseline;
  gap: 8px !important;
  min-width: 220px !important;
}

.script-action-bar > div strong {
  font-size: 13px !important;
}

.script-action-bar button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
}

.script-action-bar button.is-recommended {
  border-color: rgba(53, 214, 194, 0.52) !important;
  background: rgba(53, 214, 194, 0.14) !important;
  color: #dffef9 !important;
  box-shadow: none !important;
}

body.is-login-page .app {
  display: block;
  min-height: 100vh;
}

body.is-login-page .sidebar,
body.is-login-page .workspace > :not(#loginPanel) {
  display: none !important;
}

body.no-active-project .overview,
body.no-active-project .flow,
body.no-active-project .next-step,
body.no-active-project .workflow-guide {
  display: none !important;
}

body.no-active-project .project-flow-agent {
  display: none !important;
}

body.no-active-project .sidebar-label {
  margin: 2px 4px 8px;
  color: #6f7c8f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

body.no-active-project .agent-list {
  flex: 0 0 auto;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 3px;
  margin-bottom: 12px;
  border-bottom: 0;
}

body.no-active-project .agent {
  min-height: auto;
  border-radius: 7px;
  padding: 9px 10px 9px 13px;
  background: transparent;
}

body.no-active-project .agent:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.025);
}

body.no-active-project .agent.is-active {
  border-color: rgba(148, 163, 184, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

body.no-active-project .agent::before {
  display: none;
}

body.no-active-project .agent span {
  font-size: 13px;
  line-height: 1.25;
}

body.no-active-project .agent small {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.2;
}

body:not(.no-active-project):not(.is-login-page) .sidebar-label {
  margin: 14px 12px 12px;
  color: #8b98aa;
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
}

body:not(.no-active-project):not(.is-login-page) .agent-list {
  gap: 7px;
}

body:not(.no-active-project):not(.is-login-page) .agent:not(.project-flow-agent) {
  min-height: 58px;
  border-radius: 8px;
  padding: 11px 14px;
  background: transparent;
}

body:not(.no-active-project):not(.is-login-page) .agent:not(.project-flow-agent).is-active {
  border-color: rgba(148, 163, 184, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

body:not(.no-active-project):not(.is-login-page) .agent:not(.project-flow-agent)::before {
  display: none;
}

body:not(.no-active-project):not(.is-login-page) .agent:not(.project-flow-agent) span {
  font-size: 16px;
  line-height: 1.2;
}

body:not(.no-active-project):not(.is-login-page) .agent:not(.project-flow-agent) small {
  margin-top: 4px;
  font-size: 13px;
}

body.is-login-page .workspace {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

body.is-login-page .login-panel {
  width: min(980px, 100%);
  margin: 0;
  align-items: stretch;
}

body.is-login-page .login-panel[hidden] {
  display: none !important;
}

body.is-login-page .auth-card-grid {
  align-items: stretch;
}

body.is-login-page .login-hint {
  padding-top: 2px;
}

/* Restore the video factory to the segment-card layout. */
#videoPanel .task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.task-board-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(54, 62, 78, 0.82);
  border-radius: 8px;
  padding: 13px 14px;
  background: rgba(18, 22, 28, 0.82);
}

.task-board-head strong,
.task-board-head span {
  display: block;
}

.task-board-head strong {
  color: var(--text);
  margin-bottom: 4px;
}

.task-board-head span {
  color: var(--muted);
  font-size: 12px;
}

#videoPanel .task-card {
  display: grid;
  gap: 12px;
  align-content: start;
  background:
    linear-gradient(135deg, rgba(23, 35, 58, 0.78), rgba(28, 27, 38, 0.74)),
    rgba(32, 35, 42, 0.72);
}

#videoPanel .task-card-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

#videoPanel .task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#videoPanel .task-actions button {
  min-height: 34px;
}

.overview-auto-name {
  align-self: end;
  min-width: 96px;
}

.voice-state-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(16, 17, 20, 0.48);
}

.voice-state-card.run {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.08);
}

.voice-state-card.pass {
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(45, 212, 191, 0.08);
}

.voice-state-card span,
.voice-state-card strong,
.voice-state-card p {
  display: block;
}

.voice-state-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.voice-state-card strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
}

.voice-state-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.voice-state-card b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(5, 8, 13, 0.32);
  color: var(--text);
  font-size: 12px;
}

.account-learning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 14px;
}

.learning-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(24, 26, 31, 0.72);
}

.account-branch-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.account-branch-tabs button {
  border: 1px solid rgba(48, 52, 61, 0.75);
  border-radius: 8px;
  padding: 13px 14px;
  background: rgba(18, 20, 25, 0.74);
  color: var(--muted);
  text-align: left;
}

.account-branch-tabs button.is-active {
  border-color: rgba(32, 199, 166, 0.58);
  background: rgba(32, 199, 166, 0.1);
  color: var(--text);
}

.account-branch-tabs strong,
.account-branch-tabs span {
  display: block;
}

.account-branch-tabs strong {
  margin-bottom: 4px;
  color: inherit;
  font-size: 17px;
}

.account-branch-tabs span {
  color: var(--muted);
  font-size: 12px;
}

.account-branch-panel {
  display: none;
}

.account-branch-panel.is-active {
  display: block;
}

.account-context-strip,
.account-context-text {
  margin: 0 0 10px;
  color: #9fafc3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.account-context-strip {
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(45, 212, 191, 0.055);
}

.account-accounts-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
}

.account-library-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(18, 20, 25, 0.72);
}

.account-library-list {
  display: grid;
  gap: 8px;
  max-height: 640px;
  overflow: auto;
}

.account-library-item {
  border: 1px solid rgba(48, 52, 61, 0.72);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: rgba(24, 26, 31, 0.55);
  color: var(--text);
}

.account-library-item.is-active {
  border-color: rgba(32, 199, 166, 0.55);
  background: rgba(32, 199, 166, 0.1);
}

.account-library-item strong,
.account-library-item span {
  display: block;
}

.account-library-select {
  min-width: 0;
  border: 0;
  padding: 2px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.account-library-avatar,
.account-avatar-link {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
}

.account-library-avatar {
  width: 34px;
  height: 34px;
}

.account-library-avatar img,
.account-library-avatar span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.account-library-avatar img {
  object-fit: cover;
}

.account-library-avatar span {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #061014;
  font-size: 13px;
  font-weight: 950;
}

.account-library-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-delete-btn {
  width: 30px;
  height: 30px;
}

.account-library-pager {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.account-library-pager span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.account-library-pager button {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  min-height: 28px;
  padding: 0 10px;
  background: rgba(15, 21, 29, 0.74);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.account-library-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.account-config-grid {
  grid-template-columns: minmax(0, 1fr) 180px;
  margin-bottom: 12px;
}

.account-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px auto;
  gap: 8px;
  align-items: end;
}

.account-inline input,
.account-inline select {
  width: 100%;
  min-height: 38px;
}

.muted-line {
  color: var(--muted);
  font-size: 12px;
}

.account-detected-card {
  border: 1px solid rgba(32, 199, 166, 0.22);
  border-radius: 8px;
  padding: 9px 10px;
  margin: 8px 0 12px;
  background: rgba(32, 199, 166, 0.045);
}

.account-detected-card strong,
.account-detected-card p {
  display: block;
  margin: 0;
}

.account-profile-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.account-profile-summary img,
.account-avatar-placeholder {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.account-profile-summary img {
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.account-avatar-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #061014;
  font-weight: 950;
}

.account-detected-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.recent-posts-preview {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.recent-posts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recent-posts-preview b,
.recent-posts-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-post-type-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 6px;
}

.recent-post-type-counts span {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.34);
}

.recent-posts-preview b {
  color: var(--text);
  font-size: 12px;
}

.recent-posts-preview span {
  color: var(--muted);
  font-size: 11px;
}

.recent-video-list {
  display: grid;
  gap: 7px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.recent-video-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(260px, 340px);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 7px;
  background: rgba(15, 21, 29, 0.58);
}

.recent-video-item.is-commerce {
  border-color: rgba(242, 198, 109, 0.28);
  background: rgba(242, 198, 109, 0.055);
}

.recent-video-item.is-extracting {
  border-color: rgba(85, 220, 202, 0.42);
  background: linear-gradient(90deg, rgba(85, 220, 202, 0.12), rgba(15, 21, 29, 0.58));
}

.recent-video-cover {
  display: grid;
  place-items: center;
  width: 70px;
  height: 52px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(8, 13, 20, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.recent-video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-video-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.recent-video-main strong,
.recent-video-main p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-video-main strong {
  font-size: 13px;
}

.recent-video-main p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.recent-video-tags,
.recent-video-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.recent-video-tags span {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(15, 23, 42, 0.34);
}

.recent-video-tags .cart-on {
  border-color: rgba(242, 198, 109, 0.34);
  color: #ffd78a;
}

.recent-video-tags .cart-maybe {
  border-color: rgba(125, 199, 247, 0.32);
  color: #a7ddff;
}

.recent-video-tags .cart-off {
  color: #aebac8;
}

.recent-video-status {
  min-width: 0;
  max-width: min(420px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.42);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-video-progress-row {
  display: grid;
  grid-template-columns: minmax(180px, max-content) minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.recent-video-progress-cell {
  grid-column: 2 / 4;
  width: 100%;
  min-width: 0;
}

.recent-video-status.working {
  border-color: rgba(85, 220, 202, 0.42);
  color: #6ff7e8;
}

.recent-video-status.done {
  border-color: rgba(134, 239, 172, 0.34);
  color: #9af3b6;
}

.recent-video-status.error {
  border-color: rgba(251, 113, 133, 0.36);
  color: #ff9aac;
}

.recent-video-progress {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.recent-video-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #29d3c0, #73ddff);
  transition: width 0.28s ease;
}

.recent-video-progress b {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0 7px;
  color: var(--text);
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

.recent-video-progress.is-done span {
  background: linear-gradient(90deg, #4ade80, #86efac);
}

.recent-video-progress.is-error span {
  background: linear-gradient(90deg, #fb7185, #fda4af);
}

.recent-video-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 260px;
}

.recent-video-actions .mini-btn,
.recent-video-actions .mark-btn {
  min-height: 28px;
  white-space: nowrap;
}

.recent-video-actions .mini-btn {
  min-width: 92px;
}

.recent-video-actions [data-extract-recent-post] {
  min-width: 142px;
}

.recent-video-actions .mark-btn {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  padding: 0 9px;
  background: rgba(15, 21, 29, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.recent-video-actions .mark-btn.is-active {
  border-color: rgba(85, 220, 202, 0.42);
  background: rgba(85, 220, 202, 0.12);
  color: var(--text);
}

.sample-edit-field {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.sample-edit-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.sample-edit-field textarea,
.sample-edit-field input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(15, 21, 29, 0.72);
  color: var(--text);
  font-size: 12px;
}

.sample-edit-field textarea {
  min-height: 58px;
  resize: vertical;
}

.sample-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sample-box {
  border: 1px solid rgba(48, 52, 61, 0.62);
  border-radius: 8px;
  padding: 10px;
  background: rgba(16, 17, 20, 0.24);
}

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

.sample-head strong {
  color: var(--text);
  font-size: 15px;
}

.sample-head span {
  border: 1px solid rgba(32, 199, 166, 0.28);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--teal);
  font-size: 11px;
}

.sample-form {
  display: grid;
  gap: 6px;
}

.sample-form input,
.sample-form textarea {
  width: 100%;
}

.sample-form textarea {
  min-height: 88px;
}

.sample-box > button {
  width: 100%;
  margin-bottom: 8px;
}

.manual-sample-entry {
  margin-bottom: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 21, 29, 0.48);
}

.manual-sample-entry summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  list-style-position: inside;
}

.manual-sample-entry[open] {
  padding: 0 10px 10px;
}

.manual-sample-entry[open] summary {
  margin: 0 -10px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--text);
}

.manual-sample-entry .ghost {
  width: 100%;
  margin-top: 8px;
}

.sample-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.sample-item {
  position: relative;
  border: 1px solid rgba(48, 52, 61, 0.7);
  border-radius: 8px;
  padding: 10px 36px 10px 10px;
  background: rgba(24, 26, 31, 0.72);
}

.sample-editor-card {
  padding: 10px;
}

.sample-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-bottom: 8px;
}

.sample-item-titleline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sample-index {
  display: inline-flex;
  width: max-content;
  margin-bottom: 0;
  border: 1px solid rgba(85, 220, 202, 0.26);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
}

.sample-state {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.sample-title-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0;
  padding: 3px 0 7px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.sample-title-input:focus {
  outline: none;
  border-bottom-color: rgba(85, 220, 202, 0.5);
}

.sample-item p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.sample-item strong,
.sample-item span,
.sample-item em {
  display: block;
}

.sample-item strong {
  padding-right: 24px;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
}

.sample-item span,
.sample-item em {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.sample-item .icon-danger {
  position: absolute;
  top: 8px;
  right: 8px;
}

.sample-editor-card .icon-danger {
  position: static;
  flex: 0 0 auto;
}

.sample-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.sample-meta-line span {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(15, 21, 29, 0.54);
  font-size: 11px;
}

.sample-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.sample-save-row .mini-btn {
  min-height: 32px;
  padding: 0 12px;
}

.sample-save-row .primary-mini {
  border-color: rgba(85, 220, 202, 0.36);
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #061015;
}

.empty-mini {
  border: 1px dashed rgba(143, 160, 188, 0.28);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.account-profile-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.account-profile-grid article {
  border: 1px solid rgba(48, 52, 61, 0.75);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.5);
}

.account-profile-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.account-profile-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.video-config-card {
  border: 1px solid rgba(78, 156, 255, 0.18);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 18px;
  background:
    linear-gradient(120deg, rgba(17, 28, 50, 0.88), rgba(37, 25, 49, 0.86)),
    rgba(20, 22, 28, 0.9);
}

.video-card-title,
.video-toolbar,
.task-card-head,
.task-head-actions,
.copy-row {
  display: flex;
  align-items: center;
}

.video-card-title {
  gap: 10px;
  margin-bottom: 16px;
  font-size: 18px;
  justify-content: space-between;
}

.video-config-card.is-collapsed .video-card-title {
  margin-bottom: 0;
}

.video-card-title small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.video-card-title span,
.task-card strong {
  color: var(--blue);
}

.video-config-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advanced-config {
  margin: 4px 0 16px;
  border: 1px solid rgba(78, 156, 255, 0.22);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.3);
}

.advanced-config summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.advanced-config .config-grid {
  margin: 0;
  padding: 0 14px 14px;
}

.segment-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 360px));
  gap: 12px;
  margin: 12px 0 14px;
}

.video-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}

.video-toolbar button {
  min-height: 42px;
}

.danger {
  border: 1px solid rgba(238, 93, 114, 0.45);
  border-radius: 8px;
  border-color: rgba(238, 93, 114, 0.45);
  background: rgba(238, 93, 114, 0.12);
  color: #ff9aa7;
  font-weight: 900;
}

label,
.field {
  display: grid;
  gap: 7px;
}

label span,
.field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: rgba(24, 26, 31, 0.9);
  color: var(--text);
}

input,
select {
  min-height: 40px;
  padding: 0 12px;
}

textarea {
  min-height: 150px;
  padding: 12px;
  resize: vertical;
  line-height: 1.65;
}

textarea.large {
  min-height: 210px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(32, 199, 166, 0.75);
  box-shadow: 0 0 0 3px rgba(32, 199, 166, 0.12);
}

.flow {
  margin-bottom: 18px;
}

.step {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(24, 26, 31, 0.72);
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.step span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(154, 163, 175, 0.14);
  font-size: 12px;
}

.step.is-current {
  border-color: rgba(32, 199, 166, 0.55);
  color: var(--teal);
}

.step.is-done {
  border-color: rgba(78, 156, 255, 0.4);
  color: var(--blue);
}

.step:disabled {
  color: rgba(154, 163, 175, 0.42);
  background: rgba(24, 26, 31, 0.38);
}

.next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  border: 1px solid rgba(32, 199, 166, 0.42);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(32, 199, 166, 0.1);
}

.next-step > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.next-step span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(32, 199, 166, 0.18);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.next-step strong {
  font-size: 14px;
  line-height: 1.5;
}

.workflow-guide {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.guide-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px 9px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(24, 26, 31, 0.72);
  color: var(--text);
  text-align: left;
}

.guide-card strong,
.guide-card small,
.guide-card em {
  grid-column: 2;
  min-width: 0;
}

.guide-index {
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(154, 163, 175, 0.14);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.guide-card strong {
  font-size: 14px;
}

.guide-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.guide-card em {
  color: var(--amber);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.guide-card.done {
  border-color: rgba(78, 156, 255, 0.38);
  background: rgba(78, 156, 255, 0.08);
}

.guide-card.done .guide-index {
  background: rgba(78, 156, 255, 0.18);
  color: var(--blue);
}

.guide-card.current {
  border-color: rgba(32, 199, 166, 0.58);
  background: rgba(32, 199, 166, 0.1);
}

.guide-card.current .guide-index {
  background: rgba(32, 199, 166, 0.18);
  color: var(--teal);
}

.guide-card.locked {
  opacity: 0.58;
}

.panel {
  display: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(24, 26, 31, 0.86);
  box-shadow: 0 18px 50px var(--shadow);
}

.panel.is-visible {
  display: block;
}

.agent-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(111, 124, 255, 0.35);
  border-radius: 8px;
  padding: 16px;
  background: rgba(111, 124, 255, 0.08);
}

.agent-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color: #fff;
  font-weight: 900;
}

.agent-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.panel-head {
  justify-content: space-between;
  margin-bottom: 16px;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: #121419;
}

.segmented button {
  border: 0;
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.segmented button.is-active {
  background: var(--panel-2);
  color: var(--text);
}

.script-control-console {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 12px;
  margin-bottom: 14px;
}

.script-control-main,
.script-rule-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(8, 11, 16, 0.48);
}

.compact-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.script-gate-pill {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.script-gate-pill.is-ready {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.1);
  color: var(--blue);
}

.script-gate-pill.is-warn {
  border-color: rgba(245, 184, 75, 0.38);
  background: rgba(245, 184, 75, 0.1);
  color: var(--amber);
}

.script-gate-pill.is-pass {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.1);
  color: var(--teal);
}

.script-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rewrite-track-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}

.rewrite-track-switch .rewrite-type {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(18, 22, 29, 0.72);
  color: var(--text);
  text-align: left;
  position: relative;
}

.rewrite-track-switch .rewrite-type.is-active {
  border-color: rgba(205, 143, 0, 0.62) !important;
  background: #fff6cc !important;
  box-shadow: inset 0 0 0 2px rgba(244, 180, 0, 0.16), 0 8px 18px rgba(118, 82, 16, 0.07) !important;
}

.rewrite-track-switch .rewrite-type em {
  position: absolute;
  top: 9px;
  right: 10px;
  display: none;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f4b400;
  color: #5b3d00;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.rewrite-track-switch .rewrite-type.is-active em {
  display: inline-flex;
}

.rewrite-track-switch strong,
.rewrite-track-switch span {
  display: block;
}

.rewrite-track-switch strong {
  font-size: 14px;
  font-weight: 950;
}

.rewrite-track-switch span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.rewrite-type-current {
  margin: -2px 0 12px;
  border: 1px solid rgba(205, 143, 0, 0.22);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff8d8;
  color: #6f4e00;
  font-size: 13px;
  font-weight: 900;
}

.mode-card {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 12px;
  background: rgba(18, 22, 29, 0.7);
  color: var(--text);
  text-align: left;
  position: relative;
}

.mode-card.is-active {
  border-color: rgba(205, 143, 0, 0.62) !important;
  background: #fff6cc !important;
  box-shadow: inset 0 0 0 2px rgba(244, 180, 0, 0.18), 0 8px 18px rgba(118, 82, 16, 0.08) !important;
}

.mode-card em {
  position: absolute;
  top: 9px;
  right: 10px;
  display: none;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f4b400;
  color: #5b3d00;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.mode-card.is-active em {
  display: inline-flex;
}

.mode-card strong,
.mode-card b,
.mode-card span {
  display: block;
}

.mode-card strong {
  color: var(--teal);
  font-size: 13px;
}

.mode-card b {
  margin-top: 6px;
  font-size: 15px;
}

.mode-card span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.script-mode-current {
  margin-top: 10px;
  border: 1px solid rgba(205, 143, 0, 0.22);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff8d8;
  color: #6f4e00;
  font-size: 13px;
  font-weight: 900;
}

.script-type-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.script-type-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.script-type-row small {
  color: var(--muted);
  line-height: 1.5;
}

.compact-segmented {
  flex: 0 0 auto;
}

.compact-segmented button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 12px;
}

.script-rule-list {
  display: grid;
  gap: 8px;
}

.script-rule-list article {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(5, 8, 13, 0.28);
}

.script-rule-list span,
.script-rule-list strong {
  display: block;
}

.script-rule-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.script-rule-list strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.editor-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.script-input-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.script-input-panel article {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 10px;
  background: rgba(5, 8, 13, 0.28);
}

.script-input-panel span,
.script-input-panel strong,
.script-input-panel small {
  display: block;
}

.script-input-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.script-input-panel strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
}

.script-input-panel small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.script-input-panel article.is-pass {
  border-color: rgba(45, 212, 191, 0.36);
  background: rgba(45, 212, 191, 0.08);
}

.script-input-panel article.is-warn {
  border-color: rgba(245, 184, 75, 0.42);
  background: rgba(245, 184, 75, 0.08);
}

.toolbar {
  flex-wrap: wrap;
  margin: 14px 0;
}

.toolbar span {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

.script-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 14px 0;
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 10px;
  background: rgba(5, 8, 13, 0.28);
}

.script-action-bar > div {
  display: grid;
  gap: 3px;
  min-width: 160px;
  margin-right: auto;
}

.script-action-bar > div span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.script-action-bar > div strong {
  color: var(--text);
  font-size: 14px;
}

.script-action-bar button.is-recommended {
  border-color: rgba(45, 212, 191, 0.5);
  background: linear-gradient(135deg, var(--teal), #22a6d8);
  color: #05110f;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

.toolbar button.is-recommended {
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

.script-action-bar .is-soft-hidden {
  display: none;
}

.script-action-bar #scriptMeta {
  margin-left: 0;
  color: var(--muted);
  font-size: 12px;
}

.script-output-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 12px;
  background: rgba(5, 8, 13, 0.24);
}

.script-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.script-output-head span,
.script-output-head strong {
  display: block;
}

.script-output-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.script-output-head strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
}

.script-output-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.script-output-metrics article {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(18, 22, 29, 0.58);
}

.script-output-metrics span,
.script-output-metrics strong {
  display: block;
}

.script-output-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.script-output-metrics strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
}

.script-output-metrics article.is-pass {
  border-color: rgba(45, 212, 191, 0.36);
  background: rgba(45, 212, 191, 0.08);
}

.script-output-metrics article.is-warn {
  border-color: rgba(245, 184, 75, 0.42);
  background: rgba(245, 184, 75, 0.08);
}

.hook-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(16, 17, 20, 0.5);
}

.hook-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.hook-head span {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(78, 156, 255, 0.14);
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.hook-output {
  border-left: 3px solid var(--teal);
  padding: 8px 10px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.7;
}

.hook-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.hook-metrics article,
.hook-guidance-box {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(5, 8, 13, 0.28);
}

.hook-metrics span,
.hook-metrics strong,
.hook-guidance-box strong,
.hook-guidance-box p {
  display: block;
}

.hook-metrics span,
.hook-guidance-box strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.hook-metrics strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
}

.hook-guidance-box p,
.hook-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.hook-guidance-box p {
  margin-top: 6px;
  font-size: 13px;
}

.mode-help {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mode-help article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(32, 35, 42, 0.55);
}

.mode-help article.is-active {
  border-color: rgba(32, 199, 166, 0.5);
  background: rgba(32, 199, 166, 0.1);
}

.mode-help b,
.mode-help span {
  display: block;
}

.mode-help span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.script-quality-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.script-gate-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 12px;
  background: rgba(148, 163, 184, 0.08);
}

.script-gate-summary.pass {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.1);
}

.script-gate-summary.warn {
  border-color: rgba(245, 184, 75, 0.42);
  background: rgba(245, 184, 75, 0.1);
}

.script-gate-summary span,
.script-gate-summary strong,
.script-gate-summary p {
  display: block;
}

.script-gate-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.script-gate-summary strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
}

.script-gate-summary p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.script-gate-summary b,
.script-gate-summary .mini-btn {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(5, 8, 13, 0.32);
  color: var(--text);
  font-size: 12px;
}

.script-gate-summary .mini-btn {
  border-color: rgba(148, 163, 184, 0.28);
  cursor: pointer;
}

.script-gate-summary.warn .mini-btn {
  border-color: rgba(245, 184, 75, 0.45);
  color: #fde6b0;
}

.script-gate-summary.pass .mini-btn {
  border-color: rgba(45, 212, 191, 0.42);
  color: #9cf5e7;
}

.script-quality-panel article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(12, 16, 22, 0.62);
}

.script-quality-panel span,
.script-quality-panel strong,
.script-quality-panel small {
  display: block;
}

.script-quality-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.script-quality-panel strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
}

.script-quality-panel small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.script-quality-panel article.is-pass {
  border-color: rgba(32, 199, 166, 0.42);
  background: rgba(32, 199, 166, 0.08);
}

.script-quality-panel article.is-warn {
  border-color: rgba(255, 191, 87, 0.5);
  background: rgba(255, 191, 87, 0.08);
}

.script-compare-panel {
  margin: 12px 0 14px;
}

.script-compare-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: rgba(12, 16, 22, 0.36);
}

.script-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.script-version-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.script-compare-head span,
.script-compare-head small,
.script-compare-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.script-compare-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.script-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.script-compare-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(12, 16, 22, 0.58);
}

.script-compare-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
}

.script-compare-grid p {
  max-height: 180px;
  overflow: auto;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.paste-box {
  margin-bottom: 14px;
}

.paste-box textarea {
  min-height: 120px;
}

.version-note {
  margin-top: 8px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 800;
}

.review-block,
.audit-marked,
.audit-card,
.compare-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(32, 35, 42, 0.68);
}

.review-block {
  padding: 14px;
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.review-head strong {
  font-size: 15px;
}

.review-head span {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(245, 184, 75, 0.12);
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
}

.audit-marked {
  padding: 14px;
  color: var(--muted);
  line-height: 1.8;
  background: rgba(16, 17, 20, 0.52);
}

.audit-marked mark {
  border-radius: 4px;
  padding: 2px 4px;
  background: rgba(238, 93, 114, 0.22);
  color: #ffd1d7;
}

.audit-layout,
.compare-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.audit-layout {
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
}

.compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.polish-review-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
  background: rgba(16, 17, 20, 0.45);
}

.polish-review-card.pass {
  border-color: rgba(45, 212, 191, 0.34);
}

.polish-review-card.warn {
  border-color: rgba(245, 184, 75, 0.38);
}

.polish-review-card span,
.polish-review-card p {
  color: var(--muted);
}

.polish-review-card > div > span,
.polish-review-head span,
.polish-review-grid span {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.polish-review-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
}

.polish-review-card p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.polish-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.polish-review-head b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(5, 8, 13, 0.32);
  color: var(--text);
  font-size: 12px;
}

.polish-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.polish-review-grid article {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: rgba(5, 8, 13, 0.22);
}

.polish-review-grid article.is-pass {
  border-color: rgba(45, 212, 191, 0.28);
}

.polish-review-grid article.is-warn {
  border-color: rgba(245, 184, 75, 0.34);
}

.audit-workbench {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.audit-gate-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 12px;
  background: rgba(148, 163, 184, 0.08);
}

.audit-gate-card.run {
  border-color: rgba(96, 165, 250, 0.36);
  background: rgba(96, 165, 250, 0.1);
}

.audit-gate-card.pass {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.1);
}

.audit-gate-card.warn {
  border-color: rgba(245, 184, 75, 0.42);
  background: rgba(245, 184, 75, 0.1);
}

.audit-gate-card span,
.audit-gate-card strong,
.audit-gate-card p {
  display: block;
}

.audit-gate-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.audit-gate-card strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.audit-gate-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.audit-gate-card button {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(5, 8, 13, 0.32);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.audit-gate-card.pass button {
  border-color: rgba(45, 212, 191, 0.32);
  color: var(--teal);
}

.audit-gate-card.warn button {
  border-color: rgba(245, 184, 75, 0.34);
  color: var(--amber);
}

.audit-decision-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(18, 21, 28, 0.94), rgba(13, 15, 20, 0.86));
}

.audit-decision-card.pass {
  border-color: rgba(45, 212, 191, 0.34);
}

.audit-decision-card.warn {
  border-color: rgba(245, 184, 75, 0.36);
}

.audit-decision-main > span,
.audit-decision-side > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.audit-decision-main > strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 20px;
}

.audit-decision-main > p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.audit-blockers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.audit-blockers article {
  border: 1px solid rgba(245, 184, 75, 0.22);
  border-radius: 8px;
  padding: 10px;
  background: rgba(245, 184, 75, 0.07);
}

.audit-blockers b {
  display: block;
  margin-bottom: 4px;
}

.audit-blockers p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.audit-decision-side {
  display: grid;
  align-content: start;
  gap: 10px;
}

.audit-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.audit-mini-stats b {
  border-radius: 8px;
  padding: 8px 6px;
  background: rgba(5, 8, 13, 0.32);
  color: var(--text);
  text-align: center;
}

.audit-mini-stats small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.audit-decision-side button {
  width: 100%;
}

.audit-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.audit-overview article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(32, 35, 42, 0.68);
}

.audit-overview span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.audit-overview strong {
  font-size: 20px;
}

.issue-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.audit-priority-board {
  grid-template-columns: 1.15fr 1fr 0.85fr;
}

.audit-priority-column,
.audit-pass-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.45);
}

.audit-priority-column header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.audit-priority-column header strong,
.audit-pass-card strong {
  display: block;
  color: var(--text);
  font-size: 16px;
}

.audit-priority-column header span,
.audit-pass-card p {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.audit-priority-column header b {
  flex: 0 0 auto;
  border-radius: 999px;
  min-width: 26px;
  height: 26px;
  padding: 4px 8px;
  background: rgba(5, 8, 13, 0.36);
  text-align: center;
  font-size: 12px;
}

.audit-priority-column.danger {
  border-color: rgba(238, 93, 114, 0.42);
}

.audit-priority-column.warn {
  border-color: rgba(245, 184, 75, 0.42);
}

.audit-priority-column.ok,
.audit-pass-card {
  border-color: rgba(32, 199, 166, 0.34);
}

.issue-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.45);
}

.issue-column > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.issue-column > strong span {
  border-radius: 999px;
  min-width: 24px;
  padding: 3px 7px;
  text-align: center;
  font-size: 12px;
}

.issue-column.danger {
  border-color: rgba(238, 93, 114, 0.42);
}

.issue-column.warn {
  border-color: rgba(245, 184, 75, 0.42);
}

.issue-column.note {
  border-color: rgba(78, 156, 255, 0.42);
}

.issue-column.ok {
  border-color: rgba(32, 199, 166, 0.42);
}

.issue-card {
  border-radius: 8px;
  padding: 10px;
  background: rgba(32, 35, 42, 0.72);
}

.issue-card + .issue-card {
  margin-top: 8px;
}

.audit-priority-column > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.issue-card b,
.comparison-list b {
  display: block;
  margin-bottom: 6px;
}

.issue-card p,
.comparison-list p,
.issue-column > p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.issue-card em,
.comparison-list em {
  display: block;
  color: var(--teal);
  font-style: normal;
  font-size: 13px;
  line-height: 1.55;
}

.comparison-panel {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 12px;
}

.comparison-list {
  display: grid;
  gap: 10px;
}

.comparison-list > div {
  border-left: 3px solid rgba(78, 156, 255, 0.7);
  padding-left: 10px;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.score-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(16, 17, 20, 0.48);
  color: var(--muted);
}

.score-grid b {
  color: var(--text);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.memory-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.memory-strip article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(18, 22, 29, 0.74);
}

.memory-strip span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.memory-strip strong {
  font-size: 17px;
}

.overview-board {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.38);
}

.overview-management {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
}

.overview-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.36fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  background: rgba(18, 22, 29, 0.58);
}

.overview-search {
  margin: 0;
}

.project-sort-control {
  display: grid;
  gap: 5px;
}

.project-sort-control span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.project-sort-control select {
  width: 100%;
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  min-height: 38px;
  padding: 0 10px;
  background: rgba(5, 8, 13, 0.72);
  color: var(--text);
  outline: none;
}

.overview-search input {
  min-height: 38px;
}

.overview-stage-tabs {
  grid-column: 1 / -1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0;
}

.overview-stage-tabs button {
  min-height: 38px;
}

.project-bulkbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.project-bulkbar span,
.show-archived-toggle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.show-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ghost.compact,
.danger.compact {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.production-table {
  min-width: 860px;
}

.production-row {
  display: grid;
  grid-template-columns: 32px minmax(220px, 1.35fr) 120px minmax(130px, 0.65fr) minmax(260px, 1.3fr) 110px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(42, 49, 59, 0.58);
  padding: 10px 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.project-select-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
}

.production-open {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.production-row:not(.production-head):hover,
.production-row.is-active,
.production-row.is-focused {
  background: rgba(45, 212, 191, 0.08);
}

.production-row.is-focused {
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.78);
}

.production-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(12, 16, 22, 0.96);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.project-detail-panel {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(18, 22, 29, 0.78);
}

.project-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.project-detail-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.detail-meta-grid article,
.detail-summary-card,
.detail-next-card,
.detail-blockers {
  border: 1px solid rgba(42, 49, 59, 0.72);
  border-radius: 8px;
  padding: 10px;
  background: rgba(5, 8, 13, 0.28);
}

.detail-meta-grid span,
.detail-summary-card span,
.detail-next-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.detail-meta-grid strong,
.detail-next-card strong {
  color: var(--text);
  font-size: 14px;
}

.detail-progress i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
  overflow: hidden;
}

.detail-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.detail-next-card p,
.detail-summary-card p,
.detail-summary-card small,
.detail-blockers p,
.detail-timeline small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.detail-summary-card p {
  margin: 0;
}

.detail-summary-card small {
  display: block;
  margin-top: 7px;
  color: var(--blue);
}

.detail-next-card p {
  margin: 6px 0 0;
}

.detail-blockers {
  display: grid;
  gap: 7px;
}

.detail-blockers strong {
  font-size: 13px;
}

.detail-blockers p {
  margin: 0;
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(148, 163, 184, 0.08);
}

.detail-blockers p.ok {
  color: var(--teal);
}

.detail-blockers p.warn {
  color: var(--amber);
}

.detail-blockers p.danger {
  color: #ff9aa7;
}

.detail-timeline {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.detail-timeline li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  opacity: 0.58;
}

.detail-timeline li.done,
.detail-timeline li.current {
  opacity: 1;
}

.detail-timeline li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.detail-timeline li.done > span {
  background: rgba(96, 165, 250, 0.16);
  color: var(--blue);
}

.detail-timeline li.current > span {
  background: rgba(45, 212, 191, 0.18);
  color: var(--teal);
}

.detail-timeline strong,
.detail-timeline small {
  display: block;
}

.detail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.detail-actions .primary {
  grid-column: 1 / -1;
}

.project-detail-empty {
  color: var(--muted);
  text-align: center;
}

.production-title strong,
.production-title small,
.production-next,
.production-time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-title strong {
  font-size: 14px;
}

.production-title small,
.production-next,
.production-time,
.production-progress em,
.production-empty {
  color: var(--muted);
  font-size: 12px;
}

.production-progress {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.production-progress i {
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.production-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.production-empty {
  padding: 18px;
  text-align: center;
}

.overview-empty {
  border: 1px dashed rgba(42, 49, 59, 0.86);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.full-report {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(32, 35, 42, 0.58);
}

.full-report summary {
  cursor: pointer;
  font-weight: 900;
}

.audit-card,
.compare-card {
  padding: 14px;
}

.audit-card strong,
.compare-card strong {
  display: block;
  margin-bottom: 10px;
}

.audit-card p,
.compare-card div,
.audit-card div {
  color: var(--muted);
  line-height: 1.7;
}

#auditText {
  max-height: 560px;
  overflow: auto;
  white-space: pre-wrap;
}

.audit-list {
  display: grid;
  gap: 10px;
}

.audit-item {
  border-left: 3px solid var(--amber);
  padding-left: 10px;
}

.audit-item b {
  color: var(--text);
}

.compare-card .changed {
  color: var(--teal);
}

.insight-grid,
.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.delivery-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.delivery-readiness-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
  background: rgba(16, 17, 20, 0.5);
}

.delivery-readiness-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.delivery-readiness-main.is-ready {
  color: var(--teal);
}

.delivery-readiness-main.is-warn {
  color: var(--amber);
}

.delivery-readiness-main span,
.delivery-readiness-main strong,
.delivery-readiness-main p {
  display: block;
}

.delivery-readiness-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.delivery-readiness-main strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
}

.delivery-readiness-main p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.delivery-readiness-main b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(5, 8, 13, 0.32);
  color: currentColor;
}

.delivery-readiness-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-readiness-checks span {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.delivery-readiness-checks span.done {
  background: rgba(45, 212, 191, 0.12);
  color: var(--teal);
}

.delivery-readiness-checks span.todo {
  background: rgba(245, 184, 75, 0.12);
  color: var(--amber);
}

.insight-grid article,
.export-grid article,
.delivery-status-grid article,
.asset-card,
.task-card,
.empty-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(32, 35, 42, 0.68);
}

article strong,
.asset-card strong,
.task-card strong {
  display: block;
  margin-bottom: 8px;
}

article p,
.asset-card p,
.task-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.delivery-status-grid span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.delivery-status-grid strong {
  margin: 0;
  font-size: 18px;
}

.delivery-status-grid article.done {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.08);
}

.delivery-status-grid article.run {
  border-color: rgba(255, 196, 87, 0.38);
  background: rgba(255, 196, 87, 0.08);
}

.delivery-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  margin-top: 14px;
}

.delivery-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(16, 17, 20, 0.48);
}

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

.delivery-head h3 {
  margin: 0;
  font-size: 18px;
}

.delivery-list {
  display: grid;
  gap: 8px;
}

.delivery-list article {
  border: 1px solid rgba(48, 52, 61, 0.86);
  border-radius: 8px;
  padding: 10px;
  background: rgba(32, 35, 42, 0.55);
}

.delivery-list article.done {
  border-color: rgba(45, 212, 191, 0.32);
}

.delivery-list article.run {
  border-color: rgba(255, 196, 87, 0.34);
}

.delivery-list span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.delivery-list strong {
  margin: 0;
  line-height: 1.5;
}

.publish-copy {
  min-height: 208px;
}

.delivery-clips {
  overflow: auto;
}

.delivery-empty {
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  line-height: 1.55;
}

.delivery-clip-table {
  width: 100%;
  border-collapse: collapse;
}

.delivery-clip-table th,
.delivery-clip-table td {
  border-bottom: 1px solid rgba(48, 52, 61, 0.78);
  padding: 9px;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  vertical-align: top;
}

.delivery-clip-table th {
  color: var(--muted);
  font-weight: 900;
}

.delivery-clip-table td:nth-child(3) {
  min-width: 240px;
  line-height: 1.5;
}

.delivery-clip-table a {
  color: var(--teal);
  font-weight: 900;
}

.technical-preview {
  margin-top: 12px;
}

.technical-preview.is-collapsed textarea {
  max-height: 180px;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.segment-workbench-card,
.storyboard-workbench-card {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(16, 17, 20, 0.55);
}

.storyboard-workbench-card {
  border-color: rgba(32, 199, 166, 0.28);
  background: rgba(13, 21, 20, 0.56);
}

.segment-flow-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  grid-column: 1 / -1;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
  background: rgba(16, 17, 20, 0.48);
}

.segment-flow-card.run {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.08);
}

.segment-flow-card.pass {
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(45, 212, 191, 0.08);
}

.segment-flow-card span,
.segment-flow-card strong,
.segment-flow-card p {
  display: block;
}

.segment-flow-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.segment-flow-card strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
}

.segment-flow-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.segment-flow-card button {
  flex: 0 0 auto;
  border: 1px solid rgba(45, 212, 191, 0.34);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(45, 212, 191, 0.1);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.segment-quality-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(5, 8, 13, 0.24);
}

.segment-quality-card.pass {
  border-color: rgba(45, 212, 191, 0.3);
}

.segment-quality-card.warn {
  border-color: rgba(245, 184, 75, 0.34);
}

.segment-quality-card span,
.segment-quality-card strong,
.segment-quality-card p {
  display: block;
}

.segment-quality-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.segment-quality-card strong {
  margin-top: 4px;
  color: var(--text);
}

.segment-quality-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.segment-quality-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 150px;
}

.segment-quality-stats b {
  border-radius: 8px;
  padding: 7px 6px;
  background: rgba(16, 17, 20, 0.65);
  color: var(--text);
  text-align: center;
}

.segment-quality-stats small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.subsection-head h3 {
  margin: 0;
  font-size: 20px;
}

.subsection-head > span {
  border: 1px solid rgba(32, 199, 166, 0.35);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(32, 199, 166, 0.08);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.storyboard-document-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.storyboard-document-head h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.storyboard-document {
  display: grid;
  gap: 14px;
  max-height: 760px;
  overflow: auto;
  border: 1px solid rgba(48, 52, 61, 0.9);
  border-radius: 8px;
  padding: 14px;
  background: #0f1116;
  color: var(--text);
  line-height: 1.72;
}

.storyboard-document.empty-document {
  display: block;
  color: var(--muted);
  text-align: center;
}

.prompt-meta-strip {
  border: 1px solid rgba(32, 199, 166, 0.32);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(32, 199, 166, 0.08);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.storyboard-quality-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(99, 102, 241, 0.24);
  border-radius: 8px;
  padding: 12px;
  background: rgba(18, 20, 28, 0.72);
}

.storyboard-quality-panel.is-pass {
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(45, 212, 191, 0.08);
}

.storyboard-quality-panel.is-warn {
  border-color: rgba(245, 184, 75, 0.36);
  background: rgba(245, 184, 75, 0.08);
}

.storyboard-quality-panel > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.storyboard-quality-panel strong {
  color: var(--text);
  font-weight: 900;
}

.storyboard-queue-progress {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(360px, 100%);
}

.storyboard-queue-progress i {
  display: block;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #fff6cc;
  border: 1px solid rgba(185, 120, 0, 0.22);
}

.storyboard-queue-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd43b, #f4b400);
  transition: width 0.2s ease;
}

.storyboard-queue-progress em {
  color: #6f4e00;
  font-style: normal;
  font-weight: 900;
}

.storyboard-quality-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.storyboard-quality-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.storyboard-quality-actions button {
  border: 1px solid rgba(245, 184, 75, 0.36);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(245, 184, 75, 0.1);
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.storyboard-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.storyboard-quality-row {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(48, 52, 61, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: rgba(10, 11, 14, 0.48);
}

.storyboard-quality-row.is-ok {
  border-color: rgba(32, 199, 166, 0.32);
}

.storyboard-quality-row.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
}

.storyboard-quality-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.storyboard-section {
  display: grid;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.storyboard-document h3 {
  margin: 0;
  color: var(--teal);
  font-size: 18px;
}

.storyboard-document h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.storyboard-segment-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(48, 52, 61, 0.92);
  border-radius: 8px;
  padding: 14px;
  background: rgba(24, 26, 31, 0.58);
}

.storyboard-document .segment-title {
  border-left: 4px solid var(--teal);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(32, 199, 166, 0.08);
  line-height: 1.6;
}

.storyboard-document p {
  margin: 0;
  color: #d7dce4;
  white-space: pre-wrap;
}

.storyboard-document .analysis-title {
  border-radius: 6px;
  padding: 9px 10px;
  background: rgba(245, 184, 75, 0.1);
  color: var(--amber);
  font-weight: 900;
}

.semantic-line,
.risk-line {
  border-left: 3px solid rgba(78, 156, 255, 0.55);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(78, 156, 255, 0.06);
}

.shot-count-line {
  width: fit-content;
  border: 1px solid rgba(32, 199, 166, 0.32);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(32, 199, 166, 0.1);
  color: var(--teal) !important;
  font-size: 12px;
  font-weight: 900;
}

.risk-line {
  border-left-color: rgba(245, 184, 75, 0.65);
  background: rgba(245, 184, 75, 0.06);
}

.prompt-label {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(141, 123, 255, 0.14);
  color: #c8c0ff !important;
  font-size: 12px;
  font-weight: 900;
}

.storyboard-bullet {
  position: relative;
  padding-left: 18px;
}

.storyboard-bullet::before {
  position: absolute;
  left: 2px;
  color: var(--teal);
  content: "•";
}

.storyboard-code {
  overflow: auto;
  border: 1px solid rgba(78, 156, 255, 0.28);
  border-radius: 8px;
  padding: 14px;
  background: #0b0d11;
  color: #eef1f5;
  line-height: 1.72;
  white-space: pre-wrap;
}

.storyboard-code code,
.storyboard-document code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.storyboard-output-summary {
  border: 1px solid rgba(185, 120, 0, 0.22) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  background: #fffdf4 !important;
}

.storyboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.storyboard-summary-grid article {
  border: 1px solid rgba(185, 120, 0, 0.24) !important;
  border-radius: 8px;
  padding: 10px;
  background: #fff6cc !important;
}

.storyboard-summary-grid span,
.storyboard-summary-grid strong {
  display: block;
  color: #6f4e00 !important;
}

.storyboard-summary-grid span {
  font-size: 12px;
  font-weight: 900;
}

.storyboard-summary-grid strong {
  margin-top: 4px;
  font-size: 15px;
}

.storyboard-generation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.storyboard-generation-meta span {
  border: 1px solid rgba(185, 120, 0, 0.24);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff6cc;
  color: #6f4e00;
  font-size: 12px;
  font-weight: 900;
}

.storyboard-generation-meta.is-fallback span,
.storyboard-segment-card.is-fallback {
  border-color: rgba(220, 38, 38, 0.34);
  background: rgba(254, 226, 226, 0.12);
}

.fallback-alert,
.director-review-alert {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 8px;
  padding: 10px;
  background: rgba(254, 226, 226, 0.18);
  color: #7f1d1d;
}

.director-review-alert {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(254, 243, 199, 0.22);
  color: #78350f;
}

.fallback-alert strong,
.director-review-alert strong {
  font-weight: 950;
}

.fallback-alert span,
.director-review-alert span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.fallback-alert button {
  justify-self: start;
  border: 1px solid rgba(220, 38, 38, 0.34);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  color: #991b1b;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.storyboard-document > code,
.storyboard-document p code,
.storyboard-document td code {
  border-radius: 4px;
  padding: 2px 5px;
  background: rgba(78, 156, 255, 0.16);
  color: #b9d6ff;
}

.storyboard-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.storyboard-table th,
.storyboard-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  color: var(--text);
  font-size: 13px;
  vertical-align: top;
}

.storyboard-table th {
  background: rgba(32, 35, 42, 0.92);
  color: var(--muted);
}

.storyboard-document hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1080px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px;
  vertical-align: top;
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  background: #15171c;
  color: var(--muted);
  font-size: 12px;
}

td {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.segment-row-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.segment-row-warn td {
  background: rgba(245, 184, 75, 0.045);
}

.empty {
  color: var(--muted);
  text-align: center;
}

.tag-ok,
.tag-warn,
.tag-run,
.tag-done,
.tag-fail {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
}

.tag-ok,
.tag-done {
  background: rgba(32, 199, 166, 0.14);
  color: var(--teal);
}

.tag-warn {
  background: rgba(245, 184, 75, 0.14);
  color: var(--amber);
}

.tag-run {
  background: rgba(78, 156, 255, 0.14);
  color: var(--blue);
}

.tag-fail {
  background: rgba(238, 93, 114, 0.14);
  color: var(--rose);
}

.task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: start;
  gap: 14px;
  margin-top: 14px;
}

.task-table-panel,
.task-detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(23, 35, 58, 0.82), rgba(35, 25, 48, 0.72)),
    rgba(32, 35, 42, 0.72);
}

.task-empty-panel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px dashed rgba(143, 160, 188, 0.42);
  border-radius: 8px;
  padding: 18px;
  background: rgba(20, 24, 32, 0.68);
}

.task-empty-panel strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 16px;
}

.task-empty-panel p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.task-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 190px;
}

.video-plan-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(45, 212, 191, 0.07);
}

.video-plan-note strong {
  color: var(--text);
}

.video-plan-note span {
  color: var(--muted);
  line-height: 1.5;
}

.task-list-head,
.task-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.task-list-head span,
.task-detail-head span {
  color: var(--muted);
  font-size: 12px;
}

.task-table-wrap {
  max-height: 620px;
  overflow: auto;
  border: 1px solid rgba(48, 52, 61, 0.86);
  border-radius: 8px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
}

.task-table th,
.task-table td {
  border-bottom: 1px solid rgba(48, 52, 61, 0.75);
  padding: 10px;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}

.task-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #171b24;
  color: var(--muted);
}

.task-table tr {
  cursor: pointer;
}

.task-table tr:hover,
.task-table tr.is-active {
  background: rgba(32, 199, 166, 0.08);
}

.mini-progress {
  width: 80px;
  height: 6px;
  border-radius: 999px;
  background: #101216;
  overflow: hidden;
}

.mini-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.task-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-row-actions button {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 28px;
  padding: 0 8px;
  background: rgba(16, 17, 20, 0.58);
  color: var(--text);
  font-size: 12px;
}

.task-head-actions {
  gap: 8px;
}

.icon-danger {
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(238, 93, 114, 0.08);
  color: #ff7788;
}

.icon-danger svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.icon-danger:hover {
  border-color: rgba(238, 93, 114, 0.36);
  background: rgba(238, 93, 114, 0.16);
}

.task-detail-panel textarea {
  min-height: 118px;
}

.reference-box {
  display: grid;
  gap: 10px;
  border: 1px dashed rgba(143, 160, 188, 0.38);
  border-radius: 8px;
  padding: 12px;
}

.reference-box > span,
.reference-box small {
  color: var(--muted);
  font-weight: 700;
}

.reference-box small {
  font-size: 12px;
  font-weight: 500;
}

.upload-box {
  position: relative;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 18, 26, 0.76);
  cursor: pointer;
}

.upload-box input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-box b {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: var(--text);
}

.copy-row {
  gap: 8px;
}

.copy-row input {
  min-width: 0;
}

.copy-row button {
  flex: 0 0 auto;
  min-height: 38px;
}

.task-progress-text {
  font-size: 12px;
}

.task-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-status-grid article {
  border: 1px solid rgba(42, 49, 59, 0.82);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(18, 22, 29, 0.66);
}

.task-status-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.task-status-grid strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: #101216;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  transition: width 0.2s ease;
}

.progress.is-active span {
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--teal));
  background-size: 200% 100%;
  animation: progressPulse 1.1s linear infinite;
}

@keyframes progressPulse {
  from {
    background-position: 0% 0;
  }

  to {
    background-position: 200% 0;
  }
}

.task-actions {
  display: flex;
  gap: 8px;
}

.task-actions button {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 34px;
  background: #15171c;
  color: var(--text);
}

.task-actions .success {
  border: 0;
  background: linear-gradient(135deg, #17c78b, #05966d);
  color: white;
  font-weight: 800;
}

.mini-btn {
  border: 1px solid rgba(78, 156, 255, 0.35);
  border-radius: 8px;
  min-width: 78px;
  min-height: 30px;
  background: rgba(78, 156, 255, 0.12);
  color: var(--blue);
  font-weight: 800;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  border-radius: 8px;
  padding: 12px 14px;
  background: #eef1f5;
  color: #101114;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  font-weight: 800;
}

@media (max-width: 1120px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .overview,
  .workflow-guide,
  .config-grid,
  .voice-grid,
  .account-learning-layout,
  .account-branch-tabs,
  .account-accounts-layout,
  .account-config-grid,
  .sample-columns,
  .insight-grid,
  .export-grid,
  .delivery-status-grid,
  .delivery-layout,
  .task-grid,
  .editor-grid,
  .audit-decision-card,
  .audit-priority-board,
  .polish-review-grid,
  .audit-layout,
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .audit-blockers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .workspace,
  .sidebar {
    padding: 14px;
  }

  .topbar,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .status-strip {
    justify-content: flex-start;
  }

  .flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .next-step {
    align-items: stretch;
    flex-direction: column;
  }

  .next-step button {
    width: 100%;
  }
}

/* 2026-04 UI refresh: dense production workspace */
:root {
  --bg: #0d0f12;
  --surface: #12151a;
  --surface-2: #171b21;
  --surface-3: #1d232b;
  --panel: #15191f;
  --panel-2: #1c222a;
  --line: #2a313b;
  --line-soft: #20262e;
  --text: #f4f6f8;
  --muted: #9aa6b5;
  --muted-2: #6f7c8d;
  --teal: #2dd4bf;
  --amber: #f6c453;
  --rose: #fb7185;
  --violet: #a78bfa;
  --blue: #60a5fa;
  --shadow: rgba(0, 0, 0, 0.38);
}

body {
  background: linear-gradient(180deg, #0d0f12 0%, #10131a 54%, #0d0f12 100%);
  font-size: 14px;
}

button,
a,
input,
select,
textarea {
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

button:hover {
  transform: translateY(-1px);
}

.app {
  grid-template-columns: 300px minmax(0, 1fr);
}

.sidebar {
  padding: 18px 16px;
  border-right-color: var(--line-soft);
  background: #0f1217;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.brand {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 8px;
  background: #12161d;
}

.brand-mark {
  width: 38px;
  height: 38px;
  background: #d9f99d;
  color: #102016;
}

.brand strong {
  font-size: 15px;
  letter-spacing: 0;
}

.quick-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.new-project,
.primary,
.ghost {
  border-radius: 8px;
  min-height: 38px;
}

.new-project {
  margin: 0;
}

.primary,
.new-project {
  background: #2dd4bf;
  color: #061311;
  box-shadow: 0 8px 22px rgba(45, 212, 191, 0.16);
}

.ghost {
  background: #171d24;
}

.ghost:hover,
.mini-btn:hover,
.task-row-actions button:hover,
.task-actions button:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.1);
}

.sidebar-label {
  margin: 4px 4px 8px;
  color: #7f8da1;
  font-size: 12px;
  letter-spacing: 0;
}

.agent-list {
  gap: 6px;
  padding-bottom: 12px;
  border-bottom-color: var(--line-soft);
}

.agent {
  position: relative;
  display: grid;
  gap: 2px;
  border-color: transparent;
  padding: 10px 12px 10px 14px;
  background: transparent;
}

.agent::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.agent span {
  font-size: 14px;
}

.agent small {
  color: #748196;
}

.agent:hover,
.agent.is-active {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(45, 212, 191, 0.08);
}

.agent.is-active::before {
  background: var(--teal);
}

.project-list {
  max-height: none;
}

.section-head {
  margin: 0 4px 8px;
}

.project-item {
  border-color: rgba(42, 49, 59, 0.62);
  background: rgba(18, 22, 29, 0.72);
}

.project-row.is-active .project-item {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(96, 165, 250, 0.1);
}

.workspace {
  max-width: 1480px;
  width: 100%;
  padding: 22px 28px 40px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 7;
  margin: -22px -28px 18px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(42, 49, 59, 0.82);
  background: rgba(13, 15, 18, 0.92);
  backdrop-filter: blur(14px);
}

.eyebrow {
  color: #84cc16;
  letter-spacing: 0;
}

h1 {
  font-size: 25px;
  line-height: 1.25;
}

h2 {
  font-size: 21px;
  line-height: 1.25;
}

.status-strip {
  gap: 8px;
}

#projectStatus,
.pill,
.sync-status,
.tag-ok,
.tag-warn,
.tag-run,
.tag-done,
.tag-fail {
  border-radius: 8px;
}

.overview {
  grid-template-columns: 1.25fr 0.62fr 0.74fr 1fr auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px;
  background: #12161c;
}

label span,
.field span {
  color: #a7b2c2;
}

input,
select,
textarea {
  border-color: #29313c;
  background: #0f1318;
}

textarea {
  line-height: 1.75;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #384454;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.step {
  min-height: 46px;
  border-color: #29313c;
  background: #12161c;
  color: #8b97a8;
}

.step span {
  background: #202732;
}

.step.is-current {
  border-color: rgba(45, 212, 191, 0.55);
  background: rgba(45, 212, 191, 0.1);
  color: #ccfbf1;
}

.step.is-done {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.08);
}

.next-step {
  border-color: rgba(132, 204, 22, 0.3);
  background: #121912;
}

.next-step span {
  background: rgba(132, 204, 22, 0.13);
  color: #bef264;
}

.workflow-guide {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  overflow-x: auto;
  padding-bottom: 2px;
}

.guide-card {
  min-height: 98px;
  border-color: #29313c;
  background: #12161c;
}

.panel {
  border-color: #29313c;
  background: #151920;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.agent-hero {
  align-items: flex-start;
  border-color: rgba(96, 165, 250, 0.22);
  background: #111927;
}

.agent-avatar {
  background: #60a5fa;
  color: #08111f;
}

.panel-head {
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.segmented {
  background: #0f1318;
}

.segmented button.is-active {
  background: #263241;
}

.editor-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.hook-card,
.learning-card,
.account-library-panel,
.sample-box,
.review-block,
.audit-marked,
.audit-card,
.compare-card,
.summary-grid article,
.insight-grid article,
.export-grid article,
.asset-card,
.task-card,
.empty-card,
.delivery-card,
.segment-workbench-card,
.storyboard-workbench-card,
.issue-column,
.full-report,
.task-table-panel,
.task-detail-panel {
  border-color: #29313c;
  background: #12161c;
}

.hook-output {
  border-left-color: #84cc16;
  background: rgba(132, 204, 22, 0.06);
}

.mode-help article,
.account-library-item,
.sample-item,
.delivery-list article,
.issue-card {
  border-color: #26303b;
  background: #171d24;
}

.mode-help article.is-active,
.account-branch-tabs button.is-active,
.account-library-item.is-active {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(45, 212, 191, 0.09);
}

.account-branch-tabs {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  overflow-x: auto;
}

.account-branch-tabs button {
  background: #12161c;
}

.account-accounts-layout {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

.account-detected-card,
.prompt-meta-strip {
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.07);
}

.sample-columns {
  gap: 14px;
}

.audit-overview article {
  background: #12161c;
}

.issue-board {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  overflow-x: auto;
}

.storyboard-document,
.storyboard-code {
  background: #0d1015;
}

.task-table-panel,
.task-detail-panel {
  background: #12161c;
}

.task-empty-panel {
  background: #12161c;
}

/* Restore production-tool layout for storyboard + video factory */
#segmentPanel.is-visible {
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: start;
}

#segmentPanel[hidden],
#segmentPanel:not(.is-visible) {
  display: none !important;
}

#segmentPanel > .panel-head {
  grid-column: 1 / -1;
}

#segmentPanel > .segment-flow-card {
  grid-column: 1 / -1;
}

#segmentPanel .segment-workbench-card,
#segmentPanel .storyboard-workbench-card {
  margin-top: 0;
  min-height: 0;
  border-color: rgba(54, 62, 78, 0.82);
  background: #12161c;
}

#segmentPanel .segment-workbench-card {
  position: sticky;
  top: 76px;
}

#segmentPanel .paste-box {
  display: none;
}

#segmentPanel .table-wrap {
  max-height: 520px;
  overflow: auto;
}

#segmentPanel table th,
#segmentPanel table td {
  padding: 9px 10px;
  vertical-align: top;
}

#segmentPanel table td:nth-child(3) {
  min-width: 260px;
  line-height: 1.55;
}

.segment-actions,
.storyboard-actions {
  gap: 8px;
}

.segment-actions button,
.storyboard-actions button {
  min-height: 38px;
  padding-inline: 12px;
}

.storyboard-document {
  max-height: 680px;
  overflow: auto;
}

.storyboard-workbench-card .toolbar {
  align-items: center;
}

.factory-command-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(18, 25, 36, 0.95), rgba(18, 23, 31, 0.95)),
    #12161c;
  border-color: rgba(54, 62, 78, 0.82);
}

.factory-command-card .video-card-title {
  margin-bottom: 0;
}

.video-config-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.video-config-grid label:nth-child(7) {
  grid-column: 1 / -1;
}

.video-toolbar {
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.factory-settings {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding-top: 10px;
}

.factory-settings summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.factory-settings .video-config-grid {
  margin-top: 10px;
}

.video-config-card {
  padding: 18px;
  margin-bottom: 18px;
  background:
    linear-gradient(120deg, rgba(17, 28, 50, 0.88), rgba(37, 25, 49, 0.86)),
    rgba(20, 22, 28, 0.9);
  border-color: rgba(78, 156, 255, 0.18);
}

.video-card-title {
  gap: 10px;
  margin-bottom: 16px;
  font-size: 18px;
  justify-content: space-between;
}

.video-config-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.video-config-grid label:nth-child(7) {
  grid-column: auto;
}

.video-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.video-toolbar button {
  min-height: 42px;
}

.task-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
  gap: 14px;
}

.task-card-head {
  justify-content: space-between;
  gap: 12px;
}

.task-head-actions {
  gap: 8px;
}

.task-card textarea {
  min-height: 118px;
}

.task-card .reference-box {
  display: grid;
  gap: 10px;
  border: 1px dashed rgba(143, 160, 188, 0.38);
  border-radius: 8px;
  padding: 12px;
  background: transparent;
}

.task-card .copy-row {
  gap: 8px;
}

.task-progress-text {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1180px) {
  #segmentPanel.is-visible,
  .task-grid,
  .video-config-grid {
    grid-template-columns: 1fr;
  }

  .factory-command-card {
    grid-template-columns: 1fr;
  }

  .video-toolbar {
    justify-content: flex-start;
  }

  #segmentPanel .segment-workbench-card {
    position: static;
  }

  .video-config-grid label:nth-child(7) {
    grid-column: auto;
  }
}

.toast {
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 8px;
  background: #f4f6f8;
  color: #0d0f12;
}

.success-modal {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: block;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.success-modal-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(184, 132, 24, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: #fffdf8;
  box-shadow: 0 16px 38px rgba(64, 45, 10, 0.14);
  text-align: left;
  pointer-events: auto;
}

.success-modal-mark {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff4cf;
  position: relative;
}

.success-modal-mark::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #b88418;
  border-bottom: 2px solid #b88418;
  transform: rotate(-45deg);
}

.success-modal-copy {
  min-width: 0;
}

.success-modal-copy span {
  display: block;
  color: #8b6b28;
  font-size: 11px;
  font-weight: 900;
}

.success-modal-copy strong {
  display: block;
  margin-top: 2px;
  color: #3f3016;
  font-size: 15px;
  line-height: 1.25;
}

.success-modal-copy p {
  margin: 4px 0 0;
  color: #7d705c;
  font-size: 12px;
  line-height: 1.45;
}

.success-modal-card button {
  min-width: 74px;
  min-height: 32px;
  padding: 0 10px;
  border-color: rgba(184, 132, 24, 0.22);
  background: #3f3016;
  color: #fffaf0;
  white-space: nowrap;
}

.recent-script-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(47, 37, 18, 0.28);
}

.recent-script-modal[hidden] {
  display: none !important;
}

.recent-script-card {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  gap: 12px;
  border: 1px solid rgba(184, 132, 24, 0.22);
  border-radius: 8px;
  padding: 16px;
  background: #fffdf8;
  box-shadow: 0 22px 54px rgba(64, 45, 10, 0.18);
}

.recent-script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recent-script-head span {
  color: #8b6b28;
  font-size: 12px;
  font-weight: 900;
}

.recent-script-card strong {
  color: #3f3016;
  font-size: 16px;
  line-height: 1.45;
}

.recent-script-card textarea {
  width: 100%;
  min-height: 360px;
  max-height: calc(100vh - 230px);
  resize: vertical;
  border: 1px solid rgba(184, 132, 24, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: #fffaf0;
  color: #3f3016;
  font-size: 14px;
  line-height: 1.7;
}

.extract-success-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  background: rgba(47, 37, 18, 0.16);
}

.extract-success-modal[hidden] {
  display: none !important;
}

.extract-success-card {
  width: min(360px, calc(100vw - 40px));
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid rgba(184, 132, 24, 0.24);
  border-radius: 8px;
  padding: 22px 18px;
  background: #fffdf8;
  box-shadow: 0 22px 54px rgba(64, 45, 10, 0.18);
  text-align: center;
}

.extract-success-mark {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff4cf;
  position: relative;
}

.extract-success-mark::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 11px;
  width: 14px;
  height: 8px;
  border-left: 3px solid #b88418;
  border-bottom: 3px solid #b88418;
  transform: rotate(-45deg);
}

.extract-success-card span {
  color: #8b6b28;
  font-size: 12px;
  font-weight: 900;
}

.extract-success-card strong {
  color: #3f3016;
  font-size: 22px;
  line-height: 1.25;
}

.extract-success-card p {
  margin: 0;
  color: #7d705c;
  font-size: 13px;
  line-height: 1.5;
}

.script-progress-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 18, 24, 0.36);
  backdrop-filter: blur(8px);
}

.script-progress-modal[hidden] {
  display: none;
}

.script-progress-card {
  width: min(460px, 92vw);
  padding: 24px;
  border: 1px solid rgba(184, 132, 24, 0.28);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 24px 70px rgba(47, 42, 34, 0.2);
  color: #2f2a22;
  text-align: center;
}

.script-progress-spinner {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border: 3px solid rgba(184, 132, 24, 0.16);
  border-top-color: #b88418;
  border-radius: 999px;
  animation: spin 0.95s linear infinite;
}

.script-progress-modal.is-done .script-progress-spinner {
  animation: none;
  border-color: rgba(184, 132, 24, 0.18);
  border-top-color: rgba(184, 132, 24, 0.18);
}

.script-progress-modal.is-done .script-progress-spinner::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 14px;
  height: 8px;
  border-left: 3px solid #b88418;
  border-bottom: 3px solid #b88418;
  transform: rotate(-45deg);
}

.script-progress-modal.is-failed .script-progress-spinner {
  animation: none;
  border-color: rgba(159, 106, 34, 0.26);
  border-top-color: rgba(159, 106, 34, 0.26);
}

.script-progress-modal.is-failed .script-progress-spinner::before,
.script-progress-modal.is-failed .script-progress-spinner::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 20px;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #9f6a22;
}

.script-progress-modal.is-failed .script-progress-spinner::before {
  transform: rotate(45deg);
}

.script-progress-modal.is-failed .script-progress-spinner::after {
  transform: rotate(-45deg);
}

.script-progress-modal.is-failed .script-progress-bar b {
  background: #9f6a22;
}

.script-progress-card span {
  display: block;
  margin-bottom: 6px;
  color: #8a6312;
  font-size: 12px;
  font-weight: 800;
}

.script-progress-card strong {
  display: block;
  font-size: 22px;
  line-height: 1.25;
}

.script-progress-card p {
  margin: 10px 0 16px;
  color: #6f5a31;
  font-size: 14px;
  line-height: 1.7;
}

.script-progress-bar {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(184, 132, 24, 0.14);
}

.script-progress-bar b {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b88418, #e7bd63);
  transition: width 0.28s ease;
}

.script-progress-card em {
  display: block;
  margin-top: 9px;
  color: #8a6312;
  font-style: normal;
  font-weight: 800;
}

.script-progress-ok {
  margin-top: 16px;
  min-width: 120px;
  background: #3f3016;
  color: #fffaf0;
}

@media (max-width: 1120px) {
  .topbar {
    position: static;
    margin: 0 0 18px;
    padding: 0 0 18px;
    background: transparent;
    backdrop-filter: none;
  }

  .overview,
  .flow {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    grid-template-columns: 1fr 86px;
  }
}

/* Responsive polish: prevent the workspace from collapsing in the in-app browser */
body {
  background:
    linear-gradient(180deg, rgba(20, 25, 33, 0.96), rgba(11, 13, 17, 1)),
    #0b0d11;
}

.sidebar,
.panel,
.overview,
.next-step,
.guide-card,
.hook-card,
.learning-card,
.account-library-panel,
.sample-box,
.review-block,
.audit-card,
.compare-card,
.segment-workbench-card,
.storyboard-workbench-card,
.task-table-panel,
.task-detail-panel {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.brand,
.overview,
.panel,
.next-step {
  border-color: rgba(148, 163, 184, 0.16);
}

.brand {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(96, 165, 250, 0.08)),
    #121820;
}

.brand-mark {
  border-radius: 10px;
  background: linear-gradient(135deg, #d9f99d, #99f6e4);
}

.new-project,
.primary {
  background: linear-gradient(135deg, #7dd3fc, #5eead4);
}

.panel {
  background:
    linear-gradient(180deg, rgba(23, 29, 37, 0.92), rgba(18, 22, 29, 0.96)),
    #12161c;
}

.topbar h1,
.admin-topbar h1 {
  max-width: 820px;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .app {
    display: block;
  }

  .sidebar {
    position: relative;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .brand {
    margin-bottom: 10px;
  }

  .agent-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-list {
    max-height: 260px;
  }

  .workspace {
    max-width: none;
    padding: 18px;
  }

  .topbar {
    position: static;
    margin: 0 0 14px;
    padding: 0 0 14px;
    background: transparent;
    backdrop-filter: none;
  }

  .topbar,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .status-strip {
    justify-content: flex-start;
  }

  .overview,
  .overview-filter,
  .overview-management,
  .script-control-console,
  .rewrite-track-switch,
  .script-mode-cards,
  .script-input-panel,
  .script-output-metrics,
  .hook-metrics,
  .flow,
  .workflow-guide,
  .editor-grid,
  .account-accounts-layout,
  .sample-columns,
  .comparison-panel,
  .compare-grid,
  .task-grid,
  .delivery-layout,
  .insight-grid,
  .export-grid,
  .delivery-status-grid,
  .memory-strip,
  .voice-grid,
  .config-grid {
    grid-template-columns: 1fr;
  }

  .workflow-guide,
  .issue-board,
  .account-branch-tabs {
    overflow: visible;
  }

  .issue-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding: 12px;
  }

  .workspace {
    padding: 12px;
  }

  .brand {
    padding: 9px;
  }

  .quick-actions {
    grid-template-columns: 1fr 78px;
  }

  .agent-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -12px 10px;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--line-soft);
  }

  .agent {
    flex: 0 0 174px;
    min-height: 66px;
  }

  .agent::before {
    top: auto;
    right: 12px;
    bottom: 0;
    left: 12px;
    width: auto;
    height: 3px;
  }

  .project-list {
    display: none;
  }

  .overview-stage-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }

  .overview-stage-tabs button {
    flex: 0 0 auto;
    min-width: 72px;
  }

  .project-detail-panel {
    position: static;
  }

  .detail-actions {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 19px;
  }

  .panel {
    padding: 14px;
  }

  .agent-hero {
    display: none;
  }

  .toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .script-action-bar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .toolbar span,
  .script-action-bar #scriptMeta {
    margin-left: 0;
  }

  .segmented,
  .status-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .account-inline {
    grid-template-columns: 1fr;
  }
}

/* UI pro pass: cleaner product shell, less blocky chrome */
:root {
  --bg: #090c11;
  --panel: #111722;
  --panel-2: #161e2b;
  --line: rgba(148, 163, 184, 0.18);
  --line-soft: rgba(148, 163, 184, 0.12);
  --text: #f3f6fb;
  --muted: #8d99aa;
  --teal: #35d6c2;
  --amber: #f6c453;
  --blue: #76b7ff;
  --violet: #a78bfa;
  --shadow: rgba(0, 0, 0, 0.34);
}

body {
  background:
    linear-gradient(180deg, rgba(12, 17, 24, 0.96), rgba(8, 11, 16, 1) 44%),
    #090c11;
}

.app {
  grid-template-columns: 276px minmax(0, 1fr);
}

.sidebar {
  padding: 16px 14px;
  background:
    linear-gradient(180deg, rgba(17, 24, 34, 0.98), rgba(11, 15, 22, 0.98)),
    #0b0f16;
}

.brand {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.brand-mark {
  border-radius: 9px;
  background: linear-gradient(135deg, #d9f99d, #67e8f9);
}

img.brand-mark {
  background: transparent;
}

.quick-actions {
  margin-bottom: 14px;
}

.new-project,
.primary {
  border: 0;
  background: linear-gradient(135deg, #8bdcff, #66f0dc);
  color: #061217;
  box-shadow: 0 10px 26px rgba(53, 214, 194, 0.15);
}

.ghost {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.035);
  color: #d7e0ee;
}

.sidebar-label {
  margin-top: 2px;
  color: #6f7c8f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-list {
  gap: 3px;
}

.agent {
  border-radius: 7px;
  padding: 9px 10px 9px 13px;
  color: #dbe5f3;
}

.agent span {
  font-size: 13px;
  font-weight: 850;
}

.agent small {
  margin-top: 1px;
  font-size: 11px;
}

.agent:hover,
.agent.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.055);
}

.agent.is-active {
  color: #f8fbff;
}

.agent.is-active::before {
  background: linear-gradient(180deg, #35d6c2, #76b7ff);
}

.workspace {
  padding: 24px 30px 42px;
}

.topbar {
  margin: -24px -30px 18px;
  padding: 18px 30px;
  border-bottom-color: rgba(148, 163, 184, 0.12);
  background: rgba(9, 12, 17, 0.82);
}

.eyebrow {
  color: #a3e635;
  font-size: 11px;
  font-weight: 950;
}

h1 {
  font-size: 26px;
  letter-spacing: 0;
}

h2 {
  letter-spacing: 0;
}

.status-strip {
  align-items: center;
}

#projectStatus,
#creditBalance,
#currentUserLabel,
.sync-status,
.pill {
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 14px;
  padding: 18px;
  background: rgba(15, 118, 110, 0.12);
}

.login-panel[hidden] {
  display: none;
}

.login-panel.is-attention {
  border-color: rgba(103, 232, 249, 0.72);
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.12), 0 18px 50px rgba(45, 212, 191, 0.12);
}

.login-panel h2,
.login-panel p {
  margin: 0;
}

.login-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.login-panel-head > span {
  align-self: flex-start;
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(45, 212, 191, 0.08);
  color: #99f6e4;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.login-panel p {
  margin-top: 6px;
  color: var(--muted);
}

.auth-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 12px;
  grid-column: 1 / -1;
}

.auth-card {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(7, 12, 20, 0.42);
}

.auth-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
}

.auth-card p {
  margin: 5px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, 0.5fr) auto;
  gap: 10px;
}

.register-form {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 10px;
}

.register-form button {
  grid-column: 1 / -1;
}

.login-form input,
.register-form input {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 11px;
  background: rgba(5, 8, 13, 0.56);
  color: var(--text);
}

.login-hint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.overview,
.panel,
.next-step,
.guide-card,
.hook-card,
.learning-card,
.account-library-panel,
.sample-box,
.review-block,
.audit-card,
.compare-card,
.segment-workbench-card,
.storyboard-workbench-card,
.task-table-panel,
.task-detail-panel {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(17, 23, 34, 0.86);
  box-shadow: none;
}

.overview,
.next-step {
  border-radius: 10px;
}

.overview {
  padding: 13px;
}

input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(5, 8, 13, 0.56);
}

.flow {
  gap: 6px;
}

.step {
  min-height: 42px;
  border-color: rgba(148, 163, 184, 0.13);
  background: rgba(255, 255, 255, 0.035);
}

.step span {
  width: 22px;
  height: 22px;
  background: rgba(148, 163, 184, 0.13);
}

.step.is-current {
  border-color: rgba(53, 214, 194, 0.5);
  background: rgba(53, 214, 194, 0.09);
}

.next-step {
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.11), rgba(53, 214, 194, 0.055));
}

.panel {
  border-radius: 12px;
  padding: 20px;
}

.agent-hero {
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(118, 183, 255, 0.1), rgba(53, 214, 194, 0.06)),
    rgba(255, 255, 255, 0.03);
}

.panel-head {
  gap: 14px;
}

.segmented {
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(4, 8, 13, 0.44);
}

.segmented button {
  min-height: 34px;
  border-radius: 7px;
}

.segmented button.is-active {
  background: rgba(118, 183, 255, 0.16);
  color: #f3f8ff;
}

.hook-output,
.storyboard-document,
.storyboard-code {
  background: rgba(5, 8, 13, 0.5);
}

.mode-help article,
.account-library-item,
.sample-item,
.delivery-list article,
.issue-card {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 1180px) {
  .sidebar {
    padding: 14px;
    background: rgba(11, 15, 22, 0.98);
  }

  .workspace {
    padding: 16px 14px 34px;
  }

  .topbar {
    margin: 0 0 12px;
    padding: 0 0 12px;
  }

  .status-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .auth-card-grid,
  .login-form,
  .register-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .brand {
    padding: 8px;
  }

  .brand strong {
    font-size: 14px;
  }

  .brand span {
    font-size: 11px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  img.brand-mark {
    background: transparent;
  }

  .quick-actions {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 7px;
  }

  .new-project,
  .primary,
  .ghost {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .sidebar-label {
    margin: 2px 2px 8px;
  }

  .agent-list {
    padding-bottom: 10px;
  }

  .agent {
    flex-basis: 150px;
    min-height: 56px;
    padding: 8px 10px;
  }

  .agent span {
    font-size: 13px;
    white-space: nowrap;
  }

  .agent small {
    font-size: 11px;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .status-strip {
    grid-template-columns: 1fr;
  }

  .overview {
    gap: 9px;
    padding: 11px;
  }

  .flow {
    display: flex;
    overflow-x: auto;
    margin: 0 -14px 12px;
    padding: 0 14px 8px;
  }

  .step {
    flex: 0 0 104px;
  }

  .next-step {
    align-items: stretch;
    display: grid;
    gap: 10px;
  }

  .panel {
    border-radius: 10px;
    padding: 13px;
  }
}

#projectStatus.production-status {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}

#projectStatus.production-status.run {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.1);
  color: var(--blue);
}

#projectStatus.production-status.warn {
  border-color: rgba(245, 184, 75, 0.36);
  background: rgba(245, 184, 75, 0.1);
  color: var(--amber);
}

#projectStatus.production-status.danger {
  border-color: rgba(238, 93, 114, 0.4);
  background: rgba(238, 93, 114, 0.12);
  color: #ff9aa7;
}

#projectStatus.production-status.done {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.1);
  color: var(--teal);
}

/* Keep segmentation and storyboard as two distinct production steps. */
#segmentPanel.is-visible {
  grid-template-columns: minmax(0, 1fr);
}

#segmentPanel .segment-workbench-card {
  position: static;
}

#storyboardPanel.is-visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#storyboardPanel[hidden],
#storyboardPanel:not(.is-visible) {
  display: none !important;
}

#storyboardPanel .storyboard-workbench-card {
  margin-top: 0;
  min-height: 0;
  border-color: rgba(54, 62, 78, 0.82);
  background: #12161c;
}

/* Final sidebar project visibility override. */
.sidebar .agent-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
}

.sidebar .project-list {
  flex: 0 0 clamp(335px, 45vh, 430px);
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.sidebar .project-stage-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

.sidebar .project-stage-tabs button {
  min-height: 28px;
  padding: 0 5px;
  font-size: 11px;
}

.sidebar .project-stage-summary {
  display: none !important;
}

.sidebar #projectList {
  min-height: 0;
  overflow-y: auto;
}

/* Open-project sidebar: match the compact text + single active block reference. */
body:not(.no-active-project):not(.is-login-page) .sidebar .agent-list {
  gap: 3px;
  align-content: start;
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent {
  min-height: auto;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 10px 9px 13px;
  background: transparent;
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent::before {
  display: none;
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.025);
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent.is-active {
  border-color: rgba(148, 163, 184, 0.08);
  background: rgba(255, 255, 255, 0.055);
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent span {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent small {
  margin-top: 1px;
  color: #8795a8;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

body:not(.no-active-project):not(.is-login-page) .sidebar .agent:disabled {
  opacity: 0.42;
}

/* Dense project header: keep all controls, cut vertical height. */
body:not(.no-active-project):not(.is-login-page) .overview {
  grid-template-columns: minmax(220px, 1.55fr) minmax(110px, 0.58fr) minmax(150px, 0.8fr) minmax(190px, 1.05fr) 92px;
  gap: 6px;
  align-items: end;
  margin-bottom: 6px;
  border-radius: 8px;
  padding: 7px 9px;
}

body:not(.no-active-project):not(.is-login-page) .overview label {
  gap: 4px;
}

body:not(.no-active-project):not(.is-login-page) .overview label span {
  font-size: 11px;
  line-height: 1;
}

body:not(.no-active-project):not(.is-login-page) .overview input,
body:not(.no-active-project):not(.is-login-page) .overview select {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12px;
}

body:not(.no-active-project):not(.is-login-page) .overview-auto-name {
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
}

body:not(.no-active-project):not(.is-login-page) .flow {
  gap: 5px;
  margin-bottom: 5px;
}

body:not(.no-active-project):not(.is-login-page) .step {
  min-height: 28px;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 12px;
}

body:not(.no-active-project):not(.is-login-page) .step span {
  width: 17px;
  height: 17px;
  margin-right: 4px;
  font-size: 10px;
}

body:not(.no-active-project):not(.is-login-page) .next-step {
  min-height: 30px !important;
  margin-bottom: 5px !important;
  padding: 4px 8px !important;
}

body:not(.no-active-project):not(.is-login-page) .next-step span {
  padding: 3px 7px;
  font-size: 10px !important;
}

body:not(.no-active-project):not(.is-login-page) .next-step strong {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

body:not(.no-active-project):not(.is-login-page) .next-step button {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

body:not(.no-active-project):not(.is-login-page) .workflow-guide {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin-bottom: 7px !important;
}

body:not(.no-active-project):not(.is-login-page) .guide-card {
  min-height: 30px !important;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 0 5px;
  align-items: center;
  padding: 4px 7px !important;
}

body:not(.no-active-project):not(.is-login-page) .guide-index {
  grid-row: auto;
  width: 17px !important;
  height: 17px !important;
  font-size: 10px !important;
}

body:not(.no-active-project):not(.is-login-page) .guide-card strong {
  font-size: 12px !important;
  line-height: 1.15;
}

body:not(.no-active-project):not(.is-login-page) .guide-card small {
  display: none;
}

body:not(.no-active-project):not(.is-login-page) .guide-card em {
  display: none;
}

/* Soft UI pass: lighten the front workspace without changing behavior. */
:root {
  --bg: #12171d;
  --panel: #171d24;
  --panel-2: #1c242d;
  --line: rgba(148, 163, 184, 0.2);
  --text: #eef5fb;
  --muted: #a9b5c5;
  --teal: #36d2c4;
  --amber: #f2c66d;
  --rose: #f07184;
  --violet: #8ea4ff;
  --blue: #7bc7f7;
  --shadow: rgba(3, 8, 14, 0.2);
}

body {
  background:
    linear-gradient(135deg, rgba(35, 50, 64, 0.42), rgba(17, 22, 29, 0.95) 38%, rgba(18, 23, 29, 1)),
    var(--bg);
  color: var(--text);
}

.app {
  background: rgba(18, 23, 29, 0.88);
}

.sidebar {
  border-right-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(19, 27, 35, 0.96), rgba(14, 19, 25, 0.98));
  box-shadow: 14px 0 36px rgba(0, 0, 0, 0.1);
}

.workspace {
  background: linear-gradient(180deg, rgba(20, 27, 35, 0.54), rgba(18, 23, 29, 0.96) 190px);
}

.topbar {
  border-bottom-color: rgba(148, 163, 184, 0.18);
  background: rgba(18, 23, 29, 0.78);
  backdrop-filter: blur(14px);
}

.brand strong,
.topbar h1,
.panel-head h2,
.login-panel h1,
.login-panel h2,
.script-control-main h2 {
  letter-spacing: 0;
}

.brand-mark,
img.brand-mark {
  box-shadow: 0 10px 22px rgba(54, 210, 196, 0.14);
}

.new-project,
.primary,
.script-action-bar button.is-recommended,
.overview-auto-name {
  background: linear-gradient(135deg, #75ddea, #48dec6);
  color: #071117;
  box-shadow: 0 10px 22px rgba(54, 210, 196, 0.12);
}

.ghost,
.project-search input,
input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(14, 20, 27, 0.86);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus,
.project-search input:focus {
  border-color: rgba(54, 210, 196, 0.55);
  box-shadow: 0 0 0 3px rgba(54, 210, 196, 0.09);
  outline: none;
}

.agent,
.project-item {
  color: #e8eff7;
}

.agent small,
.project-item small,
.panel-head p,
.overview label span,
.script-rule-list span,
.script-output-head span,
.script-quality-panel span,
.account-detected-card p {
  color: var(--muted);
}

.agent:hover,
.project-item:hover {
  background: rgba(255, 255, 255, 0.045);
}

.agent.is-active,
.project-item.is-active,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent.is-active {
  border-color: rgba(125, 199, 247, 0.26);
  background: rgba(125, 199, 247, 0.09);
}

.overview,
.panel,
.login-panel,
.workflow-guide,
.next-step,
.account-library-panel,
.account-detected-card,
.script-control-main,
.script-rule-panel,
.script-input-panel,
.script-output-card,
.script-quality-panel,
.script-compare-panel,
.segment-workbench-card,
.storyboard-workbench-card,
.video-config-card,
.task-card,
.delivery-card,
.overview-board,
.overview-filter,
.overview-management,
.account-context-strip,
.account-context-text {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(22, 29, 37, 0.72);
  box-shadow: 0 14px 34px rgba(3, 8, 14, 0.12);
}

.overview,
.panel,
.login-panel {
  box-shadow: 0 18px 42px rgba(3, 8, 14, 0.13);
}

.panel::before,
.overview::before,
.login-panel::before {
  opacity: 0.55;
}

.step,
.guide-card,
.script-mode-card,
.script-rule-list article,
.script-input-panel article,
.script-output-metrics article,
.script-quality-panel article,
.account-branch-tabs button,
.account-library-item,
.account-profile-grid article,
.overview-card,
.overview-empty,
.sample-box,
.hook-card,
.audit-check,
.storyboard-card,
.segment-card,
.video-task,
.export-item {
  border-color: rgba(148, 163, 184, 0.17);
  background: rgba(15, 21, 29, 0.74);
}

.step.is-active,
.guide-card.current,
.script-mode-card.is-active,
.account-branch-tabs button.is-active,
.account-library-item.is-active,
.script-input-panel article.is-pass,
.script-quality-panel article.is-pass {
  border-color: rgba(54, 210, 196, 0.46);
  background: rgba(54, 210, 196, 0.1);
}

.production-status.done,
.script-gate-pill.is-pass,
.script-gate-summary.pass,
.project-stage-dot.export,
.project-stage-summary .export {
  border-color: rgba(54, 210, 196, 0.36);
  background: rgba(54, 210, 196, 0.1);
  color: #7df0de;
}

.production-status.warn,
.script-gate-pill.is-warn,
.script-gate-summary.warn {
  border-color: rgba(242, 198, 109, 0.36);
  background: rgba(242, 198, 109, 0.1);
  color: #ffd78a;
}

.eyebrow,
.script-mode-card b,
.script-rule-list span,
.script-quality-panel span {
  color: #80e7dd;
}

.next-step {
  background: linear-gradient(90deg, rgba(242, 198, 109, 0.11), rgba(54, 210, 196, 0.09));
}

.next-step span {
  background: rgba(242, 198, 109, 0.14);
  color: #eec36c;
}

.sidebar-label,
.project-search span {
  color: #9ba8b9;
}

.project-stage-tabs button,
.project-stage-summary span,
.project-stage-dot {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(20, 27, 35, 0.78);
}

body:not(.no-active-project):not(.is-login-page) .overview {
  background: rgba(22, 29, 37, 0.68);
}

body:not(.no-active-project):not(.is-login-page) .flow,
body:not(.no-active-project):not(.is-login-page) .workflow-guide {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body:not(.no-active-project):not(.is-login-page) .guide-card,
body:not(.no-active-project):not(.is-login-page) .step {
  background: rgba(20, 27, 35, 0.72);
}

body.is-login-page .login-panel {
  background: rgba(22, 29, 37, 0.8);
}

@media (max-width: 760px) {
  .workspace {
    background: rgba(18, 23, 29, 0.98);
  }

  .overview,
  .panel,
  .login-panel {
    box-shadow: none;
  }
}

/* DELIVERY IMAGE TEMPLATE REDESIGN 20260507: cover templates are visual image-cover choices, not text cards. */
#exportPanel .panel-head {
  margin-bottom: 14px !important;
}

#exportPanel .delivery-readiness-card,
#exportPanel .delivery-publish-kit,
#exportPanel .delivery-clips-card,
#exportPanel .delivery-copy-card,
#exportPanel .delivery-checklist-card {
  margin-bottom: 14px !important;
}

#exportPanel .delivery-layout {
  display: block !important;
}

#exportPanel .export-actions,
#exportPanel .technical-preview {
  display: none !important;
}

#exportPanel .delivery-publish-kit {
  background: #fffdf4 !important;
}

#exportPanel .cover-visual-knowledge {
  background: linear-gradient(180deg, #fffdf4 0%, #ffeaa1 100%) !important;
}

#exportPanel .cover-visual-knowledge::before {
  background:
    linear-gradient(90deg, rgba(112, 73, 13, 0.12) 0 34%, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(217, 154, 22, 0.12)) !important;
}

#exportPanel .cover-visual-before {
  background: linear-gradient(90deg, #fffdf4 0 49%, #ffd96d 49% 51%, #ffedac 51% 100%) !important;
}

#exportPanel .cover-visual-before::after {
  content: "→" !important;
  position: absolute !important;
  top: 42% !important;
  left: 50% !important;
  z-index: 2 !important;
  transform: translate(-50%, -50%) !important;
  color: var(--ui-accent-strong) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}

#exportPanel .cover-visual-question {
  background: radial-gradient(circle at 50% 40%, #fffdf4 0 32%, #ffe28b 33% 100%) !important;
}

#exportPanel .publish-kit-grid {
  margin-top: 12px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#exportPanel .delivery-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

#exportPanel .delivery-mini-grid article {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: #fffdf4 !important;
}

#exportPanel .delivery-mini-grid strong,
#exportPanel .delivery-mini-grid p {
  display: block !important;
  margin: 0 !important;
}

#exportPanel .delivery-mini-grid p {
  margin-top: 8px !important;
  color: var(--ui-muted) !important;
  line-height: 1.55 !important;
}

#exportPanel .delivery-clips,
#exportPanel .delivery-list {
  max-height: none !important;
  overflow: visible !important;
}

#exportPanel .publish-copy {
  min-height: 180px !important;
}

@media (max-width: 1180px) {
}

@media (max-width: 760px) {
}

/* EXPORT LAYOUT NO COVER TEMPLATE 20260509: clean publish-material flow, no template picker. */
#exportPanel {
  display: none;
}

#exportPanel.is-visible {
  display: block;
}

#exportPanel .panel-head {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  padding-bottom: 14px !important;
}

#exportPanel .panel-head h2 {
  font-size: 26px !important;
}

#exportPanel .delivery-readiness-card {
  margin-bottom: 12px !important;
}

#exportPanel .delivery-readiness-main {
  min-height: 92px !important;
  border-radius: 8px !important;
}

#exportPanel .delivery-publish-kit,
#exportPanel .delivery-clips-card,
#exportPanel .delivery-copy-card,
#exportPanel .delivery-checklist-card {
  margin-bottom: 12px !important;
  padding: 14px 16px !important;
  background: #fffdf4 !important;
}

#exportPanel .delivery-publish-kit {
  border-left: 4px solid var(--ui-accent) !important;
}

#exportPanel .delivery-head {
  min-height: 44px !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

#exportPanel .delivery-head h3 {
  font-size: 19px !important;
}

#exportPanel .publish-kit-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

#exportPanel .publish-kit-grid article {
  min-height: 116px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fffaf0 !important;
}

#exportPanel .publish-kit-grid article:first-child,
#exportPanel .publish-kit-grid article:nth-child(4) {
  grid-column: span 2 !important;
}

#exportPanel .publish-kit-grid article:nth-child(5),
#exportPanel .publish-kit-grid article:nth-child(6) {
  grid-column: span 3 !important;
  min-height: 92px !important;
}

#exportPanel .publish-kit-grid span,
#exportPanel .delivery-mini-grid strong,
#exportPanel .delivery-list span {
  color: var(--ui-accent-strong) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#exportPanel .publish-kit-grid strong {
  margin-top: 10px !important;
  color: var(--ui-ink) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

#exportPanel .delivery-mini-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1.4fr !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#exportPanel .delivery-mini-grid article {
  min-height: 86px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fffaf0 !important;
}

#exportPanel .delivery-mini-grid p {
  margin: 8px 0 0 !important;
  color: var(--ui-ink) !important;
  line-height: 1.45 !important;
}

#exportPanel .delivery-copy-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

#exportPanel .publish-copy {
  min-height: 190px !important;
  border: 1px solid var(--ui-line) !important;
  background: #fffaf0 !important;
  color: var(--ui-ink) !important;
  line-height: 1.7 !important;
}

#exportPanel .delivery-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#exportPanel .delivery-list article {
  min-height: 92px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: #fffaf0 !important;
}

#exportPanel .delivery-list strong {
  margin-top: 8px !important;
  color: var(--ui-ink) !important;
  line-height: 1.45 !important;
}

#exportPanel .delivery-clips {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#exportPanel .delivery-clip-table {
  margin: 0 !important;
}

@media (max-width: 1280px) {
  #exportPanel .publish-kit-grid,
  #exportPanel .delivery-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #exportPanel .publish-kit-grid article,
  #exportPanel .publish-kit-grid article:first-child,
  #exportPanel .publish-kit-grid article:nth-child(4),
  #exportPanel .publish-kit-grid article:nth-child(5),
  #exportPanel .publish-kit-grid article:nth-child(6) {
    grid-column: auto !important;
  }

  #exportPanel .delivery-mini-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #exportPanel .publish-kit-grid,
  #exportPanel .delivery-list {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL LAST RULE: unified yellow workbench palette, export no-template compatibility. */
:root {
  --ui-accent: #9f6a22;
  --ui-soft-2: #fff1b8;
}

#auditPanel .audit-priority-summary,
#auditPanel .audit-priority-chip,
#auditPanel .audit-issue-list {
  border-color: var(--ui-line) !important;
}

.polish-review-card.pass,
.polish-review-head b,
.audit-gate-card.pass,
.production-status.done,
.tag-ok {
  background: var(--ui-soft-2) !important;
  color: var(--ui-accent-strong) !important;
}

.new-project,
button.new-project,
.primary,
button.primary,
#continueToSegmentBtn {
  background: var(--ui-action-bg, #ffd86a) !important;
}

/* Yellow-white UI pass: bright, restrained workspace theme. */
:root {
  color-scheme: light;
  --bg: #fffaf0;
  --panel: #ffffff;
  --panel-2: #fff6db;
  --line: rgba(166, 124, 38, 0.18);
  --text: #2d271c;
  --muted: #786b55;
  --teal: #d79a00;
  --blue: #b88700;
  --amber: #f2b600;
  --rose: #d85b42;
  --violet: #ad7a00;
  --shadow: rgba(118, 82, 16, 0.12);
}

body,
.app {
  background:
    linear-gradient(180deg, rgba(255, 248, 226, 0.96), rgba(255, 255, 255, 1) 34%, rgba(255, 250, 237, 1)),
    #fffaf0;
}

.sidebar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 12px 0 32px rgba(118, 82, 16, 0.07);
}

.workspace {
  background:
    linear-gradient(180deg, rgba(255, 245, 208, 0.72), rgba(255, 255, 255, 0.98) 260px),
    #fffaf0;
}

.topbar {
  border: 1px solid rgba(166, 124, 38, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 26px rgba(118, 82, 16, 0.07);
}

.overview,
.panel,
.login-panel,
.workflow-guide,
.next-step,
.account-library-panel,
.account-detected-card,
.script-control-main,
.script-rule-panel,
.script-input-panel,
.script-output-card,
.script-quality-panel,
.script-compare-panel,
.segment-workbench-card,
.storyboard-workbench-card,
.video-config-card,
.task-card,
.delivery-card,
.overview-board,
.overview-filter,
.overview-management,
.account-context-strip,
.account-context-text {
  border-color: rgba(166, 124, 38, 0.15);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(118, 82, 16, 0.08);
}

.step,
.guide-card,
.script-mode-card,
.script-rule-list article,
.script-input-panel article,
.script-output-metrics article,
.script-quality-panel article,
.account-branch-tabs button,
.account-library-item,
.account-profile-grid article,
.overview-card,
.overview-empty,
.sample-box,
.hook-card,
.audit-check,
.storyboard-card,
.segment-card,
.video-task,
.export-item,
.project-item,
.project-stage-tabs button,
.project-stage-summary span,
.project-stage-dot {
  border-color: rgba(166, 124, 38, 0.14);
  background: rgba(255, 252, 243, 0.88);
}

input,
select,
textarea,
.project-search input {
  border-color: rgba(166, 124, 38, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
}

.agent:hover,
.project-item:hover,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent:hover {
  background: rgba(255, 211, 79, 0.12);
}

.agent.is-active,
.project-item.is-active,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent.is-active {
  border-color: rgba(218, 160, 0, 0.26);
  background: rgba(255, 211, 79, 0.16);
}

.step.is-active,
.guide-card.current,
.script-mode-card.is-active,
.account-branch-tabs button.is-active,
.account-library-item.is-active {
  border-color: rgba(218, 160, 0, 0.34);
  background: rgba(255, 211, 79, 0.18);
}

.new-project,
.primary,
.script-action-bar button.is-recommended,
.overview-auto-name {
  background: linear-gradient(135deg, #5be3de, #ffd54d);
  color: #174346;
  box-shadow: 0 8px 18px rgba(71, 184, 189, 0.18);
}

.ghost {
  border-color: rgba(166, 124, 38, 0.2);
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
}

.eyebrow {
  color: #1aa3ab;
  font-size: 10px;
}

.panel-head p,
.brand span,
.agent small,
.project-item small,
.sidebar-label,
.project-search span {
  color: #6c908f;
}

body:not(.no-active-project):not(.is-login-page) .overview {
  background: rgba(255, 255, 255, 0.82);
}

body:not(.no-active-project):not(.is-login-page) .guide-card,
body:not(.no-active-project):not(.is-login-page) .step {
  background: rgba(255, 252, 243, 0.86);
}

.brand-mark {
  background: linear-gradient(135deg, #5be3de, #ffd54d);
  color: #174346;
  box-shadow: 0 10px 22px rgba(71, 184, 189, 0.16);
}

img.brand-mark {
  box-shadow: 0 10px 22px rgba(212, 151, 0, 0.12);
}

.agent,
.project-item,
.step,
.guide-card,
.panel,
.overview,
.login-panel,
.auth-card,
.script-output-card,
.task-card,
.asset-card,
.empty-card {
  color: var(--text);
}

.agent small,
.project-item small,
.guide-card small,
.guide-card em,
.panel-head p,
.auth-card p,
.login-panel p,
.task-card p,
.empty-card p {
  color: var(--muted) !important;
}

#projectStatus,
.pill,
.sync-status,
.sync-status.pending,
.sync-status.syncing,
.sync-status.synced {
  border-color: rgba(71, 184, 189, 0.24);
  background: rgba(103, 223, 226, 0.14);
  color: #1a8e95;
}

.sync-status.offline {
  border-color: rgba(216, 91, 66, 0.24);
  background: rgba(216, 91, 66, 0.08);
  color: #b44431;
}

.next-step,
.script-action-bar {
  background: rgba(255, 255, 255, 0.86) !important;
}

.next-step span {
  border-color: rgba(71, 184, 189, 0.24);
  background: rgba(103, 223, 226, 0.14) !important;
  color: #1a8e95 !important;
}

.next-step strong,
.guide-card.current em,
.guide-card.current strong,
.script-action-bar button.is-recommended {
  color: var(--text) !important;
}

body.is-login-page .workspace {
  background:
    linear-gradient(135deg, rgba(255, 213, 77, 0.32), rgba(255, 255, 255, 0.96) 44%, rgba(255, 250, 237, 1)),
    #fffaf0;
}

body.is-login-page .login-panel {
  background: rgba(255, 255, 255, 0.92);
}

.login-panel-head > span {
  border-color: rgba(71, 184, 189, 0.24);
  background: rgba(103, 223, 226, 0.14);
  color: #1a8e95;
}

.auth-card {
  border-color: rgba(166, 124, 38, 0.14);
  background: rgba(255, 252, 243, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.login-form input,
.register-form input {
  border-color: rgba(166, 124, 38, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
}

.login-form input::placeholder,
.register-form input::placeholder,
textarea::placeholder,
input::placeholder {
  color: #88a6a7;
}

/* Yellow-white cleanup pass for the account library. */
:root {
  color-scheme: light;
  --bg: #fff8e8;
  --panel: #ffffff;
  --panel-2: #fffdf6;
  --line: rgba(71, 184, 189, 0.22);
  --text: #174346;
  --muted: #5f8b8f;
  --teal: #35cfc8;
  --amber: #ffd54d;
  --blue: #67dfe2;
  --violet: #67dfe2;
  --rose: #ff9f7d;
}

.account-learning-layout,
.account-accounts-layout {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.learning-card,
.account-library-panel,
.account-detected-card,
.account-context-strip,
.sample-box,
.sample-item,
.manual-sample-entry,
.account-profile-grid article {
  border-color: rgba(71, 184, 189, 0.18) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(71, 184, 189, 0.08);
}

.account-branch-tabs button,
.account-library-item,
.recent-video-item,
.recent-video-tags span,
.recent-post-type-counts span,
.recent-video-actions .mark-btn,
.recent-video-status,
.sample-meta-line span {
  border-color: rgba(71, 184, 189, 0.18) !important;
  background: rgba(252, 255, 254, 0.94) !important;
  color: var(--text) !important;
}

.account-branch-tabs button.is-active,
.account-library-item.is-active,
.recent-video-actions .mark-btn.is-active {
  border-color: rgba(71, 184, 189, 0.42) !important;
  background: rgba(103, 223, 226, 0.18) !important;
  color: #174346 !important;
}

.account-context-strip,
.account-context-text,
.recent-posts-preview span,
.recent-video-main p,
.sample-edit-field span,
.sample-state,
.account-library-item span,
.account-detected-card p,
.account-profile-grid p {
  color: #5f8b8f !important;
}

.recent-posts-head {
  align-items: flex-start;
}

.recent-posts-preview b,
.recent-posts-preview span,
.recent-video-main strong,
.recent-video-main p,
.account-library-item span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.recent-posts-preview b {
  flex: 0 0 auto;
  color: #174346 !important;
  font-size: 13px;
}

.recent-posts-head > span {
  max-width: 620px;
  text-align: right;
  line-height: 1.45;
}

.recent-video-list {
  gap: 10px;
  max-height: 560px;
}

.recent-video-item {
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: start;
  padding: 10px;
}

.recent-video-item.is-commerce,
.recent-video-item.is-extracting {
  border-color: rgba(71, 184, 189, 0.24) !important;
  background: rgba(245, 255, 252, 0.96) !important;
}

.recent-video-cover {
  width: 82px;
  height: 62px;
  border-color: rgba(71, 184, 189, 0.18);
  background: #fff6d7;
  color: #1a8e95;
}

.recent-video-main {
  gap: 6px;
}

.recent-video-main strong {
  color: #174346;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

.recent-video-main p {
  line-height: 1.45;
}

.recent-video-tags {
  flex-wrap: wrap;
}

.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off,
.recent-video-status.working,
.recent-video-status.done,
.recent-video-status.error {
  border-color: rgba(71, 184, 189, 0.22) !important;
  color: #1a8e95 !important;
}

.recent-video-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(76px, 1fr));
  gap: 6px;
  justify-content: stretch;
  min-width: 230px;
}

.recent-video-actions .mini-btn,
.recent-video-actions .mark-btn,
.recent-video-actions [data-extract-recent-post] {
  min-width: 0;
  width: 100%;
  white-space: normal;
}

.recent-video-actions [data-extract-recent-post] {
  grid-column: 1 / -1;
  min-height: 34px;
  background: linear-gradient(135deg, #4fe0db, #ffd54d) !important;
  color: #174346 !important;
  font-weight: 950;
}

.sample-columns {
  gap: 14px;
}

.sample-list {
  max-height: 640px;
}

.sample-item {
  padding: 12px !important;
}

.sample-edit-field textarea,
.sample-edit-field input,
.sample-form textarea,
.sample-form input {
  border-color: rgba(71, 184, 189, 0.18) !important;
  background: #ffffff !important;
  color: #174346 !important;
}

.sample-edit-field textarea[data-sample-draft="script"] {
  min-height: 132px;
}

.sample-save-row .primary-mini {
  border-color: rgba(71, 184, 189, 0.26) !important;
  background: linear-gradient(135deg, #4fe0db, #ffd54d) !important;
  color: #174346 !important;
}

.pill,
.sample-index,
.sample-head span {
  border-color: rgba(71, 184, 189, 0.22) !important;
  background: rgba(103, 223, 226, 0.16) !important;
  color: #1a8e95 !important;
}

@media (max-width: 980px) {
  .account-learning-layout,
  .account-accounts-layout,
  .sample-columns,
  .recent-video-item {
    grid-template-columns: 1fr;
  }

  .recent-video-actions {
    min-width: 0;
  }

  .recent-posts-head {
    display: grid;
  }

  .recent-posts-head > span {
    max-width: none;
    text-align: left;
  }
}

/* No-gray pass: prefer clean white surfaces with yellow and cyan accents. */
:root {
  --bg: #fff9df;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --line: rgba(45, 205, 199, 0.26);
  --text: #064b50;
  --muted: #1598a0;
  --teal: #2fd4cc;
  --amber: #ffd84f;
  --blue: #2fd4cc;
  --violet: #2fd4cc;
}

body,
.app,
.workspace {
  background:
    linear-gradient(180deg, #fff4b8 0, #ffffff 220px, #fffdf2 100%),
    #ffffff !important;
}

.sidebar,
.topbar,
.overview,
.panel,
.login-panel,
.workflow-guide,
.next-step,
.learning-card,
.account-library-panel,
.account-detected-card,
.account-context-strip,
.account-context-text,
.script-control-main,
.script-rule-panel,
.script-input-panel,
.script-output-card,
.script-quality-panel,
.script-compare-panel,
.segment-workbench-card,
.storyboard-workbench-card,
.video-config-card,
.task-card,
.delivery-card,
.overview-board,
.overview-filter,
.overview-management,
.sample-box,
.sample-item,
.manual-sample-entry,
.account-profile-grid article,
.recent-video-item,
.account-library-item,
.account-branch-tabs button,
.project-item,
.overview-card,
.overview-empty,
.guide-card,
.step {
  background: #ffffff !important;
  border-color: rgba(47, 212, 204, 0.24) !important;
  box-shadow: 0 10px 24px rgba(47, 212, 204, 0.08) !important;
}

.account-branch-tabs button.is-active,
.account-library-item.is-active,
.recent-video-actions .mark-btn.is-active,
.agent.is-active,
.project-item.is-active,
.step.is-active,
.guide-card.current {
  background: #fff6c9 !important;
  border-color: rgba(47, 212, 204, 0.42) !important;
}

input,
select,
textarea,
.project-search input,
.sample-edit-field textarea,
.sample-edit-field input,
.sample-form textarea,
.sample-form input {
  background: #ffffff !important;
  border-color: rgba(47, 212, 204, 0.28) !important;
  color: #064b50 !important;
}

.ghost,
.mini-btn,
.recent-video-actions .mark-btn,
.recent-video-tags span,
.recent-post-type-counts span,
.recent-video-status,
.sample-meta-line span,
.pill,
.sample-index,
.sample-head span,
.sync-status,
#projectStatus {
  background: #ffffff !important;
  border-color: rgba(47, 212, 204, 0.28) !important;
  color: #0b9aa2 !important;
}

.new-project,
.primary,
.script-action-bar button.is-recommended,
.overview-auto-name,
.recent-video-actions [data-extract-recent-post],
.sample-save-row .primary-mini {
  background: linear-gradient(135deg, #37ddd5, #ffe066) !important;
  color: #064b50 !important;
  border-color: rgba(47, 212, 204, 0.35) !important;
}

.panel-head p,
.brand span,
.agent small,
.project-item small,
.sidebar-label,
.project-search span,
.account-context-strip,
.account-context-text,
.recent-posts-preview span,
.recent-video-main p,
.sample-edit-field span,
.sample-state,
.account-library-item span,
.account-detected-card p,
.account-profile-grid p,
label span,
.field span {
  color: #0b9aa2 !important;
}

.brand-mark,
.account-avatar-placeholder,
.account-library-avatar span {
  background: linear-gradient(135deg, #37ddd5, #ffe066) !important;
  color: #064b50 !important;
}

.recent-video-cover {
  background: #fff8d8 !important;
  border-color: rgba(47, 212, 204, 0.26) !important;
  color: #0b9aa2 !important;
}

/* Force the script/audit/compare surfaces out of the legacy dark theme. */
.segmented,
.segmented button.is-active,
.script-control-main,
.script-rule-panel,
.script-rule-list article,
.script-input-panel article,
.script-action-bar,
.script-output-card,
.script-output-metrics article,
.hook-card,
.hook-metrics article,
.hook-guidance-box,
.mode-card,
.rewrite-track-switch .rewrite-type,
.script-gate-summary,
.script-quality-panel article,
.script-compare-empty,
.script-compare-grid article,
.audit-marked,
.audit-card,
.compare-card,
.polish-review-card,
.audit-gate-card,
.audit-decision-card,
.audit-blockers article,
.audit-mini-stats b,
.insight-grid article,
.delivery-readiness-card,
.delivery-readiness-main b,
.delivery-readiness-checks span,
.export-grid article,
.delivery-status-grid article,
.asset-card,
.task-card,
.empty-card,
.delivery-card,
.segment-workbench-card,
.storyboard-workbench-card,
.issue-column,
.full-report,
.task-table-panel,
.task-detail-panel,
.voice-state-card,
.video-config-card,
.segment-flow-card,
.segment-quality-card {
  background: #ffffff !important;
  border-color: rgba(47, 212, 204, 0.24) !important;
  color: #064b50 !important;
  box-shadow: 0 10px 24px rgba(47, 212, 204, 0.08) !important;
}

.script-input-panel article.is-pass,
.script-output-metrics article.is-pass,
.script-gate-summary.pass,
.script-quality-panel article.is-pass,
.audit-gate-card.pass,
.audit-decision-card.pass,
.delivery-readiness-main.is-ready,
.delivery-readiness-checks span.done,
.voice-state-card.pass,
.segment-quality-card.pass,
.storyboard-quality-row.is-ok {
  background: #f7fffe !important;
  border-color: rgba(47, 212, 204, 0.34) !important;
  color: #0b9aa2 !important;
}

.script-input-panel article.is-warn,
.script-output-metrics article.is-warn,
.script-gate-summary.warn,
.script-quality-panel article.is-warn,
.audit-gate-card.warn,
.audit-decision-card.warn,
.delivery-readiness-main.is-warn,
.delivery-readiness-checks span.todo,
.voice-state-card.run,
.segment-quality-card.warn,
.storyboard-quality-row.is-warn {
  background: #fffbea !important;
  border-color: rgba(255, 216, 79, 0.42) !important;
  color: #9d7c00 !important;
}

.hook-output {
  border-left-color: #2fd4cc !important;
  background: #ffffff !important;
}

.hook-head span,
.script-gate-pill,
.script-gate-pill.is-ready,
.script-gate-pill.is-warn,
.script-gate-pill.is-pass,
.delivery-readiness-checks span,
.recent-video-status,
.audit-mini-stats small,
.task-card-head span,
.video-card-title small {
  background: #ffffff !important;
  color: #0b9aa2 !important;
  border-color: rgba(47, 212, 204, 0.24) !important;
}

.mode-card strong,
.rewrite-track-switch strong,
.hook-head span,
.script-output-head strong,
.script-quality-panel strong,
.script-compare-head strong,
.audit-gate-card strong,
.audit-decision-main > strong,
.delivery-readiness-main strong,
.recent-video-main strong,
.insight-grid article strong,
.compare-card strong,
.audit-card strong {
  color: #064b50 !important;
}

.mode-card span,
.rewrite-track-switch span,
.script-output-head span,
.script-output-metrics span,
.hook-guidance-box p,
.hook-card p,
.script-gate-summary p,
.script-quality-panel small,
.script-compare-grid p,
.audit-decision-main > p,
.audit-blockers p,
.compare-card p,
.audit-card p,
.insight-grid article p,
.delivery-readiness-main p {
  color: #1598a0 !important;
}

.sidebar .agent,
.sidebar .agent.is-active,
.sidebar .agent:hover,
.sidebar .agent span,
.sidebar .agent small,
body.no-active-project .agent span,
body.no-active-project .agent small,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent span,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent small {
  color: #064b50 !important;
}

.sidebar .agent.is-active,
body.no-active-project .agent.is-active,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent.is-active {
  background: #fff6c9 !important;
  border-color: rgba(47, 212, 204, 0.44) !important;
}

/* Final yellow-white unification: remove legacy dark/teal surfaces. */
:root {
  color-scheme: light;
  --bg: #fffaf0;
  --panel: #ffffff;
  --panel-2: #fff8df;
  --line: rgba(188, 137, 24, 0.18);
  --text: #352814;
  --muted: #846f4b;
  --teal: #d39200;
  --blue: #b97900;
  --amber: #f4b400;
  --rose: #d85b42;
  --violet: #9f7200;
  --shadow: rgba(128, 89, 19, 0.12);
}

body,
.app,
.workspace {
  background: linear-gradient(180deg, #fff4c8 0%, #fffdf7 34%, #ffffff 100%) !important;
  color: var(--text) !important;
}

.sidebar,
.topbar,
.overview,
.overview-board,
.overview-filter,
.overview-management,
.panel,
.login-panel,
.auth-card,
.workflow-guide,
.next-step,
.guide-card,
.step,
.project-list,
.project-item,
.overview-card,
.overview-empty,
.project-detail-panel,
.detail-meta-grid article,
.detail-summary-card,
.detail-next-card,
.detail-blockers,
.learning-card,
.account-library-panel,
.account-detected-card,
.account-context-strip,
.account-branch-tabs button,
.account-library-item,
.script-control-main,
.script-rule-panel,
.script-rule-list article,
.script-input-panel,
.script-input-panel article,
.script-action-bar,
.script-output-card,
.script-output-metrics article,
.hook-card,
.hook-metrics article,
.hook-guidance-box,
.mode-card,
.script-gate-summary,
.script-quality-panel,
.script-quality-panel article,
.script-compare-panel,
.script-compare-grid article,
.audit-card,
.compare-card,
.polish-review-card,
.audit-gate-card,
.audit-decision-card,
.audit-blockers article,
.audit-mini-stats b,
.insight-grid article,
.delivery-readiness-card,
.delivery-readiness-main b,
.delivery-readiness-checks span,
.export-grid article,
.delivery-status-grid article,
.asset-card,
.task-card,
.empty-card,
.delivery-card,
.segment-workbench-card,
.storyboard-workbench-card,
.task-board-head,
.task-table-panel,
.task-detail-panel,
.voice-state-card,
.video-config-card,
.segment-flow-card,
.segment-quality-card,
.full-report,
.issue-column {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(188, 137, 24, 0.18) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 28px rgba(128, 89, 19, 0.08) !important;
}

.overview-card,
.detail-meta-grid article,
.detail-summary-card,
.detail-next-card,
.task-card,
.asset-card,
.empty-card,
.script-output-metrics article,
.hook-metrics article,
.audit-mini-stats b,
.delivery-status-grid article {
  background: #fff8df !important;
}

.production-head,
.task-table th,
.task-table thead,
.task-table .table-head,
.production-table .production-head {
  background: #fff0b3 !important;
  color: #6b4a00 !important;
  border-color: rgba(188, 137, 24, 0.22) !important;
}

.production-row,
.task-table tr,
.task-table td {
  background: #ffffff !important;
  border-color: rgba(188, 137, 24, 0.14) !important;
  color: var(--text) !important;
}

.production-row:not(.production-head):hover,
.production-row.is-active,
.production-row.is-focused,
.task-table tr:hover,
.task-table tr.is-active,
.project-item:hover,
.agent:hover {
  background: #fff7d7 !important;
}

.agent.is-active,
.project-item.is-active,
.step.is-active,
.guide-card.current,
.mode-card.is-active,
.account-branch-tabs button.is-active,
.account-library-item.is-active {
  background: #ffefad !important;
  border-color: rgba(188, 137, 24, 0.34) !important;
}

.primary,
.new-project,
.overview-auto-name,
.script-action-bar button.is-recommended,
.recent-video-actions [data-extract-recent-post],
.sample-save-row .primary-mini {
  background: linear-gradient(135deg, #ffd84d, #f4b400) !important;
  border-color: rgba(188, 137, 24, 0.32) !important;
  color: #352814 !important;
  box-shadow: 0 10px 22px rgba(188, 137, 24, 0.16) !important;
}

.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#creditBalance,
#currentUserLabel,
.script-gate-pill,
.hook-head span,
.recent-video-status,
.task-card-head span,
.video-card-title small,
.delivery-readiness-checks span {
  background: #ffffff !important;
  border-color: rgba(188, 137, 24, 0.24) !important;
  color: #8a6200 !important;
}

input,
select,
textarea,
.project-search input,
.overview-search input,
.sample-edit-field textarea,
.sample-edit-field input,
.sample-form textarea,
.sample-form input {
  background: #ffffff !important;
  border-color: rgba(188, 137, 24, 0.22) !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #a48d61 !important;
}

.eyebrow,
label span,
.field span,
.sidebar-label,
.project-search span,
.panel-head p,
.brand span,
.agent small,
.project-item small,
.guide-card small,
.guide-card em,
.detail-meta-grid span,
.detail-summary-card span,
.detail-next-card span,
.task-board-head span,
.delivery-status-grid span,
.mode-card span,
.rewrite-track-switch span,
.script-output-head span,
.script-output-metrics span,
.script-quality-panel small,
.script-compare-grid p,
.audit-decision-main > p,
.audit-blockers p,
.compare-card p,
.audit-card p,
.insight-grid article p,
.delivery-readiness-main p,
.empty-card p,
.task-card p,
.asset-card p {
  color: var(--muted) !important;
}

.brand strong,
.agent span,
.project-item strong,
.overview-card strong,
.project-detail-head h3,
.detail-meta-grid strong,
.detail-next-card strong,
.mode-card strong,
.rewrite-track-switch strong,
.script-output-head strong,
.script-quality-panel strong,
.script-compare-head strong,
.audit-gate-card strong,
.audit-decision-main > strong,
.delivery-readiness-main strong,
.recent-video-main strong,
.insight-grid article strong,
.compare-card strong,
.audit-card strong,
.task-board-head strong,
.asset-card strong,
.task-card strong,
article strong {
  color: var(--text) !important;
}

.detail-progress i,
.progress-track,
.task-progress {
  background: #f5e8c2 !important;
}

.detail-progress b,
.progress-bar,
.task-progress b {
  background: linear-gradient(90deg, #ffd84d, #f4b400) !important;
}

.script-input-panel article.is-pass,
.script-output-metrics article.is-pass,
.script-gate-summary.pass,
.script-quality-panel article.is-pass,
.audit-gate-card.pass,
.audit-decision-card.pass,
.delivery-readiness-main.is-ready,
.delivery-readiness-checks span.done,
.voice-state-card.pass,
.segment-quality-card.pass,
.storyboard-quality-row.is-ok {
  background: #fffdf4 !important;
  border-color: rgba(188, 137, 24, 0.26) !important;
  color: #7c5800 !important;
}

.script-input-panel article.is-warn,
.script-output-metrics article.is-warn,
.script-gate-summary.warn,
.script-quality-panel article.is-warn,
.audit-gate-card.warn,
.audit-decision-card.warn,
.delivery-readiness-main.is-warn,
.delivery-readiness-checks span.todo,
.voice-state-card.run,
.segment-quality-card.warn,
.storyboard-quality-row.is-warn {
  background: #fff7d7 !important;
  border-color: rgba(188, 137, 24, 0.28) !important;
  color: #8a6200 !important;
}

.brand-mark,
.account-avatar-placeholder,
.account-library-avatar span {
  background: linear-gradient(135deg, #ffd84d, #f4b400) !important;
  color: #352814 !important;
}

/* Absolute final pass: no gray, no black, no cyan. Yellow, white, and warm gold only. */
:root {
  color-scheme: light;
  --bg: #fffaf0;
  --panel: #ffffff;
  --panel-2: #fff5cc;
  --line: rgba(205, 143, 0, 0.22);
  --text: #6f4e00;
  --muted: #a56f00;
  --teal: #d99500;
  --blue: #c08300;
  --amber: #f4b400;
  --rose: #c56a22;
  --violet: #b87900;
  --shadow: rgba(205, 143, 0, 0.1);
}

body,
.app,
.workspace,
body.is-login-page .workspace {
  background: linear-gradient(180deg, #fff2b8 0%, #fffaf0 30%, #ffffff 100%) !important;
  color: #6f4e00 !important;
}

* {
  border-color: rgba(205, 143, 0, 0.18);
}

.sidebar,
.topbar,
.overview,
.overview-board,
.overview-filter,
.overview-management,
.panel,
.login-panel,
.auth-card,
.workflow-guide,
.next-step,
.guide-card,
.step,
.project-list,
.project-item,
.overview-card,
.overview-empty,
.project-detail-panel,
.detail-meta-grid article,
.detail-summary-card,
.detail-next-card,
.detail-blockers,
.learning-card,
.account-library-panel,
.account-detected-card,
.account-context-strip,
.account-context-text,
.account-branch-tabs button,
.account-library-item,
.account-profile-grid article,
.script-control-main,
.script-rule-panel,
.script-rule-list article,
.script-input-panel,
.script-input-panel article,
.script-action-bar,
.script-output-card,
.script-output-metrics article,
.hook-card,
.hook-metrics article,
.hook-guidance-box,
.mode-card,
.script-gate-summary,
.script-quality-panel,
.script-quality-panel article,
.script-compare-panel,
.script-compare-grid article,
.audit-card,
.compare-card,
.polish-review-card,
.audit-gate-card,
.audit-decision-card,
.audit-blockers article,
.audit-mini-stats b,
.insight-grid article,
.delivery-readiness-card,
.delivery-readiness-main b,
.delivery-readiness-checks span,
.export-grid article,
.delivery-status-grid article,
.asset-card,
.task-card,
.empty-card,
.delivery-card,
.segment-workbench-card,
.storyboard-workbench-card,
.task-board-head,
.task-table-panel,
.task-detail-panel,
.voice-state-card,
.video-config-card,
.segment-flow-card,
.segment-quality-card,
.full-report,
.issue-column,
.sample-box,
.sample-item,
.manual-sample-entry,
.recent-video-item {
  background: #ffffff !important;
  border-color: rgba(205, 143, 0, 0.2) !important;
  color: #6f4e00 !important;
  box-shadow: 0 10px 24px rgba(205, 143, 0, 0.08) !important;
}

.overview-card,
.detail-meta-grid article,
.detail-summary-card,
.detail-next-card,
.task-card,
.asset-card,
.empty-card,
.script-output-metrics article,
.hook-metrics article,
.audit-mini-stats b,
.delivery-status-grid article,
.project-row.is-active .project-item,
.agent.is-active,
.project-item.is-active,
.step.is-active,
.guide-card.current,
.mode-card.is-active,
.account-branch-tabs button.is-active,
.account-library-item.is-active {
  background: #fff4c2 !important;
  border-color: rgba(205, 143, 0, 0.32) !important;
}

.production-head,
.task-table th,
.task-table thead,
.task-table .table-head,
.production-table .production-head,
.task-board-head {
  background: #ffe58a !important;
  color: #6f4e00 !important;
  border-color: rgba(205, 143, 0, 0.26) !important;
}

.production-row,
.task-table tr,
.task-table td,
.project-row {
  background: #ffffff !important;
  color: #6f4e00 !important;
  border-color: rgba(205, 143, 0, 0.14) !important;
}

.production-row:not(.production-head):hover,
.production-row.is-active,
.production-row.is-focused,
.task-table tr:hover,
.task-table tr.is-active,
.project-item:hover,
.agent:hover {
  background: #fff8dd !important;
}

.primary,
.new-project,
.overview-auto-name,
.script-action-bar button.is-recommended,
.recent-video-actions [data-extract-recent-post],
.sample-save-row .primary-mini,
.brand-mark,
.account-avatar-placeholder,
.account-library-avatar span {
  background: linear-gradient(135deg, #ffe066, #f4b400) !important;
  border-color: rgba(205, 143, 0, 0.35) !important;
  color: #6f4e00 !important;
  box-shadow: 0 10px 22px rgba(205, 143, 0, 0.14) !important;
}

.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#creditBalance,
#currentUserLabel,
.script-gate-pill,
.hook-head span,
.recent-video-status,
.task-card-head span,
.video-card-title small,
.delivery-readiness-checks span,
.project-stage-tabs button,
.project-stage-summary span,
.project-stage-dot {
  background: #fffdf4 !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
  color: #8a6200 !important;
}

input,
select,
textarea,
.project-search input,
.overview-search input,
.sample-edit-field textarea,
.sample-edit-field input,
.sample-form textarea,
.sample-form input {
  background: #ffffff !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
  color: #6f4e00 !important;
}

input::placeholder,
textarea::placeholder {
  color: #bf8a15 !important;
}

.detail-progress i,
.progress-track,
.task-progress {
  background: #fff0b3 !important;
}

.detail-progress b,
.progress-bar,
.task-progress b {
  background: linear-gradient(90deg, #ffe066, #f4b400) !important;
}

.eyebrow,
label span,
.field span,
.sidebar-label,
.project-search span,
.panel-head p,
.brand span,
.agent small,
.project-item small,
.guide-card small,
.guide-card em,
.detail-meta-grid span,
.detail-summary-card span,
.detail-next-card span,
.task-board-head span,
.delivery-status-grid span,
.mode-card span,
.rewrite-track-switch span,
.script-output-head span,
.script-output-metrics span,
.script-quality-panel small,
.script-compare-grid p,
.audit-decision-main > p,
.audit-blockers p,
.compare-card p,
.audit-card p,
.insight-grid article p,
.delivery-readiness-main p,
.empty-card p,
.task-card p,
.asset-card p,
.auth-card p,
.login-panel p {
  color: #a56f00 !important;
}

.brand strong,
.agent span,
.project-item strong,
.overview-card strong,
.project-detail-head h3,
.detail-meta-grid strong,
.detail-next-card strong,
.mode-card strong,
.rewrite-track-switch strong,
.script-output-head strong,
.script-quality-panel strong,
.script-compare-head strong,
.audit-gate-card strong,
.audit-decision-main > strong,
.delivery-readiness-main strong,
.recent-video-main strong,
.insight-grid article strong,
.compare-card strong,
.audit-card strong,
.task-board-head strong,
.asset-card strong,
.task-card strong,
article strong,
h1,
h2,
h3,
b {
  color: #6f4e00 !important;
}

/* Module-level hard override for segmentation and video factory. */
#segmentPanel,
#segmentPanel *,
#storyboardPanel,
#storyboardPanel *,
#videoPanel,
#videoPanel * {
  color: #6f4e00 !important;
}

#segmentPanel .segment-flow-card,
#segmentPanel .segment-workbench-card,
#segmentPanel .segment-quality-card,
#segmentPanel .manual-segment-box,
#segmentPanel .table-wrap,
#segmentPanel table,
#segmentPanel tbody,
#segmentPanel tr,
#segmentPanel td,
#storyboardPanel .segment-flow-card,
#storyboardPanel .storyboard-workbench-card,
#storyboardPanel .segment-config,
#storyboardPanel .storyboard-document,
#storyboardPanel .storyboard-table,
#storyboardPanel .storyboard-segment-card,
#videoPanel .video-config-card,
#videoPanel .factory-command-card,
#videoPanel .factory-settings,
#videoPanel .task-grid,
#videoPanel .task-board-head,
#videoPanel .task-card,
#videoPanel .task-empty-panel,
#videoPanel .task-empty-actions,
#videoPanel .task-detail-panel,
#videoPanel .task-table-panel,
#videoPanel .delivery-card,
#videoPanel .empty-card,
#videoPanel .reference-box,
#videoPanel textarea,
#videoPanel input {
  background: #ffffff !important;
  border-color: rgba(205, 143, 0, 0.22) !important;
  color: #6f4e00 !important;
  box-shadow: 0 10px 24px rgba(205, 143, 0, 0.08) !important;
}

#segmentPanel thead,
#segmentPanel th,
#segmentPanel .table-wrap table thead,
#segmentPanel .table-wrap table th,
#storyboardPanel .storyboard-table th,
#videoPanel .task-board-head {
  background: #ffe58a !important;
  border-color: rgba(205, 143, 0, 0.28) !important;
  color: #6f4e00 !important;
}

#segmentPanel tr:nth-child(even),
#segmentPanel tr:hover,
#segmentPanel .segment-row-warn,
#segmentPanel .empty,
#storyboardPanel .empty-document,
#storyboardPanel .storyboard-table tr:nth-child(even),
#videoPanel .task-empty-panel,
#videoPanel .empty-card {
  background: #fff6cc !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
  color: #8a6200 !important;
}

#segmentPanel .tag,
#segmentPanel .tag-run,
#segmentPanel .tag-done,
#segmentPanel .tag-warn,
#segmentPanel .mini-btn,
#storyboardPanel .mini-btn,
#videoPanel .mini-btn,
#videoPanel .task-head-actions span,
#videoPanel .task-progress-text,
#videoPanel .copy-row button {
  background: #fffdf4 !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
  color: #8a6200 !important;
}

#segmentPanel .primary,
#storyboardPanel .primary,
#videoPanel .primary,
#videoPanel [data-empty-go-storyboard],
#videoPanel [data-create-video-tasks],
#videoPanel [data-submit-task],
#videoPanel [data-run-task] {
  background: linear-gradient(135deg, #ffe066, #f4b400) !important;
  border-color: rgba(205, 143, 0, 0.35) !important;
  color: #6f4e00 !important;
}

#segmentPanel .ghost,
#storyboardPanel .ghost,
#videoPanel .ghost,
#videoPanel [data-empty-go-segment] {
  background: #ffffff !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
  color: #8a6200 !important;
}

#segmentPanel p,
#segmentPanel small,
#segmentPanel span,
#storyboardPanel p,
#storyboardPanel small,
#storyboardPanel span,
#videoPanel p,
#videoPanel small,
#videoPanel span,
#videoPanel label {
  color: #a56f00 !important;
}

#segmentPanel strong,
#segmentPanel h2,
#segmentPanel h3,
#storyboardPanel strong,
#storyboardPanel h2,
#storyboardPanel h3,
#videoPanel strong,
#videoPanel h2,
#videoPanel h3 {
  color: #6f4e00 !important;
}

/* Script and audit modules: final no-dark yellow/white override. */
#scriptPanel,
#scriptPanel *,
#auditPanel,
#auditPanel * {
  color: #6f4e00 !important;
}

#scriptPanel .script-control-console,
#scriptPanel .script-control-main,
#scriptPanel .script-rule-panel,
#scriptPanel .script-rule-list article,
#scriptPanel .editor-grid,
#scriptPanel .script-input-panel,
#scriptPanel .script-input-panel article,
#scriptPanel .field,
#scriptPanel .hook-card,
#scriptPanel .hook-output,
#scriptPanel .hook-guidance-box,
#scriptPanel .hook-metrics article,
#scriptPanel .script-action-bar,
#scriptPanel .script-output-card,
#scriptPanel .script-output-metrics article,
#scriptPanel .script-quality-panel,
#scriptPanel .script-quality-panel article,
#scriptPanel .script-gate-summary,
#scriptPanel .script-compare-panel,
#scriptPanel .script-compare-grid article,
#scriptPanel .insight-grid article,
#scriptPanel textarea,
#scriptPanel input,
#auditPanel .review-block,
#auditPanel .audit-marked,
#auditPanel .toolbar,
#auditPanel .audit-workbench,
#auditPanel .audit-gate-card,
#auditPanel .audit-decision-card,
#auditPanel .audit-overview article,
#auditPanel .issue-board,
#auditPanel .audit-priority-column,
#auditPanel .audit-pass-card,
#auditPanel .issue-card,
#auditPanel .comparison-panel,
#auditPanel .audit-card,
#auditPanel .score-grid span,
#auditPanel .full-report,
#auditPanel .compare-card,
#auditPanel .polish-review-card,
#auditPanel .polish-review-grid article,
#auditPanel .audit-blockers article,
#auditPanel textarea,
#auditPanel input {
  background: #ffffff !important;
  border-color: rgba(205, 143, 0, 0.22) !important;
  color: #6f4e00 !important;
  box-shadow: 0 10px 24px rgba(205, 143, 0, 0.08) !important;
}

#scriptPanel .script-control-side,
#scriptPanel .script-output-preview,
#scriptPanel .script-gate-summary.warn,
#scriptPanel .script-gate-summary.fail,
#scriptPanel .script-output-metrics article.is-warn,
#scriptPanel .script-output-metrics article.is-danger,
#scriptPanel .script-quality-panel article.is-warn,
#scriptPanel .script-quality-panel article.is-danger,
#auditPanel .audit-priority-column.danger,
#auditPanel .audit-priority-column.warn,
#auditPanel .audit-decision-card.warn,
#auditPanel .audit-gate-card.warn,
#auditPanel .polish-review-card.warn,
#auditPanel .issue-card,
#auditPanel .audit-blockers article,
#auditPanel .score-grid span {
  background: #fff6cc !important;
  border-color: rgba(205, 143, 0, 0.26) !important;
  color: #7a5600 !important;
}

#scriptPanel .script-rule-panel h3,
#scriptPanel .script-output-card h3,
#scriptPanel .script-quality-panel h3,
#scriptPanel .script-compare-panel h3,
#auditPanel .review-block h3,
#auditPanel .audit-card h3,
#auditPanel .comparison-panel h3,
#auditPanel .audit-priority-column header strong,
#auditPanel .audit-overview strong,
#auditPanel .score-grid b {
  color: #6f4e00 !important;
}

#scriptPanel p,
#scriptPanel small,
#scriptPanel span,
#scriptPanel label,
#scriptPanel li,
#auditPanel p,
#auditPanel small,
#auditPanel span,
#auditPanel label,
#auditPanel li {
  color: #a56f00 !important;
}

#scriptPanel button,
#auditPanel button,
#scriptPanel .ghost,
#auditPanel .ghost,
#scriptPanel .mini-btn,
#auditPanel .mini-btn,
#scriptPanel .badge,
#auditPanel .badge,
#scriptPanel .pill,
#auditPanel .pill {
  background: #fffdf4 !important;
  border-color: rgba(205, 143, 0, 0.28) !important;
  color: #8a6200 !important;
}

#scriptPanel .primary,
#auditPanel .primary,
#scriptPanel button.primary,
#auditPanel button.primary,
#scriptPanel .script-action-bar .primary,
#auditPanel .toolbar .primary {
  background: linear-gradient(135deg, #ffe066, #f4b400) !important;
  border-color: rgba(205, 143, 0, 0.38) !important;
  color: #6f4e00 !important;
}

#scriptPanel ::placeholder,
#auditPanel ::placeholder {
  color: rgba(165, 111, 0, 0.62) !important;
}

/* Final clarity pass: selected range and metric counters must stay obvious. */
#scriptPanel .segmented,
#segmentPanel .segmented {
  background: #ffffff !important;
  border: 1px solid rgba(205, 143, 0, 0.24) !important;
  box-shadow: 0 12px 28px rgba(205, 143, 0, 0.08) !important;
}

#scriptPanel .segmented .range,
#segmentPanel .segmented .range {
  min-height: 48px !important;
  background: #fffdf4 !important;
  border: 1px solid transparent !important;
  color: #7a5600 !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

#segmentPanel .segmented .range.default-range,
#segmentPanel .segmented .range[data-range="40-60"] {
  position: relative !important;
  background: #fff0a6 !important;
  border-color: rgba(185, 120, 0, 0.34) !important;
  color: #5b3d00 !important;
}

#scriptPanel .segmented .range.is-active,
#scriptPanel .segmented .range[data-range="40-60"].is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  position: relative !important;
  background: linear-gradient(135deg, #ffd43b 0%, #f4b400 100%) !important;
  border-color: #b87900 !important;
  color: #5b3d00 !important;
  box-shadow: 0 12px 24px rgba(244, 180, 0, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.42) !important;
  transform: translateY(-1px) !important;
}

#scriptPanel .segmented .range.is-active::after,
#scriptPanel .segmented .range[data-range="40-60"].is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: "默认" !important;
  position: absolute !important;
  top: -10px !important;
  right: 10px !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  background: #7a5600 !important;
  color: #fff8d8 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

#segmentPanel .segmented .range.default-range span {
  display: none !important;
}

#scriptPanel .script-output-metrics article,
#scriptPanel .hook-metrics article,
#auditPanel .audit-mini-stats b,
#auditPanel .score-grid span {
  background: #fff7d6 !important;
  border-color: rgba(205, 143, 0, 0.34) !important;
  color: #5f4100 !important;
  box-shadow: 0 10px 22px rgba(205, 143, 0, 0.10) !important;
}

#scriptPanel .script-output-metrics article.is-pass,
#scriptPanel .hook-metrics article.is-pass {
  background: #fff0a6 !important;
  border-color: rgba(205, 143, 0, 0.42) !important;
}

#scriptPanel .script-output-metrics article.is-warn,
#scriptPanel .script-output-metrics article.is-danger,
#auditPanel .audit-mini-stats b {
  background: #ffe9a8 !important;
  border-color: rgba(185, 120, 0, 0.44) !important;
}

#scriptPanel .script-output-metrics strong,
#scriptPanel .hook-metrics strong,
#auditPanel .audit-mini-stats b,
#auditPanel .score-grid b {
  color: #5b3d00 !important;
}

#scriptPanel .script-output-metrics span,
#scriptPanel .hook-metrics span,
#auditPanel .audit-mini-stats small,
#auditPanel .score-grid span {
  color: #9a6800 !important;
}

/* Segment quality counters: remove leftover gray cards. */
#segmentPanel .segment-quality-stats b,
#segmentPanel .segment-quality-card .segment-quality-stats b,
.segment-quality-card .segment-quality-stats b {
  background: linear-gradient(135deg, #fff2a8 0%, #ffd43b 100%) !important;
  border: 1px solid rgba(185, 120, 0, 0.42) !important;
  color: #5b3d00 !important;
  box-shadow: 0 12px 24px rgba(244, 180, 0, 0.20) !important;
}

#segmentPanel .segment-quality-stats b small,
#segmentPanel .segment-quality-card .segment-quality-stats b small,
.segment-quality-card .segment-quality-stats b small {
  color: #7a5600 !important;
}

#segmentPanel .segment-task-progress {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

#segmentPanel .segment-task-progress i {
  display: block !important;
  overflow: hidden !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #fff6cc !important;
  border: 1px solid rgba(185, 120, 0, 0.22) !important;
}

#segmentPanel .segment-task-progress b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ffd43b, #f4b400) !important;
  transition: width 0.2s ease !important;
}

#segmentPanel .segment-task-progress em {
  font-style: normal !important;
  font-weight: 900 !important;
  color: #5b3d00 !important;
}

#segmentPanel .segment-task-progress.compact {
  grid-template-columns: 42px minmax(90px, 1fr) auto !important;
}

#segmentPanel .segment-clock {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: conic-gradient(#f4b400 var(--clock-progress, 0%), #fff6cc 0) !important;
  border: 1px solid rgba(185, 120, 0, 0.32) !important;
  box-shadow: inset 0 0 0 7px #fffdf4, 0 8px 18px rgba(185, 120, 0, 0.14) !important;
}

#segmentPanel .segment-clock strong {
  font-size: 10px !important;
  line-height: 1 !important;
  color: #5b3d00 !important;
  font-weight: 950 !important;
}

#segmentPanel .mini-segment-action {
  margin-top: 12px !important;
  min-height: 38px !important;
}

#segmentPanel .segment-task-table {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

#segmentPanel .segment-task-table header,
#segmentPanel .segment-task-table article {
  display: grid !important;
  grid-template-columns: 72px minmax(160px, 1fr) 130px 150px !important;
  align-items: center !important;
  gap: 10px !important;
}

#segmentPanel .segment-task-table header {
  color: #9a6800 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#segmentPanel .segment-task-table article {
  padding: 10px !important;
  border: 1px solid rgba(185, 120, 0, 0.24) !important;
  border-radius: 8px !important;
  background: #fffdf4 !important;
}

#segmentPanel .segment-task-table p {
  margin: 0 !important;
  color: #7a5600 !important;
  font-size: 12px !important;
}

#segmentPanel .segment-task-actions {
  display: flex !important;
  gap: 6px !important;
}

#segmentPanel .segment-task-actions button {
  min-height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(185, 120, 0, 0.28) !important;
  background: #fff6cc !important;
  color: #6f4e00 !important;
  font-weight: 900 !important;
}

/* Storyboard prompt blocks must follow the yellow/white theme. */
#storyboardPanel .storyboard-code,
#storyboardPanel pre.storyboard-code,
#storyboardPanel .storyboard-code code,
#storyboardPanel .storyboard-document code {
  background: #fffdf4 !important;
  border-color: rgba(185, 120, 0, 0.24) !important;
  color: #5b3d00 !important;
}

#storyboardPanel .storyboard-code {
  box-shadow: 0 10px 24px rgba(205, 143, 0, 0.10) !important;
}

#storyboardPanel .prompt-label,
#storyboardPanel .analysis-title,
#storyboardPanel .semantic-line,
#storyboardPanel .risk-line {
  background: #fff6cc !important;
  border-color: rgba(185, 120, 0, 0.24) !important;
  color: #6f4e00 !important;
}

.storyboard-progress-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(255, 248, 218, 0.72);
  backdrop-filter: blur(6px);
}

.storyboard-progress-card {
  width: min(430px, calc(100vw - 40px));
  border: 1px solid rgba(206, 143, 0, 0.30);
  border-radius: 8px;
  padding: 28px 26px 24px;
  background: #fffdf4;
  box-shadow: 0 24px 70px rgba(185, 120, 0, 0.22);
  text-align: center;
  color: #5b3d00;
}

.storyboard-progress-spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border: 5px solid #fff0ad;
  border-top-color: #f4b400;
  border-radius: 999px;
  animation: storyboardSpin 0.9s linear infinite;
}

.storyboard-progress-spinner::before,
.storyboard-progress-spinner::after {
  content: none;
}

.storyboard-progress-modal.is-done .storyboard-progress-spinner {
  display: grid;
  place-items: center;
  border-color: #ffd84d;
  background: #ffd84d;
  animation: none;
}

.storyboard-progress-modal.is-done .storyboard-progress-spinner::after {
  color: #5b3d00;
  content: "✓";
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
}

.storyboard-progress-modal.is-failed .storyboard-progress-spinner {
  border-color: #ffd4ba;
  border-top-color: #f06b2f;
  animation: none;
}

.storyboard-progress-modal.is-failed .storyboard-progress-spinner::before,
.storyboard-progress-modal.is-failed .storyboard-progress-spinner::after {
  content: none;
}

.storyboard-progress-card span {
  display: block;
  color: #b87900;
  font-size: 13px;
  font-weight: 900;
}

.storyboard-progress-card strong {
  display: block;
  margin-top: 8px;
  color: #5b3d00;
  font-size: 24px;
  line-height: 1.25;
}

.storyboard-progress-card p {
  min-height: 28px;
  margin: 12px 0 18px;
  color: #765400;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.storyboard-progress-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  text-align: left;
}

.storyboard-progress-stats span {
  min-height: 38px;
  border: 1px solid rgba(206, 143, 0, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff8d8;
  color: #6f4e00;
  font-size: 12px;
  line-height: 1.35;
}

.storyboard-progress-bar {
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(206, 143, 0, 0.22);
  border-radius: 999px;
  background: #fff6cc;
}

.storyboard-progress-bar b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe27a, #f4b400);
  transition: width 0.22s ease;
}

.storyboard-progress-card em {
  display: block;
  margin-top: 12px;
  color: #8a6100;
  font-size: 30px;
  font-style: normal;
  font-weight: 950;
}

.storyboard-progress-ok {
  min-width: 132px;
  margin-top: 18px;
  background: linear-gradient(135deg, #ffe27a, #f4b400) !important;
  color: #5b3d00 !important;
  box-shadow: 0 12px 28px rgba(185, 120, 0, 0.20) !important;
}

@keyframes storyboardSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Final light override for the multi-task video factory. */
#videoPanel {
  color-scheme: light !important;
}

#videoPanel,
#videoPanel .task-grid,
#videoPanel .task-board-head,
#videoPanel .task-card,
#videoPanel .task-empty-panel,
#videoPanel .task-table-panel,
#videoPanel .task-detail-panel,
#videoPanel .task-status-grid article,
#videoPanel .reference-box,
#videoPanel .copy-row,
#videoPanel .upload-box {
  background: #fffdf4 !important;
  border-color: rgba(205, 143, 0, 0.22) !important;
  color: #6f4e00 !important;
  box-shadow: 0 12px 28px rgba(185, 120, 0, 0.08) !important;
}

#videoPanel .task-card {
  background: linear-gradient(180deg, #ffffff 0%, #fff8d8 100%) !important;
}

#videoPanel .task-board-head,
#videoPanel .task-table th,
#videoPanel .task-table thead,
#videoPanel .task-table .table-head {
  background: #ffe58a !important;
  color: #6f4e00 !important;
  border-color: rgba(205, 143, 0, 0.28) !important;
}

#videoPanel .task-table,
#videoPanel .task-table tbody,
#videoPanel .task-table tr,
#videoPanel .task-table td {
  background: #ffffff !important;
  color: #6f4e00 !important;
  border-color: rgba(205, 143, 0, 0.18) !important;
}

#videoPanel .task-table tr:hover,
#videoPanel .task-table tr.is-active,
#videoPanel .task-status-grid article {
  background: #fff6cc !important;
}

#videoPanel textarea,
#videoPanel input,
#videoPanel .task-detail-panel textarea {
  background: #ffffff !important;
  color: #5b3d00 !important;
  border-color: rgba(205, 143, 0, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 102, 0.22) !important;
}

#videoPanel textarea::placeholder,
#videoPanel input::placeholder {
  color: #b87900 !important;
}

#videoPanel .progress,
#videoPanel .task-progress {
  background: #fff6cc !important;
  border: 1px solid rgba(205, 143, 0, 0.22) !important;
}

#videoPanel .progress span,
#videoPanel .task-progress b {
  background: linear-gradient(90deg, #ffe27a, #f4b400) !important;
}

#videoPanel .progress.is-failed {
  background: #fff8df !important;
  border-color: rgba(117, 71, 15, 0.18) !important;
}

#videoPanel .progress.is-failed span {
  width: 0% !important;
  animation: none !important;
  background: transparent !important;
}

#videoPanel .task-actions button,
#videoPanel .task-row-actions button,
#videoPanel .task-head-actions span,
#videoPanel .copy-row button,
#videoPanel .mini-btn {
  background: #fff8d8 !important;
  color: #6f4e00 !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
}

#videoPanel .task-actions .success,
#videoPanel [data-run-task],
#videoPanel [data-submit-task],
#videoPanel [data-create-video-tasks],
#videoPanel #runVisibleTasksBtn {
  background: linear-gradient(135deg, #ffe066, #f4b400) !important;
  color: #5b3d00 !important;
  border-color: rgba(205, 143, 0, 0.35) !important;
}

#videoPanel .status-run,
#videoPanel .status-done,
#videoPanel .status-warn,
#videoPanel .status-error {
  background: #fff8d8 !important;
  color: #6f4e00 !important;
  border-color: rgba(205, 143, 0, 0.24) !important;
}

#videoPanel p,
#videoPanel small,
#videoPanel span,
#videoPanel label,
#videoPanel td,
#videoPanel th,
#videoPanel .task-progress-text {
  color: #8a6200 !important;
}

#videoPanel strong,
#videoPanel h2,
#videoPanel h3,
#videoPanel b {
  color: #5b3d00 !important;
}

body:not(.no-active-project):not(.is-login-page) .overview {
  display: grid !important;
  grid-template-columns: minmax(320px, 1.25fr) minmax(280px, 1fr) minmax(260px, 0.9fr) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}

body:not(.no-active-project):not(.is-login-page) .overview-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  align-content: start;
  border: 1px solid rgba(205, 143, 0, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 248, 216, 0.46);
}

body:not(.no-active-project):not(.is-login-page) .overview-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 2px;
}

body:not(.no-active-project):not(.is-login-page) .overview-group-head strong {
  color: #5b3d00 !important;
  font-size: 14px;
  font-weight: 950;
}

body:not(.no-active-project):not(.is-login-page) .overview-group-head small {
  color: #9a7100 !important;
  font-size: 12px;
  font-weight: 800;
}

body:not(.no-active-project):not(.is-login-page) .overview .overview-field {
  min-width: 0;
}

body:not(.no-active-project):not(.is-login-page) .overview .is-title {
  grid-column: 1 / -1;
}

body:not(.no-active-project):not(.is-login-page) .overview .is-platform,
body:not(.no-active-project):not(.is-login-page) .overview .is-niche,
body:not(.no-active-project):not(.is-login-page) .overview .is-pet,
body:not(.no-active-project):not(.is-login-page) .overview .is-topic {
  grid-column: span 1;
}

body:not(.no-active-project):not(.is-login-page) .overview .is-account {
  grid-column: 1 / -1;
}

.auto-detect-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(244, 180, 0, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff8d8;
}

.auto-detect-summary span,
.auto-detect-summary small {
  color: #8a6200 !important;
  font-size: 12px;
  font-weight: 850;
}

.auto-detect-summary strong {
  color: #5b3d00 !important;
  font-size: 16px;
  font-weight: 950;
}

body:not(.no-active-project):not(.is-login-page) .overview-auto-name {
  grid-column: 1 / -1;
  width: 100%;
  align-self: end;
}

body:not(.no-active-project):not(.is-login-page) .overview input,
body:not(.no-active-project):not(.is-login-page) .overview select,
body:not(.no-active-project):not(.is-login-page) .overview-auto-name {
  min-height: 38px !important;
  font-size: 14px !important;
}

.mode-card.is-active {
  border-color: rgba(205, 143, 0, 0.62) !important;
  background: #fff6cc !important;
  box-shadow: inset 0 0 0 2px rgba(244, 180, 0, 0.18), 0 8px 18px rgba(118, 82, 16, 0.08) !important;
}

.mode-card.is-active strong,
.mode-card.is-active b {
  color: #5b3d00 !important;
}

.mode-card.is-active span {
  color: #8a6200 !important;
}

.rewrite-track-switch .rewrite-type.is-active {
  border-color: rgba(205, 143, 0, 0.62) !important;
  background: #fff6cc !important;
  box-shadow: inset 0 0 0 2px rgba(244, 180, 0, 0.16), 0 8px 18px rgba(118, 82, 16, 0.07) !important;
}

.rewrite-track-switch .rewrite-type.is-active strong {
  color: #5b3d00 !important;
}

.rewrite-track-switch .rewrite-type.is-active span {
  color: #8a6200 !important;
}

@media (max-width: 1180px) {
  body:not(.no-active-project):not(.is-login-page) .overview {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body:not(.no-active-project):not(.is-login-page) .overview-group {
    grid-template-columns: 1fr;
  }
}

#directionText.is-required-mode {
  border-color: rgba(205, 143, 0, 0.48) !important;
  background: #fff8d8 !important;
}

.script-next-guide {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(205, 143, 0, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff8d8;
  box-shadow: 0 8px 18px rgba(118, 82, 16, 0.06);
}

.script-next-guide-text {
  display: grid;
  gap: 4px;
}

.script-next-guide-text span {
  color: #9a7100 !important;
  font-size: 12px;
  font-weight: 950;
}

.script-next-guide-text strong {
  color: #5b3d00 !important;
  font-size: 15px;
  line-height: 1.35;
}

.script-next-guide-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.script-next-guide-steps span {
  border: 1px solid rgba(205, 143, 0, 0.2);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #8a6200 !important;
  font-size: 12px;
  font-weight: 900;
}

.script-next-guide-steps span.is-done {
  background: #fff0a8;
  color: #5b3d00 !important;
}

.script-next-guide-steps span.is-active {
  border-color: rgba(205, 143, 0, 0.52);
  background: #f4b400;
  color: #5b3d00 !important;
}

/* Clean creative-workbench selection palette. Overrides the earlier amber-heavy state. */
:root {
  --choice-accent: #2563eb;
  --choice-accent-soft: #eff6ff;
  --choice-accent-line: rgba(37, 99, 235, 0.42);
  --choice-text: #172033;
  --choice-muted: #526174;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: var(--choice-accent-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--choice-accent-soft) 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 0 0 0 2px rgba(37, 99, 235, 0.12),
    0 10px 22px rgba(37, 99, 235, 0.08) !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::after {
  background: var(--choice-accent) !important;
  color: #ffffff !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(159, 106, 34, 0.22) !important;
  background: linear-gradient(180deg, #fffefa 0%, #fff8df 100%) !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.08) !important;
}

/* ULTIMATE LAST RULE: remove ugly current badges and blue/gray choice styling. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(184, 132, 24, 0.34);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: rgba(184, 132, 24, 0.34) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(184, 132, 24, 0.56),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
  transform: none !important;
  padding-right: 12px !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* FINAL LAST RULE: product UI palette. Keep this at the end of the file. */
:root {
  --ui-ink: #2f2a22;
  --ui-muted: #6f6454;
  --ui-line: rgba(132, 99, 50, 0.18);
  --ui-soft-2: #fff6e6;
  --ui-accent: #bd842b;
  --ui-accent-strong: #8a5c16;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
#scriptPanel .segmented .range.is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-soft-2) 100%) !important;
  border-color: rgba(189, 132, 43, 0.42) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 8px 18px rgba(47, 42, 34, 0.05) !important;
  transform: none !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
#scriptPanel .segmented .range.is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: none !important;
  display: none !important;
}

.new-project,
.primary,
#scriptPanel .primary,
#auditPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name,
.script-progress-ok {
  background: linear-gradient(180deg, #f1c36f 0%, #d69b3a 100%) !important;
  border-color: rgba(138, 92, 22, 0.35) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(138, 92, 22, 0.13) !important;
}

.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#currentUserLabel {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-accent-strong) !important;
}

.script-progress-card {
  background: #fffdf8 !important;
  border-color: rgba(189, 132, 43, 0.24) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 24px 70px rgba(47, 42, 34, 0.18) !important;
}

.script-progress-spinner {
  border-color: rgba(189, 132, 43, 0.16) !important;
  border-top-color: var(--ui-accent) !important;
}

.script-progress-bar {
  background: rgba(189, 132, 43, 0.12) !important;
}

.script-progress-bar b {
  background: linear-gradient(90deg, var(--ui-accent), #e8bd69) !important;
}

/* FINAL LAST RULE: product UI palette. Keep this at the end of the file. */
:root {
  --ui-ink: #2d2820;
  --ui-muted: #746957;
  --ui-line: rgba(109, 83, 46, 0.16);
  --ui-soft-2: #fbf7ef;
  --ui-soft-3: #fffaf1;
  --ui-accent: #9f6a22;
  --ui-accent-strong: #6f4612;
}

/* FINAL LAST RULE: compact audit issue board. Keep this after the product palette. */
#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(109, 83, 46, 0.14) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-chip.warn.has-items {
  background: #fffaf1 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4efe5 !important;
  color: var(--ui-accent-strong) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #f7f3eb !important;
  color: #8b806f !important;
}

#auditPanel .audit-priority-chip small {
  grid-column: 1 / -1 !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#auditPanel .audit-priority-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column,
#auditPanel .audit-pass-card {
  min-height: 0 !important;
  padding: 14px !important;
  background: #fffdf8 !important;
  border-color: rgba(109, 83, 46, 0.14) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

/* FINAL LAST RULE: unified yellow workbench palette. Keep this as the last override. */
:root {
  --ui-ink: #302515;
  --ui-muted: #766143;
  --ui-line: rgba(159, 106, 34, 0.2);
  --ui-surface: #fffdf4;
  --ui-surface-strong: #fff8df;
  --ui-soft-2: #fff1b8;
  --ui-accent: #9f6a22;
  --ui-accent-strong: #75470f;
  --ui-action-bg: #ffd86a;
  --ui-action-bg-hover: #f4c44f;
  --ui-action-border: rgba(117, 71, 15, 0.28);
}

body,
body.is-login-page,
.app {
  background:
    linear-gradient(180deg, #fff1b8 0, #fff8df 210px, #fffdf4 100%),
    #fff8df !important;
  color: var(--ui-ink) !important;
}

.panel,
.card,
.audit-card,
.script-output-card,
.script-gate-card,
.script-mode-current,
.rewrite-type-current,
.script-next-guide,
.auto-detect-summary,
.status-strip,
.project-list,
.section,
.workspace,
.audit-marked,
.audit-gate-card,
.audit-decision-card,
.audit-overview article,
.audit-priority-column,
.audit-pass-card,
.polish-review-card,
.polish-review-grid article,
.audit-blockers article,
.audit-mini-stats b,
.delivery-status-grid article,
.task-status-grid article,
.storyboard-card,
.task-card,
.script-progress-card,
.memory-strip article {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

.memory-strip span {
  color: var(--ui-muted) !important;
}

.memory-strip strong {
  color: var(--ui-accent-strong) !important;
}

.audit-gate-card.pass,
.audit-decision-card.pass,
.audit-pass-card,
.polish-review-card.pass,
.polish-review-grid article.is-pass,
#auditPanel .audit-pass-card {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.28) !important;
  color: var(--ui-ink) !important;
}

.audit-gate-card.warn,
.audit-decision-card.warn,
.polish-review-card.warn,
.polish-review-grid article.is-warn,
.audit-priority-chip.warn.has-items,
.audit-priority-chip.danger.has-items,
#auditPanel .audit-priority-chip.warn.has-items,
#auditPanel .audit-priority-chip.danger.has-items {
  background: linear-gradient(180deg, #fffdf4 0%, #fff0bd 100%) !important;
  border-color: rgba(159, 106, 34, 0.3) !important;
  color: var(--ui-ink) !important;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button,
.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#currentUserLabel {
  background: #fffdf4 !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
#scriptPanel .segmented .range.is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.36) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 10px 20px rgba(117, 71, 15, 0.08) !important;
  transform: none !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
#scriptPanel .segmented .range.is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: none !important;
  display: none !important;
}

.new-project,
.primary,
button.primary,
button.new-project,
#scriptPanel .primary,
#auditPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name,
.script-progress-ok,
.audit-gate-card button,
.audit-decision-side button,
#continueToSegmentBtn,
#auditPanel button[data-audit-action="进入分段"],
#auditPanel .audit-gate-card.pass button,
#auditPanel .audit-decision-card.pass button {
  background: var(--ui-action-bg) !important;
  border: 1px solid var(--ui-action-border) !important;
  color: #2f2413 !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.1) !important;
}

.new-project:hover,
.primary:hover,
button.primary:hover,
button.new-project:hover,
#scriptPanel .primary:hover,
#auditPanel .primary:hover,
#scriptPanel .script-action-bar .primary:hover,
#scriptPanel .script-action-bar button.is-recommended:hover,
#auditPanel .toolbar .primary:hover,
.overview-auto-name:hover,
.script-progress-ok:hover,
.audit-gate-card button:hover,
.audit-decision-side button:hover,
#continueToSegmentBtn:hover,
#auditPanel button[data-audit-action="进入分段"]:hover,
#auditPanel .audit-gate-card.pass button:hover,
#auditPanel .audit-decision-card.pass button:hover {
  background: var(--ui-action-bg-hover) !important;
}

#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff1b8 !important;
  color: var(--ui-accent-strong) !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #fff8df !important;
}

#auditPanel .audit-priority-list,
#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column {
  min-height: 0 !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

.script-progress-spinner {
  border-color: rgba(159, 106, 34, 0.14) !important;
  border-top-color: var(--ui-accent) !important;
}

.script-progress-bar {
  background: #fff1b8 !important;
}

.script-progress-bar b {
  background: linear-gradient(90deg, var(--ui-accent), #ffe07a) !important;
}

.polish-review-head b,
.polish-review-card.pass .polish-review-head b,
.audit-gate-card.pass button,
.audit-decision-card.pass button,
.tag-ok,
.tag-done,
.production-status.done,
.recent-video-status.done {
  background: #fff1b8 !important;
  border: 1px solid rgba(159, 106, 34, 0.24) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

/* RECENT VIDEO RECOVERY OVERRIDE: keep account-learning cards plain and stable. */
.recent-video-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 220px !important;
}

.recent-video-actions .mini-btn,
.recent-video-actions .mark-btn,
.recent-video-actions [data-extract-recent-post] {
  width: auto !important;
  min-width: 72px !important;
  min-height: 28px !important;
  background: #fffaf0 !important;
  border: 1px solid rgba(159, 106, 34, 0.22) !important;
  color: #5f4515 !important;
  box-shadow: none !important;
}

.recent-video-actions [data-extract-recent-post] {
  min-width: 92px !important;
  background: #ffd766 !important;
  color: #3f2d0b !important;
}

.recent-video-actions .mark-btn.is-active {
  background: #fff1b8 !important;
  border-color: rgba(159, 106, 34, 0.32) !important;
  color: #3f2d0b !important;
}

.recent-video-status {
  border-radius: 8px !important;
  background: #fffaf0 !important;
  border-color: rgba(159, 106, 34, 0.2) !important;
  color: #5f4515 !important;
}

.tag-run,
.production-status.run,
.recent-video-status.working {
  background: #fff8df !important;
  border: 1px solid rgba(159, 106, 34, 0.2) !important;
  color: var(--ui-accent-strong) !important;
}

/* TRUE FINAL STORYBOARD RULE: no grey/black blocks inside the prompt document. */
#storyboardPanel,
#storyboardPanel .panel,
#storyboardPanel .segment-flow-card,
#storyboardPanel .storyboard-workbench-card,
#storyboardPanel .storyboard-document-head,
#storyboardPanel .storyboard-document,
#storyboardPanel .storyboard-section,
#storyboardPanel .storyboard-segment-card,
#storyboardPanel .storyboard-quality-panel,
#storyboardPanel .storyboard-quality-grid,
#storyboardPanel .storyboard-quality-row,
#storyboardPanel .storyboard-output-summary,
#storyboardPanel .storyboard-summary-grid article,
#storyboardPanel .storyboard-table,
#storyboardPanel .storyboard-table td,
#storyboardPanel .storyboard-generation-meta,
#storyboardPanel .empty-document {
  background: var(--ui-surface, #fffdf4) !important;
  border-color: var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

#storyboardPanel .storyboard-quality-panel.is-pass,
#storyboardPanel .storyboard-quality-row.is-ok,
#storyboardPanel .storyboard-generation-meta span,
#storyboardPanel .storyboard-document .segment-title,
#storyboardPanel .storyboard-document .analysis-title,
#storyboardPanel .storyboard-bullet,
#storyboardPanel .prompt-label,
#storyboardPanel .semantic-line,
#storyboardPanel .risk-line {
  background: var(--ui-surface-strong, #fff8df) !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

#storyboardPanel .storyboard-quality-panel.is-warn,
#storyboardPanel .storyboard-quality-row.is-warn,
#storyboardPanel .storyboard-segment-card.is-fallback,
#storyboardPanel .storyboard-generation-meta.is-fallback span {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.3) !important;
  color: var(--ui-ink, #302515) !important;
}

#storyboardPanel .storyboard-table th {
  background: var(--ui-soft-2, #fff1b8) !important;
  border-color: rgba(159, 106, 34, 0.24) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

#storyboardPanel .storyboard-table tr:nth-child(even),
#storyboardPanel .storyboard-table tr:hover {
  background: var(--ui-surface-strong, #fff8df) !important;
}

#storyboardPanel .storyboard-code,
#storyboardPanel pre.storyboard-code,
#storyboardPanel .storyboard-code code,
#storyboardPanel .storyboard-document pre,
#storyboardPanel .storyboard-document code,
#storyboardPanel .storyboard-document > code,
#storyboardPanel .storyboard-document p code,
#storyboardPanel .storyboard-document td code {
  background: #fffaf0 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: inset 3px 0 0 rgba(159, 106, 34, 0.28), 0 10px 20px rgba(117, 71, 15, 0.055) !important;
}

#storyboardPanel .storyboard-document hr {
  border-color: rgba(159, 106, 34, 0.18) !important;
}

/* TRUE LAST ACCOUNT VIDEO WARM UI 20260511: no teal or dark islands in extraction cards/modals. */
.script-progress-modal {
  background: rgba(117, 71, 15, 0.18) !important;
  backdrop-filter: blur(5px) !important;
}

.recent-video-item,
.recent-video-item.is-commerce,
.recent-video-item.is-extracting {
  border-color: rgba(159, 106, 34, 0.22) !important;
  background: var(--ui-surface, #fffdf4) !important;
  color: var(--ui-ink, #302515) !important;
}

.recent-video-cover,
.recent-video-cover span {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-soft-2, #fff1b8) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

.recent-video-tags span,
.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off,
.recent-video-actions .mark-btn,
.recent-video-actions .mark-btn.is-active {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-surface-strong, #fff8df) !important;
  color: var(--ui-accent-strong, #75470f) !important;
  box-shadow: none !important;
}

.recent-video-actions [data-extract-recent-post],
.recent-video-actions [data-extract-recent-post]:hover {
  border-color: rgba(117, 71, 15, 0.28) !important;
  background: var(--ui-action-bg, #ffd86a) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(117, 71, 15, 0.12) !important;
}

.recent-video-progress {
  background: #fff1b8 !important;
}

.recent-video-progress span,
.recent-video-progress.is-done span,
.recent-video-progress.is-error span {
  background: linear-gradient(90deg, var(--ui-accent, #9f6a22), #ffe07a) !important;
  color: #3f3016 !important;
}

.recent-video-progress b {
  color: #3f3016 !important;
  text-shadow: 0 1px 4px rgba(255, 253, 244, 0.9) !important;
}

/* TRUE LAST PROFESSIONAL UI QA 20260511: final readable selection states and centered identity marks. */
:root {
  --ui-pro-bg: #fff7df;
  --ui-pro-surface: #fffefa;
  --ui-pro-surface-2: #fff8df;
  --ui-pro-surface-3: #fff0b8;
  --ui-pro-line: rgba(138, 88, 15, 0.28);
  --ui-pro-line-strong: rgba(111, 71, 12, 0.38);
  --ui-pro-ink: #2b1e0f;
  --ui-pro-muted: #665133;
  --ui-pro-accent: #9a6210;
  --ui-pro-action: #f4bd33;
}

body .sidebar .agent,
body.no-active-project .sidebar .agent,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent,
body .agent-list .agent {
  min-height: 56px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ui-pro-muted) !important;
  box-shadow: none !important;
}

body .sidebar .agent:hover,
body .agent-list .agent:hover {
  border-color: var(--ui-pro-line) !important;
  background: var(--ui-pro-surface-2) !important;
  color: var(--ui-pro-ink) !important;
}

body .sidebar .agent.is-active,
body.no-active-project .sidebar .agent.is-active,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent.is-active,
body .agent-list .agent.is-active {
  border-color: var(--ui-pro-line-strong) !important;
  background: var(--ui-pro-surface-3) !important;
  color: var(--ui-pro-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-pro-accent), 0 10px 20px rgba(117, 71, 15, 0.1) !important;
}

body .sidebar .agent span,
body .agent-list .agent span,
body .sidebar .agent small,
body .agent-list .agent small {
  color: inherit !important;
  letter-spacing: 0 !important;
}

body .sidebar .agent.is-active span,
body .agent-list .agent.is-active span {
  color: var(--ui-pro-ink) !important;
  font-weight: 900 !important;
}

body .sidebar .agent.is-active small,
body .agent-list .agent.is-active small {
  color: var(--ui-pro-muted) !important;
  font-weight: 800 !important;
}

.brand-mark,
.agent-avatar,
.user-avatar,
.admin-avatar,
.nav-icon,
.step-icon,
.status-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}

.agent-avatar,
.user-avatar,
.admin-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-pro-line) !important;
  border-radius: 50% !important;
  background: var(--ui-pro-surface-3) !important;
  color: #6f470c !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
}

.brand-mark {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  background: var(--ui-pro-surface-3) !important;
  color: #6f470c !important;
}

img.brand-mark {
  object-fit: contain !important;
  padding: 5px !important;
}

.primary,
button.primary,
a.primary,
button.new-project,
#continueToSegmentBtn,
#promptBtn,
#generateScriptBtn,
#auditScriptBtn,
#polishScriptBtn,
#saveProjectBtn,
#confirmProgressBtn {
  min-height: 42px !important;
  border: 1px solid var(--ui-pro-line-strong) !important;
  background: var(--ui-pro-action) !important;
  color: #261a0a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.12) !important;
}

.ghost,
button.ghost,
a.ghost,
.secondary,
button.secondary,
.mini,
button.mini,
.compact,
button.compact,
.icon-btn,
.recent-video-actions button:not([data-extract-recent-post]) {
  min-height: 38px !important;
  border: 1px solid var(--ui-pro-line) !important;
  background: var(--ui-pro-surface) !important;
  color: #6f470c !important;
  font-weight: 850 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.pill,
.tag,
.badge,
.status-pill,
.recent-video-tags span,
.mode-card .tag {
  border-color: var(--ui-pro-line) !important;
  background: var(--ui-pro-surface-2) !important;
  color: #6f470c !important;
  font-weight: 850 !important;
}

input,
select,
textarea,
.field input,
.field select,
.field textarea {
  border-color: var(--ui-pro-line) !important;
  background: var(--ui-pro-surface) !important;
  color: var(--ui-pro-ink) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(102, 81, 51, 0.74) !important;
}

/* ACCOUNT LIBRARY TITLE ALIGNMENT 20260511: keep the account-library labels off the left edge. */
#accountPanel .account-branch-tabs button[data-account-branch="accounts"] {
  padding-left: 18px !important;
}

#accountPanel .account-library-panel {
  padding: 18px !important;
}

#accountPanel .account-library-panel > .subsection-head.compact {
  padding: 0 2px 0 8px !important;
  margin-bottom: 14px !important;
}

#accountPanel .account-library-panel > .subsection-head.compact h3,
#accountPanel .account-library-panel > .subsection-head.compact .eyebrow {
  margin-left: 0 !important;
}

#accountPanel .account-library-list {
  padding-left: 0 !important;
}

/* PROFESSIONAL UI QA FINAL 20260511: contrast, alignment, and control polish. */
:root {
  --ui-ink: #2b1e0f;
  --ui-muted: #665133;
  --ui-muted-2: #876329;
  --ui-line: rgba(138, 88, 15, 0.28);
  --ui-line-strong: rgba(138, 88, 15, 0.42);
  --ui-surface: #fffefa;
  --ui-surface-strong: #fff8df;
  --ui-soft-2: #fff0b8;
  --ui-action-bg: #f4bd33;
  --ui-action-border: rgba(111, 71, 12, 0.38);
  --ui-accent: #9a6210;
  --ui-accent-strong: #6f470c;
}

body,
.app,
.panel,
.project-card,
.memory-strip article,
#projectMemoryStrip article,
.recent-video-item,
.delivery-copy-card,
.delivery-publish-kit,
.publish-option-card,
.storyboard-document,
.storyboard-segment-card {
  color: var(--ui-ink) !important;
}

.muted,
.hint,
.eyebrow,
.panel p,
.project-card p,
.agent small,
.sync-status,
.pill,
.recent-video-main p,
.recent-video-tags span,
.status-strip span {
  color: var(--ui-muted) !important;
}

.brand-mark,
.agent-avatar,
.account-avatar-placeholder,
.account-library-avatar span {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
}

img.brand-mark {
  object-fit: contain !important;
  padding: 4px !important;
}

.agent-avatar {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-soft-2) !important;
  color: var(--ui-accent-strong) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.agent,
.sidebar .agent {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

.agent span,
.sidebar .agent span {
  color: var(--ui-ink) !important;
  line-height: 1.25 !important;
}

.agent small,
.sidebar .agent small {
  color: var(--ui-muted) !important;
  line-height: 1.25 !important;
}

.agent.is-active,
.sidebar .agent.is-active {
  border-color: var(--ui-line-strong) !important;
  background: #fff0b8 !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 8px 18px rgba(117, 71, 15, 0.09) !important;
}

.primary,
button.primary,
.new-project,
button.new-project,
#scriptPanel .primary,
#auditPanel .primary,
#segmentPanel .primary,
#storyboardPanel .primary,
#videoPanel .primary {
  min-height: 40px !important;
  border: 1px solid var(--ui-action-border) !important;
  background: var(--ui-action-bg) !important;
  color: #261a0a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.12) !important;
}

.ghost,
button.ghost,
.mini-btn,
.recent-video-actions .mini-btn,
.recent-video-actions .mark-btn {
  min-height: 38px !important;
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-accent-strong) !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

.pill,
.badge,
.script-gate-pill,
.sync-status,
.production-status,
.recent-video-status,
.tag-ok,
.tag-done,
.tag-run {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-strong) !important;
  color: var(--ui-accent-strong) !important;
  font-weight: 850 !important;
}

input,
select,
textarea {
  border-color: var(--ui-line) !important;
  background: #fffefa !important;
  color: var(--ui-ink) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(102, 81, 51, 0.74) !important;
}
*** End of File

/* TRUE FINAL ACCOUNT VIDEO WARM UI 20260511: no teal or dark islands in extraction cards/modals. */
.script-progress-modal {
  background: rgba(117, 71, 15, 0.18) !important;
  backdrop-filter: blur(5px) !important;
}

.recent-video-item,
.recent-video-item.is-commerce,
.recent-video-item.is-extracting {
  border-color: rgba(159, 106, 34, 0.22) !important;
  background: var(--ui-surface, #fffdf4) !important;
  color: var(--ui-ink, #302515) !important;
}

.recent-video-cover,
.recent-video-cover span {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-soft-2, #fff1b8) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

.recent-video-tags span,
.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off,
.recent-video-actions .mark-btn,
.recent-video-actions .mark-btn.is-active {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-surface-strong, #fff8df) !important;
  color: var(--ui-accent-strong, #75470f) !important;
  box-shadow: none !important;
}

.recent-video-actions [data-extract-recent-post],
.recent-video-actions [data-extract-recent-post]:hover {
  border-color: rgba(117, 71, 15, 0.28) !important;
  background: var(--ui-action-bg, #ffd86a) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(117, 71, 15, 0.12) !important;
}

.recent-video-progress {
  background: #fff1b8 !important;
}

.recent-video-progress span,
.recent-video-progress.is-done span,
.recent-video-progress.is-error span {
  background: linear-gradient(90deg, var(--ui-accent, #9f6a22), #ffe07a) !important;
  color: #3f3016 !important;
}

.recent-video-progress b {
  color: #3f3016 !important;
  text-shadow: 0 1px 4px rgba(255, 253, 244, 0.9) !important;
}

/* TRUE FINAL ACCOUNT VIDEO WARM UI 20260511: no teal or dark islands in extraction cards/modals. */
.script-progress-modal {
  background: rgba(117, 71, 15, 0.18) !important;
  backdrop-filter: blur(5px) !important;
}

.recent-video-item,
.recent-video-item.is-commerce,
.recent-video-item.is-extracting {
  border-color: rgba(159, 106, 34, 0.22) !important;
  background: var(--ui-surface, #fffdf4) !important;
  color: var(--ui-ink, #302515) !important;
}

.recent-video-cover,
.recent-video-cover span {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-soft-2, #fff1b8) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

.recent-video-tags span,
.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off,
.recent-video-actions .mark-btn,
.recent-video-actions .mark-btn.is-active {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-surface-strong, #fff8df) !important;
  color: var(--ui-accent-strong, #75470f) !important;
  box-shadow: none !important;
}

.recent-video-actions [data-extract-recent-post],
.recent-video-actions [data-extract-recent-post]:hover {
  border-color: rgba(117, 71, 15, 0.28) !important;
  background: var(--ui-action-bg, #ffd86a) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(117, 71, 15, 0.12) !important;
}

.recent-video-progress {
  background: #fff1b8 !important;
}

.recent-video-progress span,
.recent-video-progress.is-done span,
.recent-video-progress.is-error span {
  background: linear-gradient(90deg, var(--ui-accent, #9f6a22), #ffe07a) !important;
  color: #3f3016 !important;
}

.recent-video-progress b {
  color: #3f3016 !important;
  text-shadow: 0 1px 4px rgba(255, 253, 244, 0.9) !important;
}

/* V1.5 USER LEARNING FEEDBACK 20260510 */
#scriptPanel .script-feedback-card {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
  border: 1px solid rgba(230, 194, 120, 0.72) !important;
  border-radius: 8px;
  padding: 12px;
  background: #fff7d8 !important;
  color: #5c3b00 !important;
}

#scriptPanel .script-feedback-card[hidden] {
  display: none;
}

#scriptPanel .script-feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#scriptPanel .script-feedback-head span,
#scriptPanel .script-feedback-head strong,
#scriptPanel .script-feedback-head small {
  display: block;
}

#scriptPanel .script-feedback-head span {
  color: #9a6b00 !important;
  font-size: 12px;
  font-weight: 900;
}

#scriptPanel .script-feedback-head strong {
  margin-top: 4px;
  color: #4f3400 !important;
  font-size: 18px;
}

#scriptPanel .script-feedback-head small {
  max-width: 420px;
  color: #8a650a !important;
  line-height: 1.55;
}

#scriptPanel .script-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#scriptPanel .script-feedback-actions button {
  min-height: 36px;
  border-color: rgba(205, 156, 52, 0.62) !important;
  background: #fffdf5 !important;
  color: #6b4700 !important;
}

#scriptPanel .script-feedback-actions button:hover:not(:disabled) {
  background: #ffe6a6 !important;
}

#scriptPanel .script-feedback-actions button.danger-soft {
  border-color: rgba(202, 102, 68, 0.5) !important;
  color: #8d351e !important;
}

#scriptPanel .script-feedback-note {
  display: grid;
  gap: 6px;
}

#scriptPanel .script-feedback-note span {
  color: #8a650a !important;
  font-size: 12px;
  font-weight: 900;
}

#scriptPanel .script-feedback-note textarea {
  min-height: 72px;
  border: 1px solid rgba(213, 174, 91, 0.65) !important;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffdf7 !important;
  color: #4b3200 !important;
  resize: vertical;
}

/* TRUE FINAL ACCOUNT LEARNING VIDEO CARD UI 20260510:
   Restore the previous readable reference layout for script extraction cards. */
.recent-video-list {
  display: grid !important;
  gap: 14px !important;
  max-height: 640px !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

.recent-video-item {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) 330px !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(41, 205, 202, 0.38) !important;
  border-radius: 14px !important;
  background: #f4fffb !important;
  box-shadow: none !important;
}

.recent-video-item.is-commerce,
.recent-video-item.is-extracting {
  background: #effffb !important;
  border-color: rgba(41, 205, 202, 0.52) !important;
}

.recent-video-cover {
  width: 118px !important;
  height: 92px !important;
  border-radius: 10px !important;
  background: #fff6cf !important;
  border: 1px solid rgba(41, 205, 202, 0.36) !important;
  color: #009aa5 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.recent-video-cover span {
  color: #009aa5 !important;
}

.recent-video-main {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.recent-video-main strong {
  color: #604000 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.recent-video-main p {
  color: #725b39 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.recent-video-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.recent-video-tags span,
.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #fbfffb !important;
  border: 1px solid rgba(32, 190, 200, 0.35) !important;
  color: #009aa5 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.recent-video-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  min-width: 300px !important;
  align-self: start !important;
  justify-content: stretch !important;
}

.recent-video-actions .mini-btn,
.recent-video-actions .mark-btn,
.recent-video-actions [data-extract-recent-post] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.recent-video-actions .mark-btn {
  background: #fffdf7 !important;
  border: 1px solid rgba(41, 205, 202, 0.42) !important;
  color: #009aa5 !important;
}

.recent-video-actions .mark-btn.is-active {
  background: #fff4bd !important;
  border-color: rgba(41, 205, 202, 0.55) !important;
  color: #007b83 !important;
}

.recent-video-actions .mini-btn {
  background: #fffaf0 !important;
  border: 1px solid rgba(214, 176, 103, 0.4) !important;
  color: #68440b !important;
}

.recent-video-actions [data-extract-recent-post] {
  grid-column: 1 / -1 !important;
  background: linear-gradient(180deg, #ffdc5e 0%, #f8b900 100%) !important;
  border-color: #dba100 !important;
  color: #6b4600 !important;
}

.recent-video-progress-cell {
  grid-column: 2 / 4 !important;
  margin-top: 2px !important;
}

.recent-video-progress-row {
  display: grid !important;
  grid-template-columns: 280px minmax(240px, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.recent-video-status,
.recent-video-status.working,
.recent-video-status.done,
.recent-video-status.error {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: #fff7d8 !important;
  border: 1px solid rgba(214, 176, 103, 0.45) !important;
  color: #704900 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.recent-video-status.error {
  background: #fff0e9 !important;
  border-color: rgba(213, 94, 64, 0.32) !important;
  color: #8a311c !important;
}

.recent-video-progress {
  height: 24px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e9f5f2 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.recent-video-progress span {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #28d1c4 0%, #70d6ff 100%) !important;
}

.recent-video-progress.is-done span {
  background: linear-gradient(90deg, #48d57d 0%, #79eaa5 100%) !important;
}

.recent-video-progress.is-error span {
  background: linear-gradient(90deg, #ff9a72 0%, #ffcf8f 100%) !important;
}

.recent-video-progress b {
  color: #12343a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 980px) {
  .recent-video-item {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .recent-video-cover {
    width: 88px !important;
    height: 76px !important;
  }

  .recent-video-actions,
  .recent-video-progress-cell {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .recent-video-progress-row {
    grid-template-columns: 1fr !important;
  }
}

/* TRUE FINAL ACCOUNT LEARNING COMPACT UI 20260510:
   The reference is a compact operator list, not large dashboard cards. */
.recent-video-list {
  gap: 10px !important;
  max-height: 560px !important;
  padding-right: 2px !important;
}

.recent-video-item {
  grid-template-columns: 72px minmax(0, 1fr) 236px !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: #f4fffb !important;
}

.recent-video-cover {
  width: 64px !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}

.recent-video-cover img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.recent-video-main {
  gap: 6px !important;
}

.recent-video-main strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #604000 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.recent-video-main p {
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.recent-video-tags {
  gap: 6px !important;
}

.recent-video-tags span,
.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off,
.recent-video-tags .remote-deleted {
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.recent-video-tags .remote-deleted {
  border-color: rgba(213, 94, 64, 0.36) !important;
  background: #fff0e9 !important;
  color: #8a311c !important;
}

.recent-video-item.is-deleted {
  border-color: rgba(213, 94, 64, 0.22) !important;
  background: #fffafa !important;
}

.recent-video-actions {
  min-width: 0 !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.recent-video-actions .mini-btn,
.recent-video-actions .mark-btn,
.recent-video-actions [data-extract-recent-post] {
  min-height: 38px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.recent-video-actions [data-extract-recent-post] {
  grid-column: auto !important;
}

.recent-video-progress-cell {
  grid-column: 2 / 4 !important;
  margin-top: 0 !important;
}

.recent-video-progress-row {
  grid-template-columns: 180px minmax(180px, 1fr) !important;
  gap: 10px !important;
}

.recent-video-status,
.recent-video-status.working,
.recent-video-status.done,
.recent-video-status.error {
  min-height: 32px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  justify-content: center !important;
  text-align: center !important;
}

.recent-cover-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(47, 37, 18, 0.36);
}

.recent-cover-modal[hidden] {
  display: none !important;
}

.recent-cover-card {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: grid;
  gap: 12px;
  border: 1px solid rgba(184, 132, 24, 0.22);
  border-radius: 10px;
  padding: 14px;
  background: #fffdf8;
  box-shadow: 0 22px 54px rgba(64, 45, 10, 0.2);
}

.recent-cover-card strong {
  color: #3f3016;
  font-size: 15px;
  line-height: 1.45;
}

.recent-cover-card img {
  width: min(320px, 72vw);
  max-height: min(72vh, 640px);
  justify-self: center;
  border-radius: 8px;
  object-fit: contain;
  background: #fff7df;
}

.recent-video-progress {
  height: 18px !important;
}

.recent-video-progress b {
  font-size: 13px !important;
}

@media (max-width: 980px) {
  .recent-video-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  .recent-video-cover {
    width: 56px !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }

  .recent-video-actions,
  .recent-video-progress-cell {
    grid-column: 1 / -1 !important;
  }
}

.script-extract-card {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2));
  border-radius: 8px;
  background: var(--ui-surface-strong, #fff8df);
  color: var(--ui-ink, #302515);
}

.script-extract-card > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.script-extract-card strong {
  color: var(--ui-accent-strong, #75470f);
}

.script-extract-card span {
  color: var(--ui-muted, #8a6b32);
  font-size: 13px;
  font-weight: 800;
}

.script-extract-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(160px, 0.8fr) 130px 120px;
  gap: 8px;
}

.script-extract-form input,
.script-extract-form select {
  min-height: 38px;
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2));
  border-radius: 8px;
  background: #fffdf4;
  color: var(--ui-ink, #302515);
  font-weight: 800;
}

.script-extract-status {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px);
  gap: 10px;
  align-items: center;
}

.script-extract-status[hidden] {
  display: none;
}

.script-extract-status div {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff1b8;
}

.script-extract-status i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-action-bg, #ffd86a);
  transition: width 0.2s ease;
}

.script-extract-status b {
  display: block;
  margin-top: 4px;
  color: var(--ui-accent-strong, #75470f);
  font-size: 12px;
  text-align: right;
}

.script-extract-status.error i {
  background: #c98a2d;
}

.script-extract-status.done i {
  background: var(--ui-accent, #9f6a22);
}

@media (max-width: 980px) {
  .script-extract-form,
  .script-extract-status,
  .script-extract-card > div:first-child {
    grid-template-columns: 1fr;
    display: grid;
  }
}

/* TRUE FINAL EXPORT COPY RULE 20260509: publish copy has selectable variants. */
#exportPanel .publish-copy-variants {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#exportPanel .publish-copy-option {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
  min-height: 220px !important;
  padding: 16px !important;
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  border-radius: 8px !important;
  background: var(--ui-surface, #fffdf4) !important;
  color: var(--ui-ink, #302515) !important;
}

#exportPanel .publish-copy-option span {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--ui-muted, #766143) !important;
  font-size: 13px !important;
}

#exportPanel .publish-copy-option strong {
  color: var(--ui-accent-strong, #75470f) !important;
  font-size: 18px !important;
}

#exportPanel .publish-copy-option p {
  margin: 0 !important;
  white-space: pre-wrap !important;
  line-height: 1.7 !important;
  color: var(--ui-ink, #302515) !important;
}

@media (max-width: 980px) {
  #exportPanel .publish-copy-variants {
    grid-template-columns: 1fr !important;
  }
}

/* WORKBENCH UI CONSOLIDATION 20260507: one warm production layout, no grey/black legacy blocks. */
:root {
  color-scheme: light !important;
  --ui-bg: #fff6d8;
  --ui-bg-2: #fffaf0;
  --ui-surface: #fffdf4;
  --ui-surface-strong: #fff4c9;
  --ui-soft-2: #ffedac;
  --ui-line: rgba(151, 102, 26, 0.24);
  --ui-line-strong: rgba(151, 102, 26, 0.38);
  --ui-ink: #2f2413;
  --ui-muted: #856322;
  --ui-accent: #d99a16;
  --ui-accent-strong: #70490d;
  --ui-action-bg: #ffd96d;
  --ui-action-border: rgba(112, 73, 13, 0.32);
  --bg: var(--ui-bg) !important;
  --panel: var(--ui-surface) !important;
  --panel-2: var(--ui-surface-strong) !important;
  --line: var(--ui-line) !important;
  --text: var(--ui-ink) !important;
  --muted: var(--ui-muted) !important;
  --teal: var(--ui-accent) !important;
  --amber: var(--ui-accent) !important;
  --blue: var(--ui-accent) !important;
  --violet: var(--ui-accent) !important;
  --shadow: rgba(112, 73, 13, 0.08) !important;
}

html,
body {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}

body {
  background:
    linear-gradient(180deg, #fff1b8 0%, #fff8df 210px, #fffdf4 100%) !important;
}

.app {
  grid-template-columns: 252px minmax(0, 1fr) !important;
  min-height: 100vh !important;
}

.sidebar {
  padding: 16px 14px !important;
  background: #fffaf0 !important;
  border-right: 1px solid var(--ui-line) !important;
  box-shadow: 8px 0 24px rgba(112, 73, 13, 0.06) !important;
}

.brand {
  margin-bottom: 12px !important;
}

.brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.brand strong {
  color: var(--ui-ink) !important;
  font-size: 15px !important;
}

.brand span,
.sidebar-label,
.project-search span,
.section-head small,
.agent small,
.project-item small,
.eyebrow,
.panel p,
.field span,
.overview-group-head small,
.next-step span {
  color: var(--ui-muted) !important;
}

.quick-actions {
  margin-bottom: 10px !important;
}

.new-project,
button.new-project,
.primary,
button.primary {
  min-height: 38px !important;
  border: 1px solid var(--ui-action-border) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #ffe28b 0%, #ffd363 100%) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 8px 16px rgba(112, 73, 13, 0.12) !important;
}

.ghost,
button.ghost,
.mini-btn,
.compact {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fffdf4 !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

.agent-list {
  gap: 6px !important;
  border-bottom-color: var(--ui-line) !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}

.agent,
.project-item {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ui-ink) !important;
}

.agent {
  padding: 9px 10px !important;
}

.agent:hover,
.project-row:hover .project-item {
  border-color: var(--ui-line) !important;
  background: #fff4c9 !important;
}

.agent.is-active,
.project-row.is-active .project-item {
  border-color: var(--ui-line-strong) !important;
  background: linear-gradient(180deg, #fff4c9 0%, #ffeaa1 100%) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 8px 18px rgba(112, 73, 13, 0.08) !important;
}

.agent span {
  color: var(--ui-ink) !important;
  font-size: 14px !important;
}

.project-list {
  background: transparent !important;
  border: 0 !important;
}

.project-search input,
input,
select,
textarea {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fffdf4 !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.project-search input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ui-line-strong) !important;
  outline: 2px solid rgba(217, 154, 22, 0.15) !important;
}

.workspace {
  min-width: 0 !important;
  padding: 16px 18px 32px !important;
  background: transparent !important;
}

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: -16px -18px 14px !important;
  padding: 14px 18px !important;
  background: rgba(255, 250, 240, 0.94) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  backdrop-filter: blur(14px) !important;
}

.topbar h1 {
  margin: 2px 0 0 !important;
  color: var(--ui-ink) !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}

.status-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.status-strip > span,
#projectStatus,
.sync-status,
#currentUserLabel,
#creditBalance,
.script-gate-pill,
.pill,
.tag-ok,
.tag-run,
.tag-done,
.production-status,
.recent-video-status {
  min-height: 30px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  background: #fffdf4 !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.overview {
  display: grid !important;
  grid-template-columns: minmax(320px, 1.1fr) minmax(260px, 0.8fr) minmax(260px, 0.8fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.overview-group {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 10px 22px rgba(112, 73, 13, 0.055) !important;
}

.overview-group-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(151, 102, 26, 0.14) !important;
  padding-bottom: 8px !important;
}

.overview-group-head strong {
  color: var(--ui-ink) !important;
}

.overview-field {
  display: grid !important;
  gap: 5px !important;
}

.auto-detect-summary,
.rewrite-type-current,
.script-mode-current,
.next-step,
.workflow-guide {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface-strong) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

.flow {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.step {
  min-height: 44px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fffdf4 !important;
  color: var(--ui-muted) !important;
  box-shadow: none !important;
}

.step span {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #fff4c9 !important;
  color: var(--ui-accent-strong) !important;
  font-size: 12px !important;
}

.step.is-current,
.step.is-done {
  border-color: var(--ui-line-strong) !important;
  background: linear-gradient(180deg, #fff4c9 0%, #ffeaa1 100%) !important;
  color: var(--ui-ink) !important;
}

.panel,
.login-panel,
.account-library-panel,
.segment-workbench-card,
.storyboard-workbench-card,
.task-table-panel,
.task-detail-panel,
.delivery-card,
.delivery-readiness-card,
.delivery-status-grid article,
.export-grid article,
.script-output-card,
.hook-card,
.script-input-panel,
.script-quality-panel,
.script-compare-panel,
.comparison-panel {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 10px 24px rgba(112, 73, 13, 0.055) !important;
}

.panel {
  padding: 16px !important;
}

.panel-head,
.compact-head,
.delivery-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(151, 102, 26, 0.16) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

.panel-head h2,
.delivery-head h3,
.agent-hero h2,
.script-output-head strong,
.hook-head strong {
  color: var(--ui-ink) !important;
}

.agent-hero {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-strong) !important;
  box-shadow: none !important;
}

.agent-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: #ffe28b !important;
  color: var(--ui-ink) !important;
}

.script-control-console {
  grid-template-columns: minmax(0, 1fr) 310px !important;
  gap: 12px !important;
}

.script-control-main,
.script-rule-panel {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

.rewrite-track-switch,
.script-mode-cards {
  gap: 10px !important;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button {
  position: relative !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fffdf4 !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active {
  border-color: var(--ui-line-strong) !important;
  background: linear-gradient(180deg, #fff4c9 0%, #ffeaa1 100%) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 8px 18px rgba(112, 73, 13, 0.08) !important;
}

.rewrite-track-switch .rewrite-type.is-active::after,
.script-mode-cards .mode-card.is-active::after {
  content: none !important;
  display: none !important;
}

.rewrite-track-switch .rewrite-type strong,
.script-mode-cards .mode-card strong,
.rewrite-track-switch .rewrite-type b,
.script-mode-cards .mode-card b {
  color: var(--ui-ink) !important;
}

.rewrite-track-switch .rewrite-type span,
.script-mode-cards .mode-card span {
  color: var(--ui-muted) !important;
}

.editor-grid,
.delivery-layout,
.export-grid,
.delivery-status-grid,
.publish-kit-grid {
  gap: 12px !important;
}

#auditPanel .audit-priority-board {
  display: grid !important;
  gap: 12px !important;
}

#auditPanel .audit-priority-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#auditPanel .audit-priority-chip {
  min-height: 68px !important;
  background: var(--ui-surface) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 32px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #ffedac !important;
  color: var(--ui-accent-strong) !important;
}

#auditPanel .audit-priority-list,
#auditPanel .audit-issue-list {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 12px !important;
}

#auditPanel .audit-priority-column {
  min-height: 0 !important;
  background: var(--ui-surface) !important;
}

#auditPanel .audit-priority-column header b {
  display: inline-flex !important;
  min-width: 28px !important;
  height: 26px !important;
  border-radius: 999px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffedac !important;
  color: var(--ui-accent-strong) !important;
  font-size: 12px !important;
}

#exportPanel .delivery-publish-kit {
  padding: 16px !important;
}

#exportPanel .publish-kit-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

#exportPanel .publish-kit-grid article {
  min-height: 94px !important;
  background: #fffdf4 !important;
}

.empty-card,
.empty-document,
.task-empty-panel,
.project-empty {
  border: 1px dashed rgba(151, 102, 26, 0.32) !important;
  border-radius: 8px !important;
  background: #fffaf0 !important;
  color: var(--ui-muted) !important;
}

@media (max-width: 1180px) {
  .app {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  .overview,
  .script-control-console {
    grid-template-columns: 1fr !important;
  }

}

@media (max-width: 760px) {
  .app {
    display: block !important;
  }

  .sidebar {
    position: static !important;
    height: auto !important;
  }

  .topbar,
  .flow,
  .overview,
.status-strip {
    justify-content: flex-start !important;
  }
}
/* TRUE FINAL DELIVERY RULE 20260507: delivery checklist is a publish package, not only asset download. */
#exportPanel .delivery-publish-kit,
#exportPanel .publish-kit-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

#exportPanel .publish-kit-grid article {
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

#exportPanel .publish-kit-grid span {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--ui-accent-strong, #75470f) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#exportPanel .publish-kit-grid strong {
  color: var(--ui-ink, #302515) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* TRUE FINAL DELIVERY RULE 20260507: delivery checklist is a publish package, not only asset download. */
#exportPanel .delivery-publish-kit,
#exportPanel .publish-kit-grid article {
  background: var(--ui-surface, #fffdf4) !important;
  border-color: var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

#exportPanel .publish-kit-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

#exportPanel .publish-kit-grid article {
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

#exportPanel .publish-kit-grid span {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--ui-accent-strong, #75470f) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#exportPanel .publish-kit-grid strong {
  color: var(--ui-ink, #302515) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* TRUE FINAL DELIVERY RULE 20260507: delivery checklist is a publish package, not only asset download. */
#exportPanel .delivery-publish-kit,
#exportPanel .publish-kit-grid article {
  background: var(--ui-surface, #fffdf4) !important;
  border-color: var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

#exportPanel .publish-kit-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

#exportPanel .publish-kit-grid article {
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

#exportPanel .publish-kit-grid span {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--ui-accent-strong, #75470f) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#exportPanel .publish-kit-grid strong {
  color: var(--ui-ink, #302515) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* TRUE FINAL VIDEO COPY BUTTON RULE 20260507: match compact warm workbench controls. */
#videoPanel .copy-row button,
#videoPanel button[data-copy-ref] {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(117, 71, 15, 0.24) !important;
  border-radius: 8px !important;
  background: #fffdf4 !important;
  color: var(--ui-accent-strong, #75470f) !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.08) !important;
  line-height: 1 !important;
}

#videoPanel .copy-row button:hover,
#videoPanel button[data-copy-ref]:hover {
  background: #fff8df !important;
  border-color: rgba(117, 71, 15, 0.34) !important;
}

/* TRUE FINAL STORYBOARD SEGMENT ACTION RULE 20260507: missing segments must be visible and retryable. */
#storyboardPanel .storyboard-missing-note {
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(159, 106, 34, 0.2) !important;
  border-radius: 8px !important;
  background: #fff8df !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

#storyboardPanel .storyboard-missing-actions,
#storyboardPanel .storyboard-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#storyboardPanel .storyboard-missing-actions button,
#storyboardPanel .storyboard-card-actions button,
#storyboardPanel button[data-generate-storyboard] {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(117, 71, 15, 0.28) !important;
  border-radius: 8px !important;
  background: var(--ui-action-bg, #ffd86a) !important;
  color: #2f2413 !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.1) !important;
}

/* FINAL STORYBOARD RULE: no grey/black blocks inside the prompt document. */
#storyboardPanel,
#storyboardPanel .panel,
#storyboardPanel .segment-flow-card,
#storyboardPanel .storyboard-workbench-card,
#storyboardPanel .storyboard-document-head,
#storyboardPanel .storyboard-document,
#storyboardPanel .storyboard-section,
#storyboardPanel .storyboard-segment-card,
#storyboardPanel .storyboard-quality-panel,
#storyboardPanel .storyboard-quality-grid,
#storyboardPanel .storyboard-quality-row,
#storyboardPanel .storyboard-output-summary,
#storyboardPanel .storyboard-summary-grid article,
#storyboardPanel .storyboard-table,
#storyboardPanel .storyboard-table td,
#storyboardPanel .storyboard-generation-meta,
#storyboardPanel .empty-document {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

#storyboardPanel .storyboard-quality-panel.is-pass,
#storyboardPanel .storyboard-quality-row.is-ok,
#storyboardPanel .storyboard-generation-meta span,
#storyboardPanel .storyboard-document .segment-title,
#storyboardPanel .storyboard-document .analysis-title,
#storyboardPanel .storyboard-bullet,
#storyboardPanel .prompt-label,
#storyboardPanel .semantic-line,
#storyboardPanel .risk-line {
  background: var(--ui-surface-strong) !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-accent-strong) !important;
}

#storyboardPanel .storyboard-quality-panel.is-warn,
#storyboardPanel .storyboard-quality-row.is-warn,
#storyboardPanel .storyboard-segment-card.is-fallback,
#storyboardPanel .storyboard-generation-meta.is-fallback span {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.3) !important;
  color: var(--ui-ink) !important;
}

#storyboardPanel .storyboard-table th {
  background: var(--ui-soft-2) !important;
  border-color: rgba(159, 106, 34, 0.24) !important;
  color: var(--ui-accent-strong) !important;
}

#storyboardPanel .storyboard-table tr:nth-child(even),
#storyboardPanel .storyboard-table tr:hover {
  background: var(--ui-surface-strong) !important;
}

#storyboardPanel .storyboard-code,
#storyboardPanel pre.storyboard-code,
#storyboardPanel .storyboard-code code,
#storyboardPanel .storyboard-document pre,
#storyboardPanel .storyboard-document code,
#storyboardPanel .storyboard-document > code,
#storyboardPanel .storyboard-document p code,
#storyboardPanel .storyboard-document td code {
  background: #fffaf0 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 3px 0 0 rgba(159, 106, 34, 0.28), 0 10px 20px rgba(117, 71, 15, 0.055) !important;
}

#storyboardPanel .storyboard-document hr {
  border-color: rgba(159, 106, 34, 0.18) !important;
}

.script-progress-modal.is-failed .script-progress-spinner {
  animation: none !important;
  border-color: rgba(159, 106, 34, 0.26) !important;
  border-top-color: rgba(159, 106, 34, 0.26) !important;
}

.script-progress-modal.is-failed .script-progress-spinner::before,
.script-progress-modal.is-failed .script-progress-spinner::after {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 20px !important;
  width: 18px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #9f6a22 !important;
}

.script-progress-modal.is-failed .script-progress-spinner::before {
  transform: rotate(45deg) !important;
}

.script-progress-modal.is-failed .script-progress-spinner::after {
  transform: rotate(-45deg) !important;
}

.script-progress-modal.is-failed .script-progress-bar b {
  background: #9f6a22 !important;
}

/* FINAL LAST RULE: one action color for all primary commands. */
:root {
  --ui-action-bg: #ffd86a;
  --ui-action-bg-hover: #f4c44f;
  --ui-action-border: rgba(117, 71, 15, 0.28);
}

.new-project,
button.new-project,
.primary,
button.primary,
#scriptPanel .primary,
#auditPanel .primary,
#segmentPanel .primary,
#storyboardPanel .primary,
#videoPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name,
.script-progress-ok,
.storyboard-progress-ok,
.audit-gate-card button,
.audit-decision-side button,
#continueToSegmentBtn,
#auditPanel button[data-audit-action="进入分段"],
#auditPanel .audit-gate-card.pass button,
#auditPanel .audit-decision-card.pass button,
#autoNameProjectBtn {
  background: var(--ui-action-bg) !important;
  border: 1px solid var(--ui-action-border) !important;
  color: #2f2413 !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.1) !important;
}

.new-project:hover,
button.new-project:hover,
.primary:hover,
button.primary:hover,
#scriptPanel .primary:hover,
#auditPanel .primary:hover,
#segmentPanel .primary:hover,
#storyboardPanel .primary:hover,
#videoPanel .primary:hover,
#scriptPanel .script-action-bar .primary:hover,
#scriptPanel .script-action-bar button.is-recommended:hover,
#auditPanel .toolbar .primary:hover,
.overview-auto-name:hover,
.script-progress-ok:hover,
.storyboard-progress-ok:hover,
.audit-gate-card button:hover,
.audit-decision-side button:hover,
#continueToSegmentBtn:hover,
#auditPanel button[data-audit-action="进入分段"]:hover,
#auditPanel .audit-gate-card.pass button:hover,
#auditPanel .audit-decision-card.pass button:hover,
#autoNameProjectBtn:hover {
  background: var(--ui-action-bg-hover) !important;
}

/* FINAL LAST RULE: unified yellow workbench palette. Keep this as the last override. */
:root {
  --ui-ink: #302515;
  --ui-muted: #766143;
  --ui-line: rgba(159, 106, 34, 0.2);
  --ui-surface: #fffdf4;
  --ui-surface-strong: #fff8df;
  --ui-soft-2: #fff1b8;
  --ui-accent: #9f6a22;
  --ui-accent-strong: #75470f;
}

body,
body.is-login-page,
.app {
  background:
    linear-gradient(180deg, #fff1b8 0, #fff8df 210px, #fffdf4 100%),
    #fff8df !important;
  color: var(--ui-ink) !important;
}

.panel,
.card,
.audit-card,
.script-output-card,
.script-gate-card,
.script-mode-current,
.rewrite-type-current,
.script-next-guide,
.auto-detect-summary,
.status-strip,
.project-list,
.section,
.workspace,
.audit-marked,
.audit-gate-card,
.audit-decision-card,
.audit-overview article,
.audit-priority-column,
.audit-pass-card,
.polish-review-card,
.polish-review-grid article,
.audit-blockers article,
.audit-mini-stats b,
.delivery-status-grid article,
.task-status-grid article,
.storyboard-card,
.task-card,
.script-progress-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

.audit-gate-card.pass,
.audit-decision-card.pass,
.audit-pass-card,
.polish-review-card.pass,
.polish-review-grid article.is-pass,
#auditPanel .audit-pass-card {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.28) !important;
  color: var(--ui-ink) !important;
}

.audit-gate-card.warn,
.audit-decision-card.warn,
.polish-review-card.warn,
.polish-review-grid article.is-warn,
.audit-priority-chip.warn.has-items,
.audit-priority-chip.danger.has-items,
#auditPanel .audit-priority-chip.warn.has-items,
#auditPanel .audit-priority-chip.danger.has-items {
  background: linear-gradient(180deg, #fffdf4 0%, #fff0bd 100%) !important;
  border-color: rgba(159, 106, 34, 0.3) !important;
  color: var(--ui-ink) !important;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button,
.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#currentUserLabel {
  background: #fffdf4 !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
#scriptPanel .segmented .range.is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.36) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 10px 20px rgba(117, 71, 15, 0.08) !important;
  transform: none !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
#scriptPanel .segmented .range.is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: none !important;
  display: none !important;
}

.new-project,
button.new-project,
.primary,
button.primary,
#scriptPanel .primary,
#auditPanel .primary,
#segmentPanel .primary,
#storyboardPanel .primary,
#videoPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name,
.script-progress-ok,
.storyboard-progress-ok,
.audit-gate-card button,
.audit-decision-side button,
#continueToSegmentBtn,
#auditPanel button[data-audit-action="进入分段"],
#auditPanel .audit-gate-card.pass button,
#auditPanel .audit-decision-card.pass button,
#autoNameProjectBtn {
  background: var(--ui-action-bg, #ffd86a) !important;
  border-color: var(--ui-action-border, rgba(117, 71, 15, 0.28)) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(117, 71, 15, 0.12) !important;
}

#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff1b8 !important;
  color: var(--ui-accent-strong) !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #fff8df !important;
}

#auditPanel .audit-priority-list,
#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column {
  min-height: 0 !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

.script-progress-spinner {
  border-color: rgba(159, 106, 34, 0.14) !important;
  border-top-color: var(--ui-accent) !important;
}

.script-progress-bar {
  background: #fff1b8 !important;
}

.script-progress-bar b {
  background: linear-gradient(90deg, var(--ui-accent), #ffe07a) !important;
}

#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px !important;
}

#auditPanel .issue-card {
  margin: 0 !important;
  padding: 12px !important;
  background: #fff8df !important;
  border: 1px solid rgba(159, 106, 34, 0.12) !important;
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  #auditPanel .audit-priority-summary,
  #auditPanel .audit-priority-list,
  #auditPanel .audit-issue-list {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL LAST RULE: product UI palette. Keep this at the end of the file. */
:root {
  --ui-ink: #2d2820;
  --ui-muted: #746957;
  --ui-line: rgba(109, 83, 46, 0.16);
  --ui-soft-2: #fbf7ef;
  --ui-soft-3: #fffaf1;
  --ui-accent: #9f6a22;
  --ui-accent-strong: #6f4612;
}

/* FINAL LAST RULE: compact audit issue board. Keep this after the product palette. */
#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(109, 83, 46, 0.14) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-chip.warn.has-items {
  background: #fffaf1 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4efe5 !important;
  color: var(--ui-accent-strong) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #f7f3eb !important;
  color: #8b806f !important;
}

#auditPanel .audit-priority-chip small {
  grid-column: 1 / -1 !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#auditPanel .audit-priority-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column,
#auditPanel .audit-pass-card {
  min-height: 0 !important;
  padding: 14px !important;
  background: #fffdf8 !important;
  border-color: rgba(109, 83, 46, 0.14) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px !important;
}

#auditPanel .issue-card {
  margin: 0 !important;
  padding: 12px !important;
  background: #fff8df !important;
  border: 1px solid rgba(159, 106, 34, 0.12) !important;
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  #auditPanel .audit-priority-summary,
  #auditPanel .audit-priority-list,
  #auditPanel .audit-issue-list {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL LAST RULE: compact audit issue board. Keep this after palette overrides. */
#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(109, 83, 46, 0.14) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-chip.warn.has-items {
  background: #fffaf1 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
}

#auditPanel .audit-priority-chip.danger.has-items {
  background: #fff5f3 !important;
  border-color: rgba(176, 74, 52, 0.22) !important;
}

#auditPanel .audit-priority-chip.ok.has-items {
  background: #f7fbf6 !important;
  border-color: rgba(79, 126, 73, 0.18) !important;
}

#auditPanel .audit-priority-chip span {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ui-ink) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4efe5 !important;
  color: var(--ui-accent-strong) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #f7f3eb !important;
  color: #8b806f !important;
}

#auditPanel .audit-priority-chip small {
  grid-column: 1 / -1 !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#auditPanel .audit-priority-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column,
#auditPanel .audit-pass-card {
  min-height: 0 !important;
  padding: 14px !important;
  background: #fffdf8 !important;
  border-color: rgba(109, 83, 46, 0.14) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-column header {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(109, 83, 46, 0.1) !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px !important;
}

#auditPanel .issue-card {
  margin: 0 !important;
  padding: 12px !important;
  background: #fff8df !important;
  border: 1px solid rgba(159, 106, 34, 0.12) !important;
  border-radius: 8px !important;
}

#auditPanel .issue-card b {
  margin-bottom: 8px !important;
  color: var(--ui-ink) !important;
  font-size: 15px !important;
}

#auditPanel .issue-card p,
#auditPanel .issue-card em {
  color: #725722 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 900px) {
  #auditPanel .audit-priority-summary,
  #auditPanel .audit-priority-list,
  #auditPanel .audit-issue-list {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL LAST RULE: product UI palette. Keep this at the end of the file. */
:root {
  --ui-ink: #2d2820;
  --ui-muted: #746957;
  --ui-line: rgba(109, 83, 46, 0.16);
  --ui-soft-2: #fbf7ef;
  --ui-soft-3: #fffaf1;
  --ui-accent: #9f6a22;
  --ui-accent-strong: #6f4612;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
#scriptPanel .segmented .range.is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-soft-2) 100%) !important;
  border-color: rgba(159, 106, 34, 0.34) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 8px 18px rgba(45, 40, 32, 0.05) !important;
  transform: none !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
#scriptPanel .segmented .range.is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: none !important;
  display: none !important;
}

.new-project,
.primary,
#scriptPanel .primary,
#auditPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name,
.script-progress-ok {
  background: linear-gradient(180deg, #8f5e1f 0%, #6f4612 100%) !important;
  border-color: rgba(80, 49, 12, 0.34) !important;
  color: #fffaf1 !important;
  box-shadow: 0 10px 20px rgba(80, 49, 12, 0.13) !important;
}

/* FINAL LAST RULE: compact audit issue board. Keep this at the end with the product palette. */
#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(109, 83, 46, 0.14) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-chip.warn.has-items {
  background: #fffaf1 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
}

#auditPanel .audit-priority-chip span {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ui-ink) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4efe5 !important;
  color: var(--ui-accent-strong) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #f7f3eb !important;
  color: #8b806f !important;
}

#auditPanel .audit-priority-chip small {
  grid-column: 1 / -1 !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#auditPanel .audit-priority-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column,
#auditPanel .audit-pass-card {
  min-height: 0 !important;
  padding: 14px !important;
  background: #fffdf8 !important;
  border-color: rgba(109, 83, 46, 0.14) !important;
  box-shadow: 0 8px 18px rgba(45, 40, 32, 0.035) !important;
}

#auditPanel .audit-priority-column header {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(109, 83, 46, 0.1) !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px !important;
}

#auditPanel .issue-card {
  margin: 0 !important;
  padding: 12px !important;
  background: #fff8df !important;
  border: 1px solid rgba(159, 106, 34, 0.12) !important;
  border-radius: 8px !important;
}

#auditPanel .issue-card p,
#auditPanel .issue-card em {
  color: #725722 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 900px) {
  #auditPanel .audit-priority-summary,
  #auditPanel .audit-priority-list,
  #auditPanel .audit-issue-list {
    grid-template-columns: 1fr !important;
  }
}

.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#currentUserLabel {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-accent-strong) !important;
}

#scriptPanel .script-action-bar,
#scriptPanel .script-gate-summary,
#scriptPanel .script-quality-panel,
#scriptPanel .script-output-card,
#auditPanel .audit-gate-card,
#auditPanel .audit-decision-card,
#auditPanel .polish-review-card,
#auditPanel .audit-priority-column.warn,
#auditPanel .audit-gate-card.warn,
#auditPanel .audit-decision-card.warn {
  background: #fffdf8 !important;
  border-color: rgba(159, 106, 34, 0.16) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 10px 26px rgba(45, 40, 32, 0.045) !important;
}

#scriptPanel .script-gate-summary.warn,
#scriptPanel .script-quality-panel article.is-warn,
#auditPanel .audit-priority-column.warn,
#auditPanel .audit-gate-card.warn,
#auditPanel .audit-decision-card.warn,
#auditPanel .polish-review-card.warn {
  background: #fffaf1 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
}

.script-progress-card {
  background: #fffdf8 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 24px 70px rgba(45, 40, 32, 0.18) !important;
}

.script-progress-spinner {
  border-color: rgba(159, 106, 34, 0.15) !important;
  border-top-color: var(--ui-accent) !important;
}

.script-progress-bar {
  background: rgba(159, 106, 34, 0.11) !important;
}

.script-progress-bar b {
  background: linear-gradient(90deg, #6f4612, #ba8334) !important;
}

/* Final product UI contract: calm warm-neutral palette, clear selected state, no blue/gray legacy styling. */
:root {
  --ui-ink: #2f2a22;
  --ui-muted: #6f6454;
  --ui-line: rgba(132, 99, 50, 0.18);
  --ui-soft: #fffaf2;
  --ui-soft-2: #fff6e6;
  --ui-accent: #bd842b;
  --ui-accent-strong: #8a5c16;
  --ui-accent-light: rgba(189, 132, 43, 0.12);
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
#scriptPanel .segmented .range.is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-soft-2) 100%) !important;
  border-color: rgba(189, 132, 43, 0.42) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 8px 18px rgba(47, 42, 34, 0.05) !important;
  transform: none !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
.segmented button.is-active span {
  color: var(--ui-ink) !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
#scriptPanel .segmented .range.is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: none !important;
  display: none !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary,
#scriptPanel .script-action-bar,
#scriptPanel .script-gate-summary,
#scriptPanel .script-quality-panel,
#scriptPanel .script-output-card,
#scriptPanel .hook-card,
#auditPanel .audit-gate-card,
#auditPanel .audit-decision-card {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 8px 18px rgba(47, 42, 34, 0.04) !important;
}

.script-next-guide-steps span {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  background: var(--ui-soft-2) !important;
  border-color: rgba(189, 132, 43, 0.34) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
}

.new-project,
.primary,
#scriptPanel .primary,
#auditPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name {
  background: linear-gradient(180deg, #f1c36f 0%, #d69b3a 100%) !important;
  border-color: rgba(138, 92, 22, 0.35) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(138, 92, 22, 0.13) !important;
}

.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#currentUserLabel {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-accent-strong) !important;
}

.script-progress-card {
  background: #fffdf8 !important;
  border-color: rgba(189, 132, 43, 0.24) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 24px 70px rgba(47, 42, 34, 0.18) !important;
}

.script-progress-spinner {
  border-color: rgba(189, 132, 43, 0.16) !important;
  border-top-color: var(--ui-accent) !important;
}

.script-progress-bar {
  background: rgba(189, 132, 43, 0.12) !important;
}

.script-progress-bar b {
  background: linear-gradient(90deg, var(--ui-accent), #e8bd69) !important;
}

.script-progress-ok {
  background: linear-gradient(180deg, #f1c36f 0%, #d69b3a 100%) !important;
  color: #2f2413 !important;
}

#scriptPanel .script-action-bar button.is-recommended,
#scriptPanel .script-gate-summary .mini-btn,
#auditPanel .toolbar button.is-recommended {
  border-color: rgba(184, 132, 24, 0.36) !important;
  background: linear-gradient(180deg, #fff7df 0%, #f1c766 100%) !important;
  color: #3f3016 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(184, 132, 24, 0.12) !important;
}

#scriptPanel .script-action-bar button.is-recommended:hover,
#scriptPanel .script-gate-summary .mini-btn:hover,
#auditPanel .toolbar button.is-recommended:hover {
  border-color: rgba(184, 132, 24, 0.48) !important;
  background: linear-gradient(180deg, #fff2c9 0%, #e8b94d 100%) !important;
}

#scriptPanel .script-action-bar > div strong {
  color: #3f3016 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#scriptPanel .script-gate-summary b {
  border: 1px solid rgba(184, 132, 24, 0.22) !important;
  background: #fffaf0 !important;
  color: #3f3016 !important;
}

/* END OF FILE PALETTE OVERRIDE: soft gold beige, must remain last. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(184, 132, 24, 0.34);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: var(--choice-accent-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--choice-accent-soft) 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(184, 132, 24, 0.56),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #fffdf8 !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.14) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* REAL LAST PALETTE: soft gold beige selection, overrides the gray cleanup above. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(184, 132, 24, 0.34);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: var(--choice-accent-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--choice-accent-soft) 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(184, 132, 24, 0.56),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #fffdf8 !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.14) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* Final palette tuning: same quiet selection shape, warmer and softer colors. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(184, 132, 24, 0.3);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: var(--choice-accent-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--choice-accent-soft) 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(184, 132, 24, 0.54),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #fffdf8 !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.14) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* TRUE FINAL OVERRIDE 20260506:
   No "当前" badge, no check dot, no blue UI. Selected state is clear by border + left rule only. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(184, 132, 24, 0.34);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after {
  content: none !important;
  display: none !important;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.segmented button,
.account-branch-tabs button,
.project-stage-tabs button,
.compact-segmented button {
  border-color: rgba(47, 42, 34, 0.14) !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: rgba(184, 132, 24, 0.34) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(184, 132, 24, 0.56),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
  transform: none !important;
  padding-right: 12px !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* Absolute final front-office choice style: quiet, no badge, no blue dot. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(47, 42, 34, 0.26);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::after,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::after {
  content: "" !important;
  display: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: rgba(47, 42, 34, 0.32) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(47, 42, 34, 0.68),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
  transform: none !important;
}

.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  padding-right: 8px !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* Final UI cleanup: no badges, no blue dots, no heavy gray-blue theme. */
:root {
  --choice-accent: #1f2933;
  --choice-accent-soft: #faf8f3;
  --choice-accent-line: rgba(31, 41, 51, 0.26);
  --choice-text: #241f17;
  --choice-muted: #6f675c;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::after,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::after {
  content: "" !important;
  display: none !important;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.segmented button,
.account-branch-tabs button,
.project-stage-tabs button,
.compact-segmented button {
  border-color: rgba(36, 31, 23, 0.14) !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: rgba(36, 31, 23, 0.34) !important;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f3 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(36, 31, 23, 0.72),
    0 8px 18px rgba(36, 31, 23, 0.06) !important;
  transform: none !important;
}

.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  padding-right: 8px !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(36, 31, 23, 0.12) !important;
  background: #ffffff !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(36, 31, 23, 0.04) !important;
}

.script-next-guide-steps span {
  border-color: rgba(36, 31, 23, 0.12) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(36, 31, 23, 0.28) !important;
  background: #faf8f3 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(36, 31, 23, 0.65) !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 999px !important;
}

.rewrite-track-switch .rewrite-type.is-active em::after,
.script-mode-cards .mode-card.is-active em::after {
  content: "✓" !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.segmented button.is-active::after,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::after {
  content: "✓" !important;
  top: 7px !important;
  right: 7px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  padding-right: 32px !important;
}

/* Selection marker refinement: replace bulky text badges with a small check dot. */
.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em {
  top: 10px !important;
  right: 10px !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--choice-accent) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  align-items: center;
  justify-content: center;
}

.rewrite-track-switch .rewrite-type.is-active em::after,
.script-mode-cards .mode-card.is-active em::after {
  content: "✓";
  font-size: 13px;
  font-weight: 950;
}

.segmented button.is-active::after,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::after {
  content: "✓" !important;
  top: 7px !important;
  right: 7px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--choice-accent) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  padding-right: 32px !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide-text strong,
.auto-detect-summary strong {
  color: var(--choice-text) !important;
}

.script-next-guide-text span,
.script-next-guide-text small,
.auto-detect-summary span,
.auto-detect-summary small {
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span {
  border-color: rgba(159, 106, 34, 0.18) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done {
  background: #fff1b8 !important;
  color: var(--choice-text) !important;
}

.script-next-guide-steps span.is-active {
  border-color: var(--choice-accent-line) !important;
  background: var(--choice-accent) !important;
  color: #ffffff !important;
}

/* Unified selected-state system: every segmented choice must look obviously selected. */
.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.segmented button,
.account-branch-tabs button,
.project-stage-tabs button,
.compact-segmented button {
  position: relative !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: rgba(149, 97, 0, 0.72) !important;
  background: #fff0a8 !important;
  color: #4f3500 !important;
  box-shadow:
    inset 0 0 0 2px rgba(244, 180, 0, 0.3),
    0 10px 22px rgba(118, 82, 16, 0.11) !important;
  transform: translateY(-1px);
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: #4f3500 !important;
}

.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  padding-right: 42px !important;
}

@media (max-width: 860px) {
  .script-next-guide {
    grid-template-columns: 1fr;
  }

  .script-next-guide-steps {
    justify-content: flex-start;
  }
}

/* Final selection palette override: keep all selected controls crisp and warm. */
.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: var(--choice-accent-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--choice-accent-soft) 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 0 0 0 2px rgba(159, 106, 34, 0.14),
    0 10px 22px rgba(117, 71, 15, 0.08) !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::after {
  background: var(--choice-accent) !important;
  color: #ffffff !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(159, 106, 34, 0.22) !important;
  background: linear-gradient(180deg, #fffefa 0%, #fff8df 100%) !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.08) !important;
}

/* ULTIMATE LAST RULE: remove ugly current badges and blue/gray choice styling. */
:root {
  --choice-accent: #b88418;
  --choice-accent-soft: #fffaf0;
  --choice-accent-line: rgba(184, 132, 24, 0.34);
  --choice-text: #3f3016;
  --choice-muted: #7d705c;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.segmented button.is-active,
.account-branch-tabs button.is-active,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  border-color: rgba(184, 132, 24, 0.34) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  color: var(--choice-text) !important;
  box-shadow:
    inset 4px 0 0 rgba(184, 132, 24, 0.56),
    0 8px 18px rgba(184, 132, 24, 0.06) !important;
  transform: none !important;
  padding-right: 12px !important;
}

.rewrite-track-switch .rewrite-type.is-active strong,
.rewrite-track-switch .rewrite-type.is-active span,
.script-mode-cards .mode-card.is-active strong,
.script-mode-cards .mode-card.is-active b,
.script-mode-cards .mode-card.is-active span,
.segmented button.is-active,
.segmented button.is-active span,
.account-branch-tabs button.is-active strong,
.account-branch-tabs button.is-active span,
.project-stage-tabs button.is-active,
.compact-segmented button.is-active {
  color: var(--choice-text) !important;
}

.rewrite-type-current,
.script-mode-current,
.script-next-guide,
.auto-detect-summary {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-text) !important;
  box-shadow: 0 8px 18px rgba(184, 132, 24, 0.045) !important;
}

.script-next-guide-steps span {
  border-color: rgba(184, 132, 24, 0.16) !important;
  background: #ffffff !important;
  color: var(--choice-muted) !important;
}

.script-next-guide-steps span.is-done,
.script-next-guide-steps span.is-active {
  border-color: rgba(184, 132, 24, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--choice-text) !important;
  box-shadow: inset 3px 0 0 rgba(184, 132, 24, 0.48) !important;
}

/* FINAL LAST RULE: unified yellow workbench palette. Keep this as the last override. */
:root {
  --ui-ink: #302515;
  --ui-muted: #766143;
  --ui-line: rgba(159, 106, 34, 0.2);
  --ui-surface: #fffdf4;
  --ui-surface-strong: #fff8df;
  --ui-soft-2: #fff1b8;
  --ui-accent: #9f6a22;
  --ui-accent-strong: #75470f;
}

body,
body.is-login-page,
.app {
  background:
    linear-gradient(180deg, #fff1b8 0, #fff8df 210px, #fffdf4 100%),
    #fff8df !important;
  color: var(--ui-ink) !important;
}

.panel,
.card,
.audit-card,
.script-output-card,
.script-gate-card,
.script-mode-current,
.rewrite-type-current,
.script-next-guide,
.auto-detect-summary,
.status-strip,
.project-list,
.section,
.workspace,
.audit-marked,
.audit-gate-card,
.audit-decision-card,
.audit-overview article,
.audit-priority-column,
.audit-pass-card,
.polish-review-card,
.polish-review-grid article,
.audit-blockers article,
.audit-mini-stats b,
.delivery-status-grid article,
.task-status-grid article,
.storyboard-card,
.task-card,
.script-progress-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

.audit-gate-card.pass,
.audit-decision-card.pass,
.audit-pass-card,
.polish-review-card.pass,
.polish-review-grid article.is-pass,
#auditPanel .audit-pass-card {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.28) !important;
  color: var(--ui-ink) !important;
}

.audit-gate-card.warn,
.audit-decision-card.warn,
.polish-review-card.warn,
.polish-review-grid article.is-warn,
.audit-priority-chip.warn.has-items,
.audit-priority-chip.danger.has-items,
#auditPanel .audit-priority-chip.warn.has-items,
#auditPanel .audit-priority-chip.danger.has-items {
  background: linear-gradient(180deg, #fffdf4 0%, #fff0bd 100%) !important;
  border-color: rgba(159, 106, 34, 0.3) !important;
  color: var(--ui-ink) !important;
}

.rewrite-track-switch .rewrite-type,
.script-mode-cards .mode-card,
.project-stage-tabs button,
.account-branch-tabs button,
.compact-segmented button,
.segmented button,
.ghost,
.mini-btn,
.compact,
.pill,
.sync-status,
#projectStatus,
#currentUserLabel {
  background: #fffdf4 !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

.rewrite-track-switch .rewrite-type.is-active,
.script-mode-cards .mode-card.is-active,
.project-stage-tabs button.is-active,
.account-branch-tabs button.is-active,
.compact-segmented button.is-active,
.segmented button.is-active,
#scriptPanel .segmented .range.is-active,
#segmentPanel .segmented .range.is-active,
#segmentPanel .segmented .range[data-range="40-60"].is-active {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.36) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-accent), 0 10px 20px rgba(117, 71, 15, 0.08) !important;
  transform: none !important;
}

.rewrite-track-switch .rewrite-type em,
.script-mode-cards .mode-card em,
.rewrite-track-switch .rewrite-type em::before,
.rewrite-track-switch .rewrite-type em::after,
.script-mode-cards .mode-card em::before,
.script-mode-cards .mode-card em::after,
.project-stage-tabs button.is-active::before,
.project-stage-tabs button.is-active::after,
.account-branch-tabs button.is-active::before,
.account-branch-tabs button.is-active::after,
.compact-segmented button.is-active::before,
.compact-segmented button.is-active::after,
.segmented button.is-active::before,
.segmented button.is-active::after,
#scriptPanel .segmented .range.is-active::after,
#segmentPanel .segmented .range.default-range::after,
#segmentPanel .segmented .range[data-range="40-60"]::after {
  content: none !important;
  display: none !important;
}

.new-project,
button.new-project,
.primary,
button.primary,
#scriptPanel .primary,
#auditPanel .primary,
#segmentPanel .primary,
#storyboardPanel .primary,
#videoPanel .primary,
#scriptPanel .script-action-bar .primary,
#scriptPanel .script-action-bar button.is-recommended,
#auditPanel .toolbar .primary,
.overview-auto-name,
.script-progress-ok,
.storyboard-progress-ok,
.audit-gate-card button,
.audit-decision-side button,
#continueToSegmentBtn,
#auditPanel button[data-audit-action="进入分段"],
#auditPanel .audit-gate-card.pass button,
#auditPanel .audit-decision-card.pass button,
#autoNameProjectBtn {
  background: var(--ui-action-bg, #ffd86a) !important;
  border-color: var(--ui-action-border, rgba(117, 71, 15, 0.28)) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(117, 71, 15, 0.12) !important;
}

#auditPanel .audit-priority-board {
  display: block !important;
}

#auditPanel .audit-priority-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#auditPanel .audit-priority-chip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface) !important;
}

#auditPanel .audit-priority-chip strong {
  min-width: 34px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff1b8 !important;
  color: var(--ui-accent-strong) !important;
}

#auditPanel .audit-priority-chip.is-empty strong {
  background: #fff8df !important;
}

#auditPanel .audit-priority-list,
#auditPanel .audit-issue-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#auditPanel .audit-priority-column {
  min-height: 0 !important;
}

#auditPanel .audit-priority-column header b {
  display: none !important;
}

.script-progress-spinner {
  border-color: rgba(159, 106, 34, 0.14) !important;
  border-top-color: var(--ui-accent) !important;
}

.script-progress-bar {
  background: #fff1b8 !important;
}

.script-progress-bar b {
  background: linear-gradient(90deg, var(--ui-accent), #ffe07a) !important;
}

.polish-review-head b,
.polish-review-card.pass .polish-review-head b,
.audit-gate-card.pass button,
.audit-decision-card.pass button,
.tag-ok,
.tag-done,
.production-status.done,
.recent-video-status.done {
  background: #fff1b8 !important;
  border: 1px solid rgba(159, 106, 34, 0.24) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: none !important;
}

.tag-run,
.production-status.run,
.recent-video-status.working {
  background: #fff8df !important;
  border: 1px solid rgba(159, 106, 34, 0.2) !important;
  color: var(--ui-accent-strong) !important;
}

/* TRUE FINAL OVERVIEW RULE 20260509: project overview memory cards stay yellow/white. */
.memory-strip,
#projectMemoryStrip {
  background: transparent !important;
}

.memory-strip article,
#projectMemoryStrip article {
  background: var(--ui-surface, #fffdf4) !important;
  border: 1px solid var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

.memory-strip span,
#projectMemoryStrip span {
  color: var(--ui-muted, #766143) !important;
}

.memory-strip strong,
#projectMemoryStrip strong {
  color: var(--ui-accent-strong, #75470f) !important;
}

/* TRUE FINAL STORYBOARD RULE 20260507: no grey/black blocks inside the prompt document. */
#storyboardPanel,
#storyboardPanel .panel,
#storyboardPanel .segment-flow-card,
#storyboardPanel .storyboard-workbench-card,
#storyboardPanel .storyboard-document-head,
#storyboardPanel .storyboard-document,
#storyboardPanel .storyboard-section,
#storyboardPanel .storyboard-segment-card,
#storyboardPanel .storyboard-quality-panel,
#storyboardPanel .storyboard-quality-grid,
#storyboardPanel .storyboard-quality-row,
#storyboardPanel .storyboard-output-summary,
#storyboardPanel .storyboard-summary-grid article,
#storyboardPanel .storyboard-table,
#storyboardPanel .storyboard-table td,
#storyboardPanel .storyboard-generation-meta,
#storyboardPanel .empty-document {
  background: var(--ui-surface, #fffdf4) !important;
  border-color: var(--ui-line, rgba(159, 106, 34, 0.2)) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: 0 10px 24px rgba(117, 71, 15, 0.055) !important;
}

#storyboardPanel .storyboard-quality-panel.is-pass,
#storyboardPanel .storyboard-quality-row.is-ok,
#storyboardPanel .storyboard-generation-meta span,
#storyboardPanel .storyboard-document .segment-title,
#storyboardPanel .storyboard-document .analysis-title,
#storyboardPanel .storyboard-bullet,
#storyboardPanel .prompt-label,
#storyboardPanel .semantic-line,
#storyboardPanel .risk-line {
  background: var(--ui-surface-strong, #fff8df) !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

#storyboardPanel .storyboard-quality-panel.is-warn,
#storyboardPanel .storyboard-quality-row.is-warn,
#storyboardPanel .storyboard-segment-card.is-fallback,
#storyboardPanel .storyboard-generation-meta.is-fallback span {
  background: linear-gradient(180deg, #fffdf4 0%, #fff1b8 100%) !important;
  border-color: rgba(159, 106, 34, 0.3) !important;
  color: var(--ui-ink, #302515) !important;
}

#storyboardPanel .storyboard-table th {
  background: var(--ui-soft-2, #fff1b8) !important;
  border-color: rgba(159, 106, 34, 0.24) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

#storyboardPanel .storyboard-table tr:nth-child(even),
#storyboardPanel .storyboard-table tr:hover {
  background: var(--ui-surface-strong, #fff8df) !important;
}

#storyboardPanel .storyboard-code,
#storyboardPanel pre.storyboard-code,
#storyboardPanel .storyboard-code code,
#storyboardPanel .storyboard-document pre,
#storyboardPanel .storyboard-document code,
#storyboardPanel .storyboard-document > code,
#storyboardPanel .storyboard-document p code,
#storyboardPanel .storyboard-document td code {
  background: #fffaf0 !important;
  border-color: rgba(159, 106, 34, 0.22) !important;
  color: var(--ui-ink, #302515) !important;
  box-shadow: inset 3px 0 0 rgba(159, 106, 34, 0.28), 0 10px 20px rgba(117, 71, 15, 0.055) !important;
}

#storyboardPanel .storyboard-document hr {
  border-color: rgba(159, 106, 34, 0.18) !important;
}

/* TRUE LAST ACCOUNT VIDEO WARM UI 20260511: no teal or dark islands in extraction cards/modals. */
.script-progress-modal {
  background: rgba(117, 71, 15, 0.18) !important;
  backdrop-filter: blur(5px) !important;
}

.recent-video-item,
.recent-video-item.is-commerce,
.recent-video-item.is-extracting {
  border-color: rgba(159, 106, 34, 0.22) !important;
  background: var(--ui-surface, #fffdf4) !important;
  color: var(--ui-ink, #302515) !important;
}

.recent-video-cover,
.recent-video-cover span {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-soft-2, #fff1b8) !important;
  color: var(--ui-accent-strong, #75470f) !important;
}

.recent-video-tags span,
.recent-video-tags .cart-on,
.recent-video-tags .cart-maybe,
.recent-video-tags .cart-off,
.recent-video-actions .mark-btn,
.recent-video-actions .mark-btn.is-active {
  border-color: rgba(159, 106, 34, 0.24) !important;
  background: var(--ui-surface-strong, #fff8df) !important;
  color: var(--ui-accent-strong, #75470f) !important;
  box-shadow: none !important;
}

.recent-video-actions [data-extract-recent-post],
.recent-video-actions [data-extract-recent-post]:hover {
  border-color: rgba(117, 71, 15, 0.28) !important;
  background: var(--ui-action-bg, #ffd86a) !important;
  color: #2f2413 !important;
  box-shadow: 0 10px 20px rgba(117, 71, 15, 0.12) !important;
}

.recent-video-progress {
  background: #fff1b8 !important;
}

.recent-video-progress span,
.recent-video-progress.is-done span,
.recent-video-progress.is-error span {
  background: linear-gradient(90deg, var(--ui-accent, #9f6a22), #ffe07a) !important;
  color: #3f3016 !important;
}

.recent-video-progress b {
  color: #3f3016 !important;
  text-shadow: 0 1px 4px rgba(255, 253, 244, 0.9) !important;
}
/* TRUE LAST PROFESSIONAL UI QA 20260511: final readable selection states and centered identity marks. */
:root {
  --ui-pro-bg: #fff7df;
  --ui-pro-surface: #fffefa;
  --ui-pro-surface-2: #fff8df;
  --ui-pro-surface-3: #fff0b8;
  --ui-pro-line: rgba(138, 88, 15, 0.28);
  --ui-pro-line-strong: rgba(111, 71, 12, 0.38);
  --ui-pro-ink: #2b1e0f;
  --ui-pro-muted: #665133;
  --ui-pro-accent: #9a6210;
  --ui-pro-action: #f4bd33;
}

body .sidebar .agent,
body.no-active-project .sidebar .agent,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent,
body .agent-list .agent {
  min-height: 56px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ui-pro-muted) !important;
  box-shadow: none !important;
}

body .sidebar .agent:hover,
body .agent-list .agent:hover {
  border-color: var(--ui-pro-line) !important;
  background: var(--ui-pro-surface-2) !important;
  color: var(--ui-pro-ink) !important;
}

body .sidebar .agent.is-active,
body.no-active-project .sidebar .agent.is-active,
body:not(.no-active-project):not(.is-login-page) .sidebar .agent.is-active,
body .agent-list .agent.is-active {
  border-color: var(--ui-pro-line-strong) !important;
  background: var(--ui-pro-surface-3) !important;
  color: var(--ui-pro-ink) !important;
  box-shadow: inset 4px 0 0 var(--ui-pro-accent), 0 10px 20px rgba(117, 71, 15, 0.1) !important;
}

body .sidebar .agent span,
body .agent-list .agent span,
body .sidebar .agent small,
body .agent-list .agent small {
  color: inherit !important;
  letter-spacing: 0 !important;
}

body .sidebar .agent.is-active span,
body .agent-list .agent.is-active span {
  color: var(--ui-pro-ink) !important;
  font-weight: 900 !important;
}

body .sidebar .agent.is-active small,
body .agent-list .agent.is-active small {
  color: var(--ui-pro-muted) !important;
  font-weight: 800 !important;
}

.brand-mark,
.agent-avatar,
.user-avatar,
.admin-avatar,
.nav-icon,
.step-icon,
.status-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}

.agent-avatar,
.user-avatar,
.admin-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-pro-line) !important;
  border-radius: 50% !important;
  background: var(--ui-pro-surface-3) !important;
  color: #6f470c !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
}

.brand-mark {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  background: var(--ui-pro-surface-3) !important;
  color: #6f470c !important;
}

img.brand-mark {
  object-fit: contain !important;
  padding: 5px !important;
}

.primary,
button.primary,
a.primary,
button.new-project,
#continueToSegmentBtn,
#promptBtn,
#generateScriptBtn,
#auditScriptBtn,
#polishScriptBtn,
#saveProjectBtn,
#confirmProgressBtn {
  min-height: 42px !important;
  border: 1px solid var(--ui-pro-line-strong) !important;
  background: var(--ui-pro-action) !important;
  color: #261a0a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(117, 71, 15, 0.12) !important;
}

.ghost,
button.ghost,
a.ghost,
.secondary,
button.secondary,
.mini,
button.mini,
.compact,
button.compact,
.icon-btn,
.recent-video-actions button:not([data-extract-recent-post]) {
  min-height: 38px !important;
  border: 1px solid var(--ui-pro-line) !important;
  background: var(--ui-pro-surface) !important;
  color: #6f470c !important;
  font-weight: 850 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.pill,
.tag,
.badge,
.status-pill,
.recent-video-tags span,
.mode-card .tag {
  border-color: var(--ui-pro-line) !important;
  background: var(--ui-pro-surface-2) !important;
  color: #6f470c !important;
  font-weight: 850 !important;
}

input,
select,
textarea,
.field input,
.field select,
.field textarea {
  border-color: var(--ui-pro-line) !important;
  background: var(--ui-pro-surface) !important;
  color: var(--ui-pro-ink) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(102, 81, 51, 0.74) !important;
}
/* ACCOUNT LIBRARY TITLE ALIGNMENT 20260511: keep the account-library labels off the left edge. */
#accountPanel .account-branch-tabs button[data-account-branch="accounts"] {
  padding-left: 18px !important;
}

#accountPanel .account-library-panel {
  padding: 18px !important;
}

#accountPanel .account-library-panel > .subsection-head.compact {
  padding: 0 2px 0 8px !important;
  margin-bottom: 14px !important;
}

#accountPanel .account-library-panel > .subsection-head.compact h3,
#accountPanel .account-library-panel > .subsection-head.compact .eyebrow {
  margin-left: 0 !important;
}

#accountPanel .account-library-list {
  padding-left: 0 !important;
}