/* Hora Musica v27 — uma única geometria para toda a área autenticada. */
:root{
  --app-v27-sidebar:252px;
  --app-v27-max:1240px;
  --app-v27-gutter:clamp(18px,2.1vw,30px);
  --app-v27-top:30px;
  --app-v27-radius:18px;
}

.app-shell-body:not([data-page="create"]){background:var(--bg,#0b0b0d)!important}
.app-shell-body:not([data-page="create"]) .app-content{
  margin-left:var(--app-v27-sidebar)!important;
  min-width:0!important;
  padding:0 var(--app-v27-gutter) 72px!important;
}
.app-shell-body:not([data-page="create"]) .app-content>.container,
.app-shell-body:not([data-page="create"]) .app-content>.page-wrap,
.app-shell-body:not([data-page="create"]) .app-content>.user-dashboard,
.app-shell-body:not([data-page="create"]) .app-content>.credit-pricing-page,
.app-shell-body:not([data-page="create"]) .app-content>.referral-page,
.app-shell-body:not([data-page="create"]) .app-content>.wallet-page,
.app-shell-body:not([data-page="create"]) .app-content>.verification-wrap,
.app-shell-body:not([data-page="create"]) .app-content>.premium-support-wrap,
.app-shell-body:not([data-page="create"]) .app-content>.project-shell,
.app-shell-body:not([data-page="create"]) .app-content>.project-page,
.app-shell-body:not([data-page="create"]) .app-content>.audio-single-page,
.app-shell-body:not([data-page="create"]) .app-content>.audio-single-shell{
  width:min(100%,var(--app-v27-max))!important;
  max-width:var(--app-v27-max)!important;
  margin-inline:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
.app-shell-body:not([data-page="create"]) .app-content>.container,
.app-shell-body:not([data-page="create"]) .app-content>.page-wrap,
.app-shell-body:not([data-page="create"]) .app-content>.user-dashboard,
.app-shell-body:not([data-page="create"]) .app-content>.credit-pricing-page,
.app-shell-body:not([data-page="create"]) .app-content>.referral-page,
.app-shell-body:not([data-page="create"]) .app-content>.verification-wrap,
.app-shell-body:not([data-page="create"]) .app-content>.premium-support-wrap{
  padding-top:var(--app-v27-top)!important;
}

/* Cabeçalhos: mesma linha, mesma escala e mesmos espaços em todas as telas. */
.app-shell-body:not([data-page="create"]) .account-hero,
.app-shell-body:not([data-page="create"]) .library-head,
.app-shell-body:not([data-page="create"]) .credit-pricing-hero,
.app-shell-body:not([data-page="create"]) .user-dashboard-head{
  min-height:72px!important;
  margin:0 0 20px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.app-shell-body:not([data-page="create"]) .account-user-line{gap:0!important}
.app-shell-body:not([data-page="create"]) .account-hero>.account-user-line>.account-avatar{display:none!important}
.app-shell-body:not([data-page="create"]) .account-hero h1,
.app-shell-body:not([data-page="create"]) .library-head h1,
.app-shell-body:not([data-page="create"]) .credit-pricing-hero h1,
.app-shell-body:not([data-page="create"]) .settings-layout~h1,
.app-shell-body:not([data-page="create"]) .user-dashboard-head h1,
.app-shell-body:not([data-page="create"]) .page-heading{
  margin:0!important;
  font-size:clamp(28px,2.4vw,34px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
}
.app-shell-body:not([data-page="create"]) .account-hero p,
.app-shell-body:not([data-page="create"]) .library-head .page-subtitle,
.app-shell-body:not([data-page="create"]) .user-dashboard-head p,
.app-shell-body:not([data-page="create"]) .page-subtitle{
  margin:7px 0 0!important;
  max-width:760px!important;
  color:var(--muted)!important;
  font-size:14px!important;
  line-height:1.5!important;
}
.app-shell-body:not([data-page="create"]) .page-wrap>.page-heading:first-child{margin-top:0!important}
.app-shell-body:not([data-page="create"]) .page-wrap>.page-subtitle{margin-bottom:20px!important}

/* Cartões e grids seguem a mesma densidade. */
.app-shell-body:not([data-page="create"]) .glass-card,
.app-shell-body:not([data-page="create"]) .product-card,
.app-shell-body:not([data-page="create"]) .panel-card,
.app-shell-body:not([data-page="create"]) .content-card{
  border-radius:var(--app-v27-radius)!important;
}
.app-shell-body:not([data-page="create"]) .account-layout,
.app-shell-body:not([data-page="create"]) .account-content{width:100%!important;max-width:none!important}
.app-shell-body:not([data-page="create"]) .account-content{gap:16px!important}

/* Settings: título e abas começam no mesmo eixo das outras telas. */
.app-shell-body[data-page="settings"] .page-wrap{padding-top:var(--app-v27-top)!important}
.app-shell-body[data-page="settings"] .settings-layout{margin-top:20px!important;gap:14px!important}
.app-shell-body[data-page="settings"] .settings-nav{margin:0!important}

/* Indique: remove a aparência de landing isolada dentro do painel. */
.app-shell-body[data-page="referral"] .referral-page{display:grid!important;gap:16px!important}
.app-shell-body[data-page="referral"] .referral-hero{margin:0!important;border-radius:20px!important;text-align:left!important;padding:24px!important}
.app-shell-body[data-page="referral"] .referral-hero h1{font-size:clamp(28px,2.5vw,36px)!important;line-height:1.08!important;margin:7px 0 9px!important}
.app-shell-body[data-page="referral"] .referral-hero p{max-width:760px!important;font-size:14px!important;line-height:1.55!important}
.app-shell-body[data-page="referral"] .referral-link-box{max-width:760px!important}
.app-shell-body[data-page="referral"] .referral-stats{margin:0!important;gap:12px!important}

/* Explore autenticado preserva o destaque, mas respeita a largura/ritmo do painel. */
.app-shell-body[data-page="explore"] .discovery-page{padding-top:var(--app-v27-top)!important}
.app-shell-body[data-page="explore"] .explore-hero{margin-top:0!important;margin-bottom:22px!important;border-radius:20px!important}
.app-shell-body[data-page="explore"] .explore-toolbar{margin-top:0!important;padding-top:0!important}
.app-shell-body[data-page="explore"] .explore-toolbar h2{font-size:23px!important;line-height:1.15!important}

/* Suporte: conteúdo continua focado, mas o eixo superior é idêntico. */
.app-shell-body[data-page="support"] .premium-support-wrap{width:min(100%,var(--app-v27-max))!important;max-width:var(--app-v27-max)!important;padding-inline:0!important}
.app-shell-body[data-page="support"] .premium-hero{text-align:left!important;margin:0 0 20px!important}
.app-shell-body[data-page="support"] .premium-hero h1{font-size:clamp(28px,2.4vw,34px)!important;margin:0 0 7px!important}
.app-shell-body[data-page="support"] .premium-hero p{font-size:14px!important;margin:0!important}
.app-shell-body[data-page="support"] .premium-support-wrap>.premium-glass{max-width:820px!important}

/* Sidebar não muda de largura entre páginas. */
.app-shell-body .app-sidebar{width:var(--app-v27-sidebar)!important}
.app-shell-body .app-sidebar-head{height:68px!important;padding-inline:16px!important}
.app-shell-body .app-sidebar-create{padding:0 12px 14px!important}
.app-shell-body .app-sidebar-create a{height:42px!important;border-radius:12px!important;font-size:13.5px!important}
.app-shell-body .app-sidebar-nav{padding:0 11px 14px!important}
.app-shell-body .app-sidebar-section-title{font-size:12px!important;line-height:1.2!important;letter-spacing:.105em!important}
.app-shell-body .app-sidebar-link{min-height:40px!important;font-size:13.5px!important}
.app-shell-body .app-sidebar-foot{padding:11px!important}

@media(max-width:960px){
  :root{--app-v27-gutter:16px;--app-v27-top:22px}
  .app-shell-body:not([data-page="create"]) .app-content{margin-left:0!important;padding:58px var(--app-v27-gutter) 54px!important}
  .app-shell-body .app-sidebar{width:min(292px,88vw)!important}
  .app-shell-body:not([data-page="create"]) .account-hero,
  .app-shell-body:not([data-page="create"]) .library-head,
  .app-shell-body:not([data-page="create"]) .credit-pricing-hero,
  .app-shell-body:not([data-page="create"]) .user-dashboard-head{min-height:0!important;align-items:flex-start!important}
}
@media(max-width:640px){
  :root{--app-v27-gutter:12px;--app-v27-top:18px}
  .app-shell-body:not([data-page="create"]) .account-hero,
  .app-shell-body:not([data-page="create"]) .library-head,
  .app-shell-body:not([data-page="create"]) .credit-pricing-hero,
  .app-shell-body:not([data-page="create"]) .user-dashboard-head{flex-direction:column!important;gap:12px!important;margin-bottom:16px!important}
  .app-shell-body:not([data-page="create"]) .account-hero h1,
  .app-shell-body:not([data-page="create"]) .library-head h1,
  .app-shell-body:not([data-page="create"]) .credit-pricing-hero h1,
  .app-shell-body:not([data-page="create"]) .user-dashboard-head h1,
  .app-shell-body:not([data-page="create"]) .page-heading{font-size:28px!important}
  .app-shell-body:not([data-page="create"]) .account-hero>.btn,
  .app-shell-body:not([data-page="create"]) .library-controls,
  .app-shell-body:not([data-page="create"]) .user-dashboard-head>.btn{width:100%!important}
}

/* v27.1 — cabeçalho reutilizável para páginas que antes começavam em formatos diferentes. */
.app-shell-body:not([data-page="create"]) .app-page-head-v27{
  min-height:72px!important;margin:0 0 20px!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
}
.app-shell-body:not([data-page="create"]) .app-page-kicker-v27{
  display:block!important;margin:0 0 6px!important;font-size:12px!important;line-height:1.2!important;
  letter-spacing:.11em!important;font-weight:800!important;color:var(--primary,#8b5cf6)!important;
}
.app-shell-body:not([data-page="create"]) .app-page-head-v27 h1{
  margin:0!important;font-size:clamp(28px,2.4vw,34px)!important;line-height:1.08!important;
  letter-spacing:-.035em!important;font-weight:800!important;
}
.app-shell-body:not([data-page="create"]) .app-page-head-v27 p{
  margin:7px 0 0!important;max-width:760px!important;color:var(--muted)!important;font-size:14px!important;line-height:1.5!important;
}

/* Carteira antiga agora obedece exatamente o mesmo eixo e ritmo das demais páginas. */
.app-shell-body:not([data-page="create"]) .app-content>.wallet-page{padding-top:var(--app-v27-top)!important}
.app-shell-body[data-page="pricing"] .wallet-hero{
  min-height:72px!important;margin:0 0 20px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
}
.app-shell-body[data-page="pricing"] .wallet-hero h1{margin:3px 0 0!important;font-size:clamp(28px,2.4vw,34px)!important;line-height:1.08!important;letter-spacing:-.035em!important}
.app-shell-body[data-page="pricing"] .wallet-hero p{max-width:760px!important;margin:7px 0 0!important;font-size:14px!important;line-height:1.5!important}
.app-shell-body[data-page="pricing"] .wallet-balance-card{min-width:190px!important;padding:14px 16px!important;border-radius:16px!important}

/* Explore logado: o destaque vira conteúdo da página, não o cabeçalho principal. */
.app-shell-body[data-page="explore"] .app-page-head-v27 + .explore-hero{margin-top:0!important}
.app-shell-body[data-page="explore"] .discovery-hero-copy .explore-title{font-size:clamp(26px,3.2vw,42px)!important}

/* Páginas de projeto/áudio preservam seu layout, mas começam no mesmo eixo superior. */
.app-shell-body:not([data-page="create"]) .audio-project-page,
.app-shell-body:not([data-page="create"]) .project-page,
.app-shell-body:not([data-page="create"]) .project-shell{padding-top:var(--app-v27-top)!important}

@media(max-width:640px){
  .app-shell-body:not([data-page="create"]) .app-page-head-v27{min-height:0!important;align-items:flex-start!important;flex-direction:column!important;gap:12px!important;margin-bottom:16px!important}
  .app-shell-body:not([data-page="create"]) .app-page-head-v27 h1{font-size:28px!important}
  .app-shell-body:not([data-page="create"]) .app-page-head-v27>.btn{width:100%!important}
  .app-shell-body[data-page="pricing"] .wallet-hero{min-height:0!important;align-items:stretch!important;flex-direction:column!important;gap:12px!important}
  .app-shell-body[data-page="pricing"] .wallet-hero h1{font-size:28px!important}
  .app-shell-body[data-page="pricing"] .wallet-balance-card{width:100%!important;min-width:0!important}
}

/* v27.2 — componente único de topo nas páginas do usuário. */
.app-page-head-actions-v27{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;flex-wrap:wrap!important}
.app-page-head-actions-v27 .btn{min-height:42px!important;padding:9px 14px!important;border-radius:12px!important;font-size:13px!important;white-space:nowrap!important}
.app-page-head-actions-v27 svg{width:16px!important;height:16px!important}
.library-controls-v27{margin:-3px 0 18px!important;display:flex!important;align-items:center!important;gap:9px!important;width:100%!important}
.library-controls-v27 .library-search{flex:1 1 420px!important;max-width:720px!important}
.account-plan-pill-v27{width:max-content!important;margin:-8px 0 16px!important}
.app-shell-body[data-page="referral"] .referral-hero h2{margin:0 0 9px!important;font-size:clamp(22px,2vw,28px)!important;line-height:1.12!important;letter-spacing:-.025em!important}
@media(max-width:640px){.app-page-head-actions-v27{width:100%!important;display:grid!important;grid-template-columns:1fr!important}.app-page-head-actions-v27 .btn{width:100%!important}.library-controls-v27{align-items:stretch!important}.library-controls-v27 .library-search{max-width:none!important;min-width:0!important}.account-plan-pill-v27{width:100%!important;justify-content:center!important}}