/* ==========================================================================
   Theme Variables & Color Palette
   ========================================================================== */
:root {
  --day: #fbf9f4;
  --evening: #fccc83;
  --dusk: #db7a2a;
  --night: #0e1117;
  --dawn: #16132b;
  --morning: #9fb3bf;

  --bg-color: var(--day);
  --text-main: #232220;
  --text-body: #3c3a35;
  --text-muted: #8e887d;
  --text-quote: #5c574e;
  --border-color: rgba(60, 50, 40, 0.12);
  --card-bg: rgba(60, 50, 40, 0.03);
  --input-bg: rgba(255, 255, 255, 0.45);
  --input-border: rgba(60, 50, 40, 0.15);
  --card-hover: rgba(0, 0, 0, 0.02);
  --tag-bg: rgba(0, 0, 0, 0.04);
  --accent-color: #b84c20;
  --accent-soft: rgba(184, 76, 32, 0.08);
  --accent-glow: rgba(184, 76, 32, 0.25);
  --pill-bg: rgba(255, 255, 255, 0.65);
  --pill-border: rgba(0, 0, 0, 0.08);
  --pill-active-bg: #232220;
  --pill-active-text: #fbf9f4;

  --shadow: #1a1917;
  --bounce-light: #f5d7a6;
  --timing-fn: cubic-bezier(0.455, 0.190, 0.000, 0.985);
  --sun-opacity: 0.085;
}

/* Dark Mode Theme */
body.mode-night {
  --bg-color: #0e1117;
  --text-main: #eae6dd;
  --text-body: #cfcbc2;
  --text-muted: #726f68;
  --text-quote: #a8a49c;
  --border-color: rgba(255, 255, 255, 0.09);
  --card-bg: rgba(255, 255, 255, 0.03);
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: rgba(255, 255, 255, 0.12);
  --card-hover: rgba(255, 255, 255, 0.02);
  --tag-bg: rgba(255, 255, 255, 0.06);
  --accent-color: #ff6a38;
  --accent-soft: rgba(255, 106, 56, 0.12);
  --accent-glow: rgba(255, 106, 56, 0.35);
  --pill-bg: rgba(20, 24, 33, 0.7);
  --pill-border: rgba(255, 255, 255, 0.1);
  --pill-active-bg: #eae6dd;
  --pill-active-text: #0e1117;

  --shadow: #030307;
  --bounce-light: #1b293f;
  --sun-opacity: 0.28;
}

/* Day Mode (No Dappled Shadows, purely clean paper style) */
body.mode-day {
  --sun-opacity: 0;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', SimSun, 'PingFang SC', Georgia, serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.8s ease, color 0.6s ease;
  overflow-x: hidden;
  position: relative;
}

/* ==========================================================================
   Sunlit Optical System (jackyzha0/sunlit 3D Perspective + SVG Noise)
   ========================================================================== */
#dappled-light {
  pointer-events: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  transition: opacity 1.2s ease;
  contain: strict;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#glow {
  position: absolute;
  background: linear-gradient(309deg, var(--bounce-light), var(--bounce-light) 20%, transparent);
  transition: background 1.0s var(--timing-fn);
  height: 100%;
  width: 100%;
  opacity: 0.4;
}

#glow-bounce {
  position: absolute;
  background: linear-gradient(355deg, var(--bounce-light) 0%, transparent 30%, transparent 100%);
  transition: background 1.0s var(--timing-fn);
  opacity: 0.45;
  height: 100%;
  width: 100%;
  bottom: 0;
}

.perspective {
  position: absolute;
  transition: transform 1.7s var(--timing-fn), opacity 1.2s ease;
  top: -30vh;
  right: 0;
  width: 80vw;
  height: 130vh;
  opacity: var(--sun-opacity);
  background-blend-mode: darken;
  transform-origin: top right;
  transform-style: preserve-3d;
  transform: matrix3d(0.7500, -0.0625, 0.0000, 0.0008,
      0.0000, 1.0000, 0.0000, 0.0000,
      0.0000, 0.0000, 1.0000, 0.0000,
      0.0000, 0.0000, 0.0000, 1.0000);
}

