/*
 * HTNS v220 — global premium button system
 * Carries the approved login-button treatment through every page and mode:
 * warm cream/gold surfaces, navy outlines and text, inset gold edging,
 * soft highlights/shadows, clear press/focus states, and semantic variants.
 */

:root{
  --premium-btn-ink:#173b63;
  --premium-btn-icon:#245b87;
  --premium-btn-border:#173b63;
  --premium-btn-gold:#d6b04a;
  --premium-btn-gold-deep:#b98916;
  --premium-btn-top:#fffef9;
  --premium-btn-mid:#faf2da;
  --premium-btn-bottom:#f1dfad;
  --premium-btn-hover-mid:#f8efcf;
  --premium-btn-hover-bottom:#ecd79a;
  --premium-btn-pressed-top:#fbf5e5;
  --premium-btn-pressed-bottom:#ead596;
  --premium-btn-shadow:0 8px 18px rgba(34,56,80,.11);
  --premium-btn-shadow-soft:0 4px 11px rgba(34,56,80,.075);
  --premium-btn-inset:inset 0 0 0 2px rgba(214,176,74,.48), inset 0 1px 0 rgba(255,255,255,.98);
  --premium-btn-focus:rgba(62,125,173,.34);
  --premium-btn-danger:#9b3947;
  --premium-btn-danger-border:#a84b57;
  --premium-btn-danger-top:#fffdfb;
  --premium-btn-danger-mid:#fbeceb;
  --premium-btn-danger-bottom:#efcfd1;
}

/* --------------------------------------------------------------------------
   Shared premium construction for true buttons throughout the app.
   Component dimensions and layouts remain under their existing styles.
   -------------------------------------------------------------------------- */
#gate button,
#mainApp button,
#modal button,
#mainApp #view-home button,
#mainApp #view-schedule button,
#mainApp #view-events button,
#mainApp #view-albums button,
#mainApp #view-profile button,
#mainApp .htns-songbook-screen button{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1.35px solid var(--premium-btn-border) !important;
  border-radius:14px !important;
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,var(--premium-btn-top) 0%,var(--premium-btn-mid) 56%,var(--premium-btn-bottom) 100%) !important;
  color:var(--premium-btn-ink) !important;
  box-shadow:var(--premium-btn-inset),var(--premium-btn-shadow-soft) !important;
  text-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform .11s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease,filter .14s ease !important;
}

#gate button svg,
#mainApp button svg,
#modal button svg,
#mainApp .htns-songbook-screen button svg{
  color:inherit;
}

@media (hover:hover) and (pointer:fine){
  #gate button:not(:disabled):hover,
  #mainApp button:not(:disabled):hover,
  #modal button:not(:disabled):hover,
  #mainApp .htns-songbook-screen button:not(:disabled):hover{
    background:
      radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,1),rgba(255,255,255,0) 72%),
      linear-gradient(180deg,#fffefb 0%,var(--premium-btn-hover-mid) 56%,var(--premium-btn-hover-bottom) 100%) !important;
    border-color:#12365c !important;
    box-shadow:inset 0 0 0 2px rgba(214,176,74,.58),inset 0 1px 0 rgba(255,255,255,1),0 10px 21px rgba(34,56,80,.13) !important;
  }
}

#gate button:not(:disabled):active,
#mainApp button:not(:disabled):active,
#modal button:not(:disabled):active,
#mainApp .htns-songbook-screen button:not(:disabled):active{
  transform:translateY(1px) scale(.992) !important;
  background:linear-gradient(180deg,var(--premium-btn-pressed-top) 0%,var(--premium-btn-pressed-bottom) 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(214,176,74,.64),inset 0 2px 5px rgba(23,59,99,.08),0 3px 8px rgba(34,56,80,.07) !important;
}

#gate button:focus-visible,
#mainApp button:focus-visible,
#modal button:focus-visible,
#mainApp .htns-songbook-screen button:focus-visible{
  outline:3px solid var(--premium-btn-focus) !important;
  outline-offset:2px !important;
}

