/* ===== Dark Theme - 爱古装 黑色主题 ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0a0a0a; color: #c0c0c0; line-height:1.6; min-height:100vh;
}
a { color: #ccc; text-decoration:none; transition:color .2s; }
a:hover { color: #fff; }
img { max-width:100%; height:auto; display:block; }

/* ===== Header ===== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(15,15,15,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid #222;
}
.header-inner {
  max-width:1360px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; height:56px; position:relative;
}
.logo { font-size:1.2rem; font-weight:700; color:#fff; white-space:nowrap; flex-shrink:0; display:flex; align-items:center; }
.logo img { height:34px; width:auto; display:block; }

/* Navigation - PC 100% width second row */
.nav-wrap {
  max-width:1360px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; border-top:1px solid #1a1a1a; overflow-x:auto;
}
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; padding:8px; }
.nav { white-space:nowrap; padding:6px 0; }
.nav ul { list-style:none; display:inline-flex; gap:2px; }
.nav li a {
  display:block; padding:6px 12px; border-radius:6px; font-size:1.1rem;
  color:#999; transition:all .2s; white-space:nowrap;
}
.nav li a:hover, .nav li a.active { background:#222; color:#fff; }

/* Search */
.header-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.header-right form { display:flex; align-items:center; }
.header-right input[type="text"] {
  width:140px; height:32px; padding:0 10px; border:1px solid #333; border-radius:5px 0 0 5px;
  background:#1a1a1a; color:#ccc; font-size:.8rem; outline:none; transition:width .3s;
}
.header-right input[type="text"]:focus { width:180px; border-color:#e8491d; }
.header-right button {
  height:32px; padding:0 12px; border:none; border-radius:0 5px 5px 0;
  background:#e8491d; color:#fff; cursor:pointer; font-size:.8rem;
}
.header-right .user-link { color:#999; font-size:.8rem; padding:4px 8px; white-space:nowrap; }

/* ===== Main Content ===== */
.main { max-width:1360px; margin:96px auto 0; padding:0 16px 40px; }

/* Page Title */
.page-title { padding:24px 0 16px; }
.page-title h1 { font-size:1.5rem; color:#fff; font-weight:600; }
.page-title .count { color:#666; font-size:.875rem; margin-top:4px; }

/* ===== Image Grid ===== */
.pic-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:14px;
}
.pic-card {
  background:#141414; border-radius:10px; overflow:hidden;
  transition:transform .2s, box-shadow .2s; cursor:pointer;
  border:1px solid #1e1e1e;
}
.pic-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.pic-card .thumb {
  position:relative; width:100%; padding-top:75%; overflow:hidden; background:#1a1a1a;
}
.pic-card .thumb img {
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  transition:transform .3s, opacity .4s;
}
.pic-card:hover .thumb img { transform:scale(1.05); }
.pic-card .thumb .views {
  position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.7);
  padding:2px 8px; border-radius:4px; font-size:.75rem; color:#aaa;
}
.pic-card .info { padding:12px; }
.pic-card .info h3 {
  font-size:.9rem; font-weight:500; color:#ddd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pic-card .info .meta { display:flex; justify-content:space-between; margin-top:6px; font-size:.75rem; color:#666; }

/* ===== Pagination ===== */
.pagination { display:flex; justify-content:center; gap:6px; padding:40px 0 20px; flex-wrap:wrap; }
.pagination a, .pagination span {
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 10px; border-radius:6px; font-size:.875rem; color:#888; background:#141414; border:1px solid #222; transition:all .2s;
}
.pagination a:hover { background:#222; color:#fff; border-color:#e8491d; }
.pagination .current { background:#e8491d; color:#fff; border-color:#e8491d; }
.pagination .disabled { opacity:.3; cursor:default; }

/* ===== Detail Page ===== */
.detail-header { padding:16px 0; border-bottom:1px solid #1e1e1e; margin-bottom:24px; }
.detail-header h1 { font-size:1.4rem; color:#fff; font-weight:600; }
.detail-header .meta { display:flex; gap:16px; margin-top:8px; font-size:.8rem; color:#666; flex-wrap:wrap; }
.detail-header .meta span { display:flex; align-items:center; gap:4px; }

.detail-nav { display:flex; gap:12px; padding:16px 0; flex-wrap:wrap; }
.detail-nav a {
  display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px;
  background:#141414; color:#ccc; font-size:.875rem; border:1px solid #222; transition:all .2s;
}
.detail-nav a:hover { background:#e8491d; color:#fff; border-color:#e8491d; }

/* Gallery */
.gallery { display:grid; grid-template-columns:1fr; gap:12px; }
.gallery .img-wrap {
  background:#141414; border-radius:8px; overflow:hidden; border:1px solid #1a1a1a;
  position:relative; cursor:zoom-in;
}
.gallery .img-wrap img { width:100%; height:auto; display:block; }
.gallery .img-wrap .img-index {
  position:absolute; bottom:12px; right:12px;
  background:rgba(0,0,0,.7); color:#aaa; padding:2px 10px; border-radius:4px; font-size:.75rem;
}

/* VIP Lock */
.vip-lock {
  text-align:center; padding:40px 20px; margin:24px 0; background:#141414; border-radius:10px; border:1px solid #1e1e1e;
}
.vip-lock .lock-icon { font-size:3rem; margin-bottom:12px; }
.vip-lock h3 { color:#fff; font-size:1.1rem; margin-bottom:8px; }
.vip-lock p { color:#666; font-size:.875rem; margin-bottom:16px; }
.vip-lock .btn-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.vip-lock .btn {
  padding:10px 28px; border-radius:8px; font-size:.9rem; font-weight:500; cursor:pointer; transition:all .2s; border:none;
}
.vip-lock .btn-primary { background:#e8491d; color:#fff; }
.vip-lock .btn-primary:hover { background:#d03d15; }
.vip-lock .btn-secondary { background:#222; color:#ccc; }
.vip-lock .btn-secondary:hover { background:#333; color:#fff; }

/* Download */
.download-bar { text-align:center; padding:20px 0; }
.download-bar .btn-download {
  display:inline-flex; align-items:center; gap:8px; padding:12px 32px; border-radius:8px;
  background:#e8491d; color:#fff; font-size:1rem; font-weight:500; transition:all .2s;
}
.download-bar .btn-download:hover { background:#d03d15; transform:translateY(-1px); }

/* ===== Related ===== */
.section-title { font-size:1.1rem; color:#fff; font-weight:600; padding:32px 0 16px; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; }
.related-card { background:#141414; border-radius:8px; overflow:hidden; border:1px solid #1e1e1e; transition:transform .2s; }
.related-card:hover { transform:translateY(-2px); }
.related-card .thumb { width:100%; padding-top:75%; position:relative; overflow:hidden; background:#1a1a1a; }
.related-card .thumb img { position:absolute; top:0;left:0;width:100%;height:100%;object-fit:cover; }
.related-card .info { padding:8px 10px; }
.related-card .info h4 { font-size:.8rem; color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== Search Page ===== */
.search-box-page { max-width:600px; margin:24px auto; }
.search-box-page form { display:flex; }
.search-box-page input[type="text"] {
  flex:1; height:44px; padding:0 16px; border:1px solid #333; border-radius:8px 0 0 8px;
  background:#1a1a1a; color:#ccc; font-size:1rem; outline:none;
}
.search-box-page button {
  height:44px; padding:0 24px; border:none; border-radius:0 8px 8px 0;
  background:#e8491d; color:#fff; font-size:1rem; cursor:pointer;
}
.search-results .result-item {
  display:flex; gap:16px; padding:16px; background:#141414; border-radius:8px; margin-bottom:12px; border:1px solid #1e1e1e;
  transition:background .2s;
}
.search-results .result-item:hover { background:#1a1a1a; }
.search-results .result-item img { width:120px; height:80px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.search-results .result-item .result-info { flex:1; min-width:0; }
.search-results .result-item h3 { font-size:.95rem; color:#ddd; margin-bottom:4px; }
.search-results .result-item .desc { font-size:.8rem; color:#666; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== Footer ===== */
.footer { text-align:center; padding:32px 16px; border-top:1px solid #1a1a1a; margin-top:40px; }
.footer p { font-size:.8rem; color:#444; }
.footer a { color:#555; }
.footer a:hover { color:#e8491d; }

/* ===== Back to Top ===== */
#gotop {
  position:fixed; bottom:32px; right:32px; width:44px; height:44px; border-radius:50%;
  background:#e8491d; color:#fff; border:none; font-size:1.25rem; cursor:pointer;
  display:none; align-items:center; justify-content:center; z-index:99; box-shadow:0 4px 12px rgba(232,73,29,.3);
  transition:all .3s;
}
#gotop:hover { transform:translateY(-3px); box-shadow:0 6px 16px rgba(232,73,29,.4); }
#gotop.show { display:flex; }

/* ===== Loading / Empty ===== */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state .empty-icon { font-size:3rem; margin-bottom:12px; opacity:.3; }
.empty-state p { color:#555; font-size:.9rem; }

/* ===== Responsive ===== */
@media (max-width:768px) {
  .header-inner { height:50px; }
  .nav-wrap { height:0; overflow:visible; border:none; }
  .nav-toggle { display:block; }
  .nav {
    display:none; position:fixed; top:50px; left:0; right:0; z-index:99;
    height:calc(100vh - 50px);
    background:rgba(10,10,10,.98); padding:16px 16px 40px; overflow-y:auto; white-space:normal;
  }
  .nav.open { display:block; }
  .nav ul { flex-direction:column; gap:2px; display:flex; }
  .nav li a { padding:14px 16px; font-size:1rem; border-radius:8px; }
  .header-right input[type="text"] { width:110px; }
  .header-right input[type="text"]:focus { width:130px; }

  .main { margin-top:66px; padding:0 12px 32px; }
  .pic-grid { grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:10px; }
  .page-title h1 { font-size:1.2rem; }
  .detail-header h1 { font-size:1.15rem; }

  .search-results .result-item { flex-direction:column; }
  .search-results .result-item img { width:100%; height:auto; max-height:180px; }

  .related-grid { grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
}

@media (max-width:480px) {
  .pic-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .header-right input[type="text"] { width:100px; }
  .header-right input[type="text"]:focus { width:120px; }
  .vip-lock .btn { width:100%; }
}