/* LCD design pixels scale together with the simulated hardware. */
.main-lcd .screen-keyboard { top: 2px; bottom: 2px; height: calc(100% - 4px); padding: 3px; overflow: hidden; box-sizing: border-box; }
.main-lcd .screen-keyboard.visible { display: flex; flex-direction: column; gap: 2px; }
.main-lcd .screen-keyboard-header { flex: 0 0 9px; height: 9px; margin: 0; font-size: 6px; }
.screen-keyboard-editor-slot { display: flex; flex: 1; min-height: 28px; overflow: hidden; }
.main-lcd .screen-keyboard textarea.screen-keyboard-editor {
  display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important;
  flex: 1; margin: 0; padding: 2px 3px; box-sizing: border-box; resize: none;
  overflow: auto; white-space: pre-wrap; overflow-wrap: break-word; text-align: left;
  border: 1px solid rgba(255,255,255,.18); border-radius: 2px; background: #080c11;
  color: #fff; caret-color: #fff; font: 8px/10px sans-serif !important;
  user-select: text; -webkit-user-select: text; touch-action: auto;
}
.main-lcd .screen-keyboard textarea.screen-keyboard-editor::selection { background: #426985; color: white; }
.screen-keyboard-candidates { display: flex; align-items: stretch; gap: 2px; flex: 0 0 13px; min-width: 0; color: #fff; font: 6px/13px sans-serif; }
.screen-keyboard-compose { max-width: 45px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.screen-keyboard-candidate-list { display: flex; flex: 1; min-width: 0; gap: 2px; }
.screen-keyboard-candidate-list button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-keyboard-status { flex: 1; min-width: 0; border: 0; background: transparent; color: #ffd886; font: 6px/11px sans-serif; padding: 0; text-align: left; }
.screen-keyboard-status:disabled { opacity: 1; }
.main-lcd .screen-keyboard-key:disabled { opacity: .4; cursor: default; }
.main-lcd .screen-keyboard [data-ime-prev], .main-lcd .screen-keyboard [data-ime-next] { flex: 0 0 11px; }
.main-lcd .screen-keyboard-rows { flex: 0 0 40px; min-height: 0; gap: 2px; }
.main-lcd .screen-keyboard-row { flex: 1; min-height: 0; height: auto; }
.main-lcd .screen-keyboard-key { height: 100%; min-height: 0; line-height: normal; }
.main-lcd .screen-keyboard [hidden] { display: none !important; }
.screen-keyboard-symbols { flex: 0 0 40px; min-height: 0; display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 2px; }
.screen-keyboard-symbols.lyric-symbols { grid-template-columns: repeat(6,minmax(0,1fr)); }
.main-lcd .lyric-symbols .screen-keyboard-key { font-size: 5.5px; overflow: hidden; }
.screen-keyboard-bottom-row { display: flex; height: 13px; flex: 0 0 13px; gap: 2px; }
.main-lcd .screen-keyboard-globe { flex: 0 0 23px; touch-action: none; -webkit-touch-callout: none; }
.main-lcd .screen-keyboard-symbol-toggle { flex: 0 0 23px; }
.screen-keyboard-globe svg { width: 10px; height: 10px; vertical-align: middle; pointer-events: none; }
.screen-keyboard-mode-menu { position: absolute; z-index: 2; bottom: 19px; left: 3px; width: 126px; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 18px; gap: 3px; background: #101820; border: 1px solid var(--accent); border-radius: 3px; box-shadow: 0 2px 6px #000; }