#recent-posts .recent-post-item {
  background: var(--card-bg);
  border: 1px solid var(--light-grey);
  box-shadow: var(--card-box-shadow);
}

#recent-posts .recent-post-item:hover {
  border-color: var(--font-color);
  box-shadow: var(--card-hover-box-shadow, var(--card-box-shadow));
}

#recent-posts .recent-post-item > .recent-post-info {
  color: var(--font-color);
}

#recent-posts .recent-post-item > .recent-post-info > .article-title {
  color: var(--text-highlight-color);
}

#recent-posts .recent-post-item > .recent-post-info > .article-title:hover {
  color: #49b1f5;
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap,
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap a,
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-separator,
#recent-posts .recent-post-item > .recent-post-info > .content {
  color: var(--font-color);
}

/* Mark the real current menu item, especially category submenu pages. */
#menus .menus_item_child .site-page.child.current,
#sidebar-menus .menus_item_child .site-page.child.current {
  background: rgba(73, 177, 245, 0.18);
  color: #49b1f5 !important;
}

#menus .site-page.group.current,
#sidebar-menus .site-page.group.current {
  color: #49b1f5 !important;
}

/* Categories home card layout */
[data-theme="light"] #page .category-hub {
  --hub-border: rgba(74, 112, 198, 0.28);
  --hub-dot: rgba(64, 112, 216, 0.28);
  --hub-bg-a: #f6f9ff;
  --hub-bg-b: #eef4ff;
  --hub-bg-c: #e8f1ff;
  --hub-glow: rgba(130, 175, 255, 0.3);
  --hub-subtitle: rgba(58, 88, 146, 0.82);
  --hub-title: #1d3768;
  --hub-title-shadow: rgba(109, 152, 245, 0.2);
  --hub-desc: rgba(38, 70, 122, 0.88);
  --card-border: rgba(78, 138, 233, 0.45);
  --card-bg-a: rgba(255, 255, 255, 0.92);
  --card-bg-b: rgba(236, 244, 255, 0.94);
  --card-shadow: rgba(59, 96, 170, 0.18);
  --card-hover-border: #4f94ff;
  --card-hover-glow: rgba(81, 149, 255, 0.2);
  --dot-green: #43bd6f;
  --dot-glow: rgba(70, 195, 116, 0.65);
  --icon-color: #3f7ee6;
  --card-title: #193769;
  --card-desc: rgba(33, 66, 120, 0.86);
}

[data-theme="dark"] #page .category-hub {
  --hub-border: rgba(86, 112, 185, 0.35);
  --hub-dot: rgba(145, 170, 255, 0.28);
  --hub-bg-a: #060b1f;
  --hub-bg-b: #070d24;
  --hub-bg-c: #08122b;
  --hub-glow: rgba(190, 152, 255, 0.22);
  --hub-subtitle: rgba(195, 214, 255, 0.8);
  --hub-title: #f3f8ff;
  --hub-title-shadow: rgba(188, 211, 255, 0.45);
  --hub-desc: rgba(215, 226, 246, 0.9);
  --card-border: rgba(87, 197, 122, 0.6);
  --card-bg-a: rgba(16, 27, 56, 0.88);
  --card-bg-b: rgba(10, 16, 37, 0.9);
  --card-shadow: rgba(4, 8, 20, 0.35);
  --card-hover-border: #74f3a5;
  --card-hover-glow: rgba(89, 245, 143, 0.16);
  --dot-green: #63ea87;
  --dot-glow: rgba(95, 244, 140, 0.75);
  --icon-color: #79b5ff;
  --card-title: #f4f8ff;
  --card-desc: rgba(201, 216, 245, 0.86);
}

#page .category-hub {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 1.1rem 1rem 1rem;
  border: 1px solid var(--hub-border);
  background:
    radial-gradient(circle at 1px 1px, var(--hub-dot) 1.1px, transparent 1.1px) 0 0 / 22px 22px,
    linear-gradient(130deg, var(--hub-bg-a) 0%, var(--hub-bg-b) 55%, var(--hub-bg-c) 100%);
}

#page .category-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 75% 45%, var(--hub-glow), transparent 65%);
}

#page .category-hub > * { position: relative; z-index: 1; }

#page .category-hub-subtitle {
  margin: 0 0 0.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--hub-subtitle);
}

#page .category-hub-title {
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--hub-title);
  text-shadow: 0 0 18px var(--hub-title-shadow);
}

#page .category-hub-desc {
  margin: 0 0 1.5rem;
  max-width: 48rem;
  color: var(--hub-desc);
}

#page .category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}

