/* 在线文本比较 /tools/diff —— 三端排版与配色
 *
 * 排版策略：
 *  · 桌面 ≥1000px：容器占满屏幕（工具箱规范）；两个编辑器并排等宽；
 *    并排差异视图左右双栏等高、同步滚动；顶部操作条吸顶
 *    （偏移由 JS 量出站点吸顶 .page-header 高度写入 --df-stick）。
 *  · 平板 768-999px：编辑器并排但更紧凑；选项区两列。
 *  · 手机 ≤767px：编辑器上下堆叠；并排差异视图改为上下对照（保持行号对齐），
 *    按钮整行铺满、触控区 ≥44px、输入 16px 防 iOS 缩放；操作条保持吸顶便于随时比较。
 *  · 真手机 ≤680px：操作条改为常规流（不悬浮），腾出更多阅读空间。
 *  · ≤420px：统计项两列、间距收紧。
 *
 * 配色：沿用 Diffchecker 的语义色 —— 删除=红、新增=绿、修改=黄；
 *      背景用站点主题变量，自动适配日间 / 夜间；
 *      差异底色用 color-mix 与主题变量混合，夜间不会刺眼。
 */

.df-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px clamp(16px, 2.4vw, 40px) 64px;
    box-sizing: border-box;

    /* 语义色集中管理：删除=红 / 新增=绿 / 修改=黄。
     * 用 color-mix 与主题变量混合，日间夜间都清晰且不刺眼。 */
    --df-add: #2f9e44;
    --df-del: #e5534b;
    --df-mod: #b8860b;
    --df-add-soft: color-mix(in srgb, var(--df-add) 13%, transparent);
    --df-del-soft: color-mix(in srgb, var(--df-del) 13%, transparent);
    --df-mod-soft: color-mix(in srgb, #e3b341 16%, transparent);
    --df-add-ink: var(--df-add);
    --df-del-ink: var(--df-del);
    --df-mod-ink: var(--df-mod);
}

/* ---------- Hero ---------- */
.df-hero { text-align: center; padding: 4px 0 clamp(18px, 2.6vw, 28px); }
/* 图标与标题同一行：用一个 inline-flex 容器居中，图标 + 标题左右并排 */
.df-hero-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    vertical-align: top;
}
.df-hero-ico {
    flex: 0 0 auto;
    width: clamp(40px, 4.2vw, 50px);
    height: clamp(40px, 4.2vw, 50px);
    margin: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 2.2vw, 25px);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.df-hero h1 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: .4px; }
.df-hero-sub { margin: 8px auto 0; max-width: 780px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 卡片 / 通用 ---------- */
.df-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.df-card-h { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.df-note { margin: 10px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 顶部操作条 ---------- */
.df-bar {
    position: sticky;
    top: var(--df-stick, 76px);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .28);
}
.df-bar-l, .df-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 分段控件 ---------- */
.df-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-primary);
}
.df-seg-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    min-height: 34px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.df-seg-btn.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.df-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.df-seg-sm .df-seg-btn { padding: 6px 12px; font-size: 13px; min-height: 32px; }

/* ---------- 按钮 ---------- */
.df-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 9px 15px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, filter .15s ease;
}
.df-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.df-btn:active:not(:disabled) { transform: translateY(1px); }
.df-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.df-btn:disabled { opacity: .5; cursor: not-allowed; }
.df-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.df-btn-pri { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.df-btn-pri:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

/* ---------- 编辑器 ---------- */
.df-editors {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}
.df-editor { padding: 12px 14px 10px; display: flex; flex-direction: column; min-width: 0; }
.df-editor-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.df-editor-h h2 { margin: 0; font-size: 14px; font-weight: 700; }
.df-editor-acts { margin-left: auto; display: flex; gap: 7px; }
.df-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.df-dot-a { background: var(--df-del); }
.df-dot-b { background: var(--df-add); }
.df-text {
    width: 100%;
    min-height: 230px;
    resize: vertical;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 11px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.65;
    tab-size: 4;
}
.df-text:focus { outline: none; border-color: var(--accent); }
.df-editor.is-drop { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.df-meta { margin-top: 7px; font-size: 12px; color: var(--text-secondary); }

/* ---------- 选项区 ---------- */
.df-opts { margin-top: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.df-opts-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.df-opts-t {
    flex: 0 0 68px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.df-opts-hint { font-size: 12px; color: var(--text-secondary); }
.df-chk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    cursor: pointer;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-primary);
}
.df-chk input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.df-input {
    flex: 1 1 260px;
    min-width: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 13.5px;
    font-family: inherit;
}
.df-input:focus { outline: none; border-color: var(--accent); }

/* ---------- 统计 ---------- */
.df-stat {
    margin-top: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.df-stat-main { display: flex; align-items: center; gap: 11px; }
.df-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--text-primary) 10%, transparent) 0);
    color: var(--text-primary);
    position: relative;
}
.df-ring::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--bg-secondary);
}
.df-ring span { position: relative; z-index: 1; }
.df-stat-t { font-size: 13px; color: var(--text-secondary); }
.df-stat-items { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.df-si {
    flex: 1 1 84px;
    min-width: 84px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 10px;
    text-align: center;
    background: var(--bg-primary);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.df-si:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .22); }
