/* work.css —— 作品详情页样式
   从内联 style 抽出独立维护；页面通过 <link> 引用
============================================== */
  :root{
    --bg:#f4faf6;
    --card:#ffffff;
    --text:#1b2e26;
    --muted:#6b8079;
    --primary:#1f7a5c;
    --primary-deep:#14523e;
    --primary-soft:#e6f4ed;
    --border:#dcebe3;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:'Noto Sans CJK SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
    background:var(--bg);color:var(--text);line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  .container{max-width:1080px;margin:0 auto;padding:0 20px}

  /* 顶栏 */
  header{
    position:sticky;top:0;z-index:20;
    background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .bar{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
  .logo{font-weight:800;font-size:17px;letter-spacing:.3px;color:var(--text);text-decoration:none;white-space:nowrap}
  .logo span{color:var(--primary)}
  .bar-right{display:flex;align-items:center;gap:18px}
  /* 顶部导航链接：视觉与首页保持一致
     颜色显式写全（带兜底值），不依赖变量继承，避免某些环境下整条规则失效后退回浏览器默认的蓝色下划线 */
  .nav-links{display:flex;align-items:center;gap:24px;font-size:15px}
  .nav-links a{
    display:inline-block;
    color:var(--muted,#6b8079);
    text-decoration:none;line-height:1.6;white-space:nowrap;
    transition:color .18s;
  }
  .nav-links a:hover,.nav-links a:focus{color:var(--primary,#1f7a5c)}
  .lang-btn{
    flex:0 0 auto;font-size:13px;font-weight:600;color:var(--primary);
    background:var(--primary-soft);border:1px solid var(--border);
    padding:6px 14px;border-radius:8px;cursor:pointer;font-family:inherit;
  }
  .lang-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

  main{padding:36px 0 64px}

  /* 返回 */
  .back{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;color:var(--primary-deep);text-decoration:none;
    padding:9px 18px 9px 14px;border:1px solid var(--border);border-radius:999px;
    background:var(--card);box-shadow:0 2px 8px rgba(20,82,62,.06);
    transition:all .18s;margin-bottom:22px;
  }
  .back:hover{
    color:#fff;background:var(--primary);border-color:var(--primary);
    box-shadow:0 6px 18px rgba(31,122,92,.22);
  }
  .back:active{transform:translateY(1px)}
  .back-arrow{transition:transform .18s}
  .back:hover .back-arrow{transform:translateX(-3px)}

  /* 详情卡 */
  .card{
    background:var(--card);border:1px solid var(--border);
    border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(20,82,62,.07);
  }
  .hero{
    aspect-ratio:16/10;height:auto;
    background:var(--primary-soft);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .hero img{width:100%;height:100%;object-fit:contain;display:block}
  .hero .ph-icon{font-size:64px;opacity:.6}
  .body{padding:28px 32px 32px}
  .head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .head .icon{
    width:50px;height:50px;border-radius:13px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    font-size:25px;background:var(--primary-soft);
  }
  .head h1{font-size:25px;font-weight:800;margin:0;line-height:1.35}
  .badge{
    font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;
    background:var(--primary-soft);color:var(--primary-deep);border:1px solid var(--border);
  }
  .head-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .desc{font-size:15.5px;color:#3f5f53;line-height:1.9;margin:0 0 18px}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
  .tag{font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:4px 10px;border-radius:6px}
  .sec{margin-bottom:24px}
  .sec h2{font-size:15px;font-weight:700;color:var(--primary-deep);margin:0 0 12px;letter-spacing:.5px}
  .sec p{font-size:15px;color:#3f5f53;line-height:1.95;margin:0}
  .sec ul{margin:0;padding-left:21px}
  .sec li{font-size:15px;color:var(--muted);line-height:2}
  .note{
    font-size:13.5px;color:var(--muted);background:var(--bg);
    border:1px solid var(--border);border-left:3px solid var(--primary);
    padding:14px 16px;border-radius:0 10px 10px 0;line-height:1.85;
  }
  .actions{
    display:flex;gap:12px;flex-wrap:wrap;
    margin-top:26px;padding-top:22px;border-top:1px solid var(--border);
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:11px 22px;border-radius:10px;font-size:14.5px;font-weight:600;
    text-decoration:none;cursor:pointer;font-family:inherit;
    border:1px solid transparent;transition:all .16s;
  }
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{background:var(--primary-deep);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--primary-deep);border-color:rgba(31,122,92,.4)}
  .btn-ghost:hover{background:rgba(31,122,92,.08)}

  /* 上一条 / 下一条 作品导航 */
  .work-nav{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;
  }
  .nav-item{
    display:flex;flex-direction:column;gap:9px;
    background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:14px 16px;text-decoration:none;color:var(--text);
    transition:all .18s;min-width:0;
  }
  .nav-item:hover{
    border-color:var(--primary);background:var(--primary-soft);
    transform:translateY(-2px);box-shadow:0 6px 18px rgba(31,122,92,.13);
  }
  .nav-item.prev{align-items:flex-start}
  .nav-item.next{align-items:flex-end;text-align:right}
  .nav-dir{
    font-size:12px;font-weight:600;color:var(--primary);letter-spacing:.3px;white-space:nowrap;
  }
  .nav-main{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
  .nav-item.next .nav-main{justify-content:flex-end}
  .nav-icon{
    flex:0 0 36px;width:36px;height:36px;border-radius:10px;
    background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:18px;
  }
  .nav-text{display:flex;flex-direction:column;min-width:0;overflow:hidden}
  .nav-title{
    font-size:14.5px;font-weight:700;color:var(--text);line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .nav-cat{font-size:11.5px;color:var(--muted);line-height:1.5}
  .nav-all{display:flex;justify-content:center;margin-top:18px}

  /* 未找到 */
  .empty{
    text-align:center;padding:80px 24px;color:var(--muted);
    background:var(--card);border:1px solid var(--border);border-radius:18px;
  }
  .empty h2{font-size:19px;color:var(--text);margin:0 0 10px}
  .empty p{margin:0 0 22px;font-size:14.5px}

  footer{border-top:1px solid var(--border);padding:22px 0;font-size:13px;color:var(--muted);text-align:center}
  .footer-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
  .stat-link{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;color:var(--muted);text-decoration:none;
    padding:4px 10px;border:1px solid var(--border);border-radius:20px;
    background:var(--bg);transition:all .16s;opacity:.75;
  }
  .stat-link:hover{opacity:1;color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}

  /* 窄屏：先收紧间距，再彻底让位给 logo 与返回按钮 */
  @media(max-width:900px){
    .nav-links{
      flex:1 1 auto;
      gap:15px;min-width:0;overflow-x:auto;
      overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;-ms-overflow-style:none;
    }
    .nav-links::-webkit-scrollbar{display:none}
    .nav-links a{font-size:14px}
    .logo,.bar-right>.logo{flex:0 0 auto}
  }
  @media(max-width:640px){
    /* 导航不再隐藏（原为 display:none），与大屏策略一致：缩小字号 + 横向滑动 */
    .bar{gap:10px}
    .logo{font-size:16px}
    .logo span{display:none}
    .bar-right{gap:8px;min-width:0}
    .nav-links{gap:13px}
    .nav-links a{font-size:13px}
    .lang-btn{font-size:12px;padding:4px 11px}
    .body{padding:22px 20px 26px}
    .head h1{font-size:21px}
    main{padding:24px 0 48px}
    .work-nav{grid-template-columns:1fr;gap:10px}
    .nav-item.next{align-items:flex-start;text-align:left}
    .nav-item.next .nav-main{justify-content:flex-start}
  }