#gate button:disabled,
#mainApp button:disabled,
#modal button:disabled,
#mainApp .htns-songbook-screen button:disabled,
#gate button[aria-disabled="true"],
#mainApp button[aria-disabled="true"],
#modal button[aria-disabled="true"]{
  opacity:.5 !important;
  filter:saturate(.5) !important;
  cursor:not-allowed !important;
  box-shadow:inset 0 0 0 1px rgba(214,176,74,.28),inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* --------------------------------------------------------------------------
   Primary/affirmative buttons use a slightly richer gold finish while keeping
   the same premium construction.
   -------------------------------------------------------------------------- */
#gate .install-cta,
#gate #btnInstallApp,
#mainApp .btn-gold,
#mainApp .btn-ok,
#mainApp .btn-save-all,
#mainApp button.primary,
#mainApp button[class*="-save"],
#mainApp button[class*="-add"],
#mainApp button[class*="-confirm"],
#mainApp .schedule-edit-hero-btn,
#mainApp .power-check-power,
#mainApp .pwr-btn.off,
#mainApp #view-albums .htns-songbook-primary-btn,
#mainApp #view-albums .htns-songbook-mini-btn.primary,
#mainApp #view-albums .htns-songbook-live-btn.on,
#mainApp #view-albums .resource-preach-save,
#modal .btn-gold,
#modal .btn-ok,
#modal .btn-save-all,
#modal button.primary,
#modal button[class*="-save"],
#modal button[class*="-add"],
#modal button[class*="-confirm"]{
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.99),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#fffef7 0%,#f8edc8 50%,#e5c66f 100%) !important;
  color:var(--premium-btn-ink) !important;
  border-color:#173b63 !important;
  box-shadow:inset 0 0 0 2px rgba(197,151,35,.56),inset 0 1px 0 rgba(255,255,255,.98),0 9px 19px rgba(99,74,18,.12) !important;
}

/* Conventional navy classes now receive the approved cream/gold treatment too. */
#gate .btn-navy,
#gate .btn-guest,
#mainApp .btn-navy,
#mainApp .btn-guest,
#mainApp .btn-navy-gold,
#mainApp .pwr-btn,
#mainApp .assignment-hero .actions .btn,
#modal .btn-navy,
#modal .btn-guest,
#modal .btn-navy-gold{
  color:var(--premium-btn-ink) !important;
}

/* --------------------------------------------------------------------------
   Destructive actions retain unmistakable red semantics with the same depth,
   inset edge, radius, and press behavior.
   -------------------------------------------------------------------------- */
#mainApp .btn-no,
#mainApp button.danger,
#mainApp button.delete,
#mainApp button.del,
#mainApp button[class*="delete"],
#mainApp button[class*="remove"],
#mainApp #confirmDelBtn,
#mainApp #view-albums .resource-preach-remove,
#mainApp #view-albums .htns-songbook-mini-btn.danger,
#mainApp #view-albums .htns-songbook-live-btn.danger,
#modal .btn-no,
#modal button.danger,
#modal button.delete,
#modal button.del,
#modal button[class*="delete"],
#modal button[class*="remove"],
#modal #confirmDelBtn{
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,var(--premium-btn-danger-top) 0%,var(--premium-btn-danger-mid) 55%,var(--premium-btn-danger-bottom) 100%) !important;
  color:var(--premium-btn-danger) !important;
  border-color:var(--premium-btn-danger-border) !important;
  box-shadow:inset 0 0 0 2px rgba(195,91,101,.22),inset 0 1px 0 rgba(255,255,255,.98),0 6px 14px rgba(113,38,48,.08) !important;
}

@media (hover:hover) and (pointer:fine){
  #mainApp :is(.btn-no,button.danger,button.delete,button.del,button[class*="delete"],button[class*="remove"]):not(:disabled):hover,
  #modal :is(.btn-no,button.danger,button.delete,button.del,button[class*="delete"],button[class*="remove"]):not(:disabled):hover{
    background:linear-gradient(180deg,#fffdfb 0%,#f8e3e2 54%,#e7bcc0 100%) !important;
    border-color:#963f4a !important;
    color:#8f3140 !important;
    box-shadow:inset 0 0 0 2px rgba(195,91,101,.28),inset 0 1px 0 rgba(255,255,255,.98),0 8px 17px rgba(113,38,48,.10) !important;
  }
}
#mainApp :is(.btn-no,button.danger,button.delete,button.del,button[class*="delete"],button[class*="remove"]):not(:disabled):active,
#modal :is(.btn-no,button.danger,button.delete,button.del,button[class*="delete"],button[class*="remove"]):not(:disabled):active{
  background:linear-gradient(180deg,#f8e8e7 0%,#dfb4b9 100%) !important;
  color:#872e3c !important;
  border-color:#963f4a !important;
}

