/* ../styles/main.css */
:root {
  --bg: #faf7f2;
  --bg-card: #ffffff;
  --bg-soft: #f3efe8;
  --bg-softer: #ede8df;
  --bg-tint: #fbf3eb;
  --ink: #1f1d1a;
  --ink2: #4a463f;
  --ink3: #8a8478;
  --ink4: #b8b2a4;
  --border: #e8e2d6;
  --border2: #d8d1c2;
  --brand: #c4623a;
  --brand-hover: #a8512f;
  --brand-soft: #fbe9df;
  --brand-soft2: #f8dcc9;
  --sage: #5a7561;
  --sage-soft: #e3ebe2;
  --green: #4d8a5a;
  --green-soft: #e0ecdc;
  --red: #b94a48;
  --red-soft: #f5dcdb;
  --amber: #c08e2c;
  --amber-soft: #f5ebcf;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --display:
    "Fraunces",
    "Noto Sans SC",
    serif;
  --sans:
    "Inter",
    "Noto Sans SC",
    -apple-system,
    sans-serif;
  --mono: "JetBrains Mono", monospace;
  --cn: "Noto Sans SC", sans-serif;
  --shadow-sm: 0 1px 2px rgba(31,29,26,0.04);
  --shadow: 0 2px 8px rgba(31,29,26,0.06), 0 1px 2px rgba(31,29,26,0.04);
  --shadow-lg: 0 8px 32px rgba(31,29,26,0.08), 0 2px 6px rgba(31,29,26,0.04);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: var(--bg);
  background-image:
    radial-gradient(
      circle at 15% 20%,
      rgba(196, 98, 58, 0.04) 0%,
      transparent 40%),
    radial-gradient(
      circle at 85% 80%,
      rgba(90, 117, 97, 0.04) 0%,
      transparent 40%);
  color: var(--ink);
  font-family: var(--cn);
  font-size: 14px;
  line-height: 1.6;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
html {
  height: 100%;
  overflow: hidden;
}
::selection {
  background: var(--brand-soft);
  color: var(--brand);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 64px;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      var(--brand),
      #d97757);
}
.logo-mark svg {
  position: relative;
  z-index: 1;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.logo-sub {
  font-size: 11px;
  color: var(--ink3);
  letter-spacing: 0.5px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.version-pill {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all 0.18s ease;
}
.version-pill:hover {
  color: var(--ink);
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.settings-pill {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink2);
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all 0.18s ease;
}
.settings-pill:hover {
  color: var(--ink);
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.main {
  display: grid;
  grid-template-columns: 360px 1fr;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 64px);
  min-height: 0;
}
.left-panel {
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 4px 0;
  min-height: 0;
  overscroll-behavior: contain;
}
.left-panel::-webkit-scrollbar {
  width: 6px;
}
.left-panel::-webkit-scrollbar-track {
  background: transparent;
}
.left-panel::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 3px;
}
.left-panel::-webkit-scrollbar-thumb:hover {
  background: var(--ink4);
}
.section {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}
.section:last-of-type {
  border-bottom: none;
}
.section-title {
  font-size: 11px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--ink4);
}
.settings-section {
  padding: 0;
}
.compact-section {
  padding: 18px 24px;
}
.settings-header {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 20px 24px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--cn);
  color: inherit;
}
.settings-header > div {
  min-width: 0;
}
.settings-header:hover {
  background: rgba(255, 255, 255, 0.32);
}
.settings-title {
  margin-bottom: 4px;
}
.settings-summary {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.5;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-chevron {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--brand);
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  min-width: 46px;
  text-align: center;
  margin-left: auto;
}
.settings-body {
  display: none;
  padding: 0 24px 22px;
}
.settings-section.open .settings-body {
  display: block;
}
.settings-group {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.settings-group:first-child {
  padding-top: 0;
  border-top: none;
}
.settings-group + .settings-group {
  margin-top: 16px;
}
.settings-label {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 9px;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.api-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.api-tab {
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.15s ease;
}
.api-tab:hover {
  border-color: var(--ink4);
  color: var(--ink);
  transform: translateY(-1px);
}
.api-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.input-wrap {
  position: relative;
  margin-bottom: 10px;
}
.input-field {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
  transition: all 0.15s;
}
.input-field:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.input-field::placeholder {
  color: var(--ink4);
}
.key-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.key-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink4);
  transition: all 0.2s;
}
.key-dot.valid {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.key-dot.invalid {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.key-status-text {
  font-family: var(--mono);
  color: var(--ink3);
  font-size: 11px;
}
.model-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s;
}
.model-option:hover {
  border-color: var(--ink4);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.model-option.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.model-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.model-desc {
  font-size: 11px;
  color: var(--ink3);
}
.model-badge {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-free {
  background: var(--sage-soft);
  color: var(--sage);
}
.badge-pro {
  background: var(--brand-soft2);
  color: var(--brand-hover);
}
.badge-fast {
  background: var(--amber-soft);
  color: var(--amber);
}
.tier-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.tier-tab {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink3);
  font-family: var(--cn);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 6px;
  transition: all 0.15s;
}
.tier-tab:hover {
  color: var(--ink);
}
.tier-tab.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.model-current {
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.model-current-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.model-current-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.model-current-id {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink4);
  word-break: break-all;
}
.model-status {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.status-tested {
  background: var(--green-soft);
  color: var(--green);
}
.status-official {
  background: var(--sage-soft);
  color: var(--sage);
}
.status-preview {
  background: var(--amber-soft);
  color: var(--amber);
}
.status-setup {
  background: var(--red-soft);
  color: var(--red);
}
.model-current-desc {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.55;
  margin-bottom: 10px;
}
.model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.model-tag {
  font-size: 10px;
  color: var(--ink3);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
}
.model-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.model-select-label {
  font-size: 11px;
  color: var(--ink3);
}
.model-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 10px 34px 10px 12px;
  color: var(--ink2);
  font-size: 12px;
  font-family: var(--cn);
  cursor: pointer;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--ink4) 50%),
    linear-gradient(
      135deg,
      var(--ink4) 50%,
      transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.model-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.free-quota-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--sage-soft);
  color: var(--sage);
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.55;
}
.free-quota-note strong {
  color: var(--ink2);
  font-weight: 700;
}
.model-hint {
  margin-top: 8px;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.55;
}
.mode-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mode-card {
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      transparent 50%,
      rgba(196, 98, 58, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.2s;
}
.mode-card:hover {
  border-color: var(--ink4);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.mode-card:hover::before {
  opacity: 1;
}
.mode-card.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.mode-card.active::before {
  opacity: 0;
}
.mode-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.mode-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.mode-card.active .mode-icon {
  background: rgba(255, 255, 255, 0.5);
}
.mode-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--cn);
}
.mode-desc {
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.5;
  padding-left: 30px;
}
.scope-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.scope-tab {
  flex: 1;
  padding: 7px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--cn);
  cursor: pointer;
  transition: all 0.15s;
}
.scope-tab:hover {
  color: var(--ink);
}
.scope-tab.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.prompt-editor {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--ink);
  font-family: var(--cn);
  font-size: 12px;
  outline: none;
  resize: vertical;
  min-height: 70px;
  line-height: 1.6;
  transition: all 0.15s;
}
.prompt-editor:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.section-sub {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 8px;
}
.upload-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.upload-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  margin-bottom: 4px;
}
.upload-hint {
  font-size: 11px;
  color: var(--ink3);
  font-family: var(--mono);
}
.file-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 175px;
  overflow-y: auto;
  padding-right: 2px;
}
.file-list::-webkit-scrollbar {
  width: 4px;
}
.file-list::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--mono);
  gap: 8px;
}
.file-item-name {
  flex: 1;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.file-item-size {
  color: var(--ink3);
  white-space: nowrap;
}
.file-item-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}
.file-item-remove:hover {
  background: var(--red-soft);
  color: var(--red);
}
.folder-zone {
  width: 100%;
  padding: 24px 16px 16px;
  background: var(--bg-card);
  color: var(--ink2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all 0.18s;
}
.folder-zone:hover,
.folder-zone.drag-over,
.folder-zone.reading {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.folder-zone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.folder-zone-hint {
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.55;
}
.info-tip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--ink3);
  font-family: var(--display);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: help;
  position: relative;
}
.info-tip:focus {
  outline: 2px solid var(--brand-soft2);
  outline-offset: 2px;
}
.info-tip .info-popup {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  width: 220px;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--ink2);
  font-family: var(--cn);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  box-shadow: var(--shadow);
  transition: all 0.15s;
  z-index: 3;
}
.info-tip:hover .info-popup,
.info-tip:focus .info-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.folder-import-status {
  display: none;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink3);
  background: var(--bg-soft);
  text-align: left;
}
.folder-import-status.active {
  display: block;
}
.folder-import-status.working {
  color: var(--brand);
  background: var(--brand-soft);
}
.folder-import-status.success {
  color: var(--green);
  background: var(--green-soft);
}
.folder-import-status.error {
  color: var(--red);
  background: var(--red-soft);
}
.btn-folder-pick {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--ink2);
  font-size: 12px;
  font-family: var(--cn);
  font-weight: 500;
  transition: all 0.15s;
}
.btn-folder-pick:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: #fff;
}
.video-aux-zone {
  position: relative;
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.video-aux-zone:hover,
.video-aux-zone.drag-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.video-aux-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.video-aux-title {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
}
.video-aux-hint {
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.5;
  margin-top: 3px;
}
.ep-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 4px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.ep-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: all 0.15s;
  flex-shrink: 0;
  opacity: 0;
}
.ep-item:hover .ep-remove {
  opacity: 1;
}
.ep-remove:hover {
  background: var(--red-soft);
  color: var(--red);
}
.file-summary {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border-radius: var(--radius);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.file-summary-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.file-summary-label {
  color: var(--brand-hover);
  font-weight: 600;
}
.file-summary-size {
  color: var(--brand);
  font-family: var(--mono);
  font-size: 11px;
}
.file-summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.35;
}
.drama-queue {
  margin-top: 14px;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.drama-queue.visible {
  display: flex;
}
#queueItems {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.selected-files {
  display: none;
  margin-top: 14px;
}
.selected-files.visible {
  display: block;
}
.selected-files .file-list {
  margin-top: 6px;
}
.queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink3);
  font-size: 11px;
  font-family: var(--cn);
}
.queue-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.queue-item:hover {
  border-color: var(--ink4);
}
.queue-item.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.queue-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #d7c5a3;
  border: 1px solid #c6ae7e;
}
.queue-dot.running {
  background: var(--brand);
  border-color: var(--brand);
}
.queue-dot.done {
  background: var(--green);
  border-color: var(--green);
}
.queue-dot.partial {
  background: var(--red);
  border-color: var(--red);
}
.queue-copy {
  flex: 1;
  min-width: 0;
}
.queue-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.queue-meta {
  font-size: 10px;
  color: var(--ink3);
  margin-top: 2px;
}
.queue-remove {
  border: none;
  background: transparent;
  color: var(--ink4);
  cursor: pointer;
  font-size: 15px;
  width: 19px;
  padding: 0;
}
.queue-remove:hover {
  color: var(--red);
}
.queue-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.output-target {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.output-target-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.output-target-title {
  font-size: 11px;
  color: var(--ink2);
  font-weight: 600;
}
.btn-inline {
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  color: var(--brand);
  font-family: var(--cn);
}
.output-target-status {
  font-size: 10px;
  color: var(--ink3);
  line-height: 1.55;
}
.output-target-status.connected {
  color: var(--green);
}
.action-section {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.action-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 14px;
}
.action-title-row .section-title {
  flex-shrink: 0;
  margin-bottom: 0;
}
.run-summary {
  min-width: 0;
  margin-left: auto;
  color: var(--ink3);
  font-size: 10px;
  text-align: right;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.run-summary strong {
  color: var(--ink2);
  font-weight: 500;
}
.btn-start {
  width: 100%;
  padding: 14px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--cn);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow);
}
.btn-start:hover:not(:disabled) {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-start:disabled {
  background: var(--ink4);
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
}
.btn-start.btn-abort {
  background: var(--red);
  animation: pulse-abort 2s infinite;
}
.btn-start.btn-abort:hover:not(:disabled) {
  background: #a13836;
  transform: translateY(-1px);
}
@keyframes pulse-abort {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(185, 74, 72, 0.4), var(--shadow);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(185, 74, 72, 0), var(--shadow);
  }
}
.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.btn-sm {
  flex: 1;
  padding: 9px;
  background: var(--bg-card);
  color: var(--ink2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: var(--cn);
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.btn-sm:hover {
  border-color: var(--ink4);
  color: var(--ink);
  background: var(--bg-soft);
}
.btn-sm.btn-warn {
  color: var(--red);
  border-color: var(--red-soft);
}
.btn-sm.btn-warn:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(224, 213, 196, 0.65);
}
.control-row:last-child {
  border-bottom: none;
}
.control-row.is-disabled {
  opacity: 0.46;
}
.control-copy {
  min-width: 0;
}
.control-title {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}
.control-desc {
  font-size: 10px;
  color: var(--ink3);
  line-height: 1.5;
  margin-top: 2px;
}
.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.toggle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border2);
  cursor: pointer;
  transition: all 0.16s;
}
.toggle span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: all 0.16s;
}
.toggle input:checked + span {
  background: var(--sage);
}
.toggle input:checked + span::after {
  transform: translateX(18px);
}
.toggle input:disabled + span,
.small-select:disabled,
.small-input:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
.small-select,
.small-input {
  min-width: 86px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink2);
  font-size: 11px;
  font-family: var(--mono);
}
.small-input {
  width: 96px;
}
.mini-note {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.6;
}
.check-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: var(--ink2);
  line-height: 1.45;
}
.check-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  margin-top: 5px;
}
.cost-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.cost-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink2);
}
.cost-line span:last-child {
  font-family: var(--mono);
  color: var(--ink);
  text-align: right;
}
.cost-detail-modal {
  width: min(1240px, calc(100vw - 64px));
  max-height: min(820px, calc(100vh - 64px));
}
.cost-detail-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 28px 24px;
  display: flex;
  flex-direction: column;
}
.cost-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
}
.cost-view-tabs {
  display: inline-flex;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg-soft);
}
.cost-view-tab {
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  background: transparent;
  color: var(--ink3);
  font-size: 12px;
  font-family: var(--cn);
  cursor: pointer;
}
.cost-view-tab.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.cost-project-name {
  min-width: 0;
  font-size: 12px;
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cost-detail-note {
  margin: 14px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.65;
}
.cost-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.cost-table {
  min-width: 1060px;
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: var(--ink2);
}
.cost-table.summary-table {
  min-width: 820px;
}
.cost-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  white-space: nowrap;
  padding: 10px 12px;
  background: var(--bg-soft);
  color: var(--ink3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.cost-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(224, 213, 196, 0.65);
  vertical-align: top;
  white-space: nowrap;
}
.cost-table tr:last-child td {
  border-bottom: none;
}
.cost-table .metric {
  font-family: var(--mono);
  color: var(--ink);
}
.cost-table .missing {
  color: var(--ink4);
}
.cost-table .episode-model {
  max-width: 166px;
}
.episode-model-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-breakdown,
.price-tier-note {
  color: var(--ink4);
  font-size: 10px;
  line-height: 1.55;
  white-space: normal;
  margin-top: 3px;
}
.cost-detail-empty {
  padding: 30px;
  text-align: center;
  color: var(--ink3);
  font-size: 12px;
}
.price-tier-grid {
  margin-top: 5px;
}
.price-tier-row {
  display: grid;
  grid-template-columns: 1fr 78px 78px;
  gap: 6px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(224, 213, 196, 0.65);
}
.price-tier-row:last-child {
  border-bottom: none;
}
.price-tier-head {
  padding-top: 0;
  color: var(--ink4);
  font-size: 10px;
}
.price-tier-name {
  min-width: 0;
  font-size: 11px;
  color: var(--ink2);
}
.price-tier-grid .small-input {
  min-width: 0;
  width: 78px;
  padding: 7px 6px;
}
.sidebar-settings-launch {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 10px 24px 16px;
  background:
    linear-gradient(
      180deg,
      rgba(250, 247, 242, 0),
      var(--bg) 26%);
}
.sidebar-settings-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 2px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--ink3);
  font-family: var(--cn);
  cursor: pointer;
  transition: all 0.15s;
}
.sidebar-settings-button:hover {
  color: var(--brand);
}
.sidebar-settings-title {
  font-size: 12px;
  font-weight: 500;
}
.sidebar-settings-desc {
  font-size: 10px;
  color: var(--ink3);
  margin-top: 1px;
  text-align: left;
}
.sidebar-settings-arrow {
  color: var(--ink4);
  font-size: 15px;
}
.settings-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(42, 35, 30, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.settings-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.settings-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(430px, calc(100vw - 30px));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: 10px 0 36px rgba(31, 29, 26, 0.12);
  transform: translateX(-18px);
  opacity: 0;
  transition: all 0.18s ease;
}
.settings-drawer-overlay.active .settings-drawer {
  transform: translateX(0);
  opacity: 1;
}
.settings-drawer-head {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-drawer-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.settings-drawer-sub {
  font-size: 11px;
  color: var(--ink3);
}
.settings-drawer-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-section {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}
.drawer-section:last-child {
  border-bottom: none;
}
.drawer-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-section-title::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--brand);
}
.settings-close {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--bg-card);
  color: var(--ink2);
  font-family: var(--cn);
  font-size: 12px;
}
.settings-close:hover {
  color: var(--ink);
  border-color: var(--brand);
}
.btn-retry {
  margin-top: 12px;
  padding: 6px 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-retry:hover {
  background: var(--brand-hover);
}
.ep-item-fail .ep-status {
  animation: pulse-fail 2s infinite;
}
@keyframes pulse-fail {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(185, 74, 72, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(185, 74, 72, 0.2);
  }
}
.ep-retry {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--brand-soft);
  color: var(--brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-right: 4px;
}
.ep-retry:hover {
  background: var(--brand);
  color: #fff;
}
.ep-status[title]:hover {
  cursor: help;
}
.session-notice {
  margin: 12px 24px 0;
  padding: 10px 14px;
  background: var(--sage-soft);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.session-notice .clear-link {
  font-size: 11px;
  color: var(--sage);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}
.queue-reconnect {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--brand);
  padding: 5px 8px;
  font-size: 10px;
  font-family: var(--cn);
  cursor: pointer;
}
.queue-reconnect:hover {
  background: var(--brand-soft);
}
.right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-height: 0;
}
.progress-bar-wrap {
  padding: 14px 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
}
.progress-track,
.progress-fill {
  display: none;
}
.progress-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-family: var(--cn);
  white-space: nowrap;
  width: 100%;
  color: var(--ink2);
}
.stat-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.stat-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.stat-ok::before {
  background: var(--green);
}
.stat-fail::before {
  background: var(--red);
}
.stat-total {
  color: var(--ink3);
  margin-right: 4px;
}
.stat-ok {
  color: var(--green);
}
.stat-fail {
  color: var(--red);
}
.stat-current {
  color: var(--brand);
  margin-left: auto;
  font-weight: 600;
}
.progress-sep {
  color: var(--ink4);
}
.content-area {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.ep-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg);
  padding: 12px 8px;
  min-height: 0;
  overscroll-behavior: contain;
}
.ep-list::-webkit-scrollbar {
  width: 4px;
}
.ep-list::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}
.ep-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.8;
}
.ep-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 4px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.ep-item:hover {
  background: var(--bg-soft);
}
.ep-item.active {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ep-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  border: 1.5px solid #d9c7a2;
  color: #9f7629;
  font-weight: 700;
  background: #fffaf0;
}
.ep-status.done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.ep-status.fail {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.ep-status.running {
  background: #fff7f0;
  border-color: var(--brand);
  color: transparent;
  position: relative;
  animation: none;
}
.ep-status.running::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(196, 98, 58, 0.14);
}
.ep-status.running.stage-sending {
  border-color: #c4623a;
  background: #fff3eb;
}
.ep-status.running.stage-sending::after {
  background: #c4623a;
  box-shadow: 0 0 0 4px rgba(196, 98, 58, 0.14);
}
.ep-status.running.stage-waiting {
  border-color: #c08e2c;
  background: #fff9e9;
}
.ep-status.running.stage-waiting::after {
  background: #c08e2c;
  box-shadow: 0 0 0 4px rgba(192, 142, 44, 0.16);
}
.ep-status.running.stage-analyzing {
  border-color: #5a7d9a;
  background: #eef6fb;
}
.ep-status.running.stage-analyzing::after {
  background: #5a7d9a;
  box-shadow: 0 0 0 4px rgba(90, 125, 154, 0.15);
}
.ep-status.running.stage-organizing {
  border-color: #7a9682;
  background: #eef6f0;
}
.ep-status.running.stage-organizing::after {
  background: #5a8a66;
  box-shadow: 0 0 0 4px rgba(90, 138, 102, 0.15);
}
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(196, 98, 58, 0.5);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(196, 98, 58, 0);
  }
}
.ep-info {
  flex: 1;
  min-width: 0;
}
.ep-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.ep-file {
  font-size: 10px;
  color: var(--ink3);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-file.running-text {
  color: var(--brand);
  font-family: var(--cn);
  font-weight: 500;
}
.ep-file.done-text {
  color: var(--green);
  font-family: var(--cn);
  font-weight: 500;
}
.ep-file.fail-text {
  color: var(--red);
  font-family: var(--cn);
  font-weight: 500;
}
.result-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-height: 0;
}
.result-tabs-wrap {
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 4px;
}
.result-tab {
  padding: 16px 0;
  margin-right: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--cn);
}
.result-tab:hover {
  color: var(--ink2);
}
.result-tab.active {
  color: var(--ink);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.result-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.btn-action {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink2);
  font-size: 12px;
  font-family: var(--cn);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-action:hover {
  border-color: var(--ink4);
  color: var(--ink);
  background: var(--bg-soft);
}
.result-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  min-height: 0;
  overscroll-behavior: contain;
}
.result-content::-webkit-scrollbar {
  width: 6px;
}
.result-content::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 3px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  padding: 40px;
}
.empty-mark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: relative;
}
.empty-mark::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed var(--border2);
  opacity: 0.6;
}
.stage-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 24px;
  margin-bottom: 2px;
}
.stage-indicator span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border2);
  opacity: 0.75;
}
.stage-indicator.sending span:nth-child(1) {
  background: #c4623a;
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(196, 98, 58, 0.12);
}
.stage-indicator.waiting span:nth-child(2) {
  background: #c08e2c;
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(192, 142, 44, 0.14);
}
.stage-indicator.analyzing span:nth-child(3) {
  background: #5a7d9a;
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(90, 125, 154, 0.13);
}
.stage-indicator.organizing span:nth-child(4) {
  background: #5a8a66;
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(90, 138, 102, 0.13);
}
.empty-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.empty-desc {
  font-size: 13px;
  text-align: center;
  line-height: 1.7;
  color: var(--ink3);
  max-width: 300px;
}
.char-header {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.char-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink3);
  font-weight: 400;
}
.char-grid {
  display: grid;
  gap: 14px;
}
.char-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  transition: all 0.2s;
}
.char-card:hover {
  border-color: var(--ink4);
  box-shadow: var(--shadow);
}
.char-avatar-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.char-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.avatar-1 {
  background:
    linear-gradient(
      135deg,
      #c4623a,
      #d97757);
}
.avatar-2 {
  background:
    linear-gradient(
      135deg,
      #5a7561,
      #7a9682);
}
.avatar-3 {
  background:
    linear-gradient(
      135deg,
      #8a6db3,
      #a387c9);
}
.avatar-4 {
  background:
    linear-gradient(
      135deg,
      #c08e2c,
      #d4a847);
}
.avatar-5 {
  background:
    linear-gradient(
      135deg,
      #5a7d9a,
      #7a9bb8);
}
.char-name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.char-name-text {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.char-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.char-tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 500;
}
.gender-m {
  background: #e3edf5;
  color: #4a6d8a;
}
.gender-f {
  background: #f5e3eb;
  color: #a04668;
}
.age-tag {
  background: var(--bg-soft);
  color: var(--ink2);
  font-family: var(--mono);
  font-size: 10px;
}
.char-personality {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.personality-pill {
  font-size: 11px;
  padding: 3px 9px;
  background: var(--brand-soft);
  color: var(--brand-hover);
  border-radius: 4px;
  font-weight: 500;
}
.char-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-label {
  font-size: 11px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.detail-value {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}
.script-header {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sc-doc {
  font-family: var(--cn);
  color: var(--ink);
  font-size: 15px;
  line-height: 2;
  max-width: 760px;
}
.sc-doc.sc-typing {
  min-height: 30px;
}
.sc-doc.sc-typing .sc-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--brand);
  animation: typingBlink 0.65s steps(1) infinite;
}
@keyframes typingBlink {
  50% {
    opacity: 0;
  }
}
.sc-doc.sc-typing-finished .sc-typing-cursor {
  animation: typingFinish 0.5s ease forwards;
}
@keyframes typingFinish {
  0%, 35% {
    opacity: 1;
  }
  36%, 65% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.sc-scene {
  margin-bottom: 28px;
}
.sc-head {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}
.sc-people {
  color: var(--ink2);
  font-size: 14px;
  margin-bottom: 8px;
}
.sc-body {
}
.sc-action {
  color: var(--ink);
  margin: 1px 0;
}
.sc-line {
  color: var(--ink);
  margin: 1px 0;
}
.sc-name {
  font-weight: 400;
  color: var(--ink);
}
.script-block {
  margin-bottom: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  position: relative;
}
.script-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}
.script-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.script-ts {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brand);
  font-weight: 600;
  background: var(--brand-soft);
  padding: 3px 10px;
  border-radius: 4px;
}
.script-scene {
  font-size: 13px;
  color: var(--ink2);
  font-style: italic;
  font-family: var(--display);
}
.script-line {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  margin-bottom: 10px;
  align-items: baseline;
}
.script-speaker {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  text-align: right;
  padding-top: 1px;
}
.script-text {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}
.shot-header {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}
.shot-item {
  display: grid;
  grid-template-columns: 60px 100px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.shot-item:last-child {
  border-bottom: none;
}
.shot-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  color: var(--brand);
  line-height: 1;
  padding-top: 2px;
  letter-spacing: -1px;
}
.shot-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shot-type {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--sage-soft);
  color: var(--sage);
  text-align: center;
  font-weight: 600;
}
.shot-duration {
  font-size: 10px;
  color: var(--ink3);
  font-family: var(--mono);
  text-align: center;
}
.shot-desc {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 6px;
}
.shot-detail {
  font-size: 12px;
  color: var(--ink3);
  font-style: italic;
}
.raw-output {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink2);
  white-space: pre-wrap;
  line-height: 1.7;
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.toast-wrap {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--ink);
  animation: slideIn 0.25s ease;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink3);
  flex-shrink: 0;
}
.toast.success::before {
  background: var(--green);
}
.toast.error::before {
  background: var(--red);
}
.version-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 35, 30, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.version-overlay.active {
  display: flex;
}
.version-modal {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.version-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
}
.version-title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}
.version-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink3);
}
.version-close {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink2);
  font-size: 12px;
  padding: 7px 14px;
}
.version-close:hover {
  border-color: var(--brand);
  color: var(--ink);
}
.version-list {
  overflow-y: auto;
  padding: 8px 28px 24px;
}
.version-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.version-item:last-child {
  border-bottom: none;
}
.version-code {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}
.version-time {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink4);
  line-height: 1.5;
}
.version-name {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.version-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.version-tag {
  font-size: 11px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 3px 8px;
}
.version-points {
  margin: 0;
  padding-left: 18px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.8;
}
@keyframes slideIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@media (max-width: 1000px) {
  .main {
    grid-template-columns: 1fr;
  }
  .right-panel {
    display: none;
  }
  .version-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cost-detail-modal {
    width: 100%;
  }
}
.top-module-tabs {
  display: flex;
  gap: 3px;
  margin-left: 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.top-module-tab {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.top-module-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
}
.top-module-tab.active {
  background: var(--bg-card);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.module-analyze {
  grid-template-columns: 1fr;
  background: var(--bg);
}
.analyze-root {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
.analyze-workbench {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.analyze-workbench-left {
  background: var(--bg);
  border-right: 1px solid var(--border);
  min-height: 0;
  overflow-y: auto;
}
.analyze-workbench-left::-webkit-scrollbar {
  width: 6px;
}
.analyze-workbench-left::-webkit-scrollbar-track {
  background: transparent;
}
.analyze-workbench-left::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 3px;
}
.analyze-upload-zone {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  display: block;
  font-family: var(--cn);
  margin: 0;
  width: 100%;
}
.module-novel {
  grid-template-columns: 1fr;
  background: var(--bg);
}
.novel-root {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.novel-shell {
  display: grid;
  grid-template-columns: 360px 240px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.novel-left,
.novel-rail,
.novel-result {
  min-height: 0;
  overflow-y: auto;
}
.novel-left {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 22px 20px;
}
.novel-rail {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
}
.novel-result {
  background: var(--bg);
  padding: 28px 36px 42px;
}
.novel-sec-title {
  align-items: center;
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  gap: 8px;
  letter-spacing: 1px;
  margin: 0 0 14px;
}
.novel-sec-title::before {
  background: var(--ink4);
  content: "";
  height: 1px;
  width: 14px;
}
.novel-sec-title.mt {
  margin-top: 24px;
}
.novel-sec-title span {
  color: var(--ink4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  margin-left: auto;
}
.novel-drop {
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-lg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--cn);
  gap: 7px;
  padding: 28px 18px;
  text-align: center;
  width: 100%;
}
.novel-drop:hover {
  background: var(--bg-tint);
  border-color: var(--brand);
}
.novel-drop-icon {
  font-size: 28px;
  opacity: 0.55;
}
.novel-drop strong {
  font-size: 14px;
}
.novel-drop small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.55;
}
.module-batch {
  grid-template-columns: 1fr;
  background: var(--bg);
}
.batch-root {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.batch-shell {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.batch-left {
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 20px;
}
.batch-right {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px 44px;
}
.batch-section {
  border-bottom: 1px solid var(--border);
  padding: 0 0 18px;
  margin: 0 0 18px;
}
.batch-section.grow {
  flex: 1;
  min-height: 180px;
}
.batch-side-title {
  align-items: center;
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  gap: 8px;
  letter-spacing: 1px;
  margin: 0 0 12px;
}
.batch-side-title::before {
  background: var(--ink4);
  content: "";
  height: 1px;
  width: 14px;
}
.batch-drop {
  appearance: none;
  -webkit-appearance: none;
  align-items: center;
  background: var(--bg-card);
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-lg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--cn);
  gap: 7px;
  padding: 28px 18px;
  text-align: center;
  width: 100%;
}
.batch-drop:hover {
  background: var(--bg-tint);
  border-color: var(--brand);
}
.batch-drop-icon {
  color: var(--brand);
  font-family: var(--mono);
  font-size: 28px;
  opacity: 0.75;
}
.batch-drop strong {
  font-size: 14px;
}
.batch-drop small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.65;
  max-width: 260px;
}
.batch-list-head {
  align-items: center;
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin: 0 0 10px;
}
.batch-drama-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 4px;
}
.batch-drama-item {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 10px minmax(0, 1fr) 24px;
  padding: 12px 10px;
}
.batch-drama-item:hover {
  border-color: var(--brand);
}
.batch-drama-item.active {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.batch-drama-dot {
  border-radius: 999px;
  height: 9px;
  width: 9px;
  background: var(--ink4);
}
.batch-drama-dot.done {
  background: var(--green);
}
.batch-drama-dot.running {
  background: var(--brand);
}
.batch-drama-dot.failed {
  background: var(--red);
}
.batch-drama-dot.blocked {
  background: var(--amber);
}
.batch-drama-main {
  min-width: 0;
}
.batch-drama-main strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-drama-main small {
  color: var(--ink3);
  display: block;
  font-size: 11px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-icon-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink4);
  cursor: pointer;
  font-size: 16px;
  height: 24px;
  width: 24px;
}
.batch-icon-btn:hover {
  color: var(--brand);
}
.batch-empty-list {
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--ink3);
  font-size: 12px;
  padding: 20px;
  text-align: center;
}
.batch-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.batch-option {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--cn);
  padding: 12px;
  text-align: left;
}
.batch-option.active {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.batch-option strong {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
.batch-option small {
  color: var(--ink3);
  display: block;
  font-size: 11px;
  line-height: 1.55;
}
.batch-primary-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--brand);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: var(--cn);
  font-size: 15px;
  font-weight: 700;
  height: 52px;
  width: 100%;
}
.batch-primary-btn:hover {
  filter: brightness(0.98);
}
.batch-btn-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}
.batch-light-btn,
.batch-primary-small {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 13px;
  min-height: 38px;
  padding: 8px 14px;
}
.batch-primary-small {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.batch-light-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.batch-light-btn.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.batch-api-card {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
}
.batch-api-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
.batch-api-card small {
  color: var(--ink3);
  display: block;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 4px;
}
.batch-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
  padding: 0 0 20px;
}
.batch-head h1 {
  font-size: 28px;
  margin: 0 0 8px;
}
.batch-head p {
  color: var(--ink3);
  font-size: 13px;
  margin: 0;
}
.batch-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.batch-subbar {
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.batch-result-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.batch-result-head h2 {
  font-size: 20px;
  margin: 0;
}
.batch-result-actions {
  display: flex;
  gap: 8px;
}
.batch-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 22px 24px;
}
.batch-card h3 {
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  margin: 0 0 16px;
  padding-bottom: 12px;
}
.batch-two-col {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.batch-field {
  margin: 0 0 15px;
}
.batch-field:last-child {
  margin-bottom: 0;
}
.batch-field-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
}
.batch-field-text,
.batch-ending,
.batch-preview-box {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
}
.batch-field-text.muted {
  color: var(--ink3);
}
.batch-field-list {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
  padding-left: 18px;
}
.batch-ending {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.batch-meta-line {
  border-bottom: 1px solid var(--border);
  color: var(--ink3);
  font-size: 12px;
  margin: 0 0 18px;
  padding: 0 0 12px;
}
.batch-empty-main,
.batch-error-box,
.batch-preview-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink3);
  font-size: 14px;
  line-height: 1.8;
  padding: 28px;
}
.batch-error-box {
  background: rgba(198, 72, 72, 0.1);
  border-color: rgba(198, 72, 72, 0.35);
  color: var(--red);
  margin-bottom: 14px;
}
.batch-preview-box {
  margin-top: 14px;
}
.batch-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: calc(100vh - 250px);
}
.batch-summary-table {
  background: var(--bg-card);
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1280px;
  width: 100%;
}
.batch-summary-table th,
.batch-summary-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  line-height: 1.7;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.batch-summary-table th {
  background: var(--bg-tint);
  color: var(--ink);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}
