/* Native article page (?id=) — NavCard + BlogPreview shell */
html, body.yysuni-native-article-body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bg, #d4e8f3);
  color: var(--color-primary, #5B423F);
  font-family: "Averia Gruesa Libre", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.yysuni-native-nav {
  position: fixed;
  top: 16px;
  left: 24px;
  z-index: 40;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
}

/* Override SPA .card { position:absolute } — NavCard sizes to content like upstream. */
.yysuni-nav-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 12px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 64px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-border, #fff);
  border-radius: 20px;
  background: var(--color-card, #ffffff99);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible !important;
}

.yysuni-nav-card > a {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
}

.yysuni-nav-card > a img {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

.yysuni-nav-card > div.relative {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

.yysuni-nav-card > div.relative > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
}

.yysuni-nav-card > div.relative > a > span.flex {
  display: flex !important;
  width: 28px !important;
  height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}

.yysuni-nav-card svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

.yysuni-nav-avatar {
  box-shadow: rgb(226, 217, 206) 0 12px 20px -5px;
  object-fit: cover;
  border-radius: 9999px;
}

.yysuni-nav-card a {
  color: var(--color-secondary, #8b7667);
  text-decoration: none;
}

.yysuni-nav-card a.text-brand,
.yysuni-nav-card a.text-brand svg {
  color: var(--color-brand, #2fcbe7);
}

.yysuni-nav-active-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 9999px;
  border: 1px solid var(--color-border, #fff);
  background-image: linear-gradient(to right bottom, var(--color-border, #fff) 60%, var(--color-card, #ffffff99) 100%);
  z-index: 0;
  pointer-events: none;
}

.yysuni-native-wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 7rem 1.5rem 3rem;
  box-sizing: border-box;
}

.yysuni-native-article {
  flex: 1 1 0%;
  min-width: 0;
}

.yysuni-native-side {
  width: 200px;
  flex: 0 0 200px;
  position: sticky;
  top: 6rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bg-article { background: var(--color-article, #ffffffcc); }
.bg-card { background: var(--color-card, #ffffff99); }
.text-secondary { color: var(--color-secondary, #8b7667); }
.text-brand { color: var(--color-brand, #2fcbe7); }
.card {
  border: 1px solid var(--color-border, #fff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.prose { line-height: 1.8; word-break: break-word; letter-spacing: .03em; font-size: 15px; }
.prose p { margin: 0 0 1em; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
.prose a { color: var(--color-brand, #2fcbe7); }

@media (max-width: 640px) {
  .yysuni-native-nav { left: 12px; top: 12px; max-width: calc(100vw - 24px); }
  .yysuni-nav-card { height: 56px !important; gap: 16px !important; padding: 10px !important; }
  .yysuni-nav-card > div.relative { gap: 16px !important; }
  .yysuni-native-side { display: none; }
  .yysuni-native-wrap { padding: 5.5rem .75rem 2rem; }
}