:root{
  --bg0:#070A10;
  --bg1:#0A1020;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.70);

  /* Darker blue accent (your request) */
  --accent:#1E3A8A;        /* deep blue */
  --accent2:#2563EB;       /* highlight */
  --warm:#F59E0B;          /* orange */
  --warm2:#EF4444;         /* red */

  --shadow: 0 22px 65px rgba(0,0,0,.55);
  --radius:18px;
  --radiusLeft:12px;       /* slightly less rounded for left column */
  --leftBg: rgba(30,58,138,.12);
  --leftBorder: rgba(37,99,235,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  font-size: 14px; /* denser overall UI without browser zoom */
  background: radial-gradient(1200px 600px at 20% 0%, rgba(37,99,235,.18), transparent 60%),
              radial-gradient(900px 500px at 95% 5%, rgba(245,158,11,.14), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;

  /* make scrollbars unobtrusive */
  scrollbar-color: rgba(255,255,255,.16) rgba(255,255,255,.05);
  scrollbar-width: thin;
}

/* WebKit scrollbar styling */
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background: rgba(255,255,255,.04)}
*::-webkit-scrollbar-thumb{background: rgba(255,255,255,.16); border-radius:999px; border:2px solid rgba(0,0,0,0)}
*::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,.24)}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.glow{position:absolute; width:560px; height:560px; filter: blur(50px); opacity:.55; mix-blend-mode:screen;}
.glow-a{left:-120px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.65), transparent 55%);}
.glow-b{right:-160px; top:-220px; background: radial-gradient(circle at 35% 35%, rgba(245,158,11,.55), transparent 55%);}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  /* denser default (closer to browser zoom -2 ticks at 1920x1080) */
  padding:8px 12px;
  background: rgba(7,10,16,.65);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{display:flex; gap:12px; align-items:center; cursor:pointer; user-select:none}
.logo{
  width:42px;height:42px;border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(37,99,235,.25), rgba(30,58,138,.22));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.12);
  font-weight:800;
}
.brandName{font-weight:800; letter-spacing:.2px}
.brandSub{font-size:12px; color:var(--muted)}

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

