/* =========================
   全局
========================= */
:root {
  --navbar-height: 90px;
  --sidebar-width: 100px;
  --sidebar-gap: 18px;

  --blur: blur(20px);
  --transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;

  /* 颜色 */
  --color-bg: #FFFBFF;
  --color-text: #3d3d3d;
  --color-white: #ffffff;
  --color-pink: #ffb3cf;
  --color-pink-soft: rgba(255,216,231,0.8);
  --color-svg: #352f31;
  --sidebar-bg: rgba(240, 240, 240);
  --sidebar-a: rgba(106, 106, 106, 0.2);
  --shadow: rgba(0, 0, 0, 0.2);
  --sidebar-bg-mobile: rgba(247, 236, 244, 0.8);
  --sidebar-shadow-mobile: 0 -2px 8px rgba(0,0,0,0.2);
}

@font-face {
  font-family: 'MyFont';
  src: url('./font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  font-family: 'MyFont', sans-serif !important;
}

button, .sidebar a, .nav-link, .md3-list-item {
  -webkit-tap-highlight-color: transparent;
}

.content {
  overscroll-behavior: contain;
}

a {
  color: var(--color-text);
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.a {
  color: var(--color-pink);
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor; /* 使用当前文字颜色 */
  transform: scaleX(0);
  transition: transform 0.2s ease;
  transform-origin: left;
  pointer-events: none; /* 避免干扰点击事件 */
}

.a:hover::after {
  filter: brightness(1.1);
  transform: scaleX(1);
  transition: transform 0.1s ease-out;
}

html, body {
  overflow-x: hidden;
  touch-action: pan-y;
}

hr {
  border: none;
  height: 1px;
  background: var(--color-text);
  margin: 20px 0;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.2);
}

.divider span {
  padding: 0 10px;
  font-size: 12px;
  opacity: 0.6;
}



/* =========================
   深色模式
========================= */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1F1A1C;
    --color-text: #f5f5f5;
    --sidebar-bg: rgba(30,30,30);
    --shadow: rgba(0,0,0,0.5);
    --color-pink-soft: rgba(255,179,207,0.25);
    --color-pink: #ffb3cf;
    --color-svg: #fed9e6;
    --sidebar-bg-mobile: rgba(49, 38, 42, 0.8);
    --sidebar-shadow-mobile: 0 -2px 8px rgba(0,0,0,0.5);
    --sidebar-a: rgba(106, 106, 106, 0.6);
  }

  .about-card .li-a:hover {
    background: rgba(255, 179, 207, 0.35);
  }

 .article-card {
    background: #2A2125 !important;
    color: #f5f5f5 !important;

  }

  .article-card h1,
  .article-card h2,
  .article-card p,
  .article-card .meta {
    color: #f5f5f5;
  }

  .hitokoto-from {
    color: #c9c9c9 !important;
  }
  
  .profile-card {
    background: #2A2125 !important;
  }

  .profile-list li {
    background: rgb(90,63,72,0.5) !important;
  }

  .about-card {
    background: #2A2125 !important;
  }

  .about-list li {
    background: rgb(90,63,72,0.5) !important;
  }

  .time-badge {
    background: rgba(255, 179, 207, 0.2);
    color: #f5f5f5;
  }

  .divider::before,
  .divider::after {
    background: var(--color-pink-soft);
  }

  .divider span {
    color: var(--color-text);
    opacity: 0.8;
  }
	
  .header-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  .home-link-card {
    background: #2A2125 !important;
  }
	
  .home-link-card::after {
    background: no-repeat center / contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fed9e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M5 12h14'/>\
<path d='M13 5l7 7-7 7'/>\
</svg>");
  }

  body {
   overflow: auto; /* 启用滚动 */
   -ms-overflow-style: none; /* IE 和旧版 Edge 隐藏滚动条 */
   scrollbar-width: none; /* Firefox 隐藏滚动条 */
  }
	
  body::-webkit-scrollbar {
   display: none; /* Chrome、Safari、Edge 隐藏滚动条 */
  }

  img:not(.article-header):not(.home-header):not(.profile-card img):not(.about-card img):not(.player img) {
    background-color: #3a3a3a !important;
  }
}



/* =========================
   手动主题覆盖（通过 data-theme）
========================= */
/* 强制深色模式 */
[data-theme="dark"] {
  --color-bg: #1F1A1C;
  --color-text: #f5f5f5;
  --sidebar-bg: rgba(30,30,30);
  --shadow: rgba(0,0,0,0.5);
  --color-pink-soft: rgba(255,179,207,0.25);
  --color-pink: #ffb3cf;
  --color-svg: #fed9e6;
  --sidebar-bg-mobile: rgba(49, 38, 42, 0.8);
  --sidebar-shadow-mobile: 0 -2px 8px rgba(0,0,0,0.5);
  --sidebar-a: rgba(106, 106, 106, 0.6);
}