.batch-summary-table tbody tr {
  cursor: pointer;
}
.batch-summary-table tbody tr:hover {
  background: var(--brand-soft);
}
.novel-book-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.novel-book {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
  font-family: var(--cn);
  padding: 11px 13px;
  text-align: left;
}
.novel-book.active {
  background: var(--bg-tint);
  border-color: var(--brand);
}
.novel-book-title {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.novel-book-meta {
  color: var(--ink3);
  display: block;
  font-size: 11px;
  margin-top: 3px;
  padding-left: 14px;
}
.novel-dot {
  border-radius: 50%;
  flex-shrink: 0;
  height: 7px;
  width: 7px;
}
.novel-dot.done {
  background: var(--green);
}
.novel-dot.run {
  background: var(--amber);
}
.novel-dot.fail {
  background: var(--red);
}
.novel-dot.idle {
  background: var(--ink4);
}
.novel-empty-small {
  color: var(--ink3);
  font-size: 12px;
  padding: 14px 2px;
}
.novel-run-summary {
  color: var(--ink3);
  font-size: 11.5px;
  margin-bottom: 10px;
}
.novel-primary,
.novel-mini,
.novel-export-current {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--cn);
}
.novel-primary {
  background: var(--brand);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9px;
  padding: 13px;
  width: 100%;
}
.novel-primary:hover {
  background: var(--brand-hover);
}
.novel-primary:disabled,
.novel-mini:disabled,
.novel-export-current:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.novel-primary.compact {
  margin-bottom: 0;
  margin-top: 10px;
  padding: 11px;
}
.novel-btn-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
.novel-mini {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  font-size: 12.5px;
  padding: 9px;
}
.novel-mini.wide {
  width: 100%;
}
.novel-range {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.novel-range-label {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 3px;
}
.novel-range-desc {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.novel-field {
  align-items: center;
  color: var(--ink3);
  display: flex;
  gap: 7px;
}
.novel-num {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 9px;
  width: 76px;
}
.novel-adapt-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.novel-adapt-file {
  border-top: 1px solid var(--border);
  color: var(--ink3);
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  gap: 3px;
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 10px;
}
.novel-adapt-file strong {
  color: var(--ink);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.novel-api {
  border-top: 1px solid var(--border);
  color: var(--ink3);
  font-size: 11.5px;
  margin-top: 22px;
  padding-top: 16px;
}
.novel-api button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-family: var(--cn);
  margin-left: 8px;
}
.novel-node {
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  font-family: var(--cn);
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 11px 14px;
  width: 100%;
}
.novel-node:hover {
  background: var(--bg-soft);
}
.novel-node.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.novel-node-badge {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
}
.novel-node-badge.done {
  background: var(--green-soft);
  color: var(--green);
}
.novel-node-badge.running {
  background: var(--amber-soft);
  color: var(--amber);
}
.novel-result-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.novel-result-head h2 {
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}
.novel-result-head p {
  color: var(--ink3);
  font-size: 12.5px;
  margin-top: 4px;
}
.novel-export-current {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  flex-shrink: 0;
  font-size: 12px;
  padding: 9px 14px;
}
.novel-task-meta {
  border-bottom: 1px solid var(--border);
  color: var(--ink3);
  font-size: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
}
.novel-progress-card,
.novel-overview,
.novel-stage,
.novel-character-card,
.novel-char-table,
.novel-error,
.novel-compare-section,
.novel-compare-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.novel-progress-card {
  margin-bottom: 22px;
  padding: 16px 18px;
}
.novel-progress-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.novel-progress-head strong {
  color: var(--ink);
  font-size: 13px;
}
.novel-progress-head span {
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 11px;
}
.novel-bar {
  background: var(--bg-softer);
  border-radius: 4px;
  height: 7px;
  overflow: hidden;
}
.novel-bar span {
  background:
    linear-gradient(
      90deg,
      var(--brand),
      #d97757);
  display: block;
  height: 100%;
}
.novel-overview {
  background: var(--bg-tint);
  border-color: var(--brand-soft2);
  margin-bottom: 22px;
  padding: 17px 19px;
}
.novel-overview-meta {
  color: var(--ink2);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  gap: 16px;
  margin-bottom: 11px;
}
.novel-overview-meta b {
  color: var(--brand);
}
.novel-gist {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.novel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}
.novel-tags span {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink2);
  font-size: 11.5px;
  padding: 4px 11px;
}
.novel-stage-list,
.novel-character-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.novel-stage {
  overflow: hidden;
}
.novel-stage-head {
  align-items: center;
  background: var(--bg-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 13px 18px;
}
.novel-stage-head strong {
  font-size: 14px;
}
.novel-stage-head span {
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 11px;
}
.novel-stage-body {
  border-top: 1px solid var(--border);
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.85;
  padding: 16px 18px;
  white-space: pre-line;
}
.novel-char-table {
  margin-bottom: 18px;
  overflow: hidden;
}
.novel-table-head,
.novel-table-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 120px 100px 180px minmax(0, 1fr);
  padding: 11px 14px;
}
.novel-table-head {
  background: var(--bg-soft);
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
}
.novel-table-row {
  border-top: 1px solid var(--border);
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.65;
}
.novel-character-card {
  padding: 16px 18px;
}
.novel-character-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.novel-character-head strong {
  font-size: 15px;
}
.novel-character-head span {
  background: var(--sage-soft);
  border-radius: 6px;
  color: var(--sage);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
}
.novel-character-field {
  display: grid;
  gap: 12px;
  grid-template-columns: 110px minmax(0, 1fr);
  margin-top: 8px;
}
.novel-character-field span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
}
.novel-character-field p {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}
.novel-compare-section {
  margin-bottom: 16px;
  padding: 17px 18px;
}
.novel-compare-section h3 {
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 10px;
}
.novel-compare-body {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.8;
}
.novel-compare-body ul {
  margin: 0;
  padding-left: 20px;
}
.novel-compare-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.novel-compare-list.compact {
  gap: 8px;
}
.novel-compare-card {
  padding: 14px 16px;
}
.novel-compare-card h4 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 9px;
}
.novel-compare-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr);
  margin-top: 8px;
}
.novel-compare-row span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
}
.novel-compare-row p {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}
.novel-blank,
.novel-empty-page {
  align-items: center;
  color: var(--ink3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  text-align: center;
}
.novel-blank-icon {
  font-size: 40px;
  margin-bottom: 16px;
  opacity: 0.55;
}
.novel-blank-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
}
.novel-blank-sub {
  font-size: 13px;
  margin-top: 8px;
}
.novel-error {
  background: var(--red-soft);
  border-color: rgba(185, 74, 72, 0.42);
  color: var(--red);
  font-weight: 600;
  margin-bottom: 16px;
  padding: 14px 16px;
}
.analyze-list-section {
  min-height: 220px;
}
.analyze-script-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.analyze-script-item {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  gap: 9px;
  padding: 9px 10px;
  transition: all 0.15s;
}
.analyze-script-item:hover {
  border-color: var(--ink4);
}
.analyze-script-item.active {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.analyze-list-empty {
  color: var(--ink3);
  font-size: 12px;
  padding: 42px 12px;
  text-align: center;
}
.analyze-batch-full {
  margin-top: 10px;
  width: 100%;
}
.btn-outline {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--brand-soft2);
  border-radius: var(--radius);
  color: var(--brand);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 14px;
}
.btn-outline:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.btn-sm:disabled,
.btn-outline:disabled {
  color: var(--ink4);
  cursor: not-allowed;
}
.analyze-tip.compact {
  margin-top: 10px;
}
.analyze-workspace {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.analyze-workspace-head {
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 32px;
}
.analyze-workspace-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.analyze-workspace-meta {
  color: var(--ink3);
  font-size: 12px;
  margin-top: 2px;
}
.analyze-workspace-body {
  display: grid;
  flex: 1;
  grid-template-columns: 176px minmax(0, 1fr);
  min-height: 0;
}
.analyze-tabs-wrap {
  align-items: stretch;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 10px;
}
.analyze-tab {
  appearance: none;
  -webkit-appearance: none;
  align-items: center;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--ink3);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--cn);
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  justify-content: space-between;
  min-height: 40px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