.searchWrap{
  margin-left:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

/* Library search: a bit darker so it pops like the topbar search */
.libSearchWrap{
  margin-left:0;
  background: rgba(7,10,16,.55);
  border-color: rgba(255,255,255,.12);
}
.libSearchWrap:hover{background: rgba(7,10,16,.65)}

/* Library grid */
.libGrid{
  display:grid;
  /* Full HD: 4 columns */
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 1400px){
  .libGrid{grid-template-columns: repeat(3, minmax(0,1fr));}
}
@media (max-width: 1200px){
  .libGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 820px){
  .libGrid{grid-template-columns: 1fr;}
}
.libCard{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.libCard:hover{background:rgba(255,255,255,.05)}
.libCover{
  width:64px; height:64px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.libBody{min-width:0; display:flex; flex-direction:column; gap:6px; flex:1;}
.libTitle{font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.libSub{font-size:11px; color:rgba(234,240,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.libActions{margin-top:auto; display:flex; gap:8px;}

/* Playlists (B): 2-column list grid */
.plGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){
  .plGrid{grid-template-columns: 1fr;}
}
.search{
  width:280px;
  max-width:28vw;
  border:none;
  outline:none;
  background:transparent;
  color:rgba(234,240,255,.92);
  font: inherit;
}
.search::placeholder{color:rgba(234,240,255,.55)}
.searchBtn{width:40px; height:40px}
.toplink{
  color:var(--muted); text-decoration:none;
  padding:10px 12px; border-radius:12px;
  border:1px solid transparent;
}
.toplink:hover{color:var(--text); border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.toplink.isActive{color:var(--text); border-color:rgba(37,99,235,.25); background:rgba(37,99,235,.10)}

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

.cartBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(234,240,255,.92);
  text-decoration:none;
}
.cartBtn:hover{background:rgba(255,255,255,.06)}
.cartBadge{
  position:absolute;
  right:-6px;
  top:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900;
  background: rgba(34,197,94,.95);
  color:#05120a;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(34,197,94,.18);
}
.lang{display:flex; gap:8px}
.chip{
  width:42px; height:38px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}

/* flags: use SVG backgrounds so they always render (no emoji font dependency) */
.chip.flag{font-size:0; background-size:cover; background-position:center;}
.chip.flag-at{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203%202'%3E%3Crect%20width='3'%20height='2'%20fill='%23ED2939'/%3E%3Crect%20y='0.666'%20width='3'%20height='0.668'%20fill='%23FFFFFF'/%3E%3C/svg%3E");
}
.chip.flag-gb{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%3E%3CclipPath%20id='t'%3E%3Cpath%20d='M0,0%20v30%20h60%20v-30%20z'/%3E%3C/clipPath%3E%3Cg%20clip-path='url(%23t)'%3E%3Cpath%20d='M0,0%20v30%20h60%20v-30%20z'%20fill='%23012169'/%3E%3Cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23FFFFFF'%20stroke-width='6'/%3E%3Cpath%20d='M0,0%20L60,30%20M60,0%20L0,30'%20stroke='%23C8102E'%20stroke-width='4'/%3E%3Cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23FFFFFF'%20stroke-width='10'/%3E%3Cpath%20d='M30,0%20v30%20M0,15%20h60'%20stroke='%23C8102E'%20stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
}
.chip:active{transform:translateY(1px)}

.shell{
  display:grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap:12px;
  padding:14px;
}

.left{display:flex; flex-direction:column; gap:14px}

/* Make the whole left column feel like a distinct "rail" */
.left{
  padding:12px;
  border-radius: var(--radiusLeft);
  background: linear-gradient(180deg, var(--leftBg), rgba(255,255,255,.02));
  border: 1px solid var(--leftBorder);
  box-shadow: 0 22px 65px rgba(0,0,0,.35);
}

/* Panels: keep overall rounded design, but less round on the left column */
.panel{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:12px;
}
.left .panel{border-radius: var(--radiusLeft); background: rgba(255,255,255,.05); border-color: rgba(37,99,235,.18)}
.panelTitle{font-weight:700; color:rgba(234,240,255,.85); margin-bottom:10px}
.panelTitleRow{display:flex; align-items:center; justify-content:space-between}
.navBtns{display:flex; gap:8px}
.navBtn{padding:8px 10px; border-radius:14px; min-height:36px}
.navPanel{padding:12px}
.divider{height:1px; background:rgba(255,255,255,.10); margin:12px 0}
.stack{display:flex; flex-direction:column; gap:10px}

/* glimmer / 3D buttons you want to press */
.btn{
  font: inherit;
  color: var(--text);
  cursor:pointer;
  border-radius: 16px;
  /* slightly lower height for better scaling at 1920×1080 */
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}

/* Sidebar gets a functional compact button sizing */
.left .btn{
  padding: 8px 10px;
  border-radius: 14px;
  box-shadow:
    0 12px 26px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 14px rgba(0,0,0,.22);
}
.left .btn-3d{min-height:36px}
.left .navBtn{min-height:34px; padding:6px 10px; border-radius:12px}

/* ensure common glyph buttons (＋/−/🛒) look centered */
button.iconBtn{font-size:16px}
button.iconBtn[title="In den Warenkorb"]{font-size:15px}
button.iconBtn[title="Zur Playlist"],
button.iconBtn[title="Merken"],
button.iconBtn[title="+"]{font-size:18px}
.btn::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(260px 120px at 18% 18%, rgba(255,255,255,.25), transparent 60%);
  opacity:.65;
  pointer-events:none;
}
.btn::after{
  content:"";
  position:absolute; left:-60%; top:-40%;
  width:60%; height:140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(14deg);
  opacity:.0;
  transition: opacity .25s ease, left .45s ease;
}
.btn:hover::after{opacity:.9; left:120%}
.btn:active{transform: translateY(2px); box-shadow:
  0 10px 25px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 -8px 14px rgba(0,0,0,.28);
}
.btn-3d{min-height:40px}
.btn-primary{
  border-color: rgba(37,99,235,.35);
  background: linear-gradient(180deg, rgba(37,99,235,.24), rgba(30,58,138,.16));
  box-shadow:
    0 18px 45px rgba(37,99,235,.18),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.22);
}

.seg{display:flex; gap:8px}
.segBtn{
  flex:1;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  cursor:pointer;
}
.left .segBtn{padding:8px 8px; border-radius:12px; font-size:12px}
.segBtn.isOn{color:var(--text); background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.30)}
.hint{margin-top:10px; font-size:12px; color:var(--muted)}

/* compact chips for registration options */
.chipRow{display:flex; gap:10px; flex-wrap:wrap}
.chipBtn{
  font: inherit;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(234,240,255,.88);
  cursor:pointer;
}
.chipBtn:hover{background:rgba(255,255,255,.06)}
.chipBtn:active{transform:translateY(1px)}
.left .chipBtn{padding:7px 9px}

.pill{
  display:block; text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.pill:hover{background: rgba(255,255,255,.05)}

.legal{display:flex; justify-content:space-between; font-size:12px}
.legal a{color:rgba(234,240,255,.65); text-decoration:none}
.legal a:hover{color:var(--text)}

.content{min-width:0; display:flex; flex-direction:column; gap:14px}
.banner{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(37,99,235,.10));
  box-shadow: var(--shadow);
}
.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.bannerText{color:rgba(234,240,255,.85)}

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
/* Discover: swap emphasis so the big content sits on the right */
.discoverGrid{
  grid-template-columns: .8fr 1.2fr;
}
.fullwidth{grid-column: 1 / -1}

/* square-ish reward badge card */
.squareBadge{
  aspect-ratio: 1 / 1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.albumRow{display:flex; gap:10px}
.album{
  flex:1;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:10px;
}
.albumCover{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(37,99,235,.18));
  box-shadow: 0 18px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.albumTitle{margin-top:10px; font-weight:800}
.albumMeta{margin-top:2px; font-size:12px; color:rgba(234,240,255,.62)}

.badgeRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.badgePill{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(234,240,255,.86);
  font-size:11px;
  font-weight:700;
}

/* Profile eye-catcher badges */
.badgeGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:12px}
.badgeCard{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transform: translateZ(0);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.badgeCard::after{
  content:"";
  position:absolute; left:-70%; top:-60%;
  width:60%; height:220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: rotate(16deg);
  opacity:0;
  transition: opacity .25s ease, left .45s ease;
}
.badgeCard:hover{
  transform: scale(1.08);
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.28);
}
.badgeCard:hover::after{opacity:1; left:140%}
.badgeCard.isExpanded{
  transform: scale(1.10);
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
}
.badgeTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badgeTitle{font-weight:900}
.badgeMini{font-size:12px; color:rgba(234,240,255,.70); margin-top:6px}
.badgeMore{margin-top:10px; font-size:12px; color:rgba(234,240,255,.82); line-height:1.35}

.profileLayout{display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap:14px}

/* Settings sidebar */
.settingsLayout{display:grid; grid-template-columns: 280px minmax(0,1fr); gap:14px}
.settingsMenu{display:flex; flex-direction:column; gap:8px}
.settingsItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(234,240,255,.86);
  text-decoration:none;
  cursor:pointer;
}
.settingsItem:hover{background:rgba(255,255,255,.05)}
.settingsItem.isOn{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.25); color:rgba(234,240,255,.95)}
.settingsBadge{font-size:11px; color:rgba(234,240,255,.65)}

