/* <Toggle /> — default styling, lm-toggle-* convention (v5 visual parity) */
.lm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--lm-border-color, #e4e4e7);
    border-radius: var(--lm-radius, 6px);
    background: var(--lm-background-color-header, #fafafa);
    color: var(--lm-font-grayout, #757575);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

/* Hidden but focusable (v5 used display:none; this keeps keyboard access) */
.lm-toggle .lm-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lm-toggle:hover {
    background: var(--lm-background-color-highlight, #f5f5f5);
    border-color: var(--lm-border-color, #e4e4e7);
}

.lm-toggle:has(.lm-toggle-input:focus-visible) {
    outline: 2px solid var(--lm-border-outline, #2563eb);
    outline-offset: 2px;
}

.lm-toggle.lm-toggle-on {
    background: var(--lm-background-color-highlight, #dce6f6);
    border-color: var(--lm-main-color, #3551a4);
    color: var(--lm-font-color, #000);
}

.lm-toggle.lm-toggle-on .lm-toggle-icon {
    color: var(--lm-main-color, #3551a4);
}

.lm-toggle-icon {
    font-size: 20px;
}

.lm-toggle.lm-toggle-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}