:root {
  --card-edge: rgba(120, 190, 255, 0.36);
  --glow-cyan: 0 0 30px rgba(84, 198, 255, 0.26);
  --glow-blue: 0 0 24px rgba(72, 136, 255, 0.3);
  --text-strong: #eef7ff;
  --text-main: #d3e5f7;
  --text-subtle: #a8c0d8;
  --text-link: #86dcff;
  --text-link-hover: #b9eeff;
}

#page-header::before {
  background: linear-gradient(135deg, rgba(7, 20, 37, 0.8), rgba(12, 36, 67, 0.56), rgba(18, 57, 100, 0.48));
}

#nav {
  backdrop-filter: blur(12px);
  background: rgba(9, 24, 43, 0.66) !important;
  border-bottom: 1px solid rgba(150, 215, 255, 0.24);
}

#site-title,
#site-subtitle {
  color: var(--text-strong) !important;
  text-shadow: var(--glow-cyan), var(--glow-blue);
}

#site-subtitle,
#subtitle {
  color: var(--text-main) !important;
}

#recent-posts .recent-post-item,
#aside-content .card-widget {
  border: 1px solid var(--card-edge);
  box-shadow: var(--glow-cyan);
  backdrop-filter: blur(8px);
  background: linear-gradient(160deg, rgba(10, 26, 47, 0.88), rgba(16, 40, 74, 0.78)) !important;
}

body,
#article-container,
#aside-content,
#recent-posts .recent-post-item,
#footer {
  color: var(--text-main) !important;
}

#nav .site-page,
#nav .site-name,
#aside-content .item-headline span,
#aside-content .author-info-name,
#recent-posts .article-title,
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4 {
  color: var(--text-strong) !important;
}

#article-container p,
#article-container li,
#recent-posts .content,
#aside-content .author-info-description,
#aside-content .item-name,
#aside-content .webinfo-item,
#post-meta,
.article-meta-wrap {
  color: var(--text-main) !important;
}

/* Article page readability */
#post .post-content#article-container {
  background: linear-gradient(180deg, rgba(8, 24, 43, 0.9), rgba(10, 30, 54, 0.84)) !important;
  border: 1px solid rgba(132, 201, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(4, 12, 22, 0.45);
  padding: 1.8rem 2rem;
}

#post .post-content#article-container p,
#post .post-content#article-container li {
  color: #e6f2ff !important;
  line-height: 1.9;
  font-size: 1.04rem;
}

#post .post-content#article-container strong,
#post .post-content#article-container b {
  color: #f4faff !important;
}

#post .post-content#article-container h1,
#post .post-content#article-container h2,
#post .post-content#article-container h3,
#post .post-content#article-container h4 {
  color: #f0f8ff !important;
}

#post .post-content#article-container blockquote {
  background: rgba(22, 52, 86, 0.5) !important;
  border-left: 4px solid #7ed0ff !important;
  color: #d9ecff !important;
}

#post .post-content#article-container :not(pre) > code {
  color: #d3e5f8 !important;
  background: rgba(17, 30, 49, 0.9) !important;
  border: 1px solid rgba(145, 166, 192, 0.32);
  border-radius: 6px;
  padding: 0.12rem 0.42rem;
  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 0.9em;
}

#post .post-content#article-container figure.highlight {
  margin: 1.1rem 0;
  border: 1px solid rgba(145, 166, 192, 0.3);
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a !important;
  box-shadow: none;
}

#post .post-content#article-container figure.highlight table {
  width: 100%;
  border-collapse: collapse;
}

#post .post-content#article-container figure.highlight .gutter {
  background: #111d32;
  border-right: 1px solid rgba(145, 166, 192, 0.24);
  min-width: 2.8rem;
  user-select: none;
}

#post .post-content#article-container figure.highlight .gutter pre {
  margin: 0;
  padding: 0.95rem 0.65rem 0.95rem 0.75rem;
  color: #7f97b5;
  text-align: right;
}

#post .post-content#article-container figure.highlight .code pre {
  margin: 0;
  padding: 0.95rem 1rem;
  background: transparent !important;
  color: #dbe7f3 !important;
  line-height: 1.7;
  font-size: 0.95rem;
  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
}

#article-container a,
#nav a,
#aside-content a,
#footer a,
#recent-posts a {
  color: var(--text-link) !important;
}

#article-container a:hover,
#nav a:hover,
#aside-content a:hover,
#footer a:hover,
#recent-posts a:hover {
  color: var(--text-link-hover) !important;
}

#site_social_icons .social-icon i,
.card-info-social-icons .social-icon i,
#card-info-btn,
#card-info-btn span,
#card-info-btn i {
  color: var(--text-link) !important;
  text-shadow: 0 0 12px rgba(120, 210, 255, 0.35);
}

