/* 在线鼠标测试 */
.ms-pad {
    position: relative;
    height: 240px;
    border-radius: 12px;
    border: 2px dashed var(--c-border, #d5dbe3);
    background:
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(0, 150, 220, .06) 19px 20px),
        repeating-linear-gradient(90deg, transparent 0 19px, rgba(0, 150, 220, .06) 19px 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    margin-bottom: 14px;
}

.ms-pad-hint {
    font-size: 13.5px;
    color: var(--c-text-muted, #9aa5b1);
    pointer-events: none;
}

.ms-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #0096dc;
    box-shadow: 0 0 0 4px rgba(0, 150, 220, .22);
    pointer-events: none;
}

.ms-btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 8px;
}

.ms-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid var(--c-border, #e3e8ef);
    background: var(--c-surface, #fff);
    transition: background .15s, transform .1s;
}
.ms-btn-ico { font-size: 18px; color: var(--c-text-sub, #5b6572); }
.ms-btn b { font-size: 13px; color: var(--c-text, #1f2933); }
.ms-btn small { font-size: 15px; font-weight: 700; color: #0096dc; }

.ms-btn.is-hit {
    background: #0096dc;
    border-color: #0096dc;
    transform: scale(.95);
}
.ms-btn.is-hit b,
.ms-btn.is-hit small,
.ms-btn.is-hit .ms-btn-ico { color: #fff; }

.ms-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
}
.ms-note.is-warn { background: rgba(220, 120, 0, .1); color: #b45309; }
.ms-note.is-info { background: rgba(0, 150, 220, .1); color: #0a7fc0; }

[data-theme="dark"] .ms-btn { background: var(--c-surface, #1b2028); }
[data-theme="dark"] .ms-note.is-warn { color: #fbbf24; }
[data-theme="dark"] .ms-note.is-info { color: #58bdf0; }

@media (max-width: 768px) {
    .ms-pad { height: 190px; }
}