/* 改进后的响应式博客样式（排版优化） */
:root{
  --bg: #071024;
  --surface: rgba(255,255,255,0.06);
  --muted: #94a3b8;
  --accent: #60A5FA; /* 浅蓝主色，替换原紫色 */
  --accent-2: #00B894;
  --danger: #EF4444;
  --text: #e6eef8;
  --container: 1100px;
  --radius: 10px;
  --max-read-width: 740px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-size:16px;line-height:1.58}
.container{max-width:var(--container);margin:0 auto;padding:20px}
.site-header{border-bottom:1px solid rgba(255,255,255,0.03);background:transparent;padding:10px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:8px}
.header-actions{display:flex;align-items:center;gap:12px}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.1rem}
.main-nav a{color:var(--muted);text-decoration:none;margin-left:12px;font-size:0.92rem}
.main-nav a:hover, .main-nav a:focus{color:var(--text);outline:2px dashed rgba(255,255,255,0.06);outline-offset:4px}

/* 语言切换按钮：与主题一致的低调胶囊样式 */
.lang-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,0.08);
  background:var(--surface);
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
  font-size:0.85rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  margin-left:0; /* 间隔由 header-actions 的 gap 控制 */
}
.lang-toggle:hover,.lang-toggle:focus{
  color:var(--text);
  border-color:rgba(255,255,255,0.16);
  box-shadow:0 0 0 3px rgba(96,165,250,0.25);
}

/* Improve focus visibility for interactive elements */
a:focus, button:focus {outline:3px solid rgba(96,165,250,0.35);outline-offset:2px}

/* Hero */
.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:24px 0}
.hero h1{font-size:2.0rem;margin:0;letter-spacing:-0.02em}
.lead{color:var(--muted);margin-top:8px;max-width:500px}
.cta{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;text-decoration:none;font-weight:600}
.projects-home .lead .cta{display:inline-block;background:transparent;color:var(--accent);border:1px solid var(--accent)}
.projects-home .lead .cta:hover,.projects-home .lead .cta:focus{background:transparent;color:var(--accent-2);border-color:var(--accent-2)}
.hero-illus img, .hero-illus svg{border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.35);display:block}

/* 页面主体（文章列表 + 侧边栏） */
.section-title{color:var(--text);margin-bottom:14px}
.posts-grid{margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;align-items:stretch}
.projects-home .lead{display:flex;align-items:center;gap:8px;justify-content:space-between;max-width:100%}
.projects-home .lead .actions{margin-left:auto;display:flex;gap:8px}
.projects-home .lead .actions .lang-toggle{text-decoration:none}
.projects-home .lead .actions .lang-toggle:hover,.projects-home .lead .actions .lang-toggle:focus{ text-decoration:none }
.projects-home .project-card.feature{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--radius);background:var(--surface);overflow:hidden}
.projects-home .project-card.feature .thumb{height:200px;overflow:hidden}
.projects-home .project-card.feature .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.projects-home .project-card.feature .body{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.projects-home .project-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.projects-home .project-card .actions .chip{display:inline-block;padding:0.22rem 0.6rem;border-radius:12px;font-size:0.8rem;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.25);text-decoration:none}
.projects-home .project-card .actions .chip:hover,.projects-home .project-card .actions .chip:focus{background:rgba(255,255,255,0.22);border-color:rgba(255,255,255,0.35)}
@media(max-width:720px){
  .projects-home .project-card.feature{flex-direction:column}
  .projects-home .project-card.feature .thumb{height:160px}
}

.post-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(2,6,23,0.55)}
.post-card .thumb{aspect-ratio:1/1;width:100%;overflow:hidden;flex:0 0 auto;background:var(--surface)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .thumb svg{width:100%;height:100%;display:block}
.post-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.post-body h3{margin:0;font-size:1.08rem;font-weight:700}
.post-body h3 a{ color:var(--accent); text-decoration:none }
.post-body h3 a:hover, .post-body h3 a:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }
.meta{color:var(--muted);font-size:0.82rem;margin-bottom:3px}
.excerpt{color:var(--muted);font-size:1.0rem}
.read-more{display:inline-block;margin-top:auto;color:var(--accent);text-decoration:none;font-weight:600}

/* 统一竖排卡片在网格中的高度与文本行数 */
.grid .post-card{height:100%}
.post-card .post-info{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.post-card .post-title h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:calc(2 * 1.3em)}
.post-card .post-title .meta{margin:0;line-height:1;font-size:0.82rem;margin-top:2px}
.post-card .post-title .excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;min-height:calc(3 * 1.45em)}

/* 侧边栏 */
.sidebar{margin-top:20px}
.card{background:var(--surface);padding:14px;border-radius:10px;margin-bottom:10px;color:var(--muted)}
.card h3{margin-top:0;color:var(--text)}
/* 小图标：用于联系卡片的邮箱图标等 */
.icon{width:15px;height:15px;vertical-align:text-bottom;margin-right:6px}

/* 布局：在宽屏时 main 为两列（内容 + 侧边栏） */
@media(min-width:980px){
  main.container.home-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    grid-column-gap:24px;
    grid-row-gap:16px;
    grid-template-areas:
      "hero hero"
      "projects sidebar"
      "posts sidebar";
    align-items:start;
  }
  .hero{grid-area:hero}
  .projects-home{grid-area:projects}
  .posts-grid{grid-area:posts}
  aside.sidebar{grid-area:sidebar;margin-top:0}
  /* 去除侧栏卡片粘性定位，避免与其他卡片重叠 */
  .sidebar .card{position:static}
}

/* 中小屏：使用单列网格，侧边栏排在文章列表之前 */
@media(max-width:979px){
  main.container.home-layout{
    display:grid;
    grid-template-columns:1fr;
    grid-row-gap:16px;
    grid-template-areas:
      "hero"
      "projects"
      "sidebar"
      "posts";
    align-items:start;
  }
  .hero{grid-area:hero}
  .projects-home{grid-area:projects}
  .posts-grid{grid-area:posts}
  aside.sidebar{grid-area:sidebar;margin-top:0}
}

/* 移动端优化 */
@media(max-width:720px){
  .hero{flex-direction:column;align-items:flex-start;padding:18px 0}
  .main-nav{display:none}
  .cta{width:100%}
  .grid{grid-template-columns:1fr}
  .post-card .thumb{display:none}
  .posts-strips .post-card .thumb{display:none}
  .projects-home .lead .actions .lang-toggle{width:auto}
}

/* 阅读页面宽度约束（若未来生成文章页面使用） */
.article-content{max-width:var(--max-read-width);margin:0 auto}

/* 文章页面样式 */
.post-header{margin-bottom:1.6rem}
.post-tags{margin-top:0.8rem;display:flex;flex-wrap:wrap;gap:0.4rem}
.tag{display:inline-block;padding:0.28rem 0.7rem;background:var(--surface);border-radius:18px;font-size:0.95rem;color:var(--muted);border:1px solid rgba(255,255,255,0.1)}
.post-excerpt{background:var(--surface);padding:1.2rem;border-radius:var(--radius);margin:1.2rem 0;font-style:italic;border-left:3px solid var(--accent)}
.post-footer{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,0.1)}
.post-navigation a{color:var(--accent);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:0.45rem;transition:color 0.2s ease}
.post-navigation a:hover{color:var(--accent-2)}
.post-body{line-height:1.7;font-size:1.0rem}
.post-body img{display:block;max-width:680px;width:100%;height:auto;margin:0 auto}
.post-body h2,.post-body h3,.post-body h4{margin-top:1.6rem;margin-bottom:0.8rem;color:var(--text)}
.post-body p{margin-bottom:1.2rem}
.post-body code{background:var(--surface);padding:0.18rem 0.35rem;border-radius:4px;font-size:0.9rem}
.post-body pre{background:var(--surface);padding:0.85rem;border-radius:var(--radius);overflow-x:auto;margin:1.2rem 0}
.post-body pre code{background:none;padding:0}

/* 文内链接：默认无下划线，悬停/聚焦时显示下划线 */
.post-body a{color:var(--accent);text-decoration:none}
.post-body a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }
.post-body a:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }

/* 侧边栏卡片中的链接同样采用悬停下划线 */
aside.sidebar .card a{ color:var(--accent); text-decoration:none }
aside.sidebar .card a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }
aside.sidebar .card a:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }

/* 侧栏标签按钮容器与样式（横向铺设，小按钮） */
.tag-badges{display:flex;flex-wrap:wrap;gap:0.4rem}
/* 覆盖侧栏卡片内的链接下划线，使按钮风格更统一 */
.tag-badges .tag{color:var(--text);text-decoration:none}
.tag-badges .tag:hover,.tag-badges .tag:focus{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.18);text-decoration:none}
.tag .badge{display:inline-block;margin-left:0.4rem;padding:0 0.45rem;min-width:20px;height:20px;line-height:20px;border-radius:10px;background:var(--accent);color:#fff;font-size:0.78rem}

/* 阅读更多按钮在悬停时显示下划线以提示可点击 */
.read-more{ text-decoration:none }
.read-more:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }

/* 页脚链接：默认无下划线，悬停/聚焦时显示下划线 */
.site-footer a{ color:var(--accent); text-decoration:none }
.site-footer a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }
.site-footer a:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }

/* 可打印友好 */
@media print{.cta,.hero-illus,.main-nav{display:none}}

/* 标签索引页：标签链接使用浅蓝主色 */
.tags-index .tag-list a{ color:var(--accent); text-decoration:none }
.tags-index .tag-list a:hover, .tags-index .tag-list a:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }

/* 标签聚合页底部返回链接使用浅蓝主色 */
.posts-grid .back-link{ color:var(--accent); text-decoration:none; font-weight:600 }
.posts-grid .back-link:hover, .posts-grid .back-link:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }

