/*
 * EILO responsive UI — mobile shell, HOME order and player v14.1.1
 * Loaded after the existing desktop layer only below 1024px.
 * This file intentionally does not remove legacy CSS. It isolates the new
 * responsive shell and HOME while the remaining mobile sections are migrated.
 */

@media screen and (max-width:1023px) {
  :root {
    --eilo-mobile-gutter: 16px;
    --eilo-mobile-header: 64px;
    --eilo-mobile-player-safe: 132px;
  }

  html,
  body.ui-next {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    background:#070c12 !important;
  }

  body.ui-next {
    box-sizing:border-box;
    padding-bottom:var(--eilo-mobile-player-safe) !important;
    color:#c7d1dc;
  }

  html.eilo-mobile-overlay-open,
  body.ui-next.eilo-mobile-overlay-open {
    height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  body.ui-next.menu-open #mobile-menu-content,
  body.ui-next.eilo-pageslide-open #pageslide-slide-wrap {
    pointer-events:auto;
  }

  body.ui-next.menu-open #pageslide-body-wrap {
    z-index:2147482999 !important;
  }

  body.ui-next.eilo-pageslide-open #pageslide-body-wrap {
    z-index:2147482900 !important;
  }

  body.ui-next *,
  body.ui-next *::before,
  body.ui-next *::after {
    box-sizing:border-box;
  }

  body.ui-next img {
    max-width:100%;
    height:auto;
  }

  body.ui-next #pageslide-body-wrap {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  body.ui-next .container_16 {
    position:relative;
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 var(--eilo-mobile-gutter) !important;
  }

  body.ui-next .grid_1,
  body.ui-next .grid_2,
  body.ui-next .grid_3,
  body.ui-next .grid_4,
  body.ui-next .grid_5,
  body.ui-next .grid_6,
  body.ui-next .grid_7,
  body.ui-next .grid_8,
  body.ui-next .grid_9,
  body.ui-next .grid_10,
  body.ui-next .grid_11,
  body.ui-next .grid_12,
  body.ui-next .grid_13,
  body.ui-next .grid_14,
  body.ui-next .grid_15,
  body.ui-next .grid_16 {
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.ui-next #content {
    display:block !important;
    clear:both !important;
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }

  body.ui-next table {
    max-width:100%;
  }

  /* Header */
  body.ui-next #top {
    position:absolute !important;
    top:0;
    left:0;
    z-index:0 !important;
    width:100%;
    height:var(--eilo-mobile-header) !important;
    margin:0 !important;
    background:#0d141c !important;
    border-bottom:1px solid rgba(255,255,255,.07);
    box-shadow:0 8px 24px rgba(0,0,0,.24);
  }

  body.ui-next #top-background {
    position:relative;
    width:100%;
    min-height:var(--eilo-mobile-header);
    margin:0;
    padding:0;
  }

  body.ui-next #top-back-two {
    height:58px !important;
    margin-top:var(--eilo-mobile-header) !important;
    background:#13202c !important;
    border-bottom:1px solid rgba(255,255,255,.07);
    box-shadow:none !important;
  }

  body.ui-next.eilo-page-index #top-back-two,
  body.ui-next.eilo-shell-home #top-back-two {
    height:0 !important;
    margin-top:var(--eilo-mobile-header) !important;
    border:0 !important;
    background:transparent !important;
  }

  body.ui-next .logo {
    position:absolute !important;
    top:0;
    left:var(--eilo-mobile-gutter);
    z-index:5;
    float:none !important;
    width:78px !important;
    height:var(--eilo-mobile-header);
    margin:0 !important;
    display:flex !important;
    align-items:center;
  }

  body.ui-next .logo a {
    display:flex;
    align-items:center;
  }

  body.ui-next .logo img {
    display:block;
    width:auto !important;
    height:28px !important;
  }

  body.ui-next .menu-desktop {
    display:none !important;
  }

  body.ui-next .menu-mobile {
    position:absolute;
    top:0;
    right:var(--eilo-mobile-gutter);
    z-index:8;
    display:block !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.ui-next .mobile-header {
    height:var(--eilo-mobile-header);
    display:flex;
    align-items:center;
  }

  body.ui-next .mobile-header #mobile-menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    min-height:36px;
    padding:0 11px;
    margin:0 !important;
    border:1px solid rgba(151,171,190,.20);
    border-radius:9px;
    background:#111b24;
    color:#eef4f8 !important;
    font-size:11px;
    line-height:36px;
    font-weight:800;
    letter-spacing:.04em;
    text-decoration:none;
  }

  body.ui-next .mobile-header #mobile-menu-toggle:hover {
    border-color:rgba(157,255,0,.45);
    color:#c8ff72 !important;
  }

  body.ui-next #mini-buttons {
    position:absolute !important;
    top:0 !important;
    right:82px !important;
    z-index:7;
    float:none !important;
    width:auto !important;
    height:var(--eilo-mobile-header) !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  body.ui-next #mini-buttons > div {
    display:flex !important;
    float:none !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    height:var(--eilo-mobile-header) !important;
    margin:0 !important;
  }

  body.ui-next #mini-buttons > div > a {
    box-sizing:border-box !important;
    display:inline-flex !important;
    float:none !important;
    flex:0 0 26px !important;
    align-items:center !important;
    justify-content:center !important;
    width:26px !important;
    height:36px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(151,171,190,.18);
    border-radius:9px;
    background-color:#111b24 !important;
    background-repeat:no-repeat !important;
    background-position:center 6px !important;
  }

  body.ui-next #mini-buttons > div > a:hover {
    border-color:rgba(255,0,106,.45);
    background-position:center -18px !important;
  }

  body.ui-next #allpage-username-top {
    display:none !important;
  }

  body.ui-next #mobile-menu-content {
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    width:100%;
    height:100dvh;
    padding:0 0 30px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    isolation:isolate;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,0,106,.14), transparent 38%),
      #081019;
  }

  body.ui-next #mobile-menu-content.open {
    display:block;
  }

  body.ui-next .mobile-menu-top {
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:66px;
    padding:0 var(--eilo-mobile-gutter);
    background:rgba(8,16,25,.96);
    border-bottom:1px solid rgba(151,171,190,.16);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:13px;
    font-weight:900;
    letter-spacing:.12em;
  }

  body.ui-next #mobile-menu-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid rgba(151,171,190,.20);
    border-radius:10px;
    background:#101a23;
    color:#fff !important;
    text-decoration:none;
  }

  body.ui-next .mobile-menu-list,
  body.ui-next .mobile-menu-list ul {
    list-style:none;
    margin:0;
    padding:0;
  }

  body.ui-next .mobile-menu-list {
    padding:12px var(--eilo-mobile-gutter) 40px;
  }

  body.ui-next .mobile-menu-list li {
    border:0;
  }

  body.ui-next .mobile-menu-list > li {
    margin:0 0 8px;
  }

  body.ui-next .mobile-menu-list li > a {
    display:block;
    padding:14px 15px;
    border:1px solid rgba(151,171,190,.13);
    border-radius:10px;
    background:#0e1821;
    color:#f1f5f8 !important;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
  }

  body.ui-next .mobile-menu-list li.open > a,
  body.ui-next .mobile-menu-list li > a:hover {
    border-color:rgba(255,0,106,.48);
    background:#151824;
    color:#ff68a5 !important;
  }

  body.ui-next .mobile-menu-list li ul {
    display:none;
    margin:6px 0 10px 12px;
  }

  body.ui-next .mobile-menu-list li.open > ul {
    display:block;
  }

  body.ui-next .mobile-menu-list li ul a {
    padding:11px 13px;
    background:#0a131b;
    color:#9fb0bf !important;
    font-size:12px;
  }

  /* Generic heading rail */
  body.ui-next .top-message,
  body.ui-next .top-message.eilo-manage-heading,
  body.ui-next .top-message.eilo-page-heading,
  body.ui-next .top-message.eilo-shell-slot {
    position:relative !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.ui-next .top-message h1 {
    box-sizing:border-box;
    width:100%;
    min-height:58px;
    margin:0 !important;
    padding:17px 0 12px !important;
    overflow:visible;
    background:transparent !important;
    color:#f2f6f9 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    text-transform:none !important;
  }

  /* HOME utility */
  body.ui-next.eilo-page-index,
  body.ui-next.eilo-shell-home {
    background:
      radial-gradient(circle at 5% 20%, rgba(255,0,106,.08), transparent 30%),
      radial-gradient(circle at 100% 35%, rgba(157,255,0,.07), transparent 32%),
      #070c12 !important;
  }

  body.ui-next.eilo-page-index .eilo-home-utility,
  body.ui-next.eilo-shell-home .eilo-home-utility {
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
    width:calc(100% + (var(--eilo-mobile-gutter) * 2)) !important;
    height:auto !important;
    min-height:0;
    margin:0 calc(var(--eilo-mobile-gutter) * -1) 18px !important;
    padding:12px var(--eilo-mobile-gutter) 14px !important;
    background:#101b25;
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(151,171,190,.14);
  }

  body.ui-next .eilo-home-nowplaying,
  body.ui-next .eilo-home-search {
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
  }

  body.ui-next .hotnews-homepage {
    display:flex !important;
    align-items:center;
    width:100% !important;
    height:auto !important;
    min-height:34px;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden;
  }

  body.ui-next .hotnews-homepage h1 {
    flex:0 0 auto;
    margin:0 10px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    color:#f4f7f9 !important;
    font-size:11px !important;
    line-height:1 !important;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  body.ui-next .hotnews-homepage h1 img {
    width:15px;
    margin:0 5px 0 0;
    vertical-align:-3px;
  }

  body.ui-next .hotnews-homepage ul {
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden;
    white-space:nowrap;
  }

  body.ui-next .hotnews-homepage li {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    color:#92a2b1;
  }

  body.ui-next .eilo-home-search #formdiv,
  body.ui-next .eilo-home-search form,
  body.ui-next .eilo-home-search__form {
    width:100% !important;
    float:none !important;
    margin:0 !important;
  }

  body.ui-next .eilo-home-search__form {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }

  body.ui-next .eilo-home-search__form #headsearch {
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    margin:0 !important;
    padding:0 13px !important;
    border:1px solid rgba(151,171,190,.24) !important;
    border-radius:9px !important;
    background:#15212c !important;
    color:#e7edf2 !important;
    font-size:13px !important;
  }

  body.ui-next .eilo-home-search__submit {
    width:auto !important;
    min-width:82px;
    height:40px !important;
    margin:0 !important;
    padding:0 15px !important;
    border:1px solid rgba(157,255,0,.45) !important;
    border-radius:9px !important;
    background:#182717 !important;
    color:#caff77 !important;
    font-size:11px !important;
    font-weight:900 !important;
    text-transform:uppercase;
  }

  body.ui-next .eilo-home-search__clear,
  body.ui-next .eilo-home-search .eilo-legacy-gap {
    display:none !important;
  }

  /* HOME composition */
  body.ui-next.eilo-page-index .eilo-home-main,
  body.ui-next.eilo-shell-home .eilo-home-main {
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 0 26px !important;
  }

  body.ui-next.eilo-page-index .eilo-home-primary,
  body.ui-next.eilo-shell-home .eilo-home-primary,
  body.ui-next.eilo-page-index .eilo-home-stations,
  body.ui-next.eilo-shell-home .eilo-home-stations {
    display:block !important;
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
  }

  body.ui-next.eilo-page-index .eilo-home-primary,
  body.ui-next.eilo-shell-home .eilo-home-primary {
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    order:1;
  }

  body.ui-next.eilo-page-index #homeSlider,
  body.ui-next.eilo-shell-home #homeSlider {
    order:1;
  }

  body.ui-next.eilo-page-index .eilo-home-stations,
  body.ui-next.eilo-shell-home .eilo-home-stations {
    order:2;
  }

  body.ui-next.eilo-page-index .latest-elements,
  body.ui-next.eilo-shell-home .latest-elements {
    order:3;
  }

  body.ui-next #homeSlider,
  body.ui-next #homeSlider.royalSlider,
  body.ui-next .eilo-home-hero {
    position:relative;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:clamp(280px, 82vw, 360px) !important;
    min-height:280px !important;
    margin:8px 0 18px !important;
    border:1px solid rgba(151,171,190,.20) !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 18px 44px rgba(0,0,0,.30);
  }

  body.ui-next #homeSlider .rsOverflow,
  body.ui-next #homeSlider .rsContainer,
  body.ui-next #homeSlider .rsSlide,
  body.ui-next #homeSlider .rsContent,
  body.ui-next #homeSlider .rsImg {
    width:100% !important;
    height:100% !important;
  }

  body.ui-next #homeSlider .rsImg {
    object-fit:cover;
  }

  body.ui-next #homeSlider .eilo-home-hero__panel {
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    top:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:16px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:12px !important;
    background:rgba(10,13,20,.91) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.34) !important;
    backdrop-filter:blur(8px);
  }

  body.ui-next #homeSlider .eilo-home-hero__kicker {
    display:inline-flex !important;
    position:static !important;
    min-width:0 !important;
    margin:0 0 10px !important;
    padding:6px 9px !important;
    font-size:9px !important;
  }

  body.ui-next #homeSlider .eilo-home-hero__title-link {
    display:block;
    margin:0 0 13px !important;
  }

  body.ui-next #homeSlider .eilo-home-hero__title {
    display:block;
    font-size:clamp(22px, 7vw, 31px) !important;
    line-height:1.08 !important;
  }

  body.ui-next #homeSlider .eilo-home-hero__cta {
    position:static !important;
    display:inline-flex !important;
    align-items:center;
    min-height:38px;
    margin:0 !important;
    padding:0 14px !important;
    font-size:10px !important;
  }

  body.ui-next .eilo-home-section-heading {
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:12px;
    width:100% !important;
    margin:0 0 12px !important;
  }

  body.ui-next .eilo-home-section-heading h2 {
    margin:2px 0 0 !important;
    font-size:21px !important;
    line-height:1.14 !important;
  }

  body.ui-next .eilo-home-section-heading__eyebrow {
    font-size:9px !important;
  }

  body.ui-next .eilo-home-section-heading__link {
    flex:0 0 auto;
    font-size:10px !important;
  }

  body.ui-next .latest-elements {
    display:block !important;
    float:none !important;
    width:100% !important;
    margin:0 !important;
  }

  body.ui-next .tabbed_content {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:13px !important;
  }

  body.ui-next .tabbed_content .tabs {
    display:flex !important;
    width:100% !important;
    height:auto !important;
    min-height:50px;
    padding:0 6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
  }

  body.ui-next .tabbed_content .tabs::-webkit-scrollbar {
    display:none;
  }

  body.ui-next .tabbed_content .tab_item {
    flex:0 0 auto;
    min-width:auto !important;
    height:50px !important;
    padding:0 13px !important;
    font-size:10px !important;
    line-height:50px !important;
  }

  body.ui-next .tabbed_content .slide_content,
  body.ui-next .tabbed_content .tabslider,
  body.ui-next .tabbed_content .tab-menu,
  body.ui-next .eilo-home-tab-panel {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
  }

  body.ui-next .tabbed_content .slide_content {
    padding:10px !important;
  }

  body.ui-next .eilo-home-content-card {
    display:grid !important;
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:112px !important;
    margin:0 0 10px !important;
    padding:8px !important;
  }

  body.ui-next .eilo-home-content-card__media {
    width:96px !important;
    min-width:96px !important;
    height:96px !important;
  }

  body.ui-next .eilo-home-content-card__media img {
    width:100% !important;
    height:100% !important;
    object-fit:cover;
  }

  body.ui-next .eilo-home-content-card__title {
    font-size:14px !important;
    line-height:1.25 !important;
  }

  body.ui-next .eilo-home-content-card__body p {
    display:none !important;
  }

  body.ui-next .eilo-home-content-card__meta,
  body.ui-next .eilo-home-content-card__action {
    font-size:9px !important;
  }

  body.ui-next .eilo-home-artist-card,
  body.ui-next .eilo-home-show-card {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  body.ui-next .eilo-home-stations .eilo-home-section-heading {
    margin-top:2px !important;
  }

  body.ui-next .eilo-station-card {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 0 9px !important;
    padding:13px !important;
    border-radius:13px !important;
  }

  body.ui-next .eilo-station-card__top {
    gap:10px;
  }

  body.ui-next .eilo-station-card__top h3 {
    font-size:15px !important;
    line-height:1.2 !important;
  }

  body.ui-next .eilo-station-card__listeners {
    flex:0 0 auto;
    font-size:9px !important;
  }

  body.ui-next .eilo-station-card__track {
    min-height:34px;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  body.ui-next .eilo-station-card__actions {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:7px !important;
    align-items:center;
  }

  body.ui-next .eilo-station-card__play,
  body.ui-next .eilo-station-card__schedule,
  body.ui-next .eilo-station-card__format {
    min-height:36px !important;
    padding:0 11px !important;
    font-size:9px !important;
  }

  /* Footer */
  body.ui-next #footer-back,
  body.ui-next .eilo-classic-footer {
    display:none !important;
  }

  body.ui-next .eilo-next-footer {
    display:block !important;
    width:calc(100% + (var(--eilo-mobile-gutter) * 2)) !important;
    margin:20px calc(var(--eilo-mobile-gutter) * -1) 0 !important;
    padding:0 !important;
  }

  body.ui-next .eilo-next-footer__inner {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:22px var(--eilo-mobile-gutter) 26px !important;
  }

  body.ui-next .eilo-next-footer__nav ul {
    display:flex !important;
    flex-wrap:wrap;
    gap:8px 12px;
    margin:0 0 18px !important;
  }

  body.ui-next .eilo-next-footer__nav li,
  body.ui-next .eilo-next-footer__nav a {
    font-size:11px !important;
  }

  body.ui-next .eilo-next-footer__meta {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    align-items:start !important;
  }

  body.ui-next .eilo-next-footer__meta p,
  body.ui-next .eilo-next-footer__social {
    margin:0 !important;
    font-size:10px !important;
    line-height:1.55 !important;
  }

  /* Full-screen authentication overlays */
  body.ui-next #pageslide-slide-wrap {
    z-index:2147483100 !important;
    max-width:100vw !important;
    height:100dvh !important;
    overflow:hidden !important;
    background:#071019 !important;
  }

  body.ui-next #pageslide-content {
    width:100% !important;
    max-width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer,
  body.ui-next .eilo-auth-drawer {
    width:100% !important;
    max-width:100vw !important;
    min-height:100dvh !important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer__close {
    position:fixed !important;
    top:14px !important;
    right:14px !important;
    z-index:5 !important;
    width:38px !important;
    height:38px !important;
    line-height:36px !important;
    border-radius:10px !important;
    background:#111d27 !important;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer__head {
    padding:42px var(--eilo-mobile-gutter) 24px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer__head h2 {
    max-width:calc(100% - 48px) !important;
    font-size:30px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer__head p {
    max-width:100% !important;
    font-size:12px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-notice {
    margin:18px var(--eilo-mobile-gutter) 0 !important;
  }

  body.ui-next #pageslide-content .eilo-auth-form--drawer {
    padding:22px var(--eilo-mobile-gutter) 28px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-actions--drawer {
    align-items:stretch !important;
    flex-direction:column !important;
    gap:13px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-actions--drawer .eilo-auth-primary {
    width:100% !important;
    min-width:0 !important;
  }

  body.ui-next #pageslide-content .eilo-auth-text-link {
    display:block !important;
    width:100%;
    padding:4px 0 !important;
    text-align:center;
    white-space:normal !important;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer__passwords,
  body.ui-next #pageslide-content .eilo-auth-captcha--drawer {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-captcha--drawer .eilo-auth-captcha__image {
    width:132px !important;
  }

  body.ui-next #pageslide-content .eilo-auth-recaptcha--drawer {
    justify-content:flex-start !important;
    max-width:100%;
    overflow:visible !important;
  }

  body.ui-next #pageslide-content .eilo-auth-drawer__footer {
    min-height:58px;
    padding:16px var(--eilo-mobile-gutter) calc(16px + env(safe-area-inset-bottom)) !important;
    text-align:center;
  }

  /* Compact fixed mobile player. The legacy runtime remains intact, while
     all essential mobile controls stay visible and reachable. */
  body.ui-next #fap-wrapper {
    z-index:100000 !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    min-width:0 !important;
    max-width:100vw !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    background:rgba(7,12,18,.985) !important;
    box-shadow:0 -14px 36px rgba(0,0,0,.42) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  body.ui-next #fap-main {
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:96px !important;
    margin:0 !important;
  }

  body.ui-next .playlist-manage-wrapper,
  body.ui-next #fap-social-links,
  body.ui-next #fap-volume-bar,
  body.ui-next #fap-volume-sign,
  body.ui-next #fap-playlist-shuffle {
    display:none !important;
  }

  body.ui-next #fap-wrapper-switcher {
    box-sizing:border-box !important;
    position:absolute !important;
    top:-30px !important;
    right:auto !important;
    left:8px !important;
    z-index:8 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:30px !important;
    height:30px !important;
    padding:0 !important;
    border:1px solid rgba(151,171,190,.22) !important;
    border-radius:8px !important;
    background:#111b24 !important;
    color:#d8e1e8 !important;
    font:700 19px/28px Arial,sans-serif !important;
    box-shadow:none !important;
  }

  body.ui-next #fap-wrapper-switcher:hover {
    border-color:rgba(255,0,106,.50) !important;
    color:#ff5d9f !important;
  }

  body.ui-next #fap-meta-wrapper {
    position:absolute !important;
    top:7px !important;
    left:8px !important;
    right:82px !important;
    float:none !important;
    width:auto !important;
    min-width:0 !important;
    height:34px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body.ui-next #fap-current-cover,
  body.ui-next #fap-cover-replacement {
    width:32px !important;
    height:32px !important;
    margin:0 !important;
    border-radius:7px !important;
  }

  body.ui-next #fap-current-title,
  body.ui-next #fap-current-meta {
    max-width:100% !important;
    padding-left:40px !important;
    padding-right:4px !important;
    overflow:hidden !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.ui-next #fap-current-title {
    font-size:10px !important;
    line-height:16px !important;
  }

  body.ui-next #fap-current-meta {
    font-size:8px !important;
    line-height:13px !important;
  }

  body.ui-next #fap-ui-wrapper {
    position:absolute !important;
    inset:0 !important;
    float:none !important;
    display:block !important;
    width:100% !important;
    height:96px !important;
    margin:0 !important;
    pointer-events:none;
  }

  body.ui-next #fap-ui-wrapper > div,
  body.ui-next #fap-ui-wrapper > a {
    float:none !important;
    margin:0 !important;
    pointer-events:auto;
  }

  body.ui-next #fap-time-bar {
    position:absolute !important;
    top:45px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    height:4px !important;
    margin:0 !important;
    border-width:0 !important;
    background:#1b2935 !important;
  }

  body.ui-next #fap-time-bar div {
    height:4px !important;
  }

  body.ui-next #fap-time-bar span {
    display:none !important;
  }

  body.ui-next #fap-ui-nav {
    position:absolute !important;
    top:54px !important;
    left:50% !important;
    width:116px !important;
    height:38px !important;
    margin:0 !important;
    transform:translateX(-50%);
  }

  body.ui-next #fap-ui-nav #fap-previous,
  body.ui-next #fap-ui-nav #fap-next {
    display:block !important;
    top:5px !important;
    width:28px !important;
    height:28px !important;
    background-color:#15212c !important;
    border:1px solid rgba(151,171,190,.16);
    box-shadow:none !important;
  }

  body.ui-next #fap-ui-nav #fap-previous {
    left:0 !important;
    background-position:4px 11px !important;
  }

  body.ui-next #fap-ui-nav #fap-next {
    left:88px !important;
    background-position:11px 11px !important;
  }

  body.ui-next #fap-ui-nav #fap-play-pause {
    top:0 !important;
    left:39px !important;
    width:38px !important;
    height:38px !important;
    background-position:14px 10px !important;
    box-shadow:0 8px 22px rgba(255,0,106,.28) !important;
  }

  body.ui-next #fap-ui-nav #fap-play-pause.fap-pause {
    background-position:15px 11px !important;
  }

  body.ui-next #fap-playlist-toggle {
    box-sizing:border-box !important;
    position:absolute !important;
    top:8px !important;
    right:8px !important;
    z-index:8 !important;
    display:block !important;
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    border:1px solid rgba(151,171,190,.22);
    border-radius:8px !important;
    background-color:#111b24 !important;
    background-position:9px 9px !important;
  }

  body.ui-next #fap-playlist-toggle:hover,
  body.ui-next.eilo-mobile-playlist-open #fap-playlist-toggle {
    border-color:rgba(157,255,0,.42);
    background-color:#17251c !important;
  }

  body.ui-next #fap-playlist {
    box-sizing:border-box;
    width:100% !important;
    margin:0 !important;
    padding:10px 10px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    border-top:1px solid rgba(151,171,190,.15) !important;
    background:#08111a !important;
  }

  body.ui-next #fap-playlist li {
    min-height:44px;
    margin:0 0 6px !important;
    padding:7px 8px !important;
    border:1px solid rgba(151,171,190,.10);
    border-radius:8px;
    background:#0e1821;
  }

  body.ui-next #fap-playlist li img,
  body.ui-next #fap-playlist li .fap-cover-replace-small {
    width:28px !important;
    height:28px !important;
  }

  body.ui-next #fap-playlist li > span {
    max-width:calc(100% - 64px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:28px !important;
  }

  body.ui-next.menu-open #fap-wrapper,
  body.ui-next.eilo-pageslide-open #fap-wrapper {
    pointer-events:none;
  }

  /* Generic responsive safety for the remaining pages before their mobile pass */
  body.ui-next .eilo-breadcrumb,
  body.ui-next .eilo-seo-summary,
  body.ui-next .eilo-radio-intro,
  body.ui-next .eilo-archive-intro {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.ui-next input[type="text"],
  body.ui-next input[type="password"],
  body.ui-next input[type="email"],
  body.ui-next textarea,
  body.ui-next select {
    max-width:100%;
  }

  body.ui-next .page-navi {
    max-width:100% !important;
    overflow-x:auto;
  }
}

@media screen and (max-width:420px) {
  :root {
    --eilo-mobile-gutter: 12px;
  }

  body.ui-next #mini-buttons {
    right:78px !important;
  }

  body.ui-next .mobile-header #mobile-menu-toggle {
    padding:0 10px;
    font-size:11px;
  }

  body.ui-next .eilo-home-content-card {
    grid-template-columns:82px minmax(0,1fr) !important;
  }

  body.ui-next .eilo-home-content-card__media {
    width:82px !important;
    min-width:82px !important;
    height:88px !important;
  }

  body.ui-next .eilo-station-card__actions {
    grid-template-columns:1fr auto;
  }

  body.ui-next .eilo-station-card__format {
    display:none !important;
  }
}

@media screen and (max-width:360px) {
  body.ui-next #pageslide-content .eilo-auth-recaptcha--drawer {
    width:304px;
    transform:scale(.88);
    transform-origin:left top;
    margin-bottom:-10px;
  }

  body.ui-next #fap-current-cover,
  body.ui-next #fap-cover-replacement {
    width:30px !important;
    height:30px !important;
  }

  body.ui-next #fap-current-title,
  body.ui-next #fap-current-meta {
    padding-left:38px !important;
  }
}