@charset "UTF-8";
/**
 * Survoid Blog · 主样式
 * 设计语言：圆角卡片 + 玻璃拟态导航 + 明暗双模式 + 轻量微动效
 * 结构：变量 → 基础 → 导航 → 搜索 → Banner → 卡片/列表 → 侧栏 → 文章排版 → 评论 → 页脚 → 组件 → 响应式
 */

/* ==========================================================================
   1. 变量与设计令牌
   ========================================================================== */
:root {
  --sv-accent: #5b8def;
  --sv-accent-rgb: 91, 141, 239;
  --sv-radius-sm: 10px;
  --sv-radius: 16px;
  --sv-radius-lg: 22px;
  --sv-maxw: 1200px;
  --sv-nav-h: 60px;
  --sv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sv-transition: 0.25s var(--sv-ease);
  --sv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sv-mono: "JetBrains Mono", "Fira Code", Menlo, Consolas, "Courier New",
    monospace;
}

html[data-theme="light"] {
  --sv-bg: #f4f6f9;
  --sv-bg-grad: radial-gradient(1200px 600px at 15% -10%, #e3ecff 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #ffe9f2 0%, transparent 55%);
  --sv-card: rgba(255, 255, 255, 0.86);
  --sv-card-solid: #ffffff;
  --sv-card-hover: #ffffff;
  --sv-border: rgba(15, 23, 42, 0.08);
  --sv-border-strong: rgba(15, 23, 42, 0.14);
  --sv-text: #1f2430;
  --sv-text-strong: #0d1117;
  --sv-text-muted: #6b7280;
  --sv-text-faint: #9aa3b2;
  --sv-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  --sv-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --sv-code-bg: #f6f8fa;
  --sv-nav-bg: rgba(255, 255, 255, 0.72);
  --sv-input-bg: rgba(255, 255, 255, 0.9);
  --sv-skeleton: rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] {
  --sv-bg: #0e1117;
  --sv-bg-grad: radial-gradient(1200px 600px at 15% -10%, rgba(91, 141, 239, 0.18) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(217, 90, 160, 0.14) 0%, transparent 55%);
  --sv-card: rgba(28, 33, 42, 0.72);
  --sv-card-solid: #1a1f28;
  --sv-card-hover: rgba(38, 44, 55, 0.9);
  --sv-border: rgba(255, 255, 255, 0.09);
  --sv-border-strong: rgba(255, 255, 255, 0.16);
  --sv-text: #dfe3ea;
  --sv-text-strong: #f2f5fa;
  --sv-text-muted: #8b95a5;
  --sv-text-faint: #657085;
  --sv-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --sv-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  --sv-code-bg: #161b23;
  --sv-nav-bg: rgba(20, 24, 32, 0.66);
  --sv-input-bg: rgba(255, 255, 255, 0.06);
  --sv-skeleton: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   2. 基础
   ========================================================================== */
* {
  box-sizing: border-box;
}

/* hidden 属性优先级高于组件自身的 display，避免筛选/隐藏类元素被 flex 覆盖 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--sv-font);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--sv-text);
  background-color: var(--sv-bg);
  background-image: var(--sv-bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--sv-transition), color var(--sv-transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--sv-transition);
}

a:hover {
  color: var(--sv-accent);
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  padding-left: 1.4em;
}

:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection {
  background: rgba(var(--sv-accent-rgb), 0.25);
}

.sv-container {
  width: 100%;
  max-width: var(--sv-maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.sv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 999px;
  background: rgba(var(--sv-accent-rgb), 0.14);
  color: var(--sv-accent);
}

.sv-badge-admin {
  background: rgba(245, 108, 108, 0.16);
  color: #f56c6c;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--sv-border-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--sv-accent-rgb), 0.5);
  background-clip: content-box;
}

/* ==========================================================================
   3. 顶部导航
   ========================================================================== */
.sv-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 12px 0 0;
  pointer-events: none;
}

.sv-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--sv-nav-h);
  max-width: var(--sv-maxw);
  margin: 0 auto;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--sv-nav-bg);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: box-shadow var(--sv-transition), background var(--sv-transition),
    transform 0.35s var(--sv-ease);
}

.sv-nav-wrap.is-scrolled .sv-nav {
  box-shadow: var(--sv-shadow-lg);
}

.sv-nav-wrap.is-hidden .sv-nav {
  transform: translateY(-140%);
}

.sv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 6px;
  font-weight: 700;
  font-size: 17px;
  color: var(--sv-text-strong);
  white-space: nowrap;
}

.sv-brand img,
.sv-brand .sv-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.sv-brand-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--sv-accent), #b06ab3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.sv-nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-width: 0;
}

.sv-nav-item {
  position: relative;
  list-style: none;
}

.sv-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sv-text);
  white-space: nowrap;
  transition: background var(--sv-transition), color var(--sv-transition);
}

.sv-nav-link:hover {
  background: rgba(var(--sv-accent-rgb), 0.1);
  color: var(--sv-accent);
}

.sv-nav-link.is-active {
  background: rgba(var(--sv-accent-rgb), 0.14);
  color: var(--sv-accent);
  font-weight: 600;
}

.sv-nav-icon {
  display: inline-flex;
  opacity: 0.9;
}

.sv-nav-caret {
  display: inline-flex;
  transition: transform var(--sv-transition);
  opacity: 0.6;
}

.sv-nav-item.has-children:hover > .sv-nav-caret,
.sv-nav-item.has-children.is-open > .sv-nav-link .sv-nav-caret {
  transform: rotate(180deg);
}

.sv-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--sv-radius);
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sv-transition), transform var(--sv-transition),
    visibility var(--sv-transition);
}

.sv-nav-item.has-children:hover > .sv-submenu,
.sv-nav-item.has-children:focus-within > .sv-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.sv-submenu .sv-nav-link {
  height: 38px;
  border-radius: var(--sv-radius-sm);
  font-weight: 400;
}

.sv-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 登录 / 写文章 / 后台入口 */
.sv-account-btn {
  color: var(--sv-text-muted);
}

.sv-account-btn:hover {
  color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.12);
}

.sv-btn-plain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--sv-text);
  font-size: 14px;
  transition: background var(--sv-transition), color var(--sv-transition),
    transform 0.15s var(--sv-ease);
}

.sv-btn-plain:hover {
  background: rgba(var(--sv-accent-rgb), 0.12);
  color: var(--sv-accent);
}

.sv-btn-plain:active {
  transform: scale(0.94);
}

.sv-search-btn {
  background: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
  padding: 0 12px 0 10px;
}

