/* ===================================================
   拾光影库 · 全局样式（宽度 1920px）
   =================================================== */

* { box-sizing:border-box; }
body {
  background:#f5f5f5;
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  color:#333;
  line-height:1.6;
  font-size:14px;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; border:0; display:block; }
input,button { font-family:inherit; }

/* ===================================================
   头部
   =================================================== */

.top-notice {
  background:#f7f8fa;
  color:#888;
  font-size:12.5px;
  text-align:center;
  padding:9px 15px;
  border-bottom:1px solid #ebedf0;
  line-height:1.5;
  letter-spacing:.3px;
}

.site-header {
  background:#fff;
  border-bottom:1px solid #ebedf0;
  position:sticky;
  top:0;
  z-index:100;
}
.header-inner {
  max-width:1920px;
  margin:0 auto;
  padding:0 30px;
  height:64px;
  display:flex;
  align-items:center;
  gap:24px;
  box-sizing:border-box;
}

.logo {
  font-size:22px;
  font-weight:800;
  color:#2aa461;
  white-space:nowrap;
  letter-spacing:.5px;
  flex:0 0 auto;
  line-height:1;
}

.pill-nav {
  display:flex;
  gap:4px;
  flex:0 0 auto;
  overflow-x:auto;
  scrollbar-width:none;
}
.pill-nav::-webkit-scrollbar { display:none; }
.pill-nav a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:20px;
  background:#f5f6f8;
  color:#333;
  font-size:14px;
  white-space:nowrap;
  transition:background .2s,color .2s;
  line-height:1;
}
.pill-nav a:hover {
  background:#e8f7ef;
  color:#2aa461;
}
.pill-nav .ico { font-size:15px; line-height:1; }

.search-box {
  margin-left:auto;
  display:flex;
  align-items:center;
  background:#f5f6f8;
  border-radius:22px;
  padding:0 4px 0 18px;
  width:400px;
  height:40px;
  flex:0 0 auto;
  transition:background .2s;
  box-sizing:border-box;
}
.search-box:focus-within { background:#eef1f5; }
.search-box input {
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  outline:none;
  font-size:14px;
  color:#333;
  padding:0;
  line-height:40px;
}
.search-box input::placeholder { color:#999; }
.search-box button {
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:#2aa461;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
  flex:0 0 auto;
  padding:0;
  margin-left:4px;
}
.search-box button:hover { background:#239154; }
.search-box button svg { display:block; }

/* ===================================================
   首页 / 列表页区块
   =================================================== */

.section {
  max-width:1920px;
  width:100%;
  margin:20px auto;
  padding:24px 30px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  box-sizing:border-box;
}
.section h2 {
  font-size:17px;
  margin:0 0 18px;
  border-left:4px solid #2aa461;
  padding-left:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#222;
  font-weight:700;
}
.section h2 .more {
  font-size:13px;
  color:#999;
  font-weight:400;
}
.section h2 .sub {
  font-size:13px;
  color:#999;
  font-weight:400;
  margin-left:6px;
}

/* ===================================================
   卡片网格
   =================================================== */

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:18px;
}

.card {
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  transition:.2s;
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
}
.card:hover { transform:translateY(-3px); }
.card img {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#f0f0f0;
  border-radius:8px;
  transition:.3s;
}
.card:hover img { box-shadow:0 8px 20px rgba(0,0,0,.15); }
.card .t {
  padding:8px 4px 4px;
  font-size:14px;
  font-weight:600;
  color:#333;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card .s {
  position:absolute;
  right:8px;
  top:8px;
  background:#2aa461;
  color:#fff;
  padding:2px 8px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:600;
}

/* ===================================================
   内容
   =================================================== */

.content {
  font-size:14.5px;
  line-height:1.9;
  color:#444;
}
.content img { max-width:100%; height:auto; border-radius:8px; }

/* ===================================================
   分页
   =================================================== */

.pager {
  margin-top:24px;
  text-align:center;
}
.pager a {
  display:inline-block;
  padding:6px 12px;
  margin:0 3px;
  border:1px solid #e0e0e0;
  border-radius:6px;
  font-size:13.5px;
  color:#555;
  transition:.2s;
}
.pager a.active,
.pager a:hover {
  background:#2aa461;
  color:#fff;
  border-color:#2aa461;
}

/* ===================================================
   详情页通用
   =================================================== */

.d-section {
  background:#fff;
  border-radius:8px;
  padding:22px;
  margin-bottom:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.d-section:last-child { margin-bottom:0; }
.d-section h2 {
  font-size:17px;
  color:#222;
  margin:0 0 16px;
  border-left:4px solid #2aa461;
  padding-left:12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}
.d-section h2 .sub {
  font-size:13px;
  color:#999;
  font-weight:400;
}
.d-content {
  font-size:14.5px;
  line-height:1.9;
  color:#444;
}
.d-content img { max-width:100%; height:auto; }

.play-list { display:flex; flex-wrap:wrap; gap:10px; }
.play-btn {
  display:inline-block;
  padding:8px 18px;
  background:#2aa461;
  color:#fff;
  border-radius:6px;
  font-size:13.5px;
  transition:.2s;
}
.play-btn:hover {
  background:#239154;
  transform:translateY(-2px);
}

/* ===================================================
   页脚 / 空态
   =================================================== */

.footer {
  text-align:center;
  color:#999;
  font-size:13px;
  padding:30px 20px;
}
.search-empty {
  padding:60px 0;
  text-align:center;
  color:#999;
  font-size:14px;
}

/* ===================================================
   响应式
   =================================================== */

@media (max-width:768px){
  .header-inner {
    flex-wrap:wrap;
    height:auto;
    padding:10px 14px;
    gap:10px;
  }
  .logo { font-size:18px; }
  .pill-nav {
    width:100%;
    order:3;
    padding-bottom:2px;
    gap:2px;
  }
  .pill-nav a {
    padding:6px 12px;
    font-size:13px;
  }
  .search-box {
    flex:1;
    width:auto;
    min-width:0;
    height:36px;
    padding-left:14px;
    margin-left:0;
    order:2;
  }
  .search-box input { font-size:13px; line-height:36px; }
  .search-box button { width:28px; height:28px; }

  .section {
    padding:16px;
    margin:12px auto;
    border-radius:6px;
  }
  .section h2 { font-size:15.5px; }

  .grid {
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .card .t { font-size:12.5px; }

  .d-section { padding:16px; }
  .d-section h2 { font-size:15.5px; }

  .footer { font-size:12px; padding:20px 12px; }
}