.image-library-view { margin-top: 22px; }
.library-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.library-header h2 { margin: 0; color: var(--navy); font-size: 28px; }
.library-header p:not(.eyebrow) { max-width: 670px; margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.library-toolbar, .library-filters, .library-bulk-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid #dce7e9; border-radius: 10px; background: #fff; }
.library-search { display: flex; flex: 1 1 320px; align-items: center; gap: 8px; min-width: 220px; padding: 0 10px; border: 1px solid #d8e2e8; border-radius: 7px; color: #78909b; }
.library-search input { border: 0; padding-left: 0; box-shadow: none; }
.library-status-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.library-status-filters button, .library-tag-filter button, .library-bulk-actions button { border: 1px solid #cfdde1; padding: 7px 10px; border-radius: 7px; color: #526477; background: #fff; font-size: 12px; }
.library-status-filters button.active, .library-tag-filter button.active { border-color: var(--primary); color: var(--primary-dark); background: #e8f6f3; }
.library-filters { align-items: flex-end; flex-wrap: wrap; }
.library-filters label { flex: 1 1 155px; margin: 0; }
.library-filters select { margin-top: 6px; }
.library-tag-filter { flex: 2 1 250px; }
.library-tag-filter > span { display: block; margin-bottom: 6px; color: #526477; font-size: 12px; font-weight: 700; }
.library-tag-filter div { display: flex; gap: 6px; flex-wrap: wrap; }
.library-bulk-actions { border-color: #b8ddd4; background: #f5fbf9; flex-wrap: wrap; }
.library-bulk-actions[hidden], .image-asset-drawer[hidden] { display: none !important; }
.library-bulk-actions input { flex: 1 1 220px; }
.library-bulk-actions button:last-child { margin-left: auto; border-color: #e0b9b9; color: #a84c4c; }
.image-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.asset-card { position: relative; overflow: hidden; min-width: 0; border: 1px solid #dce7e9; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(53,72,92,.04); }
.asset-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67,179,157,.15); }
.asset-card-preview { position: relative; display: block; padding: 0; border: 0; width: 100%; background: #edf3f3; cursor: pointer; }
.asset-card-preview img { display: block; width: 100%; max-height: 230px; object-fit: contain; background: #edf3f3; }
.asset-card-actions { position: absolute; inset: auto 8px 8px; display: flex; gap: 6px; opacity: 0; transform: translateY(5px); transition: .18s; }
.asset-card:hover .asset-card-actions, .asset-card:focus-within .asset-card-actions { opacity: 1; transform: none; }
.asset-card-actions button, .asset-card-actions a { border: 0; padding: 7px 9px; border-radius: 6px; color: #fff; background: rgba(36,52,69,.9); font-size: 11px; text-decoration: none; }
.asset-card-body { padding: 12px; }
.asset-card-title { margin: 0; overflow: hidden; color: var(--navy); font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-meta { margin: 5px 0 0; color: #8493a1; font-size: 11px; }
.tag-chip { display: inline-flex; align-items: center; margin: 8px 4px 0 0; padding: 3px 6px; border-radius: 4px; color: #387a70; background: #e9f6f3; font-size: 10px; }
.asset-status { float: right; margin-top: 8px; color: #72818b; font-size: 10px; }
.asset-status.archived { color: #9a6b42; }
.asset-select { display: none; position: absolute; z-index: 2; top: 9px; left: 9px; width: 18px; height: 18px; accent-color: var(--primary); }
.image-asset-grid.select-mode .asset-select { display: block; }
.library-empty { grid-column: 1 / -1; padding: 50px 24px; border: 1px dashed #aac9c7; border-radius: 10px; color: #607d80; background: #f7fcfa; text-align: center; }
.library-skeleton { height: 260px; border-radius: 10px; background: linear-gradient(100deg, #edf3f4 35%, #f8fbfb 50%, #edf3f4 65%); background-size: 200% 100%; animation: library-loading 1.2s linear infinite; }
.asset-image-error { min-height: 145px; background: #f4f7f7; }
.library-empty strong { display: block; margin-bottom: 7px; color: #46666b; font-size: 16px; }
.image-asset-drawer { position: fixed; z-index: 45; top: 0; right: 0; width: min(440px, 100vw); height: 100vh; overflow-y: auto; padding: 24px; border-left: 1px solid #dbe7e9; background: #fff; box-shadow: -10px 0 30px rgba(36,52,69,.15); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.drawer-head h3 { margin: 0; color: var(--navy); font-size: 18px; }
.drawer-close { border: 0; padding: 6px; color: #718096; background: transparent; font-size: 20px; }
.drawer-image { width: 100%; max-height: 320px; margin: 18px 0; object-fit: contain; border-radius: 8px; background: #edf3f3; }
.drawer-section { padding: 15px 0; border-top: 1px solid #e6eef0; }
.drawer-section h4 { margin: 0 0 9px; color: var(--navy); font-size: 13px; }
.drawer-detail { display: grid; grid-template-columns: 104px 1fr; gap: 7px 10px; margin: 0; font-size: 12px; }
.drawer-detail dt { color: #8797a3; }.drawer-detail dd { margin: 0; color: #526477; word-break: break-word; }
.drawer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }.drawer-tags .tag-chip { margin: 0; }
.drawer-tag-editor { display: flex; gap: 7px; }.drawer-tag-editor input { min-width: 0; }.drawer-tag-editor button { border: 0; padding: 8px 10px; border-radius: 6px; color: #fff; background: var(--primary); white-space: nowrap; }
.drawer-actions { display: flex; gap: 8px; margin-top: 15px; }.drawer-actions button { border: 1px solid #d7e3e6; padding: 8px 10px; border-radius: 6px; color: #526477; background: #fff; }.drawer-actions button:last-child { color: #a84c4c; border-color: #e5c2c2; }
.drawer-prompt { margin: 0; color: #607482; font: 11px/1.55 'Outfit', monospace; white-space: pre-wrap; }
@media (max-width: 1220px) { .image-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .library-header, .library-toolbar { align-items: stretch; flex-direction: column; }.image-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.asset-card-actions { opacity: 1; transform: none; }.image-asset-drawer { width: 100%; }.library-bulk-actions button:last-child { margin-left: 0; } }
@media (max-width: 460px) { .image-asset-grid { grid-template-columns: 1fr; }.library-filters { display: grid; grid-template-columns: 1fr; } }
@keyframes library-loading { to { background-position: -200% 0; } }