/* HTNS v294 — subtle premium cool-blue system treatment.
   Goal: a refined cooler visual system without changing layout or over-styling. */

html[data-theme="light"]{
  --bg:#EDF4F9;
  --card:#FBFDFF;
  --chip:#EAF1F7;
  --line:#C9D7E4;
  --muted:#6E8195;
  --gold-soft:#EEF4FA;
  --navy:#163150;
  --navy-2:#22476C;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .app{
  background:linear-gradient(180deg,#EFF5FA 0%, #EAF1F7 100%) !important;
}

html[data-theme="light"] .top,
html[data-theme="light"] .hero,
html[data-theme="light"] .gate{
  background:linear-gradient(165deg,#153352 0%, #214A71 100%) !important;
}

html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .sheet,
html[data-theme="light"] .album-card,
html[data-theme="light"] .album-slider,
html[data-theme="light"] .drive-wrap,
html[data-theme="light"] .me-section-card,
html[data-theme="light"] .simple-worship-songs,
html[data-theme="light"] .simple-schedule-card,
html[data-theme="light"] .home-team-card,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .event-card,
html[data-theme="light"] .home-bottom-card,
html[data-theme="light"] .assignment-hero,
html[data-theme="light"] .gold-profile-card,
html[data-theme="light"] .name-wrap,
html[data-theme="light"] .lang-switch{
  background:linear-gradient(180deg,#FCFEFF 0%, #F6FAFD 100%) !important;
  border-color:#CAD8E6 !important;
  box-shadow:0 8px 22px rgba(17,49,80,.05), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

html[data-theme="light"] .field,
html[data-theme="light"] .date-box,
html[data-theme="light"] .name-card,
html[data-theme="light"] .suggest,
html[data-theme="light"] .suggest button,
html[data-theme="light"] .week button,
html[data-theme="light"] .seg,
html[data-theme="light"] .tabs,
html[data-theme="light"] .check,
html[data-theme="light"] .me-date-field,
html[data-theme="light"] .me-availability-item,
html[data-theme="light"] .me-availability-empty,
html[data-theme="light"] .pwr-list-btn,
html[data-theme="light"] .role-manager-toggle,
html[data-theme="light"] .roster-toggle,
html[data-theme="light"] .schedule-team-toggle,
html[data-theme="light"] .worship-song-toggle,
html[data-theme="light"] .simple-worship-songs-toggle{
  background:#F7FBFF !important;
  border-color:#CFDCE8 !important;
}

html[data-theme="light"] .tabs{
  box-shadow:0 -8px 22px rgba(17,49,80,.04) !important;
}

html[data-theme="light"] .icon-btn,
html[data-theme="light"] .me-icon-btn,
html[data-theme="light"] .me-power-btn{
  box-shadow:0 4px 12px rgba(17,49,80,.06) !important;
}

html[data-theme="light"] .btn-soft,
html[data-theme="light"] .btn-glass,
html[data-theme="light"] .pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .b-media,
html[data-theme="light"] .simple-song-count,
html[data-theme="light"] .role-member-count,
html[data-theme="light"] .home-team-live,
html[data-theme="light"] .home-status-chip,
html[data-theme="light"] .home-quick-count{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}

html[data-theme="light"] .b-media{
  background:#E3EEF8 !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] .who,
html[data-theme="light"] .pref-sub,
html[data-theme="light"] .pwr-meta,
html[data-theme="light"] .me-pref-sub,
html[data-theme="light"] .me-power-sub,
html[data-theme="light"] .empty,
html[data-theme="light"] .album-slider-count{
  color:#708399 !important;
}

html[data-theme="light"] .home-section-title,
html[data-theme="light"] .events-section-title,
html[data-theme="light"] .me-section-title,
html[data-theme="light"] .home-bottom-title,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4{
  color:#12375B;
}

html[data-theme="light"] a{
  color:#295C8B;
}

html[data-theme="light"] .toggle-ui,
html[data-theme="light"] [data-theme="dark"] .toggle-ui{
  background:#BFD0E0 !important;
}

html[data-theme="light"] #view-profile .me-pref-icon,
html[data-theme="light"] #view-profile .me-power-icon,
html[data-theme="light"] #view-profile .me-date-icon,
html[data-theme="light"] #view-profile .roster-toggle-icon,
html[data-theme="light"] #view-profile .me-icon-btn,
html[data-theme="light"] #view-profile .me-power-btn{
  background:linear-gradient(180deg,#F6FAFD 0%, #EDF4FA 100%) !important;
  border-color:#D2DEEA !important;
}

/* Keep dark mode intact, with only a tiny polish if the theme is ever used. */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .album-card,
html[data-theme="dark"] .album-slider,
html[data-theme="dark"] .drive-wrap,
html[data-theme="dark"] .me-section-card{
  box-shadow:0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* =========================================================
   LOGIN REFERENCE — VISUAL ONLY, EXACT v294 LOGIN BEHAVIOR
   The working v294 login-critical-repair-v3 picker, member roster, PIN flow,
   Guest Mode, language switch and Offline Songbook JavaScript are untouched.
   ========================================================= */

html[data-theme="light"] #gate.gate{
  padding:max(16px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) !important;
  gap:0 !important;
  justify-content:flex-start !important;
  align-items:center !important;
  color:#173F68 !important;
  background:
    radial-gradient(460px 260px at 50% 0%,rgba(255,255,255,.98),rgba(255,255,255,0) 80%),
    linear-gradient(180deg,#F4F8FC 0%,#EEF5FA 58%,#F7FAFD 100%) !important;
}

html[data-theme="light"] #gate .mark{
  width:104px !important;
  height:104px !important;
  min-width:104px !important;
  min-height:104px !important;
  margin:16px auto 10px !important;
  padding:14px !important;
  border:1.5px solid #AFC5D6 !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] #gate .mark img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

html[data-theme="light"] #gate #gTitle{
  margin:12px 0 2px !important;
  padding:0 !important;
  color:#163150 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(39px,11.5vw,50px) !important;
  line-height:.98 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  text-align:center !important;
  text-shadow:none !important;
}
html[data-theme="light"] #gate #gSub{
  margin:16px 0 27px !important;
  padding:0 !important;
  color:#7890A4 !important;
  font-size:clamp(17px,5.3vw,22px) !important;
  line-height:1.1 !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
  text-align:center !important;
  text-shadow:none !important;
}

html[data-theme="light"] #gate .panel{
  position:relative !important;
  flex:0 0 auto !important;
  width:min(calc(100vw - 24px),390px) !important;
  max-width:390px !important;
  margin:0 auto !important;
  padding:19px 14px 6px !important;
  overflow:visible !important;
  color:#173F68 !important;
  background:linear-gradient(180deg,rgba(252,254,255,.80),rgba(244,249,253,.66)) !important;
  border:1px solid #C5D6E2 !important;
  border-radius:27px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html[data-theme="light"] #gate #lblName{
  display:block !important;
  width:100% !important;
  margin:0 0 15px !important;
  padding:0 !important;
  color:#214E79 !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  text-align:center !important;
}

/* v294 intentionally uses #nameSelect only as a hidden state holder. Keep the
   original contract exactly instead of turning it into a new native picker. */
html[data-theme="light"] #gate .panel #nameWrap.login-select-wrap{
  position:relative !important;
  z-index:30 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:62px !important;
  min-height:62px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
html[data-theme="light"] #gate #nameSelect.login-name-select{
  position:absolute !important;
  inset:auto !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  max-width:1px !important;
  max-height:1px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  visibility:visible !important;
  pointer-events:none !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  transform:none !important;
}

/* This is the exact visible trigger dynamically created by v294. */
html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger{
  position:relative !important;
  inset:auto !important;
  z-index:31 !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) 38px !important;
  align-items:center !important;
  width:100% !important;
  max-width:none !important;
  height:62px !important;
  min-height:62px !important;
  margin:0 !important;
  padding:0 10px !important;
  gap:0 !important;
  color:#1B476F !important;
  background:rgba(255,255,255,.92) !important;
  background-image:none !important;
  border:1.5px solid #AFC3D2 !important;
  border-radius:18px 18px 0 0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94) !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:750 !important;
  letter-spacing:-.01em !important;
  text-align:center !important;
  -webkit-tap-highlight-color:transparent !important;
}
html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger::before{
  content:"" !important;
  display:block !important;
  grid-column:1 !important;
  width:38px !important;
  height:38px !important;
}
html[data-theme="light"] #gate #loginMemberTrigger .login-member-trigger-label{
  grid-column:2 !important;
  min-width:0 !important;
  justify-self:center !important;
  color:#1B476F !important;
  font:inherit !important;
  text-align:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
