/* Fixed84 — clean J1 app icon and restore landing action contrast */
.join-card-title .brand-mark,
.brand-j-logo{
  background-color:transparent!important;
  background-image:url("j1-reference-app-icon.png?v=fixed84")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:hidden!important;
}
.join-card-title .brand-mark{
  border-radius:12px!important;
}
.brand-j-logo{
  border-radius:10px!important;
}
.contact-mascot,
.jclass-splash-logo{
  content:url("j1-reference-app-icon.png?v=fixed84")!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* The landing actions must stay legible regardless of inherited theme variables. */
.join-card .mode-panel > button.primary,
#joinForm > button.primary,
#adminLoginForm > button.primary,
#createRoomForm > button.primary{
  min-height:48px!important;
  border:1px solid #1766c2!important;
  background:linear-gradient(135deg,#2489ee 0%,#1768cf 58%,#1055b4 100%)!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 1px 1px rgba(0,0,0,.18)!important;
  box-shadow:0 10px 24px rgba(23,104,207,.27)!important;
}
.join-card .mode-panel > button.primary:hover,
#joinForm > button.primary:hover,
#adminLoginForm > button.primary:hover,
#createRoomForm > button.primary:hover{
  background:linear-gradient(135deg,#3198ff 0%,#1973dc 58%,#115abf 100%)!important;
  border-color:#0f5cb8!important;
  color:#fff!important;
  filter:none!important;
  box-shadow:0 13px 29px rgba(23,104,207,.34)!important;
}
.join-card .mode-panel > button.primary:active,
#joinForm > button.primary:active,
#adminLoginForm > button.primary:active,
#createRoomForm > button.primary:active{
  background:#155fbd!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(23,104,207,.24)!important;
}
html[data-theme="dark"] .join-card .mode-panel > button.primary,
html[data-theme="dark"] #joinForm > button.primary,
html[data-theme="dark"] #adminLoginForm > button.primary,
html[data-theme="dark"] #createRoomForm > button.primary{
  border-color:#2b8df1!important;
  background:linear-gradient(135deg,#278eea,#1669ca)!important;
  color:#fff!important;
  box-shadow:0 11px 28px rgba(25,113,222,.30)!important;
}