[data-theme="dark"] .about-card .li-a:hover {
  background: rgba(255, 179, 207, 0.35);
}
[data-theme="dark"] .article-card {
  background: #2A2125 !important;
  color: #f5f5f5 !important;
}
[data-theme="dark"] .article-card h1,
[data-theme="dark"] .article-card h2,
[data-theme="dark"] .article-card p,
[data-theme="dark"] .article-card .meta {
  color: #f5f5f5;
}
[data-theme="dark"] .hitokoto-from {
    color: #c9c9c9 !important;
}
[data-theme="dark"] .profile-card {
  background: #2A2125 !important;
}
[data-theme="dark"] .profile-list li {
  background: rgb(90,63,72) !important;
}
[data-theme="dark"] .about-card {
  background: #2A2125 !important;
}
[data-theme="dark"] .about-list li {
  background: rgb(90,63,72) !important;
}
[data-theme="dark"] .time-badge {
  background: rgba(255, 179, 207, 0.2);
  color: #f5f5f5;
}
[data-theme="dark"] .divider::before,
[data-theme="dark"] .divider::after {
  background: var(--color-pink-soft);
}
[data-theme="dark"] .divider span {
  color: var(--color-text);
  opacity: 0.8;
}
[data-theme="dark"] .navbar {
  background: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .nav-time {
  background: rgba(255, 179, 207, 0.2);
  color: #f5f5f5;
}
[data-theme="dark"] .md3-switch .slider {
  background: #3a3a3a;
  border-color: #938F99;
}
[data-theme="dark"] .md3-switch .slider::before {
  background: #938F99;
}
[data-theme="dark"] .settings-panel {
  background: var(--color-bg, #201418);
}
[data-theme="dark"] .close-button:hover {
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .navbar {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .nav-time {
  background: rgba(255, 179, 207, 0.2);
  color: #f5f5f5;
}
[data-theme="dark"] .header-overlay {
  background: rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .home-link-card {
  background: #2A2125 !important;
}
[data-theme="dark"] .home-link-card::after {
background: no-repeat center / contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fed9e6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 6 15 12 9 18'/>\
</svg>");
}

[data-theme="dark"] .card img {
  background-color: #3a3a3a;   /* 深灰色占位 */
}


/* 强制浅色模式（覆盖系统深色） */
[data-theme="light"] {
  --color-bg: #FFFBFF;
  --color-text: #3d3d3d;
  --color-white: #ffffff;
  --color-pink: #ffb3cf;
  --color-pink-soft: rgba(255,216,231,0.8);
  --color-svg: #352f31;
  --sidebar-bg: rgba(240, 240, 240);
  --sidebar-a: rgba(106, 106, 106, 0.2);
  --shadow: rgba(0, 0, 0, 0.2);
  --sidebar-bg-mobile: rgba(247, 236, 244, 0.8);
  --sidebar-shadow-mobile: 0 -2px 8px rgba(0,0,0,0.2);
}
[data-theme="light"] .article-card {
  background: #F7ECF4 !important;
  color: #3d3d3d !important;
}
[data-theme="light"] .profile-card {
  background: rgb(250, 242, 248) !important;
}
[data-theme="light"] .about-card {
  background: rgb(250, 242, 248) !important;
}
[data-theme="light"] .navbar {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .nav-time {
  background: var(--color-pink-soft, rgba(255,216,231,0.8));
  color: var(--color-text, #3d3d3d);
}
[data-theme="light"] .hitokoto-from {
    color: #666 !important;
}
[data-theme="light"] .profile-list li {
  background: rgba(255, 216, 231, 0.3);
}
[data-theme="light"] .about-list li {
  background: rgba(255, 216, 231, 0.3);
}
[data-theme="light"] .header-overlay {
  background: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] .home-link-card {
  background: rgb(250, 242, 248) !important;
}
[data-theme="light"]  .home-link-card::after {
background: no-repeat center / contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23352f31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 6 15 12 9 18'/>\
</svg>");
}
[data-theme="light"] .card img {
  background-color: #e0e0e0;
}



/* =========================
   基础布局
========================= */
body {
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  transition: var(--transition);
}



/* =========================
   navbar
========================= */
.navbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 15px 30px;
  box-sizing: border-box;
  z-index: 999;

  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0));
  
}

.nav-time {
  font-size: 0.65rem;
  padding: 7px 8px;
  border-radius: 999px;

  background: var(--color-pink-soft);
  color: var(--color-text);

  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .navbar {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0));
  }
    .nav-time {
    background: rgba(255, 179, 207, 0.2);
    color: #f5f5f5;
  }
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}



/* =========================
   sidebar
========================= */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  z-index: 1145;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sidebar-gap);
  background: var(--sidebar-bg);
}

