/* =====================================================
   BEAT OF SOUND RADIO – styles.css
   Neon Dark Theme: Rot #e8003d / Lila #8b00ff / Blau #00b4ff
   ===================================================== */
:root {
  --bos-pink:        #e8003d;
  --bos-pink2:       #ff2d78;
  --bos-blue:        #00b4ff;
  --bos-purple:      #8b00ff;
  --bos-green:       #00e676;
  --bos-bg:          #05040d;
  --bos-bg2:         #0a0818;
  --bos-bg3:         #100d20;
  --bos-text:        #ffffff;
  --bos-muted:       rgba(255,255,255,0.5);
  --bos-border:      rgba(232,0,61,0.22);
  --bos-border-blue: rgba(0,180,255,0.22);
  --bos-radius:      8px;
  --bos-radius-lg:   12px;
}

/* ==================================================
   GLOBAL
   ================================================== */

body {
  background: var(--bos-bg) !important;
  color: var(--bos-text) !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 14px !important;
}
a { color: var(--bos-pink); transition: color .2s; }
a:hover { color: var(--bos-pink2); }
* { box-sizing: border-box; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 105%, rgba(0,180,255,.18), transparent 26%),
    radial-gradient(circle at 78% 0%, rgba(139,0,255,.11), transparent 28%),
    radial-gradient(circle at 18% 8%, rgba(255,45,120,.10), transparent 24%);
}

/* ==================================================
   HEADER
   ================================================== */

.bos-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  width: 100%;
  padding: 18px 18px 0;
  background:
    linear-gradient(180deg, rgba(5,2,12,.98), rgba(5,2,12,.86) 72%, rgba(5,2,12,.30));
  border-bottom: 1px solid rgba(255,45,141,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.bos-header-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1.06fr) minmax(260px, .9fr) minmax(330px, 1fr) minmax(320px, .86fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(139,0,255,.48);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5,2,12,.74), rgba(15,7,36,.62)),
    rgba(3,0,10,.56);
  box-shadow:
    0 0 0 1px rgba(255,45,141,.16),
    0 18px 70px rgba(0,0,0,.48),
    0 0 34px rgba(139,0,255,.18);
  backdrop-filter: blur(14px);
}

/* ==================================================
   LOGO
   ================================================== */

.bos-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
  min-width: 0;
}
.bos-brand__logo {
  width: 160px;
  max-width: 42vw;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 15px rgba(255,45,141,.5));
}
.bos-brand__mark {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  color: #fff;
  border: 2px solid rgba(255,45,141,.78);
  background: radial-gradient(circle, rgba(22,13,42,.65), rgba(4,1,12,.98) 64%);
  box-shadow: 0 0 18px rgba(255,45,141,.7), inset 0 0 24px rgba(0,180,255,.16);
  font-size: 22px;
  font-weight: 900;
}
.bos-brand__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bos-brand__copy strong {
  color: #fff;
  font-size: 28px;
  line-height: .95;
  font-weight: 950;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255,45,141,.44);
}
.bos-brand__copy small {
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 0 13px rgba(0,180,255,.42);
}

.bos-live-module,
.bos-orbit-player {
  position: relative;
  min-height: 84px;
  overflow: hidden;
  border-radius: 8px;
}

.bos-live-module {
  padding: 14px 18px;
  border: 1px solid rgba(0,180,255,.34);
  background: linear-gradient(135deg, rgba(9,18,42,.84), rgba(18,5,34,.78));
  box-shadow: inset 0 0 24px rgba(0,180,255,.08), 0 0 24px rgba(0,180,255,.14);
}
.bos-live-module__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ff2d8d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.bos-live-module__title {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: 18px;
}
.bos-live-module__sub {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.56);
  font-size: 11px;
}
.bos-eq {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 16px;
}
.bos-eq i {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #00b4ff, #ff2d8d);
  animation: bosEq 1.1s ease-in-out infinite;
}
.bos-eq i:nth-child(2){ animation-delay:.12s; }
.bos-eq i:nth-child(3){ animation-delay:.24s; }
.bos-eq i:nth-child(4){ animation-delay:.36s; }
.bos-eq i:nth-child(5){ animation-delay:.48s; }

.bos-orbit-player {
  padding: 12px 14px;
  border: 1px solid rgba(139,0,255,.5);
  background:
    radial-gradient(circle at 12% 50%, rgba(0,180,255,.22), transparent 26%),
    linear-gradient(135deg, rgba(9,10,28,.9), rgba(25,5,38,.82));
  box-shadow: 0 0 26px rgba(139,0,255,.18), inset 0 0 24px rgba(255,45,141,.08);
}
.bos-orbit-player__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 82px;
  align-items: center;
  gap: 12px;
}
.bos-orbit-player__play {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d8d, #8b00ff);
  box-shadow: 0 0 18px rgba(255,45,141,.58), 0 0 34px rgba(0,180,255,.14);
}
.bos-orbit-player__play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.bos-orbit-player__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bos-orbit-player__meta span {
  color: #00b4ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.bos-orbit-player__meta strong {
  color: #fff;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bos-orbit-player__meta small {
  color: rgba(255,255,255,.56);
  font-size: 10px;
}
.bos-orbit-player__volume {
  display: grid;
  gap: 6px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
.bos-orbit-player__volume input {
  width: 78px;
  accent-color: #ff2d8d;
}
.bos-orbit-player__meter {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.bos-orbit-player__meter span {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #00b4ff, #ff2d8d, transparent);
  animation: bosStreamProgress 5.8s linear infinite;
}

/* ==================================================
   NAV
   ================================================== */

.bos-nav {
  display: flex;
  align-items: center;
  gap:14px;
  flex: 1;
  justify-content: center;

}

.bos-nav a{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-width:154px;
    height:48px;

    padding:0 24px;

    color:#f3f3f3;

    font-size:14px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.5px;

    text-decoration:none !important;

    border-radius:8px;

    background:rgba(18,10,28,.96);

    border:1px solid rgba(255,45,141,.35);

    transition:all .25s ease;
}

.bos-nav-row {
  position: relative;
  margin-top: 10px;
  padding: 11px 18px 13px;
  border-top: 1px solid rgba(255,45,141,.32);
}

.bos-nav-row::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff2d8d, #00b4ff, transparent);
  opacity: .78;
}
.bos-nav a i{

    color:#ff2d8d;

    font-size:16px;

    transition:.3s ease;
}

.bos-nav a:hover i{

    color:#ff7bc1;

    transform:scale(1.15);
}
.bos-nav a:hover{

    color:#fff;

    transform:translateY(-2px);

    border-color:#ff2d8d;

    box-shadow:
        0 0 15px rgba(255,45,141,.45),
        0 0 35px rgba(255,45,141,.25);

    background:
        linear-gradient(
            180deg,
            rgba(55,25,85,.95),
            rgba(20,10,35,.98)
        );
}
    .bos-nav .bos-nav-drop { position: relative; }
.bos-nav .bos-nav-drop > a::after {
  content: '▾';
  margin-left: 3px;
  font-size: 9px;
}
.bos-nav-drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: rgba(10,8,24,0.98);
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  padding: 6px 0;
  z-index: 999;
}
.bos-nav-drop:hover .bos-nav-drop-menu { display: block; }
.bos-nav-drop-menu a {
  display: block;
  padding: 8px 16px;
  border-radius: 0;
  border-bottom: none;
  color: rgba(255,255,255,0.6) !important;
}
.bos-nav-drop-menu a:hover { color: #fff !important; background: rgba(232,0,61,0.08); }

/* ON AIR BADGE */
.bos-onair {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.3);
  border-radius: 8px;
  padding: 7px 14px;
  flex-shrink: 0;
}
.bos-onair__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bos-pink2);
  box-shadow: 0 0 6px var(--bos-pink2);
  animation: bos-pulse 1.5s infinite;
}
@keyframes bos-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.bos-onair__text { font-size: 11px; font-weight: 800; color: var(--bos-pink2); letter-spacing: 1px; display: block; }
.bos-onair__count { font-size: 10px; color: rgba(255,255,255,0.45); display: block; }
.bos-headphone-btn {
  width: 34px; height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(232,0,61,0.3);
  background: rgba(232,0,61,0.06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none !important;
}
.bos-headphone-btn svg { width: 18px; height: 18px; color: var(--bos-pink); }

/* ==================================================
   HAMBURGER
   ================================================== */

.bos-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.bos-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
}

