:root {
  --loveBackground: #fff;
  --background: #fff;
  --bg: #ffffff;
  --bg2: #f7f9fe;
  --bg3: #f0f2f5;
  --fontColor: #000;
  --text: #1f1f1f;
  --text2: #616161;
  --text3: #9e9e9e;
  --greyFont: #797979;
  --maxGreyFont: #595a5a;
  --articleFontColor: #1f1f1f;
  --articleGreyFontColor: #616161;
  --commentContent: #f7f9fe;
  --favoriteBg: #f7f9fe;

  --primary: #ff623e;
  --primary-l: #ff8a65;
  --primary-d: #e54b26;
  --themeBackground: orange;
  --lightGreen: #39c5bb;
  --blue: #03a9f4;
  --red: red;
  --lightRed: #ff4b2b;
  --maxLightRed: #ff416c;
  --orangeRed: #ef794f;
  --pink: #ff6699;
  --azure: #ecf7fe;
  --maxGreen: #07c160;
  --green: #67c23a;
  --lightYellow: #f4e1c0;
  --iconColor: #ff623e;
  --gradualRed: linear-gradient(90deg, #ff4b2b, #ff416c);
  --gradualGreen: linear-gradient(90deg, #39c5bb, #07c160);
  --gradualBlue: linear-gradient(90deg, #03a9f4, #39c5bb);
  --gradualPurple: linear-gradient(90deg, #a18cd1, #fbc2eb);
  --gradualSunset: linear-gradient(135deg, #ff623e, #ff416c, #a18cd1);

  --border: rgba(0,0,0,.08);
  --borderColor: rgba(0,0,0,.1);
  --borderHoverColor: hsla(0,0%,43%,.2);
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.08);
  --card-shadow: 0 2px 8px rgba(0,0,0,.06);
  --card-hover-shadow: 0 12px 32px rgba(0,0,0,.15);
  --mask: rgba(0,0,0,.3);
  --miniMask: rgba(0,0,0,.15);
  --translucent: rgba(0,0,0,.5);
  --lightGray: #ddd;
  --maxLightGray: #eee;
  --maxMaxLightGray: hsla(0,0%,95%,.5);
  --whiteMask: hsla(0,0%,100%,.3);
  --maxWhiteMask: hsla(0,0%,100%,.5);
  --maxMaxWhiteMask: hsla(0,0%,100%,.7);
  --miniWhiteMask: hsla(0,0%,100%,.15);
  --glass-blur: blur(16px);
  --blur: 0px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --max-w: 1200px;
  --grad: linear-gradient(135deg, #ff623e, #ff416c);
  --grad-text: linear-gradient(135deg, #ff623e, #ff416c);
  --body-bg: linear-gradient(180deg, #fff5f7 0%, #ffffff 30%, #f0f4ff 100%);
  --globalFont: poetize-font;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12);
  --shadow-glow: 0 0 20px rgba(255,98,62,.15);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--globalFont), 'STKaiti', 'KaiTi', '楷体', 'STSong', 'SimSun', 'PingFang SC', 'Microsoft YaHei', serif;
  background: var(--body-bg);
  background-attachment: fixed;
  color: var(--fontColor);
  line-height: 1.8;
  font-size: clamp(14px, 0.9vw + 11px, 16px);
  margin: 0;
  min-height: 100vh;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

::selection { background: var(--lightGreen); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--maxLightRed)); border-radius: 1em; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-d), var(--maxLightRed)); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

a { color: var(--primary); text-decoration: none; transition: color 0.3s var(--ease-smooth); }
a:hover { color: var(--maxLightRed); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

/* ===== Header ===== */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: var(--glass-blur) saturate(180%); -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(0,0,0,.03);
  animation: headerSlideIn 0.6s var(--ease-out);
  transition: box-shadow 0.3s var(--ease-smooth);
}
header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }
@keyframes headerSlideIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-size: 1.35rem; font-weight: 800; color: var(--fontColor); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; transition: transform 0.3s var(--ease-spring); }
.logo:hover { transform: scale(1.05); }
header nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
header nav a { color: var(--greyFont); font-size: 0.88rem; padding: 8px 14px; border-radius: var(--radius-sm); transition: all 0.3s var(--ease-smooth); position: relative; }
header nav a:hover { color: var(--primary); background: var(--favoriteBg); }
header nav a i { margin-right: 2px; }

/* ===== 导航子菜单 ===== */
.header-effect { animation: header-effect .8s ease-out both; }
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-drop-trigger { color: var(--greyFont); font-size: .88rem; padding: 6px 12px; border-radius: var(--radius-sm); transition: all .3s; cursor: pointer; display: flex; align-items: center; gap: 2px; }
.nav-drop-trigger:hover { color: var(--primary); background: var(--favoriteBg); }
.nav-caret { font-size: .7rem; margin-left: 2px; transition: transform .3s; }
.nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: 8px; z-index: 200; animation: slide-top .3s ease-out both; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--greyFont); font-size: .85rem; transition: all .2s; }
.nav-dropdown-menu a:hover { color: var(--primary); background: var(--favoriteBg); }
.nav-search { position: relative; display: inline-flex; align-items: center; }
.nav-search-btn { background: none; border: none; color: var(--greyFont); font-size: .95rem; cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm); transition: all .3s; }
.nav-search-btn:hover { color: var(--primary); background: var(--favoriteBg); }
.nav-search-form { display: none; position: absolute; right: 0; top: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 200; animation: slide-top .2s ease-out both; }
.nav-search.active .nav-search-form { display: block; }
.nav-search-form input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: .85rem; outline: none; width: 200px; color: var(--fontColor); background: var(--bg); }
.nav-search-form input:focus { border-color: var(--primary); }
.nav-user-dropdown .user-avatar { width: 32px; height: 32px; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--grad); }
.nav-user-dropdown .nav-dropdown-menu { right: 0; left: auto; }

.nav-toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--fontColor); }