.sv-search-btn .sv-kbd {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--sv-border-strong);
  color: var(--sv-text-faint);
  font-family: var(--sv-mono);
}

.sv-nav-mobile-toggle {
  display: none;
}

/* 主题切换图标 */
.sv-theme-toggle .sv-icon-sun,
.sv-theme-toggle .sv-icon-moon {
  transition: opacity var(--sv-transition), transform 0.4s var(--sv-ease);
}
html[data-theme="dark"] .sv-theme-toggle .sv-icon-sun {
  display: none;
}
html[data-theme="light"] .sv-theme-toggle .sv-icon-moon {
  display: none;
}

/* ==========================================================================
   4. 搜索模态
   ========================================================================== */
.sv-search-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 40px;
  background: rgba(8, 11, 16, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sv-search-mask.is-open {
  display: flex;
  animation: svFade 0.2s var(--sv-ease);
}

.sv-search-panel {
  width: 100%;
  max-width: 640px;
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow-lg);
  overflow: hidden;
  animation: svPop 0.25s var(--sv-ease);
}

.sv-search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sv-border);
}

.sv-search-head input,
.sv-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
}

.sv-search-open {
  cursor: pointer;
}

.sv-search-body {
  overflow-y: auto;
  padding: 8px;
}

.sv-search-hint,
.sv-search-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--sv-text-muted);
  font-size: 14px;
}

.sv-search-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--sv-radius-sm);
  transition: background var(--sv-transition);
}

.sv-search-item:hover,
.sv-search-item.is-active {
  background: rgba(var(--sv-accent-rgb), 0.1);
}

.sv-search-item-title {
  font-weight: 600;
  color: var(--sv-text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-search-item-meta {
  font-size: 12.5px;
  color: var(--sv-text-faint);
  margin-top: 2px;
}

.sv-search-item-excerpt {
  font-size: 13px;
  color: var(--sv-text-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-search-section {
  padding: 10px 12px 4px;
  font-size: 12px;
  color: var(--sv-text-faint);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   5. 首屏 Banner
   ========================================================================== */
.sv-main {
  padding-top: calc(var(--sv-nav-h) + 28px);
  min-height: 70vh;
}

.sv-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sv-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}

.sv-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--sv-accent-rgb), 0.1) 0%,
    var(--sv-bg) 92%
  );
}

html[data-theme="dark"] .sv-banner-bg::after {
  background: linear-gradient(
    180deg,
    rgba(10, 13, 18, 0.2) 0%,
    var(--sv-bg) 92%
  );
}

.sv-banner-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  padding: 36px 32px 30px;
}

.sv-banner-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--sv-card-solid);
  box-shadow: var(--sv-shadow);
  background: var(--sv-skeleton);
}

.sv-banner-avatar-fallback {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--sv-accent), #b06ab3);
  box-shadow: var(--sv-shadow);
}

.sv-banner-title {
  margin: 16px 0 6px;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sv-text-strong);
}

.sv-banner-subtitle {
  margin: 0;
  color: var(--sv-text-muted);
  font-size: 15.5px;
}

.sv-banner-typing {
  margin-top: 12px;
  min-height: 26px;
  color: var(--sv-accent);
  font-family: var(--sv-mono);
  font-size: 15px;
}

.sv-typing-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--sv-accent);
  vertical-align: -0.14em;
  animation: svBlink 1s steps(2, start) infinite;
}

.sv-banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.sv-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
  font-size: 13.5px;
  color: var(--sv-text-muted);
}

.sv-stat b {
  color: var(--sv-text-strong);
  font-weight: 700;
}

.sv-banner-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 天气卡 */
.sv-weather {
  padding: 14px 16px;
  border-radius: var(--sv-radius);
  background: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
  font-size: 14px;
}

.sv-weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sv-text-muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.sv-weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sv-weather-icon {
  font-size: 30px;
  line-height: 1;
}

.sv-weather-temp {
  font-size: 26px;
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-weather-temp small {
  font-size: 14px;
  font-weight: 500;
}

.sv-weather-desc {
  color: var(--sv-text-muted);
  font-size: 13.5px;
  margin-top: 2px;
}

.sv-weather-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--sv-text-faint);
}

/* 日历 */
.sv-calendar {
  padding: 14px 16px;
  border-radius: var(--sv-radius);
  background: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
}

.sv-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--sv-text-muted);
}

.sv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 12.5px;
}

.sv-cal-week {
  color: var(--sv-text-faint);
  padding: 2px 0;
}

.sv-cal-nav {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--sv-text-muted);
  font-size: 16px;
  line-height: 1;
  transition: background var(--sv-transition), color var(--sv-transition);
}

.sv-cal-nav:hover {
  background: rgba(var(--sv-accent-rgb), 0.14);
  color: var(--sv-accent);
}

.sv-banner-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sv-content {
  min-width: 0;
}

.sv-nav-label {
  white-space: nowrap;
}

.sv-time {
  font-variant-numeric: tabular-nums;
}

.sv-search-close,
.sv-drawer-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
}

.sv-search-inline {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.sv-comment-form-field {
  margin-bottom: 12px;
}

.sv-reply a,
.sv-edit a {
  color: var(--sv-accent);
}

.sv-footer-theme {
  font-size: 12.5px;
  opacity: 0.65;
}

.sv-cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--sv-text-muted);
}

.sv-cal-day.is-empty {
  visibility: hidden;
}

.sv-cal-day.has-post {
  color: var(--sv-text-strong);
  font-weight: 700;
  background: rgba(var(--sv-accent-rgb), 0.16);
}

.sv-cal-day.has-post:hover {
  background: var(--sv-accent);
  color: #fff;
}

.sv-cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--sv-accent);
  color: var(--sv-accent);
  font-weight: 700;
}

/* ==========================================================================
   6. 卡片与文章列表
   ========================================================================== */
.sv-card {
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sv-card-pad {
  padding: 18px 20px;
}

.sv-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-section-title .sv-icon {
  color: var(--sv-accent);
}

.sv-section-desc {
  margin: -8px 0 16px;
  color: var(--sv-text-muted);
  font-size: 14px;
}

.sv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
  padding-bottom: 40px;
}

.sv-group {
  margin-bottom: 20px;
  padding: 18px 20px 12px;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sv-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--sv-border);
}

.sv-group-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-group-title .sv-icon {
  color: var(--sv-accent);
}

.sv-group-count {
  font-size: 12.5px;
  color: var(--sv-text-faint);
}

.sv-group-more {
  margin-left: auto;
  font-size: 13px;
  color: var(--sv-text-muted);
}

.sv-group-more:hover {
  color: var(--sv-accent);
}