/* Rewards cosmetics */
.cosGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
.cosItem{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:12px;
}
.framePreview{width:64px; height:64px; border-radius:999px; border:3px solid rgba(37,99,235,.55); background:rgba(255,255,255,.03); display:grid; place-items:center}
.framePreview.warm{border-color: rgba(245,158,11,.65)}
.framePreview.pink{border-color: rgba(236,72,153,.65)}
.cosTitle{font-weight:900; margin-top:10px}
.cosMeta{font-size:12px; color:rgba(234,240,255,.65); margin-top:2px}

@media (max-width: 980px){
  .settingsLayout{grid-template-columns:1fr}
}
.sidePanel{
  position:sticky;
  top:84px;
  align-self:start;
  height: fit-content;
}

.socialLinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.socialLink{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(234,240,255,.86);
  text-decoration:none;
  font-weight:700;
  font-size:12px;
}
.socialLink:hover{background:rgba(255,255,255,.06)}
@media (max-width: 980px){
  .profileLayout{grid-template-columns:1fr}
  .sidePanel{position:static}
  .badgeGrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
.subSection{margin-top:14px}
.list{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.listItem{
  display:flex; gap:12px; align-items:center;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.listItem:hover{background:rgba(255,255,255,.05)}
.miniCover{width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(37,99,235,.16));}
.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.cardHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cardTitle{font-weight:800}
.cardMeta{color:var(--muted); font-size:12px}

.track{display:flex; gap:10px; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.track:hover{background:rgba(255,255,255,.05)}

.socialWrap{display:flex; flex-direction:column; gap:14px}
.socialLayout{display:grid; grid-template-columns: 260px minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start}
/* bottom: forum wider, last posts narrower */
.socialBottom{display:grid; grid-template-columns: 1.6fr .8fr .7fr; gap:14px; align-items:start}

/* target: keep Forum visible without scrolling (1920x1080-ish) */
:root{--socialPaneH: 480px;}

.filterRail{position:sticky; top:84px; align-self:start; height: var(--socialPaneH); overflow:hidden}
.filterRail .badgeRow{max-height:140px; overflow:hidden}
.postGrid{display:grid; grid-template-columns: 1fr; gap:12px}
.postScroll{overflow-y: scroll; scrollbar-gutter: stable both-edges; padding-right:4px; min-height:0; max-height: calc(var(--socialPaneH) - 68px)}

/* two middle panes are equal-height cards (no stacking) */
.paneH{height: var(--socialPaneH); min-height:0}
.postCard{padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03)}
.postHead{display:flex; gap:10px; align-items:center}
.postTitle{font-weight:900; margin-top:8px; font-size:13px}
.postMeta{color:rgba(234,240,255,.65); font-size:11px; margin-top:3px}
.postActions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.postActions .btn{padding:9px 10px; border-radius:14px; min-height:38px}
.postActions .iconBtn{width:38px; height:38px}

/* smaller/scrollable social badge (clip wall) */
.clipWall{display:grid; grid-template-columns: 1fr; gap:12px}
.clipWallScroll{max-height: var(--socialPaneH); overflow-y: scroll; scrollbar-gutter: stable both-edges; padding-right:4px}
.clipCard{border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03)}
.clipThumb{height:160px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(245,158,11,.18)), radial-gradient(circle at 70% 30%, rgba(37,99,235,.20), transparent 60%); position:relative}
.clipThumb .play{position:absolute; left:14px; bottom:14px}
.clipBody{padding:12px}

