:root{
  --uiScale: 1;

  --bg0:#070A10;
  --bg1:#0A1020;

  /* Cleaner/less "badgey" UI defaults */
  --card:rgba(255,255,255,.04);
  --card2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
  --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 18px 45px rgba(0,0,0,.45);
  --radius:18px;
  --radiusLeft:12px;       /* slightly less rounded for left column */
  --leftBg: rgba(30,58,138,.08);
  --leftBorder: rgba(37,99,235,.16);
}

*{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-color: var(--bg0);
  background-image:
              radial-gradient(1400px 740px at 18% 0%, rgba(37,99,235,.22), transparent 62%),
              radial-gradient(1000px 560px at 92% 6%, rgba(245,158,11,.16), transparent 62%),
              radial-gradient(900px 520px at 45% 110%, rgba(168,85,247,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
  background-repeat: no-repeat;
  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:300;
  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}
.envBadge{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(255,120,0,.18);
  border:1px solid rgba(255,160,60,.28);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

/* Hard guard: never show STAGING badge on early */
html.isEarly #envBadge{ display:none !important; }
html.isStaging #envBadge{ display:inline-flex !important; }

.brandSub{ 
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px;   /* mehr Platz */
  line-height:1;
}

.brandLogo{
  height:32px;       /* etwas größer */
  opacity:1;
  width:auto;
  display:block;
  margin-top:0;      /* kein push nach oben */
}

.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:6px 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;}

/* Library compact list (Spotify-like) */
.libList{display:flex; flex-direction:column; gap:6px}
.libHeaderRow,.libRow{
  display:grid;
  /* columns: Title | Artist | Kind | BPM | Length | Released | Actions */
  grid-template-columns: 3fr 1fr .7fr .7fr .8fr .9fr 1.6fr;
  gap:12px;
  align-items:center;
}
.libHeaderRow{padding:8px 10px; color:rgba(234,240,255,.55); font-size:11px; letter-spacing:.6px; text-transform:uppercase}
.libHeaderRow .hAct{text-align:right}
.libRow{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0);
  background:transparent;
}
.libRow:hover{background:rgba(255,255,255,.04)}
.libRowMini{padding:6px 10px; border-radius:12px}

/* List view index play affordance */
.idxPlay{min-width:34px; height:26px; padding:0 8px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:rgba(234,240,255,.80); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
/* (removed licIcon; commercial info moved to left rail) */
.idxPlay .idxIco{display:none; width:14px; height:14px}
.idxPlay .idxNum{display:inline-block; font-size:12px; opacity:.9}
.libRowMini:hover .idxPlay .idxNum{display:none}
.libRowMini:hover .idxPlay .idxIco{display:inline-flex}
.rTitle{display:flex; gap:10px; align-items:center; min-width:0}
.rTitle .miniCover{width:46px; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,0); background: rgba(255,255,255,.02); flex:0 0 auto; position:relative; overflow:hidden}
.coverPlay{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.22); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer}
.coverPlay:hover{background:rgba(0,0,0,.35)}

/* Playlists: make play buttons discoverable (no hover required) */
.libRowMini .coverPlay{opacity:1; filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.coverDetails{position:absolute; left:50%; top:50%; transform:translate(calc(-50% + 22px),-50%); width:26px; height:26px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.16); color:rgba(234,240,255,.92); font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer}
.coverDetails:hover{background:rgba(0,0,0,.28)}
.rArtist,.rBpm,.rLen,.rRel{color:rgba(234,240,255,.70); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rAct{justify-self:end; min-width:70px}
.act2x2{display:grid; grid-template-columns:repeat(2,30px); grid-template-rows:repeat(2,30px); gap:6px; justify-content:end; width:66px}
.act2x2 .iconBare{width:30px; height:30px; min-width:30px; min-height:30px; padding:0}
.act2x2 .iconBtn{
  width:28px; height:28px; min-width:28px;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.26) !important;
  border-radius:10px;
  color: rgba(255,255,255,.92);
}
.act2x2 .iconBtn .ico{width:15px; height:15px; display:block}
.act2x2 .iconBtn:hover{
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px rgba(0,0,0,.30) !important;
}
/* no translateY: keep spacing visually consistent */
.act2x2 .iconBtn:active{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 14px rgba(0,0,0,.22) !important;
}
.coverPlay .ico{width:18px; height:18px; display:block}
@media (max-width: 1100px){
  /* Library only: hide Artist + Released; keep Kind visible */
  body.routeLibrary .libHeaderRow,
  body.routeLibrary .libRow{grid-template-columns: 3fr .7fr .7fr .8fr 1.6fr;}
  body.routeLibrary .hArtist,
  body.routeLibrary .hRel,
  body.routeLibrary .rArtist,
  body.routeLibrary .rRel{display:none;}
}

/* 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;}
}
.libMainTabs{display:flex; align-items:center; gap:14px; justify-content:flex-start}
.libMainTab{
  border:none;
  background:transparent;
  color:rgba(234,240,255,.70);
  font-weight:900;
  letter-spacing:.12em;
  font-size:14px;
  cursor:pointer;
  padding:8px 10px;
  border-radius:12px;
}
.libMainTab.isOn{color:rgba(234,240,255,.94); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10)}
.libMainTab:hover{background:rgba(255,255,255,.04)}
.libMainSep{width:1px; height:22px; background:rgba(255,255,255,.14)}

.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:34px; height:34px}

/* select fields in dark UI (Upload wizard etc.) */
select.search{color:rgba(234,240,255,.92) !important; background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.10)}
select.select{color:rgba(234,240,255,.92) !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:14px;}

/* Dropdown styled like segmented buttons */
select.segBtn.segSelect{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:28px;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  position:relative;
}
select.segBtn.segSelect{ background-repeat:no-repeat; background-position: right 10px center; }
select.segBtn.segSelect{ background-size: 12px 12px; }
select.segBtn.segSelect{ background-image:
  linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
  radial-gradient(circle at 0 0, transparent 0, transparent 0); }
select.segBtn.segSelect{ color: rgba(234,240,255,.88); }

/* Make filter buttons a bit slimmer so 4 controls fit next to search on many phones */
@media (max-width: 720px){
  /* Library header: keep "Treffer" badge inside screen */
  body.routeLibrary .cardHeader{flex-wrap:wrap;}
  body.routeLibrary .cardHeader .badgePill{max-width: 44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right: max(0px, env(safe-area-inset-right));}
  /* On mobile, hide the big library search row (search is in topbar) */
  body.routeLibrary .libSearchWrap{display:none !important;}

  /* Filter row: make controls compact so 4 fit without wrapping */
  .libFilters{flex-wrap:nowrap !important; overflow-x:hidden; }
  .libFilters .segBtn{ padding:8px 10px; min-height:36px; flex:0 0 auto; }
  .libFilters .segBtn[data-asset="all"]{min-width:64px;}
  .libFilters .segBtn[data-asset="music"]{min-width:74px;}
  .libFilters .segBtn[data-asset="sfx"]{min-width:64px;}
  .libFilters .segBtn.segSelect{ min-width:92px; }
}
/* Some browsers render the dropdown list (option) with white bg; force dark for readability */
select.search option{color:rgba(234,240,255,.92); background-color:#0b1020}
select option{color:rgba(234,240,255,.92); background-color:#0b1020}
select optgroup{color:rgba(234,240,255,.70); background-color:#0b1020}
.toplink{
  color:var(--muted); text-decoration:none;
  padding:10px 10px;
  border:none;
  border-radius:10px;
  background:transparent;
}
.toplink:hover{color:var(--text); background:rgba(255,255,255,.04)}
.toplink.isActive{color:var(--text); background:rgba(255,255,255,.03)}

.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)}

/* bare icon buttons (no background, clickable) */
.iconBare{appearance:none; -webkit-appearance:none; border:none; background:transparent; padding:6px; border-radius:12px; color:rgba(234,240,255,.86); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:30px; min-height:30px;}
.iconBare:hover{color:rgba(234,240,255,.98); background:rgba(255,255,255,.04)}
.iconBare:active{transform:translateY(1px)}
.iconBare:focus-visible{outline:2px solid rgba(37,99,235,.55); outline-offset:2px}
.iconBare .heartOn{color:rgba(239,68,68,.95)}
.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;
}

/* Keep left rail non-scroll in FullHD by reserving space for the fixed bottom player */
:root{--playerBarH: 96px; --topbarH: 64px; --playerBarOffset: var(--playerBarH);} 
body.playerHidden{ --playerBarOffset: 0px; }

.left{display:flex; flex-direction:column; gap:14px}
.leftSpacer{flex:1; min-height:10px}

/* Left rail: compact status + usecase chips (moved from Trending card) */
.leftKpis{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px}
.leftSetupCard{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px 12px}
.leftSetupCard:hover{border-color:rgba(255,255,255,.18)}
.leftSetupRow .btn{min-width:64px}

.toggleSw{width:44px; height:24px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); position:relative; display:inline-block; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25)}
.toggleSw .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px; background:rgba(234,240,255,.92); box-shadow:0 6px 16px rgba(0,0,0,.35); transition: transform .18s ease}
.toggleSw.isOn{background:rgba(37,99,235,.35); border-color:rgba(37,99,235,.55)}
.toggleSw.isOn .knob{transform: translateX(20px)}
.leftKpi{padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02)}
.leftKpiLabel{font-size:11px; color:rgba(234,240,255,.55)}
.leftKpiVal{font-weight:900; font-size:12px; margin-top:2px}
.leftUseCases{display:flex; flex-wrap:wrap; gap:8px}
#leftDiscoverInfoPanel .badgePill{font-weight:650}

/* 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);

  /* Left rail should not clip content when browser zoom is used.
     Give it more vertical room (≈ +1/3) while keeping content above the fixed player bar. */
  position: sticky;
  top: calc(var(--topbarH) + 10px);
  height: calc(100vh - var(--topbarH) - (var(--playerBarH) * 2 / 3) - 24px);
  padding-bottom: calc(var(--playerBarH) / 3 + 12px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;

  /* Hide scrollbar (wheel/trackpad scroll still works) */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.left::-webkit-scrollbar{width:0; height:0;} 

/* Panels: keep overall rounded design, but less round on the left column */
.panel{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  padding:12px;
}

/* Sidebar: feel like one continuous rail (Spotify-ish) */
.left .panel{
  border-radius: var(--radiusLeft);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 6px 2px;
}
.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}

