@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

:root {
    --bg-color: #f4f4f7;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.05);
    --text-main: #111;
    --text-muted: #666;
    --card-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
    --chart-grid: rgba(0,0,0,0.05);
    --tertiary-bg: rgba(118, 118, 128, 0.12); 
    --tertiary-border: rgba(0, 0, 0, 0.05);
    --seg-active-bg: #fff;
    --seg-active-text: #000;
    --seg-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

body.dark-mode {
    --bg-color: #050505;
    --glass-bg: rgba(20, 20, 20, 0.6);
    --glass-border: rgba(255, 255, 255, 0.05);
    --text-main: #fff;
    --text-muted: #888;
    --card-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
    --chart-grid: rgba(255,255,255,0.03);
    --tertiary-bg: rgba(0, 0, 0, 0.5); 
    --tertiary-border: rgba(255, 255, 255, 0.05);
    --seg-active-bg: #636366;
    --seg-active-text: #fff;
    --seg-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
    transition: background-color 0.4s ease; 
}

.glass { 
    background: var(--glass-bg); 
    backdrop-filter: blur(24px); 
    border: 1px solid var(--glass-border); 
    box-shadow: var(--card-shadow); 
    transition: background 0.4s, border 0.4s; 
}

.text-glow-green { color: #32d74b; }
.text-glow-yellow { color: #ffd60a; }
.text-glow-orange { color: #ff9500; }
.text-glow-red { color: #ff453a; }

.metric-label { 
    font-size: 0.60rem; 
    font-weight: 800; 
    letter-spacing: 0.15em; 
    color: var(--text-muted); 
    text-transform: uppercase; 
}

.value-text { 
    font-feature-settings: "tnum"; 
    font-variant-numeric: tabular-nums; 
}

.unified-pill { 
    background: var(--tertiary-bg); 
    border: 1px solid var(--tertiary-border); 
    transition: background 0.3s ease, border 0.3s ease; 
}

.segmented-control { 
    padding: 4px; 
    border-radius: 12px; 
    display: inline-flex; 
    overflow-x: auto; 
    max-width: 100%; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

.segmented-control::-webkit-scrollbar { display: none; }

.tab-btn { 
    padding: 6px 12px; 
    border-radius: 8px; 
    font-size: 0.65rem; 
    font-weight: 800; 
    color: var(--text-muted); 
    transition: all 0.3s ease; 
    white-space: nowrap; 
}

.tab-btn.active { 
    background: var(--seg-active-bg); 
    color: var(--seg-active-text); 
    box-shadow: var(--seg-shadow); 
}

@keyframes pulse-dot { 
    0%, 100% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.4; transform: scale(1.1); } 
}

.pulse-dot { animation: pulse-dot 3s infinite; }
.dot-offline { 
    background-color: #ef4444; 
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); 
    animation: none; 
}

#theme-toggle { 
    cursor: pointer; 
    padding: 8px; 
    border-radius: 50%; 
    background: var(--glass-border); 
    transition: transform 0.3s ease; 
}

#theme-toggle:active { transform: scale(0.9); }

#drag-hint { 
    transition: opacity 0.3s; 
    opacity: 0; 
    pointer-events: none; 
}

#drag-hint.visible { opacity: 1; }