.promptLibraryPage {
  min-width: 1120px;
  min-height: 100vh;
  overflow: auto;
  background: #080d16;
}

.promptShell {
  width: min(1480px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 18px 0 28px;
}

.promptLibraryPage .panel {
  overflow: visible;
  border-radius: 8px;
}

.promptLibraryPage input,
.promptLibraryPage textarea,
.promptLibraryPage button {
  min-height: 38px;
  letter-spacing: 0;
}

.promptLibraryPage textarea {
  width: 100%;
  resize: vertical;
}

.promptLibraryPage .quietButton {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 6px;
}

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

.promptHeader h1 {
  margin: 0;
  font-size: 22px;
}

.promptHeader p,
.sectionHead p,
.promptExplainHead p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.promptHeaderActions,
.promptActions,
.targetButtons,
.promptTranslateBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.keyState {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}

.keyState.ready {
  border-color: rgba(87, 222, 158, .34);
  color: #a8f0ca;
}

.promptWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: start;
  gap: 14px;
}

.promptMain {
  min-width: 0;
  padding: 16px 18px 20px;
}

.promptMain > section + section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sectionHead,
.reverseResultHead,
.promptExplainHead,
.sideSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sectionHead h2,
.promptExplainHead h2,
.promptSide h2 {
  margin: 0;
  font-size: 16px;
}

.compactHead {
  margin-bottom: 10px;
}

.reverseWorkbench {
  padding-top: 0 !important;
  border-top: 0 !important;
}

.reverseHead .miniStatus {
  max-width: 48%;
  text-align: right;
}

.reverseGrid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 310px;
  gap: 14px;
  margin-top: 12px;
}

.reverseDrop {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 300px;
  overflow: hidden;
  border: 1px dashed rgba(66, 202, 184, .48);
  border-radius: 7px;
  background: #0a1320;
  color: #8fe6da;
  cursor: pointer;
}

.reverseDrop.dragOver {
  border-color: #5ee5c8;
  background: rgba(42, 171, 145, .1);
}

.reverseDrop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reverseDrop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reversePipeline {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.reversePipelineRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 43px;
  padding: 8px 10px;
  border-left: 3px solid rgba(255, 177, 79, .62);
  background: rgba(255, 255, 255, .025);
  font-size: 12px;
}

.reversePipelineRow span {
  color: var(--muted);
}

.reversePipelineRow strong {
  color: #ffd69c;
  font-size: 12px;
}

.reverseProgress {
  padding: 10px;
  border: 1px solid rgba(66, 202, 184, .28);
  border-radius: 7px;
  background: rgba(35, 152, 132, .07);
}

.reverseProgressMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.reverseProgressMeta strong {
  color: #a8f4e5;
  font-size: 12px;
}

.reverseProgressTrack,
.historyProgressTrack {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
}

.reverseProgressTrack span,
.historyProgressTrack span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #49d6b8;
  transition: width .22s ease;
}

.reverseResult {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(66, 202, 184, .18);
}

.reverseResultHead p {
  max-width: 680px;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.reverseResultHead .promptActions {
  flex: 0 0 auto;
  margin-top: 0;
}

.reverseSourceStatus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.reverseSourceStatus span {
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
}

.reverseSourceStatus span.ok {
  border-color: rgba(87, 222, 158, .34);
  color: #aaf2cc;
}

.reverseSourceStatus span.failed {
  border-color: rgba(255, 103, 147, .34);
  color: #ffb2ca;
}

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

.reverseGroup h3 {
  margin: 0 0 7px;
  color: #8fe6da;
  font-size: 12px;
}

.reverseTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reverseTag {
  min-height: 38px;
  padding: 5px 8px;
  text-align: left;
}

.reverseTag span,
.reverseTag small {
  display: block;
  letter-spacing: 0;
}

.reverseTag span {
  color: var(--ink);
  font-size: 12px;
}

.reverseTag small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

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

.editorGrid textarea {
  min-height: 138px;
}

.promptTranslateBar {
  margin-top: 9px;
}

.promptTranslateToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(66, 202, 184, .25);
  border-radius: 6px;
  background: rgba(35, 152, 132, .06);
  color: #a8e9df;
  font-size: 12px;
  cursor: pointer;
}

