:root { --bg:#0d0d12; --cyan:#22d3ee; --pink:#f472b6; --panel:#15151d; --line:#262633; }
html,body { background: var(--bg); color:#e4e4e7; font-family:'Familjen Grotesk',sans-serif; }
body { background:
  radial-gradient(circle at 15% -10%, rgba(34,211,238,.12), transparent 40%),
  radial-gradient(circle at 90% 110%, rgba(244,114,182,.12), transparent 40%),
  repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.025) 39px 40px),
  repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.025) 39px 40px), var(--bg);
  background-attachment: fixed; }
.font-display { font-family:'Bungee',cursive; }
.font-mono { font-family:'DM Mono',monospace; }
.logo { color: var(--cyan); text-shadow: 0 0 12px rgba(34,211,238,.6); animation: flicker 5s infinite; }
@keyframes flicker { 0%,92%,100%{opacity:1} 93%{opacity:.4} 94%{opacity:1} 96%{opacity:.6} 97%{opacity:1} }
.tagline { animation: fadein .6s ease; }
@keyframes fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1} }

@media (min-width: 768px) { #grid { grid-template-columns: repeat(var(--cols), minmax(0,1fr)) !important; } }

.slot { position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; animation: pop .5s both; transition: border-color .2s, box-shadow .2s; }
@keyframes pop { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.slot-active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 24px rgba(34,211,238,.35); }
.slot-drag { border-color: var(--pink); box-shadow: 0 0 28px rgba(244,114,182,.5); }
.slot:fullscreen { border-radius:0; }
.vid { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border:0; background:#000; }
.slot-num { position:absolute; top:8px; right:10px; z-index:20; font-family:'DM Mono',monospace; font-size:11px; color:rgba(255,255,255,.35); }
.nosignal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow-y:auto; }
.static { position:absolute; inset:-50%; opacity:.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise .25s steps(4) infinite; }
@keyframes noise { 0%{transform:translate(0,0)} 25%{transform:translate(-5%,3%)} 50%{transform:translate(4%,-6%)} 75%{transform:translate(-3%,5%)} 100%{transform:translate(2%,-2%)} }
.scanlines { position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); opacity:.5; transition: opacity .3s; }
.slot:hover .scanlines { opacity:.15; }
.label-chip { position:absolute; top:8px; left:8px; z-index:20; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:rgba(13,13,18,.75); border:1px solid var(--line); backdrop-filter: blur(6px); }
.toolbar { position:absolute; left:6px; right:6px; bottom:6px; z-index:20; display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px; border-radius:10px; background:rgba(13,13,18,.85); backdrop-filter: blur(8px); opacity:0; transform: translateY(6px); transition: .2s; }
.slot:hover .toolbar, .slot-active .toolbar { opacity:1; transform:none; }
@media (hover:none) { .toolbar { opacity:1; transform:none; } }

.btn { font-family:'DM Mono',monospace; font-size:11px; padding:4px 8px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:#d4d4d8; transition: .12s; white-space:nowrap; }
.btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn:active { transform: scale(.94) translateY(1px); }
.btn-on { background: rgba(34,211,238,.15); border-color: var(--cyan); color: var(--cyan); }
.inp { font-family:'DM Mono',monospace; font-size:12px; background:#0a0a0f; border:1px solid var(--line); border-radius:7px; padding:5px 8px; color:#e4e4e7; outline:none; }
.inp:focus { border-color: var(--pink); }

.layout-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 8px; border-radius:9px; border:1px solid var(--line); background:var(--panel); font-family:'DM Mono',monospace; font-size:10px; color:#a1a1aa; transition:.15s; }
.layout-btn:hover { border-color: var(--pink); }
.layout-on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,.3); }
.mini { display:grid; gap:2px; width:26px; }
.mini i { display:block; height:7px; background: currentColor; opacity:.7; border-radius:1px; }

.master { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); width:min(1100px, calc(100% - 20px)); z-index:50; padding:10px 14px; border-radius:18px; background:rgba(21,21,29,.92); border:1px solid var(--line); backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(34,211,238,.08); }
.bigplay { width:44px; height:44px; flex-shrink:0; border-radius:50%; background: var(--cyan); color:#0d0d12; font-size:16px; font-weight:700; box-shadow: 0 0 18px rgba(34,211,238,.6); transition:.12s; }
.bigplay:active { transform: scale(.9); }
.scrub { -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; background: linear-gradient(90deg, var(--cyan) var(--p), #2a2a38 var(--p)); position:relative; z-index:2; }
.scrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); cursor:pointer; }
.scrub::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--pink); }
.loopband { position:absolute; top:-4px; height:14px; background: rgba(244,114,182,.25); border-left:2px solid var(--pink); border-right:2px solid var(--pink); z-index:1; pointer-events:none; }
.toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:60; padding:8px 16px; border-radius:999px; background:var(--pink); color:#0d0d12; font-weight:700; font-size:13px; animation: fadein .3s; }
.achv { font-family:'Bungee',cursive; font-size:13px; text-align:center; padding:8px; border-radius:10px; color:#0d0d12; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--cyan)); background-size:200%; animation: shimmer 2s linear infinite; }
@keyframes shimmer { to { background-position: 200% 0; } }