/* ===== Hero ===== */
.hero {
  position: relative; text-align: center; padding: 100px 20px 80px;
  background: linear-gradient(180deg, #fff5f7 0%, #ffffff 40%, #f0f4ff 100%);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(255,98,62,.10) 0%, transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(57,197,187,.10) 0%, transparent 40%),
              radial-gradient(circle at 50% 80%, rgba(161,140,209,.08) 0%, transparent 35%);
  animation: heroFloat 10s ease-in-out infinite;
}
.hero::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(255,255,255,.3) 70%);
  pointer-events: none;
}
@keyframes heroFloat { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(30px,-20px) rotate(120deg); } 66% { transform: translate(-20px,20px) rotate(240deg); } }
.hero-content { position: relative; z-index: 1; }
.hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 16px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fadeInUp 0.8s var(--ease-out); letter-spacing: -1px; line-height: 1.2; }
.hero-subtitle { font-size: clamp(0.95rem, 2vw, 1.15rem); color: var(--greyFont); margin-bottom: 24px; animation: fadeInUp 1s var(--ease-out); }
.hero-typewriter { font-size: clamp(1rem, 2.5vw, 1.3rem); color: var(--lightGreen); font-weight: 500; min-height: 1.5em; animation: fadeInUp 1.2s var(--ease-out); }
.hero-typewriter::after { content: '|'; animation: blink 1s step-end infinite; color: var(--primary); font-weight: 300; }
@keyframes blink { 50% { opacity: 0; } }
.hero-scroll { margin-top: 48px; color: var(--text3); animation: bounce 2s infinite; font-size: 1.5rem; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* ===== Animations (源站对齐) ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fade-in { 0% { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-out { 0% { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
@keyframes slide-top { 0% { opacity: 0; transform: translateY(-20%); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-bottom { 0% { opacity: 0; transform: translateY(20%); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-right { 0% { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes header-effect { 0% { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rotate { 0% { opacity: 1; transform: rotate(0deg); } to { opacity: 1; transform: rotate(1turn); } }
@keyframes hideToShow { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes my-shake { 0% { opacity: 1; transform: translateY(0); } 30% { opacity: .5; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scatter { 0% { top: 0; } 50% { top: -15px; } to { top: 0; } }
@keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes imgScale { 0% { transform: scale(.8); } 70% { transform: scale(1.3); } to { transform: scale(.8); } }
@keyframes jianBian { to { background-position: -2000rem; } }
@keyframes gradientBG { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } to { background-position: 0 50%; } }
@keyframes weiYanShadowFlashing { 0% { box-shadow: none; } 50% { box-shadow: 0 0 15px var(--red); } to { box-shadow: none; } }
@keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } }
@keyframes passing { 0% { transform: translateX(-130%); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } to { transform: translateX(130%); opacity: 0; } }
@keyframes passingShow { 0% { transform: translateX(-200%); } 50% { transform: translateX(0); } to { transform: translateX(200%); } }
@keyframes fade-up-in { 0% { opacity: 0; } 30% { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-blur-in { 0% { filter: blur(calc(var(--blur) + 20px)) brightness(.4); transform: scale(1.5); } to { filter: blur(var(--blur)) brightness(1); transform: scale(1.2); } }
@keyframes fade-time-in { 0% { opacity: 0; } 20% { opacity: 0; transform: translateY(-90px); } to { opacity: 1; transform: translateY(-150px); } }
@keyframes separator-breathe { 0% { opacity: .8; } 70% { opacity: .8; } to { opacity: .2; } }
@keyframes baseShow { 0% { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes borderExpand { to { background-size: 100% 1px; } }
@keyframes menoryFadeIn { to { opacity: 1; transform: scale(1) rotateY(0) rotateX(0); } }
@keyframes pulse { 0% { transform: translate(-50%,-50%) scale(.1); opacity: .9; border-color: hsla(0,0%,100%,.9); } 50% { opacity: .6; border-color: hsla(0,0%,100%,.6); } to { transform: translate(-50%,-50%) scale(1); opacity: 0; border-color: hsla(0,0%,100%,.2); } }

/* 源站动画类 */
.my-animation-slide-top { animation: slide-top 1s ease-out both; }
.my-animation-slide-bottom { animation: slide-bottom 1s ease-out both; }
.my-animation-slide-right { animation: slide-right 1s ease-out both; }
.my-animation-hideToShow { animation: hideToShow 1s ease-out both; }
.iconRotate { animation: rotate 2s linear infinite; }

/* ===== 源站组件样式 ===== */
.user-avatar { cursor: pointer; transition: all .3s; border: 2px solid hsla(0,0%,100%,.2); border-radius: 50%; }
.user-avatar:hover { transform: rotate(1turn); }
.shadow-box-mini { box-shadow: 1px 1px 3px var(--mask); }
.shadow-box { box-shadow: 2px 2px 5px var(--borderColor); transition: all .3s ease; }
.shadow-box:hover { box-shadow: 0 5px 10px 5px var(--borderHoverColor); }
.button-bg { background-color: #f69; box-shadow: 0 4px 4px rgba(255,102,153,.3); color: #fff; border: none; padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer; transition: all .3s; }
.button-bg:hover { opacity: .9; transform: translateY(-2px); }
.toolbarDrawer { background: linear-gradient(180deg,#fff5f7,#fff 50%,#f0f4ff); }
.myCenter { display: flex; justify-content: center; align-items: center; }
.transformCenter { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.myBetween { display: flex; justify-content: space-between; align-items: center; }

/* 图片组 */
.image-group { display: flex; flex-wrap: wrap; gap: 5px; max-width: 350px; margin: 10px 0; }
.image-group-count-2 .image-group-container, .image-group-count-4 .image-group-container { width: calc(50% - 2.5px); }
.image-group-count-3 .image-group-container { width: calc(33.3% - 3.3px); }
.image-group-count-2 .image-group-container img, .image-group-count-3 .image-group-container img, .image-group-count-4 .image-group-container img { aspect-ratio: 1/1; }
img.pictureReg { border-radius: 5px; object-fit: cover; width: 100%; max-width: 300px; display: block; }

/* 音频播放器 */
.mini-audio { width: 100%; margin: 0; position: relative; user-select: none; border-radius: 5px; overflow: hidden; }
.mini-audio:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--translucent); z-index: 0; }
.mini-audio * { z-index: 1; position: relative; }
.mini-audio span { color: #fff; }

/* ===== Section Title ===== */
.section-title { font-size: 1.5rem; font-weight: 700; margin: 32px 0 24px; display: flex; align-items: center; gap: 10px; }
.section-title i { color: var(--primary); }

/* ===== Layout ===== */
.layout-2col { display: grid; grid-template-columns: 1fr 300px; gap: 24px; margin: 20px 0; }
.layout-main { min-width: 0; }

/* ===== Post Grid ===== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.post-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--card-shadow); overflow: hidden; transition: all 0.4s var(--ease-out);
  animation: fadeInUp 0.6s var(--ease-out) both; position: relative; cursor: pointer;
  will-change: transform, box-shadow;
}
.post-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-6px); border-color: var(--primary); }
.post-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); z-index: 2; }
.post-card:hover::before { transform: scaleX(1); }
.post-card h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cover-wrap { position: relative; overflow: hidden; height: 200px; background: var(--bg2); }
.cover-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4)); opacity: 0; transition: opacity 0.4s var(--ease-smooth); }
.post-card:hover .cover-wrap::after { opacity: 1; }
.cover { width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.post-card:hover .cover { transform: scale(1.1); }
.post-card .cover-placeholder {
  width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fff5f7 0%, #f0f4ff 100%); color: var(--primary); font-size: 2.5rem;
  transition: transform 0.4s var(--ease-out);
}
.post-card:hover .cover-placeholder { transform: scale(1.05); }
.post-card .card-body { padding: 20px; }
.post-card h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; line-height: 1.5; }
.post-card h2 a { color: var(--articleFontColor); transition: color 0.3s; }
.post-card h2 a:hover { color: var(--primary); }
.post-card .excerpt { color: var(--articleGreyFontColor); font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .meta { display: flex; gap: 16px; color: var(--text3); font-size: 0.8rem; flex-wrap: wrap; align-items: center; }
.post-card .meta i { margin-right: 3px; }
.post-card .meta span { display: inline-flex; align-items: center; }
.post-card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.post-card .tag { background: var(--favoriteBg); color: var(--blue); padding: 2px 10px; border-radius: 10px; font-size: 0.75rem; transition: all 0.3s; }
.post-card .tag:hover { background: var(--blue); color: #fff; }
.post-card .card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* Skeleton loading */
.skeleton-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; }
.skeleton-cover { height: 200px; background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-body { padding: 20px; }
.skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; margin-bottom: 10px; }
.skeleton-line.short { width: 60%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Sidebar ===== */
.sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }
.sidebar-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 20px; }
.sidebar-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--favoriteBg); display: flex; align-items: center; gap: 8px; }
.sidebar-card h3 i { color: var(--primary); }
.sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.sidebar-card li { padding: 6px 0; font-size: 0.88rem; }
.sidebar-card li a { color: var(--articleGreyFontColor); }
.sidebar-card li a:hover { color: var(--primary); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { background: var(--favoriteBg); color: var(--blue); padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; transition: all 0.3s; }
.tag-cloud a:hover { background: var(--lightGreen); color: #fff; transform: translateY(-2px); }
.search-highlight { background: rgba(255,98,62,.2); color: var(--primary-d); padding: 0 2px; border-radius: 2px; font-weight: 600; }
.dark .search-highlight { background: rgba(255,138,101,.25); color: var(--primary-l); }
.hot-post-list { display: flex; flex-direction: column; gap: 10px; }
.hot-post-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); transition: all 0.2s; }
.hot-post-item:last-child { border-bottom: none; }
.hot-post-item:hover { transform: translateX(4px); }
.hot-post-item .hot-rank { font-size: 1.1rem; font-weight: 700; min-width: 22px; text-align: center; line-height: 1.4; }
.hot-post-item:nth-child(1) .hot-rank { color: #ff416c; }
.hot-post-item:nth-child(2) .hot-rank { color: #ff8a65; }
.hot-post-item:nth-child(3) .hot-rank { color: #ffa726; }
.hot-post-item .hot-info { flex: 1; min-width: 0; }
.hot-post-item .hot-info a { color: var(--articleFontColor); font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.hot-post-item .hot-info a:hover { color: var(--primary); }
.hot-post-item .hot-info .hot-date { color: var(--text3); font-size: 0.72rem; }
.hot-post { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.hot-post:last-child { border-bottom: none; }
.hot-post .num { font-size: 1.2rem; font-weight: 700; color: var(--primary); min-width: 24px; }
.hot-post .info { flex: 1; min-width: 0; }
.hot-post .info a { color: var(--articleFontColor); font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-post .info span { color: var(--text3); font-size: 0.75rem; }
.recent-comment { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.recent-comment:last-child { border-bottom: none; }
.recent-comment .name { color: var(--primary); font-weight: 500; }
.recent-comment .text { color: var(--articleGreyFontColor); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }

/* ===== Post Detail ===== */
.post-layout { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 20px 0; }
.post-layout.has-toc { grid-template-columns: 1fr 220px; }
.post-layout .post-main { min-width: 0; }
.post-layout .post-toc-wrap { min-width: 0; }
@media (max-width: 1100px) { .post-layout.has-toc { grid-template-columns: 1fr; } .post-layout .post-toc-wrap { display: none; } }
.post-detail { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 48px; margin: 0; transition: box-shadow 0.3s; }
.post-detail:hover { box-shadow: var(--shadow-lg); }
.post-action { display: flex; align-items: center; gap: 16px; margin: 20px 0; padding: 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); }
.post-action .like-count { font-size: 0.9rem; color: var(--text3); }
.post-detail h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 16px; color: var(--articleFontColor); line-height: 1.4; }
.post-detail .meta { color: var(--text3); font-size: 0.88rem; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; gap: 20px; flex-wrap: wrap; }
.post-detail .meta i { margin-right: 3px; }
.post-detail .content { font-size: 18px; line-height: 1.9; color: var(--articleFontColor); }
.post-detail .content h1 { font-size: 1.5rem; margin: 30px 0 20px; text-align: center; }
.post-detail .content h2 { font-size: 25px; line-height: 35px; margin: 30px 0 20px; padding-left: 12px; border-left: 4px solid var(--primary); }
.post-detail .content h3 { font-size: 22px; margin: 30px 0 20px; padding-left: 20px; padding-bottom: 8px; }
.post-detail .content h4 { font-size: 20px; margin: 30px 0 20px; padding-left: 12px; }
.post-detail .content h5 { font-size: 18px; margin: 30px 0 20px; padding-left: 28px; }
.post-detail .content p { margin: 0 0 14px; }
.post-detail .content img { max-width: 100%; border-radius: 8px; margin: 20px auto; display: block; box-shadow: var(--shadow-md); transition: transform 0.3s var(--ease-out); }
.post-detail .content img:hover { transform: scale(1.02); }
.post-detail .content pre { background: #1e1e2e; color: #cdd6f4; padding: 20px; border-radius: 10px; overflow-x: auto; font-size: 0.88rem; line-height: 1.7; margin: 1.5em 0; border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-md); }
.code-copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.1); border: none; color: #cdd6f4; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; opacity: 0; transition: opacity 0.2s, background 0.2s; }
.post-detail .content pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { background: rgba(255,255,255,.2); }
.post-detail .content code { background: var(--favoriteBg); padding: 2px 6px; border-radius: 4px; font-size: 85%; color: var(--maxLightRed); font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; }
.post-detail .content pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.post-detail .content pre::-webkit-scrollbar { height: 6px; }
.post-detail .content pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.post-detail .content blockquote { border-left: 4px solid var(--lightGreen); background: linear-gradient(90deg, rgba(57,197,187,.06), transparent); padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; color: var(--articleGreyFontColor); position: relative; }
.post-detail .content blockquote::before { content: '"'; position: absolute; top: -10px; left: 10px; font-size: 3rem; color: var(--lightGreen); opacity: 0.2; font-family: Georgia, serif; }
.post-detail .content a { color: var(--blue); border-bottom: 1px dashed var(--blue); transition: all 0.3s; }
.post-detail .content a:hover { color: var(--primary); border-bottom-color: var(--primary); border-bottom-style: solid; }
.post-detail .content ul, .post-detail .content ol { padding: 0 10px 0 35px; margin: 12px 0; color: var(--articleGreyFontColor); }
.post-detail .content li { padding: 6px 0; letter-spacing: 0.5px; line-height: 1.8; }
.post-detail .content ul li::marker { color: var(--primary); }
.post-detail .content ol li::marker { color: var(--primary); font-weight: 600; }
.post-detail .content table { width: 100%; border-collapse: collapse; margin: 16px 0; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.post-detail .content th, .post-detail .content td { padding: 10px 16px; border: 1px solid var(--border); text-align: center; }
.post-detail .content th { background: linear-gradient(180deg, var(--favoriteBg), var(--bg2)); font-weight: 600; color: var(--articleFontColor); }
.post-detail .content tbody > tr:nth-child(even) { background: var(--favoriteBg); }
.post-detail .content tbody > tr { transition: all 0.2s var(--ease-smooth); }
.post-detail .content tbody > tr:hover { background: rgba(255,98,62,.06); }

.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--text3); margin: 20px 0; }
.breadcrumb a { color: var(--greyFont); }
.breadcrumb a:hover { color: var(--primary); }

.post-nav { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0; }
.post-nav a { flex: 1; padding: 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); color: var(--articleFontColor); font-size: 0.9rem; transition: all 0.3s; }
.post-nav a:hover { border-color: var(--primary); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }
.post-nav .prev { text-align: left; }
.post-nav .next { text-align: right; }

.related-posts { margin: 32px 0; }
.related-posts h3 { font-size: 1.2rem; margin-bottom: 16px; }

/* ===== Comments ===== */
.comments { margin: 32px 0; }
.comments h3 { font-size: 1.2rem; margin-bottom: 16px; }
.comment { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--card-shadow); }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.88rem; flex-shrink: 0; }
.comment .author { font-weight: 500; color: var(--articleFontColor); }
.comment .date { color: var(--text3); font-size: 0.8rem; margin-left: auto; }
.comment .content { color: var(--articleGreyFontColor); font-size: 0.9rem; line-height: 1.7; }
.comment-form { background: var(--favoriteBg); border-radius: var(--radius); padding: 20px; margin-top: 20px; }
.comment-form input, .comment-form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--fontColor); margin-bottom: 10px; font-size: 0.9rem; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form textarea { min-height: 80px; resize: vertical; }
.comment-form button { padding: 8px 24px; background: var(--grad); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; font-weight: 500; transition: all 0.3s; }
.comment-form button:hover { opacity: 0.9; transform: translateY(-1px); }

/* ===== Twitter ===== */
.twitter-list { display: flex; flex-direction: column; gap: 16px; }
.twitter-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px; box-shadow: var(--card-shadow); animation: fadeInUp 0.5s ease-out both; transition: all 0.3s; }
.twitter-item:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }
.twitter-item .content { color: var(--articleFontColor); line-height: 1.8; }
.twitter-item .meta { display: flex; gap: 16px; color: var(--text3); font-size: 0.8rem; margin-top: 12px; align-items: center; }

/* ===== Links ===== */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.link-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: all 0.3s; animation: fadeInUp 0.5s ease-out both; }
.link-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-3px); border-color: var(--lightGreen); }
.link-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
.link-info h3 { font-size: 1rem; margin-bottom: 4px; color: var(--articleFontColor); }
.link-info p { font-size: 0.82rem; color: var(--greyFont); }

/* ===== User Profile ===== */
.user-profile { text-align: center; padding: 40px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.user-profile .avatar { width: 80px; height: 80px; font-size: 2rem; margin: 0 auto 16px; }
.user-profile h1 { font-size: 1.5rem; margin-bottom: 8px; }
.user-profile .bio { color: var(--greyFont); font-size: 0.9rem; }

/* ===== Pagination ===== */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 32px 0; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--articleGreyFontColor); font-size: 0.88rem; background: var(--card-bg); }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current { background: var(--grad); color: #fff; border-color: transparent; }

/* ===== Footer ===== */
footer { background: linear-gradient(180deg, transparent, var(--bg3)); border-top: 1px solid var(--border); padding: 48px 0 24px; margin-top: 80px; position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 3px; background: var(--grad); border-radius: 0 0 3px 3px; }
footer .container { text-align: center; }
footer .footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
footer .footer-links a { color: var(--greyFont); font-size: 0.85rem; transition: all 0.3s; }
footer .footer-links a:hover { color: var(--primary); transform: translateY(-2px); }
footer p { color: var(--text3); font-size: 0.82rem; line-height: 1.8; }

/* ===== Back to Top ===== */
.back-to-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary); font-size: 1.1rem; z-index: 50; opacity: 0; transform: translateY(20px) scale(0.8); transition: all 0.4s var(--ease-spring); }
.back-to-top.show { opacity: 1; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-4px) scale(1.1); box-shadow: var(--shadow-glow); }

/* ===== Reading Progress Bar ===== */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--grad); z-index: 200; width: 0%; transition: width 0.1s linear; box-shadow: 0 0 10px rgba(255,98,62,.5); }

/* ===== Toast Notifications ===== */
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 20px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text); animation: toastIn 0.4s var(--ease-spring) both; pointer-events: auto; max-width: 320px; }
.toast.success { border-left: 4px solid var(--green); }
.toast.error { border-left: 4px solid var(--red); }
.toast.info { border-left: 4px solid var(--blue); }
.toast.removing { animation: toastOut 0.3s var(--ease-smooth) both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* ===== Share Buttons ===== */
.share-buttons { display: flex; gap: 10px; margin: 20px 0; align-items: center; }
.share-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s var(--ease-spring); border: 1px solid var(--border); background: var(--card-bg); color: var(--greyFont); font-size: 1rem; }
.share-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: var(--shadow-md); }
.share-btn.weibo:hover { background: #e6162d; color: #fff; border-color: #e6162d; }
.share-btn.twitter:hover { background: #1da1f2; color: #fff; border-color: #1da1f2; }
.share-btn.copy:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.share-btn.qrcode:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ===== Estimated Reading Time ===== */
.reading-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--text3); font-size: 0.82rem; }
.reading-meta i { color: var(--primary); }

/* ===== Search ===== */
.search-box { display: flex; gap: 8px; margin: 20px 0; }
.search-box input { flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); color: var(--fontColor); font-size: 0.9rem; }
.search-box input:focus { outline: none; border-color: var(--primary); }
.search-box button { padding: 10px 20px; background: var(--grad); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.88rem; }

/* ===== Archives ===== */
.archive-list { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 24px; }
.archive-year { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 20px 0 10px; }
.archive-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.archive-item:last-child { border-bottom: none; }
.archive-item a { color: var(--articleFontColor); }
.archive-item a:hover { color: var(--primary); }
.archive-item .date { color: var(--text3); font-size: 0.82rem; }
.archive-count { color: var(--text3); font-size: 0.85rem; font-weight: 400; }
.archive-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.archive-year-stat { display: flex; gap: 12px; align-items: center; padding: 10px 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: all 0.3s; }
.archive-year-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.archive-year-stat .year { font-size: 1.3rem; font-weight: 700; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.archive-year-stat .count { color: var(--text2); font-size: 0.88rem; }
.archive-year-stat .views, .archive-year-stat .comments { color: var(--text3); font-size: 0.82rem; display: flex; align-items: center; gap: 4px; }
.archive-year-stat .views i, .archive-year-stat .comments i { color: var(--primary); }
.archive-timeline { position: relative; }
.archive-timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--primary), var(--lightGreen), var(--blue)); opacity: 0.2; }
.archive-month { position: relative; margin-left: 50px; margin-bottom: 24px; }
.archive-month::before { content: ''; position: absolute; left: -38px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--card-bg); }
.archive-month ul li { display: flex; gap: 12px; align-items: center; }
.archive-month ul li .views { margin-left: auto; color: var(--text3); font-size: 0.78rem; display: flex; align-items: center; gap: 3px; }
.archive-month ul li .views i { color: var(--primary); }

/* ===== 404 ===== */
.not-found { text-align: center; padding: 80px 20px; }
.not-found h1 { font-size: 5rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.not-found p { color: var(--greyFont); font-size: 1.1rem; margin: 16px 0; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .layout-2col { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .post-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-typewriter { font-size: 1rem; }
  .post-detail { padding: 24px; }
  .post-detail h1 { font-size: 1.4rem; }
}
/* 移动端抽屉导航 */
.nav-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 998; opacity: 0; pointer-events: none; transition: opacity .3s; }
.nav-drawer-overlay.show { opacity: 1; pointer-events: auto; }
.nav-drawer { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: linear-gradient(180deg,#fff5f7,#fff 50%,#f0f4ff); z-index: 999; transition: right .3s ease; overflow-y: auto; padding: 60px 20px 24px; box-shadow: -4px 0 24px rgba(0,0,0,.15); }
.nav-drawer.show { right: 0; }
:root.dark .nav-drawer { background: linear-gradient(180deg,#221831,#1b1b2e 50%,#15151c); box-shadow: -4px 0 24px rgba(0,0,0,.5); }
.nav-drawer-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--fontColor); }
.nav-drawer-section { margin-bottom: 20px; }
.nav-drawer-section h4 { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.nav-drawer-section a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--fontColor); font-size: .95rem; transition: all .2s; }
.nav-drawer-section a:hover { background: var(--favoriteBg); color: var(--primary); }
.nav-drawer-section a i { width: 20px; text-align: center; color: var(--iconColor); }
.nav-drawer-search { margin-bottom: 20px; }
.nav-drawer-search form { display: flex; gap: 8px; }
.nav-drawer-search input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .9rem; background: var(--card-bg); color: var(--fontColor); outline: none; }
.nav-drawer-search input:focus { border-color: var(--primary); }
.nav-drawer-search button { background: var(--grad); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; }
.nav-drawer-theme { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--favoriteBg); margin-bottom: 16px; }
.nav-drawer-theme span { font-size: .9rem; color: var(--fontColor); }

