/* 共用 UI 元件（受測頁與後台共用）：提示訊息、對話框
   顏色沿用各頁 :root 定義的 --acc/--good/--bad…；字級跟隨 --fs（未定義時視為 1）。
   ⚠ 改這個檔＝兩個頁面一起變，請勿在單一頁面另外複製一份樣式。 */

/* ---------- toast 提示（右上滑出、自動消失） ---------- */
#toast-box{position:fixed;top:70px;right:24px;z-index:300;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:10px;
  padding:12px 18px;font-size:calc(13.5px * var(--fs,1));color:var(--tx);
  box-shadow:0 12px 36px rgba(28,54,104,.18);max-width:380px;line-height:1.6;
  transition:opacity .4s,transform .4s;animation:toast-in .28s ease}
.toast.good{border-left-color:var(--good)}
.toast.bad{border-left-color:var(--bad)}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- 對話框（取代瀏覽器原生 confirm / prompt） ---------- */
#dialog-mask{position:fixed;inset:0;z-index:400;background:rgba(24,38,64,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px}
#dialog-mask.hidden{display:none}
.dialog{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 26px 80px rgba(28,54,104,.3);width:460px;max-width:94vw;padding:28px 30px;
  animation:dlg-in .18s ease}
@keyframes dlg-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.dialog h4{margin:0 0 10px;font-size:calc(17px * var(--fs,1));font-weight:600;color:var(--tx)}
.dialog .dlg-msg{margin:0;color:var(--tx2);font-size:calc(13.5px * var(--fs,1));line-height:1.85;white-space:pre-line}
.dialog .dlg-msg b{color:var(--tx)}
.dialog input{width:100%;margin-top:16px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:calc(14.5px * var(--fs,1));background:#fbfcfe;color:var(--tx);font-family:inherit}
.dialog input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,200,.12)}
.dialog input.hidden{display:none}
.dlg-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.dlg-foot button{border-radius:9px;padding:10px 20px;font-size:calc(13.5px * var(--fs,1));cursor:pointer;font-family:inherit}
.dlg-foot .dlg-cancel{border:1px solid var(--line);background:#fff;color:var(--tx2)}
.dlg-foot .dlg-cancel:hover{color:var(--acc);border-color:var(--acc)}
.dlg-foot .dlg-ok{border:0;color:#fff;font-weight:600;letter-spacing:1px;
  background:linear-gradient(135deg,var(--acc),var(--acc2))}
.dlg-foot .dlg-ok:hover{filter:brightness(1.1)}
.dlg-foot .dlg-ok.danger{background:linear-gradient(135deg,#d4494c,#a83336)}