/* toolsnav/css/blog.css · 王牌站长笔记（干货专区）沿用主站紫粉渐变风格 */
:root{
  --bk-primary:#8b5cf6; --bk-dark:#6a3df4; --bk-pink:#ec4899;
  --bk-text:#1c2333; --bk-muted:#7a8094; --bk-border:#ece9f7;
  --bk-bg:#f6f5fb; --bk-card:#fff;
  --bk-grad:linear-gradient(90deg,#6a3df4,#ec4899);
  --bk-radius:16px;
}
.bk-page{background:var(--bk-bg);min-height:70vh}
.bk-container{max-width:1180px;margin:0 auto;padding:0 16px}

/* 页面顶部条 */
.bk-hero{background:linear-gradient(135deg,#6a3df4 0%,#8b5cf6 40%,#ec4899 100%);color:#fff;padding:44px 0 40px;position:relative;overflow:hidden}
.bk-hero::after{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:rgba(255,255,255,.1);border-radius:50%}
.bk-hero .bk-kicker{display:inline-block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);font-size:12px;font-weight:700;padding:4px 14px;border-radius:20px;margin-bottom:14px}
.bk-hero h1{font-size:32px;font-weight:900;margin-bottom:10px;position:relative;z-index:1}
.bk-hero p{opacity:.95;font-size:15px;max-width:640px;position:relative;z-index:1}

/* 搜索条 */
.bk-search{display:flex;gap:8px;max-width:560px;margin-top:18px;background:#fff;border-radius:999px;padding:5px;position:relative;z-index:1}
.bk-search input{flex:1;border:none;outline:none;padding:10px 18px;font-size:15px;background:transparent;color:var(--bk-text);min-width:0}
.bk-search button{background:var(--bk-grad);color:#fff;border:none;border-radius:999px;padding:0 24px;font-size:14px;font-weight:700;cursor:pointer}

/* 分类导航 */
.bk-cats{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 6px}
.bk-cat{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bk-border);background:#fff;color:#444;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.16s}
.bk-cat em{font-style:normal;background:#f0ecfb;color:var(--bk-dark);border-radius:10px;padding:0 7px;font-size:12px}
.bk-cat:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(138,92,246,.18)}
.bk-cat.active{background:var(--bk-grad);color:#fff;border-color:transparent}
.bk-cat.active em{background:rgba(255,255,255,.25);color:#fff}

/* 布局：主内容 + 侧边 */
.bk-layout{display:grid;grid-template-columns:1fr 300px;gap:26px;padding:26px 0 40px;align-items:start}

/* 文章卡片 */
.bk-card{display:flex;gap:18px;background:var(--bk-card);border:1px solid var(--bk-border);border-radius:var(--bk-radius);padding:18px;margin-bottom:18px;transition:.18s}
.bk-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(106,61,244,.14)}
.bk-card-cover{width:200px;height:132px;border-radius:12px;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#efeafc,#fde7f3)}
.bk-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bk-card-cover .bk-no-cover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:38px}
.bk-card-body{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--bk-muted);margin-bottom:8px;flex-wrap:wrap}
.bk-badge{background:linear-gradient(90deg,#6a3df4,#ec4899);color:#fff;border-radius:6px;padding:2px 9px;font-size:11px;font-weight:700}
.bk-series-tag{background:#f0ecfb;color:var(--bk-dark);border-radius:6px;padding:2px 9px;font-size:11px;font-weight:700}
.bk-card h2{font-size:19px;font-weight:800;line-height:1.4;margin-bottom:8px;color:var(--bk-text)}
.bk-card h2 a:hover{color:var(--bk-dark)}
.bk-excerpt{font-size:14px;color:#5b6172;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-card-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--bk-muted)}

/* 侧边栏 */
.bk-side-box{background:#fff;border:1px solid var(--bk-border);border-radius:var(--bk-radius);padding:18px;margin-bottom:20px}
.bk-side-box h3{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:7px}
.bk-side-box h3::after{content:'';flex:1;height:2px;background:var(--bk-grad);border-radius:2px;opacity:.5}
.bk-hot-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed #eef0f7}
.bk-hot-item:last-child{border-bottom:none}
.bk-rank{width:22px;height:22px;border-radius:7px;background:#efeafc;color:var(--bk-dark);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk-hot-item:nth-child(-n+4) .bk-rank{background:var(--bk-grad);color:#fff}
.bk-hot-item a{font-size:13.5px;font-weight:600;color:#333;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-hot-item a:hover{color:var(--bk-dark)}
.bk-mini-link{display:block;font-size:13.5px;color:#444;padding:8px 0;border-bottom:1px dashed #eef0f7;font-weight:600}
.bk-mini-link:last-child{border-bottom:none}
.bk-mini-link:hover{color:var(--bk-dark)}

/* 广告位（统一占位 + 标注广告） */
.bk-ad{margin:0 0 20px;border:1.5px dashed #d8cbf2;background:linear-gradient(135deg,#faf7ff,#fef3fa);border-radius:14px;text-align:center;color:#a99bd4;font-size:13px;padding:26px 16px;position:relative}
.bk-ad .bk-ad-tag{position:absolute;top:7px;left:11px;font-size:11px;letter-spacing:1px;color:#b6a6e2}
.bk-ad.live{border-style:solid;background:#fff;padding:0;overflow:hidden}
.bk-ad.live .bk-ad-tag{background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:2px 8px}
.bk-ad.live img,.bk-ad.live iframe{width:100%;display:block;border:none}

/* 分页 */
.bk-pager{display:flex;gap:8px;justify-content:center;margin:26px 0 10px;flex-wrap:wrap}
.bk-pager button{border:1px solid var(--bk-border);background:#fff;color:#555;border-radius:9px;padding:8px 14px;font-size:13.5px;cursor:pointer;font-weight:600}
.bk-pager button.cur{background:var(--bk-grad);color:#fff;border-color:transparent}
.bk-pager button:disabled{opacity:.45;cursor:not-allowed}

/* 空状态 */
.bk-empty{text-align:center;padding:70px 20px;color:var(--bk-muted)}
.bk-empty .bk-empty-ico{font-size:46px;margin-bottom:12px}

/* ===== 文章详情 ===== */
.bk-detail-layout{display:grid;grid-template-columns:1fr 300px;gap:26px;padding:26px 0 40px;align-items:start}
.bk-article{background:#fff;border:1px solid var(--bk-border);border-radius:var(--bk-radius);padding:34px}
.bk-article-head h1{font-size:28px;font-weight:900;line-height:1.35;margin:14px 0 16px;color:var(--bk-text)}
.bk-article-meta{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--bk-muted);flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--bk-border)}
.bk-article-cover{margin:22px 0;border-radius:14px;overflow:hidden}
.bk-article-cover img{width:100%;display:block}
.bk-content{font-size:16px;color:#2c3142;line-height:1.9}
.bk-content p{margin:18px 0}
.bk-content h2{font-size:22px;font-weight:800;margin:32px 0 14px;padding-left:12px;border-left:5px solid var(--bk-primary);color:#222}
.bk-content h3{font-size:18px;font-weight:800;margin:26px 0 12px;color:#2a2f40}
.bk-content ul,.bk-content ol{margin:16px 0 16px 4px;padding-left:22px}
.bk-content li{margin:8px 0}
.bk-content blockquote{border-left:4px solid var(--bk-pink);background:#fdf4fa;border-radius:0 10px 10px 0;padding:14px 18px;margin:22px 0;color:#6b4f63;font-size:15px}
.bk-content a{color:var(--bk-dark);font-weight:600;border-bottom:1px solid #d8cbf2}
.bk-content img{border-radius:12px;margin:22px auto}
.bk-content code{background:#f3f0fb;color:#7c3aed;border-radius:6px;padding:2px 7px;font-size:14px}
.bk-content pre{background:#1e1b31;color:#e7e2f7;border-radius:12px;padding:18px;overflow:auto;margin:22px 0}
.bk-content pre code{background:transparent;color:inherit;padding:0}
.bk-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--bk-border)}
.bk-tag-pill{background:#f0ecfb;color:var(--bk-dark);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
.bk-article-nav{display:flex;justify-content:space-between;gap:14px;margin-top:26px}
.bk-article-nav a{flex:1;border:1px solid var(--bk-border);border-radius:12px;padding:14px 16px;font-size:13.5px;color:#444;background:#fcfbff}
.bk-article-nav a:hover{border-color:var(--bk-primary)}
.bk-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.bk-related-grid a{background:#faf9ff;border:1px solid #ece9f8;border-radius:12px;padding:14px;font-size:14px;font-weight:600;color:#333;line-height:1.5}
.bk-related-grid a:hover{border-color:var(--bk-primary);color:var(--bk-dark)}

/* 面包屑 */
.bk-crumb{font-size:13px;color:var(--bk-muted);padding:16px 0 0}
.bk-crumb a{color:var(--bk-muted)}
.bk-crumb a:hover{color:var(--bk-dark)}

/* 简单页面（关于/隐私/招商） */
.bk-simple{background:#fff;border:1px solid var(--bk-border);border-radius:var(--bk-radius);padding:36px;margin:26px 0 40px}
.bk-simple h1{font-size:26px;font-weight:900;margin-bottom:8px}
.bk-simple h2{font-size:19px;font-weight:800;margin:28px 0 12px}
.bk-simple p{font-size:15px;color:#3a3f50;line-height:1.9;margin:12px 0}
.bk-simple li{font-size:15px;color:#3a3f50;line-height:1.9;margin:8px 0}

/* 招商套餐 */
.bk-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
.bk-price-card{border:1px solid var(--bk-border);border-radius:16px;padding:24px;text-align:center;background:#fcfbff;position:relative}
.bk-price-card.hot{border:2px solid var(--bk-primary);box-shadow:0 14px 30px rgba(138,92,246,.16)}
.bk-price-card .bk-hot-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bk-grad);color:#fff;font-size:12px;font-weight:700;padding:3px 14px;border-radius:999px}
.bk-price-card h3{font-size:17px;font-weight:800;margin-bottom:10px}
.bk-price-card .bk-price{font-size:30px;font-weight:900;color:var(--bk-dark);margin:10px 0}
.bk-price-card .bk-price small{font-size:13px;color:#999;font-weight:500}
.bk-price-card ul{list-style:none;text-align:left;margin:14px 0;padding:0}
.bk-price-card li{font-size:13.5px;color:#555;padding:6px 0;border-bottom:1px dashed #eef0f7}
.bk-contact-band{background:linear-gradient(135deg,#6a3df4,#ec4899);color:#fff;border-radius:16px;padding:28px;text-align:center;margin-top:24px}
.bk-contact-band a{color:#ffe9a8;font-weight:800}
.bk-contact-card{display:flex;align-items:center;gap:28px;background:linear-gradient(135deg,#f5f3ff,#fdf2f8);border:1px solid #ede9fe;border-radius:16px;padding:28px;margin-top:24px}
.bk-contact-text{flex:1;min-width:0}
.bk-contact-text h3{margin:0 0 10px;font-size:20px;color:#4c1d95}
.bk-contact-text>p{margin:0 0 14px;color:#5b6472;font-size:14px;line-height:1.7}
.bk-contact-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.bk-contact-list li{font-size:14px;color:#374151;display:flex;align-items:center;gap:10px}
.bk-contact-list a{color:#6a3df4;font-weight:600;text-decoration:none}
.bk-contact-list a:hover{text-decoration:underline}
.bk-ci{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:2px 8px;background:#fff;border:1px solid #ddd6fe;border-radius:8px;font-size:12px;color:#6a3df4;font-weight:700}
.bk-contact-note{font-size:12px;color:#9ca3af;margin:0}
.bk-contact-qr{flex-shrink:0;text-align:center}
.bk-contact-qr img{width:200px;height:200px;border-radius:14px;border:1px solid #ede9fe;background:#fff;display:block}
.bk-contact-qr p{margin:8px 0 0;font-size:12px;color:#6a3df4;font-weight:600}
@media(max-width:720px){
  .bk-contact-card{flex-direction:column-reverse;gap:18px;padding:20px;text-align:center}
  .bk-contact-list li{justify-content:center}
  .bk-contact-qr img{width:180px;height:180px;margin:0 auto}
}

/* 首页入口卡片 */
.bk-home-band{background:#fff;border:1px solid var(--bk-border);border-radius:20px;margin:26px 0;padding:0;overflow:hidden;display:grid;grid-template-columns:300px 1fr}
.bk-home-band .bk-hb-visual{background:linear-gradient(135deg,#6a3df4,#ec4899);display:flex;align-items:center;justify-content:center;font-size:90px;color:#fff}
.bk-home-band .bk-hb-body{padding:26px 28px}
.bk-home-band .bk-hb-kicker{font-size:12px;font-weight:800;color:var(--bk-dark);letter-spacing:1px}
.bk-home-band h2{font-size:24px;font-weight:900;margin:8px 0;color:#222}
.bk-home-band p{font-size:14px;color:#666;margin-bottom:14px}
.bk-hb-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:16px}
.bk-hb-list a{font-size:13.5px;color:#3f4456;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-hb-list a::before{content:'📝 '}
.bk-hb-list a:hover{color:var(--bk-dark)}
.bk-btn{display:inline-block;background:var(--bk-grad);color:#fff;border-radius:999px;padding:10px 24px;font-size:14px;font-weight:700}
.bk-btn.outline{background:#fff;color:var(--bk-dark);border:1.5px solid var(--bk-primary)}

/* 通用板块标题（首页新增板块复用） */
.bk-sec-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.bk-sec-head .bk-sec-ico{font-size:22px}
.bk-sec-head h2{font-size:20px;font-weight:900;color:#1f2430;margin:0}
.bk-sec-head .bk-sec-sub{font-size:12.5px;color:#9aa0b4;font-weight:600;margin-left:2px}

/* 王牌矩阵：五站导航墙 */
.bk-matrix{background:#fff;border:1px solid var(--bk-border);border-radius:20px;padding:24px 24px 22px;margin:26px 0}
.bk-matrix-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bk-mx-card{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--bk-border);border-radius:16px;padding:16px 14px 14px;text-decoration:none;overflow:hidden;transition:.18s}
.bk-mx-card::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--mxg)}
.bk-mx-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(80,50,180,.10);border-color:#c8bcf0}
.bk-mx-ico{width:44px;height:44px;border-radius:12px;background:var(--mxg);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.bk-mx-txt{display:flex;flex-direction:column;gap:3px}
.bk-mx-txt b{font-size:15px;font-weight:800;color:#23283a}
.bk-mx-txt i{font-style:normal;font-size:12px;color:#8b5cf6;font-weight:600}
.bk-mx-txt u{text-decoration:none;font-size:12px;color:#9aa0b4;line-height:1.5}
.bk-mx-go{margin-top:2px;font-size:12px;font-weight:700;color:var(--bk-dark);background:#f4f0ff;border-radius:999px;padding:4px 10px;text-align:center}
.bk-mx-card:hover .bk-mx-go{background:var(--mxg);color:#fff}

/* 本周热门工具榜单 */
.bk-hotsec{background:#fff;border:1px solid var(--bk-border);border-radius:20px;padding:24px 24px 22px;margin:26px 0}
.bk-hot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bk-hot-card{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bk-border);border-radius:14px;padding:12px 14px;text-decoration:none;transition:.16s}
.bk-hot-card:hover{border-color:#c8bcf0;box-shadow:0 8px 18px rgba(80,50,180,.08);transform:translateY(-2px)}
.bk-hot-rank{width:26px;height:26px;border-radius:8px;background:#eef0f7;color:#8b8fa5;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk-hot-rank.top{background:var(--bk-grad);color:#fff}
.bk-hot-ico{font-size:24px;flex-shrink:0}
.bk-hot-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-hot-info b{font-size:14px;font-weight:800;color:#23283a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-hot-info i{font-style:normal;font-size:12px;color:#9aa0b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-hotsec-empty{color:#9aa0b4;font-size:14px;text-align:center;padding:30px 0}

/* 加载骨架 */
.bk-skeleton-line{height:14px;border-radius:7px;background:linear-gradient(90deg,#f0eef7,#f7f5fc,#f0eef7);background-size:200% 100%;animation:bkShimmer 1.3s infinite;margin:10px 0}
@keyframes bkShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 移动端适配 */
@media (max-width:900px){
  .bk-layout,.bk-detail-layout{grid-template-columns:1fr}
  .bk-home-band{grid-template-columns:1fr}
  .bk-home-band .bk-hb-visual{padding:30px}
  .bk-price-grid{grid-template-columns:1fr}
  .bk-related-grid{grid-template-columns:1fr}
  .bk-matrix-grid{grid-template-columns:repeat(2,1fr)}
  .bk-hot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bk-card{flex-direction:column}
  .bk-card-cover{width:100%;height:170px}
  .bk-hero h1{font-size:25px}
  .bk-article{padding:22px}
  .bk-article-head h1{font-size:22px}
  .bk-hb-list{grid-template-columns:1fr}
  .bk-matrix-grid{grid-template-columns:1fr}
  .bk-hot-grid{grid-template-columns:1fr}
  .bk-simple{padding:22px}
}