/* ================================================================
   RESET & BASE — Mirages Theme Dark Mode
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #2c2a2a;
  --bg-card: #343232;
  --bg-nav: rgba(52,50,50,0.97);
  --text: #f0f0f0;
  --text-secondary: #bcbcbc;
  --text-dim: #aaa;
  --accent: #1abc9c;
  --accent-hover: #16a085;
  --border: #403e3e;
  --card-radius: .3125rem;
  --nav-h: 3rem;
}

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
  :root { --bg-nav: rgba(52,50,50,0.7); }
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

/* ================================================================
   LAYOUT CONTAINERS
   ================================================================ */
.container { max-width: 864px; margin: 0 auto; padding: 0 .625rem; }
.row { width: 100%; }
@media (min-width: 768px) and (max-width: 1250px) { .container { max-width: 750px; } }
@media (min-width: 1251px) { .container { max-width: 864px; } }

.loading { text-align: center; padding: 60px; color: var(--text-dim); font-size: .875rem; }
.display-none { display: none !important; }

/* ================================================================
   MOBILE TOP BAR (.navbar-sidebar)
   ================================================================ */
.navbar-sidebar {
  display: none;
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--bg-nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-shadow: 0 .3125rem .3125rem -.3125rem rgba(0,0,0,.117);
}
.navbar-sidebar-left { display: flex; align-items: center; gap: 6px; }
.navbar-sidebar-right { display: flex; align-items: center; gap: 12px; }
.navbar-sidebar-center { position: absolute; left: 50%; transform: translateX(-50%); }

