/* FPS Radio-Katalog — hell, FPS-Branding */
:root{
  --yellow:#FABD41;
  --yellow-dk:#E3A628;
  --black:#1E1F1C;
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --border:#E6E3DA;
  --muted:#6B6B68;
  --text:#1E1F1C;
  --ok:#2F7D2F;
  --shadow:0 1px 2px rgba(30,31,28,.06), 0 4px 12px rgba(30,31,28,.04);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; padding-bottom:120px;
}

/* Header */
.hdr{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 24px; background:#fff; color:var(--text);
  position:sticky; top:0; z-index:10;
  border-bottom:3px solid var(--yellow);
  box-shadow:0 1px 6px rgba(30,31,28,.04);
}
.hdr-left{display:flex; align-items:center; gap:18px; min-width:0}
.brand-logo{
  height:52px; width:auto; display:block; flex:0 0 auto;
  object-fit:contain;
}
.brand-divider{
  width:1px; background:var(--border); align-self:stretch; margin:2px 0;
}
.hdr h1{margin:0; font-size:19px; letter-spacing:.3px; font-weight:700}
.sub{margin:2px 0 0; color:var(--muted); font-size:13px}
.hdr-right{display:flex; align-items:center; gap:10px; font-size:13px; white-space:nowrap}
.hdr-btn{padding:6px 12px; font-weight:600}
.stats{color:var(--muted); font-size:12.5px}

/* Filters */
.filters{
  padding:16px 24px 8px; background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:75px; z-index:9;
}
.search-wrap{position:relative; margin-bottom:10px}
#q{
  width:100%; padding:12px 42px 12px 14px; font-size:15px;
  border:2px solid var(--border); border-radius:10px; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
