/* Blueheartradio V72 – moderne Song History im Stil des Footer-Players */
.sh-page{display:flex;flex-direction:column;gap:26px}
.sh-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:0}
.sh-heading h1{margin:4px 0 8px;font-size:clamp(34px,4vw,56px);line-height:1.02;color:#f2f9ff}
.sh-heading h1 span{background:linear-gradient(90deg,#2fe4ff,#7bc7ff,#d279ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-heading p{margin:0;max-width:58ch;color:#c2d9ee}
.sh-refresh{border:1px solid rgba(91,201,255,.34);background:linear-gradient(135deg,#112f62,#123e81);color:#f7fdff;border-radius:999px;padding:12px 18px;font-weight:800;box-shadow:0 0 18px rgba(42,166,255,.18)}
.sh-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:24px;align-items:start}
.sh-now,.sh-recent{border:1px solid rgba(81,194,255,.24);border-radius:30px;background:linear-gradient(140deg,rgba(7,30,61,.94),rgba(7,18,44,.97));box-shadow:0 16px 40px rgba(0,0,0,.24),0 0 24px rgba(52,176,255,.09),0 0 30px rgba(165,80,255,.08)}
.sh-now{padding:20px}
.sh-now-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}
.sh-onair{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(30,83,151,.32);color:#f7fbff;border:1px solid rgba(83,193,255,.24);font-weight:900;letter-spacing:.04em}
.sh-onair i{width:10px;height:10px;border-radius:50%;background:#2eff8b;box-shadow:0 0 0 6px rgba(46,255,139,.14),0 0 12px rgba(46,255,139,.45)}
.sh-now-station{color:#87d9ff;font-weight:800}
.sh-now-cover-wrap{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(95,206,255,.38);box-shadow:0 0 26px rgba(63,183,255,.18),0 0 30px rgba(183,69,255,.1);margin-bottom:18px}
.sh-now-cover{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#092241}
.sh-now-cover-wrap::after{content:"";position:absolute;inset:auto 16px 12px 16px;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(58,223,255,.8),rgba(188,86,255,.8),rgba(0,0,0,0));}
.sh-now-details h2{margin:0 0 6px;color:#f3fbff;font-size:clamp(26px,3vw,34px);line-height:1.08}
.sh-now-details p{margin:0;color:#8fd8ff;font-size:18px;font-weight:700}
.sh-now-caption{display:inline-block;margin-bottom:10px;color:#c986ff;font-weight:900;letter-spacing:.12em;font-size:12px}
.sh-now-bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid rgba(112,185,235,.14);color:#cfe1f2}
.sh-recent{padding:18px 18px 16px;position:relative}
.sh-recent-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px}
.sh-section-kicker{display:inline-block;color:#77e5ff;font-weight:900;letter-spacing:.14em;font-size:12px;margin-bottom:6px}
.sh-recent-head h2{margin:0;color:#eff8ff;font-size:34px;line-height:1.05}
.sh-auto{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,rgba(26,89,160,.4),rgba(67,23,103,.42));border:1px solid rgba(99,192,255,.22);font-weight:900;color:#f6fbff}
.sh-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sh-track{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:16px;padding:10px 14px;border-radius:24px;background:linear-gradient(90deg,rgba(4,29,59,.95),rgba(7,36,78,.95) 56%,rgba(29,18,67,.96));border:1px solid rgba(90,195,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(18,78,140,.1),0 0 18px rgba(52,176,255,.1),0 0 20px rgba(169,75,255,.08)}
.sh-track::after{content:"";position:absolute;right:138px;bottom:12px;width:120px;height:28px;opacity:.58;background:linear-gradient(90deg,transparent 0%,rgba(39,204,255,.55) 12%,rgba(39,204,255,.22) 12%,rgba(39,204,255,.22) 22%,rgba(179,82,255,.6) 22%,rgba(179,82,255,.18) 22.5%,rgba(179,82,255,.18) 32%,rgba(39,204,255,.5) 32%,rgba(39,204,255,.16) 32.5%,rgba(39,204,255,.16) 42%,rgba(179,82,255,.55) 42%,rgba(179,82,255,.18) 42.5%,rgba(179,82,255,.18) 52%,rgba(39,204,255,.45) 52%,rgba(39,204,255,.14) 52.5%,rgba(39,204,255,.14) 62%,rgba(179,82,255,.48) 62%,rgba(179,82,255,.15) 62.5%,rgba(179,82,255,.15) 72%,rgba(39,204,255,.4) 72%,rgba(39,204,255,.1) 72.5%,rgba(39,204,255,.1) 100%);clip-path:polygon(0 100%,0 64%,8% 64%,8% 40%,16% 40%,16% 75%,24% 75%,24% 28%,32% 28%,32% 58%,40% 58%,40% 15%,48% 15%,48% 72%,56% 72%,56% 36%,64% 36%,64% 86%,72% 86%,72% 22%,80% 22%,80% 62%,88% 62%,88% 46%,96% 46%,96% 78%,100% 78%,100% 100%)}
.sh-track-number{position:absolute;top:10px;left:10px;z-index:2;min-width:34px;height:26px;padding:0 8px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(4,21,43,.72);border:1px solid rgba(116,212,255,.38);color:#dff8ff;font-size:12px;font-weight:900;box-shadow:0 0 12px rgba(47,173,255,.16)}
.sh-track-cover-wrap{position:relative;width:132px;height:92px;border-radius:18px;overflow:hidden;border:1px solid rgba(92,205,255,.5);box-shadow:0 0 18px rgba(49,173,255,.18)}
.sh-track-cover{display:block;width:100%;height:100%;object-fit:cover;background:#092241}
.sh-track-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(6,19,45,.72);border:1px solid rgba(115,214,255,.75);color:#fff;font-size:14px;box-shadow:0 0 18px rgba(41,196,255,.28)}
.sh-track-info{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:132px;position:relative}
.sh-track-title{font-size:clamp(20px,2vw,23px);line-height:1.15;color:#f4fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-track-artist{display:inline-flex;align-items:center;gap:8px;color:#8de2ff;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-track-artist::before{content:"👤";font-size:14px;filter:saturate(0) brightness(2)}
.sh-track-wave{display:none}
.sh-track-time{justify-self:end;align-self:center;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(39,62,130,.9),rgba(49,45,116,.92));border:1px solid rgba(109,190,255,.28);color:#f2f8ff;font-weight:900;font-size:16px;box-shadow:0 0 16px rgba(86,125,255,.16);white-space:nowrap}
.sh-recent-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(112,185,235,.14);color:#cfe1f2}
.sh-azura{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(17,41,86,.66);border:1px solid rgba(104,190,255,.18);color:#96d5ff}
.sh-notice{margin:0;color:#9fc2de}
.sh-empty{padding:20px;border-radius:22px;border:1px dashed rgba(100,187,255,.28);background:rgba(8,29,58,.7);color:#d7e9f8}
@media (max-width:980px){
  .sh-layout{grid-template-columns:1fr}
  .sh-track{grid-template-columns:110px minmax(0,1fr)}
  .sh-track::after{right:16px;bottom:10px;width:100px}
  .sh-track-info{padding-right:0}
  .sh-track-time{grid-column:2/3;justify-self:start;margin-top:6px}
}
@media (max-width:720px){
  .sh-heading{flex-direction:column;align-items:flex-start}
  .sh-recent-head{flex-direction:column;align-items:flex-start}
  .sh-recent-head h2{font-size:28px}
  .sh-track{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 12px 12px}
  .sh-track-cover-wrap{width:96px;height:96px}
  .sh-track::after{display:none}
  .sh-track-title{font-size:18px;white-space:normal}
  .sh-track-artist{font-size:14px}
  .sh-track-time{grid-column:1/-1;justify-self:start;padding:10px 14px;font-size:14px}
}
@media (max-width:480px){
  .sh-now,.sh-recent{border-radius:24px}
  .sh-now{padding:16px}
  .sh-recent{padding:14px}
  .sh-heading h1{font-size:32px}
  .sh-track{grid-template-columns:84px minmax(0,1fr)}
  .sh-track-cover-wrap{width:84px;height:84px;border-radius:16px}
  .sh-track-number{min-width:30px;height:24px;font-size:11px}
  .sh-track-play{width:30px;height:30px;font-size:13px}
}