/* 播放器与动画基础类 */
.sh-main-top-mu {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0; 
  float: none;
}

[class^="shaft-load"] .shaft1 { animation-delay: 0.05s; }
[class^="shaft-load"] .shaft2 { animation-delay: 0.1s; }
[class^="shaft-load"] .shaft3 { animation-delay: 0.15s; }
[class^="shaft-load"] .shaft4 { animation-delay: 0.2s; }
[class^="shaft-load"] .shaft5 { animation-delay: 0.25s; }
[class^="shaft-load"] .shaft6 { animation-delay: 0.3s; }
[class^="shaft-load"] .shaft7 { animation-delay: 0.35s; }
[class^="shaft-load"] .shaft8 { animation-delay: 0.4s; }
[class^="shaft-load"] .shaft9 { animation-delay: 0.45s; }
[class^="shaft-load"] .shaft10 { animation-delay: 0.5s; }
[class^="shaft-load"] .shaft11 { animation-delay: 0.55s; }
[class^="shaft-load"] .shaft12 { animation-delay: 0.6s; }
[class^="shaft-load"] .shaft13 { animation-delay: 0.65s; }
[class^="shaft-load"] .shaft14 { animation-delay: 0.7s; }
[class^="shaft-load"] .shaft15 { animation-delay: 0.75s; }
[class^="shaft-load"] .shaft16 { animation-delay: 0.8s; }
[class^="shaft-load"] .shaft17 { animation-delay: 0.85s; }
[class^="shaft-load"] .shaft18 { animation-delay: 0.9s; }
[class^="shaft-load"] .shaft19 { animation-delay: 0.95s; }
[class^="shaft-load"] .shaft20 { animation-delay: 1s; }

.shaft-load2 {
  width: 80px;
  height: 2px;
  margin-left: 9px;
  overflow: hidden;
  margin-top: 7px;
}