/* Buttons: keep only a few "real" CTAs; everything else should feel like text/chips */
.btn{
  font: inherit;
  color: var(--text);
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  position:relative;

  /* Center glyphs/text (prevents optical left-shift on single-character buttons like ☰, ✕, ＋) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;

  /* Reduce hover flicker/repaint bleed on some GPUs/browsers */
  overflow:hidden;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}


/* Sidebar buttons: flatter (less badgey) */
.left .btn{
  padding: 8px 10px;
  border-radius: 12px;
  box-shadow: none;
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.08);
}
.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}

/* Vote icon button */
.voteBare{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
}
.voteBare[disabled]{opacity:.38; cursor:default}
.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{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14)}
.btn:hover::after{opacity:.0; left:120%}
.btn:active{transform: translateY(1px); box-shadow: 0 8px 18px rgba(0,0,0,.20)}
.btn.isDisabled{opacity:.55; cursor:not-allowed}

/* Only keep 3D for primary CTAs */
.btn-3d{min-height:40px}
.btn-primary{
  border-color: rgba(37,99,235,.28);
  background: linear-gradient(180deg, rgba(37,99,235,.18), rgba(30,58,138,.12));
  box-shadow: 0 16px 36px rgba(37,99,235,.14);
}

.seg{display:flex; gap:8px}
.segBtn{
  flex:1;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  color:rgba(234,240,255,.78);
  cursor:pointer;
}
.left .segBtn{padding:8px 8px; border-radius:12px; font-size:12px}
.segBtn.miniTab{flex:0 0 auto; padding:7px 10px; border-radius:12px; font-size:12px}
.segBtn.isOn{color:var(--text); background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22)}

/* Social tabs: Pools (blue post-it) / Pinwand (yellow post-it) */
.segBtn.miniTab[data-socialtab]{position:relative}
.segBtn.miniTab[data-socialtab="pools"].isOn{background: rgba(96,205,212,.22); border-color: rgba(96,205,212,.38)}
.segBtn.miniTab[data-socialtab="pinboard"].isOn{background: rgba(245,158,11,.24); border-color: rgba(245,158,11,.42)}

/* Asset category color accents (used in Library asset filter) */
.segBtn[data-asset]{flex:0 0 auto}
.segBtn[data-asset="music"].isOn{background:rgba(37,99,235,.16); border-color:rgba(37,99,235,.40)}
.segBtn[data-asset="sfx"].isOn{background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.40)}
.segBtn[data-asset="bundle"].isOn{background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.45)}
.segBtn[data-asset="sting"].isOn{background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.40)}

.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;
  /* iOS: borders can look like a "second pill" behind (subpixel + blur). Use inset shadow. */
  border:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(234,240,255,.88);
  cursor:pointer;

  /* iOS: keep chip text visually centered */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.chipBtn:hover{background:rgba(255,255,255,.06)}
.chipBtn:active{transform:translateY(1px)}
.chipBtn.isOn{color:var(--text); background:rgba(37,99,235,.14); border-color:rgba(37,99,235,.35)}
.left .chipBtn{padding:7px 9px}

.pill{
  display:flex; align-items:center; justify-content:flex-start;
  gap:10px;
  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);
  text-align:left;
}
.pill:hover{background: rgba(255,255,255,.05)}

.legal{
  display:flex;
  justify-content:space-between;
  font-size:12px;

  /* Do NOT overlay content (zoom/small screens). Keep it as the last item in the rail. */
  position: static;

  background: rgba(8,12,22,.82);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.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{
  /* Layout: Left = Trending Top10 (tall). Right = Pinboard + Featured + Just Playing */
  grid-template-columns: 1.05fr .95fr;
  align-items:start;
}
.fullwidth{grid-column: 1 / -1}

/* square-ish badge card (default) */
.squareBadge{
  aspect-ratio: 1 / 1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Discover: keep shortcut tiles compact so the right-side content stays visible */
.discoverGrid .squareBadge{aspect-ratio:auto; min-height:200px}
.discoverGrid .pinHeroMini{min-height:220px}
.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;
  min-width: 0;
}
.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; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.albumMeta{margin-top:2px; font-size:12px; color:rgba(234,240,255,.62)}

/* Public playlists (Profile, mobile): stack as rows (not thin columns) */
@media (max-width: 720px){
  body.routeProfile .albumRow{flex-direction:column; overflow:visible;}
  body.routeProfile .album{display:flex; align-items:center; gap:12px;}
  body.routeProfile .albumCover{width:64px; flex:0 0 64px; aspect-ratio:1/1; border-radius:12px;}
  body.routeProfile .albumTitle{margin-top:0;}
  body.routeProfile .albumMeta{margin-top:2px;}
}
html.isPhone body.routeProfile .albumRow{flex-direction:column; overflow:visible;}
html.isPhone body.routeProfile .album{display:flex; align-items:center; gap:12px;}
html.isPhone body.routeProfile .albumCover{width:64px; flex:0 0 64px; aspect-ratio:1/1; border-radius:12px;}
html.isPhone body.routeProfile .albumTitle{margin-top:0;}
html.isPhone body.routeProfile .albumMeta{margin-top:2px;}

.badgeRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.badgePill{
  padding:5px 8px;
  border-radius:999px;
  /* iOS: borders can look like a "double outline" on blurred backgrounds → use inset shadow instead */
  border:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:rgba(234,240,255,.82);
  font-size:11px;
  font-weight:650;

  /* Center text/glyphs (fixes iOS baseline weirdness on ✓ and quotes) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1;
}
.badgePill[role="button"], .badgePill[data-bear]{cursor:pointer}
.badgePill[role="button"]:hover, .badgePill[data-bear]:hover{background:rgba(255,255,255,.05)}

/* Admin status pills */
.badgePill.badgeOk{background:rgba(34,197,94,.12); box-shadow: inset 0 0 0 1px rgba(34,197,94,.28); color:rgba(210,255,230,.92)}
.badgePill.badgeWarn{background:rgba(234,179,8,.12); box-shadow: inset 0 0 0 1px rgba(234,179,8,.28); color:rgba(255,248,220,.92)}
.badgePill.badgeBad{background:rgba(239,68,68,.12); box-shadow: inset 0 0 0 1px rgba(239,68,68,.28); color:rgba(255,220,220,.92)}

/* Profile eye-catcher badges */
.badgeGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:12px}
.badgeCard{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transform: translateZ(0);
  transition: 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: none;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
}
.badgeCard:hover::after{opacity:1; left:140%}
.badgeCard.isExpanded{
  transform: none;
  background: rgba(37,99,235,.08);
  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,.78); margin-top:6px; line-height:1.35}
.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:14px;
  border:1px solid rgba(255,255,255,.00);
  background:transparent;
}
.listItem:hover{background:rgba(255,255,255,.04)}

/* Forum delete: only show on hover (avoid "error marker" vibe) */
.forumDel{margin-left:auto; opacity:0; pointer-events:none; transition: opacity .12s ease;}
.listItem:hover .forumDel{opacity:1; pointer-events:auto;}
.miniCover{width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,0); background: rgba(255,255,255,.02);}
.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  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}

/* chalk/handwritten accent */
.chalkTagline{
  /* push it further down so it reads like a signature */
  margin-top:36px;
  font-family: "Caveat", ui-rounded, system-ui, sans-serif;
  font-size:40px;
  line-height:0.92;
  letter-spacing:.2px;
  color: rgba(234,240,255,.70);
  opacity:.85;
  transform: rotate(-8deg);
  transform-origin: left bottom;
  user-select:none;
  pointer-events:none;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.chalkTagline > div{display:block}

.justBearRow{margin-top:18px}

.track{display:flex; gap:10px; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,0); background:transparent}
.track:hover{background:rgba(255,255,255,.04)}
.track:focus-within{background:rgba(255,255,255,.04)}

.socialWrap{display:flex; flex-direction:column; gap:14px}
/* now: Pools rail + one big Pinboard pane */
.socialLayout{display:grid; grid-template-columns: 420px minmax(0,1fr); gap:14px; align-items:start}
/* bottom: forum wider, last posts narrower */
/* socialBottom deprecated (clip wall moved into rail, forum is full-width below) */
.socialBottom{display:none}

/* Pinboard hero (CSS-only corkboard + post-its) */
.pinboardHero{position:relative; min-height: var(--socialPaneH); overflow:hidden}

/* Discover mini pinboard hero: ensure background is clipped to the card (avoid fullscreen absolute bg) */
.pinHeroMini{position:relative; overflow:hidden}
.pinHeroMini .pinboardBg{border-radius: inherit}
.pinHeroMini .pinPostit{aspect-ratio: 1 / 1; min-height:auto; padding:10px 10px 12px 10px}
.pinHeroMini .pinT{font-size:13px; margin-top:6px}
.pinHeroMini .pinM{margin-top:6px}

/* Discover: Featured row (avatars + pinboard teaser side-by-side)
   Use 2 equal columns so the pinboard image ends up about as wide as the Just Playing cover. */
.featuredRow{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start}
.featuredRow .featuredAvatars{
  min-width:0;
  padding-top:2px;
  /* 2-row grid rail (better use of available height) */
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap:12px;

  overflow-x:auto;
  overflow-y:hidden;
  padding-right:0;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;

  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* On large screens, show more avatars (3 rows) without shrinking the icons too much */
@media (min-width: 1600px){
  .featuredRow .featuredAvatars{grid-template-rows: repeat(3, auto); gap:10px;}
}

.featuredRow .featuredAvatars::-webkit-scrollbar{display:none}

@media (max-width: 980px){
  .featuredRow{grid-template-columns: 1fr}
}

/* Upload: Multi (mp3tag style) */
.uplFileList{display:flex; flex-direction:column; gap:8px}
/* uplFreezeBar removed (platform-only freeze) */
.uplFileRow{display:flex; gap:10px; align-items:center; padding:8px 8px; border-radius:12px;
  border:0; background:transparent; text-align:left; width:100%}
.uplFileRow:hover{background:rgba(255,255,255,.04)}
.uplFileRow.isOn{background: rgba(96,205,212,.10)}
/* .uplFileRow.isFrozen removed (platform-only freeze) */

.uplFileIdx{width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-weight:950; font-size:12px; color:rgba(234,240,255,.85); background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10)}
.uplFileName{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; color:rgba(234,240,255,.92)}

