:root {
  --ink: #102033;
  --navy: #0a2540;
  --muted: #6d7c90;
  --line: #dfe6ef;
  --paper: #ffffff;
  --canvas: #f5f7fa;
  --violet: #5a55dc;
  --cyan: #0d9bb3;
  --green: #0d8b63;
  --amber: #c9790d;
  --rose: #c54b75;
  --shadow: 0 12px 28px rgba(16, 32, 51, .07);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

.mistake-hero { padding-bottom: 38px; margin-bottom: 0; }
.mistake-hero::after { height: 38px; }
.mistake-hero .nav { padding: 20px 0 31px; }
.workspace-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(510px, .92fr); gap: 30px; align-items: end; position: relative; z-index: 1; }
.workspace-title .eyebrow { color: rgba(255, 255, 255, .64); }
.eyebrow { margin: 0; color: #8290a2; font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.2; }
.workspace-title h1 { margin: 8px 0 7px; color: #fff; font-size: 44px; line-height: 1.06; font-weight: 800; letter-spacing: 0; }
.head-note { margin: 0; color: rgba(255, 255, 255, .79); font-size: 15px; }

.build-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 8px; background: #fff; box-shadow: 0 14px 28px rgba(5, 19, 34, .16); }
.build-panel-label { display: inline-flex; align-items: center; gap: 7px; padding-right: 2px; color: #44566b; font-size: 11px; font-weight: 800; white-space: nowrap; }
.build-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px #eeedff; }
.build-settings { display: grid; grid-template-columns: minmax(88px, .85fr) minmax(128px, 1.15fr) minmax(66px, .7fr); gap: 7px; min-width: 0; }
select, input { width: 100%; height: 38px; outline: none; border: 1px solid #d9e1eb; border-radius: 6px; color: var(--ink); background: #fff; padding: 0 10px; font-size: 12px; }
select:focus, input:focus { border-color: #9aa7ff; box-shadow: 0 0 0 3px rgba(90, 85, 220, .11); }
.mode-switch { display: inline-flex; min-width: 0; gap: 2px; padding: 3px; border-radius: 6px; background: #eef1f5; }
.mode-btn, .filter-btn { border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 760; }
.mode-btn { flex: 1; min-width: 0; border-radius: 4px; color: #647487; }
.mode-btn.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(16, 32, 51, .12); }
.build-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.build-btn, .dark-btn { height: 38px; border: 0; border-radius: 6px; background: var(--navy); color: #fff; padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 800; white-space: nowrap; transition: transform .16s ease, background .16s ease; }
.build-btn:hover, .dark-btn:hover { background: #133858; transform: translateY(-1px); }
.build-btn:disabled, .dark-btn:disabled { cursor: wait; opacity: .62; transform: none; }
.build-btn.is-ready { background: var(--green); }.build-btn.is-ready:hover { background: #087552; }
.build-entitlement { grid-column: 1 / -1; min-height: 14px; margin: -4px 2px 0; color: #68798c; font-size: 10px; font-weight: 700; line-height: 1.35; }
.build-entitlement.is-locked { color: #9b5b11; }

.mistake-main { padding: 30px 0 108px; }
.summary-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: stretch; }
.summary-cell { min-height: 116px; padding: 17px 18px; border: 1px solid; border-radius: 8px; text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.summary-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.summary-cell span { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 760; }
.summary-cell strong { display: block; font-size: 30px; line-height: 1; font-weight: 820; letter-spacing: 0; }
.summary-cell small { display: block; margin-top: 9px; font-size: 11px; font-weight: 620; }
.summary-review { border-color: #f3d7a8; color: #9a5d08; background: #fff9ed; }
.summary-total { border-color: #d8d6f5; color: #4741b5; background: #f7f6ff; }
.summary-mastered { border-color: #bde6d8; color: #087a57; background: #effbf6; }
.summary-state { display: inline-flex; align-items: center; align-self: center; gap: 8px; padding: 0 2px 0 8px; color: #6f7e90; font-size: 12px; font-weight: 700; white-space: nowrap; }
.summary-state i { width: 8px; height: 8px; border-radius: 50%; background: #13a66b; box-shadow: 0 0 0 5px rgba(19, 166, 107, .12); }

.focus-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr); gap: 18px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.analysis-strip, .intake { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 5px 14px rgba(16, 32, 51, .035); }
.analysis-strip { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; padding: 21px; border-top: 3px solid var(--violet); }
.intake { padding: 21px; border-top: 3px solid var(--cyan); }
.section-intro h2 { margin: 6px 0 0; font-size: 21px; line-height: 1.1; letter-spacing: 0; font-weight: 800; }
.section-intro > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.section-intro .capacity-note { margin-top: 5px; color: #4b5ed0; font-size: 10px; font-weight: 760; }
.section-intro .capacity-note.is-full { color: #a3600d; }
.weakness-list { display: flex; gap: 9px; align-items: stretch; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.weakness-card { min-width: 190px; max-width: 245px; flex: 1; padding: 12px; border-radius: 6px; background: #f7f7ff; border: 1px solid #e2e1f8; }
.weakness-card:nth-child(3n + 2) { background: #effafb; border-color: #cde9ed; }
.weakness-card:nth-child(3n) { background: #fff8ef; border-color: #f2dfbd; }
.weakness-card strong { display: block; margin-bottom: 9px; color: #394b60; font-size: 12px; }
.weakness-points { display: flex; flex-wrap: wrap; gap: 5px; }
.weakness-points span { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 6px; border-radius: 4px; background: rgba(255, 255, 255, .78); color: #53667c; font-size: 10px; font-weight: 650; }
.empty-inline { align-self: center; margin: 0; color: #8b98a9; font-size: 12px; line-height: 1.6; }

.intake-workspace { display: grid; grid-template-columns: minmax(176px, .78fr) minmax(0, 1.22fr); min-height: 150px; margin-top: 16px; border: 1px dashed #9bd6e0; border-radius: 6px; overflow: hidden; background: #fbfeff; }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 150px; padding: 18px; border-right: 1px dashed #a8d9e0; color: var(--ink); background: #eefbfd; cursor: pointer; transition: background .18s, box-shadow .18s; }
.drop-zone:hover, .drop-zone.is-drag { background: #e1f8fb; box-shadow: inset 0 0 0 1px #48b6c5; }
.drop-icon { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 50%; color: #fff; background: var(--cyan); font-size: 22px; font-weight: 350; line-height: 1; }
.drop-zone strong { font-size: 14px; font-weight: 800; }.drop-zone small { color: #637f8b; font-size: 11px; }
.import-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; padding: 16px; }
.import-form label { display: grid; gap: 6px; color: #637287; font-size: 10px; font-weight: 800; }
.import-form input, .import-form select { min-width: 0; }
.selected-file { display: flex; grid-column: 1 / -1; align-items: center; min-width: 0; height: 28px; overflow: hidden; color: #8190a2; font-size: 11px; }
.selected-file.has-file { height: 37px; gap: 8px; color: #506277; }
.selected-file img { width: 37px; height: 37px; flex: 0 0 auto; border: 1px solid #cfe3e8; border-radius: 4px; object-fit: cover; }
.selected-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.selected-file b { color: #29465c; }
.import-form .dark-btn { grid-column: 1 / -1; width: 100%; }

.download-sheet[hidden] { display: none; }
.download-sheet { position: fixed; z-index: 40; inset: 0; display: grid; align-items: end; justify-items: center; padding: 20px; background: rgba(7, 20, 35, .48); }
.download-card { width: min(580px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: auto; padding: 22px; border: 1px solid rgba(255, 255, 255, .74); border-radius: 8px; background: #fff; box-shadow: 0 24px 60px rgba(5, 19, 34, .28); }
.download-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.download-head h2 { margin: 6px 0 0; font-size: 22px; line-height: 1.15; letter-spacing: 0; }.download-head > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sheet-close { flex: 0 0 auto; height: 30px; padding: 0 9px; border: 1px solid #d9e1eb; border-radius: 5px; color: #5a6d82; background: #fff; cursor: pointer; font-size: 11px; font-weight: 760; }.sheet-close:hover { border-color: #9caafd; color: var(--violet); }
.download-files { display: grid; gap: 10px; padding: 15px 0 12px; }.download-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: center; padding: 13px; border: 1px solid #e0e7ef; border-radius: 7px; background: #fbfcfe; }.download-file-icon { display: grid; width: 34px; height: 38px; place-items: center; border: 1px solid #ced8e5; border-radius: 5px; color: #416077; background: #fff; font-size: 9px; font-weight: 850; }.download-file-main { min-width: 0; }.download-file-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.download-file-main small { display: block; margin-top: 4px; color: #7a8b9f; font-size: 10px; }
.download-file-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.file-action { min-height: 29px; padding: 0 8px; border: 1px solid #d5dfea; border-radius: 4px; color: #40566d; background: #fff; cursor: pointer; font-size: 10px; font-weight: 780; }.file-action:hover { border-color: #9faaff; color: var(--violet); }.file-action.primary { border-color: var(--navy); color: #fff; background: var(--navy); }.file-action.primary:hover { border-color: #133858; color: #fff; background: #133858; }.file-action:disabled { cursor: wait; opacity: .62; }
.download-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: #7c8c9e; font-size: 10px; line-height: 1.55; }
.image-sheet[hidden] { display: none; }.image-sheet { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7, 20, 35, .72); }.image-card { width: min(920px, 100%); max-height: calc(100dvh - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 8px; background: #101f30; box-shadow: 0 24px 60px rgba(0, 0, 0, .38); }.image-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px 11px 16px; color: #fff; font-size: 12px; }.image-card img { display: block; max-width: 100%; max-height: calc(100dvh - 104px); margin: auto; background: #08111c; object-fit: contain; }

.library { padding-top: 36px; }.library-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 17px; }.library-tools { display: flex; align-items: center; gap: 8px; }.library-tools select { width: 142px; }
.library-filter { display: inline-flex; gap: 3px; padding: 3px; border-radius: 6px; background: #e9eef4; }.filter-btn { height: 30px; padding: 0 9px; border-radius: 4px; color: #718196; }.filter-btn.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(16, 32, 51, .11); }
.library-surface { overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--violet); border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(16, 32, 51, .035); }.library-surface-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 17px 13px; border-bottom: 1px solid var(--line); }.source-kicker { display: block; margin-bottom: 5px; color: #8d9aad; font-size: 10px; font-weight: 850; letter-spacing: .12em; }.library-surface-head h3 { margin: 0; font-size: 17px; line-height: 1; font-weight: 790; }.count-chip { display: inline-grid; min-width: 28px; height: 24px; place-items: center; padding: 0 7px; border-radius: 5px; color: #4c5f78; background: #edf2f6; font-size: 12px; font-weight: 780; }
.list-scroll { min-height: 190px; max-height: 540px; overflow-y: auto; scrollbar-color: #c9d3df transparent; scrollbar-width: thin; }.list-scroll::-webkit-scrollbar { width: 8px; }.list-scroll::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background: #c9d3df; }
.mistake-list { padding: 0 17px; }.mistake-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #e8edf2; }.mistake-card.no-image { grid-template-columns: minmax(0, 1fr); }.mistake-card:last-child { border-bottom: 0; }.mistake-image { width: 50px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dfe7ef; border-radius: 4px; background: #f3f7fa; color: #91a0b1; font-size: 10px; text-align: center; }.mistake-image.image-open { padding: 0; cursor: zoom-in; }.mistake-image.image-open:hover { border-color: #91a4ff; }.mistake-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .16s ease; }.mistake-image.image-open:hover img { transform: scale(1.04); }.mistake-card-main { min-width: 0; }.mistake-row { display: flex; gap: 8px; align-items: start; justify-content: space-between; }.mistake-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 770; }.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #e1a02d; box-shadow: 0 0 0 3px #fff7e9; }.status-dot.mastered { background: #a8b4c1; box-shadow: 0 0 0 3px #f1f4f7; }.mistake-meta { margin-top: 3px; color: #8190a2; font-size: 10px; }.mistake-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }.problem-toggle { display: inline-flex; align-items: center; gap: 5px; color: #5d6e82; cursor: pointer; font-size: 10px; font-weight: 730; user-select: none; }.problem-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.problem-toggle span { width: 13px; height: 13px; display: inline-grid; place-items: center; border: 1px solid #b9c6d4; border-radius: 3px; background: #fff; }.problem-toggle input:checked + span { border-color: var(--amber); background: var(--amber); }.problem-toggle input:checked + span::after { content: ""; width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translateY(-1px); }.problem-toggle:hover, .text-action:hover { color: var(--violet); }.text-action { padding: 0; border: 0; color: #5d6e82; background: transparent; cursor: pointer; font-size: 10px; font-weight: 730; }.text-action.delete:hover { color: #b53d55; }.analysis-preview { margin-top: 6px; color: #5d6e82; font-size: 10px; line-height: 1.45; }.analysis-preview p { margin: 0 0 4px; }.analysis-preview.is-pending { color: #8d99a8; }.kp-tags { display: flex; flex-wrap: wrap; gap: 4px; }.kp-tags span { padding: 2px 5px; border-radius: 3px; color: #476377; background: #eaf3f5; }.source-empty { margin: 0; padding: 28px 0; color: #8a98a9; font-size: 12px; line-height: 1.6; }

.mistake-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.origin-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 5px; border-radius: 4px; font-size: 9px; font-weight: 780; line-height: 1.2; }
.origin-tag.matched { color: #276b59; background: #e8f8f0; }
.origin-tag.classified { color: #3f4db0; background: #eef0ff; }
.origin-tag.pending { color: #98610b; background: #fff5df; }
.source-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 5px; border-radius: 4px; font-size: 9px; font-weight: 780; line-height: 1.2; }.source-tag.search { color: #514bb6; background: #eeedff; }.source-tag.manual { color: #9d4263; background: #fff0f5; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: calc(100vw - 36px); transform: translate(-50%, 16px); padding: 10px 13px; border-radius: 6px; opacity: 0; pointer-events: none; color: #fff; background: #102033; box-shadow: 0 14px 32px rgba(16,32,51,.24); font-size: 12px; font-weight: 700; transition: opacity .18s, transform .18s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast.error { background: #a92d45; }.toast.success { background: #087f5b; }

@media (max-width: 980px) { .workspace-head { grid-template-columns: 1fr; gap: 21px; }.build-panel { max-width: 700px; }.focus-grid { grid-template-columns: 1fr; }.analysis-strip { grid-template-columns: 165px minmax(0, 1fr); } }
@media (max-width: 700px) { .mistake-hero { padding-bottom: 27px; }.mistake-hero::after { height: 27px; }.mistake-hero .nav { padding: calc(13px + env(safe-area-inset-top)) 0 24px; }.mistake-hero .nav nav { display: none; }.workspace-title h1 { font-size: 35px; }.head-note { font-size: 14px; }.build-panel { grid-template-columns: 1fr auto; gap: 10px; padding: 10px; }.build-panel-label { grid-column: 1 / -1; }.build-settings { grid-template-columns: 1fr 1.25fr .75fr; }.build-btn { padding: 0 12px; }.summary-rail { grid-template-columns: repeat(3, 1fr); }.summary-cell { min-height: 108px; padding: 14px 11px; }.summary-cell strong { font-size: 26px; }.summary-cell small { min-height: 25px; line-height: 1.35; }.summary-state { display: none; }.focus-grid { gap: 14px; padding: 23px 0; }.analysis-strip { grid-template-columns: 1fr; gap: 13px; padding: 18px; }.intake { padding: 18px; }.intake-workspace { grid-template-columns: 1fr; }.drop-zone { min-height: 130px; border-right: 0; border-bottom: 1px dashed #a8d9e0; }.library { padding-top: 29px; }.library-head { align-items: start; flex-direction: column; gap: 13px; }.library-tools { width: 100%; }.library-tools select { flex: 1; width: auto; }.library-filter { flex: 0 0 auto; }.filter-btn { padding: 0 7px; }.list-scroll { max-height: 400px; }.download-sheet { padding: 12px; }.download-card { max-height: calc(100dvh - 24px); padding: 18px; }.download-head h2 { font-size: 20px; }.download-file { padding: 11px; } }
@media (max-width: 410px) { .build-settings { grid-template-columns: 1fr; }.build-panel { grid-template-columns: 1fr; }.build-actions, .build-btn { width: 100%; }.summary-cell span { font-size: 11px; }.summary-cell small { font-size: 10px; }.library-tools { align-items: stretch; flex-direction: column; }.library-tools select { flex: none; width: 100%; }.library-filter { width: 100%; }.filter-btn { flex: 1; }.import-form { grid-template-columns: 1fr; }.selected-file, .import-form .dark-btn { grid-column: auto; }.download-card { padding: 16px; }.download-head { gap: 10px; }.download-file-actions { gap: 5px; }.file-action { padding: 0 7px; } }