/* KESTREL AI · Cockpit unification pass
   The supplied Reading Cockpit is the visual authority for every creator
   control. This layer deliberately comes last so legacy creator rules cannot
   reintroduce the former gold / grey component language. */
:root {
  --restrel-bg: #050806;
  --restrel-panel: rgba(13, 23, 18, .86);
  --restrel-panel-deep: rgba(7, 15, 11, .9);
  --restrel-edge: rgba(190, 235, 208, .14);
  --restrel-edge-strong: rgba(0, 230, 118, .48);
  --restrel-text: #e9f4ed;
  --restrel-copy: #b4c8bb;
  --restrel-muted: #80958a;
  --restrel-green: #00e676;
  --restrel-green-soft: #a4f3bc;
  --restrel-radius: 14px;
  --restrel-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Inter, system-ui, sans-serif;
}

html, body, .restrel-studio {
  font-family: var(--restrel-font) !important;
  background: var(--restrel-bg) !important;
  color: var(--restrel-text) !important;
}
body .app-shell .system-announcement-icon {
  background: rgba(0,230,118,.16) !important;
  color: var(--restrel-green-soft) !important;
  box-shadow: 0 0 0 3px rgba(0,230,118,.06) !important;
}
/* Brand lockup: give the supplied wordmark a clear, centered presence. */
body .app-shell.app-shell > .platform-nav .platform-nav-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 96px !important;
  min-height: 96px !important;
  padding: 0 5px 20px !important;
}
body .app-shell.app-shell > .platform-nav .platform-nav-brand .restrel-wordmark {
  display: block !important;width:168px !important;
  height: auto !important;max-width:100% !important;
  object-fit: contain !important;
  object-position: center !important;transform:none !important;
}

/* One heading recipe for the center page title and the inspector title. */
body .app-shell.app-shell:not(.home-mode) .platform-page-heading h1,
body .app-shell.app-shell:not(.home-mode) .inspector-head h3 {
  font-family: var(--restrel-font) !important;font-size:var(--kestrel-type-section) !important;line-height:var(--kestrel-leading-title) !important;font-weight:600 !important;letter-spacing:0 !important;
}
body .app-shell.app-shell:not(.home-mode) .inspector-head h3 { margin: 0 !important; }

body .app-shell.app-shell:not(.home-mode) #overview-view,
body .app-shell.app-shell:not(.home-mode) .overview-view {
  display: none !important;
}
body .app-shell.app-shell.home-mode #video-studio,
body .app-shell.app-shell.home-mode #image-studio-view,
body .app-shell.app-shell.home-mode #video-enhancement-view {
  display: none !important;
}

/* The creator is one continuous glass surface. */
body .app-shell.app-shell:not(.home-mode) .workspace-scroll {
  display: block !important;
  overflow: auto !important;
  padding: 10px 0 48px !important;
  min-height: 0 !important;
  scrollbar-color: #294c39 transparent;
}

/* Let the page heading travel with the creator surface. The workbench owns
   one scroll context so the header never hangs in a detached framed strip. */