@media (max-width: 600px) {
  header nav { display: none; }
  .nav-toggle { display: block; }
  .post-grid { grid-template-columns: 1fr; }
  .post-detail { padding: 16px; }
  .post-nav { flex-direction: column; }
  .link-grid { grid-template-columns: 1fr; }
  .hero { padding: 50px 16px 40px; }
  .hero-title { font-size: 1.6rem; }
  .section-title { font-size: 1.2rem; }
}

/* ===== Swiper 轮播 ===== */
.swiper { width: 100%; border-radius: var(--radius); overflow: hidden; }
.swiper-slide { height: auto; }
.swiper-slide .post-card { height: 100%; margin: 0; }
.swiper-pagination-bullet { background: var(--primary); opacity: .4; }
.swiper-pagination-bullet-active { opacity: 1; }
.swiper-button-prev, .swiper-button-next { color: var(--primary); }
.hero-swiper { margin-bottom: 24px; }
.hero-swiper .swiper-slide { height: 280px; }
.hero-swiper .swiper-slide img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius); }
.hero-swiper .swiper-slide .slide-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: 40px 20px 16px; color: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.hero-swiper .swiper-slide .slide-overlay h3 { color: #fff; font-size: 1.2rem; margin: 0 0 4px; }
.hero-swiper .swiper-slide .slide-overlay p { color: rgba(255,255,255,.8); font-size: .85rem; margin: 0; }
.hero-swiper .swiper-slide { position: relative; }

/* ===== 文章复制按钮 ===== */
.article-copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--favoriteBg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: .85rem; color: var(--greyFont); transition: all .3s; }
.article-copy-btn:hover { border-color: var(--primary); color: var(--primary); }
.post-actions-bar { display: flex; justify-content: flex-end; gap: 12px; margin: 20px 0; }

/* ===== Dark Theme (源站对齐) ===== */
:root.dark {
  --loveBackground: #272727;
  --background: linear-gradient(0deg,#221831,#1b1b2e,#15151c);
  --bg: #1a1a2e; --bg2: #16213e; --bg3: #0f3460;
  --fontColor: #fff; --text: #e0e0e0; --text2: #a0a0a0; --text3: #707070;
  --greyFont: #909090; --articleFontColor: #e4e4e4; --articleGreyFontColor: #d4d4d4;
  --border: rgba(255,255,255,.08); --borderColor: #4f4f4f; --borderHoverColor: #000;
  --card-bg: #16213e; --card-border: rgba(255,255,255,.08);
  --card-shadow: 0 2px 8px rgba(0,0,0,.3); --card-hover-shadow: 0 12px 32px rgba(0,0,0,.5);
  --favoriteBg: #1e1e1e; --commentContent: #d4d4d4;
  --body-bg: linear-gradient(0deg,#221831,#1b1b2e,#15151c);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4); --shadow-xl: 0 16px 48px rgba(0,0,0,.5);
}
:root, :root.dark { transition: background 0.5s var(--ease-smooth), color 0.3s var(--ease-smooth); }
:root.dark header { background: rgba(26,26,46,.72); }
:root.dark .hero { background: linear-gradient(180deg,#0f0c29 0%,#1a1a2e 40%,#16213e 100%); }
:root.dark .post-card .cover-placeholder { background: linear-gradient(135deg,#1a1a2e,#16213e); }
:root.dark .form-group input,:root.dark .form-group textarea,:root.dark .form-group select { background: #1a1a2e; }
:root.dark .comment-form input,:root.dark .comment-form textarea { background: #1a1a2e; }
:root.dark footer { background: linear-gradient(180deg,transparent,#0f0c29); }
:root.dark .post-detail .content pre { background: #11111b; border-color: rgba(255,255,255,.04); }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .wow { opacity: 1 !important; }
}

/* ===== Print Styles ===== */
@media print {
  header, footer, .sidebar, .back-to-top, .reading-progress, .share-buttons, .nav-toggle, .nav-drawer, .nav-drawer-overlay, .hero, .hero-swiper { display: none !important; }
  .post-detail { box-shadow: none; border: none; padding: 0; }
  .layout-2col { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  .post-detail .content pre { background: #f5f5f5; color: #333; border: 1px solid #ddd; }
}

/* ===== Scroll Animations ===== */
.wow { opacity: 0; }
.wow.animated.fadeInUp { animation: fadeInUp 0.6s var(--ease-out) both; }
.wow.animated.slideInLeft { animation: slideInLeft 0.6s var(--ease-out) both; }
.wow.animated.slideInRight { animation: slideInRight 0.6s var(--ease-out) both; }
.wow.animated.scaleIn { animation: scaleIn 0.5s var(--ease-out) both; }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* ===== Performance Optimizations ===== */
.post-card { content-visibility: auto; contain-intrinsic-size: 400px; }
.sidebar { content-visibility: auto; contain-intrinsic-size: 600px; }
.post-detail .content { content-visibility: auto; contain-intrinsic-size: 2000px; }
.swiper { content-visibility: auto; contain-intrinsic-size: 300px; }
img[loading="lazy"] { content-visibility: auto; }

/* ===== Skip Link ===== */
.skip-link { transition: left 0.2s; }
.skip-link:focus { left: 0 !important; }

/* ===== Better Empty States ===== */
.empty-state { text-align: center; padding: 80px 20px; color: var(--text3); }
.empty-state i { font-size: 3rem; display: block; margin-bottom: 16px; opacity: 0.5; }
.empty-state p { font-size: 1rem; margin: 8px 0; }
.empty-state a { display: inline-block; margin-top: 16px; padding: 8px 24px; background: var(--grad); color: #fff; border-radius: var(--radius-sm); text-decoration: none; }
.empty-state h3 { font-size: 1.3rem; color: var(--text2); margin: 10px 0; }
.search-result-info { background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 12px 20px; margin-bottom: 20px; font-size: 0.9rem; color: var(--text2); }
.search-result-info strong { color: var(--primary); font-weight: 700; }
.search-result-info i { color: var(--primary); margin-right: 6px; }

/* ===== Better Related Posts ===== */
.related { margin: 32px 0; }
.related h3 { font-size: 1.2rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.related h3 i { color: var(--primary); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.related-card { display: block; padding: 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: all 0.3s var(--ease-out); }
.related-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-3px); border-color: var(--primary); }
.related-card .title { font-size: 0.9rem; font-weight: 500; color: var(--articleFontColor); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-card .date { font-size: 0.78rem; color: var(--text3); display: flex; align-items: center; gap: 4px; }
.related-cover img { transition: transform 0.4s var(--ease-out); }
.related-card:hover .related-cover img { transform: scale(1.08); }

/* ===== Tag Primary ===== */
.tag-primary { background: var(--favoriteBg); color: var(--blue); padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; text-decoration: none; transition: all 0.3s; }
.tag-primary:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

/* ===== Nav Label ===== */
.nav-label { font-size: 0.75rem; color: var(--text3); margin-bottom: 4px; }
.nav-title { font-size: 0.9rem; color: var(--articleFontColor); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== TOC (源站对齐) ===== */
.toc-sidebar { position: fixed; top: 25vh; right: 3vh; width: 250px; max-height: 60vh; overflow-y: auto; border-radius: 14px; border: 1px solid var(--borderColor); box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06); padding: 0 0 12px; background: var(--loveBackground); color: var(--greyFont); z-index: 100; overscroll-behavior: contain; }
.toc-sidebar h3 { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--text2); padding: 16px 16px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.toc-sidebar ul { list-style: none; padding: 4px 10px; margin: 0; overflow-y: auto; max-height: 52vh; scroll-behavior: smooth; }
.toc-sidebar li { padding: 0; font-size: 13px; line-height: 1.55; }
.toc-sidebar li a { color: var(--text2); display: block; padding: 5px 10px; border-left: 3px solid transparent; border-radius: 8px; transition: all 0.2s; }
.toc-sidebar li a:hover { background: var(--favoriteBg); color: var(--fontColor); }
.toc-sidebar li a.active { font-weight: 700; color: var(--primary); background: rgba(255,165,0,.1); border-left-color: var(--primary); }
.toc-sidebar li.toc-h3 a { padding-left: 20px; }
.toc-sidebar li.toc-h4 a { padding-left: 32px; }
.toc-sidebar ul ul { padding-left: 8px; border-left: 1px dashed var(--border); }
@media (max-width: 768px) { .toc-sidebar { display: none; } }
:root.dark .toc-sidebar { background: #272727; border-color: #4f4f4f; box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25); color: #b0b0b0; }
:root.dark .toc-sidebar h3 { color: #999; }
:root.dark .toc-sidebar li a { color: #aaa; }
:root.dark .toc-sidebar li a:hover { background: hsla(0,0%,100%,.05); color: #eee; }

/* ===== Lightbox ===== */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
.lightbox-overlay.show { display: flex; animation: fadeIn 0.3s; }
.lightbox-overlay img { max-width: 90%; max-height: 90%; border-radius: 8px; }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2rem; cursor: pointer; }

/* ===== 照片墙 ===== */
.photo-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.photo-filter-btn { padding: 6px 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--card-bg); color: var(--greyFont); font-size: .85rem; cursor: pointer; transition: all .3s; }
.photo-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.photo-filter-btn.active { background: var(--grad); color: #fff; border-color: transparent; }
.photo-masonry { columns: 4; column-gap: 16px; }
@media (max-width: 900px) { .photo-masonry { columns: 3; } }
@media (max-width: 600px) { .photo-masonry { columns: 2; } }
.photo-card { break-inside: avoid; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); transition: all .3s; cursor: pointer; }
.photo-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-4px); }
.photo-cover { width: 100%; aspect-ratio: 1; transition: transform .4s; }
.photo-card:hover .photo-cover { transform: scale(1.08); }
.photo-info { padding: 10px 14px; background: var(--card-bg); display: flex; justify-content: space-between; align-items: center; }
.photo-cat { font-size: .7rem; color: var(--primary); background: rgba(255,165,0,.1); padding: 2px 8px; border-radius: 10px; }
.photo-title { font-size: .85rem; color: var(--fontColor); font-weight: 500; }
.photo-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.photo-lightbox.show { display: flex; animation: fadeIn .3s; }
.photo-lightbox-content { width: 70%; height: 70%; border-radius: 12px; background-size: cover; background-position: center; }
.photo-lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2rem; cursor: pointer; }

/* ===== Like + Theme Toggle ===== */
.like-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 0.9rem; color: var(--articleGreyFontColor); transition: all 0.3s; }
.like-btn:hover { border-color: var(--maxLightRed); color: var(--maxLightRed); transform: translateY(-2px); }
.like-btn.liked { background: rgba(255,65,108,.1); border-color: var(--maxLightRed); color: var(--maxLightRed); }
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: var(--fontColor); transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); transform: rotate(20deg); }
.particle-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

@keyframes floatUp { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2) translateY(-60px); } }

/* 搜索建议样式 */
.search-suggest-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--articleGreyFontColor); font-size: 0.88rem; transition: all 0.2s; text-decoration: none; }
.search-suggest-item:hover { background: var(--favoriteBg); color: var(--primary); }
.search-suggest-item i { color: var(--text3); font-size: 0.8rem; }
.search-suggest-item mark { background: rgba(255,98,62,.2); color: var(--primary-d); padding: 0 2px; border-radius: 2px; }

/* 间距系统 */
:root {
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --transition-fast: 0.15s; --transition-base: 0.3s; --transition-slow: 0.5s;
  --z-dropdown: 100; --z-sticky: 200; --z-overlay: 1000; --z-modal: 2000; --z-toast: 9999;
  --grad-warm: linear-gradient(135deg, #ff623e, #ff9966);
  --grad-cool: linear-gradient(135deg, #39c5bb, #03a9f4);
  --grad-rainbow: linear-gradient(90deg, #ff623e, #ff416c, #a18cd1, #39c5bb, #03a9f4);
  --grad-mesh: radial-gradient(at 0% 0%, #ff623e 0%, transparent 50%), radial-gradient(at 100% 0%, #ff416c 0%, transparent 50%), radial-gradient(at 100% 100%, #a18cd1 0%, transparent 50%), radial-gradient(at 0% 100%, #39c5bb 0%, transparent 50%);
}

/* 首字下沉 */
.post-detail .content > p:first-of-type::first-letter {
  font-size: 3.2em; font-weight: 700; float: left; line-height: 0.8; margin: 0.08em 0.12em 0 0;
  color: var(--primary); font-family: Georgia, 'STSong', serif;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 段落间距增强 */
.post-detail .content p { margin: 0 0 1.2em; text-align: justify; hyphens: auto; }
.post-detail .content p + p { text-indent: 0; }

/* 标题装饰增强 */
.post-detail .content h2 { position: relative; counter-increment: h2-counter; }
.post-detail .content h2::before {
  content: counter(h2-counter); position: absolute; left: -36px; top: 2px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--grad);
  color: #fff; font-size: 0.7em; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.post-detail .content { counter-reset: h2-counter; }
.post-detail .content h3 { position: relative; }
.post-detail .content h3::before { content: '▸'; color: var(--primary); margin-right: 6px; font-size: 0.9em; }

/* 代码块语言标签 */
.post-detail .content pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 0; right: 0;
  background: rgba(255,255,255,.08); color: #cdd6f4; padding: 2px 12px;
  border-radius: 0 10px 0 8px; font-size: 0.72rem; font-family: monospace; text-transform: uppercase; letter-spacing: 1px;
}

/* 行内代码增强 */
.post-detail .content code { background: linear-gradient(180deg, rgba(255,98,62,.08), rgba(255,65,108,.08)); border: 1px solid rgba(255,98,62,.15); }

/* 引用块多样化 */
.post-detail .content blockquote { border-left-width: 4px; }
.post-detail .content blockquote blockquote { border-left-color: var(--primary); margin-left: 0; }
.post-detail .content blockquote p:last-child { margin-bottom: 0; }

/* 表格增强 */
.post-detail .content table { border-radius: 12px; overflow: hidden; }
.post-detail .content th { text-transform: uppercase; font-size: 0.82rem; letter-spacing: 1px; }
.post-detail .content td { transition: background 0.2s, transform 0.2s; }
.post-detail .content tbody > tr:hover td { background: rgba(255,98,62,.04); }

/* 列表增强 */
.post-detail .content ul li::marker { content: '▸ '; color: var(--primary); font-weight: 700; }
.post-detail .content ol { counter-reset: ol-counter; }
.post-detail .content ol li { counter-increment: ol-counter; }
.post-detail .content ol li::marker { content: counter(ol-counter) '. '; color: var(--primary); font-weight: 700; }

/* 卡片3D倾斜增强 */
.post-card { transform-style: preserve-3d; perspective: 1000px; }
.post-card:hover { transform: translateY(-8px) rotateX(2deg); }
.post-card .card-body { transform: translateZ(20px); }

/* 封面图渐变遮罩 */
.cover-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,98,62,.0) 0%, rgba(255,98,62,.0) 100%); transition: background 0.4s; z-index: 1; }
.post-card:hover .cover-wrap::before { background: linear-gradient(135deg, rgba(255,98,62,.1) 0%, rgba(57,197,187,.1) 100%); }

/* 卡片标签渐变 */
.post-card .card-tags .tag { background: linear-gradient(135deg, var(--favoriteBg), var(--bg3)); border: 1px solid var(--border); }
.post-card .card-tags .tag:hover { background: var(--grad-cool); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* 按钮系统 */
.btn-gradient { background: var(--grad); color: #fff; border: none; padding: 10px 24px; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.3s var(--ease-spring); box-shadow: var(--shadow-sm); }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); opacity: 0.95; }
.btn-gradient:active { transform: translateY(0); }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 8px 22px; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; transition: all 0.3s; }
.btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--greyFont); border: none; padding: 8px 16px; cursor: pointer; font-size: 0.88rem; transition: all 0.2s; }
.btn-ghost:hover { color: var(--primary); background: var(--favoriteBg); }

/* 波纹效果 */
.ripple { position: relative; overflow: hidden; }
.ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,.4); transform: translate(-50%,-50%); transition: width 0.6s, height 0.6s; }
.ripple:active::after { width: 300px; height: 300px; }

/* 分页器美化 */
.pagination a, .pagination span { transition: all 0.3s var(--ease-spring); }
.pagination a:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pagination .current { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* 侧边栏卡片入场动画 */
.sidebar-card { animation: fadeInUp 0.5s var(--ease-out) both; }
.sidebar-card:nth-child(1) { animation-delay: 0.1s; }
.sidebar-card:nth-child(2) { animation-delay: 0.2s; }
.sidebar-card:nth-child(3) { animation-delay: 0.3s; }
.sidebar-card:nth-child(4) { animation-delay: 0.4s; }
.sidebar-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.sidebar-card { transition: all 0.3s var(--ease-smooth); }

/* 导航活跃指示器 */
header nav a { position: relative; }
header nav a::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: var(--grad); border-radius: 2px; transform: translateX(-50%); transition: width 0.3s var(--ease-spring); }
header nav a:hover::after { width: 70%; }

/* Logo增强 */
.logo { position: relative; }
.logo::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); }
.logo:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hero打字机光标增强 */
.hero-typewriter::after { content: '▎'; animation: blink 1s step-end infinite; color: var(--primary); font-weight: 300; margin-left: 2px; }

/* Footer增强 */
footer .footer-links a { position: relative; }
footer .footer-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s; }
footer .footer-links a:hover::after { width: 100%; }

/* 404页面动画 */
.not-found h1 { animation: shake 0.5s ease-in-out infinite alternate; }
@keyframes shake { from { transform: translateX(-5px) rotate(-2deg); } to { transform: translateX(5px) rotate(2deg); } }
.not-found p { animation: fadeIn 1s ease-out 0.5s both; }

/* 评论卡片增强 */
.comment { transition: all 0.3s var(--ease-smooth); border-left: 3px solid transparent; }
.comment:hover { border-left-color: var(--primary); transform: translateX(4px); }
.comment .avatar { transition: transform 0.3s var(--ease-spring); }
.comment:hover .avatar { transform: scale(1.1) rotate(5deg); }

/* 表单增强 */
.comment-form { border: 1px solid var(--border); transition: border-color 0.3s; }
.comment-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,98,62,.08); }
.comment-form input, .comment-form textarea { transition: all 0.2s; }
.comment-form input:focus, .comment-form textarea:focus { box-shadow: 0 0 0 3px rgba(255,98,62,.08); }

