#view-cert.library-v048 {
  overflow: hidden;
  padding: var(--sp-4);
}

#view-cert.library-v048.on {
  display: flex;
}

.library-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--sp-3);
}

.library-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-width: 0;
}

.library-head-title {
  min-width: 0;
}

.library-head-title h3 {
  margin-bottom: var(--sp-1);
}

.library-help {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  border: var(--bd-w) solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.library-help::after {
  content: attr(data-lib-tip);
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: var(--z-hint);
  width: min(340px, 70vw);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bd-w) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.library-help:hover::after,
.library-help:focus-visible::after {
  visibility: visible;
  opacity: 1;
}

.library-help:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.library-muted {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.library-filters {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
  flex-wrap: wrap;
}

.library-filters input {
  width: 190px;
  min-width: 130px;
}

.library-filters select {
  min-width: 104px;
}

.library-workbench {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(250px, 300px);
  gap: var(--sp-3);
  min-width: 0;
  min-height: 0;
}

.library-tree,
.library-main,
.library-info {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}

.library-pane-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 54px;
  padding: var(--sp-3);
  border-bottom: var(--bd-w) solid var(--line);
}

.library-pane-head > div {
  min-width: 0;
}

.library-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-1);
}

.library-main-head {
  align-items: flex-start;
}

.library-main-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-1);
}

.library-breadcrumbs {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.library-crumb {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray);
  font: inherit;
  font-size: var(--fs-lg);
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}

.library-crumb:hover,
.library-crumb:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  outline: none;
}

.library-crumb.is-current {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.library-crumb-sep {
  flex: 0 0 auto;
  color: var(--muted);
}

.library-tree-scroll,
.library-grid-scroll,
.library-info-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.library-tree-scroll {
  flex: 1;
  padding: var(--sp-2);
}

.library-tree-row {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: calc(var(--sp-1) + var(--lib-depth) * var(--sp-3));
  border-radius: var(--r-sm);
}

.library-tree-row:hover,
.library-tree-row.on {
  background: var(--blue-l);
}

.library-tree-row.is-root {
  align-items: flex-start;
}

.library-tree-row.is-root .library-tree-toggle,
.library-tree-row.is-root .library-tree-spacer {
  margin-top: var(--sp-1);
}

.library-tree-row.on .library-tree-select {
  color: var(--blue-d);
  font-weight: 700;
}

.library-tree-toggle,
.library-tree-select {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--gray);
}

.library-tree-toggle {
  width: 22px;
  height: 28px;
  flex: 0 0 22px;
  padding: 0;
}

.library-tree-toggle:hover,
.library-tree-toggle:focus-visible {
  color: var(--blue);
  outline: none;
}

.library-tree-spacer {
  width: 22px;
  flex: 0 0 22px;
}

.library-tree-select {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--sp-2);
  min-height: 30px;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  text-align: left;
}

.library-tree-select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.library-folder-icon {
  flex: 0 0 auto;
  color: var(--amber);
  font-size: var(--fs-sm);
}

.library-tree-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-tree-row.is-root .library-tree-name {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.45;
}

.library-tree-row.is-root .library-tree-count {
  padding-top: var(--sp-1);
}

.library-tree-count {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.library-grid-scroll {
  flex: 1;
  padding: var(--sp-3);
}

.library-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  align-content: start;
  align-items: start;
  gap: var(--sp-3);
  min-width: 0;
}

.library-folder-card {
  display: flex;
  min-width: 0;
  min-height: 86px;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--bd-w) dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.library-folder-card:hover,
.library-folder-card:focus-visible {
  border-color: var(--blue);
  background: var(--blue-xl);
  outline: none;
}

.library-folder-card:focus-visible {
  box-shadow: 0 0 0 var(--bd-w) var(--blue);
}

.library-folder-card-icon {
  flex: 0 0 auto;
  color: var(--amber);
  font-size: var(--fs-xl);
}

.library-folder-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-1);
}