/* ==================================================
   MOBILE NAV
   ================================================== */

.bos-mobile-nav {
  display: none;
  flex-direction: column;
  background: rgba(8,5,18,0.99);
  border-bottom: 1px solid var(--bos-border);
  position: fixed;
  top: 70px;
  left: 0; right: 0;
  z-index: 999;
  padding: 12px 0;
}
.bos-mobile-nav.open { display: flex; }
.bos-mobile-nav a {
  padding: 10px 24px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-decoration: none !important;
}
.bos-mobile-nav a:hover { color: #fff; background: rgba(232,0,61,0.06); }

/* ==================================================
   HERO SECTION
   ================================================== */

.bos-hero{

    position:relative;

    min-height:620px;

    overflow:visible;

    background:var(--bos-bg);
}

.bos-hero::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 38%, rgba(0,180,255,.12), transparent 34%),
        radial-gradient(circle at 17% 48%, rgba(255,45,141,.12), transparent 25%),
        radial-gradient(circle at 83% 50%, rgba(255,211,106,.08), transparent 24%);
    opacity:.85;
}

/* HERO BACKGROUND */

.bos-hero-bg{

    position:absolute;

    inset:0;

    background-image:url('images/hero_bg.png');

    background-size:min(78%, 1400px);

    background-repeat:no-repeat;

    background-position:center center;

    opacity:1;

    z-index:1;
}

/* ==================================================
   HERO CONTENT
   ================================================== */

.bos-hero__inner{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1780px;

    margin:0 auto;

    min-height:620px;

    display:grid;

    grid-template-columns:330px minmax(820px, 1fr) 330px;

    gap:28px;

    align-items:stretch;

    padding:34px 34px 40px;
}

/* ==================================================
   LEFT SIDEBAR
   ================================================== */

.bos-hero__sidebar-left{

    position:relative;

    z-index:5;

    width:100%;

    display:flex;

    align-items:center;
}

/* ==================================================
   HERO CENTER
   ================================================== */

.bos-hero__main{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:1220px;

    margin:auto;

    background:rgba(10,5,20,.88);

    border:1px solid rgba(255,45,141,.25);

    border-radius:20px;

    padding:5px;

    backdrop-filter:blur(10px);

    overflow:hidden;

    box-shadow:
        0 0 20px rgba(255,45,141,.15),
        inset 0 0 30px rgba(0,180,255,.08);
}

.bos-hero__main::before,
.bos-hero__main::after{
    content:'';
    position:absolute;
    top:14%;
    bottom:14%;
    width:42px;
    border-radius:999px;
    opacity:.34;
    pointer-events:none;
    background:
        linear-gradient(180deg, transparent, rgba(255,45,141,.5), rgba(0,180,255,.42), transparent);
    filter:blur(10px);
    animation:bosSpeakerGlow 4.8s ease-in-out infinite;
    z-index:3;
}

.bos-hero__main::before{ left:-16px; }
.bos-hero__main::after{ right:-16px; animation-delay:1.35s; }

/* ==================================================
   HERO IMAGE
   ================================================== */

.bos-hero__image{

    width:100%;

    max-width:1200px;

    height:auto;

    display:block;

    position:relative;

    z-index:2;
}

/* ==================================================
   RIGHT SIDEBAR
   ================================================== */

.bos-hero__sidebar-right{

    position:relative;

    z-index:5;

    width:100%;

    display:flex;

    align-items:center;
}

/* ==================================================
   SIDE CARDS
   ================================================== */

.bos-sidecard{

    position:relative;

    width:100%;

    min-height:360px;

    overflow:hidden;

    background:
        linear-gradient(180deg, rgba(14,8,30,.92), rgba(7,5,17,.92));

    border:
        1px solid rgba(255,45,141,.25);

    border-radius:18px;

    padding:22px;

    backdrop-filter:blur(10px);

    box-shadow:
        0 0 20px rgba(255,45,141,.15),
        inset 0 0 36px rgba(0,180,255,.04);
}

.bos-sidecard::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.12) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 28%, rgba(0,180,255,.14) 0 1px, transparent 2px),
        radial-gradient(circle at 55% 76%, rgba(255,45,141,.12) 0 1px, transparent 2px);
    background-size:110px 110px, 160px 160px, 130px 130px;
    opacity:.34;
}

.bos-sidecard::after{
    content:'';
    position:absolute;
    left:-45%;
    right:-45%;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,45,141,.9), rgba(0,180,255,.65), transparent);
    animation:bosCardScan 6s linear infinite;
    opacity:.55;
}