.promptTranslateToggle input {
  accent-color: #45d2b5;
}

.promptActions {
  margin-top: 9px;
}

.quietButton.strong {
  border-color: rgba(66, 202, 184, .56);
  background: rgba(35, 152, 132, .18);
  color: #c3fff3;
}

.quietButton.danger {
  border-color: rgba(255, 103, 147, .4);
  color: #ffb2ca;
}

.aiPromptBox textarea {
  min-height: 104px;
}

.keywordHead {
  align-items: flex-end;
}

.librarySafeToggle {
  flex: 0 0 auto;
  border-color: rgba(255, 177, 79, .28);
  background: rgba(181, 104, 32, .08);
  color: #ffd69c;
}

.libraryShortcuts {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.libraryShortcut {
  min-height: 31px !important;
  padding: 4px 10px !important;
}

.librarySearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 9px;
}

.librarySearch input {
  min-width: 0;
}

.libraryBrowser {
  display: grid;
  grid-template-columns: 174px 218px minmax(0, 1fr);
  height: 610px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: #090f19;
}

.promptTabs,
.promptSubTabs,
.promptGroups {
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.promptTabs,
.promptSubTabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.promptTabs {
  background: rgba(255, 255, 255, .018);
}

.promptTab,
.promptSubTab {
  flex: 0 0 auto;
  width: 100%;
  min-height: 36px;
  margin: 0 0 3px;
  padding: 6px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(235, 242, 250, .76);
  text-align: left;
}

.promptTab:hover,
.promptSubTab:hover {
  background: rgba(255, 255, 255, .055);
}

.promptTab.active {
  background: rgba(35, 152, 132, .18);
  color: #bdfff1;
}

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

.promptSubTab small {
  min-width: 28px;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.promptSubTab.active {
  background: rgba(181, 104, 32, .18);
  color: #ffe0b3;
}

.promptGroups {
  padding: 12px;
}

.promptGroupTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  color: #d7e5f2;
  font-size: 13px;
  font-weight: 700;
}

.promptGroupTitle small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.tagGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 7px;
}

.tagButton {
  min-width: 0;
  height: 51px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 177, 79, .23);
  border-radius: 6px;
  background: rgba(151, 83, 25, .42);
  text-align: left;
}

.tagButton:hover {
  border-color: rgba(255, 190, 105, .5);
  background: rgba(172, 96, 29, .56);
}

.tagButton.addedPositive {
  border-color: rgba(77, 221, 157, .62);
  box-shadow: inset 3px 0 #4ddd9d;
}

.tagButton.addedNegative {
  border-color: rgba(255, 103, 147, .62);
  box-shadow: inset 3px 0 #ff6793;
}

.tagButton.addedPositive.addedNegative {
  border-color: rgba(255, 199, 91, .7);
  box-shadow: inset 3px 0 #4ddd9d, inset -3px 0 #ff6793;
}

.tagButton .cn,
.tagButton .en {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tagButton .cn {
  color: #fff5e8;
  font-size: 12px;
  font-weight: 700;
}

.tagButton .en {
  margin-top: 2px;
  color: rgba(230, 239, 247, .7);
  font-size: 10px;
}

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

.searchResultHead strong {
  color: #8fe6da;
  font-size: 13px;
}

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

.promptExplainPanel {
  padding-bottom: 2px;
}

.promptExplainHead {
  align-items: flex-end;
  margin-bottom: 11px;
}

.translationControls {
  display: grid;
  grid-template-columns: auto 128px;
  align-items: center;
  gap: 5px 8px;
}

.translationControls label {
  color: var(--muted);
  font-size: 10px;
}

.translationControls select {
  min-height: 31px;
  padding: 3px 7px;
  font-size: 11px;
}

.translationControls .miniStatus {
  grid-column: 1 / -1;
  max-width: 260px;
  text-align: right;
}

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

.promptExplainColumns > section {
  min-width: 0;
}

.promptExplainColumns h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.promptExplainList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  margin-top: 7px;
}

