/* Pixel Battle unified upload UI — flat, consistent, reusable */
.pbu-queue{display:flex;flex-direction:column;gap:8px;min-width:0}
.pbu-queue[hidden],.pbu-item[hidden]{display:none!important}
.pbu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}
.pbu-item{--pbu-progress:0%;position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:#0d131b;color:#edf2f8;box-shadow:none;overflow:hidden}
.pbu-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#78ff55 0 var(--pbu-progress),rgba(255,255,255,.055) var(--pbu-progress) 100%);opacity:0;transition:opacity .18s ease}
.pbu-item[data-state="preparing"]::after,.pbu-item[data-state="uploading"]::after,.pbu-item[data-state="publishing"]::after{opacity:1}
.pbu-item[data-state="error"]{border-color:rgba(255,103,117,.34);background:#151116}
.pbu-item[data-state="done"]{border-color:rgba(116,255,91,.20)}
.pbu-preview{position:relative;width:54px;height:54px;min-width:54px;padding:0;border:0;border-radius:13px;background:#121a24;color:#9aa8ba;display:grid;place-items:center;overflow:hidden;text-decoration:none;appearance:none;-webkit-appearance:none}
button.pbu-preview{cursor:zoom-in}
.pbu-preview img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#111821}
.pbu-preview-icon{width:22px;height:22px;background:currentColor;-webkit-mask:var(--pbu-icon) center/contain no-repeat;mask:var(--pbu-icon) center/contain no-repeat}
.pbu-kind-image.has-preview .pbu-preview-icon{opacity:0}
.pbu-kind-audio .pbu-preview{color:#8cff73;background:rgba(112,255,82,.075)}
.pbu-kind-video .pbu-preview{color:#79caff;background:rgba(75,159,255,.075)}
.pbu-kind-file .pbu-preview{color:#c8d2df;background:rgba(255,255,255,.045)}
.pbu-body{min-width:0;display:flex;flex-direction:column;gap:0}
.pbu-name{display:none!important}
.pbu-meta{display:flex;align-items:center;gap:7px;min-width:0;color:#758195;font:750 9.5px/1.2 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.pbu-meta-left{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbu-status{margin-left:auto;flex:0 0 auto;color:#8b97aa;white-space:nowrap}
.pbu-item[data-state="preparing"] .pbu-status,.pbu-item[data-state="uploading"] .pbu-status,.pbu-item[data-state="publishing"] .pbu-status{color:#a9ff8f}
.pbu-item[data-state="error"] .pbu-status{color:#ff8b98}
.pbu-item[data-state="done"] .pbu-status{color:#8cff73}
.pbu-progress{display:none}
.pbu-actions{display:flex;align-items:center;gap:5px}
.pbu-action{width:31px;height:31px;padding:0;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:transparent;color:#8591a3;display:grid;place-items:center;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pbu-action:hover,.pbu-action:focus-visible{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:#e7edf5}
.pbu-action.pbu-remove:hover,.pbu-action.pbu-remove:focus-visible{color:#ff8b98;border-color:rgba(255,105,117,.25);background:rgba(255,75,91,.05)}
.pbu-icon{width:15px;height:15px;background:currentColor;-webkit-mask:var(--pbu-icon) center/contain no-repeat;mask:var(--pbu-icon) center/contain no-repeat}
.pbu-compact{grid-template-columns:44px minmax(0,1fr) auto;padding:7px 8px;border-radius:14px}
.pbu-compact .pbu-preview{width:44px;height:44px;min-width:44px;border-radius:11px}
.pbu-compact .pbu-meta{font-size:9px}
.pbu-tile{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:15px;background:#0d131b;min-width:0}
.pbu-tile .pbu-preview{width:100%;height:auto;min-width:0;aspect-ratio:1/1;border-radius:0;background:#101720}
.pbu-tile .pbu-body{padding:8px 9px 9px;gap:4px}.pbu-tile .pbu-actions{position:absolute;top:6px;right:6px;z-index:3}
.pbu-tile .pbu-action{width:27px;height:27px;border-radius:9px;background:rgba(7,10,15,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#dce4ee}
.pbu-tile .pbu-replace{position:static}
.pbu-tile .pbu-meta{font-size:8.5px}.pbu-tile .pbu-status{display:none}
.pbu-tile::after{height:3px}
.pbu-single:empty{display:none}
@media(max-width:520px){
  .pbu-item{grid-template-columns:50px minmax(0,1fr) auto;padding:8px 9px;border-radius:15px;gap:10px}
  .pbu-preview{width:50px;height:50px;min-width:50px;border-radius:12px}
  .pbu-meta{font-size:9px}
  .pbu-status{max-width:105px;overflow:hidden;text-overflow:ellipsis}
  .pbu-action{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){.pbu-item::after,.pbu-action{transition:none!important}}

/* Shared adapters for existing upload surfaces */
.home-comment-photo-preview.pbu-queue{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
.home-comment-photo-preview.pbu-queue .pbu-item{width:100%;box-sizing:border-box}
#pb-post-composer .pbu-item,#home-comments-sheet .pbu-item,#pb-sidebar .pbu-item{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}

/* A232 — reliable previews and Lucide icon fallback */
.pbu-preview img[hidden]{display:none!important}
.pbu-item.has-preview .pbu-preview img{display:block!important}
.pbu-item.is-preview-loading .pbu-preview::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);border-top-color:#8dff52;
  animation:pbu-spin .72s linear infinite;z-index:2
}
.pbu-item.has-preview .pbu-preview::after,.pbu-item.is-preview-error .pbu-preview::after{display:none}
.pbu-item.is-preview-loading .pbu-preview-icon{opacity:.28}
.pbu-item.is-preview-error .pbu-preview-icon{opacity:1;color:#8d98aa}
.pbu-preview-icon,.pbu-icon{
  display:block!important;background-color:currentColor!important;background-image:none!important;
  -webkit-mask-image:var(--pbu-icon)!important;mask-image:var(--pbu-icon)!important;
  -webkit-mask-position:center!important;mask-position:center!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  -webkit-mask-size:contain!important;mask-size:contain!important
}
@keyframes pbu-spin{to{transform:rotate(360deg)}}

/* One flat component on every surface */
.pbu-item{background:#0d131b;border-color:rgba(255,255,255,.075);box-shadow:none!important}
.pbu-preview{background:#121a24;border:1px solid rgba(255,255,255,.055);box-shadow:none!important}
.pbu-kind-audio .pbu-preview{color:#91ff6f;background:rgba(125,255,75,.055)}
.pbu-kind-video .pbu-preview{color:#81caff;background:rgba(80,160,255,.055)}
.pbu-actions .pbu-action{background:transparent!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.pbu-item.is-preview-loading .pbu-preview::after{animation:none}}