/* Frosted surfaces over a quiet backdrop; lyrics keep their compact layout. */
:root {
  --page: #edf2fa;
  --paper: #f8faff;
  --text: #202c40;
  --quiet: #5d6c82;
  --rule: rgba(94, 120, 159, .19);
  --green: #1764bf;
  --wash: rgba(80, 146, 228, .12);
  --glass: rgba(255, 255, 255, .8);
  --glass-card: rgba(255, 255, 255, .66);
  --glass-edge: rgba(255, 255, 255, .72);
  --glass-highlight: rgba(255, 255, 255, .45);
  --glass-shadow: 0 8px 28px rgba(45, 70, 110, .08), 0 1px 3px rgba(45, 70, 110, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-backdrop: radial-gradient(ellipse at 0% 0%, #dfebf8 0, transparent 60%), radial-gradient(ellipse at 100% 65%, #e8e6f3 0, transparent 65%), linear-gradient(160deg, #f0f6f9, #edf2fa 70%, #e8f0f2);
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
html.dark {
  --page: #111b2a;
  --paper: #172335;
  --text: #eef3fc;
  --quiet: #b1bfd3;
  --rule: rgba(179, 204, 240, .18);
  --green: #91c4ff;
  --wash: rgba(98, 160, 243, .17);
  --glass: rgba(28, 41, 60, .92);
  --glass-card: rgba(31, 44, 62, .78);
  --glass-edge: rgba(188, 216, 255, .14);
  --glass-highlight: rgba(206, 225, 255, .045);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(209, 230, 255, .1);
  --glass-backdrop: radial-gradient(ellipse at 0% 0%, #24364e 0, transparent 65%), radial-gradient(ellipse at 100% 65%, #25283d 0, transparent 65%), linear-gradient(160deg, #172331, #111b2a 75%, #18282f);
}
html { background-color: var(--page); }
body { background: var(--glass-backdrop) !important; }
body::after {
  content: '';
  position: fixed;
  inset: auto 0 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--page);
  pointer-events: none;
  z-index: 60;
}
#app-main, .reading #app-main { background: transparent !important; }
#app > aside, #app-main header, #app-main > nav,
#view-details .reader-pagination, #view-details .reader-toolbar > .reader-settings,
#view-details .reader-back, .reader-menu-panel,
#modal-numpad > div, #modal-setlist-picker > div {
  background: linear-gradient(145deg, var(--glass-highlight), transparent 55%), var(--glass) !important;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
#app > aside { border-top: 0; border-bottom: 0; border-left: 0; }
#app > aside > div { border-color: var(--rule); }
#app-main header { border-top: 0; border-left: 0; border-right: 0; }
.hymn-card, #categories-grid > *, #favorites-grid > *, #setlists-list > *,
#view-about > div, .upload-metadata-card, #upload-song-form > section, .song-block {
  background: linear-gradient(150deg, var(--glass-highlight), transparent 60%), var(--glass-card) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow);
}
.hymn-card:hover { border-color: rgba(65, 130, 215, .4) !important; }
#search-input, #app select, .upload-fields input, .upload-fields textarea, .song-block textarea {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 14px;
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(33, 64, 111, .04);
}
#search-input { border-radius: 24px; }
#search-input::placeholder { color: var(--quiet); }
.nav-btn.is-selected, #topic-chips .chip.active, #topic-chips .bg-gold-500 {
  background: var(--wash) !important; color: var(--green) !important;
  border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-edge);
}
#topic-chips .chip { background: var(--glass-card); border-color: var(--glass-edge); color: var(--quiet); }
#app .bg-gradient-to-tr, .library-heading > button, #upload-submit, #add-chorus-button,
.presentation-buttons #pres-next { background: linear-gradient(150deg, #398ee8, #1966c0); color: #fff; box-shadow: inset 0 1px 0 #ffffff4d, 0 4px 12px #2267bb20; }
.hymn-card > button:first-child > span:first-child { border-radius: 14px; border: 1px solid var(--glass-edge); }
#view-details .reader-toolbar, .reading.reader-controls-hidden #view-details .reader-toolbar { background: transparent; }
#view-details .reader-toolbar > .reader-settings { border-radius: 28px; gap: 0; }
#view-details .reader-settings { color: var(--text); }
#view-details .reader-back, .reading.reader-controls-hidden #view-details .reader-back { border-radius: 24px; padding: 0 12px; }
#view-details .reader-back span {
  max-width: 70px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 220ms var(--motion-ease), opacity 180ms ease;
}
.reading.reader-controls-hidden #view-details .reader-back { gap: 0; }
.reading.reader-controls-hidden #view-details .reader-back span { max-width: 0; opacity: 0; }
.reader-menu-panel {
  border-radius: 20px;
  background: var(--paper) !important;
  border-color: var(--rule);
  box-shadow: 0 16px 40px rgba(8, 20, 40, .28), inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reader-menu-panel button { border-radius: 12px; color: var(--text); font-weight: 500; }
.reader-menu-panel button + button { border-top: 1px solid var(--rule); }
#view-details .reader-pagination { bottom: calc(10px + env(safe-area-inset-bottom)); left: 280px; right: 24px; padding: 4px 8px; border-radius: 30px; }
#view-details .reader-settings, #view-details .reader-pagination {
  transition: opacity 260ms ease, transform 320ms var(--motion-ease), visibility 0s;
}
.reading.reader-controls-hidden #view-details .reader-settings,
.reading.reader-controls-hidden #view-details .reader-pagination {
  transition: opacity 220ms ease, transform 300ms var(--motion-ease), visibility 0s 300ms;
}
.reading.reader-controls-hidden #view-details .reader-settings { transform: translateY(-8px); }
.reading.reader-controls-hidden #view-details .reader-pagination { transform: translateY(18px); }
#detail-hymn-num-badge { border: 1px solid var(--glass-edge); border-radius: 16px; }
#detail-stanzas-container .lyric-chorus { background: var(--wash); border: 1px solid var(--glass-edge); border-left: 3px solid #76a4dd; border-radius: 14px; box-shadow: inset 0 1px 0 var(--glass-edge); }
#toggle-fav-btn { border-radius: 50%; background: var(--glass-card); border: 1px solid var(--glass-edge); }
#modal-numpad, #modal-setlist-picker { background: rgba(12, 27, 47, .3); }
#modal-numpad > div, #modal-setlist-picker > div { border-radius: 28px; }
#modal-presentation { background: var(--glass-backdrop); }
#pres-content.showing-chorus { background: var(--glass-card); border: 1px solid var(--glass-edge); border-radius: 24px; box-shadow: var(--glass-shadow); }
.presentation-buttons button { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 20px; box-shadow: var(--glass-shadow); }
.presentation-buttons #pres-chorus { border-color: var(--glass-edge); color: var(--green); }
#pres-hymn-num { color: var(--green); }
#app-main > nav { left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 28px; height: 68px; padding: 0 6px; }
#app-main > nav > button { min-width: 0; flex: 1; }
#app-main > nav .-mt-5 { margin-top: 0; width: 30px; height: 30px; }
.mobile-nav-btn.is-selected > i { padding: 5px 14px; }
@media (max-width: 767px) {
  #view-details .reader-pagination { left: 12px; right: 12px; padding: 4px 8px; }
  #view-details .reader-toolbar { gap: 6px; }
  #view-details .reader-back { font-size: 12px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #app-main header, #app-main header > div, #app-main header > div > div,
  #view-details .reader-settings, #view-details .reader-pagination { transition: none !important; }
}
/* Opaque fallbacks retain contrast where blur/transparency is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, html.dark { --glass: var(--paper); --glass-card: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, html.dark { --glass: var(--paper); --glass-card: var(--paper); }
  #app > aside, #app-main header, #app-main > nav, .reader-menu-panel,
  #view-details .reader-pagination, #view-details .reader-back, #view-details .reader-settings,
  #modal-numpad > div, #modal-setlist-picker > div { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Header glass has a distinct rim and frosted interior, without washing out text. */
