/* Scoped input surfaces retain PulsePad's shared cards, typography and palette. */
.input-tool { min-width: 0; }
.input-tool .section-card { min-width: 0; }
.input-tool .toolbar { flex-wrap: wrap; align-items: center; }
.input-tool .toolbar p { line-height: 1.6; }
.input-tool .test-status { line-height: 1.6; }
.it-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.input-tool button, .input-tool select { min-height: 44px; }
.input-tool :is(button, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.it-select-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--soft); font-size: 11px; }
.it-select-label select { max-width: 100%; padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); font: 11px var(--sans); }
.it-check { display: flex; align-items: center; gap: 9px; min-height: 44px; width: fit-content; max-width: 100%; margin-top: 8px; color: var(--soft); font-size: 11px; line-height: 1.65; cursor: pointer; }
.it-check input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--accent); }
.it-help { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.75; overflow-wrap: anywhere; }
.it-help code { color: var(--soft); font: 10px var(--mono); }
.it-keyboard-capture { max-width: 100%; overflow-x: auto; padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18); outline: none; overscroll-behavior-x: contain; scrollbar-color: var(--panel-3) var(--panel); }
.it-keyboard-capture:focus, .it-mouse-capture:focus { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
.it-keyboard-layout { display: grid; grid-template-columns: 15fr 3fr 4fr; gap: 1.3%; width: 100%; min-width: 760px; user-select: none; }
.it-key-group { position: relative; min-width: 0; aspect-ratio: var(--it-group-units) / 6.5; }
.it-key { position: absolute; padding: 2px; color: var(--soft); }
.it-keycap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; padding: 3px 1px; border: 1px solid #344154; border-bottom-width: 3px; border-radius: 5px; background: linear-gradient(145deg, var(--panel-3), var(--panel)); box-shadow: 0 2px 2px rgba(0, 0, 0, .24); }
.it-keycap b { font: 500 clamp(8px, .7vw, 11px) var(--mono); white-space: nowrap; }
.it-keycap small { color: var(--muted); font: 8px var(--mono); }
.it-key.is-visited .it-keycap { border-color: rgba(102, 168, 255, .66); color: var(--accent-2); background: rgba(102, 168, 255, .1); }
.it-key.is-down .it-keycap { color: #092419; border-color: #b9f9d8; background: var(--accent); box-shadow: 0 0 12px rgba(119, 232, 181, .25); }
.it-key.is-down small { color: #174b34; }
.it-iso-enter { clip-path: polygon(0 0, 100% 0, 100% 100%, 16.6667% 100%, 16.6667% 50%, 0 50%); }
.it-iso-enter .it-keycap { padding-left: 15%; }
.it-capture-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.it-capture-footer > span { min-width: 0; color: var(--soft); font: 10px/1.7 var(--mono); overflow-wrap: anywhere; }
.it-capture-footer button { flex: 0 0 auto; }
.it-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.it-details-grid > .section-card + .section-card { margin-top: 0; }
.it-readouts { display: grid; gap: 0; margin: 16px 0 0; }
.it-readouts > div { display: grid; grid-template-columns: minmax(100px, .85fr) minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.it-readouts dt { color: var(--muted); font-size: 11px; line-height: 1.6; }
.it-readouts dd { margin: 0; text-align: right; color: var(--accent); font: 11px/1.6 var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: plaintext; }
.it-key-events { min-height: 55px; max-height: 300px; overflow: auto; margin: 0; padding: 0; list-style: none; scrollbar-color: var(--panel-3) var(--panel); }
.it-key-events li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--soft); font: 10px/1.6 var(--mono); overflow-wrap: anywhere; }
.it-key-events .no-events { display: block; }
.it-event-time { color: var(--muted); }
.it-mouse-stage { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 25px; }
.it-mouse-capture { position: relative; min-width: 0; height: 290px; overflow: hidden; border: 1px solid #344154; border-radius: 10px; background: linear-gradient(rgba(102, 168, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 168, 255, .045) 1px, transparent 1px), radial-gradient(circle, rgba(102, 168, 255, .075), transparent 75%), var(--panel); background-size: 24px 24px, 24px 24px, auto, auto; outline: none; cursor: crosshair; user-select: none; }
.it-surface-label { position: absolute; inset: 20px 16px auto; color: var(--muted); font: 9px/1.7 var(--mono); letter-spacing: .08em; text-align: center; pointer-events: none; }
.it-mouse-capture.is-capturing .it-surface-label { color: var(--accent); }
.it-pointer-dot { position: absolute; width: 13px; height: 13px; margin: -6.5px; border: 2px solid #c5ffe3; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(119, 232, 181, .4); pointer-events: none; }
.it-pointer-dot[hidden] { display: none; }
.it-mouse-visual { display: grid; justify-items: center; gap: 17px; padding: 10px; }
.it-mouse-visual > small { color: var(--muted); font: 9px var(--mono); }
.it-mouse-shell { position: relative; width: 145px; height: 218px; border: 2px solid #405674; border-radius: 68px 68px 59px 59px; background: radial-gradient(ellipse at 50% 20%, #26354a, #131c29 75%); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .4), 0 14px 25px rgba(0, 0, 0, .22); }
.it-mouse-shell > span { position: absolute; display: grid; place-items: center; border: 1px solid #405674; background: #1c293c; color: var(--muted); font: 10px var(--mono); }
.it-mouse-left { inset: 4px 50% auto 4px; height: 95px; border-radius: 62px 5px 4px 5px; }
.it-mouse-right { inset: 4px 4px auto 50%; height: 95px; border-radius: 5px 62px 5px 4px; }
.it-mouse-shell .it-mouse-wheel { top: 28px; left: calc(50% - 10px); width: 20px; height: 45px; border: 3px solid #111b27; border-radius: 9px; background: repeating-linear-gradient(0deg, #50647d 0 3px, #283b53 3px 6px); }
.it-mouse-back { left: -8px; top: 122px; width: 13px; height: 32px; border-radius: 5px; }
.it-mouse-forward { left: -8px; top: 85px; width: 13px; height: 32px; border-radius: 5px; }
.it-mouse-shell > b { position: absolute; top: 145px; left: 0; right: 0; color: #6b819d; text-align: center; font-size: 13px; letter-spacing: -.05em; }
.it-mouse-shell > b span { color: #75a593; }
.it-mouse-shell > .is-visited { border-color: var(--accent-2); color: var(--accent-2); }
.it-mouse-shell > .is-down { background: var(--accent); color: #092419; border-color: #c5ffe3; box-shadow: 0 0 14px rgba(119, 232, 181, .23); }
.it-mouse-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.it-mouse-buttons .input-chip { min-width: 0; }
.it-mouse-buttons .input-chip > b { line-height: 1.6; }
.it-mouse-buttons .input-chip > strong { display: block; margin-top: 8px; color: var(--soft); font: 21px var(--mono); }
.it-mouse-buttons .input-chip.is-visited { border-color: rgba(102, 168, 255, .5); }
.it-mouse-buttons .input-chip.is-down { border-color: var(--accent); }
.it-mouse-buttons .input-chip.is-down > strong { color: var(--accent); }
@media (max-width: 1120px) {
  .it-details-grid { grid-template-columns: minmax(0, 1fr); }
  .it-mouse-stage { grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; }
  .it-mouse-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .input-tool .section-card { padding: 16px; }
  .it-capture-footer { align-items: flex-start; flex-direction: column; }
  .it-mouse-stage { grid-template-columns: minmax(0, 1fr); }
  .it-mouse-visual { display: none; }
  .it-mouse-capture { height: 250px; }
  .it-mouse-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-key-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .input-tool .input-chip { transition: none; }
}