/* Surface-only hardware finish: retain all keyboard and control geometry. */
#app-container #keyboard-overlay {
    border-top-color: #000;
    box-shadow: 0 -10px 30px #0005;
}

#app-container {
    background: radial-gradient(ellipse at 30% 0%, #15181d 0%, #0d1014 42%, #080a0d 100%);
}

#app-title {
    color: #d7f8ff;
    text-shadow: 0 2px 2px #000, 0 0 14px #00cdeb30;
}

#app-container .control-group,
#app-container #midi-panel {
    background: linear-gradient(180deg, #20242b, #171b21 48%, #101318);
    border-color: #383f49;
    box-shadow: inset 0 1px 0 #ffffff12, 0 3px 8px #0007;
}

#app-container .control-label,
#app-container .device-label {
    color: #c2cbd4;
    text-shadow: 0 1px 1px #000;
}

#app-container .control-btn,
#app-container .fullscreen-btn,
#app-container .device-toggle-button:not(.is-active):not([aria-pressed="true"]) {
    background: linear-gradient(180deg, #393e48, #2a2f38 48%, #232730);
    border-color: #555c68;
    color: #edf0f5;
    box-shadow: inset 0 1px 0 #ffffff20, inset 0 -1px 0 #0008, 0 2px 3px #0008;
    text-shadow: 0 1px 1px #000;
}

#app-container .control-btn:hover,
#app-container .fullscreen-btn:hover,
#app-container .device-toggle-button:hover {
    border-color: #8aabb8;
    box-shadow: inset 0 1px 0 #ffffff28, 0 0 8px #00d5ef28;
}

#app-container .control-select,
#app-container .device-select {
    background: linear-gradient(180deg, #101318, #191e25) !important;
    border-color: #49515c !important;
    color: #e1ecf0;
    box-shadow: inset 0 2px 4px #0009, 0 1px 0 #ffffff0d;
}

#app-container #note-display {
    background: linear-gradient(180deg, #070b10, #101820);
    border-color: #425866;
    color: #a9f3ff;
    box-shadow: inset 0 2px 8px #000c, 0 1px 0 #ffffff12, 0 0 12px #00cdeb14;
    text-shadow: 0 0 10px #00cdeb38;
}

#app-container .control-value,
#app-container .wheel-value {
    color: #a9f3ff;
    text-shadow: 0 0 8px #00cdeb30;
}

#app-container .vertical-wheel {
    background: linear-gradient(90deg, #07090c, #191e25 45%, #090c10) !important;
    border-color: #48515d !important;
    box-shadow: inset 0 2px 8px #000b, 0 1px 0 #ffffff16;
}

#app-container .white-key:not(.active) {
    background: linear-gradient(180deg, #aeb4ba 0%, #e0e3e5 5%, #f4f5f3 25%, #e3e6e6 94%, #b6bdc3 100%);
    border-color: #858d97;
    color: #303740;
    box-shadow: inset 1px 0 0 #fff9, inset -1px 0 0 #ffffff80, inset 0 -3px 3px #65717c55, 0 6px 12px #0008;
    text-shadow: 0 1px 0 #ffffffa0;
}

#app-container .white-key:not(.active):hover {
    background: linear-gradient(180deg, #b7c5ca, #f2fbfc 25%, #d6e8ec 94%, #a3bbc5);
}

#app-container .black-key:not(.active) {
    background: linear-gradient(180deg, #323943 0%, #20252d 12%, #15191f 86%, #303741 94%, #101318 100%);
    border-color: #080b10;
    color: #dce3eb;
    box-shadow: inset 1px 0 0 #ffffff25, inset -1px 0 0 #ffffff16, inset 0 1px 0 #ffffff22, 0 6px 10px #000b;
    text-shadow: 0 1px 1px #000;
}

#app-container .black-key:not(.active):hover {
    background: linear-gradient(180deg, #414c59, #252d37 12%, #1c242e 86%, #3a4755 94%, #141c25);
}