.sv-post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-post-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--sv-radius-sm);
  transition: background var(--sv-transition), transform 0.2s var(--sv-ease);
}

.sv-post-item:hover {
  background: rgba(var(--sv-accent-rgb), 0.08);
  transform: translateX(3px);
}

.sv-post-item-icon {
  color: var(--sv-text-faint);
  opacity: 0.8;
}

.sv-post-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sv-text);
}

.sv-post-item:hover .sv-post-item-title {
  color: var(--sv-accent);
}

.sv-post-item-date {
  font-size: 12.5px;
  color: var(--sv-text-faint);
  font-family: var(--sv-mono);
  flex-shrink: 0;
}

.sv-post-item-sticky {
  color: var(--sv-accent);
}

/* 归档时间线 */
.sv-timeline {
  position: relative;
  padding-left: 26px;
}

.sv-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--sv-border);
}

.sv-tl-year {
  position: relative;
  margin: 22px 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--sv-text-strong);
}

.sv-tl-year::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sv-accent);
  box-shadow: 0 0 0 4px rgba(var(--sv-accent-rgb), 0.18);
}

.sv-tl-item {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
}

.sv-tl-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sv-border-strong);
}

.sv-tl-item:hover::before {
  background: var(--sv-accent);
}

.sv-tl-date {
  font-family: var(--sv-mono);
  font-size: 13px;
  color: var(--sv-text-faint);
  flex-shrink: 0;
}

/* 文章网格卡片（归档/搜索/分类页） */
.sv-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.sv-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  transition: transform 0.28s var(--sv-ease), box-shadow var(--sv-transition),
    border-color var(--sv-transition);
}

.sv-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sv-shadow-lg);
  border-color: rgba(var(--sv-accent-rgb), 0.4);
}

.sv-post-cover {
  position: relative;
  aspect-ratio: 16 / 8;
  background-size: cover;
  background-position: center;
  background-color: var(--sv-skeleton);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sv-post-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.28));
}

.sv-post-cover-emoji {
  font-size: 34px;
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  z-index: 1;
}

.sv-post-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sv-post-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sv-text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-post-card:hover .sv-post-card-title {
  color: var(--sv-accent);
}

.sv-post-card-excerpt {
  margin: 0;
  font-size: 13.8px;
  color: var(--sv-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12.6px;
  color: var(--sv-text-faint);
  margin-top: auto;
}

.sv-post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   7. 侧栏
   ========================================================================== */
.sv-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: calc(var(--sv-nav-h) + 22px);
}

.sv-widget {
  padding: 15px 16px 16px;
  border-radius: var(--sv-radius);
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
}

.sv-widget-title {
  position: relative;
  margin: 0 0 12px 20px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--sv-text-strong);
}

/* 标题左侧的主色竖条（M3 Expressive 风格） */
.sv-accent-bar {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 17px;
  border-radius: 999px;
  background: var(--sv-accent);
}

.sv-widget-title .sv-icon {
  color: var(--sv-accent);
}

/* 站长名片 */
.sv-profile {
  text-align: center;
}

.sv-profile-cover {
  display: block;
  margin: 0 auto 14px;
  border-radius: var(--sv-radius);
  overflow: hidden;
  background: var(--sv-skeleton);
}

.sv-profile-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--sv-radius);
}

.sv-profile-name {
  font-weight: 700;
  font-size: 19px;
  color: var(--sv-text-strong);
}

.sv-profile-rule {
  display: block;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: var(--sv-accent);
  margin: 7px auto 9px;
}

.sv-profile-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--sv-text-muted);
}

.sv-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.sv-social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sv-skeleton);
  color: var(--sv-text-muted);
  transition: transform 0.2s var(--sv-ease), color var(--sv-transition),
    background var(--sv-transition);
}

.sv-social:hover {
  color: #fff;
  background: var(--sv-accent);
  transform: translateY(-2px);
}

/* 公告 */
.sv-notice {
  background: linear-gradient(
      180deg,
      rgba(var(--sv-accent-rgb), 0.07),
      transparent 90px
    ),
    var(--sv-card-solid);
}

.sv-notice-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--sv-text-muted);
  white-space: pre-line;
}

.sv-notice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.sv-notice-btn {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.12);
  transition: background var(--sv-transition);
}

.sv-notice-btn:hover {
  background: rgba(var(--sv-accent-rgb), 0.22);
}

.sv-notice-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--sv-skeleton);
  color: var(--sv-text-faint);
}

.sv-notice-close:hover {
  color: var(--sv-text-strong);
}

/* 标签云（tonal chip） */
.sv-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sv-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.8px;
  color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.11);
  transition: background var(--sv-transition), transform 0.2s var(--sv-ease);
}

.sv-tag:hover {
  background: rgba(var(--sv-accent-rgb), 0.22);
  transform: translateY(-1px);
}

.sv-tag-count {
  font-size: 11px;
  opacity: 0.65;
  font-family: var(--sv-mono);
}

.sv-tag:hover .sv-tag-count {
  opacity: 1;
}

/* 分类 / 最新文章：名称左、计数右 */
.sv-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sv-mini-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--sv-radius-sm);
  font-size: 14px;
  transition: background var(--sv-transition), color var(--sv-transition);
}

.sv-mini-item:hover {
  background: rgba(var(--sv-accent-rgb), 0.1);
  color: var(--sv-accent);
}

.sv-mini-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-mini-badge {
  flex: none;
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sv-skeleton);
  color: var(--sv-text-faint);
  font-family: var(--sv-mono);
  transition: background var(--sv-transition), color var(--sv-transition);
}

.sv-mini-item:hover .sv-mini-badge {
  background: rgba(var(--sv-accent-rgb), 0.18);
  color: var(--sv-accent);
}

.sv-mini-index {
  font-family: var(--sv-mono);
  font-size: 12px;
  color: var(--sv-text-faint);
  flex-shrink: 0;
  padding-top: 2px;
}

/* 每日一言 */
.sv-hitokoto .sv-widget-title,
.sv-music .sv-widget-title {
  margin-bottom: 10px;
}

.sv-hitokoto-body {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 30px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-skeleton);
}

.sv-hitokoto-body::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: 9px;
  font-size: 36px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: rgba(var(--sv-accent-rgb), 0.3);
}

.sv-hitokoto-text {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.85;
  color: var(--sv-text);
}

.sv-hitokoto-from {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-style: normal;
  text-align: right;
  color: var(--sv-text-faint);
}

.sv-hitokoto-from::before {
  content: "—— ";
}

