a {
  color: #06c;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}
a:hover {
  color: #005cb8;
  border-bottom-color: #0075eb;
}
a:visited {
  color: #005cb8;
}
a:active {
  color: #0052a3;
}
.post-content a,
.page-main-content a {
  color: #06c;
  text-decoration: none;
  padding: 2px 4px;
  margin: 0 -2px;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
}
.post-content a:hover,
.page-main-content a:hover {
  color: #fff;
  background: linear-gradient(135deg, #06c, #0075eb);
  box-shadow: 0 2px 8px rgba(0,102,204,0.3);
  transform: translateY(-1px);
}
.post-content a:visited,
.page-main-content a:visited {
  color: #005cb8;
}
.post-content a:active,
.page-main-content a:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,102,204,0.3);
}
.post-content a[target="_blank"]::after,
.page-main-content a[target="_blank"]::after {
  content: '\f35d';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.8em;
  margin-left: 0.3em;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.post-content a[target="_blank"]:hover::after,
.page-main-content a[target="_blank"]:hover::after {
  opacity: 1;
}
.site-nav a:not(.search-toggle-btn) {
  color: #333;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}
.site-nav a:not(.search-toggle-btn):hover {
  color: #06c;
  background: rgba(0,102,204,0.1);
}
.site-nav a:not(.search-toggle-btn).active {
  color: #06c;
  font-weight: 600;
  background: rgba(0,102,204,0.15);
}
.search-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: transparent;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}
.search-toggle-btn:hover {
  color: #06c;
  background: rgba(0,102,204,0.1);
}
.search-toggle-btn i {
  font-size: 0.9rem;
}
.post-nav a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid #dee2e6;
  font-weight: 500;
}
.post-nav a:hover {
  background: linear-gradient(135deg, #06c 0%, #0075eb 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,102,204,0.3);
  border-color: #06c;
}
.post-nav a.prev {
  margin-right: 1rem;
}
.post-nav a.next {
  margin-left: 1rem;
}
.tag-link,
.category-link,
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #333;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.08);
  min-height: 32px;
  margin: 0.2rem 0.1rem;
}
.tag-link:hover,
.category-link:hover,
.chip:hover {
  background: linear-gradient(135deg, #39f, #06c) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,102,204,0.2);
  text-decoration: none !important;
}
.tag-list .tag-link {
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-weight: 500;
}
.tag-list .tag-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tag-list .tag-link:nth-child(8n+1) {
  background: #e8f5e8;
  color: #2e7d32;
}
.tag-list .tag-link:nth-child(8n+1):hover {
  background: #c8e6c9;
  color: #1b5e20;
}
.tag-list .tag-link:nth-child(8n+2) {
  background: #e8f5e8;
  color: #2e7d32;
}
.tag-list .tag-link:nth-child(8n+2):hover {
  background: #c8e6c9;
  color: #1b5e20;
}
.tag-list .tag-link:nth-child(8n+3) {
  background: #e3f2fd;
  color: #1565c0;
}
.tag-list .tag-link:nth-child(8n+3):hover {
  background: #bbdefb;
  color: #0d47a1;
}
.tag-list .tag-link:nth-child(8n+4) {
  background: #fff3e0;
  color: #ef6c00;
}
.tag-list .tag-link:nth-child(8n+4):hover {
  background: #ffe0b2;
  color: #e65100;
}
.tag-list .tag-link:nth-child(8n+5) {
  background: #f3e5f5;
  color: #7b1fa2;
}
.tag-list .tag-link:nth-child(8n+5):hover {
  background: #e1bee7;
  color: #4a148c;
}
.tag-list .tag-link:nth-child(8n+6) {
  background: #e0f2f1;
  color: #00695c;
}
.tag-list .tag-link:nth-child(8n+6):hover {
  background: #b2dfdb;
  color: #004d40;
}
.tag-list .tag-link:nth-child(8n+7) {
  background: #e1f5fe;
  color: #0277bd;
}
.tag-list .tag-link:nth-child(8n+7):hover {
  background: #b3e5fc;
  color: #01579b;
}
.tag-list .tag-link:nth-child(8n+8) {
  background: #e8eaf6;
  color: #3f51b5;
}
.tag-list .tag-link:nth-child(8n+8):hover {
  background: #c5cae9;
  color: #283593;
}
.archive-page .tag-link {
  background: #f5f5f5;
  color: #666;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
}
.archive-page .tag-link:hover {
  background: #e0e7ff;
  color: #3730a3;
}
.pagination a {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #06c;
  text-decoration: none;
  border: 1px solid #0075eb;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.pagination a:hover,
.pagination a.current {
  background: #06c;
  color: #fff;
  border-color: #06c;
}
.sidebar a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}
.sidebar a:hover {
  color: #06c;
}
.link-card {
  display: block;
  padding: 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
.link-card:hover {
  border-color: #0075eb;
  box-shadow: 0 4px 15px rgba(0,102,204,0.1);
  transform: translateY(-2px);
}
.underline-animation {
  position: relative;
  text-decoration: none;
}
.underline-animation::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #06c;
  transition: width 0.3s ease;
}
.underline-animation:hover::after {
  width: 100%;
}
.gradient-link {
  background: linear-gradient(135deg, #06c, #0075eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.gradient-link:hover {
  background: linear-gradient(135deg, #005cb8, #06c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 500px) {
  .post-content a:hover,
  .page-main-content a:hover {
    padding: 1px 2px;
    margin: 0 -1px;
  }
  .tag-link,
  .category-link,
  .chip {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    min-height: 28px;
  }
}
body.eye-care-mode a {
  color: #06c;
}
body.eye-care-mode a:hover {
  color: #05b;
  border-bottom-color: rgba(0,102,204,0.3);
}
body.eye-care-mode a:visited {
  color: #05b;
}
body.eye-care-mode a:active {
  color: #04a;
}
html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
  background: #fff !important;
  position: relative;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
html::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
html {
  scrollbar-width: none;
}
body {
  scrollbar-width: none;
}
* {
  touch-action: manipulation;
}
* {
  box-sizing: border-box !important;
}
*:not(html):not(body) {
  max-width: 100%;
}
#app,
.layout,
main,
.container {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
.layout > div:first-child:not(.recent-posts),
.post-card,
.post-card-simple,
.card,
.tm-main-body > *:not(.pagination) {
  box-shadow: none !important;
}
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
  }
  *,
  *::before,
  *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .post-card,
  .post-card-simple,
  .card {
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .post-cover-wrapper,
  .post-cover {
    max-width: 100% !important;
    width: 100% !important;
  }
  img,
  video,
  iframe,
  embed,
  object,
  svg {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow-x: auto !important;
    display: block !important;
  }
  pre,
  code,
  .highlight,
  .highlight-container {
    max-width: 100% !important;
    word-wrap: break-word !important;
  }
  pre::-webkit-scrollbar,
  code::-webkit-scrollbar,
  .highlight::-webkit-scrollbar,
  .highlight-container::-webkit-scrollbar {
    height: 6px;
  }
  pre::-webkit-scrollbar-track,
  code::-webkit-scrollbar-track,
  .highlight::-webkit-scrollbar-track,
  .highlight-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  pre::-webkit-scrollbar-thumb,
  code::-webkit-scrollbar-thumb,
  .highlight::-webkit-scrollbar-thumb,
  .highlight-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  pre::-webkit-scrollbar-thumb:hover,
  code::-webkit-scrollbar-thumb:hover,
  .highlight::-webkit-scrollbar-thumb:hover,
  .highlight-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  p,
  div,
  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  [style*="position: fixed"],
  .fixed {
    max-width: calc(100vw - 20px) !important;
  }
  #card-toc {
    max-width: calc(100vw - 40px) !important;
    right: 20px !important;
    left: auto !important;
  }
  .site-navbar,
  header {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .settings-panel {
    max-width: calc(100vw - 20px) !important;
  }
  .timemark-search-container {
    max-width: calc(100vw - 40px) !important;
  }
  footer,
  .site-footer {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
}
.tm-main-body {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 70px 30px 0 30px;
  flex: 1;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
@media (max-width: 800px) {
  .tm-main-body {
    padding: 70px 20px 0 20px;
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 500px) {
  .tm-main-body {
    padding: 70px 15px 0 15px;
    max-width: 100% !important;
    width: 100% !important;
  }
}
.highlight-container {
  position: relative;
  box-sizing: border-box;
  margin: 1.4rem 0;
}
.highlight-container.mac {
  margin: 1.4rem 0 1.8rem 0;
  box-shadow: 0 0.8rem 2rem 0 rgba(0,0,0,0.4);
}
.highlight-container.mac:hover .code-tools-box .copy {
  opacity: 1;
}
.highlight-container.mac .code-tools-box {
  justify-content: flex-end;
  padding: 0.4rem 0.6rem 0.7rem 0.4rem;
  background: var(--mac-toolbar-background-color);
}
.highlight-container.mac .code-tools-box::before {
  position: absolute;
  left: 0.8rem;
  width: 0.76rem;
  height: 0.76rem;
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b;
  content: '';
}
.highlight-container.mac .code-tools-box.folded {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.highlight-container.mac .code-tools-box.folded .copy {
  display: none;
}
.highlight-container.mac .code-tools-box .code-lang {
  order: 1;
  color: #bbb;
}
.highlight-container.mac .code-tools-box .fold {
  order: 2;
  padding: 0 0.1rem 0 0.6rem;
}
.highlight-container.mac .code-tools-box .fold i {
  color: #ccc;
}
.highlight-container.mac .code-tools-box .copy {
  position: absolute;
  top: 3rem;
  right: 0.5rem;
  box-sizing: border-box;
  padding: 0 0.1rem;
  opacity: 0;
}
.highlight-container.mac .code-tools-box .copy i {
  font-size: 1rem;
}
.code-tools-box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 0.3rem 0.4rem;
  color: var(--toolbar-foreground);
  background: var(--toolbar-background);
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.code-tools-box.folded {
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
.code-tools-box .code-lang {
  justify-content: flex-start;
  margin-left: 0.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: "Source Code Pro", consolas, Menlo;
}
.code-tools-box .tool {
  cursor: pointer;
}
.code-tools-box .tool i {
  font-size: 0.9rem;
}
.code-tools-box .fold {
  padding: 0 0.4rem 0 0.2rem;
}
figure.highlight {
  margin: 0;
}
figure.highlight.folded {
  height: 0 !important;
}
figure.highlight {
  position: relative;
  box-sizing: border-box;
  overflow-y: hidden;
}
figure.highlight .shrink-line {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(to bottom, var(--shrink-line-background-1), var(--shrink-line-background-2));
  cursor: pointer;
}
figure.highlight .shrink-line::before {
  color: var(--text-color-4);
  font-weight: 600;
  font-size: 1rem;
  font-family: 'Font Awesome 6 Free';
  content: '\f103';
}
figure.highlight .shrink-line:hover::before {
  font-size: 1.1rem;
}
:root {
  --toolbar-foreground: #50505c;
  --toolbar-background: #f0f0f0;
  --code-foreground: #585865;
  --code-background: rgba(0,102,204,0.15);
  --code-border-color: #2994ff;
  --highlight-background: #fafafa;
  --highlight-foreground: #535360;
  --highlight-comment: #8e908c;
  --highlight-red: #c82829;
  --highlight-orange: #f5871f;
  --highlight-yellow: #eab700;
  --highlight-green: #718c00;
  --highlight-aqua: #3e999f;
  --highlight-blue: #4271ae;
  --highlight-purple: #8959a8;
  --highlight-deletion: #fdd;
  --highlight-addition: #dfd;
  --highlight-gutter-color: #585865;
  --highlight-gutter-bg-color: #f2f2f2;
  --mac-toolbar-background-color: #21252b;
  --shrink-line-foreground: #808091;
  --shrink-line-background-1: rgba(210,210,210,0.9);
  --shrink-line-background-2: rgba(225,225,225,0.6);
}
:root {
  --toolbar-foreground: #50505c;
  --toolbar-background: #f0f0f0;
  --code-foreground: #585865;
  --code-background: rgba(0,102,204,0.15);
  --code-border-color: #2994ff;
  --highlight-background: #fafafa;
  --highlight-foreground: #535360;
  --highlight-comment: #8e908c;
  --highlight-red: #c82829;
  --highlight-orange: #f5871f;
  --highlight-yellow: #eab700;
  --highlight-green: #718c00;
  --highlight-aqua: #3e999f;
  --highlight-blue: #4271ae;
  --highlight-purple: #8959a8;
  --highlight-deletion: #fdd;
  --highlight-addition: #dfd;
  --highlight-gutter-color: #585865;
  --highlight-gutter-bg-color: #f2f2f2;
  --mac-toolbar-background-color: #21252b;
  --shrink-line-foreground: #808091;
  --shrink-line-background-1: rgba(210,210,210,0.9);
  --shrink-line-background-2: rgba(225,225,225,0.6);
}
.code-block,
pre,
.highlight {
  margin: 1.5rem 0;
  padding: 0;
  overflow: auto;
  color: var(--highlight-foreground);
  font-size: 0.96rem;
  line-height: 1.5rem;
  background: var(--highlight-background);
}
pre,
code {
  font-family: "Source Code Pro", consolas, Menlo;
}
code {
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  color: var(--code-foreground);
  font-size: 0.88rem;
  word-wrap: break-word;
  background: var(--code-background);
  border: 0.1rem solid var(--code-border-color);
  border-radius: 0.3rem;
}
pre {
  padding: 0.6rem;
}
pre code {
  padding: 0;
  color: var(--highlight-foreground);
  text-shadow: none;
  background: none;
}
.highlight {
  border-bottom-right-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.highlight pre {
  margin: 0;
  padding: 0.6rem 0;
  border: none;
}
.highlight table {
  width: auto;
  margin: 0;
  border: none;
  border-spacing: unset;
}
.highlight td {
  padding: 0;
  border: none;
}
.highlight figcaption {
  box-sizing: border-box;
  padding: 0.5rem;
  color: var(--highlight-foreground);
  font-size: 1rem;
  line-height: 1rem;
}
.highlight figcaption a {
  float: right;
  color: var(--highlight-foreground);
  font-size: 0.9rem;
}
.highlight figcaption a:hover {
  border-bottom-color: var(--highlight-foreground);
}
.highlight .gutter pre {
  padding-right: 0.6rem;
  padding-left: 0.6rem;
  color: var(--highlight-gutter-color);
  text-align: center;
  background-color: var(--highlight-gutter-bg-color);
}
.highlight .code pre {
  width: 100%;
  padding-right: 0.6rem;
  padding-left: 0.6rem;
  background-color: var(--highlight-background);
}
.highlight .line {
  height: 1.5rem;
  color: var(--highlight-foreground);
}
.gutter {
  color: var(--highlight-gutter-color);
  background: var(--highlight-gutter-bg-color);
}
.gutter .line {
  color: var(--highlight-gutter-color);
}
pre .deletion {
  color: var(--highlight-foreground);
  background: var(--highlight-deletion);
}
pre .addition {
  color: var(--highlight-foreground);
  background: var(--highlight-addition);
}
pre .meta {
  color: var(--highlight-purple);
}
pre .comment {
  color: var(--highlight-comment);
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: var(--highlight-red);
}
pre .property {
  color: var(--highlight-blue);
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant,
pre .command {
  color: var(--highlight-orange);
}
pre .ruby .class .title,
pre .css .rules .attribute,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata,
pre .special,
pre .number,
pre .formula {
  color: var(--highlight-green);
}
pre .title,
pre .css .hexcolor {
  color: var(--highlight-aqua);
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: var(--highlight-blue);
}
pre .keyword,
pre .javascript .function {
  color: var(--highlight-purple);
}
.timemark-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.timemark-search-overlay.active {
  display: flex;
}
.timemark-search-container {
  background: #fff;
  width: 90%;
  max-width: 640px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: fadeInUp 0.25s ease-out;
}
.timemark-search-header {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.timemark-search-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
}
.timemark-search-close {
  margin-left: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
}
.timemark-search-close:hover {
  color: #000;
}
.timemark-search-body {
  padding: 1rem;
  border-top: 1px solid #eee;
  max-height: 400px;
  overflow-y: auto;
}
.timemark-search-placeholder {
  color: #999;
  text-align: center;
  margin: 2rem 0;
}
.search-results-count {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
.search-result-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}
.search-result-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.search-result-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  line-height: 1.4;
}
.search-result-title a {
  color: #3182ce;
  text-decoration: none;
}
.search-result-title a:hover {
  text-decoration: underline;
}
.search-categories {
  display: inline-block;
  background: #f5f5f5;
  color: #666;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.search-result-excerpt {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.search-result-excerpt mark {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
}
.search-no-results,
.search-error {
  text-align: center;
  padding: 2rem 1rem;
  color: #666;
}
.search-tip {
  font-size: 0.9rem;
  color: #999;
  margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .timemark-search-container {
    width: 95%;
    margin: 1rem;
  }
  .timemark-search-header {
    padding: 0.8rem;
  }
  .timemark-search-input {
    font-size: 0.9rem;
  }
  .timemark-search-body {
    padding: 0.8rem;
    max-height: 300px;
  }
}
@-moz-keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@-o-keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.eye-care-toggle {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #666;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.eye-care-toggle:hover {
  background: #f8f9fa;
  border-color: #ccc;
  transform: translateY(-50%) scale(1.05);
}
.eye-care-toggle.active {
  background: #f7f3e9;
  border-color: #e8e4d8;
  color: #06c;
}
body.eye-care-mode {
  background: #f7f3e9;
  transition: all 0.3s ease;
}
body.eye-care-mode .tm-main-body {
  background: #f7f3e9;
}
body.eye-care-mode .card,
body.eye-care-mode .post-card,
body.eye-care-mode .page-container,
body.eye-care-mode .archive-page,
body.eye-care-mode .categories-page,
body.eye-care-mode .widget-tags {
  background: #faf8f0;
  border-color: #e8e4d8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.eye-care-mode .post-content,
body.eye-care-mode .page-main-content {
  color: #293250 !important;
}
body.eye-care-mode .post-content h1,
body.eye-care-mode .page-main-content h1,
body.eye-care-mode .post-content h2,
body.eye-care-mode .page-main-content h2,
body.eye-care-mode .post-content h3,
body.eye-care-mode .page-main-content h3,
body.eye-care-mode .post-content h4,
body.eye-care-mode .page-main-content h4,
body.eye-care-mode .post-content h5,
body.eye-care-mode .page-main-content h5,
body.eye-care-mode .post-content h6,
body.eye-care-mode .page-main-content h6 {
  color: #244478 !important;
}
body.eye-care-mode .post-content p,
body.eye-care-mode .page-main-content p,
body.eye-care-mode .post-content li,
body.eye-care-mode .page-main-content li,
body.eye-care-mode .post-content td,
body.eye-care-mode .page-main-content td,
body.eye-care-mode .post-content span,
body.eye-care-mode .page-main-content span {
  color: #293250 !important;
}
body.eye-care-mode .post-content a,
body.eye-care-mode .page-main-content a {
  color: #3a6fd7 !important;
}
body.eye-care-mode .post-content a:hover,
body.eye-care-mode .page-main-content a:hover {
  color: #194ab7 !important;
}
body.eye-care-mode pre {
  background: #f0ede3 !important;
  color: #293250 !important;
  border-color: #e8e4d8;
}
body.eye-care-mode .highlight {
  background: #f0ede3 !important;
}
body.eye-care-mode .highlight .code {
  background: #f0ede3 !important;
  color: #293250 !important;
}
body.eye-care-mode .highlight table {
  background: #f0ede3 !important;
}
body.eye-care-mode .highlight .gutter {
  background: #e8e3d4 !important;
}
body.eye-care-mode .highlight .gutter pre {
  color: #718096 !important;
}
body.eye-care-mode figure.highlight {
  background: #f0ede3 !important;
}
body.eye-care-mode figure.highlight table,
body.eye-care-mode figure.highlight tbody,
body.eye-care-mode figure.highlight tr,
body.eye-care-mode figure.highlight td {
  background: #f0ede3 !important;
}
body.eye-care-mode figure.highlight .gutter pre {
  background: #e8e3d4 !important;
  color: #718096 !important;
}
body.eye-care-mode figure.highlight .code pre {
  background: #f0ede3 !important;
  color: #293250 !important;
  overflow-x: auto;
  white-space: pre;
}
body.eye-care-mode figure.highlight .line {
  color: #293250 !important;
}
body.eye-care-mode figure.highlight .comment {
  color: #8e908c !important;
}
body.eye-care-mode figure.highlight .variable,
body.eye-care-mode figure.highlight .attribute,
body.eye-care-mode figure.highlight .tag,
body.eye-care-mode figure.highlight .regexp {
  color: #c82829 !important;
}
body.eye-care-mode figure.highlight .property {
  color: #4271ae !important;
}
body.eye-care-mode figure.highlight .number,
body.eye-care-mode figure.highlight .preprocessor,
body.eye-care-mode figure.highlight .built_in,
body.eye-care-mode figure.highlight .literal,
body.eye-care-mode figure.highlight .params,
body.eye-care-mode figure.highlight .constant,
body.eye-care-mode figure.highlight .command {
  color: #f5871f !important;
}
body.eye-care-mode figure.highlight .string,
body.eye-care-mode figure.highlight .value,
body.eye-care-mode figure.highlight .inheritance,
body.eye-care-mode figure.highlight .header,
body.eye-care-mode figure.highlight .special,
body.eye-care-mode figure.highlight .formula {
  color: #718c00 !important;
}
body.eye-care-mode figure.highlight .title {
  color: #3e999f !important;
}
body.eye-care-mode figure.highlight .function {
  color: #4271ae !important;
}
body.eye-care-mode figure.highlight .keyword {
  color: #8959a8 !important;
}
body.eye-care-mode .highlight-container {
  background: transparent !important;
}
body.eye-care-mode .highlight-container .code-tools-box {
  background: #e3ddcb !important;
  color: #666 !important;
}
body.eye-care-mode .highlight-container .code-tools-box .code-lang {
  color: #666 !important;
}
body.eye-care-mode .highlight-container .code-tools-box .tool i {
  color: #666 !important;
}
body.eye-care-mode p code,
body.eye-care-mode li code,
body.eye-care-mode td code {
  background: #f0ede3 !important;
  color: #d6336c !important;
  padding: 2px 6px;
  border-radius: 4px;
}
body.eye-care-mode blockquote {
  background: #f0ede4;
  border-color: #e8e4d8;
}
body.eye-care-mode table {
  background: #faf8f0;
}
body.eye-care-mode table th {
  background: #f6f3e5;
}
body.eye-care-mode table td {
  border-color: #e8e4d8;
}
body.eye-care-mode .site-navbar {
  background: #faf8f0;
  border-bottom-color: #e8e4d8;
}
body.eye-care-mode .tm-sidebar .widget {
  background: #faf8f0;
  border-color: #e8e4d8;
}
body.eye-care-mode .timemark-search-container {
  background: #faf8f0;
}
body.eye-care-mode .timemark-search-input {
  background: #faf8f0;
  border-color: #e8e4d8;
}
body.eye-care-mode #card-toc {
  background: #faf8f0 !important;
  border-color: #e8e4d8 !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}
body.eye-care-mode #card-toc .item-headline {
  background: #f6f3e5 !important;
  border-bottom-color: #e8e4d8 !important;
}
body.eye-care-mode .category-link,
body.eye-care-mode .chip {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
  color: #333 !important;
}
body.eye-care-mode .category-link:hover,
body.eye-care-mode .chip:hover {
  background: linear-gradient(135deg, #39f, #06c) !important;
  color: #fff !important;
}
.eye-care-tip {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1001;
  box-shadow: 0 4px 15px rgba(102,126,234,0.3);
}
.eye-care-tip.show {
  opacity: 1;
  transform: translateY(0);
}
.toc-tip {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1001;
  box-shadow: 0 4px 15px rgba(102,126,234,0.3);
}
.toc-tip.show {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 500px) {
  .eye-care-toggle {
    right: 15px;
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
  .highlight,
  figure.highlight {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 1rem 0;
  }
  .highlight .code pre,
  figure.highlight .code pre {
    font-size: 0.8rem;
  }
}
.settings-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}
.settings-panel .settings-toggle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 8px 25px rgba(102,126,234,0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.settings-panel .settings-toggle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}
.settings-panel .settings-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(102,126,234,0.4);
}
.settings-panel .settings-toggle:hover::before {
  transform: rotate(45deg) translateX(100%);
}
.settings-panel .settings-toggle:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 0.1s ease;
}
.settings-panel .settings-toggle.active {
  transform: rotate(45deg) translateY(-3px);
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 12px 35px rgba(240,147,251,0.4);
}
.settings-panel .settings-toggle i {
  font-size: 20px;
  transition: all 0.3s ease;
  z-index: 1;
}
.settings-panel .settings-options {
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  padding: 12px;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
}
.settings-panel .settings-options.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.settings-panel .settings-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}
.settings-panel .settings-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102,126,234,0.1), transparent);
  transition: left 0.5s ease;
}
.settings-panel .settings-item:hover {
  background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
  color: #667eea;
  transform: translateX(3px);
}
.settings-panel .settings-item:hover::before {
  left: 100%;
}
.settings-panel .settings-item:hover i {
  transform: scale(1.1);
}
.settings-panel .settings-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.settings-panel .settings-item.active:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}
.settings-panel .settings-item i {
  margin-right: 12px;
  width: 18px;
  text-align: center;
  font-size: 16px;
  transition: all 0.3s ease;
}
.settings-panel .settings-item span {
  font-weight: 500;
  letter-spacing: 0.3px;
}
.settings-panel .settings-item#backToTopBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  margin-top: 4px;
}
.settings-panel .settings-item#backToTopBtn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}
.settings-panel .settings-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
  margin: 8px 0;
}
body.eye-care-mode .settings-panel .settings-toggle {
  background: linear-gradient(135deg, #2e7d7d 0%, #1a5f5f 100%);
  box-shadow: 0 8px 25px rgba(46,125,125,0.3);
}
body.eye-care-mode .settings-panel .settings-toggle:hover {
  box-shadow: 0 12px 35px rgba(46,125,125,0.4);
}
body.eye-care-mode .settings-panel .settings-toggle.active {
  background: linear-gradient(135deg, #5a8a5a 0%, #3d6b3d 100%);
  box-shadow: 0 12px 35px rgba(90,138,90,0.4);
}
body.eye-care-mode .settings-panel .settings-options {
  background: #f7f3e9;
  border-color: #e8e3d3;
  box-shadow: 0 20px 60px rgba(45,45,45,0.15);
}
body.eye-care-mode .settings-panel .settings-item {
  color: #2d2d2d;
}
body.eye-care-mode .settings-panel .settings-item:hover {
  background: linear-gradient(135deg, rgba(46,125,125,0.1) 0%, rgba(26,95,95,0.1) 100%);
  color: #2e7d7d;
}
body.eye-care-mode .settings-panel .settings-item.active {
  background: linear-gradient(135deg, #2e7d7d 0%, #1a5f5f 100%);
  color: #f7f3e9;
}
body.eye-care-mode .settings-panel .settings-item.active:hover {
  background: linear-gradient(135deg, #1a5f5f 0%, #0f4040 100%);
}
body.eye-care-mode .settings-panel .settings-divider {
  background: linear-gradient(90deg, transparent, rgba(45,45,45,0.1), transparent);
}
@media (max-width: 768px) {
  .settings-panel {
    right: 15px;
    bottom: 15px;
  }
  .settings-panel .settings-toggle {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
  .settings-panel .settings-options {
    right: 0;
    bottom: 60px;
    min-width: 120px;
  }
  .settings-panel .settings-item {
    padding: 10px 14px;
    font-size: 13px;
  }
  .settings-panel .settings-item i {
    font-size: 14px;
    margin-right: 10px;
  }
}
.site-navbar {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background: var(--bg-color, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  transition: all 0.3s ease;
  min-height: 60px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-logo {
  display: flex;
  align-items: center;
}
.site-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
}
.site-logo a img {
  margin-right: 1rem;
  height: 40px;
  width: auto;
}
.site-logo a .site-title {
  font-size: 1.2rem;
  font-weight: bold;
}
.site-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: hidden;
}
.site-nav ul li {
  position: relative;
  margin: 0 0.5rem;
}
.site-nav ul li a {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #333 !important;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 6px;
}
.site-nav ul li a:hover {
  color: #333 !important;
  background: rgba(0,0,0,0.05);
}
.site-nav ul li a.active {
  color: #333 !important;
  font-weight: 600;
  background: rgba(0,0,0,0.08);
}
.has-submenu:hover .submenu {
  display: block;
}
.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 4px;
  min-width: 150px;
}
.has-submenu .submenu li {
  margin: 0;
}
.has-submenu .submenu li a {
  padding: 0.5rem 1rem;
  display: block;
}
.has-submenu .submenu li a:hover {
  background: var(--bg-hover);
}
.search-toggle-item {
  margin-left: 1rem;
}
.search-toggle-item .search-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: transparent;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}
.search-toggle-item .search-toggle-btn:hover {
  color: #06c;
  background: rgba(0,102,204,0.1);
}
@media (max-width: 800px) {
  .site-navbar {
    padding: 0 1rem;
    height: 50px;
    min-height: 50px;
  }
  .site-navbar .site-logo .site-title {
    font-size: 1rem;
    color: #333 !important;
  }
  .site-navbar .site-nav ul {
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  .site-navbar .site-nav ul li {
    margin: 0;
  }
  .site-navbar .site-nav ul li a {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #333 !important;
  }
  .site-navbar .site-nav ul li a:hover {
    color: #333 !important;
  }
  .site-navbar .site-nav ul li a.active {
    color: #333 !important;
  }
  .site-navbar .site-nav ul li.search-toggle-item .search-toggle-btn {
    padding: 0.4rem 0.6rem;
    color: #333 !important;
  }
  .site-navbar .site-nav ul li.search-toggle-item .search-toggle-btn span {
    display: none;
  }
}
@media (max-width: 500px) {
  .site-navbar {
    padding: 0 0.5rem;
    height: 45px;
    min-height: 45px;
  }
  .site-navbar .site-logo .site-title {
    display: none;
  }
  .site-navbar .site-nav ul {
    gap: 0.1rem;
  }
  .site-navbar .site-nav ul li a {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 4px;
    color: #333 !important;
  }
  .site-navbar .site-nav ul li a:hover {
    color: #333 !important;
    background: rgba(0,0,0,0.05);
  }
  .site-navbar .site-nav ul li a.active {
    color: #333 !important;
  }
  .site-navbar .site-nav ul li.search-toggle-item {
    margin-left: 0.5rem;
  }
  .site-navbar .site-nav ul li.search-toggle-item .search-toggle-btn {
    padding: 0.3rem 0.5rem;
    color: #333 !important;
  }
  .site-navbar .site-nav ul li.search-toggle-item .search-toggle-btn i {
    font-size: 0.9rem;
  }
}
.site-footer {
  margin-top: auto;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  color: #6c757d;
  position: relative;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.8rem 2rem;
  position: relative;
  z-index: 1;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.footer-info .footer-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.1rem 0;
  color: #495057;
}
.footer-info .footer-subtitle {
  font-size: 0.8rem;
  color: #6c757d;
  margin: 0;
  font-style: italic;
}
.footer-stats {
  display: flex;
  gap: 1.5rem;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}
.stat-item i {
  font-size: 1rem;
  color: #6c757d;
}
.stat-item .stat-number {
  font-size: 1rem;
  font-weight: 600;
  color: #495057;
}
.stat-item .stat-label {
  color: #6c757d;
}
.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.copyright-text p {
  margin: 0.1rem 0;
  color: #6c757d;
  font-size: 0.8rem;
}
.copyright-text .author-link {
  color: #495057;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.copyright-text .author-link:hover {
  color: #1565c0;
}
.copyright-text .powered-by {
  font-size: 0.75rem;
  color: #adb5bd;
}
.copyright-text .powered-by a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.3s ease;
}
.copyright-text .powered-by a:hover {
  color: #1565c0;
}
.footer-social {
  display: flex;
  gap: 0.8rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #e9ecef;
  color: #6c757d;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
}
.footer-social a:hover {
  background: #1565c0;
  color: #fff;
  transform: translateY(-1px);
}
.footer-social a i {
  font-size: 0.9rem;
}
@media (max-width: 800px) {
  .footer-container {
    padding: 1rem;
  }
  .footer-main {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer-stats {
    gap: 1rem;
  }
  .footer-copyright {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
  .footer-social {
    justify-content: center;
  }
}
@media (max-width: 500px) {
  .footer-container {
    padding: 0.8rem 0.5rem;
  }
  .footer-info .footer-title {
    font-size: 1rem;
  }
  .footer-info .footer-subtitle {
    font-size: 0.75rem;
  }
  .footer-stats {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .stat-item {
    font-size: 0.75rem;
    justify-content: center;
  }
  .stat-item i {
    font-size: 0.9rem;
  }
  .stat-item .stat-number {
    font-size: 0.9rem;
  }
  .stat-item .stat-label {
    font-size: 0.75rem;
  }
  .copyright-text p {
    font-size: 0.7rem;
  }
  .copyright-text .powered-by {
    font-size: 0.65rem;
  }
  .footer-social {
    gap: 0.6rem;
  }
  .footer-social a {
    width: 28px;
    height: 28px;
  }
  .footer-social a i {
    font-size: 0.85rem;
  }
}
.tm-header,
.tm-nav {
  width: 100%;
}
.tm-header-content,
.tm-nav-content {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .tm-header-content,
  .tm-nav-content {
    padding: 0 15px;
  }
}
@media (max-width: 500px) {
  .tm-header-content,
  .tm-nav-content {
    padding: 0 10px;
  }
}
.home-banner {
  width: calc(100% - 40px);
  max-width: 1200px;
  height: 90vh;
  min-height: 650px;
  max-height: 900px;
  margin: 80px auto 40px auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(196,113,237,0.3);
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box;
}
.home-banner .banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.home-banner-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 40px 20px;
}
.home-banner-inner .site-title {
  margin: 0 0 20px 0;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.home-banner-inner .site-subtitle {
  margin: 0 0 40px 0;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.95;
  line-height: 1.6;
  text-shadow: 0 1px 5px rgba(0,0,0,0.3);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.home-banner-inner .intro-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-banner-inner .intro-buttons .intro-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255,255,255,0.9);
  border: 2px solid #fff;
  border-radius: 30px;
  color: #333;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.home-banner-inner .intro-buttons .intro-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102,126,234,0.3), transparent);
  transition: left 0.6s ease;
}
.home-banner-inner .intro-buttons .intro-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.home-banner-inner .intro-buttons .intro-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: #fff;
  box-shadow: 0 8px 25px rgba(102,126,234,0.4);
  transform: translateY(-3px) scale(1.05);
}
.home-banner-inner .intro-buttons .intro-btn:hover::before {
  left: 100%;
}
.home-banner-inner .intro-buttons .intro-btn:hover i {
  transform: translateY(-1px);
}
.home-banner-inner .intro-buttons .intro-btn:active {
  transform: translateY(-1px) scale(1.02);
  transition: all 0.1s ease;
}
@media (max-width: 800px) {
  .home-banner {
    width: calc(100% - 30px);
    max-width: calc(100vw - 30px) !important;
    height: 80vh;
    min-height: 550px;
    max-height: 700px;
    margin: 75px auto 30px auto;
    border-radius: 16px;
  }
  .home-banner .home-banner-inner {
    padding: 30px 20px;
    max-width: 600px;
  }
  .home-banner .home-banner-inner .site-title {
    font-size: 2.2rem;
  }
  .home-banner .home-banner-inner .site-subtitle {
    font-size: 1rem;
    margin-bottom: 35px;
  }
  .home-banner .home-banner-inner .intro-btn {
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}
@media (max-width: 500px) {
  .home-banner {
    width: calc(100% - 16px);
    max-width: calc(100vw - 16px) !important;
    height: 60vh;
    min-height: 350px;
    max-height: 450px;
    margin: 60px auto 16px auto;
    border-radius: 8px;
  }
  .home-banner .home-banner-inner {
    padding: 16px 12px;
    max-width: 95%;
  }
  .home-banner .home-banner-inner .site-title {
    font-size: 1.6rem;
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .home-banner .home-banner-inner .site-subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
  }
  .home-banner .home-banner-inner .intro-buttons {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .home-banner .home-banner-inner .intro-buttons .intro-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
    width: auto;
    min-width: 140px;
    text-align: center;
  }
}
#card-toc {
  position: fixed;
  top: 120px;
  right: 40px;
  width: 260px;
  max-width: 260px;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  border: 1px solid var(--border-color, #e2e8f0);
  z-index: 1005;
  max-height: calc(100vh - 200px);
  overflow: hidden;
  transition: all 0.3s ease;
}
#card-toc .item-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #f0f0f0);
  background: var(--card-header-bg, #fafafa);
  border-radius: 12px 12px 0 0;
}
#card-toc .item-headline i {
  color: var(--primary-color, #425aef);
  margin-right: 8px;
  font-size: 14px;
}
#card-toc .item-headline span:first-of-type {
  font-weight: 600;
  color: var(--text-color, #2d3748);
  font-size: 14px;
  flex: 1;
}
#card-toc .item-headline .toc-percentage {
  font-size: 12px;
  color: var(--secondary-text, #718096);
  font-weight: 500;
  min-width: 35px;
  text-align: right;
}
.toc-content {
  padding: 12px 0;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}
.toc-content::-webkit-scrollbar {
  width: 4px;
}
.toc-content::-webkit-scrollbar-track {
  background: transparent;
}
.toc-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
}
.toc-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}
.toc-content ol,
.toc-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-content ol li,
.toc-content ul li {
  position: relative;
}
.toc-content ol li a,
.toc-content ul li a {
  display: block;
  padding: 8px 20px;
  color: var(--secondary-text, #4a5568);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 0;
  transition: all 0.3s ease;
  position: relative;
}
.toc-content ol li a:not(.active),
.toc-content ul li a:not(.active) {
  opacity: 0.6;
  filter: blur(0.5px);
}
.toc-content ol li a:hover,
.toc-content ul li a:hover {
  color: var(--primary-color, #425aef);
  background: rgba(66,90,239,0.05);
  opacity: 1;
  filter: blur(0);
  transform: translateX(2px);
}
.toc-content ol li a.active,
.toc-content ul li a.active {
  color: var(--primary-color, #425aef);
  background: rgba(66,90,239,0.1);
  font-weight: 600;
  opacity: 1;
  filter: blur(0);
  border-radius: 8px;
  margin: 0 12px;
}
.toc-content ol li a.active::before,
.toc-content ul li a.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--primary-color, #425aef);
  border-radius: 2px;
}
.toc-content ol li.toc-level-1 a,
.toc-content ul li.toc-level-1 a {
  padding-left: 20px;
}
.toc-content ol li.toc-level-2 a,
.toc-content ul li.toc-level-2 a {
  padding-left: 20px;
}
.toc-content ol li.toc-level-3 a,
.toc-content ul li.toc-level-3 a {
  padding-left: 32px;
}
.toc-content ol li.toc-level-4 a,
.toc-content ul li.toc-level-4 a {
  padding-left: 44px;
}
.toc-content ol li.toc-level-5 a,
.toc-content ul li.toc-level-5 a {
  padding-left: 56px;
}
.toc-content ol li.toc-level-6 a,
.toc-content ul li.toc-level-6 a {
  padding-left: 68px;
}
:hover .toc-content a:not(.active) {
  opacity: 1;
  filter: blur(0);
}
@media (max-width: 1400px) and (min-width: 901px) {
  #card-toc {
    right: 20px;
    width: 240px;
  }
}
@media (max-width: 900px) {
  #card-toc {
    display: block;
    position: fixed;
    right: 20px;
    bottom: 90px /* 调高一点，避免遮挡设置按钮 */;
    left: auto;
    top: auto;
    width: 280px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 180px) /* 调整最大高度 */;
    z-index: 1050 /* 降低z-index，让设置按钮在上面 */;
    transform-origin: right bottom;
    transform: scale(1);
    opacity: 1;
  }
  #card-toc.hidden {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  #card-toc .toc-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  #card-toc .toc-content a {
    opacity: 1 !important;
    filter: none !important;
  }
  #card-toc .toc-content a.active {
    background: none !important;
    color: var(--secondary-text, #4a5568) !important;
    font-weight: normal !important;
  }
  #card-toc .toc-content a.active::before {
    display: none !important;
  }
  #card-toc.collapsed .toc-content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
  }
  #card-toc .item-headline {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #card-toc .item-headline::after {
    content: "▲";
    font-size: 12px;
    color: var(--secondary-text, #718096);
    transition: transform 0.3s ease;
  }
  #card-toc.collapsed .item-headline::after {
    content: "▼";
    transform: rotate(0deg);
  }
}
@media (prefers-color-scheme: dark) {
  #card-toc {
    --card-bg: #1a1a1a;
    --card-header-bg: #2a2a2a;
    --border-color: #333;
    --text-color: #e2e8f0;
    --secondary-text: #a0aec0;
    --primary-color: #6366f1;
  }
}
@-moz-keyframes tocSlideIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes tocSlideIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes tocSlideIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes tocSlideIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.posts-grid-colorful .post-card-colorful {
  margin-bottom: 2.5rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.posts-grid-colorful .post-card-colorful .card {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.posts-grid-colorful .post-card-colorful .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="1"] {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="2"] {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="3"] {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="4"] {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="5"] {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="6"] {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="7"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="8"] {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
}
.posts-grid-colorful .post-card-colorful .card-content-full {
  padding: 2.5rem;
  color: #fff;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}
.posts-grid-colorful .post-card-colorful .card-content-full .card-title {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}
.posts-grid-colorful .post-card-colorful .post-content {
  text-align: center;
}
.posts-grid-colorful .post-card-colorful .post-excerpt {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.posts-grid-colorful .post-card-colorful .post-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  margin-top: auto;
}
.posts-grid-colorful .post-card-colorful .post-date {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.posts-grid-colorful .post-card-colorful .post-categories {
  display: flex;
  gap: 0.5rem;
}
.posts-grid-colorful .post-card-colorful .category-link {
  background: rgba(255,255,255,0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}
.posts-grid-colorful .post-card-colorful .category-link:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .posts-grid-colorful .post-card-colorful {
    margin-bottom: 0;
  }
  .posts-grid-colorful .post-card-colorful .card-content-full {
    padding: 1.5rem;
    min-height: 240px;
  }
  .posts-grid-colorful .post-card-colorful .card-title {
    font-size: 1.3rem;
  }
  .posts-grid-colorful .post-card-colorful .post-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.posts-grid-colorful .post-card-colorful .card-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.posts-grid-colorful .post-card-colorful .card-title-link:hover {
  text-decoration: none;
  color: inherit;
}
.posts-grid-colorful .post-card-colorful .card-title-link .card-title {
  transition: all 0.3s ease;
}
.posts-grid-colorful .post-card-colorful .card-title-link:hover .card-title {
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.posts-grid-colorful .post-card-colorful .read-more-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.posts-grid-colorful .post-card-colorful .read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.posts-grid-colorful .post-card-colorful .read-more-btn i {
  font-size: 0.85rem;
  opacity: 0.9;
}
.posts-grid-colorful .post-card-colorful .read-more-btn:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #fff;
  text-decoration: none;
}
.posts-grid-colorful .post-card-colorful .read-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="1"] .read-more-btn:hover {
  background: rgba(240,147,251,0.4);
  border-color: rgba(240,147,251,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="2"] .read-more-btn:hover {
  background: rgba(79,172,254,0.4);
  border-color: rgba(79,172,254,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="3"] .read-more-btn:hover {
  background: rgba(67,233,123,0.4);
  border-color: rgba(67,233,123,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="4"] .read-more-btn:hover {
  background: rgba(250,112,154,0.4);
  border-color: rgba(250,112,154,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="5"] .read-more-btn:hover {
  background: rgba(168,237,234,0.4);
  border-color: rgba(168,237,234,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="6"] .read-more-btn:hover {
  background: rgba(255,154,158,0.4);
  border-color: rgba(255,154,158,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="7"] .read-more-btn:hover {
  background: rgba(255,183,77,0.4);
  border-color: rgba(255,183,77,0.6);
}
.posts-grid-colorful .post-card-colorful .card[data-gradient="8"] .read-more-btn:hover {
  background: rgba(102,126,234,0.4);
  border-color: rgba(102,126,234,0.6);
}
.sidebar {
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.sidebar section {
  margin-bottom: 20px;
}
.sidebar section:last-child {
  margin-bottom: 0;
}
.sidebar .widget-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 800px) {
  .sidebar {
    padding: 12px;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 500px) {
  .sidebar {
    padding: 10px;
    margin-bottom: 1rem;
  }
  .sidebar .widget-title {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  .sidebar section {
    margin-bottom: 15px;
  }
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem 0;
}
.pagination a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pagination a:hover {
  background: #06c;
  color: #fff;
  border-color: #06c;
}
.pagination .page-number {
  color: #666;
}
@media (max-width: 500px) {
  .pagination {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .pagination a {
    padding: 8px 12px;
    font-size: 0.9rem;
    justify-content: center;
  }
  .pagination .page-number {
    font-size: 0.85rem;
  }
}
.widget-tags {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.widget-tags:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.widget-tags .widget-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #484853;
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.widget-tags .widget-title i {
  color: #06c;
  font-size: 1.6rem;
}
.widget-tags .tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto 0.5rem;
  max-width: 850px;
}
.widget-tags .tag-list .tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none !important;
  min-height: 32px;
  color: #fff;
  position: relative;
  border-bottom: none !important;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+1) {
  background: #667eea;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+2) {
  background: #f093fb;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+3) {
  background: #4facfe;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+4) {
  background: #43e97b;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+5) {
  background: #fa709a;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+6) {
  background: #30cfd0;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+7) {
  background: #a8edea;
  color: #333;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+8) {
  background: #ff9a9e;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+9) {
  background: #ffecd2;
  color: #333;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+10) {
  background: #ff6e7f;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+11) {
  background: #e0c3fc;
}
.widget-tags .tag-list .tag-chip:nth-child(12n+12) {
  background: #f8b500;
  color: #333;
}
.widget-tags .tag-list .tag-chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-decoration: none !important;
  border-bottom: none !important;
}
.widget-tags .tag-list .tag-chip .tag-count {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  background: #06c;
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}
.categories-page {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.categories-page .tm-category-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  padding: 2.5rem 2rem;
}
.categories-page .categories-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #484853;
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.categories-page .categories-title i {
  color: #06c;
}
.categories-page .category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.categories-page .category-list .category-item {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  text-decoration: none !important;
  border-radius: 20px;
  font-weight: 500;
  min-height: 32px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-bottom: none !important;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.categories-page .category-list .category-item:nth-child(12n+1) {
  background: #667eea;
}
.categories-page .category-list .category-item:nth-child(12n+2) {
  background: #f093fb;
}
.categories-page .category-list .category-item:nth-child(12n+3) {
  background: #4facfe;
}
.categories-page .category-list .category-item:nth-child(12n+4) {
  background: #43e97b;
}
.categories-page .category-list .category-item:nth-child(12n+5) {
  background: #fa709a;
}
.categories-page .category-list .category-item:nth-child(12n+6) {
  background: #30cfd0;
}
.categories-page .category-list .category-item:nth-child(12n+7) {
  background: #a8edea;
  color: #333;
}
.categories-page .category-list .category-item:nth-child(12n+8) {
  background: #ff9a9e;
}
.categories-page .category-list .category-item:nth-child(12n+9) {
  background: #ffecd2;
  color: #333;
}
.categories-page .category-list .category-item:nth-child(12n+10) {
  background: #ff6e7f;
}
.categories-page .category-list .category-item:nth-child(12n+11) {
  background: #e0c3fc;
}
.categories-page .category-list .category-item:nth-child(12n+12) {
  background: #f8b500;
  color: #333;
}
.categories-page .category-list .category-item:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-decoration: none !important;
  border-bottom: none !important;
}
@media (max-width: 800px) {
  .widget-tags,
  .categories-page {
    margin: 1rem;
    padding: 1.5rem;
  }
  .widget-tags .tag-list {
    gap: 0.5rem;
  }
  .categories-page .category-list {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}
@media (max-width: 500px) {
  .widget-tags,
  .categories-page {
    margin: 0.5rem;
    padding: 1rem;
  }
  .widget-tags .widget-title,
  .widget-tags .categories-title {
    font-size: 1.5rem;
  }
  .widget-tags .tag-list .tag-chip {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    min-height: 28px;
  }
  .categories-page .category-item {
    padding: 0.35rem 0.8rem;
    min-height: 28px;
  }
}
body.eye-care-mode .widget-tags {
  background: #f7f3e9;
}
body.eye-care-mode .categories-page .categories-title {
  border-bottom-color: #9c27b0;
}
body.eye-care-mode .categories-page .category-list .category-item {
  border-left-color: #9c27b0;
}
body.eye-care-mode .categories-page .category-list .category-item:hover {
  background: linear-gradient(135deg, rgba(156,39,176,0.1) 0%, rgba(156,39,176,0.1) 100%);
  color: #9c27b0;
}
.tag-chips .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none !important;
  min-height: 32px;
  color: #fff;
  margin: 0.5rem;
  position: relative;
  border-bottom: none !important;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tag-chips .chip:nth-child(12n+1) {
  background: #667eea;
}
.tag-chips .chip:nth-child(12n+2) {
  background: #f093fb;
}
.tag-chips .chip:nth-child(12n+3) {
  background: #4facfe;
}
.tag-chips .chip:nth-child(12n+4) {
  background: #43e97b;
}
.tag-chips .chip:nth-child(12n+5) {
  background: #fa709a;
}
.tag-chips .chip:nth-child(12n+6) {
  background: #30cfd0;
}
.tag-chips .chip:nth-child(12n+7) {
  background: #a8edea;
  color: #333;
}
.tag-chips .chip:nth-child(12n+8) {
  background: #ff9a9e;
}
.tag-chips .chip:nth-child(12n+9) {
  background: #ffecd2;
  color: #333;
}
.tag-chips .chip:nth-child(12n+10) {
  background: #ff6e7f;
}
.tag-chips .chip:nth-child(12n+11) {
  background: #e0c3fc;
}
.tag-chips .chip:nth-child(12n+12) {
  background: #f8b500;
  color: #333;
}
.tag-chips .chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-decoration: none !important;
  border-bottom: none !important;
}
.tag-chips .chip span {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}
.sidebar-widget {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  overflow: hidden;
  transition: all 0.3s ease;
}
.sidebar-widget:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.sidebar-widget .widget-header {
  background: linear-gradient(135deg, #06c, #0075eb);
  color: #fff;
  padding: 1rem 1.5rem;
}
.sidebar-widget .widget-header .widget-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-widget .widget-header .widget-title i {
  font-size: 0.9rem;
}
.sidebar-widget .widget-content {
  padding: 1.5rem;
}
.author-card .author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.author-card .author-info .author-avatar {
  flex-shrink: 0;
}
.author-card .author-info .author-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0a85ff;
}
.author-card .author-info .author-avatar .avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0a85ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06c;
}
.author-card .author-info .author-avatar .avatar-placeholder i {
  font-size: 1.5rem;
}
.author-card .author-info .author-details {
  flex: 1;
}
.author-card .author-info .author-details .author-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: #333;
}
.author-card .author-info .author-details .author-description {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}
.author-card .author-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.author-card .author-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
}
.author-card .author-social a:hover {
  background: #06c;
  color: #fff;
  transform: translateY(-2px);
}
.recent-posts .recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recent-posts .recent-posts-list .recent-post-item {
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.recent-posts .recent-posts-list .recent-post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.recent-posts .recent-posts-list .recent-post-item .post-info .post-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.recent-posts .recent-posts-list .recent-post-item .post-info .post-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}
.recent-posts .recent-posts-list .recent-post-item .post-info .post-title a:hover {
  color: #06c;
}
.recent-posts .recent-posts-list .recent-post-item .post-info .post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: #999;
}
.recent-posts .recent-posts-list .recent-post-item .post-info .post-meta .post-date,
.recent-posts .recent-posts-list .recent-post-item .post-info .post-meta .post-category {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.recent-posts .recent-posts-list .recent-post-item .post-info .post-meta .post-date i,
.recent-posts .recent-posts-list .recent-post-item .post-info .post-meta .post-category i {
  font-size: 0.7rem;
}
.tag-cloud .tag-cloud-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.tag-cloud .tag-cloud-container .tag-cloud-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  background: #f5f5f5;
  color: #666;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}
.tag-cloud .tag-cloud-container .tag-cloud-item:hover {
  background: #06c;
  color: #fff;
  transform: translateY(-1px);
}
.tag-cloud .tag-cloud-container .tag-cloud-item .tag-count {
  font-size: 0.7rem;
  opacity: 0.8;
}
.tag-cloud .tag-cloud-container .tag-cloud-item.tag-size-1 {
  font-size: 0.75rem;
}
.tag-cloud .tag-cloud-container .tag-cloud-item.tag-size-2 {
  font-size: 0.8rem;
}
.tag-cloud .tag-cloud-container .tag-cloud-item.tag-size-3 {
  font-size: 0.85rem;
}
.tag-cloud .tag-cloud-container .tag-cloud-item.tag-size-4 {
  font-size: 0.9rem;
}
.tag-cloud .tag-cloud-container .tag-cloud-item.tag-size-5 {
  font-size: 0.95rem;
  font-weight: 600;
}
.tag-cloud .tag-cloud-more {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.tag-cloud .tag-cloud-more .view-all-tags {
  color: #06c;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.tag-cloud .tag-cloud-more .view-all-tags:hover {
  color: #005cb8;
}
.no-posts,
.no-tags {
  text-align: center;
  color: #999;
  font-size: 0.9rem;
  padding: 2rem 1rem;
}
@media (max-width: 800px) {
  .sidebar-widget {
    margin-bottom: 1.5rem;
  }
  .sidebar-widget .widget-content {
    padding: 1rem;
  }
  .author-card .author-info {
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }
}
@media (max-width: 500px) {
  .sidebar-widget {
    margin-bottom: 1rem;
  }
  .sidebar-widget .widget-header {
    padding: 0.8rem 1rem;
  }
  .sidebar-widget .widget-content {
    padding: 0.8rem;
  }
  .popular-posts .popular-post-item {
    gap: 0.8rem;
  }
  .author-card .author-social {
    gap: 0.8rem;
  }
  .author-card .author-social a {
    width: 32px;
    height: 32px;
  }
}
body.eye-care-mode .sidebar-widget .widget-header {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
}
body.eye-care-mode .author-card .author-info .author-avatar img,
body.eye-care-mode .author-card .author-info .author-avatar .avatar-placeholder {
  border-color: rgba(0,102,204,0.3);
}
body.eye-care-mode .author-card .author-info .author-avatar .avatar-placeholder {
  background: rgba(0,102,204,0.1);
  color: #06c;
}
body.eye-care-mode .author-card .author-social a:hover {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
}
body.eye-care-mode .recent-posts .recent-posts-list .recent-post-item .post-info .post-title a:hover {
  color: #06c;
}
body.eye-care-mode .tag-cloud .tag-cloud-container .tag-cloud-item:hover {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
}
body.eye-care-mode .tag-cloud .tag-cloud-more .view-all-tags {
  color: #06c;
}
body.eye-care-mode .tag-cloud .tag-cloud-more .view-all-tags:hover {
  color: #05b;
}
.settings-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1011;
}
.settings-panel .settings-toggle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 8px 25px rgba(102,126,234,0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-panel .settings-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(102,126,234,0.4);
}
.settings-panel .settings-toggle.active {
  transform: rotate(45deg) translateY(-3px);
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 12px 35px rgba(240,147,251,0.4);
}
.settings-panel .settings-options {
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  padding: 12px;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-panel .settings-options.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.settings-panel .settings-options .settings-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
.settings-panel .settings-options .settings-item:hover {
  background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
  color: #667eea;
  transform: translateX(3px);
}
.settings-panel .settings-options .settings-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.settings-panel .settings-options .settings-item i {
  margin-right: 12px;
  width: 18px;
  text-align: center;
  font-size: 16px;
}
.settings-panel .settings-options .settings-item span {
  font-weight: 500;
}
.settings-panel .settings-options .settings-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
  margin: 8px 0;
}
body.eye-care-mode .settings-panel .settings-toggle {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
  box-shadow: rgba(0,0,0,0.08);
}
body.eye-care-mode .settings-panel .settings-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0,102,204,0.4);
  background: linear-gradient(135deg, #38d 0%, #6ba3e8 100%);
}
body.eye-care-mode .settings-panel .settings-toggle.active {
  transform: rotate(45deg) translateY(-3px);
  background: linear-gradient(135deg, #38d 0%, #6ba3e8 100%);
  box-shadow: 0 12px 35px rgba(0,102,204,0.4);
}
body.eye-care-mode .settings-panel .settings-options {
  background: #fff;
  border: 1px solid rgba(0,102,204,0.1);
  box-shadow: 0 20px 60px rgba(0,102,204,0.15);
}
body.eye-care-mode .settings-panel .settings-options .settings-item {
  color: #333;
}
body.eye-care-mode .settings-panel .settings-options .settings-item:hover {
  background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(156,39,176,0.1) 100%);
  color: #06c;
}
body.eye-care-mode .settings-panel .settings-options .settings-item.active {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
  color: #fff;
}
body.eye-care-mode .settings-panel .settings-options .settings-item.active:hover {
  background: linear-gradient(135deg, #05b 0%, #3a7bd5 100%);
}
body.eye-care-mode .settings-panel .settings-options .settings-divider {
  background: linear-gradient(90deg, transparent, rgba(0,102,204,0.15), transparent);
}
@media (max-width: 800px) {
  .settings-panel {
    right: 15px;
    bottom: 15px;
  }
  .settings-panel .settings-toggle {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
  .settings-panel .settings-options {
    right: 0;
    bottom: 60px;
    min-width: 120px;
  }
  .settings-panel .settings-options .settings-item {
    padding: 10px 14px;
    font-size: 13px;
  }
  .settings-panel .settings-options .settings-item i {
    font-size: 14px;
    margin-right: 10px;
  }
}
.tm-index-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 30px;
  gap: 40px;
  box-sizing: border-box;
  overflow-x: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}
.tm-main-list {
  flex: 1;
  min-width: 0;
}
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  width: 100%;
}
.posts-grid-colorful {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  width: 100%;
}
.no-posts {
  text-align: center;
  padding: 4rem 2rem;
  color: #666;
}
.no-posts p {
  font-size: 1.1rem;
  margin: 0;
}
.tm-sidebar {
  width: 280px;
  max-width: 280px;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .tm-index-container {
    flex-direction: column;
    padding: 30px 20px;
    gap: 25px;
    max-width: 100% !important;
    width: 100% !important;
  }
  .tm-main-list {
    width: 100%;
  }
  .tm-main-list::before {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #5082ee, #c471ed);
    border-radius: 2px;
    margin: 0 auto 2rem auto;
  }
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 700px;
    margin: 0 auto;
  }
  .posts-grid-colorful {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    max-width: 600px;
    margin: 0 auto;
  }
  .posts-grid {
    position: relative;
  }
  .posts-grid::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: -2rem;
    right: -2rem;
    bottom: -2rem;
    background: linear-gradient(135deg, rgba(80,130,238,0.03) 0%, rgba(196,113,237,0.03) 50%, rgba(80,130,238,0.03) 100%);
    border-radius: 24px;
    z-index: -1;
  }
  .tm-sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
}
@media (max-width: 500px) {
  .tm-index-container {
    padding: 12px 8px;
    gap: 16px;
    max-width: 100% !important;
    width: 100% !important;
  }
  .posts-grid {
    gap: 2.5rem;
    max-width: 100%;
    margin: 0;
  }
  .posts-grid-colorful {
    gap: 1.6rem;
    max-width: 100%;
    margin: 0;
  }
}
@media (min-width: 900px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .posts-grid-colorful {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1.5rem;
  }
}
.post-card {
  margin-top: 20px;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: none !important;
  border: 1px solid #f0f0f0;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}
@media (min-width: 1400px) {
  .post-wrapper-with-toc {
    margin-right: 320px; /* 为右侧目录（TOC）预留空间 */
  }
}
@media (max-width: 1399px) and (min-width: 901px) {
  .post-wrapper-with-toc {
    margin-right: 280px; /* 为右侧目录（TOC）预留空间 */
  }
}
@media (max-width: 768px) {
  .post-wrapper-with-toc {
/* 平板及小屏优化 */
    padding: 1.5rem;
    margin: 20px 5px;
  }
}
@media (max-width: 500px) {
  .post-wrapper-with-toc {
/* 手机端优化 */
    padding: 1rem;
    margin: 20px 8px;
  }
}
.post-header {
  margin-bottom: 2rem;
}
.post-header .post-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}
.post-header .post-meta {
  color: #718096;
  font-size: 0.9rem;
}
.post-header .post-meta a {
  color: #3182ce;
  text-decoration: none;
}
.post-header .post-meta a:hover {
  text-decoration: underline;
}
.post-content {
  font-size: 1.08rem;
  color: #293250;
  line-height: 1.85;
  margin: 2.2rem 0 0 0;
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin: 2.1rem 0 1rem 0;
  font-weight: 700;
  color: #244478;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.post-content p {
  margin: 0.8em 0;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.post-content a {
  color: #3a6fd7;
  text-decoration: underline;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.post-content a:hover {
  color: #194ab7;
}
.post-content ul,
.post-content ol {
  margin: 1.1em 0 1.1em 2.2em;
  padding: 0;
}
.post-content blockquote {
  background: #f8fafc;
  border-left: 4px solid #c4dbf7;
  color: #476699;
  margin: 1.2em 0;
  padding: 0.85em 1.3em;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.post-content code {
  background: #f2f3f8;
  border-radius: 6px;
  padding: 0.15em 0.4em;
  font-size: 0.97em;
  color: #d6336c;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.post-content pre {
  background: #222e3a;
  color: #fff;
  border-radius: 10px;
  padding: 1.1em 1.5em;
  font-size: 0.99em;
  margin: 1.5em 0;
  max-width: 100% !important;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  white-space: pre;
}
.post-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  margin: 1.5em 0;
}
.post-content table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  overflow-x: auto !important;
  display: block !important;
  margin: 1.5em 0;
}
@media (max-width: 768px) {
  .post-content {
    font-size: 1rem;
    margin: 1.5rem 0 0 0;
  }
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6 {
    margin: 1.5rem 0 0.8rem 0;
  }
  .post-content pre {
    padding: 0.8em 1em;
    font-size: 0.9em;
  }
  .post-content blockquote {
    padding: 0.6em 1em;
  }
}
@media (max-width: 900px) {
  .post-wrapper-with-toc {
    margin-right: 0 !important;
  }
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
}
.post-date {
  color: #666;
}
.post-categories,
.post-tags {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.category-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #333;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.08);
  min-height: 32px;
}
.category-link:hover {
  background: linear-gradient(135deg, #39f, #06c) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,102,204,0.2);
  text-decoration: none !important;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #333;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.08);
  min-height: 32px;
}
.chip:hover {
  background: linear-gradient(135deg, #39f, #06c) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,102,204,0.2);
  text-decoration: none !important;
}
@media (max-width: 768px) {
  .post-meta {
    font-size: 0.85rem;
  }
  .category-link,
  .chip {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    min-height: 28px;
  }
}
.archive-page {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.archive-page .archive-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #06c;
}
.archive-page .archive-header .archive-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.archive-page .archive-header .archive-title i {
  color: #06c;
}
.archive-page .archive-header .archive-title .archive-name {
  color: #06c;
  font-weight: 600;
}
.archive-page .archive-header .archive-description {
  color: #666;
  font-size: 1rem;
  margin: 0;
}
.archive-page .archive-content .posts-list .post-item {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.archive-page .archive-content .posts-list .post-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.archive-page .archive-content .posts-list .post-item .post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #666;
}
.archive-page .archive-content .posts-list .post-item .post-meta .post-date {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.archive-page .archive-content .posts-list .post-item .post-meta .post-date:before {
  content: '\f017';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
.archive-page .archive-content .posts-list .post-item .post-meta .post-categories {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.archive-page .archive-content .posts-list .post-item .post-title {
  margin: 0 0 1rem 0;
  font-size: 1.3rem;
  line-height: 1.4;
}
.archive-page .archive-content .posts-list .post-item .post-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}
.archive-page .archive-content .posts-list .post-item .post-title a:hover {
  color: #06c;
}
.archive-page .archive-content .posts-list .post-item .post-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.archive-page .archive-content .posts-list .post-item .post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.archive-page .archive-content .posts-list .post-item .post-footer .post-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.archive-page .archive-content .posts-list .post-item .post-footer .post-tags i {
  color: #999;
}
.archive-page .archive-content .posts-list .post-item .post-footer .post-tags .tag-link {
  color: #666;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  background: #f5f5f5;
  border-radius: 12px;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}
.archive-page .archive-content .posts-list .post-item .post-footer .post-tags .tag-link:hover {
  background: #06c;
  color: #fff;
}
.archive-page .archive-content .posts-list .post-item .post-footer .read-more {
  color: #06c;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid #06c;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.archive-page .archive-content .posts-list .post-item .post-footer .read-more:hover {
  background: #06c;
  color: #fff;
}
.archive-page .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem 0;
}
.archive-page .pagination .pagination-prev,
.archive-page .pagination .pagination-next {
  color: #06c;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #06c;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.archive-page .pagination .pagination-prev:hover,
.archive-page .pagination .pagination-next:hover {
  background: #06c;
  color: #fff;
}
.archive-page .pagination .pagination-info {
  color: #666;
  font-size: 0.9rem;
}
.archive-page .no-posts {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
}
.archive-page .no-posts i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}
.archive-page .no-posts p {
  font-size: 1.1rem;
}
.archive-page .archive-navigation {
  margin-top: 2rem;
  text-align: center;
}
.archive-page .archive-navigation .back-link {
  color: #06c;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #06c;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.archive-page .archive-navigation .back-link:hover {
  background: #06c;
  color: #fff;
}
@media (max-width: 800px) {
  .archive-page {
    margin: 1rem;
    padding: 1.5rem;
  }
  .archive-page .archive-header .archive-title {
    font-size: 1.6rem;
    flex-direction: column;
    gap: 0.3rem;
  }
  .archive-page .posts-list .post-item {
    padding: 1rem;
  }
  .archive-page .posts-list .post-item .post-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .archive-page .pagination {
    flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 500px) {
  .archive-page {
    margin: 0.5rem;
    padding: 1rem;
  }
  .archive-page .archive-header .archive-title {
    font-size: 1.4rem;
  }
  .archive-page .posts-list .post-item .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .archive-page .posts-list .post-item .post-title {
    font-size: 1.1rem;
  }
}
body.eye-care-mode .archive-page .posts-list .post-item .post-footer .read-more {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(0,102,204,0.3);
}
body.eye-care-mode .archive-page .posts-list .post-item .post-footer .read-more:hover {
  background: linear-gradient(135deg, #38d 0%, #6ba3e8 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,102,204,0.4);
}
body.eye-care-mode .archive-page .archive-navigation .back-link {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(0,102,204,0.3);
}
body.eye-care-mode .archive-page .archive-navigation .back-link:hover {
  background: linear-gradient(135deg, #38d 0%, #6ba3e8 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,102,204,0.4);
}
.tm-category-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.tm-category-container:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.tag-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #484853;
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.tag-title i {
  color: #06c;
  font-size: 1.6rem;
}
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto 0.5rem;
  max-width: 850px;
}
.tm-category-container .chip,
.tag-chips .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  text-decoration: none !important;
  min-height: 32px;
  color: #fff;
  border-bottom: none !important;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tm-category-container .chip:nth-child(12n+1),
.tag-chips .chip:nth-child(12n+1) {
  background: #667eea !important;
}
.tm-category-container .chip:nth-child(12n+2),
.tag-chips .chip:nth-child(12n+2) {
  background: #f093fb !important;
}
.tm-category-container .chip:nth-child(12n+3),
.tag-chips .chip:nth-child(12n+3) {
  background: #4facfe !important;
}
.tm-category-container .chip:nth-child(12n+4),
.tag-chips .chip:nth-child(12n+4) {
  background: #43e97b !important;
}
.tm-category-container .chip:nth-child(12n+5),
.tag-chips .chip:nth-child(12n+5) {
  background: #fa709a !important;
}
.tm-category-container .chip:nth-child(12n+6),
.tag-chips .chip:nth-child(12n+6) {
  background: #30cfd0 !important;
}
.tm-category-container .chip:nth-child(12n+7),
.tag-chips .chip:nth-child(12n+7) {
  background: #a8edea !important;
  color: #333 !important;
}
.tm-category-container .chip:nth-child(12n+8),
.tag-chips .chip:nth-child(12n+8) {
  background: #ff9a9e !important;
}
.tm-category-container .chip:nth-child(12n+9),
.tag-chips .chip:nth-child(12n+9) {
  background: #ffecd2 !important;
  color: #333 !important;
}
.tm-category-container .chip:nth-child(12n+10),
.tag-chips .chip:nth-child(12n+10) {
  background: #ff6e7f !important;
}
.tm-category-container .chip:nth-child(12n+11),
.tag-chips .chip:nth-child(12n+11) {
  background: #e0c3fc !important;
}
.tm-category-container .chip:nth-child(12n+12),
.tag-chips .chip:nth-child(12n+12) {
  background: #f8b500 !important;
  color: #333 !important;
}
.tm-category-container .chip:hover,
.tag-chips .chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-decoration: none !important;
  border-bottom: none !important;
}
.tm-category-container .chip.chip-active,
.tag-chips .chip.chip-active {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
}
.tag-length {
  margin-left: 0.6rem;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.3);
  padding: 0.3rem 0.6rem;
  border-radius: 14px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}
.chip-default .tag-length {
  background: #06c;
  color: #fff;
}
.empty-tip {
  text-align: center;
  color: #808091;
  font-size: 1.1rem;
  padding: 2rem;
  font-style: italic;
}
.tm-category-radar-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.tm-category-radar {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  padding: 2rem;
  min-height: 300px;
  transition: all 0.3s ease;
}
.tm-category-radar:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.tm-category-radar .radar-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #484853;
  text-align: center;
  margin-bottom: 2rem;
}
.tm-category-radar .radar-stats {
  max-width: 600px;
  margin: 0 auto;
}
.tm-category-radar .radar-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.tm-category-radar .radar-item .radar-name {
  flex: 0 0 120px;
  font-weight: 500;
  color: #4c4c57;
}
.tm-category-radar .radar-item .radar-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  margin: 0 1rem;
  overflow: hidden;
}
.tm-category-radar .radar-item .radar-bar .radar-fill {
  height: 100%;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  border-radius: 4px;
  transition: width 0.8s ease;
}
.tm-category-radar .radar-item .radar-count {
  flex: 0 0 40px;
  text-align: right;
  font-weight: 600;
  color: #06c;
}
@media (max-width: 800px) {
  .tm-category-container {
    margin: 1rem;
    padding: 2rem 1.5rem;
  }
  .tag-chips {
    gap: 0.8rem;
    max-width: 100%;
  }
  .chip {
    padding: 0.8rem 1.3rem;
    font-size: 1rem;
    min-height: 44px;
  }
  .tm-category-radar-container {
    margin: 1rem;
    padding: 0;
  }
  .tm-category-radar {
    padding: 1.5rem;
  }
}
@media (max-width: 500px) {
  .tm-category-container {
    margin: 0.5rem;
    padding: 1.5rem 1rem;
  }
  .tag-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 0.3rem;
  }
  .tag-chips {
    gap: 0.6rem;
  }
  .chip {
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
    min-height: 40px;
  }
  .tag-length {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    margin-left: 0.5rem;
  }
  .tm-category-radar {
    padding: 1rem;
  }
  .radar-item .radar-name {
    flex: 0 0 80px;
    font-size: 0.9rem;
  }
  .radar-item .radar-bar {
    margin: 0 0.5rem;
  }
  .radar-item .radar-count {
    flex: 0 0 30px;
    font-size: 0.9rem;
  }
}
body.eye-care-mode .tm-category-container {
  background: #f7f3e9;
}
body.eye-care-mode .radar-item .radar-name {
  color: #06c;
}
body.eye-care-mode .radar-item .radar-bar .radar-fill {
  background: linear-gradient(135deg, #06c 0%, #4a90e2 100%);
}
body.eye-care-mode .radar-item .radar-count {
  color: #06c;
}
.chip:active {
  animation: chipPulse 0.3s ease;
}
.tag-chips {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.radar-fill {
  animation: radarFill 1.2s ease-in-out;
}
.chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}
.chip:hover::before {
  left: 100%;
}
@-moz-keyframes chipPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes chipPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes chipPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes chipPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes radarFill {
  from {
    width: 0 !important;
  }
  to {
    width: var(--target-width, 0%);
  }
}
@-webkit-keyframes radarFill {
  from {
    width: 0 !important;
  }
  to {
    width: var(--target-width, 0%);
  }
}
@-o-keyframes radarFill {
  from {
    width: 0 !important;
  }
  to {
    width: var(--target-width, 0%);
  }
}
@keyframes radarFill {
  from {
    width: 0 !important;
  }
  to {
    width: var(--target-width, 0%);
  }
}
.page-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.page-container .page-content .page-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #06c;
}
.page-container .page-content .page-header .page-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
}
.page-container .page-content .page-header .page-meta {
  color: #666;
  font-size: 0.9rem;
}
.page-container .page-content .page-header .page-meta .page-date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.page-container .page-content .page-header .page-meta .page-date i {
  color: #06c;
}
.page-container .page-content .page-main-content {
  line-height: 1.8;
  color: #333;
}
.page-container .page-content .page-main-content h2,
.page-container .page-content .page-main-content h3,
.page-container .page-content .page-main-content h4,
.page-container .page-content .page-main-content h5,
.page-container .page-content .page-main-content h6 {
  color: #333;
  margin: 1.5rem 0 1rem 0;
  font-weight: 600;
}
.page-container .page-content .page-main-content h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}
.page-container .page-content .page-main-content h3 {
  font-size: 1.3rem;
}
.page-container .page-content .page-main-content h4 {
  font-size: 1.1rem;
}
.page-container .page-content .page-main-content p {
  margin: 1rem 0;
  text-align: justify;
}
.page-container .page-content .page-main-content ul,
.page-container .page-content .page-main-content ol {
  margin: 1rem 0;
  padding-left: 2rem;
}
.page-container .page-content .page-main-content ul li,
.page-container .page-content .page-main-content ol li {
  margin: 0.5rem 0;
}
.page-container .page-content .page-main-content a {
  color: #06c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}
.page-container .page-content .page-main-content a:hover {
  border-bottom-color: #06c;
}
.page-container .page-content .page-main-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: #f8f9fa;
  border-left: 4px solid #06c;
  border-radius: 4px;
}
.page-container .page-content .page-main-content blockquote p {
  margin: 0.5rem 0;
}
.page-container .page-content .page-main-content code {
  background: #f1f3f4;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
}
.page-container .page-content .page-main-content pre {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1rem 0;
}
.page-container .page-content .page-main-content pre code {
  background: none;
  padding: 0;
}
.page-container .page-content .page-main-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
}
.page-container .page-content .page-main-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.page-container .page-content .page-main-content table th,
.page-container .page-content .page-main-content table td {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  text-align: left;
}
.page-container .page-content .page-main-content table th {
  background: #f8f9fa;
  font-weight: 600;
}
.page-container .page-content .page-main-content hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #eee;
}
@media (max-width: 800px) {
  .page-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  .page-container .page-content .page-header .page-title {
    font-size: 1.6rem;
  }
  .page-container .page-content .page-main-content h2 {
    font-size: 1.3rem;
  }
  .page-container .page-content .page-main-content h3 {
    font-size: 1.2rem;
  }
}
@media (max-width: 500px) {
  .page-container {
    margin: 0.5rem;
    padding: 1rem;
  }
  .page-container .page-content .page-header .page-title {
    font-size: 1.4rem;
  }
  .page-container .page-content .page-main-content ul,
  .page-container .page-content .page-main-content ol {
    padding-left: 1.5rem;
  }
}
.about-stats-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid #f0f0f0;
}
.about-stats-section .stats-section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.about-stats-section .stats-section-title i {
  color: #3182ce;
  font-size: 1.6rem;
}
.stats-category {
  margin-bottom: 2.5rem;
}
.stats-category .stats-category-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stats-grid.basic-stats {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stats-grid.content-stats {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stats-grid.tech-stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-color: #e0e0e0;
}
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3182ce, #63b3ed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,102,204,0.3);
}
.stat-card .stat-content {
  flex: 1;
  min-width: 0;
}
.stat-card .stat-content .stat-number {
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
  margin-bottom: 0.3rem;
  word-break: break-all;
}
.stat-card .stat-content .stat-number.loading {
  font-size: 0.9rem;
  color: #999;
  font-weight: 400;
}
.stat-card .stat-content .stat-label {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.2;
}
.basic-stats .stat-card .stat-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.content-stats .stat-card .stat-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}
.tech-stats .stat-card .stat-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
@media (max-width: 768px) {
  .about-stats-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
  .about-stats-section .stats-section-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }
  .stats-category {
    margin-bottom: 2rem;
  }
  .stats-category .stats-category-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
  }
  .stats-grid.content-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .stat-card {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .stat-card .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .stat-card .stat-content .stat-number {
    font-size: 1.2rem;
  }
  .stat-card .stat-content .stat-label {
    font-size: 0.8rem;
  }
}
@media (max-width: 480px) {
  .about-stats-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }
  .about-stats-section .stats-section-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .stats-category {
    margin-bottom: 1.5rem;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .stat-card {
    padding: 1rem;
    flex-direction: column;
    text-align: center;
    gap: 0.6rem;
  }
  .stat-card .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    margin: 0 auto;
  }
  .stat-card .stat-content .stat-number {
    font-size: 1.1rem;
  }
  .stat-card .stat-content .stat-label {
    font-size: 0.75rem;
  }
}