*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f0f0f;color:#e0e0e0;min-height:100vh;padding:16px}
.container{max-width:600px;margin:0 auto}
/* ---- 头部自适应布局 ---- */
.header-area{transition:all .35s ease}
.header-main{display:flex;flex-direction:column;align-items:center;transition:all .35s ease;width:100%}
.header-area.monitoring .header-main{flex-direction:row;gap:8px}
/* 标题切换 */
.header-area.monitoring h1{font-size:16px;padding:0;text-align:left;white-space:nowrap;flex-shrink:0}
/* 输入组切换 */
.header-area.monitoring .input-group{flex:1;margin:0;min-width:0}
.header-area.monitoring .input-group input{padding:8px 10px;font-size:13px;min-width:0}
.header-area.monitoring .input-group button{padding:8px 10px;font-size:13px;white-space:nowrap;flex-shrink:0}
h1{font-size:26px;text-align:center;padding:12px 0 8px;background:linear-gradient(135deg,#fe2c55,#ff6b35,#fe2c55,#ff6b35,#fe2c55);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;animation:titleShimmer 4s ease-in-out infinite;transition:all .35s ease}
@keyframes titleShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.input-group{display:flex;gap:8px;margin:12px 0;transition:all .35s ease}
.input-group input{flex:1;padding:12px 14px;border:1px solid #333;border-radius:10px;background:rgba(26,26,26,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#e0e0e0;font-size:15px;outline:none;transition:all .35s ease}
.input-group input:focus{border-color:#fe2c55}
.input-group input::placeholder{color:#666}
.input-group button{padding:12px 18px;border:none;border-radius:10px;background:linear-gradient(135deg,#fe2c55,#ff6b35);color:#fff;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .35s ease}
.input-group button:disabled{opacity:.5;cursor:not-allowed}
.input-group button.stop-btn{background:#333;color:#ff6b6b;font-weight:600}
/* 停止选择弹窗 */
.stop-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:999;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.stop-box{background:#1a1a1a;border:1px solid #333;border-radius:14px;padding:18px;width:280px;max-height:70vh;overflow-y:auto}
.stop-box h3{font-size:15px;color:#e0e0e0;margin-bottom:12px;text-align:center}
.stop-item{display:flex;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:#ccc;transition:background .15s;margin-bottom:4px}
.stop-item:hover{background:#222}
.stop-item .stop-dot{width:8px;height:8px;border-radius:50%;margin-right:10px;flex-shrink:0}
.stop-item .stop-icon{margin-left:auto;color:#888;font-size:14px}
.stop-all-item{display:flex;align-items:center;padding:10px 12px;margin-top:6px;border-top:1px solid #333;cursor:pointer;font-size:13px;color:#fe2c55;font-weight:600;border-radius:8px;transition:background .15s}
.stop-all-item:hover{background:rgba(254,44,85,.1)}
.stop-cancel{display:block;text-align:center;margin-top:10px;padding:8px;color:#888;font-size:12px;cursor:pointer;border-radius:8px}
.stop-cancel:hover{background:#222}
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(26,26,26,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;margin:8px 0;font-size:13px;color:#999}
.status-bar .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;position:relative;flex-shrink:0}
.status-bar .dot.green{background:radial-gradient(circle at 35% 35%, #69f07e, #34c759 40%, #1a8a3a);box-shadow:0 0 6px rgba(52,199,89,.6),inset 0 1px 2px rgba(255,255,255,.3)}
.status-bar .dot.red{background:radial-gradient(circle at 35% 35%, #ff6b6b, #ff3b30 40%, #b3150c);box-shadow:0 0 6px rgba(255,59,48,.6),inset 0 1px 2px rgba(255,255,255,.3)}
.status-bar .dot.gray{background:radial-gradient(circle at 35% 35%, #888, #555 40%, #333);box-shadow:0 0 4px rgba(85,85,85,.4),inset 0 1px 2px rgba(255,255,255,.15)}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* 匿名模式提示条 */
.anonymous-banner{display:none;padding:10px 14px;margin:8px 0;border-radius:10px;background:linear-gradient(135deg,rgba(255,149,0,.15),rgba(254,44,85,.1));border:1px solid rgba(255,149,0,.3);font-size:13px;color:#ffb366;line-height:1.6;animation:fadeIn .3s}
.anonymous-banner.show{display:block}
.anonymous-banner .icon{font-size:18px;margin-right:6px;vertical-align:-2px}
.anonymous-banner b{color:#ff9500}
.event.mystery{background:linear-gradient(135deg,rgba(254,44,85,.15),rgba(255,107,53,.08));border-left:3px solid #fe2c55}
.event.chat{background:rgba(52,199,89,.08);border-left:3px solid #34c759}
.event.gift{background:rgba(255,149,0,.08);border-left:3px solid #ff9500}
.event.rank{background:rgba(90,200,250,.08);border-left:3px solid #5ac8fa}
.event.stats{background:rgba(142,142,147,.08);border-left:3px solid #8e8e93;font-size:12px;color:#999;padding:4px 12px}
.event.sys{background:rgba(90,200,250,.06);border-left:3px solid #5ac8fa;font-size:12px;color:#5ac8fa;padding:4px 12px}
.event .label{font-weight:600;margin-right:6px}
.event .tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;margin-right:4px}
.event .tag.m{background:rgba(254,44,85,.3);color:#fe2c55}
.event .tag.lv{background:rgba(90,200,250,.2);color:#5ac8fa}
.event .tag.dia{background:rgba(255,149,0,.2);color:#ff9500}
.event .content{color:#ccc;margin-top:2px}
.event .extra{font-size:12px;color:#888;margin-top:2px}
.event .link{color:#5ac8fa;text-decoration:none;font-size:12px}
.empty{text-align:center;color:#555;padding:40px 0;font-size:14px}
.empty .icon{font-size:40px;margin-bottom:12px}
.hint{text-align:center;color:#444;font-size:12px;margin:6px 0;transition:opacity .3s ease,max-height .3s ease,margin .3s ease;opacity:1;max-height:20px;overflow:hidden}
.header-area.monitoring .hint{opacity:0;max-height:0;margin:0;pointer-events:none}
.loading{display:inline-block;width:14px;height:14px;border:2px solid #666;border-top-color:#fe2c55;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.room-tab{display:inline-block;padding:5px 12px;border:1px solid #444;border-radius:16px;font-size:12px;color:#ccc;cursor:pointer;transition:all .2s;background:transparent}
.room-tab:hover{border-color:#fe2c55;color:#fe2c55}
.room-tab[style*="background:#fe2c55"]{border-color:#fe2c55}
/* 房间标签选中覆盖 */
.room-tab.active{background:#fe2c55;color:#fff;border-color:#fe2c55}
/* 模式按钮 */
.mode-btn{font-size:12px;cursor:pointer;padding:3px 9px;border-radius:6px;background:#222;color:#666;transition:all .2s;margin-left:4px;user-select:none}
.mode-btn.active{background:linear-gradient(135deg,rgba(254,44,85,.2),rgba(255,107,53,.1));color:#fe2c55;font-weight:600}
/* 普通用户 */
.event.regular{background:rgba(142,142,147,.06);border-left:3px solid #8e8e93}
.event.regular .tag.reg{background:rgba(142,142,147,.25);color:#8e8e93}
/* 名字截断 + 点击展开 */
.name-box{margin:2px 0;min-width:0;overflow:hidden}
.name-text{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:block;padding:1px 0;width:100%}
.name-text.exp{white-space:normal;overflow:visible}
.name-text.mn{color:#fe2c55}
.name-text.rn{color:#999}
.name-text .dp{font-weight:400;color:#666;font-size:11px;margin-left:4px}
/* 状态栏统计固定宽度 */
.stats-text{display:inline-block;min-width:64px;text-align:right;color:#666;font-size:12px}
/* 卡片等高等宽 */
.events{max-height:70vh;overflow-y:auto;padding:4px 0;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:start;align-items:stretch}
.events:empty,.events:has(.empty){display:block}
.events::-webkit-scrollbar{width:4px}
.events::-webkit-scrollbar-thumb{background:#333;border-radius:2px}
.event{padding:7px 9px;border-radius:8px;font-size:12px;line-height:1.4;min-height:108px;min-width:0;background:rgba(26,26,26,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.event.exp{height:auto;min-height:108px}
.history-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(30,30,30,0.97);
  border: 1px solid #333;
  border-radius: 8px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.history-dropdown .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
  border-bottom: 1px solid #222;
  transition: background 0.15s;
}
.history-dropdown .item:last-child { border-bottom: none; }
.history-dropdown .item:hover { background: rgba(255,255,255,0.06); }
.history-dropdown .item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.history-dropdown .item .del-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #666;
  font-size: 14px;
  margin-left: 8px;
  transition: all 0.15s;
  border: none;
  background: transparent;
  cursor: pointer;
}
.history-dropdown .item .del-btn:hover { color: #fe2c55; background: rgba(254,44,85,0.1); }
.history-dropdown .empty-msg { padding: 12px; text-align: center; color: #555; font-size: 12px; }

/* ---- 公屏模式 ---- */
.feed-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 0;
  background: rgba(10, 10, 10, 0.5);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.feed-container::-webkit-scrollbar { width: 4px; }
.feed-container::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: feedFadeIn 0.25s ease;
  transition: background 0.15s;
}
.feed-item:hover { background: rgba(255,255,255,0.02); }

.dy-emoji {
  width: 20px; height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin: -2px 1px 0;
  object-fit: contain;
}
@keyframes feedFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.feed-item .feed-icon {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}
.feed-item .feed-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
}
.feed-item .feed-name {
  font-weight: 600;
  font-size: 12px;
}
.feed-item .feed-content {
  color: #aaa;
  word-break: break-all;
}
.feed-item .feed-count {
  font-size: 11px;
  font-weight: 600;
}
.feed-item .feed-time {
  flex-shrink: 0;
  font-size: 10px;
  color: #555;
  white-space: nowrap;
  margin-left: auto;
  align-self: center;
}
/* 进入事件 */
.feed-item.feed-enter .feed-icon { color: #5ac8fa; }
.feed-item.feed-enter .feed-name { color: #5ac8fa; }
.feed-item.feed-enter { background: rgba(90,200,250,0.03); }
/* 发言事件 */
.feed-item.feed-chat .feed-icon { color: #34c759; }
.feed-item.feed-chat .feed-name { color: #34c759; }
/* 送礼事件 */
.feed-item.feed-gift .feed-icon { color: #ff9500; }
.feed-item.feed-gift .feed-name { color: #ff9500; }
.feed-item.feed-gift .feed-content,
.feed-item.feed-gift .feed-count { color: #ff9500; }
/* 空状态 */
.feed-empty {
  text-align: center;
  color: #555;
  padding: 40px 0;
  font-size: 14px;
}
.feed-empty .icon { font-size: 40px; margin-bottom: 12px; }

/* 手机端缩小按钮 */
/* ---- 房间筛选器 ---- */
.room-selector {
  display: flex;
  gap: 6px;
  padding: 6px 0;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.room-selector::-webkit-scrollbar { display: none; }
.room-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1.5px solid #333;
  background: rgba(26,26,26,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  user-select: none;
}
.room-filter-btn:hover {
  background: rgba(255,255,255,0.05);
}
.room-filter-btn.active {
  background: rgba(255,255,255,0.06);
}
.room-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.room-filter-name {
  font-size: 12px;
  color: #aaa;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.room-filter-btn.active .room-filter-name {
  color: #fff;
}

@media (max-width: 480px) {
  .status-bar { font-size: 12px; padding: 8px 10px; }
  .mode-btn { font-size: 11px; padding: 3px 7px; margin-left: 3px; }
  .stats-text { min-width: 40px; font-size: 11px; }
  .status-bar .dot { width: 9px; height: 9px; margin-right: 5px; }
  .room-selector { padding: 4px 0; gap: 4px; }
  .room-filter-btn { padding: 4px 8px; }
  .room-filter-name { max-width: 64px; font-size: 11px; }
}