:root{
  /* SLMM 2025 Branding */
  --grad-a:#5b2cff;  /* violett (Play-Icon nah) */
  --grad-b:#00c2ff;  /* fresh cyan/blue */
  --glass:rgba(255,255,255,.06);
  --text:#ffffff;
  --accent:#8a5cff;
  --accent-2:#00d4ff;
}
body.gradient-bg { background: linear-gradient(135deg,var(--grad-a),var(--grad-b)) fixed; color:var(--text); }
.sidebar { width: 260px; backdrop-filter: blur(10px); background: rgba(0,0,0,.35); border-right: 1px solid rgba(255,255,255,.08); min-height: 100vh; }
.nav-link { color: #e7e7e7; }
.nav-link:hover { color: #fff; }
.nav-link.active,.btn-gradient { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.btn-outline-gradient { border:1px solid var(--accent); color:#fff; }
.btn-outline-gradient:hover { background: linear-gradient(135deg,var(--accent),var(--accent-2)); border-color: transparent; }
.card.glass { background: var(--glass); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }
.brand-logo { width:44px;height:44px;border-radius:12px;background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Preloader */
.preloader { position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); z-index:9999; opacity:1; transition: opacity .4s ease; }
.preloader.hide { opacity:0; pointer-events:none; }
.loader-text { font-weight:700; font-size:1.25rem; }
.loader-text .dots::after{ content:""; animation:dots 1.2s infinite steps(4,end); }
@keyframes dots{ 0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."} }

/* Subtile 3D Tilt */
.tilt { transform-style: preserve-3d; transition: transform .2s ease; }
.tilt:hover { transform: rotateX(3deg) rotateY(-3deg) translateZ(2px); }

/* Media grid */
.media-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: .75rem; }
.media-item { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.75rem; }
.media-item .thumb { aspect-ratio: 1.6 / 1; background: rgba(255,255,255,.06); border-radius:10px; display:grid; place-items:center; font-size:2rem; }
.media-item .name { margin-top:.5rem; font-size:.9rem; word-break: break-all; }
.context-btn { opacity:.85; }