:root {
  --bg-opacity: 0.72;
  --event-font-size: 20px;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { color: #fff; }

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 24, var(--bg-opacity));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
}

.topbar {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.08);
  user-select: none;
}

.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.86); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #888; box-shadow: 0 0 12px currentColor; }
.status-dot.connected { background: #37e28f; color: #37e28f; }
.status-dot.connecting { background: #ffd166; color: #ffd166; }
.status-dot.disconnected { background: #ff5f6d; color: #ff5f6d; }
.online-badge { padding: 2px 8px; border-radius: 999px; background: rgba(55,226,143,.16); color: #9ff3c8; font-size: 12px; }
.hidden { display: none !important; }

.actions { display: flex; gap: 6px; }
button { border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: white; padding: 7px 10px; cursor: pointer; }
button:hover { background: rgba(255,255,255,.22); }

.events { flex: 1; padding: 14px; overflow-y: auto; scroll-behavior: smooth; }
.placeholder { opacity: .58; text-align: center; margin-top: 30vh; font-size: 16px; }

.event {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.08);
  animation: eventIn .22s ease-out;
  font-size: var(--event-font-size);
  line-height: 1.35;
  word-break: break-word;
}
@keyframes eventIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.username { font-weight: 800; color: #8bd3ff; margin-right: 6px; }
.event-message .message { color: #fff; }
.event-interaction { color: #ffd166; }
.event-gift { border-color: rgba(255, 206, 84, .38); background: rgba(255, 206, 84, .14); }
.event-superchat { border-color: rgba(255, 99, 132, .45); background: rgba(255, 99, 132, .16); }
.event-system { opacity: .82; font-size: calc(var(--event-font-size) * .82); text-align: center; }

.settings-dialog { width: min(720px, 92vw); border: 0; border-radius: 18px; padding: 0; background: #17171c; color: white; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.settings-dialog::backdrop { background: rgba(0,0,0,.45); }
.settings-form { display: grid; gap: 14px; padding: 20px; }
.settings-form h2 { margin: 0 0 4px; }
.settings-form label { display: grid; gap: 8px; font-size: 14px; color: rgba(255,255,255,.78); }
.settings-form label.row { display: flex; align-items: center; gap: 8px; }
input, textarea { width: 100%; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.08); color: white; padding: 10px 12px; outline: none; }
textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 520px) { .topbar { height: 38px; } .brand { font-size: 12px; } .events { padding: 10px; } }