/*
 * Ngoma v3 — design system (tokens + padrões + componentes ng-*).
 * Espelha o protótipo v3 aprovado (artefacto «Ngoma Music v3»).
 * Tema: data-theme="dark|light" no <html> (script em components/tema; escuro por omissão).
 * --c-<cor> são os mesmos valores em canais RGB para o Tailwind aceitar opacidade (bg-ink/10).
 */
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/ngoma/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/ngoma/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/ngoma/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/ngoma/figtree-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/ngoma/figtree-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/ngoma/unbounded-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/ngoma/unbounded-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/ngoma/unbounded-latin-800-normal.woff2') format('woff2'); }

:root, [data-theme="dark"] {
  color-scheme: dark;
  --fundo: #0A0908; --c-fundo: 10 9 8;
  --panel: #131210; --c-panel: 19 18 16;
  --card: #1B1917; --c-card: 27 25 23;
  --hover: #25221F; --c-hover: 37 34 31;
  --press: #2F2B27; --c-press: 47 43 39;
  --line: #2C2825; --c-line: 44 40 37;
  --strong: #77706A; --c-strong: 119 112 106;
  --ink: #F5F2EE; --c-ink: 245 242 238;
  --ink-2: #A9A199; --c-ink-2: 169 161 153;
  --accent: #F5B83D; --c-accent: 245 184 61;
  --accent-hover: #FFC95C; --c-accent-hover: 255 201 92;
  --on-accent: #14110D; --c-on-accent: 20 17 13;
  --accent-ink: #F5B83D; --c-accent-ink: 245 184 61;
  --accent-soft: #2E2410; --c-accent-soft: 46 36 16;
  --brasa: #FF7A57; --c-brasa: 255 122 87;
  --ok: #5FD3A6; --c-ok: 95 211 166;
  --ok-soft: #11302A; --c-ok-soft: 17 48 42;
  --danger: #FF8A73; --c-danger: 255 138 115;
  --danger-soft: #3A1712; --c-danger-soft: 58 23 18;
  --scrim: rgba(0, 0, 0, .66);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, .55);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, .5);
}
[data-theme="light"] {
  color-scheme: light;
  --fundo: #E9E6E1; --c-fundo: 233 230 225;
  --panel: #FFFFFF; --c-panel: 255 255 255;
  --card: #F5F3F0; --c-card: 245 243 240;
  --hover: #ECE9E4; --c-hover: 236 233 228;
  --press: #E1DDD7; --c-press: 225 221 215;
  --line: #E5E1DB; --c-line: 229 225 219;
  --strong: #8E867C; --c-strong: 142 134 124;
  --ink: #141210; --c-ink: 20 18 16;
  --ink-2: #5F584F; --c-ink-2: 95 88 79;
  --accent: #F5B83D; --c-accent: 245 184 61;
  --accent-hover: #E8A82A; --c-accent-hover: 232 168 42;
  --on-accent: #14110D; --c-on-accent: 20 17 13;
  --accent-ink: #8A5C00; --c-accent-ink: 138 92 0;
  --accent-soft: #FCF0D6; --c-accent-soft: 252 240 214;
  --brasa: #C2410C; --c-brasa: 194 65 12;
  --ok: #0B6B5A; --c-ok: 11 107 90;
  --ok-soft: #E2F3EE; --c-ok-soft: 226 243 238;
  --danger: #B42318; --c-danger: 180 35 24;
  --danger-soft: #FDECEA; --c-danger-soft: 253 236 234;
  --scrim: rgba(20, 18, 16, .5);
  --shadow-float: 0 16px 40px rgba(20, 18, 16, .18);
  --shadow-raised: 0 1px 2px rgba(20, 18, 16, .12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --fundo: #E9E6E1; --c-fundo: 233 230 225;
  --panel: #FFFFFF; --c-panel: 255 255 255;
  --card: #F5F3F0; --c-card: 245 243 240;
  --hover: #ECE9E4; --c-hover: 236 233 228;
  --press: #E1DDD7; --c-press: 225 221 215;
  --line: #E5E1DB; --c-line: 229 225 219;
  --strong: #8E867C; --c-strong: 142 134 124;
  --ink: #141210; --c-ink: 20 18 16;
  --ink-2: #5F584F; --c-ink-2: 95 88 79;
  --accent: #F5B83D; --c-accent: 245 184 61;
  --accent-hover: #E8A82A; --c-accent-hover: 232 168 42;
  --on-accent: #14110D; --c-on-accent: 20 17 13;
  --accent-ink: #8A5C00; --c-accent-ink: 138 92 0;
  --accent-soft: #FCF0D6; --c-accent-soft: 252 240 214;
  --brasa: #C2410C; --c-brasa: 194 65 12;
  --ok: #0B6B5A; --c-ok: 11 107 90;
  --ok-soft: #E2F3EE; --c-ok-soft: 226 243 238;
  --danger: #B42318; --c-danger: 180 35 24;
  --danger-soft: #FDECEA; --c-danger-soft: 253 236 234;
    --scrim: rgba(20, 18, 16, .5);
    --shadow-float: 0 16px 40px rgba(20, 18, 16, .18);
  }
}
:root {
  /* Nomes da v2 (componentes ng-* e páginas ainda não refeitas) apontam para os da v3 */
  --bg: var(--panel); --c-bg: var(--c-panel);
  --surface: var(--card); --c-surface: var(--c-card);
  --surface-2: var(--hover); --c-surface-2: var(--c-hover);
  --surface-3: var(--press); --c-surface-3: var(--c-press);
  --line-strong: var(--strong); --c-line-strong: var(--c-strong);
  --success: var(--ok); --c-success: var(--c-ok);
  --success-soft: var(--ok-soft); --c-success-soft: var(--c-ok-soft);
  --inverse: var(--ink); --c-inverse: var(--c-ink);
  --on-inverse: var(--panel); --c-on-inverse: var(--c-panel);
  --focus: var(--accent-ink);
  --progress: var(--accent-ink);
  --shadow-overlay: var(--shadow-float);
  --font-display: Unbounded, Figtree, system-ui, sans-serif;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-full: 9999px;
  --size-control: 48px; --size-control-sm: 36px; --size-play: 56px; --size-cover-sm: 44px; --size-nav: 64px; --size-page: 1320px;
}

