*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:#000;color:#eee;font-family:system-ui,sans-serif;-webkit-text-size-adjust:100%}
.grid{
  display:grid;
  gap:2px;
  padding:2px;
  /* Mobile: always 1 column, hidden tiles simply removed from flow */
  grid-template-columns:1fr;
  grid-auto-rows:auto;
}
.tile.hidden{display:none}
.tile{
  position:relative;
  background:#111;
  overflow:hidden;
  aspect-ratio:16/9;
  min-height:0;
  min-width:0;
  border:2px solid transparent;
  transition:border-color 0.2s;
}
.tile.active-audio{
  border-color:#0f0;
  box-shadow:0 0 0 2px #0f0 inset;
}
.offline-state{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  color:#888;
  font-size:14px;
  text-align:center;
}
/* Tablet/desktop: fit grid exactly to viewport, no scroll */
@media (min-width:700px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .grid{
    gap:4px;padding:4px;
    width:100vw;
    height:100vh;height:100svh;height:100dvh;
    grid-template-columns:repeat(var(--cols,3),1fr);
    grid-template-rows:repeat(var(--rows,3),1fr);
    grid-auto-rows:1fr;
  }
  .tile{aspect-ratio:auto}
}
.tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* === Collapsible Audio Panel === */
#audioPanel{
  position:fixed;
  top:12px;
  right:12px;
  z-index:1000;
  background:rgba(20,20,30,0.95);
  border:1px solid #444;
  border-radius:10px;
  padding:8px;
  width:44px;
  max-height:100vh;
  overflow:hidden;
  transition:width 0.25s ease, padding 0.25s ease, max-height 0.25s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  display:flex;
  flex-direction:column;
  gap:6px;
}
#audioPanel.expanded{
  width:min(280px,95vw);
  padding:10px 12px;
  max-height:min(400px,80vh);
  overflow-y:auto;
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  padding:4px 6px;
  border-radius:6px;
  transition:background 0.15s;
  white-space:nowrap;
}
.panel-header:hover{background:#2a2a3a}
.panel-controls{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.panel-speaker{
  width:28px;height:28px;
  border-radius:6px;
  background:#0f0;
  color:#000;
  border:none;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.15s, background 0.15s;
}
.panel-speaker:hover{transform:scale(1.05);background:#0c0}
.panel-minimize{
  width:28px;height:28px;
  border-radius:6px;
  background:#444;
  color:#fff;
  border:none;
  font-size:14px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.15s, background 0.15s;
  display:none;
}
#audioPanel.expanded .panel-minimize{display:flex}
.panel-minimize:hover{transform:scale(1.05);background:#555}
.panel-title{
  font-size:13px;
  color:#0f0;
  font-weight:600;
  display:none;
  flex:1;
}
.panel-status{
  font-size:11px;
  color:#888;
  display:none;
}
#audioPanel.expanded .panel-title,
#audioPanel.expanded .panel-status{display:block}
#audioButtons{
  display:none;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
}
#audioPanel.expanded #audioButtons{display:flex}
.mute-all-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:8px 10px;
  background:#3a1a1a;
  border:1px solid #c33;
  border-radius:6px;
  color:#fcc;
  cursor:pointer;
  text-align:center;
  transition:all 0.15s;
  font-size:12px;
  font-weight:600;
  margin-bottom:4px;
}
.mute-all-btn:hover{background:#4a2a2a;border-color:#f55;color:#fff}
.mute-all-btn .icon{font-size:14px}
.audio-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 10px;
  background:#222;
  border:1px solid #333;
  border-radius:6px;
  color:#ddd;
  cursor:pointer;
  text-align:left;
  transition:all 0.15s;
  font-size:12px;
}
.audio-btn:hover{background:#2a2a3a;border-color:#555}
.audio-btn.active{background:#1a3a1a;border-color:#0f0;color:#0f0}
.audio-btn.offline{cursor:not-allowed;opacity:0.5}
.audio-btn .status{font-size:16px;min-width:20px;text-align:center}
.audio-btn .label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-btn .index{color:#888;font-size:11px;min-width:18px}
.audio-btn.is-hidden{opacity:0.5}
.audio-btn.is-hidden .label{text-decoration:line-through;color:#888}
.vis-toggle{
  background:transparent;border:none;color:#aaa;cursor:pointer;
  font-size:14px;padding:2px 4px;border-radius:4px;line-height:1;
}
.vis-toggle:hover{background:#333;color:#fff}
.panel-actions{
  display:flex;gap:4px;margin-bottom:4px;
}
.panel-actions button{
  flex:1;padding:6px 8px;background:#222;border:1px solid #333;border-radius:6px;
  color:#bbb;cursor:pointer;font-size:11px;transition:all 0.15s;
}
.panel-actions button:hover{background:#2a2a3a;border-color:#555;color:#fff}
#audioPanel::-webkit-scrollbar{width:6px}
#audioPanel::-webkit-scrollbar-track{background:#1a1a2a;border-radius:3px}
#audioPanel::-webkit-scrollbar-thumb{background:#444;border-radius:3px}
#audioPanel::-webkit-scrollbar-thumb:hover{background:#555}