Merge nightly: CI Redesign v3 (Warm-Brown, DM Sans, Styleguides)

- Warm-Brown Palette (#1a1810 - #322d26) ersetzt Discord Blau-Grau
- DM Sans + DM Mono Fonts (Google Fonts)
- border-radius: 4px/6px statt 8-20px
- Header: 44px, font-size: 13px
- Glow-Effekte und dekorative Gradients entfernt
- STYLEGUIDE.md fuer einheitliches Plugin-Design
- STYLEGUIDE-SOUNDBOARD-MAIN.md als Referenz zum alten Design

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/STYLEGUIDE-SOUNDBOARD-MAIN.md

@@ -0,0 +1,366 @@
+# Soundboard — Main Branch Design Reference
+
+Snapshot des Soundboard-Designs vom Main-Branch (v1.8.x) vor dem CI Redesign.
+Dieses Dokument dient als Referenz um zum urspruenglichen Design zurueckzukehren.
+
+---
+
+## Design-Identitaet
+
+- **Aesthetic:** Discord-inspiriert, soft glass, abgerundete Pill-Shapes
+- **Palette:** Kuehl Blau-Grau mit Blurple-Accent
+- **Font:** DM Sans (bereits auf main), fallback Segoe UI
+- **Radius:** 8px Standard, 12px large, 20px fuer Pills (Buttons, Chips, Search)
+- **Effekte:** Glow-Shadows, Accent-Glows, Radial-Gradient Overlays, Pulse-Animationen
+
+---
+
+## Theme-Variablen (`.sb-app` Scope)
+
+### Default Theme (Discord Blurple)
+
+```css
+.sb-app {
+  --bg-deep: #1a1b1e;
+  --bg-primary: #1e1f22;
+  --bg-secondary: #2b2d31;
+  --bg-tertiary: #313338;
+  --bg-modifier-hover: rgba(79, 84, 92, .16);
+  --bg-modifier-active: rgba(79, 84, 92, .24);
+  --bg-modifier-selected: rgba(79, 84, 92, .32);
+
+  --text-normal: #dbdee1;
+  --text-muted: #949ba4;
+  --text-faint: #6d6f78;
+
+  --accent: #5865f2;
+  --accent-rgb: 88, 101, 242;
+  --accent-hover: #4752c4;
+  --accent-glow: rgba(88, 101, 242, .45);
+
+  --green: #23a55a;
+  --red: #f23f42;
+  --yellow: #f0b232;
+  --white: #ffffff;
+
+  --font: 'DM Sans', 'Outfit', 'gg sans', 'Noto Sans', sans-serif;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --shadow-low: 0 1px 3px rgba(0, 0, 0, .24);
+  --shadow-med: 0 4px 12px rgba(0, 0, 0, .32);
+  --shadow-high: 0 8px 24px rgba(0, 0, 0, .4);
+  --transition: 150ms cubic-bezier(.4, 0, .2, 1);
+
+  --card-size: 110px;
+  --card-emoji: 28px;
+  --card-font: 11px;
+}
+```
+
+### Alternative Themes
+
+```css
+/* Midnight Purple */
+[data-theme="purple"] {
+  --bg-deep: #13111c;  --bg-primary: #1a1726;
+  --bg-secondary: #241f35;  --bg-tertiary: #2e2845;
+  --accent: #9b59b6;  --accent-glow: rgba(155, 89, 182, .45);
+}
+
+/* Forest */
+[data-theme="forest"] {
+  --bg-deep: #0f1a14;  --bg-primary: #142119;
+  --bg-secondary: #1c2e22;  --bg-tertiary: #253a2c;
+  --accent: #2ecc71;  --accent-glow: rgba(46, 204, 113, .4);
+}
+
+/* Sunset (aehnlich dem spaeter eingefuehrten CI-Redesign) */
+[data-theme="sunset"] {
+  --bg-deep: #1a1210;  --bg-primary: #231815;
+  --bg-secondary: #2f201c;  --bg-tertiary: #3d2a24;
+  --accent: #e67e22;  --accent-glow: rgba(230, 126, 34, .4);
+}
+
+/* Ocean */
+[data-theme="ocean"] {
+  --bg-deep: #0a1628;  --bg-primary: #0f1e33;
+  --bg-secondary: #162a42;  --bg-tertiary: #1e3652;
+  --accent: #3498db;  --accent-glow: rgba(52, 152, 219, .4);
+}
+```
+
+---
+
+## Layout-Struktur
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  Top Bar (52px, --bg-secondary)                              │
+│  [Logo] [Title] ──── [Clock 22px] ──── [Channel▾] [Status]  │
+├──────────────────────────────────────────────────────────────┤
+│  Toolbar (wrap, --bg-primary)                                │
+│  [Alle|Neu|Fav] [search...] [link...] [Download] [Stop]     │
+│  [Shuffle] [Party] [Volume] [HeadsetSwitch] [Size] [Themes] │
+├──────────────────────────────────────────────────────────────┤
+│  Analytics Strip (--bg-primary)                              │
+│  [Most Played: chip chip chip ...]  [# Sounds] [# Users]    │
+├──────────────────────────────────────────────────────────────┤
+│  Category Strip (--bg-primary, scrollable)                   │
+│  [● A 95] [● B 12] [● C 34] ...                             │
+├──────────────────────────────────────────────────────────────┤
+│                                                              │
+│  Sound Grid (--bg-primary, scroll-y)                         │
+│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐                       │
+│  │ 😂   │ │ 🎺   │ │ 💀   │ │ 🔊   │                       │
+│  │ name │ │ name │ │ name │ │ name │  ← 110px, aspect 1:1  │
+│  └──────┘ └──────┘ └──────┘ └──────┘                       │
+│                                                              │
+├──────────────────────────────────────────────────────────────┤
+│  Now Playing Bar (--bg-secondary, 56px)                      │
+│  [▶ emoji name ───── progress ───── duration] [vol] [queue]  │
+└──────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Kernkomponenten
+
+### Top Bar
+
+```css
+.topbar {
+  height: 52px;
+  padding: 0 20px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid rgba(0, 0, 0, .24);
+  gap: 16px;
+}
+```
+
+- Logo: 28x28px, accent-bg, `border-radius: 8px`
+- Title: 16px, weight 700, `--white`
+- Clock: 22px, weight 700, `font-variant-numeric: tabular-nums`
+
+### Channel Dropdown (Pill-Style)
+
+```css
+.channel-btn {
+  padding: 5px 12px 5px 10px;
+  border: 1px solid rgba(255, 255, 255, .08);
+  border-radius: 20px;                          /* Pill! */
+  background: var(--bg-tertiary);
+  font-size: 13px;
+  font-weight: 600;
+}
+```
+
+### Connection Badge (Pill-Style)
+
+```css
+.connection {
+  padding: 4px 10px;
+  border-radius: 20px;                          /* Pill! */
+  background: rgba(35, 165, 90, .12);
+  color: var(--green);
+  font-size: 12px;
+  font-weight: 600;
+}
+.conn-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 6px rgba(35, 165, 90, .6);   /* Glow! */
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+```
+
+### Category Tabs (Pill-Buttons)
+
+```css
+.cat-tab {
+  padding: 6px 14px;
+  border-radius: 20px;                          /* Pill! */
+  background: var(--bg-tertiary);
+  font-size: 13px;
+  font-weight: 600;
+}
+.cat-tab.active {
+  background: var(--accent);
+  color: var(--white);
+}
+```
+
+### Search (Pill-Input)
+
+```css
+.search-input {
+  height: 32px;
+  padding: 0 28px 0 32px;
+  border: 1px solid rgba(255, 255, 255, .06);
+  border-radius: 20px;                          /* Pill! */
+  background: var(--bg-secondary);
+  font-size: 13px;
+}
+.search-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow);    /* Glow Ring! */
+}
+```
+
+### Toolbar Buttons (Pill, farbcodiert)
+
+```css
+.tb-btn {
+  padding: 6px 12px;
+  border: 1px solid rgba(255, 255, 255, .08);
+  border-radius: 20px;                          /* Pill! */
+  background: var(--bg-tertiary);
+  font-size: 12px;
+  font-weight: 600;
+}
+/* Farbcodes: */
+.tb-btn.random { border-color: rgba(88, 101, 242, .3); color: var(--accent); }
+.tb-btn.party  { border-color: rgba(240, 178, 50, .3); color: var(--yellow); }
+.tb-btn.stop   { border-color: rgba(242, 63, 66, .3);  color: var(--red); }
+```
+
+### Sound Cards
+
+```css
+.sound-card {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);              /* 12px */
+  border: 2px solid transparent;
+  aspect-ratio: 1;
+  padding: 12px 6px 8px;
+  /* Enter-Animation */
+  animation: card-enter 350ms ease-out forwards;
+}
+
+/* Hover: Glow + Gradient Overlay */
+.sound-card:hover {
+  background: var(--bg-tertiary);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-med), 0 0 20px var(--accent-glow);
+  border-color: rgba(88, 101, 242, .2);
+}
+
+/* Radial-Gradient Pseudo-Element */
+.sound-card::before {
+  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
+  opacity: 0;  /* wird bei hover auf 1 */
+}
+
+/* Playing State: Pulsierender Glow */
+.sound-card.playing {
+  border-color: var(--accent);
+  animation: card-enter 350ms, playing-glow 1.2s infinite alternate;
+}
+@keyframes playing-glow {
+  from { box-shadow: 0 0 4px var(--accent-glow); }
+  to   { box-shadow: 0 0 16px var(--accent-glow); }
+}
+```
+
+- Emoji: 28px, weight 800, opacity .7 → 1 on hover, scale(1.15)
+- Name: 11px, weight 600, ellipsis
+- Duration: 9px, `--text-faint`
+
+### Analytics Strip
+
+```css
+.analytics-card {
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  border: 1px solid rgba(255, 255, 255, .08);
+}
+.analytics-chip {
+  padding: 3px 8px;
+  border-radius: 999px;                         /* Full Pill */
+  background: rgba(var(--accent-rgb), .15);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+}
+```
+
+### Category Chips
+
+```css
+.cat-chip {
+  padding: 4px 12px;
+  border-radius: 20px;                          /* Pill! */
+  background: var(--bg-secondary);
+  border: 1px solid rgba(255, 255, 255, .06);
+  font-size: 12px;
+  font-weight: 600;
+}
+.cat-chip.active {
+  background: rgba(88, 101, 242, .1);           /* Accent-tinted */
+}
+```
+
+---
+
+## Signifikante Unterschiede zum CI Redesign (v3)
+
+| Eigenschaft     | Main (dieses Dokument)         | CI Redesign (nightly)          |
+|-----------------|-------------------------------|--------------------------------|
+| Palette         | Kuehl Blau-Grau `#1a1b1e`    | Warm Braun `#1a1810`           |
+| Accent          | Blurple `#5865f2`             | Ember Orange `#e67e22`         |
+| Font global     | Segoe UI                      | DM Sans                        |
+| Font Soundboard | DM Sans (bereits)             | DM Sans                        |
+| Border-Radius   | 8/12/20px (Pills ueberall)    | 4/6px (keine Pills)            |
+| Glow-Effekte    | Ja (accent-glow, pulse)       | Nein                           |
+| Card ::before   | Radial-Gradient Overlay       | Entfernt                       |
+| Shadows         | Farbige Glows erlaubt         | Nur dunkle rgba(0,0,0) Shadows|
+| Card Border     | 2px solid transparent → accent| 1px solid transparent          |
+| backdrop-filter | Auf Modals + Panels           | Nur Modals                     |
+| Header-Hoehe    | 52px (Topbar) + Toolbar       | 44px (Hub-Header mit Tabs)     |
+| Animations      | Reichhaltig (ripple, bounce)  | Reduziert, funktional          |
+
+---
+
+## Animationen (Referenz)
+
+```css
+/* Card-Einblendung */
+@keyframes card-enter {
+  from { opacity: 0; transform: translateY(10px) scale(.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Spielender Sound — pulsierender Glow */
+@keyframes playing-glow {
+  from { box-shadow: 0 0 4px var(--accent-glow); }
+  to   { box-shadow: 0 0 16px var(--accent-glow); }
+}
+
+/* Emoji-Bounce beim Abspielen */
+@keyframes emoji-bounce {
+  0%, 100% { transform: scale(1); }
+  40%      { transform: scale(1.3); }
+  70%      { transform: scale(.95); }
+}
+
+/* Connection-Dot Pulse */
+@keyframes pulse-dot {
+  0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, .5); }
+  50%      { box-shadow: 0 0 12px rgba(35, 165, 90, .8); }
+}
+
+/* Party-Button Glow */
+@keyframes party-btn {
+  from { box-shadow: 0 0 8px rgba(240, 178, 50, .4); }
+  to   { box-shadow: 0 0 20px rgba(240, 178, 50, .7); }
+}
+
+/* Ripple-Effekt auf Cards */
+@keyframes ripple-expand {
+  to { transform: scale(3); opacity: 0; }
+}
+.ripple {
+  background: rgba(88, 101, 242, .3);
+}
+```

web/STYLEGUIDE.md

@@ -0,0 +1,641 @@
+# Gaming Hub — Styleguide
+
+Verbindliche Design-Referenz für alle Plugins. Basiert auf dem CI Redesign v3 (Warm-Brown, DM Sans).
+
+---
+
+## 1. Design Tokens
+
+### Hintergrundfarben (Warm-Brown Palette)
+
+| Variable          | Wert       | Verwendung                          |
+|-------------------|------------|-------------------------------------|
+| `--bg-deep`       | `#1a1810`  | App-Hintergrund, tiefste Ebene      |
+| `--bg-primary`    | `#211e17`  | Header, Hauptflächen                |
+| `--bg-secondary`  | `#2a2620`  | Cards, Panels, Sidebar              |
+| `--bg-tertiary`   | `#322d26`  | Hover-States, erhöhte Elemente      |
+| `--bg-card`       | `#2a2620`  | Alias für Card-Backgrounds          |
+| `--bg-card-hover` | `#322d26`  | Card-Hover                          |
+| `--bg-input`      | `#1e1b15`  | Input-Felder, Suchleisten           |
+| `--bg-header`     | `#1e1b14`  | Header-Bar                          |
+
+**Helligkeitsreihenfolge:** `deep` → `primary` → `secondary/card` → `tertiary/card-hover`
+
+### Textfarben
+
+| Variable        | Wert       | Verwendung                    |
+|-----------------|------------|-------------------------------|
+| `--text-normal` | `#dbdee1`  | Primärtext, Überschriften     |
+| `--text-muted`  | `#949ba4`  | Sekundärtext, Labels          |
+| `--text-faint`  | `#6d6f78`  | Tertiärtext, Platzhalter, Disabled |
+
+### Accent-System
+
+| Variable          | Wert                           | Verwendung                    |
+|-------------------|--------------------------------|-------------------------------|
+| `--accent`        | `#e67e22`                      | Primäre Akzentfarbe (Ember)   |
+| `--accent-rgb`    | `230, 126, 34`                 | Für `rgba()` Konstrukte       |
+| `--accent-hover`  | `#d35400`                      | Hover/Active auf Accent       |
+| `--accent-dim`    | `rgba(230, 126, 34, 0.15)`    | Subtiler Accent-Hintergrund   |
+| `--accent-border` | `rgba(230, 126, 34, 0.35)`    | Focus-Borders, aktive Ränder  |
+
+Weitere Themes via `[data-accent="..."]`:
+- `ember` (Standard) — Orange `#e67e22`
+- `amethyst` — Lila `#9b59b6`
+- `ocean` — Blau `#2e86c1`
+- `jade` — Grün `#27ae60`
+- `rose` — Pink `#e74c8b`
+
+### Semantische Farben
+
+| Variable    | Wert       | Verwendung          |
+|-------------|------------|---------------------|
+| `--success` | `#57d28f`  | Online, Erfolg, Win |
+| `--danger`  | `#ed4245`  | Fehler, Offline, Loss |
+| `--warning` | `#fee75c`  | Warnungen           |
+
+### Borders
+
+| Variable         | Wert                          | Verwendung              |
+|------------------|-------------------------------|-------------------------|
+| `--border`       | `rgba(255, 255, 255, 0.05)`  | Standard-Trennlinien    |
+| `--border-strong`| `rgba(255, 255, 255, 0.08)`  | Betonte Ränder, Divider |
+
+---
+
+## 2. Typografie
+
+### Font-Stacks
+
+| Variable   | Wert                                             | Verwendung      |
+|------------|--------------------------------------------------|-----------------|
+| `--font`   | `'DM Sans', system-ui, -apple-system, sans-serif`| Body, UI-Text   |
+| `--mono`   | `'DM Mono', monospace`                           | Code, Timer, Zahlen |
+
+Google Fonts Import (bereits in `styles.css`):
+```css
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');
+```
+
+### Type Scale
+
+| Größe  | Verwendung                                  |
+|--------|---------------------------------------------|
+| `9px`  | Micro-Badges, Tier-Ranks                    |
+| `10px` | Kleine Labels, Plattform-Badges             |
+| `11px` | Meta-Text, Zähler, Sound-Card-Names         |
+| `12px` | Small Body, Grid-Text, Chip-Labels          |
+| `13px` | **Base Body** (globaler Standard)            |
+| `14px` | Buttons, Inputs, Standard-UI-Text           |
+| `15px` | Profilnamen, Detail-Labels                  |
+| `16px` | Section-Headings, Titel                     |
+| `18px` | Große Überschriften                         |
+| `20px` | Profil-Titel                                |
+| `24px` | Logo, Hero-Text                             |
+
+### Font-Weights
+
+| Wert  | Name      | Verwendung                           |
+|-------|-----------|--------------------------------------|
+| `400` | Regular   | Body-Text, Inputs                    |
+| `500` | Medium    | Labels, Tab-Navigation, Chips        |
+| `600` | Semibold  | Buttons, Card-Titel, aktive Elemente |
+| `700` | Bold      | Überschriften, Badges, Logo          |
+
+---
+
+## 3. Spacing
+
+4px-Basis-Grid. Bevorzugte Werte:
+
+| Wert   | Verwendung                           |
+|--------|--------------------------------------|
+| `4px`  | Micro-Gaps, Icon-Abstände            |
+| `8px`  | Tight Gaps, Badge-Padding            |
+| `10px` | Button/Input-Padding, Listen-Rows    |
+| `12px` | Card-Padding, comfortable Gaps       |
+| `16px` | Grid-Gaps, Section-Padding           |
+| `20px` | Container-Padding                    |
+| `24px` | Modal-Padding, große Sections        |
+| `32px` | Section-Abstände                     |
+
+---
+
+## 4. Border-Radius
+
+| Variable      | Wert     | Verwendung                          |
+|---------------|----------|-------------------------------------|
+| `--radius`    | `4px`    | **Standard** — Buttons, Inputs, Cards, Chips |
+| `--radius-lg` | `6px`    | Modals, Admin-Panels, große Cards   |
+| `50%`         | —        | Avatare, Status-Dots                |
+| `9999px`      | —        | Pill-Shapes (Tags, Badges)          |
+
+> **Regel:** Kein `border-radius` über `6px` außer Circles (`50%`) und Pills (`9999px`).
+
+---
+
+## 5. Schatten
+
+| Stufe  | Wert                               | Verwendung             |
+|--------|-------------------------------------|------------------------|
+| xs     | `0 1px 3px rgba(0, 0, 0, .24)`    | Subtile Erhöhung       |
+| sm     | `0 2px 6px rgba(0, 0, 0, .3)`     | Buttons, kleine Panels |
+| md     | `0 4px 12px rgba(0, 0, 0, .32)`   | Cards, Dropdowns       |
+| lg     | `0 4px 20px rgba(0, 0, 0, .4)`    | Elevated Cards (Hover) |
+| xl     | `0 8px 32px rgba(0, 0, 0, .5)`    | Modals, Overlays       |
+
+> **Regel:** Nur dunkle Elevation-Shadows. Keine farbigen Glow-Effekte (`0 0 Xpx` mit Farbe).
+
+---
+
+## 6. Motion & Transitions
+
+| Variable       | Wert    | Verwendung                  |
+|----------------|---------|-----------------------------|
+| `--transition` | `150ms ease` | Standard-Transition    |
+
+### Empfohlene Dauern
+
+| Dauer   | Verwendung                            |
+|---------|---------------------------------------|
+| `100ms` | Hover-States, Color-Changes           |
+| `150ms` | Standard-Transitions, Border-Changes  |
+| `200ms` | Layout-Changes, Transform-Animations  |
+| `350ms` | Einblende-Animationen, Card-Enter     |
+
+### Easing
+
+| Kurve                                  | Verwendung              |
+|----------------------------------------|-------------------------|
+| `ease`                                 | Standard                |
+| `cubic-bezier(.4, 0, .2, 1)`          | Material-Design-Feeling |
+| `cubic-bezier(0.16, 1, 0.3, 1)`       | Ease-Out (schnell raus) |
+
+---
+
+## 7. Component Patterns
+
+### Cards
+
+```css
+.prefix-card {
+  background: var(--bg-card);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 12px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.prefix-card:hover {
+  background: var(--bg-card-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+```
+
+### Buttons
+
+**Primary:**
+```css
+.prefix-btn-primary {
+  padding: 8px 16px;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+  font-size: 13px;
+  border-radius: var(--radius);
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.prefix-btn-primary:hover {
+  background: var(--accent-hover);
+}
+```
+
+**Secondary (Outline):**
+```css
+.prefix-btn-secondary {
+  padding: 8px 16px;
+  background: transparent;
+  color: var(--text-muted);
+  font-weight: 500;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.prefix-btn-secondary:hover {
+  color: var(--text-normal);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+```
+
+**Icon-Button:**
+```css
+.prefix-btn-icon {
+  padding: 6px;
+  background: none;
+  color: var(--text-muted);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.prefix-btn-icon:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-normal);
+}
+```
+
+### Inputs
+
+```css
+.prefix-input {
+  padding: 8px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-normal);
+  font-family: var(--font);
+  font-size: 13px;
+  transition: border-color var(--transition);
+}
+.prefix-input::placeholder {
+  color: var(--text-faint);
+}
+.prefix-input:focus {
+  border-color: var(--accent-border);
+  outline: none;
+}
+```
+
+### Chips / Tags
+
+```css
+.prefix-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.prefix-chip:hover {
+  color: var(--text-normal);
+  border-color: var(--border-strong);
+}
+.prefix-chip.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+```
+
+### Modals
+
+```css
+/* Overlay — einziger Ort wo backdrop-filter erlaubt ist */
+.prefix-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+
+/* Modal-Container */
+.prefix-modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 500px;
+  width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+```
+
+### Listen-Rows
+
+```css
+.prefix-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  transition: background var(--transition);
+  cursor: pointer;
+}
+.prefix-row:hover {
+  background: var(--bg-tertiary);
+}
+.prefix-row.active {
+  background: var(--accent-dim);
+  border-left: 3px solid var(--accent);
+}
+```
+
+### Dropdowns
+
+```css
+.prefix-dropdown {
+  position: absolute;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 100;
+}
+```
+
+### Scrollbars
+
+```css
+/* Bereits global in styles.css definiert */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }
+```
+
+### Empty States
+
+```css
+.prefix-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--text-faint);
+  text-align: center;
+}
+.prefix-empty-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+.prefix-empty-text {
+  font-size: 14px;
+}
+```
+
+### Status-Dots
+
+```css
+.prefix-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--danger);
+  flex-shrink: 0;
+}
+.prefix-status-dot.online {
+  background: var(--success);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+```
+
+---
+
+## 8. Naming Conventions
+
+### Plugin-Prefixe
+
+| Plugin        | Prefix    | Beispiel            |
+|---------------|-----------|---------------------|
+| Hub/Global    | `hub-`    | `.hub-header`       |
+| Soundboard    | `sb-`     | `.sb-app`           |
+| Radio         | (in `styles.css`) | `.radio-container` |
+| Game Library  | `gl-`     | `.gl-container`     |
+| LoL Stats     | `lol-`    | `.lol-container`    |
+| Streaming     | `stream-` | `.stream-container` |
+| Watch Together| `wt-`     | `.wt-container`     |
+
+Neues Plugin: Eigenes 2–4 Buchstaben Prefix wählen.
+
+### Klassen-Naming
+
+```
+.prefix-block              → Hauptcontainer
+.prefix-block-element      → Kindelement
+.prefix-block.active       → Zustandsmodifier
+.prefix-block.disabled     → Disabled-State
+```
+
+- Hyphen-separated, lowercase
+- Keine globalen generischen Klassen (`.card`, `.btn`) — immer mit Prefix
+- Modifier als separate Klasse, nicht als BEM-`--modifier`
+
+---
+
+## 9. Layout-Regeln
+
+### App-Shell
+
+```
+┌─────────────────────────────────────┐
+│  Header (44px, --bg-primary)        │  ← .hub-header
+│  [Logo] [Tabs...] [Controls]        │
+├─────────────────────────────────────┤
+│                                     │
+│  Content Area (flex: 1, scroll-y)   │  ← .hub-content > .tab-panel
+│                                     │
+└─────────────────────────────────────┘
+```
+
+- Header: `44px` Höhe, `var(--bg-primary)`, `border-bottom: 1px solid var(--border)`
+- Tab-Navigation: **Horizontal im Header** (keine Sidebar)
+- Content: `flex: 1`, `overflow-y: auto`
+
+### Grids
+
+```css
+.prefix-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
+```
+
+- `minmax` Minimum je nach Inhalt: 88px (Sound-Cards), 220px (User-Cards), 280px (Game-Tiles)
+- `gap: 16px` Standard, `gap: 3px` nur für dichte Grids (Soundboard)
+
+### Responsive Breakpoints
+
+| Breakpoint | Ziel        | Anpassungen                          |
+|------------|-------------|--------------------------------------|
+| `768px`    | Tablet      | Grid-Spalten reduzieren, Modal 90vw  |
+| `480px`    | Mobile      | Flex-Direction column, Padding kürzen|
+
+---
+
+## 10. Do / Don't
+
+### DO
+
+- Alle Farben über CSS-Variablen (`var(--bg-card)`, `var(--text-muted)`)
+- `var(--transition)` für alle Transitions
+- `var(--font)` / `var(--mono)` für Font-Stacks
+- `var(--radius)` / `var(--radius-lg)` für Border-Radius
+- Solide Hintergründe für Content-Elemente
+- `transform: translateY(-2px)` für Card-Hover
+- Dunkle `rgba(0,0,0,...)` Shadows für Elevation
+
+### DON'T
+
+- `backdrop-filter: blur()` außer auf Modal-Overlays
+- Farbige Glow-Shadows (`box-shadow: 0 0 Xpx var(--accent)`)
+- Dekorative `linear-gradient` / `radial-gradient` Hintergründe
+- `border-radius` über `6px` (außer `50%` Circles und `9999px` Pills)
+- Hardcoded Farben für Hintergründe/Text/Borders (Ausnahme: Brand-Colors wie Steam `#66c0f4`)
+- Font-Stacks direkt angeben (`font-family: 'Arial'`)
+- Eigene Accent-Farben definieren — `var(--accent)` verwenden
+- Globale Klassen ohne Plugin-Prefix
+
+---
+
+## 11. Theme-System
+
+### Accent-Themes (global)
+
+Wechselbar via `data-accent` Attribut auf Root-Element:
+
+```html
+<div data-accent="ember">   <!-- Standard: Orange -->
+<div data-accent="amethyst"> <!-- Lila -->
+<div data-accent="ocean">    <!-- Blau -->
+<div data-accent="jade">     <!-- Grün -->
+<div data-accent="rose">     <!-- Pink -->
+```
+
+Alle Accent-Varianten sind in `styles.css` definiert. Plugins greifen **nur** auf `var(--accent)`, `var(--accent-hover)`, `var(--accent-dim)` etc. zu.
+
+### Plugin-Themes (optional)
+
+Soundboard hat zusätzliche Farbthemes via `[data-theme="..."]`. Andere Plugins sollten das **nicht** nachbauen, sondern den globalen Accent nutzen.
+
+---
+
+## 12. Plugin-Template (Starter CSS)
+
+Minimales Boilerplate für ein neues Plugin `example` mit Prefix `ex-`:
+
+```css
+/* ── Example Plugin ──
+   Prefix: ex-
+   Inherits all tokens from :root (styles.css)
+   ────────────────────────────────────────── */
+
+/* Container */
+.ex-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Toolbar */
+.ex-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+/* Content Grid */
+.ex-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 16px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Card */
+.ex-card {
+  background: var(--bg-card);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 12px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.ex-card:hover {
+  background: var(--bg-card-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* Card Title */
+.ex-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-normal);
+  margin-bottom: 4px;
+}
+
+/* Card Meta */
+.ex-card-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Empty State */
+.ex-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--text-faint);
+  text-align: center;
+}
+
+/* Modal */
+.ex-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+.ex-modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 500px;
+  width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .ex-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 12px;
+    padding: 12px;
+  }
+}
+```

web/src/plugins/game-library/game-library.css

@@ -62,7 +62,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: rgba(255,255,255,0.05);
   border: 1px solid rgba(255,255,255,0.1);
   cursor: pointer;
@@ -234,7 +234,7 @@
   gap: 6px;
   background: var(--bg-tertiary);
   padding: 6px 12px 6px 6px;
-  border-radius: 20px;
+  border-radius: 4px;
   cursor: pointer;
   transition: all var(--transition);
 }
@@ -698,7 +698,7 @@
 }
 
 .gl-sort-select option {
-  background: #1a1a2e;
+  background: #1a1810;
   color: #c7d5e0;
 }
 
