:root { --bg:#0e0f11; --panel:#1a1c20; --line:#2c2f35; --fg:#e8e8e8; --dim:#7a7f88; --live:#00ffa3; --bar:44px; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:14px system-ui, sans-serif; }
body { display:flex; flex-direction:column; }
button { font:inherit; cursor:pointer; border:0; border-radius:4px; }

/* 멀티뷰 */
#grid { flex:1; min-height:0; display:grid; gap:2px; padding:2px; }
.cell { background:#000; min-height:0; position:relative; }
.cell video { cursor:pointer; }
/* 음소거 중일 때만 오른쪽 위에 작은 🔇를 계속 띄운다 */
.cell.muted::before { content:'🔇'; position:absolute; top:8px; right:8px; z-index:1; padding:4px 7px; border-radius:6px; background:#000a; font-size:18px; line-height:1; pointer-events:none; }
/* 클릭하면 가운데에 🔇/🔊가 크게 떴다가 사라진다 */
.cell::after { content:'🔊'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:16px 22px; border-radius:50%; background:#000a; font-size:clamp(32px, 8vmin, 72px); line-height:1; opacity:0; pointer-events:none; }
.cell.muted::after { content:'🔇'; }
.cell.flash::after { animation:flash .9s ease-out forwards; }
@keyframes flash { 0% { opacity:1; transform:translate(-50%,-50%) scale(1); } 60% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.15); } }
.cell video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.empty { margin:auto; color:var(--dim); text-align:center; line-height:1.8; }

/* 하단 상태바 */
#bar { height:var(--bar); display:flex; align-items:center; gap:8px; padding:0 8px; background:var(--panel); border-top:1px solid var(--line); }
#add-form { display:flex; gap:4px; }
#add-input { width:260px; padding:6px 8px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:4px; }
#add-form button { padding:6px 10px; background:var(--live); color:#000; font-weight:600; }
#live-chips { flex:1; display:flex; gap:4px; overflow-x:auto; white-space:nowrap; }
#save, #offline-toggle { padding:6px 10px; background:var(--line); color:var(--fg); white-space:nowrap; }

.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:12px; background:var(--bg); border:1px solid var(--line); }
.chip label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.chip input { margin:0; accent-color:var(--live); }
.chip:not(.shown):not(.off) { color:var(--dim); border-style:dashed; }
.chip .dot { width:8px; height:8px; border-radius:50%; background:var(--live); }
.chip.off { color:var(--dim); }
.chip.off .dot { background:transparent; border:1px solid var(--dim); }
.chip.off .name { text-decoration:line-through; }
.chip .x { background:none; color:var(--dim); padding:0 2px; }
.chip .x:hover { color:var(--fg); }

/* 오프라인 목록: 상태바 위로 겹쳐 펼침 → 멀티뷰 영역을 차지하지 않음 */
#offline-panel { position:fixed; right:8px; bottom:calc(var(--bar) + 6px); max-width:min(420px, calc(100vw - 16px)); display:flex; flex-wrap:wrap; gap:4px; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
#offline-panel[hidden] { display:none; }
#offline-panel .title { width:100%; color:var(--dim); font-size:12px; margin-bottom:2px; }

#toast { position:fixed; left:50%; bottom:calc(var(--bar) + 12px); transform:translateX(-50%); max-width:calc(100vw - 32px); padding:10px 14px; background:#000d; border:1px solid var(--live); border-radius:6px; line-height:1.6; text-align:center; }

@media (max-width:640px) {
  #add-input { width:140px; }
  #save .label { display:none; }
}