.sidebar ul {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: var(--sidebar-gap);
  width: 100%;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sidebar a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 35px;
  min-height: 30px;
  border-radius: 22px;
  color: var(--color-svg);
  text-decoration: none;
  transition: var(--transition);
  isolation: isolate;
}

.sidebar a:hover {
  background: var(--sidebar-a);
}

.sidebar-text {
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-svg);
}

.sidebar li:has(a.active) .sidebar-text {
  font-weight: bold;
}

/* 创建背景层，用于 active 展开动画 */
.sidebar a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;              /* 与 a 的圆角一致 */
  background: var(--color-pink-soft);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
  z-index: -1;                      /* 置于文字下方 */
  pointer-events: none;
}

/* active 时背景从中间向两侧展开 */
.sidebar a.active::before {
  transform: scaleX(1);
}



/* =========================
   ripple
========================= */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.5s linear;
  background: var(--sidebar-a);
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}



/* =========================
   content
========================= */
.content {
  margin-left: calc(var(--sidebar-width) + 20px);
  margin-right: 20px;

  padding-top: calc(var(--navbar-height) + 20px);
  padding-bottom: 40px;

  max-width: calc(100% - var(--sidebar-width) - 40px);

  display: grid;
  grid-template-columns: 1fr; /* 默认单列 */
  justify-items: center;      /* 水平居中所有卡片 */
  gap: 40px 20px;

  box-sizing: border-box;
  transition: all 0.3s ease;
}

@media (min-width: 769px) {
  .content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 两列布局 */
    justify-items: center;
    gap: 40px 20px;
  }

  .card {
    height: 250px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* 动画 */
.fade-out {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s ease;
}



/* =========================
   home-content
========================= */
.home-content {
  margin-left: calc(var(--sidebar-width) + 20px);
  margin-right: 20px;
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 40px;

  max-width: calc(100% - var(--sidebar-width) - 40px);

  display: grid;
  grid-template-columns: 1fr; /* 默认单列 */
  justify-items: center;      /* 水平居中所有卡片 */
  gap: 40px 20px;

  box-sizing: border-box;
  transition: all 0.3s ease;
}

.content-inner {
	will-change: transform,opacity;
}

@media (min-width: 769px) {
  .home-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 两列布局 */
    justify-items: center;
    gap: 40px 20px;
  }
}



/* =========================
   一言
========================= */
.hitokoto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: auto;
  min-width: 300px;
  max-width: 700px;
  text-align: center;
  background: none !important;
  margin: 0;
}

/* 头图一言文字亮色 */
.hitokoto .hitokoto-content .a {
  color: var(--color-text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hitokoto #hitokoto_text{
  font-size: 1.3rem;
  align-self: flex-start;
}
.hitokoto .hitokoto-from {
  align-self: flex-end;
  margin-top: 6px;
  color: #666;
  font-size: 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}



/* =========================
    头图
========================= */
.article-header {
  width: calc(100% - var(--sidebar-width) ); /* 左边留 sidebar */
  margin: 0 0 0 var(--sidebar-width); /* 左侧留 sidebar */
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  position: relative;
  will-change: transform;
  z-index: 0;
  filter: brightness(0.9);
  mask-image: linear-gradient(to bottom, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
  height: 65vh;
}



/* =========================
    设置弹窗
========================= */
.settings-dialog {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;          /* 垂直居中 */
  justify-content: center;      /* 水平居中 */
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.2s;
}

.settings-dialog.open {
  visibility: visible;
  pointer-events: auto;
}

.settings-dialog .dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.settings-dialog.open .dialog-overlay {
  opacity: 1;
}

.settings-panel {
  position: relative;
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: 80vh;
  margin: 0 auto;
  background: var(--md-sys-color-surface, var(--color-bg));
  border-radius: 26px;
  box-shadow: var(--md-sys-elevation-3, 0 8px 24px rgba(0,0,0,0.2));
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--md-sys-color-on-surface, var(--color-text));
  box-sizing: border-box;
}

.settings-dialog.open .settings-panel {
  transform: scale(1);
  opacity: 1;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,0.08));
  box-sizing: border-box;
  flex-shrink: 0;
}

