/* '------------------------------------------------' */
/* 增加光影效果 ------------------------------------------------ */
/* ===== Fancy header separators & underline ===== */
.nav {
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(11,7,23,.70), rgba(11,7,23,.40));
    border-bottom: 1px solid var(--outline);
  }
  
  /* 顶部细光线装饰 */
  .nav::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,59,255,.45), transparent);
    pointer-events: none;
  }
  
  /* 滚动阴影 */
  .nav.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  
  .nav .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); }
  .brand:hover { color: #fff; }
  
  /* 品牌与菜单的细分隔线 */
  .nav-divider {
    width: 1px; height: 28px; margin: 0 14px;
    background: linear-gradient(180deg, transparent, var(--outline), transparent);
  }
  
  /* 菜单布局 */
  .menu { display: flex; align-items: center; gap: 18px; }
  
  /* 链接样式：带分隔线与动效下划线 */
  .menu a {
    position: relative;
    display: inline-block;
    padding: .35rem .55rem;
    border-radius: 9px;
    color: var(--ink);
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
  }
  
  /* 每个链接前的竖线分隔（除了第一个） */
  .menu a:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -9px; top: 50%;
    width: 1px; height: 16px; transform: translateY(-50%);
    background: linear-gradient(180deg, transparent, var(--outline), transparent);
  }
  
  /* 渐变下划线（悬停/激活显示） */
  .menu a::after {
    content: "";
    position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 2px;
    opacity: 0; transform: scaleX(0); transform-origin: center;
    transition: transform .22s ease, opacity .22s ease;
  }
  
  /* 悬停效果与发光 */
  .menu a:hover {
    background: rgba(197,59,255,.06);
    color: #fff;
    transform: translateY(-1px);
  }
  .menu a:hover::after { opacity: 1; transform: scaleX(1); }
  
  /* 若你想标记当前页：在对应 <a> 加 aria-current="page" */
  .menu a[aria-current="page"] {
    color: #fff; background: rgba(197,59,255,.08);
    box-shadow: 0 0 0 1px rgba(197,59,255,.15) inset, var(--glow);
  }
  .menu a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
  
  /* 小屏优化：菜单可横向滚动、隐藏分隔线高度过低的问题 */
  @media (max-width: 820px) {
    .nav .inner { gap: 10px; }
    .nav-divider { display: none; }
    .menu {
      gap: 12px;
      overflow-x: auto; scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a:not(:first-child)::before { height: 12px; left: -7px; }
  }
  
  








  /* '------------------------------------------------' */
  /* 增加页脚效果 ------------------------------------------------ */
  /* Sticky footer layout: footer stays at the very bottom */
  html, body { height: 100%; }
  body.site {
    min-height: 100svh;           /* 满屏高度 */
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }        /* 主内容占据剩余空间 */
  footer { margin-top: auto; }    /* 页脚自动贴底 */
  
  





  
  /* '------------------------------------------------' */
  /* 增加品牌logo效果 ------------------------------------------------ */
  .brand-logo{
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: inline-block;
    object-fit: cover;           /* 裁切填满小方块 */
    margin-right: .55rem;
    filter: drop-shadow(0 0 10px rgba(197,59,255,.45));
    vertical-align: middle;
  }
  
  


  





  /* '------------------------------------------------' */
  /* 增加了侧边栏
  /* ===== SIDEBAR (pure CSS) ===== */
  /* === Align main content to the top of the sidebar === */
  :root{
    --nav-height: 64px;      /* 你的顶部导航高度 */
    --sidebar-gap: 12px;     /* 导航与侧边栏/内容之间的间距 */
  }
  
  /* 取消这个布局下的额外上内边距，让两列都从“同一顶端”开始 */
  .with-sidebar.section { padding-top: 100; }
  
  /* 两列都贴顶 */
  .with-sidebar .wrap{
    align-items: start;                /* 已有就保留 */
  }
  .with-sidebar .wrap > *{
    align-self: start;                 /* 强制每个列项目贴顶 */
    margin-top: 0;                     /* 列本身不往下挤 */
  }
  
  /* 列内第一个元素常有默认 margin-top，这里清零以免把内容顶下去 */
  .with-sidebar .wrap > * > :first-child{
    margin-top: 0 !important;
  }
  
  /* 让侧边栏正好顶在导航下方；右侧内容自然与之对齐 */
  @media (min-width: 1024px){
    .sidebar{
      position: sticky;
      top: calc(var(--nav-height) + var(--sidebar-gap));
      max-height: calc(100vh - var(--nav-height) - var(--sidebar-gap));
      overflow-y: auto;
    }
    .with-sidebar .wrap{
      grid-template-columns: 280px 1fr;   /* 保持两列 */
    }
  }
  
  /* 可选：右侧栏版本也保持贴顶 */
  @media (min-width: 1024px){
    .with-sidebar--right .wrap{
      grid-template-columns: 1fr 280px;
    }
    .with-sidebar--right .sidebar{
      order: 2;
    }
  }
  
  
  /* 右侧版：加上 .with-sidebar--right 翻转列顺序 */
  @media (min-width: 1024px){
    .with-sidebar--right .wrap{
      grid-template-columns: 1fr 280px;
    }
    .with-sidebar--right .sidebar{
      order: 2;
    }
  }
  
  /* 面板与基础样式 */
  .sidebar{
    margin-bottom: 1rem;
  }
  .sidebar .panel{
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
  }
  
  /* 标题与文本 */
  .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6{
    margin: 0 0 .3rem;
    font-weight: 700;
  }
  .sidebar h3, .sidebar h4{ font-size: 0.95rem; }
  .sidebar p, .sidebar li{
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
  }
  
  
  /* 作者块 */
  .author{
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: start;
  }
  @media (min-width: 1024px){
    .author{ grid-template-columns: 1fr; }
  }
  
  .author__avatar img{
    width: 100%;
    max-width: 175px;
    border-radius: 50%;
  }
  @media (min-width: 1024px){
    .author__avatar img{
      padding: 5px;
      border: 1px solid var(--outline);
    }
  }
  
  .author__name{ margin: 6px 0 6px; }
  .author__bio{ margin: 0 0 10px; }
  
  /* 社交链接（移动端折叠、桌面常显） */
  .author__urls-wrapper{
    position: relative;
  }
  .author__toggle{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 8px 0;
    padding: .35rem .6rem;
    border-radius: 10px;
    border: 1px solid var(--outline);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .author__urls{
    display: none;
    position: absolute;
    right: 0;
    margin-top: 8px;
    padding: 10px;
    list-style: none;
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
    min-width: 200px;
    z-index: 5;
  }
  .author__urls[data-open="true"]{ display: block; }
  
  .author__urls li{ white-space: nowrap; }
  .author__urls a{
    display: block;
    padding: 6px 4px;
    color: inherit;
    text-decoration: none;
  }
  .author__urls a:hover{ text-decoration: underline; }
  
  /* 桌面端：展开为普通列表，隐藏按钮 */
  @media (min-width: 1024px){
    .author__urls-wrapper{ position: static; }
    .author__toggle{ display: none; }
    .author__urls{
      position: static;
      display: block !important;
      margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent;
    }
    .author__urls a{ padding: 4px 0; }
  }