.bos-sidecard__head{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.bos-sidecard__eyebrow{
    color:rgba(255,255,255,.44);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

/* CARD TITLE */

.bos-sidecard__title{

    font-size:16px;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:0;

    color:#ff2d8d;

    text-transform:uppercase;
}

.bos-sidecard__link,
.bos-team-status{
    color:#00b4ff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.9px;
    text-transform:uppercase;
    text-decoration:none !important;
    white-space:nowrap;
}

.bos-team-status{
    color:#00e676;
}

.bos-team-status i{
    font-size:7px;
    margin-right:5px;
    filter:drop-shadow(0 0 6px rgba(0,230,118,.85));
}

/* CARD CONTENT */

.bos-sidecard__content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:14px;
}

.bos-next-show{
    position:relative;
    padding:18px;
    border:1px solid rgba(255,45,141,.28);
    border-radius:14px;
    background:
        radial-gradient(circle at 85% 12%, rgba(0,180,255,.12), transparent 38%),
        rgba(5,4,13,.68);
    box-shadow:inset 0 0 22px rgba(255,45,141,.06);
}

.bos-next-show__label{
    color:#ff7bc1;
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

.bos-next-show__time{
    margin-top:8px;
    color:#fff;
    font-size:34px;
    line-height:1;
    font-weight:950;
    text-shadow:0 0 20px rgba(255,45,141,.45);
}

.bos-next-show__name{
    margin-top:7px;
    color:rgba(255,255,255,.82);
    font-size:12px;
    font-weight:800;
}

.bos-next-show__host{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:14px;
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.bos-mini-avatar{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:12px;
    font-weight:900;
    background:linear-gradient(135deg, #e8003d, #00b4ff);
    box-shadow:0 0 16px rgba(255,45,141,.38);
}

.bos-schedule-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

/* SENDEPLAN ITEMS */

.bos-sp-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:11px 0;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.bos-sp-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    box-shadow:0 0 10px rgba(255,255,255,.08);
    flex:0 0 auto;
}

.bos-sp-dot.is-live{
    background:#ff2d8d;
    box-shadow:0 0 12px rgba(255,45,141,.85);
    animation:bosLivePulse 1.8s ease-in-out infinite;
}

.bos-sp-time{

    color:#ff2d8d;

    font-size:12px;

    font-weight:700;
}

.bos-sp-show{

    color:#fff;

    font-size:14px;

    font-weight:600;
}

.bos-team-orbit{
    position:relative;
    width:138px;
    height:138px;
    margin:2px auto 6px;
    border-radius:50%;
    border:1px solid rgba(0,180,255,.22);
    background:
        radial-gradient(circle, rgba(255,45,141,.16), transparent 46%),
        radial-gradient(circle at 58% 42%, rgba(0,180,255,.15), transparent 48%);
    box-shadow:
        inset 0 0 24px rgba(0,180,255,.08),
        0 0 24px rgba(255,45,141,.13);
}

.bos-team-orbit::before,
.bos-team-orbit::after{
    content:'';
    position:absolute;
    inset:13px;
    border-radius:50%;
    border:1px dashed rgba(255,45,141,.42);
    animation:bosOrbitSpin 18s linear infinite;
}

.bos-team-orbit::after{
    inset:30px;
    border-color:rgba(255,211,106,.32);
    animation-duration:13s;
    animation-direction:reverse;
}

.bos-team-orbit__core{
    position:absolute;
    inset:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:18px;
    font-weight:950;
    letter-spacing:.8px;
    background:linear-gradient(135deg, rgba(232,0,61,.95), rgba(0,180,255,.9));
    box-shadow:0 0 28px rgba(255,45,141,.45);
}

.bos-team-members{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.bos-team-member{
    min-height:64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.035);
}

.bos-team-member span{
    color:#ff2d8d;
    font-size:18px;
    font-weight:950;
    line-height:1;
}

.bos-team-member strong{
    color:rgba(255,255,255,.76);
    font-size:11px;
    font-weight:800;
}

.bos-team-copy{
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.55;
}

.bos-team-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:38px;
    padding:0 16px;
    color:#fff !important;
    text-decoration:none !important;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-size:11px;
    font-weight:900;
    border:1px solid rgba(255,45,141,.38);
    border-radius:12px;
    background:linear-gradient(135deg, rgba(232,0,61,.18), rgba(0,180,255,.10));
    box-shadow:0 0 18px rgba(255,45,141,.13);
}

.bos-team-btn:hover{
    border-color:rgba(255,45,141,.7);
    box-shadow:0 0 22px rgba(255,45,141,.28);
}

@keyframes bosSpeakerGlow{
    0%,100%{ opacity:.22; transform:translateY(-8px); }
    50%{ opacity:.48; transform:translateY(10px); }
}

@keyframes bosCardScan{
    0%{ transform:translateX(-22%); }
    100%{ transform:translateX(22%); }
}

@keyframes bosLivePulse{
    0%,100%{ transform:scale(1); opacity:.8; }
    50%{ transform:scale(1.35); opacity:1; }
}

@keyframes bosOrbitSpin{
    to{ transform:rotate(360deg); }
}
.bos-hero__left{

    max-width:520px;
}

/* TITLES */

.bos-hero__title{

    margin-bottom:12px;

    line-height:.95;
}

.bos-hero__title-top{

    font-size:26px;

    font-weight:700;

    color:rgba(255,255,255,.85);

    display:block;

    margin-bottom:4px;
}

.bos-hero__title-main{

    font-size:64px;

    font-weight:900;

    text-transform:uppercase;

    background:
        linear-gradient(
            135deg,
            var(--bos-pink2),
            var(--bos-pink),
            var(--bos-purple)
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.bos-hero__sub{

    font-size:12px;

    color:rgba(255,255,255,.55);

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;
}

.bos-hero__claim{

    font-family:Georgia,serif;

    font-style:italic;

    color:var(--bos-pink2);

    font-size:18px;
}
/* ==================================================
   HERO BUTTON
   ================================================== */

.bos-hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:25px;

    padding:14px 26px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ff2d8d,
            #8b00ff
        );

    color:#fff;
    text-decoration:none !important;

    font-weight:700;
    letter-spacing:.5px;

    box-shadow:
        0 0 20px rgba(255,45,141,.35);

    transition:.25s ease;
}

.bos-hero-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 30px rgba(255,45,141,.55);
}

/* ==================================================
   BEATBOT PANEL
   ================================================== */

.bos-hero__beatbot {
  width: 288px;
  background: rgba(10,8,24,0.88);
  border-left: 1px solid rgba(139,0,255,0.2);
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  flex-shrink: 0;
}
.bos-beatbot__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.bos-beatbot__avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,0,255,0.25), rgba(232,0,61,0.15));
  border: 2px solid rgba(139,0,255,0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bos-beatbot__avatar svg { width: 42px; height: 42px; }
.bos-beatbot__name { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.bos-beatbot__badge {
  background: rgba(232,0,61,0.2);
  color: var(--bos-pink2);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 1px;
  display: inline-block;
}
.bos-beatbot__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.bos-beatbot__list li {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.bos-beatbot__list li::before {
  content: '✓';
  color: var(--bos-green);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.bos-beatbot__btn {
  background: linear-gradient(135deg, var(--bos-pink2), var(--bos-pink));
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 11px 16px;
  border-radius: 7px;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.bos-beatbot__btn svg { width: 14px; height: 14px; }
.bos-beatbot__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
}
.bos-beatbot__online { display: flex; align-items: center; gap: 5px; color: var(--bos-green); }
.bos-beatbot__online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bos-green); }
.bos-beatbot__wave { display: flex; align-items: center; gap: 2px; }
.bos-beatbot__wave span {
  display: block; width: 2px;
  background: var(--bos-pink);
  border-radius: 1px;
  animation: bos-wave 1s infinite;
}
.bos-beatbot__wave span:nth-child(1){height:5px;animation-delay:.0s;}
.bos-beatbot__wave span:nth-child(2){height:10px;animation-delay:.1s;}
.bos-beatbot__wave span:nth-child(3){height:14px;animation-delay:.2s;}
.bos-beatbot__wave span:nth-child(4){height:10px;animation-delay:.3s;}
.bos-beatbot__wave span:nth-child(5){height:6px;animation-delay:.15s;}
.bos-beatbot__wave span:nth-child(6){height:9px;animation-delay:.05s;}
.bos-beatbot__wave span:nth-child(7){height:12px;animation-delay:.25s;}
.bos-beatbot__wave span:nth-child(8){height:7px;animation-delay:.35s;}
@keyframes bos-wave { 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(.3);} }

/* ==================================================
   PLAYER BAR
   ================================================== */

.bos-player {
  background: rgba(8,5,18,0.97);
  border-top: 1px solid rgba(232,0,61,0.12);
  border-bottom: 1px solid rgba(232,0,61,0.08);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 76px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.bos-player__play {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bos-pink2), var(--bos-pink));
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(232,0,61,0.4);
  transition: transform .15s;
}
.bos-player__play:hover { transform: scale(1.05); }
.bos-player__play svg { width: 18px; height: 18px; color: #fff; margin-left: 2px; }
.bos-player__art {
  width: 46px; height: 46px;
  border-radius: 7px;
  background: linear-gradient(135deg, #1a0830, #0d1540);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bos-player__art svg { width: 22px; height: 22px; color: var(--bos-pink); }
.bos-player__info { flex: 1; min-width: 120px; }
.bos-player__now { font-size: 9px; color: var(--bos-pink2); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.bos-player__track { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bos-player__meta { font-size: 10px; color: var(--bos-muted); }
.bos-player__div { width: 1px; height: 40px; background: rgba(255,255,255,0.07); flex-shrink: 0; }
.bos-player__moderator { text-align: center; flex-shrink: 0; }
.bos-player__mod-label { font-size: 9px; color: var(--bos-muted); letter-spacing: 1px; display: block; }
.bos-player__mod-name { font-size: 13px; font-weight: 700; color: var(--bos-blue); display: block; }
.bos-wunschbox-btn {
  background: rgba(232,0,61,0.1);
  border: 1px solid rgba(232,0,61,0.3);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 9px 16px;
  border-radius: 7px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
  text-decoration: none !important;
}
.bos-wunschbox-btn:hover { background: rgba(232,0,61,0.2); }
.bos-wunschbox-btn svg { width: 14px; height: 14px; color: var(--bos-pink); }
.bos-player__vol { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.bos-player__vol svg { width: 15px; height: 15px; color: var(--bos-muted); }
.bos-player__vol-bar {
  width: 72px; height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.bos-player__vol-fill { width: 60%; height: 100%; background: linear-gradient(90deg, var(--bos-pink), var(--bos-pink2)); border-radius: 2px; }
.bos-player__listeners { text-align: center; flex-shrink: 0; }
.bos-player__listeners svg { width: 13px; height: 13px; color: var(--bos-pink); vertical-align: -2px; }
.bos-player__count { font-size: 20px; font-weight: 900; display: block; }
.bos-player__count-label { font-size: 9px; color: var(--bos-muted); display: block; }
.bos-player__downloads { display: flex; gap: 5px; flex-shrink: 0; margin-left: auto; }
.bos-dl-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 5px 9px;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none !important;
}
.bos-dl-btn:hover { background: rgba(255,255,255,0.08); }
.bos-dl-btn__icon { font-size: 16px; display: block; margin-bottom: 2px; }
.bos-dl-btn__name { font-size: 8px; font-weight: 700; color: #fff; display: block; }
.bos-dl-btn__label { font-size: 7px; font-weight: 600; color: var(--bos-muted); letter-spacing: 1px; text-transform: uppercase; display: block; }

/* ==================================================
   FEATURE STRIP
   ================================================== */

.bos-features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(232,0,61,0.1);
  border-bottom: 1px solid rgba(232,0,61,0.1);
}
.bos-feature {
  background: rgba(8,5,18,0.92);
  border-right: 1px solid rgba(232,0,61,0.1);
  padding: 20px 16px 18px;
  cursor: pointer;
  transition: background .2s;
}
.bos-feature:last-child { border-right: none; }
.bos-feature:hover { background: rgba(232,0,61,0.04); }
.bos-feature__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(232,0,61,0.25);
  background: rgba(232,0,61,0.06);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.bos-feature__icon svg { width: 22px; height: 22px; }
.bos-feature__icon--blue { border-color: rgba(0,180,255,0.3); background: rgba(0,180,255,0.06); }
.bos-feature__icon--green { border-color: rgba(0,230,118,0.3); background: rgba(0,230,118,0.06); }
.bos-feature__title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.bos-feature__desc { font-size: 10px; color: rgba(255,255,255,0.45); line-height: 1.55; margin-bottom: 10px; }
.bos-feature__link { font-size: 10px; font-weight: 700; color: var(--bos-pink); letter-spacing: .3px; text-decoration: none !important; }
.bos-feature__link:hover { color: var(--bos-pink2); }
.bos-feature__link--blue { color: var(--bos-blue); }
.bos-feature__link--blue:hover { color: #4dcfff; }
.bos-feature__link--green { color: var(--bos-green); }
.bos-feature__link--green:hover { color: #5effaa; }

/* ==================================================
   SLIDER BANNER
   ================================================== */

.bos-slider {
  background: linear-gradient(135deg, #050212 0%, #0a0520 40%, #080318 100%);
  border-top: 1px solid rgba(139,0,255,0.15);
  border-bottom: 1px solid rgba(139,0,255,0.12);
  height: 138px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.bos-slider::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 50% 50%, rgba(139,0,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.bos-slider__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 14px;
  z-index: 2;
  transition: all .2s;
}
.bos-slider__arrow:hover { background: rgba(255,255,255,0.1); }
.bos-slider__arrow svg { width: 18px; height: 18px; color: rgba(255,255,255,0.45); }
.bos-slider__center { flex: 1; text-align: center; z-index: 2; }
.bos-slider__sup { font-size: 9px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 1px; }
.bos-slider__title-big {
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--bos-pink2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bos-slider__title-script {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  background: linear-gradient(135deg, var(--bos-pink2), var(--bos-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bos-slider__date { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 4px; }
.bos-slider__dots { display: flex; gap: 4px; justify-content: center; margin-top: 7px; }
.bos-slider__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15); cursor: pointer; }
.bos-slider__dot.active { background: var(--bos-pink); width: 18px; border-radius: 3px; }
.bos-slider__live { text-align: center; padding-right: 20px; z-index: 2; flex-shrink: 0; }
.bos-slider__live-big { font-size: 24px; font-weight: 900; color: #fff; }
.bos-slider__live-247 { font-size: 28px; font-weight: 900; color: rgba(255,255,255,0.35); line-height: .9; }
.bos-slider__live-label { font-size: 10px; font-weight: 700; color: var(--bos-pink2); letter-spacing: 1px; }

/* ==================================================
   SENDEPLAN HEUTE
   ================================================== */

.bos-sendeplan {
  background: rgba(6,4,15,0.95);
  padding: 26px 24px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  border-top: 1px solid rgba(232,0,61,0.08);
}
.bos-sendeplan__icon {
  width: 88px; height: 88px;
  background: linear-gradient(135deg, rgba(232,0,61,0.08), rgba(139,0,255,0.08));
  border-radius: 14px;
  border: 1px solid rgba(232,0,61,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bos-sendeplan__icon svg { width: 52px; height: 52px; }
.bos-sendeplan__inner { flex: 1; }
.bos-sendeplan__title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.85); margin-bottom: 10px; }
.bos-sp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bos-sp-row:last-child { border-bottom: none; }
.bos-sp-time { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); width: 110px; flex-shrink: 0; }
.bos-sp-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--bos-pink), var(--bos-purple)); flex-shrink: 0; }
.bos-sp-show { font-size: 12px; font-weight: 700; flex: 1; }
.bos-sp-show.bos-active { color: var(--bos-pink2); }
.bos-sp-host { font-size: 11px; color: var(--bos-muted); flex-shrink: 0; }
.bos-sp-link {
  background: linear-gradient(135deg, var(--bos-pink2), var(--bos-pink));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 11px 22px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  align-self: center;
  flex-shrink: 0;
  text-decoration: none !important;
  border: none;
  transition: opacity .2s;
}
.bos-sp-link:hover { opacity: .88; color: #fff; }
.bos-sp-link svg { width: 13px; height: 13px; }

/* ==================================================
   FOOTER
   ================================================== */

.bos-footer {
  background: linear-gradient(180deg, #06030f, #040210);
  border-top: 2px solid rgba(232,0,61,0.15);
  padding: 40px 24px 0;
}
.bos-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 36px;
}
.bos-footer__logo-name { font-size: 22px; font-weight: 900; margin-bottom: 2px; }
.bos-footer__logo-name span { color: var(--bos-pink); }
.bos-footer__logo-sub { font-size: 8px; color: rgba(255,255,255,0.25); letter-spacing: 2px; text-transform: uppercase; }
.bos-footer__claim { font-family: Georgia, serif; font-style: italic; color: var(--bos-pink2); font-size: 13px; margin: 8px 0 12px; line-height: 1.4; }
.bos-footer__socials { display: flex; gap: 6px; }
.bos-footer__socials a {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: rgba(232,0,61,0.07);
  border: 1px solid rgba(232,0,61,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  text-decoration: none !important;
}
.bos-footer__socials a:hover { background: var(--bos-pink); border-color: var(--bos-pink); }
.bos-footer__socials svg { width: 14px; height: 14px; color: rgba(255,255,255,0.45); }
.bos-footer__socials a:hover svg { color: #fff; }
.bos-footer__col-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bos-pink);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(232,0,61,0.18);
  margin-bottom: 12px;
}
.bos-footer__col a {
  display: flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,0.42) !important;
  font-size: 11px;
  padding: 4px 0;
  transition: color .2s, padding-left .15s;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.bos-footer__col a:hover { color: var(--bos-pink) !important; padding-left: 4px; }
.bos-footer__col a svg { width: 10px; height: 10px; flex-shrink: 0; }
.bos-partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bos-partner {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  text-decoration: none !important;
  transition: all .2s;
  display: block;
}
.bos-partner:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.bos-partner__logo { font-size: 17px; font-weight: 900; display: block; }
.bos-partner__name { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; display: block; color: rgba(255,255,255,0.35); }
.bos-partner--rme .bos-partner__logo { color: #e8003d; }
.bos-partner--rsos .bos-partner__logo { color: #00e676; }
.bos-partner--php .bos-partner__logo { color: #8b00ff; }
.bos-partner--dj .bos-partner__logo { color: #ffd600; }
.bos-footer__bottom {
  border-top: 1px solid rgba(232,0,61,0.1);
  padding: 14px 0;
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.2);
}
.bos-footer__bottom a { color: rgba(232,0,61,0.5) !important; text-decoration: none !important; transition: color .2s; }
.bos-footer__bottom a:hover { color: var(--bos-pink) !important; }

/* ==================================================
   PANELS (openside/opencard)
   ================================================== */

.bos-panel { background: rgba(12,9,24,0.85); border: 1px solid var(--bos-border); border-radius: var(--bos-radius); margin-bottom: 12px; overflow: hidden; }
.bos-panel__title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); padding: 10px 14px; background: rgba(232,0,61,0.06); border-bottom: 1px solid var(--bos-border); }
.bos-panel__body { padding: 12px 14px; }
.bos-card { background: rgba(12,9,24,0.85); border: 1px solid var(--bos-border); border-radius: var(--bos-radius-lg); margin-bottom: 16px; overflow: hidden; }
.bos-card__title { font-size: 14px; font-weight: 700; padding: 14px 18px; border-bottom: 1px solid var(--bos-border); }
.bos-card__body { padding: 16px 18px; }

/* ==================================================
   SIDEBARS
   ================================================== */

#left-side, #right-side { padding: 16px 12px; }

/* ==================================================
   SCROLL TO TOP
   ================================================== */

#bos-scroll-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bos-pink), var(--bos-purple));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(232,0,61,0.5);
  transition: opacity .3s, transform .3s;
  opacity: 0; pointer-events: none;
}
#bos-scroll-top.visible { opacity: 1; pointer-events: auto; }
#bos-scroll-top:hover { transform: translateY(-3px); box-shadow: 0 0 28px rgba(232,0,61,0.7); }
#bos-scroll-top svg { width: 22px; height: 22px; color: #fff; }

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 1500px) {

  .bos-hero__inner {
      grid-template-columns:290px minmax(0, 1fr) 290px;
      gap:20px;
      padding:28px 24px 34px;
  }

  .bos-sidecard {
      min-height:330px;
      padding:18px;
  }

  .bos-next-show__time {
      font-size:28px;
  }

  .bos-team-orbit {
      width:118px;
      height:118px;
  }

  .bos-team-orbit__core {
      inset:36px;
      font-size:15px;
  }
}

@media (max-width: 1100px) {

  .bos-hero {
      min-height:auto;
  }

  .bos-hero__inner {
      min-height:auto;
      grid-template-columns:260px minmax(0, 1fr) 230px;
      gap:20px;
      padding:20px 24px 30px;
  }

  .bos-hero__main {
      max-width:100%;
  }

  .bos-sidecard {
      min-height:300px;
  }

  .bos-team-members {
      grid-template-columns:1fr;
  }

  .bos-hero__beatbot {
      width:260px;
  }

  .bos-hero__title-main {
      font-size:50px;
  }

  .bos-features {
      grid-template-columns:repeat(3,1fr);
  }

  .bos-footer__grid {
      grid-template-columns:1fr 1fr 1fr;
  }

}   

@media (max-width: 900px) {

  .bos-hero__inner {
      grid-template-columns:1fr;
      gap:18px;
      padding:18px 16px 26px;
  }

  .bos-hero__sidebar-left,
  .bos-hero__sidebar-right {
      max-width:560px;
      margin:0 auto;
  }

  .bos-sidecard {
      min-height:auto;
  }

  .bos-team-members {
      grid-template-columns:1fr 1fr;
  }

  .bos-hero__beatbot {
      display:none;
  }

  .bos-hero__title-main {
      font-size:42px;
  }

  .bos-nav {
      display:none;
  }

  .bos-hamburger {
      display:flex;
  }

  .bos-features {
      grid-template-columns:repeat(2,1fr);
  }

  .bos-sendeplan {
      flex-direction:column;
  }

  .bos-sp-link {
      width:100%;
      justify-content:center;
  }

  .bos-footer__grid {
      grid-template-columns:1fr 1fr;
      gap:24px;
  }
}
/* ==================================================
   BOSR CUSTOM HEADER SYSTEM
   ================================================== */

.bos-header{
    position:sticky;
    top:0;
    z-index:1000;
}

.bos-header-top-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:15px;
}

/* ==================================================
   LOGIN PANEL
   ================================================== */

.bos-login-panel{
    display:block;

    position:absolute;
    top:120px;
    right:22px;

    width:340px;
    padding:15px;

    background:rgba(10,5,20,.98);

    border:1px solid #ff2d8d;
    border-radius:16px;

    box-shadow:
        0 0 15px rgba(255,45,141,.35),
        0 0 30px rgba(255,45,141,.20);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

    z-index:99999;
}

.bos-login-panel.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
/* ==================================================
   COMMUNITY LOGIN
   ================================================== */

.bos-community-btn{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:12px;

    width:340px;

    padding:12px 22px;

    background:rgba(20,10,30,.90);

    border:1px solid #ff2d8d;
    border-radius:14px;

    text-decoration:none !important;

    box-shadow:
        0 0 10px rgba(255,45,141,.45),
        0 0 20px rgba(255,45,141,.20);

    transition:.3s;
}

.bos-community-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 15px rgba(255,45,141,.75),
        0 0 35px rgba(255,45,141,.45);
}

.bos-community-icon{
    font-size:26px;
    color:#ff2d8d;
}

.bos-community-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.bos-community-text span{
    color:#ffffff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
}

.bos-community-text small{
    color:#ff2d8d;
    font-size:12px;
}

/* ==================================================
   NAVIGATION BAR
   ================================================== */

.bos-nav-row{
    position:sticky;
    top:160px;
    overflow:hidden;

    z-index:999;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:80px;

    backdrop-filter:blur(10px);

    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,45,141,.15);

    box-shadow:
        0 2px 12px rgba(255,45,141,.18);

background:
    linear-gradient(
        180deg,
        rgba(18,10,28,.98),
        rgba(11,7,21,.96)
    );
}

/* ==================================================
   NEON-LINE OBEN + UNTEN
   ================================================== */

.bos-nav-row::before,
.bos-nav-row::after{

    content:'';

    position:absolute;

    left:-100%;
    width:100%;
    height:1px;

    z-index:5;

    background:linear-gradient(
        90deg,
        transparent,
        #ff2d8d,
        #ff7bc1,
        #ff2d8d,
        transparent
    );

    box-shadow:
        0 0 8px #ff2d8d,
        0 0 16px rgba(255,45,141,.6);

  
}

.bos-nav-row::before{
    top:0;
    animation:bosNavGlowTop 30s linear infinite;
}

.bos-nav-row::after{
    bottom:0;
    animation:bosNavGlowBottom 30s linear infinite;
}

.bos-nav a:hover{

    color:#fff;

    border-color:#ff2d8d;

    background:
        linear-gradient(
            180deg,
            rgba(70,25,95,.95),
            rgba(30,10,45,.98)
        );

    box-shadow:
        0 0 18px rgba(255,45,141,.45),
        0 0 35px rgba(255,45,141,.20);

    transform:translateY(-2px);
}

.bos-nav a.active{

    color:#fff;

    border:1px solid rgba(255,45,141,.35);

    background:rgba(18,10,28,.96);

    box-shadow:none;
}

@keyframes bosNavGlowTop{

    0%{
        left:-100%;
    }

    100%{
        left:100%;
    }
}

@keyframes bosNavGlowBottom{

    0%{
        left:100%;
    }

    100%{
        left:-100%;
    }
}


/* ==================================================
   BEATBOT TEMPORÄR DEAKTIVIERT
   Für spätere Navigation-Integration behalten
   ================================================== */

.bos-hero__beatbot{
    display:none !important;
}

/* ==========================================
   BOSR FLOATING HEART HEADPHONES
   ========================================== */

.bosr-floating-headphones{

    position:absolute;

    top:56%;
    left:65%;

    z-index:4;

    pointer-events:none;

    opacity:0;

    transform:translate(-50%, -50%) scale(.78);

    animation:
        bosrHeadphonesIntro .9s ease-out 1.05s forwards,
        bosrHeadphonesFloat 5.2s ease-in-out 1.95s infinite;
}

/* ==========================================
   HEADPHONE IMAGE
   ========================================== */

.bosr-floating-headphones img{

    width:clamp(120px, 13vw, 190px);
    height:auto;

    filter:
        drop-shadow(0 0 18px rgba(255,0,120,.38))
        drop-shadow(0 0 38px rgba(0,180,255,.26));

    animation:bosrHeadphonesPulse 2.6s ease-in-out 2.1s infinite;
}

/* ==========================================
   FLOATING ANIMATION
   ========================================== */

@keyframes bosrHeadphonesIntro{

    0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(.78);
    }

    100%{
        opacity:.9;
        transform:translate(-50%, -50%) scale(1);
    }
}

@keyframes bosrHeadphonesFloat{

    0%, 100%{
        opacity:.9;
        transform:translate(-50%, -50%) scale(1);
    }

    50%{
        opacity:1;
        transform:translate(-50%, calc(-50% - 13px)) scale(1.035);
    }
}

@keyframes bosrHeadphonesPulse{

    0%, 100%{
        filter:
            drop-shadow(0 0 18px rgba(255,0,120,.38))
            drop-shadow(0 0 38px rgba(0,180,255,.26));
    }

    50%{
        filter:
            drop-shadow(0 0 32px rgba(255,0,120,.68))
            drop-shadow(0 0 62px rgba(0,180,255,.42));
    }
}

/* ==========================================
   NEON PULSE
   ========================================== */

@keyframes bosrPulse{

    0%{
        filter:
            drop-shadow(0 0 20px rgba(255,0,120,.35))
            drop-shadow(0 0 45px rgba(0,180,255,.25));
    }

    50%{
        filter:
            drop-shadow(0 0 40px rgba(255,0,120,.75))
            drop-shadow(0 0 80px rgba(0,180,255,.45));
    }

    100%{
        filter:
            drop-shadow(0 0 20px rgba(255,0,120,.35))
            drop-shadow(0 0 45px rgba(0,180,255,.25));
    }
}

/* ==================================================
   MOBILE FLOATING HEADPHONES
   ================================================== */

@media (max-width: 900px){

    .bosr-floating-headphones{

        top:58%;
        left:66%;
    }

    .bosr-floating-headphones img{

        width:clamp(88px, 24vw, 135px);
    }
}

@media (prefers-reduced-motion: reduce){
    .bosr-floating-headphones,
    .bosr-floating-headphones img{
        animation:none;
    }

    .bosr-floating-headphones{
        opacity:.9;
        transform:translate(-50%, -50%) scale(1);
    }
}

/* ==================================================
   BOSR HEADER 2026 - from session 019e75da
   ================================================== */
.bos-header{height:auto!important;display:block!important;padding:18px 18px 0!important;overflow:visible!important;}
.bos-header-shell{perspective:1000px;}
.bos-login-zone{position:relative;display:flex;justify-content:flex-end;perspective:1000px;}
.bos-community-btn{width:min(100%,360px)!important;min-height:72px!important;border-radius:8px!important;justify-content:flex-start!important;background:linear-gradient(135deg,rgba(20,10,38,.94),rgba(7,5,18,.94))!important;border:1px solid rgba(255,45,141,.86)!important;box-shadow:0 0 24px rgba(255,45,141,.22),inset 0 0 22px rgba(0,180,255,.05)!important;}
.bos-login-panel{position:absolute!important;top:calc(100% + 28px)!important;right:0!important;width:min(360px,calc(100vw - 48px))!important;padding:16px!important;z-index:30!important;border:1px solid rgba(255,45,141,.86)!important;border-radius:8px!important;background:linear-gradient(180deg,rgba(11,7,28,.98),rgba(4,2,12,.98))!important;box-shadow:0 20px 60px rgba(0,0,0,.52),0 0 28px rgba(255,45,141,.28)!important;opacity:0!important;visibility:visible!important;pointer-events:none!important;transform:rotateX(-92deg) translateY(-8px)!important;transform-origin:top center!important;transition:opacity .18s ease,transform .5s cubic-bezier(.18,.85,.28,1.08)!important;backface-visibility:hidden;}
.bos-login-panel::before{content:'';position:absolute;left:14px;right:14px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#ff2d8d,#00b4ff,transparent);box-shadow:0 0 18px rgba(255,45,141,.78);}
.bos-login-panel.open,.bos-login-zone.open .bos-login-panel{opacity:1!important;pointer-events:auto!important;transform:rotateX(0deg) translateY(0)!important;}
.bos-login-panel__title{margin:0 0 12px;color:#fff;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:1px;}
.bos-login-panel__fallback{display:block;padding:10px 0;color:#fff!important;text-decoration:none!important;border-bottom:1px solid rgba(255,255,255,.08);}
.bos-nav-row{position:relative!important;top:auto!important;margin-top:10px!important;padding:11px 18px 13px!important;background:rgba(5,2,12,.42)!important;border-top:1px solid rgba(255,45,141,.32)!important;border-bottom:none!important;box-shadow:none!important;}
.bos-mobile-nav{top:100%!important;}
@keyframes bosEq{0%,100%{height:6px;opacity:.55}50%{height:16px;opacity:1}}
@keyframes bosStreamProgress{0%{transform:translateX(-95%)}100%{transform:translateX(240%)}}
@media (max-width: 1320px){.bos-header-shell{grid-template-columns:minmax(260px,1fr) minmax(280px,1fr);}.bos-login-zone{justify-content:stretch}.bos-community-btn{width:100%!important}}
@media (max-width: 920px){.bos-header{padding:14px 12px 0!important}.bos-header-shell{grid-template-columns:1fr!important;gap:14px}.bos-brand{justify-content:center}.bos-brand__copy{text-align:center}.bos-login-panel{left:50%!important;right:auto!important;transform:translateX(-50%) rotateX(-92deg) translateY(-8px)!important}.bos-login-panel.open,.bos-login-zone.open .bos-login-panel{transform:translateX(-50%) rotateX(0deg) translateY(0)!important}}
@media (prefers-reduced-motion:reduce){.bos-eq i,.bos-orbit-player__meter span{animation:none!important}.bos-login-panel{transition:none!important}}

/* ==================================================
   BOSR HEADER POLISH - requested fixes 2026-05-30
   ================================================== */
.bos-header{
  padding:18px 18px 0!important;
  overflow:visible!important;
}

.bos-header-shell{
  grid-template-columns:minmax(330px, 440px) minmax(560px, 1fr) minmax(320px, 370px)!important;
  gap:18px!important;
  align-items:stretch!important;
  min-height:118px!important;
  overflow:visible!important;
}

.bos-brand{
  align-self:center!important;
  justify-content:flex-start!important;
  min-height:92px!important;
}

.bos-brand__logo{
  width:min(392px, 100%)!important;
  max-width:none!important;
  transform:scaleX(1.08)!important;
  transform-origin:left center!important;
  filter:drop-shadow(0 0 18px rgba(255,45,141,.62)) drop-shadow(0 0 28px rgba(0,180,255,.16))!important;
}

.bos-brand__copy{
  display:none!important;
}

.bos-live-player-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(210px, .9fr) minmax(300px, 1.15fr) minmax(150px, .55fr);
  align-items:stretch;
  gap:0;
  min-height:104px;
  overflow:hidden;
  border:1px solid rgba(255,45,141,.48);
  border-radius:8px;
  background:
    radial-gradient(circle at 14% 20%, rgba(0,180,255,.20), transparent 28%),
    radial-gradient(circle at 72% 80%, rgba(255,45,141,.16), transparent 34%),
    linear-gradient(135deg, rgba(8,11,30,.96), rgba(20,5,35,.94));
  box-shadow:0 0 28px rgba(139,0,255,.24), inset 0 0 30px rgba(0,180,255,.08);
}

.bos-live-player-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,45,141,.18), transparent 22%, transparent 74%, rgba(0,180,255,.14));
  opacity:.9;
}

.bos-live-player-card .bos-live-module,
.bos-live-player-card .bos-orbit-player{
  min-height:104px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.bos-live-player-card .bos-live-module{
  padding:18px 18px 16px!important;
}

.bos-live-player-card .bos-live-module__title{
  font-size:21px!important;
  margin-top:12px!important;
  text-shadow:0 0 18px rgba(255,45,141,.46);
}

.bos-live-player-card .bos-live-module__sub,
.bos-live-player-card .bos-orbit-player__meta small{
  color:rgba(255,255,255,.68)!important;
  font-size:11px!important;
}

.bos-live-player-card .bos-orbit-player{
  display:flex;
  align-items:center;
  padding:15px 16px!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
}

.bos-live-player-card .bos-orbit-player__row{
  width:100%;
  grid-template-columns:58px minmax(0,1fr) 92px!important;
  gap:14px!important;
}

.bos-live-player-card .bos-orbit-player__play{
  width:58px!important;
  height:58px!important;
}

.bos-live-player-card .bos-orbit-player__meta strong{
  font-size:18px!important;
}

.bos-live-visuals{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:5px;
  padding:10px;
  border-left:1px solid rgba(255,255,255,.08);
}

.bos-live-visuals img{
  width:100%;
  height:100%;
  min-height:38px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.10);
  filter:saturate(1.16) contrast(1.06);
  box-shadow:0 0 14px rgba(255,45,141,.16);
}

.bos-live-visuals img:first-child{
  grid-row:span 2;
}

.bos-login-zone{
  z-index:1200!important;
  align-self:center!important;
}

.bos-community-btn{
  min-height:84px!important;
  padding:16px 24px!important;
  border-radius:8px!important;
}

.bos-community-text span{
  font-size:15px!important;
  line-height:1.18!important;
  text-shadow:0 0 12px rgba(255,255,255,.22);
}

.bos-community-text small{
  margin-top:4px!important;
  font-size:13px!important;
  font-weight:800!important;
}

.bos-login-panel{
  top:calc(100% + 18px)!important;
  width:min(390px, calc(100vw - 48px))!important;
  min-height:255px!important;
  padding:22px!important;
  z-index:2000!important;
  border-radius:8px!important;
  font-size:14px!important;
  line-height:1.45!important;
}

.bos-login-panel,
.bos-login-panel table,
.bos-login-panel td,
.bos-login-panel p,
.bos-login-panel div{
  color:rgba(255,255,255,.88)!important;
}

.bos-login-panel a{
  color:#ff2d8d!important;
  font-weight:800!important;
  text-decoration:none!important;
}

.bos-login-panel a:hover{
  color:#fff!important;
}

.bos-login-panel input[type="text"],
.bos-login-panel input[type="password"],
.bos-login-panel input[type="email"]{
  width:100%!important;
  min-height:40px!important;
  margin:6px 0 10px!important;
  padding:10px 12px!important;
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,45,141,.30)!important;
  border-radius:7px!important;
}

.bos-login-panel input[type="submit"],
.bos-login-panel button,
.bos-login-panel .button{
  min-height:40px!important;
  padding:10px 14px!important;
  color:#fff!important;
  font-weight:900!important;
  border:0!important;
  border-radius:7px!important;
  background:linear-gradient(135deg, #ff2d8d, #287fc5)!important;
  box-shadow:0 0 18px rgba(255,45,141,.28)!important;
}

.bos-nav-row{
  width:calc(100% - 430px)!important;
  max-width:980px!important;
  min-height:72px!important;
  margin:10px 430px 0 auto!important;
  padding:10px 18px 12px!important;
  border:1px solid rgba(255,45,141,.32)!important;
  border-radius:0 0 8px 8px!important;
  overflow:hidden!important;
  z-index:40!important;
}

.bos-nav{
  justify-content:center!important;
}

@media (max-width: 1320px){
  .bos-header-shell{
    grid-template-columns:minmax(280px, .9fr) minmax(430px, 1.1fr)!important;
  }

  .bos-live-player-card{
    grid-template-columns:minmax(220px, .95fr) minmax(300px, 1.05fr)!important;
  }

  .bos-live-visuals{
    display:none!important;
  }

  .bos-login-zone{
    grid-column:1 / -1;
    justify-content:flex-end!important;
  }

  .bos-nav-row{
    width:100%!important;
    max-width:none!important;
    margin:10px 0 0!important;
  }
}

@media (max-width: 920px){
  .bos-header-shell{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }

  .bos-brand__logo{
    width:min(360px, 92vw)!important;
    transform:none!important;
  }

  .bos-live-player-card{
    grid-template-columns:1fr!important;
  }

  .bos-live-player-card .bos-orbit-player{
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
  }

  .bos-login-zone{
    justify-content:stretch!important;
  }

  .bos-login-panel{
    min-height:275px!important;
  }
}

/* ==================================================
   BOSR COMPACT AI PLAYER REFINEMENT - 2026-05-30
   ================================================== */
.bos-header{
  padding:14px 14px 0!important;
  background:linear-gradient(180deg, rgba(4,2,12,.96), rgba(5,2,14,.80) 78%, rgba(5,2,12,.24))!important;
  border-bottom:1px solid rgba(255,45,141,.14)!important;
}

.bos-header-shell{
  grid-template-columns:minmax(285px, 360px) minmax(520px, 1fr) minmax(290px, 330px)!important;
  min-height:104px!important;
  padding:12px 14px!important;
  gap:14px!important;
  border:1px solid rgba(255,45,141,.18)!important;
  border-radius:8px!important;
  background:linear-gradient(90deg, rgba(5,2,12,.66), rgba(13,7,30,.42), rgba(5,2,12,.62))!important;
  box-shadow:0 12px 44px rgba(0,0,0,.42), inset 0 0 28px rgba(0,180,255,.035)!important;
}

.bos-header-shell::before{
  content:'';
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:8px;
  padding:1px;
  background:linear-gradient(115deg, transparent 0%, rgba(0,180,255,.05) 20%, rgba(255,45,141,.48) 48%, rgba(0,180,255,.24) 56%, transparent 76%);
  background-size:260% 260%;
  opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:bosHeaderCalmTrace 10s linear infinite;
}

.bos-brand{
  min-height:78px!important;
}

.bos-brand__logo{
  width:min(315px, 100%)!important;
  transform:scaleX(1.05)!important;
}

.bos-live-player-card{
  grid-template-columns:minmax(205px, .88fr) minmax(330px, 1.25fr) 122px!important;
  min-height:88px!important;
  border-color:rgba(255,45,141,.24)!important;
  background:
    radial-gradient(circle at 43% 50%, rgba(139,0,255,.18), transparent 30%),
    linear-gradient(90deg, rgba(12,6,32,.96), rgba(7,11,31,.94) 44%, rgba(24,5,30,.92))!important;
  box-shadow:0 0 22px rgba(255,45,141,.12), inset 0 0 34px rgba(0,180,255,.045)!important;
}

.bos-live-player-card .bos-live-module,
.bos-live-player-card .bos-orbit-player{
  min-height:88px!important;
}

.bos-live-player-card .bos-live-module{
  padding:13px 15px!important;
}

.bos-live-player-card .bos-live-module__top{
  font-size:9px!important;
  letter-spacing:1.5px!important;
}

.bos-live-player-card .bos-live-module__title{
  margin-top:8px!important;
  font-size:18px!important;
}

.bos-live-player-card .bos-orbit-player{
  padding:12px 14px!important;
}

.bos-live-player-card .bos-orbit-player__row{
  grid-template-columns:64px minmax(0,1fr) 92px!important;
}

.bos-live-player-card .bos-orbit-player__play{
  position:relative!important;
  width:62px!important;
  height:62px!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:radial-gradient(circle at 34% 28%, #ff5bd1, #8b2cff 48%, #41106d 100%)!important;
  box-shadow:0 0 18px rgba(255,45,141,.46), 0 0 34px rgba(139,0,255,.24), inset 0 0 18px rgba(255,255,255,.18)!important;
}

.bos-live-player-card .bos-orbit-player__play::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(255,45,141,.52);
  border-top-color:rgba(0,180,255,.68);
  border-right-color:rgba(255,255,255,.18);
  filter:drop-shadow(0 0 9px rgba(139,0,255,.60));
  animation:bosPlayerHaloSpin 7s linear infinite;
}

.bos-live-player-card .bos-orbit-player__play::after{
  content:'';
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,0,255,.18), transparent 62%);
  animation:bosPlayerSoftPulse 3.8s ease-in-out infinite;
  z-index:-1;
}

.bos-live-player-card .bos-orbit-player__play svg{
  width:24px!important;
  height:24px!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.45));
}