.df-si-n { display: block; font-size: 19px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.df-si-l { font-size: 11.5px; color: var(--text-secondary); }
.df-si-same { color: var(--text-primary); }
.df-si-add { color: var(--df-add-ink); }
.df-si-del { color: var(--df-del-ink); }
.df-si-mod { color: var(--df-mod-ink); }

/* ---------- 差异结果 ---------- */
.df-result { margin-top: 16px; }
.df-hint { margin: 0; padding: 22px 14px; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.df-hint[hidden] { display: none !important; }

.df-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.df-side[hidden] { display: none !important; }
.df-pane {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow: auto;
    max-height: min(66vh, 680px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}
.df-pane-title {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 6px 10px;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.df-row { display: flex; align-items: flex-start; }
.df-ln {
    flex: 0 0 46px;
    padding: 0 8px;
    text-align: right;
    color: var(--text-secondary);
    opacity: .65;
    user-select: none;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.df-tx { flex: 1 1 auto; padding: 0 8px; white-space: pre; min-width: 0; }
.df-wrap .df-tx { white-space: pre-wrap; word-break: break-word; }

.df-eq { color: var(--text-secondary); }
/* 变更行：左侧加 3px 语义色竖条，扫描时一眼定位增删改（Diffchecker 风格） */
.df-del { background: var(--df-del-soft); box-shadow: inset 3px 0 0 var(--df-del-ink); }
.df-del .df-ln { background: color-mix(in srgb, var(--df-del) 22%, transparent); color: var(--df-del-ink); opacity: 1; }
.df-ins { background: var(--df-add-soft); box-shadow: inset 3px 0 0 var(--df-add-ink); }
.df-ins .df-ln { background: color-mix(in srgb, var(--df-add) 22%, transparent); color: var(--df-add-ink); opacity: 1; }
.df-mod { background: var(--df-mod-soft); box-shadow: inset 3px 0 0 var(--df-mod-ink); }
.df-mod .df-ln { background: color-mix(in srgb, #e3b341 26%, transparent); color: var(--df-mod-ink); opacity: 1; }
.df-void { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--text-primary) 6%, transparent) 6px 12px); }

/* 行内高亮：略收底色强度到 32%，避免大段高亮过饱和；保留圆角药丸观感 */
.df-tx ins { background: color-mix(in srgb, var(--df-add) 32%, transparent); text-decoration: none; border-radius: 2px; }
.df-tx del { background: color-mix(in srgb, var(--df-del) 32%, transparent); text-decoration: none; border-radius: 2px; }

/* 统一视图 */
.df-uni {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow: auto;
    max-height: min(66vh, 680px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}
.df-uni[hidden] { display: none !important; }
.df-mk { flex: 0 0 20px; text-align: center; user-select: none; font-weight: 700; }
.df-del .df-mk { color: var(--df-del-ink); }
.df-ins .df-mk { color: var(--df-add-ink); }
.df-acc {
    flex: 0 0 auto;
    margin: 0 6px;
    align-self: center;
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}
.df-fold {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    min-height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 12px;
    user-select: none;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}
.df-fold:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.df-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- 合并面板 ---------- */
.df-merge { margin-top: 16px; padding: 13px 15px; }
.df-merge[hidden] { display: none !important; }
.df-merge-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.df-merge-h h2 { margin: 0; font-size: 14px; font-weight: 700; }
.df-merge-c { font-size: 12.5px; color: var(--text-secondary); }
.df-merge-acts { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.df-merged {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    max-height: 260px;
    overflow: auto;
    white-space: pre;
}

/* ---------- 导出 ---------- */
.df-export { margin-top: 16px; padding: 13px 15px; }
.df-exp-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 说明 ---------- */
.df-help, .df-about { max-width: 940px; margin: 18px auto 0; }
.df-help {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-secondary);
    padding: 14px 18px;
}
.df-help > summary { cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }
.df-help > summary::-webkit-details-marker { display: none; }
.df-help > summary::before { content: '▾ '; color: var(--accent); }
.df-help[open] > summary::before { content: '▴ '; }
.df-help-ol { margin: 12px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.9; }
.df-tip {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-primary));
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    font-size: 13.5px;
    line-height: 1.85;
}
.df-tip ul { margin: 6px 0 0; padding-left: 22px; }
.df-about {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-secondary);
    font-size: 14px;
    line-height: 1.9;
}
/* 极简折叠按钮：标题行兼作 summary，箭头随开合切换 */
.df-about > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 700;
    user-select: none;
}
.df-about > summary::-webkit-details-marker { display: none; }
.df-about > summary::before {
    content: '▾';
    color: var(--accent);
    font-size: 12px;
    transition: transform .15s ease;
}
.df-about[open] > summary::before { content: '▴'; }
.df-about > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.df-about-body { padding: 0 20px 22px; }
.df-about h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 700; }
.df-about h3:first-child { margin-top: 4px; }
.df-about p { margin: 0 0 8px; }
.df-about ul { margin: 0 0 8px; padding-left: 22px; }