#app-main header {
  background: linear-gradient(125deg, var(--glass-highlight), transparent 65%), var(--glass) !important;
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 28px #1433580d;
}
#app-main header .header-tools {
  border: 1px solid var(--glass-edge);
  border-radius: 25px;
  padding: 4px;
  background: linear-gradient(120deg, var(--glass-highlight), transparent), var(--glass-card);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 3px 10px #0a20340a;
}
#app-main header .header-tools > button { width: 36px; border-radius: 50%; color: var(--text); }
#app-main header .header-tools > div { border: 0; box-shadow: none; background: transparent; }
#app-main header .header-tools select { border-radius: 20px; background: var(--wash) !important; border-color: transparent !important; }
#app-main header #search-input {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: inset 0 2px 4px #132d4e05, 0 1px 0 var(--glass-edge);
}
@media(min-width: 768px) {
  #view-details .reader-toolbar { justify-content: flex-end; }
  #view-details .reader-back { position: fixed; left: 280px; top: 10px; z-index: 25; }
  #app-main header .header-tools { display: none; }
}
@media(max-width: 767px) {
  #content-container { padding-top: 0; }
  #content-container > header {
    position: sticky;
    top: calc(-1 * var(--header-scroll-away, 112px));
    margin: 0 -16px 22px;
    width: calc(100% + 32px);
    padding: 14px 16px 12px;
    border: 0;
    border-bottom: 1px solid var(--glass-edge);
    border-radius: 0 0 24px 24px;
    transition: none;
    z-index: 16;
  }
  #content-container > header > div { gap: 12px; }
  #content-container > header .header-brand { width: 100%; }
  #content-container > header .header-tools { margin: 0; width: 100%; justify-content: space-between; gap: 0; flex-wrap: nowrap; }
  #content-container > header .header-tools > button { flex-shrink: 0; width: 32px; padding: 6px; }
  #content-container > header .header-tools select { max-width: 112px; width: 30%; padding-left: 6px; padding-right: 2px; }
  #content-container > header .header-tools > div { padding-left: 1px; padding-right: 1px; gap: 0; flex-shrink: 0; }
  #content-container > header .header-search { flex-shrink: 0; }
  .reading #content-container > header { display: none; }
}