/* MUSIC FM CHROME — canonical public shell.
   Header, search, navigation, notifications, footer and interaction polish live here.
   Keep this file as the single source for public-site chrome. */

/* ===== signature-polish.css ===== */
/* ========================================================================== 
   MUSIC FM — SIGNATURE POLISH / 2026-10-08
   Final visual refinement layer. Keeps the approved classic editorial language,
   while improving hierarchy, depth, rhythm, mobile density and interaction.
   No font family overrides live here — the central font lock remains authoritative.
   ========================================================================== */

:root{
  --mf-signature-page:#f3f6f9;
  --mf-signature-page-top:#eef4f9;
  --mf-signature-paper:#fff;
  --mf-signature-paper-soft:#fbfcfe;
  --mf-signature-line:rgba(16,37,65,.105);
  --mf-signature-line-soft:rgba(16,37,65,.07);
  --mf-signature-blue:#147cff;
  --mf-signature-blue-deep:#0d5fc2;
  --mf-signature-sky:#59c7ff;
  --mf-signature-navy:#041327;
  --mf-signature-navy-2:#071d37;
  --mf-signature-ink:#102541;
  --mf-signature-muted:#66778c;
  --mf-signature-shadow-xs:0 1px 2px rgba(4,19,39,.025),0 5px 14px rgba(4,19,39,.025);
  --mf-signature-shadow-sm:0 2px 4px rgba(4,19,39,.035),0 12px 28px rgba(4,19,39,.042);
  --mf-signature-shadow-md:0 4px 10px rgba(4,19,39,.055),0 20px 46px rgba(4,19,39,.075);
  --mf-signature-shadow-nav:0 12px 34px rgba(4,19,39,.12);
  --mf-signature-section:clamp(46px,5.5vw,74px);
  --mf-signature-section-mobile:36px;
}

html{background:var(--mf-signature-page)}
body{
  background:
    radial-gradient(900px 340px at 50% 0,rgba(89,199,255,.055),transparent 68%),
    linear-gradient(180deg,var(--mf-signature-page-top) 0, var(--mf-signature-page) 210px, var(--mf-signature-page) 100%)!important;
  color:var(--mf-ui-ink,#17243a);
  min-height:100vh;
}
.site-shell{isolation:isolate;min-height:100vh}
main{position:relative;z-index:1}

/* More deliberate page width and breathing room without creating giant gaps. */
.mf-container,.container{width:min(var(--mf-ui-container,1240px),calc(100% - 44px))!important}
.inner-page main{padding-bottom:0}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header.v4-site-header{
  background:linear-gradient(180deg,#061932 0%,#041327 82%)!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.035),0 10px 30px rgba(4,19,39,.09)!important;
}
.site-header.v4-site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(89,199,255,.22) 25%,rgba(37,200,195,.18) 55%,transparent 88%);
  pointer-events:none;
}
.v4-nav-shell{position:relative}
.v4-brand.mf-classic-brand{
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.75,.25,1)!important;
}
.v4-brand.mf-classic-brand:hover{opacity:.96;transform:translateY(-1px)}
.v4-brand.mf-classic-brand .mf-classic-mark{
  filter:drop-shadow(0 5px 13px rgba(20,124,255,.12));
}
.v4-brand.mf-classic-brand .mf-classic-copy small{opacity:.66;letter-spacing:.055em}
.v4-mainnav>a,.v4-mainnav .v4-more{position:relative;color:rgba(235,244,252,.76)!important}
.v4-mainnav>a:is(:hover,.active,[aria-current="page"]),.v4-mainnav .v4-more:hover{color:#fff!important}
.v4-mainnav>a::after{
  /* Keep the active-tab indicator inside the dark desktop header, directly
     beneath the label.  The previous -13px offset pushed it into the page. */
  bottom:10px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--mf-signature-sky),#8bdcff)!important;
  box-shadow:0 0 8px rgba(89,199,255,.22)!important;
}
.v4-action,.mf-header-account>summary{
  position:relative;
  overflow:visible;
  border-color:rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.015)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.v4-action:hover,.mf-header-account>summary:hover{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.27)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 5px 16px rgba(0,0,0,.08)!important;
}

/* Popovers share one precise, high-end surface. */
:is(.mf-header-account__menu,.mf-notification-dropdown,.mega-menu.v4-mega.mf-expanded-mega,.premium-search){
  border-color:#dbe3ec!important;
}
:is(.mf-header-account__menu,.mf-notification-dropdown){
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)!important;
  box-shadow:0 4px 12px rgba(4,19,39,.075),0 28px 64px rgba(4,19,39,.16)!important;
}
.mf-header-account__identity,.mf-notification-dropdown__head{
  background:linear-gradient(180deg,#fff,#f8fbfe)!important;
  border-bottom-color:#e5ebf1!important;
}
.mf-header-account__links a,.mf-notification-item{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
}
.mf-header-account__links a:hover,.mf-notification-item:hover{background:#f5f9fd!important}

/* --------------------------------------------------------------------------
   Shared hero language
   -------------------------------------------------------------------------- */
:is(.about-hero,.contact-hero,.help-hero,.news-masthead,.profile-hero,.settings-hero,.notifications-hero,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero){
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
:is(.about-hero,.contact-hero,.help-hero,.news-masthead,.profile-hero,.settings-hero,.notifications-hero,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(460px 220px at 14% 18%,rgba(89,199,255,.11),transparent 70%),
    linear-gradient(112deg,transparent 0 66%,rgba(255,255,255,.025) 66% 66.25%,transparent 66.25% 100%);
}
:is(.about-hero,.contact-hero,.help-hero,.news-masthead,.profile-hero,.settings-hero,.notifications-hero,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero)::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:max(18px,calc((100vw - min(var(--mf-ui-container,1240px),calc(100vw - 44px))) / 2));
  bottom:0;
  width:118px;
  height:2px;
  background:linear-gradient(90deg,var(--mf-signature-blue),var(--mf-signature-sky),var(--mf-ui-turquoise,#25c8c3));
  opacity:.88;
}
:is(.about-hero,.contact-hero,.help-hero,.news-masthead,.profile-hero,.settings-hero,.notifications-hero,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero) h1{
  text-wrap:balance;
  text-shadow:0 8px 26px rgba(0,0,0,.12);
}

/* --------------------------------------------------------------------------
   Global editorial rhythm
   -------------------------------------------------------------------------- */
:is(.home-stage,.news-page,.about-premium-page,.contact-premium-page,.help-premium-page,.mf-article-wrap,.mf-music-archive,.mf-dd-page,.profile-page,.settings-page,.notifications-page){
  --mf-local-section-gap:var(--mf-signature-section);
}

/* Remove accidental empty-looking vertical corridors between adjacent modules. */
main :is(.mf-section,.section-block,.about-section,.contact-form-section,.help-faq-section,.mf-community-section,.mf-dd-section,.mf-artist-sections){
  scroll-margin-top:calc(var(--mf-ui-header-bottom,92px) + 18px);
}

/* Stronger, cleaner section headings. */
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head){
  position:relative;
}
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head)::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:-10px;
  width:34px;
  height:2px;
  background:linear-gradient(90deg,var(--mf-signature-blue-deep),var(--mf-signature-sky));
  opacity:.82;
}
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head) :is(h2,h3){
  color:var(--mf-signature-ink)!important;
  text-wrap:balance;
}
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head) :is(p,span,small){
  color:var(--mf-signature-muted);
}

