/* tool-page.css —— 工具独立页 /t/<工具id> 的「页面壳」样式（2026-09-27 第 27 轮）
   ────────────────────────────────────────────────────────────────
   只写"页面"才需要的东西：容器宽度、面包屑、页标题、登录引导、说明正文、FAQ。
   **工具本体的样式不在这里** —— 那些在 tools.css（.av-* / .av-table 等），
   独立页与工具墙弹窗共用同一份，不重复写第二份。

   规矩：窄屏规则一律写在 @media (max-width: 760px) 里，
   电脑端（>=761px）不受影响 —— 与 _topbar.html / tools.css 的手机端做法保持一致。
   ──────────────────────────────────────────────────────────────── */

body { background: var(--bg, #f4f6f9); color: var(--text, #182230); }

.tp-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 22px 70px;
}

/* 第 40 轮：已登录的工具页要宽（工具区 1200），正文才需要窄（.tp-doc 里单独限宽） */
.tp-wrap.tp-wide { max-width: 1200px; }
.tp-wrap.tp-wide .tp-doc { max-width: 860px; }   /* 说明/FAQ 仍然是"读"的宽度，不被拉成 1200 */
.tp-market-analysis .tp-about .tp-doc { margin-inline: auto; }

/* 视觉隐藏但仍然在 DOM 里（已登录工具页的 h1：页面结构不破，SEO 看未登录版） */
.tp-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 面包屑 ---------- */
.tp-crumb {
    font-size: var(--fs-sm, 13px);
    color: var(--muted, #5b6b7d);
    margin-bottom: 14px;
}
.tp-crumb a { color: var(--muted, #5b6b7d); text-decoration: none; }
.tp-crumb a:hover { color: #1d6fe0; text-decoration: underline; }
.tp-crumb .tp-sep { margin: 0 7px; color: #b6c0cc; }

/* ---------- 标题区 ---------- */
.tp-h1 {
    margin: 0 0 10px;
    font-size: var(--fs-2xl, 22px);
    line-height: 1.35;
    color: var(--accent-dark, #0f3a52);
}
.tp-lead {
    margin: 0 0 22px;
    font-size: var(--fs-base, 14px);
    line-height: 1.85;
    color: var(--muted, #5b6b7d);
    max-width: 74ch;
}

/* ---------- 工具本体容器（第 40 轮：**不再套白卡片**） ----------
   原来这里是白底 + 边框 + 圆角 + 阴影 + 内边距，弹窗里用它是卡片，搬到独立页就变成
   "一张卡片浮在页面上"（用户原话：弹窗改网页、样式还是保留弹窗样式）。
   工具页已登录时只渲染这一个容器，所以直接改成透明的：让工具自己落在页面背景上，
   间距交给工具内部的 .topic-wrap / .ma-* 自己管。 */
.tp-tool {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 30px;
}

/* 页底「关于这个工具」折叠（已登录专属；未登录仍是 .tp-doc 直接铺开给爬虫） */
.tp-about { margin-top: 8px; }
.tp-about > summary {
    cursor: pointer;
    font-size: var(--fs-sm, 13px);
    color: var(--muted, #5b6b7d);
    padding: 8px 2px;
}
.tp-about > summary:hover { color: #1d6fe0; }
.tp-about[open] > summary { margin-bottom: 10px; }

/* 加载失败/未注册的提示（出错要说人话，不留白屏） */
.tp-err {
    padding: 18px;
    border-radius: 10px;
    background: #fdf3f2;
    border: 1px solid #f3d5d2;
    color: #b23b30;
    font-size: var(--fs-sm, 13px);
}

/* ---------- 未登录引导（服务端判定，未登录不输出工具 UI） ---------- */
.tp-gate {
    background: linear-gradient(135deg, #eef5f9, #e3eef5);
    border: 1px solid #c7dce8;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 30px;
}
.tp-gate-title { font-size: var(--fs-lg, 16px); font-weight: var(--fw-semi, 600); color: #123c52; margin-bottom: 6px; }
.tp-gate-text { font-size: var(--fs-sm, 13px); color: var(--muted, #5b6b7d); margin-bottom: 14px; }
.tp-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 9px;
    border: 1px solid #c7dce8;
    background: #fff;
    color: var(--accent-dark, #0f3a52);
    text-decoration: none;
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-semi, 600);
}
.tp-btn:hover { border-color: #9fc4d8; }
.tp-btn-primary { background: #1b6b8f; border-color: #1b6b8f; color: #fff; }
.tp-btn-primary:hover { background: #175a79; border-color: #175a79; }

/* ---------- 说明正文（服务端直出，给爬虫也给人看） ---------- */
.tp-doc {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5eaf1);
    border-radius: var(--radius, 14px);
    padding: 22px 24px;
}
.tp-doc h2 {
    margin: 22px 0 10px;
    font-size: var(--fs-xl, 18px);
    color: var(--accent-dark, #0f3a52);
}
.tp-doc h2:first-child { margin-top: 0; }
.tp-doc p {
    margin: 0 0 4px;
    font-size: var(--fs-base, 14px);
    line-height: 1.9;
    color: #33404f;
}
.tp-faq {
    border-top: 1px solid var(--border, #e5eaf1);
    padding: 12px 0 4px;
    margin-top: 12px;
}
.tp-faq summary {
    cursor: pointer;
    font-size: var(--fs-base, 14px);
    font-weight: var(--fw-semi, 600);
    color: var(--accent-dark, #0f3a52);
}
.tp-faq p { margin: 8px 0 4px; color: var(--muted, #5b6b7d); }

/* ---------- 底部相关链接 ---------- */
.tp-links {
    margin: 26px 0 0;
    font-size: var(--fs-sm, 13px);
    color: var(--muted, #5b6b7d);
}
.tp-links a { color: #1d6fe0; text-decoration: none; }
.tp-links a:hover { text-decoration: underline; }
.tp-links .tp-sep { margin: 0 8px; color: #b6c0cc; }

/* ================= 窄屏（手机）=================
   电脑端不受影响：所有规则都在 max-width 里 */
@media (max-width: 760px) {
    .tp-wrap { padding: 14px 15px 50px; }
    .tp-h1 { font-size: var(--fs-xl, 18px); }
    .tp-lead { font-size: var(--fs-sm, 13px); line-height: 1.8; }
    .tp-tool { padding: 12px; }
    .tp-doc { padding: 18px 16px; }
    .tp-doc h2 { font-size: var(--fs-lg, 16px); }
    .tp-doc p { font-size: var(--fs-sm, 13px); }
    .tp-gate { padding: 16px; }
    /* 账号资料库有 11 列，手机上表格在 .av-table-wrap 里横向滚动（tools.css 第 1660 行），
       页面本身不会被撑宽 —— 别在这里再给它加 overflow，会盖掉那份 */
}