/* ── DARK (padrão) ── */
:root, [data-theme="dark"] {
  --bg: #000;
  --surface: #07050f;
  --surface-2: #0b0e1e;
  --border: #1a1e36;
  --accent: #2b6ac7;
  --accent-2: #4a9eff;
  --chord-blue: #4a9eff;
  --text: #f8f6ff;
  --muted: #8b88a8;
  --nav-bg: rgba(0,0,0,.96);
  --hero-start: #000;
  --hero-glow1: rgba(43,106,199,.38);
  --hero-glow2: rgba(43,106,199,.22);
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
}

/* ── LIGHT ── */
[data-theme="light"] {
  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #ebebeb;
  --border: #d0d0d0;
  --accent: #235085;
  --accent-2: #2b6ac7;
  --chord-blue: #235085;
  --text: #1a1a1a;
  --muted: #666666;
  --nav-bg: rgba(244,244,244,.96);
  --hero-start: #ebebeb;
  --hero-glow1: rgba(35,80,133,.14);
  --hero-glow2: rgba(35,80,133,.08);
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
}

/* ── HEAVY DARK (visivel apenas para admin) ── */
[data-theme="dark-old"] {
  --bg: #0f0e17;
  --surface: #1a1929;
  --surface-2: #221f35;
  --border: #302d49;
  --accent: #195596;
  --accent-2: #4a9eff;
  --chord-blue: #4a9eff;
  --text: #f4f1ff;
  --muted: #9b97ae;
  --nav-bg: rgba(15,14,23,.94);
  --hero-start: #05050b;
  --hero-glow1: rgba(25,85,150,.32);
  --hero-glow2: rgba(25,85,150,.18);
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
}

