* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#0e0e10; color:#efeff1; }
.container { max-width:1200px; margin:0 auto; padding:24px; }
h1 { font-size:26px; margin-bottom:24px; color:#bf94ff; font-weight: 800; letter-spacing: -0.5px; }
.card { background:#1f1f23; border-radius:16px; padding:24px; margin-bottom:24px; border:1px solid #2d2d30; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; }
label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:#adadb8; }
select, input, textarea { width:100%; padding:10px 14px; border-radius:10px; border:2px solid #3a3a3d; background:#18181b; color:#efeff1; font-size:14px; transition: border-color 0.2s ease, background 0.2s ease; }
select:focus, input:focus, textarea:focus { outline:none; border-color:#772ce8; background: #202024; }
button { padding:10px 20px; border:none; border-radius:10px; cursor:pointer; font-size:14px; font-weight:700; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary { background:#772ce8; color:#fff; }
.btn-primary:hover { background:#9147ff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(119, 44, 232, 0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-danger { background:#e91916; color:#fff; }
.btn-danger:hover { background:#ff4f4d; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(233, 25, 22, 0.3); }
.btn-secondary { background:#3a3a3d; color:#efeff1; }
.btn-secondary:hover { background:#4e4e52; transform: translateY(-1px); }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; }
table { width:100%; border-collapse:separate; border-spacing: 0; }
th, td { text-align:left; padding:14px 16px; border-bottom:1px solid #2d2d30; }
th { font-size:11px; text-transform:uppercase; color:#adadb8; font-weight:700; letter-spacing: 0.5px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background:rgba(255,255,255,0.02); }
tr:first-child td:first-child { border-top-left-radius: 12px; }
tr:first-child td:last-child { border-top-right-radius: 12px; }
tr:last-child td:first-child { border-bottom-left-radius: 12px; }
tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.actions { display:flex; gap:8px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.empty { text-align:center; padding:60px 20px; color:#5a5a5f; font-size: 15px; }
.loading { text-align:center; padding:60px 20px; color:#772ce8; font-weight: 600; }
.tabs { display:flex; gap:4px; margin-bottom:0; background: #18181b; padding: 6px; border-radius: 14px; border: 1px solid #2d2d30; width: fit-content; }
.tab { padding:8px 18px; cursor:pointer; color:#adadb8; font-weight:600; font-size:14px; border-radius:10px; transition: all 0.2s ease; }
.tab:hover { color:#efeff1; background: rgba(255,255,255,0.05); }
.tab.active { color:#fff; background:#772ce8; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:100; backdrop-filter: blur(4px); }
.modal-overlay.active { display:flex; }
.modal { background:#1f1f23; border-radius:20px; padding:32px; width:90%; max-width:560px; max-height:90vh; overflow-y:auto; border:1px solid #3a3a3d; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.modal h2 { margin-bottom:24px; color:#bf94ff; font-weight: 800; }
.form-group { margin-bottom:18px; }
.form-row { display:flex; gap:16px; }
.form-row .form-group { flex:1; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:28px; }
.badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform: uppercase; }
.badge-all { background:#2d2d30; color:#adadb8; border:1px solid #3a3a3d; }
.badge-owner { background:rgba(191, 148, 255, 0.1); color:#bf94ff; border:1px solid #772ce8; }
.badge-broadcaster { background:rgba(0, 239, 139, 0.1); color:#00ef8b; border:1px solid #00ef8b; }
.badge-moderator { background:rgba(0, 184, 239, 0.1); color:#00b8ef; border:1px solid #00b8ef; }
.badge-vip { background:rgba(239, 184, 0, 0.1); color:#efb800; border:1px solid #efb800; }
.badge-elevated { background:rgba(191, 148, 255, 0.15); color:#bf94ff; border:1px solid #bf94ff; }
.error { color:#ff4f4d; padding:16px; background:rgba(233, 25, 22, 0.1); border-radius:12px; margin-bottom:16px; border: 1px solid rgba(233, 25, 22, 0.2); font-weight: 500; }
.fade-in { animation:fadeIn .3s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
.vars-help { margin-top:8px; background:#18181b; border-radius:10px; padding:12px; border:1px solid #3a3a3d; }
.vars-table { width:100%; font-size:12px; border-collapse:collapse; }
.vars-table td { padding:6px 8px; border:none; }
.vars-table td:first-child { white-space:nowrap; font-family:monospace; color:#bf94ff; font-weight: 600; }
.vars-table td:last-child { color:#adadb8; }
.response-preview { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: #efeff1; }
.aliases-cell { font-size:12px; color:#adadb8; font-style: italic; }
.count-val { font-weight:800; font-size:18px; color:#bf94ff; }
.timer-remaining { font-size:12px; color:#adadb8; }
.success { color:#00ef8b; padding:16px; background:rgba(0, 239, 139, 0.1); border-radius:12px; margin-bottom:16px; border: 1px solid rgba(0, 239, 139, 0.2); font-weight: 500; }
.btn-pill { border-radius: 50px; padding: 12px 32px; }
.login-card { text-align: center; max-width: 450px; width: 100%; padding: 48px 32px; }
.login-card h1 { font-size: 32px; margin-bottom: 12px; color: #bf94ff; font-weight: 800; }
.login-card p { color: #adadb8; margin-bottom: 32px; font-size: 16px; line-height: 1.5; }
.login-card .icon-box { margin-bottom: 24px; color: #9147ff; }
.login-card .icon-box svg { width: 64px; height: 64px; }
.alert-event-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #2d2d30; }
.alert-event-row:last-of-type { border-bottom: none; }
.alert-event-info { flex: 1; }
.media-preview-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 8px; background: #18181b; }
.media-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.media-type-image { background: rgba(0, 239, 139, 0.1); color: #00ef8b; }
.media-type-video { background: rgba(119, 44, 232, 0.1); color: #bf94ff; }
.media-type-audio { background: rgba(239, 184, 0, 0.1); color: #efb800; }

/* Editor Canvas Elements */
.canvas-widget {
  position: absolute;
  border: 2px solid #772ce8;
  background: rgba(119, 44, 232, 0.15);
  color: white;
  cursor: move;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.canvas-widget:hover {
  background: rgba(119, 44, 232, 0.25);
  border-color: #9147ff;
}
.canvas-widget.selected {
  border-color: #00ef8b;
  background: rgba(0, 239, 139, 0.15);
  box-shadow: 0 0 15px rgba(0, 239, 139, 0.4);
}
.canvas-widget-type {
  font-size: 11px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
  letter-spacing: 0.5px;
}
.canvas-widget-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  cursor: se-resize;
  background: #772ce8;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.canvas-widget.selected .canvas-widget-resize {
  background: #00ef8b;
}
.overlay-card {
  background: #18181b;
  border-radius: 12px;
  border: 1px solid #2d2d30;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.overlay-card h3 {
  color: #bf94ff;
  font-size: 16px;
}

/* Alert Rule Event Type Badges */
.badge-follow { background: rgba(0, 239, 139, 0.1); color: #00ef8b; border: 1px solid #00ef8b; }
.badge-sub { background: rgba(145, 71, 255, 0.1); color: #9147ff; border: 1px solid #9147ff; }
.badge-subgift { background: rgba(239, 184, 0, 0.1); color: #efb800; border: 1px solid #efb800; }
.badge-raid { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; border: 1px solid #ff6b6b; }
.badge-gift { background: rgba(0, 184, 239, 0.1); color: #00b8ef; border: 1px solid #00b8ef; }
.badge-custom { background: rgba(191, 148, 255, 0.1); color: #bf94ff; border: 1px solid #bf94ff; }
.badge-redeem { background: rgba(255, 159, 67, 0.1); color: #ff9f43; border: 1px solid #ff9f43; }
.badge-alertbox { background: rgba(119, 44, 232, 0.1); color: #772ce8; border: 1px solid #772ce8; }