.radioPage{max-width:1320px;margin:22px auto;padding:0 18px;color:#f8fafc}
.radioHero{background:linear-gradient(135deg,rgba(8,27,43,.82),rgba(18,46,69,.6));border:1px solid rgba(148,163,184,.24);border-radius:24px;padding:28px;box-shadow:0 16px 42px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}
.radioHero h1{color:#f8fafc;font-size:42px;margin:8px 0;letter-spacing:-.04em}.radioHero p{color:#cbd5e1;font-size:18px;margin:0;max-width:840px;line-height:1.45}.radioHero .kicker{color:#60a5fa;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.radioHeroCount{min-width:120px;text-align:center;padding:14px 18px;border:1px solid rgba(148,163,184,.24);border-radius:18px;background:rgba(2,15,27,.32)}.radioHeroCount strong,.radioHeroCount span{display:block}.radioHeroCount strong{font-size:30px}.radioHeroCount span{color:#94a3b8;font-weight:800}
.radioFilters{display:flex;gap:8px;overflow:auto;margin-bottom:18px;padding:2px 0 6px;scrollbar-width:thin}.radioFilters button{border:1px solid rgba(148,163,184,.22);background:rgba(7,24,39,.58);color:#dbeafe;border-radius:999px;padding:10px 14px;font-weight:900;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.radioFilters button:hover{border-color:rgba(96,165,250,.65);background:rgba(15,45,68,.72)}.radioFilters button.active{background:#f0184f;border-color:#f0184f;color:#fff}
.radioLayout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px}.radioSide{background:rgba(7,24,39,.64);border:1px solid rgba(148,163,184,.24);border-radius:22px;padding:18px;box-shadow:0 12px 32px rgba(0,0,0,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);height:max-content;display:grid;gap:12px}.radioSide input{border:1px solid rgba(148,163,184,.28);background:rgba(2,15,27,.62);color:#f8fafc;border-radius:14px;padding:12px;font:inherit;width:100%;outline:none}.radioSide input::placeholder{color:#94a3b8}.radioSide input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.12)}.radioHint{font-size:13px;color:#cbd5e1;line-height:1.5}
.radioGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.radioCard{background:rgba(7,24,39,.7);border:1px solid rgba(148,163,184,.24);border-radius:22px;padding:16px;box-shadow:0 12px 32px rgba(0,0,0,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;display:grid;grid-template-columns:58px minmax(0,1fr);gap:13px;align-items:center;min-height:126px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.radioCard:hover{transform:translateY(-2px);background:rgba(11,35,54,.82)}.radioCard:hover,.radioCard.active{border-color:#f0184f;box-shadow:0 18px 44px rgba(240,24,79,.18)}.radioCard.active{background:rgba(49,18,44,.7)}.radioLogo{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#f0184f,#7c3aed);display:grid;place-items:center;color:#fff;font-size:24px;font-weight:1000;overflow:hidden;box-shadow:0 10px 24px rgba(124,58,237,.22)}.radioCard h3{color:#f8fafc;margin:0 0 5px;font-size:20px;line-height:1.16}.radioCard p{margin:0;color:#cbd5e1;line-height:1.35}.radioTags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.radioTags span{font-size:12px;font-weight:900;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:rgba(2,15,27,.5);color:#dbeafe;padding:4px 8px}.radioEmpty{grid-column:1/-1;padding:32px;text-align:center;color:#cbd5e1;background:rgba(7,24,39,.62);border:1px solid rgba(148,163,184,.22);border-radius:22px}
.radioPlayer{position:fixed;left:18px;right:18px;bottom:14px;z-index:70;background:rgba(5,20,33,.92);border:1px solid rgba(148,163,184,.28);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:12px;display:grid;grid-template-columns:54px minmax(0,260px) minmax(0,1fr);gap:12px;align-items:center}.radioPlayer.hidden{display:none}.radioPlayerLogo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#f0184f,#7c3aed);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:1000;overflow:hidden}.radioPlayerInfo b,.radioPlayerInfo small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radioPlayerInfo b{color:#f8fafc}.radioPlayerInfo small{color:#cbd5e1;margin-top:3px}.radioPlayer audio{width:100%;filter:invert(.92) hue-rotate(180deg)}
@media(max-width:1000px){.radioLayout{grid-template-columns:1fr}.radioGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.radioHero{align-items:center}.radioSide{grid-template-columns:1fr}.radioPlayer{grid-template-columns:48px minmax(0,1fr)}.radioPlayer audio{grid-column:1/-1}}
@media(max-width:620px){.radioPage{padding:0 10px}.radioHero{display:block;padding:22px}.radioHero h1{font-size:32px}.radioHeroCount{display:inline-flex;gap:7px;align-items:baseline;min-width:0;margin-top:16px;padding:9px 13px}.radioHeroCount strong,.radioHeroCount span{display:inline}.radioHeroCount strong{font-size:22px}.radioGrid{grid-template-columns:1fr}.radioCard{border-radius:18px;min-height:112px}.radioPlayer{left:9px;right:9px;bottom:9px;border-radius:18px}}