body.mode-night .perspective {
  transform: matrix3d(0.8333, 0.0833, 0.0000, 0.0003,
      0.0000, 1.0000, 0.0000, 0.0000,
      0.0000, 0.0000, 1.0000, 0.0000,
      0.0000, 0.0000, 0.0000, 1.0000);
}

#leaves {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: -20px;
  right: -700px;
  width: 1600px;
  height: 1400px;
  background-image: url("./leaves.png");
  transform-origin: 85% 85%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  animation: naturalBillow 14s ease-in-out infinite alternate;
}

@keyframes naturalBillow {
  0% {
    transform: translate3d(0, 0, 0) perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }
  25% {
    transform: translate3d(-14px, 8px, 0) perspective(600px) rotateX(1.8deg) rotateY(2.2deg) rotateZ(-0.9deg) scale(1.025);
  }
  50% {
    transform: translate3d(10px, -10px, 0) perspective(600px) rotateX(-2.5deg) rotateY(-1.8deg) rotateZ(1.4deg) scale(0.975);
  }
  75% {
    transform: translate3d(-8px, 12px, 0) perspective(600px) rotateX(2.2deg) rotateY(-1.2deg) rotateZ(-0.6deg) scale(1.03);
  }
  100% {
    transform: translate3d(6px, -6px, 0) perspective(600px) rotateX(-1.2deg) rotateY(1.4deg) rotateZ(0.8deg) scale(1);
  }
}

#blinds {
  position: relative;
  width: 100%;
}

#blinds .shutter,
#blinds .bar {
  background-color: var(--shadow);
}

#blinds > .shutters {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 60px;
  transition: gap 1.0s var(--timing-fn);
}

body.mode-night #blinds > .shutters {
  gap: 24px;
}

#blinds > .vertical {
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.vertical > .bar {
  width: 5px;
  height: 100%;
}

.shutter {
  width: 100%;
  height: 40px;
  transition: height 1.0s var(--timing-fn);
}

body.mode-night .shutter {
  height: 75px;
}

/* 4-Layer Progressive Blur */
#progressive-blur {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

#progressive-blur > div {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: backdrop-filter;
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  mask-image: linear-gradient(252deg, transparent, transparent var(--stop1), black var(--stop2), black);
  -webkit-mask-image: linear-gradient(252deg, transparent, transparent var(--stop1), black var(--stop2), black);
}

#progressive-blur > div:nth-child(1) { --blur-amount: 6px; --stop1: 0%; --stop2: 0%; }
#progressive-blur > div:nth-child(2) { --blur-amount: 12px; --stop1: 40%; --stop2: 80%; }
#progressive-blur > div:nth-child(3) { --blur-amount: 48px; --stop1: 40%; --stop2: 70%; }
#progressive-blur > div:nth-child(4) { --blur-amount: 96px; --stop1: 70%; --stop2: 80%; }

@keyframes billow {
  0% { transform: perspective(400px) rotateX(0deg) rotateY(0deg) scale(1); }
  25% { transform: perspective(400px) rotateX(1deg) rotateY(2deg) scale(1.02); }
  50% { transform: perspective(400px) rotateX(-4deg) rotateY(-2deg) scale(0.97); }
  75% { transform: perspective(400px) rotateX(1deg) rotateY(-1deg) scale(1.04); }
  100% { transform: perspective(400px) rotateX(0deg) rotateY(0deg) scale(1); }
}

/* ==========================================================================
   Page Layout & Container
   ========================================================================== */
.container {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 24px 120px;
  position: relative;
  z-index: 2;
}

/* Top-Right Mode / CMS Subtle Indicator (Interactive 3 Dots) */
.top-nav {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.cms-label {
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-family: Consolas, -apple-system, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

.top-nav:hover .cms-label {
  opacity: 0.85;
}

.cms-mode-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
}

.cms-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--text-muted);
  opacity: 0.35;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.cms-dot:hover {
  opacity: 0.9;
  transform: scale(1.4);
}

