:root{
  --bg:#3a020d; --bg2:#0c1224; --grid:rgba(120,180,255,.08);
  --card:#0f172a; --text:#e6ebff; --muted:#9bb1e1; --line:#1e2a50; --accent:#6ee7ff; --accent2:#a78bfa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text); background: radial-gradient(100% 60% at 50% 0%, var(--bg2), var(--bg));
}

/* fundal tip "grid/circuit" */
.bg-grid{position:fixed; inset:0; pointer-events:none; background-image:
  linear-gradient(var(--grid) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px; mask-image: radial-gradient(70% 40% at 50% 0%, #000 60%, transparent 100%);
}

.wrap{max-width:1080px; margin:0 auto; padding:24px}
.header{display:flex; flex-direction:column; gap:8px}
.brand{display:flex; gap:12px; align-items:center}
.chip{width:28px; height:28px; fill:var(--accent)}
.lede{color:var(--muted)}

.grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 16px; border-radius:16px; background:linear-gradient(180deg, rgba(110,231,255,.06), rgba(167,139,250,.06)), var(--card); outline:1px solid rgba(110,231,255,.12);
  text-decoration:none; color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .15s ease, outline-color .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); outline-color:rgba(167,139,250,.35); box-shadow:0 18px 38px rgba(0,0,0,.5)}
.card small{color:var(--muted)}

.card-player{border-radius:18px; padding:0; overflow:hidden; outline:1px solid rgba(110,231,255,.15); background:var(--card)}
video{width:100%; height:auto; display:block; background:#000; aspect-ratio:16/9}
.status{padding:10px 12px; font-size:14px; color:var(--muted); background:linear-gradient(90deg, rgba(110,231,255,.08), rgba(167,139,250,.08))}

.back{color:var(--accent); text-decoration:none}
.footer{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:24px; padding-top:12px}
.mini-nav{display:flex; gap:10px; flex-wrap:wrap}
.mini-nav a{color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:999px; outline:1px solid rgba(110,231,255,.15)}
.mini-nav a[aria-current]{color:#001014; background:linear-gradient(90deg, var(--accent), var(--accent2)); outline:none}

h1{margin:0; font-weight:800; letter-spacing:.2px}
.small{color:var(--muted); font-size:14px}

/* preferință reduce motion */
@media (prefers-reduced-motion:no-preference){
  .card:hover{transform:translateY(-4px) scale(1.01)}
}