.analyze-tab:hover {
  background: var(--bg-soft);
  color: var(--ink2);
}
.analyze-tab.active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
  color: var(--ink);
}
.analyze-tab-status {
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 6px;
}
.analyze-tab-status.running {
  background: var(--brand-soft);
  color: var(--brand);
}
.analyze-tab-status.done {
  background: var(--green-soft);
  color: var(--green);
}
.analyze-tab-status.failed {
  background: var(--red-soft);
  color: var(--red);
}
.analyze-workspace-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
}
.analyze-workspace-content.full {
  display: flex;
}
.analysis-task-meta {
  border-bottom: 1px solid var(--border);
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  margin-bottom: 20px;
  padding-bottom: 12px;
}
.analyze-workspace-content::-webkit-scrollbar {
  width: 6px;
}
.analyze-workspace-content::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 3px;
}
.analyze-blank {
  align-items: center;
  color: var(--ink3);
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  text-align: center;
}
.analyze-blank-icon {
  align-items: center;
  background: var(--bg-card);
  border: 1px dashed var(--border2);
  border-radius: 50%;
  display: flex;
  font-size: 32px;
  height: 88px;
  justify-content: center;
  margin-bottom: 16px;
  width: 88px;
}
.analyze-blank-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}
.analyze-blank-sub {
  font-size: 13px;
  line-height: 1.8;
}
.queue-dot.pending {
  background: var(--ink4);
  border-color: var(--ink4);
}
.queue-dot.failed,
.queue-dot.blocked {
  background: var(--red);
  border-color: var(--red);
}
.analyze-select,
.analyze-running {
  width: min(760px, calc(100vw - 48px));
  margin: 38px auto;
}
.analyze-select-head,
.analyze-running {
  text-align: center;
}
.analyze-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 8px;
}
.analyze-sub {
  color: var(--ink3);
  font-size: 14px;
}
.analyze-select-grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.analyze-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  text-align: left;
}
.analyze-card-title {
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.analyze-card-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.analyze-card-title-row .analyze-card-title {
  margin-bottom: 0;
}
.analyze-card-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.analyze-text-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 12px;
  padding: 4px 0;
}
.analyze-text-btn:hover {
  color: var(--brand);
}
.analyze-text-btn.danger:hover {
  color: var(--red);
}
.analyze-text-btn:disabled {
  color: var(--ink4);
  cursor: not-allowed;
}
.analyze-import-btn {
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-tint);
  border: 1px dashed var(--brand-soft2);
  border-radius: var(--radius-lg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
  width: 100%;
}
.analyze-import-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.analyze-import-mark {
  align-items: center;
  background: var(--brand);
  border-radius: var(--radius);
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  width: 42px;
}
.analyze-import-btn strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.analyze-import-btn small {
  color: var(--ink3);
  display: block;
  font-size: 12px;
}
.analyze-drama-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}
.analyze-drama-item {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  transition: all 0.12s ease;
}
.analyze-drama-item:hover {
  background: var(--bg-tint);
  border-color: var(--brand-soft2);
}
.analyze-drama-item.selected {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.analyze-drama-item input {
  display: none;
}
.analyze-radio {
  border: 2px solid var(--border2);
  border-radius: 50%;
  flex-shrink: 0;
  height: 16px;
  position: relative;
  width: 16px;
}
.analyze-drama-item.selected .analyze-radio {
  border-color: var(--brand);
}
.analyze-drama-item.selected .analyze-radio::after {
  background: var(--brand);
  border-radius: 50%;
  content: "";
  inset: 3px;
  position: absolute;
}
.analyze-drama-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.analyze-drama-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.analyze-drama-meta {
  color: var(--ink3);
  font-size: 12px;
}
.analyze-run-panel {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: 220px minmax(0, 1fr);
  margin-top: 16px;
}
.analyze-run-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-api-strip {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
}
.analyze-api-strip-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.analyze-api-strip-main span {
  color: var(--ink3);
  font-size: 11px;
}
.analyze-api-strip-main strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analyze-api-strip-main small {
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analyze-settings-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--cn);
  font-size: 13px;
  padding: 8px 12px;
}
.analyze-settings-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft2);
  color: var(--brand);
}
.analyze-start-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--brand);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: #fff;
  cursor: pointer;
  font-family: var(--cn);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  width: 100%;
}
.analyze-start-btn:hover:not(:disabled) {
  background: var(--brand-hover);
  box-shadow: var(--shadow);
}
.analyze-start-btn:disabled {
  background: var(--ink4);
  cursor: not-allowed;
  opacity: 0.65;
}
.analyze-batch-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--brand-soft2);
  border-radius: var(--radius);
  color: var(--brand);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  width: 100%;
}
.analyze-batch-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.analyze-tip {
  color: var(--ink3);
  font-size: 12px;
  margin-top: 12px;
  text-align: center;
}
.analyze-running {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 36px;
}
.analyze-task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 24px 0 18px;
  text-align: left;
}
.analyze-task {
  align-items: center;
  border-radius: var(--radius);
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}
.analyze-task.done {
  background: var(--green-soft);
}
.analyze-task.running {
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 600;
}
.analyze-task.pending {
  background: var(--bg-soft);
  color: var(--ink3);
}
.analyze-task-mark {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 22px;
}
.analyze-task-name {
  flex: 1;
}
.analyze-task-status {
  color: var(--ink3);
  font-size: 12px;
}
.analyze-running-meta {
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}
.analyze-stop-btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  font-family: var(--cn);
  padding: 11px 14px;
  width: 100%;
}
.analyze-result {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.analyze-result-head {
  align-items: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 28px;
}
.analyze-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.analyze-result-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
}
.analyze-result-meta {
  color: var(--ink3);
  font-size: 12px;
  margin-top: 2px;
}
.analyze-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  font-size: 12px;
  padding: 7px 12px;
}
.analyze-back-btn:hover {
  background: var(--bg-soft);
  border-color: var(--border2);
}
.analyze-result-body {
  display: grid;
  flex: 1;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 0;
}
.analyze-toc {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 12px;
}
.toc-drama-panel {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.toc-drama-title {
  align-items: center;
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  padding: 4px 8px 2px;
}
.toc-drama-title span:last-child {
  color: var(--ink4);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.toc-drama-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
}
.toc-drama-item {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--cn);
  gap: 2px;
  padding: 8px 9px;
  text-align: left;
  transition: all 0.1s ease;
  width: 100%;
}
.toc-drama-item:hover {
  background: var(--bg-card);
  border-color: var(--border);
}
.toc-drama-item.active {
  background: var(--brand-soft);
  border-color: var(--brand-soft2);
}
.toc-drama-row {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}
.toc-drama-dot {
  border-radius: 50%;
  flex-shrink: 0;
  height: 7px;
  width: 7px;
}
.toc-drama-dot.pending {
  background: var(--ink4);
}
.toc-drama-dot.running {
  background: var(--amber);
}
.toc-drama-dot.done {
  background: var(--green);
}
.toc-drama-dot.failed,
.toc-drama-dot.blocked {
  background: var(--red);
}
.toc-drama-name {
  color: var(--ink);
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-drama-meta {
  color: var(--ink3);
  font-size: 11px;
  padding-left: 14px;
}
.toc-title {
  align-items: center;
  color: var(--ink3);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.5px;
  padding: 4px 12px 12px;
}
.toc-item,
.toc-subitem {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  font-family: var(--cn);
  text-align: left;
  transition: all 0.1s ease;
  width: 100%;
}
.toc-item {
  align-items: center;
  display: flex;
  font-size: 14px;
  gap: 8px;
  justify-content: flex-start;
  padding: 9px 12px;
}
.toc-subitem {
  font-size: 13px;
  padding: 7px 10px;
}
.toc-item:hover,
.toc-subitem:hover {
  background: var(--bg-card);
  color: var(--ink);
}
.toc-icon {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  justify-content: center;
  width: 18px;
}
.toc-chevron {
  color: var(--ink3);
  font-size: 10px;
  margin-left: auto;
}
.toc-status {
  border-radius: 999px;
  flex-shrink: 0;
  font-size: 10px;
  margin-left: auto;
  padding: 2px 7px;
}
.toc-status.running {
  background: var(--brand-soft);
  color: var(--brand);
}
.toc-status.done {
  background: var(--green-soft);
  color: var(--green);
}
.toc-status.pending {
  background: var(--bg);
  color: var(--ink4);
}
.toc-status + .toc-chevron {
  margin-left: 6px;
}
.toc-item.active,
.toc-subitem.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.toc-sublist {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 7px 14px;
  max-height: 280px;
  overflow-y: auto;
  padding-left: 10px;
}
.toc-subnote {
  color: var(--ink4);
  font-size: 11px;
  padding: 6px 10px;
}
.toc-footer {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}
.toc-export {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  font-family: var(--cn);
  padding: 10px;
  width: 100%;
}
.toc-export:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft2);
  color: var(--brand);
}
.analyze-content {
  background: var(--bg);
  overflow-y: auto;
  padding: 32px 40px;
}
.analyze-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1080px;
}
.analyze-page-head h2 {
  border-bottom: 2px solid var(--border);
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  padding-bottom: 12px;
}
.analyze-page-desc {
  color: var(--ink3);
  font-size: 13px;
  margin-top: 10px;
}
.analyze-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-status-panel {
  align-items: center;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft2);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}