@media (max-width: 1200px){
  .socialLayout{grid-template-columns: 260px minmax(0,1fr)}
}
@media (max-width: 980px){
  .socialLayout{grid-template-columns: 1fr}
  .filterRail{position:static}
}
.cover{
  width:46px; height:46px; border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.35), rgba(245,158,11,.12));
  border:1px solid rgba(255,255,255,.12);
}
.tTitle{font-weight:700; font-size:13px}
.tSub{color:var(--muted); font-size:11px; margin-top:2px}
.trackActions{margin-left:auto; display:flex; gap:8px; align-items:center}
.iconBtn{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  line-height:1;
  padding:0;
}

.avatarRow{display:flex; flex-wrap:wrap; gap:10px}

/* Spotify-like horizontal artist rail */
.rail{
  display:flex;
  gap:14px;
  overflow:auto;
  padding:10px 6px 4px;
  scroll-snap-type: x mandatory;
}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10); border-radius:999px}
.railItem{
  min-width:92px;
  scroll-snap-align:start;
  text-align:left;
}
.railAvatar{
  width:72px;
  height:72px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(37,99,235,.16));
  box-shadow: 0 18px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.5px;
  cursor:pointer;
}
.railName{margin-top:8px; font-size:12px; font-weight:700; color:rgba(234,240,255,.90)}
.railRole{margin-top:2px; font-size:11px; color:rgba(234,240,255,.62)}

.avatar{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.avImg{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(37,99,235,.22), rgba(30,58,138,.12));
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
}

.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}

