.pi-root{flex-direction:column;gap:.6rem;display:flex;position:relative}.pi-root--drag{outline:2px dashed var(--accent);outline-offset:6px;border-radius:12px}.pi-dropzone{z-index:2;background:var(--accent-glow,#0000000a);color:var(--accent);pointer-events:none;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;font-size:.85rem;font-weight:650;display:flex;position:absolute;inset:0}.pi-input{display:none}.pi-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;display:grid}.pi-tile{aspect-ratio:4/3;background:var(--surface-alt);border:1px solid var(--border);border-radius:12px;position:relative;overflow:hidden}.pi-tile--loading{justify-content:center;align-items:center;display:flex}.pi-tile-img{object-fit:cover;width:100%;height:100%;display:block}.pi-tile-play{width:34px;height:34px;color:var(--foreground);pointer-events:none;background:#ffffffeb;border-radius:50%;justify-content:center;align-items:center;margin:auto;display:inline-flex;position:absolute;inset:0;box-shadow:0 2px 8px #00000059}.pi-tile-grip,.pi-tile-remove{cursor:pointer;color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0000008c;border:none;justify-content:center;align-items:center;transition:background .15s;display:inline-flex;position:absolute}.pi-tile-grip:hover,.pi-tile-remove:hover{background:#000000bf}.pi-tile-grip{cursor:grab;touch-action:none;border-radius:7px;width:26px;height:26px;bottom:.4rem;left:.4rem}.pi-tile-grip:active{cursor:grabbing}.pi-tile-remove{border-radius:50%;width:24px;height:24px;top:.4rem;right:.4rem}.pi-add{aspect-ratio:4/3;border:1.5px dashed var(--border-strong);background:var(--surface-alt);color:var(--text-secondary);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;font-size:.82rem;font-weight:600;transition:border-color .15s,color .15s,background .15s;display:flex}.pi-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.pi-add-label{margin-top:.15rem}.pi-add-sub{color:var(--text-muted);font-size:.72rem;font-weight:500}.pi-spinner{border:2.5px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;width:22px;height:22px;animation:.7s linear infinite pi-spin}@keyframes pi-spin{to{transform:rotate(360deg)}}.pi-hint{color:var(--text-muted);margin:0;font-size:.78rem}.pi-error{color:var(--danger);margin:0 0 .15rem;font-size:.78rem}@media (max-width:640px){.pi-tile-play{width:28px;height:28px}.pi-add{aspect-ratio:auto;border-radius:10px;justify-self:start;gap:0;width:46px;height:46px}.pi-add-label,.pi-add-sub{display:none}}@media (max-width:480px){.pi-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.45rem}}