/* Library (assets) screen and picker */
.page { max-width: 1500px; margin: 0 auto; padding: 24px 28px 60px; }
.page-head { margin-bottom: 16px; } .page-head p { margin-top: 4px; }
.lib { position: relative; }
.lib-toolbar { position: sticky; top: 0; z-index: 8; background: var(--bg); padding: 10px 0 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.lib.pick .lib-toolbar { top: -10px; padding-top: 14px; }
.lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-row.sub { font-size: 13px; }
.lib-row .search { width: 230px; max-width: 100%; }
.lib-row.sub .input { padding: 4px 8px; font-size: 13px; }
.count { font-size: 13px; }
.quota { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.quota-bar { width: 110px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; } .quota-bar > div { height: 100%; background: var(--accent); } .quota-bar.hot > div { background: var(--danger); }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--accent-bg); border: 1px solid rgba(108, 140, 255, .45); padding: 8px 12px; border-radius: 10px; }
.lib-group { margin-top: 14px; }
.group-head { position: sticky; top: var(--lib-toolbar-h, 96px); z-index: 5; background: linear-gradient(var(--bg) 78%, transparent); padding: 10px 2px 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; margin: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; outline: none; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.tile.selected { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent); }
.tile .thumb { aspect-ratio: 16 / 10; background: var(--bg-2); position: relative; overflow: hidden; display: grid; place-items: center; }
.tile .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .thumb .ph { color: var(--faint); } .tile .thumb img + .ph { display: none; } .tile .thumb.noimg .ph { display: block; }
.tile .badges { position: absolute; left: 8px; bottom: 56px; display: flex; gap: 4px; pointer-events: none; }
.tile .badge { background: rgba(8, 11, 18, .78); color: #dfe6f7; backdrop-filter: blur(4px); }
.tile .badge.video { background: rgba(124, 92, 255, .85); color: #fff; } .tile .badge.image { background: rgba(47, 182, 162, .85); color: #04201c; } .tile .badge.audio { background: rgba(240, 138, 75, .9); color: #2b1203; }
.tile .badge.src { background: rgba(193, 75, 255, .85); color: #fff; }
.tile .star, .tile .check { position: absolute; top: 7px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(8, 11, 18, .6); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tile .star { right: 7px; } .tile .check { left: 7px; }
.tile:hover .star, .tile:hover .check, .tile:focus-within .star, .tile:focus-within .check, .tile .star.on, .tile .check.on, .lib.selecting .tile .check { opacity: 1; }
.tile .star.on { color: #ffd166; } .tile .star .ic { width: 16px; height: 16px; } .tile .check .ic { width: 16px; height: 16px; opacity: 0; }
.tile .check.on { background: var(--accent-d); } .tile .check.on .ic { opacity: 1; }
.tile .meta { padding: 8px 10px 9px; min-height: 52px; }
.tile .name { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .used { color: var(--accent-2); }
.tile.skeleton { pointer-events: none; min-height: 190px; } .tile.skeleton .thumb { background: none; }
.lib-sentinel { height: 1px; }
.lib-state { padding: 6px 0; display: flex; flex-direction: column; align-items: center; }
.lib-state .skel { width: 100%; }
.drop-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(13, 16, 23, .86); backdrop-filter: blur(4px); display: grid; place-items: center; border: 3px dashed var(--accent); margin: 12px; border-radius: 18px; pointer-events: none; }
.drop-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 20px; }
.lib.pick .drop-overlay { position: absolute; inset: 0; z-index: 20; margin: 0; }

/* picker modal */
.picker-modal .modal-body { padding: 4px 18px 8px; }
.picker-modal .lib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picker-modal .tile .check { opacity: .0; } .picker-modal .tile .star { display: none; }
.picker-modal .tile.selected .check { opacity: 1; }

/* upload panel */
.upload-panel { position: fixed; right: 18px; bottom: 18px; width: min(360px, calc(100vw - 36px)); max-height: 50vh; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); z-index: 480; }
.up-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px 14px; }
.up-list { overflow: auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.up-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center; font-size: 12.5px; }
.up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-bar { grid-column: 1 / 3; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; } .up-bar > div { height: 100%; background: var(--accent); transition: width .2s; }
.up-row.done .up-bar > div { background: var(--ok); } .up-err { grid-column: 1 / 3; color: var(--danger); font-size: 12px; } .up-row .icon-btn { grid-column: 3; grid-row: 1 / 3; width: 24px; height: 24px; }

@media (max-width: 760px) {
  .page { padding: 16px 12px 40px; } .lib-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .lib-row .search { width: 100%; } .lib-toolbar { position: static; } .group-head { top: 0; } .tile .star, .tile .check { opacity: 1; } .lib.pick .lib-toolbar { position: static; }
}
@media (hover: none) { .tile .star, .tile .check { opacity: 1; } }