/* 网易云歌单 */
/*
 * 网易云外链播放器的真实布局（取自官方 outchain-player.css + 页面内联样式：
 *   #player     { margin: 10px 0 0 10px }  ← 外链页写死的上/左各 10px
 *   .player     { margin-top: 10px }       ← 播放器自身还有一个 10px 上边距
 *   .player-mid { height: 66px }           ← height 较小时用的中号播放条
 *
 * 两个上边距是父子关系会 **外边距合并**，实际只占 10px，所以 height=66 的
 * iframe 里内容总高是 76px：原来的 iframe 只有 66px，底部 10px 被裁掉
 * （"进度条贴边、下面豁一块"就是这么来的）；左侧那 10px 则是封面被推进去的留白。
 *
 * 下面的偏移量是实测出来的，不是算出来的：
 *   - 纵向 top:-10 / height:+10  → 播放条上下都刚好贴住容器；
 *   - 横向 left:-10 后如果宽度只给 +10，右侧仍会露出约 7px 底色，
 *     给到 +20 才完全铺满，再多（+30）就会把「- 00:00」切掉。
 *     多出来的部分由 overflow:hidden 吃掉，不需要精确对齐。
 *
 * iframe 另外要加 scrolling="no"：只要内容高出哪怕 1px，浏览器就会给它
 * 塞一条内部滚动条，整条播放器凭空缩窄十几像素，右边露出一条底色。
 */
.sv-music-frame {
  position: relative;
  height: var(--sv-music-h, 66px);
  border-radius: var(--sv-radius-sm);
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

.sv-music-iframe {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(var(--sv-music-h, 66px) + 10px);
  border: 0;
}

.sv-music-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--sv-text-faint);
}

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

/* ==========================================================================
   8. 文章正文排版
   ========================================================================== */
.sv-article {
  padding: 26px 30px 30px;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sv-article-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sv-border);
  margin-bottom: 20px;
}

.sv-article-title {
  margin: 10px 0 12px;
  font-size: clamp(23px, 3.2vw, 31px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sv-text-strong);
}

.sv-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13.2px;
  color: var(--sv-text-faint);
}

.sv-article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sv-article-cover {
  margin: -6px -30px 22px;
  border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0;
  overflow: hidden;
}

.sv-prose {
  font-size: 15.8px;
  line-height: 1.85;
  color: var(--sv-text);
  word-wrap: break-word;
}

.sv-prose > *:first-child {
  margin-top: 0;
}

.sv-prose h1,
.sv-prose h2,
.sv-prose h3,
.sv-prose h4 {
  margin: 1.7em 0 0.7em;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sv-text-strong);
  scroll-margin-top: 100px;
}

.sv-prose h1 {
  font-size: 1.7em;
}
.sv-prose h2 {
  font-size: 1.42em;
  padding-left: 12px;
  border-left: 4px solid var(--sv-accent);
}
.sv-prose h3 {
  font-size: 1.2em;
}
.sv-prose h4 {
  font-size: 1.05em;
}

.sv-prose p {
  margin: 1.1em 0;
}

.sv-prose a {
  color: var(--sv-accent);
  border-bottom: 1px dashed rgba(var(--sv-accent-rgb), 0.6);
}

.sv-prose a:hover {
  background: rgba(var(--sv-accent-rgb), 0.1);
}

.sv-prose ul,
.sv-prose ol {
  margin: 1.1em 0;
  padding-left: 1.6em;
}

.sv-prose li {
  margin: 0.4em 0;
}

.sv-prose li::marker {
  color: var(--sv-accent);
}

.sv-prose blockquote {
  margin: 1.4em 0;
  padding: 12px 18px;
  border-left: 4px solid var(--sv-accent);
  border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0;
  background: rgba(var(--sv-accent-rgb), 0.07);
  color: var(--sv-text-muted);
}

.sv-prose blockquote p {
  margin: 0.3em 0;
}

.sv-prose img {
  border-radius: var(--sv-radius);
  margin: 1.3em auto;
  box-shadow: var(--sv-shadow);
}

html[data-theme="light"] .sv-prose img {
  border: 1px solid var(--sv-border);
}

.sv-prose hr {
  margin: 2em 0;
  border: none;
  border-top: 1px dashed var(--sv-border-strong);
}

.sv-prose code {
  padding: 0.15em 0.42em;
  margin: 0 2px;
  font-family: var(--sv-mono);
  font-size: 0.88em;
  border-radius: 6px;
  background: rgba(var(--sv-accent-rgb), 0.12);
  color: var(--sv-accent);
}

.sv-prose pre {
  position: relative;
  margin: 1.5em 0;
  padding: 16px 18px;
  border-radius: var(--sv-radius);
  background: var(--sv-code-bg) !important;
  border: 1px solid var(--sv-border);
  overflow-x: auto;
  font-size: 13.6px;
  line-height: 1.7;
}

.sv-prose pre code {
  padding: 0;
  background: none;
  color: var(--sv-text);
  font-size: inherit;
  border-radius: 0;
}

.sv-code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  color: var(--sv-text-muted);
  opacity: 0;
  transition: opacity var(--sv-transition);
}

.sv-prose pre:hover .sv-code-copy {
  opacity: 1;
}

.sv-code-copy:hover {
  color: var(--sv-accent);
  border-color: var(--sv-accent);
}

/* 轻量语法高亮 */
.tok-comment {
  color: #8b949e;
  font-style: italic;
}
.tok-string {
  color: #7ec699;
}
.tok-keyword {
  color: #c678dd;
}
.tok-number {
  color: #d19a66;
}
.tok-func {
  color: #61afef;
}
.tok-tag {
  color: #e06c75;
}

.sv-table-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
  border-radius: var(--sv-radius-sm);
  border: 1px solid var(--sv-border);
}

.sv-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.4px;
}

.sv-prose th,
.sv-prose td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--sv-border);
  text-align: left;
}

.sv-prose th {
  background: var(--sv-input-bg);
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-prose tbody tr:hover td {
  background: rgba(var(--sv-accent-rgb), 0.05);
}

/* 文章底部 */
.sv-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--sv-border);
}

.sv-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}

.sv-post-nav-item {
  padding: 14px 16px;
  border-radius: var(--sv-radius);
  background: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
  transition: all var(--sv-transition);
}

.sv-post-nav-item:hover {
  border-color: var(--sv-accent);
  transform: translateY(-2px);
}

.sv-post-nav-label {
  display: block;
  font-size: 12px;
  color: var(--sv-text-faint);
  margin-bottom: 4px;
}