.settings-header h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  color: var(--md-sys-color-on-surface, var(--color-text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.close-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant, #666);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  margin-left: 8px;
}

.close-button:hover {
  background: var(--md-sys-color-surface-variant, rgba(0,0,0,0.05));
}

.settings-content {
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  box-sizing: border-box;
  width: 100%;
}

.md3-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  min-height: 56px;
  background: transparent;
  transition: background 0.15s;
  border: none;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  gap: 16px;
}

.md3-list-item:hover {
  background: var(--md-sys-color-surface-variant, rgba(0,0,0,0.03));
}

.md3-list-item > span:first-child {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.item-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.item-supporting {
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant, #666);
  margin-top: 2px;
  word-break: break-word;
}

.md3-list-item .md3-switch {
  flex-shrink: 0;
}

.md3-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
}

.md3-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.md3-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--md-sys-color-surface-variant, #e0e0e0);
  border-radius: 100px;
  transition: background 0.2s;
  border: 2px solid var(--md-sys-color-outline, #79747E);
}

.md3-switch .slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background: var(--md-sys-color-outline, #79747E);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.md3-switch input:checked + .slider {
  background: var(--md-sys-color-primary, var(--color-pink));
  border-color: transparent;
  filter: brightness(1.1);
}

.md3-switch input:checked + .slider::before {
  transform: translateX(20px);
  background: var(--md-sys-color-on-primary, #fff);
}

.settings-footer-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,0.08));
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.md3-button {
  padding: 10px 24px;
  border-radius: 100px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--md-sys-color-primary, var(--color-pink));
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.md3-button.filled {
  background: var(--md-sys-color-primary, var(--color-pink));
  color: var(--md-sys-color-on-primary, #fff);
}

.md3-button:hover {
  background: var(--md-sys-color-primary-container, rgba(255,159,194,0.15));
}

.md3-button.filled:hover {
  background: var(--md-sys-color-primary, var(--color-pink));
  filter: brightness(1.1);
}

.settings-button-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: var(--color-svg);
  height: 40px;
  width: 40px;
  cursor: pointer;
  border-radius: 100px;
  padding: 6px 0;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
  border: none;
}

.settings-button-m:hover {
  background: var(--sidebar-a);
}

/* 主题色选择器 */
.theme-picker-item {
  cursor: default !important; /* 列表项本身不产生涟漪，按钮单独绑定 */
}
.theme-picker-item:hover {
  background: transparent !important;
}
.theme-color-options {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.theme-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}
.theme-color-btn.pink { background: #ff9fc2; }
.theme-color-btn.blue { background: #7fb4e0; }
.theme-color-btn.green { background: #8fceb4; }
.theme-color-btn.purple { background: #c5a3ff; }

.theme-color-btn.active {
  border-color: var(--color-text);
  transform: scale(1.1);
}
.theme-color-btn:hover {
  opacity: 0.85;
}

/* 深色模式微调 */
@media (prefers-color-scheme: dark) {
  .md3-switch .slider {
    background: #3a3a3a;
    border-color: #938F99;
  }
  .md3-switch .slider::before {
    background: #938F99;
  }
  .settings-panel {
    background: var(--color-bg, #201418);
  }
  .close-button:hover {
    background: rgba(255,255,255,0.08);
  }
}



/* =========================
   article-card
========================= */
.article-card {
  position: relative;
  left: calc(var(--sidebar-width) + (100% - var(--sidebar-width)) / 2);
  transform: translateX(-50%);
  margin-top: -120px;
  margin-bottom: 40px;
  width: calc(100% - 40px);
  max-width: 600px;
  padding: 30px;
  border-radius: 20px;
  background: #F7ECF4;
  box-sizing: border-box;
}

.article-card h1 {
  margin-top: 0;
  font-size: 2rem;
}

.article-card .meta {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 20px;
}

.article-card p {
  margin: 12px 0;
}

.article-card h2 {
  margin-top: 25px;
}



/* =========================
   个人卡片
========================= */
.profile-card {
  display: flex;
  grid-column: 1 / -1;   /* 占满整行 */
  align-items: center;
  gap: 20px;
  background: rgb(250, 242, 248);
  border-radius: 16px;
  padding: 20px;
  margin: 0 auto 30px auto;  /* 上 0，下 30px，左右 auto */
  max-width: 800px;
  opacity: 1;
  transform: translateY(0);
  transition: 0.4s;
}

.profile-card.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.profile-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  height: 15px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 216, 231, 0.3);
}



/* =========================
   关于卡片
========================= */
.about-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-column: 1 / -1;
  background: rgb(250, 242, 248);
  border-radius: 16px;
  padding: 24px;
  margin: 0 auto 30px auto;
  max-width: 800px;
  gap: 10px;
  opacity: 1;
  transform: translateY(0);
  transition: 0.4s;
}

.about-card.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.about-card img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.about-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  height: 15px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 216, 231, 0.3);
}