/* ---------- Padrões v3 ---------- */
/* Cor da capa: o cabeçalho fica escuro e saturado (texto branco nos dois temas); .tom-fade continua a cor suave */
.tom-header { background: linear-gradient(180deg, color-mix(in srgb, var(--tom, #5a3d2b) 90%, white) 0%, color-mix(in srgb, var(--tom, #5a3d2b) 70%, black) 100%); }
.tom-fade { background: linear-gradient(180deg, color-mix(in srgb, var(--tom, #5a3d2b) 28%, var(--panel)) 0%, var(--panel) 340px); }
.tom-solid { background: color-mix(in srgb, var(--tom, #5a3d2b) 72%, var(--card)); }
.scroll-x { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; }
.card-play { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.group:hover .card-play, .group:focus-within .card-play, .is-current .card-play { opacity: 1; transform: none; }
@media (hover: none) { .card-play { opacity: 1; transform: none; } }
.text-balance { text-wrap: balance; }

/* Ngoma — componentes. Carrega depois de tokens.css; usa só var(--token). */

:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 15px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:where(.ng-btn, .ng-icon-btn, .ng-chip, .ng-seg button, .ng-nav a, .ng-link, .ng-track, .ng-card, .ng-artist):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :where([class^="ng-"], [class*=" ng-"]) { transition: none !important; animation: none !important; }
}

/* ---------- Ícone (máscara SVG: herda a cor do texto) ---------- */
.ng-i {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ng-i) center / contain no-repeat;
  mask: var(--ng-i) center / contain no-repeat;
}
.ng-i--16 { width: 16px; height: 16px; }
.ng-i--24 { width: 24px; height: 24px; }
.ng-i-play { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath fill=%22%23000%22 stroke=%22none%22 d=%22M8 5.6v12.8a.8.8 0 0 0 1.2.7l10.2-6.4a.8.8 0 0 0 0-1.4L9.2 4.9A.8.8 0 0 0 8 5.6z%22/%3E%3C/svg%3E"); }
.ng-i-pause { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect fill=%22%23000%22 stroke=%22none%22 x=%226.5%22 y=%225%22 width=%224%22 height=%2214%22 rx=%221%22/%3E%3Crect fill=%22%23000%22 stroke=%22none%22 x=%2213.5%22 y=%225%22 width=%224%22 height=%2214%22 rx=%221%22/%3E%3C/svg%3E"); }
.ng-i-next { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath fill=%22%23000%22 stroke=%22none%22 d=%22M5.5 6.3v11.4a.7.7 0 0 0 1.1.6l8.3-5.7a.7.7 0 0 0 0-1.2L6.6 5.7a.7.7 0 0 0-1.1.6z%22/%3E%3Crect fill=%22%23000%22 stroke=%22none%22 x=%2216.5%22 y=%225.5%22 width=%222%22 height=%2213%22 rx=%221%22/%3E%3C/svg%3E"); }
.ng-i-prev { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath fill=%22%23000%22 stroke=%22none%22 d=%22M18.5 6.3v11.4a.7.7 0 0 1-1.1.6l-8.3-5.7a.7.7 0 0 1 0-1.2l8.3-5.7a.7.7 0 0 1 1.1.6z%22/%3E%3Crect fill=%22%23000%22 stroke=%22none%22 x=%225.5%22 y=%225.5%22 width=%222%22 height=%2213%22 rx=%221%22/%3E%3C/svg%3E"); }
.ng-i-download { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v11%22/%3E%3Cpath d=%22M7 10.5l5 5 5-5%22/%3E%3Cpath d=%22M5 19.5h14%22/%3E%3C/svg%3E"); }
.ng-i-share { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 15V4%22/%3E%3Cpath d=%22M7.5 8.5 12 4l4.5 4.5%22/%3E%3Cpath d=%22M6 12v6.5A1.5 1.5 0 0 0 7.5 20h9a1.5 1.5 0 0 0 1.5-1.5V12%22/%3E%3C/svg%3E"); }
.ng-i-search { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M16 16l4 4%22/%3E%3C/svg%3E"); }
.ng-i-home { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z%22/%3E%3C/svg%3E"); }
.ng-i-explore { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath fill=%22%23000%22 stroke=%22none%22 d=%22M15.2 8.8l-1.7 4.7-4.7 1.7 1.7-4.7z%22/%3E%3C/svg%3E"); }
.ng-i-mic { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%223.5%22 width=%226%22 height=%2211%22 rx=%223%22/%3E%3Cpath d=%22M5.5 11.5a6.5 6.5 0 0 0 13 0%22/%3E%3Cpath d=%22M12 18v2.5%22/%3E%3C/svg%3E"); }
.ng-i-user { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%223.5%22/%3E%3Cpath d=%22M5 20a7 7 0 0 1 14 0%22/%3E%3C/svg%3E"); }
.ng-i-check { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E"); }
.ng-i-close { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12%22/%3E%3Cpath d=%22M18 6 6 18%22/%3E%3C/svg%3E"); }
.ng-i-image { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%224.5%22 width=%2217%22 height=%2215%22 rx=%222%22/%3E%3Ccircle cx=%229%22 cy=%2210%22 r=%221.5%22/%3E%3Cpath d=%22M20.5 16l-5-5-9 9%22/%3E%3C/svg%3E"); }
.ng-i-plus { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14%22/%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E"); }
.ng-i-more { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle fill=%22%23000%22 stroke=%22none%22 cx=%226%22 cy=%2212%22 r=%221.6%22/%3E%3Ccircle fill=%22%23000%22 stroke=%22none%22 cx=%2212%22 cy=%2212%22 r=%221.6%22/%3E%3Ccircle fill=%22%23000%22 stroke=%22none%22 cx=%2218%22 cy=%2212%22 r=%221.6%22/%3E%3C/svg%3E"); }
.ng-i-queue { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6.5h16%22/%3E%3Cpath d=%22M4 12h16%22/%3E%3Cpath d=%22M4 17.5h9%22/%3E%3Cpath fill=%22%23000%22 stroke=%22none%22 d=%22M16.5 15v5l4-2.5z%22/%3E%3C/svg%3E"); }
.ng-i-shuffle { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h2.5c4.5 0 6.5 10 11 10H20%22/%3E%3Cpath d=%22M4 17h2.5c1.6 0 2.8-1.3 3.8-3%22/%3E%3Cpath d=%22M13.7 10c1-1.7 2.2-3 3.8-3H20%22/%3E%3Cpath d=%22M17.5 4.5 20 7l-2.5 2.5%22/%3E%3Cpath d=%22M17.5 14.5 20 17l-2.5 2.5%22/%3E%3C/svg%3E"); }
.ng-i-repeat { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 11V9.5A2.5 2.5 0 0 1 6.5 7H20%22/%3E%3Cpath d=%22M17 4l3 3-3 3%22/%3E%3Cpath d=%22M20 13v1.5a2.5 2.5 0 0 1-2.5 2.5H4%22/%3E%3Cpath d=%22M7 20l-3-3 3-3%22/%3E%3C/svg%3E"); }
.ng-i-volume { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9.5h3l4.5-4v13L7 14.5H4z%22/%3E%3Cpath d=%22M15 9a4 4 0 0 1 0 6%22/%3E%3Cpath d=%22M17.5 6.5a7.5 7.5 0 0 1 0 11%22/%3E%3C/svg%3E"); }
.ng-i-chevron-down { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E"); }
.ng-i-chevron-right { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6l6 6-6 6%22/%3E%3C/svg%3E"); }
.ng-i-verified { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M8.5 12.2l2.3 2.3 4.7-4.8%22/%3E%3C/svg%3E"); }
.ng-i-alert { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M12 7.5v5.5%22/%3E%3Ccircle fill=%22%23000%22 stroke=%22none%22 cx=%2212%22 cy=%2216.3%22 r=%221.1%22/%3E%3C/svg%3E"); }
.ng-i-sun { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4%22/%3E%3C/svg%3E"); }
.ng-i-moon { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z%22/%3E%3C/svg%3E"); }
.ng-i-monitor { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%224.5%22 width=%2217%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M9 20h6%22/%3E%3Cpath d=%22M12 16.5V20%22/%3E%3C/svg%3E"); }
.ng-i-arrow-right { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M13 6l6 6-6 6%22/%3E%3C/svg%3E"); }
.ng-i-arrow-left { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H5%22/%3E%3Cpath d=%22M11 6l-6 6 6 6%22/%3E%3C/svg%3E"); }
.ng-i-lock { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2210.5%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 10.5V8a4 4 0 0 1 8 0v2.5%22/%3E%3C/svg%3E"); }
.ng-i-mail { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%225.5%22 width=%2217%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M4 7l8 6 8-6%22/%3E%3C/svg%3E"); }
.ng-i-copy { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228.5%22 y=%228.5%22 width=%2211%22 height=%2211%22 rx=%222%22/%3E%3Cpath d=%22M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2%22/%3E%3C/svg%3E"); }
.ng-i-tag { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 12.6V5a1.5 1.5 0 0 1 1.5-1.5h7.6a1.5 1.5 0 0 1 1 .4l6.9 6.9a1.5 1.5 0 0 1 0 2.1l-7.6 7.6a1.5 1.5 0 0 1-2.1 0l-6.9-6.9a1.5 1.5 0 0 1-.4-1z%22/%3E%3Ccircle fill=%22%23000%22 stroke=%22none%22 cx=%228.5%22 cy=%228.5%22 r=%221.4%22/%3E%3C/svg%3E"); }
.ng-i-music { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18V5.5l11-2V16%22/%3E%3Ccircle cx=%226.5%22 cy=%2218%22 r=%222.5%22/%3E%3Ccircle cx=%2217.5%22 cy=%2216%22 r=%222.5%22/%3E%3C/svg%3E"); }
.ng-i-disc { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222.5%22/%3E%3C/svg%3E"); }
.ng-i-wallet { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M19%207V5a1%201%200%200%200-1-1H5a2%202%200%200%200%200%204h15a1%201%200%200%201%201%201v4h-3a2%202%200%200%200%200%204h3a1%201%200%200%200%201-1v-2%22/%3E%3Cpath%20d=%22M3%206v12a2%202%200%200%200%202%202h15a1%201%200%200%200%201-1v-3%22/%3E%3C/svg%3E"); }
.ng-i-edit { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020h9%22/%3E%3Cpath%20d=%22M16.4%203.6a2.1%202.1%200%201%201%203%203L7%2019l-4%201%201-4z%22/%3E%3C/svg%3E"); }
.ng-i-trash { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%206h18%22/%3E%3Cpath%20d=%22M8%206V4h8v2%22/%3E%3Cpath%20d=%22M19%206l-1%2014H6L5%206%22/%3E%3Cpath%20d=%22M10%2011v6M14%2011v6%22/%3E%3C/svg%3E"); }
.ng-i-log-out { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22/%3E%3Cpath%20d=%22m16%2017%205-5-5-5%22/%3E%3Cpath%20d=%22M21%2012H9%22/%3E%3C/svg%3E"); }
.ng-i-external { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M15%203h6v6%22/%3E%3Cpath%20d=%22M10%2014%2021%203%22/%3E%3Cpath%20d=%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22/%3E%3C/svg%3E"); }
.ng-i-rocket { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4.5%2016.5c-1.5%201.3-2%205-2%205s3.7-.5%205-2c.7-.8.7-2.1-.1-2.9a2.2%202.2%200%200%200-2.9-.1z%22/%3E%3Cpath%20d=%22M12%2015l-3-3a22%2022%200%200%201%202-3.9A12.9%2012.9%200%200%201%2022%202c0%202.7-.8%207.5-6%2011a22.4%2022.4%200%200%201-4%202z%22/%3E%3Cpath%20d=%22M9%2012H4s.6-3%202-4c1.6-1.1%205%200%205%200%22/%3E%3Cpath%20d=%22M12%2015v5s3-.6%204-2c1.1-1.6%200-5%200-5%22/%3E%3C/svg%3E"); }
.ng-i-heart { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M19.5%2012.6%2012%2020l-7.5-7.4A4.9%204.9%200%200%201%2012%206a4.9%204.9%200%200%201%207.5%206.6z%22/%3E%3C/svg%3E"); }
.ng-i-heart-fill { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20fill=%22%23000%22%20d=%22M19.5%2012.6%2012%2020l-7.5-7.4A4.9%204.9%200%200%201%2012%206a4.9%204.9%200%200%201%207.5%206.6z%22/%3E%3C/svg%3E"); }
.ng-i-library { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%204v16%22/%3E%3Cpath%20d=%22M9%204v16%22/%3E%3Cpath%20d=%22m14%204.5%205%2015%22/%3E%3C/svg%3E"); }
.ng-i-bell { --ng-i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.75%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%208a6%206%200%201%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22/%3E%3Cpath%20d=%22M10.3%2021a1.9%201.9%200%200%200%203.4%200%22/%3E%3C/svg%3E"); }
.ng-i-infinity { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 12c-2-2.7-3.6-4-5.5-4a4 4 0 0 0 0 8c1.9 0 3.5-1.3 5.5-4zm0 0c2 2.7 3.6 4 5.5 4a4 4 0 0 0 0-8c-1.9 0-3.5 1.3-5.5 4z%22/%3E%3C/svg%3E"); }
.ng-i-upload { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 15.5V4%22/%3E%3Cpath d=%22M7 9l5-5 5 5%22/%3E%3Cpath d=%22M5 19.5h14%22/%3E%3C/svg%3E"); }
.ng-i-chart { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 20V12%22/%3E%3Cpath d=%22M12 20V5%22/%3E%3Cpath d=%22M19 20v-9%22/%3E%3C/svg%3E"); }
.ng-i-eye { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); }
.ng-i-eye-off { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4l16 16%22/%3E%3Cpath d=%22M9.9 5.8A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a16.6 16.6 0 0 1-2.6 3.4%22/%3E%3Cpath d=%22M6.6 7.2C4 9 2.5 12 2.5 12S6 18.5 12 18.5a9.4 9.4 0 0 0 4.2-1%22/%3E%3Cpath d=%22M10 10.2a2.8 2.8 0 0 0 3.8 3.9%22/%3E%3C/svg%3E"); }
.ng-i-send { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 3.5 10 14%22/%3E%3Cpath d=%22M20.5 3.5 14 20.5l-4-6.5-6.5-4z%22/%3E%3C/svg%3E"); }
.ng-i-sign-in { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4%22/%3E%3Cpath d=%22M3.5 12H14%22/%3E%3Cpath d=%22M10 8l4 4-4 4%22/%3E%3C/svg%3E"); }
.ng-i-rotate { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 12a8 8 0 1 1-2.3-5.6%22/%3E%3Cpath d=%22M20 4v4.5h-4.5%22/%3E%3C/svg%3E"); }
.ng-i-users { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228.5%22 r=%223.5%22/%3E%3Cpath d=%22M2.5 20a6.5 6.5 0 0 1 13 0%22/%3E%3Cpath d=%22M15.5 5.2a3.5 3.5 0 0 1 0 6.6%22/%3E%3Cpath d=%22M18 14.2a6.5 6.5 0 0 1 3.5 5.8%22/%3E%3C/svg%3E"); }
.ng-i-map-pin { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z%22/%3E%3Ccircle cx=%2212%22 cy=%229.5%22 r=%222.5%22/%3E%3C/svg%3E"); }
.ng-i-info { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M12 11v5.5%22/%3E%3Ccircle fill=%22%23000%22 stroke=%22none%22 cx=%2212%22 cy=%227.8%22 r=%221.1%22/%3E%3C/svg%3E"); }
.ng-i-link { --ng-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1%22/%3E%3Cpath d=%22M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1%22/%3E%3C/svg%3E"); }

/* ---------- Botão ---------- */
.ng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-control);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font: 700 15px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s ease-out;
}
.ng-btn:active { transform: scale(.98); }
.ng-btn--primary { background: var(--accent); color: var(--on-accent); }
.ng-btn--primary:hover { background: var(--accent-hover); }
.ng-btn--secondary { background: var(--ink); color: var(--panel); }
.ng-btn--secondary:hover { opacity: .9; }
.ng-btn--ghost { background: transparent; color: var(--ink); border-color: var(--strong); }
.ng-btn--ghost:hover { border-color: var(--ink); }
.ng-btn--sm { height: var(--size-control-sm); padding: 0 var(--space-4); font-size: 13px; }
.ng-btn--block { display: flex; width: 100%; }
.ng-btn:disabled, .ng-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.ng-btn.is-loading { pointer-events: none; }
.ng-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ng-roda .7s linear infinite;
}
@keyframes ng-roda { to { transform: rotate(360deg); } }

/* ---------- Icon button ---------- */
.ng-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-control);
  height: var(--size-control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.ng-icon-btn:hover { background: var(--surface-2); }
.ng-icon-btn--outline { border: 1px solid var(--line-strong); }
.ng-icon-btn--muted { color: var(--ink-2); }
.ng-icon-btn--play { width: var(--size-play); height: var(--size-play); background: var(--accent); color: var(--on-accent); }
.ng-icon-btn--play:hover { background: var(--accent-hover); }
.ng-icon-btn--play.ng-icon-btn--sm { width: var(--size-control); height: var(--size-control); }
.ng-icon-btn[aria-pressed="true"] { color: var(--accent-ink); }

/* ---------- Chip (filtro) ---------- */
.ng-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.ng-chip {
  flex: none;
  height: var(--size-control-sm);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--ink);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.ng-chip:hover { background: var(--surface-3); }
.ng-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---------- Controlo segmentado ---------- */
.ng-seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-full); background: var(--surface-2); }
.ng-seg button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--ink-2);
  font: 700 13px/1 var(--font-sans); cursor: pointer;
}
.ng-seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-raised); }

/* ---------- Pesquisa ---------- */
.ng-search {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--size-control); padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--ink-2);
}
.ng-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ng-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  color: var(--ink); font: 500 15px/1 var(--font-sans);
}
.ng-search input::placeholder { color: var(--ink-2); }

/* ---------- Campo de formulário ---------- */
.ng-field { display: grid; gap: 6px; }
.ng-field__label { font: 700 14px/20px var(--font-sans); color: var(--ink); }
.ng-field__hint { display: flex; align-items: center; gap: var(--space-1); font: 500 13px/20px var(--font-sans); color: var(--ink-2); }
.ng-input {
  height: var(--size-control); padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font: 500 15px/1 var(--font-sans);
  transition: border-color .15s ease-out;
}
.ng-input::placeholder { color: var(--ink-2); }
.ng-input:hover { border-color: var(--strong); }
.ng-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ng-field.is-invalid .ng-input { border-color: var(--danger); }
.ng-field.is-invalid .ng-field__hint { color: var(--danger); }

/* ---------- Faixa (lista) ---------- */
.ng-tracks { display: grid; gap: 2px; padding: 0; margin: 0; list-style: none; }
.ng-track {
  display: grid;
  grid-template-columns: 24px var(--size-cover-sm) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.ng-track:hover { background: var(--surface); }
.ng-track__num { font: 600 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: center; }
.ng-track__cover { width: var(--size-cover-sm); height: var(--size-cover-sm); border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-2); display: block; }
.ng-track__text { min-width: 0; display: grid; }
.ng-track__title { font: 700 15px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-track__artist { font: 500 13px/20px var(--font-sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-track__time { font: 600 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ng-track.is-current .ng-track__title { color: var(--accent-ink); }
.ng-eq { display: none; height: 14px; align-items: flex-end; justify-content: center; gap: 2px; }
.ng-eq i { width: 3px; border-radius: 1px; background: var(--accent-ink); animation: ng-eq .8s ease-in-out infinite alternate; }
.ng-eq i { height: 60%; }
.ng-eq i:nth-child(1) { animation-delay: -.3s; }
.ng-eq i:nth-child(2) { animation-delay: -.7s; }
.ng-eq i:nth-child(3) { animation-delay: -.5s; }
@keyframes ng-eq { from { height: 30%; } to { height: 100%; } }
.ng-track.is-playing .ng-eq { display: flex; }
.ng-track.is-playing .ng-track__num > span:first-child { display: none; }

/* ---------- Cartão de música / álbum ---------- */
.ng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-5) var(--space-4); }
.ng-card { display: grid; gap: var(--space-2); min-width: 0; color: inherit; text-decoration: none; }
.ng-card__cover { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.ng-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ng-card__cover .ng-icon-btn--play {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease-out, transform .15s ease-out, background-color .15s ease-out;
}
.ng-card:hover .ng-icon-btn--play, .ng-card:focus-within .ng-icon-btn--play { opacity: 1; transform: none; }
.ng-card__title { font: 700 15px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-card__meta { font: 500 13px/20px var(--font-sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Artista ---------- */
.ng-artist { display: grid; gap: var(--space-2); justify-items: center; text-align: center; color: inherit; text-decoration: none; min-width: 0; }
.ng-artist img { width: 100%; aspect-ratio: 1; border-radius: var(--radius-full); object-fit: cover; background: var(--surface-2); display: block; }
.ng-artist__name { display: inline-flex; align-items: center; gap: var(--space-1); font: 700 15px/20px var(--font-sans); max-width: 100%; }
.ng-artist__name .ng-i { color: var(--accent-ink); }
.ng-artist__meta { font: 500 13px/20px var(--font-sans); color: var(--ink-2); }

/* ---------- Cabeçalho de secção ---------- */
.ng-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.ng-section-head h2 { margin: 0; font: 700 20px/26px var(--font-display); }
.ng-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--strong); border-radius: var(--radius-xs); }
.ng-link:hover { text-decoration-color: var(--ink); }

/* ---------- Player ---------- */
.ng-player {
  position: relative;
  display: grid;
  grid-template-columns: var(--size-cover-sm) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.ng-player__cover { width: var(--size-cover-sm); height: var(--size-cover-sm); border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-2); display: block; }
.ng-player__text { min-width: 0; display: grid; }
.ng-player__title { font: 700 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-player__artist { font: 500 13px/18px var(--font-sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-player__actions { display: flex; align-items: center; gap: var(--space-1); }
.ng-player__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.ng-player__progress span { display: block; height: 100%; background: var(--progress); }
.ng-player--wide { grid-template-columns: var(--size-cover-sm) minmax(160px, 1fr) auto minmax(160px, 1fr); }
.ng-player__center { display: grid; justify-items: center; gap: var(--space-1); }
.ng-player__controls { display: flex; align-items: center; gap: var(--space-2); }
.ng-player__time { display: flex; align-items: center; gap: var(--space-2); width: min(420px, 100%); font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ng-bar { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.ng-bar span { display: block; height: 100%; border-radius: inherit; background: var(--progress); }
.ng-player--wide .ng-player__actions { justify-content: flex-end; }
.ng-player--wide .ng-player__progress { display: none; }

/* ---------- Navegação inferior (telemóvel) ---------- */
.ng-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: var(--size-nav);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.ng-nav a {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  color: var(--ink-2); text-decoration: none;
  font: 600 11px/14px var(--font-sans);
}
.ng-nav a[aria-current="page"] { color: var(--ink); font-weight: 800; }
.ng-nav a[aria-current="page"] .ng-i { color: var(--accent-ink); }

/* ---------- Cabeçalho do site ---------- */
.ng-header {
  display: flex; align-items: center; gap: var(--space-4);
  height: 64px; padding: 0 var(--space-6);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.ng-header__logo { height: 32px; width: auto; display: block; }
.ng-header__nav { display: flex; gap: var(--space-5); }
.ng-header__nav a { font: 700 14px/20px var(--font-sans); color: var(--ink-2); text-decoration: none; }
.ng-header__nav a[aria-current="page"] { color: var(--ink); }
.ng-header .ng-search { flex: 1; max-width: 420px; margin-left: auto; }
.ng-header__end { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- Badge ---------- */
.ng-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--ink-2);
  font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.ng-badge--accent { background: var(--accent-soft); color: var(--accent-ink); }
.ng-badge--solid { background: var(--accent); color: var(--on-accent); }
.ng-badge .ng-i { width: 14px; height: 14px; }

/* ---------- Toast ---------- */
.ng-toast {
  display: flex; align-items: center; gap: var(--space-3);
  width: min(360px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--inverse); color: var(--on-inverse);
  box-shadow: var(--shadow-overlay);
  font: 600 14px/20px var(--font-sans);
}
.ng-toast__body { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
.ng-toast__bar { height: 3px; border-radius: var(--radius-full); background: var(--line-strong); overflow: hidden; }
.ng-toast__bar span { display: block; height: 100%; background: var(--accent); }

/* ---------- Alerta ---------- */
.ng-alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: 500 14px/20px var(--font-sans);
}
.ng-alert strong { font-weight: 700; }
.ng-alert > .ng-i { margin-top: 0; }
.ng-alert--danger { background: var(--danger-soft); }
.ng-alert--danger > .ng-i { color: var(--danger); }
.ng-alert--success { background: var(--success-soft); }
.ng-alert--success > .ng-i { color: var(--success); }
.ng-alert--info > .ng-i { color: var(--accent-ink); }

/* ---------- Plano ---------- */
.ng-plan {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg);
}
.ng-plan--featured { border: 2px solid var(--accent-ink); background: var(--accent-soft); }
.ng-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ng-plan__name { margin: 0; font: 700 17px/24px var(--font-sans); }
.ng-plan__price { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); font: 700 36px/40px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ng-plan__price small { font: 700 15px/20px var(--font-sans); letter-spacing: 0; }
.ng-plan__unit { margin: var(--space-1) 0 0; font: 500 13px/20px var(--font-sans); color: var(--ink-2); }
.ng-plan__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; flex: 1; font: 500 14px/20px var(--font-sans); }
.ng-plan__list li { display: flex; align-items: center; gap: var(--space-2); }
.ng-plan__list .ng-i { color: var(--accent-ink); }

/* ---------- Números (estatísticas) ---------- */
.ng-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; }
.ng-stats div { display: flex; flex-direction: column-reverse; }
.ng-stats dd { margin: 0; font: 700 24px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.ng-stats dt { font: 500 13px/20px var(--font-sans); color: var(--ink-2); }

/* ---------- Ranking ---------- */
.ng-rank { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ng-rank li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); row-gap: 6px; }
.ng-rank__pos { font: 600 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ng-rank__name { font: 600 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-rank__val { font: 600 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ng-rank .ng-bar { grid-column: 2 / 4; flex: none; }

/* ---------- Folha (sheet / diálogo) ---------- */
.ng-scrim { background: var(--scrim); }
.ng-sheet {
  display: grid; gap: var(--space-4);
  width: min(440px, 100%);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow-overlay);
}
.ng-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ng-sheet__head h2 { margin: 0; font: 700 17px/24px var(--font-sans); }
.ng-sheet > .ng-seg { justify-self: start; }
.ng-sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) { .ng-sheet--bottom { border-radius: var(--radius-md) var(--radius-md) 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Sona (padrão da marca) ---------- */
.ng-sona {
  background: var(--ng-sona-cor, var(--line));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22%3E%3Cpath d=%22M0 24C12 8 36 8 48 24C36 40 12 40 0 24Z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Ccircle cx=%2236%22 cy=%2236%22 r=%222%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E") 0 0 / 48px 48px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22%3E%3Cpath d=%22M0 24C12 8 36 8 48 24C36 40 12 40 0 24Z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Ccircle cx=%2236%22 cy=%2236%22 r=%222%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E") 0 0 / 48px 48px repeat;
}
.ng-cover-empty { position: relative; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.ng-cover-empty .ng-sona { position: absolute; inset: 0; --ng-sona-cor: var(--surface-3); }
.ng-cover-empty .ng-i { position: relative; }

/* Botões que alternam (♥, Seguir, Guardar, Avisa-me): .ng-on aparece quando está ativo, .ng-off quando não */
[aria-pressed="true"] > .ng-off, [aria-pressed="false"] > .ng-on, [data-alterna]:not([aria-pressed]) > .ng-on { display: none !important; }
[data-gosto][aria-pressed="true"], [data-gosto-atual][aria-pressed="true"] { color: var(--accent-ink); opacity: 1; }