/*
 * BeatHelper v17.6.7 — footer surface parity, tighter nav, mobile sheet clearance.
 * Visual-only patch layered after v17.6.6.
 */
:root{
  --bh-v7-surface:rgba(255,255,255,.05);
  --bh-v7-surface-hover:rgba(255,255,255,.072);
  --bh-v7-border:rgba(255,255,255,.09);
  --bh-v7-muted:#92A4BE;
  --bh-v7-danger:#F87171;
}

/* Footer legal controls: same neutral material as the app rail/cards, no blue cast. */
.footer-legal a{
  background:var(--bh-v7-surface)!important;
  border-color:var(--bh-v7-border)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.footer-ico{
  background:var(--bh-v7-surface)!important;
  border-color:var(--bh-v7-border)!important;
  color:var(--bh-v7-muted)!important;
}
.footer-legal a::after{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.09)!important;
  color:var(--bh-v7-muted)!important;
}
@media (hover:hover){
  .footer-legal a:hover{background:var(--bh-v7-surface-hover)!important;border-color:rgba(255,255,255,.12)!important}
  .footer-legal a:hover::after{background:rgba(255,255,255,.075)!important;color:#C6D0DE!important}
}

/* Nav buttons: slightly smaller on both mobile and desktop, rail itself stays unchanged. */
.screen .nav-i{
  min-height:48px!important;
  gap:4px!important;
  padding:7px 4px!important;
  font-size:8.5px!important;
  border-radius:11px!important;
}
.screen .nav-i svg,
.screen .nav-i .crm-glyph{
  width:20px!important;
  height:20px!important;
  flex-basis:20px!important;
}
@media(min-width:768px){
  .screen .nav-i{
    min-height:58px!important;
    gap:6px!important;
    padding:8px 4px!important;
    font-size:8.5px!important;
    border-radius:12px!important;
  }
  .screen .nav-i svg,
  .screen .nav-i .crm-glyph{
    width:21px!important;
    height:21px!important;
    flex-basis:21px!important;
  }
}
@media(min-width:1100px){
  .screen .nav-i{min-height:60px!important;font-size:9px!important}
  .screen .nav-i svg,.screen .nav-i .crm-glyph{width:22px!important;height:22px!important;flex-basis:22px!important}
}

/* Logout icon must remain explicitly red; neutral icon harmonization must not wash it out. */
#profileLogoutButton.profile-logout .profile-item-icon{
  color:var(--bh-v7-danger)!important;
  background:rgba(248,113,113,.075)!important;
  border-color:rgba(248,113,113,.18)!important;
}
#profileLogoutButton.profile-logout .profile-item-icon svg{
  color:var(--bh-v7-danger)!important;
  stroke:currentColor!important;
}

@media(max-width:767px){
  /* Profile summary should read as one compact pair, not two separated islands. */
  .screen[data-page="profile"] .profile-summary-grid{gap:6px!important}
  .screen[data-page="profile"] .profile-summary-grid .profile-plan{margin-top:0!important}

  /*
   * Bottom nav is fixed. Reserve its height for every modal/sheet so sticky actions
   * (artist/folder/language/downloader) can never end up underneath the nav.
   */
  .crm-overlay,
  .profile-settings-overlay{
    padding-bottom:calc(var(--nav-h,74px) + 14px + env(safe-area-inset-bottom))!important;
  }
  .crm-modal,
  .profile-sheet{
    max-height:calc(100dvh - var(--nav-h,74px) - 34px - env(safe-area-inset-bottom))!important;
    scroll-padding-bottom:78px!important;
  }
  .crm-modal-actions,
  .profile-sheet-actions{
    bottom:0!important;
    z-index:5!important;
    padding-bottom:14px!important;
    background:rgba(13,16,22,.985)!important;
    box-shadow:0 -14px 28px rgba(0,0,0,.26)!important;
  }
}