/* Day Mode Dot */
.cms-dot.dot-day.active {
  background: #c59b27;
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 6px rgba(197, 155, 39, 0.5);
}

/* Night Mode Dot */
.cms-dot.dot-night.active {
  background: #7a8cff;
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 6px rgba(122, 140, 255, 0.5);
}

/* Sunny Mode Dot */
.cms-dot.dot-sunny.active {
  background: var(--accent-color);
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 7px var(--accent-glow);
}

/* Site Header */
header.site-header {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 56px;
}

.site-title {
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-main);
  margin-bottom: 8px;
  cursor: pointer;
}

.site-bio {
  font-size: 0.92rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* ==========================================================================
   Article List View
   ========================================================================== */
.articles-list {
  display: flex;
  flex-direction: column;
}

.article-item {
  padding: 34px 0;
  border-bottom: 1px solid var(--border-color);
  transition: border-color 0.4s ease;
}

.article-item:first-child {
  padding-top: 10px;
}

.article-item:last-child {
  border-bottom: none;
}

.article-title {
  font-size: 1.38rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  color: var(--text-main);
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.article-title:hover {
  color: var(--accent-color);
  opacity: 1;
}

.article-excerpt {
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text-body);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  text-align: justify;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.article-tag {
  background: var(--tag-bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ==========================================================================
   Article Detail View (Reader Mode)
   ========================================================================== */
.article-reader {
  display: none;
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-reader.active {
  display: block;
}

.reader-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 36px;
  border: none;
  background: none;
  font-family: inherit;
  transition: color 0.2s ease;
}

.reader-back:hover {
  color: var(--text-main);
}

.reader-header {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.reader-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.reader-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 14px;
}

.reader-content {
  font-size: 1.125rem;
  line-height: 2.05;
  color: var(--text-body);
  letter-spacing: 0.02em;
}

.reader-content p {
  margin-bottom: 1.8em;
}

.reader-content h2 {
  font-size: 1.55rem;
  font-weight: 600;
  margin: 2.2em 0 0.8em;
  color: var(--text-main);
}

.reader-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 1.8em 0 0.6em;
  color: var(--text-main);
}

.reader-content blockquote {
  margin: 1.8em 0;
  padding: 12px 20px;
  border-left: 3px solid var(--text-muted);
  color: var(--text-quote);
  background: var(--tag-bg);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.reader-content ul, .reader-content ol {
  margin: 1.2em 0 1.8em 1.5em;
}

.reader-content li {
  margin-bottom: 0.6em;
}

.reader-content code {
  font-family: Consolas, Monaco, monospace;
  font-size: 0.9em;
  background: var(--tag-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.reader-content strong {
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================================================
   Theme Switcher (Minimalist Ghost Watermark in Bottom-Right)
   ========================================================================== */
.theme-toggle-container {
  position: fixed;
  bottom: 28px;
  right: 32px;
  z-index: 40;
  user-select: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  opacity: 0.38;
  transition: opacity 0.25s ease;
}

.theme-toggle:hover {
  opacity: 0.85;
}

.theme-btn {
  background: transparent;
  border: none;
  font-family: Consolas, -apple-system, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.theme-btn:hover {
  color: var(--text-main);
}

.theme-btn.active {
  color: var(--text-main);
  font-weight: 600;
  background: transparent;
}

.key-hint {
  display: inline-block;
  font-size: 0.65rem;
  font-family: Consolas, monospace;
  line-height: 1.2;
  margin-right: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

body.mode-night .key-hint {
  background: rgba(255, 255, 255, 0.04);
}

.theme-btn.active .key-hint {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: var(--accent-soft);
}

/* ==========================================================================
   CMS Editor Modal (Built-in Markdown Writer)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.25s ease;
}

.modal-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.modal-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-main);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
}

.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-input, .form-textarea {
  width: 100%;
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--text-muted);
}

.form-textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.7;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary {
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-primary {
  background: var(--text-main);
  border: 1px solid var(--text-main);
  color: var(--bg-color);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 680px) {
  .container {
    padding: 48px 20px 100px;
  }

  .site-title {
    font-size: 1.95rem;
  }

  .article-title {
    font-size: 1.25rem;
  }

  .theme-toggle-container {
    bottom: 20px;
    right: 20px;
  }

  .perspective {
    width: 120vw;
    right: -20vw;
  }
}

/* Active orange CMS dot */
.cms-dots span.dot-orange {
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Key hints in theme switcher (D, N, S) */
.key-hint {
  display: inline-block;
  font-size: 0.68rem;
  font-family: Consolas, monospace;
  opacity: 0.6;
  margin-right: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
}

.theme-btn.active .key-hint {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.2);
}

body:not(.mode-night) .theme-btn.active .key-hint {
  background: rgba(255, 255, 255, 0.25);
  color: var(--pill-active-text);
}

/* ==========================================================================
   Interactive Title Characters Styling (無二閒亭)
   ========================================================================== */
.site-title {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-main);
  margin-bottom: 2px;
  cursor: pointer;
  user-select: none;
}

.title-char {
  display: inline-block;
  position: relative;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 2px;
}

.title-char:hover {
  color: var(--accent-color) !important;
  transform: translateY(-2px);
}

.char-hint-box {
  min-height: 18px;
  font-size: 0.72rem;
  font-family: Consolas, -apple-system, sans-serif;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
}

.char-hint-box.visible {
  opacity: 0.75;
}


/* ==========================================================================
   Pagination & Connect Footer (xiaogai.fun style)
   ========================================================================== */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
}

.page-btn {
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 8px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--border-color);
}

.page-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-family: Consolas, -apple-system, sans-serif;
}

.site-footer {
  margin-top: 64px;
  padding-top: 24px;
}

.footer-label {
  font-family: Consolas, -apple-system, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  opacity: 0.8;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-link {
  font-size: 0.92rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-link:hover {
  color: var(--accent-color);
}

/* ==========================================================================
   Comments Section Styling (xiaogai.fun style)
   ========================================================================== */
.comments-section {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--border-color);
}

.comments-heading {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.comments-empty {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.comment-card {
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px 24px;
  transition: all 0.25s ease;
}

.comment-header {
  font-size: 0.86rem;
  margin-bottom: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-author {
  font-weight: 600;
  color: var(--text-main);
}

.comment-body {
  font-size: 1.0rem;
  line-height: 1.85;
  color: var(--text-body);
  margin-bottom: 12px;
}

.comment-reply-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.comment-reply-btn:hover {
  color: var(--accent-color);
}

.comment-form-card {
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 28px;
  margin-top: 32px;
}

.comment-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 400;
}

.comment-input, .comment-textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

body.mode-night .comment-input,
body.mode-night .comment-textarea {
  background: rgba(0, 0, 0, 0.25);
}

.comment-input:focus, .comment-textarea:focus {
  border-color: var(--accent-color);
}

.comment-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.7;
}

.comment-submit-btn {
  background: var(--accent-color);
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 28px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.comment-submit-btn:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}


/* Author Badge (作者) */
.comment-author-badge {
  display: inline-block;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: middle;
}

/* Nested Reply Card */
.comment-replies {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reply-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px 20px;
  margin-left: 18px;
}

body.mode-night .reply-card {
  background: rgba(255, 255, 255, 0.02);
}

/* Mention Highlight */
.comment-mention {
  color: var(--accent-color);
  font-weight: 500;
  margin-right: 4px;
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}

/* Replying to indicator */
.reply-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.reply-indicator.active {
  display: inline-flex;
}

.cancel-reply-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 6px;
}

.cancel-reply-btn:hover {
  color: var(--text-main);
}


/* Article kicker in reader mode */
.article-kicker {
  font-family: Consolas, -apple-system, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  opacity: 0.7;
}

.reader-back {
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 28px;
  border: none;
  background: none;
  font-family: inherit;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.reader-back:hover {
  color: var(--accent-color);
}