/* ==========================================================
   LEVELSBEATZ DESIGN SYSTEM V1
   Premium Streaming Platform
========================================================== */

:root{
  --bg:#070a08;
  --surface:#111513;
  --surface-2:#181d1a;
  --surface-3:#222823;
  --border:#2b342e;
  --green:#16d45f;
  --green-2:#23ef74;
  --text:#f6f8f7;
  --muted:#a4b0a8;
  --radius:20px;
  --sidebar:270px;
  --header:84px;
  --player:96px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

a{text-decoration:none;color:inherit}
button,input{font:inherit}

.lb-app{
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  height:100vh;
}

/* SIDEBAR */

.lb-sidebar{
  background:#0b0f0d;
  border-right:1px solid rgba(255,255,255,.05);
  overflow:auto;
}

.lb-sidebar-inner{
  min-height:100vh;
  padding:28px 22px 120px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.lb-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.lb-brand-mark{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--green),#0a7c35);
  display:grid;
  place-items:center;
  position:relative;
}

.lb-brand-mark span{
  position:absolute;
  width:4px;
  background:#fff;
  border-radius:10px;
}

.lb-brand-mark span:nth-child(1){height:16px;left:14px}
.lb-brand-mark span:nth-child(2){height:24px}
.lb-brand-mark span:nth-child(3){height:12px;right:14px}

.lb-brand-text strong{
  display:block;
  letter-spacing:1px;
  font-size:15px;
}

.lb-brand-text em{
  color:var(--green);
  font-style:normal;
  font-weight:700;
}

.lb-nav-label{
  color:#6f7c74;
  font-size:11px;
  letter-spacing:1.6px;
  margin-bottom:10px;
}

.lb-nav-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.lb-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  color:var(--muted);
  transition:.25s;
}

.lb-nav-item:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.lb-nav-item.is-active{
  background:rgba(22,212,95,.18);
  color:#fff;
  font-weight:600;
}

.lb-nav-icon{
  width:22px;
  text-align:center;
}

.lb-premium-card{
  order:3;
  background:linear-gradient(145deg,#152118,#0f1512);
  border:1px solid rgba(22,212,95,.25);
  border-radius:22px;
  padding:20px;
}

.lb-premium-icon{
  font-size:28px;
  color:var(--green);
  margin-bottom:8px;
}

.lb-premium-title{
  font-weight:700;
  margin-bottom:6px;
}

.lb-premium-card p{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.lb-premium-button{
  margin-top:16px;
  display:flex;
  justify-content:center;
  padding:12px;
  background:var(--green);
  color:#081108;
  border-radius:14px;
  font-weight:700;
}

.lb-sidebar-footer{
  order:2;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  color:var(--muted);
}

/* MAIN */

.lb-main{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.lb-header{
  height:var(--header);
  padding:20px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(7,10,8,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.lb-header-left{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
}

.lb-history-controls{
  display:flex;
  gap:10px;
}

.lb-history-controls button{
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:var(--surface);
  color:#fff;
}

.lb-search{
  flex:1;
  max-width:650px;
  position:relative;
}

.lb-search input{
  width:100%;
  border:none;
  background:var(--surface);
  color:#fff;
  padding:14px 50px;
  border-radius:999px;
}

.lb-search-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
}

.lb-search-shortcut{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:#6f7c74;
  font-size:12px;
}

.lb-header-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

.lb-header-premium{
  display:flex;
  gap:8px;
  align-items:center;
  background:rgba(22,212,95,.18);
  padding:10px 16px;
  border-radius:999px;
  color:var(--green);
  font-weight:700;
}

.lb-header-icon{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:var(--surface);
  color:#fff;
  position:relative;
}

.lb-notification-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  position:absolute;
  top:10px;
  right:11px;
}

.lb-user-menu{
  display:flex;
  align-items:center;
  gap:12px;
}

.lb-user-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green),#0b7f35);
  display:grid;
  place-items:center;
  color:#081108;
  font-weight:800;
}

.lb-user-info strong{
  display:block;
  font-size:14px;
}

.lb-user-info small{
  color:var(--muted);
}

/* CONTENT */

.lb-content{
  flex:1;
  overflow:auto;
  padding:32px;
  padding-bottom:calc(var(--player) + 32px);
}

.lb-home{
  display:flex;
  flex-direction:column;
  gap:34px;
}

/* HERO */

.lb-hero{
  position:relative;
  min-height:360px;
  border-radius:28px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:40px;
  box-shadow:var(--shadow);
  background:
    linear-gradient(135deg,rgba(22,212,95,.28),rgba(0,0,0,.25)),
    radial-gradient(circle at 20% 20%,rgba(22,212,95,.35),transparent 45%),
    #111;
}

.lb-hero-content{
  position:relative;
  z-index:2;
  max-width:560px;
}

.lb-eyebrow{
  color:var(--green);
  letter-spacing:2px;
  font-size:12px;
  font-weight:700;
}

.lb-hero h1{
  font-size:56px;
  line-height:1.05;
  margin:14px 0;
}

.lb-hero-artist{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}

.lb-verified{
  color:var(--green);
}

.lb-catalog-verified{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  border-radius:50%;
  background:var(--green);
  color:#08130d;
  font-size:10px;
  font-weight:900;
  line-height:1;
  vertical-align:1px;
  box-shadow:0 0 0 2px rgba(25,164,99,.12);
}

.lb-hero p{
  color:#d7dfd9;
  line-height:1.8;
  margin-bottom:24px;
}

.lb-hero-actions{
  display:flex;
  gap:14px;
}

.lb-button{
  border:none;
  border-radius:999px;
  padding:14px 24px;
  cursor:pointer;
  font-weight:700;
}

.lb-button-primary{
  background:var(--green);
  color:#081108;
}

.lb-button-secondary{
  width:52px;
  height:52px;
  background:rgba(255,255,255,.08);
  color:#fff;
}

/* GRID */

.lb-home-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:28px;
}

.lb-home-primary{
  display:flex;
  flex-direction:column;
  gap:34px;
}

.lb-section-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:20px;
}

.lb-section-kicker{
  color:var(--green);
  font-size:11px;
  letter-spacing:1.5px;
}

.lb-section-header h2{
  margin-top:4px;
  font-size:28px;
}

/* TRACKS */

.lb-track-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}

.lb-track-card{
  background:var(--surface);
  border-radius:22px;
  padding:18px;
  transition:.25s;
  cursor:pointer;
}

.lb-track-card:hover{
  transform:translateY(-4px);
  background:var(--surface-2);
}

.lb-track-art{
  aspect-ratio:1;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:14px;
  position:relative;
  background:linear-gradient(135deg,#1f3125,#0e1411);
}

.lb-art-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:42px;
  color:rgba(255,255,255,.2);
}

.lb-card-play{
  position:absolute;
  right:14px;
  bottom:14px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:var(--green);
  color:#081108;
  font-weight:800;
}

.lb-track-rank{
  color:var(--green);
  font-size:12px;
  margin-bottom:8px;
}

.lb-track-details strong{
  display:block;
}

.lb-track-details span{
  color:var(--muted);
  font-size:14px;
}

.lb-track-duration{
  margin-top:12px;
  display:block;
  color:#77857d;
  font-size:13px;
}

/* RELEASES */

.lb-release-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:18px;
}

.lb-release-card{
  background:var(--surface);
  border-radius:20px;
  padding:16px;
}

.lb-release-art{
  aspect-ratio:1;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:14px;
  position:relative;
  background:linear-gradient(135deg,#1c251f,#101410);
}

.lb-release-card strong{
  display:block;
}

.lb-release-card span{
  color:var(--muted);
  font-size:14px;
}

/* ARTISTS */

.lb-artists-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:18px;
}

.lb-artist-card{
  text-align:center;
}

.lb-artist-avatar{
  width:92px;
  height:92px;
  margin:0 auto 12px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green),#0b7f35);
  display:grid;
  place-items:center;
  color:#081108;
  font-size:28px;
  font-weight:800;
}

.lb-artist-card span{
  color:var(--muted);
  font-size:13px;
}

/* VIBES */

.lb-vibes-grid{
  display:grid;
  gap:20px;
}

.lb-vibe-card{
  background:var(--surface);
  border-radius:22px;
  padding:18px;
}

.lb-vibe-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}

.lb-vibe-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--green);
  color:#081108;
  display:grid;
  place-items:center;
  font-weight:800;
}

.lb-vibe-media{
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,#162018,#0d1110);
  margin-bottom:16px;
}

.lb-vibe-card p{
  line-height:1.8;
  color:#d7dfd9;
  margin-bottom:16px;
}

.lb-vibe-actions{
  display:flex;
  gap:12px;
}

.lb-vibe-actions button{
  border:none;
  background:var(--surface-2);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
}

/* RIGHT RAIL */

.lb-home-rail{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.lb-rail-card{
  background:var(--surface);
  border-radius:22px;
  padding:20px;
}

.lb-trending-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

.lb-trending-item{
  display:grid;
  grid-template-columns:34px 42px 1fr 24px;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  color:#fff;
  text-align:left;
}

.lb-trending-number{
  color:var(--green);
  font-weight:700;
}

.lb-trending-art{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#1b231d;
  display:grid;
  place-items:center;
}

.lb-trending-info small{
  color:var(--muted);
}

.lb-trending-change{
  color:var(--green);
}

.lb-rail-premium{
  background:linear-gradient(145deg,#152118,#101612);
  border-radius:22px;
  padding:24px;
  border:1px solid rgba(22,212,95,.22);
}

.lb-rail-premium h3{
  margin:12px 0;
}

.lb-rail-premium p{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:20px;
}

/* PLAYER */

.lb-player{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--player);
  background:rgba(12,16,14,.96);
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.05);
  display:grid;
  grid-template-columns:300px 1fr 260px;
  align-items:center;
  padding:0 24px;
  z-index:100;
}

.lb-player-track{
  display:flex;
  align-items:center;
  gap:14px;
}

.lb-player-art{
  width:60px;
  height:60px;
  border-radius:14px;
  overflow:hidden;
  background:#18211b;
}

.lb-player-art-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}

.lb-player-track-info strong{
  display:block;
}

.lb-player-track-info span{
  color:var(--muted);
  font-size:13px;
}

.lb-player-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.lb-player-buttons{
  display:flex;
  gap:14px;
}

.lb-player-buttons button{
  border:none;
  background:none;
  color:#fff;
  font-size:18px;
}

.lb-player-play{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--green)!important;
  color:#081108!important;
}

.lb-player-progress{
  width:100%;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}

.lb-player-progress input,
.lb-volume input{
  accent-color:var(--green);
}

.lb-player-tools{
  display:flex;
  justify-content:end;
  align-items:center;
  gap:14px;
}

.lb-player-tools button{
  border:none;
  background:none;
  color:#fff;
}

.lb-volume{
  display:flex;
  align-items:center;
  gap:10px;
}

/* RESPONSIVE */

.lb-mobile-menu{
  display:none;
}

.lb-sidebar-overlay{
  display:none;
}

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

  .lb-home-rail{
    order:-1;
  }
}

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

  .lb-sidebar{
    position:fixed;
    left:-100%;
    top:0;
    width:280px;
    height:100vh;
    z-index:200;
    transition:.3s;
  }

  .lb-sidebar.is-open{
    left:0;
  }

  .lb-sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:150;
  }

  .lb-sidebar-overlay.is-open{
    opacity:1;
    visibility:visible;
  }

  .lb-mobile-menu{
    display:block;
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:var(--surface);
    color:#fff;
  }

  .lb-history-controls{
    display:none;
  }

  .lb-player{
    grid-template-columns:1fr;
    height:auto;
    padding:14px 18px;
    gap:14px;
  }

  .lb-player-tools{
    justify-content:start;
  }

  .lb-content{
    padding:22px;
  }

  .lb-hero{
    min-height:300px;
    padding:28px;
  }

  .lb-hero h1{
    font-size:42px;
  }
}

@media(max-width:640px){
  .lb-header{
    padding:16px;
  }

  .lb-content{
    padding:16px;
  }

  .lb-search-shortcut{
    display:none;
  }

  .lb-header-premium{
    display:none;
  }

  .lb-user-info{
    display:none;
  }

  .lb-hero h1{
    font-size:34px;
  }

  .lb-track-grid{
    grid-template-columns:1fr 1fr;
  }

  .lb-release-grid{
    grid-template-columns:1fr 1fr;
  }

  .lb-artists-row{
    grid-template-columns:repeat(3,1fr);
  }
}

/* SCROLLBAR */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:#090c0a;
}

::-webkit-scrollbar-thumb{
  background:#263128;
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--green);
}
/* ==========================================================
   LEVELSBEATZ AUTHENTICATION
   Professional Login / Registration
   ========================================================== */

.lb-auth-page{
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  padding:40px 20px;
  overflow:auto;
  background:
    radial-gradient(circle at 15% 10%,rgba(22,212,95,.12),transparent 34%),
    radial-gradient(circle at 85% 90%,rgba(22,212,95,.08),transparent 30%),
    var(--bg);
}