/* 底部按钮区 */
.about-a {
  margin-top: auto;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  list-style: none;
  padding: 0;
}

.li-a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--color-pink-soft);
  transition: background 0.2s ease;
}

.li-a:hover {
  background: rgba(253, 176, 210, 0.626);
}

.li-a svg {
  width: 20px;
  height: 20px;
}



/* =========================
   卡片
========================= */
.card {
  height: 250px;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--transition);
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
}

.card-title h3 {
  margin: 0;
  font-size: 1.1rem;
}

.time-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;

  background: var(--color-pink-soft);
  color: var(--color-text);

  white-space: nowrap;
  flex-shrink: 0;
}

.card-list li{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
}

.card:hover {
  transform: translateY(-3px);
}

.card img {
  display: block;
  width: 300px;
  height: 180px;
  min-height: 180px;
  object-fit: cover;
  border-radius: 16px;
  background-color: #e0e0e0;
}



/* =========================
   视频
========================= */
.responsive-iframe {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.responsive-iframe iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}



/* =========================
   codeblock
========================= */
/* 代码框基础样式 */
code-box {
    display: block;
    margin: 20px 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #2d2d2d;
    border: 1px solid rgba(225, 225, 225, 0.3);
}
        
/* 顶部标题栏 */
.code-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 2px 14px;
    color: #fff;
    font-size: 14px;
    font-family: 'Consolas', 'Monaco', monospace;
}
        
/* 语言标签 */
.code-lang {
    font-weight: bold;
    text-transform: uppercase;
}
        
/* 复制按钮 */
.copy-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
        
.copy-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
        
/* 代码区域 */
.code-box-content {
    margin: 0;
    overflow-x: auto;
}
        
.code-box-content pre {
    margin: 0;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(150,150,150,0.5) transparent;
}

.code-box-content pre code {
    color: #f5f5f5;			
}
        
/* 强制取消 hljs 默认的背景和内边距，由 code-box 统一控制 */
.hljs {
    background: transparent !important; 
    padding: 0 !important;
    font-family: inherit !important;
}

/* 确保 pre 标签不会产生额外的边距 */
.code-box-content pre {
    background: transparent !important;
    margin: 0 !important;
    padding: 12px !important;
}

@media (prefers-color-scheme: light) {
    code-box {
        background-color: #f6f8fa;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
    .code-box-header {
        color: #222;
    }
    .copy-btn {
        color: #222;
    }
    .copy-btn:hover {
        background-color: rgba(0, 0, 0, 0.06);
    }
    .code-box-content pre code {
        color: #1f2328;
    }
}



/* =========================
   首页头图
========================= */

.header-container {
  position: relative;
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
  overflow: hidden;
  z-index: 1;
  mask-image: linear-gradient(to bottom, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
}


.header-container.fade-in {
  animation: heroIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 1;
  transform: none;
}

.header-container.fade-out {
  animation: heroOut 0.4s ease forwards;
  opacity: 0;
  transform: none;
}

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

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

/* 入场时从偏上位置滑入并淡入 */
.header-container.fade-in .hitokoto {
  animation: heroTextIn 0.5s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 退场时快速淡出并上移 */
.header-container.fade-out .hitokoto {
  animation: heroTextOut 0.3s ease forwards;
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    /* 保持水平居中，垂直方向从 -40% 滑到 -50% */
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes heroTextOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}

.home-header {
  width: 100%;
  margin: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  position: relative;
  will-change: transform;
  z-index: 0;
  height: 55vh;
  transform: scale(1.2); 
}

/* 半透明遮罩层 */
.header-overlay {
  position: absolute;
  width: 100%;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5); /* 可调整透明度 */
  pointer-events: none;
  height: 55vh;
}

/* 当父容器触发 fade-in / fade-out 时，联动图片播放缩放动画 */
.header-container.fade-in .home-header {
  animation: homeHeaderIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.header-container.fade-out .home-header {
  animation: homeHeaderOut 0.4s ease forwards;
}

@keyframes homeHeaderIn {
  from {
    transform: scale(1.8); /* 进场时从 1.9 倍开始收缩 */
  }
  to {
    transform: scale(1.2); /* 停留在 1.2 倍的基准状态 */
  }
}

@keyframes homeHeaderOut {
  from {
    transform: scale(1.2); /* 离场时从 1.2 倍基准开始 */
  }
  to {
    transform: scale(1.0); /* 快速缩小 */
  }
}



/* =========================
   home Flex 容器
========================= */
.home-flex {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 500px;
  margin: 0 auto 30px;
}



/* =========================
   footer 容器
========================= */
.footer {
  margin-left: var(--sidebar-width);
  margin-right: 0;
  width: calc(100% - var(--sidebar-width));
  max-width: 1200px;
  padding: 24px 20px 120px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  min-height: px;
  color: var(--color-text);
  font-size: 0.85rem;
  transition: var(--transition);
}



/* =========================
    home 个人卡片
========================= */
.home-profile {
  flex-direction: column !important;   /* 垂直排列 */
  flex-shrink: 0;
  text-align: center;
  align-items: center;
  gap: 10px;
  padding: 24px;
  background: var(--profile-bg, rgb(250, 242, 248));
  border-radius: 16px;
  width: 260px;
  box-sizing: border-box;
}

.home-profile img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.home-profile .profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-profile .profile-list {
  justify-content: center;
}



/* =========================
   右侧链接卡片
========================= */
.home-right-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-width: 200px;
  max-width: 300px;
}

.home-link-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px 28px 24px;
  border-radius: 16px;
  background: rgb(250, 242, 248);
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition);
}

