/* ============================================================
   HTML 元素提取 —— 页面私有样式（/devtools/html-extract）
   通用结构复用 devtools.css，颜色只用 --c-* 变量，自动适配黑夜模式
   ============================================================ */

[hidden] { display: none; }

/* 选择器 / 提取方式 / 属性名 一行排布 */
.he-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.he-fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.he-fld--grow {
    flex: 1;
    min-width: 240px;
}

.he-attr {
    min-width: 140px;
}

.he-note {
    display: block;
    margin-bottom: 12px;
}

/* 匹配数量统计 */
.he-count {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-bottom: 10px;
}

/* 输入 / 输出等高 */
.he-textarea {
    min-height: 320px;
}

.he-output {
    min-height: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 860px) {
    .he-textarea { min-height: 220px; }
    .he-fld,
    .he-fld--grow { width: 100%; }
}