/* Keyboard & Hands Dark Theme Logic */
/* Ensuring the toggle controls ONLY the keyboard section and its children */

/* 1. Keyboard Container Container */
.keyboard-section.dark-theme .keyboard-container {
    background: #1e293b;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 2. Keys */
.keyboard-section.dark-theme .key {
    background: #334155;
    border-bottom-color: #0f172a;
}

.keyboard-section.dark-theme .key-nepali {
    color: #f1f5f9;
}

.keyboard-section.dark-theme .key-label,
.keyboard-section.dark-theme .key-shift {
    color: #94a3b8;
}

/* 3. Toggles on Keyboard */
.keyboard-section.dark-theme .kb-toggle-group {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.keyboard-section.dark-theme .toggle-text {
    color: #94a3b8;
}

.keyboard-section.dark-theme .slider {
    background-color: #0f172a;
}

.keyboard-section.dark-theme .kb-toggle-group.side {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 4. Key Highlights (Pressed/Active) in Dark Mode */
.keyboard-section.dark-theme .key-highlight {
    background: var(--guide-color) !important;
    border-color: var(--guide-color) !important;
    box-shadow: 0 0 15px var(--primary-glow);
}

.keyboard-section.dark-theme .key-bg-label {
    color: #f1f5f9;
    opacity: 0;
}

.keyboard-section.dark-theme .key-highlight .key-bg-label {
    opacity: 0;
}

.keyboard-section.dark-theme .key-highlight .key-nepali,
.keyboard-section.dark-theme .key-highlight .key-label,
.keyboard-section.dark-theme .key-highlight .key-shift {
    color: #ffffff !important;
}

/* 5. Hands Dark Mode */
.keyboard-section.dark-theme .hand {
    background: linear-gradient(to bottom, #1e293b, #0f172a);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}

.keyboard-section.dark-theme .finger {
    background: #334155;
}

.keyboard-section.dark-theme .finger::after {
    background: rgba(255, 255, 255, 0.1);
}

.keyboard-section.dark-theme .palm {
    background: #0f172a;
    opacity: 0.8;
}

/* Finger Labels in Dark Mode */
.keyboard-section.dark-theme .hand .finger-name-display {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}