/* 内容区域 */
.card-content {
  display: flex;
  flex-direction: column;
}



/* =========================
   右侧箭头 SVG
========================= */
.home-link-card::after {
  content: '';
  position: absolute;
  right: 20px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  
  width: 20px;
  height: 20px;

background: no-repeat center / contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23352f31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 6 15 12 9 18'/>\
</svg>");

  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* hover 动效 */
.home-link-card:hover::after {
  transform: translateY(-50%) translateX(6px);
  opacity: 1;
}

/* 卡片 hover */
.home-link-card:hover {
  background: var(--color-pink-soft);
}

/* 标题 */
.home-link-card h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}

/* 描述 */
.home-link-card p {
  margin: 0;
  opacity: 0.7;
  font-size: 0.95rem;
}

/*  深色模式箭头适配 */
@media (prefers-color-scheme: dark) {
  .home-link-card::after {
background: no-repeat center / contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fed9e6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 6 15 12 9 18'/>\
</svg>");
  }
}



/* =========================
    .ui-select (Chrome 135+)
========================= */
@supports (appearance: base-select) {
  /* 必须先“重置”元素，并告诉浏览器我们要自定义 */
  .ui-select,
  .ui-select::picker(select) {
    appearance: base-select;
  }

  .ui-select {
    line-height: 20px;
    padding: 9px 6px 9px 12px;
    font-size: var(--ui-font, 14px);
    font-family: system-ui;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
	position: relative;
    overflow: hidden;
  }

  /* 深/浅模式下的边框 */
  @media (prefers-color-scheme: dark) {
    .ui-select {
      border-color: rgba(255, 255, 255, 0.2);
    }
  }
  [data-theme="dark"] .ui-select {
    border-color: rgba(255, 255, 255, 0.2);
  }
  [data-theme="light"] .ui-select {
    border-color: rgba(0, 0, 0, 0.2);
  }

  .ui-select:hover {
    border-color: var(--color-pink);
  }

  /* 下拉箭头 (picker-icon) */
  .ui-select::picker-icon {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--color-svg);
    mask: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 12px 8px;
    -webkit-mask-size: 12px 8px;
  }

  /* 打开状态 */
  .ui-select:open {
    border-color: var(--color-pink);
    border-radius: 8px 8px 0 0;
  }

  .ui-select.reverse:open {
    border-radius: 0 0 8px 8px;
  }

  /* 下拉面板 */
  .ui-select::picker(select) {
    padding: 8px 0;
    background: var(--color-bg);
    border: 1px solid var(--color-pink);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
    max-height: 306px;
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: thin;
    text-align: left;
    top: calc(anchor(bottom) - 1px);
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: top center;
    transition: opacity 0.2s allow-discrete, transform 0.2s allow-discrete;
  }

  .ui-select.reverse::picker(select) {
    top: auto;
    bottom: calc(anchor(top) - 1px);
    border-top: 1px solid var(--color-pink);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: bottom center;
    transition: opacity 0.2s allow-discrete, transform 0.2s allow-discrete;
  }

  .ui-select::picker(select):popover-open {
    opacity: 1;
    transform: scaleY(1);
  }
  @starting-style {
    .ui-select::picker(select):popover-open {
      opacity: 0;
      transform: scaleY(0.8);              /* 初始纵向缩小 */
    }
  }

  .ui-select option {
    display: block;
    line-height: 20px;
    padding: 9px 12px;
    color: var(--color-text);
    font-size: var(--ui-font, 14px);
    background-color: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.2s;
    box-sizing: border-box;
    overflow: hidden;
  }

  .ui-select option:hover {
    background-color: var(--color-pink-soft);
  }

  .ui-select option:checked {
    background-color: var(--color-pink-soft);
    color: var(--color-pink);
    font-weight: 500;
  }

  .ui-select option:disabled {
    color: var(--color-text);
    opacity: 0.38;
    background-color: transparent;
    cursor: default;
  }

  .ui-select hr {
    border: 0;
    border-top: 1px solid var(--color-text);
    opacity: 0.2;
    margin: 0 12px;
  }

  .ui-select optgroup[label] {
    font-size: 0;
  }
  .ui-select optgroup[label]::before {
    content: attr(label);
    display: block;
    font-weight: 700;
    padding: 6px 12px;
    font-size: var(--ui-font, 14px);
    margin-bottom: -1.2em;
    color: var(--color-text);
  }

  .ui-select optgroup option {
    text-indent: 0.5em;
  }

  .ui-select optgroup:not([label]):not(:first-child)::before {
    content: '';
    display: block;
    padding: 6px 12px 0;
    border-top: 1px solid var(--color-text);
    opacity: 0.2;
    margin-inline: 12px;
  }

  .ui-select option::checkmark {
    display: none;
  }
}