/* Cover picker: iPhone-photos-like tiles */
.coverTile{padding:0; border:0; background:transparent; border-radius:16px; overflow:hidden; cursor:pointer}
.coverTile img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:16px; border:1px solid rgba(255,255,255,.12)}
.coverTile:hover img{filter: brightness(1.06)}

/* Pinboard teaser (use Chris image: slate tiles) */
.pinTeaserMini{width:100%; padding:10px; border-radius:18px; border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16); cursor:pointer; margin-top:2px;
}
.pinTeaserImg{width:100%; height:auto; display:block; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}

  overflow-y:hidden;
  padding-right:0;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;

  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.featuredRow .featuredAvatars::-webkit-scrollbar{display:none}

@media (max-width: 980px){
  .featuredRow{grid-template-columns: 1fr}
}

/* Upload: Multi (mp3tag style) */
.uplFileList{display:flex; flex-direction:column; gap:8px}
/* uplFreezeBar removed (platform-only freeze) */
.uplFileRow{display:flex; gap:10px; align-items:center; padding:8px 8px; border-radius:12px;
  border:0; background:transparent; text-align:left; width:100%}
.uplFileRow:hover{background:rgba(255,255,255,.04)}
.uplFileRow.isOn{background: rgba(96,205,212,.10)}
/* .uplFileRow.isFrozen removed (platform-only freeze) */

.uplFileIdx{width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-weight:950; font-size:12px; color:rgba(234,240,255,.85); background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10)}
.uplFileName{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; color:rgba(234,240,255,.92)}

/* Cover picker: iPhone-photos-like tiles */
.coverTile{padding:0; border:0; background:transparent; border-radius:16px; overflow:hidden; cursor:pointer}
.coverTile img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:16px; border:1px solid rgba(255,255,255,.12)}
.coverTile:hover img{filter: brightness(1.06)}

/* Pinboard teaser (use Chris image: slate tiles) */
.pinTeaserMini{width:100%; padding:10px; border-radius:18px; border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16); cursor:pointer; margin-top:2px;
}
.pinTeaserImg{width:100%; height:auto; display:block; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}

/* Prevent huge tiles when users zoom way out (big viewport -> cards would grow excessively)
   Use !important to beat inline width:100% styles. */
.pinTeaserMini{max-width: 360px !important; margin-left:auto; margin-right:auto; justify-self:center;}
.pinTeaserImg{max-height:360px; object-fit:cover;}
#justPlayingCover{max-width: 360px !important; max-height:360px !important; margin-left:auto; margin-right:auto;}

/* Discover: Trend card shows exactly Top 10 without internal scrollbar.
   Keep a reserved slot underneath for future modules (e.g. Album der Woche). */
.trendTall{display:flex; flex-direction:column}
.trendTall .trendExtra{height: 140px; margin-top:10px; border-radius:16px; border:1px dashed rgba(255,255,255,.10); background:rgba(255,255,255,.02)}
@media (max-width: 720px){
  .trendTall .trendExtra{display:none;}
}

/* Pinwand: no outer border/frame; only the cork surface */
.pinboardHero{border:none !important; background: transparent !important; box-shadow:none !important}

/* readability on small screens: slightly darker banner behind title/meta */
.pinboardHero .cardHeader{position:relative; z-index:2; padding:12px 12px; border-radius:18px; margin:10px 10px 8px;
  background: rgba(0,0,0,.38);
  border:0;
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.pinboardHero .cardHeader .cardMeta{color: rgba(234,240,255,.78)}
.pinboardHero .cardHeader .cardTitle{color: rgba(255,255,255,.96)}
.pinboardBg{position:absolute; inset:0; opacity:1; pointer-events:none;
  /* Flat cork (no photo): stable across browsers + zoom, no tiling artifacts */
  background:
    radial-gradient(1200px 700px at 25% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 35%, rgba(0,0,0,.10), transparent 62%),
    radial-gradient(1100px 900px at 50% 120%, rgba(0,0,0,.14), transparent 58%),
    linear-gradient(135deg, #b88445 0%, #a8763c 35%, #9a6c35 70%, #8e6230 100%);
  background-repeat: no-repeat;
}
.pinboardHero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,.06), transparent 55%),
              radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,.25), transparent 55%);
}

.pinPreviewRow{display:block; padding: 0 14px 12px 14px; position:relative}

/* Pinboard feed rows readability over corkboard */
.pinboardHero #pinboardPane .listItem{
  background: rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.12);
}
.pinboardHero #pinboardPane .listItem:hover{background: rgba(0,0,0,.30)}
.pinboardHero #pinboardPane .tTitle{color: rgba(255,255,255,.96)}
.pinboardHero #pinboardPane .tSub{color: rgba(234,240,255,.78)}
/* Post-its: solid colors, always readable, never huge */
.pinPostit{position:relative; border-radius:14px; padding:12px 12px 12px 12px; min-height:148px;
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
  cursor:pointer;
  border:1px solid rgba(0,0,0,.10);
}

/* Near-square notes only in the big Social pinboard hero */
.pinboardHero .pinPostit{
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 260px;
  max-height: 260px;
}

.pinHeroMini .pinPostit{min-height:110px}

/* Solid post-it palette (no transparency) */
.pinPostit.seek{background: #FDF2A6;}   /* yellow */
.pinPostit.offer{background: #BFE8FF;}  /* light blue */

.pinPostit:hover{filter: brightness(1.02)}

/* no decorative pin bars/heads (these caused browser differences) */
.pinPostit::before{display:none}
.pinPostit::after{display:none}

/* readable text */
.pinK{font-weight:900; font-size:12px; color: #111827}
.pinT{
  margin-top:8px;
  color: #111827;
  line-height:1.25;
  font-size:15px;
  font-weight:800;
  font-family: "Kalam", "Patrick Hand", "Segoe Print", "Comic Sans MS", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  letter-spacing: .1px;
  text-shadow:none;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.pinM{margin-top:8px; color: #111827; font-size:12px; font-weight:800; opacity:.85}

/* slight human feel, but stable */
.pinPostit:nth-child(1){transform: rotate(-.5deg) translateY(1px)}
.pinPostit:nth-child(2){transform: rotate(.5deg) translateY(-1px)}
.pinPostit:nth-child(3){transform: rotate(-.3deg) translateY(1px)}
.pinPostit:nth-child(4){transform: rotate(.3deg) translateY(-1px)}

/* target: keep Forum visible without scrolling (1920x1080-ish) */
:root{
  /* Social/Pinboard height: keep it compact so it doesn't dominate on browser zoom */
  --socialPaneH: clamp(520px, calc(100vh - 170px), 780px);
}

.filterRail{
  position:sticky;
  top:84px;
  align-self:start;
  /* Keep the left Social rail stable (independent from pinboard sizing) */
  height: calc(100vh - var(--topbarH) - var(--playerBarH) - 24px);
  overflow:auto;
  scrollbar-gutter: stable both-edges;
}
/* Allow role badges to wrap/expand instead of clipping when browser zoom is used */
.filterRail .badgeRow{max-height:none; overflow:visible}
/* The clip widget should never be clipped by the rail at higher zoom */
.filterRail .clipWall{overflow:visible !important}
.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; overflow:hidden}
.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: 380px minmax(0,1fr)}
  .pinPreviewRow{grid-template-columns: repeat(2, minmax(0,1fr));}
}

/* --- Chat --- */
.chatLayout{display:grid; grid-template-columns: 320px minmax(0,1fr); gap:14px; align-items:stretch}
.chatLeft{height: calc(100vh - var(--topbarH) - var(--playerBarH) - 24px); overflow:hidden}
.chatRight{height: calc(100vh - var(--topbarH) - var(--playerBarH) - 24px); overflow:visible; display:flex; flex-direction:column}
.chatList{margin-top:10px; display:flex; flex-direction:column; gap:10px; overflow:auto; max-height: calc(100% - 72px); padding-right:4px; scrollbar-gutter: stable both-edges}

/* Keep composer always visible */
.chatComposer{position:sticky; bottom: 0; background: rgba(12,16,28,.96); padding:10px 0; z-index:5}
.chatMsgs{padding-bottom: 14px}

.chatSection{display:flex; flex-direction:column; gap:8px}
.chatSectionHead{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); cursor:pointer; user-select:none}
.chatSectionHead:hover{background:rgba(255,255,255,.03)}
.chatSectionTitle{font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:11px; color: rgba(234,240,255,.70)}
.chatSectionMeta{margin-left:auto; font-size:11px; color: rgba(234,240,255,.55)}
.chatSectionChevron{opacity:.7; font-weight:900}
.chatSectionBody{display:flex; flex-direction:column; gap:8px}

.chatFriend{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03)}
.chatFriend:hover{background:rgba(255,255,255,.05)}
.chatFriend.isOn{background:rgba(37,99,235,.10); border-color: rgba(37,99,235,.22)}
.chatDot{width:10px; height:10px; border-radius:999px; box-shadow: 0 6px 14px rgba(0,0,0,.25)}
.chatDot.on{background: rgba(34,197,94,.85)}
.chatDot.off{background: rgba(255,255,255,.22)}
.chatName{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.chatBadge{width:10px; height:10px; border-radius:999px; background: rgba(245,158,11,.85); box-shadow: 0 8px 18px rgba(0,0,0,.25)}
.chatOpenBtn{width:30px; height:30px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); color: rgba(234,240,255,.85); font-weight:900; cursor:pointer}
.chatOpenBtn:hover{background:rgba(255,255,255,.04)}