.sv-post-nav-title {
  font-weight: 600;
  color: var(--sv-text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-post-nav-next {
  text-align: right;
}

/* 目录 TOC */
.sv-toc {
  font-size: 13.6px;
}

.sv-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.sv-toc li {
  margin: 0;
}

.sv-toc a {
  display: block;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--sv-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: all var(--sv-transition);
}

.sv-toc a:hover {
  color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.08);
}

.sv-toc a.is-active {
  color: var(--sv-accent);
  font-weight: 600;
  border-left-color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.1);
}

.sv-toc .sv-toc-h3 a {
  padding-left: 22px;
  font-size: 13px;
}

.sv-toc .sv-toc-h4 a {
  padding-left: 34px;
  font-size: 12.6px;
}

/* ==========================================================================
   9. 评论
   ========================================================================== */
.sv-comments {
  margin-top: 26px;
  padding: 24px 28px;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
}

/* 列表页里给评论区单独收窄，别跟卡片网格一样宽 */
.sv-container-narrow {
  max-width: 860px;
  margin: 0 auto;
}

.sv-comments-title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sv-text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-comment-list,
.sv-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-comment-list .children {
  margin-left: 26px;
  padding-left: 14px;
  border-left: 2px solid var(--sv-border);
}

.sv-comment {
  padding: 14px 0;
  border-bottom: 1px dashed var(--sv-border);
}

.sv-comment:last-child {
  border-bottom: none;
}

.sv-comment-body {
  display: flex;
  gap: 12px;
}

.sv-comment-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.sv-comment-main {
  flex: 1;
  min-width: 0;
}

.sv-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.sv-comment-author {
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-comment-time {
  color: var(--sv-text-faint);
  font-size: 12.5px;
}

.sv-comment-content {
  margin-top: 4px;
  font-size: 14.6px;
}

.sv-comment-content p {
  margin: 0.4em 0;
}

.sv-comment-actions {
  margin-top: 6px;
  display: flex;
  gap: 14px;
  font-size: 12.8px;
  color: var(--sv-text-faint);
}

.sv-comment-actions a:hover {
  color: var(--sv-accent);
}

.sv-comment-awaiting {
  color: #e0a34a;
  font-size: 13px;
}

/* 评论表单 */
.sv-comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  color: var(--sv-text-muted);
}

.sv-comment-form input[type="text"],
.sv-comment-form input[type="email"],
.sv-comment-form input[type="url"],
.sv-comment-form textarea {
  width: 100%;
  padding: 9px 13px;
  border-radius: var(--sv-radius-sm);
  border: 1px solid var(--sv-border);
  background: var(--sv-input-bg);
  color: var(--sv-text);
  outline: none;
  transition: border-color var(--sv-transition), box-shadow var(--sv-transition);
}

.sv-comment-form input:focus,
.sv-comment-form textarea:focus {
  border-color: var(--sv-accent);
  box-shadow: 0 0 0 3px rgba(var(--sv-accent-rgb), 0.14);
}

.sv-comment-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.7;
}

.sv-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.sv-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--sv-accent);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform 0.15s var(--sv-ease), box-shadow var(--sv-transition),
    opacity var(--sv-transition);
}

.sv-btn-primary:hover {
  color: #fff;
  box-shadow: 0 6px 20px rgba(var(--sv-accent-rgb), 0.4);
}

.sv-btn-primary:active {
  transform: scale(0.97);
}

.sv-comment-note {
  font-size: 12.6px;
  color: var(--sv-text-faint);
  margin-bottom: 12px;
}

/* ==========================================================================
   10. 页脚
   ========================================================================== */
.sv-footer {
  margin-top: 40px;
  padding: 30px 0 26px;
  border-top: 1px solid var(--sv-border);
  background: var(--sv-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sv-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.4px;
  color: var(--sv-text-muted);
}

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

.sv-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.sv-footer-nav {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   11. 小组件：返回顶部 / 灯箱 / 空状态 / 分页
   ========================================================================== */
.sv-backtop {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 800;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow-lg);
  color: var(--sv-text-muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--sv-transition);
}

.sv-backtop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sv-backtop:hover {
  color: #fff;
  background: var(--sv-accent);
  border-color: var(--sv-accent);
}

.sv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.86);
  cursor: zoom-out;
}

.sv-lightbox.is-open {
  display: flex;
  animation: svFade 0.2s var(--sv-ease);
}

.sv-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: svPop 0.25s var(--sv-ease);
}

.sv-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--sv-text-muted);
}

.sv-empty-icon {
  font-size: 46px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.sv-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 26px 0 0;
}

.sv-page a,
.sv-page span.page-numbers,
.sv-page span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  color: var(--sv-text-muted);
  font-size: 14px;
  transition: all var(--sv-transition);
}

.sv-page a:hover {
  color: #fff;
  background: var(--sv-accent);
  border-color: var(--sv-accent);
}

.sv-page .current {
  color: #fff;
  background: var(--sv-accent);
  border-color: var(--sv-accent);
  font-weight: 700;
}

.sv-page.is-dots span {
  border: none;
  background: none;
}

/* 面包屑 */
.sv-breadcrumb {
  margin-bottom: 14px;
}

.sv-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.4px;
  color: var(--sv-text-muted);
}

.sv-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sv-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
}

.sv-breadcrumb a:hover {
  color: var(--sv-accent);
  border-color: rgba(var(--sv-accent-rgb), 0.5);
}

.sv-breadcrumb .is-current {
  color: var(--sv-text-strong);
  font-weight: 600;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-bc-sep {
  color: var(--sv-text-faint);
  opacity: 0.6;
}

/* 页面标题块 */
.sv-page-head {
  padding: 22px 26px;
  margin-bottom: 20px;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
}

.sv-page-title {
  margin: 8px 0 6px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  color: var(--sv-text-strong);
}

.sv-page-desc {
  margin: 0;
  color: var(--sv-text-muted);
  font-size: 14.4px;
}

/* 友链 */
.sv-friends {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.sv-friend {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  transition: transform 0.25s var(--sv-ease), border-color var(--sv-transition);
}

.sv-friend:hover {
  transform: translateY(-3px);
  border-color: var(--sv-accent);
}

.sv-friend-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sv-skeleton);
}

.sv-friend-name {
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-friend-desc {
  font-size: 13px;
  color: var(--sv-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 友链为空时的占位（板块保留，内容待填） */
.sv-friends-empty {
  grid-column: 1 / -1;
  padding: 34px 22px;
  text-align: center;
  border: 1px dashed var(--sv-border-strong);
  border-radius: var(--sv-radius);
  background: var(--sv-skeleton);
}

.sv-friends-empty .sv-empty-icon {
  margin: 0 auto 10px;
  color: var(--sv-text-faint);
}

.sv-friends-empty-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-text-strong);
}

.sv-friends-empty-hint {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.7;
  color: var(--sv-text-faint);
}

/* 进场动画（仅在 JS 可用时启用，避免脚本异常导致内容不可见） */
html.sv-js .sv-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--sv-ease), transform 0.55s var(--sv-ease);
}