.bos-live-player-card .bos-orbit-player__meta span{
  color:#00d7ff!important;
  letter-spacing:1.4px!important;
}

.bos-live-player-card .bos-orbit-player__meta strong{
  font-size:16px!important;
}

.bos-live-cover{
  position:relative;
  z-index:2;
  align-self:center;
  justify-self:center;
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 0 22px rgba(139,0,255,.24), inset 0 0 18px rgba(255,45,141,.10);
}

.bos-live-cover img{
  width:68px;
  height:68px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  filter:saturate(1.18) contrast(1.08);
}

.bos-live-cover__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,45,141,.48);
  border-left-color:rgba(0,180,255,.72);
  border-bottom-color:rgba(255,255,255,.12);
  animation:bosLiveCoverSpin 12s linear infinite;
  box-shadow:0 0 14px rgba(255,45,141,.22);
}

.bos-live-visuals{
  display:none!important;
}

.bos-community-btn{
  min-height:68px!important;
  padding:13px 20px!important;
  border-color:rgba(255,255,255,.70)!important;
  box-shadow:0 0 16px rgba(255,45,141,.18), inset 0 0 18px rgba(0,180,255,.04)!important;
}

.bos-community-text span{
  font-size:13px!important;
}

.bos-login-panel{
  top:calc(100% + 14px)!important;
}