.chatMsgs{flex:1; overflow:auto; padding-right:4px; display:flex; flex-direction:column; gap:10px; scrollbar-gutter: stable both-edges}
.chatMsgRow{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.chatMsgRow.mine{align-items:flex-end}
.chatMsg{max-width:min(680px, 92%); padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); white-space:pre-wrap; line-height:1.35}
.chatMsgRow.mine .chatMsg{background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.20)}
.chatTime{font-size:11px; color: rgba(234,240,255,.55)}
.chatJump{align-self:center; margin:10px 0 0 0; opacity:.95}
.chatComposer{display:flex; gap:10px; align-items:center; padding-top:10px; border-top:1px solid rgba(255,255,255,.08)}

@media (max-width: 980px){
  .chatLayout{grid-template-columns: 1fr;}
  .chatLeft,.chatRight{height:auto}
  .chatMsgs{max-height: 360px}
}

/* Chat on phones: anchor composer above bottom player bar (stable while scrolling) */
@media (max-width: 720px){
  .chatRight{overflow:visible; padding-bottom:0;}
  .chatMsgs{max-height:none; padding-bottom: calc(var(--playerBarH) + 86px);}
  .chatComposer{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--playerBarH) + env(safe-area-inset-bottom) + 8px);
    z-index: 120;
    padding:10px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(12,16,28,.92);
    backdrop-filter: blur(8px);
  }
  .chatComposer #chatEmoji{ margin-left:auto; }
.chatComposer #chatSend{ margin-left:0; }
}
@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;
}

/* Burger glyph centering (the ☰ character can look optically left/top-heavy depending on font) */
#accountMenuBtn{
  font-size:18px;
  line-height:1;
  padding:0;
  display:inline-grid;
  place-items:center;
  text-align:center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* tiny optical correction for the glyph */
  transform: translateX(1px);
}

.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;
}

/* Discover: Featured avatars in a 2-row scrollable grid (uses available space better) */
.featuredAvatars{
  padding:10px 6px 4px;
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;

  /* hide scrollbar but keep scroll (mouse wheel/trackpad + touch) */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.featuredAvatars::-webkit-scrollbar{display:none}
.featuredAvatars .railItem{min-width:120px}
.featuredAvatars .railAvatar{width:64px; height:64px}

.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:78px;
  height:78px;
  border-radius:999px;
  /* no visible ring at all (avatar PNGs sometimes include colored rings) */
  border:0;
  background: transparent;
  box-shadow: none;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.5px;
  cursor:pointer;
  overflow:hidden;
}

/* Some archetype PNGs include a colored ring baked into the image.
   Crop harder so no ring remains visible. */
.railAvatar img{transform: scale(1.22); transform-origin:center;}
.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}

/* (trendTall defined earlier; keep single source) */

.chartRow{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:16px; border:1px solid rgba(255,255,255,0); background:transparent}
.chartRow:hover{background:rgba(255,255,255,.04)}
.chartRow:focus-within{background:rgba(255,255,255,.04)}
.chartRowBlank{opacity:.35}
.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 */
/* Library: asset filter row - consistent sizing + subtle color coding */
.libFilters .segBtn{
  min-height:38px;
  padding:10px 12px;
  border-radius:12px;
  min-width:90px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.libFilters .segBtn[data-asset="all"]{background:rgba(255,255,255,.02)}
.libFilters .segBtn[data-asset="music"]{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22)}
.libFilters .segBtn[data-asset="sfx"]{background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.22)}
.libFilters .segBtn[data-asset="bundle"]{background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.22)}
.libFilters .segBtn[data-asset="sting"]{background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.22)}
.libFilters .segBtn[data-asset="ringtone"]{background:rgba(236,72,153,.10); border-color:rgba(236,72,153,.22)}

/* 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)}

/* Profile panel: make Level/XP spacing clean and aligned */
#userPanel .xpRow{display:grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap:10px; row-gap:6px; align-items:center}
#userPanel .xpRow .badgePill{grid-column:1; grid-row:1}
#userPanel .xpRow .xpBar{grid-column:2; grid-row:1; min-width:0}
#userPanel .xpRow .xpMeta{grid-column:1 / -1; grid-row:2; margin-left:0; opacity:.9}

/* Emoji picker */
.emojiPop{position:fixed; z-index:9999; background: rgba(12,16,28,.98); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px; box-shadow:0 22px 60px rgba(0,0,0,.55)}
.emojiGrid{display:grid; grid-template-columns: repeat(8, 1fr); gap:6px;}
.emojiBtn{width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:rgba(234,240,255,.95); cursor:pointer; display:grid; place-items:center; font-size:16px;}
.emojiBtn:hover{background:rgba(255,255,255,.06)}

.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;
  max-height: 70vh;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 10px;
}
.bearQ{border-top:1px solid rgba(255,255,255,.08); padding-top:10px; margin-top:10px;}
.bearQ:first-of-type{border-top:0; padding-top:0; margin-top:0;}
.bearQ summary{cursor:pointer; font-weight:800; color:rgba(234,240,255,.92); outline:none;}
.bearQ summary::marker{color:rgba(234,240,255,.55);}
.bearA{margin-top:8px; color:rgba(234,240,255,.74); font-size:12px; line-height:1.35;}

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

/* Pricing */
.pricingGrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 1300px){.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; z-index:2}
.pricingTop{position:relative; z-index:1; padding-right: 96px;}
.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; white-space:nowrap}
.pricingPrice span{font-weight:700; font-size:12px; color:rgba(234,240,255,.65); margin-left:6px; white-space:nowrap}
.pricingBullets{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.pbullet{color:rgba(234,240,255,.86); font-size:12px}

/* ============ REMOTE (pop-out minimal) ============ */
body.remoteMode{
  overflow:hidden;
}
body.remoteMode .topbar{
  display:none !important;
}
body.remoteMode aside.left,
body.remoteMode #underConstruction,
body.remoteMode #registerPanel,
body.remoteMode #quickActionsPanel,
body.remoteMode #producerPanel,
body.remoteMode #licensePanel,
body.remoteMode #protoBadgePanel,
body.remoteMode .panel.legal{
  display:none !important;
}
body.remoteMode .shell{grid-template-columns: 1fr; padding:0;}
body.remoteMode .content{padding:16px;}
/* make sure no global overlays block clicks in pop-out */
body.remoteMode .drawerOverlay,
body.remoteMode .drawer,
body.remoteMode #accountOverlay,
body.remoteMode #accountDrawer{
  display:none !important;
}
body.remoteMode .remoteWrap, body.remoteMode .remoteCard{pointer-events:auto;}

/* ============ CHAT POP-OUT (standalone window) ============ */
body.chatPopMode{
  overflow:hidden;
}
body.chatPopMode .topbar,
body.chatPopMode .playerBar,
body.chatPopMode aside.left,
body.chatPopMode #underConstruction,
body.chatPopMode #registerPanel,
body.chatPopMode #quickActionsPanel,
body.chatPopMode #producerPanel,
body.chatPopMode #licensePanel,
body.chatPopMode #protoBadgePanel,
body.chatPopMode .panel.legal,
body.chatPopMode .chatOverlay,
body.chatPopMode #accountOverlay,
body.chatPopMode #accountDrawer,
body.chatPopMode .drawerOverlay,
body.chatPopMode .drawer{display:none !important;}
body.chatPopMode .shell{grid-template-columns: 1fr; padding:12px;}
body.chatPopMode .content{padding:0;}
body.chatPopMode #route{min-height:100vh;}

:root{--chatPopLeftW: 280px;}

.chatPopLayout{display:grid; grid-template-columns: var(--chatPopLeftW) 8px minmax(0,1fr); gap:0; height: calc(100vh - 24px);} 
.chatPopLayout.isLeftCollapsed{grid-template-columns: 1fr;}

.chatPopDivider{cursor:col-resize; background:rgba(255,255,255,.04); border-radius:999px; margin:10px 6px;}
.chatPopDivider:hover{background:rgba(255,255,255,.08)}

.chatPopLeft,.chatPopRight{height:100%; overflow:hidden; display:flex; flex-direction:column; min-height:0;}
.chatPopLeft{margin-right:12px;}
.chatPopRight{margin-left:12px;}
.chatPopLeft .chatList{max-height:none; flex:1; overflow:auto;}

/* Override global max-height rules that can kick in on smaller window widths */
body.chatPopMode .chatMsgs{max-height:none !important; min-height:0;}
.chatPopRight .chatMsgs{flex:1; overflow:auto; min-height:0;}

/* Composer always at bottom and full-width */
body.chatPopMode .chatComposer{
  position:sticky;
  bottom:0;
  margin-top:auto;
  padding:10px 12px;
  background: rgba(12,16,28,.96);
  display:flex !important;
  gap:10px;
  align-items:center;
}
body.chatPopMode .chatComposer .search{flex:1 !important; width:100%;}
body.chatPopMode .chatComposer #chatEmoji{margin-left:auto; flex:0 0 auto;}
body.chatPopMode .chatComposer #chatSend{margin-left:0; flex:0 0 auto;}

/* ============ 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;}
/* Auth: disable uiScale transform to avoid subpixel horizontal drift on phones */
body.authMode main{transform:none !important; width:100% !important;}
body.authMode main.shell{width:100% !important; overflow-x:hidden !important;}
body.authMode #route{overflow-x:hidden !important;}
body.authMode #underConstruction{display:none !important;}
body.authMode .content{padding:0;}
body.authMode #route{min-height:100vh;}