@@ -717,7 +717,7 @@
   color: #8899a6;
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 5px 12px;
-  border-radius: 20px;
+  border-radius: 4px;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.2s;
@@ -776,8 +776,8 @@
 }
 
 .gl-dialog {
-  background: #2a2a3e;
+  background: #2a2620;
-  border-radius: 12px;
+  border-radius: 6px;
   padding: 24px;
   max-width: 500px;
   width: 90%;
@@ -800,7 +800,7 @@
 .gl-dialog-input {
   width: 100%;
   padding: 10px 12px;
-  background: #1a1a2e;
+  background: #1a1810;
   border: 1px solid #444;
   border-radius: 8px;
   color: #fff;
@@ -841,7 +841,7 @@
 
 .gl-dialog-cancel {
   padding: 8px 18px;
-  background: #3a3a4e;
+  background: #322d26;
   color: #ccc;
   border: none;
   border-radius: 8px;
@@ -850,7 +850,7 @@
 }
 
 .gl-dialog-cancel:hover {
-  background: #4a4a5e;
+  background: #3a352d;
 }
 
 .gl-dialog-submit {
@@ -896,8 +896,8 @@
 }
 
 .gl-admin-panel {
-  background: #2a2a3e;
+  background: #2a2620;
-  border-radius: 12px;
+  border-radius: 6px;
   padding: 0;
   max-width: 600px;
   width: 92%;

web/src/plugins/lolstats/lolstats.css

@@ -70,7 +70,7 @@
   gap: 6px;
   padding: 4px 10px;
   border: 1px solid var(--bg-tertiary);
-  border-radius: 16px;
+  border-radius: 4px;
   background: var(--bg-secondary);
   color: var(--text-muted);
   font-size: 12px;
@@ -94,13 +94,13 @@
   align-items: center;
   gap: 16px;
   padding: 16px;
-  border-radius: 12px;
+  border-radius: 6px;
   background: var(--bg-secondary);
   margin-bottom: 12px;
 }
 .lol-profile-icon {
   width: 72px; height: 72px;
-  border-radius: 12px;
+  border-radius: 6px;
   border: 2px solid var(--bg-tertiary);
   object-fit: cover;
 }
@@ -170,7 +170,7 @@
 .lol-ranked-card {
   flex: 1;
   padding: 12px 14px;
-  border-radius: 10px;
+  border-radius: 6px;
   background: var(--bg-secondary);
   border-left: 4px solid var(--bg-tertiary);
 }
@@ -517,7 +517,7 @@
 .lol-tier-mode-btn {
   padding: 6px 14px;
   border: 1px solid var(--bg-tertiary);
-  border-radius: 16px;
+  border-radius: 4px;
   background: var(--bg-secondary);
   color: var(--text-muted);
   font-size: 12px;

web/src/plugins/soundboard/soundboard.css

@@ -6,10 +6,10 @@
    Theme Variables — Default (Discord Blurple)
    ──────────────────────────────────────────── */
 .sb-app {
-  --bg-deep: #1a1b1e;
+  --bg-deep: #1a1810;
-  --bg-primary: #1e1f22;
+  --bg-primary: #211e17;
-  --bg-secondary: #2b2d31;
+  --bg-secondary: #2a2620;
-  --bg-tertiary: #313338;
+  --bg-tertiary: #322d26;
   --bg-modifier-hover: rgba(79, 84, 92, .16);
   --bg-modifier-active: rgba(79, 84, 92, .24);
   --bg-modifier-selected: rgba(79, 84, 92, .32);
@@ -183,7 +183,7 @@
   gap: 8px;
   padding: 5px 12px 5px 10px;
   border: 1px solid rgba(255, 255, 255, .08);
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-tertiary);
   color: var(--text-normal);
   font-family: var(--font);
@@ -283,7 +283,7 @@
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: rgba(35, 165, 90, .12);
   font-size: 12px;
   color: var(--green);
@@ -295,13 +295,12 @@
   height: 7px;
   border-radius: 50%;
   background: var(--green);
-  box-shadow: 0 0 6px rgba(35, 165, 90, .6);
   animation: pulse-dot 2s ease-in-out infinite;
 }
 
 @keyframes pulse-dot {
-  0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, .5); }
+  0%, 100% { opacity: .7; }
-  50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); }
+  50% { opacity: 1; }
 }
 
 .conn-ping {
@@ -325,7 +324,7 @@
 .conn-modal {
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 4px;
   width: 340px;
   box-shadow: 0 20px 60px rgba(0,0,0,.4);
   overflow: hidden;
@@ -437,7 +436,7 @@
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-tertiary);
   color: var(--text-muted);
   font-family: var(--font);
@@ -490,7 +489,7 @@
   height: 32px;
   padding: 0 28px 0 32px;
   border: 1px solid rgba(255, 255, 255, .06);
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-secondary);
   color: var(--text-normal);
   font-family: var(--font);