.analyze-status-panel strong {
  color: var(--ink);
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}
.analyze-status-panel span {
  color: var(--ink3);
  font-size: 12px;
}
.analyze-label {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.analyze-label-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.analyze-count {
  color: var(--ink3);
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
}
.analyze-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink);
  line-height: 1.78;
  padding: 18px 20px;
  white-space: pre-line;
  word-break: break-word;
}
.analyze-box.short {
  background: var(--bg-tint);
  border-color: var(--brand-soft2);
  font-size: 15px;
  font-weight: 600;
}
.analyze-box.error {
  background: var(--red-soft);
  border-color: rgba(185, 74, 72, 0.42);
  color: var(--red);
  font-weight: 600;
}
.analyze-box.tag-box {
  display: inline-flex;
  width: fit-content;
}
.episode-outline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.episode-outline-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.episode-outline-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
}
.episode-outline-head strong {
  color: var(--ink);
  font-size: 15px;
}
.episode-outline-head span {
  background: var(--bg-tint);
  border-radius: 999px;
  color: var(--brand);
  font-size: 11px;
  padding: 3px 9px;
}
.episode-jump-btn {
  background: var(--bg-tint);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--brand);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 10px;
}
.episode-jump-btn:hover {
  border-color: var(--brand-soft2);
}
.episode-outline-short {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: 10px;
}
.episode-outline-layers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.episode-outline-layer {
  line-height: 1.75;
}
.episode-outline-layer.short {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.episode-outline-layer.paragraph {
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding-top: 9px;
}
.episode-outline-layer.detail {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.episode-outline-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
}
.episode-outline-paragraph {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.75;
  margin-bottom: 10px;
  white-space: pre-line;
}
.episode-outline-detail {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.75;
  margin-top: 4px;
  white-space: pre-line;
}
.episode-outline-ending {
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 12px;
  padding-top: 10px;
  white-space: pre-line;
}
.first-episode-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.first-episode-section-head {
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
}
.first-episode-section-head h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.first-episode-section-head span {
  color: var(--ink3);
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
}
.first-episode-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.first-episode-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.first-episode-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.first-episode-field.wide {
  grid-column: 1 / -1;
}
.first-episode-field-key {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.first-episode-field-value {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.78;
  white-space: pre-line;
  word-break: break-word;
}
.first-episode-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.7;
  list-style: disc;
  margin: 0;
  padding-left: 18px;
}
.first-episode-empty {
  color: var(--ink3);
}
.first-episode-ending {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  white-space: pre-line;
  word-break: break-word;
}
.episode-overview-table .character-table-head,
.episode-overview-table .character-table-row {
  grid-template-columns: 92px minmax(280px, 1.5fr) minmax(260px, 1fr);
}
.episode-overview-row {
  text-align: left;
}
.episode-scene-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.episode-scene-row {
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: 84px minmax(0, 1fr);
  padding: 12px 14px;
}
.episode-scene-no {
  background: var(--bg-tint);
  border-radius: 999px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  text-align: center;
}
.episode-scene-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.episode-scene-desc {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-line;
}
.analyze-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.analyze-mini-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 13px;
  padding: 8px 14px;
}
.analyze-mini-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft2);
  color: var(--brand);
}
.analyze-mini-btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.analyze-mini-btn.primary:hover {
  background: var(--brand-hover);
  color: #fff;
}
.character-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.character-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.character-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
}
.character-role {
  background: var(--brand-soft);
  border-radius: 999px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 10px;
}
.character-scope {
  background: var(--bg);
  border-radius: 999px;
  color: var(--ink3);
  font-size: 11px;
  margin-left: auto;
  padding: 3px 10px;
}
.character-head strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
}
.character-versions {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
.character-versions.single {
  grid-template-columns: 1fr;
}
.character-version {
  min-width: 0;
}
.character-version-label {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.character-industry-grid {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: 1fr 1fr;
}
.character-industry-grid > div {
  display: flex;
  font-size: 13px;
  gap: 8px;
  min-width: 0;
}
.character-industry-grid .wide {
  grid-column: 1 / -1;
}
.kv-key {
  color: var(--ink3);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  min-width: 36px;
}
.kv-val {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  min-width: 0;
}
.character-full-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.character-full-row {
  background: var(--bg);
  border-radius: var(--radius);
  display: grid;
  gap: 16px;
  grid-template-columns: 80px 1fr;
  padding: 10px 12px;
}
.character-full-key {
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.character-full-val {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.65;
}
.character-table-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.character-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.character-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 960px;
  width: 100%;
}
.character-table th,
.character-table td {
  border-bottom: 1px solid var(--border);
  line-height: 1.65;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.character-table th {
  background: var(--bg-soft);
  color: var(--ink3);
  font-weight: 700;
}
.character-table td {
  color: var(--ink2);
}
.character-table tr:last-child td {
  border-bottom: none;
}
.character-extra,
.character-stats {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}
.character-extra-grid,
.character-stats-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.character-extra-row,
.character-stats-row {
  background: var(--bg);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: 110px 1fr;
  padding: 10px 12px;
}
.character-stats-row.wide {
  grid-column: 1 / -1;
}
.structure-list,
.events-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.structure-episode,
.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.structure-episode-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.structure-episode-num {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--cn);
  font-size: 15px;
  font-weight: 700;
  padding: 0;
}
.structure-episode-num:hover {
  color: var(--brand);
}
.structure-episode-count {
  color: var(--ink3);
  font-size: 12px;
}
.structure-segments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.structure-segment {
  display: grid;
  gap: 12px;
  grid-template-columns: 100px 74px 1fr;
  padding: 6px 0;
  align-items: baseline;
  font-size: 13px;
}
.structure-seg-name {
  color: var(--ink);
  font-weight: 600;
}
.structure-seg-range {
  background: var(--brand-soft);
  border-radius: 999px;
  color: var(--brand);
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  text-align: center;
}
.structure-seg-desc {
  color: var(--ink2);
}
.event-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.event-num {
  background: var(--sage-soft);
  border-radius: 999px;
  color: var(--sage);
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
}
.event-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.event-name {
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
}
.event-range {
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 12px;
}
.event-desc {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.7;
}
.overall-acts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.overall-act {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.overall-act-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.overall-act-name {
  color: var(--ink);
  font-weight: 700;
}
.overall-act-range {
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 12px;
  margin-left: auto;
}
.overall-act-desc {
  color: var(--ink2);
  font-size: 13px;
}
.rhythm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rhythm-list li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  padding: 10px 14px 10px 30px;
  position: relative;
}
.rhythm-list li::before {
  color: var(--brand);
  content: "\25c6";
  font-size: 9px;
  left: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.phase2-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.phase2-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 88px;
  padding: 14px;
}
.phase2-card strong {
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}
.phase2-card span {
  color: var(--ink3);
  font-size: 12px;
}
.analyze-empty {
  color: var(--ink3);
  padding: 48px;
  text-align: center;
}
@media (max-width: 900px) {
  .top-module-tabs {
    margin-left: 0;
  }
  .top-module-tab {
    padding: 6px 10px;
  }
  .analyze-workbench {
    grid-template-columns: 1fr;
  }
  .analyze-workbench-left {
    max-height: 45vh;
  }
  .analyze-workspace-body {
    grid-template-columns: 1fr;
  }
  .analyze-tabs-wrap {
    align-items: center;
    border-bottom: 1px solid var(--border);
    border-right: none;
    flex-direction: row;
    gap: 14px;
    min-height: 52px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0;
    padding-top: 0;
  }
  .analyze-tab {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    height: 52px;
    min-height: 52px;
    padding: 0;
    width: auto;
  }
  .analyze-tab.active {
    background: transparent;
    border-bottom-color: var(--brand);
  }
  .analyze-workspace-head,
  .analyze-tabs-wrap,
  .analyze-workspace-content {
    padding-left: 20px;
    padding-right: 20px;
  }
  .analyze-result-body {
    grid-template-columns: 1fr;
  }
  .analyze-toc {
    border-bottom: 1px solid var(--border);
    border-right: none;
    max-height: 230px;
  }
  .analyze-content {
    padding: 22px;
  }
  .character-versions,
  .phase2-grid,
  .first-episode-grid,
  .character-extra-grid,
  .character-stats-grid,
  .character-industry-grid,
  .analyze-run-panel {
    grid-template-columns: 1fr;
  }
  .character-full-row,
  .character-extra-row,
  .character-stats-row,
  .structure-segment {
    grid-template-columns: 1fr;
  }
  .event-head,
  .overall-act-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .event-range,
  .overall-act-range {
    margin-left: 0;
  }
}

/* src/styles.css */
[hidden] {
  display: none !important;
}
.top-icon-button,
.account-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink2);
  cursor: pointer;
}
.top-icon-button {
  width: 34px;
  padding: 0;
  border-radius: 50%;
}
.account-button {
  gap: 7px;
  max-width: 160px;
  padding: 0 11px;
  border-radius: var(--radius);
  font: 500 12px/1 var(--cn);
}
.top-icon-button:hover,
.account-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.account-button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-chevron {
  flex: 0 0 auto;
  color: var(--ink4);
}
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--bg);
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font: 600 9px/13px var(--cn);
}
.account-popover {
  position: fixed;
  z-index: 410;
  top: 58px;
  right: 18px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 76px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}