.explainTag {
  display: inline-flex;
  max-width: 100%;
  flex-direction: column;
  gap: 1px;
  padding: 5px 7px;
  border: 1px solid rgba(77, 221, 157, .22);
  border-radius: 6px;
  background: rgba(35, 152, 104, .09);
}

.explainText {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.explainTag b,
.explainTag small,
.explainTag em {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.explainTag b {
  color: #d9fff0;
  font-size: 11px;
}

.explainTag small {
  color: #9fe8bf;
  font-size: 11px;
}

.explainTag em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.explainTag.unknown {
  border-color: rgba(255, 103, 147, .25);
  background: rgba(141, 39, 70, .08);
}

.explainActions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.translationCandidate {
  min-width: 0;
  max-width: 220px;
  min-height: 27px !important;
  padding: 2px 5px;
  font-size: 10px;
}

.promptLibraryPage .translationIcon {
  width: 27px;
  min-width: 27px;
  min-height: 27px;
  padding: 0;
  border-radius: 5px;
  border-color: rgba(112, 198, 184, .28);
  background: rgba(34, 107, 99, .16);
  color: #b8ded8;
  font-size: 14px;
}

.promptLibraryPage .translationIcon.confirm {
  border-color: rgba(77, 221, 157, .34);
  background: rgba(35, 152, 104, .16);
  color: #8ee7b7;
}

.promptLibraryPage .translationIcon.delete {
  border-color: rgba(255, 103, 147, .32);
  background: rgba(141, 39, 70, .14);
  color: #ff9fbd;
}

.emptyExplain,
.emptyLibrary,
.emptyHistory {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.promptSide {
  position: sticky;
  top: 16px;
  display: flex;
  height: calc(100vh - 32px);
  min-height: 620px;
  flex-direction: column;
  gap: 14px;
  padding: 15px;
  overflow: hidden !important;
}

.promptSide > section + section {
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.sideSectionHead h2 {
  font-size: 14px;
}

.sideSectionHead span,
.sideSectionHead > div > span {
  color: var(--muted);
  font-size: 11px;
}

.targetButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 9px;
}

.promptLibraryPage .targetButton {
  border-radius: 6px;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
}

.targetButton.active[data-target="positive"] {
  border-color: rgba(77, 221, 157, .58);
  background: rgba(35, 152, 104, .18);
  color: #c8ffe3;
}

.targetButton.active[data-target="negative"] {
  border-color: rgba(255, 103, 147, .58);
  background: rgba(141, 39, 70, .2);
  color: #ffd0de;
}

.historySection {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.compactButton {
  min-height: 29px !important;
  padding: 3px 8px !important;
  font-size: 11px;
}

#reverseHistoryStatus {
  margin-top: 7px;
}

.reverseHistory {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-right: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.reverseHistoryCard {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
}

.historyPreview {
  display: grid;
  width: 76px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: #070b12;
  color: var(--muted);
  font-size: 10px;
}

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

.historyBody {
  min-width: 0;
}

.historyMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.historyBadge {
  color: #ffd69c;
  font-size: 10px;
}

.reverseHistoryCard[data-status="succeeded"] .historyBadge {
  color: #9fe8bf;
}

.reverseHistoryCard[data-status="failed"] .historyBadge {
  color: #ff9fbd;
}

.historyTime {
  color: var(--muted);
  font-size: 10px;
}

.historyFile,
.historySummary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyFile {
  margin-top: 5px;
  color: #dce8f2;
  font-size: 11px;
}

.historySummary {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.historyProgressTrack {
  height: 5px;
  margin-top: 7px;
}

.historyActions {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.historyActions button {
  min-height: 27px !important;
  padding: 3px 7px !important;
  font-size: 10px;
}

.promptNotice {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}