#q:focus{outline:none; border-color:var(--yellow); box-shadow:0 0 0 4px rgba(250,189,65,.18)}
#clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:20px; line-height:1; padding:4px 10px;
}
.filter-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;
}
.chip-check{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:1px solid var(--border); border-radius:999px;
  background:#fff; font-size:13px; cursor:pointer; user-select:none;
}
.chip-check:has(input:checked){background:var(--yellow); border-color:var(--yellow-dk); color:var(--black); font-weight:600}
.chip-check input{accent-color:var(--yellow-dk); margin:0}
.bitrate-wrap{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.bitrate-wrap input[type=range]{accent-color:var(--yellow-dk)}
.sort-wrap{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.sort-wrap select{
  padding:5px 8px; border:1px solid var(--border); border-radius:8px;
  background:#fff; font-size:13px; cursor:pointer; font-family:inherit;
}
.sort-wrap select:focus{outline:none; border-color:var(--yellow-dk)}
.adfree-chip:has(input:checked){background:#E3F5E3; border-color:var(--ok); color:var(--ok)}
.sources-row{border-top:1px dashed var(--border); padding-top:8px; margin-top:2px}
.sources-label{font-size:12px; color:var(--muted); font-weight:600; margin-right:4px}
.chip-check .cnt{opacity:.55; font-size:10.5px; margin-left:3px; font-weight:500}
.btn-ghost{
  background:transparent; border:1px solid var(--border); border-radius:8px;
  padding:5px 10px; cursor:pointer; font-size:13px; color:var(--text);
}
.btn-ghost:hover{background:#F2F0EA}

/* Aktive-Filter-Leiste (Sammlungs-Indicator) */
.active-filter-bar{
  display:flex; gap:8px; flex-wrap:wrap; padding:8px 0 6px;
  border-bottom:1px dashed var(--border); margin-bottom:6px;
}
.active-filter-bar.hidden{display:none}
.active-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--yellow); color:var(--black); border:1px solid var(--yellow-dk);
  border-radius:999px; padding:6px 12px 6px 10px; cursor:pointer;
  font-size:13px; font-weight:600;
  transition:background .12s;
}
.active-chip:hover{background:var(--yellow-dk)}
.active-chip .x{font-size:18px; line-height:1; margin-left:2px; font-weight:400}

/* Genre bar — zwei Ebenen */
.genre-bar{
  display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 8px;
}
.genre-bar-sub{
  border-top:1px dashed var(--border); padding-top:8px; margin-top:2px;
  animation:slideDown .18s ease-out;
}
.genre-bar-sub.hidden{display:none}
@keyframes slideDown{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.genre-chip{
  padding:7px 13px; border:1px solid var(--border); border-radius:999px;
  background:#fff; font-size:13px; white-space:nowrap; cursor:pointer;
  font-weight:600; transition:background .1s, border-color .1s, color .1s;
}
.genre-chip:hover{background:#F6F3EA; border-color:var(--yellow-dk)}
.genre-chip.active{background:var(--black); color:#fff; border-color:var(--black)}
.genre-chip.sub{padding:5px 11px; font-size:12.5px; font-weight:500}
.genre-chip.sub.active{background:var(--yellow); color:var(--black); border-color:var(--yellow-dk)}
.genre-chip .cnt{opacity:.55; font-size:11px; margin-left:4px; font-weight:500}
.genre-chip.active .cnt{opacity:.75}

/* Grid */
.grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  padding:16px 24px;
}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
  transition:transform .08s, box-shadow .15s;
}
.card:hover{box-shadow:0 2px 4px rgba(30,31,28,.08), 0 8px 20px rgba(30,31,28,.06)}
.card.selected{outline:2px solid var(--yellow-dk); box-shadow:0 2px 4px rgba(30,31,28,.1), 0 8px 20px rgba(250,189,65,.18)}
.card-head{display:flex; align-items:start; gap:10px; justify-content:space-between}
.card-select{display:flex; align-items:center; padding-top:2px; cursor:pointer}
.card-select input{width:16px; height:16px; accent-color:var(--yellow-dk); cursor:pointer}
.station-logo{
  width:42px; height:42px; flex:0 0 42px;
  border-radius:8px; background:#F2F0EA; border:1px solid var(--border);
  object-fit:cover; display:block;
}
.station-logo.placeholder{
  display:grid; place-items:center; color:var(--muted);
}
.station-logo.err{display:none}
.btn-fav{
  background:transparent; border:none; padding:4px; cursor:pointer; color:#C9C4B0;
  border-radius:6px; flex:0 0 auto;
}
.btn-fav:hover{background:#FEF4D8; color:var(--yellow-dk)}
.btn-fav.on{color:var(--yellow-dk)}
.card-title{margin:0; font-size:15px; line-height:1.3; font-weight:700}
.card-city{font-size:12px; color:var(--muted); margin-top:2px}
.rank{
  display:inline-grid; place-items:center; min-width:28px; height:24px;
  border-radius:6px; background:var(--yellow); color:var(--black);
  font-size:11px; font-weight:700; padding:0 6px;
}
.badges{display:flex; flex-wrap:wrap; gap:4px; margin:-2px 0; align-items:center}
.badge{
  font-size:11px; padding:2px 7px; border-radius:999px;
  background:#F2F0EA; color:var(--text); border:1px solid var(--border);
  display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
}
.badge.fmt{background:var(--black); color:#fff; border-color:var(--black); font-weight:600}
.badge.br{background:#fff; border-color:var(--yellow-dk); color:var(--yellow-dk); font-weight:600}
.badge.cc{background:#fff; color:var(--muted); font-weight:600; letter-spacing:.5px}
.badge.adfree{background:#E3F5E3; color:var(--ok); border-color:#B8E0B8; font-weight:700}
.badge.tos-check{background:#FFF6E0; color:#8C6D00; border-color:#F0DFA0; font-weight:600; cursor:help}
.badge.tos-ok{background:#E3F5E3; color:var(--ok); border-color:#B8E0B8; font-weight:600; cursor:help}
.badge.tos-private{background:#FBEAE6; color:#9A2A13; border-color:#EFC2B7; font-weight:600; cursor:help}
.badge.src{background:#EFF3F7; color:#3A5570; border-color:#D7E1EB; font-weight:600}
.badge.src-radio-de{background:#FFF3CC; color:#7A5800; border-color:#F0DFA0}
.badge.src-curated{background:#E9F0FF; color:#2A4A8A; border-color:#C9D8F5}
.badge.src-radio-browser{background:#F0F0F0; color:#555; border-color:#DDD}
.badge.multi{background:#FAEAF6; color:#7A2A6F; border-color:#E7C6DE; font-weight:600; cursor:help}
.badge.broken{background:#FBEAE6; color:#9A2A13; border-color:#EFC2B7; font-weight:700}
.broken-chip:has(input:checked){background:#FBEAE6; border-color:#9A2A13; color:#9A2A13}
.check-info{font-size:11px; color:var(--muted); margin-left:auto}
.tags{display:flex; flex-wrap:wrap; gap:4px}
.tag{font-size:11px; padding:1px 6px; border-radius:4px; background:#F6F3EA; color:var(--muted)}

.url-row{display:flex; gap:6px; align-items:center}
.url{
  flex:1; font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:11.5px;
  background:#F6F3EA; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:text; user-select:all;
}
.btn-copy{
  background:var(--yellow); color:var(--black); border:1px solid var(--yellow-dk);
  border-radius:8px; padding:0; width:38px; height:38px;
  display:inline-grid; place-items:center; cursor:pointer; flex:0 0 38px;
  transition:background .12s, transform .08s;
}
.btn-copy:hover{background:var(--yellow-dk)}
.btn-copy:active{transform:scale(.93)}
.btn-copy .ico{display:block}
.btn-copy .ico-check{display:none}
.btn-copy.copied{background:var(--ok); color:#fff; border-color:var(--ok)}
.btn-copy.copied .ico-copy{display:none}
.btn-copy.copied .ico-check{display:block}

.card-actions{display:flex; flex-wrap:wrap; gap:6px}
.btn-play{
  background:var(--black); color:#fff; border:none; border-radius:8px;
  padding:6px 12px; font-size:13px; cursor:pointer; font-weight:600;
}
.btn-play:hover{background:#000}
.btn-play.playing{background:var(--yellow); color:var(--black)}
.action-link{
  font-size:12px; color:var(--muted); text-decoration:none;
  padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff;
}
.action-link:hover{background:#F2F0EA; color:var(--text)}

/* Footer */
.ftr{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; color:var(--muted); font-size:12px;
  border-top:1px solid var(--border); background:var(--surface);
}

/* Toast */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--black); color:#fff; padding:10px 18px; border-radius:999px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  font-size:13px; font-weight:600; z-index:100;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Player (Live-Radio, ohne Progressbar) */
.player{
  position:fixed; bottom:0; left:0; right:0;
  background:var(--surface); border-top:2px solid var(--yellow);
  padding:10px 18px; display:flex; align-items:center; gap:14px;
  box-shadow:0 -4px 14px rgba(30,31,28,.08); z-index:50;
}
.player.hidden{display:none}
.pl-logo{
  width:52px; height:52px; border-radius:8px; object-fit:cover;
  background:#F2F0EA; border:1px solid var(--border); flex:0 0 52px;
}
.pl-logo.err{background:#F2F0EA; border-color:var(--border);}
.pl-logo.placeholder{background:#F2F0EA}
.pl-col{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.pl-row-1{display:flex; align-items:center; gap:10px; min-width:0}
.pl-row-2{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); min-width:0}
.pl-label{font-weight:600; color:var(--text); flex:0 0 auto}
.pl-now{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1;
  font-style:italic;
}
.pl-btn{
  background:var(--black); color:#fff; border:none; border-radius:50%;
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  flex:0 0 40px; transition:background .1s;
}
.pl-btn:hover{background:#000}
.pl-btn .ico-pause{display:none}
.player.playing .pl-btn .ico-play{display:none}
.player.playing .pl-btn .ico-pause{display:block}
.pl-live{
  display:inline-flex; align-items:center; gap:5px;
  background:#FBEAE6; color:#9A2A13; border:1px solid #EFC2B7;
  border-radius:4px; padding:2px 7px; font-size:11px; font-weight:700; letter-spacing:.8px;
  flex:0 0 auto;
}
.pl-live .dot{
  width:7px; height:7px; background:#D93116; border-radius:50%;
  animation:plLivePulse 1.6s ease-in-out infinite;
}
@keyframes plLivePulse{0%,100%{opacity:.45} 50%{opacity:1}}
.pl-name{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:240px}
.pl-info{font-size:12px; color:var(--muted); flex:0 0 auto; white-space:nowrap}
.pl-volume{display:flex; align-items:center; gap:6px; color:var(--muted); flex:0 0 auto}
.pl-volume input[type=range]{width:90px; accent-color:var(--yellow-dk)}
.pl-close{font-size:18px; flex:0 0 auto}
#audio{display:none}

/* Empty state */
.empty{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted);
}

/* ------------------------------ Bulk-Bar */
.bulk-bar{
  position:fixed; bottom:72px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 -4px 20px rgba(30,31,28,.1), 0 4px 14px rgba(30,31,28,.08);
  padding:10px 14px; display:flex; gap:14px; align-items:center; z-index:60;
  flex-wrap:wrap; max-width:calc(100vw - 24px);
}
.bulk-bar.hidden{display:none}
.bulk-info{font-weight:600; color:var(--text); font-size:14px; padding-right:8px; border-right:1px solid var(--border)}
.bulk-info strong{font-size:18px; color:var(--yellow-dk)}
.bulk-actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.btn-primary{
  background:var(--black); color:#fff; border:none; border-radius:8px;
  padding:7px 14px; font-weight:600; font-size:13px; cursor:pointer;
}
.btn-primary:hover{background:#000}
.btn-yellow{
  background:var(--yellow); color:var(--black); border:1px solid var(--yellow-dk);
  border-radius:8px; padding:7px 14px; font-weight:700; font-size:13px; cursor:pointer;
}
.btn-yellow:hover{background:var(--yellow-dk)}
.btn-danger{
  background:#fff; color:#9A2A13; border:1px solid #EFC2B7; border-radius:8px;
  padding:7px 14px; font-weight:600; font-size:13px; cursor:pointer;
}
.btn-danger:hover{background:#FBEAE6}

/* ------------------------------ Sammlungen-Panel */
.col-panel{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:90vw;
  background:var(--surface); border-left:3px solid var(--yellow);
  box-shadow:-4px 0 20px rgba(30,31,28,.08);
  transform:translateX(100%); transition:transform .25s ease-out;
  z-index:70; display:flex; flex-direction:column;
}
.col-panel.open{transform:translateX(0)}
.col-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.col-panel-head h2{margin:0; font-size:17px}
.col-panel-body{flex:1; overflow-y:auto; padding:10px 12px}
.col-panel-foot{padding:12px 18px; border-top:1px solid var(--border); font-size:12px; color:var(--muted)}
.col-empty{padding:20px 10px; text-align:center; color:var(--muted); font-size:13px}
.col-row{
  display:flex; flex-direction:column; gap:6px; padding:10px;
  border:1px solid var(--border); border-radius:10px; margin-bottom:6px;
}
.col-row.active{border-color:var(--yellow-dk); background:#FEF7E0}
.col-load{
  background:transparent; border:none; padding:0; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; width:100%; color:var(--text);
}
.col-load:hover strong{color:var(--yellow-dk)}
.col-load strong{font-size:14px}
.col-meta{font-size:12px; color:var(--muted)}
.col-actions{display:flex; gap:4px; flex-wrap:wrap}

/* ------------------------------ Modal */
.modal{
  position:fixed; inset:0; background:rgba(30,31,28,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:100; padding:20px;
}
.modal.hidden{display:none}
.modal-card{
  background:var(--surface); border-radius:14px; max-width:520px; width:100%;
  max-height:90vh; display:flex; flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  animation:modalIn .15s ease-out;
}
@keyframes modalIn{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.modal-head h2{margin:0; font-size:17px}
.modal-body{padding:16px 18px; overflow-y:auto}

/* QR */
.qr-wrap{display:flex; flex-direction:column; gap:12px; align-items:center}
.qr-box{background:#fff; padding:12px; border-radius:10px; border:1px solid var(--border); width:100%; max-width:360px}
.qr-box svg{display:block}
.qr-meta{display:flex; gap:8px; width:100%; align-items:center}
.qr-url{
  flex:1; font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:11.5px;
  background:#F6F3EA; border:1px solid var(--border); border-radius:8px;
  padding:6px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qr-hint{font-size:12px; color:var(--muted); text-align:center; margin:0}

/* Form */
.form{display:flex; flex-direction:column; gap:10px}
.form label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--text); font-weight:600}
.form input, .form select{
  padding:8px 10px; font-size:14px; border:1.5px solid var(--border); border-radius:8px;
  background:#fff; font-family:inherit; font-weight:normal;
}
.form input:focus, .form select:focus{outline:none; border-color:var(--yellow-dk); box-shadow:0 0 0 3px rgba(250,189,65,.15)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form-actions{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap}

/* Neue Buttons/Chips */
.btn-qr{font-size:12px; display:inline-flex; align-items:center; gap:3px}
.fav-chip:has(input:checked){background:#FEF4D8; border-color:var(--yellow-dk); color:var(--yellow-dk)}
.src-custom:has(input:checked){background:#E9F0FF; border-color:#C9D8F5; color:#2A4A8A}
.act-edit, .act-del{color:var(--muted); padding:5px 8px}
.act-del:hover{background:#FBEAE6; color:#9A2A13}

/* Compact mode on scroll */
body.compact .hdr{
  padding:6px 24px;
  transition:padding .25s ease;
}
body.compact .brand-logo{
  height:28px;
  transition:height .25s ease;
}
body.compact .hdr h1{font-size:14px; transition:font-size .25s ease}
body.compact .sub{display:none}
body.compact .brand-divider{margin:0}
body.compact .hdr-btn{padding:4px 8px; font-size:12px}
body.compact .stats{font-size:11px}

body.compact .filters{
  padding:8px 24px 4px;
  top:47px;
  transition:padding .25s ease, top .25s ease;
}
body.compact .filter-row,
body.compact .sources-row,
body.compact .genre-bar,
body.compact .genre-bar-sub,
body.compact .active-filter-bar,
body.compact #checkInfo{
  max-height:0; overflow:hidden; opacity:0; margin:0; padding-top:0; padding-bottom:0; border:none;
  transition:max-height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease;
}
body.compact .search-wrap{margin-bottom:4px}

/* Smooth transitions for non-compact */
.hdr{transition:padding .25s ease}
.brand-logo{transition:height .25s ease}
.hdr h1{transition:font-size .25s ease}
.filters{transition:padding .25s ease, top .25s ease}
.filter-row,
.sources-row,
.genre-bar,
.genre-bar-sub,
.active-filter-bar{
  max-height:500px; opacity:1;
  transition:max-height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease;
}

@media (max-width:640px){
  .filters{top:70px}
  .grid{grid-template-columns:1fr; padding:12px}
  .hdr{padding:12px}
  .filters{padding:12px}
  .hdr-right{display:none}
  .pl-meta{max-width:45%}
}