/* Store videos — "status"-style circles + full-screen viewer + owner sheet */

/* ── Circle row ── */
.fmv-row { display:flex; gap:0.9rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
           padding:0.25rem 0.15rem 0.35rem; scroll-snap-type:x proximity; }
.fmv-row::-webkit-scrollbar { display:none; }
.fmv-item { flex:0 0 auto; width:4.9rem; display:flex; flex-direction:column; align-items:center; gap:0.4rem;
            background:none; border:0; padding:0; cursor:pointer; scroll-snap-align:start; color:inherit; font:inherit; }
.fmv-ring { position:relative; width:4.5rem; height:4.5rem; border-radius:50%; padding:3px;
            background:conic-gradient(from 200deg, #fbbf24, #34d399, #fbbf24); transition:transform .15s; }
.fmv-item:active .fmv-ring { transform:scale(.94); }
.fmv-item.seen .fmv-ring { background:rgba(255,255,255,0.28); }
.fmv-thumb { width:100%; height:100%; border-radius:50%; border:2.5px solid #12301f; background:#0f2a1e center/cover no-repeat;
             overflow:hidden; display:flex; align-items:center; justify-content:center; color:#6ee7b7; }
.fmv-thumb img, .fmv-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.fmv-play { position:absolute; right:-1px; bottom:-1px; width:1.35rem; height:1.35rem; border-radius:50%;
            background:#fbbf24; color:#1b4332; font-size:.55rem; display:flex; align-items:center; justify-content:center;
            border:2px solid #12301f; }
.fmv-label { font-size:.7rem; font-weight:700; color:#ecfdf5; max-width:100%; text-align:center; line-height:1.2;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.fmv-add .fmv-ring { background:none; border:2px dashed rgba(251,191,36,.75); padding:0; }
.fmv-add .fmv-thumb { border:0; background:rgba(251,191,36,.12); color:#fbbf24; font-size:1.3rem; }
.fmv-add .fmv-label { color:#fbbf24; }
.fmv-count { font-size:.65rem; font-weight:700; color:#a7f3d0; }

/* ── Viewer ── */
.fmv-viewer { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; }
.fmv-viewer.open { display:flex; }
.fmv-stage { position:relative; width:100%; height:100%; max-width:26rem; background:#000; overflow:hidden; user-select:none; -webkit-user-select:none; }
@media (min-width:640px) { .fmv-stage { height:min(100%, 52rem); border-radius:1.1rem; } }
.fmv-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.fmv-shade-top, .fmv-shade-bot { position:absolute; left:0; right:0; pointer-events:none; z-index:2; }
.fmv-shade-top { top:0; height:7rem; background:linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.fmv-shade-bot { bottom:0; height:10rem; background:linear-gradient(0deg, rgba(0,0,0,.75), transparent); }
.fmv-bars { position:absolute; top:.6rem; left:.6rem; right:.6rem; display:flex; gap:.25rem; z-index:5; }
.fmv-bar { flex:1; height:.2rem; border-radius:9px; background:rgba(255,255,255,.3); overflow:hidden; }
.fmv-bar > i { display:block; height:100%; width:0; background:#fff; }
.fmv-head { position:absolute; top:1.1rem; left:.7rem; right:.7rem; z-index:5; display:flex; align-items:center; gap:.6rem; color:#fff; }
.fmv-head-logo { width:2.2rem; height:2.2rem; border-radius:50%; object-fit:cover; background:#1b4332; flex-shrink:0;
                 display:flex; align-items:center; justify-content:center; font-weight:800; color:#fbbf24; }
.fmv-head-text { min-width:0; flex:1; }
.fmv-head-name { font-weight:800; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fmv-head-sub { font-size:.68rem; color:rgba(255,255,255,.75); }
.fmv-iconbtn { width:2.3rem; height:2.3rem; border-radius:50%; border:0; background:rgba(0,0,0,.35); color:#fff; font-size:.95rem;
               display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.fmv-iconbtn:hover { background:rgba(0,0,0,.55); }
.fmv-tap { position:absolute; top:4.5rem; bottom:6rem; z-index:3; background:none; border:0; cursor:pointer; }
.fmv-tap-prev { left:0; width:30%; } .fmv-tap-next { right:0; width:30%; } .fmv-tap-mid { left:30%; width:40%; }
.fmv-pausebadge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; width:4rem; height:4rem; border-radius:50%;
                  background:rgba(0,0,0,.5); color:#fff; font-size:1.4rem; display:none; align-items:center; justify-content:center; pointer-events:none; }
.fmv-stage.paused .fmv-pausebadge { display:flex; }
.fmv-spinner { position:absolute; top:50%; left:50%; width:2.4rem; height:2.4rem; margin:-1.2rem 0 0 -1.2rem; z-index:4; border-radius:50%;
               border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:fmv-spin .8s linear infinite; display:none; pointer-events:none; }
.fmv-stage.loading .fmv-spinner { display:block; }
@keyframes fmv-spin { to { transform:rotate(360deg); } }
.fmv-foot { position:absolute; left:0; right:0; bottom:0; z-index:5; padding:1rem 1rem 1.1rem; color:#fff; }
.fmv-title { font-weight:800; font-size:1rem; line-height:1.25; }
.fmv-caption { font-size:.82rem; color:rgba(255,255,255,.88); margin-top:.25rem; line-height:1.4; max-height:4.2rem; overflow:auto; }
.fmv-meta { font-size:.68rem; color:rgba(255,255,255,.65); margin-top:.35rem; }
.fmv-owner { display:flex; gap:.5rem; margin-top:.7rem; }
.fmv-owner button { flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .6rem; border-radius:.7rem; border:0;
                    font-weight:800; font-size:.78rem; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; }
.fmv-owner button.danger { background:rgba(239,68,68,.85); }
.fmv-owner button:hover { filter:brightness(1.15); }

/* ── Owner sheet ── */
.fmv-sheet-wrap { position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.6); display:none; align-items:flex-end; justify-content:center; padding:0; }
.fmv-sheet-wrap.open { display:flex; }
@media (min-width:640px) { .fmv-sheet-wrap { align-items:center; padding:1rem; } }
.fmv-sheet { width:100%; max-width:30rem; max-height:92vh; overflow:auto; background:#fff; color:#0f172a; border-radius:1.25rem 1.25rem 0 0; padding:1.1rem 1.2rem 1.4rem; }
@media (min-width:640px) { .fmv-sheet { border-radius:1.25rem; } }
.fmv-sheet, .fmv-sheet * { box-sizing:border-box; }
.fmv-sheet h3 { font-size:1.05rem; font-weight:800; color:#14532d; display:flex; align-items:center; justify-content:space-between; }
.fmv-sheet label { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#475569; margin:.9rem 0 .3rem; }
.fmv-sheet input[type=text], .fmv-sheet textarea { width:100%; border:1px solid #cbd5e1; border-radius:.7rem; padding:.6rem .75rem; font-size:.9rem; font-family:inherit; }
.fmv-sheet input:focus, .fmv-sheet textarea:focus { outline:2px solid #86efac; border-color:#22c55e; }
.fmv-sheet textarea { min-height:4.2rem; resize:vertical; }
.fmv-counter { font-size:.68rem; color:#94a3b8; text-align:right; margin-top:.15rem; }
.fmv-drop { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.4rem 1rem; border:2px dashed #86efac; border-radius:1rem;
            background:#f0fdf4; color:#166534; font-weight:700; font-size:.85rem; cursor:pointer; text-align:center; }
.fmv-drop small { font-weight:500; color:#4d7c5f; }
.fmv-preview { width:100%; max-height:15rem; border-radius:.9rem; background:#000; display:none; }
.fmv-info { font-size:.75rem; color:#475569; margin-top:.4rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.fmv-error { margin-top:.8rem; padding:.6rem .75rem; border-radius:.7rem; background:#fef2f2; color:#b91c1c; font-size:.8rem; font-weight:600; display:none; }
.fmv-progress { margin-top:.9rem; height:.5rem; border-radius:9px; background:#e2e8f0; overflow:hidden; display:none; }
.fmv-progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg,#22c55e,#16a34a); transition:width .15s; }
.fmv-progress-text { font-size:.72rem; color:#475569; margin-top:.3rem; display:none; }
.fmv-actions { display:flex; gap:.6rem; margin-top:1.1rem; }
.fmv-btn { flex:1; padding:.75rem 1rem; border-radius:.8rem; font-weight:800; font-size:.88rem; border:0; cursor:pointer; }
.fmv-btn-primary { background:#16a34a; color:#fff; } .fmv-btn-primary:disabled { opacity:.55; cursor:not-allowed; }
.fmv-btn-ghost { background:#f1f5f9; color:#334155; }

@media (prefers-reduced-motion: reduce) { .fmv-spinner { animation-duration:2s; } .fmv-ring { transition:none; } }