.keybd{padding:0.75rem;background-color:#181a1b;border-radius:6px;border:1px solid #2a2d2f;overflow-x:auto}
.keybd .keyboard-svg{background-color:#444;border-radius:6px;display:block;width:100%;height:auto;font-family:Arial,sans-serif}
.keybd.act{border-color:#05b672;box-shadow:0 0 0 1px #05b672}
.night .keybd{background-color:#101213;border-color:#2a2d2f}
.night .keybd .keyboard-svg{background-color:#232627}
.keybd:not(.macmode) #mac_18,.keybd:not(.macmode) #mac_91,.keybd:not(.macmode) #mac_93,.keybd:not(.macmode) #mac_18_1{display:none}
.keybd.macmode #key_LeftWin,.keybd.macmode #key_LeftAlt,.keybd.macmode #key_RightAlt,.keybd.macmode #key_RightWin{display:none}
.keybd .key-rect{fill:#ffffff;stroke:#333333;stroke-width:1.5;rx:6;ry:6;filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.1));transition:fill .06s}
.night .keybd .key-rect{fill:#bbbbbb}
.keybd .key-text{font-size:12px;text-anchor:middle;dominant-baseline:middle;fill:#222;pointer-events:none;user-select:none}
.keybd .key-keycodenber{fill:#444444;stroke:#444444;filter:none}
.night .keybd .key-keycodenber{fill:#232627;stroke:#232627}
.keybd .key-keycodenber-text{fill:#888;font-size:14px;pointer-events:none;user-select:none;text-anchor:middle;dominant-baseline:middle}
.keybd .indicator-off{fill:#5a5a5a!important;filter:none}
.keybd .indicator-on{fill:#4caf50!important}
.keybd .indicator-label{fill:#ddd;font-size:10px;font-weight:bold;text-anchor:middle}
.keybd .keybodtoolbar{display:flex;justify-content:flex-start;align-items:center;margin-top:0.75rem;gap:0.5rem;color:#ccc;flex-wrap:wrap;background-color:#444;padding:0.5rem;border-radius:6px}
.night .keybd .keybodtoolbar{background-color:#232627}
.keybd .active-indicator{display:inline-flex;align-items:center;gap:6px;background:#2d2d2d;padding:4px 12px 4px 8px;border-radius:6px;font-weight:600;font-size:0.7rem}
.keybd .active-led{width:0.6rem;height:0.6rem;border-radius:50%;background:#5f5f5f;transition:background .2s,box-shadow .2s;flex:none}
.keybd .active-led.on{background:#4caf50;box-shadow:0 0 8px rgba(76,175,80,.8)}
.keybd .keybadtype{background:#2d2d2d;padding:4px 8px;border-radius:6px;font-weight:600;color:#eee;border:1px solid #2d2d2d;font-size:0.7rem}
.keybd .keybadtype span{width:1.8rem;display:inline-block;text-align:center;cursor:pointer;line-height:1.4rem}
.keybd .keybadtype span.act{background-color:#05b672;border-radius:6px;color:#fff}
.keybd .keydone{background:#2d2d2d;padding:4px 10px;border-radius:6px;font-weight:600;color:#9ee493;font-size:0.7rem}
.keybd .reset-btn{background:#2d2d2d;padding:4px 12px;border-radius:6px;font-weight:600;color:#eee;border:1px solid #3a3a3a;cursor:pointer;font-size:0.7rem;line-height:1.2rem}
.keybd .reset-btn:hover{background:#3a3a3a;color:#fff}
.keybd svg text{user-select:none}
@media screen and (max-width:767px){
.keybd{padding:0.25rem}
.keybd .keyboard-svg{min-width:40rem}
.keybd .keybodtoolbar{margin-top:0.25rem;gap:0.25rem;padding:0.25rem}
.keybd .active-indicator{padding:3px 8px;font-size:0.65rem}
.keybd .keydone,.keybd .keybadtype,.keybd .reset-btn{font-size:0.65rem}
}