#glove-input {
  position: absolute; top: 100px; bottom: 76px; left: 16px; width: 350px;
  box-sizing: border-box; overflow: auto; padding: 14px; pointer-events: auto;
  background: rgba(8, 8, 12, .94); border: 1px solid #36363d; border-radius: 5px;
  font: 14px/1.45 var(--mono); letter-spacing: 0; text-transform: none; scrollbar-width: thin;
}
#glove-input[hidden] { display: none; }
#glove-input h2 { font-size: 16px; margin: 0; color: #ffac71; }
#glove-input h4 { margin: 12px 0 6px; text-transform: capitalize; }
#glove-input p { margin: 7px 0; }
#glove-input .muted { color: #a5a5b5; font-size: 12px; }
#glove-input .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
#glove-input .pbtn { padding: 7px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
#glove-input .status { color: #80e4d7; }
#glove-input .notice { padding: 8px; background: #191921; border-left: 2px solid #ff7a2f; }
#glove-input .error { color: #ff9d96; }
#glove-input .fit-ok { color: #80e4d7; }
#glove-input details { border-top: 1px solid #33333e; margin-top: 12px; padding-top: 10px; }
#glove-input summary { cursor: pointer; color: #ffac71; font-weight: 600; }
#glove-input .check { display: inline-flex; align-items: center; gap: 4px; margin: 5px 0; }
#glove-input input, #glove-input select { color: #e6e6ed; background: #20202a; border: 1px solid #535365; padding: 4px; border-radius: 3px; font: inherit; box-sizing: border-box; }
#glove-input input[type=checkbox] { accent-color: #ff7a2f; }
#glove-input input[type=number] { width: 65px; min-width: 0; }
#glove-input select { max-width: 100%; }
#glove-input table { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 12px; }
#glove-input th { color: #9999ad; text-align: left; padding: 3px; }
#glove-input td { padding: 5px 2px; border-bottom: 1px solid #242430; vertical-align: top; }
#glove-input td:first-child { overflow-wrap: anywhere; }
#glove-input td input[type=number] { width: 56px; }
#glove-input small { display: block; color: #82d4c6; font-size: 12px; }
#glove-input .mapping-row { padding: 7px 0; border-bottom: 1px solid #242430; }
#glove-input .mapping-row > label { display: block; color: #aaaabe; font-size: 12px; }
#glove-input .mapping-row select { width: 100%; margin: 5px 0; }
#glove-input .angle-row { display: flex; gap: 8px; font-size: 12px; }
#glove-input .angle-row label { display: flex; flex-direction: column; gap: 4px; }
#glove-input .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; font-size: 12px; }
#glove-input .fields label { display: flex; flex-direction: column; gap: 4px; }
#glove-input .fields input { width: 100%; }
#glove-input pre { max-height: 250px; overflow: auto; font-size: 12px; color: #c9c9d5; }
#hand-controls { position: absolute; top: 65px; right: 16px; bottom: 65px; width: 300px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
#hand-controls[hidden], #osd #controls[hidden] { display: none; }
#osd .cname { font-size: 12px; }
#osd .cval { font-size: 12px; }
#osd .ctitle { font-size: 14px; }
#osd .crow { grid-template-columns: 100px 1fr 40px; min-height: 27px; }
#hand-controls .cgroup { background: rgba(8,8,12,.88); }
#glove-input button:focus-visible, #glove-input input:focus-visible, #glove-input summary:focus-visible { outline: 2px solid #ffac71; outline-offset: 2px; }
@media (max-width: 1100px) {
  #glove-input { width: 290px; }
  #osd #controls { width: 230px; }
  #osd #tabs { top: 58px; }
  #osd #controls { top: 102px; }
  #hand-controls { top: 102px; width: 260px; }
}
@media (max-width: 700px) {
  #glove-input { width: calc(100% - 32px); top: auto; height: 38vh; bottom: 12px; }
  #osd #controls { width: 185px; bottom: calc(38vh + 30px); }
  #hand-controls { width: 210px; bottom: calc(38vh + 30px); }
  #osd #bl, #osd #br, #osd #tr { display: none; }
  #osd #tabs { gap: 3px; white-space: nowrap; }
  #osd #tabs .pbtn { padding: 6px; }
}