html.sv-js .sv-anim.is-in {
  opacity: 1;
  transform: none;
}

@keyframes svFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes svPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes svBlink {
  to {
    opacity: 0;
  }
}

/* ==========================================================================
   12. 影视记录板块（追番 / 影视 / 游戏记录）
   ========================================================================== */
.sv-media {
  --sv-media-poster: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv-media-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 4px 2px 0;
}

.sv-media-head-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--sv-accent), #9b6ef3);
  box-shadow: 0 8px 22px rgba(var(--sv-accent-rgb), 0.32);
}

.sv-media-head-main {
  min-width: 0;
}

.sv-media-head-title {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-media-head-desc {
  margin: 0;
  color: var(--sv-text-muted);
  font-size: 14.5px;
}

.sv-media-updated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--sv-text-faint);
}

.sv-media-updated .sv-icon {
  opacity: 0.8;
}

.sv-media-content {
  padding: 18px 20px;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sv-media-content > *:first-child {
  margin-top: 0;
}

.sv-media-content > *:last-child {
  margin-bottom: 0;
}

.sv-media-tabs,
.sv-media-filters {
  align-self: flex-start;
}

.sv-media-filters {
  margin-top: -8px;
}

.sv-media-empty {
  padding: 40px 20px;
}

/* 影视记录详情页 */
.sv-detail {
  padding: 22px 24px 26px;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
}

.sv-detail-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px;
}

.sv-detail-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--sv-radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--sv-grad-a, #5b8def), var(--sv-grad-b, #9b6ef3));
  box-shadow: var(--sv-shadow-lg);
}

.sv-detail-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv-detail-poster-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 64px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.sv-detail-info {
  min-width: 0;
}

.sv-detail-title {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.35;
  color: var(--sv-text-strong);
}

.sv-detail-alias {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--sv-text-faint);
}

.sv-detail-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.sv-detail-badges .sv-media-status-inline {
  display: inline-flex;
}

.sv-detail-score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: #e0af68;
}

.sv-detail-progress {
  max-width: 320px;
  margin-bottom: 16px;
}

.sv-detail-meta {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 20px;
}

.sv-detail-meta > div {
  min-width: 0;
}

.sv-detail-meta dt {
  font-size: 12px;
  color: var(--sv-text-faint);
}

.sv-detail-meta dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--sv-text);
}

.sv-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sv-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sv-detail-del {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sv-detail-del:hover {
  color: #e5484d;
  border-color: color-mix(in srgb, #e5484d 45%, transparent);
  background: color-mix(in srgb, #e5484d 10%, transparent);
}

.sv-detail-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--sv-border);
}

.sv-detail-h {
  position: relative;
  margin: 0 0 14px 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sv-text-strong);
}

@media (max-width: 720px) {
  .sv-detail {
    padding: 18px 16px 22px;
  }
  .sv-detail-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sv-detail-poster {
    max-width: 200px;
  }
  .sv-detail-title {
    font-size: 22px;
  }
}

/* 添加卡片（仅登录且有编辑权限者可见） */
.sv-media-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  padding: 16px;
  border: 2px dashed var(--sv-border-strong);
  border-radius: var(--sv-radius);
  background: transparent;
  color: var(--sv-text-faint);
  text-align: center;
  transition: border-color var(--sv-transition), color var(--sv-transition),
    background var(--sv-transition);
}

.sv-media-add:hover {
  border-color: var(--sv-accent);
  color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.06);
}

.sv-media-add-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sv-skeleton);
  transition: transform 0.25s var(--sv-ease);
}

.sv-media-add:hover .sv-media-add-icon {
  transform: scale(1.08);
}

.sv-media-add-text {
  font-size: 14.5px;
  font-weight: 600;
}

.sv-media-add-hint {
  font-size: 11.5px;
  opacity: 0.65;
}

.sv-media[data-layout="list"] .sv-media-add {
  flex-direction: row;
  min-height: 132px;
  gap: 12px;
}

.sv-media[data-layout="list"] .sv-media-add-hint {
  display: none;
}

/* 添加 / 编辑弹窗 */
.sv-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sv-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: svFade 0.2s ease;
}

.sv-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-card-solid);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow-lg);
  overflow: hidden;
  animation: svPop 0.24s var(--sv-ease);
}

.sv-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sv-border);
}

.sv-modal-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  color: var(--sv-text-strong);
}

.sv-modal-head .sv-icon {
  color: var(--sv-accent);
}

.sv-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
  overflow-y: auto;
}

/* 表单 */
.sv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sv-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sv-text-strong);
}

.sv-field input,
.sv-field select,
.sv-field textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--sv-radius-sm);
  border: 1px solid var(--sv-border);
  background: var(--sv-input-bg);
  color: var(--sv-text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--sv-transition), box-shadow var(--sv-transition);
}

.sv-field textarea {
  resize: vertical;
  line-height: 1.7;
}

.sv-field input:focus,
.sv-field select:focus,
.sv-field textarea:focus {
  border-color: rgba(var(--sv-accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--sv-accent-rgb), 0.12);
}

.sv-field-row {
  display: flex;
  gap: 8px;
}

.sv-field-row input {
  flex: 1;
  min-width: 0;
}

.sv-field-row .sv-btn-primary {
  flex: none;
  white-space: nowrap;
}

.sv-field-hint {
  margin: 0;
  font-size: 11.8px;
  line-height: 1.6;
  color: var(--sv-text-faint);
}

.sv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sv-fetch-preview {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sv-fetch-preview img {
  width: 64px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--sv-skeleton);
}

.sv-fetch-source {
  font-size: 12px;
  color: var(--sv-text-faint);
}

.sv-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 2px;
}

.sv-form-msg {
  font-size: 12.5px;
  color: var(--sv-text-muted);
  margin-right: auto;
}

.sv-form-msg.is-error {
  color: #f7768e;
}

.sv-req {
  color: #f7768e;
}

@media (max-width: 640px) {
  .sv-form-grid {
    grid-template-columns: 1fr;
  }
  .sv-modal {
    padding: 10px;
  }
  .sv-modal-panel {
    max-height: 94vh;
  }
}

/* --- 胶囊筛选组 --- */
.sv-pill-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--sv-skeleton);
  border: 1px solid var(--sv-border);
  width: fit-content;
  max-width: 100%;
}

