/* ===================== XLSX 转 HTML 转换器 ===================== */
/* 工具页默认占满整个电脑端屏幕（与工具箱规范一致），保留左侧导航 */
body.page-xlsx-html-full .app { max-width: 100%; }
body.page-xlsx-html-full .main-content { max-width: 100%; width: 100%; border-right: 0; }

.xh-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 64px;
    box-sizing: border-box;
}

/* 标题区 */
.xh-hero { text-align: center; margin-bottom: 22px; }
.xh-title {
    font-size: 26px; font-weight: 800; color: var(--text-primary, #111);
    margin: 0 0 10px;
}
.xh-sub {
    font-size: 14px; color: var(--text-secondary, #6b7280);
    margin: 0 auto; max-width: 640px; line-height: 1.6;
}

/* 卡片 */
.xh-card {
    background: var(--bg-secondary, #f7f9f9);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 18px;
}

/* 拖拽区 */
.xh-drop {
    border: 2px dashed var(--border-color, #cfd9de);
    border-radius: 14px;
    background: var(--bg-primary, #fff);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.xh-drop:hover, .xh-drop:focus-visible { border-color: var(--accent, #1d9bf0); outline: none; }
.xh-drop.is-over {
    border-color: var(--accent, #1d9bf0);
    background: color-mix(in srgb, var(--accent, #1d9bf0) 8%, var(--bg-primary, #fff));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #1d9bf0) 16%, transparent);
}
.xh-drop-inner { pointer-events: none; }
.xh-drop-icon { font-size: 46px; margin-bottom: 10px; }
.xh-drop-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #111); margin-bottom: 6px; }
.xh-drop-hint { font-size: 13px; color: var(--text-secondary, #6b7280); }

/* 选项 */
.xh-opts {
    display: flex; flex-wrap: wrap; gap: 14px 22px;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px dashed var(--border-color, #e5e7eb);
}
.xh-opt {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--text-primary, #111); cursor: pointer; user-select: none;
}
.xh-opt input { width: 16px; height: 16px; accent-color: var(--accent, #1d9bf0); cursor: pointer; }

/* 结果区 */
.xh-result-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.xh-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.xh-chip {
    font-size: 12.5px; color: var(--text-secondary, #6b7280);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px; padding: 5px 12px;
}
.xh-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.xh-btn {
    border: 1px solid var(--border-color, #cfd9de);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111);
    border-radius: 10px; padding: 9px 16px;
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, opacity .15s;
}
.xh-btn:hover { border-color: var(--accent, #1d9bf0); color: var(--accent, #1d9bf0); }
.xh-btn-primary {
    background: var(--accent, #1d9bf0); color: #fff; border-color: var(--accent, #1d9bf0);
}
.xh-btn-primary:hover { color: #fff; opacity: .9; border-color: var(--accent, #1d9bf0); }

/* 预览 */
.xh-preview-wrap {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px; overflow: hidden; background: #fff;
}
.xh-preview {
    width: 100%; height: 460px; border: 0; display: block; background: #fff;
}
@media (max-width: 640px) { .xh-preview { height: 360px; } }

/* 源码 */
.xh-src { margin-top: 14px; }
.xh-src summary {
    cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--accent, #1d9bf0);
    list-style: none; padding: 6px 0;
}
.xh-src summary::-webkit-details-marker { display: none; }
.xh-src summary::before { content: "▸ "; }
.xh-src[open] summary::before { content: "▾ "; }
.xh-src-area {
    width: 100%; height: 220px; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.5;
    border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px;
    padding: 12px; box-sizing: border-box; color: var(--text-primary, #111);
    background: var(--bg-primary, #fff); white-space: pre; tab-size: 2;
}

/* 错误 */
.xh-error {
    background: color-mix(in srgb, #e0245e 12%, var(--bg-primary, #fff));
    border: 1px solid color-mix(in srgb, #e0245e 35%, transparent);
    color: #c01b4e; border-radius: 12px; padding: 12px 16px;
    font-size: 13.5px; margin-bottom: 16px;
}

.xh-foot { font-size: 12.5px; color: var(--text-secondary, #6b7280); text-align: center; margin-top: 6px; }

@media (max-width: 640px) {
    .xh-page { padding: 18px 12px 52px; }
    .xh-card { padding: 16px; }
    .xh-title { font-size: 22px; }
    .xh-result-head { flex-direction: column; align-items: stretch; }
    .xh-actions { justify-content: stretch; }
    .xh-btn { flex: 1; text-align: center; }
}