.lb-auth-shell{
  width:min(100%,1080px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,500px);
  min-height:650px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:28px;
  background:rgba(17,21,19,.96);
  box-shadow:var(--shadow);
}

.lb-auth-brand-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%,rgba(22,212,95,.25),transparent 35%),
    linear-gradient(145deg,#101b14,#0a0e0c 72%);
}

.lb-auth-brand-panel::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-150px;
  bottom:-170px;
  border:1px solid rgba(22,212,95,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 55px rgba(22,212,95,.025),
    0 0 0 110px rgba(22,212,95,.018);
}

.lb-auth-brand{
  position:relative;
  z-index:1;
}

.lb-auth-brand-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:54px;
}

.lb-auth-brand-logo .lb-brand-mark{
  width:48px;
  height:48px;
}

.lb-auth-brand-logo .lb-brand-text{
  font-size:16px;
}

.lb-auth-brand h1{
  max-width:480px;
  font-size:clamp(38px,4vw,62px);
  line-height:1.02;
  letter-spacing:-2px;
  margin-bottom:20px;
}

.lb-auth-brand h1 span{
  color:var(--green);
}

.lb-auth-brand p{
  max-width:470px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.lb-auth-feature-list{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
  margin-top:40px;
}

.lb-auth-feature{
  display:flex;
  align-items:center;
  gap:12px;
  color:#dbe3de;
  font-size:13px;
}

.lb-auth-feature-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(22,212,95,.12);
  color:var(--green);
}

.lb-auth-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px;
  background:#0d120f;
  border-left:1px solid rgba(255,255,255,.05);
}

.lb-auth-card-header{
  margin-bottom:30px;
}

.lb-auth-card-header h2{
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.8px;
  margin-bottom:8px;
}

.lb-auth-card-header p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.lb-auth-form{
  width:100%;
}

.lb-auth-field{
  margin-bottom:18px;
}

.lb-auth-field label{
  display:block;
  margin-bottom:8px;
  color:#edf2ee;
  font-size:13px;
  font-weight:650;
}

.lb-auth-input-wrap{
  position:relative;
}

.lb-auth-field input,
.lb-auth-field select{
  width:100%;
  min-height:52px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  outline:none;
  background:#151b17;
  color:var(--text);
  transition:border-color .2s,box-shadow .2s,background .2s;
}

.lb-auth-field input::placeholder{
  color:#657169;
}

.lb-auth-field input:hover{
  border-color:rgba(255,255,255,.15);
}

.lb-auth-field input:focus,
.lb-auth-field select:focus{
  border-color:var(--green);
  background:#171e19;
  box-shadow:0 0 0 4px rgba(22,212,95,.10);
}

.lb-auth-password-toggle{
  position:absolute;
  top:50%;
  right:10px;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  border:0;
  border-radius:10px;
  background:transparent;
  color:#849189;
  cursor:pointer;
}

.lb-auth-password-toggle:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.lb-auth-field input:has(+ .lb-auth-password-toggle){
  padding-right:56px;
}

.lb-auth-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.lb-auth-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:4px 0 22px;
}

.lb-auth-check{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:12px;
}

.lb-auth-check input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--green);
}

.lb-auth-link{
  color:var(--green);
  font-size:12px;
  font-weight:650;
}

.lb-auth-link:hover{
  color:var(--green-2);
  text-decoration:underline;
}

.lb-auth-submit{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:999px;
  background:var(--green);
  color:#061008;
  cursor:pointer;
  font-weight:800;
  transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 10px 30px rgba(22,212,95,.12);
}

.lb-auth-submit:hover{
  background:var(--green-2);
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(22,212,95,.18);
}

.lb-auth-submit:active{
  transform:translateY(0);
}

.lb-auth-alert{
  margin-bottom:20px;
  padding:13px 15px;
  border-radius:13px;
  font-size:13px;
  line-height:1.55;
}

.lb-auth-alert-error{
  border:1px solid rgba(239,68,68,.22);
  background:rgba(239,68,68,.08);
  color:#fecaca;
}

.lb-auth-alert-success{
  border:1px solid rgba(22,212,95,.20);
  background:rgba(22,212,95,.08);
  color:#baf7ce;
}

.lb-auth-help{
  margin-top:7px;
  color:#718078;
  font-size:11px;
  line-height:1.5;
}

.lb-auth-footer{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#7f8b83;
  font-size:13px;
  text-align:center;
}

.lb-auth-footer a{
  color:var(--green);
  font-weight:700;
}

.lb-auth-footer a:hover{
  color:var(--green-2);
  text-decoration:underline;
}

.lb-auth-security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:16px;
  color:#68746d;
  font-size:11px;
}

.lb-auth-security-icon{
  color:var(--green);
}

.lb-auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:24px 0;
  color:#68746d;
  font-size:11px;
}

.lb-auth-divider::before,
.lb-auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(255,255,255,.07);
}

.lb-auth-card .lb-brand-mark{
  display:none;
}

@media(max-width:900px){
  .lb-auth-shell{
    grid-template-columns:1fr;
    max-width:520px;
    min-height:auto;
  }

  .lb-auth-brand-panel{
    min-height:260px;
    padding:34px;
  }

  .lb-auth-brand-logo{
    margin-bottom:28px;
  }

  .lb-auth-brand h1{
    font-size:40px;
  }

  .lb-auth-feature-list{
    display:none;
  }

  .lb-auth-card{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.05);
    padding:36px;
  }
}