html[data-theme="light"] #gate #loginMemberTrigger .login-member-trigger-arrow{
  grid-column:3 !important;
  justify-self:end !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  color:#16456F !important;
  background:#F1F6FC !important;
  border:0 !important;
  box-shadow:none !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:800 !important;
}
html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger:focus-visible,
html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger[aria-expanded="true"]{
  border-color:#789DB9 !important;
  outline:2px solid rgba(73,121,157,.16) !important;
  outline-offset:1px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94) !important;
}

/* Keep the proven v294 fixed two-column popup behavior; only reskin it. */
html[data-theme="light"] #loginMemberMenu{
  border:1px solid #C7D8E5 !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.99) !important;
  box-shadow:0 16px 36px rgba(17,49,80,.16) !important;
}
html[data-theme="light"] #loginMemberMenu .login-member-option{
  color:#1B476F !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[data-theme="light"] #loginMemberMenu .login-member-option:active,
html[data-theme="light"] #loginMemberMenu .login-member-option.selected{
  color:#123B67 !important;
  background:#EAF3FA !important;
}

/* One stable three-segment lower row. v294 inserts Offline Songbook
   asynchronously; reserving column 3 from first paint prevents Guest/Language
   from changing size when Songbook becomes available. */
html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions,
html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions.has-offline{
  position:relative !important;
  inset:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr) minmax(0,1.18fr) !important;
  align-items:stretch !important;
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  margin:-1px 0 0 !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden !important;
  color:#173F68 !important;
  background:rgba(255,255,255,.76) !important;
  border:1.5px solid #AFC3D2 !important;
  border-radius:0 0 18px 18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80) !important;
  transform:none !important;
}
html[data-theme="light"] #gate #loginSecondaryActions > .guest-language-row{
  display:contents !important;
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html[data-theme="light"] #gate #loginSecondaryActions #btnGuest,
html[data-theme="light"] #gate #loginSecondaryActions #langBar,
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn,
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  text-shadow:none !important;
}