/* ── HEAVY LIGHT (visivel apenas para admin) ── */
[data-theme="light-old"] {
  --bg: #f4f2ff;
  --surface: #ffffff;
  --surface-2: #eceaff;
  --border: #d8d5f0;
  --accent: #195596;
  --accent-2: #195596;
  --chord-blue: #195596;
  --text: #1a1829;
  --muted: #6b6880;
  --nav-bg: rgba(244,242,255,.96);
  --hero-start: #e8e4ff;
  --hero-glow1: rgba(25,85,150,.12);
  --hero-glow2: rgba(25,85,150,.08);
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter, system-ui, sans-serif; line-height: 1.55; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.header-wrap { position: sticky; top: 0; z-index: 50; }
.nav { position: relative; display: flex; align-items: center; gap: 22px; min-height: 90px; padding: 0 36px; border-bottom: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(14px); box-shadow: 0 2px 18px rgba(0,0,0,.18); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand-logo { display: block; width: 72px; height: 72px; flex: 0 0 72px; border-radius: 16px; object-fit: contain; }
/* Logo sem fundo: só a arte, com sombra de elevação (3D) */
.logo-fx {
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(12, 68, 124, .32)) drop-shadow(0 2px 4px rgba(12, 68, 124, .22));
}
/* Tema escuro: contorno e brilho azul-claro mantêm a arte visível */
[data-theme="dark"] .logo-fx,
[data-theme="dark-old"] .logo-fx {
  filter: drop-shadow(0 0 1px rgba(214, 233, 255, .95)) drop-shadow(0 0 9px rgba(120, 170, 255, .6));
}
.logo-fx .brand-logo, .logo-fx .footer-logo {
  transition: transform .25s ease;
}
.brand:hover .logo-fx .brand-logo {
  transform: perspective(320px) rotateX(7deg) translateY(-2px) scale(1.08);
}
.brand-tagline { font-size: .85rem; font-weight: 600; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.brand-tagline strong { color: var(--accent-2); font-weight: 800; }
.nav select,
.theme-sel {
  min-height: 38px;
  padding: 7px 36px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 58%, var(--border));
  border-radius: 10px;
  color: var(--text);
  background: var(--bg);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  color-scheme: dark;
}
.nav select:hover,
.theme-sel:hover,
.nav select:focus,
.theme-sel:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nav select option,
.theme-sel option {
  color: var(--text);
  background: var(--surface);
}
[data-theme="light"] .nav select,
[data-theme="light"] .theme-sel,
[data-theme="light-old"] .nav select,
[data-theme="light-old"] .theme-sel {
  color-scheme: light;
}
.prefs { position: relative; flex: 0 0 auto; }
.prefs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  cursor: pointer;
  transition: .16s ease;
}
.prefs-trigger:hover, .prefs.open .prefs-trigger {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-2) 58%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent) 18%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 16%, transparent);
}
.prefs-trigger-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent-2) 70%, var(--border));
  border-radius: 50%;
  background: linear-gradient(90deg, #8ec2ff 0 50%, #111827 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.prefs-trigger-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8eaff;
  box-shadow: 0 -8px 0 -2px #d8eaff, 0 8px 0 -2px #d8eaff, 8px 0 0 -2px #d8eaff, -8px 0 0 -2px #d8eaff;
  transform: translateY(-50%);
}
.prefs-trigger-icon::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 3px 0 0 0 #111827;
  transform: translateY(-50%);
}
.prefs-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 26px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 160;
}
.prefs.open .prefs-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.prefs-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 4px;
  border-bottom: 1px solid var(--border);
}
.prefs-panel-head strong { font-size: 1.02rem; line-height: 1.2; }
.prefs-panel-head span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.prefs-panel-head-actions { display: flex; align-items: center; gap: 10px; }
.prefs-panel-head-actions button { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface-2); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.prefs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  padding-top: 8px;
}
.prefs-more-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent) 8%);
  cursor: pointer;
  font-weight: 800;
}
.prefs-more-trigger:hover { border-color: var(--accent-2); }
.prefs-more-arrow { color: var(--accent-2); font-size: 1.5rem; line-height: 1; transition: transform .18s ease; }
.prefs-more-trigger[aria-expanded="true"] .prefs-more-arrow { transform: rotate(180deg); }
.prefs-visual-controls {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 8px;
  align-content: start;
}
.prefs-visual-controls[hidden] { display: none; }
.prefs-visual-controls .prefs-group { gap: 3px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; }
.prefs-visual-controls .segmented { gap: 3px; padding: 3px; }
.prefs-visual-controls .segmented button { gap: 1px; min-height: 30px; padding: 2px; }
.prefs-visual-controls .segmented button small { font-size: .6rem; line-height: 1; }
.prefs-visual-controls .prefs-profiles { order: 1; }
.prefs-visual-controls .prefs-density { order: 2; }
.prefs-visual-controls .prefs-contrast { order: 3; }
.prefs-visual-controls .prefs-actions { order: 4; }
.prefs-group { display: grid; gap: 9px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.prefs-group:last-of-type { border-bottom: 0; }
.prefs-label { color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 64%, var(--surface-2) 36%);
}
.segmented.profile-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.segmented button, .heavy-grid button, .prefs-reset {
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: .16s ease;
}
.segmented button {
  display: grid;
  gap: 6px;
  min-height: 32px;
  place-items: center;
  padding: 8px 6px;
  border-radius: 10px;
}
.segmented button small, .heavy-grid button small { font-size: .7rem; font-weight: 800; }
.segmented button:hover, .segmented button.active, .heavy-grid button:hover, .heavy-grid button.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-2) 52%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%), color-mix(in srgb, var(--surface) 92%, var(--accent) 8%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.density-mark {
  display: grid;
  width: 22px;
  height: 14px;
  align-content: center;
  gap: 2px;
}
.density-mark::before, .density-mark::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.density-mark.compact { gap: 2px; }
.density-mark.spacious { gap: 4px; }
.mode-mark, .contrast-mark {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.mode-mark.auto {
  border: 2px solid var(--accent-2);
  background: linear-gradient(90deg, var(--accent-2) 0 50%, transparent 50%);
}
.mode-mark.light { border: 2px solid var(--accent); background: #f8fafc; }
.mode-mark.dark { border: 2px solid var(--accent-2); background: #05050b; }
.mode-mark.heavy { border: 2px solid var(--accent-2); background: linear-gradient(135deg, #f8fafc 0 48%, var(--accent-2) 48% 66%, #05050b 66%); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.contrast-mark.soft { background: color-mix(in srgb, var(--muted) 42%, transparent); }
.contrast-mark.balanced { background: linear-gradient(90deg, transparent 0 48%, var(--accent-2) 48% 100%); border: 2px solid color-mix(in srgb, var(--accent-2) 72%, var(--border)); }
.contrast-mark.high { background: var(--text); box-shadow: inset 0 0 0 8px var(--bg); border: 2px solid var(--text); }
.heavy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.heavy-grid button {
  display: grid;
  gap: 3px;
  min-height: 66px;
  align-content: center;
  padding: 10px;
  border-radius: 12px;
  text-align: left;
}
.heavy-grid button span { color: var(--text); font-weight: 900; }
.heavy-grid button small { color: var(--muted); }
.instrument-chooser {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 46%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(135deg, #315d79, #274b66 58%, #203f58);
  overflow: hidden;
}
.instrument-chooser p {
  max-width: none;
  margin: 0;
  padding: 4px 8px;
  color: #172033;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.instrument-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  padding-top: 4px;
}
.instrument-option {
  display: grid;
  gap: 5px;
  place-items: center;
  min-height: 72px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.instrument-option:hover,
.instrument-option.active {
  color: #fff;
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.14);
  box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.16);
  transform: translateY(-3px);
}
.instrument-option small {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
}
.instrument-art {
  display: block;
  width: min(100%, 62px);
  height: 40px;
  background: rgba(255,255,255,.76);
  -webkit-mask: var(--instrument-src) center / contain no-repeat;
  mask: var(--instrument-src) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.1));
  transition: background .18s ease, filter .18s ease, transform .18s ease;
}
.instrument-option:hover .instrument-art,
.instrument-option.active .instrument-art {
  background: linear-gradient(135deg, #fff2b8, #69d7ff 42%, #2b6ac7 78%, #f59e0b);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
  transform: scale(1.08) rotate(-2deg);
}
.instrument-option.traditional .instrument-neutral {
  display: none;
  width: 74px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.instrument-option.traditional:hover .instrument-neutral,
.instrument-option.traditional.active .instrument-neutral {
  background: linear-gradient(135deg, #fff2b8, #69d7ff 54%, #2b6ac7);
  box-shadow: 0 12px 20px rgba(0,0,0,.22);
  transform: scale(1.08);
}
.instrument-option.traditional {
  align-content: center;
  min-height: 72px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.instrument-option.traditional small {
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .03em;
}
.instrument-keyboard { --instrument-src: url("/static/portal/img/preferences/teclado.0d2f0d672ae6.png"); }
.instrument-guitar { --instrument-src: url("/static/portal/img/preferences/guitarra.42067a38cea4.png"); }
.instrument-bass { --instrument-src: url("/static/portal/img/preferences/baixo.b6ee81d19b57.png"); }
.instrument-cavaquinho { --instrument-src: url("/static/portal/img/preferences/cavaquinho.0c8dcd57caf5.png"); }
.instrument-classic-guitar { --instrument-src: url("/static/portal/img/preferences/violao-classico.b6ee56196ea0.png"); }
.instrument-drums { --instrument-src: url("/static/portal/img/preferences/bateria.7b67501a987b.png"); }
.instrument-acoustic-guitar { --instrument-src: url("/static/portal/img/preferences/violao.574e9e7e0400.png"); }
.prefs-actions { display: flex; height: 36px; align-self: center; padding-top: 0; }
.prefs-reset {
  width: 100%;
  min-height: 34px;
  height: 36px;
  border-color: var(--border);
  border-radius: 11px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.prefs-reset:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--surface-2) 72%, var(--accent) 12%); }
.login-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: transparent; font-size: .88rem; font-weight: 600; text-decoration: none; transition: .14s; }
.login-btn:hover { border-color: var(--accent-2); color: var(--accent-2); background: rgba(0,196,204,.08); }
.user-menu { position: relative; }
.user-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: transparent; font-size: .88rem; font-weight: 600; cursor: pointer; transition: .14s; }
.user-trigger:hover { border-color: var(--accent-2); color: var(--accent-2); background: rgba(0,196,204,.08); }
.user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.22); overflow: hidden; z-index: 100; }
.user-menu.open .user-dropdown { display: block; }
.user-dropdown a, .user-dropdown button { display: block; width: 100%; padding: 11px 16px; color: var(--muted); background: none; border: none; font: inherit; font-size: .86rem; text-align: left; text-decoration: none; cursor: pointer; }
.user-dropdown a:hover, .user-dropdown button:hover { color: var(--accent-2); background: rgba(25,85,150,.08); }
.user-dropdown-sep { height: 1px; margin: 6px 0; background: var(--border); }
.user-dropdown-label { display: block; padding: 8px 16px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a { display: block; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-size: .9rem; text-decoration: none; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.menu-row { display: flex; justify-content: flex-start; width: 100%; padding: 12px 36px 0; }
.menu-trigger { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 0; color: var(--text); background: var(--surface); cursor: pointer; font: inherit; font-size: 1.35rem; font-weight: 800; line-height: 1; }
.menu-trigger:hover { border-color: var(--accent); color: var(--accent); }
.side-menu-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.48); }
.side-menu { position: fixed; inset: 0 auto 0 0; z-index: 91; width: min(310px, 88vw); padding: 22px 14px; overflow-y: auto; color: var(--text); background: radial-gradient(circle at 30% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%), var(--surface); border-right: 1px solid var(--border); box-shadow: 12px 0 36px color-mix(in srgb, #000 34%, transparent); transform: translateX(-105%); transition: transform .22s ease; }
.side-menu.open { transform: translateX(0); }
.side-menu-head { display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 0 8px 16px; border-bottom: 1px solid var(--border); }
.side-menu-brand { display: inline-flex; align-items: center; text-decoration: none; }
.side-menu-brand img { display: block; width: 82px; height: 72px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(60,130,225,.28)); }
.side-menu-head button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--surface-2) 82%, transparent); cursor: pointer; font-size: 1.8rem; line-height: 1; }
.side-menu-links { display: grid; gap: 5px; padding-top: 16px; }
.side-menu-links a, .side-menu-links form button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 9px; padding: 11px 13px; color: var(--text); background: transparent; text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: color .14s ease, background .14s ease, transform .14s ease; }
.side-menu-links a:hover, .side-menu-links form button:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); transform: translateX(2px); }
.side-menu-links a.active { color: #fff; background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 76%, #06132b), var(--accent)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent); }
.side-icon { display: inline-grid; width: 22px; min-width: 22px; height: 22px; place-items: center; color: var(--accent-2); font-size: 1.15rem; line-height: 1; }
.side-menu-links a.active .side-icon { color: #fff; }
.side-menu-separator { height: 1px; margin: 9px 10px; background: var(--border); }
.side-menu-links form { margin: 0; }
.money-icon { display: inline-grid; width: 20px; height: 20px; margin-right: 7px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: .72rem; font-weight: 900; vertical-align: middle; }
.money-icon-gray { color: var(--surface); background: var(--muted); }
.nota-icon { display: inline-block; margin-right: 7px; color: var(--accent-2); font-size: 1rem; vertical-align: middle; }
.logout-form { display: inline-flex; margin: 0; }
.user-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.pending { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 9px; color: #fff; background: #ef4444; font-size: .65rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 15px; border: 1px solid transparent; border-radius: 9px; color: #fff; background: var(--accent); font-weight: 700; font-size: .84rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-2); }
.btn.ghost { color: var(--muted); border-color: var(--border); background: transparent; }
.btn.ghost:hover { color: var(--accent-2); border-color: var(--accent); background: rgba(0,196,204,.08); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.messages { width: min(1180px, calc(100% - 36px)); margin: 16px auto 0; }
.message { padding: 12px 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.message.success { color: #235085; }
.message.error { color: var(--danger); }

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-cinematic { min-height: clamp(560px, 74vh, 760px); display: grid; grid-template-columns: minmax(0, 680px) minmax(220px, 330px); align-items: center; gap: 56px; padding: clamp(54px, 6vw, 86px) clamp(28px, 7vw, 92px) clamp(42px, 6vw, 64px); background: var(--hero-start); }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: var(--hero-img, url("/static/img/azcifras-hero.73fc756e0599.png")) center right / cover no-repeat; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--hero-start) 96%, transparent) 0%, color-mix(in srgb, var(--hero-start) 76%, transparent) 34%, color-mix(in srgb, var(--hero-start) 20%, transparent) 70%); }
.hero-cinematic::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 20% 30%, var(--hero-glow1), transparent 32%), radial-gradient(circle at 70% 24%, var(--hero-glow2), transparent 30%), linear-gradient(180deg, transparent, var(--bg) 98%); }
.hero-cinematic::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 26%; background: linear-gradient(180deg, transparent, var(--bg)); }
/* ── EQ STRIP (exclusivo dos temas heavy) ── */
.eq-strip { display: none; align-items: flex-end; gap: 2px; height: 36px; padding: 0 0 2px; background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; }
[data-theme="dark-old"] .eq-strip,
[data-theme="light-old"] .eq-strip { display: flex; }
.eq-bar { flex: 1; min-width: 4px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); height: 3px; animation: eq-pulse var(--d,.6s) ease-in-out infinite var(--delay,0s); }
@keyframes eq-pulse { 0%,100% { height:4px; opacity:.45; } 50% { height:var(--h,20px); opacity:1; } }
.eq-bar.b1  { --h:18px; --d:.55s; --delay:0s;    }
.eq-bar.b2  { --h:34px; --d:.48s; --delay:.06s;  }
.eq-bar.b3  { --h:26px; --d:.62s; --delay:.11s;  }
.eq-bar.b4  { --h:40px; --d:.44s; --delay:.17s;  }
.eq-bar.b5  { --h:22px; --d:.58s; --delay:.03s;  }
.eq-bar.b6  { --h:36px; --d:.51s; --delay:.14s;  }
.eq-bar.b7  { --h:44px; --d:.46s; --delay:.22s;  }
.eq-bar.b8  { --h:28px; --d:.63s; --delay:.08s;  }
.eq-bar.b9  { --h:38px; --d:.54s; --delay:.19s;  }
.eq-bar.b10 { --h:46px; --d:.42s; --delay:.05s;  }
.eq-bar.b11 { --h:24px; --d:.60s; --delay:.13s;  }
.eq-bar.b12 { --h:40px; --d:.49s; --delay:.25s;  }
.eq-bar.b13 { --h:32px; --d:.56s; --delay:.09s;  }
.eq-bar.b14 { --h:46px; --d:.43s; --delay:.18s;  }
.eq-bar.b15 { --h:20px; --d:.66s; --delay:.04s;  }
.eq-bar.b16 { --h:38px; --d:.52s; --delay:.21s;  }
.eq-bar.b17 { --h:28px; --d:.59s; --delay:.12s;  }
.eq-bar.b18 { --h:42px; --d:.47s; --delay:.07s;  }
.eq-bar.b19 { --h:22px; --d:.61s; --delay:.16s;  }
.eq-bar.b20 { --h:36px; --d:.50s; --delay:.23s;  }
.eq-bar.b21 { --h:40px; --d:.45s; --delay:.01s;  }
.eq-bar.b22 { --h:26px; --d:.57s; --delay:.15s;  }
.eq-bar.b23 { --h:34px; --d:.53s; --delay:.20s;  }
.eq-bar.b24 { --h:18px; --d:.65s; --delay:.10s;  }
.hero-copy { max-width: 660px; }
.eyebrow { display: inline-block; margin-bottom: 22px; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 999px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: .78rem; font-weight: 800; }
.hero h1 { max-width: 620px; margin: 0; font-size: clamp(3.1rem,6.6vw,6rem); letter-spacing: 0; line-height: .98; color: var(--text); }
.hero h1 span { color: var(--accent-2); white-space: nowrap; }
.hero p { max-width: 560px; margin: 22px 0 28px; color: var(--muted); font-size: clamp(1rem,1.5vw,1.18rem); }
.search { display: flex; width: min(100%, 620px); margin: 0; padding: 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 18px 42px rgba(0,0,0,.18); backdrop-filter: blur(18px); }
.search input { min-width: 0; flex: 1; padding: 10px 18px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .95rem; }
.search button { min-width: 110px; border: 0; border-radius: 999px; }
.stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 24px; color: var(--muted); font-size: .84rem; }
.stats strong { color: var(--accent-2); font-size: 1.08rem; }
.hero-card { align-self: end; max-width: 310px; padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: 0 18px 48px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.hero-card strong { display: block; margin-bottom: 10px; font-size: 1rem; color: var(--text); }
.hero-card p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.hero-card a { color: var(--accent-2); font-weight: 800; text-decoration: none; }
.floating-chord { position: absolute; z-index: -1; color: color-mix(in srgb, var(--accent-2) 18%, transparent); font-weight: 900; line-height: 1; pointer-events: none; }
.chord-a { top: 24%; left: 46%; font-size: clamp(4rem, 8vw, 8rem); transform: rotate(-12deg); }
.chord-b { top: 15%; left: 58%; font-size: clamp(3.2rem, 5.2vw, 6.2rem); transform: rotate(-8deg); }
.chord-c { top: 33%; left: 64%; font-size: clamp(2.4rem, 4.2vw, 5rem); }
.chord-d { top: 21%; right: 9%; font-size: clamp(3rem, 5vw, 5.8rem); transform: rotate(14deg); }

.page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 80px; }
.grid-main { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 28px; align-items: start; }
.surface { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
/* Páginas de texto corrido (legais, artigos): container centralizado e com respiro */
.content-wrap { width: min(800px, calc(100% - 40px)); margin: 42px auto 80px; padding: clamp(22px, 4vw, 44px); }
.legal-page h1 { margin-top: 0; }
.legal-page h2 { margin-top: 28px; }
.legal-page p, .legal-page li { line-height: 1.72; }
.legal-page ul { padding-left: 22px; margin: 0 0 14px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table th { color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 18px; color: var(--muted); }
.pagination a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.section-head h1, .section-head h2 { margin: 0; }
.section-head p { margin: 4px 0 0; }
.muted { color: var(--muted); }

.home-page { width: min(1360px, calc(100% - 48px)); padding-top: 34px; }
.quick-tones { display: grid; grid-template-columns: repeat(8, minmax(82px, 1fr)); gap: 12px; margin: 0 0 46px; }
.quick-tones a { display: grid; gap: 4px; min-height: 74px; align-content: center; padding: 13px; border: 1px solid var(--border); border-radius: 12px; color: var(--accent-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); text-align: center; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); transition: .16s ease; }
.quick-tones a:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.24); }
.quick-tones strong { font-size: 1.24rem; line-height: 1; }
.quick-tones span { color: var(--muted); font-size: .72rem; }
.featured-section { margin-bottom: 34px; }
.section-link { text-decoration: none; font-weight: 800; }
.featured-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.feature-card { position: relative; display: grid; min-height: 214px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #12101d; text-decoration: none; transition: .18s ease; }
.feature-card:hover { border-color: rgba(138,191,255,.55); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.feature-art { position: absolute; inset: 0; background: radial-gradient(circle at 38% 22%, rgba(138,191,255,.32), transparent 28%), linear-gradient(180deg, transparent 0%, rgba(8,7,13,.88) 72%), var(--hero-img, url("/static/img/azcifras-hero.73fc756e0599.png")) center / cover no-repeat; filter: saturate(.9); opacity: .74; }
.feature-card:nth-child(2) .feature-art { background-position: 68% center; }
.feature-card:nth-child(3) .feature-art { background-position: 78% center; }
.feature-card:nth-child(4) .feature-art { background-position: 58% center; }
.feature-card:nth-child(5) .feature-art { background-position: 48% center; }
.feature-content { position: relative; z-index: 1; align-self: end; display: grid; gap: 4px; padding: 18px; }
.feature-content strong { color: #fff; font-size: .96rem; line-height: 1.25; }
.feature-content > span { color: #c3bfd4; font-size: .8rem; }
.feature-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #9cc9ff !important; font-size: .72rem !important; }
.feature-meta span { padding: 3px 8px; border-radius: 999px; background: rgba(25,85,150,.24); }
.home-grid { grid-template-columns: 1.4fr .8fr; }
.home-cta { background: radial-gradient(circle at 90% 18%, rgba(25,85,150,.2), transparent 42%), var(--surface); }

/* Modo claro: cards em destaque usam a paleta azul-clara acinzentada da logo */
[data-theme="light"] .feature-card,
[data-theme="light-old"] .feature-card {
  background: linear-gradient(160deg, #dce6f4, #c6d5e8);
  border-color: #c2d0e2;
}
[data-theme="light"] .feature-card:hover,
[data-theme="light-old"] .feature-card:hover {
  border-color: rgba(43,106,199,.55);
  box-shadow: 0 18px 38px rgba(35,80,133,.16);
}
[data-theme="light"] .feature-art,
[data-theme="light-old"] .feature-art {
  filter: saturate(.55) brightness(1.12);
  opacity: .34;
  background:
    radial-gradient(circle at 38% 22%, rgba(120,160,210,.3), transparent 30%),
    linear-gradient(180deg, rgba(220,230,244,.2) 0%, rgba(198,213,232,.92) 74%),
    var(--hero-img, url("/static/img/azcifras-hero.73fc756e0599.png")) center / cover no-repeat;
}
[data-theme="light"] .feature-content strong,
[data-theme="light-old"] .feature-content strong { color: #17263a; }
[data-theme="light"] .feature-content > span,
[data-theme="light-old"] .feature-content > span { color: #46566d; }
[data-theme="light"] .feature-meta,
[data-theme="light-old"] .feature-meta { color: #235085 !important; }
[data-theme="light"] .feature-meta span,
[data-theme="light-old"] .feature-meta span { background: rgba(35,80,133,.14); }

.tabs { display: flex; gap: 3px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tabs a { padding: 9px 13px; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.tabs a:hover, .tabs a.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.cifra-list { display: grid; gap: 9px; }
.cifra-card { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; transition: .16s ease; }
.cifra-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cifra-info { min-width: 0; flex: 1; }
.cifra-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cifra-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: .72rem; }
.tom { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 9px; color: var(--accent-2); background: rgba(25,85,150,.13); font-weight: 800; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 6px; color: var(--accent-2); background: rgba(25,85,150,.13); font-size: .7rem; }

.sidebar { display: grid; gap: 16px; }
.widget { padding: 18px; }
.widget h3 { margin: 0 0 12px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.category-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.category-list a { display: flex; justify-content: space-between; padding: 7px 9px; border-radius: 7px; text-decoration: none; font-size: .84rem; }
.category-list a:hover, .category-list a.active { color: var(--accent-2); background: rgba(25,85,150,.1); }

.filters { display: grid; gap: 16px; }
.filters label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.filters select, .filters input, .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--bg); outline: 0; }
.filters select:focus, .filters input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(25,85,150,.18); }

.detail { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 26px; align-items: start; }
.detail-header, .cifra-sheet { padding: 24px; }
.detail-header h1 { margin: 0; font-size: 1.8rem; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .74rem; }
.license-chip { color: var(--success); border-color: rgba(74,222,128,.25); }
.source-link { display: inline-block; margin-top: 12px; color: var(--accent-2); font-size: .76rem; text-decoration: none; }
.cifra-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding: 9px 12px; color: var(--muted); font-size: .75rem; }
.cifra-toolbar button { min-width: 36px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface-2); cursor: pointer; }
.cifra-toolbar button:hover { color: var(--accent-2); border-color: var(--accent); }
.cifra-sheet { position: relative; overflow: hidden; margin-top: 8px; border-color: #dde6f0; color: #14110a; background: #f8fafc; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.cifra-sheet::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/static/img/azlogos.d897302d9797.png") center 52% / min(460px,70%) no-repeat; opacity: .065; }
.cifra-sheet > * { position: relative; z-index: 1; }
.sheet-head { margin-bottom: 24px; color: #14110a; font-family: Roboto, Arial, sans-serif; text-align: center; }
.sheet-head h2 { margin: 0; font-size: 16pt; line-height: 1.2; font-weight: 700; }
.sheet-head p { margin: 3px 0 0; font-size: 12pt; line-height: 1.25; }
.cifra-body { --cifra-font-size: 13pt; --chord-font-size: 13.5pt; overflow-x: auto; color: #14110a; white-space: pre-wrap; word-break: break-word; font: var(--cifra-font-size)/1.72 Roboto, Arial, sans-serif; }
.cifra-line { min-height: 1.72em; }
.chord { color: var(--chord-blue); font-size: var(--chord-font-size); font-weight: 700; }
.video-frame { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #05050a; aspect-ratio: 16 / 9; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.progress-actions { display: grid; gap: 7px; }
.progress-actions button { width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--bg); cursor: pointer; }
.progress-actions button:hover, .progress-actions button.active { color: var(--accent-2); border-color: var(--accent); }

.form-page, .auth-page { width: min(800px, calc(100% - 32px)); margin: 44px auto 80px; }
.auth-page { max-width: 470px; }
.form-card { display: grid; gap: 18px; padding: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: grid; gap: 6px; }
.form-field label { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--danger); font-size: .75rem; }
.notice { padding: 12px 14px; border: 1px solid rgba(25,85,150,.3); border-radius: 9px; color: var(--muted); background: rgba(25,85,150,.08); font-size: .8rem; }
.google { width: 100%; margin-top: 14px; }
.switch { color: var(--muted); text-align: center; font-size: .82rem; }
.switch a { color: var(--accent-2); }

.dashboard-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 24px; }
.stat { padding: 18px; }
.stat strong { display: block; color: var(--accent-2); font-size: 1.7rem; }
.dash-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.panel { padding: 20px; }
.panel h2 { margin: 0 0 14px; font-size: 1rem; }
.item-list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; text-decoration: none; }
.item-info { min-width: 0; flex: 1; }
.item-info strong, .item-info small { display: block; }
.item-info small { color: var(--muted); }
.status { padding: 3px 7px; border-radius: 6px; color: var(--warning); background: rgba(251,191,36,.1); font-size: .68rem; }
.status.live { color: var(--success); background: rgba(34,197,94,.1); }
.empty { padding: 36px 12px; color: var(--muted); text-align: center; }

.courses-page { width: min(1220px, calc(100% - 40px)); }
.course-index-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 28px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface));
}
.course-index-copy { max-width: 760px; }
.course-index-copy h1 { max-width: 760px; margin: 0; font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: 1; letter-spacing: 0; }
.course-index-copy p { max-width: 660px; margin: 18px 0 0; color: var(--muted); font-size: 1rem; }
.course-index-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.course-starter-card {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%);
}
.course-starter-card strong { font-size: 1.1rem; }
.course-starter-card span { display: block; color: var(--muted); }
.course-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
.course-principles article {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.course-principles span { display: block; color: var(--accent-2); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.course-principles .principle-number { display: inline-flex; align-items: center; min-height: 32px; }
.course-principles article.principle-with-media { min-height: 300px; padding: 14px; }
.principle-with-media .principle-number {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 3;
  display: inline-flex;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 84%, #000 16%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.principle-media {
  position: relative;
  overflow: hidden;
  height: 138px;
  margin: 26px 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 13px;
  background: #f6f8fb;
}
.principle-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.38));
}
.principle-carousel .principle-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: principle-carousel-3 9s infinite both;
}
.principle-carousel .principle-slide:nth-child(1) { animation-delay: 0s; }
.principle-carousel .principle-slide:nth-child(2) { animation-delay: 3s; }
.principle-carousel .principle-slide:nth-child(3) { animation-delay: 6s; }
.principle-carousel .heavy-only { display: none; }
.principle-slide img, .principle-media-notebook img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.instrument-principle .principle-slide:nth-child(-n+3)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/static/portal/img/cursos/instrumentos-foto.377636629ace.png");
  background-repeat: no-repeat;
  background-size: auto 285%;
  background-color: #f6f8fb;
}
.instrument-principle .principle-slide:nth-child(1)::before { background-position: left center; }
.instrument-principle .principle-slide:nth-child(2)::before { background-position: center center; }
.instrument-principle .principle-slide:nth-child(3)::before { background-position: right center; }
.instrument-principle .principle-slide:nth-child(-n+3) img { opacity: 0; }
.instrument-principle .principle-slide:nth-child(n+5) img {
  object-fit: contain;
  padding: 8px;
  background: #fff;
}
.principle-slide .media-bw { filter: grayscale(1) contrast(1.08); }
.principle-slide figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.principle-media-notebook {
  display: block;
  background: #fff;
}
.principle-media-notebook img {
  object-position: 50% 48%;
  filter: grayscale(1) contrast(1.04);
}
.course-principles article.principle-with-media strong { margin-top: 0; }
[data-theme="dark-old"] .principle-carousel-instruments .heavy-only,
[data-theme="light-old"] .principle-carousel-instruments .heavy-only { display: block; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide,
[data-theme="light-old"] .principle-carousel-instruments .principle-slide {
  animation-name: principle-carousel-7;
  animation-duration: 21s;
}
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(1),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(1) { animation-delay: 0s; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(2),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(2) { animation-delay: 3s; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(3),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(3) { animation-delay: 6s; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(4),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(4) { animation-delay: 9s; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(5),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(5) { animation-delay: 12s; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(6),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(6) { animation-delay: 15s; }
[data-theme="dark-old"] .principle-carousel-instruments .principle-slide:nth-child(7),
[data-theme="light-old"] .principle-carousel-instruments .principle-slide:nth-child(7) { animation-delay: 18s; }
@keyframes principle-carousel-3 {
  0%, 28% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes principle-carousel-7 {
  0%, 12% { opacity: 1; }
  16%, 100% { opacity: 0; }
}
.study-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 30%),
    color-mix(in srgb, var(--surface-2) 76%, var(--accent) 24%);
}
.study-icon::before, .study-icon::after { content: ""; position: absolute; }
.study-icon-instrument::before {
  left: 15px;
  top: 13px;
  width: 20px;
  height: 30px;
  border: 2px solid var(--accent-2);
  border-radius: 50% 50% 48% 48%;
  transform: rotate(-28deg);
}
.study-icon-instrument::after {
  left: 27px;
  top: 10px;
  width: 4px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 86%, var(--accent-2) 14%);
  transform: rotate(-32deg);
}
.study-icon-notebook::before {
  left: 14px;
  top: 10px;
  width: 30px;
  height: 38px;
  border: 2px solid var(--accent-2);
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, transparent 0 8px, color-mix(in srgb, var(--accent-2) 46%, transparent) 9px 10px);
}
.study-icon-notebook::after {
  left: 18px;
  top: 9px;
  width: 3px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent);
}
.study-icon-cifra::before {
  left: 13px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) 9px 11px / 16px 3px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) 9px 20px / 20px 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) 9px 27px / 14px 2px no-repeat,
    color-mix(in srgb, var(--bg) 84%, var(--accent) 16%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 50%, var(--border));
}
.study-icon-cifra::after {
  left: 37px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent-2);
  border-right: 2px solid var(--accent-2);
  transform: rotate(45deg);
}
.study-icon-repertoire::before {
  left: 13px;
  top: 16px;
  width: 34px;
  height: 28px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 66%, var(--accent-2) 0 4px, transparent 5px),
    linear-gradient(var(--accent-2), var(--accent-2)) 13px 9px / 3px 22px no-repeat,
    color-mix(in srgb, var(--bg) 82%, var(--accent) 18%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 48%, var(--border));
}
.study-icon-repertoire::after {
  left: 21px;
  top: 12px;
  width: 23px;
  height: 9px;
  border-top: 3px solid var(--accent-2);
  border-radius: 50%;
  transform: rotate(-13deg);
}
.course-principles strong { display: block; margin-top: 38px; font-size: 1rem; }
.course-principles p { margin: 8px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.course-card { display: block; padding: 24px; text-decoration: none; transition: .18s ease; }
.course-grid-pro { margin-top: 18px; }
.course-card-pro {
  position: relative;
  overflow: hidden;
  min-height: 278px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%));
}
.course-card-pro::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -62px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 28px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.course-card:hover, .course-card-pro:hover { border-color: var(--accent); transform: translateY(-3px); }
.course-card h2 { margin: 14px 0 8px; font-size: 1.2rem; }
.course-card p { color: var(--muted); }
.course-card-pro p { min-height: 88px; line-height: 1.6; }
.course-card > strong { color: var(--accent-2); font-size: .82rem; }
.course-card-footer, .course-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0; color: var(--muted); font-size: .76rem; }
.course-card-footer span, .course-meta span { padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 68%, transparent); }
.chord-dictionary-preview {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 26px;
  padding: 26px;
}
.chord-dictionary-preview h2 { margin: 12px 0 8px; }
.chord-dictionary-preview p { margin: 0; color: var(--muted); max-width: 640px; }
.dictionary-notes { display: grid; grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 8px; }
.dictionary-notes span {
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--accent-2);
  background: var(--surface-2);
  font-weight: 900;
}
.course-hero { padding: 32px; background: radial-gradient(circle at 90% 10%,rgba(25,85,150,.2),transparent 38%),var(--surface); }
.course-hero-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 28px;
  align-items: center;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
}
.course-hero h1 { margin: 16px 0 8px; font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.02; }
.course-hero > p, .course-hero-copy p { max-width: 760px; color: var(--muted); }
.course-registration-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent) 18%);
}
.course-registration-card strong { display: block; font-size: 1.05rem; }
.course-registration-card p { color: var(--muted); font-size: .88rem; }
.course-prep-grid { display: grid; grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr); gap: 18px; margin-top: 20px; }
.study-kit, .guitar-strings-card { padding: 24px; border-radius: 16px; }
.study-kit { position: relative; overflow: hidden; min-height: 232px; }
.study-sheet-illustration {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 118px;
  height: 132px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(90deg, var(--accent) 0 7px, transparent 7px),
    repeating-linear-gradient(180deg, transparent 0 19px, color-mix(in srgb, var(--accent-2) 24%, transparent) 20px 21px),
    color-mix(in srgb, var(--surface-2) 82%, var(--accent) 18%);
  opacity: .76;
  transform: rotate(-4deg);
}
.study-sheet-illustration::before, .study-sheet-illustration::after { content: ""; position: absolute; }
.study-sheet-illustration::before {
  left: 24px;
  top: 18px;
  width: 54px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 28px 0 color-mix(in srgb, var(--text) 34%, transparent), 0 56px 0 color-mix(in srgb, var(--text) 26%, transparent);
}
.study-sheet-illustration::after {
  right: 18px;
  bottom: 18px;
  width: 24px;
  height: 24px;
  border-right: 3px solid var(--accent-2);
  border-bottom: 3px solid var(--accent-2);
  transform: rotate(45deg);
}
.study-kit h2, .guitar-strings-card h2 { margin: 12px 0 8px; }
.study-kit h2, .study-kit p { max-width: 320px; }
.study-kit p, .guitar-strings-card p { color: var(--muted); }
.guitar-strings-card { display: grid; grid-template-columns: minmax(190px, .42fr) minmax(360px, 1fr); gap: 20px; align-items: center; overflow: hidden; }
.guitar-string-map {
  position: relative;
  min-height: 292px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(18,10,0,.94), rgba(45,25,2,.88)),
    radial-gradient(circle at 50% 50%, rgba(74,158,255,.16), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.guitar-string-map::before {
  content: "";
  position: absolute;
  left: 76px;
  right: 72px;
  top: 62px;
  bottom: 54px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(69,36,5,.66), rgba(30,16,3,.7));
}
.string-title {
  position: absolute;
  top: 22px;
  left: 76px;
  color: color-mix(in srgb, var(--muted) 88%, #fff 12%);
  font-size: .76rem;
  font-weight: 800;
}
.nut, .fret { position: absolute; top: 62px; bottom: 54px; z-index: 2; border-radius: 999px; background: #f2ead2; }
.nut { left: 76px; width: 10px; }
.fret { width: 4px; background: rgba(226,217,197,.62); }
.fret-1 { left: 38%; }
.fret-2 { left: 58%; }
.fret-3 { left: 78%; }
.string-row { position: absolute; left: 50px; right: 40px; z-index: 3; height: 28px; }
.string-row::before {
  content: "";
  position: absolute;
  left: 36px;
  right: 98px;
  top: 50%;
  height: var(--string-size, 3px);
  border-radius: 999px;
  background: var(--string-color);
  transform: translateY(-50%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--string-color) 58%, transparent);
}
.string-row b {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--string-color);
  font-size: .82rem;
  transform: translateY(-50%);
}
.string-row i {
  position: absolute;
  right: 0;
  top: 50%;
  min-width: 88px;
  color: #f4f1ff;
  font-style: normal;
  font-size: .84rem;
  font-weight: 800;
  transform: translateY(-50%);
}
.string-6 { top: 70px; --string-color: #9b6ee5; --string-size: 5px; }
.string-5 { top: 104px; --string-color: #4a9eff; --string-size: 4px; }
.string-4 { top: 138px; --string-color: #2dd4bf; --string-size: 4px; }
.string-3 { top: 172px; --string-color: #facc15; --string-size: 3px; }
.string-2 { top: 206px; --string-color: #fb923c; --string-size: 2px; }
.string-1 { top: 240px; --string-color: #ef4444; --string-size: 2px; }
.course-study-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.lesson-sidebar { position: sticky; top: 108px; padding: 18px; border-radius: 16px; }
.sidebar-title { display: block; margin-bottom: 12px; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lesson-sidebar nav { display: grid; gap: 6px; }
.lesson-sidebar a { display: flex; gap: 9px; padding: 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: .84rem; }
.lesson-sidebar a:hover { color: var(--text); background: var(--surface-2); }
.lesson-sidebar span { color: var(--accent-2); font-weight: 900; }
.lesson-list { display: grid; gap: 16px; margin-top: 22px; }
.lesson-list-pro { margin-top: 0; }
.lesson { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; padding: 24px; }
.lesson-pro { border-radius: 16px; }
.lesson-number { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-weight: 800; font-size: .78rem; }
.lesson-heading span { color: var(--accent-2); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lesson h2 { margin: 3px 0 4px; font-size: 1.2rem; }
.lesson-heading p { margin: 0; color: var(--muted); }
.lesson-content {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.8;
}
.lesson-content figure { margin: 24px 0; text-align: center; }
.lesson-content figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 12px; }
.lesson-content figcaption { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.lesson-content p { margin: 0 0 10px; }
.lesson-content h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--accent-2); }
.lesson-practice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.lesson-practice-grid .practice-card {
  position: relative;
  min-height: 132px;
  padding: 16px 14px 14px 54px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}
.practice-icon {
  position: absolute;
  left: 14px;
  top: 16px;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 38%, var(--border));
}
.practice-icon::before, .practice-icon::after { content: ""; position: absolute; }
.practice-card-notebook .practice-icon::before {
  left: 8px;
  top: 6px;
  width: 12px;
  height: 16px;
  border: 2px solid var(--accent-2);
  border-radius: 3px;
}
.practice-card-notebook .practice-icon::after {
  left: 12px;
  top: 5px;
  width: 2px;
  height: 18px;
  background: var(--accent);
}
.practice-card-memory .practice-icon::before {
  left: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent-2);
  border-radius: 50%;
}
.practice-card-memory .practice-icon::after {
  left: 13px;
  top: 13px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-2);
  transform: rotate(-42deg);
  transform-origin: left center;
}
.practice-card-cifra .practice-icon::before {
  left: 6px;
  top: 8px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 5px 0 var(--accent-2), 0 10px 0 var(--accent-2);
}
.practice-card-cifra .practice-icon::after {
  right: 6px;
  top: 6px;
  width: 5px;
  height: 12px;
  border-left: 2px solid color-mix(in srgb, var(--text) 76%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text) 76%, transparent);
  border-radius: 0 0 0 8px;
}
.lesson-practice-grid strong { display: block; color: var(--accent-2); font-size: .82rem; }
.lesson-practice-grid p { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }

.support-page { width: min(1120px, calc(100% - 40px)); }
.support-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 300px);
  gap: 28px;
  align-items: center;
  padding: clamp(30px, 6vw, 66px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface));
}
.support-copy h1 { max-width: 720px; margin: 0; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .98; letter-spacing: 0; }
.support-copy p { max-width: 640px; margin: 20px 0 0; color: var(--muted); font-size: 1.04rem; }
.support-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.support-symbol {
  display: grid;
  min-height: 250px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 72%, var(--accent) 28%), color-mix(in srgb, var(--surface) 72%, var(--accent-2) 28%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 26px 60px rgba(0,0,0,.2);
}
.support-symbol span {
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 5rem;
  font-weight: 900;
  box-shadow: 0 22px 46px color-mix(in srgb, var(--accent) 34%, transparent);
}
.support-grid { display: grid; grid-template-columns: minmax(280px, .88fr) minmax(0, 1.12fr); gap: 18px; margin-top: 20px; }
.support-card, .support-impact { padding: 26px; border-radius: 16px; }
.support-card h2, .support-impact h2 { margin: 12px 0 8px; }
.support-card p, .support-impact p { color: var(--muted); }
.pix-box {
  display: grid;
  gap: 8px;
  margin: 22px 0 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent) 22%);
}
/* ── EDITOR DE CIFRA (abas Letra / Acorde) ── */
.ce-abas { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.ce-aba { padding: 7px 18px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.ce-aba.ativa { background: var(--accent); color: #fff; }

/* aba "Colar tudo": cifra pronta entra de uma vez */
#ce-colar {
  width: 100%; min-height: 260px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: .86rem; line-height: 1.6; white-space: pre; overflow-wrap: normal;
  overflow-x: auto; resize: vertical;
}
#ce-colar:focus { outline: none; border-color: var(--accent); }
.ce-colar-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ce-colar-status { font-size: .84rem; font-weight: 600; }
.ce-colar-status.ok { color: var(--accent-2); }
.ce-colar-status.aviso { color: #d97706; }
.ce-colar-status.erro { color: var(--danger); }
.ce-dica { margin: 0 0 10px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.ce-linhas { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow-x: auto; }
.ce-vazio { margin: 10px 2px 0; color: var(--muted); font-size: .86rem; }

.ce-linha { position: relative; }
.ce-acordes { position: relative; height: 1.55em; }
.ce-letra { white-space: pre; font: 13pt/1.6 Consolas, "Courier New", monospace; color: var(--text); }
.ce-letra .ce-ch { cursor: text; border-radius: 2px; }
.ce-letra .ce-ch:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }

.ce-acorde {
  position: absolute; bottom: 0; padding: 0 2px; border: 0; border-radius: 3px;
  background: transparent; color: var(--chord-blue);
  font: 700 13pt/1.4 Consolas, "Courier New", monospace; cursor: pointer; white-space: nowrap;
}
.ce-acorde:hover { background: color-mix(in srgb, var(--chord-blue) 20%, transparent); }
.ce-entrada {
  position: absolute; bottom: 0; width: 8ch; padding: 0 2px;
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--surface); color: var(--chord-blue);
  font: 700 13pt/1.4 Consolas, "Courier New", monospace; outline: 0;
}

.pix-qr { display: grid; justify-items: center; gap: 8px; margin: 4px 0 16px; }
.pix-qr img { width: min(220px, 60%); height: auto; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.pix-qr figcaption { color: var(--muted); font-size: .78rem; text-align: center; }
.pix-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pix-box span { color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pix-box strong { color: var(--accent-2); font: 700 .92rem/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.copy-pix { width: 100%; }
.support-impact { display: grid; gap: 14px; }
.support-impact div {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
.support-impact strong { color: var(--text); }
.support-impact p { margin: 6px 0 0; font-size: .88rem; }

.investor-page { width: min(980px, calc(100% - 40px)); }
.investor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 22px;
  align-items: stretch;
  padding: clamp(28px, 5vw, 54px);
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface));
}
.investor-copy h1 { max-width: 640px; margin: 0; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: 0; }
.investor-copy p { max-width: 620px; margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.65; text-indent: 2rem; }
.investor-story { display: grid; gap: 14px; margin-top: 22px; }
.investor-strategy {
  max-width: 660px;
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 4px solid var(--accent-2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 74%, var(--accent) 26%);
}
.investor-strategy strong { display: block; margin-bottom: 10px; color: var(--text); font-size: 1.02rem; }
.investor-strategy ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.55; }
.investor-callout {
  margin-top: 22px !important;
  padding: 16px 18px;
  border-radius: 12px;
  color: var(--text) !important;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-2) 16%, transparent);
}
.investor-callout { text-indent: 0 !important; }
.investor-callout + p { margin-top: 14px; }
.investor-note {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent) 22%);
}
.investor-note strong { color: var(--accent-2); }
.investor-note p { margin: 0; color: var(--muted); text-indent: 2rem; }
.investor-form-card { margin-top: 20px; }
.investor-form { display: grid; gap: 18px; }
.footer-investor-link { color: var(--accent-2) !important; font-weight: 800; }
.footer-investor-link span { font-weight: 600; }

.footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--surface); }
/* banda de ensaio ao fundo do rodapé — a foto acompanha o tema escolhido */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/static/img/banda-ensaio-escuro.6c7757f917a6.webp");
  background-size: cover;
  background-position: center 42%;
  /* a foto escura tem a janela do pôr do sol bem clara; .33 mantém o texto
     acima do contraste mínimo AA mesmo sobre esse ponto */
  opacity: .33;
}
/* véu que garante a leitura do texto por cima da foto */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 55%, transparent) 0%,
    color-mix(in srgb, var(--surface) 80%, transparent) 55%,
    color-mix(in srgb, var(--surface) 92%, transparent) 100%
  );
}
[data-theme="light"] .footer::before,
[data-theme="light-old"] .footer::before {
  background-image: url("/static/img/banda-ensaio-claro.d677dfc5c046.webp");
  opacity: .45;
}
/* no tema claro o cinza do rodapé escurece um pouco para manter a leitura
   confortável sobre a foto (contraste medido: 5.2:1, acima do mínimo AA) */
[data-theme="light"] .footer,
[data-theme="light-old"] .footer { --muted: #555; }
.footer-top, .footer-bottom { position: relative; z-index: 1; }
.footer-top {
  display: grid;
  grid-template-columns: 120px minmax(170px, 1.1fr) minmax(130px, .8fr) minmax(140px, .85fr) minmax(180px, 1fr) minmax(200px, 1.1fr);
  gap: clamp(24px, 3vw, 42px);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 48px 48px;
}
.footer-brand { display: flex; flex-direction: column; }
.footer-logo {
  display: block;
  width: 72px;
  max-width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 16px;
  object-fit: contain;
  object-position: center;
}
.footer-brand p { margin: 14px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; max-width: 240px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h4 { margin: 0 0 5px; color: var(--text); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.footer-col a, .footer-col span { color: var(--muted); font-size: .85rem; text-decoration: none; }
.footer-col a:hover { color: var(--accent-2); }
.footer-col .footer-social-link { display: inline-flex; width: fit-content; align-items: center; gap: 8px; }
.footer-social-link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; }
.footer-social-youtube svg { color: #ff0033; }
.footer-social-instagram svg { color: #e4405f; }
.footer-social-link:hover svg { transform: scale(1.08); }
.footer-feedback span { max-width: 210px; line-height: 1.5; }
.footer-feedback .footer-feedback-link { width: fit-content; color: var(--accent-2); font-weight: 800; }
.footer-dev-link { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.footer-dev-link:hover { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 48px;
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
}

/* ── Preferências visuais aplicadas ── */
[data-density="compact"] body { line-height: 1.46; }
[data-density="compact"] .nav { min-height: 74px; gap: 14px; padding-inline: 28px; }
[data-density="compact"] .brand { gap: 9px; }
[data-density="compact"] .brand-logo { width: 58px; height: 58px; flex-basis: 58px; border-radius: 14px; }
[data-density="compact"] .nav-links a { padding: 7px 10px; font-size: .84rem; }
[data-density="compact"] .nav-actions { gap: 6px; }
[data-density="compact"] .btn,
[data-density="compact"] .login-btn,
[data-density="compact"] .user-trigger { min-height: 34px; padding: 7px 11px; }
[data-density="compact"] .prefs-trigger { width: 38px; min-width: 38px; min-height: 38px; padding: 6px; }
[data-density="compact"] .side-menu { width: min(280px, 88vw); padding: 16px 11px; }
[data-density="compact"] .side-menu-links a,
[data-density="compact"] .side-menu-links form button { padding: 8px 11px; font-size: .9rem; }
[data-density="compact"] .page,
[data-density="compact"] .courses-page,
[data-density="compact"] .support-page { padding-top: 28px; padding-bottom: 56px; }
[data-density="compact"] .hero-cinematic { min-height: clamp(480px, 66vh, 680px); padding-top: clamp(38px, 5vw, 64px); }
[data-density="compact"] .surface,
[data-density="compact"] .course-card,
[data-density="compact"] .course-card-pro,
[data-density="compact"] .lesson,
[data-density="compact"] .widget { border-radius: 12px; }
[data-density="compact"] .detail-header,
[data-density="compact"] .cifra-sheet,
[data-density="compact"] .course-card,
[data-density="compact"] .course-card-pro,
[data-density="compact"] .lesson,
[data-density="compact"] .widget { padding: 18px; }

[data-density="spacious"] body { line-height: 1.68; }
[data-density="spacious"] .nav { min-height: 108px; gap: 28px; padding-inline: 42px; }
[data-density="spacious"] .brand { gap: 16px; }
[data-density="spacious"] .brand-logo { width: 82px; height: 82px; flex-basis: 82px; border-radius: 18px; }
[data-density="spacious"] .nav-links a { padding: 10px 16px; font-size: .96rem; }
[data-density="spacious"] .nav-actions { gap: 10px; }
[data-density="spacious"] .btn,
[data-density="spacious"] .login-btn,
[data-density="spacious"] .user-trigger { min-height: 42px; padding: 10px 17px; }
[data-density="spacious"] .prefs-trigger { width: 46px; min-width: 46px; min-height: 46px; padding: 10px; }
[data-density="spacious"] .side-menu { width: min(340px, 90vw); padding: 28px 18px; }
[data-density="spacious"] .side-menu-links a,
[data-density="spacious"] .side-menu-links form button { padding: 14px 15px; font-size: 1.02rem; }
[data-density="spacious"] .page,
[data-density="spacious"] .courses-page,
[data-density="spacious"] .support-page { padding-top: 56px; padding-bottom: 96px; }
[data-density="spacious"] .surface,
[data-density="spacious"] .course-card,
[data-density="spacious"] .course-card-pro,
[data-density="spacious"] .lesson,
[data-density="spacious"] .widget { border-radius: 18px; }
[data-density="spacious"] .detail-header,
[data-density="spacious"] .cifra-sheet,
[data-density="spacious"] .course-card,
[data-density="spacious"] .course-card-pro,
[data-density="spacious"] .lesson,
[data-density="spacious"] .widget { padding: 30px; }

[data-contrast="soft"] .nav,
[data-contrast="soft"] .surface,
[data-contrast="soft"] .course-card,
[data-contrast="soft"] .course-card-pro,
[data-contrast="soft"] .lesson,
[data-contrast="soft"] .footer,
[data-contrast="soft"] .prefs-panel,
[data-contrast="soft"] .side-menu,
[data-contrast="soft"] .btn.ghost,
[data-contrast="soft"] .login-btn,
[data-contrast="soft"] .user-trigger {
  border-color: color-mix(in srgb, var(--border) 58%, transparent);
}
[data-contrast="soft"] .surface,
[data-contrast="soft"] .course-card-pro,
[data-contrast="soft"] .prefs-panel,
[data-contrast="soft"] .side-menu { box-shadow: none; }
[data-contrast="soft"] .hero-bg { opacity: .72; }

[data-theme="dark"][data-contrast="high"],
[data-theme="dark-old"][data-contrast="high"] {
  --muted: #e3edff;
  --border: #5e8ecf;
}
[data-theme="light"][data-contrast="high"],
[data-theme="light-old"][data-contrast="high"] {
  --muted: #1a2638;
  --border: #195596;
}
[data-contrast="high"] .nav,
[data-contrast="high"] .surface,
[data-contrast="high"] .course-card,
[data-contrast="high"] .course-card-pro,
[data-contrast="high"] .lesson,
[data-contrast="high"] .footer,
[data-contrast="high"] .prefs-panel,
[data-contrast="high"] .side-menu,
[data-contrast="high"] .btn.ghost,
[data-contrast="high"] .login-btn,
[data-contrast="high"] .user-trigger {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent);
}
[data-contrast="high"] .prefs-trigger,
[data-contrast="high"] .segmented,
[data-contrast="high"] .heavy-grid button,
[data-contrast="high"] .instrument-option,
[data-contrast="high"] .prefs-reset { border-color: var(--border); }
[data-contrast="high"] .hero-bg { opacity: .9; }

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 28px 36px; }
}
/* em telas estreitas o rodapé fica alto: em vez de ampliar a foto (que borraria),
   ela vira uma faixa nítida na base */
@media (max-width: 820px) {
  .footer::before {
    background-size: auto 240px;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: .34;
  }
  .footer::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 97%, transparent) 0%,
      color-mix(in srgb, var(--surface) 92%, transparent) 68%,
      color-mix(in srgb, var(--surface) 78%, transparent) 100%
    );
  }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px 28px; }
  .footer-bottom { padding: 16px 20px; }
}