@media(max-width:560px){
  .lb-auth-page{
    display:block;
    padding:0;
  }

  .lb-auth-shell{
    width:100%;
    min-height:100vh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .lb-auth-brand-panel{
    min-height:220px;
    padding:28px 20px;
  }

  .lb-auth-brand-logo{
    margin-bottom:24px;
  }

  .lb-auth-brand h1{
    font-size:34px;
    letter-spacing:-1.2px;
  }

  .lb-auth-brand p{
    font-size:13px;
  }

  .lb-auth-card{
    padding:30px 20px 44px;
  }

  .lb-auth-card-header h2{
    font-size:26px;
  }

  .lb-auth-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .lb-auth-options{
    align-items:flex-start;
  }

  .lb-auth-field input,
  .lb-auth-field select{
    min-height:50px;
  }
}

@media(max-width:360px){
  .lb-auth-card{
    padding-left:16px;
    padding-right:16px;
  }

  .lb-auth-brand-panel{
    padding-left:16px;
    padding-right:16px;
  }

  .lb-auth-options{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ==========================================================================
 * LEVELSBEATZ ACCOUNT PAGE
 * ========================================================================== */

.lb-account-page{
    min-height:100vh;
    margin:0;
    padding:0;
    background:
        radial-gradient(circle at 85% 8%, rgba(32,209,123,.08), transparent 28%),
        #070b09;
    color:#f4f7f5;
}

.lb-page{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
    padding:48px 0 120px;
}

.lb-page-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:30px;
}

.lb-page-header h1{
    margin:6px 0 8px;
    color:#fff;
    font-size:clamp(30px, 4vw, 46px);
    line-height:1.05;
    letter-spacing:-1px;
}

.lb-page-header p{
    margin:0;
    color:#8f9b94;
    font-size:15px;
}

.lb-eyebrow{
    display:block;
    color:#20d17b;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.lb-page-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.lb-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:12px;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.lb-button:hover{
    transform:translateY(-1px);
}

.lb-button-primary{
    color:#06100a;
    background:#20d17b;
    border:1px solid #20d17b;
}

.lb-button-secondary{
    color:#e7eee9;
    background:#101713;
    border:1px solid #26342d;
}

.lb-account-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(0, .9fr);
    gap:18px;
}

.lb-card{
    min-width:0;
    padding:24px;
    border:1px solid #202d26;
    border-radius:20px;
    background:
        linear-gradient(145deg, rgba(15,23,19,.98), rgba(8,13,10,.98));
    box-shadow:0 18px 45px rgba(0,0,0,.20);
}

.lb-account-profile-card{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:20px;
    padding:26px;
}

.lb-account-avatar{
    width:82px;
    height:82px;
    flex:0 0 82px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:linear-gradient(135deg,#20d17b,#0e8d53);
    color:#06100a;
    font-size:30px;
    font-weight:900;
    box-shadow:0 0 0 5px rgba(32,209,123,.08);
}

.lb-account-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.lb-account-profile-main{
    min-width:0;
}

.lb-account-profile-main h2{
    margin:0 0 5px;
    color:#fff;
    font-size:25px;
}

.lb-account-profile-main p{
    margin:0 0 13px;
    color:#8f9b94;
    font-size:14px;
}

.lb-account-badges{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.lb-badge{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:0 10px;
    border-radius:999px;
    color:#c9d2cd;
    background:#111a15;
    border:1px solid #29362f;
    font-size:11px;
    font-weight:800;
}

.lb-badge-success{
    color:#20d17b;
    background:rgba(32,209,123,.08);
    border-color:rgba(32,209,123,.22);
}

.lb-card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.lb-card-heading h2{
    margin:5px 0 0;
    color:#fff;
    font-size:19px;
}

.lb-account-details{
    display:grid;
    gap:0;
}

.lb-account-detail{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #1b2721;
}

.lb-account-detail:first-child{
    padding-top:0;
}

.lb-account-detail:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.lb-account-detail span{
    color:#829089;
    font-size:13px;
}

.lb-account-detail strong{
    color:#edf2ef;
    font-size:13px;
    text-align:right;
    overflow-wrap:anywhere;
}

.lb-account-security{
    display:grid;
    gap:12px;
}

.lb-security-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:15px;
    border:1px solid #1f2c25;
    border-radius:14px;
    background:#0a100d;
}

.lb-security-row strong{
    display:block;
    color:#edf2ef;
    font-size:13px;
}

.lb-security-row p{
    margin:5px 0 0;
    color:#77847d;
    font-size:12px;
}

@media (max-width:760px){
    .lb-page{
        width:min(100% - 24px, 680px);
        padding:28px 0 100px;
    }

    .lb-page-header{
        display:block;
        margin-bottom:22px;
    }

    .lb-page-header h1{
        font-size:32px;
    }

    .lb-page-actions{
        margin-top:18px;
    }

    .lb-page-actions .lb-button{
        flex:1;
    }

    .lb-account-grid{
        grid-template-columns:1fr;
    }

    .lb-account-profile-card{
        display:block;
        padding:22px;
    }

    .lb-account-avatar{
        margin-bottom:16px;
    }

    .lb-card{
        padding:20px;
        border-radius:17px;
    }

    .lb-account-detail{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .lb-account-detail strong{
        text-align:left;
    }

    .lb-security-row{
        align-items:flex-start;
    }
}


/* ==========================================================
   LEVELSBEATZ DASHBOARD V1
   Desktop + Tablet + Mobile
   ========================================================== */

.lb-dashboard-content{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:26px;
}

.lb-dashboard-welcome{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.lb-dashboard-welcome small{
    display:block;
    margin-bottom:7px;
    color:var(--green);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.lb-dashboard-welcome h1{
    margin:0;
    color:#fff;
    font-size:clamp(30px,3.2vw,44px);
    line-height:1.08;
    letter-spacing:-1.2px;
}

.lb-dashboard-welcome p{
    margin:9px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.lb-dashboard-date{
    flex-shrink:0;
    color:#7d8982;
    font-size:12px;
}

.lb-dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.lb-dashboard-stat{
    min-width:0;
    padding:19px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:18px;
    background:linear-gradient(145deg,#111813,#0d120f);
}

.lb-dashboard-stat-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.lb-dashboard-stat-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(22,212,95,.10);
    color:var(--green);
    font-size:19px;
}

.lb-dashboard-stat-value{
    color:#fff;
    font-size:26px;
    font-weight:800;
}

.lb-dashboard-stat-label{
    margin-top:13px;
    color:#8b9790;
    font-size:12px;
}

.lb-dashboard-hero{
    position:relative;
    min-height:285px;
    overflow:hidden;
    display:flex;
    align-items:center;
    border-radius:24px;
    padding:38px;
    background:
        radial-gradient(circle at 82% 25%,rgba(22,212,95,.20),transparent 34%),
        linear-gradient(135deg,#142119,#0b110e 70%);
    border:1px solid rgba(22,212,95,.12);
}

.lb-dashboard-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-100px;
    bottom:-170px;
    border:1px solid rgba(22,212,95,.13);
    border-radius:50%;
    box-shadow:
        0 0 0 55px rgba(22,212,95,.025),
        0 0 0 110px rgba(22,212,95,.018);
}

.lb-dashboard-hero-content{
    position:relative;
    z-index:1;
    max-width:650px;
}

.lb-dashboard-hero-label{
    color:var(--green);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
}

.lb-dashboard-hero h2{
    margin:12px 0 10px;
    color:#fff;
    font-size:clamp(38px,5vw,60px);
    line-height:1;
    letter-spacing:-2px;
}

.lb-dashboard-hero h2 span{
    color:var(--green);
}

.lb-dashboard-hero p{
    max-width:600px;
    margin:0;
    color:#aab5ae;
    font-size:14px;
    line-height:1.75;
}

.lb-dashboard-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.lb-dashboard-primary-button,
.lb-dashboard-secondary-button,
.lb-dashboard-small-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    transition:.2s ease;
}

.lb-dashboard-primary-button{
    min-height:43px;
    padding:0 18px;
    border-radius:999px;
    background:var(--green);
    color:#081108;
}

.lb-dashboard-secondary-button{
    min-height:43px;
    padding:0 18px;
    border:1px solid #2a362f;
    border-radius:999px;
    background:#111713;
    color:#e7eee9;
}

.lb-dashboard-primary-button:hover,
.lb-dashboard-secondary-button:hover,
.lb-dashboard-small-button:hover{
    transform:translateY(-1px);
}

.lb-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:24px;
}

.lb-dashboard-grid > div{
    min-width:0;
}

.lb-dashboard-section{
    margin-bottom:28px;
}

.lb-dashboard-section-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:15px;
}

.lb-dashboard-section-header h3{
    margin:0;
    color:#fff;
    font-size:20px;
}

.lb-dashboard-section-header p{
    margin:5px 0 0;
    color:#727e77;
    font-size:12px;
}

.lb-dashboard-section-header > a{
    color:var(--green);
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.lb-dashboard-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:190px;
    padding:25px;
    text-align:center;
    border:1px dashed #29352e;
    border-radius:18px;
    background:#0c120f;
}

.lb-dashboard-empty-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:11px;
    border-radius:50%;
    background:rgba(22,212,95,.09);
    color:var(--green);
    font-size:21px;
}

.lb-dashboard-empty strong{
    color:#eaf0ec;
    font-size:14px;
}

.lb-dashboard-empty p{
    max-width:390px;
    margin:6px 0 15px;
    color:#758179;
    font-size:12px;
    line-height:1.6;
}

.lb-dashboard-small-button{
    min-height:37px;
    padding:0 15px;
    border-radius:999px;
    background:#172019;
    color:#dfe8e2;
    border:1px solid #2a362f;
}

.lb-dashboard-recommendations{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.lb-dashboard-album{
    min-width:0;
}

.lb-dashboard-album-art{
    position:relative;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    overflow:hidden;
    margin-bottom:10px;
    border-radius:17px;
    background:linear-gradient(145deg,#1c3023,#101612);
    border:1px solid rgba(255,255,255,.04);
}

.lb-dashboard-album-art > span{
    color:rgba(255,255,255,.18);
    font-size:34px;
}

.lb-dashboard-play{
    position:absolute;
    right:10px;
    bottom:10px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:var(--green);
    color:#081108;
    font-size:12px;
    cursor:pointer;
}

.lb-dashboard-album strong{
    display:block;
    overflow:hidden;
    color:#e9efeb;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lb-dashboard-album small{
    display:block;
    margin-top:4px;
    color:#748078;
    font-size:11px;
}

.lb-dashboard-right{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-width:0;
}

.lb-dashboard-rail-card{
    padding:19px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:18px;
    background:linear-gradient(145deg,#111813,#0c110e);
}

.lb-dashboard-profile-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:16px;
    border-bottom:1px solid #1b2721;
}

.lb-dashboard-profile-avatar{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--green),#0b7f35);
    color:#081108;
    font-weight:900;
}

.lb-dashboard-profile-head strong{
    display:block;
    color:#fff;
    font-size:14px;
}

.lb-dashboard-profile-head > div > span{
    display:block;
    margin-top:3px;
    color:#758179;
    font-size:11px;
}

.lb-dashboard-role{
    display:inline-flex;
    margin-top:6px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(22,212,95,.08);
    color:var(--green);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.lb-dashboard-profile-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid #1b2721;
    color:#748078;
    font-size:11px;
}

.lb-dashboard-profile-row:last-of-type{
    border-bottom:0;
}

.lb-dashboard-profile-row > span:last-child{
    color:#d8e1db;
    text-align:right;
    overflow-wrap:anywhere;
}

.lb-dashboard-verified{
    color:var(--green)!important;
    font-weight:700;
}

.lb-dashboard-trending-item{
    display:grid;
    grid-template-columns:22px 38px minmax(0,1fr) 25px;
    align-items:center;
    gap:9px;
    min-width:0;
    padding:9px 0;
    border-bottom:1px solid #18231d;
}

.lb-dashboard-trending-item:last-child{
    border-bottom:0;
}

.lb-dashboard-rank{
    color:var(--green);
    font-size:11px;
    font-weight:800;
    text-align:center;
}

.lb-dashboard-thumb{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#18231c;
    color:#56635b;
    font-size:13px;
}

.lb-dashboard-trending-info{
    min-width:0;
}

.lb-dashboard-trending-info strong{
    display:block;
    overflow:hidden;
    color:#e8eeea;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lb-dashboard-trending-info span{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:#68756d;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lb-dashboard-trending-play{
    width:25px;
    height:25px;
    border:0;
    border-radius:50%;
    background:#172019;
    color:#c9d4cd;
    font-size:9px;
    cursor:pointer;
}

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

    .lb-dashboard-right{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:960px){
    .lb-dashboard-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .lb-dashboard-hero{
        min-height:260px;
        padding:30px;
    }

    .lb-dashboard-right{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:640px){
    .lb-dashboard-content{
        gap:20px;
    }

    .lb-dashboard-welcome{
        display:block;
    }

    .lb-dashboard-welcome h1{
        font-size:29px;
    }

    .lb-dashboard-date{
        margin-top:9px;
    }

    .lb-dashboard-stats{
        gap:10px;
    }

    .lb-dashboard-stat{
        padding:14px;
    }

    .lb-dashboard-stat-icon{
        width:34px;
        height:34px;
        border-radius:10px;
        font-size:16px;
    }

    .lb-dashboard-stat-value{
        font-size:22px;
    }

    .lb-dashboard-hero{
        min-height:285px;
        padding:24px;
        border-radius:19px;
    }

    .lb-dashboard-hero h2{
        font-size:36px;
    }

    .lb-dashboard-hero p{
        font-size:12px;
    }

    .lb-dashboard-grid{
        gap:18px;
    }

    .lb-dashboard-recommendations{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .lb-dashboard-album:last-child{
        display:none;
    }

    .lb-dashboard-right{
        display:flex;
    }

    .lb-dashboard-section-header h3{
        font-size:18px;
    }
}

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

    .lb-dashboard-stat{
        padding:12px;
    }

    .lb-dashboard-stat-value{
        font-size:20px;
    }

    .lb-dashboard-hero{
        padding:20px;
    }

    .lb-dashboard-hero h2{
        font-size:31px;
    }

    .lb-dashboard-recommendations{
        grid-template-columns:1fr;
    }

    .lb-dashboard-album:last-child{
        display:block;
    }
}


/* ==========================================================
   LEVELSBEATZ SHARED FOOTER V1
   ========================================================== */

.lb-footer{
    margin:34px 0 0;
    padding:52px 0 26px;
    border-top:1px solid rgba(255,255,255,.06);
    background:#090d0b;
}

.lb-footer-inner{
    width:min(1180px,100%);
    margin:0 auto;
}

.lb-footer-main{
    display:grid;
    grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(130px,1fr));
    gap:40px;
    padding-bottom:38px;
}

.lb-footer-brand p{
    max-width:360px;
    margin:16px 0 0;
    color:#7f8c84;
    font-size:13px;
    line-height:1.8;
}

.lb-footer-heading{
    margin:0 0 14px;
    color:#f1f5f2;
    font-size:13px;
    font-weight:800;
}

.lb-footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.lb-footer-links a{
    color:#7f8c84;
    font-size:13px;
}

.lb-footer-links a:hover{
    color:var(--green);
}

.lb-footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.06);
}

.lb-footer-copy,
.lb-footer-legal a{
    color:#68746d;
    font-size:11px;
}

.lb-footer-legal{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
}

@media(max-width:640px){
    .lb-footer{
        padding:38px 0 22px;
    }

    .lb-footer-main{
        grid-template-columns:1fr 1fr;
        gap:28px 18px;
    }

    .lb-footer-brand{
        grid-column:1 / -1;
    }

    .lb-footer-bottom{
        flex-direction:column;
        gap:12px;
    }

    .lb-footer-legal{
        justify-content:flex-start;
    }
}

@media(max-width:360px){
    .lb-footer-main{
        grid-template-columns:1fr;
    }

    .lb-footer-brand{
        grid-column:auto;
    }
}

/* ==========================================================
   LEVELSBEATZ HOME / DISCOVERY EXPERIENCE V2
   Database-backed shelves and responsive discovery modules.
   ========================================================== */

.lb-hero-background{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.9;
}

.lb-hero-background:not([style]){
  background:
    radial-gradient(circle at 78% 25%,rgba(22,212,95,.24),transparent 32%),
    linear-gradient(135deg,#15281d,#08100c 62%,#050806);
}

.lb-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,10,7,.25),transparent 65%);
  pointer-events:none;
}

.lb-home-song-shelf{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.lb-home-song-row{
  min-width:0;
  display:grid;
  grid-template-columns:30px 54px minmax(0,1fr) 34px;
  align-items:center;
  gap:11px;
  padding:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:var(--surface);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:.2s ease;
}

.lb-home-song-row:hover{
  background:var(--surface-2);
  transform:translateY(-2px);
}

.lb-home-song-number{
  color:var(--green);
  font-size:11px;
  font-weight:800;
  text-align:center;
}

.lb-home-song-art,
.lb-home-featured-art{
  overflow:hidden;
  background:linear-gradient(135deg,#1b2c21,#0d1410);
}

.lb-home-song-art{
  width:54px;
  height:54px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.28);
  font-size:22px;
}

.lb-home-song-art img,
.lb-home-featured-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lb-home-song-copy{
  min-width:0;
}

.lb-home-song-copy strong,
.lb-home-song-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lb-home-song-copy strong{font-size:13px}
.lb-home-song-copy small{margin-top:4px;color:var(--muted);font-size:11px}

.lb-home-song-play{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(22,212,95,.12);
  color:var(--green);
  font-size:11px;
}

.lb-home-featured-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.lb-home-featured-card{
  min-width:0;
  display:block;
}

.lb-home-featured-art{
  width:100%;
  aspect-ratio:1;
  border-radius:17px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.22);
  font-size:36px;
  margin-bottom:11px;
}

.lb-home-featured-card strong,
.lb-home-featured-card small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lb-home-featured-card strong{font-size:13px}
.lb-home-featured-card small{margin-top:4px;color:var(--muted);font-size:12px}

