:root {
            /* Light Theme (Default) */
            --bg-primary: #f5f5f5;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-input: #ffffff;
            --bg-hover: #f0f0f0;
            --text-primary: #333333;
            --text-secondary: #666666;
            --text-muted: #888888;
            --accent: #3498db;
            --accent-hover: #2980b9;
            --header-bg: #2c3e50;
            --header-text: #ffffff;
            --border: #e0e0e0;
            --success: #27ae60;
            --warning: #f39c12;
            --danger: #e74c3c;
            --info: #3498db;
            --shadow: rgba(0,0,0,0.08);
        }

        [data-theme="dark"] {
            --bg-primary: #1a1a2e;
            --bg-secondary: #16213e;
            --bg-card: #1f2940;
            --bg-input: #2a3a5a;
            --bg-hover: #2a3a5a;
            --text-primary: #eaeaea;
            --text-secondary: #b0b0b0;
            --text-muted: #707070;
            --accent: #5865f2;
            --accent-hover: #4752c4;
            --header-bg: #0f0f23;
            --header-text: #ffffff;
            --border: #3a3a5a;
            --success: #3ba55c;
            --warning: #faa61a;
            --danger: #ed4245;
            --info: #5865f2;
            --shadow: rgba(0,0,0,0.3);
        }

        [data-theme="ocean"] {
            --bg-primary: #e8f4f8;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-input: #ffffff;
            --bg-hover: #d4e9f0;
            --text-primary: #1a3a4a;
            --text-secondary: #3a6a7a;
            --text-muted: #6a9aaa;
            --accent: #0077b6;
            --accent-hover: #005a8a;
            --header-bg: #023e8a;
            --header-text: #ffffff;
            --border: #b8d4e0;
            --success: #06d6a0;
            --warning: #ffc107;
            --danger: #ef476f;
            --info: #118ab2;
            --shadow: rgba(0,119,182,0.1);
        }

        [data-theme="forest"] {
            --bg-primary: #f0f5f0;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-input: #ffffff;
            --bg-hover: #e0ebe0;
            --text-primary: #1a3a1a;
            --text-secondary: #3a5a3a;
            --text-muted: #6a8a6a;
            --accent: #2d6a4f;
            --accent-hover: #1b4332;
            --header-bg: #1b4332;
            --header-text: #ffffff;
            --border: #b7d7b0;
            --success: #40916c;
            --warning: #e9c46a;
            --danger: #bc4749;
            --info: #2a9d8f;
            --shadow: rgba(45,106,79,0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            transition: all 0.3s ease;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .app-layout {
            display: flex;
            min-height: calc(100vh - 70px);
        }

        /* Header */
        header {
            background: var(--header-bg);
            color: var(--header-text);
            padding: 15px 0;
            box-shadow: 0 2px 4px var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        header h1 {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-info {
            font-size: 14px;
            text-align: right;
        }

        .user-info .username {
            font-weight: bold;
        }

        .user-info .role {
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            margin-top: 5px;
            display: inline-block;
        }

        /* Theme Selector */
        .theme-selector {
            display: flex;
            gap: 6px;
        }

        .theme-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.3);
            cursor: pointer;
            transition: all 0.2s;
        }

        .theme-btn:hover {
            transform: scale(1.1);
        }

        .theme-btn.active {
            border-color: white;
            box-shadow: 0 0 8px rgba(255,255,255,0.5);
        }

        .theme-btn[data-theme="light"] { background: linear-gradient(135deg, #f5f5f5, #3498db); }
        .theme-btn[data-theme="dark"] { background: linear-gradient(135deg, #1a1a2e, #5865f2); }
        .theme-btn[data-theme="ocean"] { background: linear-gradient(135deg, #e8f4f8, #0077b6); }
        .theme-btn[data-theme="forest"] { background: linear-gradient(135deg, #f0f5f0, #2d6a4f); }

        /* Login Screen */
        .login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, var(--header-bg) 0%, var(--accent) 100%);
        }

        .login-card {
            background: var(--bg-card);
            padding: 40px;
            border-radius: 12px;
            text-align: center;
            max-width: 400px;
            width: 100%;
            box-shadow: 0 10px 40px var(--shadow);
        }

        .login-card h2 {
            margin-bottom: 8px;
            color: var(--text-primary);
        }

        .login-card p {
            color: var(--text-secondary);
            margin-bottom: 24px;
        }

        .btn-discord {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #5865f2;
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.2s;
            width: 100%;
        }

        .btn-discord:hover {
            background: #4752c4;
        }

        .error-message {
            background: #ffe6e6;
            color: #c0392b;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        /* Sidebar */
        .sidebar {
            width: 200px;
            min-width: 200px;
            background: var(--bg-card);
            border-right: 1px solid var(--border);
            padding: 12px 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            overflow-y: auto;
            position: sticky;
            top: 70px;
            height: calc(100vh - 70px);
        }

        .sidebar-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            padding: 12px 10px 4px;
        }

        .tab-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: none;
            color: var(--text-primary);
            padding: 9px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.15s;
            text-align: left;
            width: 100%;
            white-space: nowrap;
        }

        .tab-btn:hover {
            background: var(--bg-hover);
        }

        .tab-btn.active {
            background: var(--accent);
            color: white;
        }

        .main-content {
            flex: 1;
            min-width: 0;
            padding: 20px;
        }

        /* Cards */
        .tab-content {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px var(--shadow);
            margin-bottom: 20px;
            display: none;
        }

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

        /* Forms */
        .form-row {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .form-group {
            flex: 1;
            min-width: 200px;
        }

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

        .form-input, .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            background: var(--bg-input);
            color: var(--text-primary);
            transition: border-color 0.2s;
        }

        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: var(--accent);
        }

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

        /* Searchable Select */
        .searchable-select {
            position: relative;
        }

        .searchable-select-input {
            cursor: pointer;
        }

        .searchable-select-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            margin-top: 4px;
            max-height: 250px;
            overflow-y: auto;
            z-index: 100;
            display: none;
            box-shadow: 0 4px 12px var(--shadow);
        }

        .searchable-select-dropdown.open {
            display: block;
        }

        .searchable-select-search {
            padding: 8px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--bg-card);
        }

        .searchable-select-search input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 13px;
            background: var(--bg-input);
            color: var(--text-primary);
        }

        .searchable-select-option {
            padding: 10px 12px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
        }

        .searchable-select-option:hover {
            background: var(--bg-hover);
        }

        .searchable-select-empty {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* Autocomplete */
        .autocomplete {
            position: relative;
        }

        .autocomplete-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            margin-top: 4px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 100;
            display: none;
            box-shadow: 0 4px 12px var(--shadow);
        }

        .autocomplete-suggestions.open {
            display: block;
        }

        .autocomplete-item {
            padding: 10px 12px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
        }

        .autocomplete-item:hover, .autocomplete-item.active {
            background: var(--bg-hover);
        }

        .autocomplete-hint {
            padding: 8px 12px;
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg-hover);
            border-bottom: 1px solid var(--border);
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

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

        .btn-primary:hover {
            background: var(--accent-hover);
        }

        .btn-success {
            background: var(--success);
            color: white;
        }

        .btn-success:hover {
            opacity: 0.9;
        }

        .btn-danger {
            background: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            opacity: 0.9;
        }

        .btn-secondary {
            background: var(--text-muted);
            color: white;
        }

        .perm-sub-tab.active, .member-sub-tab.active {
            background: var(--primary);
            color: white;
        }

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

        /* Table */
        .table-container {
            overflow-x: auto;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

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

        .table th {
            font-size: 12px;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 600;
            background: var(--bg-hover);
        }

        .table th.sortable {
            cursor: pointer;
            user-select: none;
            position: relative;
            padding-right: 22px;
        }

        .table th.sortable:hover {
            color: var(--text-primary);
        }

        .table th.sortable::after {
            content: '⇅';
            position: absolute;
            right: 6px;
            opacity: 0.3;
            font-size: 11px;
        }

        .table th.sortable.sort-asc::after {
            content: '▲';
            opacity: 0.8;
        }

        .table th.sortable.sort-desc::after {
            content: '▼';
            opacity: 0.8;
        }

        .table tr:hover td {
            background: var(--bg-hover);
        }

        /* Audit Log clickable rows */
        .audit-row-clickable:hover td {
            background: var(--bg-hover);
            cursor: pointer;
        }
        .audit-detail-row td {
            padding: 0 !important;
            border-top: none !important;
        }
        .audit-detail-box {
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-left: 3px solid var(--accent);
            margin: 0 8px 8px 8px;
            border-radius: 0 6px 6px 0;
        }

        /* Badges */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .badge-success {
            background: rgba(39, 174, 96, 0.15);
            color: var(--success);
        }

        .badge-warning {
            background: rgba(243, 156, 18, 0.15);
            color: var(--warning);
        }

        .badge-danger {
            background: rgba(231, 76, 60, 0.15);
            color: var(--danger);
        }

        .badge-info {
            background: rgba(52, 152, 219, 0.15);
            color: var(--info);
        }

        /* Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: var(--bg-card);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px var(--shadow);
            text-align: center;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px var(--shadow);
            border-color: var(--accent);
        }

        .stat-card:active {
            transform: translateY(0);
        }

        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--accent);
        }

        .stat-label {
            color: var(--text-muted);
            font-size: 13px;
            margin-top: 4px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }

        /* Toast */
        .toast-container {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 1000;
        }

        .toast {
            background: var(--bg-card);
            color: var(--text-primary);
            padding: 14px 20px;
            border-radius: 8px;
            margin-top: 8px;
            box-shadow: 0 4px 12px var(--shadow);
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideIn 0.3s ease;
            border: 1px solid var(--border);
        }

        .toast.success { border-left: 4px solid var(--success); }
        .toast.error { border-left: 4px solid var(--danger); }
        .toast.warning { border-left: 4px solid var(--warning); }
        .toast.info { border-left: 4px solid var(--primary); }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* Hidden */
        .hidden {
            display: none !important;
        }

        /* Channel Config */
        .channel-config {
            display: flex;
            gap: 12px;
            align-items: flex-end;
            padding: 12px;
            background: var(--bg-hover);
            border-radius: 8px;
            margin-bottom: 16px;
        }

        .channel-config .form-group {
            flex: 1;
            margin: 0;
        }

        /* Section Header */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .section-header h3 {
            font-size: 18px;
            color: var(--text-primary);
        }

        /* Role-based visibility */
        body[data-role="user"] .admin-only {
            display: none !important;
        }

        /* Hamburger Button (mobile only) */
        .hamburger-btn {
            display: none;
            background: none;
            border: none;
            color: var(--header-text);
            font-size: 26px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            line-height: 1;
        }
        .hamburger-btn:hover { background: rgba(255,255,255,0.15); }

        /* Sidebar Overlay (mobile) */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 199;
        }
        .sidebar-overlay.active { display: block; }

        /* Responsive */
        @media (max-width: 768px) {
            /* Header */
            .hamburger-btn { display: block; }
            header { padding: 10px 0; }
            header h1 { font-size: 18px; }
            .header-content { gap: 8px; }
            .header-right { gap: 10px; }
            .theme-selector { gap: 4px; }
            .theme-btn { width: 24px; height: 24px; }
            .user-info { font-size: 12px; }
            .user-info .role { font-size: 11px; padding: 2px 8px; }

            /* Sidebar → Drawer */
            .sidebar {
                position: fixed;
                top: 0;
                left: -280px;
                width: 260px;
                min-width: 260px;
                height: 100vh;
                z-index: 200;
                transition: left 0.3s ease;
                border-right: 1px solid var(--border);
                box-shadow: 4px 0 20px rgba(0,0,0,0.3);
                padding-top: 16px;
            }
            .sidebar.open { left: 0; }
            .sidebar-label { display: block; }

            /* Layout */
            .app-layout { flex-direction: column; }
            .main-content { padding: 12px 8px; }

            /* Forms */
            .form-row { flex-direction: column; gap: 8px; }
            .form-group { min-width: 100% !important; flex: unset !important; }
            .form-group[style*="flex: 0 0 auto"] { align-self: stretch !important; }
            .form-group .btn,
            .form-row > .btn { width: 100%; justify-content: center; }
            .form-input, .form-select { padding: 12px; font-size: 16px; }

            /* Buttons - Larger tap targets */
            .btn { padding: 12px 16px; font-size: 14px; min-height: 44px; }
            .btn-sm { padding: 8px 12px; font-size: 13px; min-height: 38px; }

            /* Channel Config */
            .channel-config { flex-direction: column; align-items: stretch; }
            .channel-config .btn { width: 100%; justify-content: center; }

            /* Tables */
            .table th, .table td { padding: 8px 6px; font-size: 12px; }
            .table th { font-size: 10px; }
            .table th.sortable {
                padding: 12px 24px 12px 6px;
                min-height: 44px;
                font-size: 11px;
                -webkit-tap-highlight-color: rgba(255,255,255,0.1);
            }
            .table th.sortable::after {
                right: 4px;
                font-size: 10px;
            }
            .table th.sortable:active {
                background: var(--bg-hover);
            }

            /* Stats */
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .stat-card { padding: 14px 10px; }
            .stat-value { font-size: 24px; }
            .stat-label { font-size: 11px; }

            /* Section Header */
            .section-header h3 { font-size: 16px; }

            /* Tab content cards */
            .tab-content { padding: 14px 12px; border-radius: 8px; margin-bottom: 12px; }

            /* Toast */
            .toast-container { left: 12px; right: 12px; bottom: 12px; }
            .toast { font-size: 13px; padding: 12px 14px; }

            /* Modals */
            .modal-content { width: 95%; padding: 16px; max-height: 90vh; }
            .modal-header h3 { font-size: 16px; }

            /* Sub-tabs */
            .perm-sub-tab, .member-sub-tab { padding: 8px 12px; font-size: 12px; }

            /* Searchable Select */
            .searchable-select-dropdown { max-height: 200px; }
            .searchable-select-option { padding: 12px; font-size: 14px; }

            /* Empty states */
            .empty-state { padding: 20px; font-size: 13px; }

            /* Badge */
            .badge { font-size: 11px; padding: 3px 8px; }
        }

        /* Extra small screens */
        @media (max-width: 400px) {
            .stats-grid { grid-template-columns: 1fr; }
            header h1 { font-size: 16px; }
            .main-content { padding: 8px 4px; }
            .tab-content { padding: 10px 8px; }
        }

        /* Modal */
        .modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal.hidden { display: none !important; }
        .modal-content {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 24px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            border: 1px solid var(--border);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .modal-header h3 { margin: 0; color: var(--text-primary); }

        /* Badge */
        .badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            background: var(--accent);
            color: #fff;
        }
        .badge-danger { background: #e74c3c; }
        .badge-success { background: #27ae60; }
        .badge-warning { background: #f39c12; }

        /* Sub-tab active */
        .sub-tab-btn.active {
            background: var(--accent) !important;
            color: #fff !important;
        }

        /* ========== MAP / KARTE ========== */
        .map-layout {
            display: grid;
            grid-template-columns: minmax(280px, 1fr) 280px;
            gap: 16px;
        }
        .map-grid {
            position: relative;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 5px;
            background: var(--bg-card);
            padding: 12px;
            border-radius: 12px;
            border: 1px solid var(--border);
            min-height: 420px;
        }
        .map-grid.map-grid-full {
            gap: 6px;
            min-height: 520px;
        }
        .map-house {
            background: #3498db;
            border-radius: 6px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #fff;
            cursor: pointer;
            border: 2px solid transparent;
            transition: transform 0.1s, box-shadow 0.15s;
            user-select: none;
        }
        .map-house:hover:not(.orange) {
            transform: scale(1.08);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .map-house.full {
            height: 56px;
            font-size: 10px;
            padding: 4px;
            text-align: center;
            line-height: 1.15;
            flex-direction: column;
            cursor: default;
        }
        .map-house .house-number {
            font-size: 9px;
            opacity: 0.85;
        }
        .map-house .house-owner {
            font-weight: 600;
            word-break: break-word;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 10px;
            line-height: 1.1;
            max-height: 22px;
        }
        .map-house.free {
            background: #bdc3c7;
            color: #2c3e50;
        }
        .map-house.selected {
            background: #2ecc71;
            border-color: #27ae60;
            color: #1f3a2f;
            transform: scale(1.1);
            box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3);
        }
        .map-house.orange {
            background: #e67e22;
            border-color: #d35400;
            color: #fff;
            font-weight: 700;
            cursor: default;
        }
        .map-panel {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 16px;
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 14px;
            height: fit-content;
        }
        .map-panel h4 {
            margin: 0 0 4px;
            font-size: 14px;
            color: var(--text-primary);
        }
        .map-panel .map-selection-info {
            padding: 10px;
            background: var(--bg-main);
            border-radius: 8px;
            font-size: 13px;
            line-height: 1.5;
        }
        .map-member-list {
            max-height: 280px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .map-member-list button {
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            cursor: pointer;
            text-align: left;
            color: var(--text-primary);
        }
        .map-member-list button:hover {
            background: var(--accent);
            color: #fff;
        }
        .map-member-list button.no-house {
            border-left: 3px solid #e74c3c;
        }
        .map-view-toggle {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        @media (max-width: 768px) {
            .map-layout {
                grid-template-columns: 1fr;
            }
            .map-grid {
                gap: 3px;
                padding: 8px;
                min-height: 300px;
            }
            .map-house {
                height: 28px;
                font-size: 9px;
            }
            .map-house.full {
                height: 52px;
                font-size: 8px;
            }
            .map-panel {
                order: 2;
            }
        }

        /* =============================== */
        /* Pipeline / Subway Map View       */
        /* =============================== */
        .pipeline-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .pipeline-row {
            display: flex;
            align-items: flex-start;
            gap: 0;
            background: var(--bg-card);
            border-radius: 10px;
            padding: 14px 16px;
            border: 1px solid var(--border);
            transition: box-shadow 0.2s;
        }
        .pipeline-row:hover {
            box-shadow: 0 2px 12px var(--shadow);
        }
        .pipeline-source {
            min-width: 180px;
            max-width: 220px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-input);
            border-radius: 8px;
            border: 2px solid var(--accent);
            flex-shrink: 0;
        }
        .pipeline-source .flag { font-size: 22px; }
        .pipeline-source .channel-info { font-size: 13px; font-weight: 600; }
        .pipeline-source .channel-info .category {
            font-size: 11px; font-weight: 400; color: var(--text-muted); display: block;
        }
        .pipeline-lines {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 4px 0;
            flex: 1;
        }
        .pipeline-line {
            display: flex;
            align-items: center;
            height: 30px;
        }
        .pipeline-line .pipe {
            width: 60px;
            height: 3px;
            position: relative;
            margin: 0 4px;
            border-radius: 2px;
        }
        .pipeline-line .pipe::after {
            content: '';
            position: absolute;
            right: -5px;
            top: -4px;
            border: 5px solid transparent;
        }
        .pipeline-target {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--bg-input);
            border-radius: 6px;
            font-size: 13px;
            border: 2px solid;
        }
        .pipeline-target .flag { font-size: 16px; }
        .pipeline-target .delete-link {
            margin-left: auto;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
            color: var(--danger);
            font-size: 12px;
        }
        .pipeline-line:hover .delete-link { opacity: 1; }

        /* Pipeline language colors */
        .pipe-de { background: #ffcc00; }
        .pipe-de::after { border-left-color: #ffcc00; }
        .border-de { border-color: #ffcc00; }

        .pipe-en { background: #5865F2; }
        .pipe-en::after { border-left-color: #5865F2; }
        .border-en { border-color: #5865F2; }

        .pipe-fr { background: #ed4245; }
        .pipe-fr::after { border-left-color: #ed4245; }
        .border-fr { border-color: #ed4245; }

        .pipe-es { background: #ff7b00; }
        .pipe-es::after { border-left-color: #ff7b00; }
        .border-es { border-color: #ff7b00; }

        .pipe-tr { background: #e74c3c; }
        .pipe-tr::after { border-left-color: #e74c3c; }
        .border-tr { border-color: #e74c3c; }

        .pipe-ru { background: #3498db; }
        .pipe-ru::after { border-left-color: #3498db; }
        .border-ru { border-color: #3498db; }

        .pipe-it { background: #2ecc71; }
        .pipe-it::after { border-left-color: #2ecc71; }
        .border-it { border-color: #2ecc71; }

        .pipe-pt { background: #1abc9c; }
        .pipe-pt::after { border-left-color: #1abc9c; }
        .border-pt { border-color: #1abc9c; }

        .pipe-pl { background: #e91e63; }
        .pipe-pl::after { border-left-color: #e91e63; }
        .border-pl { border-color: #e91e63; }

        .pipe-nl { background: #ff5722; }
        .pipe-nl::after { border-left-color: #ff5722; }
        .border-nl { border-color: #ff5722; }

        .pipe-sv { background: #00bcd4; }
        .pipe-sv::after { border-left-color: #00bcd4; }
        .border-sv { border-color: #00bcd4; }

        .pipe-da { background: #9c27b0; }
        .pipe-da::after { border-left-color: #9c27b0; }
        .border-da { border-color: #9c27b0; }

        /* Fallback for unknown lang */
        .pipe-unknown { background: var(--text-muted); }
        .pipe-unknown::after { border-left-color: var(--text-muted); }
        .border-unknown { border-color: var(--text-muted); }

        .pipeline-empty {
            text-align: center;
            color: var(--text-muted);
            padding: 40px;
            font-size: 14px;
        }

        /* =============================== */
        /* Kategorie × Sprache Matrix       */
        /* =============================== */
        .cat-matrix-table {
            border-collapse: separate;
            border-spacing: 2px;
        }
        .cat-matrix-table th {
            text-align: center;
            padding: 8px 6px;
            font-size: 12px;
            background: var(--bg-input);
            white-space: nowrap;
        }
        .cat-matrix-table th:first-child {
            text-align: left;
            min-width: 160px;
        }
        .cat-matrix-table th .mat-flag {
            font-size: 18px;
            display: block;
            margin-bottom: 2px;
        }
        .cat-matrix-table td {
            text-align: center;
            padding: 8px;
            border-radius: 4px;
            font-size: 14px;
            cursor: default;
            transition: background 0.15s;
        }
        .cat-matrix-table td:first-child {
            text-align: left;
            font-size: 13px;
            padding-left: 10px;
            cursor: default;
        }
        .mat-has {
            background: color-mix(in srgb, var(--success) 15%, transparent);
            color: var(--success);
        }
        .mat-has:hover {
            background: color-mix(in srgb, var(--success) 25%, transparent);
        }
        .mat-missing {
            background: color-mix(in srgb, var(--danger) 10%, transparent);
            color: var(--danger);
            opacity: 0.7;
        }
        .mat-missing:hover {
            opacity: 1;
        }
        .mat-source {
            background: color-mix(in srgb, var(--accent) 15%, transparent);
            color: var(--accent);
            font-weight: 600;
        }
        .mat-na {
            color: var(--text-muted);
            opacity: 0.3;
        }

        @media (max-width: 768px) {
            .pipeline-source { min-width: 140px; max-width: 160px; font-size: 12px; }
            .pipeline-line .pipe { width: 30px; }
            .pipeline-target { font-size: 12px; padding: 3px 8px; }
            .cat-matrix-table th, .cat-matrix-table td { padding: 5px 3px; font-size: 11px; }
            .cat-matrix-table th .mat-flag { font-size: 14px; }
        }

        /* ====================================================================
         * Permissions: Ampel-Grid (Idee 5)
         * ==================================================================== */

        .perm-legend {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .perm-legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .perm-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        .perm-dot.perm-full { background: #57f287; }
        .perm-dot.perm-view { background: #fee75c; }
        .perm-dot.perm-none { background: #ed4245; }

        /* Grid table */
        .perm-grid-table {
            border-collapse: separate;
            border-spacing: 0;
        }
        .perm-grid-table thead th {
            text-align: center;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            border-bottom: 2px solid var(--border);
        }
        .perm-grid-table thead th:first-child {
            text-align: left;
        }
        .perm-grid-table thead th .perm-role-icon {
            display: block;
            font-size: 18px;
            margin-bottom: 2px;
        }
        .perm-grid-table tbody td {
            text-align: center;
            padding: 0;
            border-bottom: 1px solid var(--border);
        }
        .perm-grid-table tbody td:first-child {
            text-align: left;
            padding: 10px 14px;
            font-weight: 500;
            white-space: nowrap;
        }
        .perm-grid-table tbody tr.perm-feature-group td {
            background: color-mix(in srgb, var(--accent) 6%, transparent);
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 6px 14px !important;
            color: var(--text-muted);
            text-align: left !important;
        }

        /* Clickable permission cells */
        .perm-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 8px;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            user-select: none;
            min-width: 70px;
        }
        .perm-cell:hover {
            background: var(--bg-hover);
            transform: scale(1.05);
        }
        .perm-cell:active {
            transform: scale(0.95);
        }

        .perm-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s;
        }
        .perm-badge.perm-level-full {
            background: color-mix(in srgb, #57f287 20%, transparent);
            color: #57f287;
        }
        .perm-badge.perm-level-view {
            background: color-mix(in srgb, #fee75c 20%, transparent);
            color: #d4a017;
        }
        .perm-badge.perm-level-none {
            background: color-mix(in srgb, #ed4245 15%, transparent);
            color: #ed4245;
        }

        /* Discord Mapping Cards */
        .perm-mapping-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px;
            margin-bottom: 8px;
        }
        .perm-map-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: border-color 0.2s;
        }
        .perm-map-card:hover {
            border-color: var(--accent);
        }
        .perm-map-card .perm-map-arrow {
            font-size: 20px;
            color: var(--text-muted);
        }
        .perm-map-card .perm-map-discord {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            font-size: 14px;
        }
        .perm-map-card .perm-map-discord .perm-map-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        .perm-map-card .perm-map-web {
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
        }
        .perm-map-web.role-owner { background: color-mix(in srgb, #e91e63 18%, transparent); color: #e91e63; }
        .perm-map-web.role-admin { background: color-mix(in srgb, #ff9800 18%, transparent); color: #ff9800; }
        .perm-map-web.role-moderator { background: color-mix(in srgb, #2196f3 18%, transparent); color: #2196f3; }
        .perm-map-web.role-user { background: color-mix(in srgb, #9e9e9e 18%, transparent); color: #9e9e9e; }

        @media (max-width: 768px) {
            .perm-legend { flex-wrap: wrap; gap: 8px; }
            .perm-grid-table thead th { padding: 8px 6px; font-size: 11px; }
            .perm-cell { min-width: 50px; padding: 8px 4px; }
            .perm-badge { padding: 3px 6px; font-size: 10px; }
            .perm-mapping-cards { grid-template-columns: 1fr; }
        }