.library-folder-card-copy b {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.library-folder-card-copy small {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.library-file {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: var(--bd-w) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

.library-file:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

.library-file.on {
  border-color: var(--blue);
  box-shadow: 0 0 0 var(--bd-w) var(--blue);
}

.library-file:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.library-file-thumb {
  display: flex;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-2);
}

.library-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-file-ext {
  color: var(--muted);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
}

.library-file-name,
.library-file-title {
  width: 100%;
  min-width: 0;
  padding: 0 var(--sp-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-file-name {
  margin-top: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 700;
}

.library-file-title {
  margin-top: var(--sp-1);
  color: var(--gray);
  font-size: var(--fs-sm);
}

.library-file-tags {
  display: flex;
  width: 100%;
  min-height: 26px;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2) var(--sp-2);
  overflow: hidden;
  flex-wrap: wrap;
}

.library-pager {
  flex: 0 0 auto;
  padding: 0 var(--sp-3) var(--sp-2);
  border-top: var(--bd-w) solid var(--line);
}

.library-pager .pager {
  margin-top: 0;
  padding-top: var(--sp-2);
  flex-wrap: wrap;
}

.library-info-scroll {
  flex: 1;
  padding: var(--sp-3);
}

.library-info-preview {
  display: flex;
  width: 100%;
  min-height: 0;
  max-height: 190px;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--bd-w) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.library-info-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.library-info-title {
  margin-top: var(--sp-3);
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.45;
}

.library-info-path {
  margin-top: var(--sp-1);
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.library-info-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: var(--bd-w) solid var(--line);
  font-size: var(--fs-md);
}

.library-info-row > span {
  color: var(--muted);
}

.library-info-row > b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 600;
}

.library-ocr {
  margin-top: var(--sp-3);
}

.library-ocr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.library-ocr-head b {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.library-ocr textarea {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  line-height: 1.55;
}

.library-ocr-dialog {
  display: flex;
  width: min(720px, 94vw);
  max-height: 90vh;
  flex-direction: column;
  overflow: hidden;
}

.library-ocr-dialog h3 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-2);
}

.library-ocr-note {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--gray);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.library-ocr-note .tag {
  flex: 0 0 auto;
}

.library-ocr-dialog textarea {
  width: 100%;
  min-height: 220px;
  max-height: 52vh;
  flex: 1;
  resize: vertical;
  line-height: 1.6;
}

.library-ocr-status {
  min-height: 20px;
  padding-top: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.library-ocr-status.is-error {
  color: var(--red);
}

.library-ocr-dialog .ft {
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.library-actions {
  position: sticky;
  bottom: calc(-1 * var(--sp-3));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: var(--sp-3) calc(-1 * var(--sp-3)) 0;
  padding: var(--sp-3);
  border-top: var(--bd-w) solid var(--line);
  background: var(--panel);
}

.library-actions .btn {
  min-width: 0;
  white-space: normal;
}

.library-info-empty,
.library-grid-scroll > .empty-state {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.library-grid-scroll > .skel-card {
  width: 100%;
  margin-bottom: var(--sp-2);
}

.library-dialog-note {
  margin: calc(-1 * var(--sp-1)) 0 0 90px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.library-scan-dialog {
  width: min(920px, 94vw);
}

.library-scan-summary {
  margin-bottom: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.library-scan-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}

.library-scan-tools label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--gray);
  font-size: var(--fs-sm);
}

.library-scan-scroll {
  max-height: 55vh;
  overflow: auto;
  border: var(--bd-w) solid var(--line);
  border-radius: var(--r-sm);
}

.library-scan-scroll th {
  position: sticky;
  top: 0;
  z-index: var(--z-2);
  background: var(--surface-3);
}

.library-scan-scroll td {
  vertical-align: middle;
}

.library-scan-check {
  width: 38px;
  text-align: center;
}

.library-scan-file {
  overflow-wrap: anywhere;
}

.library-scan-scroll small {
  display: block;
  margin-top: var(--sp-1);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.library-open-file {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface-2);
  text-align: center;
}

.library-open-ext {
  color: var(--blue-d);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
}

.library-open-name {
  max-width: 80%;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.library-open-note {
  max-width: 560px;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.library-preview .preview-body {
  height: min(70vh, 720px);
}

.library-preview .preview-body img,
.library-preview .preview-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.library-preview .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.library-context-menu {
  position: fixed;
  z-index: var(--z-ctxmenu);
  display: flex;
  min-width: 210px;
  max-width: min(300px, 90vw);
  flex-direction: column;
  padding: var(--sp-1) 0;
  border: var(--bd-w) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.library-context-menu button {
  display: flex;
  width: auto;
  min-height: 34px;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: 1.45;
  text-align: left;
}

.library-context-menu button:hover,
.library-context-menu button:focus-visible {
  background: var(--blue-xl);
  color: var(--blue-d);
  outline: none;
}

.library-context-menu button:focus-visible {
  box-shadow: inset 0 0 0 var(--bd-w) var(--blue);
}

.library-context-menu button > span {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.library-context-menu button small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.library-context-menu button:hover small,
.library-context-menu button:focus-visible small {
  color: inherit;
}

.library-context-sep {
  display: block;
  height: var(--bd-w);
  margin: var(--sp-1) var(--sp-2);
  background: var(--line);
}

[data-theme="dark"] .library-file:hover,
[data-theme="dark"] .library-file.on,
[data-theme="dark"] .library-context-menu {
  box-shadow: var(--shadow-md);
}

@media (max-width: 1080px) {
  #view-cert.library-v048 {
    overflow: auto;
  }

  .library-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .library-filters {
    justify-content: flex-start;
    width: 100%;
  }

  .library-workbench {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    grid-template-rows: minmax(520px, 1fr) 280px;
  }

  .library-info {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .library-filters > * {
    flex: 1 1 140px;
  }

  .library-workbench {
    display: flex;
    flex-direction: column;
  }

  .library-tree {
    min-height: 220px;
    max-height: 260px;
  }

  .library-main {
    min-height: 520px;
  }

  .library-info {
    min-height: 420px;
  }

  .library-file-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  }

  .library-main-head {
    flex-wrap: wrap;
  }

  .library-ocr-dialog {
    width: 94vw;
    max-height: 92vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-context-menu,
  .library-folder-card,
  .library-crumb {
    transition: none;
  }
}