:root {
  --jiusi-sky: #147fa3;
  --jiusi-jade: #35b8bb;
  --jiusi-mist: #eaf8f8;
  --jiusi-ink: #173744;
  --jiusi-cinnabar: #a31f34;
}

/* 首屏：手机端使用经过重新构图的竖版壁纸，避免横图被强制裁成细长切片。 */
.home-banner-background picture {
  width: 100%;
  height: 100%;
}

.home-banner-background img {
  transition: filter 0.35s ease;
}

html.dark .home-banner-background img {
  filter: brightness(0.62) saturate(0.78);
}

.home-banner-container .description {
  font-family: 'Noto Serif SC Variable', 'Songti SC', serif;
  letter-spacing: 0.16em;
  font-weight: 650;
  text-shadow: 0 2px 18px rgba(10, 50, 68, 0.35);
}

.home-banner-container .description p {
  letter-spacing: 0.035em;
}

/* 内页保留同一视觉母题，但让正文卡片成为阅读焦点。 */
.page-container {
  background-image: url('/images/bg-desktop.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

.article-content-container {
  background: rgba(249, 253, 253, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: 0 18px 55px rgba(18, 82, 101, 0.13);
  backdrop-filter: blur(14px) saturate(1.08);
}

html.dark .article-content-container {
  background: rgba(25, 34, 40, 0.9) !important;
  border-color: rgba(113, 211, 208, 0.13);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.28);
}

.navbar-container {
  backdrop-filter: blur(16px) saturate(1.12);
}

/* 评论区：沿用天空青与朱砂红，把默认组件收进站点的视觉系统。 */
.comment-container {
  margin-top: 1.25rem;
}

.comment-area-title {
  position: relative;
  color: var(--jiusi-ink);
  letter-spacing: 0.08em;
}

.comment-area-title::after {
  content: '';
  display: block;
  width: 3.6rem;
  height: 3px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jiusi-cinnabar), var(--jiusi-jade));
}

html.dark .comment-area-title {
  color: #edfafa;
}

.twikoo {
  --twikoo-theme: var(--jiusi-sky);
  color: var(--jiusi-ink);
}

.twikoo .tk-submit,
.twikoo .tk-comment {
  border: 1px solid rgba(20, 127, 163, 0.14);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(234, 248, 248, 0.6));
  box-shadow: 0 10px 28px rgba(18, 82, 101, 0.08);
}

.twikoo .tk-submit {
  padding: 1rem;
}

.twikoo .tk-comment {
  margin-top: 1rem;
  padding: 1rem;
}

.twikoo .el-textarea__inner,
.twikoo .el-input__inner {
  border: 1px solid rgba(20, 127, 163, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--jiusi-ink) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.twikoo .el-textarea__inner:focus,
.twikoo .el-input__inner:focus {
  border-color: var(--jiusi-jade) !important;
  box-shadow: 0 0 0 3px rgba(53, 184, 187, 0.16) !important;
}

.twikoo .el-button--primary {
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(110deg, var(--jiusi-sky), var(--jiusi-jade)) !important;
  box-shadow: 0 7px 18px rgba(20, 127, 163, 0.2);
}

.twikoo .el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20, 127, 163, 0.27);
}

.twikoo .tk-avatar {
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 14px !important;
  background-color: var(--jiusi-mist);
  box-shadow: 0 5px 14px rgba(18, 82, 101, 0.14);
}

/* Twikoo 仅在拿到真实头像时添加 tk-has-avatar；其余访客使用九思专属图标。 */
.twikoo .tk-avatar:not(.tk-has-avatar) {
  background: var(--jiusi-mist) url('/images/jiusi-mark.svg') center / cover no-repeat !important;
}

.twikoo .tk-avatar:not(.tk-has-avatar) .tk-avatar-img {
  opacity: 0;
}

.twikoo-load-error {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(163, 31, 52, 0.2);
  border-radius: 14px;
  background: rgba(163, 31, 52, 0.07);
  color: var(--jiusi-cinnabar);
}

html.dark .twikoo {
  color: #dcebec;
}

html.dark .twikoo .tk-submit,
html.dark .twikoo .tk-comment {
  border-color: rgba(113, 211, 208, 0.14);
  background: linear-gradient(145deg, rgba(36, 48, 55, 0.86), rgba(27, 41, 47, 0.76));
}

html.dark .twikoo .el-textarea__inner,
html.dark .twikoo .el-input__inner {
  border-color: rgba(113, 211, 208, 0.18) !important;
  background: rgba(17, 29, 35, 0.72) !important;
  color: #edfafa !important;
}

@media (max-width: 639px) {
  .home-banner-background {
    scale: 1.02 !important;
    transform: none !important;
  }

  .home-banner-background img {
    object-position: center center;
  }

  .page-container {
    background-image: url('/images/bg-mobile.webp') !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }

  .article-content-container {
    backdrop-filter: blur(10px) saturate(1.05);
  }

  .twikoo .tk-submit,
  .twikoo .tk-comment {
    border-radius: 15px;
  }

  .twikoo .tk-submit {
    padding: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner-background img,
  .twikoo .el-button--primary,
  .twikoo .el-textarea__inner,
  .twikoo .el-input__inner {
    transition: none !important;
  }
}

/* 键盘导航：在玻璃拟态界面中保留清晰而克制的焦点提示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--jiusi-jade);
  outline-offset: 3px;
}