html, body { height: auto; min-height: 100vh; overflow: auto; }
.rate-top { position: relative; z-index: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; padding: 22px 32px; }
.rate-top h1 { font-size: 1.6rem; }
.rate-sub { opacity: .6; font-size: .9rem; }
.rate-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 300px 1fr; gap: 20px; padding: 0 32px 24px; align-items: start; }
.rate-grid.collapsed { grid-template-columns: 76px 1fr; }
.rate-side { padding: 16px; border-radius: 22px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.side-head h2 { font-size: .95rem; }
.side-head span { opacity: .6; }
.collapsed .side-head h2, .collapsed #saved span, .collapsed #saved i { display: none; }
#saved { list-style: none; display: flex; flex-direction: column; gap: 8px; }
#saved button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .05); color: inherit; text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
#saved button:hover, #saved button:focus-visible { border-color: var(--a); background: var(--t); outline: 0; }
#saved img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--t); flex: none; }
#saved span { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .8rem; }
#saved b { font-weight: 500; opacity: .6; font-size: .7rem; }
#saved em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#saved i { font-style: normal; font-size: .75rem; color: var(--a); }
#saved .empty { opacity: .5; font-size: .85rem; padding: 6px; }
.rate-tabs { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); margin-bottom: 14px; }
.rate-tabs button { padding: 9px 18px; border-radius: 999px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .25s, color .25s; }
.rate-tabs button.on { background: var(--a); color: #04110a; }
#q { display: block; width: 100%; height: 50px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(14, 19, 29, .75); backdrop-filter: blur(18px); color: inherit; font: inherit; outline: 0; user-select: text; }
#q:focus { border-color: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent); }
#msg { min-height: 1.4em; margin: 8px 4px; font-size: .85rem; opacity: .7; }
.rate-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.rate-results button { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; border: 1px solid transparent; background: rgba(14, 19, 29, .75); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .25s, border-color .25s; }
.rate-results button:hover, .rate-results button:focus-visible { transform: translateY(-4px); border-color: var(--a); outline: 0; }
.rate-results img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--t); }
.rate-results[data-mode=artist] img { border-radius: 50%; }
.rate-results b { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate-results small { font-size: .72rem; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate-stage { display: grid; grid-template-columns: 300px 1fr; gap: 30px; padding: 28px; border-radius: 26px; }
.rate-stage[hidden] { display: none; }
.cover-wrap { perspective: 900px; display: grid; place-items: center; }
.cover-wrap img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; background: var(--t); transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-radius .4s; }
[data-mode=album] .cover-wrap img { border-radius: 6px; transform: rotateY(-16deg); box-shadow: 18px 22px 46px rgba(0, 0, 0, .7), inset 6px 0 10px rgba(255, 255, 255, .12); }
[data-mode=album] .cover-wrap img:hover { transform: rotateY(-4deg) scale(1.03); }
[data-mode=artist] .cover-wrap img { border-radius: 50%; box-shadow: 0 20px 50px rgba(0, 0, 0, .7), 0 0 60px var(--g); }
[data-mode=music] .cover-wrap img { border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
.rate-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rate-form h2 { font-size: 1.5rem; }
#pSub { opacity: .65; }
#pLink { color: var(--a); font-size: .8rem; width: fit-content; }
.stars { display: flex; gap: 6px; width: fit-content; }
.stars:focus-visible { outline: 2px solid var(--a); outline-offset: 6px; border-radius: 8px; }
.s { position: relative; width: 42px; height: 42px; cursor: pointer; transition: transform .15s; }
.s:hover { transform: scale(1.1); }
.s svg { width: 42px; height: 42px; max-width: none; display: block; }
.s .o polygon { fill: none; stroke: currentColor; stroke-opacity: .4; stroke-width: 1.4; stroke-linejoin: round; }
.fw { position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); overflow: hidden; transition: width .22s ease; }
.fw polygon { fill: var(--a); stroke: var(--a); stroke-width: 1.4; stroke-linejoin: round; }
#rv { opacity: .6; font-size: .78rem; }
#review { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; resize: vertical; outline: 0; user-select: text; }
#review:focus { border-color: var(--a); }
.sync { display: flex; align-items: center; gap: 10px; font-size: .8rem; opacity: .8; cursor: pointer; }
.sync input { accent-color: var(--a); width: 16px; height: 16px; }
.row2 { display: flex; align-items: center; gap: 16px; }
.row2 .pbtn { padding: 0 28px; height: 46px; }
.nologin { position: relative; z-index: 2; max-width: 420px; margin: 8vh auto; padding: 32px; border-radius: 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.nologin[hidden] { display: none; }
.nologin .pbtn { display: inline-grid; place-items: center; padding: 0 28px; height: 46px; text-decoration: none; }
.rate-foot { position: relative; z-index: 2; text-align: center; font-size: .75rem; opacity: .5; padding: 0 0 28px; }
@media (max-width: 860px) {
  .rate-grid, .rate-grid.collapsed, .rate-stage { grid-template-columns: 1fr; }
  .rate-side { position: static; max-height: none; }
  .rate-top, .rate-grid { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fw, .s, .cover-wrap img { transition: none; } }
html { color-scheme: dark; }
.rate-side, .rate-stage { max-width: none; width: auto; }
.rate-top { position: relative; inset: auto; height: auto; padding: 22px 32px; pointer-events: auto; justify-content: flex-start; }
#review { scrollbar-width: thin; scrollbar-color: var(--a) transparent; overflow-x: hidden; }
@media (max-width: 860px) { .rate-top { padding: 18px 16px; } }
.suggest { margin: 18px 4px 8px; }
.suggest[hidden] { display: none; }
.suggest p { font-size: .8rem; font-weight: 600; letter-spacing: .4px; opacity: .6; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.chips button:hover, .chips button:focus-visible { background: var(--t); border-color: var(--a); transform: translateY(-2px); outline: 0; }

.pf-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.pf-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.pf-text b { font-weight: 600; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-text small { font-size: .62rem; opacity: .45; font-weight: 500; }
.login-pill-btn { height: 44px; padding: 0 16px 0 7px; }
.rate-top { justify-content: space-between; align-items: center; }
.rt-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.rt-nav { display: flex; align-items: center; gap: 10px; }
.rt-nav .ib svg, .pf-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-toggle { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(135deg, var(--t), transparent); color: inherit; cursor: pointer; transition: box-shadow .25s, border-color .25s, transform .25s; }
.side-toggle:hover, .side-toggle:focus-visible { border-color: var(--a); outline: 0; }
.side-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-toggle .chev { transform-origin: 12px 12px; transition: transform .3s; }
.collapsed .side-toggle .chev { transform: scaleX(-1); }
.collapsed .side-head { justify-content: center; }
#saved { gap: 10px; }
.folder-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: border-color .2s, background .2s; }
.folder-head:hover, .folder-head:focus-visible { border-color: var(--a); background: var(--t); outline: 0; }
.folder-head svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.folder-head span { flex: 1; text-align: left; }
.folder-head em { font-style: normal; font-size: .72rem; opacity: .6; }
.folder ul { list-style: none; display: none; flex-direction: column; gap: 8px; margin: 8px 0 4px 6px; }
.folder.open ul { display: flex; }
.collapsed .folder-head { justify-content: center; padding: 10px 0; }
.collapsed .folder ul, .collapsed .folder-head span { display: none; }
.collapsed .folder-head em { display: none; }
@media (max-width: 860px) { .rt-nav { flex-wrap: wrap; } }

.rate-side { overflow-x: hidden; overflow-y: auto; z-index: 5; }
.side-toggle[aria-pressed=true] { border-color: var(--a); background: var(--t); }
.rate-grid .side-toggle .chev { transform: scaleX(-1); }
.rate-grid.pinned .side-toggle .chev { transform: none; }
.folder ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0 0 0 6px; max-height: 0; opacity: 0; transform: translateY(-8px); overflow: hidden; visibility: hidden; pointer-events: none; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), margin .3s ease, visibility 0s .45s; }
.rate-side.open .folder.open ul, .rate-side.open .folder.peek ul { max-height: 440px; opacity: 1; transform: none; visibility: visible; pointer-events: auto; margin: 8px 0 4px 6px; transition-delay: 0s; }
@media (min-width: 861px) {
  .rate-grid, .rate-grid.collapsed { grid-template-columns: 76px 1fr; transition: grid-template-columns .35s cubic-bezier(.2, .8, .2, 1); }
  .rate-grid.pinned { grid-template-columns: 300px 1fr; }
  .rate-side { width: 76px; padding: 16px 12px; transition: width .35s cubic-bezier(.2, .8, .2, 1), padding .35s ease, box-shadow .35s ease; }
  .rate-side.open { width: 300px; padding: 16px; }
  .rate-grid:not(.pinned) .rate-side.open { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
}
@media (prefers-reduced-motion: reduce) { .folder ul, .rate-side, .rate-grid { transition: none; } }
.rate-brand { color: inherit; text-decoration: none; border-radius: 8px; transition: color 0.25s var(--ease); }
.rate-top h1 > span { color: var(--a); }
.rate-brand:hover, .rate-brand:focus-visible { color: var(--a); outline: 0; }

.rate-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 1; color: var(--mu); }
.rate-foot nav { display: flex; gap: 16px; }
.rate-foot a { color: var(--mu); }
.rate-sub, #rv, .sync { opacity: 1; color: var(--mu); }
.rt-nav .install-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rate-results button:hover, .rate-results button:focus-visible { transform: none; translate: 0 -4px; }
.rate-results button { transition: translate .45s var(--ease), border-color .3s var(--ease); }
.rate-stage { background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)), var(--gl); }
@media (max-width: 760px) {
  .rate-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rt-nav .login-pill-btn .pf-text { display: none; }
  .rate-tabs { display: flex; width: 100%; }
  .rate-tabs button { flex: 1; white-space: nowrap; padding: 9px 10px; }
  .s, .s svg { width: 38px; height: 38px; }
}

