:root{
  --bg-0:#0a0b10; --bg-1:#0d0f1a; --ink:#eaf2ff;
  --neon-pink:#ff3fd1; --neon-cyan:#21e9ff; --neon-violet:#8a5cff;
  --muted:#9aa3b2;
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(33,233,255,.12), transparent 60%),
    radial-gradient(1000px 500px at -10% 120%, rgba(255,63,209,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color:var(--ink); font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Inter, sans-serif;
  letter-spacing:.2px;
}

/* Container */
.wrap{max-width:1200px; margin:0 auto; padding:20px}

/* Neon title */
.holo-title{
  margin:0 0 10px 0;
  font-weight:800; font-size: clamp(28px, 4vw, 44px);
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 12px rgba(255,63,209,.35)) drop-shadow(0 0 20px rgba(33,233,255,.25));
}

/* Top bar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 24px}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* Grid */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Card */
.card{
  position:relative; padding:14px; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 40px rgba(138,92,255,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(33,233,255,.45);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 24px rgba(33,233,255,.25);
}

/* Dim / converting states */
.card.dim { opacity:.65; filter:saturate(.8); }
.card.converting::before{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  background: conic-gradient(from 0deg, rgba(255,63,209,.0), rgba(255,63,209,.55), rgba(33,233,255,.55), rgba(255,63,209,.0));
  filter: blur(18px); opacity:.35; animation: rotate 2.4s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); }}

/* Flip effect to reveal "ready" */
.flip{ perspective: 1200px; }
.flip .inner{ position:relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.flip.ready .inner{ transform: rotateY(180deg); }
.face{ backface-visibility:hidden; position:relative; }
.face.back{ position:absolute; inset:0; transform: rotateY(180deg); }

/* Thumb skeleton */
.thumb{
  border-radius:12px; height:140px; background: #121422; position:relative; overflow:hidden; margin-bottom:10px;
}
.thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.05) 20%, transparent 40%);
  transform: translateX(-100%);
  animation: shimmer 2.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); }}

/* Tags */
.tags{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color: var(--muted);
  padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.tag.glow{
  border-color: rgba(33,233,255,.45);
  box-shadow: 0 0 12px rgba(33,233,255,.35) inset, 0 0 8px rgba(33,233,255,.15);
  color:#d9fbff;
}

/* Buttons */
.btn{
  --glow: 0 0 12px rgba(255,63,209,.45), 0 0 24px rgba(33,233,255,.35);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  padding:10px 14px; font-weight:700; border-radius:12px; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12); color:#f8e9ff; background:rgba(255,255,255,.03);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  text-decoration:none;
}
.btn:hover{ box-shadow: var(--glow); border-color: rgba(255,255,255,.28); background:rgba(255,255,255,.07); }
.btn.pink { border-color: rgba(255,63,209,.5); box-shadow: 0 0 14px rgba(255,63,209,.35) inset; }
.btn.cyan { border-color: rgba(33,233,255,.5); box-shadow: 0 0 14px rgba(33,233,255,.35) inset; }

/* Progress */
.progress{
  width:100%; height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); margin-top:10px;
}
.progress > .bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-violet));
  box-shadow: 0 0 14px rgba(255,63,209,.35), 0 0 18px rgba(33,233,255,.25);
  transition: width .4s ease;
}

/* Dots */
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow: 0 0 10px currentColor; }
.dot.pink{ color:var(--neon-pink); background:var(--neon-pink); }
.dot.cyan{ color:var(--neon-cyan); background:var(--neon-cyan); }
.dot.violet{ color:var(--neon-violet); background:var(--neon-violet); }

/* Player wrapper */
.player-wrap{
  max-width: min(1200px, 92vw); margin: 24px auto; padding:16px; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 24px rgba(138,92,255,.25), inset 0 0 40px rgba(33,233,255,.08);
}
video{ width:100%; border-radius:14px; outline:none; display:block }





/* --- Card layout tuning for unconverted files --- */

.card.dim .tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* breathing room between buttons and tags */
}

.card.dim .tags .tag {
  margin-bottom: 4px;
}

.card.dim .tags > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card.dim .btn {
  flex: 1 1 auto;
  min-width: 110px;
  text-align: center;
}

/* Optional: make progress bar not squish buttons */
.card.dim .progress {
  width: 100%;
  margin-top: 6px;
}



.card.dim .tags {
  justify-content: flex-start;
}