/* * MusicInsight Panel — light theme compatibility layer (dev52) * Waveme's dark mode is represented by the `dark` class on . * The default/no-dark state is the light theme, so all rules are deliberately * scoped to html:not(.dark) and to Insight Panel component roots only. * Play Block loops are intentionally left to Play Block's own theme CSS. */ /* ========================================================= Shared light palette ========================================================= */ html:not(.dark) .mi-user-hub-page { --mi-hub-surface:rgba(255,255,255,.68); --mi-hub-surface-strong:#fff; } html:not(.dark) .mi-artists, html:not(.dark) .mi-artist-profile { --mi-artists-bg:#f5f6f8; --mi-artists-surface:#fff; --mi-artists-surface-strong:#f7f8fa; --mi-artists-text:#1c1f25; --mi-artists-muted:#737982; --mi-artists-border:rgba(24,29,38,.11); color:var(--mi-artists-text); } /* ========================================================= Private User Hub — page, stage, navigation ========================================================= */ html:not(.dark) .mi-user-hub-page.is-owner { background: radial-gradient(900px 520px at 74% 0%,rgba(79,105,206,.095),transparent 64%), radial-gradient(720px 480px at 18% 18%,rgba(232,95,5,.055),transparent 66%), linear-gradient(180deg,#f7f8fb 0%,#f3f4f7 48%,#eef0f4 100%) !important; } html:not(.dark) .mi-user-hub-page.is-owner:before { background:linear-gradient(180deg,rgba(91,110,208,.045),transparent 78%) !important; } html:not(.dark) .mi-stage-head:after { background:linear-gradient(90deg,transparent,rgba(25,31,42,.12),transparent) !important; } html:not(.dark) .mi-stage-head-ambient .orb-a { background:rgba(87,105,214,.12) !important; } html:not(.dark) .mi-stage-head-ambient .orb-b { background:rgba(232,95,5,.07) !important; } html:not(.dark) .mi-stage-head-avatar { border-color:rgba(25,31,42,.13) !important; box-shadow:0 24px 55px rgba(48,55,72,.15) !important; } html:not(.dark) .mi-stage-head-copy h1, html:not(.dark) .mi-stage-head-name h1 { color:#171a20 !important; } html:not(.dark) .mi-stage-head-actions a { border-color:rgba(25,31,42,.11) !important; background:rgba(255,255,255,.62) !important; color:#666c75 !important; box-shadow:0 6px 18px rgba(42,49,63,.035); } html:not(.dark) .mi-stage-head-actions a:hover { border-color:rgba(232,95,5,.30) !important; background:rgba(232,95,5,.065) !important; color:#1a1d22 !important; } html:not(.dark) .mi-stage-head-meta span { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.62) !important; } html:not(.dark) .mi-stage-head-meta span.is-premium { border-color:rgba(48,151,87,.22) !important; background:rgba(48,151,87,.07) !important; color:#277844 !important; } html:not(.dark) .mi-stage-head-badge .mi-level-sigil.is-small { background:rgba(255,255,255,.94) !important; box-shadow:0 8px 24px rgba(43,49,62,.14) !important; } html:not(.dark) .mi-user-hub-page.is-owner .mi-user-hub-nav-link:hover { color:#1b1e24 !important; background:rgba(30,36,47,.045) !important; } html:not(.dark) .mi-user-hub-page.is-owner .mi-user-hub-nav-link.is-active { color:#1b1e24 !important; border-color:rgba(232,95,5,.20) !important; background:rgba(232,95,5,.07) !important; } /* Home identity + top/recent browser. */ html:not(.dark) .mi-home-overview-column--identity .mi-identity-compact, html:not(.dark) .mi-identity-compact { border-color:color-mix(in srgb,var(--mi-level-tone) 15%,rgba(26,31,39,.10)) !important; background: radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--mi-level-tone) 9%,transparent),transparent 36%), linear-gradient(180deg,rgba(255,255,255,.90),rgba(247,248,251,.92)) !important; box-shadow:0 14px 38px rgba(42,49,63,.055),inset 0 1px 0 rgba(255,255,255,.9) !important; } html:not(.dark) .mi-identity-compact-copy h2{ color:#1b1e24 !important; } html:not(.dark) .mi-identity-compact-copy p, html:not(.dark) .mi-identity-progress-labels{ color:#707681 !important; } html:not(.dark) .mi-identity-progress-track { background:rgba(25,31,42,.09) !important; } html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity { border-color:rgba(25,31,42,.09) !important; background:rgba(255,255,255,.58) !important; } html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity-head strong, html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity-stats strong { color:#20242a !important; } html:not(.dark) .mi-track-browser-card { border-color:rgba(25,31,42,.10) !important; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,248,250,.92)) !important; box-shadow:0 14px 38px rgba(42,49,63,.05); } html:not(.dark) .mi-track-browser-tabs { border-color:rgba(25,31,42,.09) !important; background:rgba(28,33,43,.035) !important; } html:not(.dark) .mi-track-browser-tab { color:#7a808a !important; } html:not(.dark) .mi-track-browser-tab.is-active { color:#22252b !important; background:rgba(232,95,5,.085) !important; box-shadow:inset 0 0 0 1px rgba(232,95,5,.22) !important; } html:not(.dark) .mi-track-browser-item { border-color:rgba(25,31,42,.085) !important; background:rgba(255,255,255,.72) !important; } html:not(.dark) .mi-track-browser-item:hover { background:#fff !important; } html:not(.dark) .mi-track-browser-title { color:#202329 !important; } html:not(.dark) .mi-track-browser-copy small, html:not(.dark) .mi-track-browser-rank, html:not(.dark) .mi-track-browser-open { color:#767c86 !important; } html:not(.dark) .mi-track-browser-open { background:rgba(25,31,42,.025) !important; } /* Followed artists and common User Hub headings. */ html:not(.dark) .mi-personal-section-head h2, html:not(.dark) .mi-personal-section-head h3, html:not(.dark) .mi-personal-section-head--compact h2, html:not(.dark) .mi-personal-section-head--compact h3, html:not(.dark) .mi-user-hub-section-heading h2 { color:#1c1f25 !important; } html:not(.dark) .mi-user-artist-grid--scene.is-round .mi-user-artist-card, html:not(.dark) .mi-user-artist-grid--scene.is-preview.is-round .mi-user-artist-card.is-compact { border-color:rgba(25,31,42,.08) !important; background:rgba(255,255,255,.42) !important; } html:not(.dark) .mi-user-artist-grid--scene.is-round .mi-user-artist-avatar { border-color:rgba(25,31,42,.11) !important; } html:not(.dark) .mi-user-artist-grid--scene.is-round .mi-user-artist-copy strong, html:not(.dark) .mi-user-artist-grid--scene.is-preview.is-round .mi-user-artist-copy strong { color:#202329 !important; } html:not(.dark) .mi-user-artist-grid--scene .mi-artist-follow-button { background:rgba(255,255,255,.55) !important; } /* Collection pages: Play Block owns the cards; only the surrounding shell is themed here. */ html:not(.dark) .mi-user-hub-section-heading--top, html:not(.dark) .mi-user-native-archive, html:not(.dark) .mi-user-collection { color:#1c1f25; } html:not(.dark) .mi-user-hub-empty, html:not(.dark) .mi-user-profile-panel, html:not(.dark) .mi-user-profile-avatar-block { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.70) !important; } html:not(.dark) .mi-user-profile-form input, html:not(.dark) .mi-user-profile-form textarea { border-color:rgba(25,31,42,.11) !important; background:#fff !important; color:#22262d !important; } /* Full Listening Identity. */ html:not(.dark) .mi-listener-identity { border-top-color:color-mix(in srgb,var(--mi-level-tone) 18%,rgba(25,31,42,.10)) !important; border-bottom-color:color-mix(in srgb,var(--mi-level-tone) 12%,rgba(25,31,42,.10)) !important; background: radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--mi-level-tone) 9%,transparent),transparent 34%), linear-gradient(90deg,color-mix(in srgb,var(--mi-level-tone) 2.5%,#fff),rgba(255,255,255,.92) 54%) !important; } html:not(.dark) .mi-listener-identity-copy, html:not(.dark) .mi-listener-identity-copy h2, html:not(.dark) .mi-listener-prestige>span, html:not(.dark) .mi-listener-xp-line strong, html:not(.dark) .mi-listener-xp-line span, html:not(.dark) .mi-listener-status-head strong, html:not(.dark) .mi-listener-status-stats b { color:#1f232a !important; } html:not(.dark) .mi-listener-xp-line small, html:not(.dark) .mi-listener-progress-levels, html:not(.dark) .mi-listener-progress-note, html:not(.dark) .mi-listener-status-head small, html:not(.dark) .mi-listener-status-stats{ color:#747a84 !important; } html:not(.dark) .mi-listener-status { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.68) !important; } html:not(.dark) .mi-listening-metrics, html:not(.dark) .mi-listening-panel { border-color:rgba(25,31,42,.10) !important; } html:not(.dark) .mi-listening-metrics strong, html:not(.dark) .mi-listening-panel h3 { color:#20242a !important; } html:not(.dark) .mi-listening-metrics span, html:not(.dark) .mi-listening-metrics small, html:not(.dark) .mi-listening-panel>header p, html:not(.dark) .mi-listening-timeline-scale, html:not(.dark) .mi-level-journey-step { color:#747a84 !important; } html:not(.dark) .mi-level-journey-step.is-passed, html:not(.dark) .mi-level-journey-step.is-current { color:#20242a !important; } /* Subscription sub-page. */ html:not(.dark) .mi-subscription-page-head h2, html:not(.dark) .mi-subscription-primary>strong, html:not(.dark) .mi-subscription-facts strong { color:#20242a !important; } html:not(.dark) .mi-subscription-page-head p, html:not(.dark) .mi-subscription-primary>span, html:not(.dark) .mi-subscription-primary>p, html:not(.dark) .mi-subscription-facts span, html:not(.dark) .mi-subscription-note { color:#747a84 !important; } html:not(.dark) .mi-subscription-overview { border-color:rgba(25,31,42,.10) !important; background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(247,248,250,.88)) !important; } html:not(.dark) .mi-subscription-overview.is-active { background: radial-gradient(circle at 88% 0%,rgba(70,174,105,.095),transparent 32%), linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,248,.92)) !important; } html:not(.dark) .mi-subscription-facts, html:not(.dark) .mi-subscription-note { border-color:rgba(25,31,42,.09) !important; background:rgba(255,255,255,.60) !important; } html:not(.dark) .mi-subscription-more { color:#23262c !important; } html:not(.dark) .mi-subscription-buy { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.60) !important; color:#555b64 !important; } /* ========================================================= Public user profile — preserve level atmosphere in light mode ========================================================= */ html:not(.dark) .mi-public-level-shell { background: radial-gradient(1200px 760px at 83% -8%,color-mix(in srgb,var(--mi-public-tone) 13%,transparent),transparent 70%), radial-gradient(900px 650px at 4% 43%,color-mix(in srgb,var(--mi-public-tone) 4%,transparent),transparent 74%), linear-gradient(180deg,#fafbfc 0%,#f4f5f7 58%,#eef0f3 100%) !important; color:#1d2026 !important; } html:not(.dark) .mi-public-profile-atmosphere .orb-a, html:not(.dark) .mi-public-profile-atmosphere .orb-b { opacity:.38 !important; } html:not(.dark) .mi-public-profile-identity-v3 h1 { color:#171a20 !important; } html:not(.dark) .mi-public-profile-facts-v3 b { color:#22262c !important; } html:not(.dark) .mi-public-profile-edit-v3 { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.66) !important; color:#626873 !important; } html:not(.dark) .mi-public-profile-edit-v3:hover { color:#20242a !important; } html:not(.dark) .mi-public-profile-content-flow>*+* { border-top-color:rgba(25,31,42,.09) !important; } html:not(.dark) .mi-public-profile-open-head h2 { color:#1c1f25 !important; } html:not(.dark) .mi-public-profile-taste-v3>.mi-public-profile-open-section+section { border-color:rgba(25,31,42,.09) !important; } html:not(.dark) .mi-public-artist-item-v3, html:not(.dark) .mi-public-artist-item-v3 strong { color:#22262c !important; } html:not(.dark) .mi-public-artist-image-v3 { background:linear-gradient(135deg,color-mix(in srgb,var(--mi-public-tone) 28%,#fff),#fff) !important; box-shadow:0 14px 30px rgba(45,52,66,.12) !important; } html:not(.dark) .mi-public-artist-image-v3>img, html:not(.dark) .mi-public-artist-image-v3>.mi-public-artist-placeholder { background:#f1f3f6 !important;color:#333842 !important; } /* ========================================================= Artist directory / rankings — light surfaces ========================================================= */ html:not(.dark) .mi-artists-weekly-discovery { border-color:rgba(25,31,42,.10) !important; background: radial-gradient(circle at 100% 0,rgba(232,95,5,.10),transparent 34%), linear-gradient(145deg,#fff,#f5f6f8) !important; box-shadow:0 22px 60px rgba(40,47,60,.08) !important; } html:not(.dark) .mi-artists-weekly-discovery::before { background-image: linear-gradient(rgba(25,31,42,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(25,31,42,.025) 1px,transparent 1px) !important; } html:not(.dark) .mi-artists-weekly-heading h1 { color:#1b1e24 !important; } html:not(.dark) .mi-artists-weekly-heading p { color:#727883 !important; } html:not(.dark) .mi-artists-weekly-heading>a { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.66) !important; color:#5e646e !important; } html:not(.dark) .mi-weekly-artist-tabs { border-bottom-color:rgba(25,31,42,.09) !important; } html:not(.dark) .mi-weekly-artist-tab { border-color:rgba(25,31,42,.09) !important; background:rgba(255,255,255,.66) !important; color:#6d737d !important; } html:not(.dark) .mi-weekly-artist-tab:hover, html:not(.dark) .mi-weekly-artist-tab:focus-visible { color:#1f2329 !important; } html:not(.dark) .mi-weekly-artist-tab.is-active { color:#1f2329 !important; background:linear-gradient(135deg,rgba(232,95,5,.10),rgba(255,255,255,.88)) !important; } html:not(.dark) .mi-weekly-artist-tab-copy small { color:#7a808a !important; } html:not(.dark) .mi-weekly-artist-summary { border-color:rgba(25,31,42,.09) !important; background:rgba(255,255,255,.68) !important; } html:not(.dark) .mi-weekly-artist-summary h2 { color:#20242a !important; } html:not(.dark) .mi-weekly-artist-summary p { color:#737983 !important; } html:not(.dark) .mi-weekly-artist-summary a { color:#343941 !important; } html:not(.dark) .mi-weekly-artist-tracks .mi-artist-top-track { border-color:rgba(25,31,42,.085) !important; background:rgba(255,255,255,.72) !important; } html:not(.dark) .mi-weekly-artist-tracks .mi-artist-track-card-body h3, html:not(.dark) .mi-weekly-artist-tracks .mi-artist-track-card-body h3 a { color:#20242a !important; } html:not(.dark) .mi-weekly-artist-tracks .mi-artist-track-subtitle { color:#7a808a !important; } html:not(.dark) .mi-artists-explorer, html:not(.dark) body.admin-bar .mi-artists-explorer { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.78) !important; box-shadow:0 14px 38px rgba(42,49,63,.05); } html:not(.dark) .mi-artists-search { border-color:rgba(25,31,42,.10) !important; background:#fff !important; } html:not(.dark) .mi-artists-search input { color:#24282f !important; } html:not(.dark) .mi-artists-search input::placeholder { color:#9a9fa7 !important; } html:not(.dark) .mi-artists-alphabet a { color:#6f7580 !important; } html:not(.dark) .mi-artists-alphabet a:hover, html:not(.dark) .mi-artists-alphabet a.is-active { color:#fff !important; } html:not(.dark) .mi-artists-section-heading h1, html:not(.dark) .mi-artists-section-heading h2, html:not(.dark) .mi-artists-directory-heading h2 { color:#1d2026 !important; } html:not(.dark) .mi-artists-section-heading p, html:not(.dark) .mi-artists-directory-heading p { color:#747a84 !important; } html:not(.dark) .mi-artist-directory-card{ border-color:rgba(25,31,42,.09) !important; background:#fff !important; box-shadow:0 10px 30px rgba(42,49,63,.045); } html:not(.dark) .mi-artist-directory-name, html:not(.dark) .mi-artist-directory-name a{ color:#20242a !important; } /* Rankings already used variable-driven light cards; this block hardens the few late dark overrides without changing the ranking layout. */ html:not(.dark) .mi-artist-rankings-full .mi-artist-feature-card, html:not(.dark) .mi-artist-rankings-full .mi-artist-ranking-row { border-color:rgba(25,31,42,.10) !important; background:#fff !important; color:#20242a !important; } html:not(.dark) .mi-artist-rankings-full .mi-artist-feature-content h2, html:not(.dark) .mi-artist-rankings-full .mi-artist-feature-content h2 a, html:not(.dark) .mi-artist-rankings-full .mi-artist-row-content h3, html:not(.dark) .mi-artist-rankings-full .mi-artist-row-content h3 a, html:not(.dark) .mi-artist-rankings-full .mi-artist-row-plays strong { color:#20242a !important; } html:not(.dark) .mi-artist-rankings-full .mi-artist-feature-content>p, html:not(.dark) .mi-artist-rankings-full .mi-artist-row-content p { color:#747a84 !important; } /* ========================================================= Artist profile — editorial light mode ========================================================= */ html:not(.dark) .mi-artist-profile-hero { background:#f6f7f9 !important; border:1px solid rgba(25,31,42,.09) !important; box-shadow:0 20px 55px rgba(42,49,63,.055); } html:not(.dark) .mi-artist-profile-atmosphere { opacity:.22 !important;filter:blur(34px) saturate(.92) !important; } html:not(.dark) .mi-artist-profile-atmosphere.is-placeholder { background: radial-gradient(circle at 18% 18%,hsla(var(--mi-artist-hue),75%,58%,.24),transparent 30%), linear-gradient(135deg,hsl(var(--mi-artist-hue),30%,88%),#f4f5f7 72%) !important; } html:not(.dark) .mi-artist-profile-atmosphere::after { background:linear-gradient(90deg,rgba(246,247,249,.98) 2%,rgba(246,247,249,.78) 48%,rgba(246,247,249,.32) 100%),linear-gradient(0deg,#f6f7f9 0%,transparent 48%) !important; } html:not(.dark) .mi-artist-profile-hero-shade { background:linear-gradient(0deg,rgba(246,247,249,.42),transparent 58%) !important; } html:not(.dark) .mi-artist-profile-content h1 { color:#171a20 !important; } html:not(.dark) .mi-artist-profile-back { color:#686e78 !important; } html:not(.dark) .mi-artist-profile-meta { color:#6f7580 !important; } html:not(.dark) .mi-artist-profile-actions>a { border-color:rgba(25,31,42,.12) !important; background:rgba(255,255,255,.72) !important; color:#30353d !important; } html:not(.dark) .mi-artist-profile-nav { border-color:rgba(25,31,42,.10) !important; background:#fff !important; box-shadow:0 10px 30px rgba(42,49,63,.04); } html:not(.dark) .mi-artist-profile-nav a { color:#686f79 !important; } html:not(.dark) .mi-artist-profile-nav a:hover { color:#20242a !important; background:rgba(25,31,42,.045) !important; } html:not(.dark) .mi-artist-about, html:not(.dark) .mi-artist-profile-section { color:#20242a !important; } html:not(.dark) .mi-artist-about { border-color:rgba(25,31,42,.10) !important; background:linear-gradient(135deg,color-mix(in srgb,var(--mi-artists-accent) 5%,#fff),#fff 45%) !important; } html:not(.dark) .mi-artist-profile-bio, html:not(.dark) .mi-artist-profile-section>.mi-artists-section-heading p { color:#6f7580 !important; } html:not(.dark) .mi-artist-facts>div { border-color:rgba(25,31,42,.09) !important; background:#fff !important; } html:not(.dark) .mi-artist-top-track { border-color:rgba(25,31,42,.085) !important; background:rgba(255,255,255,.72) !important; } html:not(.dark) .mi-artist-top-track:hover { background:#fff !important; } html:not(.dark) .mi-artist-track-card-body h3, html:not(.dark) .mi-artist-track-card-body h3 a { color:#20242a !important; } html:not(.dark) .mi-artist-track-subtitle, html:not(.dark) .mi-artist-track-card-meta { color:#747a84 !important; } html:not(.dark) .mi-artist-track-open { border-color:rgba(25,31,42,.10) !important; background:rgba(25,31,42,.03) !important; color:#69707a !important; } html:not(.dark) .mi-artist-discovery-section { border-color:rgba(25,31,42,.09) !important; background:rgba(255,255,255,.54) !important; } html:not(.dark) .mi-artist-discovery-card a { color:#20242a !important; } html:not(.dark) .mi-artist-discovery-card small { color:#747a84 !important; } /* Mobile light mode keeps the same contrast model with lower visual weight. */ @media (max-width:782px){ html:not(.dark) .mi-user-hub-page.is-owner { background: radial-gradient(620px 420px at 66% -6%,rgba(79,105,206,.09),transparent 68%), linear-gradient(180deg,#f8f9fb 0%,#f2f4f7 62%,#eef0f3 100%) !important; } html:not(.dark) .mi-public-level-shell { background: radial-gradient(720px 620px at 58% -8%,color-mix(in srgb,var(--mi-public-tone) 11%,transparent),transparent 77%), linear-gradient(180deg,#fafbfc 0%,#f4f5f7 58%,#eef0f3 100%) !important; } html:not(.dark) .mi-mobile-account-actions { border-color:rgba(25,31,42,.09) !important; } html:not(.dark) .mi-mobile-account-actions a:hover { color:#20242a !important; } } /* Late artist-profile rules in artists.css are intentionally cinematic in dark mode; neutralize those exact selectors for Waveme light mode. */ html:not(.dark) .mi-artist-profile-page { background:#f2f4f7 !important; } html:not(.dark) .mi-artist-profile::before { background: linear-gradient(180deg,rgba(246,247,249,.12),#f2f4f7 34%,#f2f4f7 100%), radial-gradient(circle at 82% 12%,rgba(232,95,5,.055),transparent 30%) !important; } html:not(.dark) .mi-artist-profile>.mi-artist-profile-atmosphere { opacity:.24 !important; } html:not(.dark) .mi-artist-profile>.mi-artist-profile-atmosphere::after { background: linear-gradient(90deg,rgba(244,246,248,.86),rgba(244,246,248,.28) 52%,rgba(244,246,248,.70)), linear-gradient(0deg,#f2f4f7 2%,transparent 58%) !important; } html:not(.dark) .mi-artist-profile>.mi-artist-profile-atmosphere.is-placeholder { background: radial-gradient(circle at 76% 18%,hsla(var(--mi-artist-hue),75%,61%,.24),transparent 32%), linear-gradient(135deg,hsl(var(--mi-artist-hue),30%,88%),#f3f5f8 72%) !important; } html:not(.dark) .mi-artist-profile>.mi-artist-profile-hero { border-color:rgba(25,31,42,.10) !important; background: linear-gradient(120deg,rgba(255,255,255,.86),rgba(247,248,250,.70)), rgba(255,255,255,.72) !important; box-shadow:0 26px 70px rgba(42,49,63,.08),inset 0 1px rgba(255,255,255,.9) !important; } html:not(.dark) .mi-artist-profile-topline { color:#747a84 !important; } html:not(.dark) .mi-artist-profile-intro { border-top-color:rgba(25,31,42,.10) !important; } html:not(.dark) .mi-artist-profile-intro h2 { color:#20242a !important; } html:not(.dark) .mi-artist-profile-intro .mi-artist-profile-bio { color:#626873 !important; } html:not(.dark) .mi-artist-profile-facts>div { border-color:rgba(25,31,42,.10) !important; background:rgba(255,255,255,.64) !important; } html:not(.dark) .mi-artist-profile-facts dd { color:#20242a !important; } html:not(.dark) .mi-artist-nav-icon { border-color:rgba(25,31,42,.10) !important; background:rgba(25,31,42,.035) !important; } html:not(.dark) .mi-artist-profile>.mi-artist-profile-section { border-color:rgba(25,31,42,.09) !important; background:rgba(255,255,255,.66) !important; box-shadow:0 20px 55px rgba(42,49,63,.055) !important; } html:not(.dark) .mi-artist-profile .mi-artist-top-track { border-color:rgba(25,31,42,.085) !important; background:rgba(255,255,255,.72) !important; } html:not(.dark) .mi-artist-profile .mi-artist-top-track:hover { border-color:rgba(232,95,5,.28) !important; background:#fff !important; } html:not(.dark) .mi-artist-profile-seal { border-color:#f5f6f8 !important; } /* ========================================================= dev53 — light theme contrast + hierarchy hardening This pass keeps Play Block's own light-theme cards untouched and only strengthens Insight Panel surfaces/text that were still authored for dark UI. ========================================================= */ /* In light mode the same prestige palettes need darker ink variants. This keeps the identity of each level while avoiding pale gold/silver disappearing on white. */ html:not(.dark) .mi-user-hub-page{ --mi-hub-text:#171a20; --mi-hub-muted:#5d6570; --mi-hub-border:rgba(24,29,38,.14); --mi-level-1:#626d7b; --mi-level-1-shine:#929dab; --mi-level-2:#316fc9; --mi-level-2-shine:#73a5e9; --mi-level-3:#a85c24; --mi-level-3-shine:#d68b4e; --mi-level-4:#7446bd; --mi-level-4-shine:#a67cde; --mi-level-5:#95670d; --mi-level-5-shine:#d0a339; } /* Level-name gradients contained a white highlight designed for the dark theme. Replace that highlight with an ink-safe gradient in Waveme light mode. */ html:not(.dark) .mi-identity-level-name, html:not(.dark) .mi-listener-level-name{ background:linear-gradient(112deg, color-mix(in srgb,var(--mi-level-tone) 88%,#24272d) 0%, var(--mi-level-tone) 42%, color-mix(in srgb,var(--mi-level-shine) 72%,var(--mi-level-tone)) 72%, color-mix(in srgb,var(--mi-level-tone) 88%,#24272d) 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important; } html:not(.dark) .mi-stage-level-meta i{color:#a0a5ad !important} html:not(.dark) .mi-stage-level-meta b{filter:saturate(.92) brightness(.82)} /* Private hub — secondary information must remain secondary, not disappear. */ html:not(.dark) .mi-stage-head-handle{color:#626a75 !important} html:not(.dark) .mi-stage-head-bio{color:#4d5560 !important} html:not(.dark) .mi-stage-head-meta span{color:#525a66 !important} html:not(.dark) .mi-user-hub-page.is-owner .mi-user-hub-nav-link{color:#606873 !important} html:not(.dark) .mi-user-hub-page.is-owner .mi-user-hub-nav-link svg, html:not(.dark) .mi-user-hub-page.is-owner .mi-user-hub-nav-link i{opacity:.78 !important} html:not(.dark) .mi-personal-section-head p, html:not(.dark) .mi-personal-section-head>a, html:not(.dark) .mi-user-hub-section-heading p, html:not(.dark) .mi-user-hub-section-heading>a{color:#59616d !important} html:not(.dark) .mi-user-artist-grid--scene.is-round .mi-user-artist-copy small, html:not(.dark) .mi-user-artist-grid--scene.is-preview.is-round .mi-user-artist-copy small{color:#626a75 !important} html:not(.dark) .mi-user-artist-grid--scene .mi-artist-follow-button{color:#252a31 !important;border-color:rgba(24,29,38,.16) !important} /* Home Listening Identity — late dark-theme prestige rules used white mixes. */ html:not(.dark) .mi-home-overview-column--identity .mi-identity-eyebrow{color:var(--mi-level-tone) !important} html:not(.dark) .mi-identity-prestige>span{color:#5f6772 !important} html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity-head strong{color:#22262d !important} html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity-head small, html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity-stats span, html:not(.dark) .mi-identity-activity-status{color:#616975 !important} html:not(.dark) .mi-home-overview-column--identity .mi-identity-activity-stats strong{color:#1d2127 !important} html:not(.dark) .mi-identity-progress-track, html:not(.dark) .mi-listener-progress-track{background:rgba(24,29,38,.13) !important} html:not(.dark) .mi-track-browser-copy small{color:#606873 !important} html:not(.dark) .mi-track-browser-rank{color:#4e5661 !important} html:not(.dark) .mi-track-browser-open{color:#555e69 !important;border-color:rgba(24,29,38,.13) !important} /* Listening detail — make the empty days, labels and the journey legible on white. */ html:not(.dark) .mi-listening-page .mi-user-hub-kicker, html:not(.dark) .mi-listening-panel>header .mi-user-hub-kicker{color:var(--mi-listening-tone) !important} html:not(.dark) .mi-listener-prestige>span, html:not(.dark) .mi-listener-xp-line small, html:not(.dark) .mi-listener-progress-levels, html:not(.dark) .mi-listener-progress-note, html:not(.dark) .mi-listener-status-head small{color:#5d6570 !important} html:not(.dark) .mi-listener-status-stats span{color:#535b66 !important} html:not(.dark) .mi-listening-metrics span{color:#505864 !important;font-weight:720 !important} html:not(.dark) .mi-listening-metrics small{color:#68707b !important} html:not(.dark) .mi-listening-panel>header p{color:#5c6470 !important} html:not(.dark) .mi-listening-timeline{border-bottom-color:rgba(24,29,38,.14) !important} html:not(.dark) .mi-listening-timeline>i>b{background:rgba(24,29,38,.13) !important} html:not(.dark) .mi-listening-timeline-scale{color:#58606b !important} html:not(.dark) .mi-level-journey:before{background:rgba(24,29,38,.18) !important} html:not(.dark) .mi-level-journey-step{color:#58616d !important} html:not(.dark) .mi-level-journey-step i{ border-color:#f6f7f9 !important; background:#a6adb6 !important; box-shadow:0 0 0 1px rgba(24,29,38,.18) !important; } html:not(.dark) .mi-level-journey-step strong{color:#353b44 !important} html:not(.dark) .mi-level-journey-step small, html:not(.dark) .mi-level-journey-step em{color:#5f6772 !important} html:not(.dark) .mi-level-journey-step.is-current strong, html:not(.dark) .mi-level-journey-step.is-current em{color:var(--mi-journey-tone) !important;text-shadow:none !important} /* Public profile — preserve prestige without washed-out gold/silver. */ html:not(.dark) .mi-public-profile-prestige, html:not(.dark) .mi-public-profile-open-head>div>span{color:var(--mi-public-tone) !important} html:not(.dark) .mi-public-profile-prestige strong{color:var(--mi-public-tone) !important} html:not(.dark) .mi-public-profile-level-signature>span, html:not(.dark) .mi-public-profile-level-signature>strong{color:var(--mi-public-tone) !important;text-shadow:none !important} html:not(.dark) .mi-public-profile-level-signature>small{color:color-mix(in srgb,var(--mi-public-tone) 72%,#424852) !important} html:not(.dark) .mi-public-profile-handle{color:#5f6772 !important} html:not(.dark) .mi-public-profile-bio-v3{color:#454d58 !important} html:not(.dark) .mi-public-profile-facts-v3 small{color:#626a75 !important} html:not(.dark) .mi-public-profile-open-head p{color:#5d6570 !important} html:not(.dark) .mi-public-artist-item-v3 small{color:#5f6772 !important} html:not(.dark) .mi-public-artist-image-v3>i{ border-color:#f5f6f8 !important; background:var(--mi-public-tone) !important; color:#fff !important; } html:not(.dark) .mi-public-genre-item-v3{color:#1f242b !important} html:not(.dark) .mi-public-genre-item-v3>span{color:#4c5561 !important;font-weight:850 !important} html:not(.dark) .mi-public-genre-item-v3>i{background:rgba(24,29,38,.12) !important} html:not(.dark) .mi-public-native-track-loop .block-loop-item:before{ border-color:color-mix(in srgb,var(--mi-public-tone) 44%,rgba(24,29,38,.16)) !important; background:color-mix(in srgb,var(--mi-public-tone) 14%,#fff) !important; color:color-mix(in srgb,var(--mi-public-tone) 82%,#20242a) !important; box-shadow:0 6px 16px rgba(42,49,63,.12) !important; } /* Artist directory had a late full-bleed dark backdrop that sat behind otherwise correct light cards. Replace the backdrop itself instead of fighting each card. */ html:not(.dark) .mi-artists-directory::before{ background: radial-gradient(circle at 82% 7%,rgba(232,95,5,.075),transparent 27%), radial-gradient(circle at 10% 35%,rgba(78,104,205,.045),transparent 30%), linear-gradient(180deg,#f6f7f9 0%,#eef1f5 52%,#f5f6f8 100%) !important; } html:not(.dark) .mi-artists-directory{color:#1b1f25 !important} html:not(.dark) .mi-artists-directory-heading h2, html:not(.dark) .mi-artists-explorer>.mi-artists-section-heading h2{color:#1b1f25 !important} html:not(.dark) .mi-artists-directory-heading p, html:not(.dark) .mi-artists-explorer>.mi-artists-section-heading p{color:#5f6772 !important} html:not(.dark) .mi-artist-directory-meta, html:not(.dark) .mi-artist-directory-stats{color:#59616d !important} /* The weekly featured-artist summary intentionally sits on photography even in light mode; its text therefore remains light instead of inheriting card ink. */ html:not(.dark) .mi-artists-weekly-discovery .mi-weekly-artist-summary h2, html:not(.dark) .mi-artists-weekly-discovery .mi-weekly-artist-summary h2 a, html:not(.dark) .mi-artists-weekly-discovery .mi-weekly-artist-summary p{color:#fff !important} html:not(.dark) .mi-artists-weekly-discovery .mi-weekly-artist-summary>div>span:first-child{color:#ff8a3b !important} html:not(.dark) .mi-artists-weekly-discovery .mi-weekly-artist-summary a{ color:#fff !important; border-color:rgba(255,255,255,.22) !important; background:rgba(8,10,14,.34) !important; } html:not(.dark) .mi-artists-weekly-discovery .mi-weekly-artist-tab-copy small, html:not(.dark) .mi-weekly-artist-tracks .mi-artist-track-subtitle{color:#606873 !important} /* Rankings — especially secondary play/meta text. */ html:not(.dark) .mi-artist-rankings-full .mi-artist-feature-content>p, html:not(.dark) .mi-artist-rankings-full .mi-artist-row-content p, html:not(.dark) .mi-artist-rankings-full .mi-artist-row-plays span{color:#59616d !important} /* Artist profile — stronger editorial hierarchy on light surfaces. */ html:not(.dark) .mi-artist-profile-topline, html:not(.dark) .mi-artist-profile-meta, html:not(.dark) .mi-artist-profile-nav a, html:not(.dark) .mi-artist-profile-bio, html:not(.dark) .mi-artist-profile-intro .mi-artist-profile-bio, html:not(.dark) .mi-artist-profile-section>.mi-artists-section-heading p, html:not(.dark) .mi-artist-track-subtitle, html:not(.dark) .mi-artist-track-card-meta, html:not(.dark) .mi-artist-discovery-card small{color:#59616d !important} html:not(.dark) .mi-artist-profile-facts dt{color:#606873 !important} @media (max-width:782px){ html:not(.dark) .mi-stage-head-bio{color:#4c545f !important} html:not(.dark) .mi-mobile-account-actions{ border:1px solid rgba(24,29,38,.11) !important; background:#fff !important; box-shadow:0 9px 24px rgba(42,49,63,.055) !important; } html:not(.dark) .mi-mobile-account-actions a{color:#3f4650 !important} html:not(.dark) .mi-public-profile-open-head p{color:#5c6470 !important} html:not(.dark) .mi-public-profile-level-signature>small{color:#555e69 !important} html:not(.dark) .mi-listening-page .mi-listener-status-stats{ border-top-color:rgba(24,29,38,.11) !important; } html:not(.dark) .mi-listening-page .mi-listener-status-stats span+span{ border-right-color:rgba(24,29,38,.11) !important; } } /* dev54 — privacy controls and level-hidden public profiles in light mode */ html:not(.dark) .mi-profile-privacy, html:not(.dark) .mi-user-profile-form .mi-profile-privacy-option{ border-color:rgba(28,34,44,.11)!important; background:rgba(255,255,255,.72)!important; } html:not(.dark) .mi-profile-privacy>legend, html:not(.dark) .mi-user-profile-form .mi-profile-privacy-copy strong{color:#20252d!important} html:not(.dark) .mi-profile-privacy>p, html:not(.dark) .mi-user-profile-form .mi-profile-privacy-copy small{color:#68717d!important} html:not(.dark) .mi-public-level-shell.is-level-hidden, html:not(.dark) .mi-public-profile-v3.is-level-hidden{ --mi-public-tone:#697381; --mi-public-shine:#858f9c; } /* dev56 — profile settings identity preview in light mode */ html:not(.dark) .mi-user-profile-avatar-block{ border-color:color-mix(in srgb,var(--mi-profile-level-tone) 18%,rgba(28,34,44,.10))!important; background:linear-gradient(180deg,color-mix(in srgb,var(--mi-profile-level-tone) 4%,#fff),rgba(255,255,255,.82))!important; } html:not(.dark) .mi-user-profile-preview-sigil{background:#fff!important;box-shadow:0 8px 24px rgba(31,38,50,.10)!important} html:not(.dark) .mi-user-profile-preview-avatar{box-shadow:0 14px 32px rgba(31,38,50,.10),0 0 28px color-mix(in srgb,var(--mi-profile-level-tone) 7%,transparent)!important} html:not(.dark) .mi-user-profile-preview-name strong{color:#20252d!important} html:not(.dark) .mi-user-profile-preview-name span{color:#6a7380!important} html:not(.dark) .mi-user-profile-preview-meta{color:#6a7380!important} html:not(.dark) .mi-user-profile-preview-meta b{color:var(--mi-profile-level-tone)!important} /* dev58 — compact privacy disclosure in light mode */ html:not(.dark) .mi-profile-privacy-summary-copy strong{color:#20252d!important} html:not(.dark) .mi-profile-privacy-summary-copy small, html:not(.dark) .mi-profile-privacy-body>p{color:#68717d!important} html:not(.dark) .mi-profile-privacy-summary-action{ color:#313842!important; border-color:rgba(28,34,44,.12)!important; background:rgba(246,248,251,.92)!important; } html:not(.dark) .mi-profile-privacy[open] .mi-profile-privacy-summary{ border-bottom-color:rgba(28,34,44,.10)!important; } /* dev60: keep the public-profile hero/content divider visible in light mode. */ html:not(.dark) .mi-public-profile-stage-v3.has-following-content { border-bottom-color:color-mix(in srgb,var(--mi-public-tone) 48%,rgba(25,31,42,.12)) !important; } /* dev62 — personal Top Artists ranking / light theme */ html:not(.dark) .mi-personal-top-artist-row{background:rgba(255,255,255,.76);box-shadow:0 7px 22px rgba(30,36,48,.035)} html:not(.dark) .mi-personal-top-artist-row:hover{background:color-mix(in srgb,var(--mi-top-artist-tone) 3%,#fff)} html:not(.dark) .mi-personal-top-artist-row.is-first{background:linear-gradient(270deg,color-mix(in srgb,var(--mi-top-artist-tone) 7%,#fff),rgba(255,255,255,.82) 56%)} html:not(.dark) .mi-personal-top-artist-meter{background:rgba(36,43,54,.09)} html:not(.dark) .mi-personal-top-artist-image{box-shadow:0 7px 18px rgba(30,36,48,.07)} /* dev63 — Favorite Artist controls / light theme */ html:not(.dark) .mi-favorite-artist-setting{border-color:rgba(28,34,44,.11)!important;background:rgba(255,255,255,.72)!important} html:not(.dark) .mi-favorite-artist-modes{border-color:rgba(28,34,44,.11)!important;background:#f3f5f8!important} html:not(.dark) .mi-favorite-artist-current, html:not(.dark) .mi-favorite-artist-manual{border-color:rgba(28,34,44,.09)!important} html:not(.dark) .mi-favorite-artist-results{border-color:rgba(28,34,44,.12)!important;} html:not(.dark) .mi-favorite-artist-result:hover{background:rgba(232,95,5,.055)!important} html:not(.dark) .mi-public-chosen-artist{border-color:color-mix(in srgb,var(--mi-public-tone) 30%,rgba(28,34,44,.10))!important;background:linear-gradient(270deg,color-mix(in srgb,var(--mi-public-tone) 7%,#fff),rgba(255,255,255,.86))!important;color:#20252d!important} html:not(.dark) .mi-public-chosen-artist-copy strong{color:#20252d!important} html:not(.dark) .mi-public-chosen-artist-copy em{color:#68717d!important} html:not(.dark) .mi-public-chosen-artist>i{color:#68717d!important} /* dev65 — keep Favorite Artist live-search fully opaque in light mode */ html:not(.dark) .mi-favorite-artist-results{ background:#fff!important; opacity:1!important; box-shadow:0 18px 42px rgba(31,38,50,.16)!important; } html:not(.dark) .mi-favorite-artist-result{background:#fff!important} html:not(.dark) .mi-favorite-artist-result:hover, html:not(.dark) .mi-favorite-artist-result:focus-visible{background:#f4f6f9!important} /* dev73 — Music DNA v3 / light theme */ html:not(.dark) .mi-listening-page .mi-music-dna{--mi-dna-color-1:#9a7838;--mi-dna-color-2:#805f4a;--mi-dna-color-3:#5f7462;--mi-dna-color-4:#556d82;--mi-dna-color-5:#695c6b} html:not(.dark) .mi-listening-page .mi-music-dna{ border-color:color-mix(in srgb,var(--mi-dna-tone) 20%,rgba(28,34,44,.12))!important; background: radial-gradient(circle at 88% 0,color-mix(in srgb,var(--mi-dna-tone) 8%,transparent),transparent 31%), linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,249,251,.90))!important; } html:not(.dark) .mi-music-dna-source{color:#68717d!important;border-color:color-mix(in srgb,var(--mi-dna-tone) 18%,rgba(28,34,44,.10))!important;background:color-mix(in srgb,var(--mi-dna-tone) 4%,#fff)!important} html:not(.dark) .mi-music-dna-head h3, html:not(.dark) .mi-music-dna-signature-tags>strong, html:not(.dark) .mi-music-dna-anchor strong, html:not(.dark) .mi-music-dna-spectrum-head strong, html:not(.dark) .mi-music-dna-metrics strong{color:#20252d!important} html:not(.dark) .mi-music-dna-head p, html:not(.dark) .mi-music-dna-anchor em, html:not(.dark) .mi-music-dna-strand-name b, html:not(.dark) .mi-music-dna-metrics span{color:#616b78!important} html:not(.dark) .mi-music-dna-overview{border-color:rgba(28,34,44,.10)!important;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(247,248,250,.72),rgba(255,255,255,.3))!important} html:not(.dark) .mi-music-dna-anchor{border-inline-start-color:rgba(28,34,44,.10)!important} html:not(.dark) .mi-music-dna-signature-tags>strong{border-color:color-mix(in srgb,var(--mi-dna-tone) 23%,rgba(28,34,44,.10))!important;background:color-mix(in srgb,var(--mi-dna-tone) 4%,#fff)!important} html:not(.dark) .mi-music-dna-signature-tags>strong:first-child{border-color:color-mix(in srgb,var(--mi-dna-tone) 40%,rgba(28,34,44,.12))!important;background:color-mix(in srgb,var(--mi-dna-tone) 9%,#fff)!important} html:not(.dark) .mi-music-dna-composition{background:#e2e6eb!important;box-shadow:inset 0 0 0 1px rgba(28,34,44,.04)!important} html:not(.dark) .mi-music-dna-composition>i{border-inline-end-color:rgba(255,255,255,.82)!important} html:not(.dark) .mi-music-dna-meter{background:color-mix(in srgb,var(--mi-dna-bar-color) 9%,#e6e9ed)!important} html:not(.dark) .mi-music-dna-strand-name i:before{box-shadow:0 0 0 2px color-mix(in srgb,var(--mi-dna-bar-color) 16%,transparent)!important} html:not(.dark) .mi-music-dna-strand>small{color:color-mix(in srgb,var(--mi-dna-bar-color) 66%,#3e4652)!important} html:not(.dark) .mi-music-dna-metrics{border-top-color:rgba(28,34,44,.10)!important;background:linear-gradient(180deg,rgba(238,241,245,.45),transparent)!important} html:not(.dark) .mi-music-dna-metrics>div+div{border-inline-start-color:rgba(28,34,44,.10)!important} html:not(.dark) .mi-music-dna-note{color:#697481!important} html:not(.dark) .mi-music-dna-anchor-image{background:#fff!important;box-shadow:0 8px 24px rgba(31,38,50,.08)!important} @media (max-width:767px){ html:not(.dark) .mi-listening-page .mi-music-dna{background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--mi-dna-tone) 7%,transparent),transparent 26%),rgba(255,255,255,.90)!important} html:not(.dark) .mi-music-dna-anchor{border-top-color:rgba(28,34,44,.09)!important} } nn/* dev77 — Listening Insights / light theme */ html:not(.dark) .mi-listening-insights{ border-color:color-mix(in srgb,var(--mi-insight-tone) 20%,rgba(28,34,44,.11))!important; background:radial-gradient(circle at 92% 0,color-mix(in srgb,var(--mi-insight-tone) 7%,transparent),transparent 28%),rgba(255,255,255,.82)!important; } html:not(.dark) .mi-listening-insights-head p, html:not(.dark) .mi-listening-insight-track-copy em, html:not(.dark) .mi-listening-insight-track-count small, html:not(.dark) .mi-listening-insight-facts span, html:not(.dark) .mi-listening-insight-facts small{color:#66717f!important} /* dev78 — Listening Insights v2 / light theme */ html:not(.dark) .mi-listening-insights{ border-color:color-mix(in srgb,var(--mi-insight-tone) 22%,rgba(28,34,44,.12))!important; background:radial-gradient(circle at 92% 0,color-mix(in srgb,var(--mi-insight-tone) 7%,transparent),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,249,251,.92))!important; } html:not(.dark) .mi-listening-insights-head h3, html:not(.dark) .mi-listening-insight-track-copy strong, html:not(.dark) .mi-listening-insight-track-count b, html:not(.dark) .mi-listening-insight-facts strong{color:#20252d!important} html:not(.dark) .mi-listening-insights-head p{color:#596472!important} html:not(.dark) .mi-listening-insight-track-copy em, html:not(.dark) .mi-listening-insight-track-count small, html:not(.dark) .mi-listening-insight-facts span{color:#56616f!important} html:not(.dark) .mi-listening-insight-facts small{color:#6a7481!important} html:not(.dark) .mi-listening-insight-track, html:not(.dark) .mi-listening-insight-facts{border-color:rgba(28,34,44,.11)!important;background:rgba(255,255,255,.82)!important;box-shadow:0 8px 28px rgba(30,36,48,.035)} html:not(.dark) .mi-listening-insight-track:hover{border-color:color-mix(in srgb,var(--mi-insight-tone) 34%,rgba(28,34,44,.12))!important;background:color-mix(in srgb,var(--mi-insight-tone) 3%,#fff)!important} html:not(.dark) .mi-listening-insight-track-count, html:not(.dark) .mi-listening-insight-facts>div+div{border-color:rgba(28,34,44,.10)!important} html:not(.dark) .mi-listening-insight-track-cover{background:#f2f4f7!important;box-shadow:0 10px 26px rgba(30,36,48,.10)!important} /* dev82 — Year in Music v3 / light theme */ html:not(.dark) .mi-year-in-music{ border-color:color-mix(in srgb,var(--mi-year-tone) 20%,rgba(28,34,44,.12))!important; background: radial-gradient(ellipse 44% 56% at 78% 30%,color-mix(in srgb,var(--mi-year-tone) 8%,transparent) 0%,color-mix(in srgb,var(--mi-year-tone) 3.5%,transparent) 24%,color-mix(in srgb,var(--mi-year-tone) 1%,transparent) 40%,transparent 52%), radial-gradient(ellipse 78% 90% at 46% 48%,rgba(255,255,255,.84) 0%,rgba(248,249,251,.34) 43%,transparent 79%)!important; } html:not(.dark) .mi-year-in-music-head h3, html:not(.dark) .mi-year-in-music-copy strong, html:not(.dark) .mi-year-in-music-artist strong, html:not(.dark) .mi-year-in-music-stats strong{color:#20252d!important} html:not(.dark) .mi-year-in-music-head p, html:not(.dark) .mi-year-in-music-copy em, html:not(.dark) .mi-year-in-music-artist em, html:not(.dark) .mi-year-in-music-stats span{color:#66717e!important} html:not(.dark) .mi-year-in-music-track, html:not(.dark) .mi-year-in-music-artist, html:not(.dark) .mi-year-in-music-stats{border-color:rgba(28,34,44,.10)!important;background:rgba(255,255,255,.72)!important} html:not(.dark) .mi-year-in-music-stats>div+div{border-inline-start-color:rgba(28,34,44,.09)!important} html:not(.dark) .mi-year-in-music-art{background:#fff!important;box-shadow:0 10px 26px rgba(31,38,50,.08)!important} html:not(.dark) .mi-year-in-music-artist-image{background:#fff!important} html:not(.dark) .mi-year-in-music-copy b{ color:#5a471b!important; border-color:color-mix(in srgb,var(--mi-year-tone) 28%,rgba(28,34,44,.10))!important; background:color-mix(in srgb,var(--mi-year-tone) 12%,#fff)!important; } html:not(.dark) .mi-year-in-music-year{color:color-mix(in srgb,var(--mi-year-tone) 72%,#28303a)!important;border-color:color-mix(in srgb,var(--mi-year-tone) 28%,rgba(28,34,44,.10))!important;background:color-mix(in srgb,var(--mi-year-tone) 6%,#fff)!important} html:not(.dark) .mi-year-in-music-stats small{color:#7a8490!important} html:not(.dark) .mi-year-in-music-artist-image .mi-public-artist-placeholder{background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--mi-year-tone) 12%,#fff),#eef1f5 72%)!important;color:color-mix(in srgb,var(--mi-year-tone) 72%,#2f3742)!important} html:not(.dark) .mi-year-in-music-stats .is-genre{background:linear-gradient(180deg,color-mix(in srgb,var(--mi-year-tone) 5%,#fff),rgba(255,255,255,.72))!important} @media (max-width:1100px){html:not(.dark) .mi-year-in-music-stats>div:nth-child(4),html:not(.dark) .mi-year-in-music-stats>div:nth-child(5){border-top-color:rgba(28,34,44,.09)!important}} @media (max-width:767px){html:not(.dark) .mi-year-in-music-stats>div:nth-child(n/**/+3){border-top-color:rgba(28,34,44,.09)!important}} /* dev85 — Listener Rewards / light theme */ html:not(.dark) .mi-rewards-page:before{background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--mi-reward-tone) 8%,transparent),transparent 67%)} html:not(.dark) .mi-rewards-head{border-bottom-color:rgba(28,34,44,.10)} html:not(.dark) .mi-rewards-head h2{color:#20252d} html:not(.dark) .mi-rewards-head p, html:not(.dark) .mi-rewards-current>span{color:#68717d} /* dev87 — Level Privileges / light theme */ html:not(.dark) .mi-privileges-head{border-bottom-color:rgba(28,34,44,.10)} html:not(.dark) .mi-privileges-head h2, html:not(.dark) .mi-privilege-feature>strong, html:not(.dark) .mi-privilege-bonus-grid b, html:not(.dark) .mi-privilege-access-facts b, html:not(.dark) .mi-privilege-guest-facts b, html:not(.dark) .mi-privileges-path>header>span, html:not(.dark) .mi-privileges-level-head strong{color:#20252d} html:not(.dark) .mi-privileges-head p, html:not(.dark) .mi-rewards-current>span, html:not(.dark) .mi-privilege-feature>p, html:not(.dark) .mi-privilege-bonus-grid small, html:not(.dark) .mi-privilege-access-facts small, html:not(.dark) .mi-privilege-guest-facts small, html:not(.dark) .mi-privileges-path>header>p, html:not(.dark) .mi-privileges-level li{color:#66717f} html:not(.dark) .mi-rewards-current{border-color:color-mix(in srgb,var(--mi-reward-tone) 26%,rgba(28,34,44,.10));background:linear-gradient(270deg,color-mix(in srgb,var(--mi-reward-tone) 7%,#fff),#fff);box-shadow:0 8px 24px rgba(31,38,50,.045)} html:not(.dark) .mi-privilege-feature{border-color:rgba(28,34,44,.11);} html:not(.dark) .mi-privilege-bonus-grid{border-color:rgba(28,34,44,.10);} html:not(.dark) .mi-privilege-bonus-grid>div+div{border-inline-start-color:rgba(28,34,44,.09)} html:not(.dark) .mi-privilege-access-facts>div, html:not(.dark) .mi-privilege-guest-facts>div{border-color:rgba(28,34,44,.09);} html:not(.dark) .mi-privilege-tech-note, html:not(.dark) .mi-privilege-phase{color:color-mix(in srgb,var(--mi-reward-tone) 72%,#596371)} html:not(.dark) .mi-privileges-path{border-top-color:rgba(28,34,44,.10)} html:not(.dark) .mi-privileges-level{border-color:rgba(28,34,44,.10);background:linear-gradient(180deg,#fff,#fafbfc);box-shadow:0 6px 18px rgba(31,38,50,.025)} html:not(.dark) .mi-privileges-level.is-current{border-color:color-mix(in srgb,var(--mi-privilege-level-tone) 45%,rgba(28,34,44,.11));background:linear-gradient(180deg,color-mix(in srgb,var(--mi-privilege-level-tone) 7%,#fff),#fff);box-shadow:0 10px 28px color-mix(in srgb,var(--mi-privilege-level-tone) 8%,rgba(31,38,50,.04))} html:not(.dark) .mi-privileges-level-head{border-bottom-color:rgba(28,34,44,.09)} @media(max-width:767px){ html:not(.dark) .mi-privilege-bonus-grid>div:nth-child(3),html:not(.dark) .mi-privilege-bonus-grid>div:nth-child(4){border-top-color:rgba(28,34,44,.09)} } /* dev88 — Level Privileges / light theme readability */ html:not(.dark) .mi-privileges-head p, html:not(.dark) .mi-privilege-feature>p, html:not(.dark) .mi-privilege-bonus-grid small, html:not(.dark) .mi-privilege-access-facts small, html:not(.dark) .mi-privilege-guest-facts small, html:not(.dark) .mi-privileges-path>header>p, html:not(.dark) .mi-privileges-level li{color:#56616f} html:not(.dark) .mi-privilege-feature{box-shadow:0 7px 22px rgba(30,36,48,.045);} html:not(.dark) .mi-privilege-bonus-grid{background:#f7f8fa} html:not(.dark) .mi-privilege-phase{border-inline-start-color:color-mix(in srgb,var(--mi-reward-tone) 55%,transparent)} /* dev89 — Level Privileges / light atmosphere + neutral status language */ html:not(.dark) .mi-privileges-head p, html:not(.dark) .mi-privilege-feature>p, html:not(.dark) .mi-privileges-path>header>p, html:not(.dark) .mi-privileges-level li{color:#5f6976} html:not(.dark) .mi-privilege-phase{color:#68717d;border-inline-start:0} html:not(.dark) .mi-privilege-feature{background:linear-gradient(180deg,#fff,#fbfcfd)} html:not(.dark) .mi-privilege-bonus-grid>div{background:linear-gradient(180deg,#fafbfc,#f6f8fa)} html:not(.dark) .mi-privilege-access-facts>div, html:not(.dark) .mi-privilege-guest-facts>div{background:#f7f8fa} /* dev90 — Level Privileges / light final polish */ @media(max-width:767px){ html:not(.dark) .mi-rewards-page{ background-image:radial-gradient(ellipse 430px 310px at 92% 1%, color-mix(in srgb,var(--mi-reward-tone) 5.5%,transparent) 0%, color-mix(in srgb,var(--mi-reward-tone) 2.2%,transparent) 31%, transparent 70%); } html:not(.dark) .mi-privileges-level-head{border-bottom-color:rgba(28,34,44,.09)} } /* dev93 — Level Privileges light theme: edge-safe atmosphere + visual identifiers */ html:not(.dark) .mi-rewards-page{background-image:none!important} html:not(.dark) .mi-rewards-page::before{ display:block!important; } html:not(.dark) .mi-rewards-current-copy>span{color:#6b7480} html:not(.dark) .mi-privilege-icon, html:not(.dark) .mi-privilege-path-icon{ border-color:color-mix(in srgb,var(--mi-reward-tone) 26%,rgba(28,34,44,.10)); color:color-mix(in srgb,var(--mi-reward-tone) 78%,#46505d); background:color-mix(in srgb,var(--mi-reward-tone) 6%,#fff); } html:not(.dark) .mi-privileges-path-title{color:#20252d!important} html:not(.dark) .mi-privileges-level li>i{color:color-mix(in srgb,var(--mi-privilege-level-tone) 76%,#66717f)} /* dev94 — Level Privileges light-theme containment */ html:not(.dark) .mi-rewards-page::before{ background:radial-gradient(ellipse 62% 84% at 68% 53%, color-mix(in srgb,var(--mi-reward-tone) 5.7%,transparent) 0%, color-mix(in srgb,var(--mi-reward-tone) 2.5%,transparent) 25%, color-mix(in srgb,var(--mi-reward-tone) .75%,transparent) 43%, transparent 58%)!important; } @media(max-width:767px){ html:not(.dark) .mi-rewards-page::before{ background:radial-gradient(ellipse 70% 80% at 63% 50%, color-mix(in srgb,var(--mi-reward-tone) 4.8%,transparent) 0%, color-mix(in srgb,var(--mi-reward-tone) 1.9%,transparent) 26%, transparent 58%)!important; } } /* dev95 — Device Manager light theme */ html:not(.dark) .mi-devices-page:before{background:radial-gradient(ellipse 58% 80% at 76% 30%,color-mix(in srgb,var(--mi-device-tone) 5%,transparent),transparent 62%)} html:not(.dark) .mi-devices-head{border-bottom-color:rgba(28,34,44,.10)} html:not(.dark) .mi-devices-head h2, html:not(.dark) .mi-device-list-wrap>header>div>span, html:not(.dark) .mi-device-copy strong, html:not(.dark) .mi-device-empty strong, html:not(.dark) .mi-profile-security-link strong{color:#20252d} html:not(.dark) .mi-devices-head p, html:not(.dark) .mi-devices-usage>small, html:not(.dark) .mi-devices-usage-value span, html:not(.dark) .mi-devices-summary span, html:not(.dark) .mi-device-list-wrap>header p, html:not(.dark) .mi-device-copy p, html:not(.dark) .mi-device-empty p, html:not(.dark) .mi-devices-foot p, html:not(.dark) .mi-profile-security-link small{color:#68717d} html:not(.dark) .mi-devices-usage-value strong, html:not(.dark) .mi-devices-summary strong{color:#20252d} html:not(.dark) .mi-devices-usage>i{background:rgba(28,34,44,.08)} html:not(.dark) .mi-devices-usage{border-color:color-mix(in srgb,var(--mi-device-tone) 20%,rgba(28,34,44,.10));background:linear-gradient(135deg,color-mix(in srgb,var(--mi-device-tone) 4%,#fff),#fff)} html:not(.dark) .mi-devices-summary, html:not(.dark) .mi-device-item, html:not(.dark) .mi-profile-security-link{border-color:rgba(28,34,44,.10);background:#fff;box-shadow:0 6px 20px rgba(31,38,50,.025)} html:not(.dark) .mi-devices-summary>div{border-inline-start-color:rgba(28,34,44,.09)} html:not(.dark) .mi-device-item.is-current{border-color:color-mix(in srgb,var(--mi-device-tone) 32%,rgba(28,34,44,.10));background:linear-gradient(270deg,color-mix(in srgb,var(--mi-device-tone) 5%,#fff),#fff)} html:not(.dark) .mi-device-icon{border-color:rgba(28,34,44,.10);background:#f8f9fb} html:not(.dark) .mi-device-logout-others button, html:not(.dark) .mi-device-revoke-form button{border-color:rgba(28,34,44,.12);color:#525d6a;background:#fff} html:not(.dark) .mi-device-logout-others button:hover, html:not(.dark) .mi-device-revoke-form button:hover{color:#20252d} html:not(.dark) .mi-devices-foot{border-top-color:rgba(28,34,44,.09)} html:not(.dark) .mi-profile-security-link>i{color:#7a8490} @media(max-width:767px){html:not(.dark) .mi-devices-page:before{background:radial-gradient(ellipse 76% 78% at 70% 26%,color-mix(in srgb,var(--mi-device-tone) 4.5%,transparent),transparent 62%)}} /* dev103: stream-handoff notice enlarged ~15% and kept visible 5s longer. JS measures the persistent Play Block * height and supplies --mi-stream-player-offset so this never drifts into page * content/footer. Repeated takeovers reuse the same toast instead of stacking. */ .mi-stream-conflict-notice{ position:fixed;left:50%;bottom:var(--mi-stream-player-offset,82px);z-index:100001; width:max-content;max-width:min(414px,calc(100vw - 24px)); transform:translate(-50%,8px);opacity:0;pointer-events:none; display:flex;flex-direction:column;align-items:center;gap:2.3px; padding:10.35px 15px;border:1px solid rgba(214,174,73,.25);border-radius:12.5px; background:rgba(18,20,25,.965);color:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(0,0,0,.25); font:inherit;line-height:1.55;text-align:center;direction:rtl; transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px) } .mi-stream-conflict-notice.is-visible{opacity:1;transform:translate(-50%,0)} .mi-stream-conflict-title{display:block;font-size:13.2px;font-weight:800;color:inherit} .mi-stream-conflict-body{display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.62)} html:not(.dark) .mi-stream-conflict-notice{ background:rgba(255,255,255,.975);color:#30343b;border-color:rgba(165,126,36,.20);box-shadow:0 12px 30px rgba(35,40,48,.12) } html:not(.dark) .mi-stream-conflict-body{color:#747b85} @media(max-width:600px){ .mi-stream-conflict-notice{max-width:min(356px,calc(100vw - 24px));padding:9.2px 13.8px;border-radius:11.5px} .mi-stream-conflict-title{font-size:12.65px} .mi-stream-conflict-body{font-size:10.9px} } /* dev105 — Guest Pass controls / light theme. */ html:not(.dark) .mi-guest-pass-form input{border-color:rgba(28,34,44,.12);background:#fff;color:#20252d} html:not(.dark) .mi-guest-pass-form label>span, html:not(.dark) .mi-guest-pass-form>small, html:not(.dark) .mi-guest-history>span, html:not(.dark) .mi-guest-history>div small{color:#66717f} html:not(.dark) .mi-guest-history>div{border-color:rgba(28,34,44,.09);background:#f7f8fa;color:#20252d} html:not(.dark) .mi-subscription-status.is-active.is-guest-pass{border-color:rgba(174,128,35,.22);background:#fff8e9;color:#8c681f} html:not(.dark) .mi-subscription-status.is-active.is-guest-pass i{background:#b58932;box-shadow:0 0 0 4px rgba(181,137,50,.08)} html:not(.dark) .mi-subscription-overview.is-active.is-guest-pass{background:radial-gradient(circle at 88% 0%,rgba(199,157,72,.10),transparent 31%),linear-gradient(180deg,#fff,#fbfcfd)} html:not(.dark) .mi-subscription-overview.is-active.is-guest-pass .mi-subscription-emblem{border-color:rgba(174,128,35,.22);background:#fff8e9;color:#9a7223} html:not(.dark) .mi-subscription-overview.is-active.is-guest-pass .mi-subscription-primary>strong{color:#8c681f} /* dev108 — Request Center / light theme form contrast. */ html:not(.dark) .mi-request-form input, html:not(.dark) .mi-request-form textarea, html:not(.dark) .mi-request-form select{border-color:rgba(28,34,44,.12);background:#fff;color:#20252d} html:not(.dark) .mi-request-form select{color-scheme:light} html:not(.dark) .mi-request-form select option{background:#fff;color:#20252d} html:not(.dark) .mi-request-compose, html:not(.dark) .mi-request-history, html:not(.dark) .mi-request-item{border-color:rgba(28,34,44,.10);background:#fff} html:not(.dark) .mi-request-item-copy>strong, html:not(.dark) .mi-request-compose h3, html:not(.dark) .mi-request-history h3{color:#20252d} html:not(.dark) .mi-request-item-copy>p, html:not(.dark) .mi-request-compose header p, html:not(.dark) .mi-request-history header p, html:not(.dark) .mi-request-form-note{color:#68717d} /* dev144 — profile visibility dropdown + avatar upload in light mode. */ html:not(.dark) .mi-user-profile-form select{ color-scheme:light!important; border-color:rgba(28,34,44,.12)!important; background:#fff!important; color:#20252d!important; } html:not(.dark) .mi-user-profile-form select option{background:#fff!important;color:#20252d!important} html:not(.dark) .mi-profile-avatar-edit-cue{ border-color:rgba(28,34,44,.12)!important; background:rgba(255,255,255,.90)!important; color:#323944!important; box-shadow:0 7px 18px rgba(31,38,50,.12)!important; } html:not(.dark) .mi-profile-avatar-upload:hover .mi-profile-avatar-edit-cue, html:not(.dark) .mi-profile-avatar-upload:focus-visible .mi-profile-avatar-edit-cue{background:#e85f05!important;color:#fff!important} html:not(.dark) .mi-profile-avatar-toast{background:rgba(255,255,255,.98);color:#28603a;border-color:rgba(55,141,83,.20);box-shadow:0 16px 36px rgba(31,38,50,.14)} html:not(.dark) .mi-profile-avatar-toast.is-error{color:#9a3434;border-color:rgba(180,61,61,.20)} /* dev160 — PJAX-stable single-track album context/discovery UI. * Kept in the global compatibility stylesheet because Waveme PJAX does not * swap assets between routes. All rules remain scoped to .single-station. */ /* MusicInsight single-track cleanup — dev154 */ /* Important: do not alter .header-station geometry, positioning, overflow or * radius here. Waveme owns that surface and its atmospheric background. */ .single-station .mi-track-album-context{ box-sizing:border-box; } .single-station .mi-track-album-main{ color:inherit; text-decoration:none; } .single-station .mi-track-album-cover{ display:block; width:100%; height:100%; object-fit:cover; } .single-station .mi-track-album-placeholder{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:1.45rem; color:var(--color-primary,#f60); } .single-station .mi-track-album-copy{ display:flex; flex-direction:column; min-width:0; gap:.16rem; } .single-station .mi-track-album-eyebrow{ font-size:.72rem; line-height:1.35; font-weight:750; color:var(--color-primary,#f60); } .single-station .mi-track-album-title{ display:block; max-width:100%; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; unicode-bidi:plaintext; text-align:start; } .single-station .mi-track-album-artist{ color:var(--text-secondary-color,#8d929b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .single-station .mi-track-album-action{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--text-secondary-color,#9aa0aa); transition:color .18s ease,background-color .18s ease,transform .18s ease; } .single-station .mi-track-album-action svg, .single-station .mi-track-album-marker svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .single-station .mi-track-artist-more{ margin-top:1.25rem; } .single-station .mi-track-artist-more .block-loop-title{ font-weight:700; } /* dev170 — Album provenance uses one physical LTR order on every viewport: * action -> cover -> metadata. The Persian eyebrow remains RTL text, while all * music metadata is explicitly LTR so Waveme's page direction cannot reverse * title/artist order or ellipsis behavior. The header geometry itself remains * owned by Waveme. */ @media (min-width:992px){ .single-station .mi-track-album-context--desktop{ display:block; flex:0 0 clamp(270px,22vw,330px); max-width:31%; align-self:flex-start; margin:.1rem 0 0 -2.5rem; } .single-station .mi-track-album-context--mobile{ display:none!important; } .single-station .mi-track-album-context--desktop .mi-track-album-main{ display:grid; grid-template-columns:34px 52px minmax(0,1fr); align-items:center; column-gap:.65rem; min-height:76px; padding:.62rem .78rem; border:1px solid rgba(150,160,170,.15); border-left:0; border-radius:0 12px 12px 0; background: linear-gradient(100deg,rgba(255,102,0,.10),rgba(255,102,0,.02) 50%,transparent 82%), rgba(120,130,140,.045); box-shadow:7px 8px 22px rgba(0,0,0,.10); transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease; direction:ltr!important; text-align:left!important; } .single-station .mi-track-album-context--desktop .mi-track-album-main:hover{ border-color:rgba(255,102,0,.34); border-left:0; background: linear-gradient(100deg,rgba(255,102,0,.14),rgba(255,102,0,.03) 50%,transparent 82%), rgba(120,130,140,.055); box-shadow:9px 10px 26px rgba(0,0,0,.13); } .single-station .mi-track-album-context--desktop .mi-track-album-marker{ display:none!important; } .single-station .mi-track-album-context--desktop .mi-track-album-action{ display:inline-flex; width:34px; height:34px; border-radius:50%; background:rgba(120,130,140,.08); border:1px solid rgba(150,160,170,.10); } .single-station .mi-track-album-context--desktop .mi-track-album-action span{ display:none; } .single-station .mi-track-album-context--desktop .mi-track-album-action svg{ width:15px; height:15px; } .single-station .mi-track-album-context--desktop .mi-track-album-art{ display:block; width:52px; height:52px; border-radius:9px; overflow:hidden; background:rgba(120,130,140,.10); box-shadow:0 6px 16px rgba(0,0,0,.16); } .single-station .mi-track-album-context--desktop .mi-track-album-copy{ width:100%; min-width:0; gap:.10rem; direction:ltr!important; text-align:left!important; } .single-station .mi-track-album-context--desktop .mi-track-album-eyebrow{ font-size:.68rem; text-align:left!important; } .single-station .mi-track-album-context--desktop .mi-track-album-title{ font-size:.88rem; font-weight:740; } .single-station .mi-track-album-context--desktop .mi-track-album-artist{ font-size:.69rem; } } /* Tablet/phone: keep the provenance drawer in normal Waveme width. Only its * contents are LTR. No viewport breakout or negative horizontal rail math is * introduced here, so the surrounding single-track card remains untouched. */ @media (max-width:991px){ .single-station .mi-track-album-context--desktop{ display:none!important; } .single-station .mi-track-album-context--mobile{ display:block; position:relative; z-index:2; width:calc(100% - (var(--x-gap) * 2)); max-width:var(--content-width); margin:-3.9rem auto 1.15rem; } .single-station .mi-track-album-context--mobile .mi-track-album-main{ display:grid; grid-template-columns:36px 58px minmax(0,1fr); align-items:center; column-gap:.72rem; min-height:82px; padding:.62rem .72rem; border:1px solid rgba(150,160,170,.16); border-top-color:rgba(255,102,0,.34); border-radius:0 0 16px 16px; background: linear-gradient(105deg,rgba(255,102,0,.09),transparent 48%), rgba(20,23,28,.97); box-shadow:0 13px 28px rgba(0,0,0,.18); transition:border-color .18s ease,background-color .18s ease,transform .18s ease; direction:ltr!important; text-align:left!important; } .single-station .mi-track-album-context--mobile .mi-track-album-main:active{ border-color:rgba(255,102,0,.40); transform:translateY(1px); } .single-station .mi-track-album-context--mobile .mi-track-album-marker{ display:none!important; } .single-station .mi-track-album-context--mobile .mi-track-album-action{ grid-column:1; grid-row:1; width:36px; height:36px; border-radius:50%; background:rgba(120,130,140,.08); border:1px solid rgba(150,160,170,.10); } .single-station .mi-track-album-context--mobile .mi-track-album-action span{ display:none; } .single-station .mi-track-album-context--mobile .mi-track-album-action svg{ width:16px; height:16px; } .single-station .mi-track-album-context--mobile .mi-track-album-art{ display:block; grid-column:2; grid-row:1; width:58px; height:58px; border-radius:10px; overflow:hidden; background:rgba(120,130,140,.10); box-shadow:0 7px 20px rgba(0,0,0,.18); } .single-station .mi-track-album-context--mobile .mi-track-album-copy{ grid-column:3; grid-row:1; width:100%; min-width:0; direction:ltr!important; text-align:left!important; } .single-station .mi-track-album-context--mobile .mi-track-album-eyebrow{ font-size:.7rem; text-align:left!important; } .single-station .mi-track-album-context--mobile .mi-track-album-title{ font-size:.96rem; font-weight:720; } .single-station .mi-track-album-context--mobile .mi-track-album-artist{ font-size:.74rem; } } .single-station .mi-track-album-title, .single-station .mi-track-album-artist{ direction:ltr!important; unicode-bidi:plaintext; text-align:left!important; } .single-station .mi-track-album-eyebrow{ text-align:left!important; } .light .single-station .mi-track-album-main, body:not(.dark) .single-station .mi-track-album-main{ border-color:rgba(60,70,85,.13); background: linear-gradient(105deg,rgba(255,102,0,.05),transparent 48%), rgba(255,255,255,.96); box-shadow:0 9px 24px rgba(28,33,42,.08); } @media (max-width:479px){ .single-station .mi-track-album-context--mobile .mi-track-album-main{ grid-template-columns:34px 54px minmax(0,1fr); min-height:76px; padding:.56rem .62rem; column-gap:.6rem; } .single-station .mi-track-album-context--mobile .mi-track-album-art{ width:54px; height:54px; } .single-station .mi-track-album-context--mobile .mi-track-album-title{ font-size:.91rem; } .single-station .mi-track-album-context--mobile .mi-track-album-action{ width:34px; height:34px; } } /* dev172 — Single-track/playlist discovery rails. * * REAL DOM CONTRACT (Loop Block 11.2): * - `.wp-block-loop-slider` is only the Loop root class. * - the element that actually receives `data-plugin="slider"` and the slider JS * is `.block-loop-items[data-plugin="slider"]`. * Egraweb also forces `.entry-content-wrap .block-loop-items` to one column on * narrow screens and removes its native padding. Scope the correction to our * discovery rails only and never alter the page/root Gutenberg width. */ .mi-music-single .mi-discovery-loop-shell{ display:flow-root; width:100%; max-width:100%; min-width:0; overflow:visible; box-sizing:border-box; } .mi-music-single .mi-discovery-loop-shell > .mi-discovery-loop-title{ box-sizing:border-box; } .mi-music-single .mi-discovery-loop-viewport{ width:100%; max-width:100%; min-width:0; overflow:visible; box-sizing:border-box; } .mi-music-single .mi-discovery-loop-viewport > .wp-block-loop.wp-block-loop-slider{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; overflow:visible!important; box-sizing:border-box; } /* A playlist can use any post type selected in Play Block settings. The * guaranteed `.mi-music-single--playlist` body class makes this spacing work * even when WordPress' body class is `single-post`, `single-page`, etc. The * shell is a flex item inside Egraweb's `.entry-content-inner`, so its margin * cannot collapse into the footer. */ .mi-music-single--playlist .mi-playlist-suggestions-shell{ margin-bottom:clamp(4rem,6vw,6rem)!important; padding-bottom:0!important; } @media (max-width:576px){ /* The slider JS is attached to THIS child, not to the Loop root. Make only * this internal scrolling viewport full-bleed; section/header width remains * untouched and continues to follow Waveme. */ .mi-music-single .mi-discovery-loop-viewport > .wp-block-loop.wp-block-loop-slider > .block-loop-items[data-plugin="slider"]{ box-sizing:border-box; width:100vw!important; max-width:100vw!important; min-width:0!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; margin-top:0!important; margin-bottom:1.5rem!important; padding-left:var(--x-gap,1rem)!important; padding-right:var(--x-gap,1rem)!important; /* Egraweb forces this to 1 below 400px inside entry-content-wrap. Native * Play/Loop rails use two compact cards on phone; force exactly that only * for these discovery rails so a useful part of the next card is visible. */ --grid-columns:2!important; --loop-max-width:85%; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:none!important; scroll-padding-left:var(--x-gap,1rem); scroll-padding-right:var(--x-gap,1rem); } /* Disable the redundant overflow layer on Loop's root. Nested horizontal * scrollers are what caused the hard clipping boundary in earlier builds. */ .mi-music-single .mi-discovery-loop-viewport > .wp-block-loop.wp-block-loop-slider{ overflow:visible!important; } .mi-music-single--playlist .mi-playlist-suggestions-shell{ margin-bottom:4rem!important; } } /* dev163 — MusicInsight comments: stable spacing, staff identity, persistent composer CTA and privacy-safe names. */ .mi-comments{ --mi-comment-bg:rgba(14,17,22,.92); --mi-comment-bg-soft:rgba(20,24,31,.78); --mi-comment-border:rgba(255,255,255,.075); --mi-comment-text:#f4f5f7; --mi-comment-muted:#8f98a7; --mi-comment-accent:var(--color-primary,#ff6700); --mi-level-1:#929ba8; --mi-level-2:#4f89ed; --mi-level-3:#d88343; --mi-level-4:#9568e8; --mi-level-5:#d0a339; display:block!important; margin-top:34px!important; padding-top:0!important; border-top:0!important; color:var(--mi-comment-text); box-sizing:border-box; min-width:0; max-width:100%; overflow-x:clip; } .mi-comments,.mi-comments *,.mi-comments *::before,.mi-comments *::after{box-sizing:border-box} .mi-comments>*{min-width:0;max-width:100%} .mi-comments-header{display:flex!important;width:100%!important;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px!important;padding:15px 18px;border:1px solid var(--mi-comment-border);border-radius:14px;background:rgba(8,10,14,.82)} .mi-comments-header>div{display:flex;align-items:baseline;gap:10px;min-width:0} .mi-comments-eyebrow{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--mi-comment-accent)} .mi-comments-header h3{margin:0!important;font-size:20px;line-height:1.2;font-weight:800;color:var(--mi-comment-text)} .mi-comments-count{display:grid;place-items:center;min-width:34px;height:28px;padding:0 9px;border:1px solid var(--mi-comment-border);border-radius:999px;font:700 12px/1 Arial,Helvetica,sans-serif;color:var(--mi-comment-muted);background:rgba(255,255,255,.035)} .mi-comments .comment-list,.mi-comments .children{list-style:none!important;margin:0!important;padding:0!important;min-width:0!important;max-width:100%!important} .mi-comments .mi-comment-list{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important} .mi-comments .children{display:flex!important;flex-direction:column!important;gap:12px!important;width:auto!important} .mi-comments .comment-list .mi-comment-item,.mi-comments .children .mi-comment-item{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important} .mi-comments .mi-comment-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;width:100%;min-width:0;max-width:100%;padding:15px 16px;border:1px solid var(--mi-comment-border);border-radius:15px;background:linear-gradient(180deg,rgba(16,19,25,.96),rgba(12,15,20,.93));box-shadow:0 8px 22px rgba(0,0,0,.08);overflow:hidden} .mi-comments .mi-comment-card--staff{position:relative;border-color:color-mix(in srgb,var(--mi-comment-accent) 30%,var(--mi-comment-border));border-inline-start:3px solid color-mix(in srgb,var(--mi-comment-accent) 78%,#ff9a4b);background:linear-gradient(115deg,color-mix(in srgb,var(--mi-comment-accent) 8%,rgba(18,20,25,.97)) 0%,rgba(15,18,23,.96) 44%,rgba(11,14,19,.94) 100%);box-shadow:0 9px 26px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.025)} .mi-comments .mi-comment-card--staff:after{content:"";position:absolute;inset-inline-start:0;top:18px;width:3px;height:34px;border-radius:3px;background:linear-gradient(180deg,#ff8a38,var(--mi-comment-accent));box-shadow:0 0 13px color-mix(in srgb,var(--mi-comment-accent) 35%,transparent)} .mi-comment-avatar-wrap{--mi-comment-level:var(--mi-level-1);position:relative;width:48px;height:48px;align-self:start} .mi-comment-avatar-wrap.is-level-1{--mi-comment-level:var(--mi-level-1)} .mi-comment-avatar-wrap.is-level-2{--mi-comment-level:var(--mi-level-2)} .mi-comment-avatar-wrap.is-level-3{--mi-comment-level:var(--mi-level-3)} .mi-comment-avatar-wrap.is-level-4{--mi-comment-level:var(--mi-level-4)} .mi-comment-avatar-wrap.is-level-5{--mi-comment-level:var(--mi-level-5)} .mi-comment-avatar-wrap.is-staff{--mi-comment-level:#f3a24d} .mi-comment-avatar-wrap>a{display:block;width:100%;height:100%;border-radius:50%} .mi-comment-avatar-wrap img{display:block!important;width:48px!important;height:48px!important;max-width:48px!important;object-fit:cover!important;border:2px solid color-mix(in srgb,var(--mi-comment-level) 82%,#1c2129)!important;border-radius:50%!important;background:#1b2027;box-shadow:0 0 0 3px color-mix(in srgb,var(--mi-comment-level) 10%,transparent),0 8px 18px rgba(0,0,0,.15)} .mi-comment-avatar{display:block!important} .mi-comment-avatar-wrap.is-staff img{box-shadow:0 0 0 3px rgba(255,103,0,.10),0 0 18px rgba(255,103,0,.12),0 8px 18px rgba(0,0,0,.15)!important} .mi-comment-level-badge{position:absolute;left:-3px;bottom:-4px;display:grid;place-items:center;min-width:22px;height:18px;padding:0 4px;border:2px solid #10141a;border-radius:999px;background:#0c1118;color:var(--mi-comment-level);font:800 9px/1 Arial,Helvetica,sans-serif;box-shadow:0 3px 10px rgba(0,0,0,.24)} .mi-comment-main{min-width:0;max-width:100%;overflow:hidden} .mi-comment-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin-bottom:7px} .mi-comment-author-line{display:flex;align-items:center;gap:7px;min-width:0} .mi-comment-author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800;color:var(--mi-comment-text)!important} .mi-comment-staff-badge{flex:0 0 auto;padding:4px 8px;border:1px solid rgba(255,126,38,.34);border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.02em;color:#ff9147;background:rgba(255,103,0,.09);box-shadow:inset 0 0 12px rgba(255,103,0,.03)} .mi-comment-time{flex:0 0 auto;font-size:10.5px;color:var(--mi-comment-muted)!important} .mi-comment-content{min-width:0;max-width:100%;font-size:13.5px;line-height:1.9;color:#dfe3e8;overflow-wrap:anywhere;word-break:break-word} .mi-comment-content img,.mi-comment-content video,.mi-comment-content iframe{max-width:100%!important;height:auto} .mi-comment-content p{margin:0 0 7px!important;color:inherit!important} .mi-comment-content p:last-child{margin-bottom:0!important} .mi-comment-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;direction:ltr!important;width:100%!important;max-width:100%!important;gap:0!important;margin-top:10px!important;padding:0!important;text-align:right!important} .mi-comment-actions .comment-toolbar{display:flex!important;align-items:center!important;justify-content:flex-start!important;direction:rtl;width:auto!important;max-width:100%!important;margin:0 0 0 auto!important;padding:0!important;-webkit-padding-start:0!important;gap:7px!important;line-height:1.5;float:none!important;position:static!important;inset:auto!important;transform:none!important} .mi-comment-actions .comment-toolbar>.btn-like,.mi-comment-actions .comment-toolbar>.comment-reply-link,.mi-comment-actions .comment-toolbar>.mi-comment-login-vote{flex:0 0 auto!important;margin:0!important} .mi-comment-login-vote{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:48px;height:38px;padding:0 10px!important;border:1px solid var(--mi-comment-border)!important;border-radius:9px!important;color:var(--mi-comment-text)!important;background:rgba(255,255,255,.035)!important;text-decoration:none!important;line-height:1!important;box-shadow:none!important} .mi-comment-login-vote:hover{color:var(--mi-comment-text)!important;border-color:rgba(255,255,255,.14)!important;background:rgba(255,255,255,.055)!important} .mi-comment-login-vote svg{display:block;width:18px;height:18px;flex:0 0 auto} .mi-comment-login-vote .count{display:inline-block;min-width:7px;font-size:11px;font-weight:700;line-height:1;color:inherit} .mi-comment-actions .comment-reply-link{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid var(--mi-comment-border);border-radius:8px;font-size:10.5px;font-weight:700;color:var(--mi-comment-muted)!important;text-transform:none;background:rgba(255,255,255,.02)} .mi-comment-actions .comment-reply-link:hover{color:var(--mi-comment-text)!important;border-color:rgba(255,255,255,.14)} .mi-comment-card--staff .comment-reply-link{border-color:rgba(255,126,38,.16);background:rgba(255,103,0,.035)} .mi-comment-awaiting{margin:0 0 8px;padding:7px 9px;border-radius:8px;font-size:11px;color:#d9aa56;background:rgba(217,170,86,.08)} .mi-comments .children{position:relative;margin-top:11px!important;margin-inline-start:28px!important;padding-inline-start:14px!important;border-inline-start:1px solid rgba(255,255,255,.09)} .mi-comments .children .mi-comment-card{background:linear-gradient(180deg,rgba(18,21,27,.9),rgba(14,17,22,.87))} .mi-comments .children .mi-comment-card--staff{background:linear-gradient(115deg,rgba(45,25,15,.28),rgba(17,19,24,.96) 48%,rgba(13,16,21,.93))} .mi-comments .children .children{margin-inline-start:10px!important;padding-inline-start:10px!important} .mi-comment-compose{position:relative!important;display:block!important;width:100%!important;margin:0 0 16px!important;padding:14px 16px!important;border:1px solid var(--mi-comment-border);border-radius:15px;background:linear-gradient(180deg,rgba(18,21,27,.95),rgba(13,16,21,.92));overflow:visible!important} .mi-comment-compose-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .mi-comment-compose-head>div:last-child{display:grid;gap:1px} .mi-comment-compose-head strong{font-size:13px;color:var(--mi-comment-text)} .mi-comment-compose-head small{font-size:10.5px;color:var(--mi-comment-muted)} .mi-comment-compose-avatar{--mi-compose-level:var(--mi-level-1);width:44px;height:44px;border-radius:50%} .mi-comment-compose-avatar.is-level-1{--mi-compose-level:var(--mi-level-1)} .mi-comment-compose-avatar.is-level-2{--mi-compose-level:var(--mi-level-2)} .mi-comment-compose-avatar.is-level-3{--mi-compose-level:var(--mi-level-3)} .mi-comment-compose-avatar.is-level-4{--mi-compose-level:var(--mi-level-4)} .mi-comment-compose-avatar.is-level-5{--mi-compose-level:var(--mi-level-5)} .mi-comment-compose-avatar img{display:block;width:44px!important;height:44px!important;object-fit:cover;border:2px solid var(--mi-compose-level);border-radius:50%!important} .mi-comment-compose .comment-reply-title{display:none!important} .mi-comment-compose .mi-comment-form{display:block!important;max-height:none!important;overflow:visible!important} .mi-comment-field{position:relative} .mi-comment-field textarea{display:block;width:100%!important;min-height:70px!important;max-height:240px;padding:13px 14px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important;outline:0!important;resize:vertical;background:rgba(4,7,11,.58)!important;color:var(--mi-comment-text)!important;font:inherit!important;font-size:13px!important;line-height:1.8!important;transition:min-height .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease} .mi-comment-field textarea::placeholder{color:#727c89} .mi-comment-compose:focus-within .mi-comment-field textarea{min-height:108px!important;border-color:color-mix(in srgb,var(--mi-comment-accent) 36%,rgba(255,255,255,.08))!important;background:rgba(5,8,12,.8)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--mi-comment-accent) 6%,transparent)} .mi-comment-submit-wrap{display:flex!important;justify-content:flex-end!important;align-items:center;direction:ltr!important;width:100%!important;min-height:42px;margin:10px 0 0!important;opacity:1!important;overflow:visible!important;transform:none!important;pointer-events:auto!important} .mi-comment-submit{display:inline-flex!important;direction:rtl!important;align-items:center!important;justify-content:center!important;min-width:118px!important;height:38px!important;padding:0 20px!important;border:1px solid rgba(255,126,38,.48)!important;border-radius:10px!important;font-family:inherit!important;font-size:12.5px!important;font-weight:800!important;line-height:1!important;color:#fff!important;background:linear-gradient(135deg,#ff7a21,var(--mi-comment-accent))!important;box-shadow:0 8px 20px rgba(255,103,0,.16)!important;transition:opacity .16s ease,filter .16s ease,transform .16s ease,box-shadow .16s ease!important} .mi-comment-submit:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,103,0,.22)!important} .mi-comment-submit:disabled,.mi-comment-submit[aria-disabled="true"]{opacity:.34!important;filter:saturate(.45) brightness(.82);cursor:not-allowed!important;box-shadow:none!important;transform:none!important} .mi-comment-cancel{position:absolute;top:14px;left:16px;z-index:2} .mi-comment-cancel:empty{display:none} .mi-comment-cancel a,#cancel-comment-reply-link{position:static!important;padding:4px 8px!important;border-radius:7px;font-size:10px!important;color:var(--mi-comment-muted)!important;background:rgba(255,255,255,.04)} .mi-comment-honeypot{position:absolute!important;inset:0 auto auto 0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important} .mi-comment-login-card{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%!important;margin:0 0 16px!important;padding:14px 16px;border:1px solid var(--mi-comment-border);border-radius:14px;background:rgba(16,19,25,.88)} .mi-comment-login-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--mi-comment-accent) 26%,var(--mi-comment-border));border-radius:12px;font:800 17px/1 Arial;color:var(--mi-comment-accent);background:color-mix(in srgb,var(--mi-comment-accent) 6%,transparent)} .mi-comment-login-card>div:nth-child(2){display:grid;gap:3px} .mi-comment-login-card strong{font-size:13px;color:var(--mi-comment-text)} .mi-comment-login-card span{font-size:10.5px;color:var(--mi-comment-muted)} .mi-comment-login-card .button{white-space:nowrap;border-radius:9px!important;font-size:11px!important} .mi-comments-empty{width:100%;padding:22px;text-align:center;border:1px dashed var(--mi-comment-border);border-radius:13px;font-size:12px;color:var(--mi-comment-muted)} .mi-comments-pagination{display:flex;justify-content:center;margin-top:16px} .mi-comments-pagination .page-numbers{display:inline-grid;place-items:center;min-width:34px;height:34px;margin:0 3px;padding:0 9px;border:1px solid var(--mi-comment-border);border-radius:9px;color:var(--mi-comment-muted);background:rgba(15,18,24,.8)} .mi-comments-pagination .page-numbers.current{border-color:color-mix(in srgb,var(--mi-comment-accent) 35%,var(--mi-comment-border));color:#fff;background:color-mix(in srgb,var(--mi-comment-accent) 18%,rgba(15,18,24,.8))} html:not(.dark) .mi-comments{--mi-comment-bg:#fff;--mi-comment-bg-soft:#f7f8fa;--mi-comment-border:rgba(27,34,45,.10);--mi-comment-text:#1c222b;--mi-comment-muted:#737d8a} html:not(.dark) .mi-comments-header,html:not(.dark) .mi-comment-compose,html:not(.dark) .mi-comment-login-card{background:#fff;box-shadow:0 8px 24px rgba(35,43,55,.05)} html:not(.dark) .mi-comment-card{background:linear-gradient(180deg,#fff,#fafbfc);box-shadow:0 8px 22px rgba(35,43,55,.045)} html:not(.dark) .mi-comment-card--staff{border-color:rgba(235,112,31,.22);background:linear-gradient(115deg,#fff8f2,#fff 45%,#fafbfc)} html:not(.dark) .mi-comments .children .mi-comment-card{background:#fbfcfd} html:not(.dark) .mi-comments .children .mi-comment-card--staff{background:linear-gradient(115deg,#fff8f2,#fff 48%,#fafbfc)} html:not(.dark) .mi-comment-content{color:#38414d} html:not(.dark) .mi-comment-field textarea{background:#f7f8fa!important;color:#202731!important;border-color:rgba(27,34,45,.10)!important} html:not(.dark) .mi-comment-level-badge{border-color:#fff;background:#fff} @supports not (overflow:clip){.mi-comments{overflow-x:hidden}} @media(max-width:767px){ .mi-comment-actions{direction:ltr!important;justify-content:flex-start!important;text-align:left!important} .mi-comment-actions .comment-toolbar{direction:rtl!important;margin-left:0!important;margin-right:auto!important} .mi-comments{margin-top:24px!important} .mi-comments-header{padding:12px 13px;border-radius:12px} .mi-comments-header h3{font-size:17px} .mi-comments-eyebrow{font-size:9px} .mi-comments .mi-comment-list,.mi-comments .children{gap:10px!important} .mi-comments .mi-comment-card{grid-template-columns:42px minmax(0,1fr);gap:10px;padding:12px;border-radius:12px} .mi-comments .mi-comment-card--staff{border-inline-start-width:2px} .mi-comment-avatar-wrap,.mi-comment-avatar{width:42px!important;height:42px!important} .mi-comment-level-badge{left:-2px;bottom:-4px;min-width:20px;height:17px;font-size:8px} .mi-comment-author{font-size:13px} .mi-comment-time{font-size:9.5px} .mi-comment-content{font-size:12.5px;line-height:1.85} .mi-comments .children{margin-top:9px!important;margin-inline-start:7px!important;padding-inline-start:7px!important} .mi-comments .children .children{margin-inline-start:0!important;padding-inline-start:5px!important} .mi-comment-compose{padding:12px;margin-bottom:13px!important;border-radius:12px} .mi-comment-compose-head{margin-bottom:8px} .mi-comment-compose-avatar,.mi-comment-compose-avatar img{width:40px!important;height:40px!important} .mi-comment-field textarea{min-height:66px!important} .mi-comment-compose:focus-within .mi-comment-field textarea{min-height:96px!important} .mi-comment-submit-wrap{min-height:40px;margin-top:9px!important} .mi-comment-submit{min-width:108px!important;height:37px!important;padding:0 17px!important;font-size:12px!important} .mi-comment-login-card{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:12px} .mi-comment-login-icon{width:38px;height:38px} .mi-comment-login-card .button{grid-column:1/-1;width:100%;justify-content:center} } /* dev169 — Desktop-only physical anchor for comment actions. * Do not rely on RTL flex/grid track direction here: Waveme and Play Block * both touch the toolbar. The footer reserves real height and the toolbar is * pinned to the physical right edge of the comment text column. Mobile keeps * using the <=767px rules above unchanged. */ @media (min-width:768px){ .mi-comments .mi-comment-actions{ display:block!important; position:relative!important; width:100%!important; max-width:100%!important; min-height:40px!important; height:40px!important; margin-top:10px!important; padding:0!important; direction:ltr!important; text-align:right!important; overflow:visible!important; } .mi-comments .mi-comment-actions>.comment-toolbar{ display:flex!important; position:absolute!important; right:0!important; left:auto!important; top:0!important; bottom:auto!important; inset-inline-start:auto!important; inset-inline-end:auto!important; transform:none!important; align-items:center!important; justify-content:flex-start!important; direction:rtl!important; width:max-content!important; max-width:100%!important; margin:0!important; padding:0!important; -webkit-padding-start:0!important; float:none!important; gap:7px!important; } } /* ============================================================ * dev173 — approved Egraweb guest/member download access gates * Scope is intentionally limited to the compatibility renderer. VIP users * remain on Egraweb's canonical quality picker without these rules. * ============================================================ */ .download-area .popup.mi-download-gate-popup { box-sizing:border-box!important; position:fixed!important; inset:0!important; margin:auto!important; width:min(372px,calc(100vw - 24px))!important; height:max-content!important; max-height:calc(100dvh - 24px)!important; overflow:hidden!important; padding:10px!important; border:1px solid rgba(255,255,255,.035)!important; border-radius:12px!important; background:#1b1d22!important; color:#f7f8fa!important; text-align:center!important; transform:none!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:0 24px 72px rgba(0,0,0,.52)!important; z-index:100140!important; } .mi-download-gate-popup .mi-download-gate { display:flex; flex-direction:column; align-items:center; width:100%; direction:rtl; text-align:center; } .mi-download-gate-popup .mi-download-gate__icon { display:flex; align-items:center; justify-content:center; width:96px; height:96px; margin:2px auto 4px; color:#f5f6f8; } .mi-download-gate-popup .mi-download-gate__icon i { margin:0!important; font-size:74px!important; line-height:1!important; font-weight:200!important; } .mi-download-gate-popup .mi-download-gate__copy { width:100%; margin:2px 0 20px!important; padding:0 8px!important; color:#f5f6f8!important; font-size:13.5px!important; line-height:1.75!important; font-weight:800!important; text-align:center!important; } .mi-download-gate-popup .mi-download-gate__auth { width:100%; margin:0!important; } .download-area .popup.mi-download-gate-popup .mi-download-gate__primary { display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:45px!important; margin:0!important; padding:0 18px!important; border:0!important; border-radius:6px!important; background:#ff6508!important; color:#fff!important; box-shadow:none!important; text-decoration:none!important; font-size:13px!important; font-weight:900!important; line-height:1!important; } .download-area .popup.mi-download-gate-popup .mi-download-gate__primary.is-compact { width:auto!important; min-width:151px!important; margin-bottom:20px!important; } .download-area .popup.mi-download-gate-popup .mi-download-gate__close { display:flex!important; align-items:center!important; justify-content:center!important; gap:5px; width:100%!important; min-height:43px!important; margin:12px 0 0!important; padding:0 16px!important; border:0!important; border-radius:6px!important; background:#101112!important; color:#f3f4f6!important; text-decoration:none!important; font-size:13px!important; font-weight:800!important; box-shadow:none!important; } .download-area .popup.mi-download-gate-popup .mi-download-gate__close:hover, .download-area .popup.mi-download-gate-popup .mi-download-gate__close:focus-visible { color:#fff!important; background:#0c0d0e!important; outline:1px solid rgba(255,255,255,.08)!important; } @media (max-width:480px) { .download-area .popup.mi-download-gate-popup { width:calc(100vw - 24px)!important; } .mi-download-gate-popup .mi-download-gate__icon { width:88px; height:88px; } .mi-download-gate-popup .mi-download-gate__icon i { font-size:68px!important; } .mi-download-gate-popup .mi-download-gate__copy { font-size:13px!important; padding-inline:5px!important; } }