#stage { position: relative; }
#toolbar[hidden] { display: none; }
#image-library[hidden] { display: none; }
#image-library {
  position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); min-width: 0;
}
.library-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 28px 18px; }
.library-head h2, .library-dialog h2 { font-size: 21px; font-weight: 500; }
.library-head p, #library-master-help { color: #aaa; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.library-filters { display: flex; gap: 12px; align-items: flex-end; padding: 0 28px 18px; border-bottom: 1px solid var(--border); }
.library-filters label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: #b5b5b5; min-width: 0; flex: 1; }
.library-filters .library-search { flex: 2; }
#image-library input, #image-library select, .library-dialog input {
  width: 100%; min-width: 0; height: 38px; padding: 8px 10px; border: 1px solid var(--border-hover); border-radius: 6px;
  background: var(--surface); color: var(--text); font: 13px var(--sans); color-scheme: dark;
}
#image-library input::placeholder, .library-dialog input::placeholder { color: #999; }
#library-status { padding: 12px 28px; color: #aaa; font-size: 12px; line-height: 1.5; }
#library-gallery { flex: 1; min-height: 0; overflow: auto; padding: 6px 28px 28px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 26px 18px; }
.library-image { position: relative; min-width: 0; }
.library-image.selected .library-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.library-thumb { display: block; width: 100%; height: 168px; padding: 12px; background: var(--surface); border: 0; border-radius: 6px; }
.library-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.library-thumb .library-unavailable { display: none; color: #aaa; font-size: 12px; white-space: normal; }
.library-thumb.broken img { display: none; }
.library-thumb.broken .library-unavailable { display: block; }
.library-image-title { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; }
.library-image-title label { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
#image-library .library-image-title input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; padding: 0; accent-color: var(--accent); }
.library-sources { font-size: 11px; line-height: 1.6; color: #aaa; margin: 5px 0 0 25px; overflow-wrap: anywhere; }
.library-empty { max-width: 45ch; padding: 50px 0; }
.library-empty h3 { font-weight: 500; font-size: 18px; margin-bottom: 8px; }
.library-empty p { color: #aaa; font-size: 13px; line-height: 1.6; }
.library-footer { display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: var(--surface); border-top: 1px solid var(--border); }
#library-selected { margin-right: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
#image-library button:disabled, .library-dialog button:disabled { opacity: .45; cursor: default; }
#image-library button.primary, .library-dialog button.primary { color: #0f0f0f; }
#image-library :focus-visible, .library-dialog :focus-visible, #library-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#image-library ::selection, .library-dialog ::selection { background: var(--accent); color: #0f0f0f; }
#library-gallery { scrollbar-width: thin; scrollbar-color: #555 var(--bg); }
.library-dialog { margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border: 1px solid var(--border-hover); border-radius: 12px; background: var(--surface); color: var(--text); }
.library-dialog::backdrop { background: rgba(0,0,0,.75); }
.library-dialog label { display: block; color: #bbb; font-size: 12px; margin: 20px 0 7px; }
.library-dialog label span { color: #aaa; }
.library-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.library-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
#library-master-error { min-height: 18px; color: #ff9990; font-size: 13px; line-height: 1.5; margin-top: 12px; }
#library-preview { width: min(920px, calc(100vw - 32px)); }
#library-preview-image { width: 100%; max-height: 65dvh; object-fit: contain; margin-top: 20px; }
#library-preview-status, #library-preview-sources { margin-top: 14px; color: #bbb; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .library-head { padding: 16px; gap: 12px; align-items: flex-start; }
  .library-head h2 { font-size: 18px; }
  .library-head p { font-size: 12px; }
  .library-head button { padding: 6px 8px; font-size: 11px; }
  .library-filters { display: grid; grid-template-columns: 1fr 1fr; padding: 0 16px 14px; gap: 10px; }
  .library-filters .library-search { grid-column: 1 / -1; }
  #library-refresh { grid-column: 1 / -1; justify-self: start; }
  #library-status { padding: 10px 16px; }
  #library-gallery { padding: 6px 16px 20px; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .library-thumb { height: 130px; padding: 8px; }
  .library-footer { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  #library-create { width: 100%; }
  .library-dialog { padding: 20px; }
}