html[data-theme="light"] #gate #loginSecondaryActions #btnGuest{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 8px !important;
  border-right:1px solid #D4E0E9 !important;
  color:#1B476F !important;
  font-size:13.5px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #btnGuest::after{
  display:none !important;
  content:none !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #btnGuest .login-guest-icon{
  position:static !important;
  display:block !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  color:#347AA5 !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #btnGuest #btnGuestLabel{
  color:#1B476F !important;
  font-weight:500 !important;
  white-space:nowrap !important;
}

html[data-theme="light"] #gate #loginSecondaryActions #langBar{
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
  border-right:1px solid #D4E0E9 !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #langBar > .login-lang-separator{
  display:none !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn{
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:0 6px !important;
  color:#1B476F !important;
  font-size:13.5px !important;
  line-height:1 !important;
  font-weight:700 !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn.on,
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn[aria-pressed="true"]{
  display:flex !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-icon{
  position:static !important;
  display:block !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  color:#347AA5 !important;
  stroke:currentColor !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-label{
  display:block !important;
  min-width:0 !important;
  color:#1B476F !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:13.5px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.015em !important;
  white-space:nowrap !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-chevron{
  position:static !important;
  display:block !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  color:#347AA5 !important;
  stroke:currentColor !important;
}

html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry{
  grid-column:3 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:0 6px !important;
  color:#1B476F !important;
  font-size:13.5px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.015em !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  animation:none !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry.show{
  display:flex !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry svg{
  position:static !important;
  display:block !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  color:#347AA5 !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry span{
  font-size:inherit !important;
  line-height:1 !important;
  min-width:0 !important;
  color:#1B476F !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

html[data-theme="light"] #gate #loginSecondaryActions #btnGuest:hover,
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn:hover,
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry:hover{
  background:rgba(227,240,249,.55) !important;
}
html[data-theme="light"] #gate #loginSecondaryActions #btnGuest:active,
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn:active,
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry:active{
  background:rgba(213,232,244,.68) !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Keep v294's existing install/footer actions intact on the light surface. */
html[data-theme="light"] #gate #btnInstallApp.login-install-btn{
  color:#2E678F !important;
  background:rgba(249,252,255,.72) !important;
  border-color:#C8D8E4 !important;
  box-shadow:none !important;
}
html[data-theme="light"] #gate #gHint{
  color:#8397A8 !important;
  text-shadow:none !important;
}

@media(max-width:390px){
  html[data-theme="light"] #gate.gate{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  html[data-theme="light"] #gate .mark{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    min-height:96px !important;
    margin-top:13px !important;
    border-radius:24px !important;
    padding:13px !important;
  }
  html[data-theme="light"] #gate #gTitle{
    font-size:clamp(37px,11.2vw,45px) !important;
  }
  html[data-theme="light"] #gate #gSub{
    margin-top:14px !important;
    margin-bottom:23px !important;
    font-size:clamp(16px,5vw,19px) !important;
  }
  html[data-theme="light"] #gate .panel{
    width:100% !important;
    padding:17px 12px 6px !important;
    border-radius:25px !important;
  }
  html[data-theme="light"] #gate .panel #nameWrap.login-select-wrap,
  html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger{
    height:60px !important;
    min-height:60px !important;
  }
  html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger{
    grid-template-columns:36px minmax(0,1fr) 36px !important;
    padding:0 9px !important;
    font-size:15.5px !important;
  }
  html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger::before,
  html[data-theme="light"] #gate #loginMemberTrigger .login-member-trigger-arrow{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions,
  html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions.has-offline{
    height:53px !important;
    min-height:53px !important;
    max-height:53px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #btnGuest,
  html[data-theme="light"] #gate #loginSecondaryActions #langBar,
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn,
  html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry{
    height:51px !important;
    min-height:51px !important;
    max-height:51px !important;
  }
}

@media(max-width:350px){
  html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions,
  html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions.has-offline{
    grid-template-columns:minmax(0,1fr) minmax(0,.76fr) minmax(0,1.24fr) !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #btnGuest{
    gap:5px !important;
    padding:0 5px !important;
    font-size:12px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #btnGuest .login-guest-icon,
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-icon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn{
    gap:3px !important;
    padding:0 4px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-label{
    font-size:12px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-chevron{
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry{
    gap:3px !important;
    padding:0 4px !important;
    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry svg{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
  }
}

/* Login outer-outline cleanup: remove only the outer outline around Login. */
/* Visual-only. Keep the panel fill/radius/shadow, inner card and behavior unchanged. */
html[data-theme="light"] #gate .panel{
  border:0 !important;
  outline:0 !important;
}
html[data-theme="light"] #gate #loginMemberTrigger.login-member-trigger{
  border-color:#AFC3D2 !important;
  border-radius:18px 18px 0 0 !important;
  box-shadow:none !important;
}
html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions,
html[data-theme="light"] #gate #loginSecondaryActions.login-secondary-actions.has-offline{
  margin:-1.5px 0 0 !important;
  border-color:#AFC3D2 !important;
  border-radius:0 0 18px 18px !important;
  box-shadow:none !important;
}


/* Login bottom action typography final lock — Guest Mode / ENG / Songbook parity. */
html[data-theme="light"] #gate #loginSecondaryActions #btnGuest,
html[data-theme="light"] #gate #loginSecondaryActions #btnGuest #btnGuestLabel,
html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn,
html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-label,
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry,
html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry > span{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
@media (max-width:390px){
  html[data-theme="light"] #gate #loginSecondaryActions #btnGuest,
  html[data-theme="light"] #gate #loginSecondaryActions #btnGuest #btnGuestLabel,
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .lang-btn,
  html[data-theme="light"] #gate #loginSecondaryActions #langBar .login-lang-label,
  html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry,
  html[data-theme="light"] #gate #loginSecondaryActions #htnsSongbookOfflineEntry.htns-songbook-offline-entry > span{
    font-size:12px !important;
  }
}


/* =========================================================
   HTNS INSTALL APP COMPACT BOTTOM — VISUAL ONLY
   Keep the proven v294 login/install behavior unchanged.
   ========================================================= */
html[data-theme="light"] #gate #btnInstallApp.login-install-btn{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:180px !important;
  max-width:calc(100vw - 32px) !important;
  min-width:0 !important;
  margin:auto auto 4px !important;
  align-self:center !important;
  flex:0 0 auto !important;
  transform:none !important;
}
html[data-theme="light"] #gate #btnInstallApp.login-install-btn:active{
  transform:none !important;
}
html[data-theme="light"] #gate #gHint{
  margin:0 auto !important;
  padding-top:4px !important;
  flex:0 0 auto !important;
}