/* ---------- Toast ---------- */
.df-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 100000;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
    max-width: 88vw;
    text-align: center;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.df-toast[hidden] { display: none !important; }

/* ================= 响应式 ================= */

/* 桌面 / 平板横向：编辑器并排等宽；并排差异左右双栏 */
@media (min-width: 768px) {
    .df-editors { grid-template-columns: 1fr 1fr; }
}

/* 大屏：编辑器更高、阅读更从容 */
@media (min-width: 1000px) {
    .df-editors { grid-template-columns: 1fr 1fr; }
    .df-text { min-height: 250px; }
}

/* 平板（768-999）：并排已够用，仅收紧字号与最小高度 */
@media (min-width: 768px) and (max-width: 999px) {
    .df-text { min-height: 200px; }
    .df-opts-row { gap: 8px; }
    .df-opts-t { flex: 0 0 60px; }
}

@media (max-width: 900px) {
    .df-hero h1 { font-size: 21px; }
}

/* 手机（≤767）：编辑器与并排差异都改为上下堆叠；控件整行铺满、
 * 触控区 ≥44px、输入框 16px 防 iOS 聚焦缩放；操作条保持吸顶便于随时比较 */
@media (max-width: 767px) {
    .df-page { padding: 16px 14px 48px; }
    .df-bar { top: var(--df-stick, 64px); padding: 8px 12px; row-gap: 8px; }
    .df-bar-l, .df-bar-r { width: 100%; }
    .df-bar-r { display: grid; grid-template-columns: 1fr; }
    .df-bar-r .df-seg { width: 100%; }
    .df-bar-r .df-seg-btn { flex: 1 1 0; min-height: 42px; }
    .df-bar-r .df-btn { width: 100%; min-height: 44px; }
    .df-bar-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .df-bar-l .df-btn { width: 100%; min-width: 0; min-height: 44px; padding: 8px 4px; }
    .df-editors { grid-template-columns: 1fr; }
    .df-text { min-height: 170px; font-size: 16px; }  /* 16px 防 iOS 聚焦缩放 */
    .df-input { font-size: 16px; flex: 1 1 100%; }
    .df-opts-t { flex: 0 0 100%; }
    .df-chk { flex: 1 1 calc(50% - 5px); justify-content: center; min-height: 40px; }
    .df-stat { gap: 12px; }
    .df-si { flex: 1 1 calc(50% - 6px); }
    .df-side { grid-template-columns: 1fr; }
    .df-pane { max-height: 42vh; }
    .df-merge-acts { width: 100%; margin-left: 0; }
    .df-merge-acts .df-btn { flex: 1 1 calc(50% - 4px); min-height: 44px; }
    .df-exp-btns { display: grid; grid-template-columns: 1fr 1fr; }
    .df-exp-btns .df-btn { min-height: 44px; padding: 8px 6px; }
    .df-help, .df-about { padding-left: 16px; padding-right: 16px; border-radius: 14px; }
}

/* 真手机（≤680）：进一步把操作条改为常规流（不悬浮），腾出更多阅读空间 */
@media (max-width: 680px) {
    .df-page { padding: 16px 14px 48px; }
    .df-bar { position: static; }
    .df-bar-l, .df-bar-r { width: 100%; }
    .df-bar-r { display: grid; grid-template-columns: 1fr; }
    .df-bar-r .df-seg { width: 100%; }
    .df-bar-r .df-seg-btn { flex: 1 1 0; min-height: 42px; }
    .df-bar-r .df-btn { width: 100%; min-height: 44px; }
    .df-bar-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .df-bar-l .df-btn { width: 100%; min-width: 0; min-height: 44px; padding: 8px 4px; }
    .df-text { min-height: 170px; font-size: 16px; }  /* 16px 防 iOS 聚焦缩放 */
    .df-input { font-size: 16px; flex: 1 1 100%; }
    .df-opts-t { flex: 0 0 100%; }
    .df-chk { flex: 1 1 calc(50% - 5px); justify-content: center; min-height: 40px; }
    .df-stat { gap: 12px; }
    .df-si { flex: 1 1 calc(50% - 6px); }
    .df-side { grid-template-columns: 1fr; }
    .df-pane { max-height: 42vh; }
    .df-merge-acts { width: 100%; margin-left: 0; }
    .df-merge-acts .df-btn { flex: 1 1 calc(50% - 4px); min-height: 44px; }
    .df-exp-btns { display: grid; grid-template-columns: 1fr 1fr; }
    .df-exp-btns .df-btn { min-height: 44px; padding: 8px 6px; }
    .df-help, .df-about { padding-left: 16px; padding-right: 16px; border-radius: 14px; }
}

@media (max-width: 420px) {
    .df-hero-ico { width: 44px; height: 44px; font-size: 22px; }
    .df-ln { flex: 0 0 38px; padding: 0 6px; }
    .df-ring { width: 54px; height: 54px; font-size: 13.5px; }
    .df-exp-btns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .df-btn, .df-seg-btn, .df-fold, .df-si { transition: none !important; }
    .df-btn:active { transform: none !important; }
}