.sv-pill-group--ghost {
  background: transparent;
  border-style: dashed;
}

.sv-pill-indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  width: 0;
  border-radius: 999px;
  background: var(--sv-card-solid);
  box-shadow: var(--sv-shadow);
  transition: transform 0.32s var(--sv-ease), width 0.32s var(--sv-ease);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="dark"] .sv-pill-indicator {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.sv-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--sv-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: nowrap;
  transition: color var(--sv-transition);
}

.sv-pill:hover {
  color: var(--sv-text-strong);
}

.sv-pill.is-active {
  color: var(--sv-accent);
  font-weight: 600;
}

.sv-pill-badge {
  font-style: normal;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sv-skeleton);
  color: var(--sv-text-faint);
  font-weight: 500;
}

.sv-pill.is-active .sv-pill-badge {
  background: rgba(var(--sv-accent-rgb), 0.14);
  color: var(--sv-accent);
}

.sv-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sv-pill-dot, var(--sv-accent));
  flex: none;
}

/* --- 工具行 --- */
.sv-media-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sv-media-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
  color: var(--sv-text-faint);
  transition: border-color var(--sv-transition), box-shadow var(--sv-transition);
}

.sv-media-search:focus-within {
  border-color: rgba(var(--sv-accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--sv-accent-rgb), 0.12);
}

.sv-media-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--sv-text);
}

.sv-media-search input::-webkit-search-cancel-button {
  display: none;
}

.sv-media-search-clear {
  flex: none;
  padding: 2px;
  border-radius: 6px;
  color: var(--sv-text-faint);
  line-height: 0;
}

.sv-media-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.sv-media-count {
  font-size: 12.5px;
  color: var(--sv-text-faint);
  white-space: nowrap;
}

.sv-media-layout {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--sv-skeleton);
  border: 1px solid var(--sv-border);
}

.sv-media-layout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sv-text-faint);
  transition: all var(--sv-transition);
}

.sv-media-layout-btn:hover {
  color: var(--sv-text-strong);
}

.sv-media-layout-btn.is-active {
  background: var(--sv-card-solid);
  color: var(--sv-accent);
  box-shadow: var(--sv-shadow);
}

html[data-theme="dark"] .sv-media-layout-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* --- 卡片网格 --- */
.sv-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
}

.sv-media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s var(--sv-ease), box-shadow 0.3s var(--sv-ease),
    border-color var(--sv-transition);
}

.sv-media-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sv-shadow-lg);
  border-color: rgba(var(--sv-accent-rgb), 0.35);
}

.sv-media-cover {
  position: relative;
  display: block;
  aspect-ratio: var(--sv-media-poster);
  overflow: hidden;
  background: linear-gradient(150deg, var(--sv-grad-a, #5b8def), var(--sv-grad-b, #9b6ef3));
}

.sv-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--sv-ease);
}

.sv-media-card:hover .sv-media-img {
  transform: scale(1.06);
}

.sv-media-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-media-ph-title {
  font-size: 46px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  letter-spacing: 2px;
}

.sv-media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.1) 70%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
}

.sv-media-status {
  position: absolute;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: var(--sv-status, #6b7280);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(4px);
}

.sv-media-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  animation: svPulse 2s infinite;
}

@keyframes svPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

.sv-media-score {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd166;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sv-media-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.28s var(--sv-ease), transform 0.28s var(--sv-ease);
}

.sv-media-play .sv-icon {
  margin-left: 2px;
}

.sv-media-card:hover .sv-media-play {
  opacity: 1;
  transform: scale(1);
}

.sv-media-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 14px;
}

.sv-media-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sv-media-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sv-text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-media-status-inline {
  display: none;
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: var(--sv-status, #6b7280);
}

.sv-media-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-media-progress-track {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--sv-skeleton);
  overflow: hidden;
}

.sv-media-progress-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sv-accent), #9b6ef3);
  transition: width 0.6s var(--sv-ease);
}

.sv-media-progress-text {
  font-style: normal;
  font-size: 11px;
  color: var(--sv-text-faint);
  font-variant-numeric: tabular-nums;
}

.sv-media-comment {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sv-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-media-meta {
  margin: 0;
  font-size: 11.5px;
  color: var(--sv-text-faint);
}

.sv-media-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.sv-media-tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 6px;
  color: var(--sv-tag, var(--sv-text-faint));
  background: var(--sv-skeleton);
  background: color-mix(in srgb, var(--sv-tag, #888) 12%, transparent);
  border: 1px solid var(--sv-border);
  border-color: color-mix(in srgb, var(--sv-tag, #888) 26%, transparent);
  white-space: nowrap;
}

/* --- 条目管理操作（仅登录且有权限时渲染出来） --- */
.sv-media-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px dashed var(--sv-border);
}

.sv-media-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--sv-border);
  border-radius: 999px;
  background: var(--sv-skeleton);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--sv-text-muted);
  cursor: pointer;
  transition: color var(--sv-transition), border-color var(--sv-transition),
    background var(--sv-transition);
}

.sv-media-act:hover {
  color: var(--sv-accent);
  border-color: color-mix(in srgb, var(--sv-accent) 45%, transparent);
}

.sv-media-act.is-danger:hover {
  color: #e5484d;
  border-color: color-mix(in srgb, #e5484d 45%, transparent);
  background: color-mix(in srgb, #e5484d 10%, transparent);
}

.sv-media-act[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* --- 列表布局 --- */
.sv-media[data-layout="list"] .sv-media-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.sv-media[data-layout="list"] .sv-media-card {
  flex-direction: row;
}

.sv-media[data-layout="list"] .sv-media-card:hover {
  transform: translateX(4px);
}

.sv-media[data-layout="list"] .sv-media-cover {
  flex: none;
  width: 96px;
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 132px;
}

.sv-media[data-layout="list"] .sv-media-body {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 14px 16px;
  gap: 7px;
}

.sv-media[data-layout="list"] .sv-media-title {
  font-size: 16px;
  -webkit-line-clamp: 1;
}

.sv-media[data-layout="list"] .sv-media-status-inline {
  display: inline-flex;
}

.sv-media[data-layout="list"] .sv-media-status,
.sv-media[data-layout="list"] .sv-media-score {
  top: 6px;
}

.sv-media[data-layout="list"] .sv-media-status {
  left: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
}

.sv-media[data-layout="list"] .sv-media-score {
  right: 6px;
  padding: 2px 6px;
  font-size: 11px;
}

.sv-media[data-layout="list"] .sv-media-comment {
  -webkit-line-clamp: 2;
}

.sv-media[data-layout="list"] .sv-media-ph-title {
  font-size: 30px;
}

@media (max-width: 640px) {
  .sv-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  .sv-media-head-title {
    font-size: 22px;
  }
  .sv-media-head-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .sv-media-toolbar-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .sv-media[data-layout="list"] .sv-media-cover {
    width: 78px;
    min-height: 112px;
  }
  .sv-media[data-layout="list"] .sv-media-body {
    padding: 12px;
  }
  .sv-media[data-layout="list"] .sv-media-comment {
    display: none;
  }
}

/* ==========================================================================
   13. 工具板块（自建网页小工具的汇总页）
   ========================================================================== */
.sv-tools {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sv-tools-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 4px 2px 0;
}

.sv-tools-head-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #2ac3de, var(--sv-accent));
  box-shadow: 0 8px 22px rgba(var(--sv-accent-rgb), 0.3);
}

.sv-tools-head-main {
  min-width: 0;
}

.sv-tools-head-title {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-tools-head-desc {
  margin: 0;
  color: var(--sv-text-muted);
  font-size: 14.5px;
}

.sv-tools-count {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--sv-text-faint);
}

.sv-tools-content {
  padding: 16px 18px;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
}

.sv-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.sv-tool {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: var(--sv-radius);
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s var(--sv-ease), box-shadow 0.3s var(--sv-ease),
    border-color var(--sv-transition);
}

.sv-tool:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sv-accent) 40%, transparent);
  box-shadow: 0 14px 32px rgba(var(--sv-accent-rgb), 0.2);
}