.account-menu {
  width: 220px;
  padding: 8px;
}
.account-menu-identity {
  display: grid;
  gap: 3px;
  padding: 9px 10px 11px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.account-menu-identity strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-identity span {
  overflow: hidden;
  color: var(--ink3);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu > button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink2);
  text-align: left;
  cursor: pointer;
}
.account-menu > button:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.popover-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.popover-sub {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
}
.text-button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 11px;
  cursor: pointer;
}
.notification-list {
  max-height: min(540px, calc(100vh - 142px));
  overflow-y: auto;
}
.notification-item {
  display: grid;
  width: 100%;
  gap: 7px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink2);
  text-align: left;
  cursor: pointer;
}
.notification-item:hover {
  background: var(--bg);
}
.notification-item.unread {
  box-shadow: inset 3px 0 0 var(--brand);
  background: var(--bg-tint);
}
.notification-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notification-item-head time {
  color: var(--ink4);
  font: 10px/1 var(--mono);
}
.notification-type {
  color: var(--ink3);
  font-size: 10px;
}
.notification-type.success {
  color: var(--green);
}
.notification-type.failure {
  color: var(--red);
}
.notification-type.security {
  color: var(--brand);
}
.notification-item strong {
  color: var(--ink);
  font-size: 12px;
}
.notification-message {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.notification-empty {
  padding: 42px 20px;
  color: var(--ink4);
  font-size: 12px;
  text-align: center;
}
.auth-overlay {
  position: fixed;
  z-index: 800;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(39, 35, 31, 0.34);
  backdrop-filter: blur(8px);
}
.auth-panel {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}
.compact-auth-panel {
  width: min(390px, 100%);
}
.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  font: 400 24px/1 var(--cn);
}
.auth-close:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.auth-close:focus-visible,
.auth-link:focus-visible,
.password-visibility:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 38px;
  margin-bottom: 24px;
}
.auth-brand h1,
.auth-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}
.auth-brand p,
.auth-panel p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
}
.auth-form {
  display: grid;
  gap: 14px;
}
.auth-flow-heading {
  margin-bottom: 2px;
}
.auth-flow-heading h2 {
  font-size: 18px;
}
.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--ink2);
  font-size: 11px;
}
.auth-form input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--ink);
  font: 13px/1 var(--cn);
}
.password-field {
  position: relative;
  display: block;
}
.password-field input {
  padding-right: 56px;
}
.password-visibility {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 40px;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  font: 500 11px/1 var(--cn);
  transform: translateY(-50%);
}
.password-visibility:hover {
  background: var(--bg-soft);
  color: var(--brand);
}
.auth-form input:focus,
.model-id-input:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.auth-primary {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.auth-primary:disabled {
  cursor: wait;
  opacity: 0.68;
}
.auth-primary:hover {
  background: var(--brand-hover);
}
.auth-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-form .auth-remember {
  display: inline-flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: var(--ink3);
  cursor: pointer;
}
.auth-remember input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand);
}
.auth-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: 500 11px/1.4 var(--cn);
}
.auth-link:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}
.auth-switch {
  margin: 2px 0 0 !important;
  text-align: center;
}
.auth-note {
  color: var(--ink3) !important;
  font-size: 11px !important;
  line-height: 1.65;
}
.auth-error {
  min-height: 18px;
  margin-top: 12px;
  color: var(--red);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
}
body.auth-dialog-open {
  overflow: hidden;
}
.modal-overlay {
  z-index: 820;
}
.modal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.recovery-code {
  padding: 14px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  margin: 18px 0;
  background: var(--brand-soft);
  color: var(--brand-hover);
  font: 600 16px/1.5 var(--mono);
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 820px) {
  .topbar-right {
    gap: 6px;
  }
  .account-button {
    max-width: 94px;
  }
  .version-pill {
    display: none;
  }
  .auth-overlay {
    align-items: end;
    padding: 12px;
  }
  .auth-panel {
    max-height: calc(100vh - 24px);
  }
}