/* 友链卡片增强 */
.link-card { position: relative; overflow: hidden; }
.link-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transition: left 0.6s; }
.link-card:hover::before { left: 100%; }
.link-avatar { transition: transform 0.4s var(--ease-spring); }
.link-card:hover .link-avatar { transform: rotate(360deg) scale(1.1); }

/* 微语卡片增强 */
.twitter-item { border-left: 3px solid transparent; }
.twitter-item:hover { border-left-color: var(--lightGreen); }

/* 标签云增强 */
.tag-cloud a { font-size: calc(0.75rem + var(--tag-weight, 0) * 0.05rem); }
.tag-cloud a:nth-child(3n) { background: rgba(255,98,62,.1); color: var(--primary); }
.tag-cloud a:nth-child(3n+1) { background: rgba(57,197,187,.1); color: var(--lightGreen); }
.tag-cloud a:nth-child(3n+2) { background: rgba(3,169,244,.1); color: var(--blue); }
.tag-cloud a:nth-child(3n):hover { background: var(--primary); color: #fff; }
.tag-cloud a:nth-child(3n+1):hover { background: var(--lightGreen); color: #fff; }
.tag-cloud a:nth-child(3n+2):hover { background: var(--blue); color: #fff; }

/* 热门文章排名增强 */
.hot-post-item { transition: all 0.25s var(--ease-smooth); }
.hot-post-item:hover { background: var(--favoriteBg); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 -10px; }

/* TOC增强 */
.toc-sidebar { transition: opacity 0.3s; }
.toc-sidebar li a { position: relative; }
.toc-sidebar li a::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--primary); transform: translateY(-50%); transition: width 0.2s; }
.toc-sidebar li a.active::before { width: 3px; height: 100%; top: 0; transform: none; border-radius: 2px; }

/* Lightbox增强 */
.lightbox-overlay img { animation: zoomIn 0.4s var(--ease-spring); box-shadow: 0 0 40px rgba(0,0,0,.5); }
.lightbox-close { transition: transform 0.3s; }
.lightbox-close:hover { transform: rotate(90deg); }

/* 骨架屏增强 */
.skeleton-card { border-radius: var(--radius); overflow: hidden; }
.skeleton-cover { border-radius: var(--radius) var(--radius) 0 0; }

/* 分享按钮增强 */
.share-btn { position: relative; overflow: hidden; }
.share-btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; border-radius: 50%; transition: opacity 0.3s; }
.share-btn:hover::after { opacity: 0.1; }

/* 返回顶部增强 */
.back-to-top { position: relative; }
.back-to-top::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; transition: opacity 0.3s; }
.back-to-top:hover::before { opacity: 0.3; animation: pulse-ring 1.5s infinite; }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.3); opacity: 0; } }

/* Toast增强 */
.toast { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,.9); }
:root.dark .toast { background: rgba(22,33,62,.9); }
.toast i { font-size: 1.1rem; }
.toast.success i { color: var(--green); }
.toast.error i { color: var(--red); }
.toast.info i { color: var(--blue); }

/* 阅读进度条增强 */
.reading-progress { background: var(--grad-rainbow); background-size: 200% 100%; animation: gradient-shift 3s linear infinite; }
@keyframes gradient-shift { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

/* 搜索框增强 */
.search-box input { transition: all 0.3s; }
.search-box input:focus { box-shadow: 0 0 0 3px rgba(255,98,62,.08); transform: translateY(-1px); }
.search-box button { transition: all 0.3s var(--ease-spring); }
.search-box button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* 归档增强 */
.archive-month { transition: all 0.3s; }
.archive-month:hover { transform: translateX(4px); }
.archive-item { transition: all 0.2s; }
.archive-item:hover { padding-left: 8px; }

/* 响应式微调 */
@media (max-width: 1200px) { .layout-2col { grid-template-columns: 1fr 280px; } }
@media (max-width: 400px) {
  .post-detail { padding: 12px; }
  .hero-title { font-size: 1.4rem; }
  .post-card .card-body { padding: 14px; }
  .cover-wrap { height: 160px; }
  .cover { height: 160px; }
}

/* 暗色模式精调 */
:root.dark .post-card .card-tags .tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
:root.dark .tag-cloud a:nth-child(3n) { background: rgba(255,98,62,.15); }
:root.dark .tag-cloud a:nth-child(3n+1) { background: rgba(57,197,187,.15); }
:root.dark .tag-cloud a:nth-child(3n+2) { background: rgba(3,169,244,.15); }
:root.dark .search-box input { background: var(--card-bg); }
:root.dark .comment-form { background: var(--bg2); }
:root.dark .archive-list { background: var(--card-bg); }
:root.dark .post-detail .content code { background: rgba(255,98,62,.12); border-color: rgba(255,98,62,.2); }

/* 选区增强 */
::selection { background: var(--primary); color: #fff; text-shadow: none; }

/* 滚动条暗色 */
:root.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--maxLightRed)); }
:root.dark ::-webkit-scrollbar-thumb:hover { background: var(--primary-l); }

/* 图片加载占位 */
img[loading="lazy"] { background: var(--bg2); }
:root.dark img[loading="lazy"] { background: var(--bg2); }

/* 文章内容图片圆角和阴影 */
.post-detail .content img { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
:root.dark .post-detail .content img { box-shadow: 0 4px 20px rgba(0,0,0,.3); }

/* 链接下划线动画 */
.post-detail .content a { position: relative; border-bottom: none; }
.post-detail .content a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-out); }
.post-detail .content a:hover::after { transform: scaleX(1); transform-origin: left; }

/* 段落首行缩进（中文文章） */
.post-detail .content p { text-indent: 0; }
.post-detail .content > p:nth-child(n+2) { text-indent: 2em; }

/* 标题hover效果 */
.post-card h2 a { background-image: linear-gradient(var(--primary), var(--primary)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s var(--ease-out); }
.post-card h2 a:hover { background-size: 100% 2px; color: var(--primary); }

/* 导航下拉菜单动画 */
.nav-dropdown-menu { animation: slide-top 0.25s var(--ease-out) both; transform-origin: top; }

/* 卡片入场错开动画 */
.post-card:nth-child(1) { animation-delay: 0.05s; }
.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.15s; }
.post-card:nth-child(4) { animation-delay: 0.2s; }
.post-card:nth-child(5) { animation-delay: 0.25s; }
.post-card:nth-child(6) { animation-delay: 0.3s; }
.post-card:nth-child(7) { animation-delay: 0.35s; }
.post-card:nth-child(8) { animation-delay: 0.4s; }
.post-card:nth-child(9) { animation-delay: 0.45s; }

/* 微语时间线 */
.twitter-item { position: relative; }
.twitter-item::before { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--grad-cool); border-radius: 3px; opacity: 0; transition: opacity 0.3s; }
.twitter-item:hover::before { opacity: 1; }

/* 照片墙增强 */
.photo-card { position: relative; }
.photo-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6)); opacity: 0; transition: opacity 0.3s; border-radius: var(--radius); }
.photo-card:hover::after { opacity: 1; }

/* 表白墙卡片 */
.love-card { background: var(--grad-warm); color: #fff; padding: 24px; border-radius: var(--radius); margin-bottom: 16px; animation: fadeInUp 0.5s var(--ease-out) both; transition: transform 0.3s; }
.love-card:hover { transform: scale(1.02) rotate(1deg); }
.love-card:nth-child(2n) { background: var(--grad-cool); }
.love-card:nth-child(3n) { background: var(--grad-purple); }

/* 一言卡片 */
.proverb-card { text-align: center; padding: 48px 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: fadeInUp 0.6s var(--ease-out) both; }
.proverb-card .text { font-size: 1.3rem; line-height: 1.8; color: var(--articleFontColor); font-family: 'STKaiti', 'KaiTi', serif; }
.proverb-card .author { margin-top: 20px; color: var(--text3); font-size: 0.9rem; }

/* 随机文章按钮 */
.random-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--grad-cool); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.3s var(--ease-spring); box-shadow: var(--shadow-md); }
.random-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg); }
.random-btn:active { transform: translateY(0); }

/* 键盘快捷键提示 */
.kbd { display: inline-block; padding: 2px 8px; background: var(--card-bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; font-size: 0.78rem; font-family: monospace; color: var(--greyFont); box-shadow: 0 1px 0 var(--border); }
.kbd-hint { display: inline-flex; gap: 4px; align-items: center; font-size: 0.78rem; color: var(--text3); }

/* 加载更多按钮 */
.load-more-btn { display: block; margin: 32px auto; padding: 12px 32px; background: var(--card-bg); border: 2px dashed var(--border); border-radius: var(--radius); color: var(--greyFont); cursor: pointer; transition: all 0.3s; font-size: 0.9rem; }
.load-more-btn:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }

/* 文章信息栏 */
.post-info-bar { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: var(--favoriteBg); border-radius: var(--radius-sm); margin: 20px 0; font-size: 0.85rem; color: var(--text2); }
.post-info-bar i { color: var(--primary); margin-right: 4px; }

/* 移动端增强 */
@media (max-width: 600px) {
  .post-detail .content { font-size: 16px; }
  .post-detail .content h2 { font-size: 20px; }
  .post-detail .content h3 { font-size: 18px; }
  .post-detail .content pre { padding: 14px; font-size: 0.82rem; }
  .comment { padding: 12px; }
  .share-buttons { justify-content: center; }
  .post-nav { gap: 10px; }
  .post-nav a { padding: 12px; font-size: 0.82rem; }
  .related-grid { grid-template-columns: 1fr; }
  .tag-cloud a { font-size: 0.78rem; padding: 3px 10px; }
  .hero { padding: 40px 16px 30px; }
  .hero-scroll { margin-top: 24px; }
  .footer-links { gap: 16px !important; }
  .back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
  .toast-container { top: 70px; right: 10px; left: 10px; }
  .toast { max-width: none; }
}

/* 平板端增强 */
@media (min-width: 601px) and (max-width: 900px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .link-grid { grid-template-columns: 1fr; }
}

/* 大屏增强 */
@media (min-width: 1400px) {
  :root { --max-w: 1320px; }
  .post-grid { gap: 28px; }
}

/* 超大屏 */
@media (min-width: 1800px) {
  :root { --max-w: 1440px; }
}

/* 焦点环 */
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.post-card:focus-visible, .link-card:focus-visible, .related-card:focus-visible { outline-offset: 4px; }

/* 文字截断工具类 */
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 渐变文字工具类 */
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 毛玻璃工具类 */
.glass { backdrop-filter: var(--glass-blur) saturate(180%); -webkit-backdrop-filter: var(--glass-blur) saturate(180%); background: rgba(255,255,255,.7); }
:root.dark .glass { background: rgba(26,26,46,.7); }

/* 阴影工具类 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ===== Batch 401-1000: More Enhancements ===== */

/* 文章卡片封面渐变叠加 */
.post-card .cover-wrap { position: relative; }
.post-card .cover-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0,0,0,.3) 100%); opacity: 0; transition: opacity 0.4s; z-index: 1; }
.post-card:hover .cover-wrap::after { opacity: 1; }

/* 卡片标题渐变下划线 */
.post-card h2 a { text-decoration: none; }

/* 搜索框图标 */
.search-box { position: relative; }
.search-box::before { content: '\f002'; font-family: FontAwesome; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 0.9rem; pointer-events: none; }
.search-box input { padding-left: 40px; }