#page .category-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 148px;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: linear-gradient(160deg, var(--card-bg-a) 0%, var(--card-bg-b) 100%);
  box-shadow: 0 10px 26px var(--card-shadow);
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#page .category-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-hover-border);
  box-shadow: 0 14px 34px rgba(4, 8, 20, 0.5), 0 0 18px var(--card-hover-glow);
}

#page .category-card summary {
  list-style: none;
  cursor: pointer;
}

#page .category-card summary::-webkit-details-marker {
  display: none;
}

#page .category-card[open] {
  border-color: var(--card-hover-border);
  box-shadow: 0 14px 34px rgba(4, 8, 20, 0.45), 0 0 18px var(--card-hover-glow);
}

#page .category-dot {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-green);
  box-shadow: 0 0 10px var(--dot-glow);
}

#page .category-icon {
  display: inline-flex;
  margin-top: 0.35rem;
  color: var(--icon-color);
  font-size: 1.1rem;
}

#page .category-card h3 {
  margin: 0.8rem 0 0.3rem;
  color: var(--card-title);
  font-size: 1.2rem;
}

#page .category-card p {
  margin: 0;
  color: var(--card-desc);
  line-height: 1.45;
  font-size: 0.95rem;
}

#page .category-post-list {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px dashed var(--card-border);
  list-style: none;
}

#page .category-post-list li {
  margin: 0.35rem 0;
}

#page .category-post-list a {
  color: var(--card-title);
  text-decoration: none;
}

#page .category-post-list a:hover {
  color: var(--card-hover-border);
}

#page .category-post-list .empty {
  color: var(--card-desc);
  opacity: 0.85;
}

@media (max-width: 768px) {
  #page .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* VS Code Modern Dark inspired palette: softer than pure black. */
[data-theme="dark"] {
  --global-bg: #1f1f1f;
  --card-bg: #252526;
  --sidebar-bg: #252526;
  --sidebar-menu-bg: #2d2d30;
  --font-color: rgba(204, 204, 204, 0.88);
  --text-highlight-color: #e8e8e8;
  --light-grey: rgba(204, 204, 204, 0.36);
  --dark-grey: rgba(204, 204, 204, 0.2);
  --hr-border: rgba(204, 204, 204, 0.18);
  --blockquote-bg: #2d2d30;
  --search-bg: #252526;
  --search-input-color: #cccccc;
  --search-a-color: #cccccc;
  --btn-bg: #2d2d30;
  --btn-color: #cccccc;
  --btn-hover-color: #3e3e42;
  --text-bg-hover: rgba(0, 122, 204, 0.18);
  --scrollbar-color: #5a5a5a;
  --card-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  --card-hover-box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% 12%, rgba(0, 122, 204, 0.10), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(86, 156, 214, 0.08), transparent 26%),
    linear-gradient(180deg, #252526 0%, #1f1f1f 42%, #1e1e1e 100%);
}

[data-theme="dark"] #body-wrap,
[data-theme="dark"] #web_bg {
  background: transparent;
}

[data-theme="dark"] #recent-posts .recent-post-item,
[data-theme="dark"] .layout > div:first-child:not(.nc),
[data-theme="dark"] #aside-content .card-widget {
  border-color: #3c3c3c;
  background: rgba(37, 37, 38, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] #recent-posts .recent-post-item:hover,
[data-theme="dark"] .layout > div:first-child:not(.nc):hover,
[data-theme="dark"] #aside-content .card-widget:hover {
  border-color: rgba(77, 166, 255, 0.55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(77, 166, 255, 0.12);
}

[data-theme="dark"] #page .category-hub {
  --hub-border: rgba(63, 63, 70, 0.9);
  --hub-dot: rgba(77, 166, 255, 0.18);
  --hub-bg-a: #252526;
  --hub-bg-b: #232326;
  --hub-bg-c: #1f1f1f;
  --hub-glow: rgba(0, 122, 204, 0.14);
  --hub-subtitle: rgba(156, 220, 254, 0.78);
  --hub-title: #e8e8e8;
  --hub-title-shadow: rgba(77, 166, 255, 0.22);
  --hub-desc: rgba(204, 204, 204, 0.84);
  --card-border: rgba(63, 63, 70, 0.95);
  --card-bg-a: rgba(45, 45, 48, 0.96);
  --card-bg-b: rgba(37, 37, 38, 0.96);
  --card-shadow: rgba(0, 0, 0, 0.22);
  --card-hover-border: #4da6ff;
  --card-hover-glow: rgba(77, 166, 255, 0.16);
  --dot-green: #89d185;
  --dot-glow: rgba(137, 209, 133, 0.42);
  --icon-color: #4da6ff;
  --card-title: #e8e8e8;
  --card-desc: rgba(204, 204, 204, 0.82);
}