/* Cartographer Console Styles */

:root {
    --console-bg: #050608;
    --console-panel: #0D0F12;
    --console-border: #1E293B;
    --console-accent: #22D3EE;
    --console-forest: #14532D;
    --console-ocean: #0C4A6E;
    --console-data: #06B6D4;
    --console-warning: #F59E0B;
}

.glass-panel {
    background-color: rgba(13, 15, 18, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid var(--console-border);
}

.scanline {
    background: linear-gradient(to bottom, transparent 50%, rgba(34, 211, 238, 0.01) 50%);
    background-size: 100% 4px;
}

.globe-container {
    perspective: 2000px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe-sphere {
    position: relative;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #164e63 0%, #050608 100%);
    box-shadow:
        inset -30px -30px 100px rgba(0, 0, 0, 0.9),
        inset 30px 30px 100px rgba(34, 211, 238, 0.1),
        0 0 120px rgba(12, 74, 110, 0.4);
}

.globe-landmass {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.6;
    mix-blend-mode: lighten;
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCIgLAbNx5m2vwJcje56RwsFTC1X4Jj-8C-Flyl_MCxvX7fJpqEvel1k9TvjMrRRa45B7rzKgjikMcgUgUsmYeKowWL8FaNSFWZgRJwKHOPhCLqMuL8jEIK82o7MhWQxUVK2K7Z0zMBX_T2WelPEGLDidZjLKLlfD6oB6o4lQ4QGXZMMRX8rTZfSQadUuXLJLLMh81K8n3MIOGJrXSxaEzlhW8mZdCS84uZPZXv-Uk-YWsHs2UL7kKDGXx0IOjerWoVeg2ZJbJJJ8g');
    background-size: 200%;
    background-position: center;
    filter: sepia(1) saturate(2) hue-rotate(80deg) brightness(0.4);
}

.globe-overlay-grid {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.1);
    background-image:
        radial-gradient(circle at center, transparent 69%, rgba(34, 211, 238, 0.05) 70%, transparent 71%),
        linear-gradient(90deg, transparent 49.5%, rgba(34, 211, 238, 0.05) 50%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(34, 211, 238, 0.05) 50%, transparent 50.5%);
    background-size: 100% 100%, 40px 100%, 100% 40px;
}

.data-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--console-accent);
    box-shadow: 0 0 15px var(--console-accent);
}

.sidebar-scrollbar::-webkit-scrollbar {
    width: 3px;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.2);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Base Utility Classes */
.toggle-indicator {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}