/* =====================================================================
   G5 专属：模块化卡片墙 + 侧栏挂件 + 分类条
   封面图纯 CSS 生成（渐变 + 大字 + 图标徽章），不加载图片
   想换真实图片：把 .cv 的 background 换成 url(...) 即可
   ===================================================================== */

/* ===== 刊头（分屏区） ===== */
.shell{max-width:1340px;margin:0 auto;padding:66px 22px 0;}
.head{display:flex;align-items:flex-end;gap:20px;padding:14px 4px 18px;
  border-bottom:1px solid var(--ed);margin-bottom:18px;}
.head h1{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.015em;line-height:1.1;}
.head h1 em{font-style:normal;color:var(--kw);}
.head .mt{margin-left:auto;display:flex;gap:18px;align-items:baseline;
  font-family:var(--mono);font-size:11px;color:var(--ink3);}
.head .mt b{color:var(--ink);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;}
.head .mt span{display:flex;align-items:baseline;gap:5px;}

.split{display:grid;grid-template-columns:minmax(0,.92fr) 1px minmax(0,1.18fr);
  align-items:stretch;margin-bottom:34px;}
.vrule{background:linear-gradient(transparent,var(--ed) 12%,var(--ed) 88%,transparent);}
.pane-wrap{min-width:0;}
.pane-wrap.l{padding-right:20px;}
.pane-wrap.r{padding-left:20px;}
.pw{border-radius:13px;overflow:hidden;height:100%;display:flex;flex-direction:column;}
.pw .bar{display:flex;align-items:center;gap:9px;height:40px;padding:0 15px;flex:none;
  background:var(--gl2);border-bottom:1px solid var(--ed);position:relative;z-index:2;}
.pw .bar .fi{font-family:var(--mono);font-size:10px;font-weight:700;}
.pw .bar .nm{font-size:13px;font-weight:500;}
.pw .bar .rt{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink3);}
.pw .bar .cp{margin-left:auto;border:none;background:transparent;cursor:pointer;height:40px;
  padding:0 12px;font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  transition:color .18s,background .18s;}
.pw .bar .cp:hover{color:var(--kw);background:var(--hov);}
.pw .bar .cp.done{color:var(--ok);}
.pw .bd{flex:1;background:var(--gl3);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);}
.minitabs{display:flex;gap:1px;padding:0 10px;height:34px;flex:none;
  background:var(--gl3);border-bottom:1px solid var(--ed2);}
.minitabs button{border:none;background:transparent;cursor:pointer;padding:0 11px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  transition:color .18s,box-shadow .18s;}
.minitabs button:hover{color:var(--ink2);}
.minitabs button[aria-selected="true"]{color:var(--kw);box-shadow:inset 0 -2px 0 var(--kw);}
.idrow{display:flex;align-items:center;gap:11px;padding:14px 18px 0;}
.idrow img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--ed);}
.idrow b{display:block;font-size:14px;font-weight:600;line-height:1.3;}
.idrow .rl{font-size:11.5px;color:var(--ink3);}
.idrow .hire{margin-left:auto;display:flex;align-items:center;gap:6px;padding:4px 9px;
  border-radius:999px;font-size:11px;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);}
.idrow .hire i{width:5px;height:5px;border-radius:50%;background:var(--ok);
  animation:bk 2s steps(1) infinite;}
.lkrow{display:flex;gap:16px;padding:12px 18px 16px;margin-top:auto;
  border-top:1px solid var(--ed2);font-size:12.5px;}
.lkrow a{color:var(--ink2);transition:color .18s;}
.lkrow a:hover{color:var(--kw);}

/* ===== 下半部分：卡片墙 + 侧栏 ===== */
.lower{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:24px;
  align-items:start;padding-bottom:48px;}

/* 分类切换条 */
.cats{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.cats .lb{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--ink3);
  margin-right:4px;}
.cats button{border:1px solid var(--ed);background:var(--gl2);cursor:pointer;
  padding:5px 13px;border-radius:999px;font-family:var(--ui);font-size:12.5px;
  color:var(--ink2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .18s,border-color .18s,background .18s;}
.cats button:hover{color:var(--ink);border-color:var(--ink3);}
.cats button[aria-pressed="true"]{color:#fff;background:var(--kw);border-color:var(--kw);}
.cats button .n{font-family:var(--mono);font-size:10px;opacity:.65;margin-left:5px;}

/* ===== 文章卡片墙 ===== */
.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;}
.pcard{border-radius:13px;overflow:hidden;display:flex;flex-direction:column;
  /* 卡片本体也是玻璃：背后的环境光能透过来 */
  background:var(--gl3);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  transition:transform .28s cubic-bezier(.25,.8,.3,1),box-shadow .28s ease,background .3s;}
.pcard:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(28,30,33,.05),0 22px 54px rgba(28,30,33,.13);}
/* 头条卡：跨两列 */
.pcard.hero{grid-column:1/-1;}
.pcard.hero .cv{height:168px;}
.pcard.hero .tt{font-size:21px;}

