/* 旧版目录/表格布局与萌题岛蓝白主题结合。GPL-3.0。只作用于题库工作区。 */
.study-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 8px 0 20px; }
.study-library-heading h2 { font-family: var(--study-brand-font); font-size: 36px; font-weight: 400; color: #203958; }
.study-library-heading p.muted { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.study-library-heading .actions { flex-shrink: 0; margin: 0; flex-wrap: wrap; }
.study-library-heading button { min-height: 42px; }
.study-library-workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: stretch; height: clamp(600px, calc(100dvh - 270px), 880px); }
.study-library-directory, .study-library-content { min-width: 0; min-height: 0; border: 1px solid #dce7f6; border-radius: 22px; background: #ffffffed; box-shadow: 0 12px 35px #2f6fed08; overflow: hidden; }
.study-library-directory { display: flex; flex-direction: column; }
.study-library-directory-head { display: flex; gap: 12px; align-items: center; padding: 21px 18px; border-bottom: 1px solid #e6edf7; }
.study-library-directory-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dfe9f8; border-radius: 13px; background: #f3f7ff; color: #7392bb; font-size: 24px; }
.study-library-directory-head h3 { font-size: 17px; letter-spacing: 0; }
.study-library-directory-head p { margin: 4px 0 0; font-size: 11px; color: #8a9bb0; }
#library-directory-v1 { padding: 14px 10px 20px; flex: 1; min-height: 0; overflow: auto; }
.study-library-node { display: flex; gap: 9px; align-items: center; width: 100%; min-width: 0; padding: 11px 10px; margin: 2px 0; border: 1px solid transparent; background: transparent; color: #52657d; border-radius: 11px; cursor: pointer; text-align: left; }
.study-library-node svg { flex-shrink: 0; }
.study-library-node > span { min-width: 0; flex: 1; }
.study-library-node b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.6; }
.study-library-node small { display: block; margin-top: 4px; color: #8a9bb0; font-size: 11px; line-height: 1.5; }
.study-library-node em { flex-shrink: 0; font: inherit; font-size: 12px; color: #8190a6; }
.study-library-node:hover { background: #f4f8fe; }
.study-library-node.is-active { background: #eaf2ff; border-color: #d8e6fc; color: #2f6fed; }
.study-library-node.is-active small, .study-library-node.is-active em { color: #668bbc; }
.study-library-group { margin-top: 10px; }
.study-library-group-head { display: flex; align-items: center; gap: 2px; padding: 3px 4px; border: 1px solid #eee6f2; border-radius: 12px; background: #fff; }
.study-library-group-head .study-library-node { flex: 1; padding-left: 3px; }
.study-library-group-head .study-library-node svg { display: none; }
.study-library-chevron { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #eee1f3; border-radius: 10px; background: #fbf6fd; color: #a078b0; cursor: pointer; }
.study-library-chevron svg { display: block; width: 16px; height: 16px; stroke-width: 2.2; transition: transform .18s ease; }
.study-library-chevron[aria-expanded="true"] svg { transform: rotate(90deg); }
.study-library-chevron:hover { border-color: #d9bde6; background: #f5eafa; color: #8f4da2; }
.study-library-group-head .study-library-chevron:focus-visible { outline: 2px solid #b881c9; outline-offset: 2px; }
@media (pointer: coarse) { .study-library-chevron { flex-basis: 40px; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .study-library-chevron svg { transition: none; } }
.study-library-children { margin: 1px 0 8px 12px; padding-left: 6px; border-left: 1px solid #e0e9f5; }
.study-library-children[hidden] { display: none; }
.study-library-node.is-bank { align-items: flex-start; padding: 9px 8px; }
.study-library-node.is-bank svg { margin-top: 2px; color: #8ba1be; width: 16px; }
.study-library-node.is-bank em { display: none; }
.study-library-node.is-bank b { font-size: 12px; font-weight: 500; }
.study-library-bank-row { display: flex; align-items: center; gap: 2px; }
.study-library-bank-row .study-library-node { flex: 1; }
.study-library-node-action { display: grid; place-items: center; flex: none; width: 28px; height: 32px; padding: 5px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #b295aa; cursor: pointer; }
.study-library-node-action svg { width: 16px; height: 16px; }
.study-library-node-action:hover, .study-library-node-action:focus-visible { color: #cd6278; border-color: #f1d5df; background: #fff8fa; }
.study-library-node-action:disabled { opacity: .35; cursor: not-allowed; }
.study-library-directory-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid #e6edf7; padding: 16px; font-size: 11px; color: #8a9bb0; }
.study-library-directory-footer .study-local-badge { padding: 3px 7px; font-size: 10px; background: #eff8f4; border-color: #e0eee8; color: #598472; }
.study-library-content { display: flex; flex-direction: column; }
.study-library-content-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px 24px 18px; }
.study-library-content-head h3 { color: #294462; font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.study-library-content-head p { margin: 7px 0 0; font-size: 12px; }
.study-library-content-head .study-library-context-label { margin: 0 0 7px; color: #a456a7; font-size: 11px; font-weight: 700; }
.study-library-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.study-library-title-row button { min-height: 34px; padding: 6px 11px; font-size: 12px; }
#library-page-count-v1 { flex-shrink: 0; font-size: 11px; }
.study-library-content-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.study-library-content-actions button { min-height: 34px; padding: 6px 11px; font-size: 12px; white-space: nowrap; }
.study-library-content-actions button:disabled { opacity: .5; cursor: not-allowed; }
.study-library-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 22px 17px; border-bottom: 1px solid #e6edf7; }
.study-library-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 180px; height: 42px; padding: 0 4px 0 12px; border: 1px solid #dce6f4; border-radius: 11px; background: #fbfdff; }
.study-library-search > span { color: #8197b2; font-size: 25px; }
.study-library-search input { width: 100%; min-width: 0; height: 38px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 12px; }
.study-library-search:focus-within { outline: 2px solid #91b4f0; outline-offset: 1px; }
.study-library-search input:focus { outline: 0; }
.study-library-search button { flex-shrink: 0; white-space: nowrap; padding: 7px 10px; font-size: 12px; border: 0; background: #eef5ff; }
.study-library-filters > select { flex: 0 1 112px; width: 112px; height: 42px; padding: 8px; font-size: 12px; border-radius: 11px; }
.study-library-wrong { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: #6e7f96; cursor: pointer; }
.study-library-wrong input, .study-library-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #2f6fed; cursor: pointer; }
.study-library-text-button { padding: 5px 0; border: 0; background: transparent; color: #7d91aa; font-size: 11px; cursor: pointer; }
.study-library-text-button:hover { color: #2f6fed; }
.study-library-selection { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 43px; padding: 7px 22px; color: #8a9bb0; background: #fcfdff; border-bottom: 1px solid #e6edf7; font-size: 11px; }
.study-library-selection button { font-size: 11px; padding: 6px 10px; }
.study-library-table-scroll { min-height: 180px; overflow: auto; scrollbar-width: thin; scrollbar-color: #c6d7ee transparent; flex: 1; }
table.study-library-table { width: 100%; table-layout: fixed; min-width: 0; border-collapse: collapse; }
.study-library-table thead { position: sticky; top: 0; z-index: 1; background: #f6f9ff; }
.study-library-table th, .study-library-table td { padding: 17px 9px; border-bottom: 1px solid #e9eff7; color: #5e7088; vertical-align: middle; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.study-library-table th { padding-top: 13px; padding-bottom: 13px; font-size: 11px; font-weight: 600; color: #8492a6; }
.study-library-table th:first-child, .study-library-table td:first-child { width: 34px; padding-left: 14px; }
.study-library-table th:nth-child(2) { width: 67px; }
.study-library-table th:nth-child(4) { width: 77px; }
.study-library-table th:nth-child(5) { width: 76px; }
.study-library-table th:nth-child(6) { width: 76px; }
.study-library-table tbody tr:hover { background: #f8fbff; }
.study-library-number { display: inline-block; min-width: 31px; max-width: 100%; padding: 4px 6px; border: 1px solid #e1e8f2; border-radius: 7px; color: #607893; background: #fcfdff; font-size: 11px; line-height: 1.5; }
.study-library-stem { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 88px; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: #314963; font-size: 14px; font-weight: 400; line-height: 1.85; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.study-library-stem p { margin: 0; }
.study-library-stem img { max-width: 100%; max-height: 65px; }
.study-library-stem table { font-size: 11px; }
.study-library-stem:hover { color: #2f6fed; }
.study-library-meta { display: flex; gap: 4px 9px; flex-wrap: wrap; margin-top: 9px; font-size: 10px; color: #97a4b6; line-height: 1.6; }
.study-library-meta > span { overflow-wrap: anywhere; }
.study-library-meta > span:not(:last-child)::after { content: " /"; padding-left: 7px; color: #d0dbea; }
.study-library-type { display: inline-block; padding: 4px 7px; border: 1px solid #e1e8f4; border-radius: 20px; color: #6b83a0; background: #f7faff; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.study-library-review { font-size: 11px; }
.study-library-review::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #c2d0e2; vertical-align: middle; }
.study-library-workspace .is-wrong { color: #bd7154; }
.study-library-review.is-wrong::before { background: #d99672; }
.study-library-review.is-mastered { color: #618e7b; }
.study-library-review.is-mastered::before { background: #73a993; }
.study-library-row-actions { display: flex; gap: 3px; }
.study-library-icon { display: inline-grid; place-items: center; width: 28px; height: 32px; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: #8a9db4; cursor: pointer; }
.study-library-icon:hover { color: #2f6fed; background: #ebf3ff; }
.study-library-icon:disabled { opacity: .4; cursor: not-allowed; }
.study-library-pagination { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #e6edf7; background: #fff; font-size: 11px; color: #8a9bb0; }
.study-library-pagination > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.study-library-pagination select { max-width: 112px; padding: 5px; font-size: 10px; border-radius: 7px; }
#library-pagination-v1 { display: flex; align-items: center; gap: 5px; }
#library-pagination-v1 button { min-width: 30px; height: 32px; padding: 4px 8px; border-radius: 9px; font-size: 11px; }
#library-pagination-v1 .is-active { color: #fff; border-color: #447fed; background: #447fed; }
.study-library-empty { padding: 70px 24px; text-align: center; color: #7b8da6; }
.study-library-empty[hidden] { display: none; }
.study-library-empty > span { font-size: 42px; color: #adc1dc; }
.study-library-empty h4 { margin: 15px 0 10px; font-size: 17px; font-weight: 500; color: #516d90; }
.study-library-empty p { max-width: 420px; margin: 0 auto 20px; line-height: 1.8; font-size: 12px; }
.study-library-management > p.muted { font-size: 12px; }
.study-library-management .section-head:first-child { margin-bottom: 18px; }
.study-library-bank-form { display: grid; gap: 14px; margin-top: 20px; }
.study-library-bank-form label { display: grid; gap: 7px; color: #6f5b79; font-size: 13px; }
.study-library-bank-form input { width: 100%; }
.study-library-bank-form [hidden] { display: none !important; }
.study-library-dialog { width: min(780px, calc(100% - 32px)); max-height: 85vh; padding: 26px; border: 1px solid #dce7f6; border-radius: 22px; color: #314963; background: #fff; box-shadow: 0 22px 90px #203b5e33; overflow: auto; }
.study-library-dialog::backdrop { background: #263a5766; backdrop-filter: blur(3px); }
.study-library-drawer { position: fixed; inset: 0 0 0 auto; width: min(540px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 20px 0 0 20px; background: #fff; color: #443650; box-shadow: -18px 0 65px #39234b24; overflow: hidden; }
.study-library-drawer[open] { display: flex; flex-direction: column; }
.study-library-drawer::backdrop { background: #263a5766; backdrop-filter: blur(3px); }
.study-library-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid #eee5f2; }
.study-library-drawer-head > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.study-library-drawer-head p { margin: 0 0 5px; color: #a657a5; font-size: 11px; font-weight: 700; }
.study-library-drawer-head h2 { margin: 0; font-size: 21px; }
.study-library-drawer-head > button { width: 38px; height: 38px; padding: 0; font-size: 22px; }
.study-library-drawer-mark { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid #e5d5f1; border-radius: 12px; background: #faf3fd; color: #ab56b1; font-size: 23px; }
.study-library-drawer-body { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 22px 24px; overflow: auto; }
.study-library-drawer-context { padding: 17px; border: 1px solid #e9dff1; border-radius: 12px; background: #fbf8fd; overflow-wrap: anywhere; }
.study-library-drawer-context span, .study-library-drawer-context p { color: #96849e; font-size: 12px; }
.study-library-drawer-context strong { display: block; margin-top: 8px; color: #443650; font-size: 16px; }
.study-library-drawer-context p { margin: 7px 0 0; }
.study-library-drawer .study-library-bank-form { display: flex; flex: 1; flex-direction: column; }
.study-library-bank-form textarea { width: 100%; min-height: 130px; resize: vertical; }
.study-library-bank-form small { color: #96849e; line-height: 1.6; }
.study-library-drawer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 18px 0 0; margin-top: auto; border-top: 1px solid #eee5f2; }
.study-library-drawer-actions #library-bank-current-v1 { margin-right: auto; }
.study-library-drawer [hidden], .study-library-delete-dialog [hidden] { display: none !important; }
.study-library-drawer button:focus-visible, .study-library-drawer input:focus-visible, .study-library-drawer textarea:focus-visible { outline: 2px solid #b881c9; outline-offset: 2px; }
.study-library-delete-dialog { width: min(620px, calc(100% - 32px)); }
.study-library-delete-dialog h2 { margin: 0 0 14px; font-size: 20px; overflow-wrap: anywhere; }
.study-library-delete-dialog p { color: #718097; line-height: 1.8; font-size: 14px; }
.study-library-delete-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.study-library-dialog .section-head h2 { font-size: 21px; }
.study-library-dialog p.muted, .study-library-dialog .actions > span { font-size: 12px; line-height: 1.8; }
.study-library-dialog #library-dialog-question-v1 { margin: 22px 0; line-height: 1.9; font-size: 16px; }
.study-library-dialog img { max-width: 100%; height: auto; }
.study-library-dialog-options { display: grid; gap: 10px; padding: 0; list-style: none; }
.study-library-dialog-options li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid #e4ecf7; border-radius: 10px; line-height: 1.8; }
.study-library-dialog-options li > div { min-width: 0; flex: 1; }
.study-library-dialog details { margin: 20px 0; padding: 15px; border: 1px solid #e0e9f6; border-radius: 12px; background: #f8fbff; }
.study-library-dialog details > summary { cursor: pointer; color: #5b7faf; font-size: 13px; }
.study-library-dialog details h3 { margin: 16px 0 8px; font-size: 13px; }
.study-library-dialog details > div { white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.study-library-workspace button:focus-visible, .study-library-dialog button:focus-visible { outline: 2px solid #6799ed; outline-offset: 2px; }
@media (min-width: 721px) {
  /* The upstream centered quiz-width lock is too narrow for two-pane browsing.
     Override it only on this page; the other nine views keep their existing layout. */
  body[data-active-view="banks"] .app { display: grid !important; grid-template-columns: calc(var(--shiroha-side-width, 188px) + var(--shiroha-side-left, 20px)) minmax(0, 1fr) !important; }
  body[data-active-view="banks"] .main { grid-column: 2; width: 100% !important; padding: 20px 28px 28px 20px !important; }
  body[data-active-view="banks"] .main > .topbar, body[data-active-view="banks"] .main > #banks { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  body[data-active-view="banks"] .web-peeking-wrap { display: none; }
}
@media (max-width: 1250px) {
  .study-library-workspace { grid-template-columns: 194px minmax(0, 1fr); gap: 12px; }
  .study-library-heading { align-items: flex-start; }
  .study-library-heading .actions { max-width: 300px; justify-content: flex-end; }
  .study-library-content-head { padding: 20px 16px 16px; }
  .study-library-filters { padding: 0 14px 14px; gap: 8px; }
  .study-library-search { flex-basis: 100%; }
  .study-library-table th:nth-child(4) { width: 63px; }
  .study-library-table th:nth-child(5) { width: 63px; }
  .study-library-table th:nth-child(6) { width: 64px; }
  .study-library-table th:nth-child(2) { width: 55px; }
  .study-library-pagination { flex-wrap: wrap; padding: 14px; }
}
@media (max-width: 850px) {
  .study-library-workspace { grid-template-columns: minmax(0, 1fr); height: auto; }
  .study-library-directory-head { padding: 14px 16px; }
  #library-directory-v1 { max-height: 250px; }
  .study-library-directory-footer { padding: 10px 16px; }
  .study-library-heading { flex-direction: column; }
  .study-library-heading .actions { max-width: none; justify-content: flex-start; }
  .study-library-table-scroll { height: 560px; flex: none; }
  .study-library-content-head { flex-wrap: wrap; }
  .study-library-content-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .study-library-table th:nth-child(4), .study-library-table td:nth-child(4) { display: none; }
  .study-library-table th, .study-library-table td { padding: 14px 6px; }
  .study-library-table th:first-child, .study-library-table td:first-child { width: 27px; padding-left: 8px; }
  .study-library-table th:nth-child(2) { width: 46px; }
  .study-library-table th:nth-child(5) { width: 52px; }
  .study-library-table th:nth-child(6) { width: 53px; }
  .study-library-row-actions { gap: 0; }
  .study-library-icon { width: 24px; }
  .study-library-stem { font-size: 12px; }
}