/* =========================
   日历组件
========================= */

.calendar-card {
  background: var(--sidebar-bg);
  backdrop-filter: var(--blur);
  box-shadow: 0 6px 20px var(--shadow);
}

/* 标题 */
.calendar-header {
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 10px;
  opacity: 0.8;
}

/* 切换按钮 */
.calendar-nav {
  display: flex;
  gap: 6px;
}

.calendar-nav button {
  border: none;
  background: var(--color-pink-soft);
  color: var(--color-text);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: var(--transition);
}

.calendar-nav button:hover {
  background: var(--color-pink);
  color: var(--color-white);
}

/* 星期 */
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 6px;
}

/* 日期网格 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* 单天 */
.calendar-day {
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition);
}

/* hover */
.calendar-day:hover {
  background: var(--color-pink-soft);
}

/* 今天 */
.calendar-day.today {
  background: var(--color-pink);
  color: var(--color-white);
}

/* 非本月 */
.calendar-day.other {
  opacity: 0.3;
}



/* =========================
   移动端
========================= */
@media (max-width: 768px) {

  .navbar {
    left: 0;
    width: 100%;
    padding: 20px;
  }

  .sidebar {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 70px;
    padding-top: 0;
    flex-direction: row;
    justify-content: center;
    backdrop-filter: var(--blur);
    background: var(--sidebar-bg-mobile);
    box-shadow: var(--sidebar-shadow-mobile);
  }

  .sidebar ul {
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
  }

  .sidebar a {
    flex: 1;
  }

  .content {
    padding-left: 10px;
    padding-right: 10px;
	padding-bottom: 120px;
    margin: 0 auto 30px;
	max-width: 1200px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    justify-items: center;   /* 子元素居中 */
  }

  .article-header {
	height: 70vh;
    width: 100%;
    margin: 46px 0 0 0px;
  }

   .article-card {
	transform: none;
    width: calc(100% - 30px) !important; /* 左右各 10px */
    margin-top: -80px 10px 20px !important;   /* 上与头图重叠，下 20px */
    left: 15px !important;
	max-width: none;
  }

  .profile-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 0 auto;
    box-sizing: border-box;
  }

  .about-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 0 auto;
    box-sizing: border-box;
	padding: 12px 12px;
  }

  .sidebar-footer {
    display: none;   /* 移动端隐藏底部设置按钮 */
  }

  .header-container {
    position: relative;
    width: 100%;
    margin-left: 0;
    overflow: hidden;
}

  .home-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
   padding-bottom: 120px;
}
	
  .home-header {
	height: 45vh !important;
    width: 100%;
    margin: 0 0 0 0;
  }

  .header-overlay {
	height: 45vh;
    width: 100%;
    margin: 0 0 0 0;
  }

  .home-flex {
    flex-direction: column;
    align-items: center;
  }

  .home-profile,
  .home-right-cards {
    width: 100%;
    max-width: 400px;
  }

  .home-right-cards {
    flex-direction: column;
  }

  .footer {
    margin-left: 0;
    width: 100%;
    padding-bottom: 80px;
  }
}



