/* OuviRadios mobile app skin. Desktop is untouched by the media query. */

/* Fallback com métricas da Inter — @font-face deve estar fora do @media */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}

@media screen and (max-width: 768px) {
  :root {
    --app-bg: #f6f8fc;
    --app-surface: #ffffff;
    --app-text: #223142;
    --app-muted: #98a4b3;
    --app-blue: #005da8;
    --app-purple: #6e46b8;
    --app-purple-soft: #f1edf8;
    --app-border: #e9eef5;
    --app-shadow: 0 10px 26px rgba(28, 43, 65, 0.08);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--app-bg) !important;
  }

  body {
    color: var(--app-text) !important;
    font-family: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
  }

  header,
  .header-main-bar,
  .main-nav-bar,
  .site-footer-modern,
  body > footer,
  .sidebar,
  .home-slim-news-shell,
  .live-bar-paises-gen,
  .online-counter,
  .header-actions {
    display: none !important;
  }

  .main-container,
  .news-container,
  .container,
  .content,
  main.content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 14px 24px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    display: block !important;
  }

  .home-hero,
  .hero-section,
  .page-header,
  .page-header-box,
  .section-header {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 20px 6px 10px !important;
    margin: 0 !important;
  }

  .hero-wrapper {
    display: block !important;
    padding: 28px 20px 6px !important;
    margin: 0 !important;
    text-align: left !important;
    background: transparent !important;
  }

  .hero-wrapper::before {
    content: "Ouvi Rádios";
    display: block;
    color: #475569;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 7px;
  }

  .hero-title {
    color: var(--app-text) !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }

  .hero-subtitle,
  .hero-seo-copy,
  .hero-keyword-links {
    display: none !important;
  }

  .section-header h1,
  .page-header h1,
  .page-header-box h1 {
    color: var(--app-text) !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    margin: 0 !important;
  }

  .portal-subtitle,
  .page-header p,
  .page-header-box p {
    color: var(--app-muted) !important;
    font-size: 14px !important;
    margin-top: 6px !important;
  }

  .app-search-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: calc(100% - 10px) !important;
    min-height: 68px !important;
    margin: 12px 5px 18px !important;
    padding: 0 18px !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 15px !important;
    box-shadow: var(--app-shadow) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .app-search-bar i {
    color: var(--app-purple) !important;
    font-size: 20px !important;
  }

  .app-search-bar input,
  .app-search-bar .app-search-input {
    flex: 1 !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--app-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative !important;
    z-index: 51 !important;
    pointer-events: auto !important;
  }

  .app-search-bar input::placeholder {
    color: #a3abb7 !important;
  }

  .quick-links,
  .app-nav-chips,
  .home-slim-filters-shell .home-slim-select-row,
  .home-slim-country-bar,
  .portal-categories {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 4px 6px 12px !important;
    margin: 0 -2px 20px !important;
    scrollbar-width: none !important;
  }

  .quick-links::-webkit-scrollbar,
  .app-nav-chips::-webkit-scrollbar,
  .home-slim-country-bar::-webkit-scrollbar,
  .portal-categories::-webkit-scrollbar {
    display: none !important;
  }

  .quick-links a,
  .app-nav-chip,
  .home-slim-category-pill,
  .home-slim-country-pill,
  .portal-category-link,
  .news-filter-pill {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 16px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 12px !important;
    background: var(--app-surface) !important;
    color: #30394a !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  }

  .app-nav-chip i,
  .quick-links i {
    color: var(--app-purple) !important;
    font-size: 16px !important;
  }

  .home-slim-category-pill.active,
  .home-slim-country-pill.active,
  .news-filter-pill.active {
    color: var(--app-blue) !important;
    background: #e9f4ff !important;
    border-color: #d7ecff !important;
  }

  .home-slim-mobile-filters,
  .home-slim-select-row {
    display: none !important;
  }

  .home-slim-content,
  .home-slim-main-column {
    display: block !important;
    width: 100% !important;
  }

  .home-slim-radio-grid,
  .radio-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 31% !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding: 4px 6px 22px !important;
    margin: 0 -6px 18px !important;
    scrollbar-width: none !important;
  }

  .home-slim-radio-grid::-webkit-scrollbar,
  .radio-grid::-webkit-scrollbar {
    display: none !important;
  }

  .home-slim-radio-card,
  .radio-card {
    min-width: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: var(--app-text) !important;
  }

  .home-slim-radio-card img,
  .radio-card img {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06) !important;
    margin: 0 0 9px !important;
  }

  .home-slim-radio-name,
  .radio-card h3 {
    color: var(--app-text) !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    margin: 0 0 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .home-slim-radio-meta,
  .radio-card p {
    color: var(--app-muted) !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .home-slim-radio-pill,
  .radio-card .views {
    display: none !important;
  }

  .section-title,
  .home-slim-news-head h3,
  .secao h2,
  .secao-title {
    color: var(--app-text) !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    border: 0 !important;
    margin: 18px 6px 4px !important;
    padding: 0 !important;
  }

  .section-title + p,
  .section-subtitle,
  .home-slim-news-head p {
    color: var(--app-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 6px 14px !important;
  }

  .radio-list-container,
  #favorites-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 10px 0 24px !important;
  }

  .radio-list-item,
  .news-card,
  .news-card-mini,
  .country-card,
  .estado-card,
  .home-slim-category-card,
  .home-slim-side-category-card,
  .home-slim-side-state-card,
  .game-card,
  .match-card,
  .fixture-card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 15px !important;
    box-shadow: var(--app-shadow) !important;
    color: var(--app-text) !important;
    text-decoration: none !important;
  }

  .radio-list-item {
    min-height: 84px !important;
    padding: 12px !important;
    gap: 14px !important;
    transform: none !important;
  }

  .radio-list-img,
  .radio-list-item img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    flex: 0 0 60px !important;
    margin: 0 !important;
  }

  .radio-list-title {
    color: var(--app-text) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  .radio-list-meta,
  .radio-list-genres,
  .list-genre-tag {
    color: var(--app-muted) !important;
    font-size: 13px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .radio-list-views {
    display: flex !important;
    min-width: 0 !important;
  }

  .views-badge {
    display: none !important;
  }

  .views-badge::before {
    content: none !important;
    display: none !important;
  }

  .news-grid,
  .posts-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .hero-news,
  .news-card,
  .news-card-mini {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) 20px !important;
    gap: 12px !important;
    min-height: 96px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .hero-news::after,
  .news-card::after,
  .news-card-mini::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #344255;
    align-self: center;
    justify-self: end;
  }

  .hero-news img,
  .hero-img,
  .news-card img,
  .news-card-mini img {
    width: 78px !important;
    height: 78px !important;
    border-radius: 9px !important;
    object-fit: cover !important;
    grid-row: 1 / 2 !important;
  }

  .hero-content,
  .news-card-content,
  .news-card-mini > div {
    min-width: 0 !important;
  }

  .hero-content h2,
  .news-card h3,
  .news-card-mini h3 {
    color: var(--app-text) !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    margin: 0 0 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .hero-content p,
  .news-card p,
  .news-card-mini p {
    color: #4d5968 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Player global (or-global-player): sobe acima do menu de navegação */
  #fixedPlayer.or-global-player {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 14px 14px 0 0 !important;
    z-index: 1000000 !important;
  }

  #fixedPlayer,
  .fixed-player {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 28px) !important;
    max-width: 520px !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(28, 43, 65, 0.16) !important;
    z-index: 999998 !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  /* Sobrescreve o player antigo escuro do home.css — igual ao or-global-player */
  body.home-page #fixedPlayer,
  body.home-page .fixed-player {
    background: #ffffff !important;
    height: auto !important;
    color: #0f172a !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 14px 14px 0 0 !important;
    transform: none !important;
    z-index: 1000002 !important;
    box-shadow: 0 -4px 14px rgba(28, 43, 65, 0.10) !important;
    border-top: none !important;
  }

  #fixedPlayer[style*="display: flex"],
  #fixedPlayer.is-visible,
  .fixed-player[style*="display: flex"] {
    display: flex !important;
  }

  #fixedPlayer * {
    color: inherit !important;
    text-shadow: none !important;
  }

  #fixedPlayer > button[onclick*="closePlayer"] {
    display: none !important;
  }

  #fixedPlayer .fp-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
    order: 1 !important;
    padding: 0 !important;
  }

  #fixedPlayer #fp-img,
  #fixedPlayer .fp-thumb {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    border: 0 !important;
    object-fit: cover !important;
    flex: 0 0 56px !important;
  }

  #fixedPlayer .fp-texts {
    padding-left: 0 !important;
    min-width: 0 !important;
  }

  #fixedPlayer #fp-live-badge,
  #fixedPlayer #fp-genre,
  #fixedPlayer #fp-song-area,
  #fixedPlayer .fp-right,
  #fixedPlayer .fp-podcast-drawer,
  #fixedPlayer #muteBtn,
  #fixedPlayer #vol-slider {
    display: none !important;
  }

  /* Restaura elementos para player com classe or-global-player (home page) */
  /* Especificidade [1,2,0] supera [1,1,0] acima, mesmo com !important nos dois */
  #fixedPlayer.or-global-player .fp-right {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  #fixedPlayer.or-global-player .fp-action-btn,
  #fixedPlayer.or-global-player #muteBtn,
  #fixedPlayer.or-global-player #btnMute,
  #fixedPlayer.or-global-player #btnClosePlayer {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  #fixedPlayer.or-global-player #btnClosePlayer {
    color: #ef4444 !important;
  }
  /* Esconde vote/share/slider/podcast no mobile */
  #fixedPlayer.or-global-player .fp-vote-btn,
  #fixedPlayer.or-global-player #fpShareBtn,
  #fixedPlayer.or-global-player #vol-slider,
  #fixedPlayer.or-global-player #volSlider,
  #fixedPlayer.or-global-player .fp-podcast-drawer {
    display: none !important;
  }
  /* Vol-control-wrapper: apenas mute button, sem espaço extra */
  #fixedPlayer.or-global-player .vol-control-wrapper {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    position: static !important;
    z-index: auto !important;
  }
  /* Badges Ao Vivo e gênero — sobrescreve inline styles escuros do HTML da home */
  #fixedPlayer.or-global-player #fp-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    animation: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  /* #fp-genre: container transparente, os <span> filhos têm background próprio */
  #fixedPlayer.or-global-player #fp-genre {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #2563eb !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    gap: 4px !important;
    text-transform: none !important;
    max-width: min(200px, 32vw) !important;
    overflow: hidden !important;
  }

  #fixedPlayer #fp-title {
    color: var(--app-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    margin: 0 0 5px !important;
  }

  #fixedPlayer #fp-location,
  #fixedPlayer #fp-nowplaying,
  #fixedPlayer #fp-artist {
    color: var(--app-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    margin: 0 !important;
  }

  #fixedPlayer .fp-center {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
  }

  #fixedPlayer .play-btn-main {
    width: 52px !important;
    height: 52px !important;
    border-radius: 999px !important;
    background: var(--app-purple) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 18px !important;
  }

  .app-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 -10px 24px rgba(28, 43, 65, 0.08) !important;
    z-index: 1000001 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(#fixedPlayer[style*="display: flex"]),
  body:has(#fixedPlayer.or-global-player) {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-nav-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #8a949d !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 750 !important;
  }

  .app-nav-item i {
    width: 44px !important;
    height: 30px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin: 0 !important;
    color: inherit !important;
  }

  .app-nav-item span {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }

  .app-nav-item.active {
    color: var(--app-blue) !important;
  }

  .app-nav-item.active i {
    background: #dceefb !important;
    color: var(--app-blue) !important;
  }

  .player-header {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow: var(--app-shadow) !important;
    border: 1px solid var(--app-border) !important;
  }

  .app-player-expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000002 !important;
    display: none !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.86) !important;
    backdrop-filter: blur(16px);
    color: #ffffff !important;
    padding: calc(34px + env(safe-area-inset-top, 0px)) 28px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  .app-player-expanded.is-open {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: auto !important;
  }

  .app-player-expanded__inner {
    width: 100%;
    max-width: 430px;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .app-player-expanded__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .app-player-expanded__close,
  .app-player-expanded__more {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
  }

  .app-player-expanded__label {
    text-align: center;
    min-width: 0;
    flex: 1;
  }

  .app-player-expanded__kicker {
    display: block;
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 900;
    letter-spacing: 0.18em;
  }

  .app-player-expanded__now {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-player-expanded__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
  }

  .app-player-expanded__logo {
    width: min(68vw, 330px);
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    margin-bottom: 34px;
  }

  .app-player-expanded__title {
    margin: 0 0 14px;
    max-width: 360px;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.22;
    font-weight: 900;
    text-transform: uppercase;
  }

  .app-player-expanded__place {
    color: rgba(255, 255, 255, 0.68);
    font-size: 17px;
    font-weight: 600;
  }

  .app-player-expanded__controls {
    display: grid;
    grid-template-columns: 64px 92px 64px;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 34px;
  }

  .app-player-expanded__side,
  .app-player-expanded__play {
    border: 0;
    color: #ffffff;
    background: transparent;
  }

  .app-player-expanded__side {
    opacity: 0.45;
    font-size: 28px;
  }

  .app-player-expanded__play {
    width: 82px;
    height: 82px;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .app-player-expanded__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    color: #ffffff;
    font-size: 28px;
    padding-bottom: 8px;
  }
}

