/* extracted from templates 20260924095213 */

 /* Loading 按钮 */
 .btn-loading {
 position: relative;
 pointer-events: none;
 opacity: 0.75;
 }
 .btn-loading .btn-spinner {
 display: inline-block;
 width: 14px;
 height: 14px;
 border: 2px solid rgba(255,255,255,0.3);
 border-top-color: var(--ds-text-inverse);
 border-radius: 50%;
 animation: btnSpin 0.8s linear infinite;
 margin-right: 6px;
 vertical-align: middle;
 }
 @keyframes btnSpin {
 to { transform: rotate(360deg); }
 }

 /* 收藏按钮 */
 .fav-btn {
 cursor: pointer;
 color: var(--ds-neutral-300);
 transition: all 0.2s ease;
 background: none;
 border: none;
 padding: 4px;
 }
 .fav-btn:hover {
 color: var(--ds-danger-500);
 transform: scale(1.1);
 }
 .fav-btn.fav-active,
 .fav-active {
 color: var(--ds-danger-500);
 }
 .fav-btn.fav-active:hover {
 color: var(--ds-danger-600);
 }

 /* 返回顶部按钮 */
 .back-to-top {
 position: fixed;
 bottom: 90px;
 right: 24px;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-accent-700));
 color: white;
 border: none;
 cursor: pointer;
 box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1rem;
 z-index: 999;
 opacity: 0;
 visibility: hidden;
 transform: translateY(20px);
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .back-to-top:hover {
 transform: translateY(-3px);
 box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
 }
 .back-to-top:active {
 transform: scale(0.95);
 }
 .back-to-top.visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
 }

 /* 滚动进度条 */
 .scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: transparent;
 z-index: 1000;
 pointer-events: none;
 }
 .scroll-progress-bar {
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, var(--ds-primary-500), var(--ds-accent-700), var(--ds-highlight-500));
 background-size: 200% 100%;
 animation: progressShine 2s linear infinite;
 transition: width 0.1s ease-out;
 box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
 }
 @keyframes progressShine {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
 }

 /* 卡片悬停优化 */
 .card {
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
 box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .card:hover {
 transform: translateY(-6px);
 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
 }
 .card:hover .card-image img {
 transform: scale(1.05);
 }
 .card-image {
 overflow: hidden;
 }
 .card-image img {
 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* 链接下划线动效 */
 a:not(.btn):not(.card):not(.category-tab):not(.m-tab):not(.navbar-brand) {
 position: relative;
 }

 @media (max-width: 768px) {
 .back-to-top {
 bottom: 70px;
 right: 16px;
 width: 40px;
 height: 40px;
 font-size: 0.9rem;
 }
 .scroll-progress {
 height: 2px;
 }
 .card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 }

 /* 主题切换按钮 */
 .theme-toggle-btn {
 background: none;
 border: 1px solid var(--border-color, var(--ds-neutral-200));
 border-radius: 50%;
 width: 36px;
 height: 36px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 color: var(--text-color, #374151);
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 margin-right: 8px;
 }
 .theme-toggle-btn:hover {
 background: var(--light-gray, var(--ds-neutral-100));
 transform: rotate(20deg);
 border-color: var(--primary-color, var(--ds-primary-500));
 color: var(--primary-color, var(--ds-primary-500));
 }
 .theme-toggle-btn:active {
 transform: scale(0.9);
 }

 /* 主题切换动画 */
 body {
 transition: background-color 0.3s ease, color 0.3s ease;
 }
 .navbar, .card, .footer, .btn, .form-control, .search-box input,
 .category-tab, .m-topbar, .m-tabbar, .mc-card, .mc-stat-card {
 transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
 }

 /* 移动端主题切换按钮 */
 .m-theme-toggle {
 display: none !important;
 }

 @media (max-width: 768px) {
 .theme-toggle-btn {
 display: none;
 }
 .m-theme-toggle {
 display: inline-flex !important;
 }
 }

 /* 深色模式下的分享面板适配 */
 body[data-theme="dark"] .share-panel {
 background: var(--card-bg, var(--ds-neutral-900));
 border: 1px solid var(--border-color, var(--ds-neutral-700));
 }
 body[data-theme="dark"] .share-panel-header h3 {
 color: var(--text-color, var(--ds-neutral-100));
 }
 body[data-theme="dark"] .share-option span {
 color: var(--text-secondary, var(--ds-neutral-400));
 }
 body[data-theme="dark"] .share-link-box {
 background: var(--light-gray, var(--ds-neutral-900));
 }
 body[data-theme="dark"] .share-link-box input {
 color: var(--text-secondary, var(--ds-neutral-400));
 }
 body[data-theme="dark"] .share-close:hover {
 background: var(--light-gray, var(--ds-neutral-900));
 }

 /* 深色模式下的收藏页/历史页适配 */
 body[data-theme="dark"] .history-item,
 body[data-theme="dark"] .favorite-item {
 background: var(--card-bg, var(--ds-neutral-900));
 border-color: var(--border-color, var(--ds-neutral-700));
 }
 body[data-theme="dark"] .search-result-item {
 background: var(--card-bg, var(--ds-neutral-900));
 border-color: var(--border-color, var(--ds-neutral-700));
 }

 /* 移动端浮动快捷按钮 (FAB) */
 .m-fab {
 display: none;
 position: fixed;
 right: 16px;
 bottom: 80px;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-accent-700));
 color: white;
 border: none;
 cursor: pointer;
 box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 z-index: 998;
 font-size: 1.2rem;
 align-items: center;
 justify-content: center;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .m-fab:hover {
 transform: scale(1.1);
 box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
 }
 .m-fab:active {
 transform: scale(0.95);
 }
 .m-fab.open #mFabIcon {
 transform: rotate(45deg);
 }
 #mFabIcon {
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* 快捷操作遮罩 */
 .m-quick-actions-overlay {
 display: none;
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1999;
 backdrop-filter: blur(4px);
 align-items: flex-end;
 justify-content: center;
 }
 .m-quick-actions-overlay.active {
 display: flex;
 animation: fadeIn 0.2s ease;
 }
 .m-quick-actions-panel {
 background: var(--color-surface, #fff);
 border-radius: 20px 20px 0 0;
 padding: 20px 16px 28px;
 width: 100%;
 max-width: 100%;
 animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
 }
 body[data-theme="dark"] .m-quick-actions-panel {
 background: var(--card-bg, var(--ds-neutral-900));
 }
 .m-quick-actions-title {
 text-align: center;
 font-size: 1rem;
 font-weight: 600;
 color: var(--text-color, var(--ds-neutral-900));
 margin-bottom: 16px;
 }
 .m-quick-actions-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 margin-bottom: 16px;
 }
 .m-quick-action-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 padding: 14px 8px;
 border-radius: 12px;
 text-decoration: none;
 color: inherit;
 transition: all 0.2s;
 }
 .m-quick-action-item:active {
 background: var(--light-gray, var(--ds-neutral-100));
 transform: scale(0.95);
 }
 .m-quick-action-icon {
 width: 48px;
 height: 48px;
 border-radius: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 1.2rem;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .m-quick-action-item span {
 font-size: 0.78rem;
 color: var(--text-secondary, var(--ds-neutral-500));
 }
 .m-quick-actions-close {
 width: 100%;
 padding: 12px;
 border: none;
 border-radius: 10px;
 background: var(--light-gray, var(--ds-neutral-100));
 color: var(--text-color, var(--ds-neutral-900));
 font-size: 0.9rem;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 }
 .m-quick-actions-close:active {
 background: var(--border-color, var(--ds-neutral-200));
 }

 @media (max-width: 768px) {
 .m-fab {
 display: flex;
 }
 }

 @media (min-width: 769px) {
 .m-quick-actions-overlay {
 display: none !important;
 }
 }

 /* 图片放大预览 Lightbox */
 .lightbox-overlay {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0, 0, 0, 0.92);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 3000;
 opacity: 0;
 transition: opacity 0.3s ease;
 }
 .lightbox-overlay.active {
 display: flex;
 opacity: 1;
 }
 .lightbox-content {
 max-width: 90vw;
 max-height: 85vh;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .lightbox-content img {
 max-width: 100%;
 max-height: 85vh;
 object-fit: contain;
 border-radius: 8px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 animation: lightboxZoom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 background: transparent;
 }
 @keyframes lightboxZoom {
 from { transform: scale(0.9); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
 }
 .lightbox-close {
 position: absolute;
 top: 20px;
 right: 20px;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.1);
 border: none;
 color: white;
 font-size: 1.2rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 }
 .lightbox-close:hover {
 background: rgba(255, 255, 255, 0.2);
 transform: rotate(90deg);
 }
 .lightbox-prev,
 .lightbox-next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.1);
 border: none;
 color: white;
 font-size: 1.1rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 }
 .lightbox-prev { left: 20px; }
 .lightbox-next { right: 20px; }
 .lightbox-prev:hover,
 .lightbox-next:hover {
 background: rgba(255, 255, 255, 0.2);
 transform: translateY(-50%) scale(1.1);
 }
 .lightbox-caption {
 position: absolute;
 bottom: 40px;
 left: 50%;
 transform: translateX(-50%);
 color: white;
 font-size: 0.9rem;
 text-align: center;
 max-width: 80%;
 opacity: 0.85;
 }
 .lightbox-counter {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 color: rgba(255, 255, 255, 0.6);
 font-size: 0.8rem;
 }

 @media (max-width: 768px) {
 .lightbox-prev { left: 8px; }
 .lightbox-next { right: 8px; }
 .lightbox-prev, .lightbox-next {
 width: 40px;
 height: 40px;
 font-size: 0.9rem;
 }
 .lightbox-close {
 top: 12px;
 right: 12px;
 width: 40px;
 height: 40px;
 }
 }

 /* 键盘快捷键帮助面板 */
 .kbd-help-overlay {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0, 0, 0, 0.6);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 3100;
 backdrop-filter: blur(6px);
 }
 .kbd-help-overlay.active {
 display: flex;
 animation: fadeIn 0.2s ease;
 }
 .kbd-help-panel {
 background: var(--color-surface, #fff);
 border-radius: 16px;
 padding: 24px;
 width: 90%;
 max-width: 520px;
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
 animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 body[data-theme="dark"] .kbd-help-panel {
 background: var(--card-bg, var(--ds-neutral-900));
 border: 1px solid var(--border-color, var(--ds-neutral-700));
 }
 .kbd-help-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 }
 .kbd-help-header h3 {
 margin: 0;
 font-size: 1.1rem;
 color: var(--text-color, var(--ds-neutral-900));
 display: flex;
 align-items: center;
 gap: 10px;
 }
 .kbd-help-header h3 i {
 color: var(--primary-color, var(--ds-primary-500));
 }
 .kbd-help-close {
 background: none;
 border: none;
 font-size: 1.1rem;
 color: var(--text-muted, var(--ds-neutral-400));
 cursor: pointer;
 padding: 6px 10px;
 border-radius: 6px;
 transition: all 0.2s;
 }
 .kbd-help-close:hover {
 background: var(--light-gray, var(--ds-neutral-100));
 }
 .kbd-help-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 margin-bottom: 16px;
 }
 .kbd-help-group h4 {
 margin: 0 0 12px 0;
 font-size: 0.8rem;
 color: var(--text-muted, var(--ds-neutral-400));
 text-transform: uppercase;
 letter-spacing: 0.5px;
 font-weight: 600;
 }
 .kbd-item {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
 font-size: 0.82rem;
 color: var(--text-secondary, var(--ds-neutral-600));
 }
 .kbd-item kbd {
 display: inline-block;
 min-width: 24px;
 padding: 2px 6px;
 background: var(--light-gray, var(--ds-neutral-100));
 border: 1px solid var(--border-color, var(--ds-neutral-200));
 border-radius: 4px;
 font-family: monospace;
 font-size: 0.75rem;
 text-align: center;
 color: var(--text-color, var(--ds-neutral-900));
 box-shadow: 0 1px 0 var(--border-color, var(--ds-neutral-200));
 }
 body[data-theme="dark"] .kbd-item kbd {
 background: var(--light-gray, var(--ds-neutral-900));
 border-color: var(--border-color, var(--ds-neutral-700));
 color: var(--text-color, var(--ds-neutral-100));
 box-shadow: 0 1px 0 var(--border-color, var(--ds-neutral-700));
 }
 .kbd-help-tip {
 text-align: center;
 font-size: 0.8rem;
 color: var(--text-muted, var(--ds-neutral-400));
 margin: 0;
 }
 .kbd-help-tip kbd {
 display: inline-block;
 padding: 2px 8px;
 background: var(--primary-color, var(--ds-primary-500));
 color: white;
 border-radius: 4px;
 font-family: monospace;
 font-size: 0.78rem;
 }

 @media (max-width: 768px) {
 .kbd-help-grid {
 grid-template-columns: 1fr;
 gap: 16px;
 }
 }

 /* 页面跳转加载条 */
 .page-loading-bar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 z-index: 9999;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.2s ease;
 }
 .page-loading-bar.active {
 opacity: 1;
 }
 .page-loading-bar-inner {
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, var(--ds-primary-500), var(--ds-accent-700), var(--ds-highlight-500), var(--ds-primary-500));
 background-size: 300% 100%;
 animation: loadingShine 1.5s linear infinite;
 box-shadow: 0 0 10px rgba(102, 126, 234, 0.6);
 transition: width 0.3s ease-out;
 }
 @keyframes loadingShine {
 0% { background-position: 300% 0; }
 100% { background-position: -300% 0; }
 }

 /* 按钮波纹效果 */
 .btn, .m-tab-item, .category-tab {
 position: relative;
 overflow: hidden;
 }
 .ripple {
 position: absolute;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.4);
 transform: scale(0);
 animation: rippleEffect 0.6s ease-out;
 pointer-events: none;
 }
 .btn-outline .ripple,
 .category-tab:not(.active) .ripple,
 .m-tab-item:not(.active) .ripple {
 background: rgba(102, 126, 234, 0.2);
 }
 @keyframes rippleEffect {
 to {
 transform: scale(4);
 opacity: 0;
 }
 }

 /* 按钮按压效果 */
 .btn:active {
 transform: scale(0.97);
 }
 .btn {
 transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
 }

 /* 图标悬停微动 */
 .fa-search, .fa-user, .fa-bell, .fa-heart, .fa-share-alt,
 .fa-arrow-up, .fa-moon, .fa-sun, .fa-plus {
 transition: transform 0.2s ease;
 }
 
 img {
 background: var(--ds-neutral-50);
 }
 .img-fade {
 opacity: 0;
 transition: opacity 0.5s ease;
 background: linear-gradient(90deg, var(--ds-neutral-100) 25%, var(--ds-neutral-200) 50%, var(--ds-neutral-100) 75%);
 background-size: 200% 100%;
 animation: imgShimmer 1.5s infinite;
 }
 .img-fade.loaded {
 opacity: 1;
 animation: none;
 background: transparent;
 }
 @keyframes imgShimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
 }
 /* 深色模式骨架屏 */
 body[data-theme="dark"] img {
 background: var(--ds-neutral-900);
 }
 body[data-theme="dark"] .img-fade {
 background: linear-gradient(90deg, var(--ds-neutral-900) 25%, var(--ds-neutral-700) 50%, var(--ds-neutral-900) 75%);
 background-size: 200% 100%;
 }
 /* 卡片骨架屏 */
 .skeleton-card {
 background: var(--card-bg, #fff);
 border-radius: var(--radius, 8px);
 overflow: hidden;
 }
 .skeleton-line {
 height: 12px;
 background: linear-gradient(90deg, var(--ds-neutral-100) 25%, var(--ds-neutral-200) 50%, var(--ds-neutral-100) 75%);
 background-size: 200% 100%;
 animation: imgShimmer 1.5s infinite;
 border-radius: 4px;
 margin-bottom: 8px;
 }
 .skeleton-line.w-80 { width: 80%; }
 .skeleton-line.w-60 { width: 60%; }
 .skeleton-line.w-40 { width: 40%; }
 body[data-theme="dark"] .skeleton-line {
 background: linear-gradient(90deg, var(--ds-neutral-900) 25%, var(--ds-neutral-700) 50%, var(--ds-neutral-900) 75%);
 background-size: 200% 100%;
 }
 
 .page-fade {
 opacity: 0;
 transform: translateY(12px);
 transition: opacity 0.5s ease, transform 0.5s ease;
 }
 .page-fade.visible {
 opacity: 1;
 transform: translateY(0);
 }
 
 /* 卡片渐入（基于 IntersectionObserver） */
 .fade-in-up {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease, transform 0.6s ease;
 }
 .fade-in-up.visible {
 opacity: 1;
 transform: translateY(0);
 }
 
 /* 平滑滚动 */
 html {
 scroll-behavior: smooth;
 }
 @media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .page-fade, .fade-in-up { opacity: 1 !important; transform: none !important; transition: none !important; }
 }