:root{
  --bg: #0f1115;
  --panel: #161a21;
  --text: #e6e6e6;
  --muted: #a0a7b4;
  --accent: #6aa8ff;
  --accent-2: #4e7ed6;
  --danger: #ff6b6b;
  --border: #273043;
  /* Scale used to crop YouTube iframes to fill container.
     Reduced slightly to reveal a bit more of the video. */
  --yt-cover-scale: 1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg,#0c0e13 0%, #0f1115 20% 80%, #0c0e13 100%);
}

/* Floating toggle for top UI */
.ui-toggle{
  position: fixed;
  top: 12px;
  right: clamp(16px, 4vw, 40px);
  z-index: 1000;
  background: rgba(22,26,33,.85);
  border:1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}
.ui-toggle:hover{ background: rgba(35,40,50,.95) }

/* Hide top sections when toggled off; keep tile controls intact */
.ui-hidden header.topbar,
.ui-hidden section.controls{ display: none; }

.topbar{
  padding: 20px clamp(16px, 4vw, 40px) 10px;
}
.topbar h1{ margin:0; font-size: clamp(20px,3vw,28px); font-weight: 700; letter-spacing: .2px}
.topbar .tag{ margin:.2rem 0 0; color:var(--muted); font-size: .95rem }
.topbar .tools{ margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.topbar .tools .vol{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.topbar .tools .vol input[type=range]{ width:200px; accent-color: var(--accent); }

.controls{
  margin: 0 clamp(16px, 4vw, 40px) 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.controls textarea{
  width: 100%;
  min-height: 110px;
  resize: vertical;
  background: #0d1016;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.35;
}

.actions{ display:flex; flex-wrap: wrap; gap:10px; align-items:center; margin-top:10px }
.actions .inline{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.95rem }

button{
  cursor:pointer;
  border:1px solid transparent;
  border-radius:8px;
  padding:9px 14px;
  font-weight:600;
}
.primary{ background:var(--accent); color:#081120; border-color:var(--accent-2) }
.primary:hover{ background: var(--accent-2) }
.ghost{ background:transparent; color:var(--muted); border-color:var(--border) }
.ghost:hover{ color:var(--text); border-color:#3a465f }

#message{ margin-top:6px; color:var(--muted); font-size:.95rem; min-height: 1.2em }

.grid{
  display:flex;
  flex-wrap: wrap;
  gap:12px;
  justify-content: center; /* center incomplete rows */
  padding: 8px clamp(16px, 4vw, 40px) 40px;
}

/* When only 1 or 2 tiles, make them fill the row */
.grid.grid-one .tile{
  flex: 1 1 100%;
  max-width: 100%;
}
.grid.grid-two .tile{
  flex: 1 1 calc((100% - 12px) / 2);
  max-width: calc((100% - 12px) / 2);
}

/* Exactly 3 tiles → 2 on top, 1 full-width below */
.grid.grid-three .tile{
  flex: 1 1 calc((100% - 12px) / 2);
  max-width: calc((100% - 12px) / 2);
}

/* Exactly 4 tiles → 2x2 layout */
.grid.grid-four .tile{
  flex: 1 1 calc((100% - 12px) / 2);
  max-width: calc((100% - 12px) / 2);
}

/* Center incomplete last row in 3-col grid */
/* One item in last row: center in column 2 */
.grid > .tile:last-child:nth-child(3n+1){
  grid-column: 2;
}
/* Remove special-casing for two items: do not skip center column */

.tile{
  position:relative;
  background:#000;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  /* Enforce 16:9 container height so absolutely-positioned media can fill it */
  aspect-ratio: 16/9;
  /* Force exactly 3 items per row with 12px gaps */
  flex: 0 0 calc((100% - 24px) / 3);
  max-width: calc((100% - 24px) / 3);
  transition: transform .18s ease;
}
/* Iframe/video fills the tile */
.tile .frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
  border:0;
}
/* TikTok tiles are vertical */
.tile.tiktok{ aspect-ratio: 9/16; }
/* Crop YouTube player to remove letterbox bars/chrome space */
.tile .frame.yt{
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) scale(var(--yt-cover-scale));
  transform-origin: center center;
}
.tile .controls{
  position:absolute; inset:auto 8px 8px auto;
  display:flex; gap:8px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  cursor: grab;
}

/* Reveal controls when hovering a tile, the grid, or when focusing within (a11y) */
.tile:hover .controls,
.tile:focus-within .controls,
.grid:hover .tile .controls{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Keep controls visible while in fullscreen */
.tile:fullscreen .controls,
.tile.is-fullscreen .controls{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Drag feedback */
.tile.dragging{ outline: 2px dashed var(--accent-2); outline-offset: -2px; }
.tile.drop-target{ outline: 2px solid var(--accent); outline-offset: -2px; }

/* Full-tile drag overlay (drag from anywhere) */
.tile .drag-overlay{
  position:absolute;
  inset:0;
  z-index:1; /* below controls (z:2), above iframe */
  pointer-events:auto; /* capture pointer so iframe doesn't block drag */
  cursor: grab;
}
.tile .drag-overlay:active{ cursor: grabbing; }
.iconbtn{
  border:1px solid var(--border);
  background: rgba(22,26,33,.8);
  color: var(--text);
  border-radius:8px;
  padding:6px 10px;
}
.iconbtn:hover{ background: rgba(35,40,50,.95) }
.iconbtn.danger{ border-color:#5a2b2b; background:rgba(80,20,20,.85); color:#ffd7d7 }
.iconbtn.danger:hover{ background:rgba(90,20,20,.95) }

.footer{ color:var(--muted); text-align:center; padding:0 16px 30px }
.footer .tip{ display:inline-block; transition: opacity .25s ease }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

@media (max-width: 380px){
  .grid{ grid-template-columns: 1fr; }
}