.bos-nav-row{
  min-height:62px!important;
  margin-top:7px!important;
  border-color:rgba(255,45,141,.22)!important;
  background:linear-gradient(180deg, rgba(9,4,20,.72), rgba(5,2,12,.62))!important;
}

@keyframes bosHeaderCalmTrace{
  0%{background-position:0% 50%;opacity:.32}
  45%{opacity:.62}
  100%{background-position:260% 50%;opacity:.32}
}

@keyframes bosPlayerHaloSpin{
  to{transform:rotate(360deg)}
}

@keyframes bosPlayerSoftPulse{
  0%,100%{opacity:.46;transform:scale(.94)}
  50%{opacity:.86;transform:scale(1.05)}
}

@keyframes bosLiveCoverSpin{
  to{transform:rotate(-360deg)}
}

@media (max-width:1320px){
  .bos-header-shell{
    grid-template-columns:minmax(260px,.86fr) minmax(430px,1.14fr)!important;
  }

  .bos-live-player-card{
    grid-template-columns:minmax(190px,.9fr) minmax(300px,1.1fr) 105px!important;
  }

  .bos-live-cover{
    width:74px;
    height:74px;
  }

  .bos-live-cover img{
    width:60px;
    height:60px;
  }
}

@media (max-width:920px){
  .bos-brand__logo{
    width:min(315px, 90vw)!important;
    transform:none!important;
  }

  .bos-live-player-card{
    grid-template-columns:1fr!important;
  }

  .bos-live-cover{
    display:none!important;
  }
}