.chartRow{display:flex; align-items:center; gap:12px; padding:10px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.chartRow:hover{background:rgba(255,255,255,.05)}
.rank{width:34px; text-align:center; font-weight:900; color:rgba(234,240,255,.90)}
.chartMeta{font-size:12px; color:rgba(234,240,255,.62)}
.smallBtn{padding:9px 10px; border-radius:14px; min-height:38px}
.kpi{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.kpiLabel{font-size:12px; color:var(--muted)}
.kpiValue{font-size:20px; font-weight:800; margin-top:4px}

/* Level / XP */
.xpRow{display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap}
.xpBar{height:10px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); overflow:hidden; flex:1; min-width:160px}
.xpFill{height:100%; width:62%; background: linear-gradient(90deg, rgba(37,99,235,.65), rgba(245,158,11,.45));}
.xpMeta{font-size:11px; color:rgba(234,240,255,.65)}

.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.78);
  backdrop-filter: blur(10px);
  color: rgba(234,240,255,.90);
  box-shadow: var(--shadow);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.isOn{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* Erklär-Bär (floating button is deprecated; we place the bear as a normal button in the left nav panel) */
.bearBtn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(37,99,235,.18), rgba(255,255,255,.03));
  box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  color:rgba(234,240,255,.92);
  cursor:pointer;
}
.bearBtn:hover{background: linear-gradient(180deg, rgba(37,99,235,.24), rgba(255,255,255,.04));}
.bearBtn:active{transform: translateY(2px)}
.bearText{font-weight:900; letter-spacing:.1px}
.bearIcon{display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); overflow:hidden}
.bearSvg{display:block}

#bearBtn_old{display:none !important}

/* subtle mascot animation: raise paw + snap spark + questionmark bob */
@keyframes bearArm{
  0%,60%,100%{transform:rotate(0deg) translate(0,0)}
  70%{transform:rotate(-18deg) translate(-2px,-4px)}
  80%{transform:rotate(-6deg) translate(-1px,-2px)}
}
@keyframes bearSpark{
  0%,68%,100%{transform:scale(0); opacity:0}
  72%{transform:scale(1.0); opacity:1}
  78%{transform:scale(0.6); opacity:.0}
}
@keyframes bearQ{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

.bearBtn .bearSvg #arm{transform-origin: 116px 96px; animation: bearArm 2.6s ease-in-out infinite}
.bearBtn .bearSvg #spark{transform-origin: 142px 94px; animation: bearSpark 2.6s ease-in-out infinite}
.bearBtn .bearSvg #qmark{transform-origin: 108px 22px; animation: bearQ 1.8s ease-in-out infinite}

@keyframes micBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}
.bearBtn .bearSvg #mic{transform-origin: 125px 124px; animation: micBob 1.8s ease-in-out infinite}

.bearPanel{
  position:fixed;
  inset:0;
  z-index:60;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.bearPanel.isOn{opacity:1; pointer-events:auto}
.bearPanelInner{
  position:absolute;
  right:18px;
  bottom:74px;
  width:360px;
  max-width: calc(100vw - 36px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,32,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.bearHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(37,99,235,.16), rgba(245,158,11,.10));
}
.bearTitle{font-weight:900; font-size:16px}
.bearMeta{font-size:12px; color:rgba(234,240,255,.70); margin-top:2px}
.bearBody{padding:14px; display:flex; flex-direction:column; gap:12px}

@media (max-width: 980px){
  .topnav{display:none}
  .shell{grid-template-columns: 1fr;}
}

/* Pricing (3 tiers) */
.pricingGrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 1200px){.pricingGrid{grid-template-columns:1fr;}}
.pricingCard{border-radius:22px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:14px; box-shadow: var(--shadow); position:relative; overflow:hidden}
.pricingCard.isHot{border-color: rgba(37,99,235,.28); background: rgba(37,99,235,.08)}
.pricingCard.isHot::before{content:"Empfohlen"; position:absolute; top:12px; right:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size:11px; font-weight:900}
.pricingTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.pricingName{font-weight:900; font-size:18px}
.pricingTag{color:rgba(234,240,255,.65); font-size:12px; margin-top:2px}
.pricingPrice{font-weight:900; font-size:22px}
.pricingPrice span{font-weight:700; font-size:12px; color:rgba(234,240,255,.65); margin-left:6px}
.pricingBullets{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.pbullet{color:rgba(234,240,255,.86); font-size:12px}

/* ============ AUTH (fullscreen) ============ */
body.authMode{
  overflow:hidden;
}
body.authMode .topbar,
body.authMode .playerBar{
  display:none !important;
}

/* keep main container alive (route renders inside .shell). just hide the sidebar + banner */
body.authMode .shell{grid-template-columns: 1fr; padding:0;}
body.authMode aside.left{display:none !important;}
body.authMode #underConstruction{display:none !important;}
body.authMode .content{padding:0;}
body.authMode #route{min-height:100vh;}

.authScreen{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:36px 18px;
}
.authBg{position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1400px 800px at 30% 0%, rgba(37,99,235,.24), transparent 60%), linear-gradient(180deg, #050814, #070A10 55%, #08112a);}
.authAurora{position:absolute; filter: blur(55px); opacity:.7; mix-blend-mode:screen;}
.authAurora.a{width:720px; height:560px; left:-120px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.75), transparent 60%);} 
.authAurora.b{width:620px; height:520px; right:-160px; top:-180px; background: radial-gradient(circle at 35% 35%, rgba(16,185,129,.55), transparent 62%);} 
.authAurora.c{width:620px; height:520px; left:35%; bottom:-240px; background: radial-gradient(circle at 35% 35%, rgba(245,158,11,.22), transparent 62%);} 

