:root {
    --light-background: #f0f0f0;
    --dark-background: #121212;
    --light-title-text: #e0e0e0;
    --light-icons: #333;
    --dark-title-text: #e0e0e0;
    --dark-icons: #e0e0e0;
    --light-header: #3f51b5;
    --light-group-text: #3f51b5;
    --light-router-title: #3f51b5;
    --dark-header: #1e1e1e;
    --light-border: #3f51b5;
    --dark-border: #bb86fc;
    --dark-group-text: #bb86fc;
    --dark-router-title: #bb86fc;
    --light-icon-bg: rgba(240, 240, 240, 0.2);
    --dark-icon-bg: rgba(224, 224, 224, 0.2);
    --light-icon-hover-bg: rgba(240, 240, 240, 0.4);
    --dark-icon-hover-bg: rgba(224, 224, 224, 0.4);
    --light-router-bg: white;
    --dark-router-bg: #1e1e1e;
    --light-router-hover-shadow: rgba(0, 0, 0, 0.2);
    --light-router-text: #666;
    --dark-router-text: #e0e0e0;
    --dark-router-hover-shadow: rgba(255, 255, 255, 0.2);
}

body {
    background-color: var(--light-background);
    color: var(--light-title-text);
}

.dark-mode {
    background-color: var(--dark-background);
    color: var(--dark-title-text);
}

.header {
    background-color: var(--light-header);
}

.dark-mode .header {
    background-color: var(--dark-header);
}

.icon-button {
    background-color: var(--light-icon-bg);
    border: 1px solid var(--light-border);
    color: var(--light-icons);
}

.icon-button:hover {
    background-color: var(--light-icon-hover-bg);
}

.dark-mode .icon-button {
    background-color: var(--dark-icon-bg);
    border: 1px solid var(--dark-border);
    color: var(--dark-icons);
}

.dark-mode .icon-button:hover {
    background-color: var(--dark-icon-hover-bg);
}

.group h2 {
    color: var(--light-group-text);
}

.dark-mode .group h2 {
    color: var(--dark-group-text);
}

.router {
    background-color: var(--light-router-bg);
    color: var(--light-router-text);
}

.router:hover {
    box-shadow: 0 4px 8px var(--light-router-hover-shadow);
}

.router h2 {
    color: var(--light-router-title);
}

.dark-mode .router h2 {
    color: var(--dark-router-title);
}

.dark-mode .router {
    background-color: var(--dark-router-bg);
    color: var(--dark-router-text);
}

.dark-mode .router:hover {
    box-shadow: 0 4px 8px var(--dark-router-hover-shadow);
}

.group-title .fa {
    color: var(--light-group-text);
}

.dark-mode .group-title .fa {
    color: var(--dark-group-text);
}

.settings-menu .fa {
    color: var(--light-icons);
}

.dark-mode .settings-menu .fa {
    color: var(--dark-icons);
}
.router svg {
    font-size: 26px;
    color: var(--light-router-title);
}

.dark-mode .router svg {
    color: var(--dark-router-title);
}