@@ -541,7 +540,7 @@
   max-width: 460px;
   flex: 1;
   padding: 4px 6px 4px 8px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-secondary);
   border: 1px solid rgba(255, 255, 255, .08);
 }
@@ -571,7 +570,7 @@
 .url-import-btn {
   height: 24px;
   padding: 0 10px;
-  border-radius: 14px;
+  border-radius: 6px;
   border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .45);
   background: rgba(var(--accent-rgb, 88, 101, 242), .12);
   color: var(--accent);
@@ -617,7 +616,7 @@
   gap: 6px;
   padding: 6px 12px;
   border: 1px solid rgba(255, 255, 255, .08);
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-tertiary);
   color: var(--text-muted);
   font-family: var(--font);
@@ -656,20 +655,20 @@
 
 .tb-btn.party:hover {
   background: var(--yellow);
-  color: #1a1b1e;
+  color: #1a1810;
   border-color: var(--yellow);
 }
 
 .tb-btn.party.active {
   background: var(--yellow);
-  color: #1a1b1e;
+  color: #1a1810;
   border-color: var(--yellow);
   animation: party-btn 600ms ease-in-out infinite alternate;
 }
 
 @keyframes party-btn {
-  from { box-shadow: 0 0 8px rgba(240, 178, 50, .4); }
+  from { opacity: .85; }
-  to { box-shadow: 0 0 20px rgba(240, 178, 50, .7); }
+  to { opacity: 1; }
 }
 
 .tb-btn.stop {
@@ -689,7 +688,7 @@
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, .06);
 }
