/* ==========================================
           DARK MODE (Default) - Original Design
           ========================================== */
        :root {
          --bp-primary: #0f766e;
          --bp-primary-soft: #ccfbf1;
          --bp-bg: #020617;
          --bp-surface: #020617;
          --bp-surface-elevated: rgba(15,23,42,0.9);
          --bp-border: #1f2937;
          --bp-border-subtle: rgba(148,163,184,0.25);
          --bp-accent: #22c55e;
          --bp-accent-soft: rgba(34,197,94,0.2);
          --bp-text: #e5e7eb;
          --bp-text-muted: #9ca3af;
          --bp-danger: #ef4444;
          --bp-gradient-bg: radial-gradient(circle at top left, #1f2937 0, #020617 50%, #000 100%);
          --bp-gradient-surface: radial-gradient(circle at top left, rgba(15,23,42,0.9) 0, #020617 50%, #000 100%);
          --bp-gradient-sidebar: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
          --bp-gradient-topbar: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.6));
          --bp-btn-primary-bg: linear-gradient(to right, var(--bp-primary), #15803d);
          --bp-btn-primary-hover: linear-gradient(to right, #0f766e, #166534);
          --bp-card-bg: var(--bp-gradient-surface);
          --bp-input-bg: rgba(255,255,255,0.05);
          --bp-scrollbar-track: rgba(15,23,42,0.5);
          --bp-scrollbar-thumb: rgba(148,163,184,0.5);
        }

        /* ==========================================
           LIGHT MODE - Website Design
           Farben aus BreakPilot Website:
           - Primary: Sky Blue #0ea5e9 (Modern, Vertrauen)
           - Accent: Fuchsia #d946ef (Kreativ, Energie)
           - Text: Slate #0f172a (Klarheit)
           - Background: White/Slate-50 (Clean, Professional)
           ========================================== */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        [data-theme="light"] {
          --bp-primary: #0ea5e9;
          --bp-primary-soft: rgba(14, 165, 233, 0.1);
          --bp-bg: #f8fafc;
          --bp-surface: #FFFFFF;
          --bp-surface-elevated: #FFFFFF;
          --bp-border: #e2e8f0;
          --bp-border-subtle: rgba(14, 165, 233, 0.2);
          --bp-accent: #d946ef;
          --bp-accent-soft: rgba(217, 70, 239, 0.15);
          --bp-text: #0f172a;
          --bp-text-muted: #64748b;
          --bp-danger: #ef4444;
          --bp-gradient-bg: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
          --bp-gradient-surface: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
          --bp-gradient-sidebar: linear-gradient(180deg, #FFFFFF 0%, #f1f5f9 100%);
          --bp-gradient-topbar: linear-gradient(to right, #FFFFFF, #f8fafc);
          --bp-btn-primary-bg: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
          --bp-btn-primary-hover: linear-gradient(135deg, #0284c7 0%, #c026d3 100%);
          --bp-card-bg: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
          --bp-input-bg: #FFFFFF;
          --bp-scrollbar-track: rgba(0,0,0,0.05);
          --bp-scrollbar-thumb: rgba(14, 165, 233, 0.3);
          --bp-gold: #eab308;
        }

        [data-theme="light"] body {
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * { 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 {
          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-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;
        }

        /* ==========================================
           LEGAL MODAL STYLES
           ========================================== */
        .legal-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 10000;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(4px);
        }

        .legal-modal.active {
          display: flex;
        }

        .legal-modal-content {
          background: var(--bp-surface);
          border-radius: 16px;
          width: 90%;
          max-width: 700px;
          max-height: 80vh;
          display: flex;
          flex-direction: column;
          box-shadow: 0 20px 60px rgba(0,0,0,0.4);
          border: 1px solid var(--bp-border);
        }

        .legal-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          border-bottom: 1px solid var(--bp-border);
        }

        .legal-modal-header h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
        }

        .legal-modal-close {
          background: none;
          border: none;
          font-size: 28px;
          cursor: pointer;
          color: var(--bp-text-muted);
          padding: 0;
          line-height: 1;
        }

        .legal-modal-close:hover {
          color: var(--bp-text);
        }

        .legal-tabs {
          display: flex;
          gap: 4px;
          padding: 12px 24px;
          border-bottom: 1px solid var(--bp-border);
          background: var(--bp-surface-elevated);
        }

        .legal-tab {
          padding: 8px 16px;
          border: none;
          background: transparent;
          color: var(--bp-text-muted);
          cursor: pointer;
          border-radius: 8px;
          font-size: 13px;
          transition: all 0.2s ease;
        }

        .legal-tab:hover {
          background: var(--bp-border-subtle);
          color: var(--bp-text);
        }

        .legal-tab.active {
          background: var(--bp-primary);
          color: white;
        }

        .legal-body {
          padding: 24px;
          overflow-y: auto;
          flex: 1;
        }

        .legal-content {
          display: none;
        }

        .legal-content.active {
          display: block;
        }

        .legal-content h3 {
          margin-top: 0;
          color: var(--bp-text);
        }

        .legal-content p {
          line-height: 1.6;
          color: var(--bp-text-muted);
        }

        .legal-content ul {
          color: var(--bp-text-muted);
          line-height: 1.8;
        }

        .cookie-categories {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-top: 16px;
        }

        .cookie-category {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 12px;
          background: var(--bp-surface-elevated);
          border-radius: 8px;
          border: 1px solid var(--bp-border);
          cursor: pointer;
        }

        .cookie-category input {
          margin-top: 4px;
        }

        .cookie-category span {
          flex: 1;
          font-size: 13px;
          color: var(--bp-text);
        }

        .gdpr-actions {
          display: flex;
          flex-direction: column;
          gap: 16px;
          margin-top: 16px;
        }

        .gdpr-action {
          padding: 16px;
          background: var(--bp-surface-elevated);
          border-radius: 12px;
          border: 1px solid var(--bp-border);
        }

        .gdpr-action h4 {
          margin: 0 0 8px 0;
          font-size: 14px;
          color: var(--bp-text);
        }

        .gdpr-action p {
          margin: 0 0 12px 0;
          font-size: 13px;
        }

        .btn-danger {
          background: var(--bp-danger) !important;
          border-color: var(--bp-danger) !important;
        }

        .btn-danger:hover {
          filter: brightness(1.1);
        }

        [data-theme="light"] .legal-modal-content {
          background: var(--bp-surface);
          border-color: var(--bp-border);
        }

        [data-theme="light"] .legal-tabs {
          background: var(--bp-bg);
        }

        [data-theme="light"] .legal-tab.active {
          background: var(--bp-primary);
          color: white;
        }

        [data-theme="light"] .cookie-category,
        [data-theme="light"] .gdpr-action {
          background: var(--bp-bg);
          border-color: var(--bp-border);
        }

        /* ==========================================
           AUTH MODAL STYLES
           ========================================== */
        .auth-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 10000;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(4px);
        }

        .auth-modal.active {
          display: flex;
        }

        .auth-modal-content {
          background: var(--bp-surface);
          border-radius: 16px;
          width: 90%;
          max-width: 420px;
          display: flex;
          flex-direction: column;
          box-shadow: 0 20px 60px rgba(0,0,0,0.4);
          border: 1px solid var(--bp-border);
        }

        .auth-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          border-bottom: 1px solid var(--bp-border);
        }

        .auth-modal-header h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .auth-tabs {
          display: flex;
          gap: 4px;
          padding: 12px 24px;
          border-bottom: 1px solid var(--bp-border);
          background: var(--bp-surface-elevated);
        }

        .auth-tab {
          flex: 1;
          padding: 10px 16px;
          border: none;
          background: transparent;
          color: var(--bp-text-muted);
          cursor: pointer;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s ease;
        }

        .auth-tab:hover {
          background: var(--bp-border-subtle);
          color: var(--bp-text);
        }

        .auth-tab.active {
          background: var(--bp-primary);
          color: white;
        }

        .auth-body {
          padding: 24px;
        }

        .auth-content {
          display: none;
        }

        .auth-content.active {
          display: block;
        }

        .auth-form-group {
          margin-bottom: 16px;
        }

        .auth-form-label {
          display: block;
          margin-bottom: 6px;
          font-size: 13px;
          font-weight: 500;
          color: var(--bp-text);
        }

        .auth-form-input {
          width: 100%;
          padding: 10px 14px;
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          font-size: 14px;
          transition: border-color 0.2s ease;
          box-sizing: border-box;
        }

        .auth-form-input:focus {
          outline: none;
          border-color: var(--bp-primary);
        }

        .auth-form-input::placeholder {
          color: var(--bp-text-muted);
        }

        .auth-error {
          display: none;
          padding: 10px 14px;
          background: rgba(220, 53, 69, 0.15);
          border: 1px solid var(--bp-danger);
          border-radius: 8px;
          color: var(--bp-danger);
          font-size: 13px;
          margin-bottom: 16px;
        }

        .auth-error.active {
          display: block;
        }

        .auth-success {
          display: none;
          padding: 10px 14px;
          background: rgba(40, 167, 69, 0.15);
          border: 1px solid var(--bp-success);
          border-radius: 8px;
          color: var(--bp-success);
          font-size: 13px;
          margin-bottom: 16px;
        }

        .auth-success.active {
          display: block;
        }

        .auth-btn {
          width: 100%;
          padding: 12px 20px;
          border: none;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .auth-btn-primary {
          background: var(--bp-primary);
          color: white;
        }

        .auth-btn-primary:hover {
          filter: brightness(1.1);
        }

        .auth-btn-primary:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

        .auth-link {
          text-align: center;
          margin-top: 16px;
          font-size: 13px;
          color: var(--bp-text-muted);
        }

        .auth-link a {
          color: var(--bp-primary);
          text-decoration: none;
          cursor: pointer;
        }

        .auth-link a:hover {
          text-decoration: underline;
        }

        .auth-divider {
          display: flex;
          align-items: center;
          text-align: center;
          margin: 20px 0;
          color: var(--bp-text-muted);
          font-size: 12px;
        }

        .auth-divider::before,
        .auth-divider::after {
          content: '';
          flex: 1;
          border-bottom: 1px solid var(--bp-border);
        }

        .auth-divider::before {
          margin-right: 12px;
        }

        .auth-divider::after {
          margin-left: 12px;
        }

        .auth-user-dropdown {
          position: relative;
          display: none;
        }

        .auth-user-dropdown.active {
          display: flex;
        }

        .auth-user-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 6px 12px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          color: var(--bp-text);
          cursor: pointer;
          font-size: 13px;
        }

        .auth-user-btn:hover {
          border-color: var(--bp-primary);
        }

        .auth-user-avatar {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: var(--bp-primary);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
        }

        .auth-user-menu {
          display: none;
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 8px;
          background: var(--bp-surface);
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.3);
          min-width: 200px;
          z-index: 1000;
          overflow: hidden;
        }

        .auth-user-menu.active {
          display: block;
        }

        .auth-user-menu-header {
          padding: 12px 16px;
          border-bottom: 1px solid var(--bp-border);
        }

        .auth-user-menu-name {
          font-weight: 600;
          font-size: 14px;
          color: var(--bp-text);
        }

        .auth-user-menu-email {
          font-size: 12px;
          color: var(--bp-text-muted);
          margin-top: 2px;
        }

        .auth-user-menu-item {
          display: block;
          width: 100%;
          padding: 10px 16px;
          border: none;
          background: none;
          text-align: left;
          color: var(--bp-text);
          cursor: pointer;
          font-size: 13px;
          transition: background 0.2s ease;
        }

        .auth-user-menu-item:hover {
          background: var(--bp-surface-elevated);
        }

        .auth-user-menu-item.danger {
          color: var(--bp-danger);
        }

        [data-theme="light"] .auth-modal-content {
          background: var(--bp-surface);
          border-color: var(--bp-border);
        }

        [data-theme="light"] .auth-tabs {
          background: var(--bp-bg);
        }

        [data-theme="light"] .auth-form-input {
          background: var(--bp-surface);
          border-color: var(--bp-border);
        }

        [data-theme="light"] .auth-user-menu {
          background: var(--bp-surface);
          border-color: var(--bp-border);
        }

        /* ==========================================
           NOTIFICATION STYLES
           ========================================== */
        .notification-bell {
          position: relative;
          display: none;
        }

        .notification-bell.active {
          display: flex;
        }

        .notification-bell-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          color: var(--bp-text-muted);
          cursor: pointer;
          font-size: 18px;
          transition: all 0.2s ease;
        }

        .notification-bell-btn:hover {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        .notification-badge {
          position: absolute;
          top: 2px;
          right: 2px;
          min-width: 18px;
          height: 18px;
          background: var(--bp-danger);
          color: white;
          border-radius: 999px;
          font-size: 11px;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
        }

        .notification-badge.hidden {
          display: none;
        }

        .notification-panel {
          display: none;
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 8px;
          width: 360px;
          max-height: 480px;
          background: var(--bp-surface);
          border: 1px solid var(--bp-border);
          border-radius: 12px;
          box-shadow: 0 10px 40px rgba(0,0,0,0.3);
          z-index: 1000;
          overflow: hidden;
        }

        .notification-panel.active {
          display: flex;
          flex-direction: column;
        }

        .notification-panel-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
          border-bottom: 1px solid var(--bp-border);
        }

        .notification-panel-title {
          font-weight: 600;
          font-size: 16px;
          color: var(--bp-text);
        }

        .notification-panel-actions {
          display: flex;
          gap: 8px;
        }

        .notification-panel-action {
          padding: 4px 8px;
          background: none;
          border: 1px solid var(--bp-border);
          border-radius: 6px;
          color: var(--bp-text-muted);
          cursor: pointer;
          font-size: 11px;
          transition: all 0.2s ease;
        }

        .notification-panel-action:hover {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        .notification-list {
          flex: 1;
          overflow-y: auto;
          max-height: 380px;
        }

        .notification-item {
          display: flex;
          gap: 12px;
          padding: 14px 16px;
          border-bottom: 1px solid var(--bp-border);
          cursor: pointer;
          transition: background 0.2s ease;
        }

        .notification-item:hover {
          background: var(--bp-surface-elevated);
        }

        .notification-item.unread {
          background: rgba(15, 118, 110, 0.08);
        }

        .notification-item.unread::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background: var(--bp-primary);
        }

        .notification-item {
          position: relative;
        }

        .notification-icon {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--bp-primary-soft);
          color: var(--bp-primary);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          flex-shrink: 0;
        }

        .notification-content {
          flex: 1;
          min-width: 0;
        }

        .notification-title {
          font-weight: 500;
          font-size: 13px;
          color: var(--bp-text);
          margin-bottom: 4px;
          line-height: 1.3;
        }

        .notification-body {
          font-size: 12px;
          color: var(--bp-text-muted);
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .notification-time {
          font-size: 11px;
          color: var(--bp-text-muted);
          margin-top: 6px;
        }

        .notification-empty {
          padding: 40px 20px;
          text-align: center;
          color: var(--bp-text-muted);
        }

        .notification-empty-icon {
          font-size: 36px;
          margin-bottom: 12px;
          opacity: 0.5;
        }

        .notification-footer {
          padding: 12px 16px;
          border-top: 1px solid var(--bp-border);
          text-align: center;
        }

        .notification-footer-btn {
          background: none;
          border: none;
          color: var(--bp-primary);
          cursor: pointer;
          font-size: 13px;
          font-weight: 500;
        }

        .notification-footer-btn:hover {
          text-decoration: underline;
        }

        /* Notification Preferences Modal */
        .notification-prefs-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 10001;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(4px);
        }

        .notification-prefs-modal.active {
          display: flex;
        }

        .notification-prefs-content {
          background: var(--bp-surface);
          border-radius: 16px;
          width: 90%;
          max-width: 420px;
          box-shadow: 0 20px 60px rgba(0,0,0,0.4);
          border: 1px solid var(--bp-border);
        }

        .notification-pref-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px 0;
          border-bottom: 1px solid var(--bp-border);
        }

        .notification-pref-item:last-child {
          border-bottom: none;
        }

        .notification-pref-label {
          font-size: 14px;
          color: var(--bp-text);
        }

        .notification-pref-desc {
          font-size: 12px;
          color: var(--bp-text-muted);
          margin-top: 2px;
        }

        .toggle-switch {
          position: relative;
          width: 48px;
          height: 26px;
          background: var(--bp-border);
          border-radius: 999px;
          cursor: pointer;
          transition: background 0.3s ease;
        }

        .toggle-switch.active {
          background: var(--bp-primary);
        }

        .toggle-switch-handle {
          position: absolute;
          top: 3px;
          left: 3px;
          width: 20px;
          height: 20px;
          background: white;
          border-radius: 50%;
          transition: transform 0.3s ease;
        }

        .toggle-switch.active .toggle-switch-handle {
          transform: translateX(22px);
        }

        [data-theme="light"] .notification-panel {
          background: var(--bp-surface);
          border-color: var(--bp-border);
        }

        [data-theme="light"] .notification-item.unread {
          background: rgba(14, 165, 233, 0.05);
        }

        [data-theme="light"] .notification-item.unread::before {
          background: var(--bp-primary);
        }

        /* ==========================================
           SUSPENSION OVERLAY STYLES
           ========================================== */
        .suspension-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.9);
          z-index: 20000;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(8px);
        }

        .suspension-overlay.active {
          display: flex;
        }

        .suspension-content {
          background: var(--bp-surface);
          border-radius: 20px;
          width: 90%;
          max-width: 500px;
          padding: 40px;
          text-align: center;
          box-shadow: 0 20px 60px rgba(0,0,0,0.5);
          border: 1px solid var(--bp-danger);
        }

        .suspension-icon {
          font-size: 64px;
          margin-bottom: 20px;
        }

        .suspension-title {
          font-size: 24px;
          font-weight: 700;
          color: var(--bp-danger);
          margin-bottom: 16px;
        }

        .suspension-message {
          font-size: 15px;
          color: var(--bp-text-muted);
          margin-bottom: 24px;
          line-height: 1.6;
        }

        .suspension-docs {
          background: var(--bp-surface-elevated);
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 24px;
          text-align: left;
        }

        .suspension-docs-title {
          font-size: 13px;
          font-weight: 600;
          color: var(--bp-text);
          margin-bottom: 12px;
        }

        .suspension-doc-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 12px;
          background: var(--bp-bg);
          border-radius: 8px;
          margin-bottom: 8px;
          border: 1px solid var(--bp-border);
        }

        .suspension-doc-item:last-child {
          margin-bottom: 0;
        }

        .suspension-doc-name {
          font-size: 14px;
          color: var(--bp-text);
        }

        .suspension-doc-deadline {
          font-size: 12px;
          color: var(--bp-danger);
          font-weight: 500;
        }

        .suspension-btn {
          padding: 14px 28px;
          background: var(--bp-btn-primary-bg);
          color: white;
          border: none;
          border-radius: 10px;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          width: 100%;
        }

        .suspension-btn:hover {
          background: var(--bp-btn-primary-hover);
          transform: translateY(-1px);
        }

        .suspension-countdown {
          font-size: 12px;
          color: var(--bp-text-muted);
          margin-top: 16px;
        }

        /* ==========================================
           ADMIN PANEL STYLES
           ========================================== */
        .admin-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 10000;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(4px);
        }

        .admin-modal.active {
          display: flex;
        }

        .admin-modal-content {
          background: var(--bp-surface);
          border-radius: 16px;
          width: 95%;
          max-width: 1000px;
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          box-shadow: 0 20px 60px rgba(0,0,0,0.4);
          border: 1px solid var(--bp-border);
        }

        .admin-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          border-bottom: 1px solid var(--bp-border);
        }

        .admin-modal-header h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .admin-tabs {
          display: flex;
          gap: 4px;
          padding: 12px 24px;
          border-bottom: 1px solid var(--bp-border);
          background: var(--bp-surface-elevated);
        }

        .admin-tab {
          padding: 8px 16px;
          border: none;
          background: transparent;
          color: var(--bp-text-muted);
          cursor: pointer;
          border-radius: 8px;
          font-size: 13px;
          transition: all 0.2s ease;
        }

        .admin-tab:hover {
          background: var(--bp-border-subtle);
          color: var(--bp-text);
        }

        .admin-tab.active {
          background: var(--bp-primary);
          color: white;
        }

        .admin-body {
          padding: 24px;
          overflow-y: auto;
          flex: 1;
        }

        .admin-content {
          display: none;
        }

        .admin-content.active {
          display: block;
        }

        .admin-toolbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          gap: 12px;
        }

        .admin-toolbar-left {
          display: flex;
          gap: 12px;
          align-items: center;
        }

        .admin-search {
          padding: 8px 12px;
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          width: 250px;
        }

        .admin-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13px;
        }

        .admin-table th,
        .admin-table td {
          padding: 12px;
          text-align: left;
          border-bottom: 1px solid var(--bp-border);
        }

        .admin-table th {
          background: var(--bp-surface-elevated);
          font-weight: 600;
          color: var(--bp-text);
        }

        .admin-table tr:hover {
          background: var(--bp-surface-elevated);
        }

        .admin-table td {
          color: var(--bp-text-muted);
        }

        .admin-badge {
          display: inline-block;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
        }

        .admin-badge-published {
          background: rgba(74, 222, 128, 0.2);
          color: #4ADE80;
        }

        .admin-badge-draft {
          background: rgba(251, 191, 36, 0.2);
          color: #FBBF24;
        }

        .admin-badge-archived {
          background: rgba(156, 163, 175, 0.2);
          color: #9CA3AF;
        }

        .admin-badge-rejected {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-badge-review {
          background: rgba(147, 51, 234, 0.2);
          color: #A855F7;
        }

        .admin-badge-approved {
          background: rgba(34, 197, 94, 0.2);
          color: #22C55E;
        }

        .admin-badge-submitted {
          background: rgba(59, 130, 246, 0.2);
          color: #3B82F6;
        }

        .admin-badge-rejected {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-badge-mandatory {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-badge-optional {
          background: rgba(96, 165, 250, 0.2);
          color: #60A5FA;
        }

        .admin-actions {
          display: flex;
          gap: 8px;
        }

        .admin-btn {
          padding: 6px 10px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 12px;
          transition: all 0.2s ease;
        }

        .admin-btn-edit {
          background: var(--bp-primary);
          color: white;
        }

        .admin-btn-edit:hover {
          filter: brightness(1.1);
        }

        .admin-btn-delete {
          background: rgba(239, 68, 68, 0.2);
          color: #EF4444;
        }

        .admin-btn-delete:hover {
          background: rgba(239, 68, 68, 0.3);
        }

        .admin-btn-publish {
          background: rgba(74, 222, 128, 0.2);
          color: #4ADE80;
        }

        .admin-btn-publish:hover {
          background: rgba(74, 222, 128, 0.3);
        }

        .admin-form {
          display: none;
          background: var(--bp-surface-elevated);
          border-radius: 12px;
          padding: 20px;
          margin-bottom: 20px;
          border: 1px solid var(--bp-border);
        }

        .admin-form.active {
          display: block;
        }

        /* Info Text in Toolbar */
        .admin-info-text {
          font-size: 12px;
          color: var(--bp-text-muted);
          font-style: italic;
        }

        /* Dialog Overlay */
        .admin-dialog {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          z-index: 1000;
          align-items: center;
          justify-content: center;
        }

        .admin-dialog.active {
          display: flex;
        }

        .admin-dialog-content {
          background: var(--bp-surface);
          border-radius: 12px;
          padding: 24px;
          max-width: 500px;
          width: 90%;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .admin-dialog-content h3 {
          margin: 0 0 12px 0;
          font-size: 18px;
        }

        .admin-dialog-info {
          font-size: 13px;
          color: var(--bp-text-muted);
          margin-bottom: 20px;
          line-height: 1.5;
        }

        .admin-dialog-actions {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
          margin-top: 20px;
        }

        /* Scheduled Badge */
        .admin-badge-scheduled {
          background: #f59e0b;
          color: white;
        }

        /* Version Compare Overlay */
        .version-compare-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--bp-bg);
          z-index: 2000;
          flex-direction: column;
        }

        .version-compare-overlay.active {
          display: flex;
        }

        .version-compare-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 24px;
          background: var(--bp-surface);
          border-bottom: 1px solid var(--bp-border);
        }

        .version-compare-header h2 {
          margin: 0;
          font-size: 18px;
        }

        .version-compare-info {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 14px;
        }

        .compare-vs {
          color: var(--bp-text-muted);
          font-weight: 600;
        }

        .version-compare-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          flex: 1;
          overflow: hidden;
          gap: 0;
        }

        .version-compare-panel {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border-right: 1px solid var(--bp-border);
        }

        .version-compare-panel:last-child {
          border-right: none;
        }

        .version-compare-panel-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 20px;
          background: var(--bp-surface);
          border-bottom: 1px solid var(--bp-border);
        }

        .compare-label {
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 600;
        }

        .compare-label-published {
          background: rgba(34, 197, 94, 0.15);
          color: #22c55e;
        }

        .compare-label-draft {
          background: rgba(59, 130, 246, 0.15);
          color: #3b82f6;
        }

        .version-compare-content {
          flex: 1;
          overflow-y: auto;
          padding: 24px;
          font-size: 14px;
          line-height: 1.7;
        }

        .version-compare-content h1,
        .version-compare-content h2,
        .version-compare-content h3 {
          margin-top: 24px;
          margin-bottom: 12px;
        }

        .version-compare-content p {
          margin-bottom: 12px;
        }

        .version-compare-content ul,
        .version-compare-content ol {
          margin-bottom: 12px;
          padding-left: 24px;
        }

        .version-compare-content .no-content {
          color: var(--bp-text-muted);
          font-style: italic;
          text-align: center;
          padding: 40px;
        }

        .version-compare-footer {
          padding: 12px 24px;
          background: var(--bp-surface);
          border-top: 1px solid var(--bp-border);
          max-height: 150px;
          overflow-y: auto;
        }

        .compare-history-title {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 8px;
          color: var(--bp-text-muted);
        }

        .compare-history-item {
          font-size: 12px;
          padding: 4px 0;
          border-bottom: 1px solid var(--bp-border-subtle);
        }

        .compare-history-item:last-child {
          border-bottom: none;
        }

        .compare-history-list {
          display: flex;
          flex-wrap: wrap;
          gap: 4px 8px;
          font-size: 12px;
          color: var(--bp-text-muted);
        }

        .admin-form-title {
          margin: 0 0 16px 0;
          font-size: 16px;
          font-weight: 600;
        }

        .admin-form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          margin-bottom: 16px;
        }

        .admin-form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .admin-form-group.full-width {
          grid-column: 1 / -1;
        }

        .admin-form-label {
          font-size: 12px;
          font-weight: 600;
          color: var(--bp-text);
        }

        .admin-form-input,
        .admin-form-select,
        .admin-form-textarea {
          padding: 10px 12px;
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          background: var(--bp-surface);
          color: var(--bp-text);
          font-size: 13px;
        }

        .admin-form-textarea {
          min-height: 150px;
          resize: vertical;
          font-family: inherit;
        }

        .admin-form-actions {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid var(--bp-border);
        }

        .admin-empty {
          text-align: center;
          padding: 40px;
          color: var(--bp-text-muted);
        }

        .admin-loading {
          text-align: center;
          padding: 40px;
          color: var(--bp-text-muted);
        }

        [data-theme="light"] .admin-modal-content {
          background: var(--bp-surface);
          border-color: var(--bp-border);
        }

        [data-theme="light"] .admin-tabs {
          background: var(--bp-bg);
        }

        [data-theme="light"] .admin-table th {
          background: var(--bp-bg);
        }

        [data-theme="light"] .admin-form {
          background: var(--bp-bg);
          border-color: var(--bp-border);
        }

        /* DSMS Styles */
        .dsms-subtab {
          padding: 6px 14px;
          border: none;
          background: transparent;
          color: var(--bp-text-muted);
          cursor: pointer;
          font-size: 13px;
          border-radius: 4px;
          transition: all 0.2s ease;
        }

        .dsms-subtab:hover {
          background: var(--bp-border-subtle);
          color: var(--bp-text);
        }

        .dsms-subtab.active {
          background: var(--bp-primary);
          color: white;
        }

        .dsms-content {
          display: none;
        }

        .dsms-content.active {
          display: block;
        }

        .dsms-status-card {
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          padding: 16px;
        }

        .dsms-status-card h4 {
          margin: 0 0 8px 0;
          font-size: 12px;
          color: var(--bp-text-muted);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }

        .dsms-status-card .value {
          font-size: 24px;
          font-weight: 600;
          color: var(--bp-text);
        }

        .dsms-status-card .value.online {
          color: var(--bp-accent);
        }

        .dsms-status-card .value.offline {
          color: var(--bp-danger);
        }

        .dsms-verify-success {
          background: var(--bp-accent-soft);
          border: 1px solid var(--bp-accent);
          border-radius: 8px;
          padding: 16px;
          color: var(--bp-accent);
        }

        .dsms-verify-error {
          background: rgba(239, 68, 68, 0.1);
          border: 1px solid var(--bp-danger);
          border-radius: 8px;
          padding: 16px;
          color: var(--bp-danger);
        }

        /* DSMS WebUI Styles */
        .dsms-webui-nav {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border: none;
          background: transparent;
          color: var(--bp-text-muted);
          font-size: 14px;
          border-radius: 6px;
          cursor: pointer;
          text-align: left;
          width: 100%;
          transition: all 0.2s;
        }
        .dsms-webui-nav:hover {
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
        }
        .dsms-webui-nav.active {
          background: var(--bp-primary-soft);
          color: var(--bp-primary);
          font-weight: 500;
        }
        .dsms-webui-section {
          display: none;
        }
        .dsms-webui-section.active {
          display: block;
        }
        .dsms-webui-stat-card {
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          padding: 16px;
        }
        .dsms-webui-stat-label {
          font-size: 12px;
          color: var(--bp-text-muted);
          margin-bottom: 4px;
        }
        .dsms-webui-stat-value {
          font-size: 18px;
          font-weight: 600;
          color: var(--bp-text);
        }
        .dsms-webui-stat-sub {
          font-size: 11px;
          color: var(--bp-text-muted);
          margin-top: 4px;
        }
        .dsms-webui-upload-zone {
          border: 2px dashed var(--bp-border);
          border-radius: 12px;
          padding: 48px 24px;
          background: var(--bp-input-bg);
          transition: all 0.2s;
        }
        .dsms-webui-upload-zone.dragover {
          border-color: var(--bp-primary);
          background: var(--bp-primary-soft);
        }
        .dsms-webui-file-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 16px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          margin-bottom: 8px;
        }
        .dsms-webui-file-item .cid {
          font-family: monospace;
          font-size: 12px;
          color: var(--bp-text-muted);
          word-break: break-all;
        }

        .main-layout {
          display: grid;
          grid-template-columns: 240px minmax(0, 1fr);
          height: 100%;
          min-height: 0;
        }

        .sidebar {
          border-right: 1px solid var(--bp-border-subtle);
          background: var(--bp-gradient-sidebar);
          padding: 14px 10px;
          display: flex;
          flex-direction: column;
          gap: 18px;
          min-width: 0;
          height: 100%;
          max-height: 100vh;
          overflow-y: auto;
          overflow-x: hidden;
          transition: background 0.3s ease, border-color 0.3s ease;
        }

        .sidebar-section-title {
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--bp-text);
          padding: 8px 6px 6px 6px;
          margin-top: 12px;
        }

        .sidebar-menu {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .sidebar-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 10px;
          border-radius: 9px;
          cursor: pointer;
          font-size: 13px;
          color: var(--bp-text-muted);
        }

        .sidebar-item.active {
          background: var(--bp-surface-elevated);
          color: var(--bp-accent);
          border: 1px solid var(--bp-accent-soft);
        }

        [data-theme="light"] .sidebar-item.active {
          background: var(--bp-primary-soft);
          color: var(--bp-primary);
          border: 1px solid var(--bp-primary);
        }

        .sidebar-item-label {
          display: flex;
          align-items: center;
          gap: 7px;
        }

        .sidebar-item-badge {
          font-size: 10px;
          border-radius: 999px;
          padding: 2px 7px;
          border: 1px solid var(--bp-border-subtle);
        }

        /* Sub-Navigation für Arbeitsblatt-Studio */
        .sidebar-sub-menu {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 4px 0 8px 20px;
          margin-top: 4px;
        }

        .sidebar-sub-item {
          font-size: 12px;
          color: var(--bp-text-muted);
          padding: 6px 10px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.15s ease;
          position: relative;
        }

        .sidebar-sub-item::before {
          content: '';
          position: absolute;
          left: -12px;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: var(--bp-border);
        }

        .sidebar-sub-item:hover {
          background: rgba(255, 255, 255, 0.05);
          color: var(--bp-text);
        }

        .sidebar-sub-item.active {
          background: rgba(var(--bp-primary), 0.15);
          color: var(--bp-primary);
        }

        .sidebar-sub-item.active::before {
          background: var(--bp-primary);
          width: 6px;
          height: 6px;
        }

        [data-theme="light"] .sidebar-sub-item:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .sidebar-sub-item.active {
          background: rgba(14, 165, 233, 0.1);
          color: #0ea5e9;
        }

        [data-theme="light"] .sidebar-sub-item.active::before {
          background: #0ea5e9;
        }

        /* Elternbriefe - Template Items */
        .template-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 10px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 13px;
          transition: all 0.15s ease;
        }

        .template-item:hover {
          background: rgba(255, 255, 255, 0.08);
        }

        [data-theme="light"] .template-item:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        /* Elternbriefe - Letter Items */
        .letter-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 8px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.15s ease;
          border-bottom: 1px solid var(--bp-border);
        }

        .letter-item:last-child {
          border-bottom: none;
        }

        .letter-item:hover {
          background: rgba(255, 255, 255, 0.05);
        }

        .letter-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .letter-title {
          font-size: 13px;
          font-weight: 500;
        }

        .letter-date {
          font-size: 11px;
          color: var(--bp-text-muted);
        }

        .letter-status {
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 4px;
        }

        .letter-status.sent {
          background: rgba(16, 185, 129, 0.2);
          color: #10b981;
        }

        .letter-status.draft {
          background: rgba(245, 158, 11, 0.2);
          color: #f59e0b;
        }

        /* Jitsi Video - Meeting Items */
        .meeting-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          border-radius: 6px;
          background: rgba(255, 255, 255, 0.03);
          cursor: pointer;
        }

        .meeting-item:hover {
          background: rgba(255, 255, 255, 0.08);
        }

        [data-theme="light"] .meeting-item {
          background: rgba(0, 0, 0, 0.02);
        }

        [data-theme="light"] .meeting-item:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .meeting-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .meeting-title {
          font-size: 12px;
          font-weight: 500;
        }

        .meeting-time {
          font-size: 11px;
          color: var(--bp-text-muted);
        }

        .sidebar-footer {
          margin-top: auto;
          font-size: 11px;
          color: var(--bp-text-muted);
          padding: 0 6px;
        }

        .content {
          padding: 14px 16px 16px 16px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          height: 100%;
          min-height: 0;
          overflow: hidden;
        }

        .panel {
          background: var(--bp-gradient-surface);
          border-radius: 16px;
          border: 1px solid var(--bp-border-subtle);
          padding: 12px 14px;
          display: flex;
          flex-direction: column;
          min-height: 0;
          height: 100%;
          flex: 1;
          overflow: hidden;
          transition: background 0.3s ease, border-color 0.3s ease;
        }

        [data-theme="light"] .panel {
          box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }

        .panel-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
        }

        .panel-title {
          font-size: 18px;
          font-weight: 700;
          color: var(--bp-text);
          margin-bottom: 4px;
        }

        .panel-subtitle {
          font-size: 12px;
          color: var(--bp-text-muted);
          line-height: 1.5;
        }

        .panel-body {
          flex: 1;
          min-height: 0;
          display: flex;
          flex-direction: column;
          gap: 8px;
          overflow: auto;
        }

        .small-pill {
          font-size: 11px;
          font-weight: 600;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          color: var(--bp-text);
          background: var(--bp-surface-elevated);
        }

        .upload-inline {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 10px;
          background: var(--bp-surface-elevated);
          border-radius: 8px;
          border: 1px solid var(--bp-border-subtle);
        }

        [data-theme="light"] .upload-inline {
          background: var(--bp-surface);
          box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
        }

        .upload-inline input[type=file] {
          font-size: 11px;
          padding: 6px;
          background: var(--bp-input-bg);
          border: 1px solid var(--bp-border-subtle);
          border-radius: 6px;
          color: var(--bp-text);
          cursor: pointer;
        }

        .upload-inline input[type=file]::file-selector-button {
          background: var(--bp-accent-soft);
          border: 1px solid var(--bp-accent);
          border-radius: 4px;
          padding: 4px 10px;
          color: var(--bp-accent);
          font-size: 10px;
          font-weight: 600;
          cursor: pointer;
          margin-right: 8px;
        }

        [data-theme="light"] .upload-inline input[type=file]::file-selector-button {
          background: var(--bp-primary-soft);
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        .upload-inline input[type=file]::file-selector-button:hover {
          opacity: 0.8;
        }

        .file-list {
          list-style: none;
          margin: 0;
          padding: 0;
          max-height: 150px;
          overflow-y: auto;
          border-radius: 10px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
        }

        [data-theme="light"] .file-list {
          border-color: var(--bp-primary);
          background: var(--bp-surface);
        }

        .file-item {
          font-size: 12px;
          padding: 8px 10px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          transition: background 0.15s ease;
        }

        .file-item:nth-child(odd) {
          background: var(--bp-surface-elevated);
        }

        [data-theme="light"] .file-item:nth-child(odd) {
          background: rgba(14, 165, 233, 0.03);
        }

        .file-item:hover {
          background: var(--bp-accent-soft);
        }

        [data-theme="light"] .file-item:hover {
          background: var(--bp-primary-soft);
        }

        .file-item.active {
          background: var(--bp-accent-soft);
        }

        .file-item-name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1;
          min-width: 0;
        }

        .file-item-delete {
          font-size: 14px;
          color: #f97316;
          cursor: pointer;
          padding: 4px 6px;
          border-radius: 4px;
          transition: all 0.15s ease;
          flex-shrink: 0;
        }

        .file-item-delete:hover {
          color: #fb923c;
          background: rgba(249,115,22,0.15);
        }

        .file-empty {
          font-size: 12px;
          color: var(--bp-text-muted);
        }

        .inline-process {
          display: flex;
          justify-content: flex-end;
          margin-top: 12px;
          padding-top: 12px;
          border-top: 1px solid rgba(148,163,184,0.2);
        }

        .preview-container {
          flex: 1;
          border-radius: 12px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-gradient-sidebar);
          overflow: hidden;
          display: flex;
          align-items: stretch;
          justify-content: center;
          position: relative;
          min-height: 750px;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .preview-container {
          background: var(--bp-bg);
          border: 2px solid var(--bp-primary);
          box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
        }

        .preview-placeholder {
          font-size: 13px;
          color: var(--bp-text-muted);
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 20px;
        }

        .compare-wrapper {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
          gap: 8px;
          width: 100%;
          height: 100%;
          position: relative;
        }

        .compare-section {
          position: relative;
          border-radius: 10px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-gradient-sidebar);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          min-height: 0;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .compare-section {
          border: 2px solid var(--bp-primary);
          box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
        }

        .compare-header {
          padding: 6px 10px;
          font-size: 12px;
          border-bottom: 1px solid var(--bp-border-subtle);
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 6px;
        }

        [data-theme="light"] .compare-header {
          background: var(--bp-primary-soft);
          border-bottom: 1px solid var(--bp-primary);
        }

        .compare-header span {
          color: var(--bp-text-muted);
        }

        [data-theme="light"] .compare-header span {
          color: var(--bp-primary);
          font-weight: 600;
        }

        .compare-body {
          flex: 1;
          min-height: 0;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6px;
        }

        .compare-body-inner {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .preview-img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          box-shadow: 0 18px 40px rgba(0,0,0,0.5);
          border-radius: 10px;
        }

        [data-theme="light"] .preview-img {
          box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15);
        }

        .clean-frame {
          width: 100%;
          height: 100%;
          border: none;
          border-radius: 10px;
          background: white;
        }

        .preview-nav {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          pointer-events: none;
          padding: 0 4px;
        }

        .preview-nav button {
          pointer-events: auto;
          width: 28px;
          height: 28px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          cursor: pointer;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
        }

        [data-theme="light"] .preview-nav button {
          border: 2px solid var(--bp-primary);
          background: var(--bp-surface);
          color: var(--bp-primary);
          font-weight: 700;
        }

        .preview-nav button:hover:not(:disabled) {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        [data-theme="light"] .preview-nav button:hover:not(:disabled) {
          background: var(--bp-primary);
          color: white;
        }

        .preview-nav button:disabled {
          opacity: 0.35;
          cursor: default;
        }

        .preview-nav span {
          position: absolute;
          bottom: 6px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 11px;
          padding: 2px 8px;
          border-radius: 999px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
        }

        [data-theme="light"] .preview-nav span {
          background: var(--bp-surface);
          border: 1px solid var(--bp-primary);
          color: var(--bp-primary);
        }

        .preview-thumbnails {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 8px 4px;
          overflow-y: auto;
          align-items: center;
        }

        .preview-thumb {
          min-width: 90px;
          width: 90px;
          height: 70px;
          border-radius: 8px;
          border: 2px solid rgba(148,163,184,0.25);
          background: rgba(15,23,42,0.5);
          cursor: pointer;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          flex-shrink: 0;
        }

        .preview-thumb:hover {
          border-color: var(--bp-accent);
        }

        .preview-thumb.active {
          border-color: var(--bp-accent);
          border-width: 3px;
        }

        .preview-thumb img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .preview-thumb-label {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          font-size: 9px;
          padding: 2px;
          background: rgba(0,0,0,0.8);
          color: white;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

.pager {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 11px;
}

        .pager button {
          width: 24px;
          height: 24px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .pager button:hover {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        [data-theme="light"] .pager button {
          border: 2px solid var(--bp-primary);
          background: var(--bp-surface);
          color: var(--bp-primary);
          font-weight: 700;
        }

        [data-theme="light"] .pager button:hover {
          background: var(--bp-primary);
          color: white;
        }

        .status-bar {
          position: fixed;
          right: 18px;
          bottom: 18px;
          padding: 8px 12px;
          border-radius: 999px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          min-width: 230px;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .status-bar {
          background: var(--bp-surface);
          border: 2px solid var(--bp-primary);
          box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15);
        }

        .status-dot {
          width: 10px;
          height: 10px;
          border-radius: 999px;
          background: var(--bp-text-muted);
        }

        .status-dot.busy {
          background: var(--bp-accent);
        }

        .status-dot.error {
          background: var(--bp-danger);
        }

        .status-text-main {
          font-size: 12px;
        }

        .status-text-sub {
          font-size: 11px;
          color: var(--bp-text-muted);
        }

        .footer {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          font-size: 11px;
          color: var(--bp-text-muted);
          border-top: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          transition: background 0.3s ease;
        }

        .footer a {
          color: var(--bp-text-muted);
          text-decoration: none;
        }

        .footer a:hover {
          text-decoration: underline;
        }

        .btn {
          font-size: 13px;
          font-weight: 500;
          padding: 8px 16px;
          border-radius: 8px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .btn:hover:not(:disabled) {
          border-color: var(--bp-primary);
          transform: translateY(-1px);
        }

        .btn-primary {
          border-color: var(--bp-accent);
          background: var(--bp-btn-primary-bg);
          color: white;
        }

        .btn-primary:hover:not(:disabled) {
          background: var(--bp-btn-primary-hover);
          box-shadow: 0 4px 12px rgba(34,197,94,0.3);
        }

        [data-theme="light"] .btn-primary:hover:not(:disabled) {
          box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        }

        .btn-ghost {
          background: transparent;
        }

        .btn-ghost:hover:not(:disabled) {
          background: var(--bp-surface-elevated);
        }

        [data-theme="light"] .btn-ghost {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        [data-theme="light"] .btn-ghost:hover:not(:disabled) {
          background: var(--bp-primary-soft);
        }

        .btn-sm {
          padding: 6px 12px;
          font-size: 12px;
        }

        .btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .panel-tools-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 6px;
        }

        .card-toggle-bar {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-bottom: 8px;
        }

        .toggle-pill {
          font-size: 11px;
          padding: 4px 8px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          color: var(--bp-text-muted);
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .toggle-pill.active {
          border-color: var(--bp-accent);
          color: var(--bp-accent);
          background: var(--bp-accent-soft);
        }

        [data-theme="light"] .toggle-pill.active {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
          background: var(--bp-primary-soft);
        }

.cards-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  min-height: 0;
  align-items: stretch;
}

        .card {
          border-radius: 14px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-card-bg);
          padding: 10px;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          min-height: 0;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .card {
          border: 2px solid var(--bp-primary);
          box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
        }

        [data-theme="light"] .card:hover {
          box-shadow: 0 6px 28px rgba(14, 165, 233, 0.2);
          transform: translateY(-2px);
        }

        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 6px;
        }

        [data-theme="light"] .card-header {
          border-bottom: 1px solid var(--bp-border-subtle);
          padding-bottom: 8px;
          margin-bottom: 10px;
        }

        .card-title {
          font-size: 13px;
          font-weight: 500;
        }

        [data-theme="light"] .card-title {
          font-size: 15px;
          font-weight: 700;
          color: var(--bp-text);
          letter-spacing: -0.02em;
        }

        .card-badge {
          font-size: 10px;
          border-radius: 999px;
          padding: 2px 7px;
          border: 1px solid var(--bp-border-subtle);
          color: var(--bp-text-muted);
        }

        [data-theme="light"] .card-badge {
          background: linear-gradient(135deg, var(--bp-primary) 0%, var(--bp-accent) 100%);
          color: white;
          border: none;
          font-weight: 600;
          padding: 4px 10px;
        }

        .card-body {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 5px;
          font-size: 11px;
          color: var(--bp-text-muted);
        }

        [data-theme="light"] .card-body {
          font-size: 12px;
          line-height: 1.6;
        }

        .card-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 8px;
        }

        .card-hidden {
          display: none;
        }

        .card-full {
          grid-column: 1 / -1;
          min-height: 220px;
        }

        /* Vollbild-Overlay für Doppelklick */
        .lightbox {
          position: fixed;
          inset: 0;
          background: rgba(15,23,42,0.96);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 40;
        }

        .lightbox.hidden {
          display: none;
        }

        .lightbox-inner {
          position: relative;
          max-width: 96vw;
          max-height: 96vh;
        }

        .lightbox-img {
          max-width: 96vw;
          max-height: 96vh;
          object-fit: contain;
          border-radius: 12px;
          box-shadow: 0 20px 45px rgba(0,0,0,0.7);
        }

        .lightbox-close {
          position: absolute;
          top: -32px;
          right: 0;
          font-size: 11px;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid rgba(148,163,184,0.6);
          background: rgba(15,23,42,0.9);
          color: var(--bp-text);
          cursor: pointer;
        }

        .lightbox-caption {
          margin-top: 6px;
          font-size: 11px;
          color: var(--bp-text-muted);
          text-align: center;
        }

        /* Lerneinheiten-Projektleiste im Sidebar */
        .unit-form {
          margin-top: 12px;
          padding: 12px 10px;
          border-radius: 10px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
          display: flex;
          flex-direction: column;
          gap: 8px;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .unit-form {
          background: var(--bp-surface);
          border: 2px solid var(--bp-primary);
          box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1);
        }

        .unit-form-row {
          display: flex;
          gap: 6px;
        }

        .unit-input {
          flex: 1;
          border-radius: 8px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-bg);
          color: var(--bp-text);
          font-size: 12px;
          padding: 8px 10px;
          transition: border-color 0.2s ease;
        }

        [data-theme="light"] .unit-input {
          background: var(--bp-surface);
          border: 1px solid var(--bp-border);
        }

        .unit-input:focus {
          outline: none;
          border-color: var(--bp-primary);
        }

        .unit-input::placeholder {
          color: var(--bp-text-muted);
        }

        .unit-list {
          margin: 8px 0 0 0;
          padding: 0 2px;
          max-height: 160px;
          overflow-y: auto;
          list-style: none;
        }

        .unit-item {
          font-size: 12px;
          padding: 8px 10px;
          border-radius: 8px;
          cursor: pointer;
          color: var(--bp-text);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          transition: all 0.15s ease;
          margin-bottom: 4px;
        }

        .unit-item:hover {
          background: var(--bp-surface-elevated);
        }

        [data-theme="light"] .unit-item:hover {
          background: var(--bp-primary-soft);
        }

        .unit-item.active {
          background: var(--bp-surface-elevated);
          color: var(--bp-accent);
          border: 1px solid var(--bp-accent);
          font-weight: 600;
        }

        [data-theme="light"] .unit-item.active {
          background: var(--bp-primary-soft);
          color: var(--bp-primary);
          border: 2px solid var(--bp-primary);
        }

        .unit-item-meta {
          font-size: 10px;
          color: var(--bp-text-muted);
          margin-top: 2px;
        }

        .btn-unit-add {
          align-self: flex-end;
        }

        /* MC Preview Styles */
        .mc-preview {
          margin-top: 8px;
          max-height: 300px;
          overflow-y: auto;
        }

        .mc-question {
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
          border-radius: 8px;
          padding: 10px;
          margin-bottom: 8px;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .mc-question {
          background: var(--bp-surface);
          border: 1px solid var(--bp-primary);
          box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
        }

        .mc-question-text {
          font-size: 12px;
          font-weight: 500;
          margin-bottom: 8px;
          color: var(--bp-text);
        }

        .mc-options {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .mc-option {
          font-size: 11px;
          padding: 6px 10px;
          border-radius: 6px;
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
          cursor: pointer;
          transition: all 0.15s ease;
        }

        [data-theme="light"] .mc-option {
          background: var(--bp-bg);
          border: 1px solid var(--bp-border);
        }

        .mc-option:hover {
          background: var(--bp-accent-soft);
          border-color: var(--bp-accent);
        }

        [data-theme="light"] .mc-option:hover {
          background: var(--bp-primary-soft);
          border-color: var(--bp-primary);
        }

        .mc-option.selected {
          background: var(--bp-accent-soft);
          border-color: var(--bp-accent);
        }

        [data-theme="light"] .mc-option.selected {
          background: var(--bp-primary-soft);
          border-color: var(--bp-primary);
        }

        .mc-option.correct {
          background: rgba(90, 191, 96, 0.2);
          border-color: var(--bp-accent);
        }

        .mc-option.incorrect {
          background: rgba(108, 27, 27, 0.2);
          border-color: rgba(239,68,68,0.6);
        }

        .mc-option-label {
          font-weight: 600;
          margin-right: 6px;
          text-transform: uppercase;
        }

        .mc-feedback {
          margin-top: 8px;
          font-size: 11px;
          padding: 6px 8px;
          border-radius: 6px;
          background: rgba(34,197,94,0.1);
          border: 1px solid rgba(34,197,94,0.3);
          color: var(--bp-accent);
        }

        .mc-stats {
          display: flex;
          gap: 12px;
          margin-top: 8px;
          padding: 8px;
          background: var(--bp-surface-elevated);
          border-radius: 6px;
          font-size: 11px;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .mc-stats {
          background: var(--bp-bg);
          border: 1px solid var(--bp-border);
        }

        .mc-stats-item {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .mc-modal {
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.85);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 50;
        }

        .mc-modal.hidden {
          display: none;
        }

        .mc-modal-content {
          background: var(--bp-bg);
          border: 1px solid var(--bp-border-subtle);
          border-radius: 16px;
          padding: 20px;
          max-width: 600px;
          width: 90%;
          max-height: 80vh;
          overflow-y: auto;
        }

        [data-theme="light"] .mc-modal-content {
          background: var(--bp-surface);
          border: 2px solid var(--bp-primary);
          box-shadow: 0 8px 32px rgba(14, 165, 233, 0.2);
        }

        .mc-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
        }

        .mc-modal-title {
          font-size: 18px;
          font-weight: 600;
        }

        .mc-modal-close {
          font-size: 11px;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          cursor: pointer;
        }

        [data-theme="light"] .mc-modal-close {
          border: 1px solid var(--bp-primary);
          background: var(--bp-surface);
          color: var(--bp-primary);
        }

        [data-theme="light"] .mc-modal-close:hover {
          background: var(--bp-primary);
          color: white;
        }

        /* Cloze / Lückentext Styles */
        .cloze-preview {
          margin-top: 8px;
          max-height: 250px;
          overflow-y: auto;
        }

        .cloze-item {
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
          border-radius: 8px;
          padding: 10px;
          margin-bottom: 8px;
          transition: all 0.3s ease;
        }

        [data-theme="light"] .cloze-item {
          background: var(--bp-surface);
          border: 1px solid var(--bp-primary);
          box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
        }

        .cloze-sentence {
          font-size: 13px;
          line-height: 1.8;
          color: var(--bp-text);
        }

        .cloze-gap {
          display: inline-block;
          min-width: 60px;
          border-bottom: 2px solid var(--bp-accent);
          margin: 0 2px;
          padding: 2px 4px;
          text-align: center;
          background: var(--bp-accent-soft);
          border-radius: 4px 4px 0 0;
        }

        [data-theme="light"] .cloze-gap {
          border-bottom-color: var(--bp-primary);
          background: var(--bp-primary-soft);
        }

        .cloze-gap-input {
          width: 80px;
          padding: 4px 8px;
          font-size: 12px;
          border: 1px solid var(--bp-border-subtle);
          border-radius: 4px;
          background: var(--bp-surface-elevated);
          color: var(--bp-text);
          text-align: center;
        }

        [data-theme="light"] .cloze-gap-input {
          background: var(--bp-surface);
          border: 1px solid var(--bp-border);
        }

        .cloze-gap-input:focus {
          outline: none;
          border-color: var(--bp-primary);
        }

        .cloze-gap-input.correct {
          border-color: var(--bp-accent);
          background: rgba(90, 191, 96, 0.2);
        }

        .cloze-gap-input.incorrect {
          border-color: var(--bp-danger);
          background: rgba(108, 27, 27, 0.2);
        }

        .cloze-translation {
          margin-top: 8px;
          padding: 8px;
          background: var(--bp-accent-soft);
          border: 1px solid var(--bp-accent);
          border-radius: 6px;
          font-size: 11px;
          color: var(--bp-text-muted);
        }

        [data-theme="light"] .cloze-translation {
          background: var(--bp-primary-soft);
          border: 1px solid var(--bp-primary);
        }

        .cloze-translation-label {
          font-size: 10px;
          color: var(--bp-text-muted);
          margin-bottom: 4px;
        }

        .cloze-hint {
          font-size: 10px;
          color: var(--bp-text-muted);
          font-style: italic;
          margin-top: 4px;
        }

        .cloze-stats {
          display: flex;
          gap: 12px;
          padding: 8px;
          background: var(--bp-surface-elevated);
          border-radius: 6px;
          font-size: 11px;
          margin-bottom: 8px;
        }

        [data-theme="light"] .cloze-stats {
          background: var(--bp-bg);
          border: 1px solid var(--bp-border);
        }

        .cloze-feedback {
          margin-top: 6px;
          font-size: 11px;
          padding: 4px 8px;
          border-radius: 4px;
        }

        .cloze-feedback.correct {
          background: rgba(34,197,94,0.15);
          color: var(--bp-accent);
        }

        .cloze-feedback.incorrect {
          background: rgba(239,68,68,0.15);
          color: #ef4444;
        }

        /* Language Selector */
        .language-selector {
          margin-right: 8px;
        }

        .lang-select {
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border-subtle);
          border-radius: 6px;
          color: var(--bp-text);
          padding: 6px 10px;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        [data-theme="light"] .lang-select {
          background: var(--bp-surface);
          border: 1px solid var(--bp-primary);
          color: var(--bp-text);
        }

        .lang-select:hover {
          border-color: var(--bp-primary);
        }

        .lang-select:focus {
          outline: none;
          border-color: var(--bp-primary);
        }

        [data-theme="light"] .lang-select option {
          background: var(--bp-surface);
          color: var(--bp-text);
        }

        /* RTL Support for Arabic */
        [dir="rtl"] .sidebar {
          border-right: none;
          border-left: 1px solid rgba(148,163,184,0.2);
        }

        [dir="rtl"] .main-layout {
          direction: rtl;
        }

        [dir="rtl"] .card-actions {
          flex-direction: row-reverse;
        }

        /* ==========================================
           RICH TEXT EDITOR STYLES
           ========================================== */
        .editor-container {
          border: 1px solid var(--bp-border);
          border-radius: 8px;
          background: var(--bp-surface-elevated);
          overflow: hidden;
        }

        .editor-toolbar {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          padding: 8px 12px;
          border-bottom: 1px solid var(--bp-border);
          background: var(--bp-surface);
        }

        .editor-toolbar-group {
          display: flex;
          gap: 2px;
          padding-right: 8px;
          margin-right: 8px;
          border-right: 1px solid var(--bp-border);
        }

        .editor-toolbar-group:last-child {
          border-right: none;
          margin-right: 0;
          padding-right: 0;
        }

        .editor-btn {
          padding: 6px 10px;
          border: none;
          background: transparent;
          color: var(--bp-text);
          cursor: pointer;
          border-radius: 4px;
          font-size: 13px;
          font-weight: 500;
          transition: all 0.2s ease;
          min-width: 32px;
        }

        .editor-btn:hover {
          background: var(--bp-border-subtle);
        }

        .editor-btn.active {
          background: var(--bp-primary);
          color: white;
        }

        .editor-btn-upload {
          background: var(--bp-primary);
          color: white;
          padding: 6px 12px;
        }

        .editor-btn-upload:hover {
          filter: brightness(1.1);
        }

        .editor-content {
          min-height: 300px;
          max-height: 500px;
          overflow-y: auto;
          padding: 16px;
          color: var(--bp-text);
          line-height: 1.6;
        }

        .editor-content:focus {
          outline: none;
        }

        .editor-content[contenteditable="true"] {
          cursor: text;
        }

        .editor-content h1 {
          font-size: 24px;
          font-weight: 700;
          margin: 0 0 16px 0;
        }

        .editor-content h2 {
          font-size: 20px;
          font-weight: 600;
          margin: 24px 0 12px 0;
        }

        .editor-content h3 {
          font-size: 17px;
          font-weight: 600;
          margin: 20px 0 10px 0;
        }

        .editor-content p {
          margin: 0 0 12px 0;
        }

        .editor-content ul, .editor-content ol {
          margin: 0 0 12px 0;
          padding-left: 24px;
        }

        .editor-content li {
          margin-bottom: 4px;
        }

        .editor-content strong {
          font-weight: 600;
        }

        .editor-content em {
          font-style: italic;
        }

        .editor-content a {
          color: var(--bp-primary);
          text-decoration: underline;
        }

        .editor-content blockquote {
          border-left: 3px solid var(--bp-primary);
          margin: 16px 0;
          padding: 8px 16px;
          background: var(--bp-surface);
          font-style: italic;
        }

        .editor-content hr {
          border: none;
          border-top: 1px solid var(--bp-border);
          margin: 20px 0;
        }

        [data-theme="light"] .editor-container {
          border-color: var(--bp-border);
        }

        [data-theme="light"] .editor-toolbar {
          background: var(--bp-bg);
          border-color: var(--bp-border);
        }

        [data-theme="light"] .editor-content {
          background: var(--bp-surface);
        }

        .word-upload-input {
          display: none;
        }

        .editor-status {
          padding: 8px 12px;
          font-size: 12px;
          color: var(--bp-text-muted);
          border-top: 1px solid var(--bp-border);
          background: var(--bp-surface);
        }

        /* ==========================================
           Communication Panel Styles (Matrix + Jitsi)
           ========================================== */

        /* Room List Styles */
        .room-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border-radius: 8px;
          cursor: pointer;
          transition: background 0.2s;
        }

        .room-item:hover {
          background: var(--bp-surface-elevated);
        }

        .room-item.active {
          background: var(--bp-primary-soft);
          border-left: 3px solid var(--bp-primary);
        }

        .room-icon {
          font-size: 20px;
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--bp-surface-elevated);
          border-radius: 8px;
        }

        .room-info {
          flex: 1;
          min-width: 0;
        }

        .room-name {
          font-weight: 500;
          font-size: 13px;
          color: var(--bp-text);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .room-preview {
          font-size: 11px;
          color: var(--bp-text-muted);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .room-badge {
          background: var(--bp-primary);
          color: white;
          font-size: 10px;
          font-weight: 600;
          padding: 2px 6px;
          border-radius: 10px;
          min-width: 18px;
          text-align: center;
        }

        /* Chat Message Styles */
        .chat-system-msg {
          text-align: center;
          padding: 8px 16px;
          background: var(--bp-surface-elevated);
          border-radius: 8px;
          font-size: 12px;
          color: var(--bp-text-muted);
        }

        .chat-msg {
          padding: 12px 16px;
          border-radius: 12px;
          max-width: 85%;
        }

        .chat-msg-self {
          background: var(--bp-primary-soft);
          border: 1px solid var(--bp-border-subtle);
          margin-left: auto;
        }

        .chat-msg-other {
          background: var(--bp-surface-elevated);
          border: 1px solid var(--bp-border);
        }

        .chat-msg-notification {
          background: rgba(239, 68, 68, 0.1);
          border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .chat-msg-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
        }

        .chat-msg-sender {
          font-weight: 600;
          font-size: 12px;
          color: var(--bp-primary);
        }

        .chat-msg-time {
          font-size: 10px;
          color: var(--bp-text-muted);
        }

        .chat-msg-content {
          font-size: 13px;
          line-height: 1.5;
          color: var(--bp-text);
        }

        .chat-msg-actions {
          display: flex;
          gap: 6px;
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid var(--bp-border);
        }

        /* Button danger variant */
        .btn-danger {
          background: #ef4444 !important;
          color: white !important;
        }

        .btn-danger:hover {
          background: #dc2626 !important;
        }