/* After auth transition, fade-in the new page for a moment */
body.authFadeIn #route{animation: authRouteFadeIn 3.2s ease forwards;}
@keyframes authRouteFadeIn{0%{opacity:0; filter: blur(2px);} 100%{opacity:1; filter: blur(0px);} }
@media (prefers-reduced-motion: reduce){ body.authFadeIn #route{animation:none !important;} }

/* Auth exit wow: simple cinematic fade-to-black */
.authExitLayer{position:fixed; inset:0; z-index:300; pointer-events:none; display:none;}
.authExitLayer.isOn{display:block;}
.authExitLayer .black{
  position:absolute; inset:0;
  background: #000;
  opacity:0;
}
.authExitLayer.isOn .black{ animation: authFadeBlack 1.55s ease forwards; }

/* also fade the auth screen itself (not just an overlay) */
body.authExiting .authScreen{ animation: authFadeOut 1.15s ease forwards; }
body.authExiting .authBg{ animation: authFadeOut 1.15s ease forwards; }
@keyframes authFadeOut{ 0%{opacity:1} 100%{opacity:0} }

@keyframes authFadeBlack{
  0%{ opacity:0; }
  65%{ opacity:1; }
  100%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .authExitLayer{display:none !important;}
}

body.authNoScroll{overflow:hidden;}

/* Auth background: single source of truth (avoid double-render seams on some aspect ratios) */
body.authMode{
  background: #070A10;
}

.authScreen{
  position:relative;
  min-height:100dvh;
  overflow:auto;
  display:block;
  padding:36px 18px;
  padding-bottom: 120px; /* ensure bottom buttons (e.g. Passwort vergessen) are reachable */
}
.authScreen > *{position:relative; z-index:2;}
.authScreen > .authBg{z-index:0; position:fixed;}
.authCenter{margin:0 auto;}

.authBg{position:fixed; inset:0; z-index:0; pointer-events:none;
  /* Responsive background: pick best size via image-set */
  background-image: url('assets/auth/login_bg_today_v2_2560x720.webp');
  background-image: -webkit-image-set(
    url('assets/auth/login_bg_today_v2_1920x540.webp') 1x,
    url('assets/auth/login_bg_today_v2_2560x720.webp') 1.33x,
    url('assets/auth/login_bg_today_v2_3840x1080.webp') 2x,
    url('assets/auth/login_bg_today_v2_5120x1440.webp') 2.66x
  );
  background-image: image-set(
    url('assets/auth/login_bg_today_v2_1920x540.webp') 1x,
    url('assets/auth/login_bg_today_v2_2560x720.webp') 1.33x,
    url('assets/auth/login_bg_today_v2_3840x1080.webp') 2x,
    url('assets/auth/login_bg_today_v2_5120x1440.webp') 2.66x
  );
  background-size: cover;
  background-position: 62% 50%;
  background-repeat:no-repeat;
  background-color:#070A10;
  transform: translateZ(0);
}

.authCountdownCorner{
  position:fixed;
  top:18px;
  left:18px;
  z-index:5;
  text-align:left;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.authCountdownCorner .authCountdown{font-size:18px}

/* Mobile: hide countdown (takes space + competes with intro/login) */
@media (max-width: 720px){
  .authCountdownCorner{display:none !important;}
}

.authCenter{display:flex; flex-direction:column; align-items:center; gap:18px;}
.authSpacer{display:none !important;}
.authClock{display:none !important;}
@media (max-width: 980px){ .authCountdownCorner{position:static; margin:0 auto 14px; max-width:520px;} }

/* Auth intro (shown above login so QR users know what this is) */
.authIntro{
  width: min(720px, 92vw);
  margin: 10px auto 10px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,10,18,.62);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.authIntroTitle{font-weight:950; font-size:18px; letter-spacing:-.2px; color:rgba(234,240,255,.96); text-shadow:0 1px 8px rgba(0,0,0,.45)}
.authIntroTitle.chalk{
  font-family: "Caveat", ui-rounded, system-ui, sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: .2px;
}

.authIntroMeta{margin-top:4px; color:rgba(234,240,255,.78); font-size:12px; text-shadow:0 1px 8px rgba(0,0,0,.35)}
.authIntroBullets{display:flex; flex-direction:column; gap:6px; color:rgba(234,240,255,.90); font-size:13px; text-shadow:0 1px 8px rgba(0,0,0,.35)}
.authIntroHint{color:rgba(234,240,255,.76); font-size:12px; line-height:1.35; text-shadow:0 1px 8px rgba(0,0,0,.30)}

@media (max-width: 720px){
  .authIntro{margin-top: 18px;}
  /* ensure user sees intro first, login after scroll */
  .authCard{margin-top: 18px;}
}

/* Phone landscape + auth: force scrolling even though the mobile shell normally locks body scroll */
html.isPhone body.authMode{height:auto !important; overflow:auto !important;}
html.isPhone body.authMode main.shell{height:auto !important; overflow-y:visible !important;}

.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)}

/* Auth side note (handwritten feel) */
.authSide{display:flex; flex-direction:column; gap:14px; align-self:stretch}
.authNote{
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  transform: rotate(-1deg);
}
.authNoteTitle{
  font-weight:900;
  font-size:22px;
  letter-spacing:.2px;
  margin-bottom:6px;
  font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Comic Sans MS", cursive;
}
.authNoteText{
  font-size:14px;
  line-height:1.55;
  color: rgba(234,240,255,.86);
  font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Comic Sans MS", cursive;
}

/* Snowflake / benefits */
.authSnow{display:flex; flex-wrap:wrap; gap:12px; align-content:start; justify-content:flex-start}
.snowChip{padding:0; border-radius:0; border:none; background:transparent; color:rgba(234,240,255,.86); font-weight:850; font-size:12px; letter-spacing:.2px}

/* PS note */
.authPS{padding:10px 12px; border-radius:18px; border:1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.14); transform: rotate(0.6deg)}
.authPSK{font-weight:900; opacity:.9; margin-bottom:4px; font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Comic Sans MS", cursive;}
.authPSText{font-size:13px; color: rgba(234,240,255,.78); line-height:1.45; font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Comic Sans MS", cursive;}

/* 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}
}

/* Route-specific shell tweaks */
body.routeUpload #registerPanel{display:none;}
body.routeUpload #quickActionsPanel{display:none;}

/* Prototype badge in left menu (replaces top banner) */
#protoBadgePanel{padding:6px 2px;}
.protoNote{display:flex; align-items:center; gap:8px; padding:6px 2px; color:rgba(234,240,255,.58); font-size:12px;}
.protoNoteK{color:rgba(234,240,255,.60)}
.protoNoteSep{opacity:.4}

@media (max-width: 980px){
  .uploadMvp .grid{grid-template-columns: 1fr !important;}
}


/* Upload MVP */
.uplPrevBox{
  aspect-ratio:1/1;
  width: min(240px, 56%);
  margin:0 auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(37,99,235,.10));
  position:relative;
  overflow:hidden;
}
@media (max-width: 980px){
  .uplPrevBox{ width: min(220px, 64%); }
}

.uploadBar{height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.uploadBarFill{height:100%; width:0%; background:linear-gradient(90deg, rgba(98,255,183,.9), rgba(0,170,255,.9)); box-shadow:0 0 18px rgba(0,170,255,.25) inset; transition:width .15s ease}
.uploadMvp input[type="file"]{padding:10px; border-radius:14px; border:1px dashed rgba(255,255,255,.16); background:rgba(255,255,255,.02)}
.checkRow{display:flex; gap:10px; align-items:flex-start; font-size:13px; opacity:.92}
.checkRow input{margin-top:3px}

.fileMeta{display:flex; gap:10px; align-items:center; margin-top:8px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02)}
.fileName{opacity:.9; font-size:13px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Profile menu chip (desktop) */
.profileChip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--txt);
  cursor:pointer;
}
.profileChip:hover{ background:rgba(255,255,255,.09); }
.profileChip:active{ transform: translateY(1px); }
.profileChip .pcAvatar{
  width:28px;height:28px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  background:linear-gradient(135deg, rgba(125,92,255,.9), rgba(0,255,255,.25));
  border:1px solid rgba(255,255,255,.18);
}
.profileChip .pcName{ font-weight:700; letter-spacing:.2px; }
.profileChip .pcLevel{ font-size:12px; opacity:.8; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); }

/* Responsive: burger only on small screens, profile chip only on desktop */
@media (max-width: 900px){
  #profileMenuBtn{ display:none !important; }
  #accountMenuBtn{ display:inline-flex !important; }
}
@media (min-width: 901px){
  #accountMenuBtn{ display:none !important; }
  #profileMenuBtn{ display:inline-flex !important; }
}

/* Account drawer (burger / profile menu) */
.drawerOverlay{position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index:80}
.drawer{position:fixed; top:0; right:0; height:100vh; width:min(360px, 92vw); background:rgba(12,16,28,.92); border-left:1px solid rgba(255,255,255,.10); z-index:81; padding:14px; box-shadow:-20px 0 60px rgba(0,0,0,.45)}
.drawer.drawerLeft{left:0; right:auto; border-left:none; border-right:1px solid rgba(255,255,255,.10); box-shadow:20px 0 60px rgba(0,0,0,.45)}
.drawerHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.10)}
.drawerTitle{font-weight:700; letter-spacing:.2px}
.drawerMeta{font-size:12px; opacity:.75; margin-top:2px}
.drawerBody{padding-top:12px; display:flex; flex-direction:column; gap:10px}
.drawerLink{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:rgba(234,240,255,.92); text-decoration:none}
.drawerLink:hover{background:rgba(255,255,255,.05)}

/* hard modal hide helpers (in case overlays get stuck) */
#avatarModal[hidden]{display:none !important}
#contactModal[hidden]{display:none !important}
.modalHidden{display:none !important}

/* DnD hints */
.listItem.isDrag{opacity:.65; outline:1px dashed rgba(255,255,255,.18)}
.listItem.isDrop{outline:2px solid rgba(37,99,235,.45)}

/* Playlists: Mine view grid responsiveness */
.plMineGrid{grid-template-columns: 360px minmax(0,1fr);}
@media (max-width: 980px){
  .plMineGrid{grid-template-columns: 1fr;}
}

