/* ===========================================================
 * Gofo工具 独立工具页样式
 * 全部选择器都以 .gofo-toolbox 为根，不影响站内其它任何组件。
 *
 * 设计方向：玻璃拟态(Glassmorphism)——半透明磨砂玻璃、书签式分类
 * 切换、左侧工具书签+右侧大操作面板、主题色玻璃按钮。颜色数值取自
 * 主题 main.css 真实 token，强调色维持站内本来就在用的 #b8cc3b。
 *
 * 重要：全文一律用 px，不用 rem/em 做字号和间距。
 * 原因：父主题的 bootstrap.min.css 把 html 的根字号改成了 10px
 * （不是浏览器默认的16px），rem 是相对根字号计算的，所以之前所有
 * 用 rem 写的数值实际渲染都缩水到了 62.5%（10÷16）。这不是缓存或
 * 优先级问题，是单位基准本身被换了。用 px 写死，就不受这个影响。
 *
 * 2026-08：整体又按0.8倍等比缩小了一版（含图标、间距、圆角、字号），
 * 字重统一去掉了加粗，只用常规字重(400)。
 * =========================================================== */

.gofo-toolbox {
    --gofo-accent: #b8cc3b;
    --gofo-accent-ink: #6b7a1f;
    --gofo-accent-gradient: linear-gradient(135deg, #c9dd5e 0%, #8a9c2a 100%); /* 比纯色柔和，白字在深色端也够对比度 */
    --gofo-glass-fill: rgba(255,255,255,0.06);
    --gofo-glass-fill-hover: rgba(255,255,255,0.09);
    --gofo-glass-border: rgba(255,255,255,0.12);
    --gofo-glass-shadow: 0 6.4px 25.6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    --gofo-blur: blur(12.8px) saturate(160%);

    position: relative;
    max-width: var(--mian-max-width, 960px);
    margin: 0 auto !important;
    padding: 17.6px 12.8px 64px !important;
    color: var(--main-color);
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}

/* 浅色模式：玻璃换成暗色调玻璃（在浅底上，白玻璃反而看不清） */
body:not(.dark-theme) .gofo-toolbox {
    --gofo-glass-fill: rgba(20,20,20,0.035);
    --gofo-glass-fill-hover: rgba(20,20,20,0.06);
    --gofo-glass-border: rgba(20,20,20,0.09);
    --gofo-glass-shadow: 0 6.4px 22.4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

.gofo-toolbox *,
.gofo-toolbox *::before,
.gofo-toolbox *::after { box-sizing: border-box; }

/* 全站要求字体不加粗：连结果区里AI输出内容用的<b>/<strong>（比如书名、人名这类强调）
   也统一按常规字重显示，不止是我们自己写的类名 */
.gofo-toolbox b,
.gofo-toolbox strong { font-weight: 400; }

/* 背景氛围光晕：只用一种颜色（站内强调色），不引入新色相 */
.gofo-toolbox::before {
    content: "";
    position: absolute;
    top: -64px; right: -96px;
    width: 384px; height: 384px;
    background: radial-gradient(circle, rgba(184,204,59,.18) 0%, rgba(184,204,59,0) 70%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 0;
}
.gofo-tb-catbar, .gofo-tb-shelf { position: relative; z-index: 1; }

/* ---------- 书签式分类切换条 ---------- */

.gofo-tb-catbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px !important;
    margin: 0 0 20.8px !important;
}

.gofo-tb-cattab {
    background: var(--gofo-glass-fill);
    -webkit-backdrop-filter: var(--gofo-blur);
    backdrop-filter: var(--gofo-blur);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 999px;
    padding: 8px 16.8px !important;
    font-size: 11.2px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--muted-color);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.gofo-tb-cattab:hover { background: var(--gofo-glass-fill-hover); color: var(--main-color); }
.gofo-tb-cattab.is-active {
    background: var(--gofo-accent);
    border-color: transparent;
    color: #4e5358 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 3.2px 12.8px rgba(184, 204, 59, .25);
}

/* 移动端：分类按钮固定两列两行，不要自然换行挤成"三个一排+落单一个" */
@media (max-width: 640px) {
    .gofo-tb-catbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .gofo-tb-cattab { text-align: center; }
}

/* ---------- 类别面板（一次只显示一个） ---------- */

.gofo-tb-shelf { display: none; }
.gofo-tb-shelf.is-active { display: block; animation: gofo-tb-fade .3s ease; }
@keyframes gofo-tb-fade { from { opacity: 0; transform: translateY(4.8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .gofo-tb-shelf.is-active { animation: none; } }

.gofo-tb-shelf-desc {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: var(--muted-color);
    margin: 0 0 17.6px !important;
}

/* 左侧书签列表 + 右侧大操作面板 */
.gofo-tb-shelf-row {
    display: flex;
    align-items: flex-start;
    gap: 15.2px !important;
}

/* ---------- 左侧：工具书签列表 ---------- */

.gofo-tb-toollist {
    flex: 0 0 208px;
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    position: sticky;
    top: 90px;
}

.gofo-tb-toolitem {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6.4px !important;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    background: var(--gofo-glass-fill);
    -webkit-backdrop-filter: var(--gofo-blur);
    backdrop-filter: var(--gofo-blur);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 11.2px;
    padding: 11.2px 12.8px !important;
    color: var(--main-color); /* <button> 默认不继承父级文字色，必须显式声明，否则会掉回浏览器默认按钮色 */
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

/* 卡片内部：左边标题+副标题文字，右边（用量徽章 + 图标）竖排 */
.gofo-tb-toolitem-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11.2px !important;
    width: 100%;
}
.gofo-tb-toolitem-text {
    display: flex;
    flex-direction: column;
    gap: 3.2px !important;
    min-width: 0;
}
.gofo-tb-toolitem-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4.8px !important;
}

/* 用量/会员徽章 */
.gofo-tb-quota-badge {
    display: inline-flex;
    align-items: center;
    font-size: 8.8px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding: 2.4px 6.4px !important;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    color: #fff !important;
    font-variant-numeric: tabular-nums;
}
.gofo-tb-quota-badge b { font-weight: 400; margin: 0 1.6px; }
.gofo-tb-quota-badge[data-quota-badge] {
    cursor: pointer;
    transition: background .15s ease;
}
.gofo-tb-quota-badge[data-quota-badge]:hover { background: rgba(0,0,0,.4); }
/* 卡片选中态是纯色底，徽章换成更深的半透明黑，避免糊在一起 */
.gofo-tb-toolitem.is-active .gofo-tb-quota-badge { background: rgba(0,0,0,.22); color: #4e5358 !important; }
.gofo-tb-toolitem:hover { background: var(--gofo-glass-fill-hover); }
.gofo-tb-toolitem.is-placeholder { opacity: .55; }
.gofo-tb-toolitem.is-active {
    background: var(--gofo-accent);
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 3.2px 12.8px rgba(184, 204, 59, .25);
}
.gofo-tb-toolitem.is-active .gofo-tb-toolitem-label { color: #4e5358 !important; }

.gofo-tb-toolitem-label {
    font-size: 14.4px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.gofo-tb-toolitem-caption {
    font-size: 10.4px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: var(--muted-color);
}
.gofo-tb-toolitem.is-active .gofo-tb-toolitem-caption { color: rgba(78,83,88,.75) !important; }

/* 卡片图标：线条色跟随标题文字色走，红色强调点未选中用主题色、选中态换成白色，
   不用固定色，跟随 --gofo-tb-icon-accent 这个变量走。图标本身不带任何背景色/背景框。 */
.gofo-tb-toolitem-icon {
    display: flex;
    --gofo-tb-icon-accent: var(--gofo-accent);
}
.gofo-tb-toolitem-icon svg { display: block; width: 60px; height: 60px; }
.gofo-tb-toolitem.is-active .gofo-tb-toolitem-icon { color: #4e5358; --gofo-tb-icon-accent: #fff; }

/* 父主题全局大概率有一条类似 svg{fill:currentColor} 的规则（给它自己雪碧图icon系统用的），
   优先级会盖掉图标里没写fill属性的线条图形（path/rect/circle），导致本该镂空的线条图标
   变成了实心色块。这里强制把"没有自己fill属性"的图形钉死成描边不填充；真正要填充的
   强调色图形（金句引号、播放三角等）在PHP里自带fill属性，不受这条规则影响，能正常显色。 */
.gofo-tb-toolitem-icon svg path:not([fill]),
.gofo-tb-toolitem-icon svg rect:not([fill]),
.gofo-tb-toolitem-icon svg circle:not([fill]) {
    fill: none !important;
    stroke: currentColor !important;
}

.gofo-tb-stamp {
    font-size: 8.8px !important;
    font-weight: 400 !important;
    letter-spacing: .03em !important;
    line-height: 1.4 !important;
    padding: 2.4px 7.2px !important;
    margin: 0 !important;
    border-radius: 999px;
    background: var(--gofo-glass-fill);
    border: 1px solid var(--gofo-glass-border);
    color: var(--muted-color) !important;
}

/* ---------- 右侧：大操作面板 ---------- */

.gofo-tb-detailwrap { flex: 1 1 auto; min-width: 0; }

.gofo-tb-detail {
    display: none;
    background: var(--gofo-glass-fill);
    -webkit-backdrop-filter: var(--gofo-blur);
    backdrop-filter: var(--gofo-blur);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 16px;
    box-shadow: var(--gofo-glass-shadow);
    padding: 23.2px 25.6px !important;
}
.gofo-tb-detail.is-active { display: block; animation: gofo-tb-fade .25s ease; }
@media (prefers-reduced-motion: reduce) { .gofo-tb-detail.is-active { animation: none; } }

.gofo-tb-detail-title {
    font-size: 16.8px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin: 0 0 6.4px !important;
}

.gofo-tb-detail-desc {
    font-size: 12.8px !important;
    line-height: 1.7 !important;
    color: var(--muted-color);
    margin: 0 0 17.6px !important;
}

.gofo-tb-comingsoon {
    border: 1px dashed var(--gofo-glass-border);
    border-radius: 11.2px;
    padding: 17.6px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: var(--muted-color);
    text-align: center;
    margin: 0 !important;
}

.gofo-tb-form { display: flex; flex-direction: column; gap: 12.8px !important; max-width: 496px; margin: 0 !important; }

.gofo-tb-field { display: flex; flex-direction: column; gap: 6.4px !important; }
.gofo-tb-field-label { font-size: 11.2px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--muted-color); margin: 0 !important; }

.gofo-tb-field textarea,
.gofo-tb-field input[type="text"] {
    width: 100%;
    background: var(--gofo-glass-fill);
    -webkit-backdrop-filter: var(--gofo-blur);
    backdrop-filter: var(--gofo-blur);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 9.6px;
    padding: 8.8px 11.2px !important;
    font-size: 12.8px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    color: var(--main-color);
    font-family: inherit;
    resize: vertical;
}
.gofo-tb-field textarea:focus,
.gofo-tb-field input[type="text"]:focus {
    outline: none;
    border-color: rgba(184, 204, 59, .6);
    box-shadow: 0 0 0 2.4px rgba(184, 204, 59, .15);
}

/* 文本框滚动条：中性灰色，不跟着主题色走 */
.gofo-tb-field textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--muted-color) transparent;
}
.gofo-tb-field textarea::-webkit-scrollbar { width: 6.4px; }
.gofo-tb-field textarea::-webkit-scrollbar-track { background: transparent; }
.gofo-tb-field textarea::-webkit-scrollbar-thumb {
    background: var(--muted-color);
    opacity: .5;
    border-radius: 999px;
}

/* 主按钮：主题色渐变 + 深色字，比纯色柔和，不做玻璃透明 */
.gofo-tb-submit {
    align-self: flex-start;
    background: var(--gofo-accent);
    border: 1px solid transparent;
    color: #4e5358 !important;
    border-radius: 999px;
    padding: 8px 20.8px !important;
    font-size: 11.2px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    cursor: pointer;
    box-shadow: 0 3.2px 12.8px rgba(184, 204, 59, .25);
    transition: background .15s ease, transform .12s ease;
}
.gofo-tb-submit:hover { filter: brightness(1.08); transform: translateY(-0.8px); }
.gofo-tb-submit:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- 结果区 ---------- */

.gofo-tb-result { margin-top: 16.8px !important; max-width: 544px; }
.gofo-tb-result:empty { margin-top: 0 !important; }

.gofo-tb-skel {
    border: 1px solid var(--gofo-glass-border);
    border-radius: 11.2px;
    padding: 14.4px 16.8px !important;
}
.gofo-tb-skel-line {
    height: 8px;
    border-radius: 3.2px;
    margin: 0 0 7.2px !important;
    background: linear-gradient(90deg, var(--gofo-glass-fill) 25%, var(--gofo-glass-fill-hover) 37%, var(--gofo-glass-fill) 63%);
    background-size: 400% 100%;
    animation: gofo-tb-shimmer 1.3s ease infinite;
}
@keyframes gofo-tb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
    .gofo-tb-skel-line, .gofo-tb-card, .gofo-tb-cattab, .gofo-tb-toolitem, .gofo-tb-submit { animation: none !important; transition: none !important; }
}
.gofo-tb-skel-line.w60 { width: 60%; } .gofo-tb-skel-line.w90 { width: 90%; } .gofo-tb-skel-line.w40 { width: 40%; }

.gofo-tb-error {
    border: 1px solid rgba(214, 84, 84, .4);
    background: rgba(214, 84, 84, .08);
    border-radius: 11.2px;
    padding: 11.2px 14.4px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: #d65454 !important;
}

/* 结果内容里用到的一个通用玻璃小卡片（JS渲染输出时复用） */
.gofo-tb-card {
    background: var(--gofo-glass-fill-hover);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 11.2px;
    padding: 15.2px 17.6px !important;
    margin: 0 !important;
}

.gofo-tb-quote {
    font-size: 15.2px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    border-left: 2.4px solid var(--gofo-accent);
    padding-left: 12.8px !important;
    margin: 0 0 14.4px !important;
}

.gofo-tb-block { margin: 0 0 14.4px !important; }
.gofo-tb-block:last-child { margin-bottom: 0 !important; }
.gofo-tb-block h3 {
    display: flex;
    align-items: center;
    gap: 6.4px;
    font-size: 10.4px !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    color: var(--gofo-accent-ink);
    margin: 0 0 7.2px !important;
}
html.dark .gofo-tb-block h3, .dark-theme .gofo-tb-block h3, [data-theme="dark"] .gofo-tb-block h3 { color: var(--gofo-accent); }
.gofo-tb-block p { font-size: 12.8px !important; line-height: 1.8 !important; margin: 0 !important; }

.gofo-tb-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 7.2px !important; }
.gofo-tb-list li {
    list-style: none !important; /* 有的浏览器/主题样式会给li补一个默认圆点，跟自定义的“·”重叠成两个点 */
    font-size: 12.8px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    padding-left: 14.4px !important;
    position: relative;
}
.gofo-tb-list li::marker { content: ""; }
.gofo-tb-list li::before { content: "·"; position: absolute; left: 2.4px; color: var(--gofo-accent); font-weight: 400; font-size: 15.2px; }

.gofo-tb-tags { display: flex; flex-wrap: wrap; gap: 6.4px !important; margin: 0 !important; }
.gofo-tb-tag {
    font-size: 11.2px !important;
    line-height: 1.4 !important;
    padding: 4px 9.6px !important;
    margin: 0 !important;
    border-radius: 999px;
    border: 1px solid var(--gofo-glass-border);
    background: var(--gofo-glass-fill);
    color: var(--muted-color);
}

.gofo-tb-badge {
    display: inline-flex;
    text-transform: none; /* 父级h3是大写字母间距样式，徽章文字本身不需要跟着变大写 */
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    padding: 1.6px 6.4px !important;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(184, 204, 59, .18);
    border: 1px solid rgba(184, 204, 59, .4);
    color: var(--gofo-accent-ink);
}
html.dark .gofo-tb-badge, .dark-theme .gofo-tb-badge, [data-theme="dark"] .gofo-tb-badge { color: var(--gofo-accent); }

.gofo-tb-subtabs { display: flex; gap: 4.8px !important; margin: 0 0 11.2px !important; flex-wrap: wrap; }
.gofo-tb-subtab {
    font-size: 9.6px !important;
    line-height: 1.4 !important;
    padding: 4.8px 11.2px !important;
    margin: 0 !important;
    border-radius: 999px;
    border: 1px solid var(--gofo-glass-border);
    background: var(--gofo-glass-fill);
    color: var(--muted-color);
    cursor: pointer;
}
.gofo-tb-subtab.is-active {
    border-color: rgba(184, 204, 59, .5);
    background: rgba(184, 204, 59, .16);
    color: var(--gofo-accent-ink) !important;
    font-weight: 400 !important;
}
html.dark .gofo-tb-subtab.is-active, .dark-theme .gofo-tb-subtab.is-active, [data-theme="dark"] .gofo-tb-subtab.is-active { color: var(--gofo-accent) !important; }

.gofo-tb-copy {
    font-size: 9.6px !important;
    line-height: 1.4 !important;
    padding: 2.4px 8.8px !important;
    margin: 0 0 0 8px !important;
    border-radius: 999px;
    border: 1px solid var(--gofo-glass-border);
    background: var(--gofo-glass-fill);
    color: var(--muted-color);
    cursor: pointer;
}
.gofo-tb-copy:hover { border-color: rgba(184, 204, 59, .5); color: var(--main-color); }

/* ---------- 相关深度内容 + 猜你想用（在结果区下方，工具本身的介绍性内容） ---------- */

.gofo-tb-related,
.gofo-tb-guess {
    margin-top: 22.4px !important;
    padding-top: 19.2px !important;
    border-top: 1px solid var(--gofo-glass-border);
    max-width: 544px;
}

.gofo-tb-related-title {
    font-size: 10.4px !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    line-height: 1.4 !important;
    color: var(--muted-color);
    margin: 0 0 9.6px !important;
}

.gofo-tb-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px !important;
}

.gofo-tb-related-card {
    display: flex;
    flex-direction: column;
    gap: 4.8px !important;
    background: var(--gofo-glass-fill);
    -webkit-backdrop-filter: var(--gofo-blur);
    backdrop-filter: var(--gofo-blur);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 9.6px;
    padding: 9.6px 11.2px !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease;
}
.gofo-tb-related-card:hover { border-color: rgba(184, 204, 59, .5); background: var(--gofo-glass-fill-hover); }

.gofo-tb-related-tag {
    font-size: 8.8px !important;
    line-height: 1.4 !important;
    color: var(--gofo-accent-ink);
}
html.dark .gofo-tb-related-tag, .dark-theme .gofo-tb-related-tag, [data-theme="dark"] .gofo-tb-related-tag { color: var(--gofo-accent); }

.gofo-tb-related-name {
    font-size: 11.2px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--main-color);
}

.gofo-tb-guess-row { display: flex; flex-wrap: wrap; gap: 6.4px !important; }
.gofo-tb-guess-item {
    background: var(--gofo-glass-fill);
    -webkit-backdrop-filter: var(--gofo-blur);
    backdrop-filter: var(--gofo-blur);
    border: 1px solid var(--gofo-glass-border);
    border-radius: 999px;
    padding: 6.4px 12.8px !important;
    font-size: 10.4px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: var(--main-color);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.gofo-tb-guess-item:hover { border-color: rgba(184, 204, 59, .5); background: var(--gofo-glass-fill-hover); }

/* ---------- 移动端：书签列表变横向滚动，面板在下方 ---------- */

@media (max-width: 900px) {
    .gofo-tb-shelf-row { flex-direction: column; }
    .gofo-tb-toollist {
        flex: 0 0 auto; /* 桌面端的 flex:0 0 208px 在 row 布局里是"宽度208px"，父级变 column 后会变成"高度208px"，必须重置 */
        position: static;
        flex-direction: row;
        align-items: flex-start; /* 关键：row 方向下默认 stretch 会把卡片撑到和最高的兄弟一样高 */
        overflow-x: auto;
        width: 100%;
        padding-bottom: 4px;
    }
    .gofo-tb-toolitem { flex: 0 0 176px; height: auto; }
    .gofo-tb-detail { padding: 17.6px 19.2px !important; }
    .gofo-toolbox::before { display: none; } /* 移动端关掉光晕，省性能 */
}

/* backdrop-filter 不支持时的兜底（老浏览器/部分Android WebView） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gofo-tb-card, .gofo-tb-cattab, .gofo-tb-toolitem, .gofo-tb-detail, .gofo-tb-submit,
    .gofo-tb-field textarea, .gofo-tb-field input[type="text"] {
        background: var(--muted-bg-color, rgba(40,40,40,.9));
    }
}