/* 素材图鉴库 / 工程管理 共用 */
.lib-wrap { display: flex; max-width: 1400px; margin: 0 auto; min-height: calc(100dvh - 54px); }
.cat-nav { width: 200px; flex: none; padding: 14px 10px; border-right: 1px solid var(--line); position: sticky; top: 54px; height: calc(100dvh - 54px); overflow-y: auto; }
.cat-nav button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 3px; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--text2); cursor: pointer; text-align: left; }
.cat-nav button i { font-style: normal; width: 20px; text-align: center; font-family: var(--font); color: var(--gold); }
.cat-nav button .n { margin-left: auto; font-size: 11px; color: var(--dim); }
.cat-nav button.on { border-color: var(--line2); background: var(--panel2); color: var(--gold2); }
.lib-main { flex: 1; min-width: 0; padding: 12px 16px 40px; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; position: sticky; top: 54px; z-index: 5; padding: 8px 0; background: rgba(15, 13, 11, .95); }
.toolbar-row input[type=search] { flex: 1 1 220px; }
.toolbar-row select { width: auto; }
.group-t { font-family: var(--font); color: var(--gold); letter-spacing: 3px; margin: 16px 0 10px; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.group-t small { color: var(--dim); letter-spacing: 0; font-family: var(--sans); font-size: 12px; }
.group-t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.it { position: relative; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); overflow: hidden; cursor: pointer; transition: .15s; }
.it:hover { border-color: var(--gold); }
.it.sel { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(210, 170, 98, .5); }
.it .th { aspect-ratio: 1; background: #14110d; position: relative; }
.it .th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.it .badges { position: absolute; left: 6px; top: 6px; display: flex; gap: 3px; flex-wrap: wrap; }
.it .badges span { font-size: 10px; padding: 0 5px; background: rgba(10, 8, 6, .8); border: 1px solid var(--line2); border-radius: 2px; color: var(--text2); }
.it .badges .u { border-color: var(--teal); color: #9fd0c4; }
.it .badges .usr { border-color: var(--ochre); color: var(--gold2); }
.it .ck { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border: 1px solid var(--line2); background: rgba(10, 8, 6, .7); display: none; place-items: center; color: var(--gold2); }
.sel-on .it .ck { display: grid; }
.it .info { padding: 7px 9px 9px; }
.it .nm { font-family: var(--font); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it .sub { font-size: 11px; color: var(--dim); display: flex; justify-content: space-between; margin-top: 2px; }

.pv { display: flex; min-height: 0; flex: 1; }
.pv-view { flex: 1.3; position: relative; background: #0b0a08; min-height: 340px; }
.pv-view canvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.pv-view .hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--dim); pointer-events: none; }
.pv-view .pv-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.pv-info { flex: 1; padding: 14px 16px; overflow-y: auto; border-left: 1px solid var(--line); max-height: 72vh; }
.pv-info table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.pv-info td { padding: 5px 0; border-bottom: 1px solid #262017; vertical-align: top; }
.pv-info td:first-child { width: 72px; color: var(--text2); }
.pv-info .desc { line-height: 1.8; font-size: 13px; margin: 0 0 10px; }
.tag-edit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-edit .tag { cursor: pointer; }
.tag-edit .tag:hover { border-color: var(--red); text-decoration: line-through; }
.tag-edit input { width: 90px; padding: 3px 6px; font-size: 12px; }
.upload-zone { border: 1px dashed var(--line2); border-radius: 6px; padding: 26px; text-align: center; color: var(--text2); cursor: pointer; margin-bottom: 12px; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--gold); color: var(--gold2); }

@media (max-width: 760px) {
  .lib-wrap { flex-direction: column; }
  .cat-nav { width: auto; height: auto; top: 54px; z-index: 6; display: flex; overflow-x: auto; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--bg); gap: 4px; }
  .cat-nav button { width: auto; flex: none; margin: 0; padding: 5px 10px; white-space: nowrap; }
  .cat-nav button .n { display: none; }
  .toolbar-row { top: 98px; }
  .lib-main { padding: 6px 10px 30px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
  .it .nm { font-size: 12px; }
  .pv { flex-direction: column; }
  .pv-view { min-height: 44vh; }
  .pv-info { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .hide-m { display: none; }
}