/* Playlist cards: avoid tall stretched banners; keep controls compact */
.plCard .plHero{
  height: 92px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.plCard .plBody{ padding:10px; }

/* Simplified playlist accordion header */
.plHead{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none;}
.plHeadLeft{min-width:0; flex:1;}
.plHeadRight{display:flex; gap:8px; align-items:center; flex:0 0 auto; flex-wrap:nowrap;}

@media (max-width: 720px){
  .plCard .plHero{ height: 76px; }
  /* public playlists grid: 2 columns on phones */
  .plGrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Playlist header: avoid 2-line wrap on phones */
  .plHead{align-items:flex-start;}
  .plHeadRight{gap:6px;}
  .plHeadRight .btn{ padding:8px 9px; min-height:36px; }
  .plHeadRight .btn.btn-primary{padding:8px 12px;}
  .plHeadRight .btn:not(.btn-primary){
    width:36px; min-width:36px;
    padding:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* Hide long label inside Play button (keep icon-only) */
  .plHeadRight .btn.btn-primary{font-size:0;}
  .plHeadRight .btn.btn-primary::before{content:'▶'; font-size:14px;}
}

.plTabX{opacity:.7; padding:2px 6px; border-radius:8px}
.plTabX:hover{opacity:1; background:rgba(0,0,0,.18)}


/* --- Friends list (left panel) --- */
.friendsPanel{border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:14px; overflow:hidden}
.friendsHead{display:flex; align-items:center; gap:10px; padding:10px 10px; cursor:pointer; user-select:none}
.friendsHead:hover{background:rgba(255,255,255,.04)}
.friendsTitle{font-weight:900}
.friendsMeta{margin-left:auto; font-size:12px; color: rgba(234,240,255,.65)}
.friendsChevron{opacity:.7; font-weight:900}
.friendsBody{padding:10px; border-top:1px solid rgba(255,255,255,.08)}
.friendsList{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto; padding-right:4px; scrollbar-gutter:stable both-edges}
.friendsSearchResults{margin-top:10px}
.friendsSearchResults .hint{margin:6px 0 0}
.friendsSearchResults .friendsItem{border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02)}
.friendsSearchResults .friendsItem:hover{background:rgba(255,255,255,.04)}
.friendsAddBtn{margin-left:auto; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:rgba(234,240,255,.92); padding:6px 10px; border-radius:999px; cursor:pointer; font-size:12px}
.friendsAddBtn:hover{background:rgba(255,255,255,.06)}
.friendsAddBtn.isOn{border-color: rgba(37,99,235,.30); background: rgba(37,99,235,.12)}
.friendsMiniMeta{font-size:11px; color:rgba(234,240,255,.58); margin-left:8px}
.friendsItem{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02)}
.friendsItem:hover{background:rgba(255,255,255,.04)}
.friendsDot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.22)}
.friendsDot.on{background: rgba(34,197,94,.85)}
.friendsName{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.friendsBadge{width:8px; height:8px; border-radius:999px; background: rgba(245,158,11,.85); box-shadow:0 8px 18px rgba(0,0,0,.25)}
.friendsOpen{width:30px; height:30px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); color: rgba(234,240,255,.85); font-weight:900; cursor:pointer}
.friendsOpen:hover{background:rgba(255,255,255,.04)}
.friendsHint{margin-top:10px; font-size:11px; color: rgba(234,240,255,.55)}

/* --- Chat overlay (global) --- */
/* Chat overlay (WoW-ish floating window) */
/* Chat overlay removed (use Pop-out only) */
.chatOverlay{display:none !important;}
.chatOverlay[hidden]{display:none !important}
.chatOverlayBackdrop{display:none !important;}
.chatOverlayPane{display:none !important;}
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow: -20px 0 60px rgba(0,0,0,.45);
  display:flex; flex-direction:column; padding:14px;
  overscroll-behavior: contain;
}
.chatOverlayHead{position:sticky; top:0; z-index:3; background: rgba(12,16,28,.96); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08)}
.chatOverlayTitle{font-weight:900}
.chatOverlayMeta{font-size:12px; color: rgba(234,240,255,.60); margin-top:2px}
.chatOverlayMsgs{flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:12px 12px calc(var(--playerBarOffset) + 110px) 12px; scrollbar-gutter: stable both-edges; overscroll-behavior: contain}
.chatOverlayComposer{position:sticky; bottom: var(--playerBarOffset); display:flex; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08); background: rgba(12,16,28,.96); z-index:2}
.chatOverlayComposer .search{flex:1}

.chatOverlayMsgRow{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.chatOverlayMsgRow.mine{align-items:flex-end}
.chatOverlayMsg{max-width:min(360px, 92%); padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); white-space:pre-wrap; line-height:1.35}
.chatOverlayMsgRow.mine .chatOverlayMsg{background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.20)}
.chatOverlayTime{font-size:11px; color: rgba(234,240,255,.55)}



