feat: BreakPilot PWA - Full codebase (clean push without large binaries)

All services: admin-v2, studio-v2, website, ai-compliance-sdk,
consent-service, klausur-service, voice-service, and infrastructure.
Large PDFs and compiled binaries excluded via .gitignore.

backend/frontend/static/css/modules/base/layout.css

@@ -0,0 +1,163 @@
+/* ==========================================
+   Base Layout Styles
+   Reset, Scrollbar, App Structure, Topbar
+   ========================================== */
+
+* { box-sizing: border-box; }
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bp-scrollbar-track);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bp-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--bp-scrollbar-thumb);
+  opacity: 0.8;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+  background: var(--bp-gradient-bg);
+  color: var(--bp-text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.app-root {
+  display: grid;
+  grid-template-rows: 56px 1fr 32px;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ==========================================
+   Topbar Styles
+   ========================================== */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--bp-border-subtle);
+  backdrop-filter: blur(18px);
+  background: var(--bp-gradient-topbar);
+  transition: background 0.3s ease, border-color 0.3s ease;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.brand-logo {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 2px solid var(--bp-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--bp-accent);
+}
+
+.brand-text-main {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.brand-text-sub {
+  font-size: 12px;
+  color: var(--bp-text-muted);
+}
+
+/* ==========================================
+   Top Navigation
+   ========================================== */
+.top-nav {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  font-size: 13px;
+}
+
+.top-nav-item {
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 999px;
+  color: var(--bp-text-muted);
+  border: 1px solid transparent;
+}
+
+.top-nav-item.active {
+  color: var(--bp-primary);
+  border-color: var(--bp-accent-soft);
+  background: var(--bp-surface-elevated);
+}
+
+[data-theme="light"] .top-nav-item.active {
+  color: var(--bp-primary);
+  background: var(--bp-primary-soft);
+  border-color: var(--bp-primary);
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pill {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--bp-border-subtle);
+  color: var(--bp-text-muted);
+}
+
+/* ==========================================
+   Theme Toggle Button
+   ========================================== */
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--bp-border-subtle);
+  background: var(--bp-surface-elevated);
+  color: var(--bp-text-muted);
+  cursor: pointer;
+  font-size: 11px;
+  transition: all 0.2s ease;
+}
+
+.theme-toggle:hover {
+  border-color: var(--bp-primary);
+  color: var(--bp-primary);
+}
+
+.theme-toggle-icon {
+  font-size: 14px;
+}