#site_social_icons .social-icon i:hover,
.card-info-social-icons .social-icon i:hover,
#card-info-btn:hover,
#card-info-btn:hover span,
#card-info-btn:hover i {
  color: var(--text-link-hover) !important;
}

.article-meta-label,
.post-meta-date time,
.card-tag-cloud a,
#footer .copyright,
#footer .framework-info,
#footer .footer_custom_text {
  color: var(--text-subtle) !important;
}

/* Stronger contrast for article meta / tags / categories */
.article-meta-wrap,
.article-meta-wrap span,
.article-meta-wrap i,
.article-meta-wrap time,
.article-meta-wrap .article-meta-label,
.article-meta-wrap .article-meta__categories,
.article-meta-wrap .article-meta__categories a {
  color: var(--text-main) !important;
}

.article-meta-wrap .article-meta__categories a:hover,
.article-meta-wrap a:hover {
  color: var(--text-link-hover) !important;
}

#post-meta,
#post-meta span,
#post-meta i,
#post-meta time,
#post-meta a,
.post-meta-categories a,
.post-meta__tags {
  color: var(--text-main) !important;
}

.post-meta-categories a:hover,
.post-meta__tags:hover {
  color: var(--text-link-hover) !important;
}

.card-category-list-link,
.card-category-list-name,
.card-category-list-count,
.card-archive-list-link,
.card-archive-list-count,
.card-tag-cloud a {
  color: var(--text-main) !important;
}

.card-category-list-link:hover,
.card-archive-list-link:hover,
.card-tag-cloud a:hover {
  color: var(--text-link-hover) !important;
}

/* Strong contrast for sidebar site data: 文章/标签/分类 + numbers */
.site-data .headline {
  color: var(--text-strong) !important;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.site-data .length-num {
  color: #ecf7ff !important;
  font-weight: 800;
  font-size: 1.05rem;
  text-shadow: 0 0 10px rgba(120, 210, 255, 0.35);
}

.site-data a {
  border: 1px solid rgba(142, 205, 255, 0.34);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(21, 52, 86, 0.58), rgba(13, 36, 62, 0.5));
  padding: 6px 4px;
}

.site-data a:hover {
  border-color: rgba(180, 226, 255, 0.56);
  background: linear-gradient(180deg, rgba(29, 65, 104, 0.68), rgba(17, 46, 78, 0.62));
}

/* Artalk comment form readability */
#artalk-wrap,
#artalk-wrap .atk-main-editor,
#artalk-wrap .atk-editor,
#artalk-wrap .atk-editor-wrap {
  color: var(--text-main) !important;
}

#artalk-wrap input,
#artalk-wrap textarea,
#artalk-wrap .atk-textarea-wrap textarea {
  color: #e9f4ff !important;
  background: rgba(10, 28, 50, 0.74) !important;
  border: 1px solid rgba(137, 199, 255, 0.46) !important;
}

#artalk-wrap input::placeholder,
#artalk-wrap textarea::placeholder {
  color: #afc9e2 !important;
  opacity: 1 !important;
}

#artalk-wrap .atk-editor-plug input,
#artalk-wrap .atk-editor-plug {
  color: #e1efff !important;
}

#artalk-wrap .atk-send-btn,
#artalk-wrap .atk-btn {
  color: #081a2f !important;
  background: linear-gradient(180deg, #9bdeff, #58adff) !important;
  border: 1px solid rgba(176, 227, 255, 0.72) !important;
}

#artalk-wrap .atk-send-btn:hover,
#artalk-wrap .atk-btn:hover {
  background: linear-gradient(180deg, #b9e9ff, #74bdff) !important;
}

#artalk-wrap .atk-comment-count,
#artalk-wrap .atk-nick,
#artalk-wrap .atk-date,
#artalk-wrap .atk-content,
#artalk-wrap .atk-meta,
#artalk-wrap .atk-item {
  color: var(--text-main) !important;
}

#recent-posts .recent-post-item:hover,
#aside-content .card-widget:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-cyan), var(--glow-blue);
  transition: 0.25s ease;
}

#footer {
  background: radial-gradient(circle at 16% 15%, rgba(118, 207, 255, 0.2), transparent 36%),
    radial-gradient(circle at 82% 20%, rgba(76, 152, 255, 0.22), transparent 30%),
    #081a2f;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(180deg, #97ddff, #4e9fff);
}

#online-presence-card .online-presence-body {
  margin-top: 8px;
}

#online-presence-card .online-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.8;
  font-size: 0.92rem;
}

#online-presence-card .online-line strong {
  color: #ecf7ff;
  text-shadow: 0 0 10px rgba(120, 210, 255, 0.35);
}

#online-presence-card .online-status {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-subtle);
}