/* ============ MOBILE (onboarding + basic browse; desktop unchanged) ============ */
@media (max-width: 720px){
  /* Track page: switch to single column to avoid overlay/wrapping collisions */
  .trackPageGrid{grid-template-columns: 1fr !important;}
  .trackHero{height: 220px !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,.08) !important;}
  .trackPageBody{padding:12px !important;}
  .trackTitleBig{font-size:28px !important; line-height:1.1 !important;}
  .trackPage .badgeRow{gap:8px !important;}

  /* Global mobile: disable UI scale transform container so fixed elements behave correctly */
  main{transform:none !important; width:100% !important;}
  .grid{grid-template-columns: 1fr !important;}

  /* Discover mobile: avoid duplicate desktop-only featured rail/teaser */
  .featuredRow{display:none !important;}

  /* Chat: use full width on phones */
  .chatMsg{max-width:100% !important;}
  .chatOverlayMsg{max-width:100% !important;}

  /* Library/Catalog: mobile rows should be usable (Title + Length + Like)
     Scope to library route so it doesn't break playlist tracklists (they also reuse .libRow). */
  body.routeLibrary .libHeaderRow, body.routeLibrary .libRow{grid-template-columns: 1fr 70px 84px !important; gap:10px !important;}
  body.routeLibrary .hArtist, body.routeLibrary .hKind, body.routeLibrary .hBpm, body.routeLibrary .hRel,
  body.routeLibrary .rArtist, body.routeLibrary .rBpm, body.routeLibrary .rRel{display:none !important;}
  /* Hide KIND cell on mobile and shift LENGTH into its place */
  body.routeLibrary .rKind{display:none !important;}
  body.routeLibrary .rLen{grid-column:2 !important; justify-self:end;}
  body.routeLibrary .rAct{grid-column:3 !important; justify-self:end;}
  body.routeLibrary .rAct{display:flex !important; gap:8px !important; justify-content:flex-end !important; flex-wrap:nowrap !important;}

  /* Library LIST view uses .rArtist for the title – keep it visible on mobile */
  body.routeLibrary .libList .libHeaderRow, body.routeLibrary .libList .libRow{grid-template-columns: 44px 1fr 70px 84px !important;}
  body.routeLibrary .libList .libHeaderRow .hTitle{display:block !important;}
  body.routeLibrary .libList .libHeaderRow .hArtist{display:block !important;}
  body.routeLibrary .libList .rTitle{grid-column:1 !important; display:flex !important; justify-content:flex-start;}
  body.routeLibrary .libList .rArtist{display:block !important; visibility:visible !important; opacity:1 !important; grid-column:2 !important; color:rgba(234,240,255,.92) !important;}
  body.routeLibrary .libList .rLen{grid-column:3 !important;}
  body.routeLibrary .libList .rAct{grid-column:4 !important;}

  /* Make cover/play easier to hit */
  body.routeLibrary .rTitle .miniCover{width:56px; height:56px; border-radius:14px;}
  body.routeLibrary .coverPlay{width:36px; height:36px; border-radius:14px;}

  /* iPhone portrait: avoid title wrapping into artist line (keeps rows readable) */
  body.routeLibrary .libRow .tTitle{white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; line-height:1.15;}
  body.routeLibrary .libRow .tSub{white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin-top:4px;}

  /* Ensure text never overlaps the cover on iPhone */
  body.routeLibrary .rTitle{gap:12px !important;}
  body.routeLibrary .rTitle .miniCover{flex:0 0 56px !important; flex-shrink:0 !important;}
  body.routeLibrary .rTitle > div:last-child{min-width:0 !important;}

  /* Profile (mobile): keep Follow/DM visible (stack actions) */
  body.routeProfile .profileHeroTop{flex-wrap:wrap; align-items:flex-start;}
  body.routeProfile .profileHeroLeft{flex:1 1 100%;}
  body.routeProfile .profileHeroActions{flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; gap:8px !important;}
  body.routeProfile .profileHeroActions .btn{flex:1 1 auto; min-width: 110px;}
  body.routeProfile .profileBackBtn{flex:0 0 auto;}
  body.routeProfile .profileStatsRow{flex-wrap:wrap;}
  body.routeProfile .profileHero .railAvatar{width:64px !important; height:64px !important;}
  body.routeProfile .profileHeroLeft > div > div:first-child{font-size:24px !important;}

  /* LIST view: title/artist live inside .rArtist cell on mobile */
  body.routeLibrary .libList .rArtist .tTitle,
  body.routeLibrary .libList .rArtist .tSub{white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
  body.routeLibrary .libList .rArtist .tTitle{line-height:1.15;}
  body.routeLibrary .libList .rArtist .tSub{margin-top:4px; opacity:.85;}

  /* Actions: keep only like + add-to-playlist on mobile list */
  body.routeLibrary .rAct .iconBare:not([data-like]):not([data-add]),
  body.routeLibrary .rAct .iconBtn{display:none !important;}
  body.routeLibrary .act2x2{display:flex !important; grid-template-columns:none !important; grid-template-rows:none !important; gap:8px !important; width:auto !important;}

  /* Katalog: Kompakt-Ansicht (mobile) → 2-Zeiler wie Discover (Title + Artist • Length)
     Scope tightly so Uploads/List view is unaffected. */
  body.routeLibrary .libList[aria-label="Katalog"] .libHeaderRow{display:none !important;}
  body.routeLibrary .libList[aria-label="Katalog"] .libRow{grid-template-columns: 1fr 84px !important; gap:10px !important;}
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rTitle{grid-column:1 !important;}
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rAct{grid-column:2 !important; justify-self:end;}
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rArtist,
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rLen,
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rKind,
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rBpm,
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rRel{display:none !important;}
  body.routeLibrary .libList[aria-label="Katalog"] .libRow .rTitle .tSub{display:block !important; color:rgba(234,240,255,.72) !important; font-size:12px !important; margin-top:3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}

  /* Sammlung: Uploads/Trash – same 2-line layout on phones */
  body.routeLibrary .libList[aria-label="Uploads"],
  body.routeLibrary .libList[aria-label="Trash"]{margin-top:6px;}
  body.routeLibrary .libList[aria-label="Uploads"] .libHeaderRow,
  body.routeLibrary .libList[aria-label="Trash"] .libHeaderRow{display:none !important;}
  body.routeLibrary .libList[aria-label="Uploads"] .libRow,
  body.routeLibrary .libList[aria-label="Trash"] .libRow{grid-template-columns: 1fr 64px !important; gap:10px !important;}
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rTitle,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rTitle{grid-column:1 !important;}
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rAct,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rAct{grid-column:2 !important; justify-self:end;}
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rArtist,
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rBpm,
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rLen,
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rRel,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rArtist,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rBpm,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rLen,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rRel{display:none !important;}
  body.routeLibrary .libList[aria-label="Uploads"] .libRow .rTitle .tSub,
  body.routeLibrary .libList[aria-label="Trash"] .libRow .rTitle .tSub{display:block !important; color:rgba(234,240,255,.72) !important; font-size:12px !important; margin-top:3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
  body.routeLibrary .rAct{min-width:0 !important;}
  body.routeLibrary .rAct .iconBare{width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; padding:0 !important;}

  /* Mobile: online/follow widget */
    .mobileOnlineWidget{background:rgba(255,255,255,.02)}
    .mobOnlineRail{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:10px 6px 6px; scrollbar-gutter: stable both-edges;
      -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type:x mandatory}
    .mobOnlineItem{min-width:86px; scroll-snap-align:start; scroll-snap-stop:always}
    .mobOnlineAvatar{width:64px; height:64px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); position:relative; overflow:hidden; display:grid; place-items:center}
    .mobOnlineAvatar img{width:100%; height:100%; object-fit:cover; display:block}
    .mobOnlineInitial{width:100%; height:100%; display:grid; place-items:center; font-weight:950; font-size:18px}
    .mobOnlineName{margin-top:8px; font-size:11px; font-weight:900; color:rgba(234,240,255,.90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:86px}
    .mobOnlineBadge{position:absolute; right:4px; bottom:4px; width:12px; height:12px; border-radius:999px; border:2px solid rgba(12,16,28,.96)}
    .mobOnlineBadge.online{background:rgba(34,197,94,.95)}
    .mobOnlineBadge.heute{background:rgba(245,158,11,.92)}

  :root{ --playerBarH: 78px; }

  /* Keep player fixed at bottom; only content scrolls */
  body{ height: 100dvh; overflow: hidden; }
  main.shell{ height: calc(100dvh - var(--topbarH)); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--playerBarH) + 14px); }
  .playerBar{ position: fixed; left:0; right:0; bottom:0; }

  /* Profile banner: remove the extra "frame" effect on phone (the hero's divider reads like a second outer outline) */
  body.routeProfile .profileHero{border-bottom:0 !important;}

  /* Playlists banner: same issue as profile hero */
  body.routePlaylists .plCard .plHero{border-bottom:0 !important;}

  /* Mobile: treat Profile/Playlists outer wrapper like a soft container (no hard left/right frame).
     This prevents the "frame continues to the bottom" look and avoids perceived right-clipping. */
  body.routeProfile .profileWrap,
  body.routePlaylists .playlistsWrap{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.routeProfile .profileHero{
    border-radius: 18px;
    margin: 0 0 10px 0;
  }
  body.routeProfile .profileLayout{padding: 0 0 14px 0;}

  /* Playlists: remove outer frame feeling and ensure content uses full width */
  body.routePlaylists .playlistsWrap{padding: 0 !important;}
  body.routePlaylists .plCard{border:0 !important; box-shadow:none !important; background: rgba(255,255,255,.02) !important;}
  body.routePlaylists .plBody{padding: 10px 0 !important;}
  body.routePlaylists .plHead{padding: 0 10px !important;}
  body.routePlaylists .libList[aria-label="Playlist Tracks"]{padding: 0 10px !important;}


  /* Main shell: hide left rail, keep content full width */
  .shell{ padding:10px; gap:10px; }
  main.shell > aside.left{ display:none !important; }

  /* Topbar: reduce vertical bulk + respect iOS safe area so right buttons are reachable */
  header.topbar{ padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
  .topActions{ gap:8px; padding-right: max(0px, env(safe-area-inset-right)); }
  #accountMenuBtn{ margin-right: 4px; }
  .lang{ display:none; }
  #subscribeBtn{ display:none; }
  /* keep burger + login/profile */

  /* iOS Safari: prevent "auto-zoom" after login/focus (needs >=16px on inputs) */
  input.search, textarea.authInput, input.authInput, select.authInput,
  #libSearch, #topSearch, #friendsSearch, #loginEmail, #loginPw, #createEmail, #createPw, #createName{
    font-size:16px !important;
  }

  /* iOS quirk: uiScale (transform + width compensation) can cause right-side clipping on some routes.
     Disable uiScale transform just for Profile + Playlists on phones. */
  body.routeProfile main,
  body.routePlaylists main{
    transform:none !important;
    width:100% !important;
  }

  /* Auth: fit small screens + avoid keyboard squeeze */
  .authScreen{ padding:16px 12px; min-height: 100dvh; }
  .authCard{ padding:14px; border-radius:20px; }
  .authKnobRow{ margin:12px 0 8px; }
  .authKnob{ width:76px; height:76px; }
  .authCountdown{ font-size:22px; }
  .authRow{ flex-direction:column; }
  .authFooter{ flex-wrap:wrap; }
  .authMini{ display:none; }
  .authSnow{ display:none; }

  /* iPhone landscape: allow scrolling in auth (viewport height is tiny) */
  @media (orientation: landscape){
    body.authMode{ height:auto !important; overflow:auto !important; }
    body.authMode main.shell{ height:auto !important; overflow-y:visible !important; padding-bottom:14px !important; }
    body.authMode .authScreen{ min-height:auto !important; }
  }

  /* Discover: prevent horizontal swipe + stack right column under Top10 */
  body{ overflow-x:hidden; }
  .grid.discoverGrid{ grid-template-columns: 1fr !important; }
  .grid.discoverGrid > *{ grid-column: 1 !important; grid-row: auto !important; min-width:0; }
  .grid.discoverGrid .pinHeroMini{ order:2; }

  /* Trending rows: clamp text + align actions nicely */
  .top10List .tTitle{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .top10List .chartMeta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 52vw;}
  /* On phone keep only Like + Add + Vote */
  .top10List [data-share], .top10List [data-cart]{display:none !important;}
  .top10List [data-add]{display:inline-flex !important;}
  .top10List .chartRow > div:last-child{margin-left:auto; display:flex; align-items:center; gap:10px; justify-content:flex-end; min-width:104px;}
  .top10List .iconBare{min-width:30px; min-height:30px; padding:4px;}
  .top10List .voteBare{width:30px; height:30px; font-size:12px;}

}

@media (max-width: 420px){
  .authCountdown{ font-size:20px; }
  .authTab{ padding:10px 8px; }
}


/* Mobile hard guard: prevent horizontal swipe/scroll (iOS) */
@media (max-width: 720px){
  html, body{ overflow-x:hidden !important; overscroll-behavior-x:none; touch-action: pan-y; }
  .shell, main.shell, #route, .grid{ max-width:100vw; overflow-x:hidden; }
}

/* iOS Safari landscape: reduce transparency/backdrop-filter artifacts */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){
  /* keep background image; only disable extra effects */
  .authCard{ backdrop-filter: none !important; background: rgba(10,16,32,.90) !important; }
  .card{ backdrop-filter:none !important; }
}


/* iOS Safari Mobile Landscape: go functional/clean to avoid blur/transparency artifacts */
@media (max-width: 980px) and (orientation: landscape){
  /* kill heavy compositing effects */
  .bg .glow{ display:none !important; }
  .card, .left, header.topbar, .playerBar, .drawer, .bearPanelInner{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  /* make surfaces a bit more solid */
  .card{ background: rgba(10,16,32,.90) !important; }
  header.topbar{ background: rgba(8,12,22,.92) !important; }
}


@media (max-width: 720px){
  /* Topbar: prevent overflow that forces horizontal swipe to reach menu */
  header.topbar{ overflow:hidden; }
  .brandText{ display:none; }
  header.topbar .logo{ width:44px; height:44px; border-radius:16px; }
  .topActions{ margin-left:auto; }
  .cartBtn{ display:none; }

  /* Mobile topbar search */
  nav.topnav{display:none !important;}
  .topSearchMobile{display:flex !important; flex:1; max-width: 520px; margin-left:10px;}
  .topSearchMobile .search{width:100%; height:38px;}
  .topSearchMobile .searchBtn{height:38px; width:38px; margin-left:auto;}
}

/* default: hidden */
.topSearchMobile{display:none;}

/* Force phone layout via JS flag (covers iOS/Chrome cases where viewport width is reported as desktop) */
html.isPhone nav.topnav{display:none !important;}
html.isPhone .topSearchMobile{display:flex !important; flex:1; max-width: 520px; margin-left:10px;}
html.isPhone .topSearchMobile .search{width:100%; height:38px;}
html.isPhone .topSearchMobile .searchBtn{height:38px; width:38px; margin-left:auto;}

html.isPhone main{transform:none !important; width:100% !important;}
html.isPhone .grid{grid-template-columns:1fr !important;}
html.isPhone main.shell > aside.left{display:none !important;}
html.isPhone .shell{padding:10px !important; gap:10px !important;}
html.isPhone html, html.isPhone body{overflow-x:hidden !important;}
html.isPhone main.shell, html.isPhone #route{overflow-x:hidden !important;}

/* iOS/Phone: uiScale transform (main width compensation) can cause right-edge clipping on some routes.
   When html.isPhone is set (UA fallback), disable uiScale for these routes explicitly. */
html.isPhone body.routeProfile main,
html.isPhone body.routePlaylists main{
  transform:none !important;
  width:100% !important;
}
/* Profile + Playlists: hard-prevent horizontal scroll on iPhone.
   Once widths are clamped, overflow-x hidden is safe and removes the "sideways pan" entirely. */
html.isPhone body.routeProfile main.shell,
html.isPhone body.routeProfile #route,
html.isPhone body.routePlaylists main.shell,
html.isPhone body.routePlaylists #route{
  overflow-x:hidden !important;
  max-width:100vw !important;
}

