/* HTNS v302 r97 — compact Install App + Update App recovery controls.
   Loaded after legacy login layers so this row stays visible even when Install App is hidden. */
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  width:100% !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71:has(#btnInstallApp.hidden){
  display:flex !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 :is(#btnInstallApp.login-install-btn,#btnUpdateApp.login-update-btn){
  position:relative !important;
  inset:auto !important;
  display:inline-flex !important;
  flex:0 1 auto !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:auto !important;
  min-width:132px !important;
  max-width:calc(50% - 4px) !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  padding:0 15px !important;
  border-radius:999px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font:800 11px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  box-sizing:border-box !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 #btnInstallApp.login-install-btn{
  border:1px solid #9accec !important;
  background:#f5fbff !important;
  background-image:none !important;
  color:#126fa9 !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 #btnUpdateApp.login-update-btn{
  border:1px solid #c9b8ee !important;
  background:#faf7ff !important;
  background-image:none !important;
  color:#6f42b5 !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 #btnInstallApp.hidden{
  display:none !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 :is(#btnInstallApp,#btnUpdateApp) > svg{
  position:static !important;
  display:block !important;
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  margin:0 !important;
  color:inherit !important;
  stroke:currentColor !important;
  fill:none !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 :is(#btnInstallAppLabel,#btnUpdateAppLabel){
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  clip:auto !important;
  clip-path:none !important;
  overflow:visible !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  font:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
  white-space:nowrap !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 :is(#btnInstallApp,#btnUpdateApp)::before,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 :is(#btnInstallApp,#btnUpdateApp)::after{
  content:none !important;
  display:none !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp:active{
  transform:scale(.98) !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp:focus-visible{
  outline:2px solid #8f66d1 !important;
  outline-offset:2px !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp:disabled{
  opacity:.72 !important;
  cursor:wait !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-checking > svg{
  animation:htnsUpdateSpin .85s linear infinite !important;
}
@keyframes htnsUpdateSpin{to{transform:rotate(360deg)}}
@media(max-width:360px){
  html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71{
    gap:6px !important;
  }
  html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 :is(#btnInstallApp.login-install-btn,#btnUpdateApp.login-update-btn){
    min-width:0 !important;
    flex:1 1 0 !important;
    max-width:none !important;
    padding:0 10px !important;
    font-size:10px !important;
  }
  html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] .htns-login-install-row-r71 #btnInstallApp.hidden + #btnUpdateApp{
    flex:0 0 136px !important;
  }
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate .htns-update-status-r95{
  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;
}

/* r96 seamless update feedback: keep the existing login screen visible at all times. */
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-checking{
  opacity:1 !important;
  cursor:progress !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-checking > svg{
  transform-origin:50% 50% !important;
  animation:htnsUpdateSpin .72s linear infinite !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-done{
  border-color:#9fd9c2 !important;
  background:#f3fbf7 !important;
  color:#18785a !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate .htns-update-status-r95{
  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;
}

/* HTNS v302 r101 — visible completion confirmation for the seamless Update App control. */
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-complete{
  border-color:#84cfad !important;
  background:#ecfaf3 !important;
  color:#147252 !important;
  opacity:1 !important;
  cursor:default !important;
  animation:htnsUpdateCompleteFlash .26s ease-out 1 !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-current{
  border-color:#9fcdb9 !important;
  background:#f1faf6 !important;
  color:#187258 !important;
  opacity:1 !important;
  cursor:default !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-complete > svg,
html.htns-theme-v234[data-theme="light"] body #app #gate.gate[data-login-skin="r71"] #btnUpdateApp.is-current > svg{
  animation:none !important;
  transform:none !important;
}
@keyframes htnsUpdateCompleteFlash{
  0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(33,151,105,.22)}
  65%{transform:scale(1.025);box-shadow:0 0 0 7px rgba(33,151,105,.10)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(33,151,105,0)}
}