/* 标签彩色变体 */
.tag.tag-blue { background: rgba(3,169,244,.1); color: var(--blue); }
.tag.tag-green { background: rgba(57,197,187,.1); color: var(--lightGreen); }
.tag.tag-orange { background: rgba(255,98,62,.1); color: var(--primary); }
.tag.tag-purple { background: rgba(161,140,209,.1); color: #a18cd1; }
.tag.tag-pink { background: rgba(255,102,153,.1); color: var(--pink); }

/* 评论区增强 */
.comments h3 { display: flex; align-items: center; gap: 8px; }
.comments h3 i { color: var(--primary); }
.comment { animation: fadeInUp 0.4s var(--ease-out) both; }
.comment:nth-child(2) { animation-delay: 0.1s; }
.comment:nth-child(3) { animation-delay: 0.2s; }
.comment:nth-child(4) { animation-delay: 0.3s; }
.comment:nth-child(5) { animation-delay: 0.4s; }

/* 评论表单增强 */
.comment-form button { display: inline-flex; align-items: center; gap: 6px; }
.comment-form button i { font-size: 0.85rem; }

/* 分页器数字增强 */
.pagination .current { font-weight: 700; }

/* 文章导航增强 */
.post-nav a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.post-nav .nav-label { display: flex; align-items: center; gap: 4px; }
.post-nav .next .nav-label { justify-content: flex-end; }

/* 相关文章增强 */
.related h3 { display: flex; align-items: center; gap: 8px; }
.related h3 i { color: var(--primary); }
.related-card { text-decoration: none; }

/* TOC滚动条 */
.toc-sidebar ul::-webkit-scrollbar { width: 4px; }
.toc-sidebar ul::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.toc-sidebar ul::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* 代码, 404页面增强 */
.not-found { animation: fadeIn 0.5s ease-out; }
.not-found a { display: inline-block; margin-top: 20px; padding: 10px 28px; background: var(--grad); color: #fff; border-radius: var(--radius); text-decoration: none; transition: all 0.3s var(--ease-spring); }
.not-found a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Footer社交链接 */
.footer-social { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--border); color: var(--greyFont); transition: all 0.3s var(--ease-spring); }
.footer-social a:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Hero装饰元素 */
.hero-decoration { position: absolute; border-radius: 50%; opacity: 0.1; animation: float 6s ease-in-out infinite; }
.hero-decoration:nth-child(1) { width: 100px; height: 100px; background: var(--primary); top: 20%; left: 10%; animation-delay: 0s; }
.hero-decoration:nth-child(2) { width: 60px; height: 60px; background: var(--lightGreen); top: 60%; right: 15%; animation-delay: 2s; }
.hero-decoration:nth-child(3) { width: 80px; height: 80px; background: var(--blue); bottom: 20%; left: 20%; animation-delay: 4s; }

/* 文章卡片阅读更多 */
.post-card .read-more { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 0.85rem; margin-top: 8px; transition: gap 0.3s; }
.post-card:hover .read-more { gap: 8px; }

/* 侧边栏标签云权重 */
.tag-cloud a { font-weight: var(--tag-weight, 400); }

/* 热门文章火焰图标 */
.hot-post-item:nth-child(1) .hot-rank::before { content: ''; }
.hot-post-item:nth-child(1) .hot-rank { text-shadow: 0 0 10px rgba(255,65,108,.5); }

/* 微语时间显示 */
.twitter-item .meta span { display: inline-flex; align-items: center; gap: 4px; }
.twitter-item .meta i { color: var(--text3); }

/* 友链卡片描述 */
.link-info p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 照片墙分类标签 */
.photo-cat { font-weight: 500; }

/* 表白墙时间 */
.love-card .time { font-size: 0.8rem; opacity: 0.8; margin-top: 12px; }

/* 一言卡片刷新按钮 */
.proverb-refresh { margin-top: 24px; padding: 8px 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--greyFont); cursor: pointer; transition: all 0.3s; }
.proverb-refresh:hover { border-color: var(--primary); color: var(--primary); transform: rotate(180deg); }

/* 用户中心卡片 */
.user-center-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--card-shadow); }
.user-center-card h3 { font-size: 1.1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.user-center-card h3 i { color: var(--primary); }

/* 登录注册表单 */
.auth-form { max-width: 400px; margin: 40px auto; padding: 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-form h1 { text-align: center; margin-bottom: 24px; font-size: 1.5rem; }
.auth-form .form-group { margin-bottom: 16px; }
.auth-form label { display: block; margin-bottom: 6px; font-size: 0.88rem; color: var(--text2); }
.auth-form input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fontColor); font-size: 0.9rem; transition: all 0.2s; }
.auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,98,62,.08); }
.auth-form button { width: 100%; padding: 12px; background: var(--grad); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s var(--ease-spring); }
.auth-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-form .alt-link { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--text3); }
.auth-form .alt-link a { color: var(--primary); }

/* 工具类：间距 */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 32px; }
.p-2 { padding: 8px; } .p-3 { padding: 16px; } .p-4 { padding: 24px; } .p-5 { padding: 32px; }

/* 工具类：弹性布局 */
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; }

/* 工具类：文字 */
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.text-sm { font-size: 0.82rem; } .text-md { font-size: 0.9rem; } .text-lg { font-size: 1.1rem; } .text-xl { font-size: 1.3rem; }
.text-primary { color: var(--primary); } .text-muted { color: var(--text3); } .text-success { color: var(--green); }

/* 工具类：圆角 */
.rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: 9999px; }

/* 工具类：隐藏 */
.hidden { display: none !important; }
@media (max-width: 600px) { .hidden-mobile { display: none !important; } }
@media (min-width: 601px) { .hidden-desktop { display: none !important; } }

/* 动画延迟工具类 */
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; }

/* 暗色模式补充 */
:root.dark .auth-form { background: var(--card-bg); }
:root.dark .auth-form input { background: var(--bg2); }
:root.dark .archive-year-stat { background: var(--card-bg); }
:root.dark .footer-social a { background: var(--card-bg); }
:root.dark .proverb-refresh { background: var(--card-bg); }

/* 移动端补充 */
@media (max-width: 600px) {
  .archive-stats { flex-direction: column; gap: 8px; }
  .archive-year-stat { justify-content: space-between; }
  .archive-timeline::before { left: 10px; }
  .archive-month { margin-left: 30px; }
  .archive-month::before { left: -26px; width: 8px; height: 8px; }
  .auth-form { margin: 20px 16px; padding: 24px; }
  .footer-social { gap: 12px; }
  .footer-social a { width: 36px; height: 36px; }
}

/* 打印补充 */
@media print {
  .archive-stats, .archive-timeline::before, .archive-month::before { display: none; }
  .archive-month { margin-left: 0; }
}

/* ===== Batch 1-500: Advanced Visual Polish ===== */

/* 新增动画关键帧 */
@keyframes shimmer-text { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 5px rgba(255,98,62,.3); } 50% { box-shadow: 0 0 20px rgba(255,98,62,.6), 0 0 40px rgba(255,98,62,.3); } }
@keyframes border-glow { 0%, 100% { border-color: var(--primary); } 50% { border-color: var(--maxLightRed); } }
@keyframes text-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes slide-fade-in { 0% { opacity: 0; transform: translateX(-20px) scale(0.95); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes flip-in { 0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0); } }
@keyframes bounce-in { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes elastic-in { 0% { transform: scale(0); } 55% { transform: scale(1.1); } 75% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } 30% { transform: scale(1.1); } 40% { transform: scale(1); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(20px) rotate(0deg); } to { transform: rotate(360deg) translateX(20px) rotate(-360deg); } }
@keyframes typewriter-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes gradient-rotate { 0% { --grad-angle: 0deg; } 100% { --grad-angle: 360deg; } }
@keyframes float-rotate { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } }
@keyframes shimmer-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes color-cycle { 0% { color: var(--primary); } 33% { color: var(--lightGreen); } 66% { color: var(--blue); } 100% { color: var(--primary); } }
@keyframes border-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes depth-in { 0% { opacity: 0; transform: translateZ(-100px); } 100% { opacity: 1; transform: translateZ(0); } }
@keyframes reveal-up { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes reveal-left { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes reveal-right { 0% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes scale-reveal { 0% { clip-path: inset(50% 50% 50% 50%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes curtain-open { 0% { clip-path: inset(0 50% 0 50%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes spotlight { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ripple-expand { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
@keyframes count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-bounce { 0% { opacity: 0; transform: translateX(-100%) scale(0.8); } 60% { opacity: 1; transform: translateX(10px) scale(1.05); } 100% { transform: translateX(0) scale(1); } }
@keyframes fade-blur { 0% { opacity: 0; filter: blur(10px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes rotate-scale { 0% { transform: rotate(0) scale(0); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes gradient-text-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes loading-bar { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
@keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
@keyframes snow-fall { 0% { transform: translateY(-10px) translateX(0); opacity: 1; } 100% { transform: translateY(100vh) translateX(20px); opacity: 0; } }
@keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes bar-load { 0% { height: 4px; } 50% { height: 20px; } 100% { height: 4px; } }
@keyframes wave { 0% { d: path("M0,20 Q25,20 50,20 T100,20"); } 50% { d: path("M0,10 Q25,30 50,10 T100,10"); } 100% { d: path("M0,20 Q25,20 50,20 T100,20"); } }

/* 闪亮文字效果 */
.shimmer-text { background: linear-gradient(90deg, var(--text) 25%, var(--primary) 50%, var(--text) 75%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer-text 3s linear infinite; }

/* 发光效果 */
.glow { animation: glow-pulse 2s ease-in-out infinite; }
.glow-primary { box-shadow: 0 0 20px rgba(255,98,62,.3); }
.glow-green { box-shadow: 0 0 20px rgba(57,197,187,.3); }
.glow-blue { box-shadow: 0 0 20px rgba(3,169,244,.3); }

/* 玻璃拟态增强 */
.glass-card { background: rgba(255,255,255,.65); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 32px rgba(0,0,0,.06); }
:root.dark .glass-card { background: rgba(26,26,46,.65); border-color: rgba(255,255,255,.08); }
.glass-strong { background: rgba(255,255,255,.85); backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); }
:root.dark .glass-strong { background: rgba(26,26,46,.85); }

/* 渐变边框 */
.gradient-border { position: relative; background: var(--card-bg); border-radius: var(--radius); }
.gradient-border::before { content: ''; position: absolute; inset: -2px; background: var(--grad-rainbow); border-radius: calc(var(--radius) + 2px); z-index: -1; opacity: 0; transition: opacity 0.3s; }
.gradient-border:hover::before { opacity: 1; }

/* 流光边框 */
.flow-border { position: relative; }
.flow-border::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, var(--primary), var(--lightGreen), var(--blue), var(--primary)); background-size: 300% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: border-flow 3s linear infinite; opacity: 0; transition: opacity 0.3s; }
.flow-border:hover::after { opacity: 1; }

/* 文字渐变流动 */
.gradient-flow { background: linear-gradient(90deg, var(--primary), var(--maxLightRed), var(--lightGreen), var(--blue), var(--primary)); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-text-flow 4s linear infinite; }

/* 3D卡片效果 */
.card-3d { transform-style: preserve-3d; perspective: 1000px; transition: transform 0.4s var(--ease-out); }
.card-3d:hover { transform: rotateY(5deg) rotateX(5deg) translateZ(10px); }

/* 悬浮效果 */
.hover-float { transition: transform 0.3s var(--ease-spring); }
.hover-float:hover { transform: translateY(-8px); }
.hover-scale { transition: transform 0.3s var(--ease-spring); }
.hover-scale:hover { transform: scale(1.05); }
.hover-rotate { transition: transform 0.4s var(--ease-spring); }
.hover-rotate:hover { transform: rotate(5deg) scale(1.05); }
.hover-glow { transition: box-shadow 0.3s; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(255,98,62,.3); }

/* 文字揭示动画 */
.reveal-up { animation: reveal-up 0.8s var(--ease-out) both; }
.reveal-left { animation: reveal-left 0.8s var(--ease-out) both; }
.reveal-right { animation: reveal-right 0.8s var(--ease-out) both; }
.scale-reveal { animation: scale-reveal 0.6s var(--ease-out) both; }
.curtain-open { animation: curtain-open 0.7s var(--ease-out) both; }
.fade-blur-in { animation: fade-blur 0.6s var(--ease-out) both; }
.flip-in { animation: flip-in 0.6s var(--ease-out) both; }
.bounce-in { animation: bounce-in 0.6s var(--ease-spring) both; }
.elastic-in { animation: elastic-in 0.5s var(--ease-spring) both; }

/* 聚光灯效果 */
.spotlight-text { background: linear-gradient(90deg, var(--text3) 0%, var(--text3) 40%, var(--primary) 50%, var(--text3) 60%, var(--text3) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: spotlight 3s linear infinite; }

/* 按钮增强 */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition: left 0.5s; }
.btn-shine:hover::before { left: 100%; }

.btn-3d { box-shadow: 0 4px 0 var(--primary-d); transition: all 0.2s; }
.btn-3d:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--primary-d); }
.btn-3d:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-d); }

.btn-glow { box-shadow: 0 0 0 rgba(255,98,62,0); transition: box-shadow 0.3s; }
.btn-glow:hover { box-shadow: 0 0 20px rgba(255,98,62,.5); }

/* 加载动画 */
.dot-loader { display: inline-flex; gap: 4px; }
.dot-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: dot-bounce 1.4s ease-in-out infinite both; }
.dot-loader span:nth-child(1) { animation-delay: -0.32s; }
.dot-loader span:nth-child(2) { animation-delay: -0.16s; }

.bar-loader { display: inline-flex; gap: 3px; align-items: center; }
.bar-loader span { width: 4px; background: var(--primary); border-radius: 2px; animation: bar-load 1s ease-in-out infinite; }
.bar-loader span:nth-child(1) { animation-delay: 0s; }
.bar-loader span:nth-child(2) { animation-delay: 0.1s; }
.bar-loader span:nth-child(3) { animation-delay: 0.2s; }
.bar-loader span:nth-child(4) { animation-delay: 0.3s; }
.bar-loader span:nth-child(5) { animation-delay: 0.4s; }

/* 骨架屏改进 */
.skeleton-shimmer { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 37%, var(--bg2) 63%); background-size: 400% 100%; animation: shimmer-skeleton 1.4s ease infinite; }

/* 卡片悬浮光泽 */
.post-card .shine-effect { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transform: skewX(-20deg); transition: left 0.8s; pointer-events: none; z-index: 3; }
.post-card:hover .shine-effect { left: 150%; }

/* 标题装饰线 */
.title-decor { position: relative; display: inline-block; }
.title-decor::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 40px; height: 4px; background: var(--grad); border-radius: 2px; }
.title-decor.center::after { left: 50%; transform: translateX(-50%); }

/* 分隔线渐变 */
.divider-gradient { height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); margin: 32px 0; border: none; }
.divider-dots { border: none; border-top: 2px dotted var(--border); margin: 32px 0; }
.divider-wave { height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,0 50,10 T100,10' fill='none' stroke='%23ff623e' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E") repeat-x; margin: 24px 0; }

/* 徽章样式 */
.badge-gradient { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--grad); color: #fff; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-glass { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); color: var(--fontColor); border-radius: 9999px; font-size: 0.75rem; border: 1px solid rgba(255,255,255,.2); }

/* 标签胶囊增强 */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; background: var(--favoriteBg); border: 1px solid var(--border); border-radius: 9999px; font-size: 0.8rem; color: var(--text2); transition: all 0.3s; cursor: pointer; }
.chip:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.chip.active { background: var(--grad); color: #fff; border-color: transparent; }
.chip i { font-size: 0.85rem; }

/* 进度条增强 */
.progress-bar { width: 100%; height: 8px; background: var(--bg3); border-radius: 9999px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--grad); border-radius: 9999px; transition: width 0.5s var(--ease-out); position: relative; }
.progress-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); animation: shimmer-bg 2s linear infinite; }

/* 圆形进度 */
.progress-ring { transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 4; }
.progress-ring .bg { stroke: var(--bg3); }
.progress-ring .fill { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset 0.5s var(--ease-out); }

/* 折叠面板 */
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; transition: box-shadow 0.3s; }
.accordion-item:hover { box-shadow: var(--shadow-sm); }
.accordion-header { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; transition: background 0.2s; }
.accordion-header:hover { background: var(--favoriteBg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.accordion-item.open .accordion-content { max-height: 500px; }
.accordion-item.open .accordion-header i { transform: rotate(180deg); }
.accordion-header i { transition: transform 0.3s; }

/* 标签页 */
.tab-list { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-item { padding: 10px 20px; cursor: pointer; color: var(--text2); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.3s; }
.tab-item:hover { color: var(--primary); }
.tab-item.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-content { animation: fade-blur 0.4s var(--ease-out); }

/* 工具提示 */
.tooltip { position: relative; }
.tooltip::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); background: var(--card-bg); color: var(--fontColor); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.78rem; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 1000; }
.tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(4px); border: 5px solid transparent; border-top-color: var(--card-bg); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.tooltip:hover::before { opacity: 1; transform: translateX(-50%) translateY(-1px); }

/* 滚动指示器 */
.scroll-indicator { position: fixed; top: 0; left: 0; height: 100vh; width: 4px; background: var(--bg3); z-index: 999; opacity: 0; transition: opacity 0.3s; }
.scroll-indicator.show { opacity: 1; }
.scroll-indicator-fill { width: 100%; background: var(--grad); border-radius: 2px; }

/* 通知计数器 */
.notification-dot { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--maxLightRed); color: #fff; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; font-weight: 700; animation: pulse-soft 2s infinite; }

/* 涟漪效果增强 */
.ripple-container { position: relative; overflow: hidden; }
.ripple-wave { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: ripple-expand 0.6s linear; pointer-events: none; }

/* 暗色模式增强 */
:root.dark .glass-card { box-shadow: 0 8px 32px rgba(0,0,0,.2); }
:root.dark .gradient-border::before { opacity: 0.3; }
:root.dark .divider-wave { opacity: 0.5; }
:root.dark .tooltip::after { background: var(--card-bg); box-shadow: var(--shadow-lg); }
:root.dark .accordion-item { border-color: rgba(255,255,255,.08); }
:root.dark .tab-list { border-bottom-color: rgba(255,255,255,.08); }
:root.dark .progress-bar { background: var(--bg3); }
:root.dark .chip { background: rgba(255,255,255,.05); }

/* 响应式增强 */
@media (max-width: 600px) {
  .tab-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-item { white-space: nowrap; }
  .accordion-header { padding: 12px 16px; }
  .glass-card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .glass-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card-bg); }
  .glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card-bg); }
}

/* 深色模式自动检测 */
@media (prefers-color-scheme: dark) {
  :root:not(.dark):not(.light) { color-scheme: dark; }
}

/* 字体渲染优化 */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; }
.post-detail .content { text-rendering: optimizeLegibility; }
.hero-title, .post-detail h1 { text-rendering: optimizeLegibility; }

