/* Inline keyboard keys */
.kk-key-inline {
    display: inline-block;
    background: #f8f8f8;
    color: #111;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
    padding: 2px 6px;
    margin: 0 2px;
    font-family: monospace;
    font-size: 0.9em;
    vertical-align: middle;
    user-select: text;
}

/* Block-style keys */
.kk-key-block {
    --key-size: 48px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--key-size);
    height: var(--key-size);
    background: #fff;
    border: 1.5px solid #333;
    border-radius: 6px;
    box-shadow: 2px 2px 0 #999;
    margin: 4px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1;
    user-select: text;
}

/* Wide / extra-wide */
.kk-key-wide { width: calc(var(--key-size) * 2); }
.kk-key-extra { width: calc(var(--key-size) * 5); }

/* Two-row keys */
.kk-top { font-size: 10px; color: #666; margin-bottom: 2px; }
.kk-bottom { font-size: 14px; }

/* Labels */
.kk-key-label { font-size: 13px; text-transform: lowercase; }