/* Widget library & editor (ported from kickbot) */
.widget-toolbar { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.widget-toolbar input { flex: 1; min-width: 200px; }
.widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.widget-card { background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 12px; overflow: hidden; }
.widget-thumb-preview {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-thumb-frame {
  position: absolute;
  border: 0;
  display: block;
  pointer-events: none;
  background: #0d1117;
}
.widget-thumb-label { font-size: 1.1rem; font-weight: 700; color: #53FC18; text-shadow: 0 0 20px rgba(83,252,24,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.widget-thumb-follow { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
.widget-thumb-sub { background: linear-gradient(135deg, #1a1a2e, #4a3728); }
.widget-thumb-sub .widget-thumb-label { color: #FFD700; }
.widget-thumb-gift { background: linear-gradient(135deg, #2d1b33, #4a1942); }
.widget-thumb-gift .widget-thumb-label { color: #FF69B4; }
.widget-thumb-raid { background: linear-gradient(135deg, #1a1033, #2d1f4e); }
.widget-thumb-raid .widget-thumb-label { color: #9146FF; }
.widget-thumb-chat { background: linear-gradient(135deg, #0d1117, #161b22); }
.widget-thumb-goal { background: linear-gradient(135deg, #0a2e1a, #1a3d2e); }
.widget-thumb-viewers { background: linear-gradient(135deg, #1e1030, #301934); }
.widget-thumb-kicks { background: linear-gradient(135deg, #2a1035, #4a1942); }
.widget-thumb-kicks .widget-thumb-label { color: #9146FF; }
.widget-thumb-neon { background: linear-gradient(135deg, #0a0a1a, #001a2e); }
.widget-thumb-neon .widget-thumb-label { color: #00ffff; text-shadow: 0 0 15px #00ffff; }
.widget-thumb-minimal { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); }
.widget-thumb-celebration { background: linear-gradient(135deg, #2e1a00, #4a3000); }
.widget-thumb-celebration .widget-thumb-label { color: #FFD700; }
.widget-thumb-combo { background: linear-gradient(135deg, #1a1033, #331a4a); }
.widget-thumb-ticker { background: linear-gradient(135deg, #0d1117, #161b22); }
.widget-thumb-counter { background: linear-gradient(135deg, #2e0a0a, #4a1515); }
.widget-thumb-counter .widget-thumb-label { color: #ff4444; }
.widget-thumb-poll { background: linear-gradient(135deg, #0a2e1a, #1a4030); }
.widget-thumb-giveaway { background: linear-gradient(135deg, #2e2a0a, #4a4015); }
.widget-thumb-giveaway .widget-thumb-label { color: #FFD700; }
.widget-thumb-live { background: linear-gradient(135deg, #2e0a0a, #1a0000); }
.widget-thumb-live .widget-thumb-label { color: #ff4444; }
.widget-thumb-stream { background: linear-gradient(135deg, #0a1a2e, #152540); }
.widget-thumb-uptime { background: linear-gradient(135deg, #0a2e2e, #153535); }
.widget-thumb-leaderboard { background: linear-gradient(135deg, #1a2e0a, #2a4015); }
.widget-thumb-quote { background: linear-gradient(135deg, #1a1a2e, #2a2a40); }
.widget-thumb-chatstats { background: linear-gradient(135deg, #0a1a2e, #152540); }
.widget-thumb-followmeter { background: linear-gradient(135deg, #0a2e1a, #1a4030); }
.widget-thumb-followmeter .widget-thumb-label { color: #53FC18; }
.widget-thumb-subgoal { background: linear-gradient(135deg, #2e2a0a, #4a4015); }
.widget-thumb-subgoal .widget-thumb-label { color: #FFD700; }
.widget-thumb-social { background: linear-gradient(135deg, #1a1033, #2d1f4e); }
.widget-thumb-social .widget-thumb-label { color: #00bfff; }
.widget-thumb-text { background: linear-gradient(135deg, #0d1117, #161b22); }
.widget-thumb-hype { background: linear-gradient(135deg, #1a1033, #4a1942); }
.widget-thumb-hype .widget-thumb-label { color: #9146FF; }
.widget-thumb-boss { background: linear-gradient(135deg, #2e0a0a, #4a1515); }
.widget-thumb-boss .widget-thumb-label { color: #ff4444; }
.widget-thumb-hyper { background: linear-gradient(135deg, #0f2027, #203a43); }
.widget-thumb-fire { background: linear-gradient(135deg, #2e1a00, #4a2500); }
.widget-thumb-fire .widget-thumb-label { color: #ff6600; }
.widget-thumb-engage { background: linear-gradient(135deg, #1a2e0a, #2a4015); }
.widget-thumb-tts { background: linear-gradient(135deg, #0a1a2e, #152540); }
.widget-thumb-tts .widget-thumb-label { color: #53FC18; }
.widget-thumb-aitts { background: linear-gradient(135deg, #1a1033, #331a4a); }
.widget-thumb-aitts .widget-thumb-label { color: #9146FF; }
.widget-thumb-lotto { background: linear-gradient(135deg, #2e2a0a, #4a4015); }
.widget-thumb-lotto .widget-thumb-label { color: #FFD700; }
.widget-thumb-latest { background: linear-gradient(135deg, #0a1a2e, #152540); }
.widget-thumb-latest .widget-thumb-label { color: #53FC18; }
.widget-thumb-clip { background: linear-gradient(135deg, #2e2a0a, #4a3500); }
.widget-thumb-clip .widget-thumb-label { color: #FFD700; }
.widget-thumb-shoutout { background: linear-gradient(135deg, #0a1a0a, #142810); }
.widget-thumb-shoutout .widget-thumb-label { color: #53FC18; }
.widget-thumb-pinned { background: linear-gradient(135deg, #101820, #1a2838); }
.widget-thumb-pinned .widget-thumb-label { color: #53FC18; }
.widget-thumb-commands { background: linear-gradient(135deg, #0a2e1a, #1a4030); }
.widget-thumb-commands .widget-thumb-label { color: #53FC18; }
.widget-thumb-wheel { background: linear-gradient(135deg, #2e1a00, #4a2500); }
.widget-thumb-wheel .widget-thumb-label { color: #FFD700; }
.widget-thumb-slot { background: linear-gradient(135deg, #1a1033, #331a00); }
.widget-thumb-slot .widget-thumb-label { color: #FFD700; text-shadow: 0 0 15px #FFD700; }
.widget-thumb-hunt { background: linear-gradient(135deg, #0a2e1a, #153520); }
.widget-thumb-hunt .widget-thumb-label { color: #53FC18; text-shadow: 0 0 15px #53FC18; }
.widget-card-body { padding: 1rem; }
.widget-card-body h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.widget-desc { font-size: 0.85rem; color: #888; margin: 0.5rem 0; min-height: 2.5em; }
.widget-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.widget-installs { font-size: 0.8rem; color: #888; }
.widget-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .widget-editor { grid-template-columns: 1fr; } }
.widget-accordion { background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 10px; margin-bottom: 0.75rem; padding: 0 1rem; }
.widget-accordion summary { cursor: pointer; padding: 0.85rem 0; font-weight: 600; list-style: none; }
.widget-accordion summary::-webkit-details-marker { display: none; }
.widget-accordion[open] summary { border-bottom: 1px solid var(--border, #30363d); margin-bottom: 0.75rem; }
.widget-settings-form { padding-bottom: 1rem; }
.widget-settings-form .form-group { margin-bottom: 14px; }
.widget-settings-form .checkbox-row { margin: 8px 0; }
.widget-settings-form input:not([type="checkbox"]):not([type="radio"]), .widget-settings-form select, .widget-settings-form textarea {
  width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border, #30363d);
  background: #0d1117; color: #eee; margin-bottom: 0;
}
.widget-settings-form input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #53FC18; }
.widget-settings-form input[type="color"] { height: 40px; padding: 4px; cursor: pointer; }
.widget-settings-form .form-actions { margin-top: 16px; padding-top: 0; border-top: none; }
.tts-voice-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tts-voice-hint { color: #888; font-size: 12px; margin: 8px 0 0; line-height: 1.4; }
.widget-settings-form .form-hint { color: #888; font-size: 12px; margin: 4px 0 12px; line-height: 1.45; }
.widget-settings-form select { width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border, #30363d); background: #0d1117; color: #eee; }
.media-upload-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; }
.media-upload-btn { margin: 0; cursor: pointer; display: inline-flex; align-items: center; }
.media-upload-status { font-size: 0.8rem; color: #888; }
.media-upload-status.media-upload-error { color: #f85149; }
.media-upload-preview-wrap { margin-top: 0.5rem; }
.media-upload-preview { max-width: 100%; max-height: 120px; border-radius: 6px; border: 1px solid var(--border, #30363d); display: block; }
.media-upload-preview-audio { width: 100%; max-width: 320px; margin-top: 0.25rem; }
.media-upload-preview-video { width: 100%; max-width: 320px; max-height: 180px; margin-top: 0.25rem; border-radius: 6px; border: 1px solid var(--border, #30363d); display: block; background: #000; }
.test-event-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1rem; }
.obs-url-box { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.obs-url-input { flex: 1; font-size: 0.75rem; padding: 0.5rem; background: #0d1117; border: 1px solid var(--border, #30363d); border-radius: 6px; color: #eee; }
.widget-editor-preview h3 { margin-bottom: 0.75rem; }
.widget-preview-wrap { width: 100%; overflow: hidden; border: 1px solid var(--border, #30363d); border-radius: 10px; background: #0d1117; position: relative; height: 360px; }
.widget-preview-frame { width: 800px; height: 600px; border: 0; display: block; transform: scale(0.45); transform-origin: top left; background: #0d1117; }
.btn-secondary { background: #21262d; color: #eee; border: 1px solid #30363d; }
.btn-secondary:hover { background: #30363d; }
.toggle-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; cursor: pointer; }
.widget-saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.widget-saved-card { display: flex; flex-direction: column; }
.widget-saved-card .widget-thumb-preview { height: 220px; }
.widget-saved-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.widget-commands-box { margin: 0.5rem 0 0; padding: 0.75rem; background: rgba(83, 252, 24, 0.05); border: 1px solid rgba(83, 252, 24, 0.15); border-radius: 8px; }
.widget-commands-compact { margin-top: 0.5rem; padding: 0.6rem 0.75rem; }
.widget-commands-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #53FC18; margin-bottom: 0.5rem; }
.widget-commands-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.widget-commands-list li { font-size: 0.82rem; line-height: 1.35; }
.widget-cmd-line { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.widget-cmd { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; background: rgba(0, 0, 0, 0.35); padding: 0.1rem 0.35rem; border-radius: 4px; color: #e6edf3; white-space: nowrap; }
.widget-cmd-mod { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(255, 215, 0, 0.15); color: #FFD700; padding: 0.1rem 0.35rem; border-radius: 4px; }
.widget-cmd-desc { display: block; color: #9aa4b2; margin-top: 0.1rem; padding-left: 0.15rem; }
.widget-commands-compact .widget-commands-list { gap: 0.35rem; }
.widget-commands-compact .widget-commands-list li { font-size: 0.78rem; }
.widget-commands-compact .widget-cmd-desc { display: inline; margin-left: 0.35rem; margin-top: 0; }
.widget-accordion .widget-commands-box { margin: 0 0 1rem; border: none; background: transparent; padding: 0 0 0.5rem; }
.widget-accordion .widget-commands-title { display: none; }