/* --------------------------------------------------------------------------
   Login: all three choices now use the exact same premium visual language.
   -------------------------------------------------------------------------- */
#gate .panel .htns-songbook-offline-entry,
#gate #htnsSongbookOfflineEntry,
#gate .login-offline-songbook-btn,
#gate #btnOpenOfflineSongbook,
#gate #btnInstallApp,
#gate .install-banner-actions button,
#gate .install-platform-actions button{
  border:1.5px solid var(--premium-btn-border) !important;
  background:
    radial-gradient(260px 68px at 50% -8%,rgba(255,255,255,.99),rgba(255,255,255,0) 74%),
    linear-gradient(180deg,var(--premium-btn-top) 0%,var(--premium-btn-mid) 56%,var(--premium-btn-bottom) 100%) !important;
  color:var(--premium-btn-ink) !important;
  box-shadow:var(--premium-btn-inset),var(--premium-btn-shadow) !important;
}

#gate .panel .htns-songbook-offline-entry,
#gate #htnsSongbookOfflineEntry{
  min-height:50px !important;
  border-radius:17px !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
}

#gate .panel .htns-songbook-offline-entry svg,
#gate #htnsSongbookOfflineEntry svg{
  color:var(--premium-btn-icon) !important;
  stroke:currentColor !important;
  fill:none !important;
}

#gate #btnInstallApp{
  color:var(--premium-btn-ink) !important;
}
#gate #btnInstallApp svg{
  color:var(--premium-btn-icon) !important;
}

/* --------------------------------------------------------------------------
   Header icon controls and the signed-in language button.
   -------------------------------------------------------------------------- */
#mainApp .top .icon-btn,
#mainApp .top #btnLang,
#mainApp .top #btnFeedback,
#mainApp .top #btnBell,
#mainApp .top #btnGuestLogout{
  background:
    radial-gradient(72px 48px at 50% -8%,rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#fffef9 0%,#f8efd5 58%,#ead7a4 100%) !important;
  color:var(--premium-btn-ink) !important;
  border-color:var(--premium-btn-border) !important;
  box-shadow:inset 0 0 0 1.5px rgba(214,176,74,.46),inset 0 1px 0 rgba(255,255,255,.98),0 5px 12px rgba(34,56,80,.08) !important;
}

/* --------------------------------------------------------------------------
   Bottom navigation stays spatially light; the selected destination receives
   a premium gold pill treatment rather than turning every tab into a box.
   -------------------------------------------------------------------------- */
#mainApp .tabs button,
body.guest-mode #mainApp .tabs button,
body.view-only-mode #mainApp .tabs button{
  border-color:rgba(214,176,74,.38) !important;
  background:
    radial-gradient(110px 42px at 50% -12%,rgba(255,255,255,.88),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(255,254,249,.88) 0%,rgba(247,237,207,.78) 100%) !important;
  color:#5f7388 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 2px 7px rgba(34,56,80,.045) !important;
  transform:none !important;
}
#mainApp .tabs button:hover,
body.guest-mode #mainApp .tabs button:hover,
body.view-only-mode #mainApp .tabs button:hover{
  background:linear-gradient(180deg,#fffef9 0%,#f2dfaa 100%) !important;
  border-color:rgba(23,59,99,.48) !important;
  box-shadow:inset 0 0 0 1px rgba(214,176,74,.36),inset 0 1px 0 rgba(255,255,255,.96),0 3px 9px rgba(34,56,80,.06) !important;
}
#mainApp .tabs button.on,
body.guest-mode #mainApp .tabs button.on,
body.view-only-mode #mainApp .tabs button.on{
  background:
    radial-gradient(120px 46px at 50% -12%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#fffdf6 0%,#f6eac6 58%,#e7ce87 100%) !important;
  color:var(--premium-btn-ink) !important;
  border-color:rgba(23,59,99,.72) !important;
  box-shadow:inset 0 0 0 1.5px rgba(214,176,74,.45),inset 0 1px 0 rgba(255,255,255,.98),0 4px 10px rgba(34,56,80,.07) !important;
}

/* --------------------------------------------------------------------------
   Segment controls, filters, chips, and calendar controls.
   -------------------------------------------------------------------------- */
