/* ============================================================
   模板: blog-card —— 卡片瀑布博客
   浅灰蓝底 + 白色圆角卡片 + 柔和阴影 + 靛紫→玫粉渐变强调
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --ink:#1f2937;
    --ink2:#4b5563;
    --muted:#8b95a5;
    --line:#e8ecf4;
    --a1:#6366f1;
    --a2:#ec4899;
    --grad:linear-gradient(135deg,#6366f1 0%,#ec4899 100%);
    --grad-soft:linear-gradient(135deg,rgba(99,102,241,.12),rgba(236,72,153,.12));
    --shadow:0 6px 20px rgba(31,41,55,.06);
    --shadow-h:0 16px 36px rgba(31,41,55,.13);
    --r:8px;
    --r5:5px;
    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

body{
    background:var(--bg);color:var(--ink2);
    font-family:var(--sans);font-size:15px;line-height:1.8;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none;transition:color .18s,opacity .18s}
a:hover{color:var(--a1)}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.4;letter-spacing:-.2px}
img{max-width:100%;height:auto}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.grad-text{
    background:var(--grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}

/* 顶部渐变细条 */
.cb-topline{height:4px;background:var(--grad)}

/* ---------------- 顶栏 ---------------- */
.cb-head{
    position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.cb-head-in{display:flex;align-items:center;gap:24px;height:72px}
.cb-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.cb-logo i{
    width:38px;height:38px;border-radius:var(--r5);background:var(--grad);
    display:flex;align-items:center;justify-content:center;font-style:normal;
    font-weight:800;font-size:18px;color:#fff;box-shadow:0 6px 16px rgba(99,102,241,.28);
}
.cb-logo span{display:flex;flex-direction:column;line-height:1.25}
.cb-logo b{font-size:18px;font-weight:800;color:var(--ink)}
.cb-logo em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:1.5px}
.cb-nav{display:flex;gap:6px;font-size:14px}
.cb-nav a{color:var(--ink2);padding:6px 13px;border-radius:20px;font-weight:500}
.cb-nav a:hover{background:#f1f3fa;color:var(--a1)}
.cb-nav a.on{background:var(--grad-soft);color:var(--a1);font-weight:700}
.cb-form{margin-left:auto;display:flex;align-items:center;gap:8px}
.cb-form input{
    width:200px;padding:9px 15px;font-size:13.5px;color:var(--ink);outline:none;
    background:#f4f6fb;border:1px solid transparent;border-radius:20px;
}
.cb-form input::placeholder{color:var(--muted)}
.cb-form input:focus{background:#fff;border-color:rgba(99,102,241,.45);box-shadow:0 0 0 4px rgba(99,102,241,.08)}
.cb-form button{
    padding:9px 20px;font-size:13.5px;font-weight:600;border:none;cursor:pointer;
    border-radius:20px;background:var(--grad);color:#fff;
}
.cb-form button:hover{box-shadow:0 8px 20px rgba(236,72,153,.28)}

/* ---------------- 渐变 hero（首页） ---------------- */
.cb-hero{background:var(--grad);color:#fff;padding:46px 0 52px;position:relative;overflow:hidden}
.cb-hero::after{
    content:"";position:absolute;right:-80px;top:-90px;width:320px;height:320px;
    border-radius:50%;background:rgba(255,255,255,.13);
}
.cb-hero h1{color:#fff;font-size:33px;margin-bottom:12px;position:relative;z-index:1}
.cb-hero p{color:rgba(255,255,255,.88);font-size:15px;max-width:620px;margin-bottom:24px;position:relative;z-index:1}
.cb-hero-form{display:flex;gap:10px;max-width:520px;position:relative;z-index:1}
.cb-hero-form input{
    flex:1;padding:12px 18px;font-size:14px;border:none;outline:none;
    border-radius:var(--r5);background:rgba(255,255,255,.96);color:var(--ink);
}
.cb-hero-form button{
    padding:12px 26px;font-size:14px;font-weight:700;cursor:pointer;border:none;
    border-radius:var(--r5);background:#1f2937;color:#fff;
}
.cb-hero-stats{display:flex;gap:26px;margin-top:22px;font-size:13px;color:rgba(255,255,255,.85);position:relative;z-index:1}

/* ---------------- 骨架 ---------------- */
.cb-main{padding:32px 0 44px}
.cb-cols{display:flex;gap:26px;align-items:flex-start}
.cb-content{flex:1;min-width:0}
.cb-side{width:312px;flex-shrink:0}

.cb-sec{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.cb-sec h2{font-size:20px}
.cb-sec .bar{width:5px;height:20px;border-radius:3px;background:var(--grad)}
.cb-sec .more{margin-left:auto;font-size:13px;color:var(--muted)}

/* ---------------- 瀑布流卡片 ---------------- */
.cb-masonry{column-count:2;column-gap:20px}
.cb-card{
    display:inline-block;width:100%;break-inside:avoid;margin:0 0 20px;
    background:var(--card);border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow);border:1px solid rgba(232,236,244,.9);
    transition:transform .22s,box-shadow .22s;
}
.cb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.cb-cover{
    height:146px;display:flex;align-items:center;justify-content:center;
    font-size:44px;font-weight:800;color:#fff;position:relative;
    background:var(--grad);
}
.cb-cover.c2{background:linear-gradient(135deg,#38bdf8,#6366f1)}
.cb-cover.c3{background:linear-gradient(135deg,#34d399,#0ea5e9)}
.cb-cover.c4{background:linear-gradient(135deg,#fbbf24,#f97316)}
.cb-cover.c5{background:linear-gradient(135deg,#f472b6,#a855f7)}
.cb-cover em{
    position:absolute;left:12px;top:12px;font-style:normal;font-size:11px;font-weight:700;
    letter-spacing:1px;padding:3px 11px;border-radius:20px;
    background:rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;
}
.cb-card-body{padding:16px 18px 18px}
.cb-card-body h3{font-size:16.5px;margin-bottom:8px}
.cb-card-body p{font-size:13.5px;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cb-card-meta{
    display:flex;align-items:center;gap:12px;margin-top:13px;padding-top:12px;
    border-top:1px solid var(--line);font-size:12px;color:var(--muted);
}
.cb-pill{
    font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;
    background:var(--grad-soft);color:var(--a1);
}

/* ---------------- 列表 ---------------- */
.cb-list{display:flex;flex-direction:column;gap:16px}
.cb-row{
    display:flex;gap:18px;background:var(--card);border-radius:var(--r);
    padding:18px 20px;box-shadow:var(--shadow);border:1px solid rgba(232,236,244,.9);
    transition:transform .2s,box-shadow .2s;
}
.cb-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.cb-thumb{
    width:76px;height:76px;flex-shrink:0;border-radius:var(--r5);
    background:var(--grad);color:#fff;font-size:28px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
}
.cb-thumb.c2{background:linear-gradient(135deg,#38bdf8,#6366f1)}
.cb-thumb.c3{background:linear-gradient(135deg,#34d399,#0ea5e9)}
.cb-row-body{flex:1;min-width:0}
.cb-row-body h3{font-size:17px;margin-bottom:6px}
.cb-row-body p{font-size:13.5px;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cb-row-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:12px;color:var(--muted)}

/* ---------------- 文章详情 ---------------- */
.cb-art{
    background:var(--card);border-radius:var(--r);padding:34px 38px;
    box-shadow:var(--shadow);border:1px solid rgba(232,236,244,.9);
}
.cb-art-head{padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.cb-crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.cb-crumb a{color:var(--muted)}
.cb-crumb a:hover{color:var(--a1)}
.cb-art-head h1{font-size:29px;margin-bottom:16px;line-height:1.4}
.cb-chips{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px}
.cb-chips span{padding:4px 13px;border-radius:20px;background:#f4f6fb;color:var(--ink2)}
.cb-chips span.hl{background:var(--grad-soft);color:var(--a1);font-weight:600}
.cb-entry{font-size:16px;line-height:2;color:var(--ink2)}
.cb-entry p{margin-bottom:18px}
.cb-entry h2,.cb-entry h3{margin:28px 0 12px}
.cb-entry a{color:var(--a1);border-bottom:1px solid rgba(99,102,241,.4)}
.cb-entry blockquote{
    background:#f8f9ff;border-left:3px solid var(--a1);border-radius:0 var(--r5) var(--r5) 0;
    padding:14px 20px;margin:20px 0;color:var(--ink2);
}
.cb-entry img{border-radius:var(--r5)}
.cb-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.cb-tags a{
    font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:20px;
    background:#f4f6fb;color:var(--ink2);
}
.cb-tags a:hover{background:var(--grad);color:#fff}

/* ---------------- 侧栏 ---------------- */
.cb-widget{
    background:var(--card);border-radius:var(--r);padding:20px 22px;margin-bottom:20px;
    box-shadow:var(--shadow);border:1px solid rgba(232,236,244,.9);
}
.cb-widget-title{
    display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--ink);
    padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.cb-widget-title::before{content:"";width:5px;height:15px;border-radius:3px;background:var(--grad)}
.cb-rank{display:flex;flex-direction:column;gap:11px}
.cb-rank a{display:flex;gap:10px;font-size:13.5px;color:var(--ink2);line-height:1.55}
.cb-rank a:hover{color:var(--a1)}
.cb-rank i{
    font-style:normal;font-weight:800;font-size:12px;width:20px;flex-shrink:0;
    color:#c6cede;
}
.cb-rank a:nth-child(1) i{color:#f43f5e}
.cb-rank a:nth-child(2) i{color:#fb923c}
.cb-rank a:nth-child(3) i{color:#facc15}
.cb-links{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.cb-links a{color:var(--ink2);display:flex;align-items:center;gap:9px}
.cb-links a::before{content:"";width:6px;height:6px;border-radius:2px;background:#d7dded;flex-shrink:0}
.cb-links a:hover{color:var(--a1)}
.cb-links a:hover::before{background:var(--grad)}
.cb-pills{display:flex;flex-wrap:wrap;gap:8px}
.cb-pills a{font-size:12.5px;padding:5px 13px;border-radius:20px;background:#f4f6fb;color:var(--ink2);font-weight:500}
.cb-pills a:hover{background:var(--grad);color:#fff}
.cb-cta{
    border-radius:var(--r);padding:24px 22px;margin-bottom:20px;color:#fff;
    background:var(--grad);box-shadow:0 14px 30px rgba(99,102,241,.22);
}
.cb-cta b{display:block;font-size:16px;margin-bottom:7px;color:#fff}
.cb-cta p{font-size:13px;color:rgba(255,255,255,.9);margin-bottom:14px}
.cb-cta a{
    display:inline-block;font-size:13px;font-weight:700;padding:8px 20px;border-radius:20px;
    background:#fff;color:var(--a1);
}

/* ---------------- 分页 ---------------- */
.cb-pager{display:flex;justify-content:center;gap:8px;margin:32px 0 6px}
.cb-pager a,.cb-pager span{
    min-width:38px;padding:9px 14px;text-align:center;font-size:13.5px;font-weight:600;
    background:var(--card);border-radius:20px;color:var(--ink2);box-shadow:var(--shadow);
}
.cb-pager a:hover{color:var(--a1)}
.cb-pager .on{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.28)}

.cb-empty{
    background:var(--card);border-radius:var(--r);padding:54px;text-align:center;
    color:var(--muted);box-shadow:var(--shadow);
}

/* ---------------- 软件 ---------------- */
.cb-dl{
    background:var(--card);border-radius:var(--r);padding:28px 30px;margin-bottom:22px;
    box-shadow:var(--shadow);border:1px solid rgba(232,236,244,.9);
}
.cb-dl-top{display:flex;gap:22px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.cb-dl-icon{
    width:80px;height:80px;border-radius:var(--r5);flex-shrink:0;font-size:36px;
    background:var(--grad);display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 26px rgba(99,102,241,.25);
}
.cb-dl-attrs{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted);margin-top:9px}
.cb-dl-attrs b{color:var(--ink);font-weight:600}
.cb-btn{
    display:inline-block;padding:12px 40px;border-radius:20px;background:var(--grad);
    color:#fff;font-size:15px;font-weight:700;box-shadow:0 12px 26px rgba(236,72,153,.25);
}
.cb-btn:hover{color:#fff;opacity:.92}

/* ---------------- 页脚 ---------------- */
.cb-foot{background:#1f2937;color:#9ca3af;padding:34px 0;margin-top:16px;font-size:13px;text-align:center}
.cb-foot a{color:#d1d5db;margin:0 9px}
.cb-foot a:hover{color:#fff}
.cb-foot .note{margin-top:10px;font-size:12px;color:#6b7280}

/* ---------------- 响应式 ---------------- */
@media (max-width:1060px){
    .cb-cols{flex-direction:column}
    .cb-side{width:100%}
    .cb-nav{display:none}
}
@media (max-width:720px){
    .cb-head-in{height:auto;padding:12px 0;flex-wrap:wrap;gap:12px}
    .cb-form{margin-left:0;width:100%}
    .cb-form input{flex:1;width:auto}
    .cb-masonry{column-count:1}
    .cb-hero h1{font-size:24px}
    .cb-art{padding:22px 20px}
    .cb-art-head h1{font-size:22px}
    .cb-entry{font-size:15.5px}
    .cb-dl{padding:20px}
    .cb-dl-top{flex-direction:column}
    .cb-row{gap:12px;padding:14px}
    .cb-thumb{width:58px;height:58px;font-size:22px}
}