/* themes/minimal/assets/css/style.css — 极简主题 · 响应式（断点 768 / 1024） */
:root{
  --brand:#2f6fed;
  --brand-soft:#eaf1ff;
  --ink:#1f2329;
  --sub:#5b6470;
  --line:#e6e8eb;
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --radius:14px;
}
*{ box-sizing:border-box; }
/* ⚠️ 必须保留：HTML 的 hidden 属性靠 UA 样式表 [hidden]{display:none} 生效，
   而作者样式（如 .share-qr{display:inline-block}）会覆盖它 → 元素"该隐藏却一直显示"。
   （2026-09-18 实测：微信二维码未点击就自动出现，根因即此。） */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:1080px; margin:0 auto; padding:0 16px; }
.muted{ color:var(--sub); }
.empty{ color:var(--sub); }

/* header —— 站名 + 副标题（网站介绍）同行两列，导航靠右 */
.site-header{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); position:sticky; top:0; z-index:20; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding:10px 16px; }
.brand-wrap{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
.brand{ font-size:19px; font-weight:800; color:var(--ink); letter-spacing:.3px; line-height:1.3; }
.brand:hover{ text-decoration:none; color:var(--brand); }
.brand-sub{ margin:2px 0 0; color:var(--sub); font-size:13px; line-height:1.4; max-width:520px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-nav{ display:flex; gap:6px; flex:0 0 auto; }
.site-nav a{ color:var(--sub); padding:8px 12px; border-radius:8px; font-size:15px; }
.site-nav a:hover{ background:var(--bg-soft); color:var(--brand); text-decoration:none; }
.nav-toggle{ display:none; border:1px solid var(--line); background:#fff; border-radius:9px; width:40px; height:38px; font-size:18px; cursor:pointer; flex:0 0 auto; }

.site-main{ padding:32px 16px 64px; }

/* blocks */
.block{ margin:34px 0; }
.block-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.block-head h2{ font-size:21px; margin:0; }
.block-head .more{ font-size:14px; }
.center{ text-align:center; }
.code-404{ font-size:64px; margin:0 0 8px; color:var(--brand); font-weight:800; }
.btn{ display:inline-block; background:var(--brand); color:#fff; padding:10px 20px; border-radius:10px; font-weight:600; }
.btn:hover{ text-decoration:none; filter:brightness(1.05); }

/* cards */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  background:#fff; display:block; color:inherit; transition:box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover{ text-decoration:none; box-shadow:0 10px 26px -14px rgba(20,40,90,.28); transform:translateY(-2px); border-color:#d6dbe4; }
.card-pin{ border-color:#cfe0ff; background:linear-gradient(180deg,#f7faff,#fff); }
.card-title{ font-size:17px; margin:0 0 8px; line-height:1.5; }
.card-excerpt{ color:var(--sub); font-size:14px; margin:0 0 12px; line-height:1.7; }
.card-time{ color:#9aa3b2; font-size:12.5px; }
.pin-badge{ display:inline-block; background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:700; padding:2px 9px; border-radius:20px; margin-bottom:8px; }

/* works */
.work-zone .work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.work-item{ display:block; color:inherit; }
.work-item:hover{ text-decoration:none; }
.work-cover{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.work-cover img{ width:100%; height:100%; object-fit:cover; }
.work-placeholder{ color:var(--sub); font-size:13px; padding:10px; text-align:center; }
.work-title{ font-size:14.5px; margin:10px 0 0; font-weight:600; }

/* article */
.article{ max-width:760px; margin:8px auto 0; }
.article-title{ font-size:30px; line-height:1.35; margin:0 0 10px; }
.article-meta{ color:#9aa3b2; font-size:13px; margin-bottom:22px; }
.article-body{ font-size:16.5px; line-height:1.9; }
.linked-work{ margin:28px 0 8px; padding:14px 18px; border-left:4px solid var(--brand); background:var(--brand-soft); border-radius:0 10px 10px 0; }
.lw-label{ display:inline-block; font-size:12.5px; color:var(--brand); font-weight:700; margin-right:10px; }

/* pager */
.pager{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.pager-now{ color:var(--sub); font-size:14px; }

/* friends */
.friend-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.friend-list a{ display:inline-block; padding:7px 14px; border:1px solid var(--line); border-radius:999px; color:var(--sub); font-size:14px; }
.friend-list a:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }

/* footer */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-soft); padding:26px 16px; margin-top:40px; }
.site-footer .container{ text-align:center; }
.copyright{ color:var(--sub); font-size:13.5px; margin:0 0 6px; }
.icp a{ color:#9aa3b2; font-size:13px; }
.icp a:hover{ color:var(--brand); }

/* ===== 平板 768–1024 ===== */
@media (max-width:1024px){
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .work-zone .work-grid{ grid-template-columns:repeat(3,1fr); }
  .brand-sub{ max-width:380px; }
}

/* ===== 手机 <768 ===== */
@media (max-width:768px){
  .container{ padding:0 16px; }
  .nav-toggle{ display:block; }
  /* top:100% —— 跟随顶栏实际高度（站名 + 副标题两行时不再错位） */
  .site-nav{ display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; padding:8px 12px 14px; gap:2px; }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:11px 12px; }
  .header-inner{ min-height:58px; padding:8px 16px; }
  .brand{ font-size:17.5px; }
  .brand-sub{ font-size:12.5px; max-width:62vw; }
  .site-main{ padding:22px 16px 48px; }
  .card-grid{ grid-template-columns:1fr; }
  .work-zone .work-grid{ grid-template-columns:repeat(2,1fr); }
  .article-title{ font-size:24px; }
  .code-404{ font-size:52px; }
}

/* ===== 分享条 ===== */
.share{ margin:34px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.share-label{ display:block; font-size:13.5px; color:var(--sub); margin-bottom:10px; }
.share-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.share-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line); background:#fff; color:var(--sub); border-radius:999px; font-size:14px; cursor:pointer; font-family:inherit; transition:all .16s; }
.share-btn:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.share-ico{ width:20px; height:20px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* 风格 A：文字链 */
.share-style-1 .share-btns{ gap:16px; }
.share-style-1 .share-btn{ border:0; background:none; padding:2px 0; border-radius:0; }
.share-style-1 .share-ico{ display:none; }

/* 风格 C：悬浮侧边栏 */
.share-style-3{ position:relative; }
.share-style-3 .share-label{ display:none; }
.share-style-3 .share-btns{ position:fixed; left:14px; top:50%; transform:translateY(-50%); flex-direction:column; gap:8px; z-index:15; }
.share-style-3 .share-btn{ flex-direction:column; gap:2px; width:52px; padding:8px 4px; border-radius:12px; font-size:11px; }
.share-style-3 .share-ico{ width:24px; height:24px; }

/* 微信二维码层 */
.share-qr{ margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:12px; display:inline-block; text-align:center; background:#fff; }
.share-qr img{ width:180px; height:180px; }
.share-qr p{ margin:8px 0 0; color:var(--sub); font-size:12.5px; }

.share-toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%); background:#1f2533; color:#fff; padding:10px 18px; border-radius:10px; font-size:14px; z-index:99; opacity:0; transition:opacity .2s; }

@media (max-width:768px){
  .share-style-3 .share-btns{ position:static; transform:none; flex-direction:row; flex-wrap:wrap; }
  .share-style-3 .share-btn{ width:auto; flex-direction:row; font-size:14px; }
}