body { background: radial-gradient(circle at 50% 0%, #152238 0%, #0a0c10 100%) !important; background-attachment: fixed !important; color: #fff; }
        .starry-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.9), rgba(0,0,0,0)), radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), rgba(0,0,0,0)), radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.7), rgba(0,0,0,0)), radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), rgba(0,0,0,0)); background-repeat: repeat; background-size: 200px 200px; }
        .starry-bg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(1px 1px at 10px 10px, rgba(100,200,255,0.8), rgba(0,0,0,0)), radial-gradient(1px 1px at 150px 150px, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 60px 170px, rgba(100,200,255,0.8), rgba(0,0,0,0)); background-size: 250px 250px; animation: twinkle 4s infinite alternate; }
        @keyframes twinkle { 0% { opacity: 0.3; } 100% { opacity: 0.8; } }

        .card-custom { background: rgba(18, 24, 34, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(100, 180, 255, 0.15); border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); }

        .player-cell { display: flex; align-items: center; gap: 8px; }
        .player-cell img.player-avatar-img { 
            width: 24px; height: 24px; border-radius: 4px; background: #222; 
            flex-shrink: 0; image-rendering: pixelated; box-shadow: 0 2px 4px rgba(0,0,0,0.5); 
            transform: translateY(6px);
        }
        .player-cell span { font-weight: 600; color: #e2e8f0; line-height: 1; letter-spacing: 0.5px; }

        .server-block { display: inline-flex; background: rgba(20, 35, 60, 0.5); border: 1px solid rgba(100, 180, 255, 0.25); box-shadow: inset 0 0 10px rgba(100, 180, 255, 0.05); padding: 5px 12px 5px 6px; margin: 6px; border-radius: 8px; transition: all 0.2s; }
        .server-block:hover { background: rgba(30, 55, 90, 0.8); border-color: rgba(100, 180, 255, 0.5); transform: translateY(-1px); }

        .chat-box { height: 350px; overflow-y: auto; background: rgba(8, 12, 18, 0.6); padding: 15px; border-radius: 8px; font-family: monospace; border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 4px 10px rgba(0,0,0,0.5); }
        .chat-box::-webkit-scrollbar { width: 6px; }
        .chat-box::-webkit-scrollbar-thumb { background: rgba(100, 180, 255, 0.3); border-radius: 3px; }
        
        .custom-select-dark { appearance: none; -webkit-appearance: none; background-color: rgba(15, 25, 40, 0.8); color: #fff; border: 1px solid #3a5075; border-radius: 6px; padding: 8px 35px 8px 15px; font-size: 14px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2388b0ff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; transition: all 0.3s; outline: none; }
        .chart-btn { border: none; padding: 6px 18px; border-radius: 4px; color: #fff; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.2s; margin: 0 6px 10px 6px; }
        .chart-btn-tps { background-image: linear-gradient(135deg, #2ea354, #1d823f); } .chart-btn-mspt { background-image: linear-gradient(135deg, #e34646, #c22f2f); } .chart-btn-ram { background-image: linear-gradient(135deg, #387df2, #215bc2); } .chart-btn-online { background-image: linear-gradient(135deg, #f0ac22, #c98c12); } 
        .chart-btn.inactive { opacity: 0.5; filter: grayscale(100%); background-image: none !important; background-color: rgba(40,45,55,0.8) !important; color: #888; }
        .chart-container { width: 100%; height: 400px; }

        .mc-c-0 { color: #000000; } .mc-c-1 { color: #0000AA; } .mc-c-2 { color: #00AA00; } .mc-c-3 { color: #00AAAA; } .mc-c-4 { color: #AA0000; } .mc-c-5 { color: #AA00AA; } .mc-c-6 { color: #FFAA00; } .mc-c-7 { color: #AAAAAA; } .mc-c-8 { color: #555555; } .mc-c-9 { color: #5555FF; } .mc-c-a { color: #55FF55; } .mc-c-b { color: #55FFFF; } .mc-c-c { color: #FF5555; } .mc-c-d { color: #FF55FF; } .mc-c-e { color: #FFFF55; } .mc-c-f { color: #FFFFFF; } .mc-f-l { font-weight: bold; } .mc-f-m { text-decoration: line-through; } .mc-f-n { text-decoration: underline; } .mc-f-o { font-style: italic; }

        @media (max-width: 768px) {
            .header-title { font-size: 2rem !important; }
            .card-custom { padding: 15px; }
            .chart-container { height: 300px; }
            .chat-msg-row { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
            .chat-msg-content { padding-left: 0 !important; }
            .mb-md-0 { margin-bottom: 15px; } 
        }