body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #2c2f33; color: white; margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; }
        
        /* --- HEADER (NAZWA + PRZYCISKI) --- */
        .header { 
            background-color: #23272a; 
            padding: 15px 30px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border-bottom: 2px solid #7289da;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .header h1 { margin: 0; font-size: 1.5rem; color: #fff; display: flex; align-items: center; gap: 12px; }
        .header-actions { display: flex; gap: 10px; }

        /* --- GŁÓWNY UKŁAD (GRID) --- */
        .main-container { 
            display: grid; 
            grid-template-columns: 3fr 1fr; /* 75% Konsola, 25% Info */
            gap: 20px; 
            padding: 20px; 
            flex-grow: 1; 
            height: calc(100vh - 80px); /* Odejmujemy wysokość headera */
            box-sizing: border-box;
        }

        /* --- KARTY I STYLE OGÓLNE --- */
        .card { background-color: #23272a; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); margin-bottom: 20px; overflow: hidden; transition: all 0.3s ease; }
        
        /* Nagłówek karty (do klikania) */
        .card-header {
            padding: 15px 20px;
            background-color: #292b2f;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #202225;
            user-select: none;
        }
        .card-header:hover { background-color: #2f3136; }
        .card-header h3 { margin: 0; color: #99aab5; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
        .toggle-icon { transition: transform 0.3s ease; color: #7289da; }
        .card.collapsed .toggle-icon { transform: rotate(-90deg); }
        
        /* Treść karty */
        .card-content { padding: 20px; }
        .card.collapsed .card-content { display: none; }

        .stat-value { font-size: 1.8rem; font-weight: bold; color: #7289da; margin: 0; }
        
        .status-online { color: #43b581 !important; }
        .status-offline { color: #f04747 !important; }

        .action-button {
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 0.9rem;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex; align-items: center; gap: 5px;
        }
        .restart-button { background-color: #f04747; }
        .restart-button:hover { background-color: #d35400; }
        .start-button { background-color: #43b581; } /* Zielony */
        .start-button:hover { background-color: #3ca374; }
        .shutdown-button { background-color: #ed4245; } /* Czerwony */
        .shutdown-button:hover { background-color: #c0392b; }
        
        /* Sekcja z wykresami zasobów */
        .resource-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* --- NOWE STYLE: SERWERY I LOGIN --- */
        .login-screen, .server-select-screen { display: none; width: 100%; height: 100%; }
        
        .login-content {
            display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
        }
        .server-select-screen { padding: 40px; box-sizing: border-box; }

        .dashboard-content {
            overflow-y: auto; padding-bottom: 100px; height: 100%; display: block;
        }

        .login-btn {
            background-color: #5865F2; color: white; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-size: 1.2rem; font-weight: bold;
            display: inline-block; margin-top: 20px;
        }
        .login-btn:hover { background-color: #4752c4; }

        .server-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; }
        .server-card {
            background-color: #2f3136; border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: transform 0.2s; border: 1px solid #202225;
        }
        .server-card:hover { transform: translateY(-5px); background-color: #36393f; border-color: #7289da; }
        .server-icon { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 15px; object-fit: cover; }
        .server-name { font-weight: bold; color: white; font-size: 1.1rem; }

        .config-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .config-table td { padding: 10px; border-bottom: 1px solid #444; }
        .config-table td:first-child { color: #99aab5; font-weight: bold; }

               
        /* Tabela Ticketów */
        .tickets-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .tickets-table th { text-align: left; padding: 10px; background-color: #202225; color: #99aab5; }
        .tickets-table td { padding: 10px; border-bottom: 1px solid #444; }
        .tickets-table tbody tr { transition: background-color 0.2s ease; }
        .tickets-table tbody tr:hover { background-color: rgba(114, 137, 218, 0.1); }
        .center-table th, .center-table td { text-align: center !important; }
        .ticket-action-btn {
            background-color: #f04747; color: white; border: none; padding: 5px 10px; 
            border-radius: 3px; cursor: pointer; font-size: 0.8rem; margin-left: 5px;
        }
        .ticket-action-btn:hover { background-color: #c0392b; }
        .ticket-view-btn {
            background-color: #5865F2; color: white; border: none; padding: 5px 10px; 
            border-radius: 3px; cursor: pointer; font-size: 0.8rem;
        }
        .ticket-view-btn:hover { background-color: #4752c4; }

        /* Wyniki wyszukiwania użytkowników */
        .member-result {
            display: flex; align-items: center; justify-content: space-between;
            background-color: #2f3136; padding: 10px; border-radius: 5px; margin-bottom: 5px;
            border: 1px solid #202225;
            transition: all 0.2s ease;
        }
        .member-result:hover { background-color: #36393f; border-color: #7289da; }
        .member-info { display: flex; align-items: center; gap: 10px; }
        .member-avatar { width: 32px; height: 32px; border-radius: 50%; }

        /* Chat Modal */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.7); z-index: 2000;
            display: none; align-items: center; justify-content: center;
        }
        .chat-modal {
            background: #2f3136; width: 90%; max-width: 600px; height: 80vh;
            border-radius: 8px; display: flex; flex-direction: column;
            border: 1px solid #202225; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .chat-header {
            padding: 15px; border-bottom: 1px solid #202225; display: flex; justify-content: space-between; align-items: center; background: #202225;
        }
        .chat-info { padding: 15px; background-color: #292b2f; border-bottom: 1px solid #202225; color: #dcddde; }
        .ticket-desc-box { font-size: 0.9rem; background: #202225; padding: 8px; border-radius: 4px; margin-top: 5px; max-height: 80px; overflow-y: auto; }
        .chat-messages {
            flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px;
        }
        .chat-input-area {
            padding: 15px; border-top: 1px solid #202225; background: #202225; display: flex; gap: 10px;
        }
        .chat-input {
            flex-grow: 1; padding: 10px; border-radius: 5px; border: none; background: #40444b; color: white;
        }
        .msg-bubble {
            padding: 8px 12px; border-radius: 5px; max-width: 80%; word-wrap: break-word; font-size: 0.9rem;
        }
        .msg-left { align-self: flex-start; background: #40444b; }
        .msg-right { align-self: flex-end; background: #5865F2; } /* Wiadomości Dashboardu */
        .msg-meta { font-size: 0.7rem; color: #b9bbbe; margin-bottom: 2px; }

        
        /* Style formularza konfiguracji */
        .config-select {
            background-color: #202225; color: white; border: 1px solid #444; border-radius: 4px; padding: 5px; width: 100%; max-width: 300px;
        }
        .config-save-btn {
            background-color: #43b581; color: white; border: none; padding: 15px 30px; border-radius: 50px; cursor: pointer; font-weight: bold;
            position: fixed; bottom: 30px; right: 30px; width: auto;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1000;
            display: none; /* Domyślnie ukryty */
            font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .config-save-btn:hover { background-color: #3ca374; transform: scale(1.05); }

        @keyframes popIn {
            from { transform: scale(0.5) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        /* Style dla konsoli */
        .console-wrapper {
            display: flex; 
            flex-direction: column; 
            height: 100%; 
        }
        .console-box {
            background-color: #000000;
            color: #00ff00;
            font-family: 'Consolas', 'Monaco', monospace;
            padding: 15px;
            border-radius: 5px;
            flex-grow: 1; /* Wypełnij dostępną wysokość */
            overflow-y: auto;
            white-space: pre-wrap; /* Zachowuje formatowanie i zawija tekst */
            font-size: 0.9rem;
            border: 1px solid #2c2f33;
        }
        
        /* Input konsoli */
        .console-input-wrapper {
            display: flex;
            background-color: #000000;
            border: 1px solid #2c2f33;
            border-top: none;
            padding: 5px 10px;
            align-items: center;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .console-prompt { color: #7289da; font-weight: bold; margin-right: 10px; font-family: monospace; }
        
        /* Dostosowanie CodeMirror do wyglądu konsoli */
        .CodeMirror {
            flex-grow: 1;
            height: auto !important; /* Automatyczna wysokość */
            background-color: transparent !important;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9rem;
            color: white;
        }
        .cm-s-monokai .CodeMirror-cursor { border-left: 1px solid white !important; }
        
        /* Lista Komend */
        .commands-list {
            text-align: left;
            max-height: 250px;
            overflow-y: auto;
            font-size: 0.85rem;
            color: #dcddde;
        }
        .cmd-category {
            color: #7289da;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 5px;
            border-bottom: 1px solid #444;
            padding-bottom: 2px;
        }
        .cmd-item { padding: 2px 5px; cursor: help; }
        .cmd-item:hover { background-color: rgba(114, 137, 218, 0.1); border-radius: 3px; color: white; }
        
        /* Lista Modułów */
        .modules-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .module-card {
            background-color: #2f3136;
            border: 1px solid #202225;
            border-radius: 5px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-grow: 1;
            min-width: 120px;
        }
        .module-name { font-family: monospace; color: #dcddde; display: flex; align-items: center; gap: 8px; }
        .status-dot { width: 8px; height: 8px; background-color: #43b581; border-radius: 50%; display: inline-block; }
        .reload-btn-small {
            background: none; border: none; color: #b9bbbe; cursor: pointer; font-size: 1.1rem; transition: color 0.2s; padding: 0;
        }
        .reload-btn-small:hover { color: #43b581; transform: rotate(45deg); transition: transform 0.3s; }

        /* Lista Akcji Moderacyjnych */
        .action-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 0; border-bottom: 1px solid #444; font-size: 0.85rem;
        }
        .action-badge { padding: 2px 6px; border-radius: 4px; font-weight: bold; color: white; font-size: 0.75rem; }
        .action-details { color: #dcddde; }
        .action-time { color: #72767d; font-size: 0.75rem; }

        /* Logi Audytowe */
        .audit-log-entry {
            background-color: #2f3136;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 8px;
            border-left: 3px solid #7289da;
            font-size: 0.85rem;
            transition: background-color 0.2s ease;
        }
        .audit-log-entry:hover { background-color: #36393f; }
        .audit-log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
        .audit-log-action { font-weight: bold; color: white; }
        .audit-log-time { font-size: 0.75rem; color: #72767d; }
        .audit-log-details { color: #dcddde; }
        .audit-log-details strong { color: #b9bbbe; }

        /* Style dla zakładek (Tabs) */
        .tabs-header {
            display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px;
            background-color: #23272a; padding: 10px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }
        .tab-btn {
            background-color: transparent; color: #99aab5; border: none; padding: 10px 15px;
            border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 0.9rem; transition: all 0.2s;
        }
        .tab-btn:hover { background-color: #2f3136; color: white; }
        .tab-btn.active { background-color: #7289da; color: white; box-shadow: 0 0 12px rgba(114, 137, 218, 0.8); }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        /* Badge dla zakładek */
        .tab-badge {
            background-color: #ed4245;
            color: white;
            border-radius: 10px;
            padding: 2px 6px;
            font-size: 0.7rem;
            margin-left: 5px;
            font-weight: bold;
            box-shadow: 0 0 5px rgba(237, 66, 69, 0.5);
            vertical-align: middle;
        }

        /* Animacja ładowania obrazków */
        @keyframes skeleton-loading {
            0% { background-color: #2f3136; }
            50% { background-color: #4f545c; }
            100% { background-color: #2f3136; }
        }
        .img-loading { animation: skeleton-loading 1.2s infinite ease-in-out; color: transparent; }

        /* --- ZION CSS LOGO --- */
        .zion-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background-color: #202225;
            border: 2px solid #7289da;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(114, 137, 218, 0.4), inset 0 0 8px rgba(114, 137, 218, 0.2);
            position: relative;
            overflow: hidden;
        }
        .zion-logo::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%; width: 200%; height: 200%;
            background: conic-gradient(transparent, rgba(114, 137, 218, 0.5), transparent 40%);
            animation: zion-scan 3s linear infinite;
        }
        .zion-logo span {
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 1.5rem;
            font-weight: 900;
            color: #ffffff;
            z-index: 1;
            text-shadow: 0 0 8px #7289da;
        }
        @keyframes zion-scan { 100% { transform: rotate(360deg); } }

        /* --- STATUS DIODE --- */
        .status-dot-pulse {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #f04747;
            box-shadow: 0 0 8px #f04747;
            animation: pulse-red 2s infinite;
        }
        .status-dot-pulse.online {
            background-color: #43b581;
            box-shadow: 0 0 8px #43b581;
            animation: pulse-green 2s infinite;
        }
        @keyframes pulse-green {
            0% { box-shadow: 0 0 0 0 rgba(67, 181, 129, 0.7); }
            70% { box-shadow: 0 0 0 8px rgba(67, 181, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(67, 181, 129, 0); }
        }
        @keyframes pulse-red {
            0% { box-shadow: 0 0 0 0 rgba(240, 71, 71, 0.7); }
            70% { box-shadow: 0 0 0 8px rgba(240, 71, 71, 0); }
            100% { box-shadow: 0 0 0 0 rgba(240, 71, 71, 0); }
        }

        /* --- TOAST NOTIFICATIONS --- */
        .toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .toast {
            min-width: 250px; background-color: #2f3136; color: white;
            padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            display: flex; align-items: center; font-size: 0.95rem;
            transform: translateX(120%); opacity: 0;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-left: 5px solid #202225;
        }
        .toast.show {
            transform: translateX(0); opacity: 1;
        }
        .toast-success { border-left-color: #43b581; }
        .toast-error { border-left-color: #f04747; }
        .toast-warning { border-left-color: #faa61a; }
        .toast-info { border-left-color: #7289da; }
        .toast-icon { margin-right: 12px; font-size: 1.2rem; }

        /* Responsywność dla telefonów */
        @media (max-width: 768px) {
            .main-container { grid-template-columns: 1fr; height: auto; }
            .header { flex-direction: column; gap: 10px; text-align: center; }
            .console-box { height: 300px; }
        }