/* 标签索引页搜索框样式 */
.tags-index .tag-search {
  margin: 0 0 1rem;
}
.tags-index .tag-search label {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.tags-index .tag-search input[type="search"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.tags-index .tag-search input[type="search"]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.25);
}
.tags-index .help {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.tags-index .empty {
  margin-top: 0.75rem;
  color: var(--muted);
}

/* 项目卡片样式 */
.projects-page .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.projects-home .grid{grid-template-columns:1fr}
.project-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease;position:relative}
.projects-home .project-card{flex-direction:column;gap:8px;align-items:stretch}
.project-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(2,6,23,0.55)}
.project-card .thumb{height:120px;overflow:hidden}
.projects-home .project-card .thumb{flex:0 0 24%;min-width:170px;aspect-ratio:1/1;overflow:hidden}
.project-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-card .body{padding:14px;display:flex;flex-direction:column;gap:6px}
.projects-home .project-card .body{padding:8px}
.projects-page .project-card .body{padding-bottom:42px}
.projects-page .project-card .actions{position:absolute;right:12px;bottom:10px;margin:0}

/* 区块分割线 */
.section-divider{
  border:0;
  border-top:2px solid rgba(255,255,255,0.30);
  margin:8px 0 18px;
}
.project-card .title{margin:0;font-size:1.0rem;color:var(--text);display:flex;align-items:center;gap:8px}
.projects-home .project-card .title .title-disabled{color:var(--muted)}
.projects-page .project-card .title .title-disabled{color:var(--muted)}
.project-card .title .title-disabled{color:var(--muted)}
.project-card .title a.title-link{color:#f0f1f3;text-decoration:none}
.project-card .title a.title-link:hover,.project-card .title a.title-link:focus{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.project-card .title .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;margin-top:0}
.project-card .title [data-lang="en"]{color:var(--muted)}
.project-card .one-liner{color:var(--muted);font-size:0.92rem;margin:0}
.project-card .meta{color:var(--muted);font-size:0.82rem;margin:0;display:flex;align-items:center;gap:6px}
.project-card .meta span:last-child{margin-left:auto}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.roles{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.domains{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.badge{display:inline-block;padding:0.2rem 0.55rem;background:var(--surface);border-radius:999px;border:1px solid rgba(255,255,255,0.1);font-size:0.8rem;color:var(--text)}
.metrics{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.metric-chip{display:inline-block;padding:0.2rem 0.55rem;border-radius:999px;background:rgba(96,165,250,0.18);color:#fff;font-size:0.8rem}

/* 最新文章：左图右文卡片布局（不叠加样式） */
.posts-strips .grid{grid-template-columns:1fr}
.posts-strips .post-card{display:flex;flex-direction:row;gap:12px;align-items:stretch;background:var(--surface);border-radius:var(--radius);overflow:hidden}
.posts-strips .post-card .thumb{flex:0 0 24%;min-width:170px;aspect-ratio:1/1;overflow:hidden}
.posts-strips .post-card .thumb img,.posts-strips .post-card .thumb svg{width:100%;height:100%;object-fit:contain;display:block}
.posts-strips .post-info{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px}
.posts-strips .post-title{position:static;padding:0;background:none;color:var(--text)}
.posts-strips .post-title h3{margin:0;display:block;line-height:1.2;min-height:auto;overflow:visible}
.posts-strips .post-title h3 a{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.6);font-weight:700;font-size:1.12rem;text-decoration:none;line-height:1;display:block}
.posts-strips .post-title h3 a:hover,.posts-strips .post-title h3 a:focus{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }
.posts-strips .post-title .meta{margin:0;line-height:1;color:var(--muted);font-size:0.82rem;margin-top:20px}
.posts-strips .post-title .excerpt{color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:0.6rem}
.posts-strips .post-body{position:static;display:flex;flex-direction:column;gap:4px;padding:0;color:var(--text)}
.posts-strips .tags-inline{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.posts-strips .chip{display:inline-block;padding:0.18rem 0.5rem;border-radius:12px;font-size:0.75rem;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.25);text-decoration:none}
.posts-strips .chip:hover,.posts-strips .chip:focus{background:rgba(255,255,255,0.22);border-color:rgba(255,255,255,0.35)}
@media(min-width:1100px){
  .posts-strips .grid{grid-template-columns:1fr}
  .posts-strips .post-card .thumb{min-width:100px;aspect-ratio:2/1}
}
@media(max-width:720px){
  .projects-home .project-card .thumb{display:none}
}
aside.sidebar #projects ul{list-style:none;padding-left:0;margin:0}
aside.sidebar #projects ul li{display:flex;align-items:center;gap:8px}
aside.sidebar #projects ul li a{flex:1}
aside.sidebar #projects ul li .badge{margin-left:auto !important}
aside.sidebar #projects ul li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);flex:0 0 auto}
aside.sidebar #projects ul li.status-in_production::before{background:var(--accent-2)}
aside.sidebar #projects ul li.status-in_progress::before{background:var(--danger)}
aside.sidebar #projects ul li.status-experimental::before{background:rgba(255,255,255,0.55)}