[data-tool="mouse-testi"] .mouse-test-area { min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 24px; border: 2px dashed #bdbdbd; border-radius: 14px; background: #fafafa; text-align: center; user-select: none; }
[data-tool="mouse-testi"] .mouse-test-area strong { font-size: 22px; }
[data-tool="mouse-testi"] .mouse-test-area span { color: #626262; line-height: 1.65; }
[data-tool="mouse-testi"] .mouse-test-area:focus-visible { outline: 3px solid #555; outline-offset: 3px; }
[data-tool="mouse-testi"] .mouse-button-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
[data-tool="mouse-testi"] .mouse-button-list li { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
[data-tool="mouse-testi"] .mouse-button-list li[data-pressed="true"] { background: #e4e4e4; border-color: #555; }
[data-tool="mouse-testi"] .mouse-event-log { min-height: 36px; max-height: 230px; overflow-y: auto; padding-left: 24px; margin: 0; font-size: 13px; line-height: 1.7; }
@media (max-width: 560px) { [data-tool="mouse-testi"] .mouse-button-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }