/* ============================================================
 * 未来函数检测工具页样式
 * 站点风格：灰底 #f5f5f5 + 白色卡片 + 品牌蓝 #2c9be8 / #3fa9e1
 * PC 固定 1200px 居中，不做手机端自适应
 * ============================================================ */

/* ---------- 面包屑 ---------- */
.tool-crumb {
    font-size: 12px;
    color: #999;
    padding: 12px 0;
}

.tool-crumb a { color: #999; }
.tool-crumb a:hover { color: #2c9be8; }
.tool-crumb .sep { margin: 0 6px; color: #ccc; }

/* ---------- 页面头卡片 ---------- */
.tool-head {
    background: #fff;
    border: 2px solid #aed6f2;
    border-radius: 6px;
    color: #555;
    padding: 30px 34px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

/* 背景装饰：右侧流星线（4 条错时划落的蓝色流星，纯 CSS 动画） */
.tool-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tool-meteors i {
    position: absolute;
    top: -60px;
    width: 2px;
    background: linear-gradient(to top, rgba(44,155,232,.95), rgba(44,155,232,0));
    border-radius: 2px;
    opacity: 0;
    transform: rotate(35deg);
    animation: tool-meteor 5.5s linear infinite;
}
.tool-meteors i:nth-child(1) { right: 90px;  height: 70px; animation-delay: 0s; }
.tool-meteors i:nth-child(2) { right: 190px; height: 90px; animation-delay: 1.4s; }
.tool-meteors i:nth-child(3) { right: 290px; height: 60px; animation-delay: 2.8s; }
.tool-meteors i:nth-child(4) { right: 400px; height: 80px; animation-delay: 4.1s; }
@keyframes tool-meteor {
    0%   { transform: translate(0, 0) rotate(35deg); opacity: 0; }
    6%   { opacity: 1; }
    45%  { opacity: 1; }
    60%  { transform: translate(-300px, 380px) rotate(35deg); opacity: 0; }
    100% { transform: translate(-300px, 380px) rotate(35deg); opacity: 0; }
}

.tool-head h1 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: #333;
}

.tool-head p {
    font-size: 13px;
    line-height: 1.8;
    color: #888;
    max-width: 640px;
}

.tool-head .tool-chips {
    margin-top: 16px;
    display: flex;
    gap: 10px;
}

.tool-head .tool-chips span {
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 100px;
    color: #2c9be8;
    background: #f2f9fe;
    border: 1px solid #d5e9f8;
}

/* ---------- 主布局：左内容 + 右参考栏 ---------- */
.tool-main { width: 876px; float: left; }
.tool-side { width: 308px; float: right; }

.tool-box {
    background: #fdfdfd;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

.tool-box-hd {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
}

.tool-box-hd::before {
    content: '';
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: #2c9be8;
    margin-right: 8px;
}

.tool-box-hd .hd-name { font-size: 15px; font-weight: bold; color: #333; }
.tool-box-hd .hd-tip  { font-size: 12px; color: #999; margin-left: auto; }

.tool-box-bd { padding: 18px; }

/* ---------- 源码输入 ---------- */
.tool-textarea {
    width: 100%;
    min-height: 380px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafbfd;
    padding: 14px 16px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #333;
    resize: vertical;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.tool-textarea:focus {
    border-color: #2c9be8;
    box-shadow: 0 0 0 3px rgba(44, 155, 232, .12);
    background: #fff;
}

.tool-textarea::placeholder { color: #b4bac8; }

/* 工具条：按钮 + 字数统计 */
.tool-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.tool-btn {
    font-size: 14px;
    padding: 10px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: 1px;
}

.tool-btn-go {
    background: #2c9be8;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(44, 155, 232, .3);
}

.tool-btn-go:hover { background: #1d8bd8; box-shadow: 0 4px 16px rgba(44, 155, 232, .4); }

.tool-btn-plain {
    background: #fff;
    color: #666;
    border: 1px solid #dcdfe6;
}

.tool-btn-plain:hover { border-color: #2c9be8; color: #2c9be8; }

.tool-charcount {
    margin-left: auto;
    font-size: 12px;
    color: #999;
}

/* ---------- 检测结果 ---------- */
.tool-result { display: none; }
.tool-result.show { display: block; animation: tool-rise .35s ease; }

@keyframes tool-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 结论横幅 */
.tool-verdict {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: bold;
}

.tool-verdict .v-ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-verdict.ok {
    background: #f0faf4;
    border: 1px solid #b7e6c8;
    color: #1e9e56;
}

.tool-verdict.ok .v-ico { background: #30a46c; }

.tool-verdict.ng {
    background: #fdf1f1;
    border: 1px solid #f3c2c4;
    color: #d9363e;
}

.tool-verdict.ng .v-ico { background: #e5484d; }

.tool-verdict .v-sub { font-size: 12px; font-weight: normal; color: #888; margin-left: auto; }

/* 统计小卡 */
.tool-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.tool-stat {
    flex: 1;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #fafbfd;
    text-align: center;
    padding: 12px 0;
}

.tool-stat .s-num { font-size: 22px; font-weight: bold; color: #333; line-height: 1.2; }
.tool-stat .s-num.red { color: #e5484d; }
.tool-stat .s-num.green { color: #30a46c; }
.tool-stat .s-label { font-size: 12px; color: #999; margin-top: 2px; }

/* 命中函数代码高亮预览 */
.tool-preview {
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #fafbfd;
    max-height: 150px;
    overflow-y: auto;
    padding: 12px 14px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.7;
    color: #666;
    word-break: break-all;
    margin-bottom: 16px;
    white-space: pre-wrap;
}

.tool-preview mark {
    background: #ffe3e4;
    color: #d9363e;
    font-weight: bold;
    border-radius: 2px;
    padding: 0 2px;
}

/* 函数扫描网格 */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tool-fn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: Consolas, monospace;
    font-size: 12px;
    animation: tool-rise .3s ease forwards;
    opacity: 0;
}

.tool-fn .f-ico { width: 15px; text-align: center; flex-shrink: 0; }

.tool-fn.is-hit {
    background: #fdf1f1;
    border: 1px solid #f3c2c4;
    color: #d9363e;
    font-weight: bold;
}

.tool-fn.is-miss {
    background: #fafbfd;
    border: 1px solid #f0f0f0;
    color: #b4bac8;
}

/* ---------- 右侧：未来函数参考 ---------- */
.ref-box .tool-box-bd { max-height: 720px; overflow-y: auto; padding: 12px 14px; }
.ref-box .tool-box-bd::-webkit-scrollbar { width: 5px; }
.ref-box .tool-box-bd::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }

.ref-cat { margin-bottom: 14px; }
.ref-cat:last-child { margin-bottom: 0; }

.ref-cat-name {
    font-size: 12px;
    font-weight: bold;
    color: #2c9be8;
    padding-bottom: 5px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #e8e8e8;
}

.ref-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
}

.ref-item:hover { background: #f5f9fd; }

.ref-fn {
    font-family: Consolas, monospace;
    font-size: 12px;
    font-weight: bold;
    color: #e5484d;
    min-width: 108px;
    flex-shrink: 0;
}

.ref-desc { font-size: 12px; color: #999; line-height: 1.5; }

/* ---------- 底部科普卡片 ---------- */
.tool-faq h2 { font-size: 15px; font-weight: bold; color: #333; margin-bottom: 10px; }
.tool-faq p { font-size: 13px; color: #666; line-height: 1.9; margin-bottom: 8px; }
.tool-faq strong { color: #e5484d; }

/* ============================================================
 * 公式美化工具页（.bf-* 前缀；复用 .tool-box / .tool-btn 等基础样式）
 * ============================================================ */

/* 按钮组 */
.bf-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.bf-bar .tool-btn:disabled { opacity: .7; cursor: not-allowed; }

/* 美化中 loading：按钮左侧旋转圈 */
.bf-loading { position: relative; padding-left: 34px !important; }
.bf-loading::before {
    content: '';
    position: absolute; left: 12px; top: 50%;
    width: 13px; height: 13px; margin-top: -7px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    border-radius: 50%;
    animation: bf-spin .7s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* 清空/下载/复制 三按钮固定右对齐到结果框右缘（清空为组内第一个，auto 外边距钉住整组）；
   状态文字放在「开始美化」右侧的空闲区，超长省略，不挤动按钮组 */
#btnClear { margin-left: auto; }
/* 状态文字 */
.bf-status { font-size: 12px; color: #999; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bf-status.err { color: #e5484d; }
.bf-status.ok  { color: #30a46c; }

/* 左右分栏 */
.bf-split { display: flex; gap: 12px; }
.bf-pane { flex: 1; min-width: 0; }
.bf-label { font-size: 13px; color: #888; margin-bottom: 6px; }
.bf-textarea {
    width: 100%; height: 420px; box-sizing: border-box;
    border: 1px solid #e8e8e8; border-radius: 4px;
    padding: 12px; background: #fff;
    font: 13px/1.9 Consolas, Menlo, 'Courier New', monospace;
    color: #333; outline: none; resize: vertical;
    white-space: pre; overflow: auto;
}
.bf-textarea:focus { border-color: #2c9be8; }
.bf-textarea[readonly] { background: #fafcff; }
.bf-textarea::placeholder { color: #b4bac8; }

/* 处理统计 */
.bf-stats { margin-top: 12px; font-size: 12px; color: #999; }
.bf-stats b { color: #2c9be8; margin: 0 2px; }

/* 温馨提示 */
.bf-notice {
    margin-top: 14px; font-size: 12px; color: #b48a3c;
    background: #fdf9ef; border: 1px solid #f5e6c8; border-radius: 4px;
    padding: 10px 14px; line-height: 1.8;
}

/* 右侧规则清单 / 相关工具 */
.bf-rules { list-style: none; font-size: 13px; color: #666; }
.bf-rules li { padding: 7px 0 7px 18px; border-bottom: 1px dashed #eee; position: relative; }
.bf-rules li:last-child { border-bottom: none; }
.bf-rules li::before {
    content: ''; position: absolute; left: 0; top: 14px;
    width: 6px; height: 6px; border-radius: 50%; background: #2c9be8;
}
.bf-link { display: block; font-size: 13px; color: #2c9be8; padding: 4px 0; }
.bf-link:hover { text-decoration: underline; }

/* 移动端简单适配：分栏变上下 */
@media (max-width: 860px) {
    .bf-split { flex-direction: column; }
    .bf-textarea { height: 260px; }
}