.lb-home-genre-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.lb-home-genre-chip{
  min-height:52px;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:13px;
  background:linear-gradient(145deg,#121b16,#0c120f);
  color:#dce4df;
  font-size:12px;
  font-weight:750;
}

.lb-home-genre-chip span:last-child{
  color:var(--green);
  font-size:16px;
}

.lb-home-genre-chip:hover{
  border-color:rgba(22,212,95,.35);
  color:#fff;
}

.lb-artist-avatar{
  overflow:hidden;
}

.lb-artist-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media(max-width:980px){
  .lb-home-grid{grid-template-columns:1fr}
  .lb-home-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-home-song-shelf{grid-template-columns:1fr}
}

@media(max-width:700px){
  .lb-content{padding:18px 14px calc(var(--player) + 18px)}
  .lb-home{gap:26px}
  .lb-hero{min-height:390px;padding:26px;border-radius:20px}
  .lb-hero h1{font-size:39px}
  .lb-hero p{line-height:1.6}
  .lb-home-rail{grid-template-columns:1fr}
  .lb-home-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-home-genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-release-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:480px){
  .lb-content{padding:12px 10px calc(var(--player) + 12px)}
  .lb-hero{min-height:410px;padding:20px;border-radius:17px}
  .lb-hero h1{font-size:32px}
  .lb-hero p{font-size:13px}
  .lb-section-header h2{font-size:22px}
  .lb-track-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lb-track-card{padding:11px;border-radius:15px}
  .lb-release-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lb-release-card{padding:10px;border-radius:15px}
  .lb-home-featured-grid{gap:10px}
  .lb-home-genre-grid{gap:8px}
  .lb-home-genre-chip{min-height:46px;padding:0 11px;font-size:11px}
  .lb-home-song-row{grid-template-columns:25px 48px minmax(0,1fr) 30px;padding:8px;gap:8px}
  .lb-home-song-art{width:48px;height:48px}
}

@media(max-width:360px){
  .lb-hero{min-height:390px}
  .lb-hero h1{font-size:29px}
  .lb-home-featured-grid{grid-template-columns:1fr 1fr}
  .lb-home-genre-grid{grid-template-columns:1fr 1fr}
  .lb-home-song-copy strong{font-size:11px}
  .lb-home-song-copy small{font-size:9px}
}

/* ==========================================================
   LEVELSBEATZ LIVE HOMEPAGE V2
   Visual direction: premium global African music platform
========================================================== */

.lb-home-live{max-width:1600px;margin:0 auto;padding:4px 0 42px}
.lb-live-hero{position:relative;min-height:420px;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:#07100b;box-shadow:0 28px 80px rgba(0,0,0,.35);isolation:isolate}
.lb-live-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(22,212,95,.3),transparent 34%),linear-gradient(120deg,#061009,#0b1710);background-size:cover;background-position:center;z-index:-2}
.lb-live-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,9,6,.98) 0%,rgba(3,9,6,.9) 32%,rgba(3,9,6,.28) 72%,rgba(3,9,6,.52) 100%);z-index:-1}
.lb-live-hero-copy{position:relative;z-index:2;width:min(62%,700px);padding:58px 52px}
.lb-live-kicker,.lb-live-hero-release>span,.lb-live-section-head>div>span,.lb-live-rail-head>div>span,.lb-live-why header>span{display:block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase}
.lb-live-hero h1{font-size:clamp(46px,6vw,82px);line-height:.9;letter-spacing:-4px;margin:17px 0 20px;font-weight:800}
.lb-live-hero h1 strong{color:#fff}
.lb-live-hero-copy>p{max-width:520px;color:#d1dad4;font-size:16px;line-height:1.65}
.lb-live-hero-release{display:flex;flex-direction:column;gap:4px;margin:28px 0 24px;padding-left:14px;border-left:2px solid var(--green)}
.lb-live-hero-release strong{font-size:20px}
.lb-live-hero-release small{color:var(--muted);font-size:13px}
.lb-live-hero-release i{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:4px;border-radius:50%;background:var(--green);color:#041108;font-style:normal;font-size:10px}
.lb-live-actions{display:flex;gap:10px;flex-wrap:wrap}
.lb-live-actions .lb-button{min-height:44px;padding:0 20px}
.lb-live-hero-artwork{position:absolute;right:-2%;bottom:-18%;width:55%;height:115%;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lb-live-hero-artwork:after{content:"";position:absolute;width:75%;height:75%;border-radius:50%;background:rgba(22,212,95,.12);filter:blur(35px)}
.lb-live-hero-artwork img{position:relative;z-index:1;width:min(460px,72%);aspect-ratio:1;object-fit:cover;border-radius:18px;transform:rotate(5deg);box-shadow:0 32px 80px rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.12)}
.lb-live-hero-placeholder{font-size:150px;color:rgba(22,212,95,.3)}
.lb-live-hero-badge{position:absolute;right:28px;top:26px;z-index:3;color:#dce6df;text-align:right;font-size:11px;letter-spacing:2px;font-weight:800}
.lb-live-hero-badge small{font-size:8px;letter-spacing:1.2px;color:var(--green)}

.lb-live-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;margin-top:24px}
.lb-live-main{min-width:0;display:flex;flex-direction:column;gap:34px}
.lb-live-section{min-width:0}
.lb-live-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.lb-live-section-head h2{margin-top:4px;font-size:23px;letter-spacing:-.6px}
.lb-live-section-head>a,.lb-live-rail-head>a{color:#c8d2cc;font-size:12px;font-weight:700;white-space:nowrap}
.lb-live-section-head>a:hover,.lb-live-rail-head>a:hover{color:var(--green)}

.lb-live-release-row,.lb-live-playlist-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(145px,1fr);grid-template-rows:1fr;gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.lb-live-release-row::-webkit-scrollbar,.lb-live-playlist-row::-webkit-scrollbar{display:none}
.lb-live-release-card,.lb-live-playlist{min-width:0;display:flex;flex-direction:column;gap:6px}
.lb-live-cover,.lb-live-playlist-art{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#18231c,#0b100d);border:1px solid rgba(255,255,255,.06)}
.lb-live-cover img,.lb-live-playlist-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.lb-live-release-card:hover .lb-live-cover img,.lb-live-playlist:hover .lb-live-playlist-art img{transform:scale(1.045)}
.lb-live-cover>span:first-child:not(.lb-live-cover-play),.lb-live-playlist-art>span{width:100%;height:100%;display:grid;place-items:center;color:var(--green);font-size:42px}
.lb-live-cover-play{position:absolute!important;right:10px;bottom:10px;width:34px!important;height:34px!important;border-radius:50%;display:grid!important;place-items:center;background:var(--green);color:#031007;font-size:12px;opacity:0;transform:translateY(5px);transition:.2s}
.lb-live-release-card:hover .lb-live-cover-play{opacity:1;transform:none}
.lb-live-release-card strong,.lb-live-playlist strong{font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-release-card small,.lb-live-playlist small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lb-live-artists-row{display:grid;grid-auto-flow:column;grid-auto-columns:92px;gap:19px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.lb-live-artists-row::-webkit-scrollbar{display:none}
.lb-live-artist{text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.lb-live-artist-image{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#26342a,#111612);color:#dce7df;font-size:23px;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.lb-live-artist-image img{width:100%;height:100%;object-fit:cover}
.lb-live-artist:hover .lb-live-artist-image{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,212,95,.1)}
.lb-live-artist strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lb-live-artist small{font-size:10px;color:var(--muted)}

.lb-live-song-list{border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.018)}
.lb-live-song{width:100%;display:grid;grid-template-columns:34px 50px minmax(0,1fr) 52px 38px;align-items:center;gap:11px;padding:9px 13px;border:0;border-bottom:1px solid rgba(255,255,255,.045);background:transparent;color:inherit;text-align:left;cursor:pointer}
.lb-live-song:last-child{border-bottom:0}
.lb-live-song:hover{background:rgba(22,212,95,.065)}
.lb-live-song-number{color:#6f7b73;font-size:11px;text-align:center}
.lb-live-song-art{width:50px;height:50px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:#141b17;color:var(--green);font-size:20px}
.lb-live-song-art img{width:100%;height:100%;object-fit:cover}
.lb-live-song-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.lb-live-song-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-song-copy small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-song-duration{font-size:11px;color:var(--muted);text-align:right}
.lb-live-song-play{font-size:12px;color:#b8c4bc;text-align:center}
.lb-live-song:hover .lb-live-song-play{color:var(--green)}

.lb-live-genre-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.lb-live-genre-grid a{min-height:64px;padding:13px 14px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:linear-gradient(135deg,rgba(22,212,95,.08),rgba(255,255,255,.02));display:flex;align-items:center;justify-content:space-between;gap:10px}
.lb-live-genre-grid a strong{font-size:12px}
.lb-live-genre-grid a span{color:var(--green)}
.lb-live-genre-grid a:hover{border-color:rgba(22,212,95,.35);transform:translateY(-1px)}

.lb-live-rail{min-width:0;display:flex;flex-direction:column;gap:16px}
.lb-live-rail-card,.lb-live-why{background:#0d1310;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:17px}
.lb-live-rail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.lb-live-rail-head h3,.lb-live-why h3{font-size:18px;margin-top:3px}
.lb-live-trending{display:flex;flex-direction:column}
.lb-live-trending-item{width:100%;display:grid;grid-template-columns:22px 46px minmax(0,1fr) 16px;align-items:center;gap:9px;padding:9px 0;border:0;border-bottom:1px solid rgba(255,255,255,.045);background:none;color:inherit;text-align:left;cursor:pointer}
.lb-live-trending-item:last-child{border-bottom:0}
.lb-live-trending-item:hover strong{color:var(--green)}
.lb-live-trending-rank{font-size:12px;color:#89968e;text-align:center}
.lb-live-trending-art{width:46px;height:46px;border-radius:8px;overflow:hidden;background:#161d19;display:grid;place-items:center;color:var(--green)}
.lb-live-trending-art img{width:100%;height:100%;object-fit:cover}
.lb-live-trending-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-live-trending-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-trending-copy small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-trending-item>span:last-child{color:#89968e}

.lb-live-promo{position:relative;overflow:hidden;min-height:165px;padding:22px;border-radius:16px;background:radial-gradient(circle at 80% 30%,rgba(22,212,95,.36),transparent 32%),linear-gradient(135deg,#0b4b28,#0b1710);border:1px solid rgba(22,212,95,.16)}
.lb-live-promo:after{content:"♫";position:absolute;right:15px;bottom:-40px;font-size:180px;color:rgba(255,255,255,.05);font-weight:900}
.lb-live-promo-kicker{display:block;font-size:10px;letter-spacing:1.6px;color:#d3ddd6;text-transform:uppercase}
.lb-live-promo strong{display:block;position:relative;z-index:1;font-size:25px;line-height:1;margin:6px 0}
.lb-live-promo p{position:relative;z-index:1;color:#c9d5ce;font-size:11px;margin-bottom:17px}
.lb-live-promo a{position:relative;z-index:2;display:inline-flex;padding:9px 13px;border-radius:999px;background:var(--green);color:#031008;font-size:11px;font-weight:800}

.lb-live-why header{margin-bottom:10px}
.lb-live-benefit{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lb-live-benefit:last-child{border-bottom:0;padding-bottom:0}
.lb-live-benefit i{flex:0 0 36px;width:36px;height:36px;border:1px solid rgba(22,212,95,.6);border-radius:8px;display:grid;place-items:center;color:var(--green);font-style:normal}
.lb-live-benefit span{min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-live-benefit strong{font-size:12px}
.lb-live-benefit small{color:var(--muted);font-size:10px;line-height:1.4}
.lb-live-empty{padding:22px;border:1px dashed rgba(255,255,255,.1);border-radius:12px;color:var(--muted);font-size:12px;grid-column:1/-1}

@media(max-width:1180px){
  .lb-live-layout{grid-template-columns:minmax(0,1fr) 280px}
  .lb-live-hero-copy{width:70%;padding:48px 40px}
  .lb-live-hero-artwork{right:-12%;width:58%}
  .lb-live-release-row{grid-auto-columns:155px}
}
@media(max-width:960px){
  .lb-home-live{padding-top:0}
  .lb-live-layout{grid-template-columns:1fr}
  .lb-live-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-live-hero{min-height:440px}
  .lb-live-hero-copy{width:75%;padding:45px 32px}
  .lb-live-hero-artwork{right:-15%;width:60%}
  .lb-live-hero-artwork img{width:62%}
}
@media(max-width:680px){
  .lb-live-hero{min-height:500px;border-radius:18px}
  .lb-live-hero-copy{width:100%;padding:32px 22px;position:relative}
  .lb-live-hero h1{font-size:49px;letter-spacing:-2.5px}
  .lb-live-hero-copy>p{font-size:13px;max-width:320px}
  .lb-live-hero-artwork{width:70%;height:52%;right:-12%;bottom:-8%}
  .lb-live-hero-artwork img{width:58%}
  .lb-live-hero-badge{top:auto;right:18px;bottom:16px;font-size:9px}
  .lb-live-layout{margin-top:18px;gap:28px}
  .lb-live-rail{grid-template-columns:1fr}
  .lb-live-section-head h2{font-size:20px}
  .lb-live-release-row{grid-auto-columns:140px}
  .lb-live-artists-row{grid-auto-columns:82px;gap:14px}
  .lb-live-artist-image{width:74px;height:74px}
  .lb-live-song{grid-template-columns:24px 46px minmax(0,1fr) 34px;padding:8px 9px;gap:8px}
  .lb-live-song-duration{display:none}
  .lb-live-song-art{width:46px;height:46px}
  .lb-live-genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .lb-live-hero{min-height:485px}
  .lb-live-hero h1{font-size:43px}
  .lb-live-actions .lb-button{padding:0 14px}
  .lb-live-genre-grid a{min-height:56px;padding:11px}
}

/* ==========================================================
   LEVELSBEATZ DESKTOP SHELL V2
   Fixed navigation / independently scrolling music area
========================================================== */
@media (min-width: 961px){
  .lb-app{
    display:block;
    min-height:100vh;
    height:100vh;
  }

  .lb-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar);
    height:100vh;
    z-index:300;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .lb-sidebar-inner{
    min-height:100%;
  }

  .lb-main{
    width:calc(100% - var(--sidebar));
    height:100vh;
    margin-left:var(--sidebar);
    overflow:hidden;
  }

  .lb-header{
    flex:0 0 var(--header);
  }

  .lb-content{
    min-width:0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
}

@media (max-width: 960px){
  .lb-main{
    width:100%;
    margin-left:0;
  }
}


/* ==========================================================
   LEVELSBEATZ LIVE VIBES RAIL
   Real artist / creator / fan community content
========================================================== */
.lb-live-vibes-section{
  position:relative;
}
.lb-live-vibes-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.lb-live-vibe-card{
  min-width:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.lb-live-vibe-card:hover{
  transform:translateY(-2px);
  border-color:rgba(22,212,95,.25);
  background:linear-gradient(145deg,rgba(22,212,95,.07),rgba(255,255,255,.018));
}
.lb-live-vibe-author{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  margin-bottom:12px;
}
.lb-live-vibe-avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  overflow:hidden;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#183322,#0f1812);
  color:var(--green);
  font-weight:800;
  border:1px solid rgba(22,212,95,.22);
}
.lb-live-vibe-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lb-live-vibe-author-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-live-vibe-author-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-vibe-author-copy small{font-size:10px;color:var(--muted)}
.lb-live-vibe-verified{
  margin-left:auto;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#031008;
  font-size:10px;
  font-weight:900;
}
.lb-live-vibe-media{
  position:relative;
  aspect-ratio:16/8.8;
  overflow:hidden;
  border-radius:11px;
  margin-bottom:12px;
  background:linear-gradient(135deg,#17251c,#0c120f);
}
.lb-live-vibe-media img{width:100%;height:100%;object-fit:cover;display:block}
.lb-live-vibe-media-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--green);font-size:30px}
.lb-live-vibe-media-badge{position:absolute;left:9px;bottom:9px;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.72);font-size:8px;font-weight:800;letter-spacing:.8px}
.lb-live-vibe-card>p{
  color:#d6dfd9;
  font-size:12px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:56px;
  margin:0 0 10px;
}
.lb-live-vibe-actions{
  display:flex;
  align-items:center;
  gap:5px;
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:10px;
}
.lb-live-vibe-actions button{
  border:0;
  background:transparent;
  color:#9ca9a1;
  padding:5px 7px;
  border-radius:7px;
  font-size:11px;
  cursor:pointer;
}
.lb-live-vibe-actions button:hover,.lb-live-vibe-actions button.is-active{
  color:var(--green);
  background:rgba(22,212,95,.07);
}
.lb-live-vibe-actions button span{margin-left:3px}
.lb-live-vibes-empty{
  grid-column:1/-1;
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  border:1px dashed rgba(22,212,95,.2);
  border-radius:16px;
  padding:25px;
  background:rgba(22,212,95,.025);
}
.lb-live-vibes-empty strong{font-size:14px}
.lb-live-vibes-empty span{font-size:11px;color:var(--muted);max-width:470px}
.lb-live-vibes-empty a{margin-top:5px;color:var(--green);font-size:11px;font-weight:800}
@media(max-width:1100px){
  .lb-live-vibes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .lb-live-vibes-grid{grid-template-columns:1fr}
}


/* ==========================================================
   LEVELSBEATZ EDITORIAL MUSIC RAILS
========================================================== */
.lb-live-compact-rail{display:grid;grid-auto-flow:column;grid-auto-columns:112px;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.lb-live-compact-rail::-webkit-scrollbar,.lb-live-feature-rail::-webkit-scrollbar,.lb-live-video-row::-webkit-scrollbar{display:none}
.lb-live-compact-card{position:relative;min-width:0;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer}
.lb-live-compact-card>span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#141b17;color:var(--green);font-size:25px;margin-bottom:7px}
.lb-live-compact-card img{width:100%;height:100%;object-fit:cover;display:block}
.lb-live-compact-card strong,.lb-live-compact-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-compact-card strong{font-size:11px}.lb-live-compact-card small{font-size:9px;color:var(--muted);margin-top:2px}
.lb-live-compact-card i{position:absolute;right:6px;top:6px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#031008;font-style:normal;font-size:9px;opacity:0;transition:.2s}
.lb-live-compact-card:hover i{opacity:1}
.lb-live-feature-rail{display:grid;grid-auto-flow:column;grid-auto-columns:158px;gap:12px;overflow-x:auto;scrollbar-width:none}
.lb-live-feature-card{min-width:0;display:flex;flex-direction:column;gap:6px}.lb-live-feature-card>span{aspect-ratio:1;border-radius:13px;overflow:hidden;background:#141b17;display:grid;place-items:center;color:var(--green);font-size:28px}.lb-live-feature-card img{width:100%;height:100%;object-fit:cover;display:block}.lb-live-feature-card strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-live-feature-card small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live-curation-dual{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}.lb-live-curation-dual>.lb-live-section{margin:0}
.lb-live-mini-list{border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}.lb-live-mini-list button{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 26px;gap:10px;align-items:center;padding:8px 10px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.045);color:inherit;text-align:left;cursor:pointer}.lb-live-mini-list button:last-child{border-bottom:0}.lb-live-mini-list button:hover{background:rgba(22,212,95,.06)}.lb-live-mini-list button>span{width:42px;height:42px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:#141b17;color:var(--green)}.lb-live-mini-list img{width:100%;height:100%;object-fit:cover}.lb-live-mini-list em{min-width:0;display:flex;flex-direction:column;font-style:normal;gap:2px}.lb-live-mini-list strong,.lb-live-mini-list small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-live-mini-list strong{font-size:11px}.lb-live-mini-list small{font-size:9px;color:var(--muted)}.lb-live-mini-list i{font-style:normal;color:#9aa79f;font-size:10px}.lb-live-mini-list button:hover i{color:var(--green)}
.lb-live-best-pick{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}.lb-live-best-pick a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.045)}.lb-live-best-pick a:last-child{border-bottom:0}.lb-live-best-pick a:hover{background:rgba(22,212,95,.06)}.lb-live-best-pick a>span{width:48px;height:48px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:#141b17;color:var(--green)}.lb-live-best-pick img{width:100%;height:100%;object-fit:cover}.lb-live-best-pick em{min-width:0;display:flex;flex-direction:column;font-style:normal;gap:3px}.lb-live-best-pick strong,.lb-live-best-pick small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-live-best-pick strong{font-size:11px}.lb-live-best-pick small{font-size:9px;color:var(--muted)}
.lb-live-region-section{margin-top:0}.lb-live-region-row{grid-auto-columns:135px}.lb-live-region-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.lb-live-region-pair .lb-live-section{margin:0}.lb-live-small-release-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lb-live-small-release-row a{min-width:0}.lb-live-small-release-row a>span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#141b17;color:var(--green);font-size:22px;margin-bottom:6px}.lb-live-small-release-row img{width:100%;height:100%;object-fit:cover}.lb-live-small-release-row strong,.lb-live-small-release-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-live-small-release-row strong{font-size:10px}.lb-live-small-release-row small{font-size:9px;color:var(--muted);margin-top:2px}
.lb-live-coming{font-size:9px;color:#8d9a92;border:1px solid rgba(255,255,255,.08);padding:5px 8px;border-radius:999px;white-space:nowrap}.lb-live-coming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.lb-live-coming-grid>div{min-height:120px;border:1px dashed rgba(255,255,255,.1);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.015)}.lb-live-coming-grid>div:first-letter{font-size:22px}.lb-live-coming-grid strong{font-size:12px}.lb-live-coming-grid small{font-size:10px;color:var(--muted);line-height:1.45}
.lb-live-video-row{display:grid;grid-auto-flow:column;grid-auto-columns:176px;gap:12px;overflow-x:auto;scrollbar-width:none}.lb-live-video-card{min-width:0;display:flex;flex-direction:column;gap:5px}.lb-live-video-card>span{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#141b17;display:grid;place-items:center;color:var(--green)}.lb-live-video-card img{width:100%;height:100%;object-fit:cover}.lb-live-video-card>span>b{font-size:25px}.lb-live-video-card>span i{position:absolute;right:6px;bottom:6px;padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.75);font-size:8px;font-style:normal;color:#fff}.lb-live-video-card strong,.lb-live-video-card small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-live-video-card strong{font-size:11px}.lb-live-video-card small{font-size:9px;color:var(--muted)}
@media(max-width:800px){.lb-live-curation-dual,.lb-live-region-pair{grid-template-columns:1fr;gap:28px}.lb-live-coming-grid{grid-template-columns:1fr}.lb-live-small-release-row{grid-template-columns:repeat(4,minmax(80px,1fr))}.lb-live-feature-rail{grid-auto-columns:145px}}
@media(max-width:520px){.lb-live-small-release-row{grid-template-columns:repeat(2,minmax(0,1fr))}.lb-live-compact-rail{grid-auto-columns:105px}.lb-live-video-row{grid-auto-columns:160px}}


/* ==========================================================================
   LEVELSBEATZ VIBES COMMUNITY
   ========================================================================== */
.lb-page-vibes .lb-vibes-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 0 80px;
}

.lb-vibes-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.lb-vibes-hero h1 {
    margin: 6px 0 8px;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1;
    letter-spacing: -1.8px;
}

.lb-vibes-hero p {
    margin: 0;
    max-width: 620px;
    color: var(--lb-text-muted, #9aa59f);
}

.lb-vibes-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.lb-vibes-tabs a {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: #aeb8b2;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.lb-vibes-tabs a:hover,
.lb-vibes-tabs a.is-active {
    color: #07110b;
    background: #39e66d;
    border-color: #39e66d;
}

.lb-vibe-composer,
.lb-vibe-login-card,
.lb-vibe-card,
.lb-vibes-empty {
    background: rgba(17, 24, 20, .88);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(0,0,0,.18);
}

.lb-vibe-composer {
    display: flex;
    gap: 14px;
    padding: 17px;
    margin-bottom: 18px;
}

.lb-vibe-composer-avatar,
.lb-vibe-avatar,
.lb-vibe-comment-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #26322b;
    color: #55ec7c;
    font-weight: 800;
    overflow: hidden;
}

.lb-vibe-avatar img,
.lb-vibe-composer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lb-vibe-composer-main {
    min-width: 0;
    flex: 1;
}

.lb-vibe-composer input,
.lb-vibe-composer textarea,
.lb-vibe-comment-form input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: #0c120f;
    color: #fff;
    outline: none;
}

.lb-vibe-composer input {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.lb-vibe-composer textarea {
    resize: vertical;
    min-height: 82px;
    padding: 12px;
}

.lb-vibe-composer input:focus,
.lb-vibe-composer textarea:focus,
.lb-vibe-comment-form input:focus {
    border-color: rgba(57,230,109,.65);
    box-shadow: 0 0 0 3px rgba(57,230,109,.08);
}

.lb-vibe-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.lb-vibe-composer-footer span {
    color: #77837c;
    font-size: 12px;
}

.lb-vibe-composer-footer button,
.lb-vibe-comment-form button,
.lb-vibe-login-card a {
    border: 0;
    border-radius: 10px;
    background: #39e66d;
    color: #07110b;
    padding: 10px 15px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

.lb-vibe-login-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.lb-vibe-login-card div {
    display: grid;
    gap: 4px;
}

.lb-vibe-login-card span {
    color: #87928b;
    font-size: 13px;
}

.lb-vibes-feed {
    display: grid;
    gap: 16px;
}

.lb-vibe-card {
    padding: 18px;
}

.lb-vibe-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.lb-vibe-author {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lb-vibe-author strong {
    font-size: 14px;
}

.lb-vibe-author span {
    color: #78837d;
    font-size: 11px;
}

.lb-vibe-more {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #7f8983;
    cursor: pointer;
}

.lb-vibe-card h2 {
    margin: 18px 0 7px;
    font-size: 18px;
}

.lb-vibe-body {
    margin: 0;
    color: #d7ded9;
    line-height: 1.65;
    white-space: normal;
}

.lb-vibe-media {
    margin-top: 15px;
    overflow: hidden;
    border-radius: 14px;
    background: #080d0a;
}

.lb-vibe-media img,
.lb-vibe-media video {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
}

.lb-vibe-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 12px 0 9px;
    color: #727d76;
    font-size: 11px;
}

.lb-vibe-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.lb-vibe-actions form,
.lb-vibe-actions button,
.lb-vibe-actions a {
    width: 100%;
}

.lb-vibe-actions button,
.lb-vibe-actions a {
    border: 0;
    background: transparent;
    color: #9aa49e;
    padding: 12px 7px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.lb-vibe-actions button:hover,
.lb-vibe-actions a:hover,
.lb-vibe-actions button.is-active {
    color: #43e971;
}

.lb-vibe-comments {
    padding-top: 12px;
}

.lb-vibe-comment {
    display: flex;
    gap: 9px;
    padding: 8px 0;
}

.lb-vibe-comment-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.lb-vibe-comment strong {
    font-size: 12px;
}

.lb-vibe-comment p {
    margin: 3px 0 0;
    color: #9ca69f;
    font-size: 12px;
    line-height: 1.5;
}

.lb-vibe-comment-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.lb-vibe-comment-form input {
    min-width: 0;
    padding: 9px 11px;
}

.lb-vibe-comment-form button {
    flex: 0 0 auto;
}

.lb-vibes-empty {
    text-align: center;
    padding: 60px 24px;
}

.lb-vibes-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(57,230,109,.1);
    color: #43e971;
    font-size: 26px;
}

.lb-vibes-empty h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.lb-vibes-empty p {
    margin: 0;
    color: #7d8881;
}

@media (max-width: 760px) {
    .lb-page-vibes .lb-vibes-page {
        padding: 20px 0 70px;
    }

    .lb-vibes-hero {
        display: block;
    }

    .lb-vibes-tabs {
        justify-content: flex-start;
        margin-top: 16px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .lb-vibes-tabs a {
        white-space: nowrap;
    }

    .lb-vibe-composer,
    .lb-vibe-card {
        border-radius: 14px;
        padding: 14px;
    }

    .lb-vibe-composer-footer {
        align-items: flex-end;
    }

    .lb-vibe-composer-footer span {
        max-width: 55%;
    }
}

/* ==========================================================================\n   LEVELSBEATZ CHAT\n   ========================================================================== */
.lb-page-chat .lb-chat-page{max-width:1500px;margin:0 auto;padding:28px 30px 100px}
.lb-chat-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.lb-chat-header h1{margin:6px 0 4px;font-size:34px;line-height:1.05}.lb-chat-header p{margin:0;color:var(--lb-text-muted,#8e96a3)}
.lb-chat-vibes-link{border:1px solid rgba(80,255,146,.25);padding:10px 15px;border-radius:12px;color:#7dffac;text-decoration:none}
.lb-chat-shell{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:680px;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;background:rgba(12,15,20,.8);box-shadow:0 20px 60px rgba(0,0,0,.22)}
.lb-chat-list{border-right:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018)}
.lb-chat-list-head{display:flex;justify-content:space-between;padding:20px;border-bottom:1px solid rgba(255,255,255,.07)}.lb-chat-list-head span{color:#7dffac}
.lb-chat-conversation{display:flex;align-items:center;gap:12px;padding:14px 16px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.045)}.lb-chat-conversation.is-active{background:rgba(80,255,146,.08)}.lb-chat-conversation>b{margin-left:auto;background:#7dffac;color:#07100b;border-radius:999px;min-width:22px;text-align:center;font-size:12px;padding:3px 6px}
.lb-chat-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#183c29,#10161c);color:#7dffac;font-weight:800}.lb-chat-avatar img{width:100%;height:100%;object-fit:cover}
.lb-chat-conversation-copy{min-width:0;display:grid;gap:4px}.lb-chat-conversation-copy strong{font-size:14px}.lb-chat-conversation-copy span{font-size:12px;color:#858d99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:215px}
.lb-chat-window{min-width:0;display:flex;flex-direction:column}.lb-chat-person{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07)}.lb-chat-avatar-large{width:42px;height:42px;flex-basis:42px}.lb-chat-person div:nth-child(2){display:grid;gap:3px}.lb-chat-person span{font-size:12px;color:#7f8793}.lb-chat-block-form{margin-left:auto}.lb-chat-block-form button{border:0;background:transparent;color:#858d99;cursor:pointer}
.lb-chat-messages{flex:1;overflow:auto;padding:28px 24px;display:flex;flex-direction:column;gap:10px}.lb-chat-message{display:flex;justify-content:flex-start}.lb-chat-message.is-mine{justify-content:flex-end}.lb-chat-bubble{max-width:min(680px,78%);padding:11px 14px;border-radius:16px 16px 16px 4px;background:#171d25}.lb-chat-message.is-mine .lb-chat-bubble{border-radius:16px 16px 4px 16px;background:#163c27}.lb-chat-bubble p{margin:0;line-height:1.5;font-size:14px}.lb-chat-bubble time{display:block;margin-top:6px;font-size:10px;color:#77808d}.lb-chat-composer{display:flex;gap:10px;padding:16px 20px;border-top:1px solid rgba(255,255,255,.07)}.lb-chat-composer textarea{flex:1;resize:none;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0d1117;color:#fff;padding:12px 14px;outline:none}.lb-chat-composer button{width:48px;border:0;border-radius:14px;background:#7dffac;color:#07100b;font-size:18px;cursor:pointer}.lb-chat-welcome{margin:auto;text-align:center;max-width:430px;padding:30px}.lb-chat-welcome-icon{width:66px;height:66px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(80,255,146,.09);color:#7dffac;font-size:28px}.lb-chat-welcome h2{margin:0 0 8px}.lb-chat-welcome p{color:#8b94a0;line-height:1.6}.lb-chat-welcome a{display:inline-block;margin-top:10px;padding:11px 16px;border-radius:12px;background:#7dffac;color:#07100b;text-decoration:none;font-weight:700}.lb-chat-empty-list{padding:28px 20px;color:#8a929e;display:grid;gap:8px;font-size:13px}.lb-chat-first-message{margin:auto;color:#777f8b;font-size:13px}
@media (max-width:900px){.lb-chat-page{padding:18px 14px 90px!important}.lb-chat-shell{grid-template-columns:1fr;min-height:0}.lb-chat-list{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);max-height:310px;overflow:auto}.lb-chat-window{min-height:600px}.lb-chat-header{align-items:flex-start;flex-direction:column}.lb-chat-bubble{max-width:88%}}


/* ==========================================================================
   VIBES ↔ CHAT
   ========================================================================== */

.lb-vibe-message-form {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.lb-vibe-message-form button {
    border: 1px solid rgba(57,230,109,.28);
    border-radius: 9px;
    background: rgba(57,230,109,.08);
    color: #43e971;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.lb-vibe-message-form button:hover {
    background: rgba(57,230,109,.16);
}

.lb-live-vibe-message-form {
    margin-left: auto;
    display: flex;
}

.lb-live-vibe-message-form button {
    border: 1px solid rgba(57,230,109,.22);
    border-radius: 8px;
    background: rgba(57,230,109,.07);
    color: #50e879;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.lb-live-vibe-message-form button:hover {
    background: rgba(57,230,109,.14);
}

@media (max-width: 640px) {
    .lb-vibe-message-form button {
        padding: 6px 8px;
    }
}


/* ==========================================================================\n   PUBLIC PROFILE MESSAGE ACTIONS\n   ========================================================================== */
.lb-profile-message-form{margin:0;display:inline-flex}
.lb-profile-message-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border:1px solid #00e5a0;border-radius:10px;background:#00e5a0;color:#03110b;font-size:12px;font-weight:850;cursor:pointer;text-decoration:none;box-sizing:border-box}
.lb-profile-message-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.lb-public-profile-page{max-width:1180px;margin:0 auto;padding:28px 24px 100px}
.lb-public-profile-hero{position:relative;overflow:hidden;min-height:390px;border:1px solid #20322b;border-radius:24px;background:#07100d}
.lb-public-profile-backdrop{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(4,10,8,.12),rgba(4,10,8,.96)),var(--lb-profile-cover,linear-gradient(135deg,#10251d,#07100d));background-position:center;background-size:cover;filter:saturate(.85)}
.lb-public-profile-content{position:relative;z-index:1;display:flex;align-items:flex-end;gap:28px;min-height:390px;padding:36px;box-sizing:border-box}
.lb-public-profile-avatar{width:160px;height:160px;flex:0 0 160px;overflow:hidden;border:4px solid rgba(255,255,255,.9);border-radius:50%;background:#10201a;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.lb-public-profile-avatar img{display:block;width:100%;height:100%;object-fit:cover}.lb-public-profile-avatar span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#00e5a0;font-size:58px;font-weight:900}
.lb-public-profile-details{min-width:0}.lb-public-profile-type{display:inline-flex;padding:6px 10px;border:1px solid rgba(0,229,160,.4);border-radius:999px;background:rgba(0,229,160,.1);color:#00e5a0;font-size:10px;font-weight:850;letter-spacing:.12em}.lb-public-profile-details h1{margin:10px 0 4px;color:#fff;font-size:42px;line-height:1.05}.lb-public-profile-details p{margin:0;color:#a6b4ae;font-size:14px}.lb-public-profile-actions{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}.lb-public-profile-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:1px solid #30423a;border-radius:10px;background:rgba(4,10,8,.75);color:#e7efeb;text-decoration:none;font-size:12px;font-weight:800}
.lb-public-profile-body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}.lb-public-profile-card{padding:25px;border:1px solid #20322b;border-radius:18px;background:#07100d}.lb-public-profile-label{color:#00e5a0;font-size:10px;font-weight:850;letter-spacing:.15em}.lb-public-profile-card h2{margin:8px 0 12px;color:#fff;font-size:22px}.lb-public-profile-card p{margin:0;color:#9ba9a3;font-size:14px;line-height:1.75}.lb-public-profile-location{margin-top:16px;color:#aebbb5;font-size:12px}
@media(max-width:650px){.lb-public-profile-page{padding:18px 14px 80px}.lb-public-profile-content{min-height:520px;padding:24px;flex-direction:column;align-items:flex-start;justify-content:flex-end}.lb-public-profile-avatar{width:125px;height:125px;flex-basis:125px}.lb-public-profile-details h1{font-size:31px}.lb-public-profile-actions{width:100%}.lb-profile-message-form,.lb-profile-message-button,.lb-public-profile-secondary{width:100%}}


/* LEVELSBEATZ LISTENER / FAN PUBLIC PROFILE */
.lb-listener-profile-page .lb-public-profile-type { display:inline-flex; align-items:center; gap:6px; }
.lb-listener-profile-location { opacity:.72; font-size:13px; margin-top:4px; }
.lb-listener-profile-section { margin-top:28px; }
.lb-listener-profile-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.lb-listener-profile-section-head h2 { margin:4px 0 0; }
.lb-listener-profile-section-head a { color:var(--lb-green,#35d06f); font-weight:700; text-decoration:none; }
.lb-listener-vibes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lb-listener-vibe-card,.lb-listener-playlist-card { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden; }
.lb-listener-vibe-card > img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.lb-listener-vibe-card-body { padding:16px; }
.lb-listener-vibe-card h3,.lb-listener-playlist-card h3 { margin:0 0 7px; }
.lb-listener-vibe-card p { margin:0 0 10px; color:rgba(255,255,255,.76); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.lb-listener-vibe-card small { color:rgba(255,255,255,.52); }
.lb-listener-playlist-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.lb-listener-playlist-card { display:flex; gap:13px; padding:12px; align-items:center; }
.lb-listener-playlist-cover { width:72px; height:72px; flex:0 0 72px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.06); display:grid; place-items:center; }
.lb-listener-playlist-cover img { width:100%; height:100%; object-fit:cover; }
.lb-listener-playlist-cover span { font-size:30px; opacity:.7; }
.lb-listener-playlist-card p { margin:0; color:rgba(255,255,255,.55); font-size:13px; }
.lb-listener-empty-state { padding:28px; border:1px dashed rgba(255,255,255,.12); border-radius:16px; color:rgba(255,255,255,.58); text-align:center; }
@media (max-width:900px) { .lb-listener-vibes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .lb-listener-playlist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .lb-listener-vibes-grid,.lb-listener-playlist-grid { grid-template-columns:1fr; } .lb-listener-profile-section-head { align-items:center; } }


/* ==========================================================================
   LevelsBeatz Social Follow System
   ========================================================================== */
.lb-profile-follow-form { margin: 0; display: inline-flex; }
.lb-profile-follow-button, .lb-artist-follow {
    border: 1px solid rgba(74, 222, 128, .45);
    background: #4ade80;
    color: #07130b;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 800;
    cursor: pointer;
}
.lb-profile-follow-button:hover, .lb-artist-follow:hover { opacity: .9; }
.lb-public-profile-stats { display: flex; gap: 22px; margin: 12px 0; color: rgba(255,255,255,.72); }
.lb-public-profile-stats strong { color: #fff; margin-right: 4px; }

/* ==========================================================================\n * LevelsBeatz Social Relationships\n * ========================================================================== */
.lb-social-relationships-page{max-width:1180px;margin:0 auto;padding:34px 28px 90px}
.lb-social-relationships-header{margin-bottom:26px}
.lb-social-back{display:inline-flex;align-items:center;margin-bottom:18px;color:#a9b7b0;text-decoration:none;font-size:13px;font-weight:700}
.lb-social-back:hover{color:#00e5a0}
.lb-social-relationships-header .lb-public-profile-label{display:block;margin-bottom:7px}
.lb-social-relationships-header h1{margin:0;font-size:34px;line-height:1.1;color:#f4faf7}
.lb-social-relationships-header p{margin:9px 0 0;color:#91a39b;font-size:14px}
.lb-social-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lb-social-person-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,rgba(18,30,25,.95),rgba(8,15,12,.95));box-shadow:0 12px 35px rgba(0,0,0,.12)}
.lb-social-person-main{min-width:0;display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.lb-social-person-avatar{width:58px;height:58px;flex:0 0 58px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#15271f;border:1px solid rgba(0,229,160,.22);color:#00e5a0;font-size:20px;font-weight:900}
.lb-social-person-avatar img{width:100%;height:100%;object-fit:cover}
.lb-social-person-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-social-person-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f7f4;font-size:14px}
.lb-social-person-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#84958e;font-size:12px}
.lb-social-person-copy small{color:#00c98e;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.lb-social-view-button{flex:0 0 auto;padding:9px 13px;border:1px solid rgba(0,229,160,.28);border-radius:9px;color:#cfe7de;text-decoration:none;font-size:11px;font-weight:800}
.lb-social-view-button:hover{background:rgba(0,229,160,.08);color:#00e5a0}
.lb-social-empty-state{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.015);text-align:center;color:#8b9b95}
.lb-social-empty-state strong{color:#dce8e3;font-size:16px}
@media(max-width:760px){.lb-social-relationships-page{padding:22px 14px 80px}.lb-social-relationships-header h1{font-size:28px}.lb-social-people-grid{grid-template-columns:1fr}.lb-social-person-card{align-items:flex-start}.lb-social-view-button{margin-top:4px}}

/* Relationship statistic links */
.lb-public-profile-stats a{color:inherit;text-decoration:none}
.lb-public-profile-stats a:hover{color:#00e5a0}
.lb-public-profile-stats a strong{display:inline}


/* LEVELSBEATZ SOCIAL — FOLLOW REQUESTS */
.lb-account-social-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));}
.lb-account-social-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;opacity:.58;margin-bottom:7px}
.lb-account-social-card h2{margin:0 0 6px;font-size:21px}
.lb-account-social-card p{margin:0;opacity:.65}
.lb-account-social-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lb-account-social-link{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid rgba(255,255,255,.09);border-radius:10px;text-decoration:none;font-weight:700;background:rgba(255,255,255,.035)}
.lb-account-social-link:hover{border-color:rgba(45,255,133,.35);background:rgba(45,255,133,.07)}
.lb-social-request-page{max-width:1040px;margin:0 auto;padding:28px 0 60px}
.lb-social-request-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.lb-social-request-head h1{margin:0 0 6px;font-size:30px}
.lb-social-request-head p{margin:0;opacity:.62}
.lb-social-request-list{display:grid;gap:12px}
.lb-social-request-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025)}
.lb-social-request-person{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:inherit}
.lb-social-request-avatar{width:52px;height:52px;flex:0 0 52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.06);font-weight:800}
.lb-social-request-avatar img{width:100%;height:100%;object-fit:cover}
.lb-social-request-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-social-request-meta{margin-top:3px;font-size:13px;opacity:.58}
.lb-social-request-actions{display:flex;gap:8px;flex:0 0 auto}
.lb-social-request-actions form{margin:0}
.lb-social-request-btn{min-height:38px;padding:0 14px;border-radius:9px;border:1px solid rgba(255,255,255,.1);font-weight:750;cursor:pointer;background:rgba(255,255,255,.04);color:inherit}
.lb-social-request-btn.accept{border-color:rgba(45,255,133,.28);background:rgba(45,255,133,.1)}
.lb-social-request-btn.reject{opacity:.72}
.lb-social-request-empty{padding:60px 24px;text-align:center;border:1px dashed rgba(255,255,255,.1);border-radius:18px;opacity:.68}
@media(max-width:700px){.lb-social-request-card{align-items:stretch;flex-direction:column}.lb-social-request-actions{width:100%}.lb-social-request-actions form{flex:1}.lb-social-request-btn{width:100%}.lb-social-request-head{align-items:flex-start;flex-direction:column}}


/* ==========================================================================
   LEVELSBEATZ NOTIFICATION BADGE
   ========================================================================== */
.lb-header-notifications{display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.lb-notification-count{position:absolute;top:-3px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--green);color:#071008;font-size:10px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 3px var(--bg,#080d0a)}
.lb-header-notifications .lb-notification-dot{top:7px;right:8px}
.lb-notification-avatar,.lb-notification-avatar-fallback{overflow:hidden}
@media (max-width:640px){.lb-notifications{padding:20px 14px 70px}.lb-notifications-head{align-items:flex-start;flex-direction:column}.lb-notification{padding:14px;gap:10px}.lb-notification-avatar,.lb-notification-avatar-fallback{width:40px;height:40px}.lb-notification-dot{display:none}}


/* ==========================================================================\n   PLAYLISTS — LIVE FOUNDATION\n   ========================================================================== */
.lb-playlists-page,.lb-playlist-detail,.lb-playlist-form-page{max-width:1180px;margin:0 auto;padding:8px 0 48px}
.lb-playlists-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.lb-page-eyebrow{display:block;text-transform:uppercase;letter-spacing:1.4px;font-size:10px;font-weight:900;color:#20d17b;margin-bottom:8px}
.lb-playlists-heading h1,.lb-playlist-detail h1,.lb-playlist-form-card h1{margin:0;color:#f5faf7;font-size:clamp(30px,4vw,48px);letter-spacing:-1px}
.lb-playlists-heading p,.lb-playlist-form-card>p{color:#89958e;margin:10px 0 0;font-size:14px}
.lb-playlist-primary,.lb-playlist-form-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;background:#20d17b;color:#06100a;text-decoration:none;font-weight:900;border:0;cursor:pointer}
.lb-playlist-section{margin-top:28px}.lb-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.lb-section-title h2{margin:0;color:#f0f5f2;font-size:20px}.lb-section-title span{color:#69766f;font-size:12px}
.lb-playlist-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.lb-playlist-card{min-width:0;color:inherit;text-decoration:none}.lb-playlist-art{aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#14231b,#0b110e);border:1px solid #202d26;display:flex;align-items:center;justify-content:center;margin-bottom:10px;box-shadow:0 12px 30px rgba(0,0,0,.18)}.lb-playlist-art img{width:100%;height:100%;object-fit:cover}.lb-playlist-art span{font-size:42px;color:#20d17b}.lb-playlist-card strong{display:block;color:#e9efeb;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-playlist-card small{display:block;color:#718078;font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-playlist-empty{border:1px dashed #29362f;border-radius:16px;padding:34px;text-align:center;background:#0b100d}.lb-playlist-empty strong{display:block;color:#e8efeb}.lb-playlist-empty span{display:block;color:#6f7c75;font-size:13px;margin-top:6px}
.lb-playlist-hero-card{display:flex;gap:26px;align-items:flex-end;padding:26px;border:1px solid #202d26;border-radius:20px;background:linear-gradient(145deg,#111b16,#080d0a);margin:10px 0 30px}.lb-playlist-hero-art{width:220px;aspect-ratio:1;flex:0 0 220px;border-radius:16px;overflow:hidden;background:#0c120f;display:flex;align-items:center;justify-content:center}.lb-playlist-hero-art img{width:100%;height:100%;object-fit:cover}.lb-playlist-hero-art span{font-size:70px;color:#20d17b}.lb-playlist-hero-copy{padding-bottom:6px}.lb-playlist-hero-copy p{max-width:680px;color:#89958e;line-height:1.6;margin:12px 0}.lb-playlist-owner{color:#78857e;font-size:13px}.lb-playlist-owner strong{color:#e9efeb}
.lb-track-table{border:1px solid #202d26;border-radius:16px;overflow:hidden;background:#0b100d}.lb-track-row{display:grid;grid-template-columns:38px 48px minmax(180px,1fr) minmax(120px,.6fr) 58px auto;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #18231d}.lb-track-row:last-child{border-bottom:0}.lb-track-number,.lb-track-duration,.lb-track-release{color:#68756e;font-size:12px}.lb-track-art-button{width:48px;height:48px;border:0;border-radius:8px;overflow:hidden;padding:0;background:#121a15;cursor:pointer}.lb-track-art-button img{width:100%;height:100%;object-fit:cover}.lb-track-art-button span{color:#20d17b;font-size:20px}.lb-track-copy{min-width:0}.lb-track-copy strong{display:block;color:#edf3ef;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-track-copy small{display:block;color:#77847d;font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-track-release{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-track-remove{background:transparent;border:1px solid #2b3931;border-radius:8px;color:#9ba7a1;font-size:11px;padding:7px 9px;cursor:pointer}.lb-track-remove:hover{border-color:#e66b6b;color:#ff9a9a}
.lb-playlist-back{display:inline-block;color:#7e8a83;text-decoration:none;font-size:13px;margin-bottom:12px}.lb-playlist-back:hover{color:#20d17b}
.lb-playlist-form-page{display:flex;justify-content:center}.lb-playlist-form-card{width:min(620px,100%);padding:30px;border:1px solid #202d26;border-radius:20px;background:linear-gradient(145deg,#111a15,#080d0a)}.lb-playlist-form-card form{display:grid;gap:18px;margin-top:26px}.lb-playlist-form-card label{display:grid;gap:7px;color:#b9c3be;font-size:12px;font-weight:800}.lb-playlist-form-card input,.lb-playlist-form-card textarea,.lb-playlist-form-card select{width:100%;box-sizing:border-box;border:1px solid #26342c;background:#0b110e;color:#edf3ef;border-radius:11px;padding:12px 13px;font:inherit;outline:none}.lb-playlist-form-card textarea{resize:vertical}.lb-playlist-form-card input:focus,.lb-playlist-form-card textarea:focus,.lb-playlist-form-card select:focus{border-color:#20d17b}.lb-playlist-form-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}.lb-playlist-form-actions a{color:#8a968f;text-decoration:none;font-size:13px;padding:12px}
@media(max-width:1000px){.lb-playlist-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.lb-playlists-page,.lb-playlist-detail,.lb-playlist-form-page{padding:4px 0 38px}.lb-playlists-heading{align-items:flex-start;flex-direction:column}.lb-playlist-primary{width:100%}.lb-playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lb-playlist-hero-card{align-items:flex-start;flex-direction:column;padding:18px}.lb-playlist-hero-art{width:170px;flex-basis:170px}.lb-track-row{grid-template-columns:28px 42px minmax(0,1fr) 48px;padding:8px 9px;gap:8px}.lb-track-art-button{width:42px;height:42px}.lb-track-release{display:none}.lb-track-remove{grid-column:4}.lb-playlist-form-card{padding:20px}}


/* ==========================================================================\n   LEVELSBEATZ — ADD TO PLAYLIST PICKER\n   ========================================================================== */
.lb-playlist-picker-overlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,7,5,.78);backdrop-filter:blur(10px)}
.lb-playlist-picker{width:min(520px,100%);max-height:min(720px,90vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(32,209,123,.18);border-radius:20px;background:#0b110e;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lb-playlist-picker-head{display:flex;justify-content:space-between;gap:20px;padding:22px 22px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.lb-playlist-picker-head>div>span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#20d17b;font-weight:900}.lb-playlist-picker-head h2{margin:5px 0 3px;color:#f1f7f4;font-size:23px}.lb-playlist-picker-head p{margin:0;color:#78857e;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:390px}.lb-playlist-picker-close{width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035);color:#a8b5ae;font-size:24px;line-height:1;cursor:pointer}.lb-playlist-picker-body{overflow:auto;padding:10px}.lb-playlist-picker-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border:1px solid transparent;border-radius:13px;background:transparent;color:inherit;text-align:left;cursor:pointer}.lb-playlist-picker-item:hover:not(:disabled){background:rgba(32,209,123,.06);border-color:rgba(32,209,123,.13)}.lb-playlist-picker-item:disabled{cursor:default;opacity:.78}.lb-playlist-picker-art{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#141e18;color:#20d17b}.lb-playlist-picker-art img{width:100%;height:100%;object-fit:cover}.lb-playlist-picker-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.lb-playlist-picker-copy strong{color:#eaf1ed;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-playlist-picker-copy small{color:#718078;font-size:10px;text-transform:capitalize}.lb-playlist-picker-state{margin-left:auto;flex:0 0 auto;color:#20d17b;font-size:12px;font-weight:900}.lb-playlist-picker-item.is-loading .lb-playlist-picker-state{opacity:.5}.lb-playlist-picker-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:42px 20px;color:#7e8b84;text-align:center;font-size:13px}.lb-playlist-picker-empty a,.lb-playlist-picker-foot a{color:#20d17b;text-decoration:none;font-weight:800}.lb-playlist-picker-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.07);text-align:center;font-size:12px}.lb-player-action:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:640px){.lb-playlist-picker-overlay{padding:10px;align-items:flex-end}.lb-playlist-picker{max-height:88vh;border-radius:18px 18px 0 0}.lb-playlist-picker-head{padding:18px 16px 14px}.lb-playlist-picker-body{padding:7px}}

/* ==========================================================================\n   LEVELSBEATZ PLAYLIST MANAGEMENT V1\n   ========================================================================== */
.lb-playlist-track-actions{display:flex;align-items:center;gap:14px}.lb-playlist-edit-link{display:inline-flex;align-items:center;padding:8px 13px;border:1px solid rgba(72,209,139,.28);border-radius:10px;color:#48d18b;text-decoration:none;font-weight:750}.lb-playlist-edit-link:hover{background:rgba(72,209,139,.08)}
.lb-track-row[draggable="true"]{cursor:grab}.lb-track-row.is-dragging{opacity:.55}.lb-track-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:24px;color:#789086;font-size:17px;letter-spacing:-5px;cursor:grab;user-select:none}.lb-playlist-danger-zone{margin-top:30px;padding:20px;border:1px solid rgba(255,91,91,.2);border-radius:16px;background:rgba(255,91,91,.04);display:grid;gap:7px}.lb-playlist-danger-zone strong{color:#fff}.lb-playlist-danger-zone span{color:#8f9e96;font-size:13px}.lb-playlist-danger-zone form{margin-top:8px}.lb-playlist-danger-zone button{border:1px solid rgba(255,91,91,.35);background:transparent;color:#ff8b8b;border-radius:10px;padding:9px 13px;font-weight:750;cursor:pointer}.lb-playlist-danger-zone button:hover{background:rgba(255,91,91,.08)}
@media (max-width:700px){.lb-playlist-track-actions{align-items:flex-end;flex-direction:column;gap:8px}.lb-track-release{display:none}.lb-track-drag-handle{display:none}}


/* LevelsBeatz playlist social actions */
.lb-playlist-social{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px}
.lb-playlist-social-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035);color:#aab6af;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.lb-playlist-social-button:hover{background:rgba(32,209,123,.07);border-color:rgba(32,209,123,.25);color:#eaf3ee}
.lb-playlist-social-button.is-active{background:rgba(32,209,123,.1);border-color:rgba(32,209,123,.38);color:#20d17b}
.lb-playlist-social-button.is-loading{opacity:.6;cursor:wait}
.lb-playlist-social-button:disabled{cursor:wait}
@media(max-width:700px){.lb-playlist-social{width:100%}.lb-playlist-social-button{flex:1 1 auto}}


/* ==========================================================================\n * Playlist sharing to Vibes\n * ========================================================================== */
.lb-vibe-playlist-share{display:flex;align-items:center;gap:14px;margin:18px 0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035);color:inherit;text-decoration:none;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.lb-vibe-playlist-share:hover{background:rgba(255,255,255,.06);border-color:rgba(126,255,0,.28);transform:translateY(-1px)}
.lb-vibe-playlist-share-art{width:64px;height:64px;flex:0 0 64px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:rgba(126,255,0,.1);font-size:24px}
.lb-vibe-playlist-share-art img{width:100%;height:100%;object-fit:cover}
.lb-vibe-playlist-share-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.lb-vibe-playlist-share-copy strong{font-size:14px}.lb-vibe-playlist-share-copy small{font-size:12px;opacity:.62}
.lb-vibe-playlist-share-arrow{font-size:20px;opacity:.7}
.lb-playlist-share-modal-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px}
.lb-playlist-share-modal{width:min(460px,100%);padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#101411;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.lb-playlist-share-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.lb-playlist-share-modal-head h2{margin:5px 0 0;font-size:22px}.lb-playlist-share-close{border:0;background:transparent;color:inherit;font-size:26px;cursor:pointer}
.lb-playlist-share-options{display:grid;gap:10px;margin-top:20px}.lb-playlist-share-option{width:100%;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035);color:inherit;padding:13px 15px;text-align:left;cursor:pointer}.lb-playlist-share-option:hover{border-color:rgba(126,255,0,.35);background:rgba(126,255,0,.06)}


/* ==========================================================================\n   LEVELSBEATZ LIBRARY\n   ========================================================================== */
.lb-library-page{padding:32px 32px 120px;max-width:1500px;margin:0 auto}.lb-library-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(135deg,rgba(31,255,117,.12),rgba(255,255,255,.025));margin-bottom:30px}.lb-library-hero h1{font-size:42px;line-height:1.05;margin:7px 0 10px}.lb-library-hero p{margin:0;color:rgba(255,255,255,.62)}.lb-library-hero__icon{width:82px;height:82px;border-radius:22px;display:grid;place-items:center;background:rgba(31,255,117,.12);font-size:36px;color:#38ff86}.lb-library-section{margin-top:34px}.lb-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}.lb-section-heading h2{margin:5px 0 0;font-size:24px}.lb-section-heading>span{color:rgba(255,255,255,.5);font-size:13px}.lb-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:#38ff86}.lb-library-empty{padding:32px;border:1px dashed rgba(255,255,255,.12);border-radius:18px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.02)}.lb-library-card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.lb-library-card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;min-width:0}.lb-library-card img{width:100%;aspect-ratio:1;border-radius:16px;object-fit:cover;background:rgba(255,255,255,.05)}.lb-library-card strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-library-card span{font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-library-track-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden}.lb-library-track{display:grid;grid-template-columns:56px 1fr 42px 42px;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.lb-library-track:last-child{border-bottom:0}.lb-library-track img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.05)}.lb-library-track__info{display:flex;flex-direction:column;gap:4px;min-width:0}.lb-library-track__info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-library-track__info span{font-size:12px;color:rgba(255,255,255,.5)}.lb-library-play,.lb-library-remove{border:0;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;width:36px;height:36px;border-radius:50%}.lb-library-play:hover{background:rgba(31,255,117,.12);color:#38ff86}.lb-library-remove{color:#38ff86}.lb-primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;background:#38ff86;color:#06100a;text-decoration:none;font-weight:800;white-space:nowrap}@media(max-width:1100px){.lb-library-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){.lb-library-page{padding:20px 16px 100px}.lb-library-hero{padding:24px;align-items:flex-start;flex-direction:column}.lb-library-hero h1{font-size:32px}.lb-library-hero__icon{display:none}.lb-library-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lb-library-track{grid-template-columns:48px 1fr 38px 38px}.lb-library-track img{width:48px;height:48px}}


/* ==========================================================================
   LIBRARY — ARTISTS & CREATORS
   ========================================================================== */
.lb-library-person-card{display:flex;flex-direction:column;gap:9px;color:inherit;text-decoration:none;min-width:0}
.lb-library-person-card__image{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.lb-library-person-card__name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-library-person-card__meta{font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-library-person-card__follow{font-size:11px;color:rgba(255,255,255,.42)}
@media(max-width:700px){.lb-library-person-card__image{border-radius:18px}}


/* ========================================================================
   LEVELSBEATZ LIBRARY — DOWNLOADS & HISTORY
   ======================================================================== */
.lb-library-clear{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:inherit;border-radius:10px;padding:10px 14px;cursor:pointer;font:inherit}.lb-library-clear:hover{background:rgba(255,255,255,.08)}
.lb-library-track a.lb-library-play{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.lb-library-remove{border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:18px}.lb-library-remove:hover{opacity:1;color:#ff7f8a}
@media(max-width:760px){.lb-library-hero{gap:14px}.lb-library-clear{width:100%}}


/* ==========================================================================
   TRACK ENGAGEMENT — LIKES & SAVES
   ========================================================================== */
.lb-track-action.is-active {
    border-color: rgba(73, 214, 126, .55);
    background: rgba(73, 214, 126, .12);
}

.lb-player-action.is-active {
    color: #49d67e;
}


/* ==========================================================================
   GLOBAL PLAYER — QUEUE & CURRENT ART
   ========================================================================== */
.lb-player-art img{width:100%;height:100%;object-fit:cover;display:block}
.lb-player-queue-overlay{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:flex-end;padding:24px;z-index:1100}
.lb-player-queue{width:min(430px,100%);max-height:min(680px,calc(100vh - 48px));background:#101612;border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.lb-player-queue-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.lb-player-queue-head-actions{display:flex;align-items:center;gap:8px}.lb-player-queue-clear{border:0;background:transparent;color:#20d17b;font-size:11px;font-weight:800;cursor:pointer;padding:7px 4px}.lb-player-queue-clear:hover{text-decoration:underline}
.lb-player-queue-head strong{font-size:17px;color:#eef5f1}
.lb-player-queue-head span{display:block;margin-top:3px;color:#718078;font-size:11px}
.lb-player-queue-close{width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035);color:#aab6b0;font-size:20px;cursor:pointer}
.lb-player-queue-body{overflow:auto;padding:8px}
.lb-player-queue-item{width:100%;display:flex;align-items:center;gap:8px;padding:5px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left}.lb-player-queue-item[draggable="true"]{cursor:grab}.lb-player-queue-item.is-dragging{opacity:.45}.lb-player-queue-item.is-drag-over{border-color:rgba(32,209,123,.45);background:rgba(32,209,123,.08)}.lb-player-queue-drag{width:18px;flex:0 0 18px;color:#5e6d65;font-size:16px;line-height:1;letter-spacing:-3px;cursor:grab;user-select:none;text-align:center}.lb-player-queue-item.is-current .lb-player-queue-drag{color:#20d17b}.lb-player-queue-play{min-width:0;flex:1;display:flex;align-items:center;gap:11px;padding:4px;border:0;border-radius:9px;background:transparent;color:inherit;text-align:left;cursor:pointer}.lb-player-queue-play:hover{background:rgba(255,255,255,.045)}
.lb-player-queue-item:hover{background:rgba(255,255,255,.045)}
.lb-player-queue-item.is-current{background:rgba(32,209,123,.08);border-color:rgba(32,209,123,.15)}
.lb-player-queue-art{width:46px;height:46px;flex:0 0 46px;border-radius:9px;overflow:hidden;background:#18211b;display:grid;place-items:center;color:#20d17b}
.lb-player-queue-art img{width:100%;height:100%;object-fit:cover}
.lb-player-queue-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-player-queue-copy strong{font-size:13px;color:#eaf1ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-player-queue-copy span{font-size:11px;color:#718078;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-player-queue-playing{margin-left:auto;color:#20d17b;font-size:11px;font-weight:800}
.lb-player-queue-remove{width:28px;height:28px;flex:0 0 28px;border:0;border-radius:8px;background:transparent;color:#718078;font-size:18px;line-height:1;cursor:pointer}.lb-player-queue-remove:hover{background:rgba(255,255,255,.06);color:#f1a4a4}
.lb-player-queue-empty{padding:44px 20px;text-align:center;color:#75827b;font-size:13px}
@media(max-width:760px){.lb-player-queue-overlay{padding:12px}.lb-player-queue{max-height:calc(100vh - 24px);border-radius:18px}.lb-player-queue-head{padding:16px}}


/* ==========================================================================
   GLOBAL PLAYER — MOBILE / TOUCH EXPERIENCE
   ========================================================================== */
@media (max-width: 760px){
  .lb-player{
    height:auto;
    min-height:72px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "track tools"
      "controls controls";
    gap:10px 12px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;
  }

  .lb-player-track{
    grid-area:track;
    min-width:0;
    gap:10px;
  }

  .lb-player-art{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:11px;
  }

  .lb-player-track-info{
    min-width:0;
  }

  .lb-player-track-info strong{
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .lb-player-track-info span{
    display:block;
    margin-top:3px;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .lb-player-track .lb-player-action{
    display:none;
  }

  .lb-player-tools{
    grid-area:tools;
    justify-content:flex-end;
    gap:4px;
  }

  .lb-player-tools > button,
  .lb-player-buttons button,
  .lb-player-track > button{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .lb-player-tools .lb-volume{
    display:none;
  }

  .lb-player-controls{
    grid-area:controls;
    width:100%;
    gap:7px;
  }

  .lb-player-buttons{
    width:100%;
    justify-content:center;
    align-items:center;
    gap:4px;
  }

  .lb-player-play{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }

  .lb-player-progress{
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:7px;
    font-size:10px;
  }

  .lb-player-progress input{
    height:28px;
    touch-action:none;
  }

  .lb-player-queue-overlay{
    align-items:stretch;
    justify-content:stretch;
    padding:0;
    background:rgba(0,0,0,.72);
    overscroll-behavior:contain;
  }

  .lb-player-queue{
    width:100%;
    max-height:none;
    height:100%;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }

  .lb-player-queue-head{
    min-height:64px;
    padding:12px 14px;
  }

  .lb-player-queue-close{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    touch-action:manipulation;
  }

  .lb-player-queue-clear{
    min-height:44px;
    padding:10px 8px;
    touch-action:manipulation;
  }

  .lb-player-queue-body{
    padding:8px 10px 20px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .lb-player-queue-item{
    min-height:64px;
    gap:7px;
    padding:6px 4px;
    touch-action:pan-y;
  }

  .lb-player-queue-drag{
    width:34px;
    flex-basis:34px;
    min-height:44px;
    display:grid;
    place-items:center;
    touch-action:none;
  }

  .lb-player-queue-play{
    min-height:52px;
    gap:10px;
    touch-action:manipulation;
  }

  .lb-player-queue-art{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .lb-player-queue-remove{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    touch-action:manipulation;
  }
}

@media (max-width: 420px){
  .lb-player{
    padding-left:9px;
    padding-right:9px;
  }

  .lb-player-buttons{
    gap:1px;
  }

  .lb-player-buttons button{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
  }

  .lb-player-play{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
}

/* ==========================================================================
   SYNCED LYRICS / KARAOKE
   ========================================================================== */
.lb-synced-lyrics-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.lb-synced-lyrics-head h2{margin:0}.lb-synced-lyrics-head span{display:block;margin-top:3px;color:#718078;font-size:10px}.lb-synced-lyrics-head button{border:1px solid rgba(32,209,123,.25);background:rgba(32,209,123,.07);color:#20d17b;border-radius:8px;padding:8px 11px;font-size:10px;font-weight:800;cursor:pointer}.lb-synced-lyrics-lines{max-height:390px;overflow:auto;padding:18px 8px;scroll-behavior:smooth}.lb-synced-lyrics-line{display:block;width:100%;border:0;background:transparent;color:#68777e;text-align:left;padding:9px 12px;border-radius:8px;font:inherit;font-size:17px;line-height:1.5;cursor:pointer;transition:color .18s,transform .18s,background .18s}.lb-synced-lyrics-line:hover{background:rgba(255,255,255,.035);color:#b9c5be}.lb-synced-lyrics-line.is-active{color:#20d17b;background:rgba(32,209,123,.07);font-weight:850;transform:translateX(3px)}.lb-synced-lyrics.is-syncing .lb-track-lyrics{display:none}@media(max-width:700px){.lb-synced-lyrics-line{font-size:15px;padding:8px}.lb-synced-lyrics-lines{max-height:55vh}}