chore: update version to 2.3.0

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Harden server security, rework landing page and refresh branding
2026-06-11 10:18:48 +02:00 · 2026-06-11 10:14:36 +02:00 · 2026-06-11 09:27:34 +02:00 · 2026-06-03 10:40:38 +02:00 · 2026-06-02 09:21:42 +02:00 · 2026-06-02 09:19:21 +02:00
51 changed files with 3238 additions and 1945 deletions
@@ -1,5 +1,8 @@
 node_modules/
 dist/
 redlight.db
 redlight.db-wal
 redlight.db-shm
 uploads/
 .env
 .claude/
@@ -2,7 +2,7 @@
 <html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -1,7 +1,7 @@
 {
  "name": "redlight",
  "private": true,
-  "version": "2.1.1",
+  "version": "2.3.0",
  "license": "GPL-3.0-or-later",
  "type": "module",
  "scripts": {
@@ -20,33 +20,33 @@
    "cors": "^2.8.5",
    "dotenv": "^17.3.1",
    "exceljs": "^4.4.0",
-    "express": "^4.21.0",
+    "express": "^5.2.1",
-    "express-rate-limit": "^7.5.1",
+    "express-rate-limit": "^8.5.2",
    "flatpickr": "^4.6.13",
    "ioredis": "^5.10.0",
    "jsonwebtoken": "^9.0.0",
-    "lucide-react": "^0.460.0",
+    "lucide-react": "^1.16.0",
    "multer": "^2.1.0",
    "nodemailer": "^8.0.1",
    "otpauth": "^9.5.0",
-    "pdfkit": "^0.17.2",
+    "pdfkit": "^0.18.0",
    "pg": "^8.18.0",
    "qrcode": "^1.5.4",
-    "rate-limit-redis": "^4.3.1",
+    "rate-limit-redis": "^5.0.0",
-    "react": "^18.3.0",
+    "react": "^19.2.6",
-    "react-dom": "^18.3.0",
+    "react-dom": "^19.2.6",
    "react-hot-toast": "^2.4.0",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^7.15.1",
-    "uuid": "^13.0.0",
+    "uuid": "^14.0.0",
    "xml2js": "^0.6.0"
  },
  "devDependencies": {
-    "@types/react": "^18.3.0",
+    "@tailwindcss/postcss": "^4.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.3.0",
    "vite": "^8.0.0"
  }
 }
@@ -1,6 +1,5 @@
 export default {
  plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
 };
@@ -0,0 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Speech bubble tail -->
  <path d="M 185 325 L 148 425 L 248 360 Z" fill="#2B3140" stroke="#2B3140" stroke-width="14" stroke-linejoin="round"/>
  <!-- Speech bubble outline -->
  <circle cx="256" cy="240" r="120" fill="none" stroke="#2B3140" stroke-width="34"/>
  <!-- Red dot -->
  <circle cx="262" cy="234" r="76" fill="#ED2224"/>
  <!-- Sound waves right -->
  <path d="M 423 100 A 218 218 0 0 1 423 380" fill="none" stroke="#ED2224" stroke-width="32" stroke-linecap="round"/>
  <path d="M 413 160 A 176 176 0 0 1 413 320" fill="none" stroke="#ED2224" stroke-width="30" stroke-linecap="round"/>
  <!-- Sound waves left -->
  <path d="M 89 100 A 218 218 0 0 0 89 380" fill="none" stroke="#ED2224" stroke-width="32" stroke-linecap="round"/>
  <path d="M 99 160 A 176 176 0 0 0 99 320" fill="none" stroke="#ED2224" stroke-width="30" stroke-linecap="round"/>
 </svg>
@@ -1,5 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
  <rect width="32" height="32" rx="8" fill="#ef4444"/>
  <circle cx="16" cy="16" r="8" fill="white" opacity="0.9"/>
  <circle cx="16" cy="16" r="4" fill="#ef4444"/>
 </svg>
@@ -0,0 +1,20 @@
 import { getDb } from './database.js';
 /**
 * Resolve the configured application name.
 * Resolution order: admin-set 'app_name' setting → APP_NAME env var → 'Redlight'.
 *
 * The app name is stored in the settings table under the key 'app_name'
 * (see routes/branding.js). This helper is the single source of truth so the
 * configured name is used consistently across emails, the 2FA issuer, etc.
 */
 export async function getAppName() {
  try {
    const db = getDb();
    const row = await db.get("SELECT value FROM settings WHERE key = 'app_name'");
    if (row?.value) return row.value;
  } catch {
    // fall through to env/default if the DB is unavailable
  }
  return process.env.APP_NAME || 'Redlight';
 }
@@ -1,6 +1,7 @@
 import crypto from 'crypto';
 import xml2js from 'xml2js';
 import { log, fmtDuration, fmtStatus, fmtMethod, fmtReturncode, sanitizeBBBParams } from './logger.js';
 import { t } from './emaili18n.js';
 const BBB_URL = process.env.BBB_URL || 'https://your-bbb-server.com/bigbluebutton/api/';
 const BBB_SECRET = process.env.BBB_SECRET || '';
@@ -73,15 +74,15 @@ function getRoomPasswords(uid) {
  return { moderatorPW: modPw, attendeePW: attPw };
 }