/* ==================================================
   BOSR LIVE COVER SQUARE AVATAR - 2026-05-30
   Radiostatus-compatible 150x150 member images
   ================================================== */
.bos-header-shell{
  grid-template-columns:minmax(285px, 360px) minmax(650px, 1fr) minmax(290px, 330px)!important;
  min-height:168px!important;
}

.bos-live-player-card{
  grid-template-columns:minmax(205px, .82fr) minmax(330px, 1.08fr) 174px!important;
  min-height:150px!important;
  align-items:center!important;
}

.bos-live-player-card .bos-live-module,
.bos-live-player-card .bos-orbit-player{
  min-height:132px!important;
}

.bos-live-cover{
  width:150px!important;
  height:150px!important;
  border-radius:10px!important;
  padding:0!important;
  overflow:visible!important;
  background:linear-gradient(145deg, rgba(255,45,141,.12), rgba(0,180,255,.07))!important;
  box-shadow:0 0 20px rgba(255,45,141,.20), 0 0 30px rgba(0,180,255,.08), inset 0 0 18px rgba(255,255,255,.04)!important;
}

.bos-live-cover img{
  width:150px!important;
  height:150px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:rgba(5,2,12,.82)!important;
}

.bos-live-cover__ring{
  inset:-5px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,45,141,.42)!important;
  border-left-color:rgba(0,180,255,.62)!important;
  border-bottom-color:rgba(255,255,255,.14)!important;
  animation:bosLiveCoverFrame 9s linear infinite!important;
}