/* CSS containment 优化 */
.post-card { contain: layout style paint; }
.sidebar-card { contain: layout style; }
.comment { contain: layout style; }
.twitter-item { contain: layout style; }
.link-card { contain: layout style; }

/* will-change 优化 */
.post-card:hover, .back-to-top:hover, .like-btn:hover { will-change: transform; }
.lightbox-overlay.show { will-change: opacity; }

/* 滚动行为优化 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 文字选择增强 */
::selection { background: var(--primary); color: #fff; text-shadow: 0 0 2px rgba(255,255,255,.5); }
.post-detail .content ::selection { background: var(--lightGreen); color: #fff; }

/* 焦点增强 */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.post-card:focus-visible { outline-offset: 4px; box-shadow: 0 0 0 4px rgba(255,98,62,.2); }

/* 图片渲染优化 */
img { image-rendering: -webkit-optimize-contrast; }
img[loading="lazy"] { image-rendering: auto; }

/* 背景图案 */
.bg-pattern-dots { background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; }
.bg-pattern-grid { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 20px 20px; }
.bg-pattern-diagonal { background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 10px); }

/* 毛玻璃遮罩 */
.blur-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.3); }
:root.dark .blur-overlay { background: rgba(0,0,0,.3); }

/* 渐变遮罩 */
.mask-fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.mask-fade-top { -webkit-mask-image: linear-gradient(to top, #000 70%, transparent); mask-image: linear-gradient(to top, #000 70%, transparent); }
.mask-fade-edges { -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }

/* 混合模式 */
.blend-overlay { mix-blend-mode: overlay; }
.blend-screen { mix-blend-mode: screen; }
.blend-multiply { mix-blend-mode: multiply; }

/* 形状 */
.shape-circle { border-radius: 50%; }
.shape-pill { border-radius: 9999px; }
.shape-rounded { border-radius: var(--radius); }

/* 宽高比 */
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-portrait { aspect-ratio: 3/4; }
.aspect-wide { aspect-ratio: 21/9; }

/* 位置工具类 */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* 层叠 */
.z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; }
.z-50 { z-index: 50; } .z-100 { z-index: 100; } .z-auto { z-index: auto; }

/* 溢出 */
.overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; }

/* 用户选择 */
.select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; }

/* 指针 */
.pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; }

/* 可见性 */
.visible { visibility: visible; } .invisible { visibility: hidden; }

/* 透明度 */
.opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; }

/* 过渡 */
.transition-all { transition: all 0.3s var(--ease-smooth); }
.transition-color { transition: color 0.3s, background 0.3s, border-color 0.3s; }
.transition-transform { transition: transform 0.3s var(--ease-spring); }
.transition-opacity { transition: opacity 0.3s; }

/* 变换 */
.translate-y-0 { transform: translateY(0); } .translate-y-4 { transform: translateY(16px); } .translate-y-8 { transform: translateY(32px); }
.scale-90 { transform: scale(0.9); } .scale-100 { transform: scale(1); } .scale-110 { transform: scale(1.1); }
.rotate-0 { transform: rotate(0deg); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); }

/* 光标类型 */
.cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-text { cursor: text; } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; }

/* 触摸优化 */
.touch-manipulation { touch-action: manipulation; }
.touch-none { touch-action: none; }
.touch-pan-x { touch-action: pan-x; }
.touch-pan-y { touch-action: pan-y; }

/* 安全区域 */
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-left { padding-left: env(safe-area-inset-left); }
.safe-right { padding-right: env(safe-area-inset-right); }

/* 滚动条隐藏 */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* 文字换行 */
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* 列表样式 */
.list-none { list-style: none; } .list-disc { list-style: disc; } .list-decimal { list-style: decimal; }

/* 表格布局 */
.table-auto { table-layout: auto; } .table-fixed { table-layout: fixed; }

/* 边框样式 */
.border-0 { border: 0; } .border-1 { border: 1px solid var(--border); } .border-2 { border: 2px solid var(--border); }
.border-primary { border-color: var(--primary); } .border-transparent { border-color: transparent; }

/* 宽度 */
.w-full { width: 100%; } .w-auto { width: auto; } .w-screen { width: 100vw; }
.max-w-full { max-width: 100%; } .max-w-none { max-width: none; }

/* 高度 */
.h-full { height: 100%; } .h-auto { height: auto; } .h-screen { height: 100vh; }
.min-h-0 { min-height: 0; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; }

/* 浮动 */
.float-left { float: left; } .float-right { float: right; } .float-none { float: none; }
.clearfix::after { content: ''; display: table; clear: both; }

/* 对象适配 */
.object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .object-fill { object-fit: fill; }
.object-center { object-position: center; } .object-top { object-position: top; }

/* 滤镜 */
.blur-sm { filter: blur(2px); } .blur-md { filter: blur(4px); } .blur-lg { filter: blur(8px); }
.brightness-75 { filter: brightness(0.75); } .brightness-125 { filter: brightness(1.25); }
.grayscale { filter: grayscale(1); } .sepia { filter: sepia(1); } .invert { filter: invert(1); }

/* 背景混合 */
.bg-blend-multiply { background-blend-mode: multiply; } .bg-blend-screen { background-blend-mode: screen; } .bg-blend-overlay { background-blend-mode: overlay; }

/* 装饰性元素 */
.deco-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.1; z-index: 0; pointer-events: none; }
.deco-blob.primary { background: var(--primary); }
.deco-blob.green { background: var(--lightGreen); }
.deco-blob.blue { background: var(--blue); }

/* 渐变文字大小 */
.gradient-text-sm { font-size: 0.875rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text-lg { font-size: 1.25rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text-xl { font-size: 1.5rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 阴影动画 */
.shadow-animate { animation: shadow-pulse 2s ease-in-out infinite; }
@keyframes shadow-pulse { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: var(--shadow-lg); } }

/* 边框动画 */
.border-animate { animation: border-glow 2s ease-in-out infinite; }

/* 悬浮卡片 */
.floating-card { animation: float 3s ease-in-out infinite; }
.floating-card:nth-child(2) { animation-delay: 0.5s; }
.floating-card:nth-child(3) { animation-delay: 1s; }

/* 旋转加载器 */
.spinner { width: 24px; height: 24px; border: 3px solid var(--bg3); border-top-color: var(--primary); border-radius: 50%; animation: ring-rotate 0.8s linear infinite; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }

/* 双重旋转器 */
.spinner-dual { position: relative; width: 40px; height: 40px; }
.spinner-dual::before, .spinner-dual::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.spinner-dual::before { border-top-color: var(--primary); animation: ring-rotate 1s linear infinite; }
.spinner-dual::after { border-bottom-color: var(--lightGreen); animation: ring-rotate 1.5s linear infinite reverse; }

/* 脉冲点 */
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: pulse-soft 1.5s infinite; }
.pulse-dot.red { background: var(--red); }
.pulse-dot.orange { background: var(--primary); }

/* 计数器动画 */
.counter { display: inline-block; animation: count-up 0.6s var(--ease-out) both; }

/* 滑入动画 */
.slide-in-left { animation: slide-in-bounce 0.6s var(--ease-spring) both; }

/* 深度进入 */
.depth-in { animation: depth-in 0.6s var(--ease-out) both; }

/* 摇摆动画 */
.wiggle-hover { transition: transform 0.3s; }
.wiggle-hover:hover { animation: wiggle 0.5s ease-in-out; }

/* 心跳动画 */
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }

/* 文字弹出 */
.text-pop-hover { transition: transform 0.2s; }
.text-pop-hover:hover { animation: text-pop 0.3s ease-in-out; }

/* 颜色循环 */
.color-cycle { animation: color-cycle 4s linear infinite; }

/* 浮动旋转 */
.float-rotate { animation: float-rotate 6s ease-in-out infinite; }

/* 轨道动画 */
.orbit { animation: orbit 4s linear infinite; }

/* 暗色模式装饰 */
:root.dark .deco-blob { opacity: 0.05; }
:root.dark .bg-pattern-dots { background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); }
:root.dark .bg-pattern-grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }
:root.dark .bg-pattern-diagonal { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 10px); }

/* 响应式工具类 */
@media (max-width: 600px) {
  .hidden-sm { display: none !important; }
  .block-sm { display: block !important; }
  .flex-sm { display: flex !important; }
  .grid-sm { display: grid !important; }
  .w-full-sm { width: 100% !important; }
  .text-center-sm { text-align: center !important; }
  .flex-col-sm { flex-direction: column !important; }
  .gap-0-sm { gap: 0 !important; }
  .gap-2-sm { gap: 8px !important; }
  .p-2-sm { padding: 8px !important; }
  .p-3-sm { padding: 16px !important; }
  .m-0-sm { margin: 0 !important; }
  .mt-0-sm { margin-top: 0 !important; }
  .mb-0-sm { margin-bottom: 0 !important; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .hidden-md { display: none !important; }
  .block-md { display: block !important; }
  .flex-md { display: flex !important; }
  .grid-md { display: grid !important; }
}

@media (min-width: 901px) {
  .hidden-lg { display: none !important; }
  .block-lg { display: block !important; }
  .flex-lg { display: flex !important; }
  .grid-lg { display: grid !important; }
}

/* 打印优化 */
@media print {
  .deco-blob, .floating-card, .spinner, .pulse-dot { display: none !important; }
  .glass-card, .glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .gradient-border::before, .flow-border::after { display: none; }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .shimmer-text, .glow, .gradient-flow, .spotlight-text, .floating-card, .float-rotate, .orbit, .heartbeat, .color-cycle, .shadow-animate, .border-animate, .pulse-dot, .spinner, .spinner-dual { animation: none !important; }
  .reveal-up, .reveal-left, .reveal-right, .scale-reveal, .curtain-open, .fade-blur-in, .flip-in, .bounce-in, .elastic-in, .slide-in-left, .depth-in { animation: fadeIn 0.01ms both !important; }
}

/* ===== Batch 1-500: Reading Mode & New Features ===== */

/* 阅读模式 */
body.reading-mode { background: #fafafa !important; }
body.reading-mode header, body.reading-mode footer, body.reading-mode .sidebar, body.reading-mode .share-buttons, body.reading-mode .post-actions-bar, body.reading-mode .related, body.reading-mode .post-nav, body.reading-mode .hero, body.reading-mode .hero-swiper { display: none !important; }
body.reading-mode .layout-2col { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto; }
body.reading-mode .post-detail { box-shadow: none !important; border: none !important; padding: 48px 24px !important; background: transparent !important; }
body.reading-mode .post-detail .content { font-size: 18px !important; line-height: 2 !important; max-width: 680px; margin: 0 auto; }
body.reading-mode .post-detail h1 { text-align: center; font-size: 2rem !important; }
body.reading-mode .post-detail .meta { justify-content: center; }
body.reading-mode .breadcrumb { display: none; }
body.reading-mode .back-to-top { display: none; }
:root.dark body.reading-mode, body.reading-mode:root.dark { background: #1a1a2e !important; }

/* 阅读模式按钮 */
.reading-mode-btn { display: flex; align-items: center; justify-content: center; }
.reading-mode-btn:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-4px) scale(1.1); }

/* 书签按钮 */
.bookmark-btn { display: flex; align-items: center; justify-content: center; }
.bookmark-btn:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-4px) scale(1.1); }

