:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d232b;
  background: #f5f6f8;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
.login { min-height: 100vh; display: grid; place-items: center; }
.login form { width: 340px; display: grid; gap: 12px; }
.login h1 { margin: 0 0 10px; font-size: 28px; }
input, select, textarea {
  width: 100%;
  border: 1px solid #d6dbe2;
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
}
textarea { min-height: 360px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
button {
  border: 0;
  border-radius: 6px;
  background: #1f6feb;
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
}
button.secondary { background: #687281; }
button:disabled { opacity: .45; cursor: not-allowed; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
aside {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #111827;
  color: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
aside h1 { font-size: 20px; margin: 0 0 14px; }
aside button { background: transparent; text-align: left; }
aside button.active { background: #263244; }
.proactive-schedule-aside {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #263244;
  color: #d1d5db;
}
.proactive-schedule-aside h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #f9fafb;
}
.proactive-schedule-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.proactive-schedule-aside li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
}
.proactive-schedule-aside time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #bfdbfe;
}
.proactive-schedule-aside p {
  margin: 0;
  color: #9ca3af;
  font-size: 13px;
}
.panel { min-width: 0; padding: 22px; overflow: auto; }
.panel h2 { margin: 0 0 16px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; max-width: 980px; }
label { display: grid; gap: 5px; font-size: 13px; color: #4b5563; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.actions { display: flex; gap: 10px; align-items: end; }
.character-card .actions button.active { background: #0f4fc7; }
.inline-field { display: grid; grid-template-columns: 1fr 88px; gap: 8px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1f6feb;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}
button:hover:not(:disabled) { filter: brightness(1.06); }

/* LLM 配置页 — 卡片化布局 */
.llm-form {
  display: grid;
  gap: 16px;
  max-width: 1100px;
}
.form-card {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.form-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef1f5;
}
.form-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1d232b;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px 16px;
}
.toggle-check {
  font-weight: 500;
  color: #1d232b;
  background: #eef2f7;
  border-radius: 6px;
  padding: 4px 10px;
}
.analyzer-body {
  display: grid;
  gap: 14px;
}
.analyzer-llm-fields {
  background: #f8f9fb;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  padding: 12px 14px;
}
.llm-section-note {
  margin: 6px 0 0;
  font-size: 13px;
}
.llm-section-actions {
  margin-top: 14px;
}
.key-status {
  align-self: end;
  border: 1px solid #d6dbe2;
  border-radius: 6px;
  background: #f8f9fb;
  padding: 8px 10px;
  font-size: 13px;
  min-height: 37px;
}
.key-status.ok {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.key-status.bad {
  color: #991b1b;
  border-color: #fecaca;
  background: #fef2f2;
}
.is-hidden { display: none !important; }
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(245, 246, 248, 0.4), #f5f6f8);
  padding: 10px 0 4px;
}
.model-list { max-width: 980px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.model-list button { background: #eef2f7; color: #1d232b; }
.model-list small { color: #687281; }
.pi-mode {
  display: grid;
  gap: 16px;
  max-width: 1100px;
}
.pi-topbar {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
}
.pi-upload-card {
  min-height: 180px;
}
.pi-upload-drop {
  min-height: 92px;
  border: 1px dashed #b8c2d1;
  border-radius: 8px;
  background: #f8f9fb;
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  color: #4b5563;
  padding: 20px;
}
.pi-upload-drop strong {
  color: #1d232b;
}
.pi-upload-drop input {
  max-width: 280px;
}
.pill {
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #eef2f7;
  color: #4b5563;
  font-size: 13px;
  padding: 0 8px;
}
.pi-bind-preview {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
  align-items: end;
}
.pi-bind-note {
  margin: 12px 0 0;
}
.pi-terminal-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pi-terminal-stats span {
  border-radius: 999px;
  background: #eef2f7;
  color: #4b5563;
  padding: 4px 9px;
  font-size: 12px;
}
.pi-terminal-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) max-content max-content max-content max-content max-content;
  gap: 10px;
  margin-bottom: 12px;
}
.pi-terminal {
  height: 560px;
  max-height: 560px;
  margin: 0;
  border: 1px solid #d6dbe2;
  border-radius: 8px;
  background: #101820;
  color: #d9e7ef;
  padding: 14px 16px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
}
.pi-console {
  display: grid;
  gap: 12px;
}
.pi-console textarea {
  min-height: 120px;
  max-height: 220px;
}
.novelai-form {
  display: grid;
  gap: 16px;
  max-width: 1100px;
}
.novelai-section .form-card-head .key-status {
  min-width: 132px;
  align-self: center;
}
.novelai-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px 16px;
  margin-top: 14px;
}
.novelai-prompts textarea {
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.regex-form {
  display: grid;
  gap: 16px;
  max-width: 1100px;
}
.regex-scope-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.regex-rule-list {
  display: grid;
  gap: 14px;
}
.regex-rule {
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  background: #f8f9fb;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.regex-rule-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.regex-rule textarea {
  min-height: 92px;
}
.regex-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px 16px;
}
.regex-test-grid textarea {
  min-height: 180px;
}
.muted { color: #687281; }
.user-settings-form { max-width: 820px; }
.user-profile-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: start;
}
.user-avatar-preview {
  width: 132px;
  height: 132px;
  border-radius: 8px;
  background: #eef2f7;
  border: 1px solid #d6dbe2;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.user-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-avatar-preview span {
  color: #4b5563;
  font-size: 42px;
  font-weight: 700;
}
.user-profile-fields {
  display: grid;
  gap: 12px;
}
.debug-toolbar, .mvu-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mvu-toolbar select { width: 180px; }
.status-line { max-width: 980px; min-height: 38px; }
.debug-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.debug-kind-tabs,
.summary-mode-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.debug-kind-tabs button,
.summary-mode-tabs button {
  background: #eef2f7;
  color: #1d232b;
}
.debug-kind-tabs button.active,
.summary-mode-tabs button.active {
  background: #1f6feb;
  color: #fff;
}
.debug-warning {
  margin: 0 0 8px;
  padding: 6px 8px;
  background: #fef3c7;
  border: 1px solid #facc15;
  border-radius: 4px;
  color: #78350f;
  font-size: 12px;
}
.summary-recap-list { display: grid; gap: 10px; }
.summary-recap-item {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 6px;
  padding: 10px 12px;
}
.summary-recap-item.used {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.summary-recap-head {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #687281;
  margin-bottom: 6px;
}
.summary-recap-elapsed { color: #1d4ed8; }
.summary-recap-round { color: #4b5563; }
.summary-recap-used {
  color: #6b7280;
  font-weight: 600;
}
.summary-recap-item pre { margin: 0; }
.summary-recap-text {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  background: #fff;
}
.summary-recap-item.used .summary-recap-text {
  color: #6b7280;
  background: #eef0f3;
  border-color: #d1d5db;
  cursor: default;
}
.summary-recap-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.summary-recap-edited {
  color: #059669;
  font-size: 12px;
}
.time-offset-panel {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.time-offset-panel h3 { margin: 0; }
.time-offset-panel code {
  background: #f0f2f5;
  padding: 1px 4px;
  border-radius: 3px;
}
.trace-list { display: grid; gap: 8px; }
.trace-item {
  background: #fff;
  color: #1d232b;
  border: 1px solid #e1e5eb;
  text-align: left;
  display: grid;
  gap: 4px;
}
.trace-item.error { border-color: #ef4444; }
.trace-item span, .trace-item small { color: #687281; }
.trace-badge {
  display: inline-block;
  margin-left: 6px;
  border-radius: 4px;
  padding: 1px 5px;
  background: #dbeafe;
  color: #1d4ed8 !important;
  font-size: 11px;
  font-weight: 600;
}
.trace-badge-warn {
  background: #fee2e2;
  color: #991b1b !important;
}
.trace-detail { min-width: 0; }
.debug-block {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.debug-block.has-error { border-color: #ef4444; }
.debug-block h3 { margin: 0 0 10px; }
.copy-row { display: flex; gap: 8px; margin-bottom: 10px; }
.message-block { border-top: 1px solid #eef1f5; padding-top: 10px; margin-top: 10px; }
.message-block header { color: #687281; font-size: 13px; margin-bottom: 6px; }
.vector-form {
  display: grid;
  gap: 16px;
  max-width: 1100px;
}
.vector-status-card {
  max-width: 1100px;
  margin-top: 16px;
}
.vector-status-box {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.vector-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
}
.vector-status-grid div {
  background: #f8f9fb;
  border: 1px solid #eef1f5;
  border-radius: 6px;
  padding: 10px;
}
.vector-status-grid dt {
  color: #687281;
  font-size: 12px;
  margin-bottom: 4px;
}
.vector-status-grid dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.vector-warning,
.vector-ok {
  margin: 0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.vector-warning {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.vector-ok {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.vector-progress {
  display: grid;
  gap: 6px;
}
.vector-progress > div {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.vector-progress span {
  display: block;
  height: 100%;
  background: #1f6feb;
}
.vector-progress p {
  margin: 0;
  color: #687281;
  font-size: 13px;
}
.cards, #binding-list, .table { display: grid; gap: 12px; }
.character-layout, .worldbook-layout { display: grid; grid-template-columns: minmax(360px, 520px) 1fr; gap: 14px; align-items: start; }
.character-grid, .worldbook-list, .entry-list { display: grid; gap: 12px; }
.character-card {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 150px 1fr;
}
.character-card img { width: 150px; height: 210px; object-fit: cover; background: #eef2f7; }
.character-card-body { padding: 12px; display: grid; gap: 8px; min-width: 0; }
.character-card .actions {
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.character-card .actions button {
  white-space: nowrap;
  padding-inline: 10px;
}
.summary-list { display: grid; gap: 5px; }
.summary-list p { margin: 0; color: #4b5563; font-size: 13px; }
.summary-list span { color: #687281; margin-right: 6px; }
.worldbook-count { margin: 0; color: #687281; font-size: 13px; }
.character-detail, .worldbook-editor { min-width: 0; }
.detail-card, .entry-card {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 12px;
}
.detail-avatar { width: 100%; max-height: 360px; object-fit: contain; background: #eef2f7; border-radius: 6px; }
.detail-card h3 { margin: 10px 0 4px; }
.field-block { border-top: 1px solid #eef1f5; padding-top: 10px; margin-top: 10px; }
.field-block h4 { margin: 0 0 6px; color: #687281; font-size: 13px; }
.field-block p { margin: 0; white-space: pre-wrap; }
.embedded-panel { display: grid; gap: 12px; }
.embedded-panel h4 { margin: 0; }
.worldbook-toolbar, .editor-title { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.compact-toolbar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 10px; }
.compact-toolbar span { margin-right: auto; color: #687281; }
.worldbook-toolbar input { width: 260px; }
.worldbook-item {
  background: #fff;
  color: #1d232b;
  border: 1px solid #e1e5eb;
  text-align: left;
  display: grid;
  gap: 4px;
}
.worldbook-item.active { border-color: #1f6feb; }
.worldbook-item span, .worldbook-item small, .editor-title span { color: #687281; }
.editor-title { justify-content: space-between; }
.entry-card { display: grid; gap: 10px; }
.entry-card.compact { padding: 0; overflow: hidden; }
.entry-summary {
  width: 100%;
  background: #fff;
  color: #1d232b;
  display: grid;
  grid-template-columns: 18px minmax(170px, 1fr) 120px 80px 88px minmax(220px, 2fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
}
.entry-summary small {
  color: #687281;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.entry-enabled { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.entry-enabled.on { background: #16a34a; }
.entry-enabled.off { background: #9ca3af; }
.entry-card header { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid #eef1f5; padding-bottom: 8px; }
.collapse-button { background: #eef2f7; color: #1d232b; }
.entry-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.entry-actions button { background: #eef2f7; color: #1d232b; }
.entry-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px; }
.entry-grid textarea { min-height: 92px; }
.entry-card > label textarea[data-entry-field="content"] { min-height: 260px; max-height: 55vh; }
.card, .row {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 12px;
}
.card { display: grid; gap: 10px; }
.card img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
.binding-form { grid-template-columns: repeat(4, minmax(160px, 1fr)); align-items: end; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { white-space: pre-wrap; background: #f0f2f5; padding: 10px; border-radius: 6px; overflow: auto; }
.prompt-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  border-bottom: 1px solid #e1e5eb;
  padding-bottom: 10px;
  max-width: 1100px;
}
.prompt-kind-tabs button {
  background: #eef2f7;
  color: #1d232b;
}
.prompt-kind-tabs button.active {
  background: #1f6feb;
  color: #fff;
}
.preset-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 12px;
}
.preset-toolbar label { gap: 4px; min-width: 200px; }
.preset-toolbar .grow { flex: 1; }
.preset-toolbar select, .preset-toolbar input { min-width: 0; }

.block-list {
  display: grid;
  gap: 10px;
  max-width: 1100px;
  margin-bottom: 14px;
}

.block-card {
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}
.block-card.block-marker { background: #f3f5f9; border-color: #d6dbe5; }
.block-card.block-disabled { opacity: 0.55; }
.block-marker-prefix { min-height: 76px; }

.block-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.block-head .grow { flex: 1; }
.block-name { width: 200px; }
.block-role { width: 110px; }
.block-head .check { margin-left: 4px; }
.block-head button { padding: 4px 10px; font-size: 13px; }

.block-badge {
  background: #e6effd;
  color: #1f6feb;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.block-badge-custom { background: #fef3c7; color: #92400e; }

.block-marker-hint {
  color: #4b5563;
  font-size: 13px;
  background: #fff;
  border: 1px dashed #d6dbe5;
  border-radius: 6px;
  padding: 8px 10px;
}
.block-marker-hint code { background: #eef2f7; padding: 2px 6px; border-radius: 4px; }

.block-content { min-height: 110px; max-height: 360px; }

.add-block-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 1100px;
  margin-bottom: 14px;
}
.add-block-row select { flex: 1; min-width: 240px; }

.prompt-template-card {
  max-width: 1100px;
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.prompt-template-card h3 { margin: 0; font-size: 15px; }
.prompt-template-text { min-height: 520px; }

.character-proactive-toggle {
  justify-self: start;
  color: #1d232b;
}

.mvu-schema-heading {
  margin-top: 24px;
}

.mvu-cleanup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  max-width: 620px;
}

.mvu-snapshot-list {
  display: grid;
  gap: 8px;
  max-width: 720px;
}

.mvu-snapshot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  padding: 10px 12px;
}

.mvu-snapshot-row div {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

.mvu-snapshot-row span,
.mvu-snapshot-row small {
  color: #687281;
}

#mvu-schema-json {
  width: 100%;
  min-height: 240px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.status-line {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(80, 80, 80, 0.85);
  white-space: pre-wrap;
}

.danger {
  background: rgba(180, 60, 60, 0.85);
  color: #fff;
}

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  aside { height: auto; max-height: 70vh; z-index: 1; }
  .grid, .binding-form { grid-template-columns: 1fr; }
  .character-layout, .worldbook-layout { grid-template-columns: 1fr; }
  .character-card { grid-template-columns: 110px 1fr; }
  .character-card img { width: 110px; height: 160px; }
  .entry-grid { grid-template-columns: 1fr; }
  .entry-summary { grid-template-columns: 18px 1fr; }
  .entry-summary span:not(.entry-enabled), .entry-summary small { grid-column: 2; }
  .debug-layout { grid-template-columns: 1fr; }
  .novelai-prompts { grid-template-columns: 1fr; }
  .pi-topbar, .pi-terminal-actions { grid-template-columns: 1fr; }
  .pi-terminal { height: 420px; max-height: 420px; }
  .mvu-cleanup-grid { grid-template-columns: 1fr; }
  .mvu-snapshot-row { align-items: stretch; flex-direction: column; }
}