#mainApp .seg button,
#mainApp .simple-team-tab,
#mainApp .media-resource-tab,
#mainApp .worship-resource-tab,
#mainApp #view-albums .htns-songbook-tab,
#mainApp #view-albums .htns-songbook-chip,
#mainApp .week button,
#mainApp .cal button,
#modal .app-date-picker-day,
#modal .app-date-picker-action{
  box-shadow:inset 0 0 0 1.25px rgba(214,176,74,.42),inset 0 1px 0 rgba(255,255,255,.96),0 3px 8px rgba(34,56,80,.055) !important;
}

#mainApp .seg button.on,
#mainApp .simple-team-tab.on,
#mainApp .simple-team-tab[aria-selected="true"],
#mainApp .media-resource-tab.on,
#mainApp .worship-resource-tab.on,
#mainApp #view-albums .htns-songbook-tab.on,
#mainApp #view-albums .htns-songbook-chip.on,
#mainApp .week button.on,
#mainApp .cal button.on,
#mainApp .cal button.today,
#modal .app-date-picker-day.selected,
#modal .app-date-picker-day.today,
#modal .app-date-picker-action.today{
  background:
    radial-gradient(120px 48px at 50% -8%,rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#fffef6 0%,#f6e9be 55%,#dfbd5c 100%) !important;
  color:var(--premium-btn-ink) !important;
  border-color:var(--premium-btn-border) !important;
  box-shadow:inset 0 0 0 1.5px rgba(190,143,24,.5),inset 0 1px 0 rgba(255,255,255,.98),0 5px 12px rgba(73,56,18,.08) !important;
}

/* --------------------------------------------------------------------------
   Structural full-row buttons remain integrated with their parent card while
   retaining premium hover/focus feedback on the visible component surface.
   -------------------------------------------------------------------------- */
#mainApp #view-home .home-next-event-main,
#mainApp #view-schedule .schedule-team-toggle,
#mainApp #view-albums .htns-songbook-row-main,
#mainApp #view-albums .htns-songbook-row-side,
#mainApp #view-profile .roster-person-main,
#mainApp #view-profile .member-role-head-v152{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
#mainApp #view-home .home-next-event-main:active,
#mainApp #view-schedule .schedule-team-toggle:active,
#mainApp #view-albums .htns-songbook-row-main:active,
#mainApp #view-albums .htns-songbook-row-side:active,
#mainApp #view-profile .roster-person-main:active,
#mainApp #view-profile .member-role-head-v152:active{
  transform:none !important;
  background:rgba(214,176,74,.075) !important;
}

/* Full-card/list-row buttons use the premium surface without changing layout. */
#mainApp .home-quick,
#mainApp .simple-worship-songs-toggle,
#mainApp .roster-toggle,
#mainApp .role-manager-toggle,
#mainApp #view-events .event-page-card,
#mainApp #view-albums .htns-songbook-offline-catalog>button,
#mainApp #view-albums .htns-songbook-offline-tools>button,
#mainApp .htns-songbook-screen .htns-songbook-offline-catalog>button,
#mainApp .htns-songbook-screen .htns-songbook-offline-tools>button{
  border-radius:16px !important;
  box-shadow:inset 0 0 0 1.5px rgba(214,176,74,.38),inset 0 1px 0 rgba(255,255,255,.98),0 6px 15px rgba(34,56,80,.075) !important;
}

/* Compact icon actions retain their original dimensions. */
#mainApp .icon-btn,
#mainApp .me-icon-btn,
#mainApp .me-power-btn,
#mainApp .roster-mini-btn,
#mainApp .member-mini-action,
#mainApp .resource-preach-edit,
#mainApp .resource-preach-remove,
#mainApp .resource-announcement-action,
#mainApp .resource-note-action,
#mainApp .resource-library-remove,
#mainApp .song-row-remove,
#mainApp .feedback-photo-remove,
#mainApp .notif-pop-close,
#mainApp .chat-close,
#modal .icon-btn,
#modal .app-date-picker-day{
  border-radius:12px !important;
}

