/* 中继版手机端专属样式（在 style.css 之上叠加） */

/* ---- 中继连接状态条 ---- */
#conn { position: sticky; top: 0; z-index: 15; }
.connbar {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.connbar .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.connbar.ok { background: #12241d; color: #8fe6c0; }
.connbar.ok .dot { background: var(--ok); }
.connbar.warn { background: #26200f; color: #f0c98a; }
.connbar.warn .dot { background: var(--med); animation: pulse 1.4s infinite; }
.connbar.bad { background: #2a1618; color: #ffb3b3; }
.connbar.bad .dot { background: var(--high); }
@keyframes pulse { 50% { opacity: .35; } }

/* ---- 配对表单 ---- */
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; font-size: 12px; color: var(--dim);
  margin-bottom: 6px; letter-spacing: .02em;
}
.field input {
  width: 100%; padding: 12px; font-size: 16px; /* 16px 防止 iOS 自动放大 */
  background: #0d1017; color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input::placeholder { color: #56607a; }

.code-input {
  font: 600 24px/1 ui-monospace, Menlo, monospace !important;
  letter-spacing: .34em; text-align: center; text-transform: uppercase;
  padding: 15px 12px !important;
}

.pairmsg {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: #2a1618; color: #ffb3b3; font-size: 13px;
  border: 1px solid #4a2222;
}

/* ---- 顶栏下的状态条不要盖住标题 ---- */
#topbar { position: sticky; top: 0; }