/* ---------- Telas: Início (populares + sugestões) e Avaliar ---------- */
body[data-rview="home"] #app, body[data-rview="rate"] #homeView { display: none; }
/* Tamanho do wordmark vem de .rt-brand .wordmark-svg (aero.css) */
.rt-left { align-items: center; gap: 10px 28px; }
.rt-links { display: flex; align-items: center; gap: 6px; }
.rt-link { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--mu); font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.rt-link:hover { color: var(--tx); }
.rt-link[aria-current="page"] { color: var(--tx); background: rgba(255, 255, 255, .07); border-color: var(--glass-line); }
.rt-cta { height: 40px; padding: 0 18px; }
.rt-cta[aria-current="page"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 30%, transparent); }

.rate-home { position: relative; z-index: 2; width: min(1180px, 100%); margin: 0 auto; padding: 0 32px 40px; display: flex; flex-direction: column; gap: 36px; }
.rh-hero { min-height: clamp(300px, 46vh, 520px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; }
/* Tamanho da logo full da home: .rh-logo em aero.css */
.rh-cta { height: 52px; padding: 0 30px; font-size: .95rem; }
.rh-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rh-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.rh-head h2 { font-size: 1.3rem; }
.rh-head small { color: var(--mu); font-size: .8rem; }

.r-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 176px); gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 2px 12px; min-width: 0; scrollbar-width: thin; scrollbar-color: var(--a) transparent; }
.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; min-width: 0; }
.r-grid--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 18px; }
.r-grid--compact:empty { display: none; }
.r-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px; border-radius: 18px; border: 1px solid var(--glass-line); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); color: var(--tx); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; transition: translate .45s var(--ease), border-color .3s var(--ease), box-shadow .45s var(--ease); }
.r-card:hover, .r-card:focus-visible { translate: 0 -4px; border-color: color-mix(in srgb, var(--a) 55%, var(--glass-line)); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); outline: 0; }
.r-art { position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; border-radius: 12px; overflow: hidden; background: var(--t); }
.r-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-card.is-artist .r-art { border-radius: 50%; }
.r-rank { position: absolute; left: 8px; bottom: 8px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .85rem; color: var(--on-a); background: var(--a); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.r-card b { min-width: 0; font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-card small { min-width: 0; font-size: .74rem; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-mine { position: absolute; top: 16px; right: 16px; padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--on-a); background: var(--a); }
.r-card.is-loading { cursor: default; }
.r-card.is-loading .r-art, .r-card.is-loading b, .r-card.is-loading small { border-radius: 6px; color: transparent; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: rShimmer 1.4s linear infinite; }
.r-empty { color: var(--mu); font-size: .88rem; padding: 12px 2px; }
.r-shelf:has(> .r-empty), .r-grid:has(> .r-empty) { display: block; }
@keyframes rShimmer { to { background-position: -200% 0; } }

/* ---------- Intro do Rate: a logo provisória viaja até o topo do Início ---------- */
/* Trajeto da intro: a logo viaja até encaixar no cabeçalho (--dx/--dy/--ds via JS). Tamanho vem de .intro-logo svg (aero.css) */
.rate-intro-logo { position: relative; z-index: 1; transform-origin: 50% 50%; translate: calc(var(--dx, 0px) * var(--e)) calc(var(--dy, 0px) * var(--e)); scale: calc(1 + (var(--ds, 1) - 1) * var(--e)); will-change: translate, scale; }
html.intro-on .rh-logo { opacity: 0; }
html.intro-on .rh-hero > :not(.rh-logo), html.intro-on .rh-sec, html.intro-on .rate-foot { opacity: var(--ui); filter: blur(var(--uiblur)); translate: 0 calc((1 - var(--ui)) * 24px); pointer-events: none; transition: none; }

/* ---------- Mobile (a barra inferior agora é a mesma em todas as páginas: aero.css) ---------- */
@media (max-width: 760px) {
  .rt-links { display: none; }
  /* Perfil fica no cabeçalho também no celular, só o avatar (Instalar · Engrenagem · Perfil) */
  .rt-nav .login-pill-btn { width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; }
  .rt-nav .login-pill-btn .pf-icon, .rt-nav .login-pill-btn .pf-ava { width: 30px; height: 30px; }
  .rate-top { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; }
  .rt-left, .rt-nav { min-width: 0; }
  .rt-brand .wordmark-svg { height: 22px; }
  .rt-nav { gap: 6px; flex-wrap: nowrap; }
  .rt-nav .ib, .rt-nav .install-pill { width: 38px; height: 38px; }
  .rate-home { padding: 0 16px 28px; gap: 28px; }
  .rh-hero { min-height: 0; padding: 24px 0 4px; gap: 24px; }
  .rh-cta { width: 100%; max-width: 320px; }
  .r-shelf { grid-auto-columns: 42%; gap: 12px; }
  .r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---------- Musify Music (via Spotify) no cabeçalho ---------- */
.music-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; color: var(--tx); text-decoration: none; }
/* O ícone do botão é a logo oficial do Musify Music (SVG inline, ver .pill-logo em aero.css) */

/* ---------- Sugestões: atualizar com giro e troca suave ---------- */
.rh-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.r-refresh { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--glass-line); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); color: var(--tx); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease); }
.r-refresh:hover:not(:disabled) { border-color: var(--a); }
.r-refresh:disabled { cursor: progress; }
.r-refresh svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--a); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .6s var(--ease); }
.r-refresh:hover:not(:disabled) svg { rotate: 90deg; }
.r-refresh.spinning svg { animation: rSpin .8s linear infinite; }
@keyframes rSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
#suggestions { transition: opacity .26s var(--ease), translate .26s var(--ease); }
#suggestions.is-swapping { opacity: 0; translate: 0 8px; }