@keyframes bosLiveCoverFrame{
  0%{filter:hue-rotate(0deg);opacity:.52;transform:translateX(0) translateY(0)}
  25%{opacity:.82;transform:translateX(2px) translateY(0)}
  50%{filter:hue-rotate(22deg);opacity:.64;transform:translateX(2px) translateY(2px)}
  75%{opacity:.82;transform:translateX(0) translateY(2px)}
  100%{filter:hue-rotate(0deg);opacity:.52;transform:translateX(0) translateY(0)}
}

@media (max-width:1320px){
  .bos-header-shell{
    grid-template-columns:minmax(260px,.8fr) minmax(560px,1.2fr)!important;
  }

  .bos-live-player-card{
    grid-template-columns:minmax(190px,.78fr) minmax(300px,1fr) 164px!important;
    min-height:150px!important;
  }

  .bos-live-cover,
  .bos-live-cover img{
    width:150px!important;
    height:150px!important;
  }
}

@media (max-width:920px){
  .bos-header-shell{
    min-height:0!important;
  }

  .bos-live-cover{
    display:grid!important;
    margin:0 auto 14px!important;
  }

  .bos-live-player-card{
    grid-template-columns:1fr!important;
    padding-top:14px!important;
  }
}

/* ==================================================
   BOSR LIVE COVER USER INFO AVATAR SOURCE - 2026-05-30
   Uses PHP-Fusion display_avatar() like user_info_panel
   ================================================== */
.bos-live-cover .bos-live-cover__avatar,
.bos-live-cover img.bos-live-cover__avatar,
.bos-live-cover > img{
  display:block!important;
  width:150px!important;
  max-width:150px!important;
  height:150px!important;
  max-height:150px!important;
  border-radius:8px!important;
  object-fit:cover!important;
  object-position:center center!important;
}

.bos-live-cover .img-rounded,
.bos-live-cover .rounded,
.bos-live-cover img[style]{
  border-radius:8px!important;
}