/* 封面：纯 CSS 生成 —— 渐变底 + 大字水印 + 图标徽章 */
.cv{position:relative;height:132px;flex:none;overflow:hidden;
  display:grid;place-items:center;}
/* 封面：半透明渐变，让背景的代码壁纸透上来一点 */
.cv::before{content:"";position:absolute;inset:0;
  background:var(--cvbg);opacity:.72;}
html[data-theme='dark'] .cv::before{opacity:.62;}
.cv .wm{position:relative;z-index:1;font-family:var(--mono);font-weight:700;
  font-size:52px;letter-spacing:-.04em;color:rgba(255,255,255,.22);
  text-transform:uppercase;user-select:none;}
.pcard.hero .cv .wm{font-size:72px;}
/* 徽章：分类 + 图标 */
.cv .bg{position:absolute;z-index:2;left:13px;top:12px;display:flex;align-items:center;
  gap:7px;padding:4px 10px;border-radius:999px;font-size:11.5px;color:#fff;
  background:rgba(0,0,0,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);}
.cv .bg .ic{font-size:12px;}
/* 右上：阅读时长 */
.cv .mn{position:absolute;z-index:2;right:13px;top:12px;font-family:var(--mono);
  font-size:10.5px;color:#fff;padding:3px 9px;border-radius:999px;
  background:rgba(0,0,0,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
/* NEW 角标 */
.cv .nw{position:absolute;z-index:2;right:13px;bottom:12px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.06em;color:#fff;padding:2px 8px;border-radius:4px;
  background:var(--red);}
/* 底部渐隐，让文字区过渡自然 */
.cv::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(transparent 52%,rgba(0,0,0,.14));}

.pcard .txt{padding:15px 17px 16px;display:flex;flex-direction:column;flex:1;}
.pcard .tt{font-size:16.5px;font-weight:600;line-height:1.5;letter-spacing:-.01em;
  transition:color .18s;}
.pcard:hover .tt{color:var(--kw);}
.pcard .ex{margin-top:6px;font-size:13px;color:var(--ink2);line-height:1.75;flex:1;}
.pcard .ft{display:flex;align-items:center;gap:12px;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--ed2);font-family:var(--mono);font-size:10.5px;color:var(--ink3);}
.pcard .ft .g{display:flex;align-items:center;gap:5px;}
.pcard .ft .rt{margin-left:auto;color:var(--kw);font-family:var(--ui);font-size:12px;}
.pcard .ft .rt .ar{display:inline-block;transition:transform .2s;}
.pcard:hover .ft .rt .ar{transform:translateX(3px);}

.wall-more{display:flex;justify-content:center;margin-top:22px;}
.wall-more a{padding:9px 24px;border-radius:999px;font-size:13.5px;color:var(--ink2);
  border:1px solid var(--ed);background:var(--gl2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .18s,border-color .18s;}
.wall-more a:hover{color:var(--kw);border-color:var(--kw);}

/* ===== 右侧栏挂件 ===== */
.rail{display:grid;gap:17px;position:sticky;top:66px;}
.wg{border-radius:13px;padding:16px 16px 17px;}
.wg h3{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.15em;color:var(--ink3);margin-bottom:12px;}
.wg h3 .ln{flex:1;height:1px;background:var(--ed);}

/* 个人卡 */
.wg.me{text-align:center;}
.wg.me img{width:62px;height:62px;border-radius:50%;object-fit:cover;margin:0 auto;
  display:block;box-shadow:0 0 0 1px var(--ed),0 4px 14px rgba(0,0,0,.13);}
.wg.me b{display:block;margin-top:11px;font-size:16px;font-weight:600;}
.wg.me .rl{font-size:12.5px;color:var(--ink2);margin-top:2px;}
.wg.me .hire{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:4px 11px;border-radius:999px;font-size:11.5px;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);}
.wg.me .hire i{width:5px;height:5px;border-radius:50%;background:var(--ok);
  animation:bk 2s steps(1) infinite;}