.shaft-load2>div {
  height: 100%;
  width: 6px;
  margin-right: 2px;
  float: left;
  background: var(--dark-mode-text-color, #000);
  animation: loading2 1.5s infinite ease-in-out;
  transform: scaleY(0.05) translateX(-5px);
}

@keyframes loading2 {
  10% { background: var(--dark-mode-text-color, #000); }
  15% { transform: scaleY(1.2) translateX(10px); background: var(--dark-mode-text-color, #000); }
  90%, 100% { transform: scaleY(0.05) translateX(-5px); }
}

/* 网页介绍模块主容器 */
.left {
  width: 310px;
  height: auto;
  background: var(--glass-bg) !important;
  border-radius: 15px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding-bottom: 20px;
}

.container { margin-top: 8%; }
@media (max-width: 576px) { .container { margin-top: 15%; } }

.flex-container {
  display: flex;
  background-color: rgb(255, 255, 255, 0);
}

/* 个人信息区 */
.touxi {
  margin: 8px 0 0 8px;
  width: 75px;
  height: 75px;
  border-radius: 100%;
  transition: width 2s, height 2s, transform 2s;
}
.touxi:hover { transform: rotate(180deg); }

.gexing {
  justify-content: center;
  margin-left: 20px;
}

.toem {
  font-family: 'Capriola', sans-serif;
  font-size: 28px;
  margin-top: 5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200%;
  background-position: 0%;
  animation: backgroundSizeAnimation 10s ease-in-out infinite;
  background-image: linear-gradient(120deg, var(--gradient-start, pink)10%, var(--gradient-middle, pink) 30%, var(--gradient-end, #749efc) 70%);
}

@keyframes backgroundSizeAnimation {
  0% { background-position: 100%; }
  25% { background-position: 50%; }
  50% { background-position: 0%; }
  75% { background-position: 50%; }
  100% { background-position: 100%; }
}

.sign {
  color: var(--dark-mode-text-color, rgb(0, 0, 0, 0.4));
  font-size: 12px;
  text-align: center;
}

.state {
  margin-top: 5px;
  text-align: center;
}

/* 独立子组件的布局与尺寸 */
.left-2 {
  border-radius: 10px;
  background-color: var(--glass-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  padding-top: 2px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.left-2 a { text-decoration: none; font-size: 20px; }

.nav { border-radius: 10px; margin-bottom: 10px; padding: 6px 0px 6px 20px; transition: 0.3s; }
.nav:hover { margin-right: 40px; }

.left-3 {
  margin: 20px 10px 10px 10px;
  padding: 5px;
  background: var(--dark-mode-body, #fefefe);
  border-radius: 10px;
  letter-spacing: 2px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}

.left-3-2 {
  margin: 20px 10px 10px 10px;
  padding: 5px;
  width: auto;
  height: 35px;
  border-radius: 10px;
  background: var(--dark-mode-body, #fefefe);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}

.left-3-3 {
  text-align: right;
  margin: 20px 10px 10px 10px;
  padding: 5px;
  width: auto;
  height: 35px;
  border-radius: 10px;
  background: var(--dark-mode-body, #fefefe);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}
.left-3-3 a { color: var(--dark-mode-text-color, #000); }

.left-4-1 {
  margin-top: 20px;
  width: 100px;
  height: 50px;
  padding-top: 0px;
  padding-bottom: 15px;
  background: var(--dark-mode-body, #fefefe);
  border-radius: 10px;
  margin-bottom: 10px;
  float: left;
  transition: width 0.6s, height 0.6s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}
.left-4-1:hover { width: 110px; height: 60px; }

.left-4-2 {
  margin-left: 7px;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  padding-bottom: 15px;
  background: var(--dark-mode-body, #fefefe);
  margin-bottom: 10px;
  float: left;
  transition: width 0.6s, height 0.6s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}
.left-4-2:hover { width: 60px; height: 60px; }
.left-4-2 img { width: 50px; height: 50px; }

.left-4-3 {
  margin-left: 7px;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  padding-bottom: 15px;
  background-color: var(--dark-mode-body, #fefefe);
  margin-bottom: 10px;
  float: left;
  transition: width 0.6s, height 0.6s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}
.left-4-3:hover { width: 60px; height: 60px; }

.left-4-4 {
  margin-left: 7px;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  padding-bottom: 15px;
  background-color: var(--dark-mode-body, #fefefe);
  margin-bottom: 10px;
  float: right;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}
.left-4-4 img { width: 50px; height: 50px; }

/* 防止 collapse 展开按钮由于 inline-style 丢失边框，强制补充属性 */
#collapseBtn, .modal-content, #coll .card-body {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border) !important;
}

/* 状态标签（干饭/零食等）防换行 */
.neckbtn {
  margin: 0 4px;
  padding: 4px 8px;
  border-radius: 8px; 
  border: 1px solid var(--glass-border);
  background: var(--glass-bg); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  white-space: nowrap; 
  display: flex;
  align-items: center; 
  justify-content: center;
  font-size: 13px;
}

.neckbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 昼夜模式切换开关 */
.mode-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  float: right;
}

.mode-switch__toggle {
  background: rgba(0, 0, 0, 0.04); 
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
  height: 24px; 
  width: 44px;  
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center; 
  padding: 0 4px; 
  transition: all 0.4s ease; 
}

.mode-switch__circle {
  height: 16px; 
  width: 16px; 
  border-radius: 100px;
  background-image: var(--theme-toggle-icon); 
  background-size: 14px 14px; 
  background-position: center;
  background-repeat: no-repeat;
  transform: translateX(0); 
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-image 0.4s ease;
}

html.dark-mode .mode-switch__toggle,
[data-theme="dark"] .mode-switch__toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

html.dark-mode .mode-switch__circle,
[data-theme="dark"] .mode-switch__circle {
  transform: translateX(var(--theme-toggle-x)); 
}

/* Apple 风格圆角底座与图标 */
.applesb {
  margin: 20px 10px 0 10px;
  background: var(--dark-mode-body, #fefefe);
  border-radius: 13px;
  width: 120px;
  height: 120px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
}

.applesb-1 {
  color: var(--dark-mode-text-color, #000);
  text-align: center;
  margin: 5px 6px 5px 6px;
  padding: 12.5px 0 0 0;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background-color: rgb(0, 0, 0, 0.1);
}
.applesb-1:hover { background-color: #d2d2d2; transition: 0.3s; }

.applesb-2 {
  color: var(--dark-mode-text-color, #000);
  text-align: center;
  margin: 5px 6px 5px 6px;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background-color: rgb(0, 0, 0, 0.2);
  transition: width 0.5s, height 0.5s;
}
.applesb-2:hover { background-color: #d2d2d2; transition: 0.4s; width: 55px; height: 55px; }
.applesb-2 img { margin: 4px 0 0 0; border-radius: 10px; width: 40px; height: 40px; }

.applesb-3 {
  width: 100px;
  height: 50px;
  margin: 5px 0 5px 0;
  padding: 5px 0 0 5px;
  color: var(--dark-mode-text-color, #000);
  border-radius: 15px;
  background-color: rgb(0, 0, 0, 0.2);
}
.applesb-3:hover { text-decoration: none; background-color: #d2d2d2; transition: 0.4s; }
.applesb-3 img { width: 40px; height: 40px; border-radius: 10px; }

/* 底部与杂项 */
.runtime { margin-top: 5px; font-size: 13px; text-align: center; color: var(--dark-mode-text-color, #000); }
.body-bottom { font-size: 11px; margin-top: 0px; margin-bottom: 20px; text-align: center; color: var(--dark-mode-text-color, #000); }
.body-bottom a { text-decoration: none; color: var(--dark-mode-text-color, #000); }
.body-bottom img { width: 20px; height: 20px; }
.by { font-size: 13px; text-align: center; color: var(--dark-mode-text-color, #000); }
.by a { color: var(--dark-mode-text-color, #000); }

/* Toast 提示框玻璃化与可读性 */
.toast {
  margin-left: 280px;
  position: fixed;
  z-index: 9999;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important; 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.toast-body {
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.zanshang { width: 130px; height: 190px; border-radius: 8px; }
.zfb { width: 130px; height: 190px; border-radius: 8px; }

/* 底部胶囊滑条平铺 */
.slide-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; 
  width: 100%;
  margin: 15px auto 0;
  padding: 0;
  background: transparent !important; 
  border: none !important;
  overflow: visible; 
}

.slide-centent {
  margin: 0;
  border-radius: 16px; 
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px; 
  transition: all 0.3s ease;
}

.slide-centent:hover {
  transform: translateY(-3px);
  background: var(--glass-border); 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.slide-centent a { 
  color: var(--dark-mode-text-color, #000); 
  text-decoration: none; 
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap; 
}

/* 樱花和音乐播放器深色模式滤色 */
html.dark-mode #canvas_sakura,
[data-theme="dark"] #canvas_sakura {
    opacity: 0.35; 
    filter: brightness(1.1);
    transition: opacity 0.5s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
/* 兼容 player.js 的零请求播放/暂停按钮 */
.fa-circle-play, .fa-circle-pause {
  display: inline-block;
  width: 22px; height: 22px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter 0.3s ease;
}
.fa-circle-play { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23141414'><path d='M512 256A256 256 0 1 1 0 256a256 256 0 1 1 512 0zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z'/></svg>"); }
.fa-circle-pause { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23141414'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM224 192V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V192c0-17.7 14.3-32 32-32s32 14.3 32 32zm128 0V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V192c0-17.7 14.3-32 32-32s32 14.3 32 32z'/></svg>"); }
html.dark-mode .fa-circle-play, html.dark-mode .fa-circle-pause { filter: invert(1); }

/* 音乐播放按钮和头像完美居中 */
.left-4-1 {
  position: relative !important; 
  padding: 0 !important; 
}

.left-4-1 > span {
  display: flex !important;
  align-items: center !important; 
  justify-content: space-between !important; 
  width: 100% !important;
  height: 50px !important; 
  padding: 0 14px 0 4px !important; 
  box-sizing: border-box !important; 
}

.left-4-1 span img {
  margin: 0 !important; 
  width: 32px !important; 
  height: 32px !important;
  border-radius: 8px !important;
}

.sh-main-top-mu {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important; 
  float: none !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 桌面端丝滑悬停 VS 移动端物理按压 */
@media (hover: hover) and (pointer: fine) {
  .left-4-1:hover { width: 110px !important; height: 60px !important; }
  .left-4-2:hover, .left-4-3:hover { width: 60px !important; height: 60px !important; }
  .applesb-2:hover { width: 55px !important; height: 55px !important; }
  
  .glass-box:hover { 
    background: var(--glass-hover-bg) !important; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); 
  }
  .neckbtn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
  }
  .slide-centent:hover { 
    transform: translateY(-3px); 
    background: var(--glass-border); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); 
  }
  .glass-inner:hover { 
    background: var(--glass-hover-bg) !important; 
    transform: scale(1.05); 
  }
  .touxi:hover { 
    transform: rotate(360deg) scale(1.05); 
  }
}

@media (hover: none) {
  .left-4-1:hover { width: 100px !important; height: 50px !important; }
  .left-4-2:hover, .left-4-3:hover { width: 50px !important; height: 50px !important; }
  .applesb-2:hover { width: 50px !important; height: 50px !important; }
  
  .glass-box:hover, .neckbtn:hover, .slide-centent:hover, 
  .glass-inner:hover, .touxi:hover {
    transform: none !important; 
    box-shadow: none;
  }
  
  .left-4-1:active, .left-4-2:active, .glass-inner:active, 
  .slide-centent:active, .neckbtn:active, .mode-switch__toggle:active {
    transform: scale(0.95) !important;
    background: var(--glass-hover-bg) !important;
    transition: transform 0.1s ease !important;
  }
}

/* 终极优化：对齐与幽灵框问题 */
body .left .row.justify-content-center {
    align-items: center !important; 
    margin-top: 15px !important; 
}

body .left-4-1, 
body .left-4-2, 
body button#collapseBtn, 
body .left-4-4 {
    float: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    align-self: auto !important; 
}

body .left-4-1 { 
    width: 90px !important; 
    height: 40px !important; 
    padding: 0 !important;
}
body .left-4-1 > span {
    width: 100% !important; 
    height: 100% !important;
    padding: 0 10px 0 6px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important;
    box-sizing: border-box !important;
}
body .left-4-1 span img { 
    width: 26px !important; 
    height: 26px !important; 
    margin: 0 !important; 
    border-radius: 6px !important; 
}

body .left-4-2, 
body button#collapseBtn { 
    width: 50px !important; 
    height: 50px !important; 
    padding: 0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
body button#collapseBtn svg { 
    margin: 0 !important; 
}

body .left-4-4 { 
    width: 60px !important; 
    height: 40px !important; 
    padding: 0 !important;
    background: transparent !important; 
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body .left-4-4 a { 
    width: 100% !important; 
    height: 100% !important; 
    display: block !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    background: transparent !important;
}

body .left-4-4 a img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: fill !important; 
    border-radius: 10px !important; 
    margin: 0 !important; 
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; 
}

@media (hover: none) {
    body .left-4-1:hover { width: 90px !important; height: 40px !important; }
    body .left-4-2:hover, body button#collapseBtn:hover { width: 50px !important; height: 50px !important; }
    body .left-4-4:hover { width: 60px !important; height: 40px !important; }
}

/* 展开菜单间距与动效 */
body #coll {
    width: 100% !important; 
    margin-top: 12px !important; 
    text-align: center !important; 
}

body .left-4-3 {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body .left-4-3:hover {
    transform: translateY(-2px) scale(1.05) !important; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; 
}

body .left-4-4 a img {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body .left-4-4 a img:hover {
    transform: translateY(-2px) scale(1.08) !important; 
    box-shadow: 0 8px 20px rgba(222, 41, 16, 0.3) !important; 
    filter: brightness(1.05) !important; 
}

@media (hover: none) {
    body .left-4-3:hover { transform: none !important; box-shadow: var(--glass-shadow) !important; }
    body .left-4-4 a img:hover { transform: none !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; filter: none !important;}
}

/* GitHub、Gitee 与 国旗框布局重塑 */
.flex-container .applesb-2 {
    width: 50px !important;  
    height: 50px !important; 
    padding: 0 !important;
    margin: 5px 6px !important; 
    background: rgba(0, 0, 0, 0.1) !important; 
    border: none !important; 
    box-shadow: none !important; 
    border-radius: 15px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.flex-container .applesb-2 svg {
    width: 24px !important; 
    height: 24px !important;
    display: block !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.flex-container .applesb-3 {
    width: 112px !important; 
    height: 50px !important; 
    margin: 5px 6px !important; 
    padding: 0 !important; 
    background: rgba(0, 0, 0, 0.1) !important; 
    border: none !important; 
    box-shadow: none !important; 
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: var(--dark-mode-text-color, #141414) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.flex-container .applesb-3 img {
    width: 22px !important;
    height: 22px !important;
    margin: 0 6px 0 0 !important; 
    border-radius: 4px !important;
}

.flex-container .applesb-2:hover,
.flex-container .applesb-3:hover {
    transform: translateY(-2px) scale(1.05) !important;
    background: rgba(0, 0, 0, 0.18) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.flex-container .applesb-2:hover svg {
    transform: scale(1.1) !important; 
}

html.dark-mode .flex-container .applesb-2,
html.dark-mode .flex-container .applesb-3 {
    background: rgba(0, 0, 0, 0.1) !important; 
}
html.dark-mode .flex-container .applesb-2:hover,
html.dark-mode .flex-container .applesb-3:hover {
    background: rgba(0, 0, 0, 0.18) !important; 
}

@media (hover: none) {
    .flex-container .applesb-2:hover,
    .flex-container .applesb-3:hover {
        transform: none !important;
        background: rgba(0, 0, 0, 0.1) !important;
        box-shadow: none !important;
    }
    html.dark-mode .flex-container .applesb-2:hover,
    html.dark-mode .flex-container .applesb-3:hover {
        background: rgba(0, 0, 0, 0.1) !important; 
    }
    .flex-container .applesb-2:hover svg {
        transform: none !important;
    }
}

/* 底部操作区胶囊统一 */
body .left-3,
body .left-3-2,
body .left-3-3 {
    width: 56px !important;      
    height: 38px !important;     
    margin: 20px 8px 10px 8px !important; 
    padding: 0 !important;
    border-radius: 14px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body .left-3-2 { width: 64px !important; }

body .left-3 a,
body .left-3-3 a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

body .left-3:hover,
body .left-3-3:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    background: rgba(0, 0, 0, 0.08) !important; 
}

html.dark-mode .left-3:hover,
html.dark-mode .left-3-3:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

@media (hover: none) {
    body .left-3:hover,
    body .left-3-3:hover {
        transform: none !important;
        box-shadow: none !important;
        background: var(--dark-mode-body, #fefefe) !important;
    }
}