Exit code: 0
Wall time: 1.2 seconds
Total output lines: 929
Output:
/* Visual transportado do Músicas do Noé: claro, azul-marinho, macio e mobile-first. */
:root {
  --noe-bg: #f8fbff;
  --noe-surface: #ffffff;
  --noe-soft: #f0f4f9;
  --noe-border: #e5e9f0;
  --noe-border-strong: #d7e1ee;
  --noe-navy: #001f54;
  --noe-navy-2: #1b447a;
  --noe-muted: #7a8da6;
  --noe-muted-2: #4a698d;
  --noe-blue: #4a90e2;
  --noe-blue-soft: #eaf5ff;
  --noe-shadow: 0 10px 28px rgba(0, 31, 84, .055);
  --noe-shadow-lift: 0 12px 32px -4px rgba(0, 31, 84, .16);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--noe-navy);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--noe-bg); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--noe-navy);
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 233, 251, .82), transparent 32rem),
    var(--noe-bg);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  font-feature-settings: 'cv11', 'ss01';
}
body, button, input, select, textarea { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.noise, .skip-link, .sidebar, .topbar { display: none !important; }

.app-shell { display: block; width: 100%; min-height: 100dvh; max-width: 42rem; margin: 0 auto; padding-top: env(safe-area-inset-top, 0px); }
.main-content { min-width: 0; padding: 0 0 calc(5.5rem + env(safe-area-inset-bottom)); }
.feedback-region { width: 100%; max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
.feedback { margin-top: .75rem; border: 1px solid var(--noe-border); border-radius: 1rem; background: rgba(255,255,255,.9); color: var(--noe-navy); box-shadow: 0 2px 14px rgba(0,31,84,.05); }
.view-root { width: 100%; max-width: 42rem; margin: 0 auto; padding: 0 0 1.25rem; }

.page-heading { display: block; margin: 0; padding: 2rem 1.25rem 1.25rem; }
.page-heading h1 { margin: .3rem 0 0; color: var(--noe-navy); font-size: 2rem; line-height: 1.12; letter-spacing: -.055em; font-weight: 800; }
.page-heading p { max-width: 30rem; margin: .45rem 0 0; color: rgba(0,31,84,.55); font-size: .875rem; line-height: 1.55; font-weight: 500; }
.eyebrow { color: var(--noe-blue); font-size: .625rem; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.noe-page-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
  background: rgba(248, 251, 255, .94);
  box-shadow: 0 1px 0 rgba(216, 233, 251, .7);
  backdrop-filter: blur(18px);
  isolation: isolate;
}
.noe-page-header::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: env(safe-area-inset-top, 0px);
  content: '';
  pointer-events: none;
  background: inherit;
}
.noe-page-header h1 { margin: .25rem 0 0; color: var(--noe-navy); font-size: 1.25rem; line-height: 1.25; letter-spacing: -.045em; font-weight: 800; }
.noe-page-header > div > p:last-child { max-width: 28rem; margin: .35rem 0 0; color: rgba(0,31,84,.55); font-size: .75rem; line-height: 1.5; font-weight: 500; }
.noe-avatar { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--noe-navy); box-shadow: 0 8px 20px -4px rgba(0,31,84,.12); font-size: .6rem; font-weight: 800; }
.section { margin-top: 1.75rem; padding: 0 1.25rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.section-title { margin: 0; color: var(--noe-navy); font-size: 1rem; line-height: 1.35; letter-spacing: -.03em; font-weight: 800; }
.section-link { color: var(--noe-blue); font-size: .7rem; font-weight: 800; }

.hero {
  position: relative;
  display: block;
  min-height: 0 !important;
  margin: 0 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 2rem;
  background: rgba(255,255,255,.88);
  box-shadow: var(--noe-shadow-lift);
}
.hero-art {
  position: relative;
  display: block;
  height: 12.5rem;
  overflow: hidden;
  border-radius: 1.5rem;
  margin: .75rem;
  background: linear-gradient(135deg, #061c35, #2f96d1 58%, #a9dcf5);
}
.hero-art::before {
  content: '♫';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.82);
  font-size: 4.5rem;
  text-shadow: 0 16px 30px rgba(0,31,84,.24);
}
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,11,24,.42)); }
.hero-stamp { position: absolute; right: 1rem; bottom: .9rem; z-index: 1; color: rgba(255,255,255,.72); font-size: .55rem; letter-spacing: .15em; font-weight: 800; }
.hero-copy { position: relative; z-index: 2; padding: .25rem 1rem 1.1rem; }
.hero-copy h1, .hero h1 { max-width: none; margin: .35rem 0 .55rem; color: var(--noe-navy); font-family: inherit; font-size: 1.5rem !important; line-height: 1.16; letter-spacing: -.055em; font-weight: 800; }
.hero-copy h1 em, .hero h1 em { color: var(--noe-blue); font-style: normal; }
.hero-subtitle { max-width: 31rem; margin: 0 0 1rem; color: rgba(0,31,84,.55); font-size: .75rem; line-height: 1.55; font-weight: 500; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.75rem; border: 0; border-radius: .9rem; padding: .75rem 1rem; color: #fff; background: var(--noe-navy); box-shadow: 0 8px 20px rgba(0,31,84,.14); font-size: .75rem; font-weight: 800; cursor: pointer; }
.primary-button:hover { background: #002c74; transform: none; }
.primary-button .arrow { margin-left: .25rem; }

.source-resume-card { margin: 0 1.25rem; padding: .75rem; border: 1px solid rgba(255,255,255,.92); border-radius: 2rem; background: rgba(255,255,255,.88); box-shadow: var(--noe-shadow-lift); }
.source-resume-art { position: relative; display: block; width: 100%; height: 13.5rem; overflow: hidden; border: 0; border-radius: 1.5rem; background: linear-gradient(135deg,#061c35,#2f96d1); background-image: linear-gradient(180deg,rgba(0,11,24,.04),rgba(0,11,24,.36)),var(--artwork); background-position: center; background-size: cover; cursor: pointer; }
.source-resume-art span { position: absolute; right: 1rem; bottom: 1rem; display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: #fff; background: var(--noe-navy); box-shadow: 0 8px 18px rgba(0,31,84,.2); font-size: .9rem; }
.source-resume-meta { display: flex; align-items: center; gap: .75rem; padding: .75rem .5rem .25rem; }
.source-resume-meta > div { min-width: 0; flex: 1; }
.source-resume-title { overflow: hidden; margin: 0; color: var(--noe-navy); font-size: 1.05rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.source-resume-artist { margin: .2rem 0 0; color: var(--noe-muted); font-size: .75rem; font-weight: 600; }
.source-resume-play { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--noe-navy); box-shadow: var(--noe-shadow-lift); cursor: pointer; }
.source-empty-card { padding: 2rem 1.25rem; text-align: center; }
.source-empty-art { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1rem; place-items: center; border-radius: 1.25rem; color: var(--noe-muted); background: var(--noe-soft); font-size: 2rem; }
.source-empty-copy p { margin: 0; color: var(--noe-navy); font-size: .9rem; font-weight: 700; }
.source-empty-copy small { display: block; margin-top: .35rem; color: var(--noe-muted); font-size: .7rem; font-weight: 600; }
.source-section { margin-top: 1.75rem; }
.source-pill { padding: .3rem .6rem; border-radius: 999px; color: var(--noe-blue); background: rgba(74,144,226,.12); font-size: .6rem; font-weight: 800; }
.new-releases-card { padding: 1rem; border-radius: 1.75rem; color: #fff; background: var(--noe-navy); box-shadow: var(--noe-shadow-lift); }
.new-release-main { display: flex; align-items: center; gap: .75rem; }
.new-release-main .mini-cover { border: 1px solid rgba(255,255,255,.22); }
.new-release-kicker { margin: 0; color: rgba(255,255,255,.65); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.new-release-title { overflow: hidden; margin: .25rem 0 0; color: #fff; font-size: .95rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.new-release-subtitle { margin: .2rem 0 0; color: rgba(255,255,255,.68); font-size: .68rem; font-weight: 600; }
.new-release-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: .35rem; margin-top: 1rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.26); border-radius: .75rem; color: #fff; background: rgba(255,255,255,.14); font-size: .75rem; font-weight: 800; cursor: pointer; }
.new-release-button:hover { background: rgba(255,255,255,.22); }
.news-card { background: linear-gradient(135deg,#001f54,#0d6ab0); }
.source-count { margin: 0; color: var(--noe-muted); font-size: .7rem; font-weight: 700; }
.source-count-inline { display: inline-grid; min-width: 1.25rem; height: 1.25rem; place-items: center; margin-left: .25rem; border-radius: 50%; color: var(--noe-blue); background: var(--noe-blue-soft); font-size: .6rem; vertical-align: middle; }
.mini-player-trigger { display: flex; width: 100%; min-width: 0; align-items: center; gap: .65rem; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.player-track-copy { min-width: 0; }

.grid { display: grid; gap: .625rem; }
.grid.four, .grid.three { grid-template-columns: 1fr; }
.track-card { min-width: 0; cursor: pointer; }
.cover { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; background: var(--noe-soft); box-shadow: 0 2px 8px rgba(0,31,84,.04); }
.cover::before, .mini-cover::before, .now-playing-cover::before, .player-artwork::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(135deg, rgba(0,13,30,.12), transparent 62%), var(--artwork, none); background-position: center; background-size: cover; }
.cover::after { content: '♫'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.74); font-size: 2rem; }
.cover-label { display: none; }
.quick-play { position: absolute; right: .55rem; bottom: .55rem; z-index: 2; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; color: #fff; background: var(--noe-navy); box-shadow: 0 8px 16px rgba(0,31,84,.18); cursor: pointer; }
.track-meta { padding: .6rem .1rem; }
.track-title, .release-title { overflow: hidden; color: var(--noe-navy); font-size: .8rem; line-height: 1.25; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.track-artist, .release-artist { overflow: hidden; margin-top: .2rem; color: rgba(0,31,84,.52); font-size: .68rem; line-height: 1.35; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.track-duration, .release-date, .release-duration { margin-top: .35rem; color: var(--noe-muted); font-size: .6rem; font-weight: 700; }

.release-list, .result-list { display: grid; gap: .625rem; }
.release-row, .result-row { position: relative; display: flex; min-width: 0; align-items: center; gap: .75rem; min-height: 4.25rem; padding: .625rem .75rem; border: 1px solid #f0f4f9; border-radius: 1rem; background: #fff; box-shadow: 0 2px 8px rgba(0,31,84,.02); }
.mini-cover { position: relative; width: 3rem; height: 3rem; flex: 0 0 auto; overflow: hidden; border-radius: .75rem; background: var(--noe-soft); }
.mini-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,11,24,.22)); }
.release-row > div:nth-child(2), .result-row > div:nth-child(3) { min-width: 0; flex: 1; }
.release-date, .release-duration, .result-genre, .result-duration { display: none; }
.release-actions { display: flex; align-items: center; gap: .2rem; flex: 0 0 auto; }
.release-action { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: #fff; background: var(--noe-navy); box-shadow: 0 6px 14px rgba(0,31,84,.14); cursor: pointer; }
.queue-add { display: none; }
.result-row { padding-right: .55rem; }
.result-row .heart { order: 4; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 0; border-radius: 50%; color: rgba(0,31,84,.44); background: transparent; font-size: 1.2rem; cursor: pointer; }
.result-row .heart.liked { color: #e26c82; background: rgba(226,108,130,.12); }
.result-row .release-action { order: 5; }
.result-number { width: 1.25rem; flex: 0 0 auto; color: rgba(0,31,84,.35); font-size: .6rem; font-weight: 800; text-align: center; }

.search-box { display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; margin: 0 1.25rem; padding: 0 .9rem; border: 1px solid var(--noe-border); border-radius: 1.25rem; background: #fff; box-shadow: var(--noe-shadow); }
.search-box span { color: var(--noe-blue); font-size: 1.2rem; }
.search-box input { min-width: 0; flex: 1; padding: .8rem 0; border: 0; outline: 0; color: var(--noe-navy); background: transparent; font-size: .9rem; font-weight: 600; }
.search-box input::placeholder { color: rgba(0,31,84,.32); }
.filter-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: .75rem 1.25rem 1.25rem; }
.chip { min-width: 0; padding: .55rem .45rem; overflow: hidden; border: 1px solid var(--noe-border); border-radius: 999px; color: rgba(0,31,84,.56); background: #fff; box-shadow: 0 2px 8px rgba(0,31,84,.03); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.chip:hover, .chip.active { border-color: var(--noe-navy); color: #fff; background: var(--noe-navy); box-shadow: 0 5px 12px rgba(0,31,84,.14); }

.sync-card { display: flex; flex-direction: column; gap: 1rem; margin: .25rem 1.25rem 0; padding: 1.25rem; border: 1px solid rgba(255,255,255,.9); border-radius: 2rem; background: rgba(255,255,255,.8); box-shadow: var(--noe-shadow-lift); }
.sync-card h2 { max-width: 19rem; margin: .9rem 0 .35rem; color: var(--noe-navy); font-size: 1.35rem; line-height: 1.18; letter-spacing: -.05em; font-weight: 800; }
.sync-card p { max-width: 25rem; margin: 0; color: rgba(0,31,84,.55); font-size: .75rem; line-height: 1.55; font-weight: 500; }
.sync-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sync-actions .chip { width: 100%; }
.playlist-card { min-height: 8rem; padding: 1rem; border: 1px solid var(--noe-border); border-radius: 1.25rem; background: #fff; box-shadow: var(--noe-shadow); }
.playlist-symbol { color: var(--noe-blue); font-size: 1.35rem; }
.artist-kicker { display: block; margin-top: .6rem; color: var(--noe-blue); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.artist-name { display: block; margin-top: .25rem; color: var(--noe-navy); font-size: .9rem; line-height: 1.2; font-weight: 800; }
.artist-count { display: block; margin-top: .2rem; color: var(--noe-muted); font-size: .65rem; font-weight: 600; }
.playlist-play { float: right; width: 2.25rem; height: 2.25rem; margin-top: -1.8rem; border: 0; border-radius: 50%; color: #fff; background: var(--noe-navy); cursor: pointer; }
.artist-card { min-height: 8rem; justify-content: end; border-radius: 1.25rem; }
.empty-state { padding: 3.5rem 1.25rem; border: 1px dashed var(--noe-border-strong); border-radius: 1.5rem; color: var(--noe-muted); background: rgba(255,255,255,.56); text-align: center; font-size: .8rem; line-height: 1.5; }
.empty-state strong { display: block; margin-bottom: .4rem; color: var(--noe-navy); font-weight: 800; }

/* MiniPlayer canônico do Música do Noé. */
.player-bar { position: fixed; right: 1rem; bottom: calc(4rem + .5rem + env(safe-area-inset-bottom)); left: 1rem; z-index: 40; display: block; width: auto; max-width: 42rem; min-height: 4rem; margin: 0 auto; padding: 0; border: 0; border-radius: 1rem; background: transparent; box-shadow: none; backdrop-filter: none; }
.player-bar::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--noe-border-strong); border-radius: 1rem; background: #e5e9f0; box-shadow: 0 10px 28px rgba(0,31,84,.12); }
.player-track { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; height: 4rem; margin-right: 8.5rem; padding: .5rem 0 .5rem .55rem; }
.player-track .mini-cover { width: 3rem; height: 3rem; margin-right: .65rem; border-radius: .75rem; }
.player-track .track-title { font-size: .8rem; }
.player-track .track-artist { font-size: .625rem; }
.player-controls { position: absolute; top: .5rem; right: .45rem; z-index: 2; display: flex; align-items: center; gap: .05rem; height: 3rem; padding: .1rem; }
.player-small { display: grid; place-items: center; width: 1.75rem; height: 2rem; border: 0; color: var(--noe-muted-2); background: transparent; font-size: .85rem; cursor: pointer; }
.player-small:first-child, .player-small:last-child { display: none; }
.play-button.small { display: grid; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--noe-blue); box-shadow: 0 5px 12px rgba(74,144,226,.25); font-size: .8rem; }
.player-progress { position: absolute; top: 0; right: .55rem; left: .55rem; z-index: 3; display: block; height: 2px; margin: 0; padding: 0; overflow: hidden; border-radius: 999px; background: linear-gradient(to right, var(--noe-blue) var(--progress, 0%), var(--noe-border-strong) var(--progress, 0%)); }
.player-progress span, .player-progress input { display: none; }
.player-actions { display: none; }

/* Player expandido baseado no ExpandedPlayer original. */
.now-playing { position: fixed; inset: 0; z-index: 70; display: flex; min-height: 100dvh; overflow: hidden; overscroll-behavior: contain; background: linear-gradient(to bottom, #e5f3ff, #f8fbff 48%, #f8fbff); }
.now-playing-glow { position: absolute; top: 12%; left: calc(50% - 13rem); width: 26rem; height: 26rem; border: 1px solid rgba(74,144,226,.18); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(74,144,226,.04), 0 0 0 4rem rgba(74,144,226,.025); }
.close-player { position: absolute; top: 1rem; left: 1.25rem; z-index: 2; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 50%; color: var(--noe-navy); background: #fff; box-shadow: 0 2px 14px rgba(0,31,84,.1); font-size: 1.6rem; cursor: pointer; }
.now-playing-content { position: relative; z-index: 1; width: min(100% - 3rem, 26rem); margin: 0 auto; padding: 4.5rem 0 2rem; text-align: center; }
.now-playing-content > .eyebrow { display: block; margin-bottom: 1.35rem; color: var(--noe-muted-2); }
.now-playing-cover { position: relative; width: min(70vw, 18rem); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 3px solid #fff; border-radius: 2.25rem; background: linear-gradient(135deg,#e6f4ff,#5da8df 55%,#124f96); box-shadow: var(--noe-shadow-lift); }
.now-playing-cover::before { background-image: linear-gradient(180deg, rgba(0,11,24,.04) 35%, rgba(0,11,24,.36)), var(--artwork, none); }
.now-playing-info { margin-top: 1.25rem; }
.now-playing-info h2 { margin: 0; color: var(--noe-navy); font-size: 1.5rem; line-height: 1.25; letter-spacing: -.04em; font-weight: 800; }
.now-playing-info p { margin: .35rem 0 0; color: var(--noe-muted-2); font-size: .8rem; font-weight: 600; }
.big-progress { margin-top: 1.6rem; }
.big-progress input { width: 100%; accent-color: var(--noe-blue); }
.big-time { display: flex; justify-content: space-between; margin-top: .35rem; color: var(--noe-muted); font-size: .6rem; font-weight: 700; }
.expanded-volume { display: flex; align-items: center; g…1833 tokens truncated…31, 84, .12);
}
.player-track .track-title { font-size: .76rem; line-height: 1.2; }
.player-track .track-artist { margin-top: .22rem; font-size: .62rem; }
.player-controls {
  top: .67rem;
  right: .48rem;
  height: 3rem;
  gap: .08rem;
  padding: .2rem .25rem;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 999px;
  background: rgba(255, 255, 255, .52);
  box-shadow: 0 4px 12px rgba(0, 31, 84, .08);
}
.player-small { width: 1.72rem; height: 2rem; color: #6f87a5; }
.play-button.small {
  width: 2.55rem;
  height: 2.55rem;
  color: #fff;
  background: var(--noe-blue);
  box-shadow: 0 7px 16px rgba(74, 144, 226, .28);
}
.player-progress {
  top: 0;
  right: .8rem;
  left: .8rem;
  height: 3px;
  background: linear-gradient(to right, var(--noe-blue) var(--progress, 0%), #cbd9e8 var(--progress, 0%));
}

/* Refinamento do player expandido: controles em superfícies coesas e premium. */
.now-playing {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.96) 0 17%, rgba(232,243,255,.72) 44%, transparent 65%),
    linear-gradient(180deg, #e6f3ff 0%, #f7fbff 48%, #f8fbff 100%);
}
.now-playing::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 11rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(228,240,252,.34));
}
.close-player {
  top: max(1rem, env(safe-area-inset-top));
  left: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255,255,255,.88);
  color: #123661;
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 24px rgba(0,31,84,.12), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  font-size: 1.45rem;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.close-player:hover { background: #fff; box-shadow: 0 12px 26px rgba(0,31,84,.16), inset 0 1px 0 #fff; transform: translateY(-1px); }
.close-player:active { transform: scale(.94); }
.close-player:focus-visible,
.expanded-actions button:focus-visible,
.big-controls button:focus-visible { outline: 3px solid rgba(74,144,226,.28); outline-offset: 3px; }
.expanded-volume {
  gap: .7rem;
  margin-top: .85rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(0,31,84,.07), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
}
.expanded-volume span:first-child {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  place-items: center;
  border: 1px solid rgba(74,144,226,.12);
  border-radius: 50%;
  color: var(--noe-blue);
  background: #f5f9fe;
  font-size: .75rem;
}
.expanded-volume input,
.big-progress input { height: .28rem; appearance: none; border-radius: 999px; background: #d8e3ef; cursor: pointer; }
.expanded-volume input::-webkit-slider-thumb,
.big-progress input::-webkit-slider-thumb { width: 1rem; height: 1rem; appearance: none; border: 3px solid #fff; border-radius: 50%; background: var(--noe-blue); box-shadow: 0 3px 8px rgba(74,144,226,.3); }
.expanded-volume input::-moz-range-thumb,
.big-progress input::-moz-range-thumb { width: .72rem; height: .72rem; border: 3px solid #fff; border-radius: 50%; background: var(--noe-blue); box-shadow: 0 3px 8px rgba(74,144,226,.3); }
.expanded-volume span:last-child { width: 2.4rem; color: #6e86a3; font-size: .66rem; letter-spacing: .01em; }
.big-controls {
  gap: .2rem;
  margin-top: .8rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 1.45rem;
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 26px rgba(0,31,84,.08), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}
.control-button {
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #6e86a3;
  background: rgba(246,250,255,.72);
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.control-button:hover { color: var(--noe-navy); background: #fff; transform: translateY(-1px); }
.play-button:not(.small) {
  width: 4.2rem;
  height: 4.2rem;
  margin: -.15rem .15rem;
  box-shadow: 0 12px 24px rgba(0,31,84,.2), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.play-button:not(.small):hover { box-shadow: 0 15px 28px rgba(0,31,84,.24), inset 0 1px 0 rgba(255,255,255,.16); transform: translateY(-1px); }
.play-button:not(.small):active { transform: scale(.95); }
.expanded-actions {
  gap: .45rem;
  margin-top: .8rem;
  padding: .45rem;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 1.45rem;
  background: rgba(255,255,255,.66);
  box-shadow: 0 12px 26px rgba(0,31,84,.07), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}
.expanded-actions button {
  min-height: 3.1rem;
  gap: .35rem;
  padding: .45rem .2rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.expanded-actions button:hover { border-color: rgba(74,144,226,.13); color: var(--noe-blue); background: rgba(245,249,254,.92); transform: translateY(-1px); }
.expanded-actions button:active { transform: scale(.96); }
.expanded-actions button span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid rgba(74,144,226,.12);
  border-radius: 50%;
  color: var(--noe-blue);
  background: #f6faff;
  font-size: .82rem;
}
.expanded-actions button small { color: #526e91; font-size: .58rem; letter-spacing: .01em; }

@media (max-width: 26rem) {
  .now-playing-content { width: min(100% - 2rem, 26rem); padding-top: 4.25rem; }
  .close-player { left: .75rem; }
  .big-controls { padding-inline: .45rem; }
  .control-button { width: 2.35rem; height: 2.35rem; }
  .expanded-actions { gap: .25rem; padding: .35rem; }
}

@media (max-height: 47.5rem) {
  .now-playing-content { padding-top: 3.35rem; }
  .now-playing-content > .eyebrow { margin-bottom: .75rem; }
  .now-playing-cover { width: min(54vw, 15rem); }
  .now-playing-info { margin-top: .75rem; }
  .now-playing-info p { margin-top: .2rem; }
  .big-progress { margin-top: .95rem; }
  .expanded-volume { margin-top: .6rem; }
  .big-controls { margin-top: .55rem; }
  .expanded-actions { margin-top: .55rem; }
}

/* Feedback de API no estilo de alerta nativo moderno, sem expor exceções técnicas. */
.feedback-region.is-visible {
  display: block !important;
  padding: 0 .85rem;
}
.feedback.ios-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  margin-top: .7rem;
  padding: .65rem .7rem;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(0,31,84,.09), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
}
.feedback.ios-feedback.loading {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--noe-muted-2);
}
.feedback-symbol {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--noe-blue);
  box-shadow: 0 5px 12px rgba(74,144,226,.25);
  font-size: .85rem;
  font-weight: 800;
}
.ios-feedback.error {
  border-color: rgba(225,137,131,.24);
  background: linear-gradient(135deg, rgba(255,252,252,.94), rgba(255,247,247,.78));
}
.ios-feedback.error .feedback-symbol {
  color: #fff;
  background: #df8d86;
  box-shadow: 0 5px 12px rgba(223,141,134,.24);
}
.feedback-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .12rem;
}
.feedback-copy strong {
  overflow: hidden;
  color: var(--noe-navy);
  font-size: .68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-copy span {
  overflow: hidden;
  color: #6e86a3;
  font-size: .6rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-actions {
  display: flex;
  align-items: center;
  gap: .2rem;
}
.ios-feedback .feedback-action {
  min-height: 1.8rem;
  padding: .25rem .5rem;
  border: 0;
  border-radius: .65rem;
  color: var(--noe-blue);
  background: rgba(234,245,255,.86);
  font-size: .58rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.ios-feedback .feedback-action:hover { background: #e1f0ff; }
.ios-feedback .feedback-action:active { transform: scale(.96); }
.ios-feedback .feedback-action:focus-visible { outline: 3px solid rgba(74,144,226,.25); outline-offset: 2px; }
.player-bar,
.player-track-info,
.mini-player-trigger { contain: layout paint; }
.player-bar { animation: none !important; transition: opacity .18s ease, transform .18s ease; }
.big-controls .control-button {
  color: #587696;
  font-size: 1.05rem;
  font-weight: 700;
}
.big-controls .control-button:hover { color: var(--noe-navy); }
.expanded-actions button span { color: #4a90e2; }
.expanded-actions button small { color: #426487; font-size: .6rem; font-weight: 800; }

@media (max-width: 26rem) {
  .feedback.ios-feedback { grid-template-columns: auto minmax(0, 1fr); }
  .feedback-actions { grid-column: 2; justify-content: flex-start; }
}
.eyebrow {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800;
  letter-spacing: .16em;
}
.artist-name, .sync-card h2, .queue-head h2, .now-playing-info h2,
.hero h1, .page-heading h1, .section-title, .track-title, .release-title,
.source-resume-title, .new-release-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.page-heading h1, .hero h1, .sync-card h2, .now-playing-info h2 { letter-spacing: -.025em; }

/* Busca fixa como no Noé: cabeçalho, campo e filtros permanecem juntos. */
.search-sticky-zone {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 35;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  background: rgba(248, 251, 255, .96);
  box-shadow: 0 8px 18px rgba(0, 31, 84, .07);
  backdrop-filter: blur(18px);
}
.search-sticky-zone .noe-page-header {
  position: static;
  top: auto;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.search-tools { padding-top: 1rem; }
.search-sticky-zone .search-box { margin-top: 0; }
.search-sticky-zone .filter-chips { margin-bottom: 0; }
.search-results-section { margin-top: 1rem; }

/* BottomBar canônica do Música do Noé: caixa única, safe-area e pílula ativa. */
.tab-bar-shell.mobile-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: auto;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  border: 0;
  border-top: 1px solid rgba(216, 233, 251, .9);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 -6px 20px rgba(0, 31, 84, .06);
  backdrop-filter: none;
}

.tab-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: .25rem;
  width: 100%;
  max-width: 42rem;
  height: 4rem;
  margin: 0 auto;
  padding: .5rem .75rem;
}

.tab-bar-inner .mobile-nav-link {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 3rem;
  width: auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  color: var(--noe-muted);
  background: transparent;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.tab-bar-inner .mobile-nav-link svg {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-bar-inner .mobile-nav-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-bar-inner .mobile-nav-link.active {
  color: #fff;
  background: var(--noe-navy);
  box-shadow: 0 1px 3px rgba(0, 31, 84, .16);
}

.tab-bar-inner .mobile-nav-link.active::before,
.tab-bar-inner .mobile-nav-link:nth-child(4) {
  display: none;
}

/* iOS shell: keep the app inside the visual viewport and make the dock feel native. */
:root {
  --app-tab-height: 4.25rem;
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-dock-gap: max(.5rem, var(--app-safe-bottom));
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
}

body {
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
}

button, a, input, [role='button'] { touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; }

.app-shell { min-height: 100svh; min-height: 100dvh; }
.main-content {
  min-height: 100svh;
  min-height: 100dvh;
  padding-bottom: calc(var(--app-tab-height) + var(--app-dock-gap) + 1rem);
}
.view-root { padding-bottom: 1.25rem; }

.tab-bar-shell.mobile-nav {
  right: .75rem;
  bottom: var(--app-dock-gap);
  left: .75rem;
  width: auto;
  min-height: var(--app-tab-height);
  padding-bottom: 0;
  border: 1px solid rgba(216, 233, 251, .95);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 28px rgba(0, 31, 84, .12), 0 1px 0 rgba(255, 255, 255, .9) inset;
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}
.tab-bar-inner { height: var(--app-tab-height); padding: .5rem .6rem; }
.tab-bar-inner .mobile-nav-link { min-height: 3.15rem; border-radius: .9rem; }

.player-bar {
  right: .75rem;
  bottom: calc(var(--app-tab-height) + var(--app-dock-gap) + .6rem);
  left: .75rem;
  max-width: none;
}
.queue-panel { right: .75rem; bottom: calc(var(--app-tab-height) + var(--app-dock-gap) + 5rem); }

.now-playing {
  min-height: 100svh;
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.now-playing-content { min-height: 100%; padding-bottom: calc(1.5rem + var(--app-safe-bottom)); }

@media (max-width: 26rem) {
  .tab-bar-shell.mobile-nav { right: .5rem; left: .5rem; }
  .player-bar { right: .5rem; left: .5rem; }
}

/* Ajuste final de hierarquia: cards, dock, feedback e player devem parecer um
   único produto, sem caracteres soltos nem controles competindo entre si. */
.result-row {
  display: grid;
  grid-template-columns: 1.55rem 3.25rem minmax(0, 1fr) auto auto 2.2rem 2.2rem 2.8rem;
  gap: .7rem;
  min-height: 4.85rem;
  padding: .65rem .65rem .65rem .45rem;
  border: 1px solid #e7f0f8;
  border-radius: 1.15rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 5px 16px rgba(0,31,84,.045);
}
.result-row:hover { border-color: #cfe3f6; background: #fff; box-shadow: 0 8px 20px rgba(0,31,84,.08); transform: translateY(-1px); }
.result-row .result-number { color: #9aacc0; font-size: .58rem; font-weight: 800; }
.result-row .mini-cover { width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; border-radius: 1rem; box-shadow: 0 4px 10px rgba(0,31,84,.1); }
.result-copy { min-width: 0; align-self: center; }
.result-row .release-title { overflow: hidden; color: var(--noe-navy); font-size: .78rem; line-height: 1.25; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.result-row .release-artist { overflow: hidden; margin-top: .22rem; color: #7890aa; font-size: .62rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.result-row .result-genre, .result-row .result-duration { color: #91a6bf; font-size: .58rem; white-space: nowrap; }
.result-row .heart { width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid #e8f0f7; border-radius: 50%; color: #8ea5bd; background: #f7fafd; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.result-row .heart.liked { color: #e26c82; border-color: #f5d6de; background: #fff1f4; }
.result-row .queue-add { width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid #e8f0f7; border-radius: 50%; color: #6f8eaf; background: #f7fafd; font-size: .9rem; line-height: 1; cursor: pointer; }
.result-row .release-action { width: 2.8rem; height: 2.8rem; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--noe-navy); box-shadow: 0 7px 14px rgba(0,31,84,.18); font-size: .82rem; font-weight: 800; cursor: pointer; }
.result-row .release-action:hover { background: var(--noe-blue); transform: scale(1.03); }
.catalog-skeleton { display: grid; grid-template-columns: 1.55rem 3.25rem minmax(0,1fr) 2.8rem; gap: .7rem; align-items: center; min-height: 4.85rem; padding: .65rem; border: 1px solid #edf3f8; border-radius: 1.15rem; background: rgba(255,255,255,.75); }
.catalog-skeleton span, .catalog-skeleton i, .catalog-skeleton b, .catalog-skeleton em { display: block; border-radius: .75rem; background: linear-gradient(90deg,#edf3f8,#f9fbfd,#edf3f8); background-size: 200% 100%; animation: catalog-shimmer 1.2s ease-in-out infinite; }
.catalog-skeleton span { width: 1rem; height: .5rem; }
.catalog-skeleton i { width: 3.25rem; height: 3.25rem; }
.catalog-skeleton b { width: min(75%, 12rem); height: .75rem; }
.catalog-skeleton em { width: 2.8rem; height: 2.8rem; border-radius: 50%; }
@keyframes catalog-shimmer { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

.feedback-region.is-visible {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + .6rem);
  right: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  max-width: none;
  padding: 0 .75rem;
  pointer-events: none;
}
.feedback-region.is-visible .feedback { width: min(100%, 30rem); margin: 0 auto; pointer-events: auto; }
.feedback.ios-feedback { min-height: 3.25rem; padding: .55rem .65rem; border-radius: 1.25rem; }
.feedback-copy span { max-width: 22rem; }

.tab-bar-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding-inline: .55rem; }
.tab-bar-inner .mobile-nav-link { width: 100%; min-width: 0; padding-inline: .35rem; }
.tab-bar-inner .mobile-nav-link svg { width: 1.05rem; height: 1.05rem; }
.tab-bar-inner .mobile-nav-link span { max-width: 100%; }

.now-playing-content { width: min(calc(100% - 2rem), 26rem); padding-bottom: calc(1.75rem + var(--app-safe-bottom)); }
.now-playing-cover { width: min(62vw, 17rem); border-radius: 2rem; }
.now-playing-info h2 { max-width: 24rem; margin-inline: auto; font-size: clamp(1.25rem, 5.4vw, 1.55rem); }
.now-playing-info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expanded-volume { min-height: 2.8rem; }
.big-controls { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); justify-content: initial; }
.big-controls .control-button { width: 2.6rem; height: 2.6rem; margin-inline: auto; }
.big-controls .play-button:not(.small) { width: 3.8rem; height: 3.8rem; }
.expanded-actions { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 47.5rem) {
  .result-row { grid-template-columns: 1.35rem 3.15rem minmax(0,1fr) 2.2rem 2.8rem; gap: .55rem; min-height: 4.7rem; padding-right: .55rem; }
  .result-row .mini-cover { width: 3.15rem; height: 3.15rem; flex-basis: 3.15rem; }
  .result-row .result-genre, .result-row .result-duration, .result-row .queue-add { display: none; }
  .result-row .heart { width: 2.1rem; height: 2.1rem; }
  .result-row .release-action { width: 2.7rem; height: 2.7rem; }
}
@media (max-width: 26rem) {
  .result-row { grid-template-columns: 1.2rem 2.9rem minmax(0,1fr) 2rem 2.55rem; gap: .45rem; }
  .result-row .mini-cover { width: 2.9rem; height: 2.9rem; flex-basis: 2.9rem; border-radius: .85rem; }
  .result-row .release-title { font-size: .73rem; }
  .result-row .release-artist { font-size: .58rem; }
  .result-row .heart { width: 1.95rem; height: 1.95rem; font-size: .95rem; }
  .result-row .release-action { width: 2.55rem; height: 2.55rem; }
  .big-controls { padding-inline: .4rem; }
  .big-controls .control-button { width: 2.25rem; height: 2.25rem; }
  .big-controls .play-button:not(.small) { width: 3.55rem; height: 3.55rem; }
}