/* ============================================================
   HTML 实体转义 / 反转义 —— 页面私有样式（/devtools/html-entity）
   只放本工具独有结构，通用样式一律复用 devtools.css / tool-detail.css
   颜色只用 home.css 的 --c-* 变量与半透明 rgba，自动适配黑夜模式
   ============================================================ */

/* 显隐统一走 hidden 属性：HTML 与 JS 都不写内联样式 */
[hidden] { display: none; }

/* ---------- 转换方向切换（分段控件） ---------- */
.he-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--c-border);
    border-radius: 11px;
    background: var(--c-bg-soft);
}

.he-seg-btn {
    appearance: none;
    border: 0;
    padding: 7px 16px;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-text-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.he-seg-btn:hover { color: var(--c-text); }

.he-seg-btn.active {
    background: var(--c-bg-card);
    color: var(--c-primary);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

:root[data-theme="dark"] .he-seg-btn.active { box-shadow: none; }

/* ---------- 左右两栏：输入区与结果区等高 ---------- */
.he-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.he-pane .dt-textarea,
.he-pane .dt-output-wrap { flex: 1; }

.he-pane .dt-output code { font-size: inherit; }
.he-pane .dt-output { white-space: pre-wrap; word-break: break-all; }

/* ---------- 常用实体对照表 ---------- */
.he-table-wrap {
    margin-top: 4px;
    overflow-x: auto;
}

.he-table-wrap .dt-table { min-width: 620px; }

.he-table-wrap .dt-table td:first-child {
    text-align: center;
    font-size: 16px;
    color: var(--c-text);
}

.he-table-wrap .dt-table td:nth-child(2),
.he-table-wrap .dt-table td:nth-child(3) { white-space: nowrap; }

.he-note { margin-top: 12px; }
.he-note code { padding: 1px 6px; border-radius: 5px; background: var(--c-bg-soft); border: 1px solid var(--c-border); color: var(--c-primary); }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
    .he-seg { width: 100%; }
    .he-seg-btn { flex: 1; }
}