@@ -739,7 +738,7 @@
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, .06);
 }
@@ -759,7 +758,6 @@
 
 .theme-dot.active {
   border-color: var(--white);
-  box-shadow: 0 0 6px rgba(255, 255, 255, .3);
 }
 
 /* ── Analytics Strip ── */
@@ -778,7 +776,7 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-radius: 12px;
+  border-radius: 6px;
   background: var(--bg-secondary);
   border: 1px solid rgba(255, 255, 255, .08);
 }
@@ -871,7 +869,7 @@
   align-items: center;
   gap: 6px;
   padding: 4px 12px;
-  border-radius: 20px;
+  border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   color: var(--text-muted);
@@ -946,28 +944,13 @@
   animation: card-enter 350ms ease-out forwards;
 }
 
-.sound-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  opacity: 0;
-  transition: opacity var(--transition);
-  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
-  pointer-events: none;
-}
-
 .sound-card:hover {
   background: var(--bg-tertiary);
   transform: translateY(-3px);
-  box-shadow: var(--shadow-med), 0 0 20px var(--accent-glow);
+  box-shadow: var(--shadow-med);
   border-color: rgba(88, 101, 242, .2);
 }
 
-.sound-card:hover::before {
-  opacity: 1;
-}
-
 .sound-card:active {
   transform: translateY(0);
   transition-duration: 50ms;
@@ -975,12 +958,7 @@
 
 .sound-card.playing {
   border-color: var(--accent);
-  animation: card-enter 350ms ease-out forwards, playing-glow 1.2s ease-in-out infinite alternate;
+  animation: card-enter 350ms ease-out forwards;
-}
-
-@keyframes playing-glow {
-  from { box-shadow: 0 0 4px var(--accent-glow); }
-  to { box-shadow: 0 0 16px var(--accent-glow); }
 }
 
 @keyframes card-enter {
@@ -1170,7 +1148,7 @@
   align-items: center;
   gap: 6px;
   padding: 4px 12px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: rgba(var(--accent-rgb, 88, 101, 242), .12);
   border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .2);
   font-size: 12px;
@@ -1221,7 +1199,7 @@
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
-  border-radius: 20px;
+  border-radius: 4px;
   background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, .06);
 }