/* =========================
   浅色模式强制覆盖
========================= */
body[data-theme="light"] .profile-list li,
[data-theme="light"] .profile-list li {
  background: rgba(255, 216, 231, 0.3) !important;
  color: #3d3d3d !important;
}
body[data-theme="light"] .about-list li,
[data-theme="light"] .about-list li {
  background: rgba(255, 216, 231, 0.3) !important;
  color: #3d3d3d !important;
}
[data-theme="light"] .time-badge {
  background: var(--color-pink-soft, rgba(255,216,231,0.8)) !important;
  color: var(--color-text, #3d3d3d) !important;
}
[data-theme="light"] .article-card,
[data-theme="light"] .article-card h1,
[data-theme="light"] .article-card h2,
[data-theme="light"] .article-card h3,
[data-theme="light"] .article-card p,
[data-theme="light"] .article-card .meta,
[data-theme="light"] .article-card li,
[data-theme="light"] .article-card span {
  color: #3d3d3d !important;
}
[data-theme="light"] .article-card {
  background: #F7ECF4 !important;
}
[data-theme="light"] .card-title h3,
[data-theme="light"] .card p {
  color: #3d3d3d !important;
}
[data-theme="light"] code-box {
  background-color: #f6f8fa !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .code-box-header {
  color: #222 !important;
}
[data-theme="light"] .copy-btn {
  color: #222 !important;
}
[data-theme="light"] .copy-btn:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .code-box-content pre code {
  color: #1f2328 !important;
}
[data-theme="dark"] code-box {
  background-color: #2d2d2d !important;
  border: 1px solid rgba(225, 225, 225, 0.3) !important;
}
[data-theme="dark"] .code-box-header {
  color: #fff !important;
}
[data-theme="dark"] .copy-btn {
  color: #fff !important;
}
[data-theme="dark"] .code-box-content pre code {
  color: #f5f5f5 !important;
}
[data-theme="light"] .nav-time {
  background: var(--color-pink-soft, rgba(255,216,231,0.8)) !important;
  color: #3d3d3d !important;
}
[data-theme="dark"] .nav-time {
  background: rgba(255, 179, 207, 0.2) !important;
  color: #f5f5f5 !important;
}

/* =========================
   播放器手动主题适配
========================= */
[data-theme="dark"] #xf-MusicPlayer .xf-girlPink {
  --playerColor-1: #1f1a1c;
  --playerColor-2: #ebe0e2;
  --playerColor-3: #59404b;
  --playerColor-4: #d4c2c8;
  --playerColor-5: #FFB3C6;
  --playerColor-6: #ffafd5;
  --playerColor-7: #5C3A47;
  --playerColor-8: #ffd8e8;
  --playerColor-9: #504348;
  --playerColor-10: #D27B94;
  --playerColor-11: #F5C2D2;
  --playerColor-12: #FFDFED;
  --playerColor-rgab-1: rgba(255, 223, 237, 0.12);
  --playerColor-rgab-2: rgba(65, 42, 52, 0.7);
  --playerShadow-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.3), 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  --playerShadow-2: -4px 4px 8px 0px rgba(0, 0, 0, 0.4), inset -4px 4px 10px 0px rgba(255, 223, 237, 0.05);
  --playerTextShadow-1: 0 0 1px rgba(255, 179, 198, 0.4);
  --playerTextShadow-2: 0 0 1px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] #xf-lyric {
  background-color: rgba(65, 42, 52, 0.9) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .xf-music-pop {
  background-color: rgba(89, 64, 75, 0.6) !important;
}
[data-theme="dark"] .xf-throughDisplay {
  background-color: rgba(65, 42, 52, 0.9) !important;
}
[data-theme="light"] #xf-MusicPlayer .xf-girlPink {
  --playerColor-1: #fffbff;
  --playerColor-2: #1f1a1c;
  --playerColor-3: #fdd9e7;
  --playerColor-4: #504348;
  --playerColor-5: #1C1B1F;
  --playerColor-6: #ae1d79;
  --playerColor-7: #fdd9e7;
  --playerColor-8: #3d0027;
  --playerColor-9: #f1dee4;
  --playerColor-10: #7f553a;
  --playerColor-11: #C27E94;
  --playerColor-12: #301401;
  --playerColor-rgab-1: rgba(176, 0, 92, 0.08);
  --playerColor-rgab-2: rgba(255, 255, 255, 0.8);
  --playerShadow-1: 0px 4px 8px 3px rgba(176, 0, 92, 0.05), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --playerShadow-2: -4px 4px 8px 0px rgba(176, 0, 92, 0.08), inset -4px 4px 10px 0px rgba(0, 0, 0, 0.03);
  --playerTextShadow-1: 0 0 1px rgba(176, 0, 92, 0.15);
  --playerTextShadow-2: 0 0 1px rgba(255, 255, 255, 0.5);
}
[data-theme="light"] #xf-lyric {
  background-color: rgba(253, 217, 231, 0.7) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .xf-music-pop {
  background-color: rgba(253, 217, 231, 0.7) !important;
}
[data-theme="light"] .xf-throughDisplay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}