.authCenter{display:grid; grid-template-columns: minmax(0, 520px) 340px; gap:22px; align-items:center;}
@media (max-width: 980px){ .authCenter{grid-template-columns:1fr; gap:14px;} }

.authCard{
  position:relative;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.authCard::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:8px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(37,99,235,.22), rgba(16,185,129,.18), rgba(255,255,255,.05));
  opacity:.85;
}
.authBrand{display:flex; gap:12px; align-items:center; padding-top:4px}
.authTitle{font-weight:900; font-size:18px; letter-spacing:.2px}
.authSub{color:rgba(234,240,255,.70); font-size:12px; margin-top:2px}

.authKnobRow{display:flex; justify-content:center; margin:14px 0 10px}
.authKnob{
  width:92px; height:92px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(0,0,0,.24));
  box-shadow: 0 24px 70px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -18px 28px rgba(0,0,0,.30);
  cursor:pointer;
  position:relative;
}
.authKnob::after{
  content:"";
  position:absolute; inset:10px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.35);
  box-shadow: 0 0 0 6px rgba(16,185,129,.06);
}
.authKnobInner{display:grid; place-items:center; width:100%; height:100%; font-weight:900; font-size:24px; color:rgba(234,240,255,.92)}
.authKnob:active{transform: translateY(2px)}

.authCountdownRow{text-align:center; margin-bottom:10px}
.authCountdownLabel{color:rgba(234,240,255,.78); font-size:12px}
.authCountdown{font-weight:900; font-size:26px; letter-spacing:.6px; margin-top:4px}
.authCountdownMeta{color:rgba(234,240,255,.58); font-size:11px; margin-top:2px}

.authTabs{display:flex; gap:10px; margin-top:12px}
.authTab{flex:1; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(234,240,255,.70); cursor:pointer}
.authTab.isOn{background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.30); color:rgba(234,240,255,.95)}

.authPane{margin-top:12px}
.authLabel{font-weight:900; margin-bottom:8px}
.authRow{display:flex; gap:10px}
.authStack{display:flex; flex-direction:column; gap:10px}
.authInput{flex:1; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(7,10,16,.55); color: rgba(234,240,255,.92); outline:none; font: inherit}
.authInput::placeholder{color:rgba(234,240,255,.55)}
.authHint{margin-top:10px; font-size:12px; color:rgba(234,240,255,.65)}

.authFooter{display:flex; gap:10px; align-items:center; margin-top:14px}
.authMini{margin-left:auto; font-size:11px; color:rgba(234,240,255,.55)}

/* Snowflake / benefits */
.authSnow{display:flex; flex-wrap:wrap; gap:10px; align-content:start; justify-content:flex-start}
.snowChip{padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color:rgba(234,240,255,.88); font-weight:800; font-size:12px}

/* Clock ticks */
.authClock{position:absolute; inset:-10px; pointer-events:none;}
.authClock .tick{
  position:absolute;
  left:50%; top:50%;
  width:4px; height:18px;
  background: rgba(234,240,255,.12);
  border-radius:999px;
  transform-origin: 2px 220px;
  transform: translate(-50%,-50%) rotate(calc(var(--i) * 30deg));
  box-shadow: 0 0 0 1px rgba(37,99,235,.10);
}

@media (max-width: 980px){
  .authClock{display:none}
}