@@ -1301,20 +1279,7 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(45deg,
+  background: rgba(255, 255, 255, .03);
-    rgba(255, 0, 0, .04),
-    rgba(0, 255, 0, .04),
-    rgba(0, 0, 255, .04),
-    rgba(255, 255, 0, .04)
-  );
-  background-size: 400% 400%;
-  animation: party-grad 3s ease infinite;
-}
-
-@keyframes party-grad {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
 }
 
 @keyframes party-hue {
@@ -1386,7 +1351,7 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 10px 20px;
-  border-radius: 20px;
+  border-radius: 4px;
   font-size: 13px;
   font-weight: 600;
   z-index: 100;
@@ -1602,7 +1567,7 @@
   justify-content: space-between;
   gap: 10px;
   padding: 8px 10px;
-  border-radius: 10px;
+  border-radius: 6px;
   background: var(--bg-tertiary);
   border: 1px solid rgba(255, 255, 255, .08);
   flex-wrap: wrap;
@@ -1626,7 +1591,7 @@
   max-height: 52vh;
   overflow-y: auto;
   border: 1px solid rgba(255, 255, 255, .08);
-  border-radius: 10px;
+  border-radius: 6px;
   background: var(--bg-primary);
 }
 
@@ -1852,7 +1817,7 @@
   align-items: center;
   gap: 14px;
   padding: 64px 72px;
