/* الحالات: الشريط، الإضافة، العارض */
.strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; margin-bottom: 4px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.st { display: grid; justify-items: center; gap: 6px; width: 72px; flex-shrink: 0; }
.st-name { font-size: 12px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ring { position: relative; display: inline-grid; place-items: center; padding: 4px; border-radius: 50%; background: var(--glass-3); }
.ring.fresh { filter: drop-shadow(0 0 8px var(--red-glow)); }
.ring > .av { box-shadow: 0 0 0 2px #0b0b0e; }
.ring .plus { position: absolute; bottom: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--red-hi), var(--red)); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg); }

.st-preview { position: relative; border-radius: var(--r-lg); aspect-ratio: 4 / 5; max-height: 52dvh; display: grid; place-items: center; overflow: hidden; transition: background .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 30px -12px rgba(0,0,0,.9); }
.st-preview textarea { background: transparent; border: 0; box-shadow: none; color: #fff; text-align: center; font-size: 22px; font-weight: 600; position: relative; z-index: 1; }
.st-preview textarea::placeholder { color: rgba(255,255,255,.7); }
.st-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-preview.has-img { place-items: end center; }
.st-preview.has-img textarea { font-size: 16px; background: rgba(0,0,0,.5); border-radius: 0; }
.swatches { display: flex; gap: 10px; }
.sw { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 3px 8px rgba(0,0,0,.5); }
.sw.on { border-color: #fff; }

.viewer { position: fixed; inset: 0; z-index: 70; background: #000; color: #fff; display: flex; flex-direction: column; }
.bars { display: flex; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 12px 0; position: relative; z-index: 2; }
.bars span { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.bars i { display: block; height: 100%; width: 0; background: #fff; }
.bars .done i { width: 100%; }
.bars .run i { animation: fill var(--d, 5s) linear forwards; }
@keyframes fill { to { width: 100%; } }
.vh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; position: relative; z-index: 3; }
.vh span { display: grid; line-height: 1.3; }
.vh small { opacity: .75; font-size: 12px; }
.vh .icon-btn { color: #fff; }
.vbody { position: absolute; inset: 0; display: grid; place-items: center; }
.vbody img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vbody .big { font-size: clamp(22px, 5vw, 34px); font-weight: 600; text-align: center; padding: 24px; max-width: 26ch; white-space: pre-wrap; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.vbody .cap { position: absolute; bottom: 70px; inset-inline: 0; text-align: center; padding: 10px 20px; background: rgba(0,0,0,.55); margin: 0; white-space: pre-wrap; }
.vnav { position: absolute; top: 80px; bottom: 70px; width: 35%; z-index: 1; }
.vnav.prev { right: 0; }
.vnav.next { left: 0; }
.views { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); inset-inline: 0; margin: auto; width: max-content; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); color: #fff; padding: 8px 16px; border-radius: 999px; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .bars .run i { animation: none; width: 100%; } }
.st-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-preview:has(video:not(.hidden)) { place-items: end center; }
.st-preview:has(video:not(.hidden)) textarea { font-size: 16px; background: rgba(0,0,0,.5); }
.vbody video { width: 100%; height: 100%; object-fit: contain; background: #000; }