/* Force scroll container to be viewport-wide (avoids uiScale width math / subpixel drift) */
html.isPhone body.routeProfile main.shell,
html.isPhone body.routePlaylists main.shell{
  width:100vw !important;
}

/* Clamp potentially "layout-breaking" children so nothing can push beyond viewport */
html.isPhone body.routeProfile .profileWrap,
html.isPhone body.routeProfile .profileWrap *,
html.isPhone body.routePlaylists .playlistsWrap,
html.isPhone body.routePlaylists .playlistsWrap *{
  max-width:100% !important;
}
html.isPhone body.routeProfile .profileWrap *{min-width:0 !important;}
html.isPhone body.routePlaylists .playlistsWrap *{min-width:0 !important;}

/* Long pills/links (e.g. objectstorage URL) */
html.isPhone body.routeProfile .badgePill,
html.isPhone body.routeProfile .chipBtn{
  max-width:100% !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html.isPhone .badgeRow{flex-wrap:wrap !important;}
html.isPhone .badgeRow > *{max-width:100%;}
html.isPhone .seg{flex-wrap:wrap !important;}
html.isPhone .segBtn{max-width:100%;}


/* Role pick (fullscreen overlay) */
/* IMPORTANT: main uses uiScale transform; fixed-position children inside a transformed ancestor can behave like absolute.
   For role pick we force uiScale off via body.roleMode main{transform:none}. */
.rolePickOverlay{position:fixed; inset:0; z-index:9999; background:#000; display:grid; place-items:center; padding:30px; overflow:auto; -webkit-overflow-scrolling:touch;}
.rolePickStage{opacity:0; animation: roleIn 1.2s ease-out both; animation-delay:.35s}
.rolePickOverlay.roleOut{animation: roleOutBlack 2s ease-in both}
.rolePickStage.roleOut{animation: roleOutBlack 2s ease-in both}
@keyframes roleIn{from{opacity:0} to{opacity:1}}
@keyframes roleOutBlack{from{opacity:1} to{opacity:0}}

.rolePickRow{display:flex; gap:36px; justify-content:center; align-items:flex-start; flex-wrap:wrap}
.roleBtn{border:0; background:transparent; cursor:pointer; text-align:center; width:220px}
.roleAv{width:170px; height:170px; border-radius:999px; object-fit:cover; display:block; margin:0 auto;
  border:3px solid color-mix(in srgb, var(--ring) 80%, rgba(255,255,255,.15));
  box-shadow: 0 0 0 6px rgba(0,0,0,.85), 0 18px 52px rgba(0,0,0,.55), 0 0 32px color-mix(in srgb, var(--ring) 35%, transparent);
}
.roleLbl{margin-top:14px; font-weight:950; color:rgba(255,255,255,.92)}
.roleSub{margin-top:6px; font-size:12px; color:rgba(234,240,255,.70)}
.rolePickRow{margin-bottom:16px}

/* Mobile role pick: scale cards down across many phone sizes (iPhone SE → Pro Max) */
@media (max-width: 720px){
  .rolePickOverlay{padding:18px;}
  .rolePickStage{padding-bottom: 24px;}
  .rolePickRow{gap:20px;}
  .roleBtn{width: min(220px, 86vw);}
  .roleAv{
    width: clamp(118px, 42vw, 156px);
    height: clamp(118px, 42vw, 156px);
  }
  .roleLbl{margin-top:10px;}
}
@media (max-width: 420px){
  .rolePickOverlay{padding:14px;}
  .roleSub{font-size:11px;}
}

/* UA fallback: some in-app browsers report a wider viewport; enforce phone role sizing anyway */
html.isPhone .rolePickOverlay{padding:18px;}
html.isPhone .rolePickStage{padding-bottom: 24px;}
html.isPhone .rolePickRow{gap:20px;}
html.isPhone .roleBtn{width: min(220px, 86vw);}
html.isPhone .roleAv{width: clamp(118px, 42vw, 156px); height: clamp(118px, 42vw, 156px);} 
html.isPhone .roleLbl{margin-top:10px;}
html.isPhone .roleSub{font-size:11px;}

/* Fade in Discover after role selection (~3s) */
.roleFadeIn #route{animation: roleFadeIn 3s ease-out both}
@keyframes roleFadeIn{from{opacity:0} to{opacity:1}}

/* Role mode: avoid flashes + avoid transformed-ancestor issues for fixed overlay */
body.roleMode header.topbar,
body.roleMode main.shell > aside.left,
body.roleMode main.shell > aside.left *{visibility:hidden !important; pointer-events:none !important;}
body.roleMode .playerBar{display:none !important;}
body.roleMode main{transform:none !important; width:100% !important;}


/* Global UI scale (FullHD comfort) */
main{transform-origin: top left; transform: scale(var(--uiScale)); width: calc(100% / var(--uiScale));}


/* iPadOS: force desktop layout (don't apply mobile-only hide/stack rules) */
@media (max-width: 720px){
  html.isIpad body{ overflow-x:auto !important; touch-action:auto !important; }
  html.isIpad main.shell{ height:auto !important; overflow-y: visible !important; padding-bottom: 14px !important; }
  html.isIpad main.shell > aside.left{ display:block !important; }
  html.isIpad .shell{ padding:14px !important; gap:14px !important; }
  html.isIpad header.topbar{ padding:14px 14px !important; }
  html.isIpad .grid.discoverGrid{ grid-template-columns: 1fr 1fr !important; }
}

html.isPhone #loginBtn{display:none !important;}
/* Hard-guard: if JS sets [hidden], don't let layout/CSS bring it back */
#loginBtn[hidden]{display:none !important;}
#profileMenuBtn[hidden]{display:none !important;}

/* Prevent horizontal scrolling caused by scale/width math (esp. iPad) */
html, body{ overflow-x:hidden; }
main{ max-width:100vw; }
header.topbar{ max-width:100vw; }

/* iPad-ish: keep topbar usable */

/* iPad specifically (covers wide iPad landscape where max-width media queries don't trigger) */
html.isIpad .lang{display:none !important;}
html.isIpad header.topbar{ font-size: 13px; }
html.isIpad .topnav{ gap:10px; }
html.isIpad .toplink{ font-size:13px; padding:6px 8px; }

/* Keep the desktop search from swallowing 4 menu items */
html.isIpad nav.topnav .searchWrap{ margin-left:8px; padding:3px 8px; gap:6px; max-width: 260px; }
html.isIpad nav.topnav .search{ width:170px; max-width: 170px; }
html.isIpad nav.topnav .searchBtn{ width:28px; height:28px; }

/* iPad portrait: enforce a clean 2-row topbar
   Row 1: brand + search + actions
   Row 2: nav links (Entdecken..Upload) */
@media (orientation: portrait){
  html.isIpad header.topbar{ flex-wrap:wrap; row-gap:8px; }
  html.isIpad header.topbar .brand{ order:1; }

  /* Collapsible top search (default collapsed to a magnifier button) */
  html.isIpad header.topbar .topSearchMobile{ display:flex !important; order:2; flex: 1 1 auto; max-width: 460px; margin-left:10px; }
  html.isIpad header.topbar .topSearchMobile .search{ height:34px; }
  html.isIpad header.topbar .topSearchMobile .searchBtn{ height:34px; width:34px; }
  html.isIpad header.topbar .topSearchMobile.tsCollapsed{ max-width: 44px !important; }
  html.isIpad header.topbar .topSearchMobile.tsCollapsed .search{
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* top actions to the right on row 1 */
  html.isIpad header.topbar .topActions{ order:3; margin-left:auto; }
  /* lock order: cart → abo → profile */
  html.isIpad header.topbar .topActions .cartBtn{ order:1; }
  html.isIpad header.topbar .topActions #subscribeBtn{ order:2; }
  html.isIpad header.topbar .topActions #profileMenuBtn{ order:3; }
  html.isIpad header.topbar .topActions #loginBtn{ order:3; }

  /* row 2: nav links; hide the desktop search inside nav on portrait */
  html.isIpad nav.topnav{ order:4; flex:1 1 100%; justify-content:flex-start; }
  html.isIpad nav.topnav .searchWrap{ display:none !important; }

  /* Make profile chip compact (avatar only) so actions fit */
  html.isIpad .profileChip{ padding:6px 8px; }
  html.isIpad .profileChip .pcName,
  html.isIpad .profileChip .pcLevel{ display:none !important; }
  html.isIpad .profileChip .pcAvatar{ width:28px; height:28px; }
}

/* Reduce brand footprint a bit */
html.isIpad .brandLogo{ height: 18px; }
html.isIpad .logo{ width:28px; height:28px; }

/* Hide least-important top links on iPad so right-side actions stay reachable */
html.isIpad .topnav a.toplink[href="#/rewards"]{ display:none !important; }

/* For smaller tablets / narrow desktop windows: allow wrapping */
@media (max-width: 1100px){
  .lang{display:none !important;}
  header.topbar{ flex-wrap:wrap; row-gap:8px; font-size: 13px; }
  .topnav{ gap:10px; }
  .toplink{ font-size:13px; padding:6px 8px; }

  header.topbar .searchWrap{padding:3px 8px; gap:6px;}
  header.topbar .searchBtn{width:28px; height:28px;}
  header.topbar .search{ line-height: 1.1; }

  .brandLogo{ height: 18px; }
  .logo{ width:28px; height:28px; }

  .topnav a.toplink[href="#/rewards"]{ display:none !important; }

  nav.topnav{ flex: 1 1 100%; justify-content:flex-start; flex-wrap:wrap; row-gap:8px; min-width:0; }
  nav.topnav .searchWrap{ order:99; width:100%; max-width:none; }
  nav.topnav .search{ width:100%; max-width:none; }
}