/* login modal — bubblegum テーマ版 (broadcaster / admin / org 用)。
 *
 * login-modal.js の <dialog class="livestream-login-modal"> を、他画面と同じ
 * bubblegum の見た目 (白 card + 濃茶インク + ネオンピンク + 太枠 + オフセット影)
 * に合わせる。viewer 側は app.css 内の dark テーマ版をそのまま使うため、この
 * ファイルは bubblegum を読む 3 ページ (broadcaster/admin/org) だけで読み込む。
 * すべて var(--b-*, fallback) で、bubblegum 未ロード時も破綻しない。 */

.livestream-login-modal {
  background: var(--b-card, #ffffff);
  border: var(--b-border, 2.5px solid #4a1f2e);
  border-radius: 20px;
  box-shadow: var(--b-shadow-lg, 5px 5px 0 #4a1f2e);
  color: var(--b-ink, #4a1f2e);
  padding: 28px;
  min-width: min(380px, 90vw);
  max-width: 440px;
  font-family: var(--b-fontT, "Zen Maru Gothic", "M PLUS Rounded 1c", system-ui, sans-serif);
}
.livestream-login-modal::backdrop {
  background: rgba(74, 31, 46, 0.45);
}
.livestream-login-modal h2 {
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 900;
  font-family: var(--b-fontT, sans-serif);
  color: var(--b-pink, #ff2d7a);
  text-align: center;
}

.livestream-login-modal .login-google-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
/* JS は local モードで Google 行を hidden 属性で隠す (firebase モードでのみ外す)。
 * 上の display:flex が UA の [hidden]{display:none} を specificity で上書きしてしまい、
 * local でも Google 行が漏れて表示されていたため、明示的に [hidden] を尊重させる。 */
.livestream-login-modal .login-google-row[hidden] {
  display: none;
}
.livestream-login-modal .login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #ffffff;
  color: #3c4043;
  border: var(--b-border, 2.5px solid #4a1f2e);
  border-radius: 12px;
  box-shadow: var(--b-shadow-sm, 2px 2px 0 #4a1f2e);
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
}
.livestream-login-modal .login-google:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--b-ink, #4a1f2e);
}
.livestream-login-modal .login-google-icon {
  display: inline-flex;
}
.livestream-login-modal .login-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--b-ink3, #b88aa0);
  font-size: 12px;
}
.livestream-login-modal .login-sep::before,
.livestream-login-modal .login-sep::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--b-pinkS, #ffe1ec);
}

.livestream-login-modal .login-email-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.livestream-login-modal .login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.livestream-login-modal .login-field > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--b-ink2, #7e3a55);
}
.livestream-login-modal .login-field input {
  font-size: 14px;
  padding: 10px 12px;
  border: var(--b-border-thin, 1.5px solid #4a1f2e);
  border-radius: 10px;
  background: var(--b-bg, #fff8fb);
  color: var(--b-ink, #4a1f2e);
}
.livestream-login-modal .login-field input:focus {
  outline: none;
  border-color: var(--b-pink, #ff2d7a);
  box-shadow: 0 0 0 3px var(--b-pinkS, #ffe1ec);
}

.livestream-login-modal .login-error {
  color: var(--b-pinkD, #d6075e);
  background: var(--b-pinkS, #ffe1ec);
  border: 1.5px solid var(--b-pinkE, #ffa4c4);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  margin: 0;
}
.livestream-login-modal .login-hint {
  color: var(--b-ink2, #7e3a55);
  background: var(--b-pinkS, #ffe1ec);
  border: 1.5px solid var(--b-pinkE, #ffa4c4);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  margin: 0;
}

.livestream-login-modal .login-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.livestream-login-modal .login-primary {
  background: var(--b-pink, #ff2d7a);
  color: #ffffff;
  border: var(--b-border, 2.5px solid #4a1f2e);
  border-radius: 12px;
  box-shadow: var(--b-shadow-sm, 2px 2px 0 #4a1f2e);
  padding: 10px 18px;
  font-weight: 900;
  cursor: pointer;
}
.livestream-login-modal .login-primary:hover:not(:disabled) {
  background: var(--b-pinkD, #d6075e);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--b-ink, #4a1f2e);
}
.livestream-login-modal .login-secondary {
  background: var(--b-card, #ffffff);
  color: var(--b-pinkD, #d6075e);
  border: var(--b-border, 2.5px solid #4a1f2e);
  border-radius: 12px;
  box-shadow: var(--b-shadow-sm, 2px 2px 0 #4a1f2e);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}
.livestream-login-modal .login-secondary:hover:not(:disabled) {
  background: var(--b-pinkS, #ffe1ec);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--b-ink, #4a1f2e);
}
.livestream-login-modal .login-link {
  background: none;
  border: none;
  color: var(--b-ink3, #b88aa0);
  padding: 6px 8px;
  margin-left: auto;
  cursor: pointer;
}
.livestream-login-modal .login-link:hover:not(:disabled) {
  color: var(--b-pink, #ff2d7a);
  text-decoration: underline;
}