/* 正则生成 / 正则测试 共用样式 */

/* regex-check：测试配置 fieldset 内首项与 Layui 字段盒顶边对齐 */
.regex-config-field .layui-field-box > .layui-form > .layui-form-item:first-child {
    margin-top: 0;
}

.regex-muted {
    color: #64748b;
    font-size: 14px;
}

.regex-label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-weight: 600;
}

/* 常用正则：说明文案与下方标签按钮的垂直间距（regex-check / regex-generate；单独用 margin-top 避免与上一段 margin 折叠后变窄） */
.regex-preset-intro {
    margin-bottom: 0;
}

.regex-preset-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.regex-preset-tags .layui-btn {
    margin: 0;
}

.regex-flags-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.regex-label-inline {
    font-weight: 600;
    color: #334155;
    margin-right: 8px;
}

.regex-flag-item {
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.regex-doc h3 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 16px;
}

.regex-doc .layui-table {
    margin-top: 8px;
}

.regex-summary {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 14px;
    color: #0f172a;
}

.regex-highlight-box {
    min-height: 80px;
    padding: 12px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    font-family: Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

.regex-highlight-box .hl-match {
    background: #f59e0b;
    color: #0f172a;
    padding: 0 2px;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .regex-flags-row {
        flex-direction: column;
        align-items: flex-start;
    }
}