/* v155 product-closure layer: source evidence, similar questions and paper controls */
/* The practice surface is allowed to grow with the selected tool. The
   question column may be taller, but it must not create an implicit empty
   grid row between the three tabs and the scratch/assistant panel. */
.practice-body.canvas-first,
.practice-body.ai-resizing {
  align-items: start !important;
  align-content: start !important;
  grid-template-rows: max-content !important;
  grid-auto-rows: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.practice-body > .practice-side[data-ys-v155-layout="stack"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: start !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  grid-row: auto !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.practice-body > .practice-side[data-ys-v155-layout="stack"] > .side-tool-list {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}
.practice-body > .practice-side[data-ys-v155-layout="stack"] > .scratch-panel:not(.fullscreen),
.practice-body > .practice-side[data-ys-v155-layout="stack"] > .ai-panel:not(.wide) {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
.ys-v155-compose-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.ys-v155-compose-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ys-v155-compose-options input { accent-color: var(--blue); }
.ys-v155-compose-options small,
.ys-v155-compose-count {
  color: var(--muted);
  font-size: 10px;
}
.ys-v155-compose-info {
  flex-basis: 100%;
  color: var(--green);
  font-size: 10px;
  line-height: 1.5;
}
.ys-v155-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -4px 0 10px;
  padding-right: 12px;
}
.ys-v155-similar-action,
.ys-v155-card-similar,
.ys-v155-delete-paper {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.ys-v155-similar-action:hover,
.ys-v155-card-similar:hover,
.ys-v155-delete-paper:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-1px);
}
.ys-v155-card-similar { margin-left: 8px; }
.ys-v155-delete-paper { color: #a34b37; }
.ys-v155-delete-paper:hover { border-color: #b8643d; color: #a34b37; background: color-mix(in srgb, #d07a5e 12%, var(--surface)); }
.paper-card-actions .ys-v155-delete-paper { margin-left: auto; }
.ys-v155-similar-action:focus-visible,
.ys-v155-card-similar:focus-visible,
.ys-v155-delete-paper:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.ys-v155-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(15 23 42 / 52%);
  backdrop-filter: blur(8px);
}
.ys-v155-dialog {
  display: flex;
  width: min(1180px, 100%);
  max-height: min(900px, calc(100dvh - 36px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 100px rgb(0 0 0 / 28%);
}
.ys-v155-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.ys-v155-dialog-head h2 { margin: 5px 0 3px; font-size: 19px; }
.ys-v155-dialog-head p { margin: 0; color: var(--muted); font-size: 11px; }
.ys-v155-dialog-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.ys-v155-evidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 0;
  flex: 1;
}
.ys-v155-evidence-stage {
  min-width: 0;
  min-height: 420px;
  overflow: auto;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-soft) 75%, #000 3%);
}
.ys-v155-evidence-stage-inner {
  position: relative;
  display: inline-block;
  min-width: min(100%, 640px);
  max-width: none;
  vertical-align: top;
}
.ys-v155-evidence-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.ys-v155-evidence-selection {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  min-width: 4px;
  min-height: 4px;
  border: 2px solid #b8643d;
  border-radius: 3px;
  background: rgb(184 100 61 / 16%);
  box-shadow: 0 0 0 9999px rgb(15 23 42 / 10%);
  pointer-events: none;
}
.ys-v155-evidence-status {
  display: grid;
  min-height: 300px;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}
.ys-v155-evidence-status.ok { color: var(--green); }
.ys-v155-evidence-controls {
  min-width: 0;
  overflow: auto;
  padding: 18px;
  border-left: 1px solid var(--line);
}
.ys-v155-evidence-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ys-v155-evidence-nav button,
.ys-v155-evidence-nav input,
.ys-v155-evidence-control input {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.ys-v155-evidence-nav button { padding: 7px 9px; cursor: pointer; }
.ys-v155-evidence-nav button:disabled { opacity: .45; cursor: not-allowed; }
.ys-v155-evidence-nav input { width: 64px; padding: 7px 8px; }
.ys-v155-evidence-nav span { color: var(--muted); font-size: 11px; }
.ys-v155-evidence-control { display: grid; gap: 7px; margin-top: 14px; }
.ys-v155-evidence-control > span,
.ys-v155-evidence-controls > b { color: var(--muted); font-size: 11px; font-weight: 700; }
.ys-v155-evidence-control input { width: 100%; padding: 8px 9px; }
.ys-v155-evidence-crop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ys-v155-evidence-crop-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.ys-v155-evidence-note,
.ys-v155-evidence-message {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.ys-v155-evidence-message.ok { color: var(--green); }
.ys-v155-evidence-message.error { color: #a34b37; }
.ys-v155-upload {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 11px;
  border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--line));
  border-radius: 10px;
  color: var(--blue);
  font-size: 10px;
  line-height: 1.5;
  cursor: pointer;
}
.ys-v155-upload input { width: 100%; font-size: 10px; }
.ys-v155-save {
  width: 100%;
  margin-top: 15px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ys-v155-save:disabled { opacity: .55; cursor: wait; }

.ys-v155-similar-dialog { width: min(980px, 100%); }
.ys-v155-similar-body { min-height: 0; overflow: auto; padding: 17px 22px 22px; }
.ys-v155-similar-summary { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.ys-v155-similar-list { display: grid; gap: 10px; }
.ys-v155-similar-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.ys-v155-similar-item.current { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); }
.ys-v155-similar-item h3 { margin: 0 0 5px; font-size: 12px; }
.ys-v155-similar-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--muted); font-size: 10px; }
.ys-v155-similar-question { max-height: 130px; margin-top: 9px; overflow: auto; color: var(--ink); font-size: 13px; line-height: 1.65; }
.ys-v155-similar-question p { margin: 0 0 7px; }
.ys-v155-similar-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.ys-v155-similar-actions button { white-space: nowrap; }
.ys-v155-vacant { padding: 28px; color: var(--muted); text-align: center; font-size: 12px; }

.ys-v155-toast {
  position: fixed;
  z-index: 14000;
  right: 22px;
  bottom: 22px;
  max-width: min(420px, calc(100vw - 44px));
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 11px;
  line-height: 1.55;
}
.ys-v155-toast.error { border-color: color-mix(in srgb, #b8643d 50%, var(--line)); color: #a34b37; }

/* 题库管理：修复已有题目在缩放和窄卡片中的按钮重叠。 */
.question-bank-grid,
.question-bank-grid > *,
.rerecognize-card { min-width: 0; }
.rerecognize-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.rerecognize-row > div:first-child {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}
.rerecognize-row > div:first-child button {
  position: static;
  display: block;
  max-width: 100%;
  min-width: 0;
  margin-top: 8px;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rerecognize-row .button,
.rerecognize-row button {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rerecognize-row .button + .button { margin-left: 0; }

/* 题目抽屉：操作栏始终留在抽屉底部，题干内容只在中间区域滚动。 */
.question-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.question-drawer .drawer-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.question-drawer .drawer-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  z-index: 3;
  bottom: 0;
  visibility: visible;
  background: var(--surface);
}
.question-drawer .drawer-actions button {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
}

/* 外部 UI 体系可能用全局 button/.button 规则覆盖布局，关键几何属性必须由应用兜底。 */
.question-drawer .drawer-actions,
.question-drawer .drawer-actions button,
.question-drawer .drawer-scroll,
.rerecognize-row,
.rerecognize-row button {
  box-sizing: border-box !important;
}
.question-drawer .drawer-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  float: none !important;
  transform: none !important;
}
.question-drawer .drawer-actions button {
  display: inline-flex !important;
  position: static !important;
  float: none !important;
  flex: 1 1 220px !important;
  transform: none !important;
  visibility: visible !important;
}
.question-drawer .drawer-scroll {
  display: block !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.rerecognize-row {
  display: flex !important;
  flex-wrap: wrap !important;
  float: none !important;
  transform: none !important;
}
.rerecognize-row button {
  position: static !important;
  float: none !important;
  transform: none !important;
  visibility: visible !important;
}

/* AI 配置统一收进顶栏右上角的外观/设置弹窗，练习面板只保留助教功能。 */
.ai-panel .tool-panel-head button[aria-label="AI 设置"] {
  display: none !important;
}
.ys-v155-ai-settings {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.ys-v155-ai-settings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ys-v155-ai-settings-head b { font-size: 12px; }
.ys-v155-ai-settings-head span,
.ys-v155-ai-settings-note,
.ys-v155-ai-settings-actions > span {
  color: var(--muted);
  font-size: 10px;
}
.ys-v155-ai-settings-note { margin: 0; line-height: 1.55; }
.ys-v155-ai-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.ys-v155-ai-settings-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
}
.ys-v155-ai-settings-grid label.ys-v155-ai-key { grid-column: 1 / -1; }
.ys-v155-ai-settings-grid input,
.ys-v155-ai-settings-grid select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
}
.ys-v155-ai-model-control {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.ys-v155-ai-model-control select { flex: 1 1 auto; }
.ys-v155-ai-model-load {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 9px;
  white-space: nowrap;
}
.ys-v155-ai-model-status {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.ys-v155-ai-model-status[data-state="ok"] { color: var(--green); }
.ys-v155-ai-model-status[data-state="error"] { color: var(--red); }
.ys-v155-ai-settings-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.ys-v155-ai-settings-actions .button {
  display: inline-flex !important;
  position: static !important;
  min-height: 34px;
  white-space: nowrap;
}
.ys-v155-ai-settings-actions > span[data-state="ok"] { color: var(--green); }
.ys-v155-ai-settings-actions > span[data-state="error"] { color: var(--red); }

.ys-v155-recognition-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin: -3px 0 13px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.ys-v155-recognition-notice b { color: var(--ink); font-size: 11px; }
.ys-v155-recognition-notice strong { color: var(--red); font-size: 10px; white-space: nowrap; }
.ys-v155-review-quality {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1.2;
}
.ys-v155-review-quality.is-ready,
.ys-v155-review-note.is-ready { color: var(--green); }
.ys-v155-review-quality.is-soft,
.ys-v155-review-note.is-soft { color: #9a641d; }
.ys-v155-review-quality.is-hard,
.ys-v155-review-note.is-hard { color: var(--red); }
.ys-v155-review-quality.is-ready { background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.ys-v155-review-quality.is-soft { background: color-mix(in srgb, #d08a2b 14%, var(--surface)); }
.ys-v155-review-quality.is-hard { background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
.ys-v155-review-note {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.5;
}
.recognition-item.ys-v155-review-blocked { border-color: color-mix(in srgb, var(--red) 48%, var(--line)); }

@media (max-width: 1280px) {
  .question-bank-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .ys-v155-evidence-layout { grid-template-columns: 1fr; }
  .ys-v155-evidence-controls { max-height: 360px; border-top: 1px solid var(--line); border-left: 0; }
  .ys-v155-evidence-stage { min-height: 300px; }
  .ys-v155-similar-item { grid-template-columns: 1fr; }
  .ys-v155-similar-actions { justify-content: flex-start; }
  .ys-v155-ai-settings-grid { grid-template-columns: 1fr; }
  .ys-v155-ai-settings-grid label.ys-v155-ai-key { grid-column: auto; }
  .ys-v155-ai-model-control { flex-wrap: wrap; }
  .ys-v155-ai-model-load { width: 100%; }
  .ys-v155-recognition-notice { grid-template-columns: 1fr; gap: 4px; }
  .ys-v155-recognition-notice strong { white-space: normal; }
}

/* 外部 UI 体系视觉适配桥：外部 CSS 负责资源加载，本地适配负责真正改变应用组件。 */
html[data-external-ui] {
  --ui-font: Inter, "Noto Sans SC", system-ui, sans-serif;
  --ui-primary: #4f46e5; --ui-primary-strong: #3730a3; --ui-primary-soft: #eef2ff;
  --ui-radius: 10px; --ui-border: #d8def0; --ui-shadow: 0 9px 24px rgba(70, 75, 140, .13);
}
:root[data-external-ui="radix"] {
  --ui-font: Inter, "Noto Sans SC", system-ui, sans-serif;
  --ui-primary: #6e56cf; --ui-primary-strong: #5b46b2; --ui-primary-soft: #f0eafd;
  --ui-radius: 10px; --ui-border: #ded9ea; --ui-shadow: 0 10px 28px rgba(80, 63, 128, .12);
}
:root[data-external-ui="material"] {
  --ui-font: Roboto, "Noto Sans SC", system-ui, sans-serif;
  --ui-primary: #6750a4; --ui-primary-strong: #4f378b; --ui-primary-soft: #eee7ff;
  --ui-radius: 4px; --ui-border: #d8d0e7; --ui-shadow: 0 4px 14px rgba(50, 39, 75, .18);
}
:root[data-external-ui="bootstrap"] {
  --ui-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-primary: #0d6efd; --ui-primary-strong: #0a58ca; --ui-primary-soft: #e7f1ff;
  --ui-radius: 6px; --ui-border: #cfd8e3; --ui-shadow: 0 5px 16px rgba(13, 110, 253, .12);
}
:root[data-external-ui="antd"] {
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  --ui-primary: #1677ff; --ui-primary-strong: #0958d9; --ui-primary-soft: #e6f4ff;
  --ui-radius: 6px; --ui-border: #d9e3f0; --ui-shadow: 0 8px 24px rgba(22, 119, 255, .14);
}
:root[data-external-ui="bulma"] {
  --ui-font: "Noto Sans SC", system-ui, sans-serif;
  --ui-primary: #00d1b2; --ui-primary-strong: #00a98f; --ui-primary-soft: #e6fffb;
  --ui-radius: 12px; --ui-border: #d8eee9; --ui-shadow: 0 10px 22px rgba(0, 209, 178, .14);
}
:root[data-external-ui="carbon"] {
  --ui-font: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif;
  --ui-primary: #0f62fe; --ui-primary-strong: #0043ce; --ui-primary-soft: #e5f0ff;
  --ui-radius: 0px; --ui-border: #c6c6c6; --ui-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
:root[data-external-ui="materialize"] {
  --ui-font: Roboto, "Noto Sans SC", sans-serif;
  --ui-primary: #26a69a; --ui-primary-strong: #168277; --ui-primary-soft: #e2f5f3;
  --ui-radius: 5px; --ui-border: #c8e4e1; --ui-shadow: 0 6px 18px rgba(38, 166, 154, .2);
}
:root[data-external-ui="semantic"] {
  --ui-font: Lato, "Noto Sans SC", sans-serif;
  --ui-primary: #2185d0; --ui-primary-strong: #1678c2; --ui-primary-soft: #e8f4ff;
  --ui-radius: 5px; --ui-border: #d5e3ef; --ui-shadow: 0 7px 20px rgba(33, 133, 208, .14);
}
:root[data-external-ui="foundation"] {
  --ui-font: "Open Sans", "Noto Sans SC", sans-serif;
  --ui-primary: #1779ba; --ui-primary-strong: #126195; --ui-primary-soft: #e4f3ff;
  --ui-radius: 0px; --ui-border: #c8dce8; --ui-shadow: 0 5px 15px rgba(23, 121, 186, .14);
}
:root[data-external-ui="shoelace"] {
  --ui-font: Inter, "Noto Sans SC", sans-serif;
  --ui-primary: #006ce9; --ui-primary-strong: #0054b4; --ui-primary-soft: #e8f2ff;
  --ui-radius: 8px; --ui-border: #cddff5; --ui-shadow: 0 9px 24px rgba(0, 108, 233, .14);
}
:root[data-external-ui="openprops"] {
  --ui-font: Manrope, "Noto Sans SC", sans-serif;
  --ui-primary: #7c3aed; --ui-primary-strong: #5b21b6; --ui-primary-soft: #f0eaff;
  --ui-radius: 14px; --ui-border: #e0d5f6; --ui-shadow: 0 12px 30px rgba(124, 58, 237, .14);
}
:root[data-external-ui="pico"] {
  --ui-font: system-ui, -apple-system, "Noto Sans SC", sans-serif;
  --ui-primary: #0172ad; --ui-primary-strong: #01547f; --ui-primary-soft: #e5f5ff;
  --ui-radius: 8px; --ui-border: #c5dce8; --ui-shadow: 0 7px 18px rgba(1, 114, 173, .14);
}
:root[data-external-ui="uikit"] {
  --ui-font: "Noto Sans", "Noto Sans SC", sans-serif;
  --ui-primary: #1e87f0; --ui-primary-strong: #0f6dcc; --ui-primary-soft: #e7f3ff;
  --ui-radius: 7px; --ui-border: #cfe2f6; --ui-shadow: 0 8px 22px rgba(30, 135, 240, .14);
}
:root[data-external-ui="spectre"] {
  --ui-font: system-ui, "Noto Sans SC", sans-serif;
  --ui-primary: #5755d9; --ui-primary-strong: #3f3db3; --ui-primary-soft: #eeedff;
  --ui-radius: 4px; --ui-border: #d5d5ef; --ui-shadow: 0 6px 16px rgba(87, 85, 217, .14);
}
:root[data-external-ui="pure"] {
  --ui-font: "Noto Sans", "Noto Sans SC", sans-serif;
  --ui-primary: #0078e7; --ui-primary-strong: #005fb8; --ui-primary-soft: #e5f2ff;
  --ui-radius: 3px; --ui-border: #c9dfef; --ui-shadow: 0 4px 12px rgba(0, 120, 231, .12);
}
:root[data-external-ui="milligram"] {
  --ui-font: "Roboto", "Noto Sans SC", sans-serif;
  --ui-primary: #9b4dca; --ui-primary-strong: #77319e; --ui-primary-soft: #f5eafe;
  --ui-radius: 4px; --ui-border: #e1d1eb; --ui-shadow: 0 6px 16px rgba(155, 77, 202, .15);
}
:root[data-external-ui="primeflex"] {
  --ui-font: Inter, "Noto Sans SC", sans-serif;
  --ui-primary: #10b981; --ui-primary-strong: #087f5b; --ui-primary-soft: #e4fbf3;
  --ui-radius: 8px; --ui-border: #ccefe1; --ui-shadow: 0 8px 20px rgba(16, 185, 129, .14);
}
:root[data-external-ui="polish"] {
  --ui-font: Inter, "Noto Sans SC", system-ui, sans-serif;
  --ui-primary: #b8643d; --ui-primary-strong: #8f4328; --ui-primary-soft: #fff0e5;
  --ui-radius: 14px; --ui-border: #eaded1; --ui-shadow: 0 12px 30px rgba(80, 45, 25, .12);
}
:root[data-external-ui]:not([data-external-ui="none"]) body {
  font-family: var(--ui-font) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .surface-card {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .button-primary {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-primary) 25%, transparent) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .button-primary:hover {
  background: var(--ui-primary-strong) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .button-ghost,
:root[data-external-ui]:not([data-external-ui="none"]) .icon-button,
:root[data-external-ui]:not([data-external-ui="none"]) .command-trigger {
  border-color: var(--ui-border) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .nav-link.active,
:root[data-external-ui]:not([data-external-ui="none"]) .filter-tab.active {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) input,
:root[data-external-ui]:not([data-external-ui="none"]) select,
:root[data-external-ui]:not([data-external-ui="none"]) textarea {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .appearance-dialog,
:root[data-external-ui]:not([data-external-ui="none"]) .ys-v155-dialog {
  border-color: var(--ui-border) !important;
  border-radius: calc(var(--ui-radius) + 8px) !important;
  box-shadow: 0 22px 60px color-mix(in srgb, var(--ui-primary) 18%, rgba(20, 20, 40, .25)) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .appearance-btn.active {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

/* 让“外部 UI 体系”形成完整的视觉换肤，而不是只改变几个按钮颜色。 */
:root[data-external-ui]:not([data-external-ui="none"]) {
  --blue: var(--ui-primary) !important;
  --blue-dark: var(--ui-primary-strong) !important;
  --blue-soft: var(--ui-primary-soft) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .app-shell {
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--ui-primary-soft) 82%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--ui-primary-soft) 34%, var(--bg)), var(--bg) 54%, color-mix(in srgb, var(--ui-primary-soft) 20%, var(--bg))) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .top-bar {
  border-bottom: 2px solid color-mix(in srgb, var(--ui-primary) 42%, var(--line)) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-primary) 10%, transparent) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .surface-card,
:root[data-external-ui]:not([data-external-ui="none"]) .practice-question-card,
:root[data-external-ui]:not([data-external-ui="none"]) .practice-side-card,
:root[data-external-ui]:not([data-external-ui="none"]) .paper-list-card,
:root[data-external-ui]:not([data-external-ui="none"]) .question-row,
:root[data-external-ui]:not([data-external-ui="none"]) .mistake-card {
  border-top: 3px solid color-mix(in srgb, var(--ui-primary) 55%, var(--ui-border)) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .button-primary {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong)) !important;
  letter-spacing: .01em;
}
:root[data-external-ui]:not([data-external-ui="none"]) .nav-link.active,
:root[data-external-ui]:not([data-external-ui="none"]) .filter-tab.active {
  box-shadow: inset 4px 0 0 var(--ui-primary), 0 5px 16px color-mix(in srgb, var(--ui-primary) 12%, transparent) !important;
}
:root[data-external-ui]:not([data-external-ui="none"]) .practice-tools,
:root[data-external-ui]:not([data-external-ui="none"]) .ai-panel,
:root[data-external-ui]:not([data-external-ui="none"]) .drawer-source {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-primary-soft) 72%, var(--surface)), var(--surface)) !important;
  border-color: color-mix(in srgb, var(--ui-primary) 24%, var(--ui-border)) !important;
}

/* 设置弹窗重新分组：体系选择、AI 配置和基础外观各自形成清晰区块。 */
.appearance-dialog {
  width: min(680px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
.appearance-dialog > .dialog-head {
  position: sticky;
  z-index: 4;
  top: 0;
  padding: 22px 24px 15px !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
.appearance-dialog > .appearance-group {
  margin: 0 24px 14px;
  padding: 15px 16px !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}
.appearance-dialog > .appearance-group:first-of-type { margin-top: 4px; }
.appearance-dialog > .appearance-group > b {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
}
.appearance-style-system .chip-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 !important;
}
.appearance-style-system .appearance-btn {
  width: 100%;
  min-height: 38px;
  margin: 0 !important;
  white-space: nowrap;
}
.external-ui-inline {
  display: grid !important;
  gap: 9px !important;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.external-ui-inline .appearance-subtitle { margin: 0 !important; }
.external-ui-select { width: 100% !important; min-height: 40px; }
.external-ui-search-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.external-ui-directory-status { flex: 1 1 220px; min-width: 0; }
.external-ui-search-button { flex: 0 0 auto; }
.external-ui-results {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
  max-height: 138px;
  overflow: auto;
  padding-right: 3px;
}
.external-ui-results button {
  min-width: 0;
  min-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ys-v155-ui-bridge-note {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.question-row {
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
  grid-template-rows: auto !important;
  grid-template-columns: minmax(90px, 105px) minmax(0, 1fr) minmax(80px, 95px) !important;
}
.question-row-copy,
.question-row-copy .math-text {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.question-row-copy .math-text {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 5px;
}
.appearance-dialog .ys-v155-ai-settings { background: color-mix(in srgb, var(--surface) 80%, var(--surface-soft)); }

@media (max-width: 620px) {
  .appearance-style-system .chip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .external-ui-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}