-  border-radius: 24px;
+  border-radius: 6px;
   border: 2.5px dashed rgba(var(--accent-rgb), .55);
   background: rgba(var(--accent-rgb), .07);
   animation: drop-pulse 2.2s ease-in-out infinite;
@@ -1861,11 +1826,9 @@
 @keyframes drop-pulse {
   0%, 100% {
     border-color: rgba(var(--accent-rgb), .45);
-    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
   }
   50% {
     border-color: rgba(var(--accent-rgb), .9);
-    box-shadow: 0 0 60px 12px rgba(var(--accent-rgb), .12);
   }
 }
 
@@ -1902,7 +1865,7 @@
   width: 340px;
   background: var(--bg-secondary);
   border: 1px solid rgba(255, 255, 255, .09);
-  border-radius: 14px;
+  border-radius: 6px;
   box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
   z-index: 200;
   animation: slide-up 200ms cubic-bezier(.16,1,.3,1);
@@ -2048,7 +2011,7 @@
   width: 420px; max-width: 92vw;
   background: var(--bg-secondary);
   border: 1px solid rgba(255, 255, 255, .1);
-  border-radius: 16px;
+  border-radius: 4px;
   box-shadow: 0 12px 60px rgba(0, 0, 0, .5);
   animation: scale-in 200ms cubic-bezier(.16, 1, .3, 1);
 }