/* Universal premium surfaces — subtle ceramic/paper, never bubbly. */
body :is(
  .pulse-panel,.side-card,.mf-side-card,.mf-section,.news-top,.news-side-block,.news-directory-card,
  .artist-feature,.artists-editorial,.artists-directory,.mf-artist-surface,.mf-community-card,.mf-community-post,
  .mf-dd-card,.mf-dd-form-card,.mf-dd-ranking,.profile-card,.profile-side-card,.profile-feature-card,.profile-library-card,
  .settings-card,.settings-side-card,.notification-card,.notifications-side-card,.help-category-card,.help-faq-content,
  .help-faq-sidebar,.contact-form-card,.contact-route-grid>article,.about-world-item,.about-tech-grid article,
  .about-principles-grid article,.legal-document,.legal-sidebar,.terms-document,.terms-sidebar,.auth-shell,.mf-reader-desk
){
  border-color:var(--mf-signature-line)!important;
  background:linear-gradient(180deg,#fff 0%,#fff 70%,#fbfcfe 100%)!important;
}
body :is(
  .pulse-panel,.side-card,.mf-side-card,.news-top,.artist-feature,.artists-editorial,.artists-directory,
  .mf-community-card,.mf-dd-form-card,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
  .notifications-side-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.legal-document,.legal-sidebar,.terms-document,.terms-sidebar,.auth-shell,.mf-reader-desk
){box-shadow:var(--mf-signature-shadow-sm)!important}

/* Media is slightly calmer, then becomes vivid on intentional hover. */
main :is(.mf-lead-image,.mini-media,.section-lead,.section-side,.news-top-card,.news-row,.news-directory-card,.mf-article-hero-frame,.artist-feature,.editorial-artist,.mf-latest-song,.album-card,.playlist-grid>a,.mf-hd-card,.mf-dd-card) img{
  filter:saturate(.94) contrast(1.015);
  transition:transform .34s cubic-bezier(.2,.75,.25,1),filter .24s ease!important;
}
@media(hover:hover) and (pointer:fine){
  main :is(.mf-lead-image,.mini-media,.section-lead,.section-side,.news-top-card,.news-row,.news-directory-card,.mf-article-hero-frame,.artist-feature,.editorial-artist,.mf-latest-song,.album-card,.playlist-grid>a,.mf-hd-card,.mf-dd-card):hover img{
    filter:saturate(1) contrast(1.02);
  }
}

/* Links that act like editorial CTAs gain one consistent cue. */
main :is(.flash-all,.section-heading>a,.mf-section-heading>a,.panel-head>a,.news-read-link,.mf-hd-all,.mf-dd-link,.about-btn-ghost,.help-contact-actions a,.contact-hero-links a){
  text-underline-offset:4px;
}

/* --------------------------------------------------------------------------
   Home — refinement of the approved framed editorial composition
   -------------------------------------------------------------------------- */
.home-page .home-stage{padding-top:30px!important;padding-bottom:68px!important}
.home-page .mf-hero-board{
  border-color:#d9e1e9!important;
  box-shadow:0 4px 12px rgba(4,19,39,.045),0 24px 56px rgba(4,19,39,.065)!important;
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)!important;
}
.home-page .mf-lead-image{border-color:#e7ecf1!important}
.home-page .mf-lead-copy{border-color:#e6ebf0!important}
.home-page .mf-lead-copy h1{max-width:12.5ch;text-wrap:balance}
.home-page .mf-lead-copy p{max-width:48ch}
.home-page .mf-mini-grid{border-color:#dfe6ed!important}
.home-page .mf-mini-card{background:linear-gradient(180deg,#fff,#fdfefe)!important}
.home-page .mf-mini-card h2{letter-spacing:-.025em}
.home-page .flash-strip{
  box-shadow:var(--mf-signature-shadow-xs)!important;
  border-color:#dfe6ed!important;
}
.home-page .flash-title{background:linear-gradient(90deg,#fff,#fbfcfe)}
.home-page .pulse-grid{gap:20px!important}
.home-page .pulse-panel{box-shadow:var(--mf-signature-shadow-sm)!important}
.home-page .mf-home-dedications{
  border-color:#d9e2eb!important;
  box-shadow:0 4px 12px rgba(4,19,39,.035),0 22px 50px rgba(4,19,39,.055)!important;
}
.home-page .mf-hd-head{padding-block:26px!important}
.home-page .mf-hd-grid{background:#f3f6f9!important}
.home-page .mf-hd-card{box-shadow:var(--mf-signature-shadow-xs)!important}
.home-page .content-layout.mf-content-layout{margin-top:34px!important;gap:28px!important}
.home-page .mf-section{box-shadow:var(--mf-signature-shadow-xs)!important}
.home-page .mf-side-card{box-shadow:var(--mf-signature-shadow-xs)!important}

/* --------------------------------------------------------------------------
   News / article
   -------------------------------------------------------------------------- */
.news-page .news-masthead{box-shadow:inset 0 -1px 0 rgba(255,255,255,.035)}
.news-page .news-top{box-shadow:var(--mf-signature-shadow-sm)!important}
.news-page .news-top-card,.news-page .news-row,.news-page .news-directory-card{
  border-color:#dfe6ed!important;
}
.news-page .news-row{background:linear-gradient(180deg,#fff,#fcfdff)!important}
.news-page .news-side-note{box-shadow:var(--mf-signature-shadow-sm)!important}
.mf-article-wrap .mf-article-header{border-bottom-color:#dce4ec!important}
.mf-article-wrap .mf-article-hero-frame{
  box-shadow:0 2px 6px rgba(4,19,39,.04),0 18px 42px rgba(4,19,39,.055);
  border:1px solid #dfe6ed;
}
.mf-article-wrap .mf-article-body{font-size:clamp(16px,1.15vw,17.5px);line-height:1.88!important}
.mf-article-wrap .mf-article-body p{margin-block:0 1.42em}
.mf-article-wrap .mf-article-quote{
  border-inline-start:3px solid #86bee9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.mf-article-wrap .mf-reader-desk{box-shadow:var(--mf-signature-shadow-sm)!important}

/* --------------------------------------------------------------------------
   Music / artists
   -------------------------------------------------------------------------- */
.mf-music-archive .mf-music-head{margin-bottom:28px}
.mf-music-archive .mf-latest-song,.mf-music-archive .mf-music-row{
  border-color:#dde5ed!important;
  background:linear-gradient(180deg,#fff,#fbfcfe)!important;
}
.mf-music-archive .mf-latest-song{box-shadow:var(--mf-signature-shadow-xs)!important}
.mf-music-archive .mf-music-row__action,.mf-music-archive .mf-song-play{
  box-shadow:0 3px 10px rgba(4,19,39,.075)!important;
}
.artists-editorial,.artists-directory{box-shadow:var(--mf-signature-shadow-sm)!important}
.artist-feature,.editorial-artist,.artist-profile-card{
  border-color:#dde5ed!important;
}
.artist-feature{box-shadow:0 3px 8px rgba(4,19,39,.035),0 18px 42px rgba(4,19,39,.055)!important}

/* --------------------------------------------------------------------------
   Community / dedications
   -------------------------------------------------------------------------- */
.mf-community-hero{box-shadow:inset 0 -1px 0 rgba(255,255,255,.035)}
.mf-community-card,.mf-community-post{border-color:#dce4ec!important}
.mf-community-post{box-shadow:var(--mf-signature-shadow-xs)!important}
.mf-community-post__header{padding-bottom:12px;border-bottom:1px solid #eef2f5}
.mf-community-post__actions{border-top-color:#e8edf2!important}

.mf-dd-hero{box-shadow:inset 0 -1px 0 rgba(255,255,255,.035)}
.mf-dd-page :is(.mf-dd-card,.mf-dd-form-card,.mf-dd-ranking){border-color:#dce4ec!important}
.mf-dd-page .mf-dd-card{box-shadow:var(--mf-signature-shadow-xs)!important}
.mf-dd-page .mf-dd-card-head{padding-bottom:12px;border-bottom:1px solid #edf1f5}
.mf-dd-page .mf-dd-card-actions{border-top-color:#e7edf3!important}

/* --------------------------------------------------------------------------
   Profile / settings / notifications / auth
   -------------------------------------------------------------------------- */
:is(.profile-page,.settings-page,.notifications-page) :is(.profile-card,.profile-side-card,.settings-card,.settings-side-card,.notification-card,.notifications-side-card){
  border-color:#dce4ec!important;
}
:is(.profile-page,.settings-page,.notifications-page) :is(.profile-card,.profile-side-card,.settings-card,.settings-side-card,.notifications-side-card){
  box-shadow:var(--mf-signature-shadow-sm)!important;
}
.notification-card{box-shadow:var(--mf-signature-shadow-xs)!important}
:is(.profile-local-nav,.settings-local-nav,.notifications-filter){
  box-shadow:0 1px 0 rgba(255,255,255,.8),0 8px 20px rgba(4,19,39,.035);
}
.auth-shell{box-shadow:0 4px 12px rgba(4,19,39,.05),0 28px 64px rgba(4,19,39,.08)!important}

/* --------------------------------------------------------------------------
   Forms and controls
   -------------------------------------------------------------------------- */
body :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){
  border-color:#cad6e2!important;
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)!important;
  box-shadow:inset 0 1px 2px rgba(4,19,39,.025)!important;
}
body :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select):hover:not(:focus){border-color:#bfcddc!important}
body :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select):focus{
  background:#fff!important;
  border-color:#8fbce4!important;
  box-shadow:0 0 0 3px rgba(20,124,255,.085),inset 0 1px 2px rgba(4,19,39,.018)!important;
}
body :is(button,[role="button"],a.primary-btn,a.about-btn,a.profile-action,a.history-button,a.mf-community-primary,a.mf-community-secondary,a.mf-hd-send,a.mf-dd-button){
  -webkit-tap-highlight-color:transparent;
}

/* --------------------------------------------------------------------------
   Footer — richer but still restrained and classic
   -------------------------------------------------------------------------- */
.mf-editorial-footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(620px 280px at 20% 0,rgba(20,124,255,.09),transparent 72%),
    linear-gradient(180deg,#061a33 0%,#041327 58%,#031020 100%)!important;
  border-top-color:rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 -12px 36px rgba(4,19,39,.05)!important;
}
.mf-editorial-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(89,199,255,.25) 35%,rgba(37,200,195,.20) 62%,transparent 94%);
  pointer-events:none;
}
.mf-footer-intro{border-bottom-color:rgba(255,255,255,.09)!important}
.mf-footer-directory{border-bottom-color:rgba(255,255,255,.085)!important}
.mf-footer-column-title span,.mf-footer-eyebrow,.mf-footer-motto small{color:#7ccfff!important}
.mf-footer-column nav a{color:rgba(227,237,246,.72)!important}
.mf-footer-column nav a small{color:rgba(166,187,205,.55)!important}
.mf-footer-column nav a:hover{color:#fff!important}
.mf-footer-column nav a:hover small{color:#89cff5!important}
.mf-footer-social a{
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.018)!important;
}
.mf-footer-social a:hover{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.22)!important;
  transform:translateY(-1px);
}
.mf-footer-bottom{background:rgba(0,0,0,.08)!important;border-top-color:rgba(255,255,255,.06)!important}

/* --------------------------------------------------------------------------
   Fine-pointer interactions
   -------------------------------------------------------------------------- */
@media(hover:hover) and (pointer:fine){
  body :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.mf-music-row,.artist-profile-card,.editorial-artist,.mf-community-post,
    .mf-dd-card,.profile-feature-card,.profile-library-card,.notification-card,.help-category-card,
    .contact-route-grid>article,.about-world-item,.about-tech-grid article,.about-principles-grid article
  ){
    transition:transform .22s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease,border-color .22s ease,background-color .22s ease!important;
  }
  body :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.mf-music-row,.artist-profile-card,.editorial-artist,.mf-community-post,
    .mf-dd-card,.profile-feature-card,.profile-library-card,.notification-card,.help-category-card,
    .contact-route-grid>article,.about-world-item,.about-tech-grid article,.about-principles-grid article
  ):hover{
    transform:translateY(-2px);
    border-color:#cad6e2!important;
    box-shadow:0 3px 8px rgba(4,19,39,.04),0 18px 38px rgba(4,19,39,.06)!important;
  }
}

/* --------------------------------------------------------------------------
   Tablet / mobile — app-like, compact and clean
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  :root{--mf-signature-section:44px}
  .mf-container,.container{width:min(var(--mf-ui-container,1240px),calc(100% - 28px))!important}

  body{
    background:
      radial-gradient(520px 220px at 50% 0,rgba(89,199,255,.045),transparent 72%),
      #f4f6f9!important;
  }

  .site-header.v4-site-header{
    box-shadow:0 1px 0 rgba(255,255,255,.028),0 7px 22px rgba(4,19,39,.09)!important;
  }
  .site-header.v4-site-header::after{opacity:.65}

  /* Large desktop shadows are unnecessary on a small screen. */
  body :is(
    .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.news-top,.news-side-block,
    .artist-feature,.artists-editorial,.artists-directory,.mf-community-card,.mf-community-post,
    .mf-dd-card,.mf-dd-form-card,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
    .notification-card,.notifications-side-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,
    .legal-document,.legal-sidebar,.terms-document,.terms-sidebar,.auth-shell,.mf-reader-desk
  ){
    box-shadow:0 1px 2px rgba(4,19,39,.025),0 8px 22px rgba(4,19,39,.032)!important;
  }

  .mobile-bottom.mf-mobile-bottom{
    background:linear-gradient(180deg,rgba(255,255,255,.995),rgba(247,250,253,.995))!important;
    border-top-color:#dce4ec!important;
    box-shadow:0 -9px 28px rgba(4,19,39,.075)!important;
  }
  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link{position:relative}
  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:22px;
    height:2px;
    border-radius:0 0 2px 2px;
    background:linear-gradient(90deg,var(--mf-signature-blue),var(--mf-signature-sky));
    opacity:0;
    transform:translateX(-50%) scaleX(.5);
    transition:opacity .18s ease,transform .2s ease;
  }
  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"])::before{
    opacity:1;transform:translateX(-50%) scaleX(1);
  }
  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"]) .mf-mobile-bottom__label{
    color:#17304e!important;font-weight:700!important;
  }
  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"]) .mf-mobile-bottom__icon{
    color:var(--mf-signature-blue-deep)!important;
    transform:translateY(-1px);
  }

  :is(.about-hero,.contact-hero,.help-hero,.news-masthead,.profile-hero,.settings-hero,.notifications-hero,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero)::after{
    right:14px;width:78px;
  }

  :is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head)::before{
    top:-8px;width:28px;
  }

  .home-page .home-stage{padding-top:18px!important;padding-bottom:48px!important}
  .home-page .content-layout.mf-content-layout{margin-top:24px!important;gap:20px!important}
  .home-page .mf-home-dedications{margin-top:24px!important}
  .home-page .pulse-grid{margin-top:24px!important}
  .home-page .flash-strip{margin-top:22px!important}
}

@media(max-width:760px){
  .mf-container,.container{width:calc(100% - 24px)!important}

  /* Tighter rhythm is intentional: no giant empty mobile bands. */
  main :is(.section-block,.mf-section,.about-section,.contact-form-section,.help-faq-section,.mf-community-section,.mf-dd-section){
    margin-top:var(--mf-signature-section-mobile)!important;
  }
  main :is(.section-block,.mf-section,.about-section,.contact-form-section,.help-faq-section,.mf-community-section,.mf-dd-section):first-child{
    margin-top:0!important;
  }

  .home-page .mf-hero-board{box-shadow:0 2px 6px rgba(4,19,39,.035),0 12px 28px rgba(4,19,39,.04)!important}
  .home-page .mf-lead-copy{padding:22px 19px 18px!important}
  .home-page .mf-lead-copy h1{max-width:none;font-size:clamp(30px,9vw,39px)!important;line-height:1.08!important}
  .home-page .mf-lead-copy p{font-size:14px!important;line-height:1.72!important}
  .home-page .mf-hd-head{padding:22px 18px!important;gap:18px!important}
  .home-page .mf-hd-heading h2{font-size:30px!important}
  .home-page .mf-hd-grid{padding:10px!important;gap:10px!important}
  .home-page .mf-hd-card{padding:17px 16px!important;min-height:0!important}

  /* Page heroes feel designed but do not consume most of the first screen. */
  :is(.about-hero,.contact-hero,.help-hero,.news-masthead,.profile-hero,.settings-hero,.notifications-hero,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero){
    min-height:0!important;
  }

  /* Cards should read as sections, not floating bubbles. */
  body :is(.profile-card,.profile-side-card,.settings-card,.settings-side-card,.notification-card,.notifications-side-card,.help-category-card,.mf-community-card,.mf-community-post,.mf-dd-card,.mf-dd-form-card){
    border-radius:3px!important;
  }

  .mf-editorial-footer .mf-footer-intro{padding-block:25px!important}
  .mf-editorial-footer .mf-footer-directory{padding-block:22px!important}
  .mf-footer-column{padding-block:4px}
}

@media(max-width:520px){
  .mf-container,.container{width:calc(100% - 20px)!important}

  .home-page .home-stage{padding-top:12px!important}
  .home-page .mf-hero-board{padding:9px!important}
  .home-page .flash-strip{margin-top:18px!important}
  .home-page .pulse-grid,.home-page .mf-home-dedications{margin-top:20px!important}
  .home-page .content-layout.mf-content-layout{margin-top:20px!important}

  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__label{font-size:10.5px!important}
  .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__icon svg{width:19px!important;height:19px!important}

  :is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head)::before{
    width:24px;height:2px;
  }
}

/* Accessibility: refinement must never defeat reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
  }
  .v4-brand.mf-classic-brand:hover,
  .mf-footer-social a:hover,
  body :is(.mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,.mf-latest-song,.mf-music-row,.artist-profile-card,.editorial-artist,.mf-community-post,.mf-dd-card,.profile-feature-card,.profile-library-card,.notification-card,.help-category-card,.contact-route-grid>article,.about-world-item):hover{
    transform:none!important;
  }
}

/* --------------------------------------------------------------------------
   Directory / search / utility layers
   -------------------------------------------------------------------------- */
body .mega-menu.v4-mega.mf-expanded-mega{
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;
  border-bottom-color:#dce4ec!important;
  box-shadow:var(--mf-signature-shadow-nav)!important;
}
.mf-mega-editorial-shell{background:transparent!important}
.mf-mega-headline-row{border-bottom-color:#e3e9ef!important}
.mf-mega-group{background:rgba(255,255,255,.72)!important}
.mf-mega-group small{color:#86a2ba!important}
.mf-mega-group a{position:relative}
.mf-mega-group a::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  bottom:4px;
  width:0;
  height:1px;
  background:#93bfe2;
  transition:width .2s ease;
}
@media(hover:hover) and (pointer:fine){
  .mf-mega-group a:hover::after{width:18px}
}
.mf-mega-bottomline{
  border-top-color:#e2e8ef!important;
  background:linear-gradient(180deg,#fafcfe,#f6f9fc)!important;
}

.search-overlay{background:rgba(3,16,32,.54)!important}
.premium-search{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#f9fbfd)!important;
  box-shadow:0 8px 24px rgba(4,19,39,.12),0 38px 92px rgba(4,19,39,.22)!important;
}
.premium-search::before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;height:2px;
  background:linear-gradient(90deg,var(--mf-signature-blue),var(--mf-signature-sky),var(--mf-ui-turquoise,#25c8c3));
}
.search-field{background:#fff!important;border-color:#b9cce0!important}
.search-trends a{
  background:#f7f9fc!important;
  border-color:#dfe6ed!important;
  box-shadow:0 1px 2px rgba(4,19,39,.02)!important;
}
.search-trends a:hover{background:#eef6fd!important;border-color:#c7dcec!important;color:#0d5fc2!important}

/* Utility / accessibility panel follows the same visual quality. */
.mf-a11y-center{
  border-color:#d7e0e9!important;
  box-shadow:0 10px 28px rgba(4,19,39,.12),0 38px 88px rgba(4,19,39,.20)!important;
}
.mf-a11y-header{background:linear-gradient(180deg,#071b34,#041327)!important}

/* Tables and dense lists remain clean at high information density. */
:is(.chart-table,.song-list,.notifications-list,.settings-list){border-color:#dde5ed!important}
:is(.chart-row,.song-row,.notification-row,.settings-row){border-bottom-color:#e8edf2!important}
:is(.chart-row,.song-row,.notification-row,.settings-row):last-child{border-bottom-color:transparent!important}

/* Empty/error states look intentional rather than unfinished. */
:is(.mf-community-preview-empty,.mf-dd-empty,.news-empty,.artists-empty,.notifications-empty,.mf-reader-error){
  border-color:#dbe4ed!important;
  background:linear-gradient(180deg,#fff,#f8fbfd)!important;
  box-shadow:var(--mf-signature-shadow-xs)!important;
}

/* Primary buttons gain a more precise high-end finish without increasing size. */
body :is(.primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.dedication-form-actions button,.mf-community-primary,.mf-community-composer__submit,.mf-community-poll-submit,.profile-action--primary,.settings-primary-button,.mf-music-filter__submit,.mf-hd-send){
  background:linear-gradient(180deg,#1b83ff 0%,#0d67d3 100%)!important;
  border-color:#0b62c9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 15px rgba(13,95,194,.14)!important;
}
@media(hover:hover) and (pointer:fine){
  body :is(.primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.dedication-form-actions button,.mf-community-primary,.mf-community-composer__submit,.mf-community-poll-submit,.profile-action--primary,.settings-primary-button,.mf-music-filter__submit,.mf-hd-send):hover{
    background:linear-gradient(180deg,#177cf3 0%,#0a5fc7 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 20px rgba(13,95,194,.17)!important;
  }
}

/* ========================================================================== 
   MUSIC FM — UNIFIED LUXURY AUTHORITY / 2026-10-08
   This is the final visual authority loaded after every page stylesheet.
   Rule: page composition stays page-specific; surfaces, controls, rhythm,
   depth, colour logic and interaction language stay global and consistent.
   ========================================================================== */

:root{
  /* Full approved MUSIC FM palette — used with hierarchy, not decoration. */
  --mf-lux-navy-950:#031020;
  --mf-lux-navy-900:#041327;
  --mf-lux-navy-800:#071d37;
  --mf-lux-navy-700:#0b2b52;
  --mf-lux-blue-600:#0d67d3;
  --mf-lux-blue-500:#147cff;
  --mf-lux-blue-400:#3d98ff;
  --mf-lux-sky:#59c7ff;
  --mf-lux-turquoise:#25c8c3;
  --mf-lux-purple:#7767df;
  --mf-lux-red:#e94355;
  --mf-lux-charcoal:#17243a;
  --mf-lux-gray-700:#526176;
  --mf-lux-gray-500:#7f8da0;
  --mf-lux-gray-300:#cdd7e2;
  --mf-lux-gray-200:#e1e7ee;
  --mf-lux-gray-100:#eef3f7;
  --mf-lux-page:#f2f5f8;
  --mf-lux-page-soft:#f7f9fb;

  /* Opaque ceramic-white. It is deliberately not translucent glass. */
  --mf-lux-ceramic:linear-gradient(145deg,#ffffff 0%,#ffffff 38%,#fbfdff 72%,#f5f8fb 100%);
  --mf-lux-ceramic-soft:linear-gradient(145deg,#ffffff 0%,#fbfdff 58%,#f4f7fa 100%);
  --mf-lux-ceramic-pressed:linear-gradient(180deg,#f5f8fb 0%,#ffffff 100%);
  --mf-lux-ceramic-edge:rgba(61,82,108,.16);
  --mf-lux-ceramic-edge-strong:rgba(48,73,104,.22);
  --mf-lux-ceramic-highlight:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(4,19,39,.03),inset 1px 0 0 rgba(255,255,255,.75);
  --mf-lux-shadow-1:var(--mf-lux-ceramic-highlight),0 1px 2px rgba(4,19,39,.035),0 8px 20px rgba(4,19,39,.035);
  --mf-lux-shadow-2:var(--mf-lux-ceramic-highlight),0 2px 5px rgba(4,19,39,.045),0 16px 38px rgba(4,19,39,.065);
  --mf-lux-shadow-3:inset 0 1px 0 #fff,0 8px 22px rgba(4,19,39,.10),0 32px 74px rgba(4,19,39,.18);
  --mf-lux-radius:3px;
  --mf-lux-radius-small:2px;
  --mf-lux-control-height:44px;

  /* Default section signature; semantic page systems override these. */
  --mf-page-accent:var(--mf-lux-blue-500);
  --mf-page-accent-2:var(--mf-lux-sky);
  --mf-page-accent-3:var(--mf-lux-turquoise);
  --mf-page-accent-warm:var(--mf-lux-red);
}

/* Semantic accent families. Layout remains unchanged; only the site's DNA changes. */
.news-page,.article-premium-page{--mf-page-accent:#147cff;--mf-page-accent-2:#59c7ff;--mf-page-accent-3:#e94355}
.mf-music-archive-page,.listing-page{--mf-page-accent:#0d67d3;--mf-page-accent-2:#25c8c3;--mf-page-accent-3:#59c7ff}
.community-premium-page{--mf-page-accent:#25c8c3;--mf-page-accent-2:#147cff;--mf-page-accent-3:#7767df}
.dedications-social-page{--mf-page-accent:#7767df;--mf-page-accent-2:#e94355;--mf-page-accent-3:#59c7ff}
.social-universe-page{--mf-page-accent:#7767df;--mf-page-accent-2:#25c8c3;--mf-page-accent-3:#147cff}
.member-social-page{--mf-page-accent:#147cff;--mf-page-accent-2:#7767df;--mf-page-accent-3:#25c8c3}
.profile-premium-page,.settings-premium-page,.notifications-premium-page{--mf-page-accent:#147cff;--mf-page-accent-2:#59c7ff;--mf-page-accent-3:#7767df}
.about-premium-page{--mf-page-accent:#25c8c3;--mf-page-accent-2:#59c7ff;--mf-page-accent-3:#7767df}
.contact-premium-page,.help-premium-body{--mf-page-accent:#147cff;--mf-page-accent-2:#25c8c3;--mf-page-accent-3:#7767df}
.legal-page-body,.terms-page-body{--mf-page-accent:#0d67d3;--mf-page-accent-2:#59c7ff;--mf-page-accent-3:#25c8c3}
.auth-page{--mf-page-accent:#147cff;--mf-page-accent-2:#7767df;--mf-page-accent-3:#25c8c3}

/* ===== Page atmosphere ===== */
html{background:var(--mf-lux-page)!important}
body{
  background:
    radial-gradient(760px 280px at 10% 2%,rgba(37,200,195,.065),transparent 68%),
    radial-gradient(680px 260px at 88% 4%,rgba(119,103,223,.060),transparent 70%),
    radial-gradient(620px 250px at 54% 0,rgba(20,124,255,.050),transparent 72%),
    linear-gradient(180deg,#edf3f8 0,#f6f8fb 330px,#f2f5f8 100%)!important;
  background-attachment:fixed!important;
}
main{background:transparent!important}
.site-shell{background:transparent!important}

/* A very quiet spectrum edge anchors the brand without turning the portal colourful. */
.site-shell::before{
  content:"";position:fixed;z-index:-1;pointer-events:none;inset:0 0 auto;height:360px;opacity:.48;
  background:
    radial-gradient(480px 180px at 26% 0,rgba(89,199,255,.08),transparent 72%),
    radial-gradient(420px 170px at 72% 0,rgba(119,103,223,.06),transparent 74%);
}

/* ===== Header: same structure, richer finish ===== */
.site-header.v4-site-header{
  background:
    radial-gradient(500px 110px at 76% 0,rgba(20,124,255,.12),transparent 74%),
    radial-gradient(330px 100px at 28% 0,rgba(37,200,195,.07),transparent 78%),
    linear-gradient(180deg,#071b34 0%,#041327 78%,#031121 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 9px 30px rgba(4,19,39,.11)!important;
}
.site-header.v4-site-header::before{
  content:"";position:absolute;inset:auto 0 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 3%,rgba(89,199,255,.30) 23%,rgba(37,200,195,.24) 45%,rgba(119,103,223,.19) 66%,rgba(233,67,85,.14) 83%,transparent 97%);
}
.v4-mainnav>a::after{
  bottom:9px!important;height:2px!important;border-radius:0!important;
  background:linear-gradient(90deg,var(--mf-lux-blue-500),var(--mf-lux-sky),var(--mf-lux-turquoise))!important;
  box-shadow:0 0 10px rgba(89,199,255,.20)!important;
}
.v4-mainnav>a.active,.v4-mainnav>a[aria-current="page"]{text-shadow:0 0 18px rgba(89,199,255,.12)}
.v4-action,.mf-header-account__trigger,.mf-mobile-menu-toggle{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 4px 12px rgba(0,0,0,.08)!important;
}

/* ===== One opaque ceramic surface vocabulary ===== */
body :is(
  .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.mf-home-dedications,
  .news-top,.news-side-block,.news-directory-card,.news-editorial-card,
  .mf-article-side-card,.mf-reader-desk,.mf-article-related-card,
  .mf-latest-song,.mf-music-filter,.mf-music-list,.mf-music-empty,
  .artists-editorial,.artists-directory,.artist-feature,.artist-profile-card,.editorial-artist,
  .album-card,.playlist-grid>a,.chart-table,
  .mf-community-composer,.mf-community-card,.mf-community-post,.mf-community-empty,
  .mf-dd-composer,.mf-dd-card,.mf-dd-popular,.mf-dd-empty,.mf-dd-notice,
  .su-card,.su-stat,.su-mission,.su-achievement,.su-perk,.su-podium-card,.su-board-row,.su-feed-card,.su-profile-insight,
  .mf-member-card,.mf-member-composer,.mf-member-post,.mf-member-private,.mf-member-missing,
  .profile-card,.profile-side-card,.profile-feature-card,.profile-library-card,.profile-panel,
  .settings-card,.settings-side-card,.settings-choice-card,.settings-mini-feature,
  .notification-card,.notifications-side-card,.notifications-empty,
  .about-hero-card,.about-world-item,.about-tech-grid article,.about-principles-grid article,.about-contact-card,
  .contact-form-card,.contact-route-grid>article,.contact-final-card,
  .help-category-card,.help-faq-content,.help-faq-sidebar,.help-contact-card,
  .legal-document,.legal-sidebar,.legal-summary-item,.terms-document,.terms-sidebar,
  .auth-shell,.auth-panel,.contact-card
){
  background:var(--mf-lux-ceramic)!important;
  border-color:var(--mf-lux-ceramic-edge)!important;
  border-radius:var(--mf-lux-radius)!important;
  box-shadow:var(--mf-lux-shadow-1)!important;
}

/* Important / featured surfaces get a deliberate second depth, not bigger rounding. */
body :is(
  .mf-hero-board,.news-top,.artist-feature,.mf-community-composer,.mf-dd-composer,
  .su-progress-hero,.mf-member-card--artist,.profile-feature-card,.auth-shell,
  .contact-form-card,.help-contact-card,.about-contact-card
){box-shadow:var(--mf-lux-shadow-2)!important}

/* Nested rows must not become boxes-inside-boxes. */
body :is(
  .mf-mini-card,.news-top-card,.news-row,.mf-music-row,.chart-table-row,.mf-community-poll-option,
  .mf-member-comment,.mf-member-achievement-row,.notification-card__body,.settings-connection-row,.settings-session-row
){box-shadow:none!important}

/* Ceramic highlight line on major white blocks. */
body :is(
  .mf-hero-board,.pulse-panel,.mf-side-card,.mf-section,.news-top,.news-side-block,.mf-article-side-card,
  .artists-editorial,.artists-directory,.artist-feature,.mf-music-filter,.mf-music-list,
  .mf-community-composer,.mf-community-card,.mf-dd-composer,.mf-dd-popular,
  .su-card,.mf-member-card,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
  .notifications-side-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.legal-document,.terms-document,.auth-shell
){position:relative}
body :is(
  .mf-hero-board,.pulse-panel,.mf-side-card,.mf-section,.news-top,.news-side-block,.mf-article-side-card,
  .artists-editorial,.artists-directory,.artist-feature,.mf-music-filter,.mf-music-list,
  .mf-community-composer,.mf-community-card,.mf-dd-composer,.mf-dd-popular,
  .su-card,.mf-member-card,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
  .notifications-side-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.legal-document,.terms-document,.auth-shell
)::after{
  content:"";position:absolute;pointer-events:none;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(89,199,255,.30) 36%,rgba(119,103,223,.18) 70%,rgba(255,255,255,.9));
  opacity:.72;
}

/* ===== The global section signature ===== */
:is(
  .section-heading,.mf-section-heading,.panel-head,.portal-title,
  .news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,
  .mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,
  .profile-section-head,.settings-section-head,.notifications-list-head,
  .about-section-heading,.contact-section-heading,.help-section-head,.legal-document-head,.terms-document-head
){position:relative}
:is(
  .section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,
  .mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,
  .profile-section-head,.settings-section-head,.notifications-list-head,
  .about-section-heading,.contact-section-heading,.help-section-head,.legal-document-head,.terms-document-head
)::before{
  content:""!important;position:absolute!important;inset-inline-start:0!important;top:-11px!important;
  width:52px!important;height:3px!important;border:0!important;border-radius:0!important;
  background:linear-gradient(90deg,var(--mf-page-accent) 0 43%,var(--mf-page-accent-2) 43% 72%,var(--mf-page-accent-3) 72% 100%)!important;
  box-shadow:0 2px 8px rgba(20,124,255,.08)!important;
}
:is(.section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,.mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,.profile-section-head,.settings-section-head,.notifications-list-head,.about-section-heading,.contact-section-heading,.help-section-head) :is(h2,h3){
  letter-spacing:-.035em!important;color:#102541!important;
}

/* ===== Page title vocabulary for older listing pages ===== */
.inner-page .page-title{
  border-bottom:1px solid #d9e2eb!important;padding-bottom:22px!important;margin-bottom:30px!important;
}
.inner-page .page-title::after{
  width:94px!important;height:3px!important;right:0!important;bottom:-1px!important;
  background:linear-gradient(90deg,var(--mf-lux-blue-500),var(--mf-lux-sky) 42%,var(--mf-lux-turquoise) 70%,var(--mf-lux-purple))!important;
}
.inner-page .page-title>span{color:var(--mf-lux-blue-600)!important;letter-spacing:.11em!important;font-size:10px!important}
.inner-page .page-title h1{color:#0f2745!important;font-weight:800!important;letter-spacing:-.045em!important}
.inner-page .page-title p{color:#68798e!important;max-width:760px}

/* ===== Buttons: one family across the portal ===== */
body :is(
  .primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.contact-hero-links a:first-child,
  .help-contact-actions a:first-child,.dedication-form-actions button,.mf-community-primary,.mf-community-poll-submit,
  .mf-community-composer__submit button,.mf-dd-button:not(.mf-dd-button--quiet),.profile-action--primary,
  .settings-primary-button,.mf-music-filter__submit,.mf-hd-send,.su-button--blue,.mf-member-primary,
  .mf-member-action--primary,.mf-member-card__artist-button,.notifications-mark-all
){
  min-height:var(--mf-lux-control-height)!important;border-radius:var(--mf-lux-radius-small)!important;
  border:1px solid #0b5fbe!important;color:#fff!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#147cff 0%,#0c67d6 58%,#0a57b7 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 1px rgba(4,19,39,.08),0 7px 18px rgba(13,103,211,.16)!important;
  font-weight:800!important;letter-spacing:-.01em!important;
}
body :is(
  .about-btn-ghost,.contact-hero-links a:not(:first-child),.help-contact-actions a:not(:first-child),
  .mf-community-secondary,.mf-dd-button--quiet,.profile-action:not(.profile-action--primary),
  .su-button--ghost,.mf-member-secondary,.mf-member-action:not(.mf-member-action--primary):not(.mf-member-action--icon),
  .settings-inline-link,.profile-inline-button
){
  border-radius:var(--mf-lux-radius-small)!important;border:1px solid #cbd8e4!important;
  background:var(--mf-lux-ceramic-soft)!important;color:#173b63!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(4,19,39,.045)!important;
}
@media(hover:hover) and (pointer:fine){
  body :is(
    .primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.contact-hero-links a:first-child,
    .help-contact-actions a:first-child,.dedication-form-actions button,.mf-community-primary,.mf-community-poll-submit,
    .mf-community-composer__submit button,.mf-dd-button:not(.mf-dd-button--quiet),.profile-action--primary,
    .settings-primary-button,.mf-music-filter__submit,.mf-hd-send,.su-button--blue,.mf-member-primary,
    .mf-member-action--primary,.mf-member-card__artist-button,.notifications-mark-all
  ):hover{
    background:
      linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 42%),
      linear-gradient(135deg,#2a8cff 0%,#0d6bd9 58%,#0a59bd 100%)!important;
    transform:translateY(-1px)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 2px rgba(4,19,39,.07),0 10px 22px rgba(13,103,211,.20)!important;
  }
  body :is(.about-btn-ghost,.mf-community-secondary,.mf-dd-button--quiet,.su-button--ghost,.mf-member-secondary):hover{
    background:#f2f7fb!important;border-color:#abc5dd!important;transform:translateY(-1px)!important;
  }
}

/* Icon-only circles are intentionally the exception to the square-ish rule. */
body :is(.v4-action,.mf-mobile-menu-toggle,.mf-header-account__trigger,.mf-song-play,.play,.album-play,.mf-music-player__close,.mf-member-action--icon){border-radius:50%!important}

/* ===== Forms ===== */
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){
  background:var(--mf-lux-ceramic-soft)!important;border:1px solid #cbd7e3!important;border-radius:var(--mf-lux-radius-small)!important;
  box-shadow:inset 0 1px 2px rgba(4,19,39,.025),inset 0 1px 0 #fff!important;color:#17243a!important;
}
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select):hover:not(:focus){border-color:#b9c9d9!important}
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select):focus{
  background:#fff!important;border-color:#78afe2!important;
  box-shadow:0 0 0 3px rgba(20,124,255,.10),inset 0 1px 2px rgba(4,19,39,.02)!important;
}

/* ===== Home page: premium without changing its approved composition ===== */
.home-page .home-stage{padding-top:31px!important}
.home-page .mf-hero-board{
  border-top:3px solid transparent!important;
  border-image:linear-gradient(90deg,#147cff,#59c7ff 35%,#25c8c3 57%,#7767df 78%,#e94355) 1!important;
}
.home-page .mf-lead-copy{background:var(--mf-lux-ceramic)!important}
.home-page .mf-lead-copy h1 a{color:#0e2745!important}
.home-page .mf-tag{color:#0d67d3!important}
.home-page .mf-mini-card{background:var(--mf-lux-ceramic-soft)!important;border-color:#e0e7ee!important}
.home-page .mf-mini-card:nth-child(4n+1){--mf-home-card-accent:#147cff}
.home-page .mf-mini-card:nth-child(4n+2){--mf-home-card-accent:#25c8c3}
.home-page .mf-mini-card:nth-child(4n+3){--mf-home-card-accent:#7767df}
.home-page .mf-mini-card:nth-child(4n+4){--mf-home-card-accent:#e94355}
.home-page .mf-mini-card{border-bottom:2px solid var(--mf-home-card-accent,#147cff)!important}
.home-page .flash-strip{border-top:1px solid #d9e3ed!important;background:var(--mf-lux-ceramic)!important}
.home-page .flash-title i{background:var(--mf-lux-red)!important;box-shadow:0 0 0 4px rgba(233,67,85,.08)}
.home-page .pulse-panel{border-top:2px solid var(--mf-page-accent,#147cff)!important}
.home-page .hot-panel{border-top-color:#e94355!important}
.home-page .interesting-panel{border-top-color:#7767df!important}
.home-page .mf-home-dedications{border-top:2px solid #25c8c3!important}
.home-page .mf-hd-card{background:var(--mf-lux-ceramic)!important;border-color:#dbe4ed!important}
.home-page .mf-section{border-top:2px solid #d9e3ed!important}
.home-page .mf-section:nth-of-type(3n+1){border-top-color:#147cff!important}
.home-page .mf-section:nth-of-type(3n+2){border-top-color:#25c8c3!important}
.home-page .mf-section:nth-of-type(3n+3){border-top-color:#7767df!important}
.home-page .mf-wide-strip{
  background:
    radial-gradient(420px 180px at 90% 20%,rgba(89,199,255,.11),transparent 70%),
    linear-gradient(125deg,#071d37,#041327 70%,#092b50)!important;
  border-inline-start:3px solid #7767df!important;
}
.home-page .newsletter{border-top:2px solid #25c8c3!important}
.home-page .community-preview{border-top:2px solid #7767df!important}
.home-page .chart-card{border-top:2px solid #147cff!important}

/* ===== News / article ===== */
.news-masthead,.mf-community-hero,.mf-dd-hero,.profile-hero,.settings-hero,.notifications-hero,.about-hero,.contact-hero,.help-hero,.legal-hero,.terms-hero,.su-hero{
  background:
    radial-gradient(560px 220px at 12% 8%,rgba(89,199,255,.11),transparent 72%),
    radial-gradient(420px 180px at 86% 18%,rgba(119,103,223,.08),transparent 75%),
    linear-gradient(122deg,#041327 0%,#071d37 62%,#0a2a50 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.news-breaking{background:#07182d!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.news-breaking-label{color:#fff!important;background:#e94355!important}
.news-top-card,.news-row,.news-directory-card,.news-editorial-card{background:var(--mf-lux-ceramic)!important;border-color:#dce4ed!important}
.news-row-category,.news-kicker{color:#0d67d3!important}
.news-directory-card:nth-child(4n+1){border-top:2px solid #147cff!important}
.news-directory-card:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.news-directory-card:nth-child(4n+3){border-top:2px solid #7767df!important}
.news-directory-card:nth-child(4n+4){border-top:2px solid #e94355!important}
.mf-article-wrap .mf-article-kicker{color:#0d67d3!important}
.mf-article-wrap .mf-article-quote{background:var(--mf-lux-ceramic-soft)!important;border-inline-start-color:#7767df!important}
.mf-article-side-card{border-top:2px solid #59c7ff!important}
.mf-article-related-card:nth-child(3n+2){border-top:2px solid #25c8c3!important}
.mf-article-related-card:nth-child(3n+3){border-top:2px solid #7767df!important}

/* ===== Music / catalogue / albums / playlists / charts ===== */
.mf-music-head{border-bottom-color:#dbe4ed!important}
.mf-music-eyebrow{color:#0d67d3!important}
.mf-music-latest-grid .mf-latest-song:nth-child(4n+1){border-top:2px solid #147cff!important}
.mf-music-latest-grid .mf-latest-song:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.mf-music-latest-grid .mf-latest-song:nth-child(4n+3){border-top:2px solid #7767df!important}
.mf-music-latest-grid .mf-latest-song:nth-child(4n+4){border-top:2px solid #e94355!important}
.mf-music-row{background:var(--mf-lux-ceramic-soft)!important;border-bottom-color:#e5ebf1!important}
.mf-music-row:hover{background:#f4f8fc!important}
.album-card,.playlist-grid>a{padding-bottom:10px!important;border-bottom:1px solid #dbe4ed!important}
.album-card:nth-child(4n+1),.playlist-grid>a:nth-child(4n+1){border-bottom-color:#147cff!important}
.album-card:nth-child(4n+2),.playlist-grid>a:nth-child(4n+2){border-bottom-color:#25c8c3!important}
.album-card:nth-child(4n+3),.playlist-grid>a:nth-child(4n+3){border-bottom-color:#7767df!important}
.album-card:nth-child(4n+4),.playlist-grid>a:nth-child(4n+4){border-bottom-color:#e94355!important}
.chart-table{border-top:3px solid #071d37!important}
.chart-table-row:nth-child(even){background:#fbfcfe!important}
.chart-table-row:hover{background:#f1f7fc!important}

/* ===== Artists ===== */
.artists-editorial,.artists-directory,.artist-feature{border-top:2px solid #7767df!important}
.editorial-artist:nth-child(4n+2),.artist-profile-card:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.editorial-artist:nth-child(4n+3),.artist-profile-card:nth-child(4n+3){border-top:2px solid #147cff!important}
.editorial-artist:nth-child(4n+4),.artist-profile-card:nth-child(4n+4){border-top:2px solid #e94355!important}

/* ===== Community and dedications ===== */
.mf-community-hero__pulse,.mf-dd-hero-art{border-color:rgba(255,255,255,.11)!important}
.mf-community-composer{border-top:2px solid #25c8c3!important}
.mf-community-card--poll{border-top:2px solid #147cff!important}
.mf-community-card--featured{border-top:2px solid #7767df!important}
.mf-community-card--people{border-top:2px solid #25c8c3!important}
.mf-community-card--rules{border-top:2px solid #e94355!important}
.mf-community-post{border-right:3px solid #25c8c3!important}
.mf-community-topic{border-radius:2px!important;background:#eef7f8!important;color:#167b78!important;border:1px solid #cfe8e7!important}
.mf-community-quick__rail button{border-radius:2px!important}
.mf-community-quick__rail button.is-active{background:#071d37!important;color:#fff!important;border-color:#071d37!important}
.mf-dd-composer{border-top:2px solid #7767df!important}
.mf-dd-card{border-right:3px solid #7767df!important}
.mf-dd-card:nth-child(3n+2){border-right-color:#e94355!important}
.mf-dd-card:nth-child(3n+3){border-right-color:#25c8c3!important}
.mf-dd-filters button{border-radius:2px!important}

/* ===== Social Universe: same portal, not a separate dashboard ===== */
.social-universe-page .su-shell{background:transparent!important}
.social-universe-page .su-topnav-wrap{background:var(--mf-lux-ceramic)!important;border-bottom:1px solid #dbe4ed!important;box-shadow:0 5px 16px rgba(4,19,39,.035)!important}
.social-universe-page .su-topnav a{border-radius:0!important}
.social-universe-page .su-topnav a.is-active::after{background:linear-gradient(90deg,#7767df,#25c8c3)!important}
.social-universe-page .su-progress-hero{
  border-radius:3px!important;
  background:
    radial-gradient(360px 140px at 8% 0,rgba(37,200,195,.12),transparent 70%),
    radial-gradient(330px 160px at 90% 10%,rgba(119,103,223,.15),transparent 72%),
    linear-gradient(120deg,#06182f,#092b50)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
.social-universe-page .su-level-orb{border-radius:2px!important;border-color:rgba(89,199,255,.30)!important;box-shadow:inset 3px 0 0 #59c7ff!important}
.social-universe-page .su-card{border-top:2px solid #e1e8ef!important}
.social-universe-page .su-card:nth-of-type(3n+1){border-top-color:#7767df!important}
.social-universe-page .su-card:nth-of-type(3n+2){border-top-color:#25c8c3!important}
.social-universe-page .su-card:nth-of-type(3n+3){border-top-color:#147cff!important}
.social-universe-page .su-stat{border-radius:2px!important;background:var(--mf-lux-ceramic-soft)!important}
.social-universe-page .su-stat:nth-child(4n+1){border-top:2px solid #147cff!important}
.social-universe-page .su-stat:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.social-universe-page .su-stat:nth-child(4n+3){border-top:2px solid #7767df!important}
.social-universe-page .su-stat:nth-child(4n+4){border-top:2px solid #e94355!important}
.social-universe-page .su-mission,.social-universe-page .su-achievement,.social-universe-page .su-perk{border-radius:2px!important;background:var(--mf-lux-ceramic)!important}
.social-universe-page .su-feed-card{border-right:3px solid #7767df!important}
.social-universe-page .su-feed-card:nth-child(3n+2){border-right-color:#25c8c3!important}
.social-universe-page .su-feed-card:nth-child(3n+3){border-right-color:#147cff!important}
.social-universe-page .su-feed-event__mark{border-radius:2px!important;background:#eef4fb!important}
.social-universe-page .su-podium-card{border-radius:2px!important}
.social-universe-page .su-podium-card:nth-child(2){border-top:3px solid #7767df!important}
.social-universe-page .su-board-row{border-radius:0!important;background:#fff!important}
.social-universe-page .su-board-row:nth-child(even){background:#f9fbfd!important}
.social-universe-page .su-filterbar a{border-radius:0!important}
.social-universe-page .su-feed-tags span,.social-universe-page .su-profile-badges span{border-radius:2px!important}

/* ===== Public member profile ===== */
.member-social-page .mf-member{background:transparent!important}
.member-social-page .mf-member-cover{border-bottom:1px solid rgba(255,255,255,.08)!important}
.member-social-page .mf-member-card{border-top:2px solid #dce5ed!important}
.member-social-page .mf-member-card--level{border-top-color:#147cff!important}
.member-social-page .mf-member-card--music-dna{border-top-color:#25c8c3!important}
.member-social-page .mf-member-card--universe{border-top-color:#7767df!important}
.member-social-page .mf-member-card--artist{border-top-color:#e94355!important}
.member-social-page .mf-member-post{border-right:3px solid #147cff!important;background:var(--mf-lux-ceramic)!important}
.member-social-page .mf-member-comment__bubble{border-radius:2px!important;background:#f2f6fa!important;border:1px solid #e0e7ee!important}
.member-social-page .mf-member-tabs{background:var(--mf-lux-ceramic)!important;border-bottom:1px solid #dbe4ed!important}
.member-social-page .mf-member-tabs a{border-radius:0!important}
.member-social-page .mf-member-badge,.member-social-page .mf-member-author-rank,.member-social-page .mf-member-level-chip{border-radius:2px!important}
.member-social-page .mf-member-rank-roadmap__list>*{border-radius:2px!important}

/* ===== Account areas ===== */
.profile-local-nav,.settings-nav-wrap,.notifications-filter-wrap{
  background:var(--mf-lux-ceramic)!important;border-color:#dbe4ed!important;box-shadow:var(--mf-lux-shadow-1)!important;
}
.profile-local-nav a,.settings-nav a,.notifications-filters a{border-radius:0!important}
.profile-local-nav a.active::after,.settings-nav a.active::after,.notifications-filters a.is-on::after{
  background:linear-gradient(90deg,#147cff,#59c7ff,#7767df)!important;
}
.profile-stat:nth-child(4n+1){border-top:2px solid #147cff!important}
.profile-stat:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.profile-stat:nth-child(4n+3){border-top:2px solid #7767df!important}
.profile-stat:nth-child(4n+4){border-top:2px solid #e94355!important}
.profile-feature-card--music{border-top:2px solid #25c8c3!important}
.profile-feature-card--community{border-top:2px solid #7767df!important}
.settings-security-card{border-top:2px solid #147cff!important}
.settings-accessibility-card{border-top:2px solid #25c8c3!important}
.settings-connections-card{border-top:2px solid #7767df!important}
.settings-danger-card{border-top:2px solid #e94355!important}
.notification-card{border-right:3px solid #147cff!important}
.notification-card:nth-of-type(3n+2){border-right-color:#25c8c3!important}
.notification-card:nth-of-type(3n+3){border-right-color:#7767df!important}

/* ===== About / help / contact / legal ===== */
.about-world-item:nth-child(4n+1),.about-tech-grid article:nth-child(4n+1),.about-principles-grid article:nth-child(4n+1){border-top:2px solid #147cff!important}
.about-world-item:nth-child(4n+2),.about-tech-grid article:nth-child(4n+2),.about-principles-grid article:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.about-world-item:nth-child(4n+3),.about-tech-grid article:nth-child(4n+3),.about-principles-grid article:nth-child(4n+3){border-top:2px solid #7767df!important}
.about-world-item:nth-child(4n+4),.about-tech-grid article:nth-child(4n+4),.about-principles-grid article:nth-child(4n+4){border-top:2px solid #e94355!important}
.contact-route-grid>article:nth-child(3n+1),.help-category-card:nth-child(3n+1){border-top:2px solid #147cff!important}
.contact-route-grid>article:nth-child(3n+2),.help-category-card:nth-child(3n+2){border-top:2px solid #25c8c3!important}
.contact-route-grid>article:nth-child(3n+3),.help-category-card:nth-child(3n+3){border-top:2px solid #7767df!important}
.legal-summary-item:nth-child(4n+1){border-top:2px solid #147cff!important}
.legal-summary-item:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.legal-summary-item:nth-child(4n+3){border-top:2px solid #7767df!important}
.legal-summary-item:nth-child(4n+4){border-top:2px solid #e94355!important}

/* ===== Auth ===== */
.auth-wrap{background:transparent!important}
.auth-shell{border-top:3px solid transparent!important;border-image:linear-gradient(90deg,#147cff,#59c7ff,#25c8c3,#7767df) 1!important}
.auth-input-wrap{border-radius:2px!important}

/* ===== Menus / search / overlays ===== */
.mega-menu.v4-mega.mf-expanded-mega,.mf-header-account__menu,.mf-notification-dropdown,.premium-search{
  background:var(--mf-lux-ceramic)!important;border-color:#ccd8e4!important;box-shadow:var(--mf-lux-shadow-3)!important;
}
.mega-menu.v4-mega.mf-expanded-mega{border-top:1px solid #dce5ee!important}
.mf-mega-group{background:#fff!important;border-color:#e1e7ee!important}
.mf-mega-group:nth-child(5n+1){border-top:2px solid #147cff!important}
.mf-mega-group:nth-child(5n+2){border-top:2px solid #25c8c3!important}
.mf-mega-group:nth-child(5n+3){border-top:2px solid #7767df!important}
.mf-mega-group:nth-child(5n+4){border-top:2px solid #e94355!important}
.mf-mega-group:nth-child(5n+5){border-top:2px solid #59c7ff!important}
.search-overlay{background:rgba(3,16,32,.62)!important}
.premium-search::before{height:3px!important;background:linear-gradient(90deg,#147cff,#59c7ff,#25c8c3,#7767df,#e94355)!important}

/* ===== Footer ===== */
.mf-editorial-footer{
  background:
    radial-gradient(620px 230px at 14% 0,rgba(20,124,255,.11),transparent 72%),
    radial-gradient(520px 210px at 80% 4%,rgba(119,103,223,.08),transparent 74%),
    linear-gradient(180deg,#06182f 0%,#041327 55%,#030f1e 100%)!important;
}
.mf-footer-accent{height:3px!important;background:linear-gradient(90deg,#147cff 0 24%,#59c7ff 24% 42%,#25c8c3 42% 60%,#7767df 60% 79%,#e94355 79% 100%)!important}
.mf-footer-accent span,.mf-footer-accent i{display:none!important}
.mf-footer-column:nth-child(1) .mf-footer-column-title span{color:#59c7ff!important}
.mf-footer-column:nth-child(2) .mf-footer-column-title span{color:#25c8c3!important}
.mf-footer-column:nth-child(3) .mf-footer-column-title span{color:#9a8cf0!important}
.mf-footer-column:nth-child(4) .mf-footer-column-title span{color:#f16a78!important}

/* ===== Fine pointer polish ===== */
@media(hover:hover) and (pointer:fine){
  body :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card
  ){
    transition:transform .22s var(--mf-ui-ease,cubic-bezier(.2,.75,.25,1)),box-shadow .22s ease,border-color .22s ease,filter .22s ease!important;
  }
  body :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card
  ):hover{
    transform:translateY(-2px)!important;border-color:var(--mf-lux-ceramic-edge-strong)!important;
    box-shadow:var(--mf-lux-shadow-2)!important;
  }
}

/* ===== Mobile: same luxury language, no giant bubbles ===== */
@media(max-width:980px){
  body{background:
    radial-gradient(460px 200px at 8% 0,rgba(37,200,195,.045),transparent 72%),
    radial-gradient(430px 190px at 92% 0,rgba(119,103,223,.04),transparent 72%),
    linear-gradient(180deg,#eef3f7,#f5f7fa 260px,#f2f5f8)!important;background-attachment:scroll!important}
  body :is(
    .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.news-top,.news-side-block,.mf-article-side-card,
    .mf-latest-song,.mf-music-filter,.mf-music-list,.artists-editorial,.artists-directory,.artist-feature,
    .mf-community-composer,.mf-community-card,.mf-community-post,.mf-dd-composer,.mf-dd-card,.su-card,
    .mf-member-card,.mf-member-post,.profile-card,.profile-side-card,.settings-card,.settings-side-card,.notification-card,
    .notifications-side-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.legal-document,.terms-document,.auth-shell
  ){box-shadow:var(--mf-lux-shadow-1)!important}
  .mobile-bottom.mf-mobile-bottom{
    background:var(--mf-lux-ceramic)!important;border-top:1px solid #d5e0e9!important;
    box-shadow:inset 0 1px 0 #fff,0 -10px 30px rgba(4,19,39,.09)!important;
  }
  .mobile-bottom.mf-mobile-bottom::before{
    content:"";position:absolute;right:0;left:0;top:-1px;height:1px;
    background:linear-gradient(90deg,transparent,#147cff 20%,#25c8c3 45%,#7767df 70%,transparent);
    opacity:.25;
  }
}

@media(max-width:760px){
  :root{--mf-lux-control-height:43px}
  .mf-container,.container{width:calc(100% - 22px)!important}
  body :is(
    .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.news-top,.news-side-block,.news-directory-card,
    .mf-community-composer,.mf-community-card,.mf-community-post,.mf-dd-composer,.mf-dd-card,
    .su-card,.su-stat,.su-mission,.su-achievement,.su-podium-card,.su-feed-card,
    .mf-member-card,.mf-member-composer,.mf-member-post,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
    .notification-card,.notifications-side-card,.help-category-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.auth-shell
  ){border-radius:2px!important}
  :is(.section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,.mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,.profile-section-head,.settings-section-head,.notifications-list-head,.about-section-heading,.contact-section-heading,.help-section-head)::before{
    top:-8px!important;width:42px!important;height:2px!important;
  }
  .home-page .mf-hero-board{border-top-width:2px!important}
  .social-universe-page .su-progress-hero{border-radius:2px!important}
  .member-social-page .mf-member-badge,.member-social-page .mf-member-author-rank,.member-social-page .mf-member-level-chip{border-radius:2px!important}
}

@media(max-width:520px){
  .mf-container,.container{width:calc(100% - 18px)!important}
  .inner-page .page-title h1{font-size:35px!important}
  .inner-page .page-title{margin-bottom:23px!important;padding-bottom:17px!important}
  .inner-page .page-title::after{width:70px!important;height:2px!important}
}

@media(prefers-reduced-motion:reduce){
  body :is(.mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,.mf-latest-song,.album-card,.playlist-grid>a,.editorial-artist,.artist-profile-card,.mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,.mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,.about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card):hover{transform:none!important}
}

/* ===== Remaining legacy/listing surfaces and the History book ===== */
body :is(.song-list,.artist-card,.cards-4>a,.contact-card,.history-reader,.history-sidebar-inner,.history-archive,.history-notes-sheet,.history-endnote,.history-dialog){
  background:var(--mf-lux-ceramic)!important;border-color:var(--mf-lux-ceramic-edge)!important;box-shadow:var(--mf-lux-shadow-1)!important;
}
.artist-card,.cards-4>a,.history-archive,.history-notes-sheet,.history-endnote,.history-dialog{border-radius:3px!important}
.song-list{border-top:2px solid #147cff!important}
.artist-card:nth-child(4n+1),.cards-4>a:nth-child(4n+1){border-top:2px solid #147cff!important}
.artist-card:nth-child(4n+2),.cards-4>a:nth-child(4n+2){border-top:2px solid #25c8c3!important}
.artist-card:nth-child(4n+3),.cards-4>a:nth-child(4n+3){border-top:2px solid #7767df!important}
.artist-card:nth-child(4n+4),.cards-4>a:nth-child(4n+4){border-top:2px solid #e94355!important}
.history-book-page{--mf-page-accent:#7767df;--mf-page-accent-2:#25c8c3;--mf-page-accent-3:#147cff}
.history-book-page .history-cover{
  background:radial-gradient(560px 220px at 12% 8%,rgba(89,199,255,.10),transparent 72%),radial-gradient(430px 180px at 84% 20%,rgba(119,103,223,.11),transparent 74%),linear-gradient(122deg,#041327,#071d37 62%,#0a2a50)!important;
}
.history-book-page .history-reader{border-top:2px solid #7767df!important}
.history-book-page .history-sidebar-inner{border-top:2px solid #25c8c3!important}
.history-book-page .history-chapter-heading{position:relative}
.history-book-page .history-chapter-heading::before{content:"";position:absolute;inset-inline-start:0;top:-10px;width:52px;height:3px;background:linear-gradient(90deg,#7767df 0 43%,#25c8c3 43% 72%,#147cff 72%)}
.history-book-page .history-button{border-radius:2px!important}
.history-book-page .history-button-primary{background:linear-gradient(135deg,#147cff,#0c67d6 62%,#0a57b7)!important;border-color:#0b5fbe!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 18px rgba(13,103,211,.16)!important}
.history-book-page .history-button-secondary{background:var(--mf-lux-ceramic-soft)!important;border-color:#cbd8e4!important;color:#173b63!important}
.history-book-page .history-milestones{background:var(--mf-lux-ceramic)!important;border-color:#dbe4ed!important;box-shadow:var(--mf-lux-shadow-1)!important}
.history-book-page .history-index a{border-radius:0!important}
.history-book-page .history-index a:hover{background:#f1f6fb!important}

/* Keep small information chips disciplined. Only true status/identity chips may be capsule-like. */
.member-social-page :is(.mf-music-dna-block,.mf-music-dna-song,.mf-member-universe-links a,.mf-member-dedications>*,.mf-member-rank-roadmap__list>*),
.social-universe-page :is(.su-weekly-crown,.su-profile-insight){border-radius:3px!important}
.social-universe-page .su-weekly-crown{background:radial-gradient(280px 120px at 12% 0,rgba(37,200,195,.13),transparent 70%),linear-gradient(135deg,#071d37,#0a2b50)!important;border-color:rgba(89,199,255,.18)!important}
.social-universe-page .su-profile-insight{background:radial-gradient(260px 100px at 90% 0,rgba(119,103,223,.13),transparent 70%),linear-gradient(135deg,#071d37,#0a2b50)!important}
.social-universe-page .su-weekly-crown__orb{border-radius:2px!important}
.social-universe-page .su-achievement__badge,.social-universe-page .su-perk__icon{border-radius:2px!important}

/* ========================================================================== 
   MUSIC FM — OPAQUE CERAMIC GLASS CORRECTION / 2026-10-08
   User-approved direction: NO decorative frames and NO coloured stripes on
   content blocks. White areas should feel like polished opaque ceramic-glass:
   solid, bright, tactile and premium — never translucent and never boxed-in.
   ========================================================================== */
:root{
  --mf-lux-ceramic:
    radial-gradient(140% 105% at 8% -10%,rgba(255,255,255,1) 0%,rgba(255,255,255,.78) 30%,rgba(255,255,255,0) 56%),
    radial-gradient(90% 75% at 96% 106%,rgba(216,229,240,.16) 0%,rgba(255,255,255,0) 62%),
    linear-gradient(145deg,#ffffff 0%,#fefefe 38%,#fbfcfd 72%,#f6f9fb 100%);
  --mf-lux-ceramic-soft:
    radial-gradient(125% 90% at 12% -4%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 54%),
    linear-gradient(145deg,#ffffff 0%,#fbfcfd 62%,#f3f7fa 100%);
  --mf-lux-ceramic-pressed:linear-gradient(180deg,#f4f7fa 0%,#ffffff 100%);
  --mf-lux-ceramic-edge:transparent;
  --mf-lux-ceramic-edge-strong:transparent;
  --mf-lux-ceramic-highlight:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -16px 28px rgba(163,188,208,.045);
  --mf-lux-shadow-1:var(--mf-lux-ceramic-highlight),0 1px 2px rgba(4,19,39,.025),0 11px 30px rgba(4,19,39,.052);
  --mf-lux-shadow-2:var(--mf-lux-ceramic-highlight),0 2px 5px rgba(4,19,39,.035),0 20px 46px rgba(4,19,39,.075);
}

/* All principal white packages use material depth instead of a visible frame. */
body :is(
  .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.mf-home-dedications,
  .news-top,.news-side-block,.news-directory-card,.news-editorial-card,
  .mf-article-side-card,.mf-reader-desk,.mf-article-related-card,
  .mf-latest-song,.mf-music-filter,.mf-music-list,.mf-music-empty,
  .artists-editorial,.artists-directory,.artist-feature,.artist-profile-card,.editorial-artist,
  .album-card,.playlist-grid>a,.chart-table,.song-list,.artist-card,.cards-4>a,
  .mf-community-composer,.mf-community-card,.mf-community-post,.mf-community-empty,
  .mf-dd-composer,.mf-dd-card,.mf-dd-popular,.mf-dd-empty,.mf-dd-notice,
  .su-card,.su-stat,.su-mission,.su-achievement,.su-perk,.su-podium-card,.su-board-row,.su-feed-card,.su-profile-insight,
  .mf-member-card,.mf-member-composer,.mf-member-post,.mf-member-private,.mf-member-missing,
  .profile-card,.profile-side-card,.profile-feature-card,.profile-library-card,.profile-panel,.profile-stat,
  .settings-card,.settings-side-card,.settings-choice-card,.settings-mini-feature,
  .notification-card,.notifications-side-card,.notifications-empty,
  .about-hero-card,.about-world-item,.about-tech-grid article,.about-principles-grid article,.about-contact-card,
  .contact-form-card,.contact-route-grid>article,.contact-final-card,.contact-card,
  .help-category-card,.help-faq-content,.help-faq-sidebar,.help-contact-card,
  .legal-document,.legal-sidebar,.legal-summary-item,.terms-document,.terms-sidebar,
  .auth-shell,.auth-panel,.history-reader,.history-sidebar-inner,.history-archive,.history-notes-sheet,.history-endnote,.history-dialog,
  .mf-mega-group,.profile-local-nav,.settings-nav-wrap,.notifications-filter-wrap
){
  background:var(--mf-lux-ceramic)!important;
  border-color:transparent!important;
  box-shadow:var(--mf-lux-shadow-1)!important;
}

/* Featured content gets more separation only through shadow/depth. */
body :is(
  .mf-hero-board,.news-top,.artist-feature,.mf-community-composer,.mf-dd-composer,
  .su-progress-hero,.mf-member-card--artist,.profile-feature-card,.auth-shell,
  .contact-form-card,.help-contact-card,.about-contact-card
){box-shadow:var(--mf-lux-shadow-2)!important}

/* Remove the added decorative highlight bars from white blocks. */
body :is(
  .mf-hero-board,.pulse-panel,.mf-side-card,.mf-section,.news-top,.news-side-block,.mf-article-side-card,
  .artists-editorial,.artists-directory,.artist-feature,.mf-music-filter,.mf-music-list,
  .mf-community-composer,.mf-community-card,.mf-dd-composer,.mf-dd-popular,
  .su-card,.mf-member-card,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
  .notifications-side-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.legal-document,.terms-document,.auth-shell
)::after{content:none!important;display:none!important}

/* No global coloured section stripe. Typography and spacing carry hierarchy. */
:is(
  .section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,
  .artists-section-head,.mf-artist-section-head,.mf-community-section-head,.mf-dd-section-head,
  .su-section-title,.mf-member-section-head,.profile-section-head,.settings-section-head,
  .notifications-list-head,.about-section-heading,.contact-section-heading,.help-section-head,
  .legal-document-head,.terms-document-head
)::before{content:none!important;display:none!important}

/* Remove decorative coloured card edges introduced by the previous pass. */
.social-universe-page :is(.su-stat,.su-feed-card,.su-podium-card),
.member-social-page :is(.mf-member-card,.mf-member-post),
:is(.profile-stat,.profile-feature-card--music,.profile-feature-card--community),
:is(.settings-security-card,.settings-accessibility-card,.settings-connections-card,.settings-danger-card),
.notification-card,
:is(.about-world-item,.about-tech-grid article,.about-principles-grid article),
.contact-route-grid>article,.help-category-card,.legal-summary-item,
.mf-mega-group,.artist-card,.cards-4>a,.song-list,
.history-book-page :is(.history-reader,.history-sidebar-inner),
.auth-shell{
  border-top-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
  border-left-color:transparent!important;
  border-image:none!important;
}

/* White social/feed/list rows should feel like ceramic sheets, not framed cards. */
.social-universe-page :is(.su-stat,.su-mission,.su-achievement,.su-perk,.su-feed-card,.su-podium-card,.su-board-row),
.member-social-page :is(.mf-member-card,.mf-member-post,.mf-member-comment__bubble),
:is(.profile-stat,.profile-feature-card,.profile-library-card,.notification-card){
  background:var(--mf-lux-ceramic)!important;
  border-color:transparent!important;
}

/* Navigation containers are ceramic too, but never outlined as floating boxes. */
.social-universe-page .su-topnav-wrap,
.member-social-page .mf-member-tabs,
.profile-local-nav,.settings-nav-wrap,.notifications-filter-wrap{
  background:var(--mf-lux-ceramic)!important;
  border-color:transparent!important;
  box-shadow:0 8px 26px rgba(4,19,39,.045)!important;
}

/* Remove only decorative shell stripes. Functional active-tab/nav indicators stay. */
.site-header.v4-site-header::before,
.mf-editorial-footer .mf-footer-accent,
.mf-footer-accent,
.premium-search::before,
.history-book-page .history-chapter-heading::before{display:none!important;content:none!important}

/* Inputs stay crisp; their outline is functional, not decorative framing. */
body:not(.mf-admin) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%)!important;
  border-color:rgba(109,133,158,.24)!important;
  box-shadow:inset 0 1px 2px rgba(4,19,39,.025),0 5px 14px rgba(4,19,39,.018)!important;
}

@media(hover:hover) and (pointer:fine){
  body :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card
  ):hover{
    border-color:transparent!important;
    box-shadow:var(--mf-lux-shadow-2)!important;
  }
}

@media(max-width:760px){
  body :is(
    .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.news-top,.news-side-block,.news-directory-card,
    .mf-community-composer,.mf-community-card,.mf-community-post,.mf-dd-composer,.mf-dd-card,
    .su-card,.su-stat,.su-mission,.su-achievement,.su-podium-card,.su-feed-card,
    .mf-member-card,.mf-member-composer,.mf-member-post,.profile-card,.profile-side-card,.settings-card,.settings-side-card,
    .notification-card,.notifications-side-card,.help-category-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.auth-shell
  ){
    box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -12px 22px rgba(163,188,208,.035),0 1px 2px rgba(4,19,39,.02),0 8px 22px rgba(4,19,39,.042)!important;
  }
}

/* Strong no-stripe reset for selectors that previously used nth-child colour bars. */
.social-universe-page .su-stat:nth-child(n),
.social-universe-page .su-feed-card:nth-child(n),
.social-universe-page .su-podium-card:nth-child(n),
.member-social-page .mf-member-card,
.member-social-page .mf-member-post,
.profile-stat:nth-child(n),
.profile-feature-card--music,.profile-feature-card--community,
.settings-security-card,.settings-accessibility-card,.settings-connections-card,.settings-danger-card,
.notification-card:nth-of-type(n),
.about-world-item:nth-child(n),.about-tech-grid article:nth-child(n),.about-principles-grid article:nth-child(n),
.contact-route-grid>article:nth-child(n),.help-category-card:nth-child(n),.legal-summary-item:nth-child(n),
.mf-mega-group:nth-child(n),.artist-card:nth-child(n),.cards-4>a:nth-child(n),
.history-book-page .history-reader,.history-book-page .history-sidebar-inner,
.auth-shell,.song-list{
  border-top:0!important;
  border-right:0!important;
  border-bottom-color:transparent!important;
  border-left:0!important;
  border-image:none!important;
}

/* ========================================================================== 
   MUSIC FM — LUXURY MASTER REFINEMENT / 2026-10-08
   A significant global visual upgrade built on the approved classic identity.
   No decorative stripes or frames. Opaque ceramic-white material, stronger
   depth, refined typography, unified controls and explicit contrast safety.
   ========================================================================== */
:root{
  --mf-lm-page:#f1f4f7;
  --mf-lm-page-2:#f7f9fb;
  --mf-lm-ink:#12243b;
  --mf-lm-ink-strong:#091d36;
  --mf-lm-muted:#63758b;
  --mf-lm-muted-soft:#8492a4;
  --mf-lm-blue:#126fd8;
  --mf-lm-blue-bright:#2b8cff;
  --mf-lm-sky:#5dc9f5;
  --mf-lm-turquoise:#23bfb9;
  --mf-lm-purple:#7767d9;
  --mf-lm-red:#df4558;
  --mf-lm-navy:#041327;
  --mf-lm-navy-2:#071d37;
  --mf-lm-ceramic:
    radial-gradient(145% 92% at 7% -13%,#ffffff 0%,#ffffff 31%,rgba(255,255,255,0) 59%),
    radial-gradient(78% 58% at 95% 108%,rgba(211,224,236,.24) 0%,rgba(247,250,252,0) 67%),
    linear-gradient(145deg,#ffffff 0%,#fefefe 43%,#fafcfd 73%,#f4f7f9 100%);
  --mf-lm-ceramic-soft:
    radial-gradient(125% 78% at 8% -8%,#fff 0%,rgba(255,255,255,0) 55%),
    linear-gradient(145deg,#fff 0%,#fbfcfd 67%,#f3f6f8 100%);
  --mf-lm-ceramic-inset:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 34px rgba(132,157,180,.045);
  --mf-lm-shadow-1:
    var(--mf-lm-ceramic-inset),
    0 2px 3px rgba(5,24,47,.028),
    0 14px 34px rgba(5,24,47,.055),
    0 32px 74px rgba(5,24,47,.035);
  --mf-lm-shadow-2:
    var(--mf-lm-ceramic-inset),
    0 3px 8px rgba(5,24,47,.045),
    0 20px 46px rgba(5,24,47,.085),
    0 48px 100px rgba(5,24,47,.055);
  --mf-lm-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 34px rgba(132,157,180,.04),
    0 4px 11px rgba(5,24,47,.055),
    0 24px 54px rgba(5,24,47,.105),
    0 54px 110px rgba(5,24,47,.06);
  --mf-lm-radius:3px;
  --mf-lm-radius-soft:5px;
}

/* ---------- The page itself now has depth, not a flat grey canvas ---------- */
html{background:var(--mf-lm-page)!important}
body:not(.mf-admin){
  color:var(--mf-lm-ink)!important;
  background:
    radial-gradient(800px 420px at 9% 8%,rgba(93,201,245,.075),transparent 72%),
    radial-gradient(720px 390px at 91% 30%,rgba(119,103,217,.045),transparent 74%),
    linear-gradient(180deg,#f8fafc 0,#f2f5f8 380px,#eef2f5 100%)!important;
  background-attachment:fixed!important;
}
body:not(.mf-admin) main{position:relative;isolation:isolate}
body:not(.mf-admin) .mf-container,
body:not(.mf-admin) .container{max-width:1260px}

/* ---------- Type hierarchy: sharper, calmer, more editorial ---------- */
body:not(.mf-admin) :is(h1,h2,h3,h4,h5,h6){color:var(--mf-lm-ink-strong)!important;text-wrap:balance}
body:not(.mf-admin) :is(.page-title h1,.section-heading h2,.mf-section-heading h2,.portal-title h2,.su-section-title h2,.mf-member-section-head h2){
  letter-spacing:-.045em!important;
  font-weight:800!important;
}
body:not(.mf-admin) :is(.page-title p,.section-heading p,.mf-section-heading p,.portal-title span,.su-section-title small,.mf-member-section-head p){
  color:var(--mf-lm-muted)!important;
}
body:not(.mf-admin) :is(.meta,[class*="__meta"],time,.eyebrow,[class*="eyebrow"],[class*="kicker"]){letter-spacing:.01em}

/* ---------- Ceramic material system: visible and tactile, never transparent ---------- */
body:not(.mf-admin) :is(
  .mf-hero-board,.flash-strip,.pulse-panel,.side-card,.mf-side-card,.mf-section,.mf-home-dedications,
  .news-top,.news-side-block,.news-directory-card,.news-editorial-card,
  .mf-article-side-card,.mf-reader-desk,.mf-article-related-card,
  .mf-latest-song,.mf-music-filter,.mf-music-list,.mf-music-empty,
  .artists-editorial,.artists-directory,.artist-feature,.artist-profile-card,.editorial-artist,
  .album-card,.playlist-grid>a,.chart-table,.song-list,.artist-card,.cards-4>a,
  .mf-community-composer,.mf-community-card,.mf-community-post,.mf-community-empty,
  .mf-dd-composer,.mf-dd-card,.mf-dd-popular,.mf-dd-empty,.mf-dd-notice,
  .su-card,.su-stat,.su-mission,.su-achievement,.su-perk,.su-podium-card,.su-board-row,.su-feed-card,
  .mf-member-card,.mf-member-composer,.mf-member-post,.mf-member-private,.mf-member-missing,
  .profile-card,.profile-side-card,.profile-feature-card,.profile-library-card,.profile-panel,.profile-stat,
  .settings-card,.settings-side-card,.settings-choice-card,.settings-mini-feature,
  .notification-card,.notifications-side-card,.notifications-empty,
  .about-hero-card,.about-world-item,.about-tech-grid article,.about-principles-grid article,.about-contact-card,
  .contact-form-card,.contact-route-grid>article,.contact-final-card,.contact-card,
  .help-category-card,.help-faq-content,.help-faq-sidebar,.help-contact-card,
  .legal-document,.legal-sidebar,.legal-summary-item,.terms-document,.terms-sidebar,
  .auth-shell,.auth-panel,.history-reader,.history-sidebar-inner,.history-archive,.history-notes-sheet,.history-endnote,.history-dialog,
  .mf-mega-group,.profile-local-nav,.settings-nav-wrap,.notifications-filter-wrap
){
  background:var(--mf-lm-ceramic)!important;
  border:0!important;
  border-image:none!important;
  box-shadow:var(--mf-lm-shadow-1)!important;
}

/* Main/featured packages are intentionally more luxurious and clearly separated. */
body:not(.mf-admin) :is(
  .mf-hero-board,.news-top,.artist-feature,.mf-community-composer,.mf-dd-composer,
  .su-progress-hero,.mf-member-card--artist,.profile-feature-card,.auth-shell,
  .contact-form-card,.help-contact-card,.about-contact-card,.history-reader
){box-shadow:var(--mf-lm-shadow-2)!important}

/* Remove every decorative shell stripe/frame from the content layer. */
body:not(.mf-admin) :is(
  .mf-hero-board,.flash-strip,.pulse-panel,.hot-panel,.interesting-panel,.mf-side-card,.mf-section,
  .news-top,.news-side-block,.artist-feature,.artists-editorial,.artists-directory,
  .mf-community-composer,.mf-community-card,.mf-dd-composer,.mf-dd-popular,
  .su-card,.su-stat,.su-feed-card,.su-podium-card,.mf-member-card,.mf-member-post,
  .profile-card,.profile-side-card,.settings-card,.settings-side-card,.notification-card,
  .help-faq-content,.help-faq-sidebar,.contact-form-card,.legal-document,.terms-document,.auth-shell
){
  border-top:0!important;border-right:0!important;border-bottom:0!important;border-left:0!important;border-image:none!important;
}
body:not(.mf-admin) .home-page .mf-hero-board,
body.home-page .mf-hero-board{border:0!important;border-image:none!important}
body:not(.mf-admin) :is(.mf-hero-board,.flash-strip,.pulse-panel,.hot-panel,.interesting-panel,.mf-section,.mf-side-card)::before,
body:not(.mf-admin) :is(.mf-hero-board,.flash-strip,.pulse-panel,.hot-panel,.interesting-panel,.mf-section,.mf-side-card)::after{
  content:none!important;display:none!important;border:0!important;background:none!important;box-shadow:none!important
}

/* Ceramic sheen comes from the material, not a line around the card. */
body:not(.mf-admin) :is(.mf-hero-board,.pulse-panel,.news-top,.artist-feature,.mf-community-composer,.mf-dd-composer,.profile-card,.settings-card,.notification-card,.contact-form-card,.help-category-card){
  position:relative;
}

/* ---------- Hover language: consistent and premium ---------- */
@media(hover:hover) and (pointer:fine){
  body:not(.mf-admin) :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-board-row,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card
  ){
    transition:transform .22s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease,background .22s ease!important;
  }
  body:not(.mf-admin) :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-board-row,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card
  ):hover{
    transform:translateY(-3px)!important;
    background:var(--mf-lm-ceramic)!important;
    box-shadow:var(--mf-lm-shadow-hover)!important;
  }
}

/* ---------- Images: a cleaner editorial finish ---------- */
body:not(.mf-admin) :is(.mf-lead-image,.mini-media,.news-card-media,.news-row-media,.album-cover,.artist-photo,.mf-member-media,.profile-media) img{
  filter:saturate(1.02) contrast(1.015)!important;
}
body:not(.mf-admin) :is(.mini-media,.news-card-media,.news-row-media,.album-cover,.artist-photo){overflow:hidden;border-radius:2px!important}

/* ---------- Home: clearly more polished without changing composition ---------- */
body.home-page .home-stage{padding-top:38px!important;padding-bottom:78px!important}
body.home-page .mf-hero-board{overflow:hidden!important;background:var(--mf-lm-ceramic)!important}
body.home-page .mf-lead-copy{padding:48px 46px 40px!important;background:var(--mf-lm-ceramic)!important}
body.home-page .mf-lead-copy h1{font-size:clamp(42px,3.4vw,54px)!important;line-height:1.02!important;letter-spacing:-.055em!important}
body.home-page .mf-lead-copy p{font-size:16.5px!important;line-height:1.72!important;color:#56697e!important;max-width:560px}
body.home-page .mf-tag{
  background:#eef5fb!important;color:#0d5fb9!important;border:0!important;border-radius:2px!important;
  box-shadow:inset 0 0 0 1px rgba(13,95,185,.08)!important;font-weight:800!important;
}
body.home-page .mf-mini-card{background:var(--mf-lm-ceramic-soft)!important;border:0!important;box-shadow:none!important;padding:17px 17px 19px!important}
body.home-page .mf-mini-card:nth-child(n){border-bottom:0!important}
body.home-page .flash-strip{margin-top:30px!important;background:var(--mf-lm-ceramic)!important;border:0!important;box-shadow:var(--mf-lm-shadow-1)!important}
body.home-page .pulse-grid{gap:26px!important;margin-top:32px!important}
body.home-page .pulse-panel{padding:25px 27px 27px!important;border:0!important;background:var(--mf-lm-ceramic)!important}
body.home-page .hot-panel::before,body.home-page .interesting-panel::before{content:none!important;display:none!important}
body.home-page .portal-title{height:auto!important;min-height:70px!important;margin-bottom:18px!important;align-items:flex-end!important}
body.home-page .portal-title h2{font-size:32px!important;letter-spacing:-.045em!important}
body.home-page .mf-section{padding:25px 25px 28px!important;margin-bottom:34px!important;background:var(--mf-lm-ceramic)!important;border:0!important}
body.home-page .mf-section:nth-of-type(n){border-top:0!important}
body.home-page .mf-home-dedications{border:0!important;box-shadow:var(--mf-lm-shadow-1)!important}

/* ---------- Global section rhythm: more breathing room, less template-like ---------- */
body:not(.mf-admin) :is(.section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,.mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,.profile-section-head,.settings-section-head,.notifications-list-head,.about-section-heading,.contact-section-heading,.help-section-head){
  margin-bottom:24px!important;
}
body:not(.mf-admin) :is(.section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,.mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,.profile-section-head,.settings-section-head,.notifications-list-head,.about-section-heading,.contact-section-heading,.help-section-head)::before,
body:not(.mf-admin) :is(.section-heading,.mf-section-heading,.news-section-head,.mf-article-related-head,.mf-music-section-head,.artists-section-head,.mf-artist-section-head,.mf-community-section-head,.mf-dd-section-head,.su-section-title,.mf-member-section-head,.profile-section-head,.settings-section-head,.notifications-list-head,.about-section-heading,.contact-section-heading,.help-section-head)::after{
  content:none!important;display:none!important
}

/* ---------- Buttons: one family, premium tactile depth ---------- */
body:not(.mf-admin) :is(
  .primary-btn,.about-btn-primary,.history-button-primary,.profile-action--primary,.auth-submit,
  .contact-form-actions button[type="submit"],.dedication-form-actions button[type="submit"],
  .mf-community-composer__submit button,.mf-dd-button:not(.mf-dd-button--quiet),
  .settings-primary-button,.mf-music-filter__submit,.mf-hd-send,.su-button--blue,
  .mf-member-primary,.mf-member-action--primary,.mf-member-card__artist-button,.notifications-mark-all
){
  color:#fff!important;
  background:linear-gradient(180deg,#2587ea 0%,#126fd8 54%,#0b5fbe 100%)!important;
  border:0!important;border-radius:3px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 3px rgba(5,38,77,.08),0 10px 24px rgba(18,111,216,.20)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.08)!important;
  min-height:43px;
}
body:not(.mf-admin) :is(
  .secondary-btn,.about-btn-ghost,.history-button-secondary,.mf-community-secondary,
  .mf-dd-button--quiet,.su-button--ghost,.mf-member-secondary
){
  color:#163b61!important;background:var(--mf-lm-ceramic)!important;border:0!important;border-radius:3px!important;
  box-shadow:var(--mf-lm-shadow-1)!important;
}
@media(hover:hover) and (pointer:fine){
  body:not(.mf-admin) :is(.primary-btn,.about-btn-primary,.history-button-primary,.profile-action--primary,.auth-submit,.contact-form-actions button[type="submit"],.dedication-form-actions button[type="submit"],.mf-community-composer__submit button,.mf-dd-button:not(.mf-dd-button--quiet),.settings-primary-button,.mf-music-filter__submit,.mf-hd-send,.su-button--blue,.mf-member-primary,.mf-member-action--primary,.mf-member-card__artist-button,.notifications-mark-all):hover{
    transform:translateY(-2px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.31),0 4px 8px rgba(5,38,77,.10),0 16px 34px rgba(18,111,216,.24)!important
  }
}

/* Secondary brand colours return as small, adult accents — never as framing. */
body:not(.mf-admin) :is(.mf-tag,.category-tag,.news-tag,.mf-member-badge,.su-feed-tags span,.profile-badge,.dedication-badge){font-weight:800!important}
body:not(.mf-admin) :is(.su-achievement__badge,.su-perk__icon,.mf-feed-event__mark){box-shadow:0 8px 18px rgba(6,31,61,.08)!important}
body:not(.mf-admin) .su-achievement[data-tier="gold"] .su-achievement__badge{background:linear-gradient(145deg,#6f5421,#b38b35)!important;color:#fff7d6!important}
body:not(.mf-admin) .su-achievement[data-tier="platinum"] .su-achievement__badge{background:linear-gradient(145deg,#273a54,#5a66bb)!important;color:#f1fbff!important}

/* ---------- Inputs/forms: crisp ceramic fields ---------- */
body:not(.mf-admin) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){
  color:#162d48!important;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;
  border:1px solid rgba(113,137,160,.26)!important;border-radius:3px!important;
  box-shadow:inset 0 1px 2px rgba(4,19,39,.03),0 5px 14px rgba(4,19,39,.025)!important;
}
body:not(.mf-admin) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select):focus{
  border-color:#78afe2!important;background:#fff!important;box-shadow:0 0 0 3px rgba(18,111,216,.09),inset 0 1px 2px rgba(4,19,39,.02)!important;
}

/* ---------- Header / menus: more expensive feeling, same approved structure ---------- */
body:not(.mf-admin) .site-header.v4-site-header{
  background:linear-gradient(180deg,#06182e 0%,#041327 100%)!important;
  border-bottom:0!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.045),0 12px 30px rgba(4,19,39,.11)!important;
}
body:not(.mf-admin) .v4-nav-shell{min-height:88px!important}
body:not(.mf-admin) .v4-mainnav>a{color:rgba(255,255,255,.72)!important;font-weight:700!important}
body:not(.mf-admin) .v4-mainnav>a:hover,body:not(.mf-admin) .v4-mainnav>a.active{color:#fff!important}
body:not(.mf-admin) .v4-mainnav>a::after{height:2px!important;background:#55c6ef!important}
body:not(.mf-admin) :is(.v4-action,.mf-mobile-menu-toggle,.mf-header-account__trigger){
  border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.035)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.07)!important;
}
body:not(.mf-admin) :is(.mf-header-account__menu,.mf-notification-dropdown,.mega-menu.v4-mega,.premium-search){
  background:var(--mf-lm-ceramic)!important;border:0!important;box-shadow:var(--mf-lm-shadow-2)!important
}

/* ---------- Footer: mature dark finish ---------- */
body:not(.mf-admin) :is(.mf-editorial-footer,.v4-footer,.mf-footer){
  background:linear-gradient(145deg,#06182e 0%,#041327 55%,#08213e 100%)!important;
  border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body:not(.mf-admin) :is(.mf-editorial-footer,.v4-footer,.mf-footer) :is(h2,h3,h4,strong,b){color:#fff!important}
body:not(.mf-admin) :is(.mf-editorial-footer,.v4-footer,.mf-footer) :is(p,small,li){color:rgba(231,240,248,.72)!important}
body:not(.mf-admin) :is(.mf-editorial-footer,.v4-footer,.mf-footer) a{color:rgba(255,255,255,.82)!important}
body:not(.mf-admin) :is(.mf-editorial-footer,.v4-footer,.mf-footer) a:hover{color:#70d4f7!important}

/* ========================================================================== 
   CONTRAST GUARD — explicit dark-surface typography fixes.
   This prevents global headline rules from making dark text sit on dark cards.
   ========================================================================== */
body:not(.mf-admin) :is(
  .su-hero,.su-progress-hero,.su-streak,.su-profile-insight,.su-weekly-crown,
  .about-hero,.contact-hero,.help-hero,.settings-hero,.notifications-hero,.profile-hero,
  .legal-hero,.terms-hero,.mf-dd-hero,.mf-community-hero,.artist-hero,
  .mf-member-cover,.history-cover,.mf-dedications-rail,.news-masthead-meta,
  .mf-editorial-footer,.v4-footer,.mf-footer
) :is(h1,h2,h3,h4,h5,h6,strong,b){color:#fff!important}
body:not(.mf-admin) :is(
  .su-hero,.su-progress-hero,.su-streak,.su-profile-insight,.su-weekly-crown,
  .about-hero,.contact-hero,.help-hero,.settings-hero,.notifications-hero,.profile-hero,
  .legal-hero,.terms-hero,.mf-dd-hero,.mf-community-hero,.artist-hero,
  .mf-member-cover,.history-cover,.mf-dedications-rail,.news-masthead-meta,
  .mf-editorial-footer,.v4-footer,.mf-footer
) :is(p,li,dd,dt,time){color:rgba(236,244,250,.75)!important}
body:not(.mf-admin) :is(
  .su-hero,.su-progress-hero,.su-streak,.su-profile-insight,.su-weekly-crown,
  .about-hero,.contact-hero,.help-hero,.settings-hero,.notifications-hero,.profile-hero,
  .legal-hero,.terms-hero,.mf-dd-hero,.mf-community-hero,.artist-hero,
  .mf-member-cover,.history-cover,.mf-dedications-rail,.news-masthead-meta
) :is(.eyebrow,[class*="eyebrow"],[class*="kicker"],small){color:#82d9f5!important}
body:not(.mf-admin) .su-progress-copy h2,
body:not(.mf-admin) .su-progress-copy strong,
body:not(.mf-admin) .su-streak strong,
body:not(.mf-admin) .su-profile-insight h3,
body:not(.mf-admin) .su-weekly-crown h3{color:#fff!important}

/* Light ceramic surfaces always use dark readable text. */
body:not(.mf-admin) :is(
  .mf-hero-board,.flash-strip,.pulse-panel,.side-card,.mf-side-card,.mf-section,
  .news-top,.news-side-block,.news-directory-card,.mf-reader-desk,.mf-article-related-card,
  .mf-music-filter,.mf-music-list,.artists-editorial,.artists-directory,.artist-feature,
  .album-card,.playlist-grid>a,.chart-table,.song-list,.mf-community-composer,.mf-community-card,.mf-community-post,
  .mf-dd-composer,.mf-dd-card,.mf-dd-popular,.su-card,.su-stat,.su-mission,.su-achievement,.su-perk,.su-podium-card,.su-board-row,.su-feed-card,
  .mf-member-card,.mf-member-composer,.mf-member-post,.profile-card,.profile-side-card,.profile-feature-card,.profile-library-card,
  .settings-card,.settings-side-card,.notification-card,.notifications-side-card,.about-world-item,.about-tech-grid article,.about-principles-grid article,
  .contact-form-card,.contact-route-grid>article,.help-category-card,.help-faq-content,.help-faq-sidebar,.legal-document,.legal-sidebar,.terms-document,.terms-sidebar,.auth-shell
) :is(h1,h2,h3,h4,h5,h6,strong,b){color:var(--mf-lm-ink-strong)!important}

/* Exceptions: buttons/badges inside light cards keep the correct foreground. */
body:not(.mf-admin) :is(.su-button--blue,.primary-btn,.profile-action--primary,.auth-submit,.mf-member-primary,.mf-member-action--primary,.settings-primary-button,.notifications-mark-all) :is(strong,b,span),
body:not(.mf-admin) :is(.su-button--blue,.primary-btn,.profile-action--primary,.auth-submit,.mf-member-primary,.mf-member-action--primary,.settings-primary-button,.notifications-mark-all){color:#fff!important}

/* Social universe / member network are brought fully into the classic design language. */
body.social-universe-page :is(.su-card,.su-stat,.su-mission,.su-achievement,.su-perk,.su-podium-card,.su-board-row,.su-feed-card){border-radius:3px!important}
body.social-universe-page .su-topnav a{border-radius:2px!important}
body.social-universe-page .su-topnav a.is-active{background:#eef5fb!important;color:#0c4e91!important;box-shadow:none!important}
body.social-universe-page .su-filterbar a{border-radius:2px!important;background:var(--mf-lm-ceramic)!important;border:0!important;box-shadow:0 5px 14px rgba(4,19,39,.035)!important}
body.social-universe-page .su-filterbar a.is-active{background:#0a294b!important;color:#fff!important}
body.social-universe-page .su-progress-hero{border-radius:3px!important;padding:32px!important;background:linear-gradient(125deg,#06182f 0%,#0a2a53 72%,#0b3d6f 100%)!important}
body.social-universe-page .su-progress-hero::after{opacity:.38!important}
body.social-universe-page .su-level-orb{border-radius:50%!important}
body.social-universe-page .su-streak,body.social-universe-page .su-profile-insight,body.social-universe-page .su-weekly-crown{border-radius:3px!important}
body.social-universe-page .su-feed-card::before{content:none!important;display:none!important}
body.member-social-page :is(.mf-member-card,.mf-member-post,.mf-member-composer){border-radius:3px!important}

/* ---------- Mobile: premium density without oversized shadows ---------- */
@media(max-width:760px){
  body:not(.mf-admin){background:linear-gradient(180deg,#f8fafc 0,#f1f4f7 100%)!important;background-attachment:scroll!important}
  body:not(.mf-admin) :is(
    .mf-hero-board,.pulse-panel,.side-card,.mf-side-card,.mf-section,.news-top,.news-side-block,.news-directory-card,
    .mf-community-composer,.mf-community-card,.mf-community-post,.mf-dd-composer,.mf-dd-card,
    .su-card,.su-stat,.su-mission,.su-achievement,.su-podium-card,.su-feed-card,.mf-member-card,.mf-member-composer,.mf-member-post,
    .profile-card,.profile-side-card,.settings-card,.settings-side-card,.notification-card,.notifications-side-card,
    .help-category-card,.help-faq-content,.help-faq-sidebar,.contact-form-card,.auth-shell
  ){
    box-shadow:var(--mf-lm-ceramic-inset),0 1px 2px rgba(4,19,39,.025),0 10px 25px rgba(4,19,39,.055)!important;
  }
  body.home-page .home-stage{padding-top:18px!important;padding-bottom:52px!important}
  body.home-page .mf-lead-copy{padding:25px 20px 24px!important}
  body.home-page .mf-lead-copy h1{font-size:34px!important;line-height:1.06!important}
  body.home-page .pulse-grid{gap:18px!important;margin-top:21px!important}
  body.home-page .pulse-panel{padding:20px 17px 21px!important}
  body.home-page .mf-section{padding:19px 16px 22px!important;margin-bottom:22px!important}
  body.social-universe-page .su-progress-hero{padding:22px 18px!important}
}

/* Final no-stripe and contrast hardening for legacy components. */
body:not(.mf-admin) :is(
  .mf-member-card--level,.artists-catalog-intro,.mf-a11y-help-card,.premium-search,
  .article-premium-page .mf-article-section h2
)::before,
body:not(.mf-admin) :is(
  .mf-member-card--level,.artists-catalog-intro,.mf-a11y-help-card,.premium-search,
  .article-premium-page .mf-article-section h2
)::after{content:none!important;display:none!important;background:none!important;border:0!important}
body:not(.mf-admin) .mf-footer-accent{display:none!important}

body:not(.mf-admin) :is(
  .auth-visual,.news-side-note,.news-editorial,.news-breaking,.mf-community-card--featured,
  .mf-home-reels .mf-reel-watch,.mf-a11y-header
) :is(h1,h2,h3,h4,h5,h6,strong,b){color:#fff!important}
body:not(.mf-admin) :is(
  .auth-visual,.news-side-note,.news-editorial,.news-breaking,.mf-community-card--featured,
  .mf-home-reels .mf-reel-watch,.mf-a11y-header
) :is(p,li,dd,dt,time){color:rgba(236,244,250,.76)!important}
body:not(.mf-admin) .news-editorial-card{background:transparent!important;box-shadow:none!important;border-color:rgba(255,255,255,.13)!important}
body:not(.mf-admin) .news-editorial-card :is(h1,h2,h3,h4,strong,b){color:#fff!important}
body:not(.mf-admin) .auth-visual :is(.auth-visual-list strong,.auth-brand strong){color:#fff!important}
body:not(.mf-admin) .mf-community-card--featured{background:linear-gradient(150deg,#06182e,#0a294b)!important;box-shadow:0 18px 42px rgba(4,19,39,.15)!important}
body:not(.mf-admin) .mf-community-card--featured :is(h1,h2,h3,h4,strong,b){color:#fff!important}

/* XP toasts are notifications, not content blocks: premium but no rainbow stripe. */
body:not(.mf-admin) .mf-xp-toast::before{content:none!important;display:none!important}
body:not(.mf-admin) .mf-xp-toast{border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 54px rgba(3,17,35,.24)!important}


/* ========================================================================== 
   MUSIC FM — NAVIGATION CLEANUP / 2026-10-08
   Mature, aligned navigation. No stray blue bars, no framed hamburger/bell,
   and no card-like shadows inside the mobile directory menu.
   ========================================================================== */
body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega .mf-mega-group{
  box-shadow:none!important;border-top:0!important;border-right:0!important;border-left:0!important;border-image:none!important;
}
body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega .mf-mega-group a{box-shadow:none!important}
body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega .mf-mega-group a::before,
body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega .mf-mega-group a::after{
  content:none!important;display:none!important;width:0!important;height:0!important;background:none!important;box-shadow:none!important;
}
body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega .mf-mega-group a[aria-current="page"]{
  color:#0d5fc2!important;background:transparent!important;box-shadow:none!important;border-inline:0!important;
}

@media(max-width:980px){
  :root{--mf-ui-header-height:72px!important;--mf-ui-header-bottom:calc(72px + env(safe-area-inset-top,0px))!important}
  body:not(.mf-admin) .site-header.v4-site-header{
    min-height:72px!important;height:72px!important;background:#041327!important;border:0!important;
    box-shadow:0 1px 0 rgba(255,255,255,.04),0 7px 20px rgba(4,19,39,.08)!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header::before,
  body:not(.mf-admin) .site-header.v4-site-header::after{content:none!important;display:none!important}
  body:not(.mf-admin) .v4-nav-shell{
    position:relative!important;display:block!important;width:calc(100% - 24px)!important;height:72px!important;min-height:72px!important;
    margin-inline:auto!important;padding:0!important;
  }
  body:not(.mf-admin) .v4-mainnav{display:none!important}

  body:not(.mf-admin) .mf-mobile-menu-toggle{
    display:grid!important;place-items:center!important;position:absolute!important;top:50%!important;right:0!important;left:auto!important;
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;color:#edf5fb!important;box-shadow:none!important;
    transform:translateY(-50%)!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle:hover,
  body:not(.mf-admin) .mf-mobile-menu-toggle:active,
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"]{
    border:0!important;background:transparent!important;box-shadow:none!important;transform:translateY(-50%)!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-lines{width:27px!important;height:20px!important}
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line{width:27px!important;height:1.7px!important;border-radius:2px!important;background:#edf5fb!important}
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line--2{width:21px!important}
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--2{width:0!important}

  body:not(.mf-admin) .v4-brand.mf-classic-brand{
    position:absolute!important;top:50%!important;left:50%!important;right:auto!important;width:46px!important;height:46px!important;
    margin:0!important;padding:0!important;display:grid!important;place-items:center!important;transform:translate(-50%,-50%)!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand:hover{transform:translate(-50%,-50%)!important}
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-mark{width:44px!important;height:44px!important;flex-basis:44px!important;filter:none!important}
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-copy{display:none!important}

  body:not(.mf-admin) .v4-actions{
    position:absolute!important;top:50%!important;left:0!important;right:auto!important;width:auto!important;height:44px!important;
    margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:2px!important;
    direction:ltr!important;transform:translateY(-50%)!important;
  }
  body:not(.mf-admin) .v4-actions .v4-desktop-action{display:none!important}
  body:not(.mf-admin) .v4-actions>.v4-action,
  body:not(.mf-admin) .v4-actions>.mf-header-notifications,
  body:not(.mf-admin) .v4-actions .mf-notification-trigger{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:0 0 44px!important;margin:0!important;
  }
  body:not(.mf-admin) .v4-actions>button.v4-action:not(.mf-notification-trigger){
    display:grid!important;place-items:center!important;color:#edf5fb!important;background:transparent!important;
    border:1px solid rgba(255,255,255,.15)!important;border-radius:50%!important;box-shadow:none!important;
  }
  body:not(.mf-admin) .v4-actions>button.v4-action:not(.mf-notification-trigger):is(:hover,:active,[aria-expanded="true"]){
    background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.22)!important;box-shadow:none!important;
  }
  body:not(.mf-admin) .v4-actions>.mf-header-notifications{display:block!important;background:transparent!important;border:0!important;box-shadow:none!important}
  body:not(.mf-admin) .v4-actions .mf-notification-trigger,
  body:not(.mf-admin) .v4-actions .mf-notification-trigger:is(:hover,:active,[aria-expanded="true"]){
    display:grid!important;place-items:center!important;padding:0!important;color:#edf5fb!important;background:transparent!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
  }
  body:not(.mf-admin) .mf-notification-badge{border-color:#041327!important}

  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega,
  body:not(.mf-admin).scrolled .mega-menu.v4-mega.mf-expanded-mega{
    top:72px!important;background:#fff!important;border:0!important;border-top:1px solid #e7edf3!important;box-shadow:none!important;
  }
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-editorial-shell,
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-headline-row,
  body:not(.mf-admin) .mf-expanded-mega .v4-mega-grid.mf-mega-directory,
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group,
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group:nth-child(n),
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-bottomline{background:#fff!important;box-shadow:none!important;border-image:none!important}
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-headline-row{padding:24px 20px 19px!important;border:0!important;border-bottom:1px solid #edf1f5!important}
  body:not(.mf-admin) .mf-expanded-mega .v4-mega-grid.mf-mega-directory{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important;row-gap:0!important;padding:0 20px!important;border:0!important;
  }
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group,
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group:nth-child(n){padding:20px 0 22px!important;border:0!important;box-shadow:none!important}
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group--service{grid-column:1/-1!important;border-top:1px solid #edf1f5!important}
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group a,
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group a:is(:hover,:focus-visible,:active),
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group a[aria-current="page"]{
    min-height:41px!important;padding:9px 0!important;color:#617184!important;background:transparent!important;border:0!important;
    border-bottom:1px solid #eef2f6!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
  }
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-group a[aria-current="page"]{color:#0d5fc2!important;font-weight:800!important}
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-bottomline{margin:0!important;border:0!important;border-top:1px solid #edf1f5!important;background:#fafbfd!important}
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-quicklinks :is(a,button),
  body:not(.mf-admin) .mf-expanded-mega .mf-mega-accessibility--bottom{box-shadow:none!important}

  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom{
    background:#fff!important;border:0!important;border-top:1px solid #dfe6ed!important;box-shadow:0 -5px 18px rgba(4,19,39,.055)!important;
  }
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom::before,
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom::after,
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link::before,
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link::after{content:none!important;display:none!important}
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link{background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important}
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__icon,
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"]) .mf-mobile-bottom__icon{
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;transform:none!important;
  }
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"]){color:#102b49!important}
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"]) .mf-mobile-bottom__icon{color:#0d6fd3!important}
  body:not(.mf-admin) .mobile-bottom.mf-mobile-bottom .mf-mobile-bottom__link:is(.active,[aria-current="page"]) .mf-mobile-bottom__label{color:#102b49!important;font-weight:800!important}
}

@media(max-width:560px){
  body:not(.mf-admin) .v4-nav-shell{width:calc(100% - 18px)!important}
  body:not(.mf-admin) .mf-expanded-mega .v4-mega-grid.mf-mega-directory{column-gap:22px!important;padding-inline:18px!important}
}

/* ===== header-premium.css ===== */
/* ========================================================================== 
   MUSIC FM — REFERENCE HEADER MOTION / 2026-10-08
   Motion + behavior ported 1:1 from the supplied reference build.
   Current MUSIC FM visual design is preserved; old experimental header motion
   is fully replaced by this one source of truth.
   ========================================================================== */

:root{
  --mf-ref-header-h:96px;
  --mf-ref-header-scrolled-h:78px;
  --mf-ref-header-mobile-h:72px;
  --mf-ref-header-ease:cubic-bezier(.22,1,.36,1);
  --mf-ref-panel-open-duration:.72s;
  --mf-ref-panel-close-duration:.54s;
  --mf-ref-panel-open-ease:cubic-bezier(.22,.72,.20,1);
  --mf-ref-panel-close-ease:cubic-bezier(.30,.02,.20,1);
}

/* Kill every previous experimental animation on header descendants. */
body:not(.mf-admin) .site-header.v4-site-header,
body:not(.mf-admin) .site-header.v4-site-header *,
body:not(.mf-admin) .site-header.v4-site-header *::before,
body:not(.mf-admin) .site-header.v4-site-header *::after{
  animation-name:none;
}

body:not(.mf-admin) .mf-header-surface{display:none!important}

/* --------------------------------------------------------------------------
   Desktop — same fold behavior as the reference build.
   96px relaxed -> 78px compact. Fixed header + body offset, exactly one state.
   -------------------------------------------------------------------------- */
@media(min-width:981px){
  html{scroll-padding-top:var(--mf-ref-header-h)!important}
  body:not(.mf-admin){padding-top:var(--mf-ref-header-h)!important}

  body:not(.mf-admin) .site-header.v4-site-header{
    --mf-ref-current-h:var(--mf-ref-header-h);
    position:fixed!important;
    top:0!important;right:0!important;left:0!important;
    z-index:1300!important;
    height:var(--mf-ref-current-h)!important;
    min-height:var(--mf-ref-current-h)!important;
    overflow:visible!important;
    isolation:isolate!important;
    background:
      radial-gradient(circle at 88% 48%,rgba(89,199,255,.13),transparent 18%),
      radial-gradient(circle at 76% 20%,rgba(20,124,255,.12),transparent 28%),
      linear-gradient(180deg,#061a33 0%,#031225 100%)!important;
    border:0!important;
    border-bottom:1px solid rgba(78,142,205,.26)!important;
    box-shadow:0 12px 30px rgba(0,12,30,.24),inset 0 -1px 0 rgba(255,255,255,.018)!important;
    transform:translate3d(0,0,0)!important;
    opacity:1;
    transition:
      height .62s var(--mf-ref-header-ease),
      min-height .62s var(--mf-ref-header-ease),
      background .52s ease,
      box-shadow .52s ease,
      border-color .52s ease,
      backdrop-filter .52s ease,
      opacity .36s ease,
      transform .58s var(--mf-ref-header-ease)!important;
    will-change:height,background,box-shadow,border-color;
  }

  body:not(.mf-admin) .site-header.v4-site-header::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    right:0!important;bottom:-1px!important;left:0!important;
    height:1px!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,transparent 2%,rgba(20,124,255,.16) 22%,rgba(89,199,255,.30) 50%,rgba(20,124,255,.16) 78%,transparent 98%)!important;
    opacity:.88!important;
    border:0!important;
    box-shadow:none!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header::after{content:none!important;display:none!important}

  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled{
    --mf-ref-current-h:var(--mf-ref-header-scrolled-h);
    background:
      radial-gradient(circle at 88% 48%,rgba(89,199,255,.09),transparent 18%),
      linear-gradient(180deg,rgba(5,24,47,.988) 0%,rgba(2,15,31,.995) 100%)!important;
    border-bottom-color:rgba(78,142,205,.24)!important;
    box-shadow:0 9px 24px rgba(0,10,26,.25)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }

  body:not(.mf-admin) .v4-nav-shell{
    width:min(1240px,calc(100% - 42px))!important;
    height:var(--mf-ref-current-h)!important;
    min-height:var(--mf-ref-current-h)!important;
    align-items:center!important;
    margin-inline:auto!important;
    transform:none!important;
    transition:height .62s var(--mf-ref-header-ease),min-height .62s var(--mf-ref-header-ease),opacity .38s ease .05s!important;
  }

  /* Logo follows the same calm settle used in the reference header. */
  body:not(.mf-admin) .v4-brand.mf-classic-brand{
    height:var(--mf-ref-current-h)!important;
    transform:none!important;
    transition:height .62s var(--mf-ref-header-ease),gap .62s var(--mf-ref-header-ease),filter .42s ease!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand:hover{transform:none!important}
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-mark{
    transition:width .62s var(--mf-ref-header-ease),height .62s var(--mf-ref-header-ease),flex-basis .62s var(--mf-ref-header-ease),filter .42s ease!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-word{
    transition:font-size .62s var(--mf-ref-header-ease),letter-spacing .62s var(--mf-ref-header-ease)!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-copy small{
    transition:opacity .48s ease,transform .62s var(--mf-ref-header-ease),max-height .62s var(--mf-ref-header-ease),margin-top .62s var(--mf-ref-header-ease)!important;
  }

  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand{gap:11px!important}
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-mark{width:48px!important;height:48px!important;flex-basis:48px!important}
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-word{font-size:27px!important;letter-spacing:-.7px!important}
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-copy small{
    opacity:0!important;max-height:0!important;margin-top:0!important;transform:translateY(-4px)!important;pointer-events:none!important;
  }

  /* Navigation itself never receives a transform: fixed panels stay stable. */
  body:not(.mf-admin) .v4-mainnav,
  body:not(.mf-admin) .v4-actions{
    transform:none!important;
    animation:none!important;
    will-change:auto!important;
  }
  body:not(.mf-admin) .v4-mainnav{height:100%!important}
  body:not(.mf-admin) .v4-mainnav>a,
  body:not(.mf-admin) .v4-mainnav>.v4-more{
    height:var(--mf-ref-current-h)!important;
    display:flex!important;
    align-items:center!important;
    transform:none!important;
    transition:
      height .62s var(--mf-ref-header-ease),
      color 140ms ease,
      background 140ms ease,
      opacity .28s ease,
      transform .34s var(--mf-ref-header-ease),
      text-shadow 140ms ease!important;
    will-change:height,transform;
  }

  body:not(.mf-admin) .v4-mainnav>a::after{
    bottom:0!important;
    width:40px!important;
    height:3px!important;
    right:50%!important;left:auto!important;
    border-radius:3px 3px 0 0!important;
    background:linear-gradient(90deg,#147cff,#59c7ff)!important;
    box-shadow:0 -3px 12px rgba(20,124,255,.34)!important;
    opacity:0!important;
    transform:translateX(50%) scaleX(0)!important;
    transition:opacity .24s ease,transform .24s cubic-bezier(.22,1,.36,1)!important;
  }
  body:not(.mf-admin) .v4-mainnav>a:is(:hover,.active,[aria-current="page"])::after{
    opacity:1!important;transform:translateX(50%) scaleX(1)!important;
  }

  body:not(.mf-admin) :is(.v4-action,.mf-header-account__trigger){
    transition:
      width .34s var(--mf-ref-header-ease),
      min-width .34s var(--mf-ref-header-ease),
      height .34s var(--mf-ref-header-ease),
      min-height .34s var(--mf-ref-header-ease),
      color 140ms ease,
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled :is(.v4-action,.mf-header-account__trigger){
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;
  }

  /* Mega menu follows the live header height. */
  body:not(.mf-admin) .mega-menu.v4-mega,
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega{top:var(--mf-ref-current-h)!important}

  /* Reference route-entry motion: whole header, never staggered children. */
  html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .site-header.v4-site-header{
    opacity:.72!important;
    transform:translate3d(0,-6px,0)!important;
  }
  html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .v4-nav-shell{opacity:.88!important}
  html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .site-header.v4-site-header{
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
  }
  html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .v4-nav-shell{opacity:1!important}

  /* Desktop panels: one calm surface, exact reference timing. */
  body:not(.mf-admin) :is(.mega-menu.v4-mega.mf-expanded-mega,.mf-header-account__menu,.mf-notification-dropdown){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,-12px,0)!important;
    transform-origin:top center!important;
    filter:none!important;
    backface-visibility:hidden!important;
    will-change:opacity,transform!important;
    transition:
      opacity .40s cubic-bezier(.22,.72,.26,1),
      transform var(--mf-ref-panel-close-duration) var(--mf-ref-panel-close-ease),
      visibility 0s linear var(--mf-ref-panel-close-duration)!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega :is(.v4-mega-intro,.mf-mega-group,.mf-mega-bottomline),
  body:not(.mf-admin) .mf-header-account__menu>*,
  body:not(.mf-admin) .mf-notification-dropdown>*{
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open,
  body:not(.mf-admin) .mf-header-account.is-open .mf-header-account__menu,
  body:not(.mf-admin) .mf-header-account[open] .mf-header-account__menu,
  body:not(.mf-admin) .mf-notification-dropdown.is-open,
  body:not(.mf-admin) .mf-header-notifications.is-open .mf-notification-dropdown{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity .46s cubic-bezier(.22,.72,.26,1),
      transform var(--mf-ref-panel-open-duration) var(--mf-ref-panel-open-ease),
      visibility 0s linear 0s!important;
  }
}

/* --------------------------------------------------------------------------
   Mobile — keep the approved layout, but give the menu the same reference
   panel timing/physics. No scroll shrink on mobile in the current MUSIC FM design.
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  html{scroll-padding-top:var(--mf-ref-header-mobile-h)!important}
  body:not(.mf-admin){padding-top:var(--mf-ref-header-mobile-h)!important}
  body:not(.mf-admin) .site-header.v4-site-header{
    position:fixed!important;top:0!important;right:0!important;left:0!important;z-index:1300!important;
    height:var(--mf-ref-header-mobile-h)!important;min-height:var(--mf-ref-header-mobile-h)!important;
    background:linear-gradient(180deg,#061a33 0%,#031225 100%)!important;
    transform:none!important;opacity:1!important;
    transition:box-shadow .46s ease,background .46s ease,opacity .34s ease,transform .52s var(--mf-ref-header-ease)!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header::before,
  body:not(.mf-admin) .site-header.v4-site-header::after{content:none!important;display:none!important}
  body:not(.mf-admin) .v4-nav-shell{height:var(--mf-ref-header-mobile-h)!important;min-height:var(--mf-ref-header-mobile-h)!important}

  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega{
    top:var(--mf-ref-header-mobile-h)!important;
    transform:translate3d(0,-14px,0)!important;
    opacity:.96!important;
    visibility:hidden!important;
    pointer-events:none!important;
    backface-visibility:hidden!important;
    will-change:transform,opacity!important;
    transition:
      transform var(--mf-ref-panel-close-duration) var(--mf-ref-panel-close-ease),
      opacity .20s ease,
      visibility 0s linear var(--mf-ref-panel-close-duration)!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open{
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:
      transform .72s var(--mf-ref-panel-open-ease),
      opacity .46s cubic-bezier(.22,.72,.26,1),
      visibility 0s linear 0s!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega :is(.v4-mega-intro,.mf-mega-group,.mf-mega-bottomline){
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
  }

  /* Reference entrance: whole surface only. */
  html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .site-header.v4-site-header{
    opacity:.72!important;transform:translate3d(0,-6px,0)!important;
  }
  html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .v4-nav-shell{opacity:.88!important}
  html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .site-header.v4-site-header{opacity:1!important;transform:translate3d(0,0,0)!important}
  html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .v4-nav-shell{opacity:1!important}
}

@media(prefers-reduced-motion:reduce){
  body:not(.mf-admin) .site-header.v4-site-header,
  body:not(.mf-admin) .site-header.v4-site-header *,
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega,
  body:not(.mf-admin) .mf-header-account__menu,
  body:not(.mf-admin) .mf-notification-dropdown{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ========================================================================== 
   MUSIC FM — REFERENCE FEEL / COMPOSITOR SAFE SCROLL FIX
   Keep the supplied build's 24px/8px controller, timing and easing, but do not
   animate layout, font metrics or backdrop blur while the user is scrolling.
   ========================================================================== */
@media(min-width:981px){
  /* Fixed geometry: scrolling never changes document/header layout. */
  body:not(.mf-admin) .site-header.v4-site-header,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled{
    --mf-ref-current-h:var(--mf-ref-header-h)!important;
    height:var(--mf-ref-header-h)!important;
    min-height:var(--mf-ref-header-h)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transition:opacity .36s ease,transform .58s var(--mf-ref-header-ease)!important;
    will-change:transform,opacity!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header::before,
  body:not(.mf-admin) .site-header.v4-site-header::after{
    content:none!important;
    display:none!important;
  }

  /* Real background layer: only this layer visually contracts. */
  body:not(.mf-admin) .site-header.v4-site-header .mf-header-surface{
    display:block!important;
    position:absolute!important;
    z-index:-1!important;
    inset:0!important;
    height:var(--mf-ref-header-h)!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 88% 48%,rgba(89,199,255,.13),transparent 18%),
      radial-gradient(circle at 76% 20%,rgba(20,124,255,.12),transparent 28%),
      linear-gradient(180deg,#061a33 0%,#031225 100%)!important;
    border-bottom:1px solid rgba(78,142,205,.26)!important;
    box-shadow:0 12px 30px rgba(0,12,30,.24),inset 0 -1px 0 rgba(255,255,255,.018)!important;
    transform:translateZ(0) scaleY(1)!important;
    transform-origin:50% 0!important;
    backface-visibility:hidden!important;
    will-change:transform!important;
    transition:transform .62s var(--mf-ref-header-ease)!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .mf-header-surface{
    transform:translateZ(0) scaleY(.8125)!important; /* 96px -> visual 78px */
  }

  /* The whole navigation settles upward once. No child reflow. */
  body:not(.mf-admin) .v4-nav-shell,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-nav-shell{
    height:var(--mf-ref-header-h)!important;
    min-height:var(--mf-ref-header-h)!important;
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    transition:transform .62s var(--mf-ref-header-ease),opacity .38s ease!important;
    will-change:transform!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-nav-shell{
    transform:translate3d(0,-9px,0)!important;
  }

  /* Brand keeps its exact layout. Shrink is visual only. */
  body:not(.mf-admin) .v4-brand.mf-classic-brand,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand{
    height:var(--mf-ref-header-h)!important;
    gap:14px!important;
    transform:translateZ(0) scale(1)!important;
    transform-origin:right center!important;
    transition:transform .62s var(--mf-ref-header-ease)!important;
    will-change:transform!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand{
    transform:translateZ(0) scale(.94)!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-mark,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-mark{
    width:54px!important;height:54px!important;flex-basis:54px!important;
    transition:none!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-word,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-word{
    font-size:29px!important;letter-spacing:inherit!important;
    transition:none!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-copy small{
    max-height:none!important;
    margin-top:0!important;
    transition:opacity .28s ease,transform .62s var(--mf-ref-header-ease)!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-copy small{
    opacity:0!important;
    max-height:none!important;
    margin-top:0!important;
    transform:translate3d(0,-3px,0)!important;
    pointer-events:none!important;
  }

  /* Navigation links remain 96px internally; parent translation creates the
     compact visual center without changing line boxes or running layout. */
  body:not(.mf-admin) .v4-mainnav,
  body:not(.mf-admin) .v4-mainnav>a,
  body:not(.mf-admin) .v4-mainnav>.v4-more,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-mainnav>a,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-mainnav>.v4-more{
    height:var(--mf-ref-header-h)!important;
  }
  body:not(.mf-admin) .v4-mainnav>a,
  body:not(.mf-admin) .v4-mainnav>.v4-more{
    transition:color 140ms ease,background 140ms ease,opacity .28s ease,text-shadow 140ms ease!important;
    will-change:auto!important;
  }

  /* Action controls keep fixed dimensions. The group scales on the compositor. */
  body:not(.mf-admin) .v4-actions{
    transform:translateZ(0) scale(1)!important;
    transform-origin:left center!important;
    transition:transform .62s var(--mf-ref-header-ease)!important;
    will-change:transform!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions{
    transform:translateZ(0) scale(.93)!important;
  }
  body:not(.mf-admin) :is(.v4-action,.mf-header-account__trigger),
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled :is(.v4-action,.mf-header-account__trigger){
    width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
    transition:color 140ms ease,background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease!important;
  }

  /* Menu follows the visual bottom, without making the header itself relayout. */
  body:not(.mf-admin) .mega-menu.v4-mega,
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega{top:var(--mf-ref-header-h)!important}
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled ~ .mf-nav-backdrop + .mega-menu.v4-mega,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled ~ .mf-nav-backdrop + .mega-menu.v4-mega.mf-expanded-mega{
    top:var(--mf-ref-header-scrolled-h)!important;
  }
}


/* ==========================================================================
   2026-10-08 — STABLE ROUTE ENTRY + PREMIUM MOBILE MENU
   Header is always fully painted. Route animation belongs to the transition
   sheet, not to the fixed header. Mobile menu/button use compositor transforms.
   ========================================================================== */
html.mf-nav-soft-entry body:not(.mf-admin) .site-header.v4-site-header,
html.mf-nav-soft-entry body:not(.mf-admin) .v4-nav-shell,
html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .site-header.v4-site-header,
html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .v4-nav-shell,
html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .site-header.v4-site-header,
html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .v4-nav-shell{
  opacity:1!important;
}
html.mf-nav-soft-entry:not(.mf-nav-controls-ready) body:not(.mf-admin) .site-header.v4-site-header,
html.mf-nav-soft-entry.mf-nav-controls-ready body:not(.mf-admin) .site-header.v4-site-header{transform:none!important}

@media(max-width:980px){
  /* Hamburger reacts immediately; only transforms/opacity are animated. */
  body:not(.mf-admin) .mf-mobile-menu-toggle{
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
    transition:background-color 140ms ease!important;
    will-change:auto!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-lines{
    position:relative!important;width:28px!important;height:22px!important;
    transform:translateZ(0)!important;backface-visibility:hidden!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line{
    position:absolute!important;top:50%!important;left:50%!important;right:auto!important;
    width:27px!important;height:1.7px!important;border-radius:2px!important;background:#edf5fb!important;
    transform-origin:center!important;backface-visibility:hidden!important;will-change:transform,opacity!important;
    transition:transform .30s cubic-bezier(.2,.8,.2,1),opacity .16s ease!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line--1{
    transform:translate3d(-50%,-50%,0) translateY(-7px)!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line--2{
    width:27px!important;transform:translate3d(-50%,-50%,0) scaleX(.78)!important;opacity:1!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line--3{
    transform:translate3d(-50%,-50%,0) translateY(7px)!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--1{
    transform:translate3d(-50%,-50%,0) rotate(45deg)!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--2{
    width:27px!important;transform:translate3d(-50%,-50%,0) scaleX(0)!important;opacity:0!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--3{
    transform:translate3d(-50%,-50%,0) rotate(-45deg)!important;
  }

  /* One premium sheet motion: no child staggers, no side-swipe, no layout work. */
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega{
    position:fixed!important;
    top:var(--mf-ref-header-mobile-h)!important;right:0!important;left:0!important;bottom:0!important;
    width:100%!important;height:auto!important;max-height:none!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translate3d(0,-18px,0) scale(.992)!important;transform-origin:50% 0!important;
    backface-visibility:hidden!important;will-change:transform,opacity!important;
    box-shadow:none!important;
    transition:transform .30s cubic-bezier(.4,0,.2,1),opacity .22s ease,visibility 0s linear .30s!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .26s ease-out,visibility 0s linear 0s!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega :is(.mf-mega-editorial-shell,.mf-mega-headline-row,.v4-mega-intro,.v4-mega-grid,.mf-mega-group,.mf-mega-bottomline){
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  }
  body:not(.mf-admin) .mf-nav-backdrop{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transition:opacity .24s ease!important;
  }
}

/* ========================================================================== 
   MUSIC FM — active nav indicator + brand tagline alignment / 2026-10-08
   Keep the active underline physically attached to the visible header edge.
   ========================================================================== */
@media (min-width:981px){
  body:not(.mf-admin) .v4-mainnav>a::after{
    bottom:0!important;
    transition:
      bottom .62s var(--mf-ref-header-ease),
      opacity .24s ease,
      transform .24s cubic-bezier(.22,1,.36,1)!important;
  }

  /* The nav shell moves -9px in compact mode while the visible navy surface
     ends at 78px. Lift the indicator by the same 9px so it stays attached. */
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-mainnav>a::after{
    bottom:9px!important;
  }

  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }
  body:not(.mf-admin) .v4-brand.mf-classic-brand .mf-classic-copy small{
    display:block!important;
    margin-top:5px!important;
    line-height:1.15!important;
    transform:translateY(0)!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-brand.mf-classic-brand .mf-classic-copy small{
    margin-top:5px!important;
    transform:translate3d(0,-3px,0)!important;
  }
}


/* ==========================================================================
   2026-10-08 — PREMIUM SLOW HAMBURGER MORPH
   Deliberate two-stage morph: lines meet first, then rotate into the X.
   Reverse animation mirrors the same motion when closing.
   ========================================================================== */
@media(max-width:980px){
  body:not(.mf-admin) .mf-mobile-menu-toggle{
    transition:none!important;
    transform:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle:is(:hover,:active,:focus-visible,[aria-expanded="true"]){
    transform:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-lines{
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    contain:layout paint!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line{
    transition:none!important;
    animation:none;
    transform-origin:50% 50%!important;
    will-change:transform,opacity!important;
  }

  /* Stable resting states. */
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"] .mf-menu-line--1{
    transform:translate3d(-50%,-50%,0) translateY(-7px) rotate(0deg)!important;
    opacity:1!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"] .mf-menu-line--2{
    transform:translate3d(-50%,-50%,0) scaleX(.78)!important;
    opacity:1!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"] .mf-menu-line--3{
    transform:translate3d(-50%,-50%,0) translateY(7px) rotate(0deg)!important;
    opacity:1!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--1{
    transform:translate3d(-50%,-50%,0) translateY(0) rotate(45deg)!important;
    opacity:1!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--2{
    transform:translate3d(-50%,-50%,0) scaleX(0)!important;
    opacity:0!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--3{
    transform:translate3d(-50%,-50%,0) translateY(0) rotate(-45deg)!important;
    opacity:1!important;
  }

  /* Opening: first converge, then rotate. */
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-open .mf-menu-line--1{
    animation:mfHamburgerTopOpen .84s cubic-bezier(.22,.72,.2,1) both!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-open .mf-menu-line--2{
    animation:mfHamburgerMidOpen .84s cubic-bezier(.22,.72,.2,1) both!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-open .mf-menu-line--3{
    animation:mfHamburgerBottomOpen .84s cubic-bezier(.22,.72,.2,1) both!important;
  }

  /* Closing: same choreography in reverse. */
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-close .mf-menu-line--1{
    animation:mfHamburgerTopClose .84s cubic-bezier(.22,.72,.2,1) both!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-close .mf-menu-line--2{
    animation:mfHamburgerMidClose .84s cubic-bezier(.22,.72,.2,1) both!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-close .mf-menu-line--3{
    animation:mfHamburgerBottomClose .84s cubic-bezier(.22,.72,.2,1) both!important;
  }
}

@keyframes mfHamburgerTopOpen{
  0%{transform:translate3d(-50%,-50%,0) translateY(-7px) rotate(0deg)}
  43%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(0deg)}
  62%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(8deg)}
  100%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(45deg)}
}
@keyframes mfHamburgerBottomOpen{
  0%{transform:translate3d(-50%,-50%,0) translateY(7px) rotate(0deg)}
  43%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(0deg)}
  62%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(-8deg)}
  100%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(-45deg)}
}
@keyframes mfHamburgerMidOpen{
  0%,26%{transform:translate3d(-50%,-50%,0) scaleX(.78);opacity:1}
  56%{transform:translate3d(-50%,-50%,0) scaleX(.34);opacity:.45}
  72%,100%{transform:translate3d(-50%,-50%,0) scaleX(0);opacity:0}
}
@keyframes mfHamburgerTopClose{
  0%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(45deg)}
  38%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(0deg)}
  58%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(0deg)}
  100%{transform:translate3d(-50%,-50%,0) translateY(-7px) rotate(0deg)}
}
@keyframes mfHamburgerBottomClose{
  0%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(-45deg)}
  38%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(0deg)}
  58%{transform:translate3d(-50%,-50%,0) translateY(0) rotate(0deg)}
  100%{transform:translate3d(-50%,-50%,0) translateY(7px) rotate(0deg)}
}
@keyframes mfHamburgerMidClose{
  0%,22%{transform:translate3d(-50%,-50%,0) scaleX(0);opacity:0}
  48%{transform:translate3d(-50%,-50%,0) scaleX(.3);opacity:.38}
  72%,100%{transform:translate3d(-50%,-50%,0) scaleX(.78);opacity:1}
}

@media(prefers-reduced-motion:reduce){
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line{animation:none!important;transition:none!important}
}


/* ========================================================================== 
   2026-10-08 — HAMBURGER ANCHOR LOCK
   The button itself never moves. Only the three internal lines morph.
   This prevents the tap-state Y jump caused by transform overrides.
   ========================================================================== */
@media(max-width:980px){
  body:not(.mf-admin) .mf-mobile-menu-toggle,
  body:not(.mf-admin) .mf-mobile-menu-toggle:hover,
  body:not(.mf-admin) .mf-mobile-menu-toggle:active,
  body:not(.mf-admin) .mf-mobile-menu-toggle:focus,
  body:not(.mf-admin) .mf-mobile-menu-toggle:focus-visible,
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"],
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"],
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-open,
  body:not(.mf-admin) .mf-mobile-menu-toggle.is-morphing-close{
    top:50%!important;
    bottom:auto!important;
    transform:translate3d(0,-50%,0)!important;
    transition:none!important;
    animation:none!important;
    margin:0!important;
    padding:0!important;
    vertical-align:middle!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-lines{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    margin:0!important;
    transform:translate3d(0,0,0)!important;
  }
}


/* ========================================================================== 
   PREMIUM HAMBURGER MORPH
   One elegant transform-only morph. The button never moves; only the three
   strokes animate. No keyframe classes, no top/height animation, no jump.
   ========================================================================== */
@media(max-width:980px){
  body:not(.mf-admin) .mf-mobile-menu-toggle,
  body:not(.mf-admin) .mf-mobile-menu-toggle:hover,
  body:not(.mf-admin) .mf-mobile-menu-toggle:active,
  body:not(.mf-admin) .mf-mobile-menu-toggle:focus,
  body:not(.mf-admin) .mf-mobile-menu-toggle:focus-visible,
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"],
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"]{
    top:50%!important;
    bottom:auto!important;
    transform:translate3d(0,-50%,0)!important;
    transition:none!important;
    animation:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-lines{
    position:relative!important;
    width:28px!important;
    height:22px!important;
    margin:0!important;
    transform:none!important;
    contain:layout paint!important;
  }

  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    width:28px!important;
    height:1.8px!important;
    margin:0!important;
    border-radius:999px!important;
    background:#edf5fb!important;
    transform-origin:50% 50%!important;
    animation:none!important;
    backface-visibility:hidden!important;
    will-change:transform,opacity!important;
    transition-property:transform,opacity!important;
    transition-duration:.64s,.22s!important;
    transition-timing-function:cubic-bezier(.16,1,.3,1),ease-out!important;
  }

  /* Closed — balanced, slightly editorial proportions. */
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"] .mf-menu-line--1{
    transform:translate3d(-50%,-50%,0) translateY(-7px) rotate(0deg) scaleX(1)!important;
    opacity:1!important;
    transition-delay:.08s,.12s!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"] .mf-menu-line--2{
    transform:translate3d(-50%,-50%,0) scaleX(.72)!important;
    opacity:1!important;
    transition-delay:.18s,.14s!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="false"] .mf-menu-line--3{
    transform:translate3d(-50%,-50%,0) translateY(7px) rotate(0deg) scaleX(1)!important;
    opacity:1!important;
    transition-delay:.04s,.10s!important;
  }

  /* Open — the outer strokes glide to the centre and settle into a refined X. */
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--1{
    transform:translate3d(-50%,-50%,0) translateY(0) rotate(45deg) scaleX(.90)!important;
    opacity:1!important;
    transition-delay:.05s,0s!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--2{
    transform:translate3d(-50%,-50%,0) scaleX(.06)!important;
    opacity:0!important;
    transition-delay:0s,0s!important;
  }
  body:not(.mf-admin) .mf-mobile-menu-toggle[aria-expanded="true"] .mf-menu-line--3{
    transform:translate3d(-50%,-50%,0) translateY(0) rotate(-45deg) scaleX(.90)!important;
    opacity:1!important;
    transition-delay:.09s,0s!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.mf-admin) .mf-mobile-menu-toggle .mf-menu-line{
    transition:none!important;
  }
}


/* ========================================================================== 
   MUSIC FM — UNIFIED TOP PANELS MOTION / 2026-10-08
   One motion language for More / Account / Notifications / Search.
   Desktop = calm dropdown surfaces. Mobile = top-attached sheets + shared blur.
   ========================================================================== */
:root{
  --mf-panel-open-duration:.82s;
  --mf-panel-close-duration:.68s;
  --mf-panel-fade-open:.54s;
  --mf-panel-fade-close:.46s;
  --mf-panel-open-ease:cubic-bezier(.16,1,.30,1);
  --mf-panel-close-ease:cubic-bezier(.32,0,.22,1);
  --mf-panel-offset:-18px;
}

/* Desktop: exactly the same open/close motion for the three header panels. */
@media(min-width:981px){
  body:not(.mf-admin) :is(
    .mega-menu.v4-mega.mf-expanded-mega,
    .mf-header-account__menu,
    .mf-notification-dropdown
  ){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
    transform-origin:top center!important;
    backface-visibility:hidden!important;
    will-change:transform,opacity!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      transform var(--mf-panel-close-duration) var(--mf-panel-close-ease)!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }

  /* <details open> must NOT reveal the account panel before our is-open class.
     This is what previously made Profile feel like a sudden pop. */
  body:not(.mf-admin) .mf-header-account[open]:not(.is-open)>.mf-header-account__menu{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
  }

  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open,
  body:not(.mf-admin) .mf-header-account.is-open>.mf-header-account__menu,
  body:not(.mf-admin) .mf-notification-dropdown.is-open,
  body:not(.mf-admin) .mf-header-notifications.is-open>.mf-notification-dropdown{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      transform var(--mf-panel-open-duration) var(--mf-panel-open-ease)!important,
      visibility 0s linear 0s!important;
  }

  /* The contents never animate separately; the whole surface moves as one. */
  body:not(.mf-admin) :is(
    .mega-menu.v4-mega.mf-expanded-mega,
    .mf-header-account__menu,
    .mf-notification-dropdown
  )>*{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* Mobile shared backdrop — used by Menu / Search / Notifications. */
@media(max-width:980px){
  body:not(.mf-admin).mf-mobile-top-panel-open{overflow:hidden!important;overscroll-behavior:none!important}

  body:not(.mf-admin) .mf-nav-backdrop{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;bottom:0!important;left:0!important;
    z-index:1290!important;
    display:block!important;
    background:rgba(2,12,27,.22)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    backdrop-filter:blur(9px) saturate(.92)!important;
    -webkit-backdrop-filter:blur(9px) saturate(.92)!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
    will-change:opacity!important;
  }
  body:not(.mf-admin) .mf-nav-backdrop.is-open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      visibility 0s linear 0s!important;
  }

  /* More menu becomes a top-attached sheet. */
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;left:0!important;
    z-index:1350!important;
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--mf-ui-header-bottom,72px))!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
    transform-origin:top center!important;
    background:#fff!important;
    border:0!important;
    border-top:1px solid #e7edf3!important;
    border-bottom:1px solid #dce4ec!important;
    border-radius:0!important;
    box-shadow:0 24px 58px rgba(3,19,39,.18)!important;
    backface-visibility:hidden!important;
    will-change:transform,opacity!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      transform var(--mf-panel-close-duration) var(--mf-panel-close-ease)!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      transform var(--mf-panel-open-duration) var(--mf-panel-open-ease)!important,
      visibility 0s linear 0s!important;
  }
  body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega :is(.mf-mega-editorial-shell,.mf-mega-headline-row,.v4-mega-intro,.v4-mega-grid,.mf-mega-group,.mf-mega-bottomline){
    animation:none!important;transform:none!important;transition:none!important;
  }

  /* Notifications use the exact same top-sheet motion. */
  body:not(.mf-admin) .mf-notification-dropdown{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;left:0!important;
    z-index:1355!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    max-height:calc(100dvh - var(--mf-ui-header-bottom,72px))!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #e7edf3!important;
    border-bottom:1px solid #dce4ec!important;
    border-radius:0!important;
    box-shadow:0 24px 58px rgba(3,19,39,.18)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
    transform-origin:top center!important;
    will-change:transform,opacity!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      transform var(--mf-panel-close-duration) var(--mf-panel-close-ease)!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }
  body:not(.mf-admin) .mf-notification-dropdown.is-open,
  body:not(.mf-admin) .mf-header-notifications.is-open>.mf-notification-dropdown{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      transform var(--mf-panel-open-duration) var(--mf-panel-open-ease)!important,
      visibility 0s linear 0s!important;
  }

  /* If an account panel is available on a compact layout, it uses the same motion. */
  body:not(.mf-admin) .mf-header-account__menu{
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      transform var(--mf-panel-close-duration) var(--mf-panel-close-ease)!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }
  body:not(.mf-admin) .mf-header-account[open]:not(.is-open)>.mf-header-account__menu{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
  }
  body:not(.mf-admin) .mf-header-account.is-open>.mf-header-account__menu{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      transform var(--mf-panel-open-duration) var(--mf-panel-open-ease)!important,
      visibility 0s linear 0s!important;
  }
}

@media(prefers-reduced-motion:reduce){
  :root{--mf-panel-open-duration:.01ms;--mf-panel-close-duration:.01ms;--mf-panel-fade-open:.01ms;--mf-panel-fade-close:.01ms}
}


/* ========================================================================== 
   MUSIC FM — FINAL UNIFIED PANEL MOTION + MOBILE VIEWPORT ANCHOR / 2026-10-08
   One motion contract for More / Profile / Notifications / Search.
   This block intentionally comes last and neutralizes legacy panel animations.
   ========================================================================== */
:root{
  --mf-panel-open-duration:.78s;
  --mf-panel-close-duration:.64s;
  --mf-panel-fade-open:.48s;
  --mf-panel-fade-close:.40s;
  --mf-panel-open-ease:cubic-bezier(.16,1,.30,1);
  --mf-panel-close-ease:cubic-bezier(.32,0,.22,1);
  --mf-panel-offset:-14px;
}

/* Desktop: all three header surfaces use EXACTLY the same motion. */
@media(min-width:981px){
  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega,
  html body:not(.mf-admin) .mf-header-account__menu,
  html body:not(.mf-admin) .mf-notification-dropdown{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
    transform-origin:50% 0!important;
    filter:none!important;
    animation:none!important;
    will-change:transform,opacity!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      transform var(--mf-panel-close-duration) var(--mf-panel-close-ease)!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }

  /* <details open> is structural only. is-open is the visual state. */
  html body:not(.mf-admin) .mf-header-account[open]>.mf-header-account__menu,
  html body:not(.mf-admin) .mf-header-account[open]:not(.is-open)>.mf-header-account__menu{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
  }

  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open,
  html body:not(.mf-admin) .mf-header-account.is-open>.mf-header-account__menu,
  html body:not(.mf-admin) .mf-notification-dropdown.is-open,
  html body:not(.mf-admin) .mf-header-notifications.is-open>.mf-notification-dropdown{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      transform var(--mf-panel-open-duration) var(--mf-panel-open-ease)!important,
      visibility 0s linear 0s!important;
  }

  /* Never stagger children: the panel itself is the animation. */
  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega *,
  html body:not(.mf-admin) .mf-header-account__menu *,
  html body:not(.mf-admin) .mf-notification-dropdown *{
    animation-name:none!important;
  }
  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega :is(.mf-mega-editorial-shell,.mf-mega-headline-row,.v4-mega-intro,.v4-mega-grid,.mf-mega-group,.mf-mega-bottomline){
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

@media(max-width:980px){
  /* Remove the transformed containing block that made fixed notification sheets
     inherit the actions group's offset and drift to the right. */
  html body:not(.mf-admin) .site-header.v4-site-header .v4-actions,
  html body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions{
    top:14px!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    height:44px!important;
    margin:0!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    rotate:none!important;
    transition:none!important;
    will-change:auto!important;
  }

  /* Shared viewport anchor for Menu + Notifications. */
  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega,
  html body:not(.mf-admin) .mf-notification-dropdown{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;
    left:0!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    border-radius:0!important;
    transform-origin:50% 0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,var(--mf-panel-offset),0)!important;
    animation:none!important;
    will-change:transform,opacity!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      transform var(--mf-panel-close-duration) var(--mf-panel-close-ease)!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }

  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega.open,
  html body:not(.mf-admin) .mf-notification-dropdown.is-open,
  html body:not(.mf-admin) .mf-header-notifications.is-open>.mf-notification-dropdown{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      transform var(--mf-panel-open-duration) var(--mf-panel-open-ease)!important,
      visibility 0s linear 0s!important;
  }

  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega{
    max-height:calc(100dvh - var(--mf-ui-header-bottom,72px))!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }
  html body:not(.mf-admin) .mf-notification-dropdown{
    max-height:min(72dvh,640px)!important;
    overflow:hidden!important;
  }

  html body:not(.mf-admin) .mega-menu.v4-mega.mf-expanded-mega :is(.mf-mega-editorial-shell,.mf-mega-headline-row,.v4-mega-intro,.v4-mega-grid,.mf-mega-group,.mf-mega-bottomline){
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  /* One backdrop for all compact top sheets. */
  html body:not(.mf-admin) .mf-nav-backdrop{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    z-index:1290!important;
    margin:0!important;
    background:rgba(3,18,38,.18)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    backdrop-filter:blur(10px) saturate(.92)!important;
    -webkit-backdrop-filter:blur(10px) saturate(.92)!important;
    transition:
      opacity var(--mf-panel-fade-close) ease!important,
      visibility 0s linear var(--mf-panel-close-duration)!important;
  }
  html body:not(.mf-admin) .mf-nav-backdrop.is-open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:
      opacity var(--mf-panel-fade-open) ease!important,
      visibility 0s linear 0s!important;
  }
}

@media(prefers-reduced-motion:reduce){
  :root{--mf-panel-open-duration:.01ms;--mf-panel-close-duration:.01ms;--mf-panel-fade-open:.01ms;--mf-panel-fade-close:.01ms}
}

/* ===== search-dock.css ===== */
/* ========================================================================== 
   MUSIC FM — PREMIUM SEARCH DROP / 2026-10-08
   A restrained search drawer that opens below the header. It never replaces
   the navigation plane and never floats as a generic centered modal.
   This file is loaded last and also contains the final mobile-menu anchor lock.
   ========================================================================== */

.search-overlay.mf-search-stage{
  --mf-search-header-h:96px;
  position:fixed!important;
  z-index:2200!important;
  top:var(--mf-search-header-h)!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  display:block!important;
  padding:0!important;
  background:rgba(3,15,31,.20)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .24s ease,visibility 0s linear .28s!important;
}
.search-overlay.mf-search-stage.is-compact{--mf-search-header-h:78px}
.search-overlay.mf-search-stage.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:opacity .24s ease,visibility 0s linear 0s!important;
}

.search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{
  position:absolute!important;
  top:0!important;
  right:0!important;
  left:0!important;
  width:100%!important;
  max-width:none!important;
  min-height:258px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#fff 0%,#fdfefe 70%,#fafbfd 100%)!important;
  border:0!important;
  border-bottom:1px solid rgba(204,215,226,.92)!important;
  border-radius:0!important;
  box-shadow:0 22px 55px rgba(4,19,39,.16),0 3px 10px rgba(4,19,39,.06)!important;
  opacity:0!important;
  transform:translate3d(0,-18px,0)!important;
  transform-origin:top center!important;
  will-change:transform,opacity!important;
  transition:transform .68s cubic-bezier(.22,.72,.20,1),opacity .42s cubic-bezier(.22,.72,.26,1)!important;
}
.search-overlay.mf-search-stage.open .premium-search.mf-search-premium-drop{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}

.mf-search-premium-drop__inner{
  width:min(1240px,calc(100% - 42px));
  margin-inline:auto;
  padding:30px 0 26px;
}
.mf-search-premium-drop__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin-bottom:22px;
}
.mf-search-premium-drop__eyebrow{
  display:block;
  margin-bottom:5px;
  color:#728196!important;
  font:800 9px/1 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
  letter-spacing:.19em!important;
  direction:ltr;
}
.mf-search-premium-drop__head h2{
  margin:0!important;
  color:#102541!important;
  font:800 24px/1.18 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
  letter-spacing:-.035em!important;
}
.mf-search-premium-drop__head p{
  margin:6px 0 0!important;
  color:#718095!important;
  font:500 12.5px/1.55 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
}
.mf-search-premium-drop__close{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  color:#33485f!important;
  background:#f7f9fb!important;
  border:1px solid #dce4ec!important;
  border-radius:3px!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transform:none!important;
}
.mf-search-premium-drop__close:hover{background:#eef4f9!important;color:#102541!important}
.mf-search-premium-drop__close .mf-icon{width:18px!important;height:18px!important}

.mf-search-premium-drop__field{
  position:relative!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:64px!important;
  margin:0!important;
  padding:0 20px!important;
  background:#f5f7fa!important;
  border:1px solid #dce4ec!important;
  border-radius:3px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 24px rgba(7,31,63,.035)!important;
}
.mf-search-premium-drop__field:focus-within{
  background:#fff!important;
  border-color:#9fc5e9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 0 0 3px rgba(18,112,205,.07),0 10px 28px rgba(7,31,63,.045)!important;
}
.mf-search-premium-drop__icon{
  width:21px!important;
  height:21px!important;
  color:#557089!important;
  justify-self:center!important;
}
.mf-search-premium-drop__field label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
}
.mf-search-premium-drop__field input{
  width:100%!important;
  height:62px!important;
  margin:0!important;
  padding:0!important;
  color:#102541!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  font:600 17px/1 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
}
.mf-search-premium-drop__field input::placeholder{color:#8b98a8!important;opacity:1!important}

.mf-search-premium-drop__quick{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px 16px;
  margin-top:18px;
}
.mf-search-premium-drop__quick>span{
  color:#718095!important;
  font:700 11px/1 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
}
.mf-search-premium-drop__quick a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  color:#31465d!important;
  text-decoration:none!important;
  font:700 11.5px/1 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
}
.mf-search-premium-drop__quick a:not(:last-child)::after{
  content:"";
  width:1px;
  height:12px;
  margin-inline-start:16px;
  background:#dbe3eb;
}
.mf-search-premium-drop__quick a:hover{color:#0d64bb!important}

/* Final hamburger anchor lock. No state is allowed to move the button itself.
   Only the three internal strokes are animated by header-premium.css. */
@media(max-width:980px){
  .search-overlay.mf-search-stage,
  .search-overlay.mf-search-stage.is-compact{--mf-search-header-h:72px}
  .search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{min-height:268px!important}
  .mf-search-premium-drop__inner{width:calc(100% - 28px);padding:22px 0 22px}
  .mf-search-premium-drop__head{margin-bottom:17px;gap:18px}
  .mf-search-premium-drop__eyebrow{font-size:8px!important}
  .mf-search-premium-drop__head h2{font-size:20px!important}
  .mf-search-premium-drop__head p{font-size:11.5px!important;margin-top:5px!important}
  .mf-search-premium-drop__close{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .mf-search-premium-drop__field{min-height:56px!important;padding-inline:16px!important;grid-template-columns:28px minmax(0,1fr)!important}
  .mf-search-premium-drop__field input{height:54px!important;font-size:15px!important}
  .mf-search-premium-drop__quick{gap:7px 13px;margin-top:15px}
  .mf-search-premium-drop__quick a{font-size:11px!important}

  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle,
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle:hover,
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle:active,
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle:focus,
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle:focus-visible,
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle[aria-expanded="false"],
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle[aria-expanded="true"]{
    position:absolute!important;
    inset:auto auto auto auto!important;
    top:14px!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    rotate:none!important;
    animation:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    vertical-align:top!important;
  }
  html body:not(.mf-admin) .site-header.v4-site-header .v4-nav-shell>.mf-mobile-menu-toggle .mf-menu-lines{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:28px!important;
    height:22px!important;
    margin:0!important;
    transform:translate3d(-50%,-50%,0)!important;
    pointer-events:none!important;
  }
}

@media(max-width:560px){
  .search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{min-height:284px!important}
  .mf-search-premium-drop__head p{max-width:250px}
  .mf-search-premium-drop__quick{align-items:flex-start}
  .mf-search-premium-drop__quick>span{flex-basis:100%;margin-bottom:1px}
}

@media(prefers-reduced-motion:reduce){
  .search-overlay.mf-search-stage,
  .search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{transition:none!important}
}
html[data-mf-a11y-reduced-motion="on"] .search-overlay.mf-search-stage,
html[data-mf-a11y-reduced-motion="on"] .search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{transition:none!important}


/* ========================================================================== 
   MUSIC FM — TOP WINDOW TOGGLE CONSISTENCY / 2026-10-08
   Search, notifications and account share the same open/close contract.
   ========================================================================== */

/* Search close uses the same square control language as notification/account. */
.mf-search-premium-drop__close{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border:1px solid #e0e6ed!important;
  border-radius:3px!important;
  background:#fff!important;
  color:#62748b!important;
  box-shadow:none!important;
}
.mf-search-premium-drop__close:hover{
  background:#f4f7fb!important;
  color:#0b213a!important;
}



/* ========================================================================== 
   MUSIC FM — SEARCH / UNIFIED TOP PANEL MOTION / 2026-10-08
   Search shares the exact same opening/closing physics as the other top panels.
   ========================================================================== */
.search-overlay.mf-search-stage{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity var(--mf-panel-fade-close,.46s) ease,visibility 0s linear var(--mf-panel-close-duration,.68s)!important;
}
.search-overlay.mf-search-stage.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:opacity var(--mf-panel-fade-open,.54s) ease,visibility 0s linear 0s!important;
}
.search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{
  opacity:0!important;
  transform:translate3d(0,var(--mf-panel-offset,-18px),0)!important;
  transition:
    opacity var(--mf-panel-fade-close,.46s) ease!important,
    transform var(--mf-panel-close-duration,.68s) var(--mf-panel-close-ease,cubic-bezier(.32,0,.22,1))!important;
}
.search-overlay.mf-search-stage.open .premium-search.mf-search-premium-drop{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  transition:
    opacity var(--mf-panel-fade-open,.54s) ease!important,
    transform var(--mf-panel-open-duration,.82s) var(--mf-panel-open-ease,cubic-bezier(.16,1,.30,1))!important;
}

@media(max-width:980px){
  .search-overlay.mf-search-stage,
  .search-overlay.mf-search-stage.is-compact{
    top:var(--mf-ui-header-bottom,72px)!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{
    top:0!important;
    right:0!important;left:0!important;
    width:100%!important;
    max-width:none!important;
    min-height:276px!important;
    border-radius:0!important;
    border-top:1px solid #e7edf3!important;
    border-bottom:1px solid #dce4ec!important;
    box-shadow:0 24px 58px rgba(3,19,39,.18)!important;
  }
}


/* ========================================================================== 
   MUSIC FM — FINAL SEARCH PANEL MOTION / 2026-10-08
   Search uses the same motion contract as More / Profile / Notifications.
   ========================================================================== */
.search-overlay.mf-search-stage{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    opacity var(--mf-panel-fade-close,.40s) ease!important,
    visibility 0s linear var(--mf-panel-close-duration,.64s)!important;
}
.search-overlay.mf-search-stage.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:
    opacity var(--mf-panel-fade-open,.48s) ease!important,
    visibility 0s linear 0s!important;
}
.search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{
  opacity:0!important;
  transform:translate3d(0,var(--mf-panel-offset,-14px),0)!important;
  transform-origin:50% 0!important;
  animation:none!important;
  will-change:transform,opacity!important;
  transition:
    opacity var(--mf-panel-fade-close,.40s) ease!important,
    transform var(--mf-panel-close-duration,.64s) var(--mf-panel-close-ease,cubic-bezier(.32,0,.22,1))!important;
}
.search-overlay.mf-search-stage.open .premium-search.mf-search-premium-drop{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  transition:
    opacity var(--mf-panel-fade-open,.48s) ease!important,
    transform var(--mf-panel-open-duration,.78s) var(--mf-panel-open-ease,cubic-bezier(.16,1,.30,1))!important;
}

@media(max-width:980px){
  .search-overlay.mf-search-stage,
  .search-overlay.mf-search-stage.is-compact{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .search-overlay.mf-search-stage .premium-search.mf-search-premium-drop{
    position:absolute!important;
    top:0!important;
    right:0!important;
    left:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
  }
}

/* ===== musicfm-brand-dna.css ===== */
/* ==========================================================================
   MUSIC FM — BRAND DNA / EDITORIAL SYSTEM
   This layer is intentionally loaded last. It removes template-like visual
   habits and keeps one recognizable Music FM vocabulary across the site.
   ========================================================================== */

:root{
  --mfdna-navy:#041327;
  --mfdna-ink:#102541;
  --mfdna-text:#24364c;
  --mfdna-muted:#6f7f92;
  --mfdna-line:#dce3ea;
  --mfdna-line-soft:#edf1f4;
  --mfdna-paper:#ffffff;
  --mfdna-canvas:#f4f6f8;
  --mfdna-blue:#147cff;
  --mfdna-cyan:#59c7ff;
  --mfdna-turq:#25c8c3;
  --mfdna-red:#e94355;
  --mfdna-radius:5px;
  --mfdna-radius-small:3px;
  --mfdna-shadow:0 7px 22px rgba(4,19,39,.055);
}

/* The site is an editorial music product, not a stack of floating cards. */
html,body{background:var(--mfdna-canvas)}
body{color:var(--mfdna-text)}
.inner-page main,.home-page main{background:var(--mfdna-canvas)}

/* Keep the brand palette flat. Gradients are reserved for image legibility only. */
:is(.about-hero,.contact-hero,.help-hero,.news-masthead,.dedications-masthead,.legal-hero,.terms-hero,.mf-community-hero,.mf-dd-hero,.profile-hero,.settings-hero,.notifications-hero){
  background:var(--mfdna-navy)!important;
}

/* Surfaces: small radii, quiet borders, almost no elevation. */
main :where(article[class*="card"],section[class*="card"],.pulse-panel,.mf-section,.side-card,.mf-side-card,.news-top,.news-side-block,.artists-editorial,.artists-directory,.artist-feature,.contact-form-card,.help-category-card,.help-faq-content,.help-faq-sidebar,.dedications-content,.dedications-ranking,.dedications-guide,.legal-document,.legal-sidebar,.terms-document,.terms-sidebar,.auth-shell,.post,.chart-table,.profile-card,.settings-card,.notification-card){
  border-radius:var(--mfdna-radius)!important;
  box-shadow:none!important;
}
main :where(article[class*="card"],section[class*="card"],.pulse-panel,.mf-section,.side-card,.mf-side-card,.news-top,.news-side-block,.artists-editorial,.artists-directory,.artist-feature,.contact-form-card,.help-category-card,.help-faq-content,.help-faq-sidebar,.dedications-content,.dedications-ranking,.dedications-guide,.legal-document,.legal-sidebar,.terms-document,.terms-sidebar,.auth-shell,.post,.chart-table,.profile-card,.settings-card,.notification-card){
  background-color:var(--mfdna-paper)!important;
  background-image:none!important;
  border-color:var(--mfdna-line)!important;
}

/* Important editorial blocks may carry one restrained shadow, never glow. */
:is(.mf-hero-board,.news-top,.mf-article-hero-frame,.contact-form-card,.auth-shell,.legal-document,.terms-document){
  box-shadow:var(--mfdna-shadow)!important;
}

/* Music FM signature: three frequency ticks borrowed from the logo equalizer. */
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head,.portal-title){
  position:relative;
}
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.mf-music-section-head,.mf-community-section-head,.mf-dd-section-head,.profile-section-head,.settings-section-head,.mf-article-related-head,.mf-artist-section-head,.portal-title)::before{
  content:""!important;
  position:absolute!important;
  inset-inline-start:0!important;
  top:-13px!important;
  width:3px!important;
  height:9px!important;
  background:var(--mfdna-blue)!important;
  box-shadow:7px 3px 0 var(--mfdna-cyan),14px -2px 0 var(--mfdna-turq)!important;
  opacity:1!important;
  border-radius:0!important;
}

/* Typography: compact, editorial, not slogan-heavy. */
h1,h2,h3,h4{letter-spacing:-.025em}
main h1{font-weight:900}
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.portal-title) :is(h2,h3){font-weight:900;letter-spacing:-.03em}
:is(.section-heading,.mf-section-heading,.news-section-head,.about-section-heading,.contact-section-heading,.help-section-head,.portal-title) :is(p,span,small){color:var(--mfdna-muted)}

/* Buttons look like controls, not badges. Pills stay only where semantics require them. */
:is(.primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.dedication-form-actions button,.adm-button,.mf-hd-send,.mf-hd-compose-primary,.mf-hd-compose-secondary,.settings-save,.profile-action,.help-contact-actions a,.contact-hero-links a){
  border-radius:var(--mfdna-radius-small)!important;
  box-shadow:none!important;
  background-image:none!important;
}
:is(.primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.dedication-form-actions button,.mf-hd-send,.mf-hd-compose-primary){
  background:var(--mfdna-blue)!important;
  border-color:var(--mfdna-blue)!important;
  color:#fff!important;
}
@media(hover:hover) and (pointer:fine){
  :is(.primary-btn,.about-btn-primary,.auth-submit,.contact-form-actions button,.dedication-form-actions button,.mf-hd-send,.mf-hd-compose-primary):hover{
    background:#0d5fc2!important;transform:none!important;box-shadow:none!important;
  }
  main :where(article[class*="card"],section[class*="card"],.pulse-panel,.mf-section,.side-card,.mf-side-card):hover{
    transform:none!important;box-shadow:none!important;
  }
}

/* Inputs are deliberately plain and precise. */
:is(input,textarea,select,.search-field,.help-search-box,.artists-search,.news-search,.legal-search,.terms-search){border-radius:var(--mfdna-radius-small)!important}
:is(input,textarea,select){box-shadow:none!important}

/* Remove glass as a default visual language. */
:is(.search-overlay,.premium-search,.v4-mega,.mf-header-account__menu,.mf-notifications-panel,.mf-hd-compose-dialog){
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
:is(.premium-search,.v4-mega,.mf-header-account__menu,.mf-notifications-panel,.mf-hd-compose-dialog){
  background-color:#fff!important;background-image:none!important;
}

/* Header: the identity comes from the mark and typography, not effects. */
.site-header.v4-site-header{background:var(--mfdna-navy)!important;box-shadow:none!important}
.v4-action,.mf-mobile-menu-toggle{box-shadow:none!important}
.v4-mainnav>a::after{height:2px!important;background:var(--mfdna-cyan)!important}

/* Home is a newspaper/front page composition rather than a dashboard. */
.home-page .mf-hero-board{background:#fff!important;border:1px solid var(--mfdna-line)!important;border-radius:0!important}
.home-page .mf-mini-card{background:#fff!important;border-radius:0!important;box-shadow:none!important}
.home-page .pulse-panel,.home-page .mf-home-dedications,.home-page .mf-section,.home-page .mf-side-card{border-radius:0!important}
.home-page .flash-strip{border-radius:0!important;box-shadow:none!important}
.home-page .flash-title{background:#fff!important}
.home-page .mf-hd-grid{background:#f1f4f6!important}

/* News/content rows stay linear and dense. */
.news-page :is(.news-row,.news-directory-card,.news-top-card){border-radius:0!important;box-shadow:none!important}
.news-page .news-row{background:#fff!important}
.mf-article-wrap .mf-article-quote{border-radius:0!important;box-shadow:none!important}

/* Images: almost square edges. Avatars remain circular by meaning. */
main :is(.mini-media,.mf-lead-image,.news-top-card,.news-row,.news-directory-card,.mf-article-hero-frame,.artist-feature,.editorial-artist,.mf-latest-song,.album-card,.playlist-grid>a) img{border-radius:2px!important}
:is(.avatar,.mf-avatar,[class*="avatar"],.mf-header-account__avatar){border-radius:50%!important}

/* Footer already carries a strong editorial signature; strip ornamental glow. */
.site-footer{box-shadow:none!important}
.mf-footer-accent{background:none!important}
.mf-footer-accent>span{background:var(--mfdna-blue)!important}
.mf-footer-accent>i{background:var(--mfdna-cyan)!important}

/* Motion: one short functional rhythm. */
@media(prefers-reduced-motion:no-preference){
  a,button,input,textarea,select{transition-duration:150ms!important}
}

/* Mobile: app-like in behavior, not bubble-like in shape. */
@media(max-width:760px){
  :root{--mfdna-radius:3px}
  .mf-container,.container{width:min(100% - 24px,var(--mf-brand-container,1240px))}
  .mobile-bottom.mf-mobile-bottom{border-radius:0!important;box-shadow:0 -1px 0 var(--mfdna-line)!important;background:#fff!important}
  .mf-mobile-bottom__link{border-radius:0!important}
  .mf-mobile-bottom__link.active{background:transparent!important;color:var(--mfdna-blue)!important}
  main :where(article[class*="card"],section[class*="card"],.pulse-panel,.mf-section,.side-card,.mf-side-card){border-radius:3px!important}
}

/* ===== footer.css ===== */
/* ========================================================================== 
   MUSIC FM — Premium footer system / 2026-10-09
   Content is managed from Admin > Music FM Studio > Footer.
   Visual tokens are managed from Admin > Music FM Studio > Footer UI.
   ========================================================================== */

.site-footer.mf-footer-pro{
  --mff-bg:var(--mf-footer-bg,#06182c);
  --mff-bg-deep:var(--mf-footer-bg-deep,#041222);
  --mff-text:var(--mf-footer-text,#f4f8fc);
  --mff-muted:var(--mf-footer-muted,#8fa7c8);
  --mff-link:var(--mf-footer-link,#c5d6ef);
  --mff-line:rgba(255,255,255,.105);
  --mff-line-soft:rgba(255,255,255,.065);
  --mff-blue:var(--mf-primary,#268cff);
  --mff-cyan:var(--mf-secondary,#67d5f6);
  position:relative!important;
  overflow:hidden!important;
  margin-top:var(--mf-footer-margin-top,56px)!important;
  padding:0!important;
  color:var(--mff-text)!important;
  background:var(--mff-bg)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  isolation:isolate;
}
.site-footer.mf-footer-pro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(780px 330px at 84% -6%,rgba(55,155,235,.09),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 32%);
}
.site-footer.mf-footer-pro::after{display:none!important}
.mf-footer-pro a{color:inherit;text-decoration:none}
.mf-footer-pro .mf-container{position:relative}

/* quiet brand signal */
.mf-footer-pro__signal{
  height:3px;
  display:grid;
  grid-template-columns:4.4fr 1.2fr .72fr .44fr .24fr;
  gap:3px;
  background:#0a2440;
}
.mf-footer-pro__signal span{display:block;background:var(--mff-blue)}
.mf-footer-pro__signal span:nth-child(2){background:#62c7ef}
.mf-footer-pro__signal span:nth-child(3){background:#31c2bd}
.mf-footer-pro__signal span:nth-child(4){background:#7068d0}
.mf-footer-pro__signal span:nth-child(5){background:#d74e65}

/* lead */
.mf-footer-pro__lead{
  display:grid;
  grid-template-columns:minmax(330px,1.22fr) minmax(190px,.52fr) minmax(280px,.78fr);
  align-items:center;
  gap:clamp(28px,4vw,54px);
  padding-top:var(--mf-footer-padding-top,48px);
  padding-bottom:42px;
  border-bottom:1px solid var(--mff-line);
}
.mf-footer-pro__lead.is-no-contact{grid-template-columns:minmax(330px,1.3fr) minmax(220px,.7fr)}
.mf-footer-pro__brand{min-width:0}
.mf-footer-pro__logo{
  display:inline-flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 15px!important;
  color:#fff!important;
}
.mf-footer-pro__logo .mf-classic-mark{width:51px!important;height:51px!important;flex:0 0 51px!important;filter:none!important}
.mf-footer-pro__logo .mf-classic-ring{stroke:rgba(244,249,253,.94)!important}
.mf-footer-pro__logo .mf-classic-bar{fill:#eef9ff!important}
.mf-footer-pro__logo .mf-classic-word{color:#fff!important;font-size:var(--mf-footer-brand-size,29px)!important;line-height:1!important;letter-spacing:-.75px!important}
.mf-footer-pro__logo .mf-classic-word b{color:#73d4f8!important;font-weight:700!important}
.mf-footer-pro__logo .mf-classic-copy small{color:#71889f!important;font-size:7.2px!important;letter-spacing:1.55px!important}
.mf-footer-pro__custom-logo{display:block;max-width:min(250px,52vw);max-height:64px;width:auto;height:auto;object-fit:contain}
.mf-footer-pro__tagline{margin:0 0 7px;color:var(--mff-text);font-size:15px;line-height:1.45;font-weight:760}
.mf-footer-pro__copy{max-width:560px;margin:0;color:var(--mff-muted);font-size:12.5px;line-height:1.8;font-weight:470}

.mf-footer-pro__live{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding-inline:var(--mf-footer-contact-padding-x,28px);
  border-inline-start:1px solid var(--mff-line);
  border-inline-end:1px solid var(--mff-line);
  direction:ltr;
}
.mf-footer-pro__live-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#27c9b5;box-shadow:0 0 0 5px rgba(39,201,181,.085),0 0 18px rgba(39,201,181,.3)}
.mf-footer-pro__live strong{display:block;color:#f8fbff;font-size:10px;line-height:1.25;font-weight:900;letter-spacing:1.25px}
.mf-footer-pro__live small{display:block;margin-top:5px;color:var(--mff-muted);font-size:10.5px;line-height:1.35;direction:rtl;text-align:left}

.mf-footer-pro__contact{min-width:0}
.mf-footer-pro__micro{display:block;margin-bottom:6px;color:var(--mff-muted);font-size:10px;font-weight:700}
.mf-footer-pro__contact-link{display:inline-block;position:relative;color:#fff!important;font-size:16px;line-height:1.45;font-weight:780}
.mf-footer-pro__contact-link::after{content:"";display:block;width:34px;height:1px;margin-top:8px;background:var(--mff-cyan);transition:width .22s ease}
.mf-footer-pro__contact-link:hover::after{width:100%}
.mf-footer-pro__contact-lines{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px}
.mf-footer-pro__contact-item{display:inline-flex;align-items:center;gap:8px;max-width:100%;color:var(--mff-muted)!important;font-size:10.5px;font-weight:650;direction:ltr}
.mf-footer-pro__contact-item:hover{color:#fff!important}
.mf-footer-pro__contact-item svg{width:13px;height:13px;flex:0 0 13px;color:var(--mff-cyan)}
.mf-footer-pro__contact-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-footer-pro__contact-glyph{display:grid;place-items:center;min-width:24px;height:14px;padding-inline:3px;border:1px solid rgba(103,213,246,.48);color:var(--mff-cyan);font-size:6.5px;font-weight:900;letter-spacing:.7px}

/* directory */
.mf-footer-pro__directory{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:0;
  padding-top:36px;
  padding-bottom:var(--mf-footer-padding-bottom,40px);
}
.mf-footer-pro__group{min-width:0;padding-inline:var(--mf-footer-column-padding,30px);border-inline-start:1px solid var(--mff-line)}
.mf-footer-pro__group:first-child{padding-inline-start:0;border-inline-start:0}
.mf-footer-pro__group:last-child{padding-inline-end:0}
.mf-footer-pro__heading{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.mf-footer-pro__heading h2{margin:0!important;padding:0!important;color:#f8fbff!important;font-size:var(--mf-footer-title-size,14px)!important;line-height:1.25!important;font-weight:780!important;letter-spacing:-.15px!important}
.mf-footer-pro__number{color:#4fb8ea;font-size:8px;line-height:1;font-weight:900;letter-spacing:.7px;direction:ltr}
.mf-footer-pro__group nav{display:grid;grid-template-columns:1fr;gap:0}
.mf-footer-pro__group nav a{position:relative;display:block;padding:5px 0!important;color:var(--mff-link)!important;font-size:var(--mf-footer-link-size,12px)!important;line-height:1.45!important;font-weight:540!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;transition:color .18s ease,padding .2s ease!important}
.mf-footer-pro__group nav a::before{content:"";position:absolute;inset-inline-start:-1px;top:50%;width:0;height:1px;background:var(--mff-cyan);transform:translateY(-50%);transition:width .2s ease}
.mf-footer-pro__group nav a:hover{color:#fff!important;padding-inline-start:13px!important}
.mf-footer-pro__group nav a:hover::before{width:8px}

/* optional legal note */
.mf-footer-pro__disclaimer{display:flex;gap:12px;align-items:baseline;padding-top:14px;padding-bottom:14px;border-top:1px solid var(--mff-line-soft);color:var(--mff-muted);font-size:9.5px;line-height:1.65}
.mf-footer-pro__disclaimer strong{flex:0 0 auto;color:#b8c8d8;font-size:9.5px}

/* social / channels rail */
.mf-footer-pro__rail{background:color-mix(in srgb,var(--mff-bg-deep) 72%,var(--mff-bg) 28%);border-top:1px solid var(--mff-line);border-bottom:1px solid var(--mff-line)}
@supports not (background:color-mix(in srgb,#000 50%,#fff 50%)){.mf-footer-pro__rail{background:var(--mff-bg-deep)}}
.mf-footer-pro__rail-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:10px;padding-bottom:10px}
.mf-footer-pro__social-label span{display:block;color:#eaf3fa;font-size:11px;font-weight:760}
.mf-footer-pro__social-label small{display:block;margin-top:3px;color:var(--mff-muted);font-size:9.5px;font-weight:470}
.mf-footer-pro__socials{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-wrap:wrap}
.mf-footer-pro__network{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:38px;padding:0 12px!important;color:var(--mff-muted)!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:.05px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transition:color .18s ease,background .18s ease!important}
.mf-footer-pro__network>i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#5e7c97;box-shadow:0 0 0 3px rgba(94,124,151,.08)}
.mf-footer-pro__network--whatsapp>i{background:#35c889;box-shadow:0 0 0 3px rgba(53,200,137,.08)}
.mf-footer-pro__network:hover{color:#fff!important;background:rgba(255,255,255,.035)!important}
.mf-footer-pro__network:hover>i{background:var(--mff-cyan)}

.mf-footer-pro__note{padding-top:13px;padding-bottom:13px;color:var(--mff-muted);font-size:9.5px;line-height:1.7;border-bottom:1px solid var(--mff-line-soft)}

/* final line */
.mf-footer-pro__bottom{background:var(--mff-bg-deep)}
.mf-footer-pro__bottom-inner{min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;color:#647d95}
.mf-footer-pro__copyright{margin:0;color:#8398ac;font-size:10px;font-weight:650;line-height:1.5}
.mf-footer-pro__signature{margin:0;color:#536b83;font-size:8px;font-weight:850;letter-spacing:1.2px;text-align:center;white-space:nowrap}
.mf-footer-pro__bottom-spacer{display:block}
.mf-footer-pro__credit-logo{display:flex;justify-content:flex-end;align-items:center;min-height:30px}
.mf-footer-pro__credit-logo a{display:inline-flex;align-items:center}
.mf-footer-pro__credit-logo img{display:block;max-width:78px;max-height:24px;width:auto;height:auto;object-fit:contain;opacity:.8;filter:grayscale(1) brightness(1.5);transition:opacity .18s ease,filter .18s ease}
.mf-footer-pro__credit-logo a:hover img{opacity:1;filter:grayscale(0) brightness(1.12)}

.mf-footer-pro a:focus-visible{outline:2px solid var(--mff-cyan)!important;outline-offset:4px!important}

@media(max-width:1120px){
  .mf-footer-pro__lead{grid-template-columns:1.15fr .75fr;gap:32px}
  .mf-footer-pro__lead.is-no-contact{grid-template-columns:1.15fr .75fr}
  .mf-footer-pro__contact{grid-column:1/-1;padding-top:22px;border-top:1px solid var(--mff-line)}
  .mf-footer-pro__directory{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .mf-footer-pro__group:nth-child(4){border-inline-start:0;padding-inline-start:0}
}

@media(max-width:820px){
  .mf-footer-pro__directory{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:28px}
  .mf-footer-pro__group,.mf-footer-pro__group:first-child,.mf-footer-pro__group:last-child,.mf-footer-pro__group:nth-child(4){padding-inline:18px!important;border-inline-start:1px solid var(--mff-line)!important}
  .mf-footer-pro__group:nth-child(odd){padding-inline-start:0!important;border-inline-start:0!important}
  .mf-footer-pro__group:nth-child(even){padding-inline-end:0!important}
  .mf-footer-pro__rail-inner{align-items:flex-start;flex-direction:column;gap:8px;padding-top:16px;padding-bottom:16px}
  .mf-footer-pro__socials{justify-content:flex-start}
}

@media(max-width:760px){
  .site-footer.mf-footer-pro{margin-top:38px!important;padding-bottom:calc(var(--mf-bottom-nav-h,62px) + env(safe-area-inset-bottom))!important}
  .mf-footer-pro__signal{height:2px;gap:2px}
  .mf-footer-pro__lead,.mf-footer-pro__lead.is-no-contact{display:block;padding-top:31px;padding-bottom:27px}
  .mf-footer-pro__brand{text-align:right}
  .mf-footer-pro__logo{margin-bottom:12px!important}
  .mf-footer-pro__logo .mf-classic-mark{width:45px!important;height:45px!important;flex-basis:45px!important}
  .mf-footer-pro__logo .mf-classic-word{font-size:25px!important}
  .mf-footer-pro__custom-logo{max-width:210px;max-height:54px}
  .mf-footer-pro__tagline{font-size:14px}
  .mf-footer-pro__copy{font-size:11.5px;line-height:1.72;max-width:430px}
  .mf-footer-pro__live{margin-top:23px;min-height:0;padding:18px 0 0;border:0;border-top:1px solid var(--mff-line)}
  .mf-footer-pro__live small{text-align:left}
  .mf-footer-pro__contact{margin-top:18px;padding-top:18px;border-top:1px solid var(--mff-line)}
  .mf-footer-pro__contact-link{font-size:14px}
  .mf-footer-pro__contact-lines{display:grid;gap:8px;margin-top:12px}
  .mf-footer-pro__directory{grid-template-columns:1fr 1fr;column-gap:18px;row-gap:26px;padding-top:27px;padding-bottom:30px}
  .mf-footer-pro__group,.mf-footer-pro__group:first-child,.mf-footer-pro__group:last-child,.mf-footer-pro__group:nth-child(4){padding:0!important;border:0!important}
  .mf-footer-pro__group:nth-child(even){padding-inline-start:16px!important;border-inline-start:1px solid var(--mff-line)!important}
  .mf-footer-pro__heading{margin-bottom:10px}
  .mf-footer-pro__heading h2{font-size:13px!important}
  .mf-footer-pro__group nav a{font-size:11.5px!important;padding:4.5px 0!important}
  .mf-footer-pro__group nav a:hover{padding-inline-start:0!important}
  .mf-footer-pro__group nav a::before{display:none}
  .mf-footer-pro__disclaimer{display:block;font-size:9px}.mf-footer-pro__disclaimer strong{display:block;margin-bottom:4px}
  .mf-footer-pro__rail-inner{display:block;min-height:0;padding-top:17px;padding-bottom:17px}
  .mf-footer-pro__social-label small{margin-top:4px}
  .mf-footer-pro__socials{margin-top:10px;gap:2px}
  .mf-footer-pro__network{min-height:34px;padding:0 9px!important;font-size:9px!important}
  .mf-footer-pro__bottom-inner{min-height:0;display:grid;grid-template-columns:1fr auto;padding-top:15px;padding-bottom:17px;text-align:right;gap:8px 14px}
  .mf-footer-pro__copyright{font-size:9.5px}
  .mf-footer-pro__signature{grid-column:1/-1;grid-row:2;text-align:right;font-size:7.5px;white-space:normal}
  .mf-footer-pro__credit-logo{grid-column:2;grid-row:1;justify-content:flex-end}
  .mf-footer-pro__bottom-spacer{display:none}
}

@media(max-width:420px){
  .mf-footer-pro__directory{column-gap:14px}
  .mf-footer-pro__group:nth-child(even){padding-inline-start:12px!important}
  .mf-footer-pro__group nav a{font-size:11px!important}
  .mf-footer-pro__socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .mf-footer-pro__network{justify-content:flex-start!important;padding-inline:7px!important;border-bottom:1px solid var(--mff-line-soft)!important}
}

@media(prefers-reduced-motion:reduce){
  .mf-footer-pro *, .mf-footer-pro *::before, .mf-footer-pro *::after{animation:none!important;transition:none!important}
}

/* ========================================================================== 
   2026-10-09 — Footer refinement: mobile lead + real platform icons
   ========================================================================== */
.mf-footer-pro__network{
  --network-accent:#6f8ba4;
  position:relative;
  min-height:44px;
  padding:0 12px!important;
  gap:9px!important;
  border:1px solid transparent!important;
  color:#9bb0c3!important;
}
.mf-footer-pro__network-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  color:var(--network-accent);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.065);
  border-radius:8px;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.mf-footer-pro__network-icon svg{display:block;width:15px;height:15px;fill:currentColor}
.mf-footer-pro__network-label{line-height:1;white-space:nowrap}
.mf-footer-pro__network--whatsapp{--network-accent:#35d07f}
.mf-footer-pro__network--instagram{--network-accent:#e873b3}
.mf-footer-pro__network--facebook{--network-accent:#66a3ff}
.mf-footer-pro__network--youtube{--network-accent:#ff6269}
.mf-footer-pro__network--tiktok{--network-accent:#f0f5f8}
.mf-footer-pro__network--telegram{--network-accent:#59b9ee}
.mf-footer-pro__network--spotify{--network-accent:#45d57a}
.mf-footer-pro__network--x{--network-accent:#f0f5f8}
.mf-footer-pro__network--custom{--network-accent:#83cbe8}
.mf-footer-pro__network:hover{
  color:#fff!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.055)!important;
}
.mf-footer-pro__network:hover .mf-footer-pro__network-icon{
  color:var(--network-accent);
  background:rgba(255,255,255,.06);
  border-color:color-mix(in srgb,var(--network-accent) 34%,transparent);
  transform:translateY(-1px);
}

/* Desktop lead: stronger rhythm without turning it into cards */
@media(min-width:1121px){
  .mf-footer-pro__lead{
    grid-template-columns:minmax(390px,1.24fr) minmax(220px,.55fr) minmax(300px,.72fr);
    gap:0;
    align-items:stretch;
    padding-top:44px;
    padding-bottom:38px;
  }
  .mf-footer-pro__brand{padding-inline-end:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
  .mf-footer-pro__live{
    align-self:stretch;
    min-height:118px;
    padding:0 clamp(24px,2.6vw,38px);
    border-inline-start:1px solid var(--mff-line);
    border-inline-end:1px solid var(--mff-line);
  }
  .mf-footer-pro__contact{padding-inline-start:clamp(28px,3vw,46px);display:flex;flex-direction:column;justify-content:center}
  .mf-footer-pro__contact-link{font-size:15px}
  .mf-footer-pro__rail-inner{min-height:78px}
  .mf-footer-pro__socials{gap:4px}
}

/* Mobile: make the top feel like one designed composition instead of 3 stacked sections */
@media(max-width:760px){
  .mf-footer-pro__lead,.mf-footer-pro__lead.is-no-contact{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    padding-top:24px;
    padding-bottom:0;
    border-bottom:1px solid var(--mff-line);
  }
  .mf-footer-pro__brand{
    grid-column:1/-1;
    padding-bottom:21px;
    text-align:right;
  }
  .mf-footer-pro__logo{
    gap:11px!important;
    margin-bottom:11px!important;
  }
  .mf-footer-pro__logo .mf-classic-mark{width:39px!important;height:39px!important;flex-basis:39px!important}
  .mf-footer-pro__logo .mf-classic-word{font-size:22px!important;letter-spacing:-.5px!important}
  .mf-footer-pro__logo .mf-classic-copy small{font-size:6.3px!important;letter-spacing:1.25px!important}
  .mf-footer-pro__custom-logo{max-width:190px;max-height:48px}
  .mf-footer-pro__tagline{margin-bottom:5px;font-size:13.5px;line-height:1.45}
  .mf-footer-pro__copy{max-width:none;font-size:10.8px;line-height:1.7;color:#8299ad}

  .mf-footer-pro__live,
  .mf-footer-pro__contact{
    margin:0;
    min-width:0;
    min-height:88px;
    padding:15px 0 14px;
    border-top:1px solid var(--mff-line);
  }
  .mf-footer-pro__live{
    gap:9px;
    padding-inline-end:14px;
    padding-inline-start:3px;
    border-inline-start:0;
    border-inline-end:1px solid var(--mff-line);
    direction:ltr;
  }
  .mf-footer-pro__live-dot{width:6px;height:6px;flex-basis:6px;box-shadow:0 0 0 4px rgba(39,201,181,.075),0 0 14px rgba(39,201,181,.22)}
  .mf-footer-pro__live strong{font-size:9px;letter-spacing:1px}
  .mf-footer-pro__live small{margin-top:4px;font-size:9.4px;line-height:1.35;text-align:left}
  .mf-footer-pro__contact{
    padding-inline-start:14px;
    padding-inline-end:0;
    border-inline:0;
  }
  .mf-footer-pro__micro{margin-bottom:4px;font-size:8.7px}
  .mf-footer-pro__contact-link{font-size:12.5px;line-height:1.3}
  .mf-footer-pro__contact-link::after{width:25px;margin-top:6px}
  .mf-footer-pro__contact-lines{display:block;margin-top:8px}
  .mf-footer-pro__contact-item{gap:6px;font-size:9.2px;max-width:100%}
  .mf-footer-pro__contact-item svg{width:12px;height:12px;flex-basis:12px}

  .mf-footer-pro__rail-inner{padding-top:15px;padding-bottom:15px}
  .mf-footer-pro__social-label span{font-size:10.5px}
  .mf-footer-pro__social-label small{font-size:9px;line-height:1.45}
  .mf-footer-pro__socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;margin-top:11px}
  .mf-footer-pro__network{
    justify-content:flex-start!important;
    min-height:44px;
    padding:0 8px!important;
    gap:8px!important;
    border:1px solid rgba(255,255,255,.055)!important;
    background:rgba(255,255,255,.018)!important;
    font-size:9.3px!important;
  }
  .mf-footer-pro__network-icon{width:27px;height:27px;flex-basis:27px;border-radius:7px}
  .mf-footer-pro__network-icon svg{width:14px;height:14px}
}

@media(max-width:420px){
  .mf-footer-pro__lead,.mf-footer-pro__lead.is-no-contact{grid-template-columns:1fr}
  .mf-footer-pro__brand{grid-column:1;padding-bottom:18px}
  .mf-footer-pro__live,.mf-footer-pro__contact{min-height:0;padding-top:13px;padding-bottom:13px}
  .mf-footer-pro__live{border-inline-end:0;padding-inline:0;border-top:1px solid var(--mff-line)}
  .mf-footer-pro__contact{padding-inline:0;border-top:1px solid var(--mff-line)}
  .mf-footer-pro__contact-lines{margin-top:7px}
  .mf-footer-pro__socials{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .mf-footer-pro__network{min-width:0}
  .mf-footer-pro__network-label{overflow:hidden;text-overflow:ellipsis}
}

/* ===== header-actions.css ===== */
/* MUSIC FM — canonical header action geometry
   Search / notifications / account are three different DOM controls,
   but must render as one perfectly aligned action cluster. */
body:not(.mf-admin) .site-header.v4-site-header .v4-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  align-content:center!important;
  gap:8px!important;
  height:44px!important;
  min-height:44px!important;
  line-height:0!important;
}

body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-notifications,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-account{
  box-sizing:border-box!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  vertical-align:middle!important;
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
}

body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-notifications,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-account{
  display:grid!important;
  place-items:center!important;
  line-height:0!important;
}

body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__trigger{
  box-sizing:border-box!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.025)!important;
  color:#f4f8fc!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  line-height:1!important;
  transform:none!important;
  top:auto!important;
  bottom:auto!important;
  vertical-align:middle!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease!important;
}

body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action:is(:hover,:focus-visible,[aria-expanded="true"]),
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger:is(:hover,:focus-visible,[aria-expanded="true"]),
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__trigger:is(:hover,:focus-visible),
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account[open] > .mf-header-account__trigger{
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(89,199,255,.34)!important;
  color:#fff!important;
  transform:none!important;
}

/* Equalize icon boxes as well as the circles themselves. */
body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action > .mf-icon,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger > .mf-icon,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__icon{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  line-height:0!important;
}
body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action > .mf-icon svg,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger > .mf-icon svg,
body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__icon svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
}

/* Presence dot floats outside the geometry; it never affects centering. */
body:not(.mf-admin) .site-header.v4-site-header .mf-header-account__online{
  position:absolute!important;
  right:-1px!important;
  bottom:1px!important;
  width:7px!important;
  height:7px!important;
  margin:0!important;
  border:2px solid #041327!important;
  border-radius:50%!important;
  box-sizing:content-box!important;
  pointer-events:none!important;
}

/* The unread badge also floats without changing the bell's layout. */
body:not(.mf-admin) .site-header.v4-site-header .mf-notification-badge{
  position:absolute!important;
  z-index:2!important;
  pointer-events:none!important;
}

/* Keep the cluster identical when the shrinking header scales it. */
body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > .v4-action,
body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > .mf-header-notifications,
body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > .mf-header-account,
body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions .mf-notification-trigger,
body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions .mf-header-account__trigger{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
}

@media (max-width:980px){
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions{
    gap:5px!important;
    height:42px!important;
    min-height:42px!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-notifications,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-account,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__trigger{
    flex-basis:42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action > .mf-icon,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger > .mf-icon,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__icon,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-action > .mf-icon svg,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger > .mf-icon svg,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-header-account__icon svg{
    width:19px!important;
    height:19px!important;
    min-width:19px!important;
    min-height:19px!important;
  }
}

/* ===== header-mobile.css ===== */
/* MUSIC FM — mobile header actions cleanup
   Search stays framed, notifications stays frameless, account control is hidden.
   Geometry is locked so scrolling never changes button size. */
@media (max-width:980px){
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    height:40px!important;
    min-height:40px!important;
    transform:none!important;
    scale:none!important;
    transition:none!important;
    will-change:auto!important;
  }

  /* Mobile has its own Profile entry in the app navigation/drawer. */
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .v4-desktop-action,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-account.v4-desktop-action,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > .v4-desktop-action,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > .mf-header-account.v4-desktop-action{
    display:none!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    flex:0 0 0!important;
    margin:0!important;
    padding:0!important;
  }

  /* Search: one stable framed circle. */
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > button.v4-action:not(.mf-notification-trigger),
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > button.v4-action:not(.mf-notification-trigger){
    box-sizing:border-box!important;
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    scale:none!important;
    transition:background-color .16s ease,border-color .16s ease,color .16s ease!important;
  }

  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > button.v4-action:not(.mf-notification-trigger):is(:hover,:focus-visible,[aria-expanded="true"]),
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > button.v4-action:not(.mf-notification-trigger):is(:hover,:focus-visible,[aria-expanded="true"]){
    background:rgba(255,255,255,.055)!important;
    border-color:rgba(255,255,255,.24)!important;
    transform:none!important;
  }

  /* Notifications: same hit area, no visible circle/frame. */
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > .mf-header-notifications,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > .mf-header-notifications{
    display:block!important;
    box-sizing:border-box!important;
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions .mf-notification-trigger{
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    color:#f2f7fb!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline-offset:2px!important;
    transform:none!important;
    scale:none!important;
    transition:color .16s ease,background-color .16s ease!important;
  }

  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger:is(:hover,:focus-visible,[aria-expanded="true"]),
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions .mf-notification-trigger:is(:hover,:focus-visible,[aria-expanded="true"]){
    color:#fff!important;
    background:rgba(255,255,255,.045)!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
  }

  /* Lock icon geometry as well, so no scroll-state jump is visible. */
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > button.v4-action:not(.mf-notification-trigger) > .mf-icon,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger > .mf-icon,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > button.v4-action:not(.mf-notification-trigger) > .mf-icon,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions .mf-notification-trigger > .mf-icon,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions > button.v4-action:not(.mf-notification-trigger) > .mf-icon svg,
  body:not(.mf-admin) .site-header.v4-site-header .v4-actions .mf-notification-trigger > .mf-icon svg,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions > button.v4-action:not(.mf-notification-trigger) > .mf-icon svg,
  body:not(.mf-admin) .site-header.v4-site-header.is-scrolled .v4-actions .mf-notification-trigger > .mf-icon svg{
    width:19px!important;
    height:19px!important;
    min-width:19px!important;
    min-height:19px!important;
    margin:0!important;
    transform:none!important;
  }

  body:not(.mf-admin) .site-header.v4-site-header .mf-notification-badge{
    top:0!important;
    right:-1px!important;
  }
}

/* ===== notifications-panel.css ===== */
/* MUSIC FM — Notifications panel final anchor fix / 2026-10-09
   Desktop: dropdown is physically anchored to the bell wrapper.
   Mobile: viewport sheet from header to bottom navigation. */

html body:not(.mf-admin) .mf-header-notifications{
  position:relative!important;
  overflow:visible!important;
  transform:none!important;
}

/* Keep the internal list scrollable while the scrollbar itself is invisible. */
html body:not(.mf-admin) .mf-notification-dropdown,
html body:not(.mf-admin) .mf-notification-dropdown__list,
html body:not(.mf-admin) .mf-notification-dropdown__empty{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html body:not(.mf-admin) .mf-notification-dropdown::-webkit-scrollbar,
html body:not(.mf-admin) .mf-notification-dropdown__list::-webkit-scrollbar,
html body:not(.mf-admin) .mf-notification-dropdown__empty::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
  background:transparent!important;
}

@media(min-width:981px){
  html body:not(.mf-admin) .mf-header-notifications > .mf-notification-dropdown[data-notifications-panel]{
    position:absolute!important;
    inset:auto!important;
    top:var(--mf-notification-local-top,calc(100% + 10px))!important;
    left:var(--mf-notification-local-left,0px)!important;
    right:auto!important;
    bottom:auto!important;
    width:min(420px,calc(100vw - 24px))!important;
    min-width:340px!important;
    max-width:calc(100vw - 24px)!important;
    height:auto!important;
    max-height:var(--mf-notification-height,650px)!important;
    margin:0!important;
    border:1px solid #d9e1e9!important;
    border-radius:4px!important;
    background:#fff!important;
    box-shadow:0 20px 54px rgba(3,19,39,.18)!important;
    overflow:hidden!important;
    z-index:1605!important;
    transform-origin:top left!important;
  }

  html body:not(.mf-admin) .mf-header-notifications > .mf-notification-dropdown[data-notifications-panel]:not(.is-open){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  html body:not(.mf-admin) .mf-header-notifications > .mf-notification-dropdown[data-notifications-panel].is-open,
  html body:not(.mf-admin) .mf-header-notifications.is-open > .mf-notification-dropdown[data-notifications-panel]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
  }
}

@media(max-width:980px){
  html body:not(.mf-admin) .mf-header-notifications > .mf-notification-dropdown[data-notifications-panel]{
    position:fixed!important;
    inset:auto!important;
    top:var(--mf-notification-top,var(--mf-ui-header-bottom,72px))!important;
    right:0!important;
    left:0!important;
    bottom:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:var(--mf-notification-height,calc(100dvh - var(--mf-ui-header-bottom,72px) - 66px))!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #e3eaf1!important;
    border-bottom:1px solid #d9e2ea!important;
    border-radius:0!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 16px 42px rgba(3,19,39,.18)!important;
    backdrop-filter:blur(16px) saturate(.96)!important;
    -webkit-backdrop-filter:blur(16px) saturate(.96)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:1605!important;
    transform-origin:top center!important;
  }

  html body:not(.mf-admin) .mf-notification-dropdown__head{
    flex:0 0 auto!important;
    padding:16px 18px 14px!important;
  }
  html body:not(.mf-admin) .mf-notification-dropdown__tools,
  html body:not(.mf-admin) .mf-notification-dropdown__foot{flex:0 0 auto!important}
  html body:not(.mf-admin) .mf-notification-dropdown__list,
  html body:not(.mf-admin) .mf-notification-dropdown__empty{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  html body:not(.mf-admin).mf-notifications-open .mf-nav-backdrop{
    position:fixed!important;
    top:var(--mf-ui-header-bottom,72px)!important;
    right:0!important;
    bottom:var(--mf-notification-bottom-gap,66px)!important;
    left:0!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    background:rgba(3,18,38,.24)!important;
    backdrop-filter:blur(14px) saturate(.86)!important;
    -webkit-backdrop-filter:blur(14px) saturate(.86)!important;
    pointer-events:auto!important;
  }
  html body:not(.mf-admin).mf-notifications-open .mobile-bottom.mf-mobile-bottom{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body:not(.mf-admin) .mf-notification-dropdown{transition:none!important}
}

/* ===== interaction-polish.css ===== */
/* MUSIC FM — interaction polish
   Stable surfaces, restrained media motion, no detached-shadow lift. */

:root{
  --mf-interaction-ease:cubic-bezier(.22,.72,.22,1);
  --mf-interaction-shadow-rest:0 1px 2px rgba(4,19,39,.025),0 8px 20px rgba(4,19,39,.04);
  --mf-interaction-shadow-hover:0 2px 5px rgba(4,19,39,.035),0 13px 30px rgba(4,19,39,.065);
  --mf-interaction-border-hover:rgba(88,119,149,.22);
  --mf-interaction-row:#f8fafc;
}

/* 1) Content surfaces never physically lift. The surface and its shadow stay together. */
@media (hover:hover) and (pointer:fine){
  body:not(.mf-admin) :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.cards-4>a,.artist-card,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,.su-board-row,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card,
    .albums-2026-card,.album-2026-more-item,.song-2026-discover-card,.mika-discovery-card,
    .mf-newsroom__stream-item,.mf-newsroom__side-item,.mf-home-concerts__row
  ){
    transform:none!important;
    translate:none!important;
    transition:
      box-shadow .28s ease,
      border-color .28s ease,
      background-color .28s ease,
      color .2s ease!important;
    will-change:auto!important;
  }

  body:not(.mf-admin) :is(
    .news-top-card,.news-directory-card,.mf-article-related-card,.mf-latest-song,
    .album-card,.playlist-grid>a,.cards-4>a,.artist-card,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,
    .about-world-item,.about-tech-grid article,.about-principles-grid article,.contact-route-grid>article,.help-category-card,
    .albums-2026-card,.album-2026-more-item,.song-2026-discover-card,.mika-discovery-card
  ):hover{
    transform:none!important;
    translate:none!important;
    border-color:var(--mf-interaction-border-hover)!important;
    box-shadow:var(--mf-interaction-shadow-hover)!important;
  }

  /* Compact rows should read as editorial rows, not floating tiles. */
  body:not(.mf-admin) :is(
    .mf-mini-card,.news-row,.mf-music-row,.chart-table-row,.list-row,
    .mf-newsroom__stream-item,.mf-newsroom__side-item,.mf-home-concerts__row,.su-board-row
  ):hover{
    transform:none!important;
    box-shadow:none!important;
    background:var(--mf-interaction-row)!important;
  }
}

/* 2) Motion belongs inside the frame: a very small photographic push, not a card lift. */
body:not(.mf-admin) :is(
  .mf-lead-image,.mini-media,.section-lead,.section-side,
  .news-card-media,.news-row-media,.news-top-card-media,.news-editorial-media,.news-lead-media,
  .mf-news-card-image,.mf-news-lead-image,.mf-article-related-image,.mf-article-hero-media,
  .album-cover,.albums-2026-cover,.albums-2026-feature-cover,.album-2026-cover-art,.album-2026-more-cover,
  .artist-photo,.artist-feature-media,.artist-profile-media,.artist-catalog-photo,.artists-2026-cover,
  .mf-latest-song__cover,.mf-music-row__cover,.mf-new-song-media,.mf-playlist-cover,.public-playlist-2026-cover,
  .mf-member-media,.profile-media,.mf-home-concerts__featured-media,.mf-home-concerts__row-media,
  .song-2026-cover,.song-2026-side-artist-image,.song-2026-artist-mini-image,.mika-rec-cover
){
  overflow:hidden;
  isolation:isolate;
}

body:not(.mf-admin) :is(
  .mf-lead-image,.mini-media,.section-lead,.section-side,
  .news-card-media,.news-row-media,.news-top-card-media,.news-editorial-media,.news-lead-media,
  .mf-news-card-image,.mf-news-lead-image,.mf-article-related-image,.mf-article-hero-media,
  .album-cover,.albums-2026-cover,.albums-2026-feature-cover,.album-2026-cover-art,.album-2026-more-cover,
  .artist-photo,.artist-feature-media,.artist-profile-media,.artist-catalog-photo,.artists-2026-cover,
  .mf-latest-song__cover,.mf-music-row__cover,.mf-new-song-media,.mf-playlist-cover,.public-playlist-2026-cover,
  .mf-member-media,.profile-media,.mf-home-concerts__featured-media,.mf-home-concerts__row-media,
  .song-2026-cover,.song-2026-side-artist-image,.song-2026-artist-mini-image,.mika-rec-cover
) img{
  transform:scale(1) translateZ(0)!important;
  transform-origin:50% 46%;
  transition:
    transform .48s var(--mf-interaction-ease),
    filter .32s ease,
    opacity .32s ease!important;
  backface-visibility:hidden;
}

@media (hover:hover) and (pointer:fine){
  /* Standard media cards: barely perceptible zoom. */
  body:not(.mf-admin) :is(
    .news-top-card,.news-directory-card,.mf-article-related-card,.mf-latest-song,
    .album-card,.playlist-grid>a,.cards-4>a,.artist-card,.editorial-artist,.artist-profile-card,
    .mf-dd-card,.profile-feature-card,.profile-library-card,.albums-2026-card,.album-2026-more-item,
    .song-2026-discover-card,.mika-discovery-card
  ):hover :is(
    .news-card-media,.news-top-card-media,.mf-article-related-image,.mf-latest-song__cover,
    .album-cover,.albums-2026-cover,.album-2026-cover-art,.album-2026-more-cover,
    .artist-photo,.artist-profile-media,.artist-catalog-photo,.artists-2026-cover,
    .mf-playlist-cover,.public-playlist-2026-cover,.profile-media,.song-2026-cover,.mika-rec-cover
  ) img{
    transform:scale(1.018) translateZ(0)!important;
    filter:saturate(1.025) contrast(1.012)!important;
  }

  /* Large editorial images: even calmer. */
  body:not(.mf-admin) :is(.mf-lead-image,.section-lead,.news-lead-media,.mf-news-lead-image,.mf-article-hero-media,.artist-feature-media):hover img,
  body:not(.mf-admin) :is(.mf-hero-board,.news-top,.artist-feature):hover :is(.mf-lead-image,.news-lead-media,.mf-news-lead-image,.artist-feature-media) img{
    transform:scale(1.010) translateZ(0)!important;
    filter:saturate(1.015) contrast(1.01)!important;
  }

  /* Compact rows: no zoom. A small tone change is enough. */
  body:not(.mf-admin) :is(.mf-mini-card,.news-row,.mf-music-row,.mf-newsroom__stream-item,.mf-home-concerts__row):hover img{
    transform:none!important;
    filter:saturate(1.01) contrast(1.008)!important;
  }

  /* Text cue is intentionally restrained: no sliding, no underline animation. */
  body:not(.mf-admin) :is(
    .news-top-card,.news-directory-card,.mf-article-related-card,.album-card,.playlist-grid>a,.cards-4>a,.artist-card,
    .editorial-artist,.artist-profile-card,.mf-dd-card,.profile-feature-card,.profile-library-card,.albums-2026-card
  ):hover :is(h2,h3,.title,.card-title,a[rel="bookmark"]){
    color:#0b5fad;
  }
}

/* 3) Touch devices do not need hover simulation. */
@media (hover:none), (pointer:coarse){
  body:not(.mf-admin) :is(
    .mf-mini-card,.mf-hd-card,.news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
    .mf-latest-song,.album-card,.playlist-grid>a,.cards-4>a,.artist-card,.editorial-artist,.artist-profile-card,
    .mf-community-post,.mf-dd-card,.su-mission,.su-achievement,.su-feed-card,.su-podium-card,.su-board-row,
    .mf-member-post,.profile-feature-card,.profile-library-card,.notification-card,.help-category-card
  ){
    transform:none!important;
  }
}

/* 4) Accessibility: no motion, but preserve the visual hierarchy. */
@media (prefers-reduced-motion:reduce){
  body:not(.mf-admin) :is(
    .mf-lead-image,.mini-media,.section-lead,.section-side,.news-card-media,.news-row-media,.news-top-card-media,
    .news-editorial-media,.news-lead-media,.mf-news-card-image,.mf-news-lead-image,.mf-article-related-image,
    .mf-article-hero-media,.album-cover,.albums-2026-cover,.albums-2026-feature-cover,.album-2026-cover-art,
    .album-2026-more-cover,.artist-photo,.artist-feature-media,.artist-profile-media,.artist-catalog-photo,
    .artists-2026-cover,.mf-latest-song__cover,.mf-music-row__cover,.mf-new-song-media,.mf-playlist-cover,
    .public-playlist-2026-cover,.mf-member-media,.profile-media,.mf-home-concerts__featured-media,
    .mf-home-concerts__row-media,.song-2026-cover,.song-2026-side-artist-image,.song-2026-artist-mini-image,.mika-rec-cover
  ) img{
    transition:none!important;
    transform:none!important;
  }
}

/* 5) Page-specific card systems that previously used their own lift language. */
@media (hover:hover) and (pointer:fine){
  /* Home editorial / dedications */
  body.home-page :is(.mf-hd-card,.mf-section-lead>a){
    transform:none!important;
    translate:none!important;
    transition:box-shadow .28s ease,border-color .28s ease,background-color .28s ease!important;
  }
  body.home-page :is(.mf-hd-card,.mf-section-lead>a):hover{
    transform:none!important;
    translate:none!important;
    border-color:var(--mf-interaction-border-hover)!important;
    box-shadow:var(--mf-interaction-shadow-hover)!important;
  }
  body.home-page .mf-section-lead>a:hover img{
    transform:scale(1.010) translateZ(0)!important;
    filter:saturate(1.015) contrast(1.01)!important;
  }
  body.home-page .mf-hot-grid a:hover img{
    transform:scale(1.012) translateZ(0)!important;
  }

  /* Artists directory */
  body:not(.mf-admin) .artists-2026-card{
    transform:none!important;
    transition:box-shadow .28s ease,border-color .28s ease,background-color .28s ease!important;
  }
  body:not(.mf-admin) .artists-2026-card:hover{
    transform:none!important;
    border-color:var(--mf-interaction-border-hover)!important;
    box-shadow:var(--mf-interaction-shadow-hover)!important;
  }
  body:not(.mf-admin) .artists-2026-card:hover .artists-2026-cover img{
    transform:scale(1.018) translateZ(0)!important;
    filter:saturate(1.025) contrast(1.012)!important;
  }
  body:not(.mf-admin) .artists-2026-card:hover em{transform:none!important}

  /* Playlists v5 — the artwork reacts; the card does not leave its footprint. */
  body:not(.mf-admin) .mf-playlists-v5 :is(.mf-pl5-mix-card,.mf-pl5-official-card,.mf-pl5-library-card,.mf-pl5-community-card){
    transform:none!important;
    transition:box-shadow .28s ease,border-color .28s ease,background-color .28s ease!important;
  }
  body:not(.mf-admin) .mf-playlists-v5 :is(.mf-pl5-mix-card,.mf-pl5-official-card,.mf-pl5-library-card,.mf-pl5-community-card):hover{
    transform:none!important;
    border-color:var(--mf-interaction-border-hover)!important;
    box-shadow:var(--mf-interaction-shadow-hover)!important;
  }
  body:not(.mf-admin) .mf-playlists-v5 .mf-pl5-song-card:hover .mf-pl5-song-art{
    transform:none!important;
    border-color:var(--mf-interaction-border-hover)!important;
    box-shadow:0 2px 5px rgba(4,19,39,.03),0 10px 22px rgba(4,19,39,.06)!important;
  }
  body:not(.mf-admin) .mf-playlists-v5 :is(.mf-pl5-mix-card:hover .mf-pl5-mosaic img,.mf-pl5-song-card:hover .mf-pl5-song-art img,.mf-pl5-official-card:hover img){
    transform:scale(1.018) translateZ(0)!important;
    filter:saturate(1.025) contrast(1.012)!important;
  }
  body:not(.mf-admin) .mf-playlists-v5 .mf-pl5-mix-card:hover .mf-pl5-play{transform:scale(1.035)!important}

  /* Personal music / new music: retain feedback, remove the exaggerated stock effect. */
  body:not(.mf-admin) .mf-personal-mix-card-v3:hover img,
  body:not(.mf-admin) .mf-new-song:hover .mf-new-song-media img{
    transform:scale(1.018) translateZ(0)!important;
    filter:saturate(1.02) contrast(1.01) brightness(.98)!important;
  }

  /* Home hero already has slide motion; hover should not add a second dramatic movement. */
  body.home-page .mf-home-hero-main:hover .mf-home-hero-image.is-active{
    transform:scale(1.015) translateZ(0)!important;
  }
}

/* ===== header.css ===== */
/* MUSIC FM — canonical header popover contract / 2026-10-10 */
/* MUSIC FM — header account + notifications: one exact desktop component.
   Canonicalized here so the account and notification menus cannot drift apart. */
@media (min-width:981px){
  html body:not(.mf-admin){
    --mf-header-popover-width:420px;
    --mf-header-popover-height:min(560px,calc(100dvh - 94px));
    --mf-header-popover-gap:5px;
    --mf-header-popover-radius:4px;
    --mf-header-popover-border:#d9e1e9;
    --mf-header-popover-shadow:0 20px 54px rgba(3,19,39,.18);
  }

  html body:not(.mf-admin) .v4-actions>.mf-header-notifications,
  html body:not(.mf-admin) .v4-actions>.mf-header-account{
    position:relative!important;
    overflow:visible!important;
    transform:none!important;
  }

  /* The two panels use the exact same geometry and are anchored to their own trigger. */
  html body:not(.mf-admin) .mf-header-notifications>.mf-notification-dropdown[data-notifications-panel],
  html body:not(.mf-admin) .mf-header-account>.mf-header-account__menu{
    position:absolute!important;
    inset:auto!important;
    top:calc(100% + var(--mf-header-popover-gap))!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    width:min(var(--mf-header-popover-width),calc(100vw - 24px))!important;
    min-width:min(360px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    height:var(--mf-header-popover-height)!important;
    min-height:0!important;
    max-height:var(--mf-header-popover-height)!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    background:#fff!important;
    color:#102238!important;
    border:1px solid var(--mf-header-popover-border)!important;
    border-radius:var(--mf-header-popover-radius)!important;
    box-shadow:var(--mf-header-popover-shadow)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    z-index:1700!important;
    transform-origin:top left!important;
  }

  /* Ignore legacy JS positioning vars on desktop; both menus now live next to their button. */
  html body:not(.mf-admin) .mf-header-notifications>.mf-notification-dropdown[data-notifications-panel]{
    --mf-notification-local-top:0px!important;
    --mf-notification-local-left:0px!important;
    --mf-notification-height:var(--mf-header-popover-height)!important;
  }

  /* Identical top area. */
  html body:not(.mf-admin) .mf-notification-dropdown__head,
  html body:not(.mf-admin) .mf-header-account__identity{
    flex:0 0 86px!important;
    min-height:86px!important;
    height:86px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    margin:0!important;
    padding:16px 18px!important;
    background:#fff!important;
    border:0!important;
    border-bottom:1px solid #e8edf2!important;
  }
  html body:not(.mf-admin) .mf-notification-dropdown__head>div,
  html body:not(.mf-admin) .mf-header-account__identity-copy{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  html body:not(.mf-admin) .mf-notification-dropdown__head h2,
  html body:not(.mf-admin) .mf-header-account__identity-copy h2{
    margin:0!important;
    color:#0b213a!important;
    font:800 21px/1.3 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
  }
  html body:not(.mf-admin) .mf-notification-dropdown__head p,
  html body:not(.mf-admin) .mf-header-account__identity-copy p{
    display:block!important;
    margin:4px 0 0!important;
    color:#778597!important;
    font:400 12px/1.5 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body:not(.mf-admin) .mf-notification-close,
  html body:not(.mf-admin) .mf-header-account__close{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #e0e6ed!important;
    border-radius:4px!important;
    background:#fff!important;
    color:#62748b!important;
    box-shadow:none!important;
  }
  html body:not(.mf-admin) :is(.mf-notification-close,.mf-header-account__close):hover{
    background:#f4f7fb!important;
    color:#0b213a!important;
  }

  /* Identical scrollable body height, with invisible scrollbar. */
  html body:not(.mf-admin) .mf-notification-dropdown__list,
  html body:not(.mf-admin) .mf-notification-dropdown__empty,
  html body:not(.mf-admin) .mf-header-account__links{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    background:#fff!important;
  }
  html body:not(.mf-admin) :is(.mf-notification-dropdown__list,.mf-notification-dropdown__empty,.mf-header-account__links)::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  /* Tools stay part of the notification body without changing panel height. */
  html body:not(.mf-admin) .mf-notification-dropdown__tools,
  html body:not(.mf-admin) .mf-notification-status{
    flex:0 0 auto!important;
  }

  /* Identical footer strip. */
  html body:not(.mf-admin) .mf-notification-dropdown__foot,
  html body:not(.mf-admin) .mf-header-account__foot{
    flex:0 0 54px!important;
    min-height:54px!important;
    height:54px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0!important;
    padding:10px 18px!important;
    border:0!important;
    border-top:1px solid #e8edf2!important;
    background:#fafbfd!important;
  }
  html body:not(.mf-admin) .mf-header-account__foot a,
  html body:not(.mf-admin) .mf-notification-dropdown__foot a{
    min-height:34px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#63768b!important;
    text-decoration:none!important;
    font:700 12px/1 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
  }
  html body:not(.mf-admin) .mf-header-account__foot a:first-child,
  html body:not(.mf-admin) .mf-notification-dropdown__foot a:first-child{
    color:#1767b5!important;
  }
  html body:not(.mf-admin) .mf-header-account__foot .mf-header-account__logout{
    color:#a8394b!important;
  }
  html body:not(.mf-admin) .mf-header-account__foot .mf-icon,
  html body:not(.mf-admin) .mf-notification-dropdown__foot .mf-icon{
    width:15px!important;
    height:15px!important;
  }

  /* Account rows follow the exact rhythm of notification rows. */
  html body:not(.mf-admin) .mf-header-account__links>a{
    min-height:82px!important;
    box-sizing:border-box!important;
    padding:14px 18px!important;
  }
}

/* MUSIC FM — signed-in presence indicator
   A calm, soft green pulse: visible enough to communicate online status,
   but intentionally slow and quiet so it never feels like an alert. */
body:not(.mf-admin) .site-header.v4-site-header .mf-header-account__online{
  background:#45f39b!important;
  border-color:#041327!important;
  box-shadow:
    0 0 0 2px rgba(69,243,155,.10),
    0 0 7px rgba(69,243,155,.56),
    0 0 14px rgba(69,243,155,.18)!important;
  transform-origin:center!important;
  will-change:opacity,transform,box-shadow!important;
  animation:mf-header-online-blink 3.8s ease-in-out infinite!important;
}

@keyframes mf-header-online-blink{
  0%, 100%{
    opacity:.92;
    transform:scale(1);
    box-shadow:
      0 0 0 2px rgba(69,243,155,.09),
      0 0 6px rgba(69,243,155,.48),
      0 0 12px rgba(69,243,155,.15);
  }
  50%{
    opacity:.68;
    transform:scale(.97);
    box-shadow:
      0 0 0 2px rgba(69,243,155,.06),
      0 0 3px rgba(69,243,155,.30),
      0 0 8px rgba(69,243,155,.09);
  }
}

@media (prefers-reduced-motion:reduce){
  body:not(.mf-admin) .site-header.v4-site-header .mf-header-account__online{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}
/* Round 7 — semantic global-search submit, visually integrated with the field. */
.mf-search-premium-drop__field{grid-template-columns:34px minmax(0,1fr) auto!important}
.mf-search-premium-drop__submit{
  appearance:none!important;border:0!important;border-radius:999px!important;
  min-height:38px!important;padding:0 16px!important;background:#102541!important;
  color:#fff!important;font:700 12px/1 var(--mf-font,"IBM Plex Sans Hebrew",Arial,sans-serif)!important;
  cursor:pointer!important;box-shadow:none!important;white-space:nowrap!important
}
.mf-search-premium-drop__submit:hover{background:#17375f!important}
.mf-search-premium-drop__submit:focus-visible{outline:3px solid rgba(18,112,205,.22)!important;outline-offset:2px!important}
@media(max-width:720px){
  .mf-search-premium-drop__field{grid-template-columns:28px minmax(0,1fr) auto!important}
  .mf-search-premium-drop__submit{min-height:34px!important;padding-inline:12px!important;font-size:11px!important}
}

/* 2026 footer: keep Hebrew rights on the right, EST. 2012 centred and English rights at far left. */
.mf-footer-pro__bottom-left{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.mf-footer-pro__copyright-en{margin:0!important;text-align:left;direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-size:10px;font-weight:670;color:#8398ac;line-height:1.6}
.mf-footer-pro__bottom-left .mf-footer-pro__credit-logo{flex-shrink:0}
@media(max-width:760px){
  .mf-footer-pro__bottom-inner{grid-template-columns:1fr 1fr!important;gap:8px 10px!important}
  .mf-footer-pro__bottom-inner>.mf-footer-pro__copyright{grid-row:1;grid-column:1/-1;text-align:right}
  .mf-footer-pro__bottom-inner>.mf-footer-pro__signature{grid-row:2;grid-column:1/-1;text-align:center!important;white-space:normal}
  .mf-footer-pro__bottom-inner>.mf-footer-pro__bottom-left{grid-row:3;grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap;gap:10px;margin-top:3px}
  .mf-footer-pro__copyright-en{font-size:9px;white-space:normal}
}