/* Switches use matching gold/navy cues even though they are not buttons. */
#mainApp .toggle-ui,
#modal .toggle-ui{
  background:#e7dfcf !important;
  border:1px solid rgba(23,59,99,.26) !important;
  box-shadow:inset 0 1px 3px rgba(34,56,80,.08) !important;
}
#mainApp .toggle input:checked + .toggle-ui,
#modal .toggle input:checked + .toggle-ui{
  background:linear-gradient(180deg,#f1d77d 0%,#d6b04a 100%) !important;
  border-color:#173b63 !important;
}
#mainApp .toggle input:checked + .toggle-ui:before,
#modal .toggle input:checked + .toggle-ui:before{
  background:#173b63 !important;
}

/* --------------------------------------------------------------------------
   Dark mode: the same premium construction translated into deep navy surfaces
   with gold edges and readable warm text.
   -------------------------------------------------------------------------- */
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"]{
  --premium-btn-ink:#f1df9a;
  --premium-btn-icon:#efd273;
  --premium-btn-border:#bfa047;
  --premium-btn-top:#2d4353;
  --premium-btn-mid:#23394a;
  --premium-btn-bottom:#172e40;
  --premium-btn-hover-mid:#2b4355;
  --premium-btn-hover-bottom:#20394c;
  --premium-btn-pressed-top:#1f3547;
  --premium-btn-pressed-bottom:#14293a;
  --premium-btn-shadow:0 8px 18px rgba(0,0,0,.24);
  --premium-btn-shadow-soft:0 4px 11px rgba(0,0,0,.2);
  --premium-btn-inset:inset 0 0 0 2px rgba(223,189,88,.28),inset 0 1px 0 rgba(255,255,255,.1);
  --premium-btn-focus:rgba(239,210,115,.44);
}

[data-theme="dark"] #gate button,
[data-theme="dark"] #mainApp button,
[data-theme="dark"] #modal button,
[data-theme="dark"] #mainApp #view-home button,
[data-theme="dark"] #mainApp #view-schedule button,
[data-theme="dark"] #mainApp #view-events button,
[data-theme="dark"] #mainApp #view-albums button,
[data-theme="dark"] #mainApp #view-profile button,
[data-theme="dark"] #mainApp .htns-songbook-screen button{
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.10),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,var(--premium-btn-top) 0%,var(--premium-btn-mid) 56%,var(--premium-btn-bottom) 100%) !important;
  color:var(--premium-btn-ink) !important;
  border-color:var(--premium-btn-border) !important;
  box-shadow:var(--premium-btn-inset),var(--premium-btn-shadow-soft) !important;
}

[data-theme="dark"] #mainApp button.primary,
[data-theme="dark"] #mainApp button[class*="-save"],
[data-theme="dark"] #mainApp button[class*="-add"],
[data-theme="dark"] #mainApp button[class*="-confirm"],
[data-theme="dark"] #modal button.primary,
[data-theme="dark"] #modal button[class*="-save"],
[data-theme="dark"] #modal button[class*="-add"],
[data-theme="dark"] #modal button[class*="-confirm"],
[data-theme="dark"] #mainApp .power-check-power,
[data-theme="dark"] #mainApp .pwr-btn.off{
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.13),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#584c29 0%,#443a20 56%,#302b1c 100%) !important;
  color:#f4da7b !important;
  border-color:#c5a84d !important;
  box-shadow:inset 0 0 0 2px rgba(223,189,88,.31),inset 0 1px 0 rgba(255,255,255,.09),0 7px 16px rgba(0,0,0,.2) !important;
}

[data-theme="dark"] #mainApp button.danger,
[data-theme="dark"] #mainApp button.delete,
[data-theme="dark"] #mainApp button.del,
[data-theme="dark"] #mainApp button[class*="delete"],
[data-theme="dark"] #mainApp button[class*="remove"],
[data-theme="dark"] #modal button.danger,
[data-theme="dark"] #modal button.delete,
[data-theme="dark"] #modal button.del,
[data-theme="dark"] #modal button[class*="delete"],
[data-theme="dark"] #modal button[class*="remove"]{
  background:linear-gradient(180deg,#5b3339 0%,#42262c 56%,#2f1d22 100%) !important;
  color:#ffbbc1 !important;
  border-color:#b96a73 !important;
  box-shadow:inset 0 0 0 2px rgba(239,146,155,.14),inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px rgba(0,0,0,.18) !important;
}