/* Mobile 精品应用入口（数据空时整个隐藏） */
.mobile-app-entry { position: relative; display: none; align-items: center; margin-left: 6px; }
.mobile-app-entry.show { display: flex; }
.app-entry {
  display: flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.85); font-size: .75rem;
  cursor: pointer; background: none; border: none; padding: 0;
}
.hot-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ff3b30; color: #fff;
  font-weight: 800; letter-spacing: .3px; line-height: 1;
  font-size: 7px; padding: 1px 3px; border-radius: 2px;
  animation: hot-blink 1.2s ease-in-out infinite;
}
@keyframes hot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(0.92); }
}
.mobile-app-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 140px; max-height: 60vh; overflow-y: auto;
  background: #fff; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  padding: 4px 0;
  display: none; z-index: 300;
}
.mobile-app-menu.show { display: block; }
.mobile-app-item {
  display: block; padding: 8px 14px;
  color: #333; font-size: 14px;
  text-decoration: none;
}
.mobile-app-item:hover { background: #f5f5f7; }

.toggle-nav {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.85); font-size: .75rem; cursor: pointer;
  background: none; border: none; padding: 0;
}
.toggle-nav i { font-size: 18px; }
.navbar-logo {
  display: flex; align-items: center; gap: 6px;
}
.logo-icon { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; object-position: center 20%; }
.logo-text {
  font-size: 1.15rem; font-weight: 700; font-style: italic; white-space: nowrap;
  background: linear-gradient(135deg, #ff6ec4, #c560ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.nav-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  color: rgba(255,255,255,.85); cursor: pointer; font-size: 18px;
}
.nav-icon-btn:hover { color: #fff; }

/* Mobile search box (below nav bar) */
.mobile-search-box {
  display: none;
  padding: 6px 12px 8px;
  background: var(--bg-nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.mobile-search-box input {
  width: 100%; padding: 8px 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; color: #ccc; font-size: 13px; outline: none; cursor: pointer;
}

/* ================================================================
   DESKTOP NAVBAR
   ================================================================ */
.navbar {
  display: flex; align-items: center;
  position: fixed; left: 0; right: 0; top: 0; z-index: 891;
  background: var(--bg-nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 .3125rem .3125rem -.3125rem rgba(0,0,0,.117);
  min-height: 78px;
}
.navbar.fixed-top { position: fixed; }

.container-fluid {
  display: flex; align-items: center; flex-wrap: nowrap;
  width: 100%; max-width: 1400px;
  padding: 0 2rem; margin: 0 auto;
}

.navbar-brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .3125rem 0;
  margin-right: 1.5rem;
  line-height: 1.5;
}
.navbar-brand .logo-icon { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; object-position: center 20%; }
.navbar-brand .logo-text { font-size: 1.3rem; }
.navbar-brand:hover { opacity: .85; text-decoration: none; }

/* Desktop menu items */
.navbar-collapse {
  display: flex; flex-basis: auto; align-items: center; flex: 1;
  overflow: visible;
  min-width: 0;
}
.navbar-nav {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  padding: 0; margin: 0; list-style: none;
}
.navbar-nav .nav-item { position: relative; }
.navbar-nav .nav-link {
  display: block; padding: .5rem .5rem;
  color: rgba(255,255,255,.9) !important; font-size: 14px;
  white-space: nowrap; cursor: pointer; line-height: 46px;
  transition: color .2s;
}
.navbar-nav .nav-link:hover { color: rgba(255,255,255,.55) !important; text-decoration: none; }
.navbar-nav .nav-link .arrow { font-size: 10px; margin-left: 2px; opacity: .45; }

/* Desktop dropdown */
.dropdown-menu {
  display: none;
  position: static;
  background: rgba(25, 25, 25, 1);
  border: none;
  border-top: 1px solid var(--border);
  padding: 8px 0 0;
  min-width: 100%;
  list-style: none;
  border-radius: 4px;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: block; padding: 8px 16px;
  color: var(--text) !important; font-size: .8125rem; white-space: nowrap;
}
.dropdown-item:hover { background: var(--border); color: var(--accent) !important; text-decoration: none; }
.nav-link[data-dropdown] { cursor: pointer; user-select: none; }

/* Desktop toolbar (search + user) */
.navbar-toolbar {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  flex-shrink: 0;
}
.nav-search-container {
  display: inline-flex; align-items: center;
  height: 2.25rem; width: 2.25rem; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  overflow: hidden;
  transition: .3s ease all; white-space: nowrap;
}
.nav-search-container .search-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; color: rgba(255,255,255,.7); cursor: pointer; flex-shrink: 0;
  font-size: .85rem;
}
.nav-search-container .search-icon-btn:hover { color: #fff; }
.nav-search-container .search-form { display: none; }
.nav-search-container.expanded .search-form { display: inline-flex; }
.nav-search-container.expanded {
  width: 14rem; border-radius: 2.25rem;
  background: #2c2a2a; border-color: transparent;
}
.search-form input.search {
  height: 2.125rem; width: 9rem; border: 0;
  background: transparent; font-size: .875rem; color: #ccc;
  outline: none; line-height: 1.5;
}

/* Right toolbar icons */
.right-toolbar-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.toolbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(44, 42, 42, 1);
  color: #ccc;
  font-size: .9rem;
  transition: .3s ease all;
  text-decoration: none;
}
.toolbar-icon:hover {
  background: #fff;
  color: #333;
  text-decoration: none;
}
.toolbar-x {
  font-family: serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

/* ================================================================
   CATEGORY NAV BAR — Collapsible dropdown panels
   ================================================================ */
.category-nav {
  display: none !important;
  position: sticky; z-index: 190;
  background: var(--bg-nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@media (max-width: 991px) { .category-nav { top: var(--nav-h); } }
@media (min-width: 992px) { .category-nav { top: var(--nav-h); } }

.catnav-bar {
  display: flex; align-items: center; justify-content: center;
  overflow-x: auto; scrollbar-width: none;
  max-width: 1100px; margin: 0 auto; padding: 0 .5rem;
}
.catnav-bar::-webkit-scrollbar { display: none; }

.catnav-item { position: relative; flex-shrink: 0; padding: 0 2px; }
.catnav-item > a,
.catnav-item > .catnav-label {
  display: flex; align-items: center; gap: 3px;
  padding: 10px 12px;
  color: rgba(255,255,255,.85); font-size: .8125rem;
  white-space: nowrap; cursor: pointer; user-select: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.catnav-item > a:hover,
.catnav-item > .catnav-label:hover { color: rgba(255,255,255,.55); text-decoration: none; }
.catnav-item > a.active { color: #fff; border-bottom-color: var(--accent); }
.catnav-item.open > .catnav-label { color: var(--accent); border-bottom-color: var(--accent); }
.catnav-arrow { font-size: 9px; opacity: .5; transition: transform .25s; }
.catnav-item.open .catnav-arrow { transform: rotate(180deg); opacity: .8; }

.catnav-panel {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 8px; min-width: 120px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); z-index: 300;
  white-space: normal; text-align: center;
}
.catnav-item.open .catnav-panel { display: block; }
.catnav-panel a {
  display: inline-block; padding: 6px 14px; margin: 3px;
  font-size: .75rem; color: var(--text);
  background: rgba(255,255,255,.06); border-radius: 1rem;
  transition: all .2s; white-space: nowrap;
}
.catnav-panel a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.catnav-panel a.active { background: var(--accent); color: #fff; }

.catnav-backdrop { display: none; position: fixed; inset: 0; z-index: 189; }
.catnav-backdrop.open { display: block; }

/* ================================================================
   SIDEBAR (mobile slide-out)
   ================================================================ */
.nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 300;
  transition: opacity .3s;
}
.nav-overlay.open { display: block; }

.sidebar {
  position: fixed; top: 0; left: 0;
  width: 17.5rem; height: 100%;
  background: #191919; z-index: 301;
  transform: translateX(-100%);
  transition: transform .5s ease;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo { display: flex; align-items: center; gap: 8px; }
.sidebar-logo .logo-icon { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; object-position: center 20%; }
.sidebar-logo .logo-text { font-size: 1.2rem; color: #fff !important; -webkit-text-fill-color: #fff; }
.sidebar-close { font-size: 18px; color: #9ba3ad; cursor: pointer; }
.sidebar-close:hover { color: #fff; }

.sidebar-body { padding: .5rem 0; }
.sidebar-group {}
.sidebar-group > a {
  display: block; padding: .375rem 1.75rem;
  line-height: 2.25rem; color: #9ba3ad; font-size: 1rem;
  text-align: center; font-weight: 400; transition: color .2s;
}
.sidebar-group > a:hover { background: #2c2a2a; color: #fff; text-decoration: none; }

.sidebar-group-title {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: .375rem 1.75rem; line-height: 2.25rem;
  color: #9ba3ad; font-size: 1rem; cursor: pointer;
  text-align: center; font-weight: 400; transition: color .2s;
}
.sidebar-group-title:hover { background: #2c2a2a; color: #fff; }
.sidebar-arrow { font-size: 10px; opacity: .5; transition: transform .2s; }
.sidebar-group.collapsed .sidebar-arrow { transform: rotate(-90deg); }

.sidebar-group-items {
  background: #131313;
  max-height: 500px; overflow: hidden;
  transition: max-height .3s ease;
}
.sidebar-group.collapsed .sidebar-group-items { max-height: 0; }
.sidebar-group-items .cat-grid {
  display: inline-flex; flex-wrap: wrap; width: 100%; padding: .5rem;
}
.sidebar-group-items .cat-grid a {
  width: 50%; display: inline-block; padding: .75rem 1rem;
  font-size: .875rem; text-align: center; color: #9ba3ad;
  background: #2c2a2a; border-radius: .3125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-group-items .cat-grid a:hover { background: #444; color: #fff; text-decoration: none; }

/* ================================================================
   USER MENU
   ================================================================ */
.user-menu-overlay { display: none; position: fixed; inset: 0; z-index: 250; }
.user-menu-overlay.open { display: block; }
.user-menu {
  display: none; position: fixed;
  top: var(--nav-h); right: 16px;
  width: 200px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  z-index: 251; box-shadow: 0 8px 24px rgba(0,0,0,.5); overflow: hidden;
}
.user-menu.open { display: block; }
.user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; border-bottom: 1px solid var(--border);
}
.user-avatar { font-size: 28px; }
.login-btn { color: var(--accent) !important; font-size: .875rem; font-weight: 500; }
.user-menu-items a {
  display: block; padding: 10px 16px; color: var(--text); font-size: .875rem;
}
.user-menu-items a:hover { background: var(--border); text-decoration: none; }
.user-menu-items a i { margin-right: 8px; width: 16px; text-align: center; }

/* ================================================================
   SEARCH OVERLAY (mobile)
   ================================================================ */
.search-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.85); z-index: 400; padding: 16px;
  align-items: flex-start; justify-content: center;
}
.search-overlay.open { display: flex; }
.search-overlay-inner { display: flex; gap: 8px; width: 100%; max-width: 600px; margin-top: 60px; }
.search-overlay input {
  flex: 1; background: rgba(255,255,255,.08);
  border: 1px solid var(--border); color: #fff;
  padding: 8px 12px; border-radius: 4px; font-size: .875rem; outline: none;
}
.search-overlay button {
  background: var(--accent); color: #fff; border: none;
  padding: 8px 14px; border-radius: 4px; cursor: pointer; font-size: .875rem;
}
.search-cancel { background: transparent !important; color: var(--text-dim) !important; }

/* ================================================================
   MASTHEAD
   ================================================================ */
#masthead {
  position: relative; display: table; text-align: center;
  overflow: hidden; color: #fff;
  width: 100%;
  background-color: #343232;
  transition: 1s ease background-color;
}
#masthead .inner {
  display: table-cell; vertical-align: middle;
  position: relative; z-index: 10; width: 100%;
  background-color: transparent;
  padding: 1.5rem 1rem;
}
.blog-title {
  font-size: 2rem; line-height: 1.4;
  margin-bottom: .5rem; font-weight: 300;
}
.blog-description {
  font-size: .875rem; font-weight: 400;
  padding-bottom: .75rem; color: rgba(255,255,255,.7);
}
@media (max-width: 759px) {
  .blog-title { font-size: 1.75rem; font-weight: 400; margin-bottom: .5rem; }
  .blog-description { font-size: .8125rem; }
  #masthead .inner { padding: 1.5rem .75rem; }
}

/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */
main {
  padding: 2.25rem .625rem .375rem;
}

/* ================================================================
   POST CARD (card mode — matches Mirages body.card)
   ================================================================ */
.article-list article { margin-bottom: 1.25rem; }
.article-list article a { text-decoration: none; color: inherit; }

.post-card {
  border-radius: var(--card-radius); overflow: hidden;
  background: var(--bg) no-repeat center; background-size: cover;
  position: relative;
  transition: .3s ease all;
}
.post-card:hover {
  box-shadow: 0 22px 43px rgba(0,0,0,.15);
  transform: translateY(-4px) scale(1.05);
}
.post-card .blog-background {
  display: block; width: 100%; height: 100%;
  background-repeat: no-repeat; background-size: cover; background-position: center;
  position: absolute; left: 0; top: 0; overflow: hidden;
  opacity: 1; transition: 1s ease opacity;
}
.post-card-mask {
  background: rgba(0,0,0,.25);
  position: relative; z-index: 10;
  display: table; vertical-align: middle;
  width: 100%; height: 15.5rem;
}
.post-card-container {
  padding: 2rem; text-align: center;
  display: table-cell; width: 100%; height: 100%;
  vertical-align: middle;
}
.post-card-title {
  font-size: 1.5625rem; font-weight: 400; color: #fff;
  margin-bottom: .75rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-info {
  color: #eee; font-size: .875rem; text-align: center; font-weight: 400;
}

/* HOT badge */
.badge-wrap {
  width: 100%; height: 100%; position: absolute; top: -8px; left: 8px;
  overflow: hidden; z-index: 20; pointer-events: none; opacity: .7;
}
.badge-ribbon {
  display: inline-block; text-align: center;
  width: 200px; height: 30px; line-height: 27px;
  position: absolute; top: 30px; right: -50px; z-index: 2;
  transform: rotate(45deg); border: 1px dashed;
  box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0,0,0,.6);
  background: rgb(1,132,127); color: #fff; font-size: .875rem;
}

/* ================================================================
   RANKING TIMELINE (mrdg 吃瓜榜单)
   ================================================================ */
.ranking-timeline {
  display: flex; flex-direction: column; gap: .75rem;
}
.ranking-item {
  display: flex; align-items: stretch; gap: 1rem;
  background: var(--bg-card); border-radius: var(--card-radius);
  text-decoration: none; color: inherit;
  transition: .2s ease all; overflow: hidden;
  border-left: 3px solid var(--accent);
}
.ranking-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.ranking-item.weekly { border-left-color: #e67e22; }
.ranking-item.monthly { border-left-color: #e74c3c; }

.ranking-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 4rem; padding: .75rem .5rem;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
}
.ranking-month { font-size: .75rem; color: var(--text-dim); }
.ranking-day { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.ranking-weekday { font-size: .75rem; color: var(--text-secondary); }

.ranking-body {
  flex: 1; padding: .75rem .5rem .75rem 0;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.ranking-badge {
  display: inline-block; font-size: .6875rem; font-weight: 600;
  padding: 1px 8px; border-radius: 3px; margin-bottom: .375rem;
  width: fit-content;
  background: rgba(26,188,156,.15); color: var(--accent);
}
.ranking-badge.weekly { background: rgba(230,126,34,.15); color: #e67e22; }
.ranking-badge.monthly { background: rgba(231,76,60,.15); color: #e74c3c; }

.ranking-title {
  font-size: .9375rem; font-weight: 500; color: var(--text);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ranking-subtitle {
  font-size: .75rem; color: var(--text-dim); margin-top: .25rem;
}
.ranking-meta {
  display: flex; gap: .75rem; margin-top: .375rem;
  font-size: .75rem; color: var(--text-dim);
}

.ranking-thumb {
  width: 5rem; min-height: 100%; flex-shrink: 0;
  background-repeat: no-repeat; background-size: cover; background-position: center;
  opacity: 1; transition: 1s ease opacity;
}

@media (max-width: 768px) {
  .ranking-date { min-width: 3.25rem; padding: .5rem .25rem; }
  .ranking-day { font-size: 1.5rem; }
  .ranking-title { font-size: .875rem; }
  .ranking-thumb { width: 4rem; }
}

/* ================================================================
   BREADCRUMB (SVG chevron like Mirages)
   ================================================================ */
.nav-breadcrumb-wrap {
  display: flex; align-items: center; gap: 4px;
  font-size: .8125rem; color: var(--text-dim);
  margin-bottom: 1.25rem; padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.nav-breadcrumb-wrap a {
  color: var(--text-dim); padding: 4px 8px;
  border-radius: .3125rem; transition: background .2s;
}
.nav-breadcrumb-wrap a:hover { background: var(--border); color: var(--accent); text-decoration: none; }
.nav-breadcrumb-wrap .point {
  width: 12px; height: 12px; fill: currentColor; opacity: .5; flex-shrink: 0;
}
.nav-breadcrumb-wrap .name { color: var(--text-dim); }

/* ================================================================
   PAGE TITLE
   ================================================================ */
.page-title {
  font-size: 1.25rem; font-weight: 400; margin-bottom: 1.25rem; color: var(--text);
}

/* ================================================================
   PAGINATION (matches Mirages .page-nav)
   ================================================================ */
.page-nav {
  position: relative; display: flex; flex-direction: column;
  height: 3rem; line-height: 3rem; margin: 1.5rem 0 .8rem;
}
.page-jump {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 14rem; text-align: center; white-space: nowrap;
}
.page-jump .page-info { color: #fff; font-size: 1rem; }
.page-jump input {
  padding: 8px; max-width: 3.5rem;
  background: transparent; outline: none;
  border: 1px solid #fff; border-radius: 3px;
  color: #fff; font-weight: bold; margin: 0 .3rem;
  height: 36px; line-height: 36px; text-align: center;
  font-size: .875rem;
}
.page-jump input:focus { border-color: var(--accent); }
.page-jump button {
  background: transparent; border: 1px solid #fff;
  color: #fff; padding: 8px 12px; border-radius: 5px;
  height: 36px; cursor: pointer; font-size: .875rem;
}
.page-jump button:hover { border-color: var(--accent); color: var(--accent); }

/* Hide spinner on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.page-navigator {
  padding: 0; list-style: none; display: flex;
  justify-content: space-between; align-items: center;
}
.page-navigator li { display: none; }
.page-navigator li.prev { display: inline-block; }
.page-navigator li.next { display: inline-block; }
.page-navigator li a {
  color: #fff; padding: 8px 12px;
  border: 1px solid #fff; border-radius: 5px;
  font-size: .875rem; transition: all .2s;
}
.page-navigator li a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ================================================================
   ARTICLE DETAIL
   ================================================================ */
.article-detail { max-width: 816px; margin: 0 auto; }

/* Search + breadcrumb wrap */
.search-nav-breadcrumb-wrap { margin-bottom: 1.25rem; }

/* Title */
.post-title {
  margin-bottom: .9375rem; font-weight: 300;
  font-size: 1.5rem; text-align: left; color: var(--text-secondary);
  line-height: 1.5;
}
@media (min-width: 1440px) { .post-title { font-size: 2.25rem; } }

/* Meta */
.post-meta {
  padding: 0; list-style: none; color: #ccc;
  margin-bottom: 0; text-align: left; font-size: .875rem;
}
.post-meta li { display: inline-block; margin-bottom: .9375rem; padding: 0; white-space: nowrap; }
.post-meta li a { color: #ccc !important; }
.post-meta li a:hover { color: var(--accent) !important; }

/* Content */
.post-content {
  font-family: 'Lora', 'PT Serif', 'Source Serif Pro', Georgia, 'PingFang SC', serif;
  font-size: 1rem; line-height: 1.75rem; color: var(--text);
  margin-bottom: 1.5rem; word-wrap: break-word;
}
.post-content > *:first-child { margin-top: 0 !important; }
.post-content > *:last-child { margin-bottom: 0 !important; }
.post-content p { margin-bottom: 1rem; }
.post-content a { color: var(--accent); font-weight: 500; word-break: break-all; }
.post-content a:hover { text-decoration: underline; }
.post-content h2 {
  font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 .75rem;
  color: #fff;
}
.post-content h3 {
  font-size: 1.1rem; font-weight: 500; margin: 1.25rem 0 .5rem; color: #fff;
}
.post-content strong { font-weight: bold; }
.post-content blockquote {
  border-left: 3px solid var(--accent); padding: .75rem 1.25rem;
  margin: 1rem 0; background: rgba(255,255,255,.04);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  color: var(--text-secondary);
}
.post-content img {
  width: 100%; border-radius: var(--card-radius);
  cursor: pointer; transition: opacity .2s;
}
.post-content img:hover { opacity: .85; }
.post-content .img-wrap { margin: .75rem 0; }
.post-content hr {
  overflow: hidden; margin: 2rem 0; padding: 0; height: .125rem; border: none;
  background: #2c2a2a repeating-linear-gradient(-45deg, #bcbcbc, #bcbcbc .25rem, transparent .25rem, transparent .5rem);
}

/* Video */
.video-section { margin-bottom: 1.5rem; }
.video-title { font-size: 1rem; font-weight: 400; margin-bottom: .5rem; color: var(--text-dim); }
.video-container { width: 100%; background: #000; border-radius: var(--card-radius); overflow: hidden; aspect-ratio: 16/9; position: relative; }
.video-container video { width: 100%; height: 100%; display: block; }
.video-poster {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; cursor: pointer; gap: 8px;
  color: rgba(255,255,255,.8); transition: color .2s;
}
.video-poster:hover { color: #fff; }
.video-poster i { font-size: 3rem; }
.video-poster span { font-size: .875rem; }
.video-poster.loading { cursor: wait; }
.video-poster.error { color: rgba(255,100,100,.8); }
.video-poster.error:hover { color: #ff6464; }

/* ================================================================
   TAGS
   ================================================================ */
.tags {
  clear: both; display: flex; flex-direction: column;
  margin-top: .9375rem; padding-top: .625rem;
  min-height: 2rem; line-height: 1.4375; font-size: .875rem;
  color: var(--text-dim); margin-bottom: 1rem;
}
.tags .keywords {
  display: flex; flex-direction: row; flex-wrap: wrap;
  margin-right: auto;
}
.tags .keywords > a {
  margin-right: .5rem; margin-top: .5rem;
  padding: .5rem 1rem; border-radius: 1rem;
  background: var(--border); color: var(--text);
  text-decoration: none; font-size: .75rem; font-weight: 400;
  transition: color .2s;
}
.tags .keywords > a:hover { color: var(--accent); }
.tags .modify-time {
  margin-top: 1rem; display: flex; flex-direction: row-reverse;
  white-space: nowrap; color: var(--text-secondary);
}

/* ================================================================
   SHARE BAR
   ================================================================ */
.share-bar { display: flex; gap: 8px; margin: 1rem 0; }
.share-btn {
  padding: 6px 14px; border-radius: 4px; font-size: .8125rem;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-dim); cursor: pointer; transition: all .2s;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ================================================================
   COPYRIGHT
   ================================================================ */
.content-copyright {
  background: var(--bg-card); border-radius: var(--card-radius);
  padding: 1rem; margin-top: 1rem; font-size: .8125rem;
  color: var(--text-dim); line-height: 1.7;
}
.content-copyright a { color: var(--accent); }

/* ================================================================
   POST NEAR (Prev / Next navigation)
   ================================================================ */
.post-near {
  margin-top: 1.5rem; border-radius: var(--card-radius);
  overflow: hidden; background: var(--bg-card);
}
.post-near nav { display: flex; flex-direction: row; }
.post-near .prev,
.post-near .next {
  width: 50%; display: table-cell;
  background: rgba(255,255,255,.04);
}
.post-near .prev { padding-right: 1.25rem; position: relative; }
.post-near .prev:after {
  content: ''; position: absolute;
  bottom: 0; right: 0; width: 1px;
  background-color: #979797;
  height: 65%; top: 50%; transform: translate(0, -50%);
}
.post-near .next { padding-left: 1.25rem; text-align: right; }

.post-near .prev > a,
.post-near .next > a {
  padding: 1.75rem 1rem; display: block;
  color: var(--text) !important; text-decoration: none;
}
.post-near .prev > a { padding-left: 2rem; padding-right: 0; }
.post-near .next > a { padding-right: 2rem; padding-left: 0; }

.post-near .prev-t {
  font-size: .875rem; margin-bottom: 0;
  color: var(--accent);
}
.post-near-span span { display: inline-block; font-size: .9375rem; }

@media (max-width: 767px) {
  .post-near nav { flex-direction: column; }
  .post-near .prev, .post-near .next { width: 100%; }
  .post-near .next { text-align: left; }
  .post-near .prev:after { display: none; }
  .post-near .prev > a, .post-near .next > a { padding: 1rem; }
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.95); z-index: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); color: #fff; border: none;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.6); font-size: .875rem;
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: #fff; font-size: 28px; cursor: pointer;
}

/* ================================================================
   FOOTER — matches Mirages foot-menu + #footer
   ================================================================ */
#foot-menu {
  display: none !important;
  background: var(--bg-card);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-bottom: env(safe-area-inset-bottom);
}

.foot-menu {
  display: none !important;
  justify-content: space-evenly;
  padding: 8px 0;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(52,50,50,0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.foot-menu a {
  display: flex; flex-direction: column; align-items: center;
  color: rgba(255,255,255,.7); font-size: .75rem; gap: 2px; padding: 2px 8px;
  transition: color .2s;
}
.foot-menu a:hover { color: #fff; text-decoration: none; }
.foot-menu-icon { font-size: 1.25rem; margin-bottom: 2px; }

.footer-desc {
  text-align: center; padding: 1.25rem 1rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text-dim); font-size: .8125rem; line-height: 1.8;
}
.footer-desc-title {
  font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: .25rem;
}
.footer-desc strong { color: var(--accent); }

.footer-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .75rem 1rem;
  gap: 6px;
}
.footer-link a {
  color: var(--text-dim);
  font-size: .8125rem;
}
.footer-link a:hover { color: var(--accent); text-decoration: none; }
.footer-link .sep { display: none; }

.contact-link {
  text-align: center; padding: .5rem 1rem .75rem;
  display: flex; justify-content: center; gap: 1.5rem;
}
.contact-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-dim);
  font-size: 1.1rem;
  transition: all 0.2s;
}
.contact-link a:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-decoration: none;
}

#footer {
  background: var(--bg); text-align: center;
  padding: 1.25rem 1rem 2rem; font-size: .75rem; color: var(--text-dim);
}
.protocol { margin-bottom: .75rem; }
.protocol a {
  color: var(--text-dim); margin: 0 8px; font-size: .75rem;
}
.protocol a:hover { color: var(--accent); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991px) {
  .navbar { display: none !important; }
  .navbar-sidebar { display: flex; }
  .mobile-search-box { display: block; }
  .user-menu { top: var(--nav-h); }
  .right-toolbar-icons { display: none !important; }
}
@media (min-width: 992px) {
  body { padding-top: 78px; }
  .navbar-sidebar { display: none !important; }
  .mobile-search-box { display: none !important; }
  .navbar { display: flex !important; }
}
@media (max-width: 767px) {
  main { padding: 1.5rem .625rem .375rem; }
  .post-card-mask { height: 12.5rem; }
  .post-card-title { font-size: 1.1625rem; }
  .post-card-container { padding: 4rem 3rem 3.5rem; }
  .post-title { font-size: 1.25rem; }
  .blog-title { font-size: 1.5rem; }
}
@media (max-width: 390px) {
  .page-jump input { max-width: 3rem; }
}
@media (max-width: 336px) {
  .post-card-mask { height: 10.5rem; }
}
@media (max-width: 640px) {
  .post-near .prev > a { padding-left: 1rem; }
  .post-near .next > a { padding-right: 1rem; }
}

/* ================================================================
   MODAL (求片 / 收藏)
   ================================================================ */
.modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: #2a2828; border-radius: 12px; width: 100%; max-width: 420px; color: #f0f0f0; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #3a3838; }
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-close { background: none; border: none; color: #999; cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; }
.modal-close:hover { color: #fff; }
.modal-body { padding: 16px 20px; }
.modal-desc { font-size: .85rem; color: #bcbcbc; margin-bottom: 12px; }
.modal-input { width: 100%; background: #1e1c1c; border: 1px solid #444; border-radius: 6px; color: #f0f0f0; font-size: .875rem; padding: 10px 12px; margin-bottom: 10px; box-sizing: border-box; }
.modal-input:focus { outline: none; border-color: #1abc9c; }
.modal-textarea { width: 100%; background: #1e1c1c; border: 1px solid #444; border-radius: 6px; color: #f0f0f0; font-size: .875rem; padding: 10px 12px; resize: vertical; box-sizing: border-box; font-family: inherit; }
.modal-textarea:focus { outline: none; border-color: #1abc9c; }
.modal-msg { font-size: .85rem; margin-top: 10px; padding: 8px 12px; border-radius: 6px; }
.modal-msg.success { background: #1a3a2a; color: #1abc9c; }
.modal-msg.error { background: #3a1a1a; color: #e74c3c; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid #3a3838; }
.modal-btn-primary { background: #1abc9c; color: #fff; border: none; border-radius: 6px; padding: 9px 22px; font-size: .875rem; cursor: pointer; }
.modal-btn-primary:hover { background: #16a085; }
.modal-btn-cancel { background: #444; color: #ccc; border: none; border-radius: 6px; padding: 9px 22px; font-size: .875rem; cursor: pointer; }
.modal-btn-cancel:hover { background: #555; }
.bookmark-guide { }
.bookmark-guide h4 { font-size: .9rem; color: #fff; margin: 0 0 8px; }
.bookmark-guide .bm-steps { list-style: none; padding: 0; margin: 0 0 16px; }
.bookmark-guide .bm-steps li { font-size: .85rem; color: #bcbcbc; padding: 5px 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.bookmark-guide .bm-steps li .step-num { background: #1abc9c; color: #fff; border-radius: 50%; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.bookmark-guide .bm-key { display: inline-block; background: #444; border: 1px solid #666; border-radius: 4px; padding: 1px 7px; font-size: .8rem; color: #f0f0f0; font-family: monospace; }

/* ================================================================
   AGE VERIFICATION POPUP
   ================================================================ */
.age-warning-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
.age-warning-card { max-width: 400px; background: #343232; border-radius: 12px; padding: 2rem; text-align: center; color: #f0f0f0; }
.age-warning-card h2 { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
.age-warning-card p { font-size: .875rem; line-height: 1.6; margin-bottom: .5rem; color: #bcbcbc; }
.age-warning-card .en-text { font-size: .75rem; color: #888; margin-bottom: 1.5rem; }
.age-warning-btns { display: flex; gap: 12px; justify-content: center; }
.age-warning-btns button { padding: 10px 24px; border-radius: 6px; border: none; font-size: .875rem; cursor: pointer; }
.btn-confirm { background: #1abc9c; color: #fff; }
.btn-confirm:hover { background: #16a085; }
.btn-leave { background: #555; color: #ccc; }
.btn-leave:hover { background: #666; }

/* ================================================================
   TAG CLOUD
   ================================================================ */
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  padding: 1rem 0; justify-content: center;
}
.tag-item {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary) !important;
  transition: all .2s;
  line-height: 1.5;
}
.tag-item:hover {
  background: var(--accent);
  color: #fff !important;
  border-color: var(--accent);
  text-decoration: none;
}
.tag-item sup {
  font-size: .65em; color: var(--text-dim); margin-left: 2px;
}
.page-title {
  font-size: 1.25rem; color: var(--text); margin-bottom: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}

/* ================================================================
   RELATED ARTICLES
   ================================================================ */
.related-title {
  font-size: 1.1rem; color: var(--text); margin: 1.5rem 0 .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 767px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
.related-card {
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform .2s;
}
.related-card:hover { transform: translateY(-2px); text-decoration: none; }
.related-cover {
  width: 100%; padding-top: 56%;
  background-size: cover; background-position: center;
  background-color: #2a2a2a;
}
.related-info { padding: 8px 10px; }
.related-card-title {
  font-size: .8125rem; color: var(--text);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   广告系统 — Native Ad Slots
   ================================================================ */

/* ── Slot 1 · 导航热门标签下拉 ── */
.ad-s1-trigger {
  font-size: .75rem; color: #a0c8a0;
  padding: 0 11px; display: flex; align-items: center; gap: 4px;
  cursor: pointer; white-space: nowrap; position: relative;
  height: var(--nav-h); border-bottom: 2px solid transparent;
}
.ad-s1-trigger:hover { color: #c8f0c8; }
.ad-s1-mark {
  font-size: .5rem; color: #4a8a4a; background: #1a2a1a;
  padding: 1px 4px; border-radius: 2px;
}
.ad-s1-arrow {
  font-size: 9px; display: inline-block; transition: transform .2s; margin-left: 2px;
}
.ad-s1-arrow.open { transform: rotate(180deg); }

/* Slot 1 mobile trigger */
.ad-s1-mob {
  display: none; align-items: center; gap: 4px;
  font-size: .75rem; color: #a0c8a0; cursor: pointer; white-space: nowrap;
}
@media (max-width: 768px) {
  .ad-s1-trigger { display: none; }
  .ad-s1-mob { display: flex; flex: 1; justify-content: center; }
}

/* Slot 1 dropdown */
.ad-s1-drop {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #1e1c1c; border-bottom: 2px solid #2a2828;
  z-index: 9999; overflow: hidden; max-height: 0;
  transition: max-height .3s ease;
}
.ad-s1-drop.open { max-height: 500px; }
.ad-s1-inner { padding: 14px 20px 18px; max-width: 1200px; margin: 0 auto; }
.ad-s1-hdr {
  font-size: .625rem; color: #4a4848; letter-spacing: .08em;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.ad-s1-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-s1-tag {
  font-size: .6875rem; color: #8ec88e;
  padding: 4px 12px; border: 1px solid #2a4a2a;
  border-radius: 20px; cursor: pointer; background: #1a2a1a;
  white-space: nowrap; text-decoration: none; display: inline-block;
  transition: all .12s;
}
.ad-s1-tag:hover { background: #253a25; border-color: #4a8a4a; color: #aee8ae; }
.ad-s1-tag.sponsor { color: #c9a96e; border-color: #4a4535; background: #252210; }
.ad-s1-tag.sponsor:hover { background: #352f20; border-color: #c9a96e; }

@media (max-width: 768px) {
  .ad-s1-inner { padding: 10px 12px 14px; }
}

/* ── Slot 2 · 信息流广告卡片 ── */
.ad-s2-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: block; background: #1a1818; margin-bottom: 20px;
  text-decoration: none; color: inherit;
  border-radius: var(--card-radius);
}
.ad-s2-card .pc-imgs { position: relative; }
.ad-s2-img {
  width: 100%; height: 248px; display: block;
  object-fit: cover; background: linear-gradient(160deg, #3a3020, #221e12);
}
.ad-s2-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,6,6,.96) 0%, rgba(8,6,6,.72) 30%, rgba(8,6,6,.18) 56%, transparent 74%);
  pointer-events: none; z-index: 1;
}
.ad-s2-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 24px 18px; text-align: center; z-index: 2;
}
.ad-s2-promo {
  display: inline-block; background: rgba(180,140,60,.15);
  color: #c9a96e; font-size: .5625rem;
  padding: 2px 7px; border-radius: 3px;
  margin-bottom: 5px; border: 1px solid rgba(180,140,60,.2);
}
.ad-s2-title {
  font-size: 1.25rem; font-weight: 700; color: #fff;
  line-height: 1.45; margin-bottom: 6px;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.ad-s2-meta { font-size: .75rem; color: rgba(200,195,190,.6); }

@media (max-width: 768px) {
  .ad-s2-img { height: 14rem; }
  .ad-s2-body { padding: 8px 10px 10px; }
  .ad-s2-title { font-size: .8125rem; margin-bottom: 4px; }
  .ad-s2-meta { font-size: .625rem; }
}

/* ── Slot 3 · 文章内推荐卡片 ── */
.ad-s3-block {
  background: #252323; border-radius: 6px;
  padding: 12px 14px; margin: 16px 0;
  display: flex; gap: 12px; align-items: center;
  border-left: 3px solid #c9a96e;
  cursor: pointer; text-decoration: none; color: inherit;
}
.ad-s3-block:hover { background: #2a2828; }
.ad-s3-img {
  width: 110px; height: 80px; border-radius: 5px;
  background: #2e2c2c; flex-shrink: 0; overflow: hidden;
}
.ad-s3-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-s3-content { flex: 1; min-width: 0; }
.ad-s3-label { font-size: .5625rem; color: #888; letter-spacing: .06em; margin-bottom: 4px; }
.ad-s3-title {
  font-size: .8125rem; color: #c8c3be; line-height: 1.4; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ad-s3-cta { font-size: .625rem; color: #c9a96e; }

@media (max-width: 768px) {
  .ad-s3-block { padding: 10px 12px; }
  .ad-s3-img { width: 80px; height: 62px; }
}

/* ── Slot 4 · 首页精选图标轮播 ── */
.ad-s4-block {
  background: #222020; border-bottom: 1px solid #1a1818;
  padding: 12px 16px 14px; overflow: hidden;
}
.ad-s4-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ad-s4-title { font-size: .8125rem; font-weight: 600; color: #c0bbb6; }
.ad-s4-mark {
  font-size: .5625rem; color: #4a4848; background: #1e1c1c;
  padding: 2px 6px; border-radius: 3px; border: 1px solid #2e2c2c;
}
.ad-s4-track {
  overflow: hidden; position: relative;
}
.ad-s4-track:hover .ad-s4-row { animation-play-state: paused; }
.ad-s4-row {
  display: flex; gap: 10px; width: max-content;
  animation: ad-scroll-4 30s linear infinite;
}
.ad-s4-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; cursor: pointer; flex-shrink: 0; width: 100px;
  text-decoration: none; color: inherit;
}
.ad-s4-icon {
  width: 100px; height: 100px; border-radius: 16px;
  overflow: hidden; flex-shrink: 0; background: #2a2828;
}
.ad-s4-icon img { width: 100%; height: 100%; object-fit: cover; }
.ad-s4-lbl {
  font-size: .6875rem; color: #888; text-align: center;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ad-s4-row.no-scroll, .ad-s5-row.no-scroll { animation: none; }

@keyframes ad-scroll-4 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .ad-s4-block { padding: 10px 12px 12px; }
  .ad-s4-cell { width: 72px; }
  .ad-s4-icon { width: 72px; height: 72px; border-radius: 14px; }
  .ad-s4-track:hover .ad-s4-row { animation-play-state: running; }
}

/* ── Slot 5 · 详情页图标轮播 ── */
.ad-s5-block {
  margin-top: 16px; background: #222020;
  border-radius: 5px; padding: 12px 14px;
  border-top: 1px solid var(--border); overflow: hidden;
}
.ad-s5-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ad-s5-title { font-size: .75rem; color: #6b6560; letter-spacing: .04em; }
.ad-s5-mark {
  font-size: .5625rem; color: #3a3838; background: #1a1818;
  padding: 1px 5px; border-radius: 2px;
}
.ad-s5-track {
  overflow: hidden; position: relative;
}
.ad-s5-track:hover .ad-s5-row { animation-play-state: paused; }
.ad-s5-row {
  display: flex; gap: 10px; width: max-content;
  animation: ad-scroll-5 25s linear infinite;
}
.ad-s5-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; flex-shrink: 0; cursor: pointer; width: 90px;
  text-decoration: none; color: inherit;
}
.ad-s5-icon {
  width: 90px; height: 90px; border-radius: 14px;
  background: #2a2828; overflow: hidden; flex-shrink: 0;
}
.ad-s5-icon img { width: 100%; height: 100%; object-fit: cover; }
.ad-s5-lbl {
  font-size: .625rem; color: #6b6560; text-align: center;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@keyframes ad-scroll-5 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .ad-s5-cell { width: 64px; }
  .ad-s5-icon { width: 64px; height: 64px; border-radius: 12px; }
  .ad-s5-track:hover .ad-s5-row { animation-play-state: running; }
}

/* ============ Article Skeleton（点开详情页时占位，避免闪白或闪 loading 文字）============ */
.article-skeleton { padding: 16px 0; }
.article-skeleton .sk-title,
.article-skeleton .sk-meta,
.article-skeleton .sk-crumbs,
.article-skeleton .sk-line,
.article-skeleton .sk-image {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.article-skeleton .sk-title { height: 2rem; width: 82%; margin-bottom: 14px; }
.article-skeleton .sk-meta { height: 1rem; width: 38%; margin-bottom: 10px; }
.article-skeleton .sk-crumbs { height: 0.9rem; width: 52%; margin-bottom: 20px; }
.article-skeleton .sk-body { display: flex; flex-direction: column; gap: 12px; }
.article-skeleton .sk-line { height: 0.95rem; width: 100%; }
.article-skeleton .sk-line.short { width: 62%; }
.article-skeleton .sk-image { height: 220px; width: 100%; margin: 6px 0; border-radius: 10px; }

@keyframes sk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}