-export async function createMeeting(room, logoutURL, loginURL = null, presentationUrl = null, analyticsCallbackURL = null) {
+export async function createMeeting(room, logoutURL, loginURL = null, presentationUrl = null, analyticsCallbackURL = null, lang = 'en') {
  const { moderatorPW, attendeePW } = getRoomPasswords(room.uid);
  // Build welcome message with guest invite link
  // HTML-escape user-controlled content to prevent stored XSS via BBB
-  let welcome = room.welcome_message ? escapeHtml(room.welcome_message) : t('defaultWelcome');
+  let welcome = room.welcome_message ? escapeHtml(room.welcome_message) : escapeHtml(t(lang, 'bbb.defaultWelcome'));
  if (logoutURL) {
    const guestLink = `${logoutURL}/join/${room.uid}`;
-    welcome += `<br><br>To invite other participants, share this link:<br><a href="${escapeHtml(guestLink)}">${escapeHtml(guestLink)}</a>`;
+    welcome += `<br><br>${escapeHtml(t(lang, 'bbb.inviteHint'))}<br><a href="${escapeHtml(guestLink)}">${escapeHtml(guestLink)}</a>`;
    // Access code is intentionally NOT shown in the welcome message to prevent
    // leaking it to all meeting participants.
  }
@@ -129,7 +130,7 @@ export async function createMeeting(room, logoutURL, loginURL = null, presentati
  return apiCall('create', params, xmlBody);
 }
-export async function joinMeeting(uid, name, isModerator = false, avatarURL = null) {
+export async function joinMeeting(uid, name, isModerator = false, avatarURL = null, darkMode = false) {
  const { moderatorPW, attendeePW } = getRoomPasswords(uid);
  const params = {
    meetingID: uid,
@@ -140,6 +141,11 @@ export async function joinMeeting(uid, name, isModerator = false, avatarURL = nu
  if (avatarURL) {
    params.avatarURL = avatarURL;
  }
  if (darkMode) {
    // Per-user userdata override: start the client in dark theme for users who
    // have a dark theme active in Redlight. Read by BBB as bbb_prefer_dark_theme.
    params['userdata-bbb_prefer_dark_theme'] = 'true';
  }
  return buildUrl('join', params);
 }
@@ -815,6 +815,51 @@ export async function initDatabase() {
    await db.exec("ALTER TABLE rooms ADD COLUMN analytics_visibility TEXT DEFAULT 'owner'");
  }
  // ── Recordings cache table ────────────────────────────────────────────
  if (isPostgres) {
    await db.exec(`
      CREATE TABLE IF NOT EXISTS recordings (
        id SERIAL PRIMARY KEY,
        record_id TEXT UNIQUE NOT NULL,
        meeting_id TEXT NOT NULL,
        name TEXT,
        state TEXT,
        published INTEGER DEFAULT 1,
        start_time TEXT,
        end_time TEXT,
        participants TEXT,
        size TEXT,
        formats TEXT NOT NULL DEFAULT '[]',
        metadata TEXT DEFAULT '{}',
        created_at TIMESTAMP DEFAULT NOW(),
        updated_at TIMESTAMP DEFAULT NOW()
      );
      CREATE INDEX IF NOT EXISTS idx_recordings_record_id ON recordings(record_id);
      CREATE INDEX IF NOT EXISTS idx_recordings_meeting_id ON recordings(meeting_id);
    `);
  } else {
    await db.exec(`
      CREATE TABLE IF NOT EXISTS recordings (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        record_id TEXT UNIQUE NOT NULL,
        meeting_id TEXT NOT NULL,
        name TEXT,
        state TEXT,
        published INTEGER DEFAULT 1,
        start_time TEXT,
        end_time TEXT,
        participants TEXT,
        size TEXT,
        formats TEXT NOT NULL DEFAULT '[]',
        metadata TEXT DEFAULT '{}',
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
      );
      CREATE INDEX IF NOT EXISTS idx_recordings_record_id ON recordings(record_id);
      CREATE INDEX IF NOT EXISTS idx_recordings_meeting_id ON recordings(meeting_id);
    `);
  }
  // ── Default admin (only on very first start) ────────────────────────────
  const adminAlreadySeeded = await db.get("SELECT value FROM settings WHERE key = 'admin_seeded'");
  if (!adminAlreadySeeded) {
@@ -64,7 +64,6 @@ export async function sendVerificationEmail(to, name, verifyUrl, appName = 'Redl
  const from = process.env.SMTP_FROM || process.env.SMTP_USER;
  const headerAppName = sanitizeHeaderValue(appName);
  const safeName = escapeHtml(name);
  const safeAppName = escapeHtml(appName);
  await transporter.sendMail({
    from: `"${headerAppName}" <${from}>`,
@@ -112,7 +111,6 @@ export async function sendFederationInviteEmail(to, name, fromUser, roomName, me
  const safeFromUser = escapeHtml(fromUser);
  const safeRoomName = escapeHtml(roomName);
  const safeMessage = message ? escapeHtml(message) : null;
  const safeAppName = escapeHtml(appName);
  const introHtml = t(lang, 'email.federationInvite.intro')
    .replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);
@@ -144,6 +142,61 @@ export async function sendFederationInviteEmail(to, name, fromUser, roomName, me
  });
 }
 /**
 * Send a guest meeting invitation email with a direct join link.
 * @param {string} to        - recipient email
 * @param {string} fromUser  - sender display name
 * @param {string} roomName  - name of the room
 * @param {string} message   - optional personal message
 * @param {string} joinUrl   - direct guest join URL
 * @param {string} appName   - branding app name
 * @param {string} lang      - language code
 */
 export async function sendGuestInviteEmail(to, fromUser, roomName, message, joinUrl, appName = 'Redlight', lang = 'en') {
  if (!transporter) {
    throw new Error('SMTP not configured');
  }
  const from = process.env.SMTP_FROM || process.env.SMTP_USER;
  const headerAppName = sanitizeHeaderValue(appName);
  const safeFromUser = escapeHtml(fromUser);
  const safeRoomName = escapeHtml(roomName);
  const safeMessage = message ? escapeHtml(message) : null;
  const introHtml = t(lang, 'email.guestInvite.intro')
    .replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);
  await transporter.sendMail({
    from: `"${headerAppName}" <${from}>`,
    to,
    subject: t(lang, 'email.guestInvite.subject', { appName: headerAppName, fromUser: sanitizeHeaderValue(fromUser) }),
    html: `
      <div style="font-family:Arial,sans-serif;max-width:520px;margin:0 auto;padding:32px;background:#1e1e2e;color:#cdd6f4;border-radius:12px;">
        <h2 style="color:#cba6f7;margin-top:0;">Meeting Invitation</h2>
        <p>${introHtml}</p>
        <div style="background:#313244;border-radius:8px;padding:16px;margin:20px 0;">
          <p style="margin:0 0 8px 0;font-size:13px;color:#7f849c;">${t(lang, 'email.guestInvite.roomLabel')}</p>
          <p style="margin:0;font-size:16px;font-weight:bold;color:#cdd6f4;">${safeRoomName}</p>
          ${safeMessage ? `<p style="margin:12px 0 0 0;font-size:13px;color:#a6adc8;font-style:italic;">&quot;${safeMessage}&quot;</p>` : ''}
        </div>
        <p style="text-align:center;margin:28px 0;">
          <a href="${joinUrl}"
             style="display:inline-block;background:#cba6f7;color:#1e1e2e;padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:bold;">
            ${t(lang, 'email.guestInvite.joinButton')}
          </a>
        </p>
        <p style="font-size:13px;color:#7f849c;">
          ${t(lang, 'email.linkHint')}<br/>
          <a href="${joinUrl}" style="color:#89b4fa;word-break:break-all;">${escapeHtml(joinUrl)}</a>
        </p>
        <hr style="border:none;border-top:1px solid #313244;margin:24px 0;"/>
        <p style="font-size:12px;color:#585b70;">${t(lang, 'email.guestInvite.footer')}</p>
      </div>
    `,
    text: `${t(lang, 'email.guestInvite.intro', { fromUser })}\n${t(lang, 'email.guestInvite.roomLabel')} ${roomName}${message ? `\n"${message}"` : ''}\n\n${t(lang, 'email.guestInvite.joinButton')}: ${joinUrl}\n\n- ${appName}`,
  });
 }
 /**
 * Send a calendar event invitation email (federated).
 */
@@ -175,7 +228,7 @@ export async function sendCalendarInviteEmail(to, name, fromUser, title, startTi
        <p>${introHtml}</p>
        <div style="background:#313244;border-radius:8px;padding:16px;margin:20px 0;">
          <p style="margin:0 0 4px 0;font-size:15px;font-weight:bold;color:#cdd6f4;">${safeTitle}</p>
-          <p style="margin:6px 0 0 0;font-size:13px;color:#a6adc8;">🕐 ${escapeHtml(formatDate(startTime))} - ${escapeHtml(formatDate(endTime))}</p>
+          <p style="margin:6px 0 0 0;font-size:13px;color:#a6adc8;">${escapeHtml(formatDate(startTime))} - ${escapeHtml(formatDate(endTime))}</p>
          ${safeDesc ? `<p style="margin:10px 0 0 0;font-size:13px;color:#a6adc8;font-style:italic;">&quot;${safeDesc}&quot;</p>` : ''}
        </div>
        <p style="text-align:center;margin:28px 0;">
@@ -1,6 +1,6 @@
 {
  "email": {
-    "greeting": "Hey {name} 👋",
+    "greeting": "Hallo {name},",
    "viewInvitation": "Einladung anzeigen",
    "invitationFooter": "Öffne den Link oben, um die Einladung anzunehmen oder abzulehnen.",
    "linkHint": "Oder kopiere diesen Link in deinen Browser:",
@@ -13,7 +13,7 @@
    },
    "invite": {
      "subject": "{appName} - Du wurdest eingeladen",
-      "title": "Du wurdest eingeladen! 🎉",
+      "title": "Du wurdest eingeladen",
      "intro": "Du wurdest eingeladen, ein Konto auf {appName} zu erstellen.",
      "prompt": "Klicke auf den Button, um dich zu registrieren:",
      "button": "Konto erstellen",
@@ -25,6 +25,13 @@
      "intro": "Du hast eine Meeting-Einladung von {fromUser} erhalten.",
      "roomLabel": "Raum:"
    },
    "guestInvite": {
      "subject": "{appName} - Einladung zu einem Meeting",
      "intro": "{fromUser} hat dich zu einem Meeting eingeladen.",
      "roomLabel": "Raum:",
      "joinButton": "Meeting beitreten",
      "footer": "Klicke auf den Button oben, um dem Meeting beizutreten."
    },
    "calendarInvite": {
      "subject": "{appName} - Kalendereinladung von {fromUser}",
      "intro": "Du hast eine Kalendereinladung von {fromUser} erhalten."
@@ -35,5 +42,9 @@
      "note": "Der Termin wurde automatisch aus deinem Kalender entfernt.",
      "footer": "Diese Nachricht wurde automatisch von {appName} versendet."
    }
  },
  "bbb": {
    "defaultWelcome": "Willkommen im Meeting!",
    "inviteHint": "Lade weitere Teilnehmer ein, indem du diesen Link teilst:"
  }
 }
@@ -1,6 +1,6 @@
 {
  "email": {
-    "greeting": "Hey {name} 👋",
+    "greeting": "Hello {name},",
    "viewInvitation": "View Invitation",
    "invitationFooter": "Open the link above to accept or decline the invitation.",
    "linkHint": "Or copy this link in your browser:",
@@ -13,7 +13,7 @@
    },
    "invite": {
      "subject": "{appName} - You've been invited",
-      "title": "You've been invited! 🎉",
+      "title": "You have been invited",
      "intro": "You have been invited to create an account on {appName}.",
      "prompt": "Click the button below to register:",
      "button": "Create Account",
@@ -25,6 +25,13 @@
      "intro": "You have received a meeting invitation from {fromUser}.",
      "roomLabel": "Room:"
    },
    "guestInvite": {
      "subject": "{appName} - You're invited to a meeting",
      "intro": "{fromUser} has invited you to a meeting.",
      "roomLabel": "Room:",
      "joinButton": "Join Meeting",
      "footer": "Click the button above to join the meeting."
    },
    "calendarInvite": {
      "subject": "{appName} - Calendar invitation from {fromUser}",
      "intro": "You have received a calendar invitation from {fromUser}."
@@ -35,5 +42,9 @@
      "note": "The event has been automatically removed from your calendar.",
      "footer": "This message was sent automatically by {appName}."
    }
  },
  "bbb": {
    "defaultWelcome": "Welcome to the meeting!",
    "inviteHint": "To invite other participants, share this link:"
  }
 }
@@ -51,7 +51,14 @@ const corsOptions = process.env.APP_URL
  ? { origin: process.env.APP_URL, credentials: true }
  : { origin: false };
 app.use(cors(corsOptions));
-app.use(express.json({ limit: '100kb' }));
+// Global JSON body limit kept tight as a hardening measure. The BBB learning
 // analytics callback can send much larger payloads, so it is excluded here and
 // gets its own, more generous limit on the route itself (see routes/analytics.js).
 const jsonParser = express.json({ limit: '100kb' });
 app.use((req, res, next) => {
  if (req.path.startsWith('/api/analytics/callback/')) return next();
  return jsonParser(req, res, next);
 });
 // Request/Response logging (filters sensitive fields)
 app.use(requestResponseLogger);
@@ -60,9 +67,10 @@ async function start() {
  await initDatabase();
  initMailer();
-  // Serve uploaded files (branding only — avatars served via /api/auth/avatar/:filename, presentations require auth)
+  // Serve uploaded files (avatars are served via /api/auth/avatar/:filename)
  const uploadsPath = path.join(__dirname, '..', 'uploads');
  app.use('/uploads/branding', express.static(path.join(uploadsPath, 'branding')));
  // Presentations are served via /api/rooms/presentations/:filename?token=… (HMAC-protected)
  // API Routes
  app.use('/api/auth', authRoutes);
@@ -99,7 +107,7 @@ async function start() {
  // Serve static files in production
  if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, '..', 'dist')));
-    app.get('*', (req, res) => {
+    app.get('/*splat', (req, res) => {
      res.sendFile(path.join(__dirname, '..', 'dist', 'index.html'));
    });
  }
@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { getDb } from '../config/database.js';
 import { authenticateToken, requireAdmin, getBaseUrl } from '../middleware/auth.js';
 import { isMailerConfigured, sendInviteEmail } from '../config/mailer.js';
 import { getAppName } from '../config/appName.js';
 import { log } from '../config/logger.js';
 import {
  getOAuthConfig,
@@ -38,6 +39,9 @@ router.post('/users', authenticateToken, requireAdmin, async (req, res) => {
    if (password.length < 8) {
      return res.status(400).json({ error: 'Password must be at least 8 characters long' });
    }
    if (password.length > 64) {
      return res.status(400).json({ error: 'Password must not exceed 64 characters' });
    }
    // M9: email format validation
    if (!EMAIL_RE.test(email)) {
@@ -160,6 +164,9 @@ router.put('/users/:id/password', authenticateToken, requireAdmin, async (req, r
    if (!newPassword || typeof newPassword !== 'string' || newPassword.length < 8) {
      return res.status(400).json({ error: 'Password must be at least 8 characters long' });
    }
    if (newPassword.length > 64) {
      return res.status(400).json({ error: 'Password must not exceed 64 characters' });
    }
    const db = getDb();
    const hash = await bcrypt.hash(newPassword, 12);
@@ -211,9 +218,8 @@ router.post('/invites', authenticateToken, requireAdmin, async (req, res) => {
    const baseUrl = getBaseUrl(req);
    const inviteUrl = `${baseUrl}/register?invite=${token}`;
-    // Load app name
+    // Load configured app name (admin setting → env → default)
-    const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'app_name'");
+    const appName = await getAppName();
    const appName = brandingSetting?.value || 'Redlight';
    if (isMailerConfigured()) {
      try {
@@ -362,4 +368,28 @@ router.delete('/oauth', authenticateToken, requireAdmin, async (req, res) => {
  }
 });
 // ── Room Management (admin only) ────────────────────────────────────────────
 // GET /api/admin/rooms - List all rooms with owner info
 router.get('/rooms', authenticateToken, requireAdmin, async (req, res) => {
  try {
    const db = getDb();
    const rooms = await db.all(`
      SELECT r.id, r.uid, r.name, r.user_id, r.max_participants, r.access_code,
             r.mute_on_join, r.record_meeting, r.guest_access, r.presentation_file,
             r.created_at, r.updated_at,
             COALESCE(NULLIF(u.display_name,''), u.name) as owner_name,
             u.email as owner_email,
             (SELECT COUNT(*) FROM room_shares rs WHERE rs.room_id = r.id) as share_count
      FROM rooms r
      JOIN users u ON r.user_id = u.id
      ORDER BY r.created_at DESC
    `);
    res.json({ rooms });
  } catch (err) {
    log.admin.error(`List rooms error: ${err.message}`);
    res.status(500).json({ error: 'Rooms could not be loaded' });
  }
 });
 export default router;
@@ -1,4 +1,4 @@
-import { Router } from 'express';
+import { Router, json } from 'express';
 import crypto from 'crypto';
 import ExcelJS from 'exceljs';
 import PDFDocument from 'pdfkit';
@@ -9,18 +9,25 @@ import { getAnalyticsToken } from '../config/bbb.js';
 const router = Router();
-// POST /api/analytics/callback/:uid?token=... - BBB Learning Analytics callback (token-secured)
+// Token check runs BEFORE the 5mb body parser so unauthenticated callers
-router.post('/callback/:uid', async (req, res) => {
+// cannot make the server buffer large payloads.
-  try {
+// Constant-time comparison to prevent timing attacks. Reject non-string tokens
 // (e.g. ?token=a&token=b would yield an array and crash Buffer.from).
 function verifyCallbackToken(req, res, next) {
  const { token } = req.query;
  const expectedToken = getAnalyticsToken(req.params.uid);
-
+  if (typeof token !== 'string' || token.length !== expectedToken.length ||
    // Constant-time comparison to prevent timing attacks
    if (!token || token.length !== expectedToken.length ||
      !crypto.timingSafeEqual(Buffer.from(token), Buffer.from(expectedToken))) {
    return res.status(403).json({ error: 'Invalid token' });
  }
  next();
 }
 // POST /api/analytics/callback/:uid?token=... - BBB Learning Analytics callback (token-secured)
 // Excluded from the global 100kb body limit (see index.js): learning analytics
 // payloads for large meetings can be several MB.
 router.post('/callback/:uid', verifyCallbackToken, json({ limit: '5mb' }), async (req, res) => {
  try {
    const db = getDb();
    const room = await db.get('SELECT id, uid, learning_analytics FROM rooms WHERE uid = ?', [req.params.uid]);
@@ -216,15 +223,20 @@ router.get('/:id/export/:format', authenticateToken, async (req, res) => {
    const safeName = (entry.meeting_name || 'analytics').replace(/[^a-zA-Z0-9_-]/g, '_');
    if (format === 'csv') {
      // Prefix-escape values that start with a formula trigger character so that
      // Excel/LibreOffice do not evaluate them as formulas (CSV injection).
      const escapeCsv = (val) => {
        if (val === null || val === undefined) return '';
        let s = String(val);
        if (/^[=+\-@\t\r]/.test(s)) s = "'" + s;
        if (s.includes(',') || s.includes('"') || s.includes('\n') || s.includes('\r')) {
          return '"' + s.replace(/"/g, '""') + '"';
        }
        return s;
      };
      const header = COLUMNS.map(c => c.header).join(',');
      const csvRows = rows.map(r =>
-        COLUMNS.map(c => {
+        COLUMNS.map(c => escapeCsv(r[c.key])).join(',')
          const val = r[c.key];
          if (typeof val === 'string' && (val.includes(',') || val.includes('"') || val.includes('\n'))) {
            return '"' + val.replace(/"/g, '""') + '"';
          }
          return val;
        }).join(',')
      );
      const csv = [header, ...csvRows].join('\n');
      res.setHeader('Content-Type', 'text/csv; charset=utf-8');
@@ -233,10 +245,19 @@ router.get('/:id/export/:format', authenticateToken, async (req, res) => {
    }
    if (format === 'xlsx') {
      // Prefix-escape strings that would otherwise be evaluated as formulas.
      const sanitizeXlsx = (r) => {
        const out = {};
        for (const k of Object.keys(r)) {
          const v = r[k];
          out[k] = (typeof v === 'string' && /^[=+\-@\t\r]/.test(v)) ? "'" + v : v;
        }
        return out;
      };
      const workbook = new ExcelJS.Workbook();
      const sheet = workbook.addWorksheet('Analytics');
      sheet.columns = COLUMNS;
-      rows.forEach(r => sheet.addRow(r));
+      rows.forEach(r => sheet.addRow(sanitizeXlsx(r)));
      // Style header row
      sheet.getRow(1).font = { bold: true };
      sheet.getRow(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE0E0E0' } };
@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { rateLimit } from 'express-rate-limit';
+import { rateLimit, MemoryStore } from 'express-rate-limit';
 import { RedisStore } from 'rate-limit-redis';
 import * as OTPAuth from 'otpauth';
 import { getDb } from '../config/database.js';
@@ -13,6 +13,7 @@ import redis from '../config/redis.js';
 import { authenticateToken, generateToken, getBaseUrl } from '../middleware/auth.js';
 import { isMailerConfigured, sendVerificationEmail } from '../config/mailer.js';
 import { getOAuthConfig, discoverOIDC } from '../config/oauth.js';
 import { getAppName } from '../config/appName.js';
 import { log } from '../config/logger.js';
 if (!process.env.JWT_SECRET) {
@@ -22,15 +23,65 @@ if (!process.env.JWT_SECRET) {
 const JWT_SECRET = process.env.JWT_SECRET;
 // ── Rate Limiting ────────────────────────────────────────────────────────────
-function makeRedisStore(prefix) {
+// Shared Redis store with in-memory fallback. Without the fallback, a dead
 // Redis connection makes every rate-limited endpoint (incl. login) return 500 —
 // rate limiting must degrade, not take auth down with it.
 class ResilientStore {
  constructor(prefix) {
    try {
-    return new RedisStore({
+      this.redisStore = new RedisStore({
        sendCommand: (...args) => redis.call(...args),
        prefix,
      });
    } catch {
-    return undefined; // falls back to in-memory if Redis unavailable
+      this.redisStore = null;
    }
    this.memoryStore = new MemoryStore();
  }
  init(options) {
    try {
      // RedisStore.init returns the SCRIPT LOAD promise; catch it so a dead
      // Redis connection surfaces as a warning instead of an unhandled
      // rejection that kills the process.
      const initResult = this.redisStore?.init?.(options);
      if (typeof initResult?.catch === 'function') {
        initResult.catch(err => log.auth.warn(`Rate-limit Redis init failed: ${err.message}`));
      }
    } catch (err) {
      log.auth.warn(`Rate-limit Redis init failed: ${err.message}`);
    }
    this.memoryStore.init(options);
  }
  async increment(key) {
    if (this.redisStore && redis.status === 'ready') {
      try {
        return await this.redisStore.increment(key);
      } catch (err) {
        log.auth.warn(`Rate-limit Redis store failed, using in-memory fallback: ${err.message}`);
      }
    }
    return this.memoryStore.increment(key);
  }
  async decrement(key) {
    if (this.redisStore && redis.status === 'ready') {
      try {
        return await this.redisStore.decrement(key);
      } catch { /* fall through to memory */ }
    }
    return this.memoryStore.decrement(key);
  }
  async resetKey(key) {
    if (this.redisStore && redis.status === 'ready') {
      try {
        return await this.redisStore.resetKey(key);
      } catch { /* fall through to memory */ }
    }
    return this.memoryStore.resetKey(key);
  }
 }
 function makeRedisStore(prefix) {
  return new ResilientStore(prefix);
 }
 // ── Validation helpers ─────────────────────────────────────────────────────
@@ -43,6 +94,13 @@ const SAFE_ID_RE = /^[a-zA-Z0-9_-]{1,50}$/;
 const SAFE_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)|[a-zA-Z]{1,30})$/;
 const MIN_PASSWORD_LENGTH = 8;
 // bcrypt only uses the first 72 bytes; cap input to prevent CPU-DoS on hashing.
 const MAX_PASSWORD_LENGTH = 64;
 // Pre-computed bcrypt hash of a random string used as a dummy comparison
 // target when the requested account does not exist. Keeps login timing
 // roughly constant so we do not leak whether an email is registered.
 const DUMMY_BCRYPT_HASH = bcrypt.hashSync('dummy-password-for-timing-' + Math.random(), 12);
 // ── Rate Limiters ────────────────────────────────────────────────────────────
 const loginLimiter = rateLimit({
@@ -168,8 +226,12 @@ router.post('/register', registerLimiter, async (req, res) => {
    if (password.length < MIN_PASSWORD_LENGTH) {
      return res.status(400).json({ error: `Password must be at least ${MIN_PASSWORD_LENGTH} characters long` });
    }
    if (password.length > MAX_PASSWORD_LENGTH) {
      return res.status(400).json({ error: `Password must not exceed ${MAX_PASSWORD_LENGTH} characters` });
    }
-    const existing = await db.get('SELECT id FROM users WHERE email = ?', [email]);
+    // Emails are stored lowercased, so compare lowercased to catch case-variant duplicates
    const existing = await db.get('SELECT id FROM users WHERE email = ?', [email.toLowerCase()]);
    if (existing) {
      return res.status(409).json({ error: 'Email is already in use' });
    }
@@ -203,12 +265,8 @@ router.post('/register', registerLimiter, async (req, res) => {
      const baseUrl = getBaseUrl(req);
      const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
-      // Load app name from branding settings
+      // Load configured app name (admin setting → env → default)
-      const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
+      const appName = await getAppName();
      let appName = 'Redlight';
      if (brandingSetting?.value) {
        try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
      }
      try {
        await sendVerificationEmail(email.toLowerCase(), display_name, verifyUrl, appName, 'en');
@@ -317,11 +375,7 @@ router.post('/resend-verification', resendVerificationLimiter, async (req, res)
    const baseUrl = getBaseUrl(req);
    const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
-    const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
+    const appName = await getAppName();
    let appName = 'Redlight';
    if (brandingSetting?.value) {
      try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
    }
    try {
      await sendVerificationEmail(email.toLowerCase(), user.display_name || user.name, verifyUrl, appName, user.language || 'en');
@@ -351,10 +405,18 @@ router.post('/login', loginLimiter, async (req, res) => {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
    // Cap password length to keep bcrypt CPU work bounded.
    if (typeof password !== 'string' || password.length > MAX_PASSWORD_LENGTH) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
    const db = getDb();
    const user = await db.get('SELECT * FROM users WHERE email = ?', [email.toLowerCase()]);
-    if (!user || !bcrypt.compareSync(password, user.password_hash)) {
+    // Always run bcrypt against either the real hash or a dummy hash so login
    // timing does not reveal whether the email is registered.
    const passwordOk = bcrypt.compareSync(password, user?.password_hash || DUMMY_BCRYPT_HASH);
    if (!user || !passwordOk) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
@@ -560,6 +622,9 @@ router.put('/password', authenticateToken, passwordLimiter, async (req, res) =>
    if (typeof currentPassword !== 'string' || typeof newPassword !== 'string') {
      return res.status(400).json({ error: 'Invalid input' });
    }
    if (currentPassword.length > MAX_PASSWORD_LENGTH || newPassword.length > MAX_PASSWORD_LENGTH) {
      return res.status(400).json({ error: `Password must not exceed ${MAX_PASSWORD_LENGTH} characters` });
    }
    const db = getDb();
@@ -753,12 +818,8 @@ router.post('/2fa/setup', authenticateToken, twoFaLimiter, async (req, res) => {
    const secret = new OTPAuth.Secret({ size: 20 });
-    // Load app name from branding settings
+    // Use the configured app name as the TOTP issuer (admin setting → env → default)
-    const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
+    const issuer = await getAppName();
    let issuer = 'Redlight';
    if (brandingSetting?.value) {
      try { issuer = JSON.parse(brandingSetting.value).appName || issuer; } catch {}
    }
    const totp = new OTPAuth.TOTP({
      issuer,
@@ -823,6 +884,9 @@ router.post('/2fa/disable', authenticateToken, twoFaLimiter, async (req, res) =>
    if (!password || !code) {
      return res.status(400).json({ error: 'Password and code are required' });
    }
    if (typeof password !== 'string' || password.length > MAX_PASSWORD_LENGTH) {
      return res.status(400).json({ error: 'Invalid password' });
    }
    const db = getDb();
    const user = await db.get('SELECT password_hash, totp_secret, totp_enabled FROM users WHERE id = ?', [req.user.id]);
@@ -12,12 +12,25 @@
 import { Router, text } from 'express';
 import crypto from 'crypto';
 import { rateLimit } from 'express-rate-limit';
 import { getDb } from '../config/database.js';
 import { log } from '../config/logger.js';
 import { getBaseUrl } from '../middleware/auth.js';
 const router = Router();
 // Brute-force protection for the Basic-Auth tokens: only failed requests count
 // (skipSuccessfulRequests), so legitimate sync clients polling frequently are
 // not throttled.
 router.use(rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 30,
  skipSuccessfulRequests: true,
  standardHeaders: true,
  legacyHeaders: false,
  message: 'Too many failed CalDAV requests. Please try again later.',
 }));
 // ── Body parsing for XML and iCalendar payloads ────────────────────────────
 router.use(text({ type: ['application/xml', 'text/xml', 'text/calendar', 'application/octet-stream'] }));
@@ -194,9 +207,10 @@ async function caldavAuth(req, res, next) {
    const token = decoded.slice(colonIdx + 1);
    const db = getDb();
    // Emails are stored lowercased
    const user = await db.get(
      'SELECT id, name, display_name, email FROM users WHERE email = ?',
-      [email],
+      [email.toLowerCase()],
    );
    if (!user) {
      res.set('WWW-Authenticate', 'Basic realm="Redlight CalDAV"');
@@ -243,7 +257,7 @@ function setDAVHeaders(res) {
 // ── CalDAV username authorization ──────────────────────────────────────────
 // Ensures the :username param matches the authenticated user's email
 function validateCalDAVUser(req, res, next) {
-  if (req.params.username && decodeURIComponent(req.params.username) !== req.caldavUser.email) {
+  if (req.params.username && decodeURIComponent(req.params.username).toLowerCase() !== req.caldavUser.email) {
    return res.status(403).end();
  }
  next();
@@ -278,7 +292,7 @@ ${propXml}
 }
 // ── OPTIONS ────────────────────────────────────────────────────────────────
-router.options('*', (req, res) => {
+router.options('/*splat', (req, res) => {
  setDAVHeaders(res);
  res.status(200).end();
 });
@@ -529,7 +543,7 @@ router.delete('/:username/calendar/:filename', caldavAuth, validateCalDAVUser, a
 });
 // ── Fallback ───────────────────────────────────────────────────────────────
-router.all('*', caldavAuth, (req, res) => {
+router.all('/*splat', caldavAuth, (req, res) => {
  setDAVHeaders(res);
  res.status(405).end();
 });
@@ -4,6 +4,7 @@ import { getDb } from '../config/database.js';
 import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
 import { log } from '../config/logger.js';
 import { sendCalendarInviteEmail } from '../config/mailer.js';
 import { getAppName } from '../config/appName.js';
 import {
  isFederationEnabled,
  getFederationDomain,
@@ -219,7 +220,7 @@ router.put('/events/:id', authenticateToken, async (req, res) => {
        end_time = COALESCE(?, end_time),
        room_uid = ?,
        color = COALESCE(?, color),
-        reminder_minutes = COALESCE(?, reminder_minutes),
+        reminder_minutes = ?,
        reminder_sent_at = ${resetReminder ? 'NULL' : 'reminder_sent_at'},
        updated_at = CURRENT_TIMESTAMP
      WHERE id = ?
@@ -230,7 +231,9 @@ router.put('/events/:id', authenticateToken, async (req, res) => {
      end_time || null,
      room_uid !== undefined ? (room_uid || null) : event.room_uid,
      color || null,
-      validReminder !== undefined ? validReminder : null,
+      // Not in payload → keep existing; present (incl. null) → set/clear directly.
      // COALESCE can't be used here: it would treat an explicit null as "keep".
      validReminder !== undefined ? validReminder : event.reminder_minutes,
      req.params.id,
    ]);
@@ -323,7 +326,7 @@ router.post('/events/:id/share', authenticateToken, async (req, res) => {
    if (targetUser?.email) {
      const appUrl = getBaseUrl(req);
      const inboxUrl = `${appUrl}/federation/inbox`;
-      const appName = process.env.APP_NAME || 'Redlight';
+      const appName = await getAppName();
      const senderUser = await db.get('SELECT name, display_name FROM users WHERE id = ?', [req.user.id]);
      const fromDisplay = (senderUser?.display_name && senderUser.display_name !== '') ? senderUser.display_name : (senderUser?.name || req.user.name);
      sendCalendarInviteEmail(
@@ -645,7 +648,7 @@ router.post(['/receive-event', '/calendar-event'], calendarFederationLimiter, as
    if (targetUser.email) {
      const appUrl = getBaseUrl(req);
      const inboxUrl = `${appUrl}/federation/inbox`;
-      const appName = process.env.APP_NAME || 'Redlight';
+      const appName = await getAppName();
      sendCalendarInviteEmail(
        targetUser.email, targetUser.name, from_user,
        title, start_time, end_time, description || null,
@@ -1,4 +1,4 @@
-import { Router } from 'express';
+import { Router } from 'express';
 import { v4 as uuidv4 } from 'uuid';
 import { rateLimit } from 'express-rate-limit';
 import { getDb } from '../config/database.js';
@@ -6,6 +6,7 @@ import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
 import { sendFederationInviteEmail, sendCalendarEventDeletedEmail } from '../config/mailer.js';
 import { log } from '../config/logger.js';
 import { createNotification } from '../config/notifications.js';
 import { getAppName } from '../config/appName.js';
 // M13: rate limit the unauthenticated federation receive endpoint
 const federationReceiveLimiter = rateLimit({
@@ -40,7 +41,7 @@ export function wellKnownHandler(req, res) {
        federation_api: '/api/federation',
        public_key: getPublicKey(),
        software: 'Redlight',
-        version: '2.1.1',
+        version: '2.3.0',
    });
 }
@@ -198,7 +199,7 @@ router.post('/receive', federationReceiveLimiter, async (req, res) => {
        // Look up user by name (case-insensitive)
        const targetUser = await db.get(
-            'SELECT id, name, email FROM users WHERE LOWER(name) = LOWER(?)',
+            'SELECT id, name, email, language FROM users WHERE LOWER(name) = LOWER(?)',
            [username]
        );
@@ -238,7 +239,7 @@ router.post('/receive', federationReceiveLimiter, async (req, res) => {
        if (targetUser.email) {
            const appUrl = getBaseUrl(req);
            const inboxUrl = `${appUrl}/federation/inbox`;
-            const appName = process.env.APP_NAME || 'Redlight';
+            const appName = await getAppName();
            sendFederationInviteEmail(
                targetUser.email, targetUser.name, from_user,
                room_name, message || null, inboxUrl, appName, targetUser.language || 'en'
@@ -627,7 +628,7 @@ router.post('/calendar-event-deleted', federationReceiveLimiter, async (req, res
        // Notify affected users by email (fire-and-forget)
        if (affectedUsers.length > 0) {
-            const appName = process.env.APP_NAME || 'Redlight';
+            const appName = await getAppName();
            for (const u of affectedUsers) {
                sendCalendarEventDeletedEmail(u.email, u.name, u.from_user, u.title, appName, u.language || 'en')
                    .catch(mailErr => {
@@ -200,7 +200,13 @@ router.get('/callback', callbackLimiter, async (req, res) => {
      );
      if (user) {
-        // Link OAuth to existing account
+        // Only auto-link to an existing local account if the IdP has actually
        // verified the email. Otherwise an attacker who registers at the IdP
        // with someone else's email could take over the local account.
        if (userInfo.email_verified !== true) {
          log.auth.warn(`OAuth account-linking blocked: provider did not assert email_verified=true for ${email}`);
          return errorRedirect('Your OAuth provider has not verified this email address. Please verify it with the provider before logging in here.');
        }
        await db.run(
          'UPDATE users SET oauth_provider = ?, oauth_provider_id = ?, email_verified = 1, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
          ['oidc', sub, user.id],
@@ -11,6 +11,171 @@ import {
 const router = Router();
 /**
 * Format a raw BBB recording into a normalised object.
 */
 function formatBbbRecording(rec, fallbackName) {
  const playback = rec.playback?.format;
  let formats = [];
  if (playback) {
    formats = Array.isArray(playback) ? playback : [playback];
  }
  return {
    recordID: rec.recordID,
    meetingID: rec.meetingID,
    name: rec.name || fallbackName || 'Recording',
    state: rec.state,
    published: rec.published === 'true',
    startTime: rec.startTime,
    endTime: rec.endTime,
    participants: rec.participants,
    size: rec.size,
    formats: formats.map(f => ({
      type: f.type,
      url: f.url,
      length: f.length,
      size: f.size,
    })),
    metadata: rec.metadata || {},
  };
 }
 /**
 * Format a DB row into the same shape the frontend expects.
 */
 function formatDbRecording(row) {
  return {
    recordID: row.record_id,
    meetingID: row.meeting_id,
    name: row.name || 'Recording',
    state: row.state,
    published: row.published === 1,
    startTime: row.start_time,
    endTime: row.end_time,
    participants: row.participants,
    size: row.size,
    formats: JSON.parse(row.formats || '[]'),
    metadata: JSON.parse(row.metadata || '{}'),
    fromCache: true,
  };
 }
 /**
 * Upsert a single formatted recording into the DB.
 * - If the record_id already exists AND is the same recording, merge new formats.
 * - If it's a new recording or a different one with the same record_id, overwrite.
 */
 async function upsertRecording(db, rec) {
  const existing = await db.get('SELECT * FROM recordings WHERE record_id = ?', [rec.recordID]);
  const formatsJson = JSON.stringify(rec.formats);
  const metadataJson = JSON.stringify(rec.metadata || {});
  if (existing) {
    // Verify it's still the same recording (same startTime)
    if (String(rec.startTime) === String(existing.start_time)) {
      // Merge formats: keep existing formats, add any new types
      const existingFormats = JSON.parse(existing.formats || '[]');
      const existingTypes = new Set(existingFormats.map(f => f.type));
      const mergedFormats = [...existingFormats];
      for (const f of rec.formats) {
        if (existingTypes.has(f.type)) {
          // Update URL for existing format type (server may have changed)
          const idx = mergedFormats.findIndex(ef => ef.type === f.type);
          if (idx !== -1) mergedFormats[idx] = f;
        } else {
          // New format type added
          mergedFormats.push(f);
        }
      }
      await db.run(
        `UPDATE recordings SET name = ?, state = ?, published = ?, end_time = ?,
         participants = ?, size = ?, formats = ?, metadata = ?, updated_at = CURRENT_TIMESTAMP
         WHERE record_id = ?`,
        [rec.name, rec.state, rec.published ? 1 : 0, rec.endTime,
         rec.participants, rec.size, JSON.stringify(mergedFormats), metadataJson,
         rec.recordID]
      );
    } else {
      // Different recording with same record_id – overwrite completely
      await db.run(
        `UPDATE recordings SET meeting_id = ?, name = ?, state = ?, published = ?,
         start_time = ?, end_time = ?, participants = ?, size = ?, formats = ?,
         metadata = ?, updated_at = CURRENT_TIMESTAMP
         WHERE record_id = ?`,
        [rec.meetingID, rec.name, rec.state, rec.published ? 1 : 0,
         rec.startTime, rec.endTime, rec.participants, rec.size,
         formatsJson, metadataJson, rec.recordID]
      );
    }
  } else {
    // Completely new recording – insert
    await db.run(
      `INSERT INTO recordings (record_id, meeting_id, name, state, published, start_time,
       end_time, participants, size, formats, metadata) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
      [rec.recordID, rec.meetingID, rec.name, rec.state, rec.published ? 1 : 0,
       rec.startTime, rec.endTime, rec.participants, rec.size,
       formatsJson, metadataJson]
    );
  }
 }
 /**
 * Core logic: fetch recordings from BBB, sync with DB, fall back to DB on error.
 * Returns an array of formatted recordings.
 */
 async function fetchAndSyncRecordings(meetingID, fallbackName) {
  const db = getDb();
  let bbbRecordings = null;
  try {
    const raw = await getRecordings(meetingID || undefined);
    bbbRecordings = raw.map(rec => formatBbbRecording(rec, fallbackName));
  } catch (err) {
    log.recordings.warn(`BBB API unreachable, falling back to cached recordings: ${err.message}`);
  }
  if (bbbRecordings !== null) {
    // BBB API was reachable – sync each recording into the DB
    for (const rec of bbbRecordings) {
      try {
        await upsertRecording(db, rec);
      } catch (err) {
        log.recordings.error(`Failed to cache recording ${rec.recordID}: ${err.message}`);
      }
    }
    // For recordings in DB that were NOT returned by BBB (possibly deleted on server
    // or server changed), keep them in DB with their cached URLs – don't delete.
    // However, we return the BBB result merged with any DB-only recordings.
    const bbbIds = new Set(bbbRecordings.map(r => r.recordID));
    const params = meetingID ? [meetingID] : [];
    const query = meetingID
      ? 'SELECT * FROM recordings WHERE meeting_id = ?'
      : 'SELECT * FROM recordings';
    const dbRows = await db.all(query, params);
    // Add DB-only recordings (not on current BBB server) with cached URLs
    for (const row of dbRows) {
      if (!bbbIds.has(row.record_id)) {
        bbbRecordings.push(formatDbRecording(row));
      }
    }
    return bbbRecordings;
  } else {
    // BBB API unreachable – serve everything from DB
    const params = meetingID ? [meetingID] : [];
    const query = meetingID
      ? 'SELECT * FROM recordings WHERE meeting_id = ?'
      : 'SELECT * FROM recordings';
    const rows = await db.all(query, params);
    return rows.map(formatDbRecording);
  }
 }
 // GET /api/recordings - Get recordings for a room (by meetingID/uid)
 router.get('/', authenticateToken, async (req, res) => {
  try {
@@ -34,36 +199,7 @@ router.get('/', authenticateToken, async (req, res) => {
      return res.status(400).json({ error: 'meetingID query parameter is required' });
    }
-    const recordings = await getRecordings(meetingID || undefined);
+    const formatted = await fetchAndSyncRecordings(meetingID);
    // Format recordings
    const formatted = recordings.map(rec => {
      const playback = rec.playback?.format;
      let formats = [];
      if (playback) {
        formats = Array.isArray(playback) ? playback : [playback];
      }
      return {
        recordID: rec.recordID,
        meetingID: rec.meetingID,
        name: rec.name || 'Recording',
        state: rec.state,
        published: rec.published === 'true',
        startTime: rec.startTime,
        endTime: rec.endTime,
        participants: rec.participants,
        size: rec.size,
        formats: formats.map(f => ({
          type: f.type,
          url: f.url,
          length: f.length,
          size: f.size,
        })),
        metadata: rec.metadata || {},
      };
    });
    res.json({ recordings: formatted });
  } catch (err) {
    log.recordings.error(`Get recordings error: ${err.message}`);
@@ -89,33 +225,7 @@ router.get('/room/:uid', authenticateToken, async (req, res) => {
      }
    }
-    const recordings = await getRecordings(room.uid);
+    const formatted = await fetchAndSyncRecordings(room.uid, room.name);
    const formatted = recordings.map(rec => {
      const playback = rec.playback?.format;
      let formats = [];
      if (playback) {
        formats = Array.isArray(playback) ? playback : [playback];
      }
      return {
        recordID: rec.recordID,
        meetingID: rec.meetingID,
        name: rec.name || room.name,
        state: rec.state,
        published: rec.published === 'true',
        startTime: rec.startTime,
        endTime: rec.endTime,
        participants: rec.participants,
        size: rec.size,
        formats: formats.map(f => ({
          type: f.type,
          url: f.url,
          length: f.length,
          size: f.size,
        })),
      };
    });
    res.json({ recordings: formatted });
  } catch (err) {
    log.recordings.error(`Get room recordings error: ${err.message}`);
@@ -126,14 +236,21 @@ router.get('/room/:uid', authenticateToken, async (req, res) => {
 // DELETE /api/recordings/:recordID
 router.delete('/:recordID', authenticateToken, async (req, res) => {
  try {
    const db = getDb();
    // M14 fix: look up the recording from BBB to find its meetingID (room UID),
    // then verify the user owns or shares that room.
    if (req.user.role !== 'admin') {
-      const rec = await getRecordingByRecordId(req.params.recordID);
+      // Try BBB first, fall back to DB cache
      let rec = await getRecordingByRecordId(req.params.recordID).catch(() => null);
      if (!rec) {
        const dbRow = await db.get('SELECT * FROM recordings WHERE record_id = ?', [req.params.recordID]);
        if (dbRow) {
          rec = { meetingID: dbRow.meeting_id };
        }
      }
      if (!rec) {
        return res.status(404).json({ error: 'Recording not found' });
      }
      const db = getDb();
      const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [rec.meetingID]);
      if (!room) {
        return res.status(404).json({ error: 'Room not found' });
@@ -145,7 +262,14 @@ router.delete('/:recordID', authenticateToken, async (req, res) => {
        }
      }
    }
    // Try to delete on BBB (may fail if server changed – that's OK)
    try {
      await deleteRecording(req.params.recordID);
    } catch (err) {
      log.recordings.warn(`BBB deleteRecording failed (may already be gone): ${err.message}`);
    }
    // Always remove from local cache
    await db.run('DELETE FROM recordings WHERE record_id = ?', [req.params.recordID]);
    res.json({ message: 'Recording deleted' });
  } catch (err) {
    log.recordings.error(`Delete recording error: ${err.message}`);
@@ -156,14 +280,20 @@ router.delete('/:recordID', authenticateToken, async (req, res) => {
 // PUT /api/recordings/:recordID/publish
 router.put('/:recordID/publish', authenticateToken, async (req, res) => {
  try {
    const db = getDb();
    // M14 fix: look up the recording from BBB to find its meetingID (room UID),
    // then verify the user owns or shares that room.
    if (req.user.role !== 'admin') {
-      const rec = await getRecordingByRecordId(req.params.recordID);
+      let rec = await getRecordingByRecordId(req.params.recordID).catch(() => null);
      if (!rec) {
        const dbRow = await db.get('SELECT * FROM recordings WHERE record_id = ?', [req.params.recordID]);
        if (dbRow) {
          rec = { meetingID: dbRow.meeting_id };
        }
      }
      if (!rec) {
        return res.status(404).json({ error: 'Recording not found' });
      }
      const db = getDb();
      const room = await db.get('SELECT id, user_id FROM rooms WHERE uid = ?', [rec.meetingID]);
      if (!room) {
        return res.status(404).json({ error: 'Room not found' });
@@ -176,7 +306,15 @@ router.put('/:recordID/publish', authenticateToken, async (req, res) => {
      }
    }
    const { publish } = req.body;
    // Try BBB API
    try {
      await publishRecording(req.params.recordID, publish);
    } catch (err) {
      log.recordings.warn(`BBB publishRecording failed: ${err.message}`);
    }
    // Update DB cache
    await db.run('UPDATE recordings SET published = ?, updated_at = CURRENT_TIMESTAMP WHERE record_id = ?',
      [publish ? 1 : 0, req.params.recordID]);
    res.json({ message: publish ? 'Recording published' : 'Recording unpublished' });
  } catch (err) {
    log.recordings.error(`Publish recording error: ${err.message}`);
@@ -8,6 +8,8 @@ import { getDb } from '../config/database.js';
 import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
 import { log } from '../config/logger.js';
 import { createNotification } from '../config/notifications.js';
 import { sendGuestInviteEmail } from '../config/mailer.js';
 import { getAppName } from '../config/appName.js';
 import {
  createMeeting,
  joinMeeting,
@@ -23,6 +25,14 @@ import {
  discoverInstance,
 } from '../config/federation.js';
 // Avatar image filenames are produced by the upload endpoint as
 // "<userId>_<timestamp>.<ext>". Reject anything that doesn't match this shape
 // so a guest can't smuggle path traversal or arbitrary URL fragments through
 // the unauthenticated guest-join endpoint.
 const SAFE_AVATAR_FILENAME_RE = /^[0-9]+_[0-9]+\.(jpg|png|gif|webp)$/;
 // Mirrors auth.js: only allow hex/hsl/named CSS colors.
 const SAFE_AVATAR_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)|[a-zA-Z]{1,30})$/;
 // L6: constant-time string comparison for access/moderator codes
 function timingSafeEqual(a, b) {
  if (typeof a !== 'string' || typeof b !== 'string') return false;
@@ -37,6 +47,17 @@ const __dirname = path.dirname(__filename);
 const presentationsDir = path.join(__dirname, '..', '..', 'uploads', 'presentations');
 if (!fs.existsSync(presentationsDir)) fs.mkdirSync(presentationsDir, { recursive: true });
 const PRESENTATION_TOKEN_SECRET = process.env.BBB_SECRET || crypto.randomBytes(32).toString('hex');
 const PRESENTATION_TOKEN_TTL = 60 * 60 * 1000; // 1 hour
 function signPresentationUrl(roomUid, filename) {
  const expires = Date.now() + PRESENTATION_TOKEN_TTL;
  const token = crypto.createHmac('sha256', PRESENTATION_TOKEN_SECRET)
    .update(`${roomUid}/${filename}:${expires}`)
    .digest('hex');
  return { token, expires };
 }
 // M8: rate limit unauthenticated guest-join to prevent access_code brute-force
 const guestJoinLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
@@ -46,6 +67,16 @@ const guestJoinLimiter = rateLimit({
  message: { error: 'Too many join attempts. Please try again later.' },
 });
 // Rate limit email invitations: each request may carry up to 50 addresses, so
 // without a cap any registered account could be abused as an SMTP spam relay.
 const inviteEmailLimiter = rateLimit({
  windowMs: 60 * 60 * 1000, // 1 hour
  max: 10,
  standardHeaders: true,
  legacyHeaders: false,
  message: { error: 'Too many email invitations. Please try again later.' },
 });
 const router = Router();
 // Build avatar URL for a user (uploaded image or generated initials)
@@ -404,6 +435,10 @@ router.post('/:uid/shares', authenticateToken, async (req, res) => {
    if (user_id === req.user.id) {
      return res.status(400).json({ error: 'You cannot share the room with yourself' });
    }
    const targetUser = await db.get('SELECT id FROM users WHERE id = ?', [user_id]);
    if (!targetUser) {
      return res.status(404).json({ error: 'User not found' });
    }
    // Check if already shared
    const existing = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, user_id]);
    if (existing) {
@@ -473,9 +508,10 @@ router.post('/:uid/start', authenticateToken, async (req, res) => {
      return res.status(404).json({ error: 'Room not found' });
    }
-    // Check access: owner or shared
+    // Check access: owner, admin, shared, or anyone_can_start
    const isOwner = room.user_id === req.user.id;
-    if (!isOwner) {
+    const isAdmin = req.user.role === 'admin';
    if (!isOwner && !isAdmin && !room.anyone_can_start) {
      const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
      if (!share) {
        return res.status(403).json({ error: 'No permission' });
@@ -484,16 +520,20 @@ router.post('/:uid/start', authenticateToken, async (req, res) => {
    const baseUrl = getBaseUrl(req);
    const loginURL = `${baseUrl}/join/${room.uid}`;
-    const presentationUrl = room.presentation_file
+    let presentationUrl = null;
-      ? `${baseUrl}/uploads/presentations/${room.presentation_file}`
+    if (room.presentation_file) {
-      : null;
+      const { token, expires } = signPresentationUrl(room.uid, room.presentation_file);
      presentationUrl = `${baseUrl}/api/rooms/presentations/${token}/${expires}/${room.uid}/${encodeURIComponent(room.presentation_file)}`;
    }
    const analyticsCallbackURL = room.learning_analytics
      ? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
      : null;
-    await createMeeting(room, baseUrl, loginURL, presentationUrl, analyticsCallbackURL);
+    // Localise BBB's default welcome message in the room owner's language
    const owner = await db.get('SELECT language FROM users WHERE id = ?', [room.user_id]);
    await createMeeting(room, baseUrl, loginURL, presentationUrl, analyticsCallbackURL, owner?.language || 'en');
    const avatarURL = getUserAvatarURL(req, req.user);
    const displayName = req.user.display_name || req.user.name;
-    const joinUrl = await joinMeeting(room.uid, displayName, true, avatarURL);
+    const joinUrl = await joinMeeting(room.uid, displayName, true, avatarURL, !!req.body.dark_mode);
    res.json({ joinUrl });
  } catch (err) {
    log.rooms.error(`Start meeting error: ${err.message}`);
@@ -527,7 +567,7 @@ router.post('/:uid/join', authenticateToken, async (req, res) => {
    const isShared = !isOwner && await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
    const isModerator = isOwner || !!isShared || room.all_join_moderator;
    const avatarURL = getUserAvatarURL(req, req.user);
-    const joinUrl = await joinMeeting(room.uid, req.user.display_name || req.user.name, isModerator, avatarURL);
+    const joinUrl = await joinMeeting(room.uid, req.user.display_name || req.user.name, isModerator, avatarURL, !!req.body.dark_mode);
    res.json({ joinUrl });
  } catch (err) {
    log.rooms.error(`Join meeting error: ${err.message}`);
@@ -545,9 +585,10 @@ router.post('/:uid/end', authenticateToken, async (req, res) => {
      return res.status(404).json({ error: 'Room not found' });
    }
-    // Check access: owner or shared user
+    // Check access: owner, admin, or shared user
    const isOwner = room.user_id === req.user.id;
-    if (!isOwner) {
+    const isAdmin = req.user.role === 'admin';
    if (!isOwner && !isAdmin) {
      const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
      if (!share) {
        return res.status(403).json({ error: 'No permission' });
@@ -602,7 +643,7 @@ router.get('/:uid/public', async (req, res) => {
 // POST /api/rooms/:uid/guest-join - Join meeting as guest (no auth needed)
 router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
  try {
-    const { name, access_code, moderator_code } = req.body;
+    const { name, access_code, moderator_code, avatar_image, avatar_color, dark_mode } = req.body;
    if (!name || name.trim().length === 0) {
      return res.status(400).json({ error: 'Name is required' });
@@ -638,7 +679,9 @@ router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
      const analyticsCallbackURL = room.learning_analytics
        ? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
        : null;
-      await createMeeting(room, baseUrl, loginURL, null, analyticsCallbackURL);
+      // Localise BBB's default welcome message in the room owner's language
      const owner = await db.get('SELECT language FROM users WHERE id = ?', [room.user_id]);
      await createMeeting(room, baseUrl, loginURL, null, analyticsCallbackURL, owner?.language || 'en');
    }
    // Check moderator code
@@ -648,8 +691,21 @@ router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
    }
    const baseUrl = getBaseUrl(req);
-    const guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}`;
+    // Validate client-supplied avatar fields before embedding them in a URL
-    const joinUrl = await joinMeeting(room.uid, name.trim(), isModerator, guestAvatarURL);
+    // that BBB will fetch — guest-join is unauthenticated.
    const safeAvatarImage = (typeof avatar_image === 'string' && SAFE_AVATAR_FILENAME_RE.test(avatar_image))
      ? avatar_image : null;
    const safeAvatarColor = (typeof avatar_color === 'string' && SAFE_AVATAR_COLOR_RE.test(avatar_color))
      ? avatar_color : null;
    let guestAvatarURL;
    if (safeAvatarImage) {
      guestAvatarURL = `${baseUrl}/api/auth/avatar/${encodeURIComponent(safeAvatarImage)}`;
    } else if (safeAvatarColor) {
      guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}?color=${encodeURIComponent(safeAvatarColor)}`;
    } else {
      guestAvatarURL = `${baseUrl}/api/auth/avatar/initials/${encodeURIComponent(name.trim())}`;
    }
    const joinUrl = await joinMeeting(room.uid, name.trim(), isModerator, guestAvatarURL, !!dark_mode);
    res.json({ joinUrl });
  } catch (err) {
    log.rooms.error(`Guest join error: ${err.message}`);
@@ -679,6 +735,46 @@ router.get('/:uid/status', async (req, res) => {
  }
 });
 // GET /api/rooms/presentations/:token/:expires/:roomUid/:filename - Serve presentation file (token-protected for BBB)
 // Token and expires are path segments so the URL ends with the original filename,
 // allowing BBB to detect the file type from the extension.
 router.get('/presentations/:token/:expires/:roomUid/:filename', (req, res) => {
  const { token, expires, roomUid, filename } = req.params;
  if (!token || !expires) {
    return res.status(401).json({ error: 'Missing token' });
  }
  const expiresNum = Number(expires);
  if (isNaN(expiresNum) || Date.now() > expiresNum) {
    return res.status(403).json({ error: 'Token expired' });
  }
  const expected = crypto.createHmac('sha256', PRESENTATION_TOKEN_SECRET)
    .update(`${roomUid}/${filename}:${expires}`)
    .digest('hex');
  // timingSafeEqual throws on length mismatch, so compare lengths first
  const tokenBuf = Buffer.from(token);
  const expectedBuf = Buffer.from(expected);
  if (tokenBuf.length !== expectedBuf.length || !crypto.timingSafeEqual(tokenBuf, expectedBuf)) {
    return res.status(403).json({ error: 'Invalid token' });
  }
  // S8: prevent path traversal
  const roomDir = path.resolve(presentationsDir, roomUid);
  const filepath = path.resolve(roomDir, filename);
  if (!filepath.startsWith(presentationsDir + path.sep) || !filepath.startsWith(roomDir + path.sep)) {
    return res.status(400).json({ error: 'Invalid filename' });
  }
  if (!fs.existsSync(filepath)) {
    return res.status(404).json({ error: 'File not found' });
  }
  res.sendFile(filepath);
 });
 // POST /api/rooms/:uid/presentation - Upload a presentation file for the room
 router.post('/:uid/presentation', authenticateToken, async (req, res) => {
  try {
@@ -733,22 +829,28 @@ router.post('/:uid/presentation', authenticateToken, async (req, res) => {
    // Preserve original filename (sent as X-Filename header)
    const rawName = req.headers['x-filename'];
-    const originalName = rawName
+    const filename = rawName
      ? decodeURIComponent(rawName).replace(/[^a-zA-Z0-9._\- ]/g, '_').slice(0, 200)
      : `presentation.${ext}`;
-    const filename = `${room.uid}_${Date.now()}.${ext}`;
+    // Each room gets its own folder: uploads/presentations/{roomUID}/
-    const filepath = path.join(presentationsDir, filename);
+    const roomDir = path.join(presentationsDir, room.uid);
    if (!fs.existsSync(roomDir)) fs.mkdirSync(roomDir, { recursive: true });
    const filepath = path.join(roomDir, filename);
    // S8: defense-in-depth path traversal check
    if (!path.resolve(filepath).startsWith(roomDir + path.sep)) {
      return res.status(400).json({ error: 'Invalid filename' });
    }
    // Remove old presentation file if exists
    if (room.presentation_file) {
-      // S8: defense-in-depth path traversal check
+      const oldPath = path.resolve(roomDir, room.presentation_file);
-      const oldPath = path.resolve(presentationsDir, room.presentation_file);
+      if (oldPath.startsWith(roomDir + path.sep) && fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
      if (oldPath.startsWith(presentationsDir + path.sep) && fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
    }
    fs.writeFileSync(filepath, buffer);
-    await db.run('UPDATE rooms SET presentation_file = ?, presentation_name = ?, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [filename, originalName, req.params.uid]);
+    await db.run('UPDATE rooms SET presentation_file = ?, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [filename, req.params.uid]);
    const updated = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
    res.json({ room: updated });
  } catch (err) {
@@ -766,11 +868,14 @@ router.delete('/:uid/presentation', authenticateToken, async (req, res) => {
    if (room.presentation_file) {
      // S8: defense-in-depth path traversal check
-      const filepath = path.resolve(presentationsDir, room.presentation_file);
+      const roomDir = path.join(presentationsDir, room.uid);
-      if (filepath.startsWith(presentationsDir + path.sep) && fs.existsSync(filepath)) fs.unlinkSync(filepath);
+      const filepath = path.resolve(roomDir, room.presentation_file);
      if (filepath.startsWith(roomDir + path.sep) && fs.existsSync(filepath)) fs.unlinkSync(filepath);
      // Remove empty room folder
      if (fs.existsSync(roomDir) && fs.readdirSync(roomDir).length === 0) fs.rmdirSync(roomDir);
    }
-    await db.run('UPDATE rooms SET presentation_file = NULL, presentation_name = NULL, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [req.params.uid]);
+    await db.run('UPDATE rooms SET presentation_file = NULL, updated_at = CURRENT_TIMESTAMP WHERE uid = ?', [req.params.uid]);
    const updated = await db.get('SELECT * FROM rooms WHERE uid = ?', [req.params.uid]);
    res.json({ room: updated });
  } catch (err) {
@@ -779,4 +884,76 @@ router.delete('/:uid/presentation', authenticateToken, async (req, res) => {
  }
 });
 // ── POST /api/rooms/invite-email — Send email invitation to guest(s) ────────
 router.post('/invite-email', authenticateToken, inviteEmailLimiter, async (req, res) => {
  try {
    const { room_uid, emails, message } = req.body;
    if (!room_uid || !emails || !emails.length) {
      return res.status(400).json({ error: 'room_uid and emails are required' });
    }
    if (emails.length > 50) {
      return res.status(400).json({ error: 'Maximum 50 email addresses allowed' });
    }
    // Validate all emails
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    for (const email of emails) {
      if (!emailRegex.test(email) || email.length > 254) {
        return res.status(400).json({ error: `Invalid email address: ${email}` });
      }
    }
    if (message && message.length > 2000) {
      return res.status(400).json({ error: 'Message must not exceed 2000 characters' });
    }
    const db = getDb();
    // Verify room exists and user has access
    const room = await db.get('SELECT * FROM rooms WHERE uid = ?', [room_uid]);
    if (!room) {
      return res.status(404).json({ error: 'Room not found' });
    }
    const isOwner = room.user_id === req.user.id;
    if (!isOwner) {
      const share = await db.get('SELECT id FROM room_shares WHERE room_id = ? AND user_id = ?', [room.id, req.user.id]);
      if (!share) {
        return res.status(403).json({ error: 'No permission to invite from this room' });
      }
    }
    // Build guest join URL
    const baseUrl = getBaseUrl(req);
    const joinUrl = room.access_code
      ? `${baseUrl}/join/${room.uid}?ac=${encodeURIComponent(room.access_code)}`
      : `${baseUrl}/join/${room.uid}`;
    const appName = await getAppName();
    const fromUser = req.user.display_name || req.user.name;
    const lang = req.user.language || 'en';
    // Send emails (in parallel but collect errors)
    const results = await Promise.allSettled(
      emails.map(email =>
        sendGuestInviteEmail(email, fromUser, room.name, message || null, joinUrl, appName, lang)
      )
    );
    const failed = results.filter(r => r.status === 'rejected');
    if (failed.length === emails.length) {
      return res.status(500).json({ error: 'Failed to send all email invitations' });
    }
    if (failed.length > 0) {
      log.rooms.warn(`${failed.length}/${emails.length} email invitations failed`);
    }
    res.json({ success: true, sent: emails.length - failed.length, failed: failed.length });
  } catch (err) {
    log.rooms.error('Email invite error:', err);
    res.status(500).json({ error: err.message || 'Failed to send email invitations' });
  }
 });
 export default router;
@@ -152,7 +152,7 @@ export default function AnalyticsList({ analytics, onRefresh, isOwner = true })
                </div>
              </div>
-              <div className="flex items-center gap-1 flex-shrink-0">
+              <div className="flex items-center gap-1 shrink-0">
                <div className="relative">
                  <button
                    onClick={() => toggleExportMenu(entry.id)}
@@ -2,9 +2,9 @@ import { Video } from 'lucide-react';
 import { useBranding } from '../contexts/BrandingContext';
 const sizes = {
-  sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
+  sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-32', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
-  md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
+  md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-40', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
-  lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
+  lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-48', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
 };
 export default function BrandLogo({ size = 'md', className = '' }) {
@@ -90,7 +90,7 @@ export default function DateTimePicker({
        </label>
      )}
      <div className="relative">
-        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-[1]" />
+        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-1" />
        <input
          ref={inputRef}
          type="text"
@@ -30,22 +30,35 @@ export default function FederatedRoomCard({ room, onRemove }) {
  const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
  const openRoom = () => navigate(`/federation/rooms/${room.id}`);
  return (
-    <div className={`card-hover group p-5 cursor-pointer ${isDeleted ? 'opacity-60' : ''}`} onClick={() => navigate(`/federation/rooms/${room.id}`)}>
+    <div
      role="link"
      tabIndex={0}
      aria-label={room.room_name}
      onClick={openRoom}
      onKeyDown={(e) => {
        if (e.target !== e.currentTarget) return;
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRoom(); }
      }}
      className={`card-hover group p-5 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2 ${isDeleted ? 'opacity-60' : ''}`}
      style={{ '--tw-ring-offset-color': 'var(--bg-primary)' }}
    >
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
-            <Globe size={14} className="text-th-accent flex-shrink-0" />
+            <Globe size={14} className="text-th-accent shrink-0" />
            <h3 className="text-base font-semibold text-th-text truncate group-hover:text-th-accent transition-colors">
              {room.room_name}
            </h3>
            {isDeleted ? (
-              <span className="flex-shrink-0 px-2 py-0.5 bg-red-500/15 text-red-500 rounded-full text-xs font-medium flex items-center gap-1">
+              <span className="shrink-0 px-2 py-0.5 bg-red-500/15 text-red-500 rounded-full text-xs font-medium flex items-center gap-1">
                <AlertTriangle size={10} />
                {t('federation.roomDeleted')}
              </span>
            ) : (
-              <span className="flex-shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
+              <span className="shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
                {t('federation.federated')}
              </span>
            )}
@@ -60,12 +73,12 @@ export default function FederatedRoomCard({ room, onRemove }) {
      <div className="grid grid-cols-2 gap-2 mb-4">
        {room.meet_id && (
          <div className="flex items-center gap-1.5 text-xs text-th-text-s">
-            <Hash size={12} className="text-th-accent flex-shrink-0" />
+            <Hash size={12} className="text-th-accent shrink-0" />
            <span className="truncate font-mono" title={room.meet_id}>{room.meet_id.slice(0, 10)}…</span>
          </div>
        )}
        <div className="flex items-center gap-1.5 text-xs text-th-text-s">
-          <Users size={12} className="text-th-accent flex-shrink-0" />
+          <Users size={12} className="text-th-accent shrink-0" />
          <span>
            {t('federation.maxParticipants')}:{' '}
            <span className="text-th-text font-medium">
@@ -76,12 +89,12 @@ export default function FederatedRoomCard({ room, onRemove }) {
        <div className="flex items-center gap-1.5 text-xs col-span-2">
          {recordingOn ? (
            <>
-              <Video size={12} className="text-amber-500 flex-shrink-0" />
+              <Video size={12} className="text-amber-500 shrink-0" />
              <span className="text-amber-500 font-medium">{t('federation.recordingOn')}</span>
            </>
          ) : (
            <>
-              <VideoOff size={12} className="text-th-text-s flex-shrink-0" />
+              <VideoOff size={12} className="text-th-text-s shrink-0" />
              <span className="text-th-text-s">{t('federation.recordingOff')}</span>
            </>
          )}
@@ -107,6 +120,7 @@ export default function FederatedRoomCard({ room, onRemove }) {
        <button
          onClick={handleRemove}
          className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
          aria-label={t('federation.removeRoom')}
          title={t('federation.removeRoom')}
        >
          <Trash2 size={14} />
@@ -52,7 +52,7 @@ export default function Layout() {
        {/* Email verification banner */}
        {user && user.email_verified === 0 && (
          <div className="bg-amber-500/15 border-b border-amber-500/30 px-4 py-2.5 flex items-center justify-center gap-3 text-sm">
-            <AlertTriangle size={15} className="text-amber-400 flex-shrink-0" />
+            <AlertTriangle size={15} className="text-amber-400 shrink-0" />
            <span className="text-amber-200">{t('auth.emailVerificationBanner')}</span>
            <button
              onClick={handleResendVerification}
@@ -1,15 +1,56 @@
 import { useEffect, useId, useRef } from 'react';
 import { X } from 'lucide-react';
 import { useLanguage } from '../contexts/LanguageContext';
 export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg' }) {
  const { t } = useLanguage();
  const titleId = useId();
  const dialogRef = useRef(null);
  const previouslyFocused = useRef(null);
  // Keep the latest onClose in a ref so the mount-only effect below can call it
  // without listing onClose as a dependency. Callers pass a fresh inline arrow
  // each render; depending on it would re-run the effect on every keystroke and
  // steal focus back to the dialog (kicking the user out of input fields).
  const onCloseRef = useRef(onClose);
  onCloseRef.current = onClose;
  useEffect(() => {
    previouslyFocused.current = document.activeElement;
    const handleKey = (e) => {
      if (e.key === 'Escape') onCloseRef.current?.();
    };
    document.addEventListener('keydown', handleKey);
    // Focus the dialog so screen readers announce it and keyboard focus lands inside
    dialogRef.current?.focus();
    return () => {
      document.removeEventListener('keydown', handleKey);
      previouslyFocused.current?.focus?.();
    };
  }, []);
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div
-      <div className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth}`}>
+        className="fixed inset-0 bg-black/60 backdrop-blur-xs"
        onClick={onClose}
        aria-hidden="true"
      />
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        tabIndex={-1}
        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} focus:outline-hidden`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
-          <h2 className="text-lg font-semibold text-th-text">{title}</h2>
+          <h2 id={titleId} className="text-lg font-semibold text-th-text">{title}</h2>
          <button
            type="button"
            onClick={onClose}
            aria-label={t('common.close')}
            className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
          >
            <X size={20} />
@@ -38,12 +38,13 @@ export default function Navbar({ onMenuClick }) {
    : '?';
  return (
-    <header className="sticky top-0 z-20 bg-th-nav border-b border-th-border backdrop-blur-sm">
+    <header className="sticky top-0 z-20 bg-th-nav border-b border-th-border backdrop-blur-xs">
      <div className="flex items-center justify-between h-16 px-4 md:px-6">
        {/* Left section */}
        <div className="flex items-center gap-3">
          <button
            onClick={onMenuClick}
            aria-label={t('nav.navigation')}
            className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
          >
            <Menu size={20} />
@@ -59,6 +60,9 @@ export default function Navbar({ onMenuClick }) {
          <div className="relative" ref={dropdownRef}>
            <button
              onClick={() => setDropdownOpen(!dropdownOpen)}
              aria-label={user?.display_name || user?.name}
              aria-haspopup="menu"
              aria-expanded={dropdownOpen}
              className="flex items-center gap-2 p-1.5 rounded-lg hover:bg-th-hover transition-colors"
            >
              <div
@@ -68,7 +72,7 @@ export default function Navbar({ onMenuClick }) {
                {user?.avatar_image ? (
                  <img
                    src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
-                    alt="Avatar"
+                    alt=""
                    className="w-full h-full object-cover"
                  />
                ) : (
@@ -83,6 +83,11 @@ export default function NotificationBell() {
      <button
        onClick={() => setOpen(prev => !prev)}
        className="relative p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
        aria-label={unreadCount > 0
          ? `${t('notifications.bell')} (${unreadCount})`
          : t('notifications.bell')}
        aria-haspopup="true"
        aria-expanded={open}
        title={t('notifications.bell')}
      >
        <Bell size={20} />
@@ -148,7 +153,7 @@ export default function NotificationBell() {
                      ${n.read ? 'hover:bg-th-hover' : 'bg-th-accent/5 hover:bg-th-accent/10'}`}
                  >
                    {/* Icon */}
-                    <span className="text-lg flex-shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
+                    <span className="text-lg shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
                    {/* Content */}
                    <div className="flex-1 min-w-0">
@@ -164,7 +169,7 @@ export default function NotificationBell() {
                    </div>
                    {/* Right side: unread dot, link icon, delete button */}
-                    <div className="flex flex-col items-end gap-1 flex-shrink-0">
+                    <div className="flex flex-col items-end gap-1 shrink-0">
                      {!n.read && (
                        <span className="w-2 h-2 rounded-full bg-th-accent mt-1" />
                      )}
@@ -173,7 +178,8 @@ export default function NotificationBell() {
                      )}
                      <button
                        onClick={(e) => handleDelete(e, n.id)}
-                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:text-th-error transition-all text-th-text-s/50"
+                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded-sm hover:text-th-error transition-all text-th-text-s/50"
                        aria-label={t('notifications.delete')}
                        title={t('notifications.delete')}
                      >
                        <X size={13} />
@@ -133,7 +133,7 @@ export default function RecordingList({ recordings, onRefresh }) {
            </div>
            {/* Actions */}
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
              <button
                onClick={() => handlePublish(rec.recordID, !rec.published)}
                disabled={loading[rec.recordID] === 'publishing'}
@@ -2,6 +2,7 @@ import { Users, Play, Trash2, Radio, Loader2, Share2, Copy, Link } from 'lucide-
 import { useNavigate } from 'react-router-dom';
 import { useState, useEffect, useRef } from 'react';
 import api from '../services/api';
 import { isCurrentThemeDark } from '../themes';
 import { useLanguage } from '../contexts/LanguageContext';
 import toast from 'react-hot-toast';
@@ -43,8 +44,21 @@ export default function RoomCard({ room, onDelete }) {
    return () => clearInterval(interval);
  }, [room.uid]);
  const openRoom = () => navigate(`/rooms/${room.uid}`);
  return (
-    <div className="card-hover group p-5 cursor-pointer" onClick={() => navigate(`/rooms/${room.uid}`)}>
+    <div
      role="link"
      tabIndex={0}
      aria-label={room.name}
      onClick={openRoom}
      onKeyDown={(e) => {
        if (e.target !== e.currentTarget) return;
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRoom(); }
      }}
      className="card-hover group p-5 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2"
      style={{ '--tw-ring-offset-color': 'var(--bg-primary)' }}
    >
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
@@ -80,7 +94,7 @@ export default function RoomCard({ room, onDelete }) {
          <span>Max: {room.max_participants}</span>
        )}
        {room.access_code && (
-          <span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded text-[10px] font-medium">
+          <span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded-sm text-[10px] font-medium">
            {t('common.protected')}
          </span>
        )}
@@ -94,11 +108,12 @@ export default function RoomCard({ room, onDelete }) {
            setStarting(true);
            try {
              if (status.running) {
-                const data = room.access_code ? { access_code: prompt(t('room.enterAccessCode')) } : {};
+                const data = { dark_mode: isCurrentThemeDark() };
                if (room.access_code) data.access_code = prompt(t('room.enterAccessCode'));
                const res = await api.post(`/rooms/${room.uid}/join`, data);
                if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
              } else {
-                const res = await api.post(`/rooms/${room.uid}/start`);
+                const res = await api.post(`/rooms/${room.uid}/start`, { dark_mode: isCurrentThemeDark() });
                if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank');
                toast.success(t('room.meetingStarted'));
                setTimeout(() => {
@@ -121,6 +136,9 @@ export default function RoomCard({ room, onDelete }) {
          <button
            onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
            className="btn-ghost text-xs py-1.5 px-2"
            aria-label={t('room.copyLink')}
            aria-haspopup="menu"
            aria-expanded={showCopyMenu}
            title={t('room.copyLink')}
          >
            <Copy size={14} />
@@ -148,6 +166,7 @@ export default function RoomCard({ room, onDelete }) {
          <button
            onClick={(e) => { e.stopPropagation(); onDelete(room); }}
            className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
            aria-label={t('common.delete')}
            title={t('common.delete')}
          >
            <Trash2 size={14} />
@@ -43,7 +43,7 @@ export default function Sidebar({ open, onClose }) {
  const linkClasses = ({ isActive }) =>
    `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${isActive
-      ? 'bg-th-accent text-th-accent-t shadow-sm'
+      ? 'bg-th-accent text-th-accent-t shadow-xs'
      : 'text-th-text-s hover:text-th-text hover:bg-th-hover'
    }`;
@@ -60,6 +60,7 @@ export default function Sidebar({ open, onClose }) {
            <BrandLogo size="md" className="flex-1 min-w-0" />
            <button
              onClick={onClose}
              aria-label={t('common.close')}
              className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
            >
              <X size={18} />
@@ -106,13 +107,13 @@ export default function Sidebar({ open, onClose }) {
          <div className="p-4 border-t border-th-border">
            <div className="flex items-center gap-3">
              <div
-                className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 overflow-hidden"
+                className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 overflow-hidden"
                style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
              >
                {user?.avatar_image ? (
                  <img
                    src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
-                    alt="Avatar"
+                    alt=""
                    className="w-full h-full object-cover"
                  />
                ) : (
@@ -10,17 +10,23 @@ export default function ThemeSelector({ onClose }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} aria-hidden="true" />
-      <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="theme-selector-title"
        className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
          <div>
-            <h2 className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
+            <h2 id="theme-selector-title" className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
            <p className="text-sm text-th-text-s mt-0.5">{t('themes.selectThemeSubtitle')}</p>
          </div>
          <button
            onClick={onClose}
            aria-label={t('common.close')}
            className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
          >
            <X size={20} />
@@ -23,7 +23,9 @@
    "protected": "Geschützt",
    "live": "Live",
    "error": "Fehler",
-    "success": "Erfolg"
+    "success": "Erfolg",
    "gridView": "Rasteransicht",
    "listView": "Listenansicht"
  },
  "nav": {
    "dashboard": "Dashboard",
@@ -62,16 +64,16 @@
    "passwordMismatch": "Passwörter stimmen nicht überein",
    "passwordTooShort": "Passwort muss mindestens 6 Zeichen lang sein",
    "loginSuccess": "Willkommen zurück!",
-    "registerSuccess": "Registrierung erfolgreich!",
+    "registerSuccess": "Registrierung erfolgreich",
    "loginFailed": "Anmeldung fehlgeschlagen",
    "registerFailed": "Registrierung fehlgeschlagen",
    "allFieldsRequired": "Alle Felder sind erforderlich",
-    "verificationSent": "Verifizierungs-E-Mail wurde gesendet!",
+    "verificationSent": "Verifizierungs-E-Mail wurde gesendet",
    "verificationSentDesc": "Wir haben dir eine E-Mail mit einem Bestätigungslink geschickt. Bitte klicke auf den Link, um dein Konto zu aktivieren.",
    "checkYourEmail": "Prüfe dein Postfach",
    "verifying": "E-Mail wird verifiziert...",
    "verifySuccess": "Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich jetzt anmelden.",
-    "verifySuccessTitle": "E-Mail bestätigt!",
+    "verifySuccessTitle": "E-Mail bestätigt",
    "verifyFailed": "Verifizierung fehlgeschlagen",
    "verifyFailedTitle": "Verifizierung fehlgeschlagen",
    "verifyTokenMissing": "Kein Verifizierungstoken vorhanden.",
@@ -88,7 +90,7 @@
    "emailVerificationBanner": "Deine E-Mail-Adresse wurde noch nicht verifiziert.",
    "emailVerificationResend": "Hier klicken um eine neue Verifizierungsmail zu erhalten",
    "emailVerificationResendCooldown": "Erneut senden in {seconds}s",
-    "emailVerificationResendSuccess": "Verifizierungsmail wurde gesendet!",
+    "emailVerificationResendSuccess": "Verifizierungsmail wurde gesendet",
    "emailVerificationResendFailed": "Verifizierungsmail konnte nicht gesendet werden",
    "inviteOnly": "Nur mit Einladung",
    "inviteOnlyDesc": "Die Registrierung ist derzeit eingeschränkt. Sie benötigen einen Einladungslink von einem Administrator, um ein Konto zu erstellen.",
@@ -110,28 +112,22 @@
    }
  },
  "home": {
-    "madeFor": "Made for BigBlueButton",
+    "heroTitle": "Selbst gehostetes Frontend für BigBlueButton",
-    "heroTitle": "Meetings neu ",
+    "heroSubtitle": "Redlight verwaltet Räume, Aufnahmen und Termine für deinen BigBlueButton-Server – mit Federation zwischen Instanzen, CalDAV-Sync und SSO-Anbindung.",
-    "heroTitleHighlight": "definiert",
+    "getStarted": "Konto erstellen",
-    "heroSubtitle": "Das moderne, selbst gehostete BigBlueButton-Frontend. Erstellen Sie Räume, verwalten Sie Aufnahmen und genießen Sie ein wunderschönes Interface mit über 15 Themes.",
+    "features": "Funktionen",
    "getStarted": "Jetzt starten",
    "features": "Alles was Sie brauchen",
    "featuresSubtitle": "Redlight bietet alle Funktionen, die Sie für professionelle Videokonferenzen benötigen.",
    "featureVideoTitle": "Videokonferenzen",
    "featureVideoDesc": "Erstellen und verwalten Sie Meetings direkt über BigBlueButton.",
    "featureRoomsTitle": "Raumverwaltung",
-    "featureRoomsDesc": "Unbegrenzte Räume mit individuellen Einstellungen und Zugangscodes.",
+    "featureRoomsDesc": "Räume mit eigenen Einstellungen, Zugangscodes und geteiltem Zugriff für Kolleginnen und Kollegen.",
    "featureUsersTitle": "Benutzerverwaltung",
    "featureUsersDesc": "Registrierung, Login und Rollenverwaltung für Ihre Organisation.",
    "featureThemesTitle": "15+ Themes",
    "featureThemesDesc": "Dracula, Nord, Catppuccin, Rosé Pine, Gruvbox und viele mehr.",
    "featureRecordingsTitle": "Aufnahmen",
-    "featureRecordingsDesc": "Alle Aufnahmen pro Raum einsehen, veröffentlichen oder löschen.",
+    "featureRecordingsDesc": "Aufnahmen pro Raum einsehen, veröffentlichen oder löschen.",
-    "featureOpenSourceTitle": "Open Source",
+    "featureFederationTitle": "Federation",
-    "featureOpenSourceDesc": "Vollständig quelloffen und selbst gehostet. Ihre Daten bleiben bei Ihnen.",
+    "featureFederationDesc": "Nutzer anderer Redlight-Instanzen einladen und instanzübergreifende Einladungen annehmen.",
-    "statThemes": "Themes",
+    "featureCalendarTitle": "Kalender",
-    "statRooms": "Räume",
+    "featureCalendarDesc": "Meetings planen, per CalDAV mit Thunderbird, Apple Calendar oder DAVx⁵ synchronisieren, Erinnerungen erhalten.",
-    "statOpenSource": "Open Source",
+    "featureVideoTitle": "Videokonferenzen",
    "featureVideoDesc": "Meetings direkt über BigBlueButton erstellen, starten und verwalten.",
    "featureAnalyticsTitle": "Learning Analytics",
    "featureAnalyticsDesc": "Teilnahme- und Aktivitätsdaten aus Meetings einsehen und als CSV, Excel oder PDF exportieren.",
    "footer": "© {year} Redlight. Ein Open-Source BigBlueButton Frontend."
  },
  "dashboard": {
@@ -152,7 +148,7 @@
    "accessCode": "Zugangscode",
    "muteOnJoin": "Teilnehmer beim Beitritt stummschalten",
    "allowRecording": "Aufnahme erlauben",
-    "roomCreated": "Raum erstellt!",
+    "roomCreated": "Raum erstellt",
    "roomCreateFailed": "Raum konnte nicht erstellt werden",
    "roomDeleted": "Raum gelöscht",
    "roomDeleteFailed": "Raum konnte nicht gelöscht werden",
@@ -176,7 +172,7 @@
    "copyLink": "Link kopieren",
    "copyRoomLink": "Raum-Link",
    "copyGuestLink": "Gast-Link",
-    "linkCopied": "Link kopiert!",
+    "linkCopied": "Link kopiert",
    "meetingDetails": "Meeting-Details",
    "meetingId": "Meeting ID",
    "status": "Status",
@@ -201,7 +197,7 @@
    "emptyNoCode": "Leer = kein Code",
    "settingsSaved": "Einstellungen gespeichert",
    "settingsSaveFailed": "Einstellungen konnten nicht gespeichert werden",
-    "meetingStarted": "Meeting gestartet!",
+    "meetingStarted": "Meeting gestartet",
    "meetingStartFailed": "Meeting konnte nicht gestartet werden",
    "meetingEnded": "Meeting beendet",
    "meetingEndFailed": "Meeting konnte nicht beendet werden",
@@ -216,7 +212,7 @@
    "moderatorCodeHint": "Optionaler Code für Moderator-Rechte",
    "moderatorCodeDesc": "Gäste, die diesen Code eingeben, erhalten Moderator-Rechte.",
    "guestLink": "Gast-Einladungslink",
-    "guestLinkCopied": "Gast-Link kopiert!",
+    "guestLinkCopied": "Gast-Link kopiert",
    "guestJoinTitle": "Meeting beitreten",
    "guestCreatedBy": "Erstellt von",
    "guestMeetingRunning": "Meeting läuft",
@@ -351,7 +347,7 @@
      "statusDisabledDesc": "Aktiviere die Zwei-Faktor-Authentifizierung für zusätzliche Sicherheit.",
      "enable": "2FA aktivieren",
      "disable": "2FA deaktivieren",
-      "enabled": "Zwei-Faktor-Authentifizierung aktiviert!",
+      "enabled": "Zwei-Faktor-Authentifizierung aktiviert",
      "disabled": "Zwei-Faktor-Authentifizierung deaktiviert.",
      "enableFailed": "2FA konnte nicht aktiviert werden",
      "disableFailed": "2FA konnte nicht deaktiviert werden",
@@ -380,7 +376,7 @@
      "revoked": "Token widerrufen",
      "revokeFailed": "Token konnte nicht widerrufen werden",
      "createFailed": "Token konnte nicht erstellt werden",
-      "newTokenCreated": "Token erstellt — jetzt kopieren!",
+      "newTokenCreated": "Token erstellt — jetzt kopieren",
      "newTokenHint": "Dieses Token wird nur einmal angezeigt. Kopiere es und trage es als Passwort in deiner Kalender-App ein.",
      "dismiss": "Ich habe das Token kopiert"
    }
@@ -448,11 +444,11 @@
    "inviteTitle": "Benutzer-Einladungen",
    "inviteDescription": "Laden Sie neue Benutzer per E-Mail ein. Sie erhalten einen Registrierungslink, der 7 Tage gültig ist.",
    "sendInvite": "Einladung senden",
-    "inviteSent": "Einladung gesendet!",
+    "inviteSent": "Einladung gesendet",
    "inviteFailed": "Einladung konnte nicht gesendet werden",
    "inviteDeleted": "Einladung gelöscht",
    "inviteDeleteFailed": "Einladung konnte nicht gelöscht werden",
-    "inviteLinkCopied": "Einladungslink kopiert!",
+    "inviteLinkCopied": "Einladungslink kopiert",
    "copyInviteLink": "Einladungslink kopieren",
    "inviteExpired": "Abgelaufen",
    "inviteUsedBy": "Verwendet von",
@@ -484,7 +480,21 @@
    "oauthRemoveConfirm": "OAuth-Konfiguration wirklich entfernen? Benutzer können sich dann nicht mehr per SSO anmelden.",
    "oauthNotConfigured": "OAuth ist noch nicht konfiguriert.",
    "oauthSave": "OAuth speichern",
-    "oauthRemove": "OAuth entfernen"
+    "oauthRemove": "OAuth entfernen",
    "roomsTitle": "Raumverwaltung",
    "roomsDescription": "Alle Räume der Instanz einsehen, verwalten und bei Bedarf löschen.",
    "searchRooms": "Räume suchen...",
    "roomName": "Name",
    "roomOwner": "Besitzer",
    "roomShares": "Geteilt",
    "roomCreated": "Erstellt",
    "roomView": "Raum öffnen",
    "deleteRoom": "Raum löschen",
    "deleteRoomConfirm": "Raum \"{name}\" wirklich löschen? Dies kann nicht rückgängig gemacht werden.",
    "roomDeleted": "Raum gelöscht",
    "roomDeleteFailed": "Raum konnte nicht gelöscht werden",
    "noRoomsFound": "Keine Räume vorhanden",
    "showAllRooms": "Alle {count} Räume anzeigen"
  },
  "notifications": {
    "bell": "Benachrichtigungen",
@@ -500,14 +510,19 @@
    "inbox": "Einladungen",
    "inboxSubtitle": "Meeting-Einladungen von anderen Redlight-Instanzen",
    "inviteTitle": "Remote-Benutzer einladen",
-    "inviteSubtitle": "Einen Benutzer von einer anderen Redlight-Instanz zu diesem Meeting einladen.",
+    "inviteSubtitle": "Du kannst entweder einen Benutzer von einer anderen Redlight-Instanz über seine Adresse einladen oder direkt eine E-Mail-Einladung senden. Es kann nur eine Option gleichzeitig verwendet werden.",
    "addressLabel": "Benutzeradresse",
    "addressPlaceholder": "@benutzer@andere-instanz.com",
    "addressHint": "Format: @Benutzername@Domain der Redlight-Instanz",
    "emailLabel": "Per E-Mail einladen",
    "emailPlaceholder": "name@beispiel.de, name2@beispiel.de",
    "emailHint": "Eine oder mehrere E-Mail-Adressen, durch Komma getrennt",
    "messageLabel": "Nachricht (optional)",
    "messagePlaceholder": "Hallo, ich lade dich zu unserem Meeting ein!",
    "send": "Einladung senden",
-    "sent": "Einladung gesendet!",
+    "sent": "Einladung gesendet",
    "emailSent": "E-Mail-Einladung(en) gesendet",
    "emailSendFailed": "E-Mail-Einladung konnte nicht gesendet werden",
    "sendFailed": "Einladung konnte nicht gesendet werden",
    "from": "Von",
    "accept": "Annehmen",
@@ -532,7 +547,7 @@
    "removeRoomConfirm": "Raum wirklich entfernen?",
    "roomRemoved": "Raum entfernt",
    "roomRemoveFailed": "Raum konnte nicht entfernt werden",
-    "acceptedSaved": "Einladung angenommen - Raum wurde in deinem Dashboard gespeichert!",
+    "acceptedSaved": "Einladung angenommen - Raum wurde in deinem Dashboard gespeichert",
    "meetingId": "Meeting ID",
    "maxParticipants": "Max. Teilnehmer",
    "recordingOn": "Aufnahme aktiviert",
@@ -548,9 +563,9 @@
    "roomDeleted": "Gelöscht",
    "roomDeletedNotice": "Dieser Raum wurde vom Besitzer auf der Ursprungsinstanz gelöscht und ist nicht mehr verfügbar.",
    "calendarEvent": "Kalendereinladung",
-    "calendarAccepted": "Kalender-Event angenommen und in deinen Kalender eingetragen!",
+    "calendarAccepted": "Kalender-Event angenommen und in deinen Kalender eingetragen",
    "localCalendarEvent": "Lokale Kalendereinladung",
-    "calendarLocalAccepted": "Einladung angenommen - Event wurde in deinen Kalender eingetragen!",
+    "calendarLocalAccepted": "Einladung angenommen - Event wurde in deinen Kalender eingetragen",
    "invitationRemoved": "Einladung entfernt",
    "removeInvitation": "Einladung entfernen"
  },
@@ -579,8 +594,8 @@
    "reminder1440": "1 Tag vorher",
    "timezone": "Zeitzone",
    "color": "Farbe",
-    "eventCreated": "Event erstellt!",
+    "eventCreated": "Event erstellt",
-    "eventUpdated": "Event aktualisiert!",
+    "eventUpdated": "Event aktualisiert",
    "eventDeleted": "Event gelöscht",
    "saveFailed": "Event konnte nicht gespeichert werden",
    "deleteFailed": "Event konnte nicht gelöscht werden",
@@ -607,7 +622,7 @@
    "shareAdded": "Benutzer zum Event hinzugefügt",
    "shareRemoved": "Freigabe entfernt",
    "shareFailed": "Event konnte nicht geteilt werden",
-    "invitationSent": "Einladung gesendet!",
+    "invitationSent": "Einladung gesendet",
    "invitationCancelled": "Einladung widerrufen",
    "invitationPending": "Einladung ausstehend",
    "pendingInvitations": "Ausstehende Einladungen",
@@ -23,7 +23,9 @@
    "protected": "Protected",
    "live": "Live",
    "error": "Error",
-    "success": "Success"
+    "success": "Success",
    "gridView": "Grid view",
    "listView": "List view"
  },
  "nav": {
    "dashboard": "Dashboard",
@@ -62,16 +64,16 @@
    "passwordMismatch": "Passwords do not match",
    "passwordTooShort": "Password must be at least 6 characters",
    "loginSuccess": "Welcome back!",
-    "registerSuccess": "Registration successful!",
+    "registerSuccess": "Registration successful",
    "loginFailed": "Login failed",
    "registerFailed": "Registration failed",
    "allFieldsRequired": "All fields are required",
-    "verificationSent": "Verification email sent!",
+    "verificationSent": "Verification email sent",
    "verificationSentDesc": "We've sent you an email with a verification link. Please click the link to activate your account.",
    "checkYourEmail": "Check your inbox",
    "verifying": "Verifying your email...",
    "verifySuccess": "Your email has been verified successfully. You can now sign in.",
-    "verifySuccessTitle": "Email verified!",
+    "verifySuccessTitle": "Email verified",
    "verifyFailed": "Verification failed",
    "verifyFailedTitle": "Verification failed",
    "verifyTokenMissing": "No verification token provided.",
@@ -88,7 +90,7 @@
    "emailVerificationBanner": "Your email address has not been verified yet.",
    "emailVerificationResend": "Click here to receive a new verification email",
    "emailVerificationResendCooldown": "Resend in {seconds}s",
-    "emailVerificationResendSuccess": "Verification email sent!",
+    "emailVerificationResendSuccess": "Verification email sent",
    "emailVerificationResendFailed": "Could not send verification email",
    "inviteOnly": "Invite Only",
    "inviteOnlyDesc": "Registration is currently restricted. You need an invitation link from an administrator to create an account.",
@@ -110,28 +112,22 @@
    }
  },
  "home": {
-    "madeFor": "Made for BigBlueButton",
+    "heroTitle": "Self-hosted frontend for BigBlueButton",
-    "heroTitle": "Meetings re",
+    "heroSubtitle": "Redlight manages rooms, recordings and scheduling for your BigBlueButton server – with federation between instances, CalDAV sync and SSO support.",
-    "heroTitleHighlight": "defined",
+    "getStarted": "Create account",
-    "heroSubtitle": "The modern, self-hosted BigBlueButton frontend. Create rooms, manage recordings and enjoy a beautiful interface with over 15 themes.",
+    "features": "Features",
-    "getStarted": "Get started",
+    "featureRoomsTitle": "Room management",
-    "features": "Everything you need",
+    "featureRoomsDesc": "Rooms with individual settings, access codes and shared access for colleagues.",
    "featuresSubtitle": "Redlight provides all the features you need for professional video conferencing.",
    "featureVideoTitle": "Video Conferencing",
    "featureVideoDesc": "Create and manage meetings directly via BigBlueButton.",
    "featureRoomsTitle": "Room Management",
    "featureRoomsDesc": "Unlimited rooms with individual settings and access codes.",
    "featureUsersTitle": "User Management",
    "featureUsersDesc": "Registration, login and role management for your organization.",
    "featureThemesTitle": "15+ Themes",
    "featureThemesDesc": "Dracula, Nord, Catppuccin, Rosé Pine, Gruvbox and many more.",
    "featureRecordingsTitle": "Recordings",
-    "featureRecordingsDesc": "View, publish or delete all recordings per room.",
+    "featureRecordingsDesc": "View, publish or delete recordings per room.",
-    "featureOpenSourceTitle": "Open Source",
+    "featureFederationTitle": "Federation",
-    "featureOpenSourceDesc": "Fully open source and self-hosted. Your data stays with you.",
+    "featureFederationDesc": "Invite users from other Redlight instances and accept cross-instance invitations.",
-    "statThemes": "Themes",
+    "featureCalendarTitle": "Calendar",
-    "statRooms": "Rooms",
+    "featureCalendarDesc": "Schedule meetings, sync via CalDAV with Thunderbird, Apple Calendar or DAVx⁵, get reminders.",
-    "statOpenSource": "Open Source",
+    "featureVideoTitle": "Video conferencing",
    "featureVideoDesc": "Create, start and manage meetings directly via BigBlueButton.",
    "featureAnalyticsTitle": "Learning analytics",
    "featureAnalyticsDesc": "Review attendance and activity data from meetings and export it as CSV, Excel or PDF.",
    "footer": "© {year} Redlight. An open source BigBlueButton frontend."
  },
  "dashboard": {
@@ -152,7 +148,7 @@
    "accessCode": "Access code",
    "muteOnJoin": "Mute participants on join",
    "allowRecording": "Allow recording",
-    "roomCreated": "Room created!",
+    "roomCreated": "Room created",
    "roomCreateFailed": "Room could not be created",
    "roomDeleted": "Room deleted",
    "roomDeleteFailed": "Room could not be deleted",
@@ -176,7 +172,7 @@
    "copyLink": "Copy link",
    "copyRoomLink": "Room Link",
    "copyGuestLink": "Guest Link",
-    "linkCopied": "Link copied!",
+    "linkCopied": "Link copied",
    "meetingDetails": "Meeting details",
    "meetingId": "Meeting ID",
    "status": "Status",
@@ -201,7 +197,7 @@
    "emptyNoCode": "Empty = no code",
    "settingsSaved": "Settings saved",
    "settingsSaveFailed": "Settings could not be saved",
-    "meetingStarted": "Meeting started!",
+    "meetingStarted": "Meeting started",
    "meetingStartFailed": "Meeting could not be started",
    "meetingEnded": "Meeting ended",
    "meetingEndFailed": "Meeting could not be ended",
@@ -216,7 +212,7 @@
    "moderatorCodeHint": "Optional code for moderator rights",
    "moderatorCodeDesc": "Guests who enter this code will receive moderator rights.",
    "guestLink": "Guest Invite Link",
-    "guestLinkCopied": "Guest link copied!",
+    "guestLinkCopied": "Guest link copied",
    "guestJoinTitle": "Join Meeting",
    "guestCreatedBy": "Created by",
    "guestMeetingRunning": "Meeting in progress",
@@ -351,7 +347,7 @@
      "statusDisabledDesc": "Enable two-factor authentication for an extra layer of security.",
      "enable": "Enable 2FA",
      "disable": "Disable 2FA",
-      "enabled": "Two-factor authentication enabled!",
+      "enabled": "Two-factor authentication enabled",
      "disabled": "Two-factor authentication disabled.",
      "enableFailed": "Could not enable 2FA",
      "disableFailed": "Could not disable 2FA",
@@ -380,7 +376,7 @@
      "revoked": "Token revoked",
      "revokeFailed": "Could not revoke token",
      "createFailed": "Could not create token",
-      "newTokenCreated": "Token created — copy it now!",
+      "newTokenCreated": "Token created — copy it now",
      "newTokenHint": "This token will only be shown once. Copy it and enter it as the password in your calendar app.",
      "dismiss": "I have copied the token"
    }
@@ -448,11 +444,11 @@
    "inviteTitle": "User Invitations",
    "inviteDescription": "Invite new users by email. They will receive a registration link valid for 7 days.",
    "sendInvite": "Send invite",
-    "inviteSent": "Invitation sent!",
+    "inviteSent": "Invitation sent",
    "inviteFailed": "Could not send invitation",
    "inviteDeleted": "Invitation deleted",
    "inviteDeleteFailed": "Could not delete invitation",
-    "inviteLinkCopied": "Invite link copied!",
+    "inviteLinkCopied": "Invite link copied",
    "copyInviteLink": "Copy invite link",
    "inviteExpired": "Expired",
    "inviteUsedBy": "Used by",
@@ -484,7 +480,21 @@
    "oauthRemoveConfirm": "Really remove OAuth configuration? Users will no longer be able to sign in with SSO.",
    "oauthNotConfigured": "OAuth is not configured yet.",
    "oauthSave": "Save OAuth",
-    "oauthRemove": "Remove OAuth"
+    "oauthRemove": "Remove OAuth",
    "roomsTitle": "Room Management",
    "roomsDescription": "View, manage, and delete all rooms on this instance.",
    "searchRooms": "Search rooms...",
    "roomName": "Name",
    "roomOwner": "Owner",
    "roomShares": "Shared",
    "roomCreated": "Created",
    "roomView": "View room",
    "deleteRoom": "Delete room",
    "deleteRoomConfirm": "Really delete room \"{name}\"? This cannot be undone.",
    "roomDeleted": "Room deleted",
    "roomDeleteFailed": "Room could not be deleted",
    "noRoomsFound": "No rooms found",
    "showAllRooms": "Show all {count} rooms"
  },
  "notifications": {
    "bell": "Notifications",
@@ -500,14 +510,19 @@
    "inbox": "Invitations",
    "inboxSubtitle": "Meeting invitations from other Redlight instances",
    "inviteTitle": "Invite Remote User",
-    "inviteSubtitle": "Invite a user from another Redlight instance to this meeting.",
+    "inviteSubtitle": "You can either invite a user from another Redlight instance by their address, or send an email invitation directly. Only one option can be used at a time.",
    "addressLabel": "User address",
    "addressPlaceholder": "@user@other-instance.com",
    "addressHint": "Format: @username@domain of the Redlight instance",
    "emailLabel": "Invite by email",
    "emailPlaceholder": "name@example.com, name2@example.com",
    "emailHint": "Enter one or more email addresses, separated by commas",
    "messageLabel": "Message (optional)",
    "messagePlaceholder": "Hi, I'd like to invite you to our meeting!",
    "send": "Send invitation",
-    "sent": "Invitation sent!",
+    "sent": "Invitation sent",
    "emailSent": "Email invitation(s) sent",
    "emailSendFailed": "Could not send email invitation",
    "sendFailed": "Could not send invitation",
    "from": "From",
    "accept": "Accept",
@@ -532,7 +547,7 @@
    "removeRoomConfirm": "Really remove this room?",
    "roomRemoved": "Room removed",
    "roomRemoveFailed": "Could not remove room",
-    "acceptedSaved": "Invitation accepted - room saved to your dashboard!",
+    "acceptedSaved": "Invitation accepted - room saved to your dashboard",
    "meetingId": "Meeting ID",
    "maxParticipants": "Max. participants",
    "recordingOn": "Recording enabled",
@@ -548,9 +563,9 @@
    "roomDeleted": "Deleted",
    "roomDeletedNotice": "This room has been deleted by the owner on the origin instance and is no longer available.",
    "calendarEvent": "Calendar Invitation",
-    "calendarAccepted": "Calendar event accepted and added to your calendar!",
+    "calendarAccepted": "Calendar event accepted and added to your calendar",
    "localCalendarEvent": "Local Calendar Invitation",
-    "calendarLocalAccepted": "Invitation accepted - event added to your calendar!",
+    "calendarLocalAccepted": "Invitation accepted - event added to your calendar",
    "invitationRemoved": "Invitation removed",
    "removeInvitation": "Remove invitation"
  },
@@ -579,8 +594,8 @@
    "reminder1440": "1 day before",
    "timezone": "Timezone",
    "color": "Color",
-    "eventCreated": "Event created!",
+    "eventCreated": "Event created",
-    "eventUpdated": "Event updated!",
+    "eventUpdated": "Event updated",
    "eventDeleted": "Event deleted",
    "saveFailed": "Could not save event",
    "deleteFailed": "Could not delete event",
@@ -607,7 +622,7 @@
    "shareAdded": "User added to event",
    "shareRemoved": "Share removed",
    "shareFailed": "Could not share event",
-    "invitationSent": "Invitation sent!",
+    "invitationSent": "Invitation sent",
    "invitationCancelled": "Invitation cancelled",
    "invitationPending": "Invitation pending",
    "pendingInvitations": "Pending Invitations",
@@ -1,6 +1,132 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+@theme {
  --color-th-bg: var(--bg-primary);
  --color-th-bg-s: var(--bg-secondary);
  --color-th-bg-t: var(--bg-tertiary);
  --color-th-text: var(--text-primary);
  --color-th-text-s: var(--text-secondary);
  --color-th-accent: var(--accent);
  --color-th-accent-h: var(--accent-hover);
  --color-th-accent-t: var(--accent-text);
  --color-th-border: var(--border);
  --color-th-card: var(--card-bg);
  --color-th-input: var(--input-bg);
  --color-th-input-b: var(--input-border);
  --color-th-nav: var(--nav-bg);
  --color-th-side: var(--sidebar-bg);
  --color-th-hover: var(--hover-bg);
  --color-th-success: var(--success);
  --color-th-warning: var(--warning);
  --color-th-error: var(--error);
  --color-th-ring: var(--ring);
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --shadow-th:
    0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
  --shadow-th-lg:
    0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
 }
 /*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.
  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
 */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
  /* Restore Tailwind v3 default: buttons get a pointer cursor */
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
  }
 }
@utility btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-accent text-th-accent-t hover:bg-th-accent-h
    transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
 }
@utility btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-bg-s text-th-text border border-th-border
    hover:bg-th-hover transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
 }
@utility btn-danger {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-error text-white hover:opacity-90
    transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-error focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
 }
@utility btn-ghost {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    text-th-text-s hover:bg-th-hover hover:text-th-text
    transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
 }
@utility input-field {
  @apply w-full px-4 py-2.5 rounded-lg
    bg-th-input text-th-text placeholder-th-text-s
    border border-th-input-b
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:border-transparent
    transition-all duration-200;
 }
@utility card {
  @apply bg-th-card rounded-xl border border-th-border
    shadow-th transition-all duration-200;
 }
@utility card-hover {
  @apply card hover:shadow-th-lg cursor-pointer;
  &:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
 }
@utility gradient-text {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 }
@utility gradient-bg {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
 }
@layer base {
  /* ===== DEFAULT LIGHT ===== */
@@ -444,8 +570,9 @@
  }
  }
  @layer utilities {
  /* ===== SCRUNKLY.CAT DARK ===== */
-  [data-theme="scrunkly-cat"] {
+  [data-theme='scrunkly-cat'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #161924;
@@ -473,7 +600,7 @@
  }
  /* ===== RED MODULAR LIGHT ===== */
-  [data-theme="red-modular-light"] {
+  [data-theme='red-modular-light'] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #ffffff;
@@ -501,7 +628,7 @@
  }
  /* ===== EVERFOREST DARK ===== */
-  [data-theme="everforest-dark"] {
+  [data-theme='everforest-dark'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #2d353b;
@@ -529,7 +656,7 @@
  }
  /* ===== EVERFOREST LIGHT ===== */
-  [data-theme="everforest-light"] {
+  [data-theme='everforest-light'] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #fdf6e3;
@@ -557,7 +684,7 @@
  }
  /* ===== KANAGAWA ===== */
-  [data-theme="kanagawa"] {
+  [data-theme='kanagawa'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #1f1f28;
@@ -585,7 +712,7 @@
  }
  /* ===== AYU DARK ===== */
-  [data-theme="ayu-dark"] {
+  [data-theme='ayu-dark'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #0d1017;
@@ -613,7 +740,7 @@
  }
  /* ===== MOONLIGHT ===== */
-  [data-theme="moonlight"] {
+  [data-theme='moonlight'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #212337;
@@ -641,7 +768,7 @@
  }
  /* ===== CYBERPUNK ===== */
-  [data-theme="cyberpunk"] {
+  [data-theme='cyberpunk'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #0a0a0f;
@@ -669,7 +796,7 @@
  }
  /* ===== COTTON CANDY LIGHT ===== */
-  [data-theme="cotton-candy-light"] {
+  [data-theme='cotton-candy-light'] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #fff5f9;
@@ -695,77 +822,6 @@
    --gradient-start: #ff85a2;
    --gradient-end: #c084fc;
  }
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-accent text-th-accent-t hover:bg-th-accent-h
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-bg-s text-th-text border border-th-border
    hover:bg-th-hover transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }
  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-error text-white hover:opacity-90
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-error focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    text-th-text-s hover:bg-th-hover hover:text-th-text
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }
  .input-field {
    @apply w-full px-4 py-2.5 rounded-lg
    bg-th-input text-th-text placeholder-th-text-s
    border border-th-input-b
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
    transition-all duration-200;
  }
  .card {
    @apply bg-th-card rounded-xl border border-th-border
    shadow-th transition-all duration-200;
  }
  .card-hover {
    @apply card hover:shadow-th-lg cursor-pointer;
  }
  .card-hover:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
 }
@layer utilities {
  .gradient-text {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  }
 }
 /* ═══════════════════════════════════════════════════════════════
@@ -4,7 +4,7 @@ import {
  Users, Shield, Search, Trash2, ChevronDown, Loader2,
  MoreVertical, Key, UserCheck, UserX, UserPlus, Mail, Lock, User,
  Upload, X as XIcon, Image, Type, Palette, Send, Copy, Clock, Check,
-  ShieldCheck, Globe, Link as LinkIcon, LogIn,
+  ShieldCheck, Globe, Link as LinkIcon, LogIn, DoorOpen, Eye, ExternalLink,
 } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -55,6 +55,14 @@ export default function Admin() {
  const [oauthForm, setOauthForm] = useState({ issuer: '', clientId: '', clientSecret: '', displayName: 'SSO', autoRegister: true });
  const [savingOauth, setSavingOauth] = useState(false);
  // Rooms state
  const [adminRooms, setAdminRooms] = useState([]);
  const [adminRoomsLoading, setAdminRoomsLoading] = useState(true);
  const [roomSearch, setRoomSearch] = useState('');
  const [roomsExpanded, setRoomsExpanded] = useState(false);
  const [showAllRoomsModal, setShowAllRoomsModal] = useState(false);
  const [allRoomsSearch, setAllRoomsSearch] = useState('');
  useEffect(() => {
    if (user?.role !== 'admin') {
      navigate('/dashboard');
@@ -63,6 +71,7 @@ export default function Admin() {
    fetchUsers();
    fetchInvites();
    fetchOauthConfig();
    fetchAdminRooms();
  }, [user]);
  useEffect(() => {
@@ -101,6 +110,29 @@ export default function Admin() {
    }
  };
  const fetchAdminRooms = async () => {
    setAdminRoomsLoading(true);
    try {
      const res = await api.get('/admin/rooms');
      setAdminRooms(res.data.rooms);
    } catch {
      // silently fail
    } finally {
      setAdminRoomsLoading(false);
    }
  };
  const handleAdminDeleteRoom = async (uid, name) => {
    if (!confirm(t('admin.deleteRoomConfirm', { name }))) return;
    try {
      await api.delete(`/rooms/${uid}`);
      toast.success(t('admin.roomDeleted'));
      fetchAdminRooms();
    } catch (err) {
      toast.error(err.response?.data?.error || t('admin.roomDeleteFailed'));
    }
  };
  const handleRoleChange = async (userId, newRole) => {
    try {
      await api.put(`/admin/users/${userId}/role`, { role: newRole });
@@ -391,17 +423,18 @@ export default function Admin() {
        <div className="grid gap-6 sm:grid-cols-2">
          {/* Logo upload */}
          <div>
-            <label className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</label>
+            <p className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</p>
            <div className="flex items-center gap-4">
              {hasLogo && logoUrl ? (
                <div className="relative group">
                  <img
                    src={`${logoUrl}?t=${Date.now()}`}
-                    alt="Logo"
+                    alt=""
                    className="w-14 h-14 rounded-xl object-contain border border-th-border bg-th-bg p-1"
                  />
                  <button
                    onClick={handleLogoRemove}
                    aria-label={t('common.delete')}
                    className="absolute -top-2 -right-2 w-5 h-5 bg-th-error text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <XIcon size={12} />
@@ -439,11 +472,12 @@ export default function Admin() {
          {/* App name */}
          <div>
-            <label className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
+            <label htmlFor="admin-app-name" className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
            <div className="flex items-center gap-2">
              <div className="relative flex-1">
-                <Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  id="admin-app-name"
                  type="text"
                  value={editAppName}
                  onChange={e => setEditAppName(e.target.value)}
@@ -470,7 +504,7 @@ export default function Admin() {
                  type="button"
                  disabled={savingHideAppName}
                  onClick={() => handleHideAppNameToggle(!hideAppName)}
-                  className={`relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-1 disabled:opacity-50 ml-4 ${
+                  className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-1 disabled:opacity-50 ml-4 ${
                    hideAppName ? 'bg-th-accent' : 'bg-th-border'
                  }`}
                  aria-checked={hideAppName}
@@ -488,12 +522,13 @@ export default function Admin() {
        {/* Default theme */}
        <div className="mt-6 pt-6 border-t border-th-border">
          <div className="flex items-center gap-2 mb-1">
-            <Palette size={16} className="text-th-accent" />
+            <Palette size={16} className="text-th-accent" aria-hidden="true" />
-            <label className="block text-sm font-medium text-th-text">{t('admin.defaultThemeLabel')}</label>
+            <label htmlFor="admin-default-theme" className="block text-sm font-medium text-th-text">{t('admin.defaultThemeLabel')}</label>
          </div>
          <p className="text-xs text-th-text-s mb-3">{t('admin.defaultThemeDesc')}</p>
          <div className="flex items-center gap-2">
            <select
              id="admin-default-theme"
              value={editDefaultTheme}
              onChange={e => setEditDefaultTheme(e.target.value)}
              className="input-field text-sm flex-1"
@@ -507,7 +542,7 @@ export default function Admin() {
            <button
              onClick={handleDefaultThemeSave}
              disabled={savingDefaultTheme || editDefaultTheme === (defaultTheme || 'dark')}
-              className="btn-primary text-sm px-4 flex-shrink-0"
+              className="btn-primary text-sm px-4 shrink-0"
            >
              {savingDefaultTheme ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
            </button>
@@ -517,16 +552,17 @@ export default function Admin() {
        {/* Legal links */}
        <div className="mt-6 pt-6 border-t border-th-border">
          <div className="flex items-center gap-2 mb-1">
-            <LinkIcon size={16} className="text-th-accent" />
+            <LinkIcon size={16} className="text-th-accent" aria-hidden="true" />
-            <label className="block text-sm font-medium text-th-text">{t('admin.legalLinksTitle')}</label>
+            <p className="block text-sm font-medium text-th-text">{t('admin.legalLinksTitle')}</p>
          </div>
          <p className="text-xs text-th-text-s mb-4">{t('admin.legalLinksDesc')}</p>
          <div className="grid gap-4 sm:grid-cols-2">
            {/* Imprint */}
            <div>
-              <label className="block text-xs font-medium text-th-text-s mb-1">{t('admin.imprintUrl')}</label>
+              <label htmlFor="admin-imprint-url" className="block text-xs font-medium text-th-text-s mb-1">{t('admin.imprintUrl')}</label>
              <div className="flex items-center gap-2">
                <input
                  id="admin-imprint-url"
                  type="url"
                  value={editImprintUrl}
                  onChange={e => setEditImprintUrl(e.target.value)}
@@ -537,7 +573,7 @@ export default function Admin() {
                <button
                  onClick={handleImprintUrlSave}
                  disabled={savingImprintUrl || editImprintUrl === (imprintUrl || '')}
-                  className="btn-primary text-sm px-4 flex-shrink-0"
+                  className="btn-primary text-sm px-4 shrink-0"
                >
                  {savingImprintUrl ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
                </button>
@@ -545,9 +581,10 @@ export default function Admin() {
            </div>
            {/* Privacy Policy */}
            <div>
-              <label className="block text-xs font-medium text-th-text-s mb-1">{t('admin.privacyUrl')}</label>
+              <label htmlFor="admin-privacy-url" className="block text-xs font-medium text-th-text-s mb-1">{t('admin.privacyUrl')}</label>
              <div className="flex items-center gap-2">
                <input
                  id="admin-privacy-url"
                  type="url"
                  value={editPrivacyUrl}
                  onChange={e => setEditPrivacyUrl(e.target.value)}
@@ -558,7 +595,7 @@ export default function Admin() {
                <button
                  onClick={handlePrivacyUrlSave}
                  disabled={savingPrivacyUrl || editPrivacyUrl === (privacyUrl || '')}
-                  className="btn-primary text-sm px-4 flex-shrink-0"
+                  className="btn-primary text-sm px-4 shrink-0"
                >
                  {savingPrivacyUrl ? <Loader2 size={14} className="animate-spin" /> : t('common.save')}
                </button>
@@ -615,20 +652,21 @@ export default function Admin() {
        {/* Send invite form */}
        <form onSubmit={handleSendInvite} className="flex items-center gap-2 mb-6">
          <div className="relative flex-1">
-            <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
+            <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
            <input
              type="email"
              value={inviteEmail}
              onChange={e => setInviteEmail(e.target.value)}
              className="input-field pl-9 text-sm"
              placeholder={t('auth.emailPlaceholder')}
              aria-label={t('auth.email')}
              required
            />
          </div>
          <button
            type="submit"
            disabled={sendingInvite || !inviteEmail.trim()}
-            className="btn-primary text-sm px-4 flex-shrink-0"
+            className="btn-primary text-sm px-4 shrink-0"
          >
            {sendingInvite ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
            {t('admin.sendInvite')}
@@ -644,7 +682,7 @@ export default function Admin() {
              return (
                <div key={inv.id} className="flex items-center justify-between gap-3 p-3 rounded-xl bg-th-bg border border-th-border">
                  <div className="flex items-center gap-3 min-w-0">
-                    <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    <div className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 ${
                      isUsed ? 'bg-green-500/15 text-green-400' : isExpired ? 'bg-red-500/15 text-red-400' : 'bg-th-accent/15 text-th-accent'
                    }`}>
                      {isUsed ? <Check size={14} /> : isExpired ? <XIcon size={14} /> : <Clock size={14} />}
@@ -661,7 +699,7 @@ export default function Admin() {
                      </p>
                    </div>
                  </div>
-                  <div className="flex items-center gap-1 flex-shrink-0">
+                  <div className="flex items-center gap-1 shrink-0">
                    {!isUsed && !isExpired && (
                      <button
                        onClick={() => handleCopyInviteLink(inv.token)}
@@ -706,8 +744,9 @@ export default function Admin() {
          <form onSubmit={handleOauthSave} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
+                <label htmlFor="admin-oauth-issuer" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
                <input
                  id="admin-oauth-issuer"
                  type="url"
                  value={oauthForm.issuer}
                  onChange={e => setOauthForm(f => ({ ...f, issuer: e.target.value }))}
@@ -718,8 +757,9 @@ export default function Admin() {
                <p className="text-xs text-th-text-s mt-1">{t('admin.oauthIssuerHint')}</p>
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
+                <label htmlFor="admin-oauth-client-id" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
                <input
                  id="admin-oauth-client-id"
                  type="text"
                  value={oauthForm.clientId}
                  onChange={e => setOauthForm(f => ({ ...f, clientId: e.target.value }))}
@@ -732,9 +772,11 @@ export default function Admin() {
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
+                <label htmlFor="admin-oauth-client-secret" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
                <input
                  id="admin-oauth-client-secret"
                  type="password"
                  autoComplete="new-password"
                  value={oauthForm.clientSecret}
                  onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))}
                  className="input-field text-sm"
@@ -745,8 +787,9 @@ export default function Admin() {
                )}
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
+                <label htmlFor="admin-oauth-display-name" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
                <input
                  id="admin-oauth-display-name"
                  type="text"
                  value={oauthForm.displayName}
                  onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))}
@@ -790,16 +833,133 @@ export default function Admin() {
        )}
      </div>
      {/* Room Management */}
      <div className="card p-6 mb-8">
        <button
          type="button"
          onClick={() => setRoomsExpanded(v => !v)}
          className="flex items-center justify-between w-full text-left"
        >
          <div className="flex items-center gap-2">
            <DoorOpen size={20} className="text-th-accent" />
            <h2 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h2>
            <span className="text-sm text-th-text-s">({adminRooms.length})</span>
          </div>
          <ChevronDown size={18} className={`text-th-text-s transition-transform duration-200 ${roomsExpanded ? 'rotate-180' : ''}`} />
        </button>
        {roomsExpanded && (
          <div className="mt-4">
            <p className="text-sm text-th-text-s mb-5">{t('admin.roomsDescription')}</p>
            {adminRoomsLoading ? (
              <div className="flex justify-center py-4">
                <Loader2 size={20} className="animate-spin text-th-accent" />
              </div>
            ) : (
              <>
                {adminRooms.length > 0 && (
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead>
                        <tr className="border-b border-th-border">
                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                            {t('admin.roomName')}
                          </th>
                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
                            {t('admin.roomOwner')}
                          </th>
                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
                            {t('admin.roomShares')}
                          </th>
                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
                            {t('admin.roomCreated')}
                          </th>
                          <th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                            {t('admin.actions')}
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {adminRooms.slice(0, 10).map(r => (
                          <tr key={r.id} className="border-b border-th-border last:border-0 hover:bg-th-hover transition-colors">
                            <td className="px-4 py-3">
                              <div>
                                <p className="text-sm font-medium text-th-text">{r.name}</p>
                                <p className="text-xs text-th-text-s font-mono">{r.uid}</p>
                              </div>
                            </td>
                            <td className="px-4 py-3 hidden sm:table-cell">
                              <div>
                                <p className="text-sm text-th-text">{r.owner_name}</p>
                                <p className="text-xs text-th-text-s">{r.owner_email}</p>
                              </div>
                            </td>
                            <td className="px-4 py-3 text-sm text-th-text hidden md:table-cell">
                              {r.share_count}
                            </td>
                            <td className="px-4 py-3 text-sm text-th-text-s hidden lg:table-cell">
                              {new Date(r.created_at).toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US')}
                            </td>
                            <td className="px-4 py-3">
                              <div className="flex items-center justify-end gap-1">
                                <button
                                  onClick={() => navigate(`/rooms/${r.uid}`)}
                                  className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
                                  title={t('admin.roomView')}
                                >
                                  <Eye size={15} />
                                </button>
                                <button
                                  onClick={() => handleAdminDeleteRoom(r.uid, r.name)}
                                  className="p-1.5 rounded-lg hover:bg-th-hover text-th-error transition-colors"
                                  title={t('admin.deleteRoom')}
                                >
                                  <Trash2 size={15} />
                                </button>
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
                {adminRooms.length > 10 && (
                  <div className="mt-4 text-center">
                    <button
                      onClick={() => { setAllRoomsSearch(''); setShowAllRoomsModal(true); }}
                      className="btn-secondary text-sm"
                    >
                      {t('admin.showAllRooms', { count: adminRooms.length })}
                    </button>
                  </div>
                )}
                {adminRooms.length === 0 && (
                  <div className="text-center py-8">
                    <DoorOpen size={36} className="mx-auto text-th-text-s/40 mb-2" />
                    <p className="text-th-text-s text-sm">{t('admin.noRoomsFound')}</p>
                  </div>
                )}
              </>
            )}
          </div>
        )}
      </div>
      {/* Search */}
      <div className="card p-4 mb-6">
        <div className="relative">
-          <Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+          <Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
          <input
-            type="text"
+            type="search"
            value={search}
            onChange={e => setSearch(e.target.value)}
            className="input-field pl-11"
            placeholder={t('admin.searchUsers')}
            aria-label={t('admin.searchUsers')}
          />
        </div>
      </div>
@@ -833,7 +993,7 @@ export default function Admin() {
                  <td className="px-5 py-4">
                    <div className="flex items-center gap-3">
                      <div
-                        className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 overflow-hidden"
+                        className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 overflow-hidden"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {u.avatar_image ? (
@@ -951,14 +1111,16 @@ export default function Admin() {
      {/* Reset password modal */}
      {resetPwModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setResetPwModal(null)} />
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setResetPwModal(null)} aria-hidden="true" />
-          <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6">
+          <div role="dialog" aria-modal="true" aria-labelledby="reset-pw-title" className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6">
-            <h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.resetPasswordTitle')}</h3>
+            <h3 id="reset-pw-title" className="text-lg font-semibold text-th-text mb-4">{t('admin.resetPasswordTitle')}</h3>
            <form onSubmit={handleResetPassword}>
              <div className="mb-4">
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('admin.newPasswordLabel')}</label>
+                <label htmlFor="admin-reset-pw" className="block text-sm font-medium text-th-text mb-1.5">{t('admin.newPasswordLabel')}</label>
                <input
                  id="admin-reset-pw"
                  type="password"
                  autoComplete="new-password"
                  value={newPassword}
                  onChange={e => setNewPassword(e.target.value)}
                  className="input-field"
@@ -983,16 +1145,18 @@ export default function Admin() {
      {/* Create user modal */}
      {showCreateUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowCreateUser(false)} />
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowCreateUser(false)} aria-hidden="true" />
-          <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6">
+          <div role="dialog" aria-modal="true" aria-labelledby="create-user-title" className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6">
-            <h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
+            <h3 id="create-user-title" className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
            <form onSubmit={handleCreateUser} className="space-y-4">
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
+                <label htmlFor="admin-new-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
                <div className="relative">
-                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                  <input
                    id="admin-new-username"
                    type="text"
                    autoComplete="off"
                    value={newUser.name}
                    onChange={e => setNewUser({ ...newUser, name: e.target.value })}
                    className="input-field pl-11"
@@ -1003,11 +1167,13 @@ export default function Admin() {
                <p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
+                <label htmlFor="admin-new-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
                <div className="relative">
-                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                  <input
                    id="admin-new-display-name"
                    type="text"
                    autoComplete="off"
                    value={newUser.display_name}
                    onChange={e => setNewUser({ ...newUser, display_name: e.target.value })}
                    className="input-field pl-11"
@@ -1016,11 +1182,13 @@ export default function Admin() {
                </div>
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+                <label htmlFor="admin-new-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
                <div className="relative">
-                  <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                  <input
                    id="admin-new-email"
                    type="email"
                    autoComplete="off"
                    value={newUser.email}
                    onChange={e => setNewUser({ ...newUser, email: e.target.value })}
                    className="input-field pl-11"
@@ -1030,11 +1198,13 @@ export default function Admin() {
                </div>
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+                <label htmlFor="admin-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
                <div className="relative">
-                  <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                  <input
                    id="admin-new-password"
                    type="password"
                    autoComplete="new-password"
                    value={newUser.password}
                    onChange={e => setNewUser({ ...newUser, password: e.target.value })}
                    className="input-field pl-11"
@@ -1045,8 +1215,9 @@ export default function Admin() {
                </div>
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('admin.role')}</label>
+                <label htmlFor="admin-new-role" className="block text-sm font-medium text-th-text mb-1.5">{t('admin.role')}</label>
                <select
                  id="admin-new-role"
                  value={newUser.role}
                  onChange={e => setNewUser({ ...newUser, role: e.target.value })}
                  className="input-field"
@@ -1067,6 +1238,120 @@ export default function Admin() {
          </div>
        </div>
      )}
      {/* All rooms modal */}
      {showAllRoomsModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowAllRoomsModal(false)} />
          <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col">
            <div className="flex items-center justify-between p-6 border-b border-th-border">
              <div className="flex items-center gap-2">
                <DoorOpen size={20} className="text-th-accent" />
                <h3 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h3>
                <span className="text-sm text-th-text-s">({adminRooms.length})</span>
              </div>
              <button onClick={() => setShowAllRoomsModal(false)} aria-label={t('common.close')} className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors">
                <XIcon size={18} />
              </button>
            </div>
            <div className="p-4 border-b border-th-border">
              <div className="relative">
                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  type="search"
                  value={allRoomsSearch}
                  onChange={e => setAllRoomsSearch(e.target.value)}
                  className="input-field pl-9 text-sm"
                  placeholder={t('admin.searchRooms')}
                  aria-label={t('admin.searchRooms')}
                  autoFocus
                />
              </div>
            </div>
            <div className="overflow-y-auto flex-1 p-0">
              <table className="w-full">
                <thead className="sticky top-0 bg-th-card z-10">
                  <tr className="border-b border-th-border">
                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                      {t('admin.roomName')}
                    </th>
                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
                      {t('admin.roomOwner')}
                    </th>
                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
                      {t('admin.roomShares')}
                    </th>
                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
                      {t('admin.roomCreated')}
                    </th>
                    <th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                      {t('admin.actions')}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {adminRooms
                    .filter(r =>
                      r.name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
                      r.owner_name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
                      r.uid.toLowerCase().includes(allRoomsSearch.toLowerCase())
                    )
                    .map(r => (
                      <tr key={r.id} className="border-b border-th-border last:border-0 hover:bg-th-hover transition-colors">
                        <td className="px-4 py-3">
                          <div>
                            <p className="text-sm font-medium text-th-text">{r.name}</p>
                            <p className="text-xs text-th-text-s font-mono">{r.uid}</p>
                          </div>
                        </td>
                        <td className="px-4 py-3 hidden sm:table-cell">
                          <div>
                            <p className="text-sm text-th-text">{r.owner_name}</p>
                            <p className="text-xs text-th-text-s">{r.owner_email}</p>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-sm text-th-text hidden md:table-cell">
                          {r.share_count}
                        </td>
                        <td className="px-4 py-3 text-sm text-th-text-s hidden lg:table-cell">
                          {new Date(r.created_at).toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US')}
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center justify-end gap-1">
                            <button
                              onClick={() => { setShowAllRoomsModal(false); navigate(`/rooms/${r.uid}`); }}
                              className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
                              title={t('admin.roomView')}
                            >
                              <Eye size={15} />
                            </button>
                            <button
                              onClick={() => handleAdminDeleteRoom(r.uid, r.name)}
                              className="p-1.5 rounded-lg hover:bg-th-hover text-th-error transition-colors"
                              title={t('admin.deleteRoom')}
                            >
                              <Trash2 size={15} />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
              {adminRooms.filter(r =>
                r.name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
                r.owner_name.toLowerCase().includes(allRoomsSearch.toLowerCase()) ||
                r.uid.toLowerCase().includes(allRoomsSearch.toLowerCase())
              ).length === 0 && (
                <div className="text-center py-12">
                  <DoorOpen size={36} className="mx-auto text-th-text-s/40 mb-2" />
                  <p className="text-th-text-s text-sm">{t('admin.noRoomsFound')}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
 }
@@ -454,7 +454,7 @@ export default function Calendar() {
                      <div
                        key={ev.id}
                        onClick={(e) => { e.stopPropagation(); setShowDetail(ev); }}
-                        className="text-[10px] leading-tight px-1.5 py-0.5 rounded truncate text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
+                        className="text-[10px] leading-tight px-1.5 py-0.5 rounded-sm truncate text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
                        style={{ backgroundColor: ev.color || '#6366f1' }}
                        title={ev.title}
                      >
@@ -492,11 +492,11 @@ export default function Calendar() {
                      <div
                        key={ev.id}
                        onClick={(e) => { e.stopPropagation(); setShowDetail(ev); }}
-                        className="text-xs px-2 py-1.5 rounded text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
+                        className="text-xs px-2 py-1.5 rounded-sm text-white font-medium cursor-pointer hover:opacity-80 transition-opacity"
                        style={{ backgroundColor: ev.color || '#6366f1' }}
                      >
                        <div className="flex items-center gap-1 truncate">
-                          {ev.reminder_minutes && <Bell size={9} className="flex-shrink-0 opacity-70" />}
+                          {ev.reminder_minutes && <Bell size={9} className="shrink-0 opacity-70" />}
                          <span className="truncate">{ev.title}</span>
                        </div>
                        <div className="opacity-80 text-[10px]">{formatTime(ev.start_time)} - {formatTime(ev.end_time)}</div>
@@ -515,8 +515,9 @@ export default function Calendar() {
        <Modal title={editingEvent ? t('calendar.editEvent') : t('calendar.createEvent')} onClose={() => { setShowCreate(false); setEditingEvent(null); }}>
          <form onSubmit={handleSave} className="space-y-4">
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.eventTitle')} *</label>
+              <label htmlFor="calendar-event-title" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.eventTitle')} *</label>
              <input
                id="calendar-event-title"
                type="text"
                value={form.title}
                onChange={e => setForm({ ...form, title: e.target.value })}
@@ -527,8 +528,9 @@ export default function Calendar() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.description')}</label>
+              <label htmlFor="calendar-event-description" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.description')}</label>
              <textarea
                id="calendar-event-description"
                value={form.description}
                onChange={e => setForm({ ...form, description: e.target.value })}
                className="input-field resize-none"
@@ -555,13 +557,14 @@ export default function Calendar() {
              />
            </div>
            <div className="flex items-center gap-1.5 -mt-2 text-xs text-th-text-s">
-              <Globe size={12} className="flex-shrink-0" />
+              <Globe size={12} className="shrink-0" />
              <span>{getLocalTimezone()}</span>
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
+              <label htmlFor="calendar-event-room" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
              <select
                id="calendar-event-room"
                value={form.room_uid}
                onChange={e => setForm({ ...form, room_uid: e.target.value })}
                className="input-field"
@@ -575,10 +578,11 @@ export default function Calendar() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.reminderLabel')}</label>
+              <label htmlFor="calendar-event-reminder" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.reminderLabel')}</label>
              <div className="relative">
-                <Bell size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" />
+                <Bell size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" aria-hidden="true" />
                <select
                  id="calendar-event-reminder"
                  value={form.reminder_minutes ?? ''}
                  onChange={e => setForm({ ...form, reminder_minutes: e.target.value === '' ? null : Number(e.target.value) })}
                  className="input-field pl-9"
@@ -595,13 +599,16 @@ export default function Calendar() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.color')}</label>
+              <p id="calendar-event-color-label" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.color')}</p>
-              <div className="flex gap-2">
+              <div role="radiogroup" aria-labelledby="calendar-event-color-label" className="flex gap-2">
                {COLORS.map(c => (
                  <button
                    key={c}
                    type="button"
                    onClick={() => setForm({ ...form, color: c })}
                    role="radio"
                    aria-checked={form.color === c}
                    aria-label={c}
                    className={`w-7 h-7 rounded-full border-2 transition-all ${form.color === c ? 'border-th-text scale-110' : 'border-transparent'}`}
                    style={{ backgroundColor: c }}
                  />
@@ -750,7 +757,7 @@ export default function Calendar() {
                      className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
                    >
                      <div
-                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
+                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
@@ -772,7 +779,7 @@ export default function Calendar() {
                  <div key={u.user_id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border border-dashed">
                    <div className="flex items-center gap-3 min-w-0">
                      <div
-                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
+                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
@@ -799,7 +806,7 @@ export default function Calendar() {
                  <div key={u.id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
                    <div className="flex items-center gap-3 min-w-0">
                      <div
-                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
+                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {(u.display_name || u.name).split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
@@ -826,8 +833,9 @@ export default function Calendar() {
          <p className="text-sm text-th-text-s mb-4">{t('calendar.sendFederatedDesc')}</p>
          <form onSubmit={handleFedSend} className="space-y-4">
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
+              <label htmlFor="calendar-fed-share-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
              <input
                id="calendar-fed-share-address"
                type="text"
                value={fedAddress}
                onChange={e => setFedAddress(e.target.value)}
@@ -103,9 +103,11 @@ export default function Dashboard() {
        </div>
        <div className="flex items-center gap-2">
          {/* View toggle */}
-          <div className="hidden sm:flex items-center bg-th-bg-s rounded-lg border border-th-border p-0.5">
+          <div role="group" aria-label={t('common.gridView') + ' / ' + t('common.listView')} className="hidden sm:flex items-center bg-th-bg-s rounded-lg border border-th-border p-0.5">
            <button
              onClick={() => setViewMode('grid')}
              aria-label={t('common.gridView')}
              aria-pressed={viewMode === 'grid'}
              className={`p-1.5 rounded-md transition-colors ${
                viewMode === 'grid' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
              }`}
@@ -114,6 +116,8 @@ export default function Dashboard() {
            </button>
            <button
              onClick={() => setViewMode('list')}
              aria-label={t('common.listView')}
              aria-pressed={viewMode === 'list'}
              className={`p-1.5 rounded-md transition-colors ${
                viewMode === 'list' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
              }`}
@@ -197,8 +201,9 @@ export default function Dashboard() {
        <Modal title={t('dashboard.createRoom')} onClose={() => setShowCreate(false)}>
          <form onSubmit={handleCreate} className="space-y-4">
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')} *</label>
+              <label htmlFor="create-room-name" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')} *</label>
              <input
                id="create-room-name"
                type="text"
                value={newRoom.name}
                onChange={e => setNewRoom({ ...newRoom, name: e.target.value })}
@@ -210,8 +215,9 @@ export default function Dashboard() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.welcomeMessage')}</label>
+              <label htmlFor="create-room-welcome" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.welcomeMessage')}</label>
              <textarea
                id="create-room-welcome"
                value={newRoom.welcome_message}
                onChange={e => setNewRoom({ ...newRoom, welcome_message: e.target.value })}
                className="input-field resize-none"
@@ -222,8 +228,9 @@ export default function Dashboard() {
            <div className="grid grid-cols-2 gap-4">
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.maxParticipants')}</label>
+                <label htmlFor="create-room-max" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.maxParticipants')}</label>
                <input
                  id="create-room-max"
                  type="number"
                  value={newRoom.max_participants}
                  onChange={e => setNewRoom({ ...newRoom, max_participants: parseInt(e.target.value) || 0 })}
@@ -233,8 +240,9 @@ export default function Dashboard() {
                />
              </div>
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.accessCode')}</label>
+                <label htmlFor="create-room-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.accessCode')}</label>
                <input
                  id="create-room-access-code"
                  type="text"
                  value={newRoom.access_code}
                  onChange={e => setNewRoom({ ...newRoom, access_code: e.target.value })}
@@ -250,7 +258,7 @@ export default function Dashboard() {
                  type="checkbox"
                  checked={newRoom.mute_on_join}
                  onChange={e => setNewRoom({ ...newRoom, mute_on_join: e.target.checked })}
-                  className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                  className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
                />
                <span className="text-sm text-th-text">{t('dashboard.muteOnJoin')}</span>
              </label>
@@ -259,7 +267,7 @@ export default function Dashboard() {
                  type="checkbox"
                  checked={newRoom.record_meeting}
                  onChange={e => setNewRoom({ ...newRoom, record_meeting: e.target.checked })}
-                  className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                  className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
                />
                <span className="text-sm text-th-text">{t('dashboard.allowRecording')}</span>
              </label>
@@ -93,7 +93,7 @@ export default function FederatedRoomDetail() {
      {isDeleted && (
        <div className="card p-4 mb-4 border-red-500/30 bg-red-500/10">
          <div className="flex items-center gap-3">
-            <AlertTriangle size={20} className="text-red-500 flex-shrink-0" />
+            <AlertTriangle size={20} className="text-red-500 shrink-0" />
            <div>
              <p className="text-sm font-semibold text-red-500">{t('federation.roomDeleted')}</p>
              <p className="text-xs text-th-text-s mt-0.5">{t('federation.roomDeletedNotice')}</p>
@@ -106,7 +106,7 @@ export default function FederatedRoomDetail() {
      <div className="card p-6 mb-4">
        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
          <div className="flex items-start gap-3 min-w-0">
-            <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 ${isDeleted ? 'bg-red-500/15' : 'bg-th-accent/15'}`}>
+            <div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 mt-0.5 ${isDeleted ? 'bg-red-500/15' : 'bg-th-accent/15'}`}>
              {isDeleted ? <AlertTriangle size={20} className="text-red-500" /> : <Globe size={20} className="text-th-accent" />}
            </div>
            <div className="min-w-0">
@@ -128,7 +128,7 @@ export default function FederatedRoomDetail() {
            </div>
          </div>
-          <div className="flex items-center gap-2 flex-shrink-0">
+          <div className="flex items-center gap-2 shrink-0">
            {!isDeleted && (
              <button
                onClick={handleJoin}
@@ -189,7 +189,7 @@ export default function FederatedRoomDetail() {
        {room.meet_id && (
          <div className="flex items-start gap-3">
-            <Hash size={16} className="text-th-accent flex-shrink-0 mt-0.5" />
+            <Hash size={16} className="text-th-accent shrink-0 mt-0.5" />
            <div className="min-w-0">
              <p className="text-xs text-th-text-s mb-0.5">{t('federation.meetingId')}</p>
              <p className="text-sm font-mono text-th-text break-all">{room.meet_id}</p>
@@ -198,7 +198,7 @@ export default function FederatedRoomDetail() {
        )}
        <div className="flex items-start gap-3">
-          <Link2 size={16} className="text-th-accent flex-shrink-0 mt-0.5" />
+          <Link2 size={16} className="text-th-accent shrink-0 mt-0.5" />
          <div className="min-w-0 flex-1">
            <p className="text-xs text-th-text-s mb-0.5">{t('federation.joinUrl')}</p>
            <p className="text-sm font-mono text-th-text break-all opacity-60 select-all">{room.join_url}</p>
@@ -167,7 +167,7 @@ export default function FederationInbox() {
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
-                                            <Mail size={16} className="text-th-accent flex-shrink-0" />
+                                            <Mail size={16} className="text-th-accent shrink-0" />
                                            <h3 className="text-base font-semibold text-th-text truncate">{inv.room_name}</h3>
                                        </div>
                                        <p className="text-sm text-th-text-s">
@@ -180,7 +180,7 @@ export default function FederationInbox() {
                                            {new Date(inv.created_at).toLocaleString()}
                                        </p>
                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                    <div className="flex items-center gap-2 shrink-0">
                                        <button onClick={() => handleAccept(inv.id)} className="btn-primary text-sm">
                                            <Check size={16} />
                                            {t('federation.accept')}
@@ -200,7 +200,7 @@ export default function FederationInbox() {
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
-                                            <Calendar size={16} className="text-th-success flex-shrink-0" />
+                                            <Calendar size={16} className="text-th-success shrink-0" />
                                            <span className="text-xs font-semibold uppercase tracking-wide text-th-success mr-1">
                                                {t('federation.calendarEvent')}
                                            </span>
@@ -219,7 +219,7 @@ export default function FederationInbox() {
                                            {new Date(inv.created_at).toLocaleString()}
                                        </p>
                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                    <div className="flex items-center gap-2 shrink-0">
                                        <button onClick={() => handleCalAccept(inv.id)} className="btn-primary text-sm">
                                            <Check size={16} />
                                            {t('federation.accept')}
@@ -239,7 +239,7 @@ export default function FederationInbox() {
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
-                                            <Calendar size={16} className="text-th-accent flex-shrink-0" />
+                                            <Calendar size={16} className="text-th-accent shrink-0" />
                                            <span className="text-xs font-semibold uppercase tracking-wide text-th-accent mr-1">
                                                {t('federation.localCalendarEvent')}
                                            </span>
@@ -258,7 +258,7 @@ export default function FederationInbox() {
                                            {new Date(inv.created_at).toLocaleString()}
                                        </p>
                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                    <div className="flex items-center gap-2 shrink-0">
                                        <button onClick={() => handleLocalCalAccept(inv.id)} className="btn-primary text-sm">
                                            <Check size={16} />
                                            {t('federation.accept')}
@@ -287,13 +287,13 @@ export default function FederationInbox() {
                            <div key={`room-past-${inv.id}`} className="card p-4 opacity-70">
                                <div className="flex items-center justify-between gap-4">
                                    <div className="min-w-0 flex items-center gap-2">
-                                        <Mail size={14} className="text-th-text-s flex-shrink-0" />
+                                        <Mail size={14} className="text-th-text-s shrink-0" />
                                        <div className="min-w-0">
                                            <h3 className="text-sm font-medium text-th-text truncate">{inv.room_name}</h3>
                                            <p className="text-xs text-th-text-s">{inv.from_user}</p>
                                        </div>
                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                    <div className="flex items-center gap-2 shrink-0">
                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
                                            ? 'bg-th-success/15 text-th-success'
                                            : 'bg-th-error/15 text-th-error'
@@ -326,13 +326,13 @@ export default function FederationInbox() {
                            <div key={`cal-past-${inv.id}`} className="card p-4 opacity-70">
                                <div className="flex items-center justify-between gap-4">
                                    <div className="min-w-0 flex items-center gap-2">
-                                        <Calendar size={14} className="text-th-text-s flex-shrink-0" />
+                                        <Calendar size={14} className="text-th-text-s shrink-0" />
                                        <div className="min-w-0">
                                            <h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
                                            <p className="text-xs text-th-text-s">{inv.from_user} · {new Date(inv.start_time).toLocaleDateString()}</p>
                                        </div>
                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                    <div className="flex items-center gap-2 shrink-0">
                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
                                            ? 'bg-th-success/15 text-th-success'
                                            : 'bg-th-error/15 text-th-error'
@@ -365,13 +365,13 @@ export default function FederationInbox() {
                            <div key={`localcal-past-${inv.id}`} className="card p-4 opacity-70">
                                <div className="flex items-center justify-between gap-4">
                                    <div className="min-w-0 flex items-center gap-2">
-                                        <Calendar size={14} className="text-th-text-s flex-shrink-0" />
+                                        <Calendar size={14} className="text-th-text-s shrink-0" />
                                        <div className="min-w-0">
                                            <h3 className="text-sm font-medium text-th-text truncate">{inv.title}</h3>
                                            <p className="text-xs text-th-text-s">{inv.from_name} · {new Date(inv.start_time).toLocaleDateString()}</p>
                                        </div>
                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                    <div className="flex items-center gap-2 shrink-0">
                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
                                            ? 'bg-th-success/15 text-th-success'
                                            : 'bg-th-error/15 text-th-error'
@@ -1,8 +1,9 @@
 import { useState, useEffect, useRef } from 'react';
-import { useParams, Link, useSearchParams } from 'react-router-dom';
+import { useParams, Link, useSearchParams, useNavigate } from 'react-router-dom';
 import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio, AlertCircle, FileText, Clock, X } from 'lucide-react';
 import BrandLogo from '../components/BrandLogo';
 import api from '../services/api';
 import { isCurrentThemeDark } from '../themes';
 import toast from 'react-hot-toast';
 import { useLanguage } from '../contexts/LanguageContext';
 import { useAuth } from '../contexts/AuthContext';
@@ -11,6 +12,7 @@ import { useBranding } from '../contexts/BrandingContext';
 export default function GuestJoin() {
  const { uid } = useParams();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const { t } = useLanguage();
  const { user } = useAuth();
  const { imprintUrl, privacyUrl } = useBranding();
@@ -19,7 +21,7 @@ export default function GuestJoin() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [joining, setJoining] = useState(false);
-  const [name, setName] = useState(user?.name || '');
+  const [name, setName] = useState(user?.display_name || user?.name || '');
  const [accessCode, setAccessCode] = useState(searchParams.get('ac') || '');
  const [moderatorCode, setModeratorCode] = useState('');
  const [status, setStatus] = useState({ running: false });
@@ -30,11 +32,18 @@ export default function GuestJoin() {
  const joinMeeting = async () => {
    setJoining(true);
    try {
-      const res = await api.post(`/rooms/${uid}/guest-join`, {
+      const payload = {
        name: name.trim(),
        access_code: accessCode || undefined,
        moderator_code: moderatorCode || undefined,
-      });
+        dark_mode: isCurrentThemeDark(),
      };
      // If logged in, send avatar data
      if (isLoggedIn && user) {
        if (user.avatar_image) payload.avatar_image = user.avatar_image;
        if (user.avatar_color) payload.avatar_color = user.avatar_color;
      }
      const res = await api.post(`/rooms/${uid}/guest-join`, payload);
      if (res.data.joinUrl) {
        window.location.href = res.data.joinUrl;
      }
@@ -54,6 +63,17 @@ export default function GuestJoin() {
  useEffect(() => {
    const fetchRoom = async () => {
      // If logged in, check if user owns or has access to this room
      if (isLoggedIn) {
        try {
          await api.get(`/rooms/${uid}`);
          navigate(`/rooms/${uid}`, { replace: true });
          return;
        } catch {
          // User doesn't have access — continue as guest
        }
      }
      try {
        const res = await api.get(`/rooms/${uid}/public`);
        setRoomInfo(res.data.room);
@@ -212,11 +232,13 @@ export default function GuestJoin() {
          ) : (
            <form onSubmit={handleJoin} className="space-y-4">
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
+                <label htmlFor="guest-name" className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
                <div className="relative">
-                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                  <input
                    id="guest-name"
                    type="text"
                    autoComplete="name"
                    value={name}
                    onChange={e => !isLoggedIn && setName(e.target.value)}
                    readOnly={isLoggedIn}
@@ -230,11 +252,13 @@ export default function GuestJoin() {
              {roomInfo.has_access_code && (
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
+                  <label htmlFor="guest-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
                  <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="guest-access-code"
                      type="text"
                      autoComplete="off"
                      value={accessCode}
                      onChange={e => setAccessCode(e.target.value)}
                      className="input-field pl-11"
@@ -245,14 +269,16 @@ export default function GuestJoin() {
              )}
              <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">
+                <label htmlFor="guest-moderator-code" className="block text-sm font-medium text-th-text mb-1.5">
                  {t('room.guestModeratorCode')}
                  <span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span>
                </label>
                <div className="relative">
-                  <Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                  <input
                    id="guest-moderator-code"
                    type="text"
                    autoComplete="off"
                    value={moderatorCode}
                    onChange={e => setModeratorCode(e.target.value)}
                    className="input-field pl-11"
@@ -265,7 +291,7 @@ export default function GuestJoin() {
              {roomInfo.allow_recording && (
                <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 space-y-3">
                  <div className="flex items-start gap-2">
-                    <AlertCircle size={16} className="text-amber-500 flex-shrink-0 mt-0.5" />
+                    <AlertCircle size={16} className="text-amber-500 shrink-0 mt-0.5" />
                    <p className="text-sm text-amber-400">{t('room.guestRecordingNotice')}</p>
                  </div>
                  <label className="flex items-center gap-2.5 cursor-pointer">
@@ -273,7 +299,7 @@ export default function GuestJoin() {
                      type="checkbox"
                      checked={recordingConsent}
                      onChange={e => setRecordingConsent(e.target.checked)}
-                      className="w-4 h-4 rounded accent-amber-500 cursor-pointer"
+                      className="w-4 h-4 rounded-sm accent-amber-500 cursor-pointer"
                    />
                    <span className="text-sm text-th-text">{t('room.guestRecordingConsent')}</span>
                  </label>
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Video, Shield, Users, Palette, ArrowRight, Zap, Globe, FileText, Lock } from 'lucide-react';
+import { Video, Users, FileVideo, Network, CalendarDays, BarChart2, ArrowRight, FileText, Lock } from 'lucide-react';
 import BrandLogo from '../components/BrandLogo';
 import { useLanguage } from '../contexts/LanguageContext';
 import { useBranding } from '../contexts/BrandingContext';
@@ -21,37 +21,35 @@ export default function Home() {
      desc: t('home.featureRoomsDesc'),
    },
    {
-      icon: Shield,
+      icon: FileVideo,
      title: t('home.featureUsersTitle'),
      desc: t('home.featureUsersDesc'),
    },
    {
      icon: Palette,
      title: t('home.featureThemesTitle'),
      desc: t('home.featureThemesDesc'),
    },
    {
      icon: Zap,
      title: t('home.featureRecordingsTitle'),
      desc: t('home.featureRecordingsDesc'),
    },
    {
-      icon: Globe,
+      icon: Network,
-      title: t('home.featureOpenSourceTitle'),
+      title: t('home.featureFederationTitle'),
-      desc: t('home.featureOpenSourceDesc'),
+      desc: t('home.featureFederationDesc'),
    },
    {
      icon: CalendarDays,
      title: t('home.featureCalendarTitle'),
      desc: t('home.featureCalendarDesc'),
    },
    {
      icon: BarChart2,
      title: t('home.featureAnalyticsTitle'),
      desc: t('home.featureAnalyticsDesc'),
    },
  ];
  return (
    <div className="min-h-screen bg-th-bg">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        {/* Background gradient */}
        <div className="absolute inset-0 gradient-bg opacity-5" />
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] gradient-bg opacity-10 blur-3xl rounded-full" />
-        {/* Navbar */}
+        <nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4 border-b border-th-border">
        <nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4">
          <BrandLogo size="md" />
          <div className="flex items-center gap-3">
            <Link to="/login" className="btn-ghost text-sm">
@@ -60,75 +58,43 @@ export default function Home() {
            {!isInviteOnly && (
              <Link to="/register" className="btn-primary text-sm">
                {t('auth.register')}
                <ArrowRight size={16} />
              </Link>
            )}
          </div>
        </nav>
-        {/* Hero content */}
+        {/* Hero */}
-        <div className="relative z-10 max-w-4xl mx-auto text-center px-6 pt-20 pb-32">
+        <div className="relative z-10 max-w-3xl mx-auto px-6 pt-24 pb-20">
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-th-accent/10 text-th-accent text-sm font-medium mb-6">
+          <h1 className="text-3xl md:text-4xl font-bold text-th-text mb-4">
-            <Zap size={14} />
+            {t('home.heroTitle')}
            {t('home.madeFor')}
          </div>
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-th-text mb-6 leading-tight tracking-tight">
            {t('home.heroTitle')}{' '}
            <span className="gradient-text">{t('home.heroTitleHighlight')}</span>
          </h1>
-
+          <p className="text-lg text-th-text-s mb-8 leading-relaxed">
          <p className="text-lg md:text-xl text-th-text-s max-w-2xl mx-auto mb-10 leading-relaxed">
            {t('home.heroSubtitle')}
          </p>
-
+          <div className="flex items-center gap-3">
          <div className="flex items-center gap-4 justify-center">
            {!isInviteOnly && (
-              <Link to="/register" className="btn-primary text-base px-8 py-3">
+              <Link to="/register" className="btn-primary px-6 py-2.5">
                {t('home.getStarted')}
-                <ArrowRight size={18} />
+                <ArrowRight size={16} />
              </Link>
            )}
-            <Link to="/login" className={`${isInviteOnly ? 'btn-primary' : 'btn-secondary'} text-base px-8 py-3`}>
+            <Link to="/login" className={`${isInviteOnly ? 'btn-primary' : 'btn-secondary'} px-6 py-2.5`}>
              {t('auth.login')}
            </Link>
          </div>
          {/* Stats */}
          <div className="flex items-center justify-center gap-8 md:gap-16 mt-16">
            {[
              { value: '15+', label: t('home.statThemes') },
              { value: '∞', label: t('home.statRooms') },
              { value: '100%', label: t('home.statOpenSource') },
            ].map(stat => (
              <div key={stat.label} className="text-center">
                <div className="text-2xl md:text-3xl font-bold gradient-text">{stat.value}</div>
                <div className="text-sm text-th-text-s mt-1">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
-      {/* Features Section */}
+      {/* Features */}
-      <div className="max-w-6xl mx-auto px-6 py-20">
+      <div className="border-t border-th-border">
-        <div className="text-center mb-16">
+        <div className="max-w-5xl mx-auto px-6 py-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-th-text mb-4">
+          <h2 className="text-xl font-semibold text-th-text mb-10">
            {t('home.features')}
          </h2>
          <p className="text-lg text-th-text-s max-w-2xl mx-auto">
            {t('home.featuresSubtitle')}
          </p>
        </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((feature, idx) => (
+            {features.map(feature => (
-            <div key={idx} className="card p-6 hover:shadow-th-lg transition-all duration-300 group">
+              <div key={feature.title} className="card p-6 hover:shadow-th-lg transition-shadow">
-              <div className="w-12 h-12 rounded-xl gradient-bg/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
+                <div className="w-12 h-12 rounded-xl bg-th-accent/10 flex items-center justify-center mb-4">
                   style={{ background: `linear-gradient(135deg, var(--gradient-start), var(--gradient-end))`, opacity: 0.15 }}>
                <feature.icon size={24} className="text-th-accent" style={{ opacity: 1 }} />
              </div>
              <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 -mt-16 relative">
                  <feature.icon size={24} className="text-th-accent" />
                </div>
                <h3 className="text-base font-semibold text-th-text mb-2">{feature.title}</h3>
@@ -137,6 +103,7 @@ export default function Home() {
            ))}
          </div>
        </div>
      </div>
      {/* Footer */}
      <footer className="border-t border-th-border py-8 text-center">
@@ -189,11 +189,13 @@ export default function Login() {
              <form onSubmit={handleSubmit} className="space-y-5">
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+                  <label htmlFor="login-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
                  <div className="relative">
-                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="login-email"
                      type="email"
                      autoComplete="email"
                      value={email}
                      onChange={e => setEmail(e.target.value)}
                      className="input-field pl-11"
@@ -204,11 +206,13 @@ export default function Login() {
                </div>
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+                  <label htmlFor="login-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
                  <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="login-password"
                      type="password"
                      autoComplete="current-password"
                      value={password}
                      onChange={e => setPassword(e.target.value)}
                      className="input-field pl-11"
@@ -257,7 +261,7 @@ export default function Login() {
              {needsVerification && (
                <div className="mt-4 p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 space-y-2">
                  <div className="flex items-start gap-2">
-                    <AlertTriangle size={16} className="text-amber-400 flex-shrink-0 mt-0.5" />
+                    <AlertTriangle size={16} className="text-amber-400 shrink-0 mt-0.5" />
                    <p className="text-sm text-amber-200">{t('auth.emailVerificationBanner')}</p>
                  </div>
                  <button
@@ -104,11 +104,13 @@ export default function Register() {
          <form onSubmit={handleSubmit} className="space-y-5">
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
+              <label htmlFor="register-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
              <div className="relative">
-                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  id="register-username"
                  type="text"
                  autoComplete="username"
                  value={username}
                  onChange={e => setUsername(e.target.value)}
                  className="input-field pl-11"
@@ -120,11 +122,13 @@ export default function Register() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
+              <label htmlFor="register-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
              <div className="relative">
-                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  id="register-display-name"
                  type="text"
                  autoComplete="name"
                  value={displayName}
                  onChange={e => setDisplayName(e.target.value)}
                  className="input-field pl-11"
@@ -135,11 +139,13 @@ export default function Register() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+              <label htmlFor="register-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
              <div className="relative">
-                <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  id="register-email"
                  type="email"
                  autoComplete="email"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  className="input-field pl-11"
@@ -150,11 +156,13 @@ export default function Register() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+              <label htmlFor="register-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
              <div className="relative">
-                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  id="register-password"
                  type="password"
                  autoComplete="new-password"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  className="input-field pl-11"
@@ -166,11 +174,13 @@ export default function Register() {
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
+              <label htmlFor="register-confirm-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
              <div className="relative">
-                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                <input
                  id="register-confirm-password"
                  type="password"
                  autoComplete="new-password"
                  value={confirmPassword}
                  onChange={e => setConfirmPassword(e.target.value)}
                  className="input-field pl-11"
@@ -8,6 +8,7 @@ import {
 } from 'lucide-react';
 import Modal from '../components/Modal';
 import api from '../services/api';
 import { isCurrentThemeDark } from '../themes';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import RecordingList from '../components/RecordingList';
@@ -51,6 +52,7 @@ export default function RoomDetail() {
  // Federation invite state
  const [showFedInvite, setShowFedInvite] = useState(false);
  const [fedAddress, setFedAddress] = useState('');
  const [fedEmails, setFedEmails] = useState('');
  const [fedMessage, setFedMessage] = useState('');
  const [fedSending, setFedSending] = useState(false);
@@ -61,7 +63,10 @@ export default function RoomDetail() {
  const isOwner = room && user && room.user_id === user.id;
  const isShared = room && !!room.shared;
  const isAdmin = user?.role === 'admin';
  const canManage = isOwner || isShared;
  const canStart = canManage || isAdmin || !!room?.anyone_can_start;
  const canEnd = canManage || isAdmin;
  const fetchRoom = async () => {
    try {
@@ -120,7 +125,7 @@ export default function RoomDetail() {
      toast.success(t('room.meetingStarted'));
      setWaitingToJoin(false);
      setActionLoading('join');
-      api.post(`/rooms/${uid}/join`, {})
+      api.post(`/rooms/${uid}/join`, { dark_mode: isCurrentThemeDark() })
        .then(res => { if (res.data.joinUrl) window.open(res.data.joinUrl, '_blank'); })
        .catch(err => toast.error(err.response?.data?.error || t('room.joinFailed')))
        .finally(() => setActionLoading(null));
@@ -131,7 +136,7 @@ export default function RoomDetail() {
  const handleStart = async () => {
    setActionLoading('start');
    try {
-      const res = await api.post(`/rooms/${uid}/start`);
+      const res = await api.post(`/rooms/${uid}/start`, { dark_mode: isCurrentThemeDark() });
      if (res.data.joinUrl) {
        window.open(res.data.joinUrl, '_blank');
      }
@@ -153,7 +158,8 @@ export default function RoomDetail() {
    setWaitingToJoin(false);
    setActionLoading('join');
    try {
-      const data = room.access_code ? { access_code: prompt(t('room.enterAccessCode')) } : {};
+      const data = { dark_mode: isCurrentThemeDark() };
      if (room.access_code) data.access_code = prompt(t('room.enterAccessCode'));
      const res = await api.post(`/rooms/${uid}/join`, data);
      if (res.data.joinUrl) {
        window.open(res.data.joinUrl, '_blank');
@@ -266,25 +272,51 @@ export default function RoomDetail() {
  const handleFedInvite = async (e) => {
    e.preventDefault();
-    // Accept @user@domain or user@domain — must have a domain part
+    const hasAddress = fedAddress.trim().length > 0;
-    const normalized = fedAddress.startsWith('@') ? fedAddress.slice(1) : fedAddress;
+    const hasEmails = fedEmails.trim().length > 0;
-    if (!normalized.includes('@') || normalized.endsWith('@')) {
+
    if (!hasAddress && !hasEmails) {
      toast.error(t('federation.addressHint'));
      return;
    }
    setFedSending(true);
    try {
      if (hasAddress) {
        // Federation address mode
        const normalized = fedAddress.startsWith('@') ? fedAddress.slice(1) : fedAddress;
        if (!normalized.includes('@') || normalized.endsWith('@')) {
          toast.error(t('federation.addressHint'));
          setFedSending(false);
          return;
        }
        await api.post('/federation/invite', {
          room_uid: uid,
          to: fedAddress,
          message: fedMessage || undefined,
        });
        toast.success(t('federation.sent'));
      } else {
        // Email mode
        const emailList = fedEmails.split(',').map(e => e.trim()).filter(Boolean);
        if (emailList.length === 0) {
          toast.error(t('federation.emailHint'));
          setFedSending(false);
          return;
        }
        await api.post('/rooms/invite-email', {
          room_uid: uid,
          emails: emailList,
          message: fedMessage || undefined,
        });
        toast.success(t('federation.emailSent'));
      }
      setShowFedInvite(false);
      setFedAddress('');
      setFedEmails('');
      setFedMessage('');
    } catch (err) {
-      toast.error(err.response?.data?.error || t('federation.sendFailed'));
+      toast.error(err.response?.data?.error || t(hasAddress ? 'federation.sendFailed' : 'federation.emailSendFailed'));
    } finally {
      setFedSending(false);
    }
@@ -425,7 +457,7 @@ export default function RoomDetail() {
                <span className="hidden sm:inline">{t('federation.inviteRemote')}</span>
              </button>
            )}
-            {canManage && !status.running && !waitingToJoin && (
+            {canStart && !status.running && !waitingToJoin && (
              <button onClick={handleStart} disabled={actionLoading === 'start'} className="btn-primary">
                {actionLoading === 'start' ? <Loader2 size={16} className="animate-spin" /> : <Play size={16} />}
                {t('room.start')}
@@ -440,7 +472,7 @@ export default function RoomDetail() {
              {(actionLoading === 'join' || waitingToJoin) ? <Loader2 size={16} className="animate-spin" /> : <ExternalLink size={16} />}
              {waitingToJoin ? t('room.waitingToJoin') : t('room.join')}
            </button>
-            {canManage && status.running && (
+            {canEnd && status.running && (
              <button onClick={handleEnd} disabled={actionLoading === 'end'} className="btn-danger">
                {actionLoading === 'end' ? <Loader2 size={16} className="animate-spin" /> : <Square size={16} />}
                {t('room.end')}
@@ -481,7 +513,7 @@ export default function RoomDetail() {
            <div className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-th-text-s">{t('room.meetingId')}</span>
-                <code className="bg-th-bg-s px-2 py-0.5 rounded text-xs text-th-text font-mono">{room.uid}</code>
+                <code className="bg-th-bg-s px-2 py-0.5 rounded-sm text-xs text-th-text font-mono">{room.uid}</code>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-th-text-s">{t('room.status')}</span>
@@ -550,8 +582,9 @@ export default function RoomDetail() {
      {activeTab === 'settings' && isOwner && editRoom && (
        <form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl">
          <div>
-            <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
+            <label htmlFor="room-settings-name" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
            <input
              id="room-settings-name"
              type="text"
              value={editRoom.name}
              onChange={e => setEditRoom({ ...editRoom, name: e.target.value })}
@@ -562,8 +595,9 @@ export default function RoomDetail() {
          </div>
          <div>
-            <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
+            <label htmlFor="room-settings-welcome" className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
            <textarea
              id="room-settings-welcome"
              value={editRoom.welcome_message || ''}
              onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })}
              className="input-field resize-none"
@@ -573,8 +607,9 @@ export default function RoomDetail() {
          <div className="grid grid-cols-2 gap-4">
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
+              <label htmlFor="room-settings-max" className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
              <input
                id="room-settings-max"
                type="number"
                value={editRoom.max_participants}
                onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })}
@@ -583,8 +618,9 @@ export default function RoomDetail() {
              />
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
+              <label htmlFor="room-settings-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
              <input
                id="room-settings-access-code"
                type="text"
                value={editRoom.access_code || ''}
                onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })}
@@ -600,7 +636,7 @@ export default function RoomDetail() {
                type="checkbox"
                checked={!!editRoom.mute_on_join}
                onChange={e => setEditRoom({ ...editRoom, mute_on_join: e.target.checked })}
-                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.muteOnJoin')}</span>
            </label>
@@ -609,7 +645,7 @@ export default function RoomDetail() {
                type="checkbox"
                checked={!!editRoom.require_approval}
                onChange={e => setEditRoom({ ...editRoom, require_approval: e.target.checked })}
-                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.requireApproval')}</span>
            </label>
@@ -618,7 +654,7 @@ export default function RoomDetail() {
                type="checkbox"
                checked={!!editRoom.anyone_can_start}
                onChange={e => setEditRoom({ ...editRoom, anyone_can_start: e.target.checked })}
-                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.anyoneCanStart')}</span>
            </label>
@@ -627,7 +663,7 @@ export default function RoomDetail() {
                type="checkbox"
                checked={!!editRoom.all_join_moderator}
                onChange={e => setEditRoom({ ...editRoom, all_join_moderator: e.target.checked })}
-                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.allJoinModerator')}</span>
            </label>
@@ -636,7 +672,7 @@ export default function RoomDetail() {
                type="checkbox"
                checked={!!editRoom.record_meeting}
                onChange={e => setEditRoom({ ...editRoom, record_meeting: e.target.checked })}
-                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.allowRecording')}</span>
            </label>
@@ -645,14 +681,15 @@ export default function RoomDetail() {
                type="checkbox"
                checked={!!editRoom.learning_analytics}
                onChange={e => setEditRoom({ ...editRoom, learning_analytics: e.target.checked })}
-                className="w-4 h-4 rounded border-th-border text-th-accent focus:ring-th-ring"
+                className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
              />
              <span className="text-sm text-th-text">{t('room.enableAnalytics')}</span>
            </label>
            {!!editRoom.learning_analytics && (
              <div className="ml-7">
-                <label className="block text-xs font-medium text-th-text-s mb-1">{t('room.analyticsVisibility')}</label>
+                <label htmlFor="room-settings-analytics-visibility" className="block text-xs font-medium text-th-text-s mb-1">{t('room.analyticsVisibility')}</label>
                <select
                  id="room-settings-analytics-visibility"
                  value={editRoom.analytics_visibility || 'owner'}
                  onChange={e => setEditRoom({ ...editRoom, analytics_visibility: e.target.value })}
                  className="input-field text-sm py-1.5 max-w-xs"
@@ -670,8 +707,9 @@ export default function RoomDetail() {
            <h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
+              <label htmlFor="room-settings-moderator-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
              <input
                id="room-settings-moderator-code"
                type="text"
                value={editRoom.moderator_code || ''}
                onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
@@ -713,11 +751,11 @@ export default function RoomDetail() {
            {room.presentation_file ? (
              <div className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
                <div className="flex items-center gap-2 min-w-0">
-                  <FileText size={16} className="text-th-accent flex-shrink-0" />
+                  <FileText size={16} className="text-th-accent shrink-0" />
                  <div className="min-w-0">
                    <p className="text-xs text-th-text-s">{t('room.presentationCurrent')}</p>
                    <p className="text-sm text-th-text font-medium truncate">
-                      {room.presentation_name || `presentation.${room.presentation_file?.split('.').pop()}`}
+                      {room.presentation_file}
                    </p>
                  </div>
                </div>
@@ -725,7 +763,7 @@ export default function RoomDetail() {
                  type="button"
                  onClick={handlePresentationRemove}
                  disabled={removingPresentation}
-                  className="btn-ghost text-th-error hover:bg-th-error/10 flex-shrink-0 text-xs py-1.5 px-3"
+                  className="btn-ghost text-th-error hover:bg-th-error/10 shrink-0 text-xs py-1.5 px-3"
                >
                  {removingPresentation ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
                  {t('room.presentationRemove')}
@@ -784,7 +822,7 @@ export default function RoomDetail() {
                      className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-th-hover transition-colors text-left"
                    >
                      <div
-                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
+                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0 overflow-hidden"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {u.avatar_image ? (
@@ -810,7 +848,7 @@ export default function RoomDetail() {
                  <div key={u.id} className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
                    <div className="flex items-center gap-3 min-w-0">
                      <div
-                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 overflow-hidden"
+                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0 overflow-hidden"
                        style={{ backgroundColor: u.avatar_color || '#6366f1' }}
                      >
                        {u.avatar_image ? (
@@ -827,7 +865,7 @@ export default function RoomDetail() {
                    <button
                      type="button"
                      onClick={() => handleUnshare(u.id)}
-                      className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-error transition-colors flex-shrink-0"
+                      className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s hover:text-th-error transition-colors shrink-0"
                      title={t('room.shareRemove')}
                    >
                      <X size={16} />
@@ -853,20 +891,43 @@ export default function RoomDetail() {
          <p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
          <form onSubmit={handleFedInvite} className="space-y-4">
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
+              <label htmlFor="fed-invite-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
              <input
                id="fed-invite-address"
                type="text"
                value={fedAddress}
-                onChange={e => setFedAddress(e.target.value)}
+                onChange={e => { setFedAddress(e.target.value); if (e.target.value) setFedEmails(''); }}
                className="input-field"
                placeholder={t('federation.addressPlaceholder')}
-                required
+                disabled={fedEmails.trim().length > 0}
              />
              <p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
            </div>
            <div className="flex items-center gap-3 my-2">
              <div className="flex-1 border-t border-th-border" />
              <span className="text-xs text-th-text-s uppercase">{t('common.or')}</span>
              <div className="flex-1 border-t border-th-border" />
            </div>
            <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
+              <label htmlFor="fed-invite-emails" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.emailLabel')}</label>
              <input
                id="fed-invite-emails"
                type="text"
                value={fedEmails}
                onChange={e => { setFedEmails(e.target.value); if (e.target.value) setFedAddress(''); }}
                className="input-field"
                placeholder={t('federation.emailPlaceholder')}
                disabled={fedAddress.trim().length > 0}
              />
              <p className="text-xs text-th-text-s mt-1">{t('federation.emailHint')}</p>
            </div>
            <div>
              <label htmlFor="fed-invite-message" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
              <textarea
                id="fed-invite-message"
                value={fedMessage}
                onChange={e => setFedMessage(e.target.value)}
                className="input-field resize-none"
@@ -878,7 +939,7 @@ export default function RoomDetail() {
              <button type="button" onClick={() => setShowFedInvite(false)} className="btn-secondary flex-1">
                {t('common.cancel')}
              </button>
-              <button type="submit" disabled={fedSending} className="btn-primary flex-1">
+              <button type="submit" disabled={fedSending || (!fedAddress.trim() && !fedEmails.trim())} className="btn-primary flex-1">
                {fedSending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
                {t('federation.send')}
              </button>
@@ -267,7 +267,7 @@ export default function Settings() {
      <div className="flex flex-col md:flex-row gap-6">
        {/* Section nav */}
-        <div className="md:w-56 flex-shrink-0">
+        <div className="md:w-56 shrink-0">
          <nav className="flex md:flex-col gap-1">
            {sections.map(s => (
              <button
@@ -301,7 +301,7 @@ export default function Settings() {
                    {user?.avatar_image ? (
                      <img
                        src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
-                        alt="Avatar"
+                        alt=""
                        className="w-16 h-16 rounded-full object-cover"
                      />
                    ) : (
@@ -316,6 +316,7 @@ export default function Settings() {
                      type="button"
                      onClick={() => fileInputRef.current?.click()}
                      disabled={uploadingAvatar}
                      aria-label={t('settings.uploadImage')}
                      className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                    >
                      {uploadingAvatar ? (
@@ -360,12 +361,15 @@ export default function Settings() {
              {/* Avatar Color (fallback) */}
              <div className="mb-6">
-                <label className="block text-sm font-medium text-th-text mb-3">{t('settings.avatarColor')}</label>
+                <p id="avatar-color-label" className="block text-sm font-medium text-th-text mb-3">{t('settings.avatarColor')}</p>
-                <div className="flex flex-wrap gap-2">
+                <div role="radiogroup" aria-labelledby="avatar-color-label" className="flex flex-wrap gap-2">
                  {avatarColors.map(color => (
                    <button
                      key={color}
                      onClick={() => handleAvatarColor(color)}
                      role="radio"
                      aria-checked={user?.avatar_color === color}
                      aria-label={color}
                      className={`w-7 h-7 rounded-full ring-2 ring-offset-2 transition-all ${
                        user?.avatar_color === color ? 'ring-th-accent' : 'ring-transparent hover:ring-th-border'
                      }`}
@@ -378,11 +382,13 @@ export default function Settings() {
              <form onSubmit={handleProfileSave} className="space-y-4">
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
+                  <label htmlFor="settings-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
                  <div className="relative">
-                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="settings-username"
                      type="text"
                      autoComplete="username"
                      value={profile.name}
                      onChange={e => setProfile({ ...profile, name: e.target.value })}
                      className="input-field pl-11"
@@ -392,11 +398,13 @@ export default function Settings() {
                  <p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
                </div>
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
+                  <label htmlFor="settings-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
                  <div className="relative">
-                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="settings-display-name"
                      type="text"
                      autoComplete="name"
                      value={profile.display_name}
                      onChange={e => setProfile({ ...profile, display_name: e.target.value })}
                      className="input-field pl-11"
@@ -404,11 +412,13 @@ export default function Settings() {
                  </div>
                </div>
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+                  <label htmlFor="settings-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
                  <div className="relative">
-                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="settings-email"
                      type="email"
                      autoComplete="email"
                      value={profile.email}
                      onChange={e => setProfile({ ...profile, email: e.target.value })}
                      className="input-field pl-11"
@@ -430,11 +440,13 @@ export default function Settings() {
              <h2 className="text-lg font-semibold text-th-text mb-6">{t('settings.changePassword')}</h2>
              <form onSubmit={handlePasswordSave} className="space-y-4">
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
+                  <label htmlFor="settings-current-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
                  <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="settings-current-password"
                      type="password"
                      autoComplete="current-password"
                      value={passwords.currentPassword}
                      onChange={e => setPasswords({ ...passwords, currentPassword: e.target.value })}
                      className="input-field pl-11"
@@ -443,11 +455,13 @@ export default function Settings() {
                  </div>
                </div>
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.newPassword')}</label>
+                  <label htmlFor="settings-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.newPassword')}</label>
                  <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="settings-new-password"
                      type="password"
                      autoComplete="new-password"
                      value={passwords.newPassword}
                      onChange={e => setPasswords({ ...passwords, newPassword: e.target.value })}
                      className="input-field pl-11"
@@ -458,11 +472,13 @@ export default function Settings() {
                  </div>
                </div>
                <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.confirmNewPassword')}</label>
+                  <label htmlFor="settings-confirm-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.confirmNewPassword')}</label>
                  <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                    <input
                      id="settings-confirm-new-password"
                      type="password"
                      autoComplete="new-password"
                      value={passwords.confirmPassword}
                      onChange={e => setPasswords({ ...passwords, confirmPassword: e.target.value })}
                      className="input-field pl-11"
@@ -495,7 +511,7 @@ export default function Settings() {
                  /* 2FA is enabled */
                  <div>
                    <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 mb-5">
-                      <ShieldCheck size={22} className="text-emerald-400 flex-shrink-0" />
+                      <ShieldCheck size={22} className="text-emerald-400 shrink-0" />
                      <div>
                        <p className="text-sm font-medium text-emerald-300">{t('settings.security.statusEnabled')}</p>
                        <p className="text-xs text-emerald-400/70">{t('settings.security.statusEnabledDesc')}</p>
@@ -514,11 +530,13 @@ export default function Settings() {
                      <form onSubmit={handleDisable2FA} className="space-y-4 p-4 rounded-xl bg-th-bg-t border border-th-border">
                        <p className="text-sm text-th-text-s">{t('settings.security.disableConfirm')}</p>
                        <div>
-                          <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
+                          <label htmlFor="twofa-disable-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
                          <div className="relative">
-                            <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                            <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                            <input
                              id="twofa-disable-password"
                              type="password"
                              autoComplete="current-password"
                              value={twoFaDisablePassword}
                              onChange={e => setTwoFaDisablePassword(e.target.value)}
                              className="input-field pl-11"
@@ -527,8 +545,9 @@ export default function Settings() {
                          </div>
                        </div>
                        <div>
-                          <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.codeLabel')}</label>
+                          <label htmlFor="twofa-disable-code" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.codeLabel')}</label>
                          <input
                            id="twofa-disable-code"
                            type="text"
                            inputMode="numeric"
                            autoComplete="one-time-code"
@@ -569,7 +588,8 @@ export default function Settings() {
                        </code>
                        <button
                          onClick={() => { navigator.clipboard.writeText(twoFaSetupData.secret); toast.success(t('room.linkCopied')); }}
-                          className="btn-ghost py-1.5 px-2 flex-shrink-0"
+                          className="btn-ghost py-1.5 px-2 shrink-0"
                          aria-label={t('room.copyLink')}
                        >
                          <Copy size={14} />
                        </button>
@@ -577,8 +597,9 @@ export default function Settings() {
                    </div>
                    <form onSubmit={handleEnable2FA} className="space-y-3">
                      <div>
-                        <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.verifyCode')}</label>
+                        <label htmlFor="twofa-enable-code" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.verifyCode')}</label>
                        <input
                          id="twofa-enable-code"
                          type="text"
                          inputMode="numeric"
                          autoComplete="one-time-code"
@@ -605,7 +626,7 @@ export default function Settings() {
                  /* 2FA is disabled — show enable button */
                  <div>
                    <div className="flex items-center gap-3 p-4 rounded-xl bg-th-bg-t border border-th-border mb-5">
-                      <ShieldOff size={22} className="text-th-text-s flex-shrink-0" />
+                      <ShieldOff size={22} className="text-th-text-s shrink-0" />
                      <div>
                        <p className="text-sm font-medium text-th-text">{t('settings.security.statusDisabled')}</p>
                        <p className="text-xs text-th-text-s">{t('settings.security.statusDisabledDesc')}</p>
@@ -667,7 +688,7 @@ export default function Settings() {
                      >
                        {/* Color preview */}
                        <div
-                          className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 border"
+                          className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 border"
                          style={{ backgroundColor: th.colors.bg, borderColor: th.colors.accent + '40' }}
                        >
                          <div className="w-4 h-4 rounded-full" style={{ backgroundColor: th.colors.accent }} />
@@ -699,7 +720,7 @@ export default function Settings() {
                      </code>
                      <button
                        onClick={() => { navigator.clipboard.writeText(`${window.location.origin}/caldav/`); toast.success(t('room.linkCopied')); }}
-                        className="btn-ghost py-1.5 px-2 flex-shrink-0"
+                        className="btn-ghost py-1.5 px-2 shrink-0"
                      >
                        <Copy size={14} />
                      </button>
@@ -713,7 +734,7 @@ export default function Settings() {
                      </code>
                      <button
                        onClick={() => { navigator.clipboard.writeText(user?.email || ''); toast.success(t('room.linkCopied')); }}
-                        className="btn-ghost py-1.5 px-2 flex-shrink-0"
+                        className="btn-ghost py-1.5 px-2 shrink-0"
                      >
                        <Copy size={14} />
                      </button>
@@ -732,12 +753,12 @@ export default function Settings() {
                    <code className="flex-1 text-xs bg-th-bg-t px-3 py-2 rounded-lg font-mono text-th-text break-all">
                      {tokenVisible ? newlyCreatedToken : '•'.repeat(48)}
                    </code>
-                    <button onClick={() => setTokenVisible(v => !v)} className="btn-ghost py-1.5 px-2 flex-shrink-0">
+                    <button onClick={() => setTokenVisible(v => !v)} className="btn-ghost py-1.5 px-2 shrink-0">
                      {tokenVisible ? <EyeOff size={14} /> : <Eye size={14} />}
                    </button>
                    <button
                      onClick={() => { navigator.clipboard.writeText(newlyCreatedToken); toast.success(t('room.linkCopied')); }}
-                      className="btn-ghost py-1.5 px-2 flex-shrink-0"
+                      className="btn-ghost py-1.5 px-2 shrink-0"
                    >
                      <Copy size={14} />
                    </button>
@@ -790,7 +811,7 @@ export default function Settings() {
                        </div>
                        <button
                          onClick={() => handleRevokeToken(tk.id)}
-                          className="btn-ghost py-1 px-2 text-th-error hover:text-th-error flex-shrink-0"
+                          className="btn-ghost py-1 px-2 text-th-error hover:text-th-error shrink-0"
                          title={t('settings.caldav.revoke')}
                        >
                          <Trash2 size={14} />
@@ -173,6 +173,18 @@ export function getThemeById(id) {
  return themes.find(t => t.id === id) || themes[1]; // default to dark
 }
 // Whether the currently applied theme is a dark one. Reads the resolved theme
 // from the <html data-theme> attribute (set by ThemeContext) with a localStorage
 // fallback, so it works without React context — handy for one-off API payloads
 // such as the BBB join call that forwards dark mode to the meeting.
 export function isCurrentThemeDark() {
  const id = (typeof document !== 'undefined'
    && document.documentElement.getAttribute('data-theme'))
    || (typeof localStorage !== 'undefined' && localStorage.getItem('theme'))
    || 'dark';
  return getThemeById(id).type === 'dark';
 }
 export function getThemeGroups() {
  const groups = {};
  themes.forEach(theme => {
@@ -1,39 +0,0 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        th: {
          bg: 'var(--bg-primary)',
          'bg-s': 'var(--bg-secondary)',
          'bg-t': 'var(--bg-tertiary)',
          text: 'var(--text-primary)',
          'text-s': 'var(--text-secondary)',
          accent: 'var(--accent)',
          'accent-h': 'var(--accent-hover)',
          'accent-t': 'var(--accent-text)',
          border: 'var(--border)',
          card: 'var(--card-bg)',
          input: 'var(--input-bg)',
          'input-b': 'var(--input-border)',
          nav: 'var(--nav-bg)',
          side: 'var(--sidebar-bg)',
          hover: 'var(--hover-bg)',
          success: 'var(--success)',
          warning: 'var(--warning)',
          error: 'var(--error)',
          ring: 'var(--ring)',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
      },
      boxShadow: {
        'th': '0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color)',
        'th-lg': '0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color)',
      },
    },
  },
  plugins: [],
 };
Author	SHA1	Message	Date
MichelleandClaude Opus 4.8	03098eaf2b	chore: update version to 2.3.0 Build & Push Docker Image / build (push) Successful in 4m5s Details Build & Push Docker Image / build (release) Successful in 4m13s Details Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-11 10:18:48 +02:00
MichelleandClaude Opus 4.8	7dd834cd35	Harden server security, rework landing page and refresh branding Build & Push Docker Image / build (push) Successful in 4m3s Details Security: - rooms: rate-limit /invite-email (SMTP spam relay), validate share target user exists, guard timingSafeEqual against length mismatch in the presentation route (500 -> 403) - analytics: verify callback token before parsing the 5mb body so unauthenticated callers cannot buffer large payloads - caldav: rate-limit failed Basic-Auth attempts (token brute force), lowercase email lookup, case-insensitive principal check - auth: fall back to the in-memory rate-limit store when Redis is unavailable; previously every rate-limited endpoint (incl. login) returned 500 when the Redis connection was down UI/copy: - Home: factual hero copy and feature cards (6 instead of 9), fix double-rendered feature icon, remove fake stats row and pill badge; keep the background gradient and card layout - i18n: consistent informal tone, drop trailing exclamation marks from status toasts, remove emoji from transactional emails - new favicon (logo.svg), restore theme-based default brand logo Chore: - gitignore SQLite WAL/SHM files Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-11 10:14:36 +02:00
Michelle	4621010bd7	feat: add dark mode support for meeting join and start processes Build & Push Docker Image / build (push) Successful in 4m14s Details	2026-06-11 09:27:34 +02:00
Michelle	fbbcd79719	fix: prevent focus loss by using ref for onClose in Modal component Build & Push Docker Image / build (push) Successful in 4m6s Details Build & Push Docker Image / build (release) Successful in 4m12s Details	2026-06-03 10:40:38 +02:00
Michelle	10f0ffd2e5	chore: update version to 2.2.0 Build & Push Docker Image / build (push) Successful in 4m2s Details Build & Push Docker Image / build (release) Successful in 4m6s Details	2026-06-02 09:21:42 +02:00
Michelle	4aea069295	fix: resolve server bugs and unify app-name handling Build & Push Docker Image / build (push) Successful in 4m6s Details Bug fixes: - bbb.js: replace undefined t('defaultWelcome') call that threw a ReferenceError when a room had an empty welcome message, breaking meeting creation. Default welcome and the guest-invite hint are now localised via the i18n system (new "bbb" namespace in de/en). - auth.js: app name was read from the never-written 'branding' settings key, so custom names never appeared in verification emails or the TOTP issuer. Now resolved through a shared getAppName() helper. - auth.js: lowercase the email in the registration duplicate check so case-variant duplicates return a clean 409 instead of a 500 (UNIQUE violation). - federation.js: select the user's "language" column so federation invite emails respect the recipient's language instead of always defaulting to English. - calendar.js: a set reminder could not be cleared. COALESCE treated an explicit reminder_minutes: null as "keep existing"; use a direct assignment that distinguishes "omitted" (keep) from "null" (clear). - index.js / analytics.js: exclude the BBB learning-analytics callback from the global 100kb body limit and give it its own 5mb limit, since analytics payloads for large meetings can be several MB. Cleanup: - Add server/config/appName.js as the single source of truth for the app name (admin setting -> APP_NAME env -> 'Redlight') and use it in auth, admin, rooms, calendar and federation, replacing the previous mix of wrong DB key, direct app_name reads and bare process.env reads. - Localise the BBB default welcome message in the room owner's language. - Remove two unused safeAppName variables in mailer.js.	2026-06-02 09:19:21 +02:00
Michelle	9fc51bdfc5	chore: update version to 2.1.4 Build & Push Docker Image / build (push) Has been cancelled Details Build & Push Docker Image / build (release) Successful in 4m14s Details	2026-05-28 10:14:41 +02:00
Michelle	7f48685717	Enhance accessibility and improve form semantics across multiple pages Build & Push Docker Image / build (push) Successful in 4m4s Details - Added `htmlFor` attributes to labels for better accessibility in Calendar, Dashboard, GuestJoin, Login, Register, RoomDetail, and Settings pages. - Included `aria-hidden` attributes for icons to improve screen reader experience. - Set `autoComplete` attributes for input fields to enhance user experience during form filling. - Implemented `role` and `aria` attributes for radio groups and buttons to improve accessibility compliance.	2026-05-28 10:07:19 +02:00
Michelle	cff5398ebd	fix: restore pointer cursor for buttons in index.css Build & Push Docker Image / build (push) Successful in 4m10s Details	2026-05-28 09:22:50 +02:00
Michelle	109e75d976	fix: add .claude/ to .gitignore and update cursor styles for button utilities in index.css Build & Push Docker Image / build (push) Failing after 19m25s Details	2026-05-28 09:08:17 +02:00
Michelle	24024cd1dd	chore: update version to 2.1.3 in package.json and federation.js Build & Push Docker Image / build (push) Successful in 4m18s Details Build & Push Docker Image / build (release) Successful in 4m18s Details	2026-05-18 13:17:02 +02:00
Michelle	4028e913c4	refactor: update class names for consistency and improve styling Build & Push Docker Image / build (push) Successful in 4m21s Details - Changed `flex-shrink-0` to `shrink-0` in multiple components for better consistency. - Updated button and checkbox classes to use `rounded-sm` for a more uniform appearance. - Adjusted backdrop blur classes for modals to `backdrop-blur-xs` for a subtler effect. - Removed unused Tailwind CSS configuration file.	2026-05-18 13:07:26 +02:00
Michelle	aba7819f12	chore: update dependencies and versions in package-lock.json Build & Push Docker Image / build (push) Successful in 4m5s Details	2026-04-25 20:34:23 +02:00
Michelle	45fdbe4883	feat: enforce maximum password length of 64 characters in user registration and password update Build & Push Docker Image / build (push) Successful in 4m19s Details	2026-04-25 20:30:29 +02:00
Michelle	de696d422a	fix: anyone_can_start not working as Admin Build & Push Docker Image / build (push) Successful in 4m24s Details	2026-04-23 09:32:55 +02:00
Michelle	995d6eabf7	feat: remove unnecessary footer text from home page Build & Push Docker Image / build (push) Successful in 4m19s Details	2026-04-09 14:01:01 +02:00
Michelle	9ee4f84d84	feat: update home page features with federation, calendar, notifications, OAuth, and analytics support Build & Push Docker Image / build (push) Successful in 4m24s Details	2026-04-09 13:52:33 +02:00
Michelle	df1aa20e45	feat: add recordings table and implement fetch and sync functionality for recordings Build & Push Docker Image / build (push) Successful in 4m18s Details	2026-04-08 00:10:25 +02:00
Michelle	e0ce354eda	feat: improve email invitation label for clarity and add navigation on guest join Build & Push Docker Image / build (push) Successful in 4m19s Details	2026-04-02 01:03:18 +02:00
Michelle	1690a74c19	feat: add email invitation functionality for guests with support for multiple addresses Build & Push Docker Image / build (push) Successful in 4m21s Details	2026-04-02 00:54:57 +02:00
Michelle	61585d8c63	feat: add functionality to display all rooms with search and modal support in admin panel Build & Push Docker Image / build (push) Successful in 4m17s Details	2026-04-01 12:05:51 +02:00
Michelle	d04793148a	feat: add room management functionality for admins with listing and deletion options Build & Push Docker Image / build (push) Successful in 4m12s Details	2026-04-01 11:54:10 +02:00
Michelle	9bf4228d04	fix: update presentation display to show filename instead of name Build & Push Docker Image / build (push) Successful in 4m21s Details	2026-04-01 11:34:48 +02:00
Michelle	c058ba3bf1	fix: update presentation URL structure for token protection Build & Push Docker Image / build (push) Successful in 4m13s Details	2026-04-01 09:43:32 +02:00
Michelle	b3b559e164	feat: implement token-based access for presentation files and add serving endpoint Build & Push Docker Image / build (push) Successful in 4m43s Details	2026-04-01 08:52:43 +02:00
Michelle	0db9227c20	chore: update package-lock.json with dependency version bumps Build & Push Docker Image / build (push) Successful in 4m18s Details	2026-03-31 13:11:56 +02:00
Michelle	30f106a7ea	fix: guest join doesn't add avatar when logged in Build & Push Docker Image / build (push) Successful in 4m27s Details	2026-03-31 09:36:13 +02:00
Michelle	8cbe28f915	chore: bump version to 2.1.2 and update user name handling in GuestJoin component Build & Push Docker Image / build (push) Successful in 4m28s Details Build & Push Docker Image / build (release) Successful in 4m20s Details	2026-03-26 09:40:41 +01:00