/* Assets (#/assets): your library, in glass. */
.ax { padding: 92px 22px calc(var(--dock, 0px) + 60px); overflow-y: auto; }
.ax-wrap { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.ax-kicker { margin: 0; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9cc4ff; }
.ax-head h1 { margin: 4px 0 0; font: 800 clamp(30px, 4vw, 44px)/1.05 var(--sans); color: #fff; }
.ax-head h1 span { font-weight: 600; font-size: .55em; color: #8c95ad; margin-left: 6px; }
.ax-sub { margin: 8px 0 0; max-width: 60ch; color: #a7b0c6; font: 400 14.5px/1.5 var(--sans); }
.ax-make { flex: none; padding: 11px 20px; border-radius: 999px; text-decoration: none; }
.ax-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ax-pills, .ax-sources { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-pills { padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.ax-pills button, .ax-sources button, .ax-sort { border: 1px solid transparent; background: transparent; color: #cbd3ea; font: 600 13px var(--sans); padding: 8px 14px;
  border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .18s, color .18s; }
.ax-pills button i { font-style: normal; font-weight: 500; font-size: 11.5px; color: #8c95ad; }
.ax-pills button:hover, .ax-sources button:hover, .ax-sort:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ax-pills button[aria-checked="true"] { color: #fff; background: linear-gradient(135deg, rgba(124, 196, 255, .3), rgba(201, 155, 255, .3)); border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 8px 20px -10px rgba(140, 160, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ax-pills button[aria-checked="true"] i { color: #dbe4ff; }
.ax-sources button { padding: 6px 12px; font-size: 12.5px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.ax-sources button[aria-checked="true"] { color: #0b0c14; background: #cfe0ff; border-color: transparent; }
.ax-search { flex: 1 1 260px; position: relative; display: flex; align-items: center; color: #8c95ad; }
.ax-search svg { position: absolute; left: 14px; pointer-events: none; }
.ax-search input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 16px 0 40px; border-radius: 999px; color: #fff; font: 500 14px var(--sans);
  border: 1.5px solid transparent; background: linear-gradient(rgba(12, 14, 26, .85), rgba(12, 14, 26, .85)) padding-box, linear-gradient(135deg, rgba(255, 138, 216, .3), rgba(124, 196, 255, .3)) border-box; }
.ax-search input:focus { outline: none; background: linear-gradient(rgba(14, 16, 30, .92), rgba(14, 16, 30, .92)) padding-box, linear-gradient(135deg, #ff8ad8, #c99bff 45%, #7cc4ff) border-box; }
.ax-sort { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
.ax-grid { columns: 4 260px; column-gap: 14px; }
.ax-card { --cap: 520px; display: flex; flex-direction: column; gap: 7px; break-inside: avoid; margin: 0 auto 16px; width: min(100%, calc(var(--cap) * var(--arn, 1.7778))); }
.ax-card.is-audio { width: 100%; }
.ax-media { position: relative; aspect-ratio: var(--ar, 16/9); border-radius: 16px; overflow: hidden; background: #0d1124; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); cursor: zoom-in; }
.ax-media img, .ax-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ax-card:hover .ax-media img, .ax-card:hover .ax-media video { transform: scale(1.03); }
.ax-badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 99px; font: 600 11px var(--sans); color: #fff; background: rgba(8, 10, 20, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ax-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; z-index: 2; }
.ax-card:hover .ax-acts, .ax-card:focus-within .ax-acts { opacity: 1; transform: none; }
@media (hover: none) { .ax-acts { opacity: 1; transform: none; } }
.ax-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
  background: rgba(10, 12, 22, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; }
.ax-ico:hover { background: rgba(255, 255, 255, .2); }
.ax-cap { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; min-width: 0; }
.ax-cap b { font: 600 13.5px/1.35 var(--sans); color: #eef1fb; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-cap small { font: 500 12px var(--sans); color: #8c95ad; }
.ax-amedia { aspect-ratio: auto; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; cursor: default;
  background: var(--cover, none) center / cover, radial-gradient(120% 140% at 20% 0%, rgba(124, 160, 255, .28), transparent 60%), linear-gradient(135deg, #1b1d33, #11121c); }
.ax-amedia[style*="--cover"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 20, .1), rgba(8, 10, 20, .75)); }
.ax-note { position: absolute; inset: 0 0 44px; display: grid; place-items: center; color: #b9c6ff; pointer-events: none; }
.ax-aplay { position: relative; z-index: 1; padding: 0 8px 8px; }
.ax-aplay .vxp { margin: 0; background: rgba(10, 12, 22, .55); border-color: rgba(255, 255, 255, .1); }
.ax-ghost .ax-media, .ax-ghost { aspect-ratio: var(--ar); min-height: 120px; border-radius: 16px; background: linear-gradient(110deg, #141826 30%, #1d2336 50%, #141826 70%) 0 0 / 200% 100%;
  animation: ax-shimmer 1.4s linear infinite; }
@keyframes ax-shimmer { to { background-position: -200% 0; } }
.ax-empty { margin: 30px auto; max-width: 52ch; text-align: center; color: #a7b0c6; font: 500 15px/1.6 var(--sans); }
.ax-empty a { color: #9fd0ff; }
.ax-more { align-self: center; padding: 11px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: 600 14px var(--sans); cursor: pointer; }
@media (max-width: 760px) {
  .ax { padding: 72px 12px calc(var(--dock, 0px) + 120px); }
  .ax-head { flex-direction: column; align-items: flex-start; }
  .ax-grid { columns: 2 150px; column-gap: 10px; }
  .ax-card { --cap: 300px; margin-bottom: 12px; }
  .ax-pills { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ax-media img, .ax-media video, .ax-ghost { transition: none; animation: none; } }
.ax-ico.ax-del:hover{background:rgba(255,95,120,.35)}
.ax-ico.ax-del.armed{width:auto;padding:0 12px;border-radius:99px;font:700 12px var(--sans);color:#fff;background:linear-gradient(135deg,#ff5f78,#e0407a);border-color:transparent;box-shadow:0 6px 18px -6px rgba(255,80,120,.8)}
.ax-acts:has(.ax-del.armed) .ax-ico:not(.ax-del){display:none}