/* ==========================================================================
   迅龙 · 免费工具页
   工具模板里原有的 Bootstrap 结构不动，这里把它们统一成迅龙的浅色风格。
   依赖 xunl-saas.css（色板、按钮、顶栏、页脚）。
   ========================================================================== */
:root {
    --bs-primary: #2f6bff;
    --bs-primary-rgb: 47, 107, 255;
    --bs-link-color: #2f6bff;
    --bs-link-color-rgb: 47, 107, 255;
    --bs-body-font-family: var(--font);
    --bs-body-font-size: 14.5px;
    --bs-border-radius: 8px;
    --bs-border-color: #cbd5e1;
}
body { background: var(--bg); color: var(--ink); }

/* ---------- 标题区 ---------- */
.tool-hero { background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%); border-bottom: 1px solid var(--line); padding: 22px 0 26px; }
.crumbs { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.tool-title { display: flex; gap: 16px; align-items: center; }
.tool-ico { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 14px; background: var(--brand-soft); display: grid; place-items: center;
            font-size: 26px; font-weight: 700; color: var(--brand); }
.tool-title h1 { font-size: 26px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.tool-title p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- 工具主体：原模板里的 .container ---------- */
.tool-body { max-width: 1160px !important; margin: 24px auto 8px; padding: 26px 28px !important; background: #fff; border: 1px solid var(--line);
             border-radius: var(--radius); box-shadow: var(--shadow); }
.tool-body > br:first-child { display: none; }
.tool-body h1, .tool-body h2, .tool-body h3, .tool-body h4 { color: var(--ink); }
.tool-body label, .tool-body .form-label { font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.tool-body .form-group, .tool-body .mb-3 { margin-bottom: 14px; }
.tool-body .form-control, .tool-body .form-select { border-color: var(--line-2); border-radius: 8px; padding: .5rem .8rem; font-size: 14px; }
.tool-body .form-control:focus, .tool-body .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, .15); }
.tool-body textarea.form-control { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }
.tool-body .btn { border-radius: 8px; font-weight: 500; height: auto; padding: .55rem 1.1rem; }
.tool-body .btn-success, .tool-body .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.tool-body .btn-success:hover, .tool-body .btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.tool-body .btn-outline-primary, .tool-body .btn-outline-secondary, .tool-body .btn-secondary, .tool-body .btn-light {
    background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.tool-body .btn-outline-primary:hover, .tool-body .btn-outline-secondary:hover, .tool-body .btn-secondary:hover { color: var(--brand); border-color: var(--brand); background: #fff; }
.tool-body .btn-danger { background: #fff; color: var(--bad); border: 1px solid var(--line-2); }
.tool-body .d-grid .btn { padding: .7rem 1rem; font-size: 15px; }
.tool-body .table { --bs-table-bg: #fff; font-size: 13.5px; }
.tool-body .table th { background: #fafbfc; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.tool-body .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #fafbfc; }
.tool-body .card { border-color: var(--line); border-radius: 10px; }
.tool-body .card-header { background: #fafbfc; }
.tool-body .alert { border-radius: 10px; font-size: 13.5px; }
.tool-body .alert-info { background: var(--brand-soft); border-color: #d6e2ff; color: var(--ink-2); }
.tool-body pre, .tool-body code { background: #f8fafc; color: #0f172a; border-radius: 6px; }
.tool-body pre { padding: 12px; border: 1px solid var(--line); }
.tool-body .nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }
.tool-body img { max-width: 100%; }
/* 老模板里写死给深色背景的白字，换到浅色后统一拉回正文色 */
.tool-body .text-white, .tool-body .text-light { color: var(--ink) !important; }
.tool-body .bg-dark { background: #f8fafc !important; }

/* ---------- 底部：转化条 + 相关工具 ---------- */
.tool-more { padding: 28px 0 48px; }
.tool-more h3 { font-size: 16px; margin: 28px 0 12px; }
.tool-more .all { margin: 14px 0 0; font-size: 13.5px; }
.tool-upsell { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-radius: 14px;
               background: linear-gradient(120deg, #eef3ff, #f5efff); border: 1px solid #e0e7ff; }
.tool-upsell b { display: block; font-size: 15px; margin-bottom: 2px; }
.tool-upsell span { color: var(--ink-2); font-size: 13.5px; }
.tool .ti { margin-right: 2px; }

/* 工具大全页 */
.tools-hub .tool b { gap: 8px; }
.tools-hub h3 { display: flex; align-items: center; gap: 8px; }
.tools-search { max-width: 460px; margin: -18px auto 28px; }

@media (max-width: 640px) {
    .tool-body { margin: 12px 12px 8px; padding: 18px 16px !important; }
    .tool-title h1 { font-size: 20px; }
    .tool-ico { width: 44px; height: 44px; flex-basis: 44px; font-size: 22px; }
    .tool-upsell { flex-direction: column; align-items: flex-start; }
}

/* 个别工具自带的第三方样式（editor.md 等）会覆盖 .btn，顶栏按钮加一层特异性兜住 */
.pnav .cta .btn { height: 36px !important; padding: 0 16px !important; font-size: 14px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; }
.pnav .cta .btn-primary { background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff !important; }
.pnav .cta .btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--ink) !important; }