.sv-tool-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--sv-accent);
  background: color-mix(in srgb, var(--sv-accent) 12%, transparent);
  transition: color var(--sv-transition), background var(--sv-transition);
}

.sv-tool:hover .sv-tool-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--sv-accent), #9b6ef3);
}

.sv-tool-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.sv-tool-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-text-strong);
}

.sv-tool-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sv-text-muted);
}

.sv-tool-go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--sv-text-faint);
  background: var(--sv-skeleton);
  transition: color var(--sv-transition), transform var(--sv-transition);
}

.sv-tool:hover .sv-tool-go {
  color: var(--sv-accent);
  transform: translate(2px, -2px);
}

.sv-tools-notice {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-skeleton);
  font-size: 12.5px;
  color: var(--sv-text-muted);
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */
@media (max-width: 1100px) {
  .sv-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sv-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .sv-sidebar > * {
    flex: 1 1 300px;
  }
  /* 横排时头像别铺满整块卡片 */
  .sv-profile-cover {
    max-width: 200px;
  }
}

@media (max-width: 900px) {
  .sv-banner-inner {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .sv-banner-side {
    flex-direction: row;
  }
  .sv-banner-side > * {
    flex: 1;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  .sv-nav {
    padding: 0 8px;
    gap: 2px;
  }
  .sv-nav-menu {
    display: none;
  }
  .sv-nav-mobile-toggle {
    display: inline-flex;
  }
  .sv-search-btn .sv-kbd {
    display: none;
  }
  .sv-brand span {
    display: none;
  }
  .sv-main {
    padding-top: calc(var(--sv-nav-h) + 16px);
  }
  .sv-article {
    padding: 20px 18px 24px;
  }
  .sv-article-cover {
    margin: -6px -18px 18px;
  }
  .sv-banner-side {
    flex-direction: column;
  }
  .sv-sidebar {
    flex-direction: column;
  }
  .sv-post-nav {
    grid-template-columns: 1fr;
  }
  .sv-post-nav-next {
    text-align: left;
  }
  .sv-form-row {
    grid-template-columns: 1fr;
  }
  .sv-comments {
    padding: 20px 18px;
  }
  .sv-breadcrumb .is-current {
    max-width: 60vw;
  }
  .sv-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 顶部阅读进度条 */
.sv-nav {
  position: relative;
  overflow: hidden;
}

.sv-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--sv-accent);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* 评论表单与分页 */
.sv-comment-form {
  margin-top: 18px;
}

.sv-comment-form p {
  margin: 0 0 12px;
}

.sv-comment-form .form-submit {
  margin-top: 14px;
}

.sv-comment-form .comment-notes,
.sv-comment-form .logged-in-as {
  font-size: 12.8px;
  color: var(--sv-text-faint);
}

.sv-comment-form .comment-reply-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sv-text-strong);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sv-comment-form .comment-reply-title small {
  font-size: 12.5px;
  font-weight: 400;
}

.sv-comments .navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--sv-text-muted);
}

.sv-comments .navigation a:hover {
  color: var(--sv-accent);
}

.sv-article-cover img {
  width: 100%;
  object-fit: cover;
  max-height: 420px;
}

/* 移动端抽屉菜单 */
.sv-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  background: rgba(8, 11, 16, 0.5);
  backdrop-filter: blur(4px);
}

.sv-drawer-mask.is-open {
  display: block;
  animation: svFade 0.2s var(--sv-ease);
}

.sv-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 960;
  width: 280px;
  max-width: 84vw;
  padding: 18px 14px;
  overflow-y: auto;
  background: var(--sv-card-solid);
  border-right: 1px solid var(--sv-border);
  transform: translateX(-100%);
  transition: transform 0.3s var(--sv-ease);
}

.sv-drawer.is-open {
  transform: none;
}

.sv-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--sv-text-strong);
}

.sv-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-drawer .sv-nav-link {
  height: 44px;
  border-radius: var(--sv-radius-sm);
}

.sv-drawer .sv-submenu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  background: none;
  border: none;
  padding-left: 14px;
  display: none;
}

.sv-drawer .sv-nav-item.is-open > .sv-submenu {
  display: block;
}

/* 抽屉底部的账号区（登录 / 写文章 / 后台 / 退出） */
.sv-drawer-admin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sv-border);
}

.sv-drawer-admin a {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--sv-radius-sm);
  font-size: 14.5px;
  color: var(--sv-text-muted);
  transition: background var(--sv-transition), color var(--sv-transition);
}

.sv-drawer-admin a:hover {
  color: var(--sv-accent);
  background: rgba(var(--sv-accent-rgb), 0.1);
}

.sv-drawer-admin .sv-icon {
  flex-shrink: 0;
}

/* 页脚账号链接 */
.sv-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sv-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sv-text-muted);
  transition: color var(--sv-transition);
}

.sv-footer-links a:hover {
  color: var(--sv-accent);
}

/* 打印 */
@media print {
  .sv-nav-wrap,
  .sv-sidebar,
  .sv-backtop,
  .sv-comments,
  .sv-footer {
    display: none !important;
  }
  .sv-article {
    box-shadow: none;
    border: none;
  }
}

/* 降低动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}