@media (max-width: 768px) {
  body.home-page #fixedPlayer.or-global-player {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 78px !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 14px 14px 0 0 !important;
    transform: none !important;
    background:
      radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.10) 0, rgba(37, 99, 235, 0) 30%),
      radial-gradient(circle at 82% 12%, rgba(20, 184, 166, 0.12) 0, rgba(20, 184, 166, 0) 30%),
      #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e7edf5 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -10px 26px rgba(28, 43, 65, 0.12) !important;
    z-index: 1000000 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  body.home-page #fixedPlayer.or-global-player .fp-left {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  body.home-page #fixedPlayer.or-global-player #fp-img,
  body.home-page #fixedPlayer.or-global-player .fp-thumb {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    object-fit: cover !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10) !important;
  }

  body.home-page #fixedPlayer.or-global-player .fp-texts {
    padding-left: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    color: #0f172a !important;
  }

  body.home-page #fixedPlayer.or-global-player #fp-live-badge,
  body.home-page #fixedPlayer.or-global-player #fp-genre,
  body.home-page #fixedPlayer.or-global-player #fp-song-area,
  body.home-page #fixedPlayer.or-global-player .fp-podcast-drawer,
  body.home-page #fixedPlayer.or-global-player #fpShareBtn,
  body.home-page #fixedPlayer.or-global-player .fp-vote-btn,
  body.home-page #fixedPlayer.or-global-player #vol-slider,
  body.home-page #fixedPlayer.or-global-player #volSlider {
    display: none !important;
  }

  body.home-page #fixedPlayer.or-global-player #fp-title {
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.home-page #fixedPlayer.or-global-player #fp-location,
  body.home-page #fixedPlayer.or-global-player #fp-nowplaying,
  body.home-page #fixedPlayer.or-global-player #fp-artist {
    color: #64748b !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    margin: 2px 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.home-page #fixedPlayer.or-global-player .fp-live-wave {
    display: inline-flex !important;
    margin-top: 3px !important;
  }

  body.home-page #fixedPlayer.or-global-player .fp-center {
    order: 2 !important;
    flex: 0 0 auto !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  body.home-page #fixedPlayer.or-global-player .play-btn-main {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #2563eb, #14b8a6) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22) !important;
  }

  body.home-page #fixedPlayer.or-global-player .fp-right {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  body.home-page #fixedPlayer.or-global-player .fp-action-btn,
  body.home-page #fixedPlayer.or-global-player #muteBtn,
  body.home-page #fixedPlayer.or-global-player #btnMute,
  body.home-page #fixedPlayer.or-global-player #btnClosePlayer {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  body.home-page #fixedPlayer.or-global-player #btnClosePlayer {
    color: #ef4444 !important;
  }

  body.home-page #fixedPlayer.or-global-player .vol-control-wrapper {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    position: static !important;
  }
}