/* 彩虹橋頁面內的通知設定區塊（編輯卡片視窗／建立完成畫面）＋ 視窗半透明處理
   獨立一個檔案：bridge.css 本機有別的對話尚未上線的改動，不能整檔上傳，所以這裡的樣式不放進去。
   載入順序在 bridge.css 之後，同特異度的規則靠順序覆蓋。 */

/* ── 視窗（建立／編輯卡片）半透明（站長 2026-11-09）：背後的彩虹橋牆隱約透出來，加一層模糊讓文字仍清楚 ── */
.br-create { background: rgba(3, 6, 16, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.br-create-box {
  background: rgba(14, 26, 58, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}
.br-create-head {
  background: rgba(14, 26, 58, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (max-width: 640px) {
  /* 手機是全螢幕面板：整個面板半透明，牆在後面隱約可見 */
  .br-create { background: rgba(8, 14, 34, 0.5); }
  .br-create-box { background: rgba(14, 26, 58, 0.8); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* 不支援模糊的瀏覽器：退回幾乎不透明，避免背景干擾文字 */
  .br-create { background: rgba(3, 6, 16, 0.82); }
  .br-create-box, .br-create-head { background: rgba(14, 26, 58, 0.96); }
}

/* ── 通知區塊 ── */
.br-notify {
  margin: 0 0 1.1rem; padding: 1rem 1.1rem; border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--br-card-line);
}
.br-notify-title {
  display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.3rem;
  font-size: 0.98rem; font-weight: 600; color: var(--br-gold-soft);
}
.br-notify-title .material-icons { font-size: 1.15rem; }
.br-notify-note { margin: 0 0 0.8rem; font-size: 0.8rem; line-height: 1.65; color: var(--br-text-dim); }
.br-nrow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--br-card-line); }
.br-nrow-tg { align-items: flex-start; flex-wrap: wrap; }
.br-nlabel { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; color: var(--br-text); }
.br-nlabel .material-icons { font-size: 1.1rem; color: var(--br-text-dim); }

.br-switch { position: relative; flex: 0 0 auto; width: 2.9rem; height: 1.7rem; cursor: pointer; }
.br-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.br-switch-ui { position: absolute; inset: 0; border-radius: 1rem; background: rgba(255, 255, 255, 0.22); transition: background 0.2s; pointer-events: none; }
.br-switch-ui::before { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.br-switch input:checked + .br-switch-ui { background: var(--br-gold); }
.br-switch input:checked + .br-switch-ui::before { transform: translateX(1.2rem); }
.br-switch input:disabled { cursor: not-allowed; }
.br-switch input:disabled + .br-switch-ui { opacity: 0.5; }
.br-switch input:focus-visible + .br-switch-ui { outline: none; }

.br-ntg { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-width: 100%; }
.br-ntg-status { font-size: 0.85rem; color: var(--br-gold-soft); }
.br-ntg-status.is-warn { color: #ffb347; }
.br-ntg-btn {
  display: inline-block; border: 0; border-radius: 0.6rem; padding: 0.55rem 1rem; font: inherit; font-size: 0.9rem;
  background: var(--br-gold); color: #1a1405; cursor: pointer; text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.br-ntg-btn:hover { background: var(--br-gold-soft); color: #1a1405; }
.br-ntg-btn.is-ghost { background: rgba(255, 255, 255, 0.12); color: var(--br-text); }
.br-ntg-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.2); color: var(--br-text); }
.br-ntg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.br-ntg-btn:focus, .br-ntg-btn:focus-visible { outline: none; }
.br-ntg-pending {
  box-sizing: border-box; max-width: 100%; padding: 0.8rem 0.9rem; border-radius: 0.7rem; background: rgba(255, 255, 255, 0.07);
  font-size: 0.82rem; line-height: 1.65; color: var(--br-text-dim); display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem;
}
@media (max-width: 640px) {
  .br-nrow-tg { flex-direction: column; align-items: stretch; }
  .br-ntg { align-items: flex-start; }
}