@media (max-width: 1120px) {
  .prefs-trigger { justify-content: center; width: 42px; padding: 8px; }
  .hero-cinematic { grid-template-columns: 1fr; gap: 30px; min-height: auto; padding-top: 70px; }
  .hero-bg { background-position: 66% center; opacity: .78; }
  .hero-card { align-self: start; }
  .quick-tones { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
  .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-index-hero, .course-hero-pro, .course-prep-grid, .course-study-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { position: static; }
  .guitar-strings-card { grid-template-columns: 1fr; }
  .support-hero, .support-grid, .investor-hero { grid-template-columns: 1fr; }
  .support-symbol { min-height: 210px; }
}

@media (max-width: 820px) {
  .nav { min-height: 88px; flex-wrap: nowrap; gap: 12px; overflow: visible; padding: 0 14px; }
  .menu-row { padding-right: 14px; padding-left: 14px; }
  .brand { gap: 8px; font-size: 1.08rem; }
  .brand-logo { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
  .brand-tagline { display: none; }
  .prefs-panel {
    position: fixed;
    inset: 74px 12px auto auto;
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 86px);
  }
  .prefs-layout { grid-template-columns: 1fr; }
  .prefs-visual-controls { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .instrument-chooser { min-height: 0; }
  .instrument-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chooser-cta { display: none; }
  .segmented button { min-height: 34px; }
  .nav-links { width: auto; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 8px 10px; font-size: .88rem; }
  .user-label { max-width: 80px; }
  .grid-main, .detail, .dash-grid { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .hero-cinematic { padding: 44px 20px 34px; }
  .hero-bg { background-position: 74% center; opacity: .55; }
  .hero h1 { max-width: 520px; font-size: clamp(2.7rem, 13vw, 4.2rem); }
  .search { border-radius: 20px; }
  .search button { min-width: 92px; }
  .hero-card { display: none; }
  .floating-chord { display: none; }
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: 1fr; }
  .chord-dictionary-preview { grid-template-columns: 1fr; }
  .dictionary-notes { grid-template-columns: repeat(4, minmax(42px, 1fr)); }
  .lesson-practice-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .prefs-panel {
    position: fixed;
    inset: 62px 6px auto;
    width: auto;
    max-height: calc(100vh - 70px);
    overflow: auto;
    transform-origin: top right;
  }
  .prefs-trigger { width: 38px; min-width: 38px; padding: 6px; }
  .segmented { gap: 5px; padding: 4px; }
  .segmented button { min-height: 34px; padding: 3px 2px; }
  .heavy-grid { grid-template-columns: 1fr; }
  .prefs-visual-controls { grid-template-columns: 1fr; }
  .instrument-chooser { padding: 8px; }
  .instrument-chooser p { max-width: none; font-size: .75rem; }
  .instrument-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .instrument-option { min-height: 68px; }
  .instrument-art { width: min(100%, 56px); height: 36px; }
  .nav-actions .ghost:not(.user-label) { display: none; }
  .home-page { width: min(100% - 28px, 1360px); }
  .hero-card { padding: 20px; }
  .search { display: grid; gap: 6px; padding: 8px; border-radius: 18px; }
  .search input { padding: 9px 12px; }
  .search button { width: 100%; }
  .stats { gap: 14px; }
  .quick-tones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .featured-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 190px; }
  .course-index-hero { padding: 22px; }
  .course-index-copy h1, .course-hero h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .course-principles { grid-template-columns: 1fr; }
  .course-prep-grid { gap: 14px; }
  .guitar-strings-card { padding: 18px; }
  .guitar-string-map { min-height: 262px; }
  .guitar-string-map::before { left: 56px; right: 48px; top: 58px; bottom: 42px; }
  .string-title { left: 56px; top: 18px; }
  .nut, .fret { top: 58px; bottom: 42px; }
  .nut { left: 56px; }
  .fret-1 { left: 37%; }
  .fret-2 { left: 58%; }
  .fret-3 { left: 78%; }
  .string-row { left: 28px; right: 18px; }
  .string-row::before { left: 34px; right: 82px; }
  .string-row b { width: 28px; height: 28px; }
  .string-row i { min-width: 76px; font-size: .76rem; }
  .string-6 { top: 66px; }
  .string-5 { top: 98px; }
  .string-4 { top: 130px; }
  .string-3 { top: 162px; }
  .string-2 { top: 194px; }
  .string-1 { top: 226px; }
  .lesson { grid-template-columns: 1fr; padding: 18px; }
  .study-kit h2, .study-kit p { max-width: none; }
  .study-sheet-illustration { position: relative; right: auto; bottom: auto; display: block; margin-top: 18px; transform: none; }
  .support-page { width: min(100% - 28px, 1120px); }
  .support-hero { padding: 22px; }
  .support-copy h1 { font-size: clamp(2rem, 12vw, 3.1rem); }
  .support-symbol { min-height: 160px; border-radius: 16px; }
  .support-symbol span { width: 104px; height: 104px; font-size: 3.3rem; }
  .support-card, .support-impact { padding: 20px; }
  .investor-page { width: min(100% - 28px, 980px); }
  .investor-hero, .investor-note { padding: 20px; }
  .investor-copy h1 { font-size: clamp(2rem, 12vw, 3.1rem); }
  .dashboard-stats { grid-template-columns: 1fr; }
  .footer-logo { width: 56px; height: 56px; flex-basis: 56px; border-radius: 15px; }
  .detail-header, .cifra-sheet { padding: 18px; }
}

@media print {
  body { color: #14110a; background: #fff; }
  .nav, .detail-header, .cifra-toolbar, .sidebar, .footer, .bpm-chip { display: none !important; }
  .page { width: 100%; margin: 0; padding: 0; }
  .detail { display: block; }
  .surface { border: 0; border-radius: 0; background: transparent; }
  .cifra-sheet { margin: 0; padding: 18mm 14mm; box-shadow: none; background: #fff; }
  .cifra-sheet::before { opacity: .07; }
  .cifra-body { overflow: visible; }
}

/* ── UNIVERSOS POR INSTRUMENTO (data-instrument) ──
   Cada instrumento troca paleta, superfícies, atmosfera e a luz do hero.
   Quando as fotos chegarem em /static/img/instruments/<nome>.jpg,
   basta ativar o --hero-img de cada bloco. */

::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 60%, var(--surface-2)) var(--surface); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { border-radius: 8px; background: color-mix(in srgb, var(--accent) 60%, var(--surface-2)); }

/* Teclado — estúdio frio, madeira escura de piano */
[data-instrument="teclado"] { --hero-img: url("/static/img/instruments/teclado.ee9f436c2285.webp"); --accent: #4f66d0; --accent-2: #8fa8ff; --chord-blue: #8fa8ff; --hero-glow1: rgba(95, 120, 235, .40); --hero-glow2: rgba(140, 160, 255, .22); --bg: #04050c; --surface: #090b16; --surface-2: #0d1020; --border: #1d2240; --nav-bg: rgba(4, 5, 12, .96); --hero-start: #04050c; }
[data-theme="light"][data-instrument="teclado"] { --hero-img: url("/static/img/instruments/teclado.ee9f436c2285.webp"); --accent: #33499f; --accent-2: #4f66d0; --chord-blue: #33499f; --hero-glow1: rgba(80, 100, 200, .16); --hero-glow2: rgba(80, 100, 200, .09); --bg: #eff1f8; --surface: #ffffff; --surface-2: #e4e8f4; --border: #c9d0e4; --nav-bg: rgba(239, 241, 248, .96); --hero-start: #e4e8f4; }

/* Guitarra — palco preto e dourado */
[data-instrument="guitarra"] { --hero-img: url("/static/img/instruments/guitarra.744cad51519a.webp"); --accent: #b8862f; --accent-2: #e8b54a; --chord-blue: #e8b54a; --hero-glow1: rgba(212, 160, 60, .38); --hero-glow2: rgba(150, 110, 30, .22); --bg: #070502; --surface: #0e0a04; --surface-2: #161008; --border: #322610; --nav-bg: rgba(7, 5, 2, .96); --hero-start: #070502; }
[data-theme="light"][data-instrument="guitarra"] { --hero-img: url("/static/img/instruments/guitarra.744cad51519a.webp"); --accent: #8a6420; --accent-2: #b8862f; --chord-blue: #8a6420; --hero-glow1: rgba(180, 135, 45, .16); --hero-glow2: rgba(180, 135, 45, .09); --bg: #f7f2e6; --surface: #fffdf6; --surface-2: #efe6cf; --border: #dccfa8; --nav-bg: rgba(247, 242, 230, .96); --hero-start: #efe6cf; }

/* Violão — madeira e luz quente */
[data-instrument="violao"] { --hero-img: url("/static/img/instruments/violao.9ca5175871f0.webp"); --accent: #b06a2e; --accent-2: #e59a52; --chord-blue: #e59a52; --hero-glow1: rgba(224, 150, 80, .36); --hero-glow2: rgba(170, 105, 45, .20); --bg: #080502; --surface: #0f0a05; --surface-2: #17100a; --border: #33281a; --nav-bg: rgba(8, 5, 2, .96); --hero-start: #080502; }
[data-theme="light"][data-instrument="violao"] { --hero-img: url("/static/img/instruments/violao.9ca5175871f0.webp"); --accent: #8a4f1e; --accent-2: #b06a2e; --chord-blue: #8a4f1e; --hero-glow1: rgba(190, 120, 55, .16); --hero-glow2: rgba(190, 120, 55, .09); --bg: #f8f1e8; --surface: #fffcf7; --surface-2: #f0e3d2; --border: #ddc8ad; --nav-bg: rgba(248, 241, 232, .96); --hero-start: #f0e3d2; }

/* Violão clássico — sala de concerto, madeira clara */
[data-instrument="violao-classico"] { --hero-img: url("/static/img/instruments/violao-classico.81f3917076d8.webp"); --accent: #a08050; --accent-2: #cdb488; --chord-blue: #cdb488; --hero-glow1: rgba(200, 175, 130, .30); --hero-glow2: rgba(150, 125, 85, .18); --bg: #0a0906; --surface: #12100b; --surface-2: #1a1710; --border: #343023; --nav-bg: rgba(10, 9, 6, .96); --hero-start: #0a0906; }
[data-theme="light"][data-instrument="violao-classico"] { --hero-img: url("/static/img/instruments/violao-classico.81f3917076d8.webp"); --accent: #7a5f38; --accent-2: #a08050; --chord-blue: #7a5f38; --hero-glow1: rgba(170, 145, 100, .16); --hero-glow2: rgba(170, 145, 100, .09); --bg: #f7f4ec; --surface: #fffefa; --surface-2: #efe9da; --border: #dbd2ba; --nav-bg: rgba(247, 244, 236, .96); --hero-start: #efe9da; }

/* Baixo — groove azul petróleo */
[data-instrument="baixo"] { --hero-img: url("/static/img/instruments/baixo.5b9a68ec6f9d.webp"); --accent: #0f7490; --accent-2: #2cc4de; --chord-blue: #2cc4de; --hero-glow1: rgba(20, 140, 170, .40); --hero-glow2: rgba(15, 100, 125, .22); --bg: #02070a; --surface: #061013; --surface-2: #0a171c; --border: #16333c; --nav-bg: rgba(2, 7, 10, .96); --hero-start: #02070a; }
[data-theme="light"][data-instrument="baixo"] { --hero-img: url("/static/img/instruments/baixo.5b9a68ec6f9d.webp"); --accent: #0b5568; --accent-2: #0f7490; --chord-blue: #0b5568; --hero-glow1: rgba(15, 115, 145, .16); --hero-glow2: rgba(15, 115, 145, .09); --bg: #ecf4f6; --surface: #fcffff; --surface-2: #dfecef; --border: #bcd6dc; --nav-bg: rgba(236, 244, 246, .96); --hero-start: #dfecef; }

/* Cavaquinho — roda de samba, madeira brasileira */
[data-instrument="cavaquinho"] { --hero-img: url("/static/img/instruments/cavaquinho.89b45f2a7487.webp"); --accent: #c25a35; --accent-2: #ef8a5a; --chord-blue: #ef8a5a; --hero-glow1: rgba(230, 130, 80, .36); --hero-glow2: rgba(175, 90, 50, .20); --bg: #090402; --surface: #100804; --surface-2: #180d07; --border: #351f12; --nav-bg: rgba(9, 4, 2, .96); --hero-start: #090402; }
[data-theme="light"][data-instrument="cavaquinho"] { --hero-img: url("/static/img/instruments/cavaquinho.89b45f2a7487.webp"); --accent: #94421f; --accent-2: #c25a35; --chord-blue: #94421f; --hero-glow1: rgba(200, 100, 60, .16); --hero-glow2: rgba(200, 100, 60, .09); --bg: #f9f0ea; --surface: #fffbf8; --surface-2: #f2e1d5; --border: #e0c5b1; --nav-bg: rgba(249, 240, 234, .96); --hero-start: #f2e1d5; }

/* Bateria — energia de palco */
[data-instrument="bateria"] { --hero-img: url("/static/img/instruments/bateria.4cf9a6801e9f.webp"); --accent: #cf4a2e; --accent-2: #ff8050; --chord-blue: #ff8050; --hero-glow1: rgba(255, 110, 70, .38); --hero-glow2: rgba(200, 60, 40, .22); --bg: #090302; --surface: #110604; --surface-2: #190a06; --border: #3a1810; --nav-bg: rgba(9, 3, 2, .96); --hero-start: #090302; }
[data-theme="light"][data-instrument="bateria"] { --hero-img: url("/static/img/instruments/bateria.4cf9a6801e9f.webp"); --accent: #9c331c; --accent-2: #cf4a2e; --chord-blue: #9c331c; --hero-glow1: rgba(220, 80, 50, .16); --hero-glow2: rgba(220, 80, 50, .09); --bg: #f9efec; --surface: #fffaf8; --surface-2: #f2ded7; --border: #e2c1b5; --nav-bg: rgba(249, 239, 236, .96); --hero-start: #f2ded7; }

/* Tema claro com universo ativo: o cenário fotográfico aparece de verdade.
   Véu claro fica só à esquerda (área do texto); a foto respira à direita. */
[data-theme="light"]:not([data-instrument="traditional"]) .hero-bg::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--hero-start) 97%, transparent) 0%,
      color-mix(in srgb, var(--hero-start) 84%, transparent) 30%,
      color-mix(in srgb, var(--hero-start) 32%, transparent) 54%,
      transparent 74%);
}
[data-theme="light"]:not([data-instrument="traditional"]) .hero-cinematic::before {
  background:
    radial-gradient(circle at 18% 32%, var(--hero-glow1), transparent 30%),
    linear-gradient(180deg, transparent 62%, var(--bg) 97%);
}

/* ── REVELAÇÃO DO UNIVERSO ──
   Começa com a foto nua; as cores entram, depois as descrições. */
html[data-revelacao] .hero-bg::after,
html[data-revelacao] .hero-cinematic::before,
html[data-revelacao] .hero-cinematic::after { animation: veu-entra 1.2s ease .9s both; }
html[data-revelacao] .hero-copy,
html[data-revelacao] .hero-card,
html[data-revelacao] .floating-chord { animation: conteudo-entra .9s ease 1.6s both; }
@keyframes veu-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes conteudo-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-revelacao] .hero-bg::after, html[data-revelacao] .hero-cinematic::before,
  html[data-revelacao] .hero-cinematic::after, html[data-revelacao] .hero-copy,
  html[data-revelacao] .hero-card, html[data-revelacao] .floating-chord { animation: none; }
}

/* ── BOAS-VINDAS (perfil do músico) ── */
.bemvindo-page { width: min(760px, calc(100% - 40px)); padding-top: 40px; }
.bemvindo-card { padding: clamp(26px, 5vw, 46px); }
.bv-progress { height: 6px; margin-bottom: 28px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bv-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent-2); transition: width .35s ease; }
.bv-step h1 { margin: 6px 0 14px; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.bv-step h2 { margin: 6px 0 12px; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.bv-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.bv-nav .btn:only-child { margin-left: auto; }
.bv-opcoes { display: grid; gap: 10px; margin-top: 14px; }
.bv-opcoes-linha { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bv-opcao { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: .15s ease; }
.bv-opcao:hover { border-color: var(--accent-2); }
.bv-opcao:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.bv-opcao input { accent-color: var(--accent-2); }
.bv-instrumentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.bv-instrumento { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-weight: 600; transition: .15s ease; }
.bv-instrumento:hover { border-color: var(--accent-2); }
.bv-instrumento:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--accent-2); }
.bv-instrumento input { accent-color: var(--accent-2); }
.bv-ritmos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.bv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; font-size: .9rem; transition: .15s ease; }
.bv-chip:hover { border-color: var(--accent-2); }
.bv-chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); color: var(--accent-2); font-weight: 700; }
.bv-chip input { accent-color: var(--accent-2); }
.bv-campo { margin-top: 16px; display: grid; gap: 8px; }
.bv-campo input[type="number"] { max-width: 140px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.bv-rotulo { font-weight: 700; }
.bv-data-wrap { position: relative; display: flex; gap: 8px; align-items: center; max-width: 240px; }
.bv-data-wrap input[type="text"] { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: .95rem; }
.bv-data-cal { flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.bv-data-cal:hover { border-color: var(--accent); }
.bv-data-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.bv-outro { margin-top: 14px; display: grid; gap: 8px; }
.bv-outro input { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.bv-erro { margin: 12px 0 0; color: var(--danger); font-size: .88rem; }

/* Universos dinâmicos são exclusivos de quem tem conta */
.instrument-chooser.bloqueado .instrument-option { opacity: .55; }
.chooser-cta { display: block; margin-top: 2px; padding: 4px 8px; border: 1px dashed var(--accent); border-radius: 8px; color: var(--accent-2); font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
.chooser-cta:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.prefs-panel .chooser-cta { display: none; }

/* ── Passo do compromisso (boas-vindas) ── */
.bv-pacto { margin-top: 8px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.bv-pacto p { margin: 0 0 12px; line-height: 1.65; }
.bv-pacto-fecho { margin-bottom: 0; font-weight: 700; color: var(--accent-2); }
.bv-pacto-precos { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.bv-pacto-precos > li { line-height: 1.55; }
.bv-pacto-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bv-pacto-linha span { color: var(--muted); }
.bv-pacto-linha strong { font-size: 1.05rem; color: var(--accent-2); }
.bv-aceite { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); cursor: pointer; font-weight: 600; }
.bv-aceite input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent-2); flex: 0 0 auto; }

.bv-pacto-gratis { margin: 16px 0 12px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--success) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 42%, var(--border)); font-size: 1.05rem; }
.bv-pacto-gratis strong { color: var(--success); }

/* ── azFirel: portal do multiverso musical ── */
.azfirel-btn {
  display: flex; align-items: center; gap: 22px;
  margin: 22px 0 30px; padding: 20px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 18px;
  background: radial-gradient(circle at 8% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), var(--surface);
  text-decoration: none; color: var(--text);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.azfirel-btn:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 26%, transparent);
}
/* ── PORTAL 3D azFirel (órbita em perspectiva, movimento cinematográfico) ── */
.fx3d { --fx-tam: min(340px, 84vw); --fx-r: calc(var(--fx-tam) * .38); --fx-chip: calc(var(--fx-tam) * .145); --fx-giro: 22s;
  position: relative; flex: 0 0 auto; width: var(--fx-tam); height: calc(var(--fx-tam) * .74);
  border-radius: 18px; overflow: hidden;
  background: #04050d; }
.fx3d-fundo { position: absolute; inset: -6%;
  background: url("/static/img/azfirel-nebula.30ee3160ba5d.webp") center / cover no-repeat;
  animation: fx-nebula 60s ease-in-out infinite alternate; }
.fx3d-fundo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(4,5,13,.55) 0%, rgba(4,5,13,.15) 40%, transparent 66%); }
@keyframes fx-nebula { from { transform: scale(1.04) translate(-1.5%, -1%); } to { transform: scale(1.12) translate(1.5%, 1%); } }
.fx3d.mini { --fx-tam: 128px; --fx-giro: 16s; border-radius: 14px; }
.fx3d-cena { position: absolute; inset: 0; perspective: 780px; }
.fx3d-mundo { position: absolute; left: 50%; top: 54%; width: 0; height: 0; transform-style: preserve-3d;
  animation: fx-camera 18s ease-in-out infinite alternate; }
@keyframes fx-camera { from { transform: rotateX(55deg) rotateZ(-4deg); } to { transform: rotateX(63deg) rotateZ(4deg); } }
.fx3d-orbita { position: absolute; left: calc(var(--fx-r) * -1); top: calc(var(--fx-r) * -1);
  width: calc(var(--fx-r) * 2); height: calc(var(--fx-r) * 2); border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent-2) 50%, transparent);
  box-shadow: inset 0 0 46px color-mix(in srgb, var(--accent) 30%, transparent); }
.fx3d-nucleo-slot { position: absolute; transform-style: preserve-3d; transform: rotateX(-59deg); }
.fx3d-nucleo { position: absolute; width: calc(var(--fx-tam) * .30); height: calc(var(--fx-tam) * .30);
  left: calc(var(--fx-tam) * -.15); top: calc(var(--fx-tam) * -.15);
  border-radius: 50%; display: grid; place-content: center; gap: 1px; text-align: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent-2) 88%, #fff) 0%, var(--accent-2) 30%, var(--accent) 62%, color-mix(in srgb, var(--accent) 45%, #000) 100%);
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent-2) 60%, transparent), inset -8px -12px 24px rgba(0, 0, 0, .4);
  animation: fx-pulso 4.6s ease-in-out infinite; }
@keyframes fx-pulso {
  0%, 100% { box-shadow: 0 0 26px color-mix(in srgb, var(--accent-2) 50%, transparent), inset -8px -12px 24px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 52px color-mix(in srgb, var(--accent-2) 80%, transparent), inset -8px -12px 24px rgba(0,0,0,.4); } }
.fx3d-nucleo strong { font-size: calc(var(--fx-tam) * .066); font-weight: 800; letter-spacing: .02em; line-height: 1.05; }
.fx3d-nucleo span { font-size: calc(var(--fx-tam) * .038); font-weight: 700; opacity: .85; }
.fx3d-anel { position: absolute; transform-style: preserve-3d; animation: fx-giro var(--fx-giro) linear infinite; }
@keyframes fx-giro { to { transform: rotateZ(360deg); } }
.fx3d-sat { position: absolute; transform-style: preserve-3d; transform: rotateZ(calc(var(--i) * 60deg)) translateY(calc(var(--fx-r) * -1)); }
.fx3d-face { transform-style: preserve-3d; animation: fx-giro var(--fx-giro) linear infinite reverse; }
.fx3d-face-in { transform: rotateZ(calc(var(--i) * -60deg)) rotateX(-59deg); }
.fx3d-chip { width: var(--fx-chip); height: var(--fx-chip); margin-left: calc(var(--fx-chip) / -2); margin-top: calc(var(--fx-chip) / -2);
  border-radius: 50%; display: grid; place-items: center; color: #cfe2ff;
  background: radial-gradient(circle at 34% 30%, #2c3a63, #141b38 70%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 75%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 14px color-mix(in srgb, var(--accent-2) 40%, transparent); }
.fx3d-chip svg { width: 60%; height: 60%; }
.fx3d-chip-az img { width: 86%; height: 86%; object-fit: contain; }
.azfirel-text { display: grid; gap: 4px; }
.azfirel-text strong { font-size: 1.15rem; letter-spacing: .02em; }
.azfirel-text strong::first-letter { color: var(--accent-2); }
.azfirel-arrow { margin-left: auto; font-size: 1.4rem; color: var(--accent-2); transition: transform .2s ease; }
.azfirel-btn:hover .azfirel-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .fx3d-anel, .fx3d-face, .fx3d-mundo, .fx3d-nucleo, .fx3d-fundo { animation: none; }
  .fx3d-mundo { transform: rotateX(59deg); }
}

.azfirel-hero { display: flex; align-items: center; gap: 28px; margin-bottom: 20px; }

.azfirel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.azfirel-slot { display: grid; justify-items: center; gap: 8px; text-align: center; border-style: dashed; opacity: .75; }
.azfirel-slot-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px dashed var(--border); color: var(--accent-2); font-size: 1.3rem; }
@media (max-width: 640px) {
  .azfirel-btn { flex-wrap: wrap; }
  .azfirel-hero { flex-direction: column; text-align: center; }
}

/* ── CVT (compra, venda e troca) ── */
.cvt-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; padding: 16px; margin-top: 16px; }
.cvt-filtros label { display: grid; gap: 5px; font-size: .82rem; }
.cvt-filtros label > span { color: var(--muted); font-weight: 700; }
.cvt-filtros select, .cvt-filtros input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: .88rem; width: 100%; }
.cvt-preco > div { display: flex; gap: 6px; }
.cvt-preco input { min-width: 0; }
.cvt-filtros-acoes { display: flex; gap: 8px; }
.cvt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.cvt-card { display: flex; flex-direction: column; overflow: hidden; }
.cvt-foto { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; }
.cvt-foto img { width: 100%; height: 100%; object-fit: cover; }
.cvt-foto-vazia { font-size: 2.4rem; color: var(--muted); opacity: .5; }
.cvt-tag { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; }
.cvt-tag-venda { background: #16a34a; }
.cvt-tag-troca { background: #2563eb; }
.cvt-tag-procura { background: #d97706; }
.cvt-corpo { display: grid; gap: 6px; padding: 14px 16px 16px; }
.cvt-corpo > strong { font-size: 1.02rem; }
.cvt-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cvt-preco-valor { font-size: 1.1rem; font-weight: 800; color: var(--accent-2); }
.cvt-local { color: var(--muted); font-size: .82rem; }
.cvt-contato { font-size: .8rem; color: var(--text); font-weight: 600; }
.cvt-card-acoes { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cvt-card-acoes .btn { padding: 5px 12px; font-size: .78rem; }
.cvt-titulo { text-decoration: none; color: var(--text); }
.cvt-titulo:hover { color: var(--accent-2); }
.cvt-tag-video { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; }

/* botões principais do CVT (pesquise / publicar / chat) */
.cvt-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.cvt-acao {
  display: grid; justify-items: center; gap: 6px;
  min-width: 92px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text);
  text-decoration: none; font-size: .82rem; font-weight: 700;
  transition: .16s ease;
}
.cvt-acao:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.cvt-acao-icone { display: grid; place-items: center; width: 34px; height: 34px; }
.cvt-acao-icone svg { width: 100%; height: 100%; }
.cvt-acao-destaque { background: var(--accent); border-color: var(--accent); color: #fff; }
.cvt-acao-destaque:hover { color: #fff; filter: brightness(1.08); }

/* FUTURO: estilos do consórcio preservados para uma possível retomada.
.cvt-consorcio-banner {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 14px 18px; border-radius: 14px; text-decoration: none;
  color: #fff; background: linear-gradient(100deg, var(--accent), var(--accent-2));
  transition: .16s ease;
}
.cvt-consorcio-banner:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cvt-consorcio-icone { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; }
.cvt-consorcio-icone svg { width: 100%; height: 100%; }
.cvt-consorcio-texto { display: grid; gap: 2px; flex: 1; }
.cvt-consorcio-texto strong { font-size: 1rem; }
.cvt-consorcio-texto span { font-size: .86rem; opacity: .95; }
.cvt-consorcio-cta { flex-shrink: 0; font-weight: 700; font-size: .85rem; }
@media (max-width: 560px) { .cvt-consorcio-cta { display: none; } }

/* página do consórcio */
.consorcio-como { padding: 20px; margin-top: 16px; }
.consorcio-como h2 { margin: 0 0 10px; font-size: 1.1rem; }
.consorcio-como ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.consorcio-nota { margin: 0; }
.consorcio-ok, .consorcio-form { padding: 18px 20px; margin-top: 16px; }
.consorcio-form { display: grid; gap: 14px; max-width: 560px; }
.consorcio-form h2 { margin: 0; font-size: 1.05rem; }
.consorcio-form input, .consorcio-form textarea {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .92rem; width: 100%;
}
.consorcio-ok { color: var(--accent-2); font-weight: 600; }
.consorcio-plano { padding: 18px 20px; margin-top: 16px; border-left: 3px solid var(--accent); }
.consorcio-plano h2 { margin: 0 0 12px; font-size: 1.05rem; }
.consorcio-plano-linhas { display: flex; flex-wrap: wrap; gap: 22px; }
.consorcio-plano-linhas > div { display: grid; gap: 2px; }
.consorcio-plano-linhas .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.consorcio-plano-linhas strong { font-size: 1.1rem; }
.consorcio-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.consorcio-simulacao { margin: 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); font-weight: 600; color: var(--accent-2); }
@media (max-width: 520px) { .consorcio-dois { grid-template-columns: 1fr; } }
*/

/* fila de aprovação */
.cvt-pendentes { padding: 16px; margin-top: 18px; border-color: var(--accent); }
.cvt-pendentes h2 { margin: 0 0 10px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.cvt-card-pendente { border-color: var(--accent); }
.cvt-aviso-pendente { margin-top: 16px; padding: 12px 16px; font-size: .88rem; color: var(--text); }

/* página do anúncio */
.cvt-detalhe { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
.cvt-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cvt-galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; }
.cvt-detalhe-video { width: 100%; margin-top: 12px; border-radius: 12px; background: #000; }
.cvt-detalhe-info { display: grid; gap: 10px; padding: 18px; align-content: start; }
.cvt-detalhe-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 820px) { .cvt-detalhe { grid-template-columns: 1fr; } }

/* A descricao vem embaixo, em largura cheia. Na coluna estreita ao lado das
   fotos um texto de mil caracteres virava uma tira de 50 caracteres por linha
   e quase setecentos pixels de altura — dava a impressao de estar cortado. */
.cvt-descricao { margin-top: 18px; padding: 20px 24px; }
.cvt-descricao h2 { margin: 0 0 10px; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.cvt-descricao p { margin: 0; max-width: 78ch; line-height: 1.7; overflow-wrap: anywhere; }

.cvt-aviso-recusa { margin-top: 16px; padding: 14px 18px; border-left: 4px solid #ef4444; display: grid; gap: 8px; }
.cvt-aviso-recusa strong { color: #ef4444; }
.cvt-aviso-recusa p { margin: 0; }
.cvt-aviso-recusa .btn { justify-self: start; }

.cvt-recusa-form { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cvt-recusa-form label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.cvt-recusa-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .85rem; resize: vertical;
}
.cvt-recusa-form textarea:focus { outline: none; border-color: var(--accent); }

/* fotos no formulário */
.cvt-form-galeria { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cvt-form-foto { display: grid; gap: 4px; justify-items: center; font-size: .72rem; color: var(--muted); }
.cvt-form-foto img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; }
.cvt-form-video-atual { width: 100%; max-width: 320px; border-radius: 10px; margin-bottom: 6px; background: #000; }

/* formulário de anúncio (estilo OLX) */
.cvt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: clamp(18px, 3vw, 30px); margin-top: 16px; }
.cvt-campo { display: grid; gap: 6px; font-size: .85rem; }
.cvt-campo-full { grid-column: 1 / -1; }
.cvt-campo > span { color: var(--muted); font-weight: 700; }
.cvt-campo input, .cvt-campo select, .cvt-campo textarea {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: .92rem; font-family: inherit; width: 100%;
}
.cvt-campo textarea { resize: vertical; }
.cvt-campo input[type="file"] { padding: 8px; background: transparent; }
.cvt-form-foto-atual { max-width: 220px; border-radius: 10px; margin-bottom: 6px; display: block; }
.cvt-form-erro { grid-column: 1/-1; color: var(--danger); }
/* o erro de campo sai da lista padrao do Django e vira texto vermelho simples */
.cvt-campo ul.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--danger); font-size: .82rem; }

/* A regra do contato aparece antes de escrever, nao so na recusa: anuncio
   perdido por desconhecimento afasta anunciante. */
.cvt-regra { margin-top: 18px; padding: 16px 20px; border-left: 4px solid var(--accent); display: grid; gap: 6px; }
.cvt-regra strong { font-size: .95rem; }
.cvt-regra p { margin: 0; font-size: .88rem; line-height: 1.6; }
.cvt-form-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 620px) { .cvt-form { grid-template-columns: 1fr; } }

/* chat do CVT */
.cvt-chat-aviso { margin: 12px 0 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--text); font-size: .84rem; }
.cvt-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cvt-chat-msgs { display: flex; flex-direction: column; gap: 10px; padding: 18px; max-height: 52vh; overflow-y: auto; scrollbar-width: thin; }
.cvt-chat-vazio { margin: auto; }
.cvt-msg { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; }
.cvt-msg p { margin: 0; }
.cvt-msg time { display: block; margin-top: 4px; font-size: .68rem; opacity: .7; }
.cvt-msg-eu { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.cvt-msg-outro { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.cvt-chat-erro { margin: 0; padding: 10px 16px; color: var(--danger); font-size: .86rem; background: color-mix(in srgb, var(--danger) 10%, transparent); }
.cvt-chat-form { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }
.cvt-chat-form textarea { flex: 1; resize: none; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .92rem; }
.cvt-conversa-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; text-decoration: none; color: var(--text); }
.cvt-conversa-item:hover { border-color: var(--accent-2); }
.cvt-conversa-item strong { display: block; }
.cvt-conversa-item .muted { font-size: .82rem; }

/* ── MUSICPEDIA ── */
.mp-destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0 10px; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.mp-card, .mp-destaque {
  display: grid; align-content: start; gap: 8px; padding: 20px;
  text-decoration: none; color: var(--text); transition: .16s ease;
  border-left: 3px solid var(--accent-2);
}
.mp-card-capa { width: calc(100% + 40px); margin: -20px -20px 4px; height: 150px; object-fit: cover; border-radius: 12px 12px 0 0; }
.mp-artigo-capa { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; margin: 4px 0 20px; }
.mp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 26px 0; }
.mp-foto-card { margin: 0; }
.mp-foto-card img { width: 100%; border-radius: 12px; display: block; }
.mp-foto-card figcaption { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.mp-destaque { background: color-mix(in srgb, var(--accent-2) 8%, var(--surface)); }
.mp-card:hover, .mp-destaque:hover { transform: translateY(-2px); border-color: var(--accent); }
.mp-card h2, .mp-destaque h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.mp-card p, .mp-destaque p { margin: 0; color: var(--muted); font-size: .9rem; }
.mp-destaque strong { color: var(--accent-2); font-size: .85rem; }

/* cor por categoria */
.mp-cat-rock { border-left-color: #ef4444; }
.mp-cat-artistas { border-left-color: #a855f7; }
.mp-cat-historia { border-left-color: #f59e0b; }
.mp-cat-generos { border-left-color: #10b981; }
.mp-cat-instrumentos { border-left-color: #3b82f6; }
.mp-cat-curiosidades { border-left-color: #ec4899; }

.mp-artigo { max-width: 760px; }
.mp-artigo .breadcrumb { margin-bottom: 14px; }
.mp-artigo h1 { margin: 8px 0 6px; }
.mp-artigo-resumo { font-size: 1.05rem; margin-bottom: 20px; }
.mp-artigo-corpo { line-height: 1.75; }
.mp-artigo-corpo h3 { margin: 24px 0 8px; font-size: 1.15rem; }
.mp-artigo-corpo p { margin: 0 0 14px; }
.mp-artigo-corpo ul { margin: 0 0 14px; padding-left: 20px; }
.mp-artigo-autor { margin-top: 22px; font-style: italic; }
.mp-relacionados { margin-top: 34px; border-top: 1px solid var(--border); padding-top: 20px; }
.mp-relacionados h2 { font-size: 1.1rem; margin: 0 0 12px; }
.mp-relacionados .mp-card h2 { font-size: 1.05rem; }
.mp-voltar { margin-top: 26px; }

/* ── EDITOR DE ACORDES ── */
.acorde-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 18px; }
.acorde-card { display: grid; justify-items: center; gap: 6px; padding: 16px 12px; text-decoration: none; text-align: center; color: var(--text); transition: .16s ease; }
.acorde-card:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.acorde-card strong { font-size: 1.05rem; }
.acorde-preview { color: var(--accent-2); min-height: 96px; display: grid; place-items: center; }
.acorde-preview .acorde-svg:not(.teclado) { height: 104px; width: auto; }
.acorde-preview .acorde-svg.teclado { width: 128px; height: auto; }
.acorde-svg { display: block; }
.acorde-svg .ac-braco { fill: color-mix(in srgb, #a96d35 34%, var(--surface-2)); stroke: color-mix(in srgb, var(--text) 68%, #7a4a24); stroke-width: 1.5; }
.acorde-svg .ac-traste { stroke: color-mix(in srgb, var(--text) 72%, var(--border)); stroke-width: 1.7; }
.acorde-svg .ac-corda { stroke: color-mix(in srgb, var(--text) 82%, #8b6a48); }
.acorde-svg .ac-corda-0 { stroke-width: 2.2; }
.acorde-svg .ac-corda-1 { stroke-width: 1.9; }
.acorde-svg .ac-corda-2 { stroke-width: 1.6; }
.acorde-svg .ac-corda-3 { stroke-width: 1.35; }
.acorde-svg .ac-corda-4 { stroke-width: 1.1; }
.acorde-svg .ac-corda-5 { stroke-width: .85; }
.acorde-svg .ac-casa-num { fill: var(--text); font-size: 10px; font-weight: 800; }
.acorde-svg .ac-dedo { fill: var(--accent); }
.acorde-svg .ac-dedo-num { fill: #fff; font-size: 12px; font-weight: 700; }
.acorde-svg.mini .ac-dedo-num { font-size: 7px; }
.acorde-svg .ac-aberta { fill: none; stroke: currentColor; stroke-width: 1.6; }
.acorde-svg .ac-marca { fill: var(--muted); font-size: 13px; }
.acorde-svg .ac-base { fill: var(--muted); font-size: 12px; font-weight: 700; }
.acorde-svg.teclado .ac-branca { fill: #fff; stroke: #94a3b8; stroke-width: 1; }
.acorde-svg.teclado .ac-branca.on { fill: var(--accent-2); }
.acorde-svg.teclado .ac-preta { fill: #1f2937; stroke: #0f172a; stroke-width: 1; }
.acorde-svg.teclado .ac-preta.on { fill: var(--accent); }

/* ── CONVITE DE CADASTRO ── */
.convite-page { max-width: 720px; margin: 48px auto; padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; justify-items: center; text-align: center; }
.convite-page h1 { margin: 0; }
.convite-beneficios { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.convite-pacto { display: grid; gap: 8px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.convite-pacto p { margin: 0; }
.convite-pacto strong { color: var(--accent-2); }
.convite-pacto-obs { font-size: .86rem; color: var(--muted); line-height: 1.6; }
.convite-pacto-obs strong { color: var(--text); }
.convite-acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.ac-editor { padding: clamp(18px, 3vw, 30px); }
.ac-editor-cols { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 30px; align-items: start; }
.ac-palco-wrap { display: grid; justify-items: center; gap: 14px; }
.ac-palco { color: var(--accent-2); padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); cursor: pointer; width: 100%; display: grid; place-items: center; min-height: 260px; }
.ac-palco .acorde-svg { width: 100%; max-width: 300px; height: auto; }
.ac-controles { display: grid; gap: 16px; align-content: start; }
.ac-campo { display: grid; gap: 6px; font-size: .9rem; }
.ac-campo > span { font-weight: 700; color: var(--text); }
.ac-campo input[type="text"], .ac-campo select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.ac-campo input[type="range"] { accent-color: var(--accent-2); }
.ac-campo em { font-style: normal; font-weight: 500; }
.ac-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ac-excluir { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
@media (max-width: 720px) { .ac-editor-cols { grid-template-columns: 1fr; } }

/* ── CADERNO DE ANOTAÇÕES MUSICAIS ── */
.notas-page { max-width: 1280px; }
.notas-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: clamp(20px, 3vw, 34px); border: 1px solid color-mix(in srgb, var(--accent-2) 36%, var(--border)); border-radius: 18px; color: #eef6ff; background: linear-gradient(125deg, #07172c 0%, #0d2947 62%, #124366 100%); box-shadow: 0 18px 42px rgba(3, 18, 38, .18); }
.notas-hero h1 { margin: 5px 0 7px; color: #fff; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.notas-hero p { margin: 0; color: #c8d9ec; max-width: 650px; }
.notas-kicker { color: #72d9e8; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.notas-convite { margin: 0 0 22px; padding: 13px 18px; border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent-2) 8%, var(--surface)); color: var(--text); font-size: .92rem; }
.notas-convite a { color: var(--accent-2); font-weight: 700; }
.notas-resumo { display: flex; gap: 10px; flex-wrap: wrap; justify-content: end; }
.notas-resumo span { min-width: 108px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.08); color: #c8d9ec; font-size: .78rem; text-align: center; }
.notas-resumo strong { display: block; color: #fff; font-size: 1.3rem; }
.notas-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.notas-editor { position: sticky; top: 88px; padding: 20px; }
.notas-editor-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.notas-editor-head h2, .notas-toolbar h2 { margin: 0; font-size: 1.18rem; }
.notas-editor-head p, .notas-toolbar p { margin: 3px 0 0; font-size: .84rem; color: var(--muted); }
.notas-editor-icon { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border-radius: 11px; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-2)); font-size: 1.2rem; }
.notas-form { display: grid; gap: 13px; }
.notas-form label:not(.notas-check) { display: grid; gap: 6px; }
.notas-form label > span { color: var(--text); font-size: .78rem; font-weight: 800; }
.notas-form input[type="text"], .notas-form select, .notas-form textarea, .notas-filtros input, .notas-filtros select { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; color: var(--text); background: var(--surface-2); font: inherit; }
.notas-form textarea { resize: vertical; min-height: 170px; line-height: 1.5; }
.notas-form input:focus, .notas-form select:focus, .notas-form textarea:focus, .notas-filtros input:focus, .notas-filtros select:focus { outline: 2px solid color-mix(in srgb, var(--accent-2) 42%, transparent); border-color: var(--accent-2); }
.notas-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.notas-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.notas-check span { font-size: .82rem; }
.notas-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notas-conteudo { min-width: 0; }
.notas-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.notas-filtros { display: grid; grid-template-columns: minmax(150px, 1fr) 150px auto; gap: 7px; width: min(100%, 510px); }
.notas-filtros input, .notas-filtros select { min-height: 38px; font-size: .82rem; }
.notas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nota-card { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 18px; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.nota-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-2) 52%, var(--border)); box-shadow: 0 12px 28px rgba(10, 33, 57, .09); }
.nota-card.nota-destaque::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent-2), #f1b84b); }
.nota-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nota-categoria { padding: 4px 8px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent-2) 12%, transparent); font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.nota-fixada { color: #a66b00; font-size: .68rem; font-weight: 800; }
.nota-card h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.nota-texto { display: -webkit-box; margin: 0 0 15px; overflow: hidden; color: var(--muted); font-size: .86rem; line-height: 1.55; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.nota-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.nota-card time { color: var(--muted); font-size: .68rem; }
.nota-acoes { display: flex; align-items: center; gap: 4px; }
.nota-acoes form { display: flex; margin: 0; }
.nota-acoes a, .nota-acoes button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.nota-acoes a:hover, .nota-acoes button:hover { color: var(--accent); border-color: var(--border); background: var(--surface-2); }
.nota-acoes .nota-excluir:hover { color: var(--danger); }
.notas-vazio { grid-column: 1 / -1; display: grid; justify-items: center; min-height: 330px; padding: 50px 20px; place-content: center; text-align: center; }
.notas-vazio > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent-2) 12%, transparent); font-size: 1.7rem; }
.notas-vazio h3 { margin: 13px 0 4px; }
.notas-vazio p { margin: 0 0 15px; color: var(--muted); }
@media (max-width: 960px) { .notas-layout { grid-template-columns: 1fr; } .notas-editor { position: static; } }
@media (max-width: 700px) { .notas-hero { align-items: start; flex-direction: column; } .notas-resumo { justify-content: start; } .notas-toolbar { align-items: stretch; flex-direction: column; } .notas-filtros { grid-template-columns: 1fr; width: 100%; } .notas-grid { grid-template-columns: 1fr; } }

/* ── MULTIVERSO azFirel: carrossel 3D de joias ── */
.mv-page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 60px; }
.mv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mv-cosmos { position: relative; border-radius: 20px; overflow: hidden; min-height: 560px; background: #04050d;
  box-shadow: inset 0 0 120px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.4); }
.mv-cosmos::before { content: ""; position: absolute; inset: -5%; z-index: 0;
  background: url("/static/img/azfirel-nebula.30ee3160ba5d.webp") center / cover no-repeat;
  animation: mv-neb 70s ease-in-out infinite alternate; }
@keyframes mv-neb { from { transform: scale(1.05) translate(-1%, -.5%); } to { transform: scale(1.15) translate(1%, .5%); } }
.mv-stage { position: absolute; inset: 0; z-index: 1; perspective: 1150px; display: grid; place-items: center; }

.mv-nucleo { position: absolute; z-index: 2; width: 124px; height: 124px; border-radius: 50%; pointer-events: none;
  display: grid; place-content: center; gap: 2px; text-align: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, #cfe6ff 0%, var(--accent-2) 32%, var(--accent) 64%, #06122a 100%);
  box-shadow: 0 0 46px color-mix(in srgb, var(--accent-2) 70%, transparent), inset -10px -14px 30px rgba(0,0,0,.45);
  animation: mv-pulso 5s ease-in-out infinite; }
@keyframes mv-pulso { 0%,100% { box-shadow: 0 0 34px color-mix(in srgb, var(--accent-2) 55%, transparent), inset -10px -14px 30px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 66px color-mix(in srgb, var(--accent-2) 90%, transparent), inset -10px -14px 30px rgba(0,0,0,.45); } }
.mv-nucleo strong { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.mv-nucleo span { font-size: .85rem; font-weight: 700; opacity: .85; }

.mv-orbit { position: absolute; transform-style: preserve-3d; animation: mv-spin 40s linear infinite; }
@keyframes mv-spin { to { transform: rotateY(360deg); } }
.mv-slot { --ang: calc(var(--i) * (360deg / var(--n))); position: absolute; transform-style: preserve-3d;
  transform: rotateY(var(--ang)) translateZ(300px); }
.mv-joia { position: absolute; left: -80px; top: -116px; width: 160px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotateY(calc(var(--ang) * -1)); animation: mv-billboard 40s linear infinite; transition: filter .2s ease; }
@keyframes mv-billboard { to { transform: rotateY(-360deg); } }
.mv-joia img { width: 100%; display: block; border-radius: 14px;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent-2) 40%, transparent)); }
.mv-joia:hover { filter: brightness(1.15); }
.mv-joia:hover img { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--accent-2) 70%, transparent)); }
.mv-joia-nome { display: block; margin-top: 8px; text-align: center; color: #eaf2ff; font-size: .9rem; font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.mv-admin-dica { margin-top: 16px; }
.mv-admin-dica a { color: var(--accent-2); }

.mv-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.mv-modal[hidden] { display: none; }
.mv-modal-backdrop { position: absolute; inset: 0; background: rgba(3,5,12,.78); backdrop-filter: blur(4px); }
.mv-modal-card { position: relative; z-index: 1; width: min(420px, calc(100% - 40px)); padding: 22px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.5); text-align: center; }
.mv-modal-card img { width: 150px; border-radius: 14px; margin: 0 auto 12px; display: block; }
.mv-modal-card h2 { margin: 0 0 6px; }
.mv-modal-card .btn { margin-top: 16px; }
.mv-modal-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 1.2rem; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .mv-orbit, .mv-joia, .mv-nucleo, .mv-cosmos::before { animation: none; }
}
@media (max-width: 640px) {
  .mv-cosmos { min-height: 460px; }
  .mv-slot { transform: rotateY(var(--ang)) translateZ(210px); }
  .mv-joia { left: -58px; top: -84px; width: 116px; }
  .mv-nucleo { width: 112px; height: 112px; }
  .mv-nucleo strong { font-size: 1.3rem; }
}

/* ── PRESENÇA DO UNIVERSO EM TODAS AS PÁGINAS ──
   O cenário do instrumento acompanha o usuário fora da home (bem sutil),
   e um fragmento-joia do multiverso flutua discretamente no canto. */
.universo-fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hero-img, none) center / cover no-repeat; opacity: .16; }
[data-instrument="traditional"] .universo-fundo { display: none; }
[data-theme="light"] .universo-fundo { opacity: .09; }
[data-contrast="high"] .universo-fundo { opacity: .07; }

.joia-fragmento { position: fixed; right: 16px; bottom: 20px; width: 74px; height: 74px;
  z-index: 40; cursor: pointer; opacity: .38; border-radius: 50%;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-2) 30%, transparent));
  animation: joia-flutua 7s ease-in-out infinite; transition: opacity .25s ease; }
.joia-fragmento:hover { opacity: .85; }

/* Explosão cinematográfica do fragmento (easter egg) */
.joia-palco { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(8, 12, 32, .85), rgba(2, 3, 10, .96));
  opacity: 0; animation: joia-palco-entra .35s ease forwards; }
.joia-palco.saindo { animation: joia-palco-sai .6s ease forwards; }
@keyframes joia-palco-entra { to { opacity: 1; } }
@keyframes joia-palco-sai { from { opacity: 1; } to { opacity: 0; } }
.joia-nucleo-wrap { position: absolute; animation: joia-nucleo-cresce 1.1s cubic-bezier(.2, .8, .3, 1.15) forwards; }
@keyframes joia-nucleo-cresce { from { transform: scale(.25); opacity: 0; } to { transform: scale(2.2); opacity: 1; } }
.joia-nucleo { display: block; width: 140px; height: 140px; border-radius: 50%;
  animation: joia-nucleo-treme .09s linear 1.1s 9 alternate, joia-nucleo-brilha 1.9s ease-in forwards; }
@keyframes joia-nucleo-treme { from { transform: translate(-2px, 1px) rotate(-1.2deg); } to { transform: translate(2px, -1px) rotate(1.2deg); } }
@keyframes joia-nucleo-brilha {
  from { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-2) 40%, transparent)); }
  to { filter: drop-shadow(0 0 60px color-mix(in srgb, var(--accent-2) 95%, #fff)) brightness(1.6); } }
.joia-flash { position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(150,195,255,.55) 28%, transparent 62%);
  animation: joia-flash .6s ease-out forwards; }
@keyframes joia-flash { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.6); } }
.joia-onda { position: absolute; width: 130px; height: 130px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-2) 85%, #fff);
  animation: joia-onda 1.05s ease-out forwards; }
@keyframes joia-onda { from { transform: scale(.4); opacity: .95; } to { transform: scale(10); opacity: 0; } }
.joia-estilhaco { position: absolute; width: var(--tam, 10px); height: var(--tam, 10px);
  background: linear-gradient(135deg, #fff 0%, var(--accent-2) 55%, var(--accent) 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: joia-estilhaco 1s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes joia-estilhaco {
  from { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.3); opacity: 0; } }
.joia-legenda { position: absolute; bottom: 20%; padding: 0 20px; text-align: center;
  color: #dbe8ff; font-weight: 800; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; animation: joia-legenda 2s ease .6s forwards; }
@keyframes joia-legenda {
  0% { opacity: 0; transform: translateY(12px); }
  25% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes joia-flutua {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-9px) rotate(3deg); } }
@media (max-width: 640px) {
  .joia-fragmento { width: 54px; height: 54px; right: 10px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .joia-fragmento { animation: none; } }
@media print { .joia-fragmento, .universo-fundo { display: none !important; } }