/* HTNS login reference r66 — match supplied Living Stream login artwork.
   VISUAL ONLY. Existing member/PIN/guest/language/Songbook/install/session logic is unchanged. */
html.login-screen-active,
html.login-screen-active body,
html.htns-theme-v234.login-screen-active[data-theme="light"] body,
html.htns-theme-v234.login-screen-active[data-theme="light"] body #app{
  background:#a7d7fb url('/htns-login-living-stream-r66.jpg') center top/cover no-repeat!important;
}
html.htns-theme-v234.login-screen-active[data-theme="light"] body #app{
  min-height:100dvh!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate{
  --login-ink:#082B63;
  --login-muted:#607796;
  --login-help:"Select your name to continue";
  --login-people:"GUEST";
  --login-language:"LANGUAGE";
  --login-songbook:"SONGBOOK";
  --login-purpose:"";
  box-sizing:border-box!important;
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overflow-anchor:none!important;
  color:var(--login-ink)!important;
  background:#a7d7fb url('/htns-login-living-stream-r66.jpg') center top/100% 100% no-repeat!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate.hidden{display:none!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate:not(.hidden){display:block!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate::before,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate::after{content:none!important;display:none!important;pointer-events:none!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.mark,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>#gTitle,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>#gSub,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>#gHint{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;
  margin:0!important;padding:0!important;border:0!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel{
  position:absolute!important;
  z-index:5!important;
  top:36.95%!important;
  left:4.65%!important;
  right:4.65%!important;
  width:auto!important;
  max-width:none!important;
  height:27.65%!important;
  min-height:0!important;
  margin:0!important;
  padding:4.1% 3.3% 2.6%!important;
  border:1px solid rgba(214,230,243,.70)!important;
  border-radius:clamp(20px,5.6vw,30px)!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(21,71,112,.08)!important;
  overflow:visible!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #lblName{
  display:block!important;margin:0 0 2.3%!important;padding:0!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:0!important;line-height:0!important;font-weight:800!important;
  text-align:center!important;color:transparent!important;text-shadow:none!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #lblName::before{
  content:"Welcome"!important;display:block!important;margin:0!important;
  font-size:clamp(23px,6.1vw,36px)!important;line-height:1.06!important;font-weight:850!important;
  letter-spacing:-.035em!important;color:var(--login-ink)!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #lblName::after{
  content:var(--login-help)!important;display:block!important;margin-top:1.1%!important;
  font-size:clamp(12px,3.2vw,19px)!important;line-height:1.2!important;font-weight:500!important;
  letter-spacing:0!important;color:var(--login-muted)!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #nameWrap.login-select-wrap{
  width:100%!important;max-width:none!important;margin:0 0 2.4%!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger.login-member-trigger{
  box-sizing:border-box!important;position:relative!important;display:flex!important;align-items:center!important;
  justify-content:flex-start!important;width:100%!important;height:26.2%!important;min-height:46px!important;
  gap:3.3%!important;margin:0!important;padding:0 13.5% 0 4.8%!important;background:#FFF!important;
  border:1.5px solid #83C5F3!important;border-radius:14px!important;box-shadow:none!important;
  color:var(--login-ink)!important;font-size:clamp(14px,3.8vw,20px)!important;font-weight:780!important;text-align:left!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger::before{
  content:""!important;display:block!important;width:clamp(22px,6.1vw,32px)!important;height:clamp(22px,6.1vw,32px)!important;
  flex:0 0 clamp(22px,6.1vw,32px)!important;
  background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230A7ACB%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%223.5%22/%3E%3Cpath d=%22M4.5 21v-1.2a7.5 7.5 0 0 1 15 0V21Z%22/%3E%3C/svg%3E') center/contain no-repeat!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger .login-member-trigger-label{
  flex:1 1 auto!important;min-width:0!important;text-align:left!important;line-height:1.2!important;color:var(--login-ink)!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger .login-member-trigger-arrow{
  position:absolute!important;right:2.6%!important;top:50%!important;width:clamp(36px,10.2vw,54px)!important;height:clamp(36px,10.2vw,54px)!important;
  min-width:0!important;border:0!important;border-radius:50%!important;background:#E8F3FF!important;color:#086BC4!important;
  font-size:0!important;transform:translateY(-50%)!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger .login-member-trigger-arrow::after{
  content:""!important;display:block!important;width:10px!important;height:10px!important;margin:-5px auto 0!important;
  border:solid currentColor!important;border-width:0 2.4px 2.4px 0!important;transform:rotate(45deg)!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger[aria-expanded="true"] .login-member-trigger-arrow{
  transform:translateY(-50%) rotate(180deg)!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginMemberTrigger:focus-visible{outline:2px solid #087BC9!important;outline-offset:3px!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginSecondaryActions.login-secondary-actions{
  width:100%!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;height:auto!important;
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:2.4%!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginSecondaryActions>.guest-language-row{display:contents!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnInstallApp.login-install-btn{
  box-sizing:border-box!important;position:relative!important;inset:auto!important;width:100%!important;min-width:0!important;
  height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:7% 4%!important;
  border:1px solid #D6E6F3!important;border-radius:13px!important;box-shadow:none!important;text-shadow:none!important;
  transform:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:4%!important;text-align:center!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest{background:linear-gradient(145deg,#F2F9FF,#E6F4FF)!important;color:#174D85!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar{background:linear-gradient(145deg,#F6EEFF,#EFE3FF)!important;color:#6A21C8!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry{background:linear-gradient(145deg,#EEFFF7,#E2F7EC)!important;color:#0C8A79!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnInstallApp.login-install-btn{background:linear-gradient(145deg,#FFF9EC,#FFF0D5)!important;color:#B46A17!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry.show{display:flex!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn{
  width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;color:inherit!important;box-shadow:none!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn.on{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4%!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn:not(.on),
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar>.login-lang-separator,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .login-lang-chevron{display:none!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest .login-guest-icon,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn .login-lang-icon,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry>svg,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnInstallApp.login-install-btn>svg{
  display:block!important;position:static!important;width:clamp(25px,7.2vw,38px)!important;height:clamp(25px,7.2vw,38px)!important;
  min-width:0!important;flex:0 0 auto!important;color:inherit!important;stroke:currentColor!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest #btnGuestLabel,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn .login-lang-label,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry span{
  position:static!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;
  font:850 clamp(10px,2.8vw,14px)/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.01em!important;text-transform:uppercase!important;color:#0D316B!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest #btnGuestLabel{font-size:0!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest #btnGuestLabel::before{content:var(--login-people)!important;font:inherit!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn .login-lang-label{font-size:0!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar .lang-btn .login-lang-label::before{content:var(--login-language)!important;font:inherit!important;color:#4D1AA8!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest::after,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar::after,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry::after{
  display:block!important;position:static!important;margin:0!important;padding:0!important;background:none!important;
  font:500 clamp(9px,2.4vw,12px)/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  color:#6F7F9C!important;letter-spacing:0!important;text-align:center!important;text-transform:none!important;white-space:nowrap!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnGuest::after{content:"Continue as guest"!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #langBar::after{content:"Choose language"!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #htnsSongbookOfflineEntry::after{content:"Open songbook"!important;}


html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions.login-secondary-actions:not(.install-available),
html.htns-theme-v234.pwa-standalone[data-theme="light"] body #app #gate.gate #loginSecondaryActions.login-secondary-actions,
html.htns-theme-v234.install-unsupported-device[data-theme="light"] body #app #gate.gate #loginSecondaryActions.login-secondary-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnInstallApp.login-install-btn.hidden{display:none!important;}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate #loginSecondaryActions #btnInstallApp.login-install-btn:not(.hidden){display:flex!important;}

html.htns-theme-v234[lang="vi"][data-theme="light"] body #app #gate.gate{
  --login-help:"Chọn tên của bạn để tiếp tục";--login-people:"KHÁCH";--login-language:"NGÔN NGỮ";--login-songbook:"BÀI HÁT";
}
html.htns-theme-v234[data-login-compact="true"][data-theme="light"] body #app #gate.gate>.panel{top:36.95%!important;}
@media(max-width:380px){
  html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel{left:4.65%!important;right:4.65%!important;padding-left:3%!important;padding-right:3%!important;}
  html.htns-theme-v234[data-theme="light"] body #app #gate.gate>.panel #loginSecondaryActions.login-secondary-actions{gap:2%!important;}
}
@media(prefers-reduced-motion:reduce){html.htns-theme-v234[data-theme="light"] body #app #gate.gate *{transition:none!important;animation:none!important;}}