.wg.me .btn{display:block;margin-top:13px;padding:8px;border-radius:8px;
  background:var(--ink);color:var(--bg);font-size:13px;transition:background .2s;}
.wg.me .btn:hover{background:var(--kw);color:#fff;}
.wg.me .soc{display:flex;justify-content:center;gap:14px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--ed2);}
.wg.me .soc a{color:var(--ink3);transition:color .18s,transform .18s;}
.wg.me .soc a:hover{color:var(--kw);transform:translateY(-1px);}
.wg.me .soc svg{width:17px;height:17px;display:block;}

/* 网站统计 */
.statg{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ed2);border-radius:9px;overflow:hidden;}
.statg div{background:var(--gl2);padding:11px 12px;}
.statg b{display:block;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;}
.statg span{font-size:11px;color:var(--ink3);}
.visits{margin-top:12px;padding-top:11px;border-top:1px solid var(--ed2);
  display:grid;gap:6px;font-size:12.5px;}
.visits .r{display:flex;justify-content:space-between;}
.visits .r span:first-child{color:var(--ink3);}
.visits .r b{font-weight:500;font-variant-numeric:tabular-nums;}

/* 标签云 */
.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tags a{padding:3px 10px;border-radius:999px;font-size:12px;color:var(--ink2);
  border:1px solid var(--ed);transition:color .18s,border-color .18s,background .18s;}
.tags a:hover{color:#fff;background:var(--kw);border-color:var(--kw);}
.tags a .n{font-family:var(--mono);font-size:9.5px;opacity:.6;margin-left:4px;}
.tags a.hot{color:var(--kw);border-color:color-mix(in srgb,var(--kw) 40%,transparent);}

/* 分类 / 归档列表 */
.rows{display:grid;gap:1px;}
.rows a{display:flex;align-items:center;gap:9px;padding:7px 9px;margin:0 -9px;
  border-radius:7px;font-size:13px;color:var(--ink2);transition:background .18s,color .18s;}
.rows a:hover{background:var(--hov);color:var(--ink);}
.rows a .dot{width:7px;height:7px;border-radius:2px;flex:none;}
.rows a .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink3);}
/* 占比条 */
.rows a .bar{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;opacity:.5;}
.rows a{position:relative;}

@media (max-width:1100px){
  .lower{grid-template-columns:1fr;}
  .rail{position:static;grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:16px;}
  .vrule{display:none;}
  .pane-wrap.l,.pane-wrap.r{padding:0;}
  .shell{padding:62px 16px 0;}
  .head{flex-wrap:wrap;gap:10px;}
  .head .mt{margin-left:0;width:100%;gap:14px;}
}
@media (max-width:760px){
  .wall{grid-template-columns:1fr;gap:14px;}
  .pcard.hero .cv{height:138px;}
  .pcard.hero .cv .wm{font-size:52px;}
  .pcard.hero .tt{font-size:17.5px;}
  .rail{grid-template-columns:1fr;}
  /* 分类条横向滑动，不换行堆高 */
  .cats{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:3px;margin-bottom:14px;
    -webkit-overflow-scrolling:touch;}
  .cats::-webkit-scrollbar{display:none;}
  .cats .lb{display:none;}
  .cats button{padding:6px 13px;font-size:12.5px;flex:none;}
}
@media (max-width:600px){
  .cv{height:118px;}
  .cv .wm{font-size:44px;}
  .cv .bg{left:10px;top:10px;padding:3px 9px;font-size:11px;}
  .cv .mn{right:10px;top:10px;font-size:10px;padding:2px 8px;}
  .cv .nw{right:10px;bottom:10px;}
  .pcard .txt{padding:13px 14px 14px;}
  .pcard .tt{font-size:15.5px;}
  .pcard .ex{font-size:12.5px;margin-top:5px;}
  .pcard .ft{margin-top:11px;padding-top:10px;gap:10px;font-size:10px;}
  /* 触屏没有 hover，改成按下反馈 */
  .pcard:active{transform:scale(.985);}
  .wall-more a{padding:10px 22px;}
}
/* 触屏设备：去掉 hover 抬升，避免点一下卡住在悬停态 */
@media (hover:none){
  .pcard:hover{transform:none;
    box-shadow:0 1px 2px rgba(28,30,33,.04),0 14px 36px rgba(28,30,33,.08);}
  .pcard:hover .tt{color:inherit;}
}