* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #0f1115;
  color: #e8e8ea;
}
.hidden { display: none !important; }

/* ---------- 登录卡片 ---------- */
.auth-mask {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2740, #0f1115);
  z-index: 50;
}
.auth-card {
  width: 340px; max-width: 92vw;
  background: #171a21; border: 1px solid #2a2f3a; border-radius: 14px;
  padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.auth-title { font-size: 20px; font-weight: 700; text-align: center; }
.auth-sub { font-size: 12px; color: #9aa3b2; text-align: center; margin: 6px 0 18px; }
.auth-input {
  width: 100%; padding: 11px 12px; margin-bottom: 10px;
  background: #0f1218; border: 1px solid #2a2f3a; border-radius: 9px;
  color: #e8e8ea; font-size: 14px; outline: none;
}
.auth-input:focus { border-color: #4f8cff; }
.auth-row { display: flex; gap: 8px; }
.auth-row .auth-input { flex: 1; }
.auth-code {
  white-space: nowrap; padding: 0 12px; border: 1px solid #2a2f3a; border-radius: 9px;
  background: #1d2430; color: #cdd6e6; font-size: 13px; cursor: pointer;
}
.auth-code:disabled { opacity: .5; cursor: default; }
.auth-submit {
  width: 100%; padding: 12px; margin-top: 4px; border: none; border-radius: 9px;
  background: linear-gradient(90deg, #4f8cff, #6a5cff); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.auth-submit:hover { filter: brightness(1.08); }
.auth-tip { font-size: 11px; color: #828c9c; text-align: center; margin-top: 12px; line-height: 1.5; }
.auth-chk { display: block; font-size: 12px; color: #cdd6e6; margin: -2px 0 10px; }
.auth-msg { font-size: 12px; min-height: 16px; margin: 2px 0 6px; color: #ff7d7d; text-align: center; }
.auth-msg.ok { color: #5fe09a; }
.dev-code {
  margin-top: 10px; padding: 8px; border-radius: 8px; background: #2a2113;
  color: #ffcf7a; font-size: 13px; text-align: center;
}

/* ---------- 控制面板 ---------- */
#controls {
  max-width: 880px; margin: 14px auto; padding: 14px 16px;
  background: #171a21; border: 1px solid #2a2f3a; border-radius: 12px;
}
.title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.userbox { margin-left: auto; font-size: 12px; color: #9aa3b2; font-weight: 400; }
.userbox a { color: #4f8cff; text-decoration: none; margin-left: 6px; }
.gear { margin-left: 8px; background: #1d2430; border: 1px solid #2a2f3a; color: #cdd6e6; border-radius: 8px; cursor: pointer; padding: 2px 9px; }
.row { display: flex; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.row input[type=text] {
  flex: 1; min-width: 180px; padding: 9px 11px;
  background: #0f1218; border: 1px solid #2a2f3a; border-radius: 9px; color: #e8e8ea; outline: none;
}
.row input:focus { border-color: #4f8cff; }
button { padding: 9px 14px; border: none; border-radius: 9px; background: #4f8cff; color: #fff; font-size: 13px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button.ghost { background: #1d2430; color: #cdd6e6; border: 1px solid #2a2f3a; }
.tools { align-items: center; }
.chk { font-size: 12px; color: #9aa3b2; display: flex; align-items: center; gap: 4px; }
.status { margin-left: auto; font-size: 12px; color: #9aa3b2; padding: 3px 10px; border-radius: 20px; background: #0f1218; }
.status.live { color: #ff7d97; background: #2a1622; }

/* ---------- 弹幕流 ---------- */
#stream { max-width: 880px; margin: 0 auto; padding: 0 8px 30px; }
.msg { padding: 9px 12px; margin: 8px 0; border-radius: 10px; background: #14171e; border: 1px solid #232834; }
.msg.system { background: #1a1f2b; border-color: #2a3140; color: #9aa3b2; font-size: 13px; }
.msg .head { font-size: 12px; color: #9aa3b2; display: flex; align-items: center; gap: 6px; }
.msg .head > span:first-child { color: #cdd6e6; font-weight: 600; }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #23304a; color: #8fb4ff; }
.msg .orig { margin-top: 5px; color: #c9cfdb; font-size: 14px; }
.msg .tr { margin-top: 4px; color: #ffe08a; font-size: 15px; font-weight: 600; }

/* OBS overlay：只显示弹幕流，透明背景 */
body.overlay { background: transparent; }
body.overlay #controls { display: none !important; }
body.overlay #stream { max-width: none; margin: 0; padding: 10px 16px; }
body.overlay .msg { background: rgba(10,12,18,.72); border-color: rgba(255,255,255,.08); backdrop-filter: blur(2px); }

/* ---------- 设置弹窗 ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal-card { width: 420px; max-width: 94vw; max-height: 90vh; overflow: auto; background: #171a21; border: 1px solid #2a2f3a; border-radius: 14px; padding: 20px; }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.lbl { display: block; font-size: 12px; color: #9aa3b2; margin: 10px 0 5px; }
.sel { width: 100%; padding: 9px; background: #0f1218; border: 1px solid #2a2f3a; border-radius: 8px; color: #e8e8ea; }
.keybox { margin-top: 4px; }
.divider { height: 1px; background: #2a2f3a; margin: 16px 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions .auth-submit { margin-top: 0; }

/* ---------- 通知 / 名单 ---------- */
.sec-title { font-size: 13px; color: #8fb4ff; font-weight: 600; margin: 4px 0 10px; }
.count-badge { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; background: #3a1622; color: #ff7d97; border-radius: 10px; padding: 1px 8px; margin-left: 6px; }
.leads-tip { font-size: 12px; color: #9aa3b2; margin-bottom: 12px; }
.leads-list { max-height: 46vh; overflow: auto; border: 1px solid #2a2f3a; border-radius: 9px; }
.leads-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid #232834; font-size: 13px; gap: 8px; }
.leads-row:last-child { border-bottom: none; }
.leads-row .lp { color: #cdd6e6; font-weight: 600; letter-spacing: .5px; }
.leads-row .lt { color: #9aa3b2; }
.leads-row.banned { opacity: .55; }
.leads-row.banned .lp { text-decoration: line-through; }
.leads-row .acts { display: flex; gap: 6px; margin-left: auto; }
.tag.admin { background: #3a2a12; color: #ffcf7a; }
.mini { padding: 4px 9px; border-radius: 7px; border: 1px solid #2a2f3a; background: #1d2430; color: #cdd6e6; font-size: 12px; cursor: pointer; white-space: nowrap; }
.mini.danger { border-color: #5a2630; color: #ff9aa6; }
.mini.ok { border-color: #2a4a36; color: #7fe0a8; }
.mini:hover { filter: brightness(1.15); }
.leads-empty { padding: 18px; text-align: center; color: #828c9c; font-size: 13px; }

/* ---------- 用户管理搜索框 ---------- */
.admin-search { margin-bottom: 12px; }
.admin-search input {
  width: 100%; padding: 10px 12px; background: #0f1218;
  border: 1px solid #2a2f3a; border-radius: 9px; color: #e8e8ea; font-size: 14px; outline: none;
}
.admin-search input:focus { border-color: #4f8cff; }

/* ---------- 会员开通提示条 + 弹窗 ---------- */
.member-bar {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 9px;
  background: #2a2233; border: 1px solid #4a3a5e; color: #ffd0e0;
  font-size: 13px; line-height: 1.5;
}
.member-bar a { color: #ff9ec4; font-weight: 600; text-decoration: none; margin-left: 4px; }
.member-bar a:hover { text-decoration: underline; }
.paywall { width: 400px; }
.paywall-sub { font-size: 13px; color: #9aa3b2; margin-bottom: 14px; line-height: 1.6; }
.paywall-wx { text-align: center; padding: 16px; border-radius: 11px; background: #0f1218; border: 1px solid #2a2f3a; }
.paywall-wx-label { font-size: 13px; color: #9aa3b2; margin-bottom: 8px; }
.paywall-wx-id { font-size: 26px; font-weight: 800; letter-spacing: 2px; color: #5fe09a; }
.paywall-tip { font-size: 12px; color: #9aa3b2; margin-top: 14px; line-height: 1.7; }
.paywall-tip b { color: #cdd6e6; }

/* ---------- 手机端适配 ---------- */
@media (max-width: 600px) {
  #controls { margin: 8px; padding: 12px; }
  .row input[type=text] { min-width: 100%; }
  .row button { flex: 1 1 auto; padding: 11px 12px; font-size: 14px; }
  .title { flex-wrap: wrap; gap: 6px; }
  .userbox { width: 100%; margin-left: 0; display: flex; align-items: center; gap: 8px; }
  .status { margin-left: auto; }
  .msg .orig { font-size: 13px; }
  .msg .tr { font-size: 14px; }
  .modal-card { padding: 16px 14px; border-radius: 12px; }
  .paywall { width: 94vw; }
  .paywall-wx-id { font-size: 22px; }
  .modal-actions { flex-direction: column; }
  .leads-row { flex-wrap: wrap; }
}