[data-theme="dark"] #mainApp .tabs button,
[data-theme="dark"] body.guest-mode #mainApp .tabs button,
[data-theme="dark"] body.view-only-mode #mainApp .tabs button{
  background:linear-gradient(180deg,#2b4253 0%,#1a3244 100%) !important;
  border-color:rgba(191,160,71,.56) !important;
  color:#d9c986 !important;
  box-shadow:inset 0 0 0 1px rgba(223,189,88,.16),inset 0 1px 0 rgba(255,255,255,.07),0 3px 9px rgba(0,0,0,.15) !important;
}
[data-theme="dark"] #mainApp .tabs button.on,
[data-theme="dark"] body.guest-mode #mainApp .tabs button.on,
[data-theme="dark"] body.view-only-mode #mainApp .tabs button.on{
  background:linear-gradient(180deg,#554a2b 0%,#3b3422 100%) !important;
  color:#efd887 !important;
  border-color:#b99c42 !important;
  box-shadow:inset 0 0 0 1.5px rgba(223,189,88,.25),inset 0 1px 0 rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.16) !important;
}

[data-theme="dark"] #mainApp #view-home .home-next-event-main,
[data-theme="dark"] #mainApp #view-schedule .schedule-team-toggle,
[data-theme="dark"] #mainApp #view-albums .htns-songbook-row-main,
[data-theme="dark"] #mainApp #view-albums .htns-songbook-row-side,
[data-theme="dark"] #mainApp #view-profile .roster-person-main,
[data-theme="dark"] #mainApp #view-profile .member-role-head-v152{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   Mobile sizing remains component-driven; only the approved visual treatment
   is normalized so dense editors and schedules do not become taller.
   -------------------------------------------------------------------------- */
@media(max-width:430px){
  #gate button,
  #mainApp button,
  #modal button,
  #mainApp .htns-songbook-screen button{
    border-radius:13px !important;
  }

  #gate .panel .htns-songbook-offline-entry,
  #gate #htnsSongbookOfflineEntry{
    min-height:46px !important;
    border-radius:15px !important;
  }

  #mainApp .home-quick,
  #mainApp .simple-worship-songs-toggle,
  #mainApp .roster-toggle,
  #mainApp .role-manager-toggle,
  #mainApp #view-events .event-page-card,
  #mainApp #view-albums .htns-songbook-offline-catalog>button,
  #mainApp #view-albums .htns-songbook-offline-tools>button{
    border-radius:15px !important;
  }
}

/* Anchor elements that are presented as buttons receive the same treatment. */
#gate a.btn,
#mainApp a.btn,
#modal a.btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1.35px solid var(--premium-btn-border) !important;
  border-radius:14px !important;
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,var(--premium-btn-top) 0%,var(--premium-btn-mid) 56%,var(--premium-btn-bottom) 100%) !important;
  color:var(--premium-btn-ink) !important;
  box-shadow:var(--premium-btn-inset),var(--premium-btn-shadow-soft) !important;
  text-shadow:none !important;
  transition:transform .11s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease,filter .14s ease !important;
}
#gate a.btn:active,
#mainApp a.btn:active,
#modal a.btn:active{
  transform:translateY(1px) scale(.992) !important;
  background:linear-gradient(180deg,var(--premium-btn-pressed-top) 0%,var(--premium-btn-pressed-bottom) 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(214,176,74,.64),inset 0 2px 5px rgba(23,59,99,.08),0 3px 8px rgba(34,56,80,.07) !important;
}

/* Performance-stage Songbook controls remain dark, but use the same gold-edged depth. */
#modal .htns-songbook-viewer.stage-dark button,
#mainApp .htns-songbook-viewer.stage-dark button{
  background:
    radial-gradient(180px 66px at 50% -8%,rgba(255,255,255,.10),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#2d4353 0%,#23394a 56%,#172e40 100%) !important;
  color:#f1df9a !important;
  border-color:#bfa047 !important;
  box-shadow:inset 0 0 0 2px rgba(223,189,88,.28),inset 0 1px 0 rgba(255,255,255,.10),0 4px 11px rgba(0,0,0,.20) !important;
}
#modal .htns-songbook-viewer.stage-dark button.on,
#mainApp .htns-songbook-viewer.stage-dark button.on{
  background:linear-gradient(180deg,#584c29 0%,#443a20 56%,#302b1c 100%) !important;
  color:#f4da7b !important;
  border-color:#c5a84d !important;
}