:root {
  --rainlin-bg: #f6f8fb;
  --rainlin-panel: rgba(255, 255, 255, 0.9);
  --rainlin-ink: #142033;
  --rainlin-muted: #5b6b82;
  --rainlin-blue: #2563eb;
  --rainlin-cyan: #0891b2;
  --rainlin-green: #16a34a;
  --rainlin-line: rgba(37, 99, 235, 0.14);
  --rainlin-shadow: 0 18px 50px rgba(20, 32, 51, 0.1);
}

body {
  color: var(--rainlin-ink);
  background:
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    var(--rainlin-bg);
  background-size: 28px 28px;
}

#page-header {
  background:
    radial-gradient(circle at 22% 26%, rgba(8, 145, 178, 0.22), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.2), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #17335f 48%, #0f766e 100%);
}

#page-header.full_page {
  height: 68vh;
  min-height: 460px;
  max-height: 620px;
}

#site-info {
  top: 50%;
  z-index: 2;
}

#page-header #site-title {
  color: #ffffff !important;
  font-size: 3.4rem !important;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

#page-header #site-subtitle {
  margin-top: 0.8rem;
  font-size: 1.1rem !important;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

#site_social_icons .social-icon {
  color: #ffffff;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

#nav {
  backdrop-filter: blur(18px);
}

#nav.show {
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.18);
}

#nav .menus_items .menus_item .menus_item_child {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts),
#post,
#page {
  border: 1px solid var(--rainlin-line);
  border-radius: 8px;
  background: var(--rainlin-panel);
  box-shadow: var(--rainlin-shadow);
}

#recent-posts > .recent-post-item {
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#recent-posts > .recent-post-item:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 24px 60px rgba(20, 32, 51, 0.14);
}

#recent-posts > .recent-post-item > .recent-post-info > .article-title {
  color: var(--rainlin-ink);
  font-weight: 750;
  letter-spacing: 0;
}

#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover,
a:hover {
  color: var(--rainlin-blue);
}

.article-meta-wrap,
.post-meta-date,
.article-sort-item-info,
#aside-content .card-info .author-info__description {
  color: var(--rainlin-muted);
}

#aside-content .card-info .author-info__name {
  color: var(--rainlin-ink);
  font-weight: 800;
  letter-spacing: 0;
}

#aside-content .card-info #card-info-btn {
  border-radius: 8px;
  background: linear-gradient(135deg, var(--rainlin-blue), var(--rainlin-cyan));
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

#aside-content .card-announcement .item-headline,
#aside-content .item-headline {
  color: var(--rainlin-ink);
  font-weight: 750;
}

#article-container {
  font-size: 16px;
  line-height: 1.9;
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4 {
  color: var(--rainlin-ink);
  letter-spacing: 0;
}

#article-container h2 {
  border-bottom: 1px solid var(--rainlin-line);
}

#article-container h2::before,
#article-container h3::before {
  color: var(--rainlin-cyan);
}

figure.highlight,
pre[class*='language-'] {
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(20, 32, 51, 0.08);
}

figure.highlight table,
figure.highlight .code pre {
  background: #0f172a;
}

figure.highlight pre,
figure.highlight td,
figure.highlight span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#pagination .page-number.current,
#pagination .extend:hover,
#pagination .page-number:hover {
  border-radius: 8px;
  background: var(--rainlin-blue);
}

#footer {
  background: #0f172a;
}

@media screen and (max-width: 768px) {
  #page-header.full_page {
    height: 62vh;
    min-height: 420px;
    max-height: 520px;
  }

  #site-title {
    font-size: 2.4rem;
  }

  #site-subtitle {
    padding: 0 1.2rem;
    font-size: 1rem;
  }

  #recent-posts > .recent-post-item,
  #aside-content .card-widget,
  #post,
  #page {
    border-radius: 8px;
  }
}