web/src/plugins/streaming/streaming.css

@@ -536,7 +536,7 @@
 
 .stream-admin-panel {
   background: var(--bg-secondary);
-  border-radius: 12px;
+  border-radius: 6px;
   width: 560px;
   max-width: 95vw;
   max-height: 80vh;
@@ -649,7 +649,7 @@
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
-  border-radius: 14px;
+  border-radius: 6px;
   font-size: 12px;
   color: var(--text-muted);
   background: var(--bg-secondary);

web/src/plugins/watch-together/watch-together.css

@@ -554,9 +554,9 @@
 }
 
 .wt-quality-select {
-  background: var(--bg-secondary, #2a2a3e);
+  background: var(--bg-secondary, #2a2620);
   color: var(--text-primary, #e0e0e0);
-  border: 1px solid var(--border-color, #3a3a4e);
+  border: 1px solid var(--border-color, #322d26);
   border-radius: 6px;
   padding: 2px 6px;
   font-size: 12px;
@@ -862,9 +862,9 @@
   border-radius: 50%;
   flex-shrink: 0;
 }
-.wt-sync-synced { background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.5); }
+.wt-sync-synced { background: #2ecc71; }
-.wt-sync-drifting { background: #f1c40f; box-shadow: 0 0 6px rgba(241, 196, 15, 0.5); }
+.wt-sync-drifting { background: #f1c40f; }
-.wt-sync-desynced { background: #e74c3c; box-shadow: 0 0 6px rgba(231, 76, 60, 0.5); }
+.wt-sync-desynced { background: #e74c3c; }
 
 /* ══════════════════════════════════════
    VOTE BUTTONS

web/src/styles.css

@@ -1,24 +1,35 @@
+/* ── Google Fonts ── */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');
+
 /* ── CSS Variables ── */
 :root {
-  --bg-deep: #1a1b1e;
+  --bg-deep: #1a1810;
-  --bg-primary: #1e1f22;
+  --bg-primary: #211e17;
-  --bg-secondary: #2b2d31;
+  --bg-secondary: #2a2620;
-  --bg-tertiary: #313338;
+  --bg-tertiary: #322d26;
+  --bg-card: #2a2620;
+  --bg-card-hover: #322d26;
+  --bg-input: #1e1b15;
+  --bg-header: #1e1b14;
   --text-normal: #dbdee1;
   --text-muted: #949ba4;
   --text-faint: #6d6f78;
   --accent: #e67e22;
   --accent-rgb: 230, 126, 34;
   --accent-hover: #d35400;
+  --accent-dim: rgba(230, 126, 34, 0.15);
+  --accent-border: rgba(230, 126, 34, 0.35);
   --success: #57d28f;
   --danger: #ed4245;
   --warning: #fee75c;
-  --border: rgba(255, 255, 255, 0.06);
+  --border: rgba(255, 255, 255, 0.05);
-  --radius: 8px;
+  --border-strong: rgba(255, 255, 255, 0.08);
-  --radius-lg: 12px;
+  --radius: 4px;
+  --radius-lg: 6px;
   --transition: 150ms ease;
-  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
-  --header-height: 56px;
+  --mono: 'DM Mono', monospace;
+  --header-height: 44px;
 }
 
 /* ── Reset & Base ── */
@@ -33,7 +44,7 @@
 html, body {
   height: 100%;
   font-family: var(--font);
-  font-size: 15px;
+  font-size: 13px;
   color: var(--text-normal);
   background: var(--bg-deep);
   -webkit-font-smoothing: antialiased;
@@ -261,7 +272,7 @@ html, body {
 .hub-update-modal {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 6px;
   padding: 32px 40px;
   text-align: center;
   min-width: 320px;
@@ -388,7 +399,7 @@ html, body {
 .hub-admin-modal {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 6px;
   width: 340px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 }
@@ -475,7 +486,7 @@ html, body {
 .hub-version-modal {
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 4px;
   width: 340px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
   overflow: hidden;
@@ -798,10 +809,10 @@ html, body {
   background: var(--bg-deep);
 
   /* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */
-  --bg-deep: #1a1b1e;
+  --bg-deep: #1a1810;
-  --bg-primary: #1e1f22;
+  --bg-primary: #211e17;
-  --bg-secondary: #2b2d31;
+  --bg-secondary: #2a2620;
-  --bg-tertiary: #313338;
+  --bg-tertiary: #322d26;
   --text-normal: #dbdee1;
   --text-muted: #949ba4;
   --text-faint: #6d6f78;
@@ -859,7 +870,7 @@ html, body {
   align-items: center;
   padding: 0 16px;
   height: 52px;
-  background: var(--bg-secondary, #2b2d31);
+  background: var(--bg-secondary, #2a2620);
   border-bottom: 1px solid rgba(0, 0, 0, .24);
   z-index: 10;
   flex-shrink: 0;
@@ -958,8 +969,7 @@ html, body {
 .radio-search-wrap {
   display: flex;
   align-items: center;
-  background: rgba(30, 31, 34, 0.92);
+  background: rgba(33, 30, 23, 0.92);
-  backdrop-filter: blur(12px);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 0 14px;
@@ -1006,8 +1016,7 @@ html, body {
 /* ── Search Results ── */
 .radio-search-results {
   margin-top: 6px;
-  background: rgba(30, 31, 34, 0.95);
+  background: rgba(33, 30, 23, 0.95);
-  backdrop-filter: blur(12px);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   max-height: 360px;
@@ -1079,8 +1088,7 @@ html, body {
   align-items: center;
   gap: 4px;
   padding: 10px 14px;
-  background: rgba(30, 31, 34, 0.92);
+  background: rgba(33, 30, 23, 0.92);
-  backdrop-filter: blur(12px);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   color: var(--text-normal);
@@ -1102,7 +1110,7 @@ html, body {
   background: var(--accent);
   color: #fff;
   padding: 1px 6px;
-  border-radius: 10px;
+  border-radius: 6px;
   min-width: 18px;
   text-align: center;
 }
@@ -1115,8 +1123,7 @@ html, body {
   width: 340px;
   height: 100%;
   z-index: 15;
-  background: rgba(30, 31, 34, 0.95);
+  background: rgba(33, 30, 23, 0.95);
-  backdrop-filter: blur(16px);
   border-left: 1px solid var(--border);
   display: flex;
   flex-direction: column;
@@ -1407,7 +1414,7 @@ html, body {
   width: 100px;
   height: 4px;
   border-radius: 2px;
-  background: var(--bg-tertiary, #383a40);
+  background: var(--bg-tertiary, #3a352d);
   outline: none;
   cursor: pointer;
 }
@@ -1456,7 +1463,6 @@ html, body {
 
 .radio-theme-dot.active {
   border-color: #fff;
-  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
 }
 
 /* ── Station count ── */
@@ -1467,7 +1473,7 @@ html, body {
   z-index: 10;
   font-size: 12px;
   color: var(--text-faint);
-  background: rgba(30, 31, 34, 0.8);
+  background: rgba(33, 30, 23, 0.8);
   padding: 4px 10px;
   border-radius: 20px;
   pointer-events: none;
@@ -1480,7 +1486,7 @@ html, body {
   z-index: 10;
   font-size: 12px;
   color: var(--text-faint);
-  background: rgba(30, 31, 34, 0.8);
+  background: rgba(33, 30, 23, 0.8);
   padding: 4px 10px;
   border-radius: 20px;
   text-decoration: none;
@@ -1489,7 +1495,7 @@ html, body {
 
 .radio-attribution:hover {
   color: var(--text-normal);
-  background: rgba(30, 31, 34, 0.92);
+  background: rgba(33, 30, 23, 0.92);
 }
 
 /* ── Spinner ── */
@@ -1605,7 +1611,7 @@ html, body {
 .radio-modal {
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 4px;
   width: 340px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
   overflow: hidden;
@@ -1699,7 +1705,7 @@ html, body {
   height: min(620px, calc(100vh - 60px));
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
   animation: hub-modal-in 200ms ease;
@@ -2377,7 +2383,7 @@ html, body {
 .hub-login-modal {
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 4px;
   width: 380px;
   max-width: 92vw;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
@@ -2574,7 +2580,7 @@ html, body {
 .hub-usettings-panel {
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 4px;
   width: 520px;
   max-width: 95vw;
   max-height: 85vh;