body .app-shell.app-shell:not(.home-mode) > .workspace {
  display: block !important;
  overflow: auto !important;
}
body .app-shell.app-shell:not(.home-mode) > .workspace > .workspace-header {
  display: flex !important;
  flex: none !important;
}
body .app-shell.app-shell:not(.home-mode) > .workspace > .workspace-scroll {
  flex: none !important;
  min-height: auto !important;
  overflow: visible !important;
}
body .app-shell.app-shell:not(.home-mode) .hero-card.studio-panel {
  box-sizing: border-box !important;
  width: min(100%, 960px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 20px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: 18px !important;
  background: linear-gradient(150deg, rgba(18, 32, 24, .9), rgba(6, 14, 10, .88)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(229,255,239,.08) !important;
}
/* The page header is part of the cockpit surface, rather than a detached
   black strip between the navigation and the creator panel. */
body .app-shell.app-shell:not(.home-mode) .workspace-header {
  box-sizing: border-box !important;
  flex: 0 0 68px !important;
  height: auto !important;
  min-height: 68px !important;
  padding: 0 16px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(18,32,24,.9), rgba(6,14,10,.88)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px rgba(229,255,239,.07) !important;
}
@media (min-width: 861px) {
  /* The scroll track belongs to the creator column; reserve its width so the
     header edge lines up exactly with the visible workbench surface below. */
  body .app-shell.app-shell:not(.home-mode) .workspace-header { margin-right: 9px !important; }
}
body .app-shell.app-shell:not(.home-mode) .workspace-header::after {
  border: 0 !important;
  box-shadow: inset 0 -1px rgba(0,230,118,.08) !important;
}
body .app-shell.app-shell:not(.home-mode) .workspace-header .platform-page-heading h1 {
  margin: 0 !important;font-size:var(--kestrel-type-section) !important;line-height:var(--kestrel-leading-title) !important;font-weight:600 !important;letter-spacing:0 !important;}
body .app-shell.app-shell:not(.home-mode) .workspace-header .platform-page-heading p {
  margin: 5px 0 0 !important;
  color: var(--restrel-muted) !important;
  font-size:var(--kestrel-type-meta) !important;line-height:var(--kestrel-leading-meta) !important;
}
body .app-shell.app-shell:not(.home-mode) .workspace-header-actions { gap: 7px !important; }
body .app-shell.app-shell:not(.home-mode) .runtime-badge {
  border-color: var(--restrel-edge) !important;
  background: rgba(0,230,118,.06) !important;
  color: var(--restrel-green-soft) !important;
}
body .app-shell.app-shell:not(.home-mode) .settings-toggle {
  border-color: var(--restrel-edge) !important;
  background: rgba(4,18,11,.8) !important;
  color: #b9d5c2 !important;
}
body .app-shell.app-shell:not(.home-mode) .new-project-action {
  border-color: rgba(0,230,118,.42) !important;
  background: rgba(0,230,118,.1) !important;
  color: #d9ffe7 !important;
}
body .app-shell.app-shell:not(.home-mode) .hero-card.studio-panel::before {
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(143,255,192,.07), transparent 32%, transparent 70%, rgba(0,230,118,.04));
}

/* One type scale: compact labels, readable content, deliberate headings. */
body .app-shell .studio-panel,
body .app-shell .studio-panel button,
body .app-shell .studio-panel input,
body .app-shell .studio-panel select,
body .app-shell .studio-panel textarea {
  font-family: var(--restrel-font) !important;
}
body .app-shell .studio-panel label,
body .app-shell .studio-panel .media-title,
body .app-shell .studio-panel .frame-tool-title {
  color: var(--restrel-copy) !important;font-size:var(--kestrel-type-control) !important;
  font-weight:600 !important;line-height:var(--kestrel-leading-control) !important;
  letter-spacing: .01em;
}
body .app-shell .studio-panel .model-row label,
body .app-shell .studio-panel .prompt-dock-head label {
  color: var(--restrel-text) !important;font-size:var(--kestrel-type-control) !important;
  font-weight: 700 !important;
}
body .app-shell .studio-panel .model-row,
body .app-shell .studio-panel .prompt-dock,
body .app-shell .studio-panel .schema-grid,
body .app-shell .studio-panel .media-box {
  position: relative;
  z-index: 1;
}

/* Inputs/selects share the reference's dark acrylic treatment. */
body .app-shell .studio-panel select,
body .app-shell .studio-panel input[type="text"],
body .app-shell .studio-panel input[type="url"],
body .app-shell .studio-panel input[type="number"],
body .app-shell .studio-panel textarea {
  box-sizing: border-box !important;
  min-height: 42px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: 10px !important;
  background: rgba(2, 10, 7, .72) !important;
  color: var(--restrel-text) !important;
  box-shadow: inset 0 1px rgba(232,255,240,.035) !important;font-size:var(--kestrel-type-body) !important;
  line-height: 1.45 !important;
}
body .app-shell .studio-panel select { padding: 0 12px !important; }
body .app-shell .studio-panel input[type="text"],
body .app-shell .studio-panel input[type="url"],
body .app-shell .studio-panel input[type="number"] { padding: 9px 11px !important; }
body .app-shell .studio-panel select:hover,
body .app-shell .studio-panel input:hover,
body .app-shell .studio-panel textarea:hover { border-color: rgba(164,243,188,.3) !important; }
body .app-shell .studio-panel select:focus,
body .app-shell .studio-panel input:focus,
body .app-shell .studio-panel textarea:focus {
  border-color: var(--restrel-edge-strong) !important;
  box-shadow: 0 0 0 3px rgba(0,230,118,.09), inset 0 1px rgba(232,255,240,.05) !important;
  outline: 0 !important;
}
body .app-shell .studio-panel select option { background: #0d1711; color: var(--restrel-text); }

/* Model row and prompt editor. */
body .app-shell .studio-panel .model-row { gap: 12px !important; margin-bottom: 2px; }
body .app-shell .studio-panel .model-row { grid-template-columns: minmax(120px, .72fr) minmax(0, 1.28fr) !important; }
body .app-shell .studio-panel .model-row select { min-height: 43px !important; }
body .app-shell .studio-panel .model-meta { min-height: 18px; color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .prompt-dock {
  margin-top: 16px !important;
  padding: 15px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: var(--restrel-radius) !important;
  background: linear-gradient(145deg, rgba(11, 25, 16, .84), rgba(4, 13, 8, .76)) !important;
  box-shadow: inset 0 1px rgba(230,255,240,.05) !important;
}
body .app-shell .studio-panel .prompt-dock:focus-within { border-color: var(--restrel-edge-strong) !important; box-shadow: 0 0 0 3px rgba(0,230,118,.08), inset 0 1px rgba(230,255,240,.08) !important; }
body .app-shell .studio-panel .prompt-dock textarea,
body .app-shell .studio-panel #prompt {
  min-height: 136px !important;
  margin-top: 3px !important;
  padding: 11px 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(190,235,208,.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #effaf2 !important;font-size:var(--kestrel-type-body) !important;line-height:var(--kestrel-leading-body) !important;
}
body .app-shell .studio-panel .prompt-dock textarea::placeholder,
body .app-shell .studio-panel input::placeholder { color: #607469 !important;font-size:var(--kestrel-type-body) !important;line-height:var(--kestrel-leading-body) !important;}
body .app-shell .studio-panel .prompt-dock-tip,
body .app-shell .studio-panel .asset-library-status,
body .app-shell .studio-panel .asset-library-mention-hint { color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; line-height: 1.55 !important; }
body .app-shell .studio-panel .asset-library-panel { margin-top: 13px !important; padding-top: 11px !important; border-top: 1px solid rgba(190,235,208,.1) !important; }
body .app-shell .studio-panel .asset-library-actions { gap: 7px !important; margin-top: 9px !important; }

/* All secondary controls use the same quiet outlined language. */
body .app-shell .studio-panel .asset-library-btn,
body .app-shell .studio-panel .mini-button,
body .app-shell .studio-panel .square-action,
body .app-shell .studio-panel .prompt-action-btn {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: 9px !important;
  background: rgba(9, 26, 16, .72) !important;
  color: #b6d5c1 !important;font-size:var(--kestrel-type-control) !important;
  font-weight:600 !important;
}
body .app-shell .studio-panel .asset-library-btn:hover,
body .app-shell .studio-panel .mini-button:hover,
body .app-shell .studio-panel .square-action:hover { border-color: var(--restrel-edge-strong) !important; background: rgba(0,230,118,.1) !important; color: #ddffea !important; }

/* Settings and media fields: each card has identical geometry. */
body .app-shell .studio-panel .schema-grid,
body .app-shell .studio-panel .prompt-settings-grid { gap: 10px !important; margin: 16px 0 !important; }
body .app-shell .studio-panel .schema-field {
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: 11px !important;
  background: rgba(8, 22, 14, .62) !important;
}
body .app-shell .studio-panel .schema-field select { margin-top: 7px !important; min-height: 39px !important; }
body .app-shell .studio-panel .schema-field small,
body .app-shell .studio-panel .resolution-cost { color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; line-height: 1.5 !important; }
body .app-shell .studio-panel .media-box { margin-top: 6px !important; padding: 14px !important; border: 1px solid var(--restrel-edge) !important; border-radius: 14px !important; background: rgba(6, 18, 11, .54) !important; }
body .app-shell .studio-panel .media-title-row { margin-bottom: 7px !important; }
body .app-shell .studio-panel .ref-limit-hint { color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; line-height: 1.6 !important; }
body .app-shell .studio-panel .media-grid { gap: 10px !important; margin-top: 11px !important; }
body .app-shell .studio-panel .media-role {
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid rgba(190,235,208,.12) !important;
  border-radius: 12px !important;
  background: rgba(10, 26, 17, .58) !important;
}
body .app-shell .studio-panel .media-role-head b { color: var(--restrel-text) !important;font-size:var(--kestrel-type-control) !important; font-weight: 700 !important;line-height:var(--kestrel-leading-control) !important;}
body .app-shell .studio-panel .role-count,
body .app-shell .studio-panel .media-role-hint { color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .file-picker {
  min-height: 54px !important;
  border: 1px dashed rgba(142,238,177,.32) !important;
  border-radius: 9px !important;
  background: rgba(0,230,118,.035) !important;
}
body .app-shell .studio-panel .file-picker:hover { border-color: var(--restrel-edge-strong) !important; background: rgba(0,230,118,.08) !important; }
body .app-shell .studio-panel .file-picker span { color: #bce9cb !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .file-picker em { color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .media-role .url-row { gap: 6px !important; margin-top: 7px !important; }
body .app-shell .studio-panel .media-role .url-row input { min-height: 32px !important; font-size:var(--kestrel-type-meta) !important; }

/* First/last frame tools were the last legacy gold island. */
body .app-shell .studio-panel .frame-tools {
  display: grid !important;
  gap: 9px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(190,235,208,.13) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(14,31,20,.82), rgba(6,16,10,.78)) !important;
}
body .app-shell .studio-panel .frame-tool-title { color: var(--restrel-text) !important;font-size:var(--kestrel-type-control) !important; font-weight:600 !important;line-height:var(--kestrel-leading-control) !important;}
body .app-shell .studio-panel .frame-model-row { gap: 8px !important; }
body .app-shell .studio-panel .frame-model-row select,
body .app-shell .studio-panel .frame-ratio-label select,
body .app-shell .studio-panel .frame-note { min-height: 36px !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .frame-cost { color: var(--restrel-green-soft) !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .frame-ratio-label { color: var(--restrel-copy) !important; font-size:var(--kestrel-type-meta) !important; }
body .app-shell .studio-panel .frame-note { padding: 8px 9px !important; }
body .app-shell .studio-panel .frame-generate-button {
  min-height: 38px !important;
  border: 1px solid rgba(0,230,118,.46) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(0,230,118,.2), rgba(0,119,61,.22)) !important;
  color: #ddffea !important;font-size:var(--kestrel-type-control) !important;
  font-weight:600 !important;
  box-shadow: inset 0 1px rgba(212,255,226,.1) !important;
}
body .app-shell .studio-panel .frame-generate-button,
body .app-shell .inspector .task-redo-btn,
body .app-shell .inspector .result-actions a,
body .app-shell .studio-panel .generate-btn,
body .app-shell .studio-panel .image-studio-submit {
  font-family: var(--restrel-font) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
body .app-shell .studio-panel .frame-generate-button { font-weight: 700 !important; }
body .app-shell .inspector .task-redo-btn {
  min-height: 38px !important;
  border: 1px solid var(--restrel-edge) !important;
  border-radius: 9px !important;
  background: rgba(9,26,16,.72) !important;
  color: #b6d5c1 !important;font-size:var(--kestrel-type-control) !important;
  font-weight: 700 !important;
}
body .app-shell .inspector .task-redo-btn:hover:not(:disabled) {
  border-color: var(--restrel-edge-strong) !important;
  background: rgba(0,230,118,.1) !important;
  color: #ddffea !important;
}
body .app-shell .studio-panel .frame-generate-button:hover:not(:disabled) { border-color: var(--restrel-green) !important; background: rgba(0,230,118,.25) !important; transform: translateY(-1px); }
body .app-shell .studio-panel .frame-generate-button:disabled { opacity: .55 !important; }
body .app-shell .studio-panel .frame-help { margin: 0 !important; color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; line-height: 1.55 !important; }
body .app-shell .studio-panel .frame-result { border-top: 1px solid rgba(190,235,208,.1) !important; }

/* Primary submit: one green action across video, image and enhancement. */
body .app-shell .studio-panel .generate-btn,
body .app-shell .studio-panel .image-studio-submit {
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 15px !important;
  border: 1px solid rgba(0,230,118,.5) !important;
  border-radius: 12px !important;
  background: linear-gradient(105deg, #00b963, #4ff0a1) !important;
  color: #03140b !important;font-size:var(--kestrel-type-control) !important;
  font-weight:600 !important;
  letter-spacing: .01em;
  box-shadow: 0 10px 28px rgba(0,230,118,.18), inset 0 1px rgba(238,255,243,.48) !important;
}
body .app-shell .studio-panel .generate-btn:hover:not(:disabled),
body .app-shell .studio-panel .image-studio-submit:hover:not(:disabled) { background: linear-gradient(105deg, #00d875, #74ffba) !important; transform: translateY(-1px); box-shadow: 0 15px 34px rgba(0,230,118,.28), inset 0 1px rgba(238,255,243,.6) !important; }
body .app-shell .studio-panel .generate-btn:disabled,
body .app-shell .studio-panel .image-studio-submit:disabled { background: #193c2a !important; border-color: #315843 !important; color: #769886 !important; box-shadow: none !important; }
body .app-shell .studio-panel .task-status { margin-top: 11px !important; color: var(--restrel-copy) !important; font-size:var(--kestrel-type-meta) !important; line-height: 1.6 !important; }
body .app-shell .studio-panel .credit-freeze-hint { color: var(--restrel-muted) !important; font-size:var(--kestrel-type-meta) !important; line-height: 1.5 !important; }

/* Right rail keeps the same green/neutral hierarchy as the workspace. */
body .app-shell .inspector,
body .app-shell .inspector .task-card,
body .app-shell .inspector .result-card { font-family: var(--restrel-font) !important; }
body .app-shell .inspector .task-card,
body .app-shell .inspector .result-card { border-color: var(--restrel-edge) !important; background: rgba(9, 21, 14, .64) !important; border-radius: 13px !important; }
body .app-shell .inspector .task-badge { color: var(--restrel-green-soft) !important; background: rgba(0,230,118,.1) !important; border-color: rgba(0,230,118,.25) !important; }
body .app-shell .inspector .task-step.done > span,
body .app-shell .inspector .task-step.active > span { border-color: rgba(0,230,118,.5) !important; color: var(--restrel-green-soft) !important; }

@media (max-width: 860px) {
  body .app-shell.app-shell:not(.home-mode) > .workspace {
    display: flex !important;
    overflow: visible !important;
  }
  body .app-shell.app-shell:not(.home-mode) > .workspace > .workspace-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  body .app-shell.app-shell:not(.home-mode) .workspace-scroll { padding: 0 0 30px !important; }
  body .app-shell.app-shell:not(.home-mode) .hero-card.studio-panel { padding: 14px !important; border-radius: 15px !important; }
  body .app-shell .studio-panel .schema-grid { grid-template-columns: 1fr 1fr !important; }
  body .app-shell .studio-panel .media-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  body .app-shell.app-shell > .platform-nav .platform-nav-brand { height: 72px !important; min-height: 72px !important; padding-bottom: 10px !important; }
  body .app-shell.app-shell > .platform-nav .platform-nav-brand .restrel-wordmark {width:168px !important; height: auto !important;transform:none !important;max-width:100% !important;}
  body .app-shell .workspace-header .settings-toggle { width: 36px !important; min-width: 36px !important; height: 32px !important; padding: 0 !important; overflow: hidden !important; font-size: 0 !important; }
  body .app-shell .workspace-header .settings-toggle::after { content: "⚙"; color: #b8d8c4; font-size: 14px; line-height: 1; }
  body .app-shell .workspace-header .new-project-action { min-width: 58px !important; padding: 0 8px !important; white-space: nowrap !important; font-size:var(--kestrel-type-meta) !important; }
  body .app-shell .studio-panel .schema-grid { grid-template-columns: 1fr !important; }
  body .app-shell .studio-panel .model-row { grid-template-columns: 1fr !important; }
  body .app-shell .studio-panel .model-row .square-action { display: none !important; }
}