@media (min-width: 761px) and (max-width: 1180px) {
  .music-pill .pf-text { display: none; }
  .music-pill { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 760px) {
  .music-pill .pf-text { display: none; }
  .music-pill { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .rh-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .r-refresh.spinning svg { animation: none; }
  #suggestions { transition: none; }
}

/* Visitante sem conta: as seções convidam a entrar */
.r-lock { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--tx) 4%, transparent); text-align: center; }
.r-lock p { max-width: 440px; line-height: 1.55; }
.r-lock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Fundo do Rate mais discreto: as capas giram desfocadas e a marca e os cards ficam em primeiro plano.
   Na intro o desfoque cresce junto com --p e termina igual ao da home (sem salto) */
body.rate-page[data-view="home"] .orbit { filter: blur(4px) saturate(0.9) brightness(0.85); opacity: 0.7; }
html.intro-on body.rate-page .orbit { filter: blur(calc(var(--p, 0) * 4px)) saturate(calc(1 - var(--p, 0) * 0.1)) brightness(calc(1 - var(--p, 0) * 0.15)); opacity: calc(1 - var(--p, 0) * 0.3); transition: none; }

/* Sobre o Musify: Music em pausa e convite para compartilhar */
.about-soon h4, .about-share h4 { display: flex; align-items: center; gap: 8px; color: var(--tx); }
.about-tag { padding: 2px 8px; border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--a); background: color-mix(in srgb, var(--a) 14%, transparent); }
.about-share { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border-color: color-mix(in srgb, var(--a) 30%, transparent); background: color-mix(in srgb, var(--a) 7%, transparent); }
.about-share h4 { margin-bottom: 0; }
.about-share .m-btn { min-width: 0; }
.about-note { margin-top: 12px; font-size: 0.72rem; color: var(--mu); }