ux: improve skintone interaction & active state behavior

- Remove swatch modal → replaced with inline tone row UX
- Add active card highlight and tone selection row spanning 4 columns
- Apply tone immediately on click (copy/insert according to settings)
- Add tooltip on hover for names (replacing marquee on hover)
- Enable marquee animation only for overflowed text when active
- Integrate forbid & non-toneable filters matching site policy (LGBT & fantasy exclusions)
- Sync tone whitelist (roles like technologist, scientist, firefighter, etc.)
- Sync tone blacklist (e.g. merman, mermaid, deaf man/woman, woman beard, men with bunny ears)
- Add overflow-y hidden toggle when settings modal shown
- Move inline styles to style.css for cleaner structure
- Refactor panel.js for maintainable tone row injection logic

styles.css

@@ -1,6 +1,6 @@
 :root {
     color-scheme: light dark;
-    --bg:#fff; --fg:#111; --mut:#6b7280; --dim:#f3f4f6; --br:#e5e7eb;
+    --bg:#fff; --fg:#111; --mut:#6b7280; --dim:#f3f4f6; --br:#e5e7eb; --active: #60a5fa2b;
 }
 @media (prefers-color-scheme: dark){
     :root { --bg:#0b1220; --fg:#e5e7eb; --mut:#9ca3af; --dim:#111827; --br:#374151; }
@@ -267,4 +267,31 @@ html, body { margin:0; padding:0; background:var(--bg); color:var(--fg);
 select#sub {
   position: relative;
   z-index: 6;
+}
+
+div.card.active {
+  background-color: var(--active)!important;
+}
+
+.tone-row {
+  grid-column: 1 / -1;
+  background-color: var(--active);
+  border: 1px solid var(--c-border, rgba(0, 0, 0, .12));
+  border-radius: 12px;
+  padding: 12px;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0px, 1fr));
+  gap: 6px;
+  align-items: center;
+}
+
+.tone-option {
+  height: 56px;
+    border-radius: 10px;
+    border: 1px solid var(--c-border, rgba(0, 0, 0, .12));
+    background: var(--c-bg, #f3f4f6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: x-large;
 }