/* 代码行号 */
.code-gutter { font-family: 'Fira Code', 'Consolas', monospace; }

/* 视口进入动画 */
.in-viewport { animation: fade-blur 0.5s var(--ease-out) both; }

/* 滚动方向 */
body.scrolling-down header { transform: translateY(-100%); }
body.scrolling-up header { transform: translateY(0); }

/* 悬浮按钮组 */
.reading-mode-btn, .bookmark-btn { transition: all 0.4s var(--ease-spring); }

/* 链接预加载指示 */
link[rel="prefetch"] { display: none; }

/* 文章信息栏增强 */
.post-info-bar { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: linear-gradient(135deg, var(--favoriteBg), transparent); border-radius: var(--radius-sm); margin: 16px 0; font-size: 0.82rem; color: var(--text2); border: 1px solid var(--border); }
.post-info-bar i { color: var(--primary); margin-right: 4px; }

/* 表格响应式容器 */
.post-detail .content div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }

/* TOC浮动 */
.toc-sidebar.floating { opacity: 0.5; transition: opacity 0.3s; }
.toc-sidebar.floating:hover { opacity: 1; }

/* 页面加载动画 */
body { opacity: 1; transition: opacity 0.4s ease-out; }

/* 移动端阅读模式 */
@media (max-width: 600px) {
  body.reading-mode .post-detail { padding: 24px 16px !important; }
  body.reading-mode .post-detail .content { font-size: 16px !important; }
  .reading-mode-btn, .bookmark-btn { bottom: 80px !important; right: 16px !important; width: 42px !important; height: 42px !important; }
}

/* 暗色模式阅读模式 */
:root.dark body.reading-mode .post-detail { color: #e4e4e4; }
:root.dark body.reading-mode .post-detail .content { color: #d4d4d4; }

/* ===== Batch 501-1000: UX Enhancements ===== */

/* 命令面板 */
.cmd-palette-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding-top: 15vh; }
.cmd-palette-overlay.show { display: flex; animation: fadeIn 0.2s ease-out; }
.cmd-palette { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.2); width: 90%; max-width: 600px; overflow: hidden; animation: bounce-in 0.3s var(--ease-spring); }
.cmd-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cmd-input-wrap i { color: var(--text3); font-size: 1.1rem; }
.cmd-input { flex: 1; border: none; outline: none; background: transparent; color: var(--fontColor); font-size: 1rem; }
.cmd-close { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: var(--radius-sm); transition: all 0.2s; }
.cmd-close:hover { background: var(--favoriteBg); color: var(--primary); }
.cmd-results { max-height: 400px; overflow-y: auto; padding: 8px; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius-sm); color: var(--text2); font-size: 0.9rem; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.cmd-item:hover, .cmd-item.selected { background: var(--favoriteBg); color: var(--primary); }
.cmd-item i { width: 20px; text-align: center; color: var(--text3); }
.cmd-item.selected i { color: var(--primary); }
.cmd-empty { text-align: center; padding: 32px; color: var(--text3); font-size: 0.9rem; }
.cmd-empty i { font-size: 1.5rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.cmd-hints { display: flex; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text3); }
.cmd-hints span { display: flex; align-items: center; gap: 6px; }
:root.dark .cmd-palette { background: var(--card-bg); box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* 骨架屏 */
.skeleton-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; }
.skeleton-cover { height: 200px; }
.skeleton-body { padding: 20px; }
.skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 10px; }
.skeleton-line.short { width: 60%; }

/* 评论排序 */
.comment-sort { display: inline-flex; gap: 6px; margin-left: 16px; }
.comment-sort .chip { padding: 2px 10px; font-size: 0.75rem; }

/* 表情选择器 */
.emoji-picker span:hover { background: var(--favoriteBg); transform: scale(1.2); }
.emoji-btn:hover { color: var(--primary); }

/* 滚动状态 */
body.scrolling .back-to-top { opacity: 1; }

/* 页面可见性 */
head title { transition: all 0.3s; }

/* 搜索建议增强 */
.search-suggest { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.search-suggest-item { border-bottom: 1px solid var(--border); }
.search-suggest-item:last-child { border-bottom: none; }
.search-suggest-item mark { background: rgba(255,98,62,.2); color: var(--primary); padding: 0 2px; border-radius: 2px; }

/* 加载状态 */
.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.7); backdrop-filter: blur(4px); z-index: 9998; display: flex; align-items: center; justify-content: center; }
:root.dark .loading-overlay { background: rgba(26,26,46,.7); }
.loading-content { text-align: center; }
.loading-content .spinner { margin: 0 auto 16px; }
.loading-content p { color: var(--text2); font-size: 0.9rem; }

/* 错误边界 */
.error-boundary { text-align: center; padding: 60px 20px; }
.error-boundary i { font-size: 3rem; color: var(--text3); margin-bottom: 16px; }
.error-boundary h3 { color: var(--text2); margin-bottom: 8px; }
.error-boundary p { color: var(--text3); margin-bottom: 20px; }
.error-boundary button { padding: 8px 24px; background: var(--grad); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.3s; }
.error-boundary button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* 空状态增强 */
.empty-state { animation: fade-blur 0.6s var(--ease-out) both; }
.empty-state i { animation: float 3s ease-in-out infinite; }

/* 评论加载更多 */
.comment-load-more { display: block; margin: 16px auto; padding: 8px 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text2); cursor: pointer; transition: all 0.3s; font-size: 0.85rem; }
.comment-load-more:hover { border-color: var(--primary); color: var(--primary); }

/* 通知中心 */
.notification-panel { position: fixed; top: 64px; right: 0; width: 360px; max-height: 70vh; background: var(--card-bg); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); z-index: 200; overflow-y: auto; display: none; }
.notification-panel.show { display: block; animation: slide-top 0.3s var(--ease-out); }
.notification-item { padding: 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; transition: background 0.2s; }
.notification-item:hover { background: var(--favoriteBg); }
.notification-item .icon { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notification-item .content { flex: 1; }
.notification-item .title { font-size: 0.88rem; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.notification-item .desc { font-size: 0.8rem; color: var(--text3); }
.notification-item .time { font-size: 0.72rem; color: var(--text3); margin-top: 4px; }

/* 快捷键面板 */
.shortcut-panel { position: fixed; bottom: 20px; left: 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-md); z-index: 50; max-width: 280px; }
.shortcut-panel h4 { font-size: 0.85rem; margin-bottom: 12px; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.shortcut-panel h4 i { color: var(--primary); }
.shortcut-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.shortcut-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text3); }
.shortcut-item .kbd { font-size: 0.72rem; }

/* 标签筛选器 */
.tag-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; padding: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.tag-filter .chip { font-size: 0.82rem; }

/* 文章卡片悬浮信息 */
.post-card .card-hover-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; opacity: 0; transition: opacity 0.3s; z-index: 2; }
.post-card:hover .card-hover-info { opacity: 1; }
.post-card .card-hover-info .read-time { font-size: 0.78rem; display: flex; align-items: center; gap: 4px; }

/* 搜索过滤栏 */
.search-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search-filter-select { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--fontColor); font-size: 0.85rem; cursor: pointer; }
.search-filter-select:focus { outline: none; border-color: var(--primary); }

/* 面包屑增强 */
.breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 0.82rem; color: var(--text3); margin: 16px 0; padding: 8px 16px; background: var(--favoriteBg); border-radius: var(--radius-sm); }
.breadcrumb a { color: var(--text2); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { color: var(--text3); }

/* 移动端命令面板 */
@media (max-width: 600px) {
  .cmd-palette { width: 95%; }
  .cmd-results { max-height: 300px; }
  .cmd-hints { flex-wrap: wrap; gap: 8px; }
  .notification-panel { width: 100%; right: 0; }
  .shortcut-panel { display: none; }
}

/* 暗色模式 */
:root.dark .cmd-item:hover, :root.dark .cmd-item.selected { background: rgba(255,98,62,.1); }
:root.dark .notification-item:hover { background: rgba(255,255,255,.05); }
:root.dark .search-filter-select { background: var(--card-bg); }
:root.dark .tag-filter { background: var(--card-bg); }

/* 打印 */
@media print {
  .cmd-palette-overlay, .notification-panel, .shortcut-panel { display: none !important; }
}

/* ===== Batch 3501-5000: Accessibility, Mobile & Final Polish ===== */

/* 屏幕阅读器专用 */
.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; }
.sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* 焦点增强 */
:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 3px !important; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
.post-card:focus-visible, .link-card:focus-visible, .related-card:focus-visible { outline-offset: 4px; box-shadow: 0 0 0 4px rgba(255,98,62,.2); }
.btn:focus-visible, .btn-gradient:focus-visible, .btn-outline:focus-visible { outline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; }

/* 跳转链接增强 */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--primary); color: #fff; padding: 12px 24px; border-radius: 0 0 8px 0; font-weight: 600; transition: left 0.2s; }
.skip-link:focus { left: 0; outline: none; }

/* 语义化增强 */
[role="banner"] { min-height: 64px; }
[role="navigation"] { min-height: 40px; }
[role="main"] { min-height: 50vh; }
[role="contentinfo"] { min-height: 80px; }

/* ARIA 状态 */
[aria-expanded="true"] .fa-caret-down { transform: rotate(180deg); }
[aria-hidden="true"] { pointer-events: none; }
[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* 高对比度模式 */
@media (prefers-contrast: high) {
  :root { --border: rgba(0,0,0,.3); --text3: rgba(0,0,0,.7); }
  :root.dark { --border: rgba(255,255,255,.3); --text3: rgba(255,255,255,.7); }
  .post-card { border-width: 2px; }
  .sidebar-card { border-width: 2px; }
  a { text-decoration: underline; }
  .post-detail .content a { text-decoration: underline; border-bottom: none; }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .wow { opacity: 1 !important; }
  .post-card:hover { transform: none !important; }
  .hero::before { animation: none !important; }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .post-card:hover { transform: none; }
  .post-card:hover .cover { transform: none; }
  .tooltip::after, .tooltip::before { display: none; }
  .nav-dropdown:hover .nav-dropdown-menu { display: none; }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .back-to-top { width: 52px; height: 52px; bottom: 20px; right: 20px; }
  .like-btn { padding: 12px 24px; }
  .share-btn { width: 44px; height: 44px; }
  .code-copy-btn { opacity: 1; }
  .post-card::before { transform: scaleX(1); }
}

/* 移动端增强 */
@media (max-width: 600px) {
  body { font-size: 14px; }
  .container { padding: 0 12px; }
  .hero { padding: 40px 16px 30px; }
  .hero-title { font-size: 1.5rem; }
  .hero-subtitle { font-size: 0.9rem; }
  .hero-typewriter { font-size: 0.95rem; }
  .post-grid { grid-template-columns: 1fr; gap: 16px; }
  .post-card { margin: 0; }
  .post-card .card-body { padding: 16px; }
  .cover-wrap { height: 180px; }
  .cover { height: 180px; }
  .post-detail { padding: 16px; margin: 0; border-radius: var(--radius); }
  .post-detail h1 { font-size: 1.3rem; }
  .post-detail .content { font-size: 15px; line-height: 1.8; }
  .post-detail .content h2 { font-size: 18px; }
  .post-detail .content h3 { font-size: 16px; }
  .post-detail .content pre { padding: 12px; font-size: 0.8rem; }
  .post-detail .content code { font-size: 0.8rem; }
  .post-detail .content blockquote { padding: 12px 16px; }
  .post-detail .content table { font-size: 0.8rem; }
  .post-detail .content th, .post-detail .content td { padding: 6px 8px; }
  .layout-2col { grid-template-columns: 1fr; gap: 16px; }
  .sidebar { position: static; gap: 16px; }
  .sidebar-card { padding: 16px; }
  .pagination { gap: 4px; }
  .pagination a, .pagination span { padding: 6px 10px; font-size: 0.8rem; }
  .post-nav { flex-direction: column; gap: 10px; }
  .post-nav a { padding: 12px; }
  .related-grid { grid-template-columns: 1fr; }
  .link-grid { grid-template-columns: 1fr; }
  .comment { padding: 12px; }
  .comment-form { padding: 16px; }
  .share-buttons { justify-content: center; flex-wrap: wrap; }
  .search-box { flex-direction: column; }
  .search-box button { width: 100%; }
  .section-title { font-size: 1.1rem; margin: 20px 0 16px; }
  .back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
  .toast-container { top: 60px; right: 8px; left: 8px; }
  .toast { max-width: none; }
  .footer-links { gap: 12px; }
  .footer-social { gap: 10px; }
  .footer-social a { width: 36px; height: 36px; }
  .auth-form { margin: 16px; padding: 20px; }
  .tag-cloud a { font-size: 0.75rem; padding: 3px 10px; }
  .archive-stats { flex-direction: column; gap: 8px; }
  .archive-timeline::before { left: 10px; }
  .archive-month { margin-left: 30px; }
  .reading-mode-btn, .bookmark-btn { bottom: 80px; right: 16px; width: 42px; height: 42px; }
  .hero-swiper .swiper-slide { height: 200px; }
  .hero-swiper .swiper-slide img { height: 200px; }
  .photo-masonry { columns: 2; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 平板端增强 */
@media (min-width: 601px) and (max-width: 900px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .layout-2col { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .post-detail { padding: 32px; }
  .photo-masonry { columns: 3; }
}

/* 大屏增强 */
@media (min-width: 1200px) {
  :root { --max-w: 1280px; }
  .post-grid { gap: 28px; }
  .post-detail { padding: 56px; }
}

@media (min-width: 1500px) {
  :root { --max-w: 1400px; }
  .post-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

@media (min-width: 1800px) {
  :root { --max-w: 1500px; }
}

/* 暗色模式增强 */
:root.dark { color-scheme: dark; }
:root.dark body { background: var(--body-bg); }
:root.dark .glass { background: rgba(26,26,46,.7); }
:root.dark .glass-card { background: rgba(26,26,46,.65); border-color: rgba(255,255,255,.08); }
:root.dark .glass-strong { background: rgba(26,26,46,.85); }
:root.dark .deco-blob { opacity: 0.05; }
:root.dark .bg-pattern-dots { background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); }
:root.dark .bg-pattern-grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }
:root.dark .bg-pattern-diagonal { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 10px); }
:root.dark .skeleton-shimmer { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 37%, var(--bg2) 63%); background-size: 400% 100%; }
:root.dark .divider-wave { opacity: 0.5; }
:root.dark .tooltip::after { background: var(--card-bg); box-shadow: var(--shadow-lg); }
:root.dark .accordion-item { border-color: rgba(255,255,255,.08); }
:root.dark .tab-list { border-bottom-color: rgba(255,255,255,.08); }
:root.dark .progress-bar { background: var(--bg3); }
:root.dark .chip { background: rgba(255,255,255,.05); }
:root.dark .cmd-palette { box-shadow: 0 20px 60px rgba(0,0,0,.5); }
:root.dark .cmd-item:hover, :root.dark .cmd-item.selected { background: rgba(255,98,62,.1); }
:root.dark .notification-item:hover { background: rgba(255,255,255,.05); }
:root.dark .search-filter-select { background: var(--card-bg); }
:root.dark .tag-filter { background: var(--card-bg); }
:root.dark .post-info-bar { background: linear-gradient(135deg, var(--favoriteBg), transparent); }
:root.dark .reading-progress { background: var(--grad-rainbow); }
:root.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--maxLightRed)); }
:root.dark ::-webkit-scrollbar-thumb:hover { background: var(--primary-l); }
:root.dark img[loading="lazy"] { background: var(--bg2); }
:root.dark .post-detail .content img { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
:root.dark .post-detail .content code { background: rgba(255,98,62,.12); border-color: rgba(255,98,62,.2); }
:root.dark .post-card .card-tags .tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
:root.dark .tag-cloud a:nth-child(3n) { background: rgba(255,98,62,.15); }
:root.dark .tag-cloud a:nth-child(3n+1) { background: rgba(57,197,187,.15); }
:root.dark .tag-cloud a:nth-child(3n+2) { background: rgba(3,169,244,.15); }
:root.dark .search-box input { background: var(--card-bg); }
:root.dark .comment-form { background: var(--bg2); }
:root.dark .archive-list { background: var(--card-bg); }
:root.dark .auth-form { background: var(--card-bg); }
:root.dark .auth-form input { background: var(--bg2); }
:root.dark .archive-year-stat { background: var(--card-bg); }
:root.dark .footer-social a { background: var(--card-bg); }
:root.dark .proverb-refresh { background: var(--card-bg); }
:root.dark .toast { background: rgba(22,33,62,.9); }
:root.dark .nav-drawer { background: linear-gradient(180deg,#221831,#1b1b2e 50%,#15151c); box-shadow: -4px 0 24px rgba(0,0,0,.5); }
:root.dark .hero { background: linear-gradient(180deg,#0f0c29 0%,#1a1a2e 40%,#16213e 100%); }
:root.dark .post-card .cover-placeholder { background: linear-gradient(135deg,#1a1a2e,#16213e); }
:root.dark .form-group input, :root.dark .form-group textarea, :root.dark .form-group select { background: #1a1a2e; }
:root.dark .comment-form input, :root.dark .comment-form textarea { background: #1a1a2e; }
:root.dark footer { background: linear-gradient(180deg,transparent,#0f0c29); }
:root.dark .post-detail .content pre { background: #11111b; border-color: rgba(255,255,255,.04); }
:root.dark .toc-sidebar { background: #272727; border-color: #4f4f4f; box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25); color: #b0b0b0; }
:root.dark .toc-sidebar h3 { color: #999; }
:root.dark .toc-sidebar li a { color: #aaa; }
:root.dark .toc-sidebar li a:hover { background: hsla(0,0%,100%,.05); color: #eee; }

/* 标签云页面 */
.tags-cloud-page { text-align: center; }
.tags-cloud-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 24px; }
.tag-cloud-item { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background: var(--favoriteBg); border: 1px solid var(--border); border-radius: 9999px; color: var(--text2); transition: all 0.3s var(--ease-spring); text-decoration: none; }
.tag-cloud-item:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-md); }
.tag-cloud-item .tag-count { font-size: 0.7rem; opacity: 0.6; background: rgba(0,0,0,.05); padding: 1px 6px; border-radius: 9999px; }
.tag-cloud-item:hover .tag-count { background: rgba(255,255,255,.2); opacity: 1; }

/* 统计页面 */
.stats-grid .stat-card { text-align: center; padding: 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: all 0.3s var(--ease-out); }
.stats-grid .stat-card:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); border-color: var(--primary); }
.stats-grid .stat-card .num { font-size: 2rem; font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats-grid .stat-card .label { font-size: 0.85rem; color: var(--text3); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.stats-grid .stat-card .label i { color: var(--primary); }

/* 书签页面 */
.bookmarks-container { max-width: 800px; margin: 0 auto; }
.bookmarks-container .remove-bookmark { font-size: 0.78rem; padding: 4px 10px; }

/* 设置页面 */
.settings-container .user-center-card { margin-bottom: 20px; }
.settings-container label { font-size: 0.9rem; color: var(--text2); }
.settings-container input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }

/* PWA 样式 */
@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  header { padding-top: env(safe-area-inset-top); }
}

/* 打印优化 */
@media print {
  .cmd-palette-overlay, .notification-panel, .shortcut-panel, .reading-mode-btn, .bookmark-btn, .back-to-top, .scroll-indicator { display: none !important; }
  .deco-blob, .floating-card, .spinner, .pulse-dot { display: none !important; }
  .glass-card, .glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .gradient-border::before, .flow-border::after { display: none; }
  .archive-stats, .archive-timeline::before, .archive-month::before { display: none; }
  .archive-month { margin-left: 0; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-card { break-inside: avoid; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  .post-detail { box-shadow: none; border: none; padding: 0; }
  .layout-2col { grid-template-columns: 1fr; }
  a { color: #000; text-decoration: underline; }
  .post-detail .content pre { background: #f5f5f5; color: #333; border: 1px solid #ddd; }
  .post-detail .content code { background: #f5f5f5; color: #333; }
}

/* 最终润色 */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, input, select, textarea { touch-action: manipulation; }

/* 滚动行为 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 文字选择 */
::selection { background: var(--primary); color: #fff; text-shadow: 0 0 2px rgba(255,255,255,.5); }
.post-detail .content ::selection { background: var(--lightGreen); color: #fff; }
::-moz-selection { background: var(--primary); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--maxLightRed)); border-radius: 1em; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-d), var(--maxLightRed)); background-clip: padding-box; }

/* 图片渲染 */
img { image-rendering: -webkit-optimize-contrast; }
img[loading="lazy"] { image-rendering: auto; }

/* CSS containment */
.post-card { contain: layout style paint; }
.sidebar-card { contain: layout style; }
.comment { contain: layout style; }
.twitter-item { contain: layout style; }
.link-card { contain: layout style; }

/* will-change 优化 */
.post-card:hover, .back-to-top:hover, .like-btn:hover { will-change: transform; }
.lightbox-overlay.show { will-change: opacity; }

/* 性能优化 */
.post-card { content-visibility: auto; contain-intrinsic-size: 400px; }
.sidebar { content-visibility: auto; contain-intrinsic-size: 600px; }
.post-detail .content { content-visibility: auto; contain-intrinsic-size: 2000px; }
.swiper { content-visibility: auto; contain-intrinsic-size: 300px; }
img[loading="lazy"] { content-visibility: auto; }

/* 安全区域 */
.safe-area-top { padding-top: env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-area-left { padding-left: env(safe-area-inset-left); }
.safe-area-right { padding-right: env(safe-area-inset-right); }

/* 字体平滑 */
h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; }
.hero-title, .post-detail h1, .section-title { letter-spacing: -0.02em; }
.post-detail .content { letter-spacing: 0.01em; }

/* 渐变文字 */
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 毛玻璃 */
.glass { backdrop-filter: var(--glass-blur) saturate(180%); -webkit-backdrop-filter: var(--glass-blur) saturate(180%); background: rgba(255,255,255,.7); }

/* 阴影 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* 圆角 */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }

/* 间距 */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 32px; }
.pt-0 { padding-top: 0; } .pt-1 { padding-top: 4px; } .pt-2 { padding-top: 8px; } .pt-3 { padding-top: 16px; } .pt-4 { padding-top: 24px; } .pt-5 { padding-top: 32px; }
.pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: 4px; } .pb-2 { padding-bottom: 8px; } .pb-3 { padding-bottom: 16px; } .pb-4 { padding-bottom: 24px; } .pb-5 { padding-bottom: 32px; }

/* 文字 */
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.text-sm { font-size: 0.82rem; } .text-md { font-size: 0.9rem; } .text-lg { font-size: 1.1rem; } .text-xl { font-size: 1.3rem; } .text-2xl { font-size: 1.5rem; }
.text-primary { color: var(--primary); } .text-muted { color: var(--text3); } .text-success { color: var(--green); } .text-danger { color: var(--red); }
.font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 布局 */
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-row { display: flex; flex-direction: row; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-start { display: flex; align-items: flex-start; }
.flex-end { display: flex; align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-none { flex: none; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; } .gap-5 { gap: 32px; }
.grid { display: grid; }
.hidden { display: none !important; }
.block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
.w-full { width: 100%; } .w-auto { width: auto; }
.h-full { height: 100%; } .h-auto { height: auto; }
.max-w-full { max-width: 100%; }
.overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-scroll { overflow: scroll; }
.position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; }

/* 过渡 */
.transition-all { transition: all 0.3s var(--ease-smooth); }
.transition-color { transition: color 0.3s, background 0.3s, border-color 0.3s; }
.transition-transform { transition: transform 0.3s var(--ease-spring); }
.transition-opacity { transition: opacity 0.3s; }

/* 光标 */
.cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-text { cursor: text; }

/* 用户选择 */
.select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; }

/* 指针 */
.pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; }

/* 透明度 */
.opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; }

/* 可见性 */
.visible { visibility: visible; } .invisible { visibility: hidden; }

/* 层叠 */
.z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-50 { z-index: 50; } .z-100 { z-index: 100; } .z-auto { z-index: auto; }

/* 响应式隐藏 */
@media (max-width: 600px) { .hidden-sm { display: none !important; } }
@media (min-width: 601px) and (max-width: 900px) { .hidden-md { display: none !important; } }
@media (min-width: 901px) { .hidden-lg { display: none !important; } }

/* 暗色模式切换过渡 */
:root, :root.dark { transition: background 0.5s var(--ease-smooth), color 0.3s var(--ease-smooth); }
:root.dark header { background: rgba(26,26,46,.72); }
:root.dark body.reading-mode { background: #1a1a2e !important; }
:root.dark body.reading-mode .post-detail { color: #e4e4e4; }
:root.dark body.reading-mode .post-detail .content { color: #d4d4d4; }

/* 最终动画润色 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes shake { from { transform: translateX(-5px) rotate(-2deg); } to { transform: translateX(5px) rotate(2deg); } }
@keyframes floatUp { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2) translateY(-60px); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes gradient-shift { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes shadow-pulse { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: var(--shadow-lg); } }
@keyframes border-glow { 0%, 100% { border-color: var(--primary); } 50% { border-color: var(--maxLightRed); } }
@keyframes color-cycle { 0% { color: var(--primary); } 33% { color: var(--lightGreen); } 66% { color: var(--blue); } 100% { color: var(--primary); } }
@keyframes dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes fade-blur { 0% { opacity: 0; filter: blur(10px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-bounce { 0% { opacity: 0; transform: translateX(-100%) scale(0.8); } 60% { opacity: 1; transform: translateX(10px) scale(1.05); } 100% { transform: translateX(0) scale(1); } }
@keyframes depth-in { 0% { opacity: 0; transform: translateZ(-100px); } 100% { opacity: 1; transform: translateZ(0); } }
@keyframes reveal-up { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes reveal-left { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes reveal-right { 0% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes scale-reveal { 0% { clip-path: inset(50% 50% 50% 50%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes curtain-open { 0% { clip-path: inset(0 50% 0 50%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes spotlight { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ripple-expand { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
@keyframes shimmer-text { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 5px rgba(255,98,62,.3); } 50% { box-shadow: 0 0 20px rgba(255,98,62,.6), 0 0 40px rgba(255,98,62,.3); } }
@keyframes text-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes slide-fade-in { 0% { opacity: 0; transform: translateX(-20px) scale(0.95); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes flip-in { 0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0); } }
@keyframes bounce-in { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes elastic-in { 0% { transform: scale(0); } 55% { transform: scale(1.1); } 75% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } 30% { transform: scale(1.1); } 40% { transform: scale(1); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(20px) rotate(0deg); } to { transform: rotate(360deg) translateX(20px) rotate(-360deg); } }
@keyframes float-rotate { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } }
@keyframes shimmer-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes gradient-text-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes border-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes bar-load { 0% { height: 4px; } 50% { height: 20px; } 100% { height: 4px; } }
@keyframes loading-bar { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
@keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
@keyframes snow-fall { 0% { transform: translateY(-10px) translateX(0); opacity: 1; } 100% { transform: translateY(100vh) translateX(20px); opacity: 0; } }
@keyframes heroFloat { 0%, 100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(30px,-20px) rotate(120deg); } 66% { transform: translate(-20px,20px) rotate(240deg); } }
@keyframes headerSlideIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes header-effect { 0% { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-top { 0% { opacity: 0; transform: translateY(-20%); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-bottom { 0% { opacity: 0; transform: translateY(20%); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-right { 0% { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in { 0% { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-out { 0% { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
@keyframes hideToShow { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes rotate { 0% { opacity: 1; transform: rotate(0deg); } to { opacity: 1; transform: rotate(1turn); } }
@keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes imgScale { 0% { transform: scale(.8); } 70% { transform: scale(1.3); } to { transform: scale(.8); } }
@keyframes jianBian { to { background-position: -2000rem; } }
@keyframes gradientBG { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } to { background-position: 0 50%; } }
@keyframes weiYanShadowFlashing { 0% { box-shadow: none; } 50% { box-shadow: 0 0 15px var(--red); } to { box-shadow: none; } }
@keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } }
@keyframes passing { 0% { transform: translateX(-130%); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } to { transform: translateX(130%); opacity: 0; } }
@keyframes passingShow { 0% { transform: translateX(-200%); } 50% { transform: translateX(0); } to { transform: translateX(200%); } }
@keyframes fade-up-in { 0% { opacity: 0; } 30% { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-blur-in { 0% { filter: blur(calc(var(--blur) + 20px)) brightness(.4); transform: scale(1.5); } to { filter: blur(var(--blur)) brightness(1); transform: scale(1.2); } }
@keyframes fade-time-in { 0% { opacity: 0; } 20% { opacity: 0; transform: translateY(-90px); } to { opacity: 1; transform: translateY(-150px); } }
@keyframes separator-breathe { 0% { opacity: .8; } 70% { opacity: .8; } to { opacity: .2; } }
@keyframes baseShow { 0% { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes borderExpand { to { background-size: 100% 1px; } }
@keyframes menoryFadeIn { to { opacity: 1; transform: scale(1) rotateY(0) rotateX(0); } }
@keyframes pulse { 0% { transform: translate(-50%,-50%) scale(.1); opacity: .9; border-color: hsla(0,0%,100%,.9); } 50% { opacity: .6; border-color: hsla(0,0%,100%,.6); } to { transform: translate(-50%,-50%) scale(1); opacity: 0; border-color: hsla(0,0%,100%,.2); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }