/* ============================================================ */
/* Stylesheet */


:root {
    /* Spacing variables */
    --space-xxs: 0.0625rem;    /* 1px */
    --space-xs: 0.125rem;      /* 2px */
    --space-sm: 0.25rem;       /* 4px */
    --space-md: 0.5rem;        /* 8px */
    --space-base: 0.75rem;     /* 12px */
    --space-lg: 1rem;          /* 16px */
    --space-xl: 1.25rem;       /* 20px */
    --space-xxl: 1.5rem;       /* 24px */
    --space-xxxl: 2rem;        /* 32px */
    
    /* Font size variables */
    --fs-xxxxs: 0.5rem;    /* 8px - Extra extra extra small */
    --fs-xxxs: 0.625rem;   /* 10px */
    --fs-xxs: 0.6875rem;   /* 11px */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg: 1.25rem;     /* 20px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-xxl: 2rem;       /* 32px */
    --fs-xxxl: 2.5rem;    /* 40px - Largest font size */
    
    /* Border styles */
    --border-width: 1px;
    --border-color: var(--gray-200);
    --radius-sm: 0.125rem;     /* 2px */
    --radius-md: 0.25rem;      /* 4px */
    --radius-lg: 0.375rem;     /* 6px */
    --radius-xl: 0.5rem;       /* 8px */
    --radius-full: 50%;        /* Full circle */
    
    /* Shadow effects */
    --shadow-xxs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.025);
    --shadow-xs: 0 0.09375rem 0.1875rem rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-base: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.175);
    --shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    --shadow-xxl: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
    --shadow-xxxl: 0 2rem 4rem rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    
    /* Sidebar settings */
    --sidebar-width: 140px;        /* Desktop sidebar width - Narrowed */
    --sidebar-width-mobile: 200px; /* Mobile sidebar width */
    --sidebar-active-bg: rgba(255, 255, 255, 0.05); /* Sidebar active item background color */
    
    /* Transition animations */
    --transition-sm: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-md: 0.3s ease;
    --transition-lg: 0.4s ease;
    --transition-xl: 0.5s ease;
    
    /* Color variables */
    --white: #fff;
    --black: #000;
    
    /* Gray palette */
    --gray-50: oklch(0.985 0.002 247.839);
    --gray-100: oklch(0.967 0.003 264.542);
    --gray-200: oklch(0.928 0.006 264.531);
    --gray-300: oklch(0.872 0.01 258.338);
    --gray-400: oklch(0.707 0.022 261.325);
    --gray-500: oklch(0.551 0.027 264.364);
    --gray-600: oklch(0.446 0.03 256.802);
    --gray-700: oklch(0.373 0.034 259.733);
    --gray-800: oklch(0.278 0.033 256.848);
    --gray-900: oklch(0.21 0.034 264.665);
    --gray-950: oklch(0.13 0.028 261.692);
    
    /* Blue palette */
    --blue-50: oklch(0.97 0.014 254.604);
    --blue-100: oklch(0.932 0.032 255.585);
    --blue-200: oklch(0.882 0.059 254.128);
    --blue-300: oklch(0.809 0.105 251.813);
    --blue-400: oklch(0.707 0.165 254.624);
    --blue-500: oklch(0.623 0.214 259.815);
    --blue-600: oklch(0.546 0.245 262.881);
    --blue-700: oklch(0.488 0.243 264.376);
    --blue-800: oklch(0.424 0.199 265.638);
    --blue-900: oklch(0.379 0.146 265.522);
    --blue-950: oklch(0.282 0.091 267.935);

    /* Sky color palette */
    --sky-50: oklch(0.977 0.013 236.62);
    --sky-100: oklch(0.951 0.026 236.824);
    --sky-200: oklch(0.901 0.058 230.902);
    --sky-300: oklch(0.828 0.111 230.318);
    --sky-400: oklch(0.746 0.16 232.661);
    --sky-500: oklch(0.685 0.169 237.323);
    --sky-600: oklch(0.588 0.158 241.966);
    --sky-700: oklch(0.5 0.134 242.749);
    --sky-800: oklch(0.443 0.11 240.79);
    --sky-900: oklch(0.391 0.09 240.876);
    --sky-950: oklch(0.293 0.066 243.157);
    
    /* Red palette */
    --red-50: oklch(0.971 0.013 17.38);
    --red-100: oklch(0.936 0.032 17.717);
    --red-200: oklch(0.885 0.062 18.334);
    --red-300: oklch(0.808 0.114 19.571);
    --red-400: oklch(0.704 0.191 22.216);
    --red-500: oklch(0.637 0.237 25.331);
    --red-600: oklch(0.577 0.245 27.325);
    --red-700: oklch(0.505 0.213 27.518);
    --red-800: oklch(0.444 0.177 26.899);
    --red-900: oklch(0.396 0.141 25.723);
    --red-950: oklch(0.258 0.092 26.042);
    
    /* Green palette */
    --green-50: oklch(0.982 0.018 155.826);
    --green-100: oklch(0.962 0.044 156.743);
    --green-200: oklch(0.925 0.084 155.995);
    --green-300: oklch(0.871 0.15 154.449);
    --green-400: oklch(0.792 0.209 151.711);
    --green-500: oklch(0.723 0.219 149.579);
    --green-600: oklch(0.627 0.194 149.214);
    --green-700: oklch(0.527 0.154 150.069);
    --green-800: oklch(0.448 0.119 151.328);
    --green-900: oklch(0.393 0.095 152.535);
    --green-950: oklch(0.266 0.065 152.934);
    
    /* Orange palette */
    --orange-50: oklch(0.98 0.016 73.684);
    --orange-100: oklch(0.954 0.038 75.164);
    --orange-200: oklch(0.901 0.076 70.697);
    --orange-300: oklch(0.837 0.128 66.29);
    --orange-400: oklch(0.75 0.183 55.934);
    --orange-500: oklch(0.705 0.213 47.604);
    --orange-600: oklch(0.646 0.222 41.116);
    --orange-700: oklch(0.553 0.195 38.402);
    --orange-800: oklch(0.47 0.157 37.304);
    --orange-900: oklch(0.408 0.123 38.172);
    --orange-950: oklch(0.266 0.079 36.259);

    --yellow-50: oklch(0.987 0.026 102.212);
    --yellow-100: oklch(0.973 0.071 103.193);
    --yellow-200: oklch(0.945 0.129 101.54);
    --yellow-300: oklch(0.905 0.182 98.111);
    --yellow-400: oklch(0.852 0.199 91.936);
    --yellow-500: oklch(0.795 0.184 86.047);
    --yellow-600: oklch(0.681 0.162 75.834);
    --yellow-700: oklch(0.554 0.135 66.442);
    --yellow-800: oklch(0.476 0.114 61.907);
    --yellow-900: oklch(0.421 0.095 57.708);
    --yellow-950: oklch(0.286 0.066 53.813);
    
    /* Pink palette */
    --pink-50: oklch(0.971 0.014 343.198);
    --pink-100: oklch(0.948 0.028 342.258);
    --pink-200: oklch(0.899 0.061 343.231);
    --pink-300: oklch(0.823 0.12 346.018);
    --pink-400: oklch(0.718 0.202 349.761);
    --pink-500: oklch(0.656 0.241 354.308);
    --pink-600: oklch(0.592 0.249 0.584);
    --pink-700: oklch(0.525 0.223 3.958);
    --pink-800: oklch(0.459 0.187 3.815);
    --pink-900: oklch(0.408 0.153 2.432);
    --pink-950: oklch(0.284 0.109 3.907);
    
    /* Purple color palette */
    --purple-50: oklch(0.977 0.014 308.299);
    --purple-100: oklch(0.946 0.033 307.174);
    --purple-200: oklch(0.902 0.063 306.703);
    --purple-300: oklch(0.827 0.119 306.383);
    --purple-400: oklch(0.714 0.203 305.504);
    --purple-500: oklch(0.627 0.265 303.9);
    --purple-600: oklch(0.558 0.288 302.321);
    --purple-700: oklch(0.496 0.265 301.924);
    --purple-800: oklch(0.438 0.218 303.724);
    --purple-900: oklch(0.381 0.176 304.987);
    --purple-950: oklch(0.291 0.149 302.717);
    
    /* Stone color palette */
    --stone-50: oklch(0.985 0.001 106.423);
    --stone-100: oklch(0.97 0.001 106.424);
    --stone-200: oklch(0.923 0.003 48.717);
    --stone-300: oklch(0.869 0.005 56.366);
    --stone-400: oklch(0.709 0.01 56.259);
    --stone-500: oklch(0.553 0.013 58.071);
    --stone-600: oklch(0.444 0.011 73.639);
    --stone-700: oklch(0.374 0.01 67.558);
    --stone-800: oklch(0.268 0.007 34.298);
    --stone-900: oklch(0.216 0.006 56.043);
    --stone-950: oklch(0.147 0.004 49.25);
}


/* ========== Base styles ========== */
/* Website layout */
body {
    margin: 0;
    padding: 0;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--gray-700);
    background-color: #f1f2f3;
}

/* Base element reset */
a {
    text-decoration: none;
    color: var(--sky-600);
    transition: color var(--transition-base);
}

a:hover {
    color: var(--sky-600);
}

h1, h2, h3, h4, h5, h6, ul, li, p{
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* Mobile menu button */
.menu-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1055; /* Ensure button is above page content but below sidebar */
    background: var(--sky-600);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    width: var(--space-xxl);
    height: var(--space-xxl);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-lg);
}

.menu-toggle:hover {
    background: var(--sky-700);
}

/* Sidebar navigation - light mode */
.sidebar {
width: var(--sidebar-width);
z-index: 2000; /* 设置侧边栏层级高于.toggle-sidebar */
    background-color: white !important;
    padding: 0; /* 移除右侧padding，避免横向滚动条 */
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1081;
    box-shadow: var(--shadow-md);
    overflow: hidden; /* 完全隐藏滚动条 */
}

/* Sidebar body - content area */
.sidebar-body {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; /* 隐藏横向滚动条 */
}

/* Sidebar dropdown menu */
.sidebar-item {
    position: relative;
    margin-bottom: var(--space-sm);
    overflow: visible;
}

.sidebar-item .dropdown-icon {
    margin-left: auto;
    font-size: 0.7rem;
}

/* Sidebar popup menu - 优化实现顺滑显示 */
.sidebar-popup {
    display: none; /* 初始隐藏 */
    position: fixed; /* fixed定位避免滚动影响 */
    left: calc(var(--sidebar-width) + 8px); /* 调整左侧距离，设置适当的间距 */
    background-color: white;
    min-width: 180px;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-xl);
    padding: 8px;
    z-index: 2200; /* 高于.sidebar-link的z-index，确保不被覆盖 */
    border: 3px solid rgba(60, 71, 76, 0);
}

/* 优化侧边栏交互性能 - 直接使用display切换实现最快响应 */

.sidebar-item:hover .sidebar-popup {
    display: block; /* 直接显示 */
}

.sidebar-popup a {
    display: block;
    padding: 8px 15px;
    color: var(--gray-500);
    font-size: var(--fs-xs);
    width: 100%;
    border-radius: var(--radius-md);
}

.sidebar-popup a:hover {
    background-color: var(--gray-100);
}

/* Sidebar dropdown triangle indicator with gap coverage */
.sidebar-popup::before {
    content: '';
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent white transparent;
    position: absolute;
    top: 14px;
    left: -10px;
    z-index: 1001;
}

/* 优化伪元素实现 - 增加间隙覆盖范围，确保顺滑交互 */
.sidebar-popup::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40px; /* 延伸更多覆盖间隙 */
    width: 40px; /* 增加宽度确保平滑过渡 */
    height: 100%;
    background: transparent;
    z-index: 1000;
}





/* Sidebar dropdown shadow in dark mode */
[data-bs-theme="dark"] .sidebar-popup {
    background-color: var(--card-bg);
}

[data-bs-theme="dark"] .sidebar-popup::before {
    border-color: transparent var(--card-bg) transparent transparent;
    left: -10px;
}

[data-bs-theme="dark"] .sidebar-popup a {
    color: var(--gray-300);
    font-size: 12px;
}

[data-bs-theme="dark"] .sidebar-popup a:hover {
    background-color: var(--gray-700);
    color: var(--white);
}

/* Sidebar scrollbar styles */
/* .sidebar-body::-webkit-scrollbar {
    width: 6px;
}

.sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.sidebar-body::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
} */

/* Dark mode sidebar scrollbar styles - match light mode structure */


/* [data-bs-theme="dark"] .sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

[data-bs-theme="dark"] .sidebar-body::-webkit-scrollbar-thumb {
    background: var(--gray-700); 
}

[data-bs-theme="dark"] .sidebar-body::-webkit-scrollbar-thumb:hover {
    background: var(--gray-600); 
} */

    ::-webkit-scrollbar-thumb {
        background-color:rgba(130,130,130,.5);
        -webkit-border-radius: 4px;
        border-radius: 4px
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--sky-600);
        -webkit-border-radius: 4px;
        border-radius: 4px
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--sky-600);
        -webkit-border-radius: 4px;
        border-radius: 4px
    }

    ::-webkit-scrollbar-corner {
        background: rgba(0,0,0,0);
        border-radius: 0 0 8px 0
    }

    ::-webkit-scrollbar-button {
        background-color: rgba(0,0,0,0);
        height: 2px;
        width: 2px
    }


.sidebar-header {
    padding: var(--space-xxl) var(--space-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm); /* Decrease gap value */
}

.sidebar-logo h5 {
    margin: 0;
    color: var(--gray-900); /* Logo text color in light mode */
    font-size: var(--fs-lg);
    font-weight: 500;
}

/* Dark mode sidebar logo text color */
[data-bs-theme="dark"] .sidebar-logo h5 {
    color: var(--white);
}

.logo-icon {
    font-size: var(--fs-xl);
    color: var(--sky-600);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-nav .sidebar-link {
    border-radius: var(--radius-lg);
    padding: var(--space-base) var(--space-xxxl);
    color: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: var(--fs-sm);
    transition: all var(--transition-sm);
    position: relative;
    z-index: 2100; /* 高于伪元素的z-index，确保链接可以点击 */
}

.sidebar-nav .sidebar-link .nav-icon {
    font-size: var(--fs-base);
    margin-right: var(--space-sm);
    margin-bottom: 0;
}


.sidebar-nav .sidebar-link:hover {
    background-color: var(--gray-100) !important;

}

.sidebar-nav .sidebar-link.active {
    background-color: var(--gray-100) !important;
}

.nav-icon {
    margin-right: var(--space-md);
}

.category-icon {
    margin-right: var(--space-md);
    width: 1rem;
    height: 1rem;
}

/* Main content area */
.main {
    margin-left: var(--sidebar-width); /* Use desktop width by default */
    min-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.main::after {
    content: '';
    height: 500px;
    width: 100%;
    background-image: url("/static/b/img/b614d6a8c2b9254ffe72cc1c7d54e64b.png");
    background-size: 40%;
    display: inline-block;
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
}
[data-bs-theme="dark"] .main::after {
    opacity: .008;
}
/* Top bar */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl) 0;
    margin-bottom: 0;
}

/* Container within top bar */
.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Home button container - Hidden by default */
.home-button-container {
    display: none;
    align-items: center;
    opacity: 1 !important;
}

/* Show home-button on mobile devices (max-width: 991.98px) */
@media (max-width: 991.98px) {
    .home-button-container {
        display: flex;
    }
}

/* Home button */
.home-button {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    color: var(--gray-700);
    opacity: 0.7;
    transition: var(--transition-md);
    background-color: transparent !important; /* Ensure background is transparent */
}

.home-button:hover {
    opacity: 1;
    background-color: var(--gray-200) !important;
    color: var(--gray-900);
}

/* Left side area */
.top-bar-left {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex: 1;
    justify-content: flex-start;
}

/* Right side user status area */
#ajax_user {
    display: flex;
    align-items: center;
}



/* Home link style */


.top-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* User dropdown menu */
.user-dropdown {
    position: relative;
    display: inline-block;
    /* Prevent container from changing size during animation */
    vertical-align: top;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: none;
    color: var(--gray-700);
    padding: var(--space-sm) var(--space-base);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: var(--transition-base);
    border: var(--border-width) solid transparent;
    position: relative;
    z-index: 10;
}

.user-dropdown-toggle:hover {
    background-color: var(--pink-50);
    color: var(--gray-900);
    border-color: var(--pink-100);
}
.user-dropdown-toggle i{color:var(--gray-300)}
/* Dark mode dropdown toggle button style */
[data-bs-theme="dark"] .user-dropdown-toggle {
    color: var(--gray-300);
}

[data-bs-theme="dark"] .user-dropdown-toggle:hover {
    background-color: var(--gray-800);
    color: var(--white);
    border-color: var(--gray-700);
}











[data-bs-theme="dark"] .user-dropdown-item:hover {
    background-color: var(--gray-700);
    color: var(--white);
    /* Use background gradient instead of border to achieve blue-to-pink gradient effect */
    background-image: linear-gradient(to bottom, var(--sky-400), var(--pink-400));
    background-size: 2px 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    border-left-color: transparent;
}

/* Top bar right area */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
.top-bar-right a{color:var(--gray-500);}
.top-bar-right a:hover{color:var(--sky-600);}
/* 暗黑模式按钮容器 */
.dark-mode-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 25px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 简化的暗黑模式按钮样式 */
.dark-mode-btn {
    position: absolute;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    z-index: 9999;
    padding-top: 4px;
    padding-bottom: 0;
    color: rgba(255, 255, 255, 0.8); /* 降低图标亮度 */
    font-size: 14px;
}

/* 确保a链接不显示默认的蓝色 */
.dark-mode-btn:link,
.dark-mode-btn:visited,
.dark-mode-btn:hover,
.dark-mode-btn:active {
    color: white;
    text-decoration: none;
}

/* 使用::after伪元素实现三角形效果 */
.dark-mode-btn::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 22px solid transparent;
    border-left: 22px solid transparent;
    border-top: 22px solid #3a4569; /* 使用更浅的颜色 */
    border-right: 22px solid #3a4569;
    z-index: -1; /* 底色层级低于图标 */
    pointer-events: none;
}

/* 模式图标样式已移至.dark-mode-btn类中，不再需要单独定义 */
/* Top bar message link */
.top-bar .top-bar-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--gray-700);
    background: none;
    border: none;
    cursor: pointer;
    /* padding: var(--space-md); */
    border-radius: var(--radius-md);
    opacity: 0.7; /* Weaken color */
    transition: var(--transition-md);
}
.top-bar .top-bar-link span{font-size: var(--fs-sm);}

.top-bar .top-bar-link:hover {
    opacity: 1; /* Restore normal color on hover */
}
/* 暗黑模式下的三角形底色 - 不突出显示 */
[data-bs-theme="dark"] .dark-mode-btn::after {
    border-bottom: 22px solid transparent;
    border-left: 22px solid transparent;
    border-top-color: rgba(45, 55, 72, 0.7); /* 调整为更深的颜色，更符合暗黑模式 */
    border-right-color: rgba(45, 55, 72, 0.7);
}

/* 暗黑模式下确保点击区域有效 */
[data-bs-theme="dark"] .dark-mode-btn {
    z-index: 9999;
}

/* 简化结构后，图标样式直接在.dark-mode-btn中设置 */
/* Message link in dark mode */
[data-bs-theme="dark"] .top-bar .top-bar-link {
    color: var(--gray-300);
    opacity: 0.6; /* Further weaken color in dark mode */
}

[data-bs-theme="dark"] .top-bar .top-bar-link:hover {
    opacity: 1; /* Restore normal color on hover */
}

/* Back to homepage link in dark mode */
[data-bs-theme="dark"] .top-bar-left .top-bar-link:first-child {
    color: var(--gray-300);
    opacity: 0.6;
}

[data-bs-theme="dark"] .top-bar-left .top-bar-link:first-child:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Back to homepage button in dark mode */
[data-bs-theme="dark"] .home-button {
    color: var(--gray-300);
    opacity: 0.6;
    background-color: transparent !important; /* Ensure background is transparent */
}

[data-bs-theme="dark"] .home-button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Mobile menu button styles */
.top-bar .menu-toggle {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    margin-right: var(--space-base);
    background: var(--sky-600);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    width: var(--space-xxl);
    height: var(--space-xxl);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-sm);
    opacity: 0.8; /* Weaken color */
    transition: var(--transition-md);
}

.top-bar .menu-toggle:hover {
    opacity: 1; /* Restore normal color on hover */
}
/* Search box */
.search-box {
    margin: var(--space-md) auto;
    padding: var(--space-base) var(--space-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Search tabs */
.search-tabs {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.node-item {
    padding: var(--space-xs) var(--space-md);
    background-color: transparent;
    color: var(--gray-700);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    font-weight: normal;
    font-size: var(--fs-sm);
}

.search-tab {
    padding: var(--space-xs) var(--space-md);
    background-color: transparent;
    color: var(--gray-500);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    font-weight: normal;
    font-size: var(--fs-base); /* Option font size is slightly larger than node */
}

.search-tab:hover,
.node-item:hover {
    /* No border effect */
}

.search-tab.active {
    font-weight: 500;
    color: var(--sky-600);
    /* No border effect */
}

.node-item.active {
    font-weight: 500;
    color: var(--sky-600);
    /* No border effect */
}

/* Search nodes */
.search-nodes {
    margin-top: var(--space-md);
}

.node-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* Special style for internal search node - Slightly different from node-item style */
.node-item.site-search {
    color: var(--sky-300);
    border-radius: var(--radius-lg);
}

.node-item.site-search:hover {
    color: var(--sky-600);
}

.node-item.site-search.active {
    font-weight: 500;
    color: var(--sky-600);
}

/* Dark mode search box style */
/* Dark mode search box style - Keep default style in dark mode */
/* [data-bs-theme="dark"] .search-box {}

/* Dark mode search input and button styles */
[data-bs-theme="dark"] .search-input {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-100);
}

/* Note: CSS cannot directly modify placeholder text content through ::placeholder pseudo-element
To display different placeholder texts for different categories, you need to dynamically set them in the HTML template using JavaScript
The following code is for reference only, actual implementation requires modifying template files
*/



/* Unified setting for placeholder color in dark mode */
[data-bs-theme="dark"] .search-input::placeholder {
    color: var(--gray-500);
}

[data-bs-theme="dark"] .search-input:focus {
    border-color: var(--sky-400);
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25);
}

[data-bs-theme="dark"] .search-button {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    padding:0 var(--space-lg);
    background-color: var(--gray-700);
    color: var(--gray-300);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-base);
    transition: var(--transition-base);
}

[data-bs-theme="dark"] .search-button:hover {
    background-color: var(--gray-600);
    color: var(--white);
}

/* Dark mode search tab style */
[data-bs-theme="dark"] .search-tab {
    background-color: transparent;
    color: var(--gray-300);
    border: none;
    font-size: var(--fs-base);
}

[data-bs-theme="dark"] .search-tab:hover {
}

/* Dark mode active search tab style */
[data-bs-theme="dark"] .search-tab.active {
    background-color: transparent;
    font-weight: 500;
    color: var(--sky-300);
}

/* Dark mode node button style */
[data-bs-theme="dark"] .node-item {
    background-color: transparent;
    color: var(--gray-300);
    border: none;
    font-size: var(--fs-sm);
}

[data-bs-theme="dark"] .node-item:hover {
}

/* Dark mode active node button style */
[data-bs-theme="dark"] .node-item.active {
    background-color: transparent;
    font-weight: 500;
    color: var(--sky-300);
}

/* Dark mode special style for internal search node */
[data-bs-theme="dark"] .node-item.site-search {
    color: var(--sky-400);
    border-radius: var(--radius-lg);
}

[data-bs-theme="dark"] .node-item.site-search:hover {
    color: var(--sky-300);
}

[data-bs-theme="dark"] .node-item.site-search.active {
    font-weight: 500;
    color: var(--sky-300);
}

/* Search input group */
.search-input-group {
    display: flex;
    width: 100%;
    max-width: 800px;
    position: relative;
}

.search-input {
    flex: 1;
    padding: var(--space-md) calc(var(--space-lg) + 85px) var(--space-md) var(--space-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--fs-base);
    min-width: 300px;
}

.search-input:focus {
    outline: none;
    border-color: var(--sky-600);
    box-shadow: var(--shadow-focus);
}

.search-button {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    padding:0 var(--space-lg);
    background-color: var(--gray-200);
    color: var(--gray-700);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-base);
    transition: var(--transition-base);
}

.search-button:hover {
    background-color: var(--gray-300);
}

/* Bootstrap Tabs custom styles */
.nav-tabs .nav-link {
    border: var(--border-width) solid transparent;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: var(--fs-sm);
    padding: var(--space-md) var(--space-base);
}

.nav-tabs .nav-link:hover {
    border-color: var(--gray-200);
    background-color: var(--gray-100);
}

.nav-tabs .nav-link.active {
    border-color: var(--border-color);
    border-bottom-color: var(--white);
    background-color: var(--white);
    color: var(--sky-600);
}

.nav-tabs {
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: var(--space-base);
}

/* Bootstrap Tabs style in dark mode */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #dee2e6;
    background-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #495057;
    background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    border-color: #495057;
    border-bottom-color: #2b3035;
    background-color: #2b3035;
    color: var(--sky-400);
}

/* ========== Category navigation styles ========== */
.category-nav {
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 2rem;
}

/* Category navigation container style */
.category-nav > nav {
    background-color: var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
}

/* Dark mode category navigation container style - Adjust to more obvious background color */
[data-bs-theme="dark"] .category-nav > nav {
    background-color: var(--gray-800);
}

/* Mobile adaptation - Reduce category navigation bottom margin */
@media (max-width: 767.98px) {
    .category-nav {
        margin-bottom: var(--space-sm);
    }
}

/* ========== Bootstrap Pills custom styles - Override Bootstrap default styles and add custom effects ========== */
.nav-pills {
    display: flex;
    gap: 0 var(--space-xl);
}

.nav-pills .nav-link {
    border-radius: var(--radius-md);
    color: var(--gray-500);
    font-size: var(--fs-sm);
    padding: 0;
    transition: all var(--transition-base);
    font-weight: 300;
}
.nav-pills .nav-link:hover{color:var(--sky-600)}
.category-nav .nav-pills .nav-link {
    padding: var(--space-md) var(--space-xs);
}
.category-nav .nav-pills .nav-link:hover{
    color: var(--sky-600);
}

/* Active tab style with gradient and skew effect */
.nav-pills .nav-link.active {
    background-color: transparent;
    color: var(--sky-600);
    font-weight: 500;
    position: relative;
}

.nav-pills .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: .7;
    bottom: 0px;
    height: 50%;
    background: linear-gradient(to right, transparent 0%, var(--yellow-200) 100%);
    transform: skewX(-15deg);
    border-radius: var(--radius-sm);
}

/* New custom active style - Reference style */
.nav-pills .nav-link.custom-active {
    height: 13px !important;
    background: linear-gradient(to right, transparent 0%, #f6dc3e 100%);
    transform: skewX(-15deg);
    color: var(--sky-600);
    font-weight: 500;
    position: relative;
}

.nav-pills .nav-link.custom-active::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: .7;
    bottom: 0px;
    height: 40%;
    background: #f9e476;
}


/* ========== Bootstrap Pills styles in dark mode ========== */
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: #888;
    background-color: transparent;
}

[data-bs-theme="dark"] .nav-pills .nav-link:hover {
    background-color: transparent;
    color:var(--sky-300)
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
    color: #bdbfc5;
    font-weight: 500;
    position: relative;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: .7;
    bottom: 0px;
    height: 50%;
    background: linear-gradient(to right, transparent 0%, var(--yellow-200) 100%);
    transform: skewX(-15deg);
    border-radius: var(--radius-sm);
}



/* Custom close button style - Using Font Awesome icon */
.custom-close-btn {
    all: unset;
    width: var(--space-xxxl);
    height: var(--space-xxxl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.75;
    transition: all var(--transition-base);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    color: var(--white);
}

/* Hover effect */
.custom-close-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* Mobile adaptation (max-width: 991.98px) */
@media (max-width: 991.98px) {
    .custom-close-btn {
        display: inline-flex !important;
        width: 40px;
        height: 40px;
        font-size: var(--fs-base);
        opacity: 1;
    }
}

/* Focus effect */
.custom-close-btn:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* Custom close button style in dark mode */
[data-bs-theme="dark"] .custom-close-btn {
    color: var(--white);
}

[data-bs-theme="dark"] .custom-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}


.section-title {
    border-bottom: var(--border-width) solid var(--border-color);
    padding-bottom: var(--space-sm);
    margin: var(--space-base) 0;
    color: var(--gray-700);
}

/* Sub-category title for main category page */
.sub-section h2 {
    font-size: var(--fs-lg);
    font-weight: 500;
    margin: var(--space-lg) 0 var(--space-base) 0;
    color: var(--gray-800);
}

.sub-section h2 a {
    color: inherit;
}

.sub-section h2 a:hover {
    color: var(--sky-600);
}

/* More link for category page */
.sub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.more-link {
    color: var(--sky-600);
    font-size: var(--fs-sm);
}

.more-link:hover {
    text-decoration: underline;
}

/* Homepage tab group */
.tab-group {
    margin-bottom: 3rem;
    scroll-margin-top: 50px; /* 为一级栏目目标元素添加滚动偏移 */
}

.tab-group .tabs-head {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-base);
    flex-wrap: wrap;
    gap: var(--space-base);
}

.tab-group .tabs-head h2 {
    margin: 0 var(--space-base) 0 0;
    font-size: var(--fs-lg);
    color: var(--gray-800);
}

.tab-group .tabs-head h2 a {
    color: inherit;
    scroll-margin-top:50px;
}

.tab-group .tabs-head h2 a:hover {
    color: var(--sky-600);
}

.tab-group .tab-nav {
    width: auto;
    display: inline-block;
    /* Ensure proper display on small screens */
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible; /* Allow dot to show outside container */
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: transparent;
    /* padding: var(--space-md); */
    border-radius: var(--radius-md);

}
.tab-group .tab-pane{scroll-margin-top:50px;}




/* Homepage popular content tags style - fresh modern style */
/* Use default style when tab-group contains hot class */

/* Link grid layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xxl);
}

/* Loading and error states */
/* .loading, .error {
    text-align: center;
    padding: var(--space-base);
    color: var(--gray-600);
} */

/* .error {
    color: var(--danger-color);
} */

/* Link items */
.item-link {
    color: inherit;
    display: flex;
    padding: var(--space-lg) var(--space-lg);
    height: 100%;
}

/* Favicon icon */
.item-favicon {
    width: 24px;
    height: 24px;
    margin-right: var(--space-lg);
    flex-shrink: 0;
    align-self: center;
    border-radius: 4px;
}

.item:hover .item-favicon {
  animation: jumps 1.2s ease 1;
}
@keyframes jumps {
  0% {transform:translate(0)}
  10% {transform:translateY(8px) scaleX(1.2) scaleY(0.8)} /* 向下移动并横向拉伸 */
  30% {transform:translateY(-5px) scaleX(1) scaleY(1) rotate(5deg)} /* 向上弹起并轻微右转 */
  50% {transform:translateY(3px) scale(1) rotate(0)}   /* 轻微下沉回中 */
  55% {transform:translateY(0) scaleX(1.1) scaleY(0.9) rotate(0)} /* 轻微横向拉伸 */
  70% {transform:translateY(-5px) scaleX(1) scaleY(1) rotate(-2deg)} /* 再次轻微弹起并左转 */
  80% {transform:translateY(0) scaleX(1) scaleY(1) rotate(0)} /* 回到中间位置 */
  85% {transform:translateY(0) scaleX(1.05) scaleY(0.95) rotate(0)} /* 轻微横向拉伸 */
  to {transform:translateY(0) scaleX(1) scaleY(1)}     /* 结束状态：完全回到原始位置和大小 */
}

.url-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.url-card .url-img {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    margin-left: 5px;
    flex-shrink: 0;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.url-card .url-img > img {
    max-height: 100%;
    vertical-align: unset;
}



.item {
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    background-color: var(--white);
    position: relative;
    box-shadow: var(--shadow-xs);
}

.item:hover {
    box-shadow: var(--shadow-sm);
    background-color: var(--stone-50);
}

.item:hover .item-title {
    color: var(--sky-600);
}
.item:hover .item-actions{opacity: 1;}
/* 文本样式父类及子类 */
.item-text, .item-title, .item-desc {
    font-size: var(--fs-sm);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-title {
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 0;
}

.item-desc {
    color: var(--gray-400);
    margin: var(--space-sm) 0 0 0;
    line-height: 1.4;
    font-size: var(--fs-xs);
}

/* 内容容器样式 */
.item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}



/* 右下角详情图标样式 - 默认直接展示 */
.item .site-togoicon {
    bottom: 0;
    right: -4px;
    position: absolute;
    /* opacity: .25; */
    z-index: 1;
    display: flex;
    color: var(--sky-600);
}
.item .site-togoicon span {
    font-size:26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    display: none;
}
.item:hover .site-togoicon span{display: flex;}


/* Card action buttons */
.item-actions {
    position: absolute;
    top: 5px;
    right: 8px;
    gap: 12px;
    display: flex;
    opacity: 0;
}

.item-action-btn {
    border-radius: var(--radius-md);
    padding: 0;
    font-size: var(--fs-sm);
    color: var(--gray-300);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.item-action-btn i, .item-action-btn span {
    font-size: 10px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;

}

/* 移除hover颜色变化效果 */
.item-action-btn.good:hover,
.item-action-btn.favorite:hover {
    color: var(--gray-400);
}

/* Card status tags */
.item-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    font-size: var(--fs-xxxxs);
    font-weight: bold;
    border-radius: 3px 0 3px 0;
    z-index: 1;
}

.item-tag.recommended {
    background-color: var(--green-100);
    color: var(--green-500);
}

.item-tag.closed {
    background-color: var(--gray-200);
    color: var(--gray-500);
}

.content-header-tag.recommended {
    background-color: var(--green-100);
    color: var(--green-500);
}

.content-header-tag.closed {
    background-color: var(--red-100);
    color: var(--red-600);
    font-size: var(--fs-sm);
    padding: 4px 10px;
    border: 1px solid var(--red-300);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

/* Content cards */
.content-favicon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
}

/* 内容标题样式 */
.content-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-lg);
    margin-top: var(--space-xxxl);
    display: block;
}

/* 主标题样式 */
.main-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--space-xxl);
}

/* 内容导航样式 */
.custom-nav {
    margin-bottom: var(--space-lg);
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.custom-nav > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-nav > ul > li {
    margin-right: 1rem;
}

.custom-nav > ul > li:last-child {
    margin-right: 0;
}

.custom-nav > ul > li > a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #6c757d;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.custom-nav > ul > li > a:hover {
    color: var(--sky-600);
    background-color: rgba(13, 110, 253, 0.05);
}

.custom-nav > ul > li > a.active {
    color: var(--white);
    background-color: var(--sky-600);
    font-weight: 500;
}

/* 暗黑模式样式 */
[data-bs-theme="dark"] .main-title {
    color: var(--gray-100);
}

[data-bs-theme="dark"] .custom-nav {
    background-color: #2d3748;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .custom-nav > ul > li > a {
    color: #a0aec0;
}

[data-bs-theme="dark"] .custom-nav > ul > li > a:hover {
    color: #63b3ed;
    background-color: rgba(99, 179, 237, 0.1);
}

[data-bs-theme="dark"] .custom-nav > ul > li > a.active {
    color: var(--white);
    background-color: var(--sky-600);
}



/* 面包屑导航样式 */
#breadcrumb {
    display: flex;
    align-items: center;
    margin: var(--space-xxl) 0 var(--space-base) 0;
    font-size: var(--fs-xs);
}

#breadcrumb i {
    transform-origin: center;
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.2);
}

#breadcrumb a {
    color: var(--gray-500);
    text-decoration: none;
}

#breadcrumb a:hover {
    color: var(--sky-600);
}

#breadcrumb span {
    color: var(--gray-400);
    max-width: 200px; /* 限制最大宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    white-space: nowrap; /* 确保文本不会换行 */
}

/* 深色模式下的面包屑导航样式 */
[data-bs-theme="dark"] #breadcrumb i {
    color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] #breadcrumb a {
    color: var(--gray-400);
}

[data-bs-theme="dark"] #breadcrumb a:hover {
    color: var(--sky-300);
}

[data-bs-theme="dark"] #breadcrumb span {
    color: var(--gray-500);
    max-width: 200px; /* 限制最大宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    white-space: nowrap; /* 确保文本不会换行 */
}

/* 移动端响应式样式 */
@media (max-width: 767.98px) {
    #breadcrumb span, [data-bs-theme="dark"] #breadcrumb span {
        max-width: 120px; /* 在移动设备上减小最大宽度 */
    }
}

/* Content detail */
.content-detail {
    margin-bottom: var(--space-xxl);
}

/* Article navigation styles */
.content-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: transparent;
}

.prev-page,
.next-page {
    flex: 1;
    min-width: 200px;
}

.prev-page a,
.next-page a {
    display: flex;
    align-items: center;
    color: var(--gray-400);
    font-size: var(--fs-xs);
    text-decoration: none;
    transition: color 0.3s ease;
}

.prev-page a:hover,
.next-page a:hover {
    color: var(--sky-600);
}

.prev-page a i,
.next-page a i {
    margin: 0 var(--space-sm);
}

.prev-page a {
    justify-content: flex-start;
}

/* Mobile adaptation */
@media (max-width: 768px) {
    .content-navigation {
        justify-content: space-between;
        align-items: center;
    }
    
    .prev-page,
    .next-page {
        min-width: auto; /* Show on the same line on mobile */
    }
    
    /* Hide previous/next text on mobile */
    .nav-text {
        display: none;
    }
    
    .prev-page a,
    .next-page a {
        font-size: var(--fs-xs); /* Adjust font size for the entire link */
    }
}

.next-page a {
    justify-content: flex-end;
}

/* Article navigation style in dark mode */
[data-bs-theme="dark"] .content-navigation {
    background-color: transparent;
}

[data-bs-theme="dark"] .prev-page a,
[data-bs-theme="dark"] .next-page a {
    color: var(--gray-300);
}

[data-bs-theme="dark"] .prev-page a:hover,
[data-bs-theme="dark"] .next-page a:hover {
    color: var(--primary-color);
}

/* Related websites content styles */
.content-related-sites {
    margin: var(--space-xxl) 0;
}

.content-related-sites .section-title {
    font-size: var(--fs-lg); /* Slightly smaller than general section-title */
    color: var(--gray-800);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-base);
    border-bottom: var(--border-width) solid var(--border-color);
}

/* How to find website content styles */
.content-find-site {
    margin: var(--space-xxl) 0;
}

.content-find-site .section-title {
    font-size: var(--fs-lg); /* Slightly smaller than general section-title */
    color: var(--gray-800);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-base);
    border-bottom: var(--border-width) solid var(--border-color);
}

.content-find-site .content-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.content-find-site .content-field-item {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-width) solid rgba(0, 0, 0, 0.03);
    font-weight: 600;
}

/* Related content styles in dark mode */
[data-bs-theme="dark"] .content-related-sites .section-title,
[data-bs-theme="dark"] .content-find-site .section-title {
    color: var(--gray-200);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .content-related-sites .item-link {
    /* background-color: var(--card-bg); */
    /* border-color: var(--border-color); */
}

[data-bs-theme="dark"] .content-related-sites .item-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--sky-600);
}

[data-bs-theme="dark"] .content-related-sites .item-title {
    color: var(--gray-300);
}

[data-bs-theme="dark"] .content-related-sites .item-link:hover .item-title {
    color: var(--sky-400);
}

[data-bs-theme="dark"] .content-find-site .content-field-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--gray-300);
}

[data-bs-theme="dark"] .content-find-site .content-field-item strong {
    color: var(--gray-100);
}

/* Can't open button style */
.btn-cant-open {
    background-color: var(--gray-100);
    color: var(--gray-700);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all var(--transition-base);
}

.btn-cant-open:hover {
    background-color: var(--gray-200);
    color: var(--gray-800);
}

/* Website can't open solution styles */
.content-cant-open {
    margin: var(--space-xxl) 0;
}

.content-cant-open .section-title {
    font-size: var(--fs-lg);
    color: var(--gray-800);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-base);
    border-bottom: var(--border-width) solid var(--border-color);
}

/* Solution box - Simplified class name */
.solution-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: white;
    padding: var(--space-base);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 保留solution-box的基本样式以保持向后兼容性 */
.content-cant-open .solution-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: white;
    padding: var(--space-base);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-size: var(--fs-sm);
}

.content-cant-open .solution-box p {
    font-weight: bold;
}

.solution-item {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-bottom: var(--border-width) solid rgba(0, 0, 0, 0.03);
}

/* Original class name for backward compatibility */
.content-cant-open .solution-item {}

.content-cant-open .solution-item i {
    display: none;  /* Hide icon */
}

.content-cant-open .solution-item:last-child {
    border-bottom: none;
}

/* Dark mode cannot open button style */
[data-bs-theme="dark"] .btn-cant-open {
    background-color: var(--gray-800);
    color: var(--gray-300);
}

[data-bs-theme="dark"] .btn-cant-open:hover {
    background-color: var(--gray-700);
    color: var(--gray-200);
}

/* Website can't open solution styles in dark mode */
[data-bs-theme="dark"] .content-cant-open .section-title {
    color: var(--gray-200);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .solution-section {
    background-color: var(--card-bg);
}

/* Original class name for backward compatibility */
[data-bs-theme="dark"] .content-cant-open .solution-box {
    background-color: var(--card-bg);
}

[data-bs-theme="dark"] .solution-item {
    /* background-color: rgba(0, 0, 0, 0.2); */
    border-color: rgba(255, 255, 255, 0.03);
    /* color: var(--gray-300); */
}

[data-bs-theme="dark"] .content-cant-open .solution-item strong {
    color: var(--gray-100);
}

/* Content title and action area */
.content-header {
    position: relative; /* Provide positioning context for status tags */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-xl) 0 var(--space-lg) 0;
    min-height: 3rem; /* Ensure sufficient vertical space */
}

/* Content page title tag */
.content-header-tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: var(--fs-xs);
    font-weight: bold;
    border-radius: var(--radius-sm);
}

/* Content subtitle display */
.content-subtitle {
    font-size: var(--fs-sm);
    color: var(--gray-500);
    font-weight: 300;
}



/* Content metadata */
.content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg); /* Reduce spacing */
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--gray-400); /* Use lighter color */
    padding: var(--space-lg) 0;
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: var(--space-base);
}

/* Metadata items container */
.meta-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl); /* Set according to user preference */
    align-items: center;
    position: relative;
}

/* Add separator after meta-items */
.meta-items::after {
    content: "";
    position: absolute;
    right: calc(var(--space-xl) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.25rem;
    background-color: var(--border-color);
}



/* Soften icon color */
.content-meta i {
    color: var(--gray-300); /* Use lighter color */
}

/* Adjust content info container on small screens */
@media (max-width: 768px) {
    .content-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    /* Content metadata styles on medium mobile devices - meta-items gap same as desktop */
    .content-meta {
        gap: var(--space-md);
        padding: var(--space-md) 0;
    }
    
    /* Remove separate gap setting for meta-items on mobile, keep consistent with desktop */
    
    /* Note: Specific styles for extra small screens (360px) have been integrated into the standard 575.98px media query */
}

/* Content page action buttons */
.content-actions {
    display: flex;
    gap: var(--space-base);
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0 0 0 var(--space-xl); /* Increase left margin to keep distance from separator */
    border: none;
    border-radius: var(--radius-sm);
}

.content-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-sm);
    transition: var(--transition-base);
    white-space: nowrap;
    box-shadow: none; /* Remove shadow to weaken visual effect */
    border: none; /* Remove border to weaken visual effect */
    background-color: transparent; /* Remove background color */
    margin-right: var(--space-sm); /* Add right margin to ensure proper spacing between buttons */
    color: var(--gray-400); /* Use lighter color */
}





/* Basic button hover effect */
.content-actions .btn:hover {
    background-color: var(--gray-300);
    border: none;
    color: var(--gray-700);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* The icon also changes color when the button is hovered */
.content-actions .btn:hover i {
    color: var(--gray-700);
}

/* Basic button hover effect in dark mode */
[data-bs-theme="dark"] .content-actions .btn:hover {
    background-color: var(--gray-700);
    border: none;
    color: var(--gray-200);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .content-actions .btn:hover i {
    color: var(--gray-200);
}

/* Like button hover effect (green) */
.content-actions .btn-like:hover {
    background-color: var(--green-500);
    border-color: var(--green-500);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.content-actions .btn-like:hover i {
    color: var(--white);
}

/* Dislike button hover effect */
.content-actions .btn-dislike:hover {
    background-color: var(--gray-500);
    border-color: var(--gray-500);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.content-actions .btn-dislike:hover i {
    color: var(--white);
}

/* Favorite button hover effect (pink) */
.content-actions .btn-favorite:hover {
    background-color: var(--pink-500); /* Use CSS variable for pink */
    border-color: var(--pink-500);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.content-actions .btn-favorite:hover i {
    color: var(--white);
}

/* Comment button hover effect (blue) */
.content-actions .btn-comment:hover {
    background-color: var(--sky-600);
    border-color: var(--sky-600);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.content-actions .btn-comment:hover i {
    color: var(--white);
}



.content-actions .badge {
    font-size: 0.75em;
    padding: 0.25em 0.4em;
}

/* Improve readability of favorite count */
.content-actions .btn .badge {
    background-color: var(--red-600);
    color: white;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.meta-item {
    display: inline-block;
}

.meta-item a {
    color: var(--gray-900);
}

.meta-item a:hover {
    color: var(--sky-600);
    text-decoration: underline;
}

/* ========== Tags and content fields styles ========== */


/* Highlighted content fields - basic styles */
.content-fields {
    background-color: var(--sky-50);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-base);
    margin-bottom: var(--space-base);
    font-size: var(--fs-sm);
    gap: var(--space-xs);
    display: flex;
    flex-direction: column;
}

/* Website field specific styles */
.url-box {
    background-color: var(--sky-50);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-base);
    margin-bottom: var(--space-base);
    font-size: var(--fs-sm);
    gap: var(--space-xs);
    display: flex;
    flex-direction: column;
}

/* How to find website specific styles - simplified class name */
.find-sec {
    background-color: white;
    padding: var(--space-base);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--space-base);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
}

/* 移动端find-sec响应式样式 */
@media (max-width: 767.98px) {
    .find-sec {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    
    .find-field {
        flex-direction: row;
        align-items: center;
        padding: var(--space-sm);
        gap: var(--space-xs);
        display: flex;
    }
    
    .find-field i {
        margin-right: var(--space-xs);
        margin-bottom: 0;
    }
    
    .find-field strong {
        display: inline;
        width: auto;
    }
}

/* 保持向后兼容 - 复用find-sec样式，不再重复定义 */
/* 移除了.find-box和.find-section的重复样式定义 */

/* Find site field styles - shorter class name */
.find-field {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    border-bottom: var(--border-width) solid rgba(0, 0, 0, 0.03);
}

.find-field:last-child {
    border-bottom: none;
}

.find-field i {
    font-size: var(--fs-sm);
    color: var(--gray-500);
    flex-shrink: 0;
    margin-right: var(--space-sm);
}

.find-field strong {
    color: var(--gray-800);
    flex-shrink: 0;
}

.find-field p {
    margin: 0;
    flex: 1;
}

/* 移动端响应式样式 - 修复p标签换行问题 */
@media (max-width: 767.98px) {
    .find-field {
        display: block;
        /* 移除align-items: center，让p标签可以正常换行 */
    }
    
    .find-field i {
        display: inline-block;
        margin-right: var(--space-sm);
        margin-bottom: var(--space-xs);
    }
    
    .find-field strong {
        display: inline-block;
        margin-bottom: var(--space-xs);
    }
}

/* Dark mode styles - light blue background */
[data-bs-theme="dark"] .content-fields {
    background-color: rgba(56, 189, 248, 0.08);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .url-box {
    background-color: rgba(56, 189, 248, 0.08);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .find-box,
[data-bs-theme="dark"] .find-section,
[data-bs-theme="dark"] .find-sec {
    background-color: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Find-field style in dark mode */
[data-bs-theme="dark"] .find-field {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .find-field i {
    color: var(--gray-400);
}

[data-bs-theme="dark"] .find-field strong {
    color: var(--gray-200);
}

/* 深色模式下的移动端响应式样式 */
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] .find-field {
        /* 继承浅色模式的移动端样式 */
    }
    
    [data-bs-theme="dark"] .find-field i {
        color: var(--gray-400);
    }
    
    [data-bs-theme="dark"] .find-field strong {
        color: var(--gray-200);
    }
    
    [data-bs-theme="dark"] .find-field p {
        color: var(--gray-300);
    }
}

[data-bs-theme="dark"] .find-field a {
    color: var(--sky-400);
}

[data-bs-theme="dark"] .find-field a:hover {
    color: var(--sky-300);
}

[data-bs-theme="dark"] .find-field a:visited {
    color: var(--purple-400);
}

[data-bs-theme="dark"] .content-field-item,
[data-bs-theme="dark"] .field-item {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .content-field-item i {
    color: var(--gray-400);
}

[data-bs-theme="dark"] .content-field-item a {
    color: var(--sky-400);
}

[data-bs-theme="dark"] .content-field-item a:hover {
    color: var(--sky-300);
}

[data-bs-theme="dark"] .content-field-item a:visited {
    color: var(--purple-400);
}

.content-field-item {
    margin-bottom: var(--space-md);
    padding: var(--space-md) 0;
    word-break: break-all;
    border-bottom: var(--border-width) solid rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
}

.content-field-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.field-icon-text {
    display: flex;
    align-items: center;
}

.field-icon-text i {
    color: var(--gray-500);
    margin-right: var(--space-xs);
    font-size: var(--fs-sm);
}

/* 移除了field-item的重复样式定义，使用content-field-item即可 */

.content-field-item i {
    color: var(--gray-500);
    margin-right: var(--space-sm);
    font-size: var(--fs-sm);
}

.content-field-item a {
    color: var(--sky-600);
}

.content-field-item a:hover {
    color: var(--sky-700);
    text-decoration: underline;
}

.content-field-item a:visited {
    color: var(--purple-500);
}

/* Publish page field specific styles */
.publish-field-item {
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
}

.publish-field-item i,
.publish-field-item strong {
    display: inline-flex;
    align-items: center;
}

/* Content body styles */
.content-body {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--gray-700);
}

/* Login and permission prompt styles */
.warning-text {
    background-color: var(--sky-50);
    color: var(--red-600);
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.tip-links {
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.tip-login-button {
    color: var(--blue-600);
    transition: color var(--transition-base);
}

.tip-login-button:hover {
    color: var(--blue-700);
    text-decoration: underline;
}

.tip-register-button {
    color: var(--blue-600);
    margin-left: 0.5rem;
    transition: color var(--transition-base);
}

.tip-register-button::before {
    content: "|";
    color: var(--blue-600);
    margin-right: 0.5rem;
    opacity: 0.7;
}

.tip-register-button:hover {
    color: var(--blue-700);
    text-decoration: underline;
}

/* Rating field style next to title */
.content-header-rating {
    display: inline-block;
    margin-left: var(--space-lg);
    font-size: var(--fs-base);
    color: var(--gray-500);
    font-weight: 300;
}

/* Remove rating field left margin on mobile */
@media screen and (max-width: 768px) {
    .content-header-rating {
        margin-left: 0;
    }
}

/* ========== Footer styles ========== */
/* Main footer container */
.site-footer {
    background-color: #ffffff;
    border-top: 1px solid #eee;
    padding: 20px 0;
    color: #333;
    font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    margin-left: var(--sidebar-width);
    margin-right: 0;
    margin-top: calc(var(--space-xxxl) * 1.5);
}

/* Footer content container */
.footer-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xxl);
    white-space: nowrap;
}

/* Footer main container - Three-column layout */
.footer-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Simplified brand area - Left side */
.footer-brand-simple {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex: 0 0 auto;
    height: 100%;
}

/* Footer logo style - Smaller size */
.footer-logo {
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

/* Container for LOGO and website name */
.brand-logo-name {
    display: flex;
    align-items: center;
    gap: 8px; /* Use gap instead of margin-right */
}

/* Footer logo icon style, referencing sidebar but smaller in size */
.footer-logo-icon {
    font-size: var(--fs-base);
    color: var(--sky-500, #0ea5e9); /* Logo icon color in light mode, with fallback color value */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer logo icon color in dark mode */
[data-bs-theme="dark"] .footer-logo-icon {
    color: var(--sky-400, #38bdf8);
}

.site-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    height: 100%;
}

.site-slogan {
    font-size: var(--fs-xs);
    color: #666;
    margin-left: 25px; /* Increase distance from brand section */
}

/* Simplified links area - middle */
.footer-links-simple {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1;
    margin: 0 20px;
}

.footer-links-simple a {
    color: #666;
    font-size: var(--fs-xs);
    transition: var(--transition-md);
}

.footer-links-simple a:hover {
    color: #333;
}

/* Simplified copyright info - right */
.footer-copyright-simple {
    font-size: var(--fs-xxs);
    color: #999;
    text-align: right;
    flex: 0 0 auto;
}

/* ========== Footer styles in dark mode ========== */
[data-bs-theme="dark"] .site-footer {
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
    color: #adb5bd;
}

[data-bs-theme="dark"] .site-footer a {
    color: #adb5bd;
}

[data-bs-theme="dark"] .site-footer a:hover {
    color: var(--sky-600);
}

[data-bs-theme="dark"] .site-name {
    color: #fff;
}

[data-bs-theme="dark"] .site-slogan {
    color: #aaa;
}

[data-bs-theme="dark"] .footer-links-simple a {
    color: #aaa;
}

[data-bs-theme="dark"] .footer-links-simple a:hover {
    color: var(--sky-600);
}

[data-bs-theme="dark"] .footer-copyright-simple {
    color: #888;
}

/* .site-footer .container custom styles have been removed */

/* Allow line wrapping on small screens to fit screen width */
@media (max-width: 767.98px) {
    .site-footer {
        white-space: normal;
        text-align: center;
    }
    
    .footer-content {
        flex-flow: column;
        text-align: center;
        gap: var(--space-sm);
    }
    
    .footer-copyright {
        white-space: normal;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .footer-links a {
        margin: 0;
    }
}

.footer-copyright {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-footer a {
    color: var(--gray-600);
    margin: 0;
    padding: 0;
}

.footer-links {
    display: flex;
    gap: var(--space-base);
    align-items: center;
    flex-wrap: wrap;
}

.footer-links a {
    position: relative;
}

.footer-separator {
    color: var(--gray-400);
    margin: 0 var(--space-sm);
}

.site-footer a:hover {
    color: var(--sky-600);
}

/* 移除了重复的site-footer移动端媒体查询样式，保留第一个块即可 */

/* UI element visibility optimization */
/* ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a6268;
} */

/* Container style */
.container {
    /* Basic container style */
}

/* Comment related styles */


/* Back to top button style */
.btn-back-to-top {
    position: fixed;
    bottom: 50px;
    right: 30px; /* Position more to the right */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(108, 117, 125, 0.5); /* Semi-transparent gray background */
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
}

/* Back to top button hover effect - change to color */
.btn-back-to-top:hover {
    background-color: var(--sky-600); /* sky-600 color */
}

/* Back to top button in dark mode */
[data-bs-theme="dark"] .btn-back-to-top {
    background-color: rgba(108, 117, 125, 0.7); /* Semi-transparent gray background */
    color: var(--bs-light);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
}

/* Back to top button hover effect in dark mode */
[data-bs-theme="dark"] .btn-back-to-top:hover {
    background-color: var(--sky-600);
}

/* Responsive design - based on Bootstrap 5 standard breakpoint specifications */
/* ============================================================ */
/* Breakpoint order: from small to large for easier maintenance and understanding */
/* ============================================================ */

/* ========== Small screen devices (576px - 767px) ========== */
@media (min-width: 576px) {
    /* Small screen device styles */
}

/* Mobile device .btn-back-to-top style adjustments */
@media (max-width: 767.98px) {
    .btn-back-to-top {
        width: 40px;
        height: 40px;
        bottom: 60px;
        right: 20px;
        font-size: var(--fs-sm);
    }
}

/* ========== Medium screen devices (768px - 991px) ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        padding-right: 20px;
        padding-left: 20px;
    }
    
    /* Link grid layout - medium screen displays two columns */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
    }
}

/* ========== Large screen devices (992px and above) - Bootstrap lg ========== */
@media (min-width: 992px) {
    /* Add larger container margins for large screen devices */
    .container {
        padding-right: 40px;
        padding-left: 40px;
    }
    
    /* PC sidebar width */
    .sidebar {
        width: var(--sidebar-width);
    }
    
    /* PC main content area left margin - space for sidebar */
    .main {
        margin-left: var(--sidebar-width);
        padding: 0;
    }
    
    /* PC footer left margin - aligned with main content area */
    .site-footer {
        margin-left: var(--sidebar-width);
    }
    
    /* Hide PC menu button */
    .menu-toggle {
        display: none;
    }
    
    /* Adjust PC title and spacing */
    .section-title {
        font-size: var(--fs-xl);
        padding-bottom: var(--space-md);
        margin: var(--space-xl) 0;
    }
    
    /* 保留默认.content-title样式，无需重复定义 */
    
    /* PC grid layout - adaptive width */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* ========== Extra large screen devices (1200px and above) - Bootstrap xl ========== */
@media (min-width: 1200px) {
    /* Extra large screen device styles */
}

/* ========== Extra extra large screen devices (1400px and above) - Bootstrap xxl ========== */
@media (min-width: 1400px) {
    /* 为大屏幕设置更宽的容器 */
    .container {
        max-width: 1600px;
    }
    
    /* Grid layout for Mac Air resolution - display 4 items per row */
    .grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ========== Ultra large screen devices (1600px and above) - custom extra large screen ========== */
@media (min-width: 1600px) {
    /* Grid layout for 1600px width - display 6 items per row */
    .grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ========== Giant screen devices (1800px and above) - custom extra large screen ========== */
@media (min-width: 1800px) {
    /* Grid layout for 1800px width - display 6 items per row */
    .grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ========== Extra extra large screen devices (2940px and above) ========== */
@media (min-width: 2940px) {
    
    /* Add left and right margins for 2940px width */
    .container {
        padding-right: 100px;
        padding-left: 100px;
        max-width: 2740px;
    }
}

/* ============================================================ */
/* Responsive design - Maximum width device adaptation (from large to small)                      */
/* ============================================================ */

/* ========== Medium devices and below (less than 992px) ========== */
@media (max-width: 991.98px) {
    .container {
        padding-right: 20px;
        padding-left: 20px;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    /* Ensure menu buttons in top-bar are displayed on mobile */
    .top-bar .menu-toggle {
        display: flex;
    }
    
    /* Mobile sidebar width override */
    .sidebar {
        width: var(--sidebar-width-mobile)!important;
    }
    
    .main {
        margin-left: 0;
    }
    
    /* Mobile footer style - Reset margins, adjust text alignment */
    .site-footer {
        margin-left: 0;
        padding: var(--space-md) var(--space-base);
        white-space: normal; /* Allow text wrapping on mobile */
        text-align: center;  /* Center alignment */
    }

    .content {
        padding: var(--space-md);
    }
    
    /* Link grid layout */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
    }
    
    /* Mobile sidebar style override */
    .sidebar-header {
        justify-content: space-between;
    }
    
    /* Footer mobile layout */
    .footer-simple {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }
    
    .footer-brand-simple {
        flex-direction: column;
        align-items: center;
    }
    
    .site-name {
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .footer-links-simple {
        flex-flow: row wrap;
        gap: 12px;
        margin: 0;
        justify-content: center;
    }
    
    .footer-copyright-simple {
        text-align: center;
    }
    
    /* Footer content area adaptation */
    .footer-content {
        flex-flow: column wrap;
        text-align: center;
        gap: var(--space-sm);
    }
    
    .footer-copyright {
        white-space: normal;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .footer-links a {
        display: inline-block;
        margin: 0 var(--space-xs);
        padding: var(--space-xs) 0;
    }
    
    /* Dark mode footer mobile adaptation - Mobile-specific styles, base styles defined in main styles */
    
    /* Login page adaptation on mobile */
    .login-wrapper {
        min-height: auto;
        padding: var(--space-md) 0;
    }
    
    /* Mobile action buttons styling */
    /* 移除重复的item-actions样式，使用基础样式定义 */
    
    /* 移除重复的item-action-btn样式，使用基础样式定义 */
}

/* ========== Small devices and below (less than 768px) ========== */
@media (max-width: 767.98px) {
    /* Reduce container padding */
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    /* Adjust distance between top-bar and search-box on mobile */
    .top-bar {
        margin-bottom: 0;
        padding: var(--space-sm) 0;
    }
    
    /* Responsive block header for small devices */
    
    /* Optimize mobile top-bar internal container layout - Make top-bar-right start on a new line and center elements */
    .top-bar .container {
        flex-direction: column; /* Set to vertical layout */
        align-items: center; /* Center align child elements */
        padding: 0 var(--space-md); /* Increase left and right margins for more comfortable white space */
        gap: var(--space-sm); /* Add spacing */
    }
    
    /* Mobile top-bar-right style optimization */
    .top-bar-right {
        width: 100%; /* Take full width */
        justify-content: center; /* Center content alignment */
        gap: var(--space-sm); /* Reduce spacing to fit small screens */
    }
    
    /* Optimize mobile top-bar-left layout */
    .top-bar-left {
        gap: var(--space-sm); /* Reduce spacing to fit small screens */
    }
    
    /* Optimize mobile top-bar-left internal elements */
    .top-bar-left > * {
        opacity: 1; /* Mobile default displays full opacity */
    }
    
    /* Adjust mobile top bar link padding */
    .top-bar .top-bar-link {
        padding: var(--space-xs) var(--space-sm);
    }
    
    /* Adjust mobile dark mode toggle button padding */
    .top-bar .btn-dark-mode {
        padding: var(--space-xs) var(--space-sm);
    }
    
    /* Mobile search box style optimization */
    .search-box {
        margin: var(--space-lg) auto;
        padding: var(--space-sm) var(--space-lg);
        width: 100%;
    }
    
    /* Fix mobile search box height issue - adjust padding and font size */
    .search-input {
        min-width: auto;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--fs-sm);
    }
    
    .search-button {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--fs-sm);
    }
}

/* ========== Extra small screen devices (less than 576px) ========== */
@media (max-width: 575.98px) {
    /* Further reduce container padding to fit small screens */
    .container {
        padding-right: 10px;
        padding-left: 10px;
    }
    
    /* Reduce mobile tab-group bottom margin */
    .tab-group {
        margin-bottom: 2rem;
    }
    
    /* Adjust mobile item top and bottom margins - Increase touch area */
    .item-link {
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }
    

    
    /* Login page adaptation for small screen devices */
    .login-form {
        padding: var(--space-md);
    }
    
    /* Mobile content metadata style - Adjust spacing */
    .content-meta {
        gap: var(--space-md);
        padding: var(--space-md) 0;
    }
    
    .meta-items {
        gap: var(--space-md);
    }
    
    /* Remove mobile meta-items separator - Avoid visual crowding */
    .meta-items::after {
        display: none;
    }
    
    .form-input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .oauth-options {
        flex-wrap: wrap;
    }
    
    /* Small screen action buttons styling */
    /* 移除重复的item-actions样式，使用基础样式定义 */
    
    /* 移除重复的item-action-btn样式，使用基础样式定义 */
    
    /* Content action buttons on small screen devices - completely remove left margin */
    .content-actions {
        flex-direction: row;
        align-items: center;
        gap: var(--space-xs);
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(0) !important;
        left: 0 !important;
    }
    
    /* Content action button styles are already defined in main styles, no need to repeat here */
    
    /* Footer style optimization for small screen devices */
    .site-footer {
        padding: var(--space-sm) var(--space-base);
        font-size: var(--fs-xs);
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }
    
    .footer-links a {
        margin: 0;
        padding: 0;
    }
}

/* Dark mode styles */
[data-bs-theme="dark"] {
    --secondary-color: #6c757d;
    /* --success-color: #198754; */  /* Remove this line, use variables defined in :root */
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    
    /* Gray color palette */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    /* Background colors - Adjusted to create better visual hierarchy */
    --body-bg: #1e2124; /* Slightly lighter, no longer extremely dark black */
    --sidebar-bg: #26282a; /* Sidebar uses darker color, clearly distinguishable from other components */
    --content-bg: #212427; /* Content area has clear distinction from background */
    --card-bg: #2e3134; /* Cards, top bar and footer use uniform slightly lighter color, contrasting with sidebar */
    --border-color: #3a3f44;
}

[data-bs-theme="dark"] body {
    background-color: var(--body-bg);
    color: #dee2e6;
}

[data-bs-theme="dark"] .link-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .section-title {
    color: #dee2e6;
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .content-title {
    color: #dee2e6;
}

[data-bs-theme="dark"] .content-header {
    /* No special styles needed in dark mode */
}

[data-bs-theme="dark"] .content-meta {
    border-color: var(--border-color);
    color: var(--gray-500);
}

[data-bs-theme="dark"] .content-meta i {
    color: var(--gray-600); /* Use lighter color */
}



/* Closed tag style in dark mode */
[data-bs-theme="dark"] .item-tag.closed {
    background-color: var(--gray-800);
    color: var(--gray-400);
}

[data-bs-theme="dark"] .content-header-tag.closed {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--red-400);
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

[data-bs-theme="dark"] .content-fields {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    gap: var(--space-xs);
    display: flex;
    flex-direction: column;
}

[data-bs-theme="dark"] .content-field-item a {
    color: var(--sky-400);
}

[data-bs-theme="dark"] .content-field-item a:hover {
    color: var(--sky-300);
    text-decoration: underline;
}

[data-bs-theme="dark"] .content-field-item a:visited {
    color: var(--purple-400);
}

[data-bs-theme="dark"] .content-field-item i {
    color: var(--gray-400);
}

[data-bs-theme="dark"] .content-body {
    color: var(--gray-200);
}

/* Integrated into dark mode footer styles above - Removed duplicate definitions here */

[data-bs-theme="dark"] .site-footer a:hover {
    color: var(--sky-600);
}


/* 已在上方统一定义 - 此重复定义已删除 */

[data-bs-theme="dark"] .item {
    background-color: var(--card-bg);
    border:0;
}

[data-bs-theme="dark"] .item-title {
    color: var(--gray-300);
}

/* 内容容器在暗黑模式下的样式 */
[data-bs-theme="dark"] .item-content {
    background-color: transparent;
}

[data-bs-theme="dark"] .item-link:hover .item-title {
    color: var(--sky-400);
}

[data-bs-theme="dark"] .item-desc {
    color: var(--gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Favicon icon in dark mode */
[data-bs-theme="dark"] .item-favicon {
    background-color: var(--card-bg);
}

/* Card action button in dark mode */
[data-bs-theme="dark"] .item-action-btn {
    background-color: transparent;
    color: var(--gray-500);
}

/* 移除hover效果，保持颜色一致 */
[data-bs-theme="dark"] .item-action-btn:hover,
[data-bs-theme="dark"] .item-action-btn.favorite:hover {
    background-color: transparent;
    color: var(--gray-500);
}

/* Search box style in dark mode */
/* [data-bs-theme="dark"] .search-box {} */

/* Search tabs style in dark mode */
/* Search input and button style in dark mode */
[data-bs-theme="dark"] .search-input:focus {
    border-color: var(--sky-400);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Tab navigation style in dark mode */


/* Tab group style in dark mode */
[data-bs-theme="dark"] .tab-group .tabs-head h2 {
    color: var(--gray-600);
}

/* Sub-section title style in dark mode */
[data-bs-theme="dark"] .sub-section h2 {
    color: var(--gray-200);
}

[data-bs-theme="dark"] .sub-section h2 a {
    color: var(--gray-200);
}

[data-bs-theme="dark"] .sub-section h2 a:hover {
    color: var(--sky-600);
}

/* Sidebar link style in dark mode */
[data-bs-theme="dark"] .sidebar-nav .sidebar-link {
    color: var(--gray-400);
}

[data-bs-theme="dark"] .sidebar-nav .sidebar-link:hover {
    background-color: var(--gray-800) !important;
    color: var(--white) !important;
}

[data-bs-theme="dark"] .sidebar-nav .sidebar-link.active {
    background-color: var(--gray-800) !important; /* Same background color as hover state */
    color: var(--white) !important; /* Same text color as hover state */
    /* Removed left border to match light mode styling */
}

/* Sidebar style in dark mode - match light mode padding */
[data-bs-theme="dark"] .sidebar {
    background-color: var(--sidebar-bg) !important;
    padding: 0; /* 与亮模式完全一致的padding设置 */
    overflow: hidden; /* 与亮模式一致 */
}

/* 深色模式下的面包屑导航样式已通过#breadcrumb选择器实现 */

/* More link style in dark mode */
[data-bs-theme="dark"] .more-link {
    color: var(--sky-400);
}

[data-bs-theme="dark"] .more-link:hover {
    color: var(--sky-300);
}

/* Content action buttons in dark mode */
[data-bs-theme="dark"] .content-actions .btn {
    color: var(--gray-400);
}

/* De-emphasize text and numbers in buttons in dark mode */
[data-bs-theme="dark"] .content-actions .btn span {
    color: var(--gray-500);
}

/* Comment button base style in dark mode */
[data-bs-theme="dark"] .content-actions .btn.btn-comment {
    color: var(--gray-400); /* De-emphasize comment text color */
}



/* Separator in dark mode */
[data-bs-theme="dark"] .meta-items::after {
    background-color: var(--border-color);
}

/* Metadata links in dark mode */
[data-bs-theme="dark"] .meta-item a {
    color: var(--gray-400);
}

[data-bs-theme="dark"] .meta-item a:hover {
    color: var(--sky-300);
    text-decoration: underline;
}



/* Hover effects for buttons in dark mode */
[data-bs-theme="dark"] .content-actions .btn-like:hover {
    background-color: var(--green-500); /* Use green variable directly */
    border-color: var(--green-500);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .content-actions .btn-like:hover i {
    color: var(--white);
}

[data-bs-theme="dark"] .content-actions .btn-dislike:hover {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .content-actions .btn-dislike:hover i {
    color: var(--white);
}

[data-bs-theme="dark"] .content-actions .btn-favorite:hover {
    background-color: var(--pink-500);
    border-color: var(--pink-500);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .content-actions .btn-favorite:hover i {
    color: var(--white);
}

/* Comment button hover effect in dark mode */
[data-bs-theme="dark"] .content-actions .btn-comment:hover {
    background-color: var(--sky-600);
    border-color: var(--sky-600);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .content-actions .btn-comment:hover i {
    color: var(--white);
}



/* Removed specific btn-outline-* styles, using unified .content-actions .btn style */

/* Improve readability of favorite numbers in dark mode */
[data-bs-theme="dark"] .content-actions .btn .badge {
    background-color: var(--red-500);
    color: white;
    font-weight: bold;

}

/* Pagination style */
.pagination-wrapper {
    margin: var(--space-lg) 0 var(--space-xxxl) 0;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
    border-radius: var(--radius-md);
    list-style: none;
}

.pagination li {
    margin: 0 var(--space-xs);
}

.pagination a {
    padding: var(--space-sm) var(--space-base);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    transition: var(--transition-base);
    display: block;
}

.pagination a:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-300);
    color: var(--gray-900);
}

.pagination .active a {
    background-color: var(--sky-600);
    border-color: var(--sky-600);
    color: var(--white);
}

.pagination .active a:hover {
    background-color: var(--sky-700);
    border-color: var(--sky-700);
    color: var(--white);
}

/* Pagination style in dark mode */
[data-bs-theme="dark"] .pagination a {
    background-color: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

[data-bs-theme="dark"] .pagination a:hover {
    background-color: var(--gray-600);
    border-color: var(--gray-500);
    color: var(--white);
}

[data-bs-theme="dark"] .pagination .active a {
    background-color: var(--sky-600);
    border-color: var(--sky-600);
    color: var(--white);
}

[data-bs-theme="dark"] .pagination .active a:hover {
    background-color: var(--sky-700);
    border-color: var(--sky-700);
    color: var(--white);
}

/* Remove unnecessary offcanvas z-index settings */

/* z-index level explanation */
/*
 * Level order (from low to high):
 * 1. Page content (default)
 * 2. menu-toggle (1055)
 * 3. sidebar/offcanvas (1056)
 */

/* Button styles */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-700);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: var(--border-width) solid transparent;
    padding: var(--space-sm) var(--space-base);
    font-size: var(--fs-base);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.btn:hover {
    color: var(--gray-900);
}

.btn:focus {
    outline: 0;
    box-shadow: var(--shadow-focus);
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.65;
}

.btn-outline-primary {
    color: var(--sky-600);
    border-color: var(--sky-600);
}

.btn-outline-primary:hover {
    color: var(--white);
    background-color: var(--sky-600);
    border-color: var(--sky-600);
}

/* View more button style in homepage tabs - only adding tabs specific styles */
.tab-pane .btn-outline-primary {
    /* Reuse base styles, only add specific properties */
    font-size: var(--fs-sm);
    transition: var(--transition-md);
}

.tab-pane .btn-outline-primary:hover {
    background-color: var(--sky-700);
    border-color: var(--sky-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Class specifically designed for view more buttons to avoid style duplication */
.btn-view-more {
    color: var(--gray-700);
    border-color: var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-base);
    font-size: var(--fs-sm);
    transition: var(--transition-md);
    display: inline-block;
    background-color: var(--gray-200);
    box-shadow: none;
}

.btn-view-more:hover {
    color: var(--gray-800);
    background-color: var(--gray-300);
    border-color: var(--gray-400);
    transform: translateY(-2px);
    box-shadow: none;
}

/* Text alignment of view more button in homepage tabs - Reuse basic styles, no additional definition needed */

/* Button style in dark mode */
[data-bs-theme="dark"] .btn {
    color: var(--gray-300);
}

[data-bs-theme="dark"] .btn:hover {
    color: var(--white);
}

/* Span element color change when button is hovered in dark mode */
[data-bs-theme="dark"] .btn:hover span {
    color: var(--white);
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--sky-400);
    border-color: var(--sky-400);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
    color: var(--white);
    background-color: var(--sky-700);
    border-color: var(--sky-700);
}

/* View more button style in dark mode */
[data-bs-theme="dark"] .btn-view-more {
    color: var(--gray-300);
    border-color: var(--gray-600);
    background-color: var(--gray-800);
    box-shadow: none;
}

[data-bs-theme="dark"] .btn-view-more:hover {
    color: var(--white);
    background-color: var(--gray-700);
    border-color: var(--gray-500);
    box-shadow: none;
}

/* Message page style */
.message-container {
    max-width: 800px;
    /* Remove center alignment, change to left alignment */
    margin: 0;
    padding: 0;
}

.message-header {
    text-align: center;
    margin-bottom: var(--space-xxl);
}

.message-title {
    font-size: var(--fs-xxl);
    color: var(--gray-800);
    margin-bottom: var(--space-md);
}

.message-description {
    font-size: var(--fs-base);
    color: var(--gray-600);
    margin: 0;
}

.message-form {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
    padding: var(--space-xl);
    border: var(--border-width) solid var(--border-color);
}

.message-group {
    margin-bottom: var(--space-lg);
}

.message-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 500;
    color: var(--gray-700);
}

/* .message-input,
.message-textarea {} */

@media (max-width: 767.98px) {
    .message-container {
        padding: var(--space-lg) var(--space-base);
    }
    
    .message-form {
        padding: var(--space-lg);
    }
    
    .message-title {
        font-size: var(--fs-xl);
    }
}

/* Message page style */
.message-description {
    color: var(--gray-600);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-base);
}

/* Dark mode adaptation */
[data-bs-theme="dark"] .message-description {
    color: var(--gray-400);
}

@media (max-width: 767.98px) {
    .message-description {
        font-size: var(--fs-sm);
    }
}

/* Circle image style */
.img-circle {
  border-radius: 50% !important;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  object-fit: cover;
}

/* User dropdown style */
.user-dropdown {
  position: relative;
  display: inline-block;
}

/* Remove duplicate definition - Use more complete .user-dropdown-toggle style above */


/* VIP badge styles */
.vip-badge {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 5px;
  background-color: #ff6b35;
  color: white;
  font-size: var(--fs-xxxs);
  border-radius: 3px;
  font-weight: bold;
  text-transform: uppercase;
}

.user-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  position: absolute;
  top: 120%;
  right: 0;
  min-width: 200px;
  width: auto;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  margin: 0;
}

.user-dropdown.active .user-dropdown-menu,
.user-dropdown:hover .user-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* User info overview section */
.user-info-section {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background-image: linear-gradient(to right, var(--sky-400), var(--pink-400));
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.user-avatar-large {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0;
}

.user-avatar-large img {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 74px);
}

.username {
  font-size: var(--fs-base);
  font-weight: bold;
  color: white;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.vip-status {
  font-size: var(--fs-xs);
  color: white;
  font-weight: 500;
  background-color: var(--orange-500);
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  white-space: nowrap;
  width: auto;
  min-width: 40px;
  text-align: center;
}

.vip-badge-large {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background-color: #FF5722;
  color: white;
  font-size: var(--fs-xxxs);
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 10;
}

/* Divider style */
.dropdown-divider {
  margin: 0;
  border: none;
  border-top: 1px solid #f0f0f0;
}

/* Divider style in dark mode */
[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: #4a5568;
}

/* Menu item style */
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 16px;
  color: #333;
  transition: all 0.2s ease;
  font-size: var(--fs-sm);
  border-radius: 0;
}

.user-dropdown-item:hover {
  background-color: #f5f5f5;
  color: #333;
  position: relative;
  z-index: 1;
}

.user-dropdown-item:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--sky-400), var(--pink-400));
  z-index: 1;
}

.user-dropdown-item i {
  width: 20px;
  margin-right: 10px;
  color: #666;
  text-align: center;
}

.user-dropdown-item span {
  flex: 1;
}

/* Logout item style */
.logout-item:hover {
  background-color: var(--red-50);
  color: var(--red-600);
}

.logout-item:hover i {
  color: var(--red-600);
}

/* Dark mode adaptation */
[data-bs-theme="dark"] .user-dropdown-menu {
  background-color: #2d3748;
  border-color: #4a5568;
  color: #e2e8f0;
}

[data-bs-theme="dark"] .user-info-section {
  background-image: linear-gradient(to right, var(--sky-700), var(--pink-700));
  border-bottom-color: #4a5568;
}

[data-bs-theme="dark"] .stat-label {
  color: #a0aec0;
}

[data-bs-theme="dark"] .stat-value {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .user-dropdown-item {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .user-dropdown-item:hover {
  background-color: var(--gray-700);
  color: var(--white);
  position: relative;
}

[data-bs-theme="dark"] .user-dropdown-item:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--sky-400), var(--pink-400));
  z-index: 1;
}

[data-bs-theme="dark"] .logout-item:hover {
  background-color: var(--pink-100);
  color: var(--pink-500);
}

[data-bs-theme="dark"] .logout-item:hover i {
  color: var(--pink-500);
}



/* Mobile user menu width adjustment - Prevent overflow */
@media (max-width: 767.98px) {
  .user-dropdown-menu {
    min-width: 180px;
    max-width: 220px;
    right: 0;
    left: auto;
    width: auto;
  }
  
  .user-details {
    max-width: calc(100% - 74px);
  }
  
  .username {
    max-width: 140px;
  }
}

.category-tags {
    display: flex;
    align-items: center;
    gap: 0 var(--space-lg);
    flex-wrap: wrap;
    margin-top: -15px;
    margin-bottom: var(--space-lg);
}
.category-tags i{    font-size: var(--fs-xs);
    color: var(--gray-400);}
.category-tags a{
    font-size: var(--fs-xs);
    color: var(--gray-400);
    font-weight: 300;
}
.category-tags a:hover{
    color: var(--sky-600);
}
.tag-group .category-tags{margin-top:0}

@media (max-width: 991px) {
    .category-tags {
        margin-top: 10px;
    }
}

/* 针对“右侧定位”的 Tooltip，调整水平位置（数值可自定义） */
.tooltip[data-popper-placement="right"] {
margin-left:-10px!important}

/* .publish样式已合并到.combined-address */

/* 回家地址容器样式 - 包含了原.combined-address的样式 */
.home-address-container {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    white-space: nowrap;
    color: var(--gray-500); /* 淡化文字颜色 */
    font-size: var(--fs-sm);
    font-weight: normal; /* 不再加粗 */
    border-radius: var(--radius-md); /* 增加圆角 */
    background-color: var(--gray-50);
    transition: all var(--transition-md);
}

.home-address-container:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-600);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 淡化图标颜色 */
.home-address-container i {
    color: var(--gray-400);
}

/* 地址链接样式 */
.address-link {
    color: var(--green-700);
    font-weight: bold;
    text-decoration: none;
    transition: color var(--transition-md);
    font-size: var(--fs-sm); /* 保持一致的字体大小 */
}

.address-link:hover {
    color: var(--green-700);
    text-decoration: none;
}

/* 地址分隔符样式 */
.address-separator {
    color: var(--gray-200);
    margin: 0 6px;
}

/* 移动端回家地址样式 */
@media (max-width: 767.98px) {
    /* 确保回家地址容器在移动端另起一行 */
    .home-address-container {
        width: 100%;
        margin-top: var(--space-sm);
        order: 5; /* 确保在其他元素后面 */
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        white-space: normal;
    }
    
    /* 调整移动端顶部栏布局 */
    .top-bar-left {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 深色模式下的回家地址样式 */
[data-bs-theme="dark"] .home-address-container {
    background-color: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.2);
    color: var(--gray-500); /* 淡化文字颜色 */
}

[data-bs-theme="dark"] .home-address-container:hover {
    background-color: rgba(156, 163, 175, 0.15);
    border-color: rgba(156, 163, 175, 0.3);
    color: var(--gray-400);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 深色模式下淡化图标颜色 */
[data-bs-theme="dark"] .home-address-container i {
    color: var(--gray-500);
}

/* 深色模式下的地址链接样式 */
[data-bs-theme="dark"] .address-link {
    color: var(--green-300);
}

/* 深色模式下的地址分隔符样式 */
[data-bs-theme="dark"] .address-separator {
    color: var(--gray-700);
}

[data-bs-theme="dark"] .address-link:hover {
    color: var(--green-200);
}

/* 关站样式 */
.site-closed .item-favicon {
    opacity: 0.5;
    filter: grayscale(100%);
}
.site-closed .item-title {
    text-decoration: line-through;
    color:var(--gray-400);
}

/* 更多项样式 */
.item.item-more {
    opacity: 0.8;
}
.item.item-more .item-title {
    color: var(--gray-400);
    font-weight: 300;
    font-size: var(--fs-sm);
}
.item.item-more:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .item.item-more:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Panel body image styles */
.panel-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* 统计信息栏样式 */
.stats-bar {
    background-color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    margin: var(--space-base) 0;
    font-size: var(--fs-xs);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    border: 1px solid var(--gray-100);
    max-width: max-content;
    box-shadow: none;
}

.stats-item {
    display: inline-flex;
    align-items: center;
}

.stats-item strong {
    color: var(--gray-700);
    font-weight: 500;
    margin-left: var(--space-xs);
}

.stats-separator {
    color: var(--gray-200);
    font-size: var(--fs-base);
    font-weight: 300;
}

[data-bs-theme="dark"] .stats-bar {
    background-color: var(--gray-800);
    color: var(--gray-400);
    border: 1px solid var(--gray-700);
}

[data-bs-theme="dark"] .stats-item strong {
    color: var(--gray-300);
}

[data-bs-theme="dark"] .stats-separator {
    color: var(--gray-700);
}


/* 筛选 */

        /* 快速筛选面板样式 */
        .toggle-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 1000; /* 降低层级，使其在侧边栏下面 */
            opacity: 0;
            transform: translateX(-100%);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        /* 确保快速筛选按钮在最上层 */
        #quickFilterToggle {

        }
.toggle-sidebar:not(.show) .toggle {
    opacity: 0;
}
        .toggle-sidebar.show {
            opacity: 1;
            transform: translateX(0);
        }
.toggle-sidebar.show .toggle {
    width: 510px;
}

.toggle-sidebar.show .toggle {
    opacity: 1;
}
.toggle-sidebar .toggle {
    left: 0;
    background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.07) 100%);
}
.toggle-sidebar .toggle {
    top: 0;
    z-index: 1000; /* 与父元素保持一致的层级 */
    width: 0;
    height: 100vh;
    position: fixed;
    transition: opacity .3s 
linear;
}
.toggle-sidebar .toggle .toggle-inner {
    padding: 2px;
    overflow: hidden;

    left: 0;
    transform: translate3d(-100%, 0, 0);
    width: 400px;
}
.toggle-sidebar .toggle .toggle-inner {

    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.3s 
cubic-bezier(0.25, 0.8, 0.25, 1);
}
.toggle-sidebar.show .toggle .toggle-inner {
    transform: translate3d(150px, 0, 0);
}
.toggle-sidebar .toggle .toggle-inner {
    padding: 2px;
    overflow: hidden;
}
        .toggle-inner-item {
            height: calc(100vh - 30px);
            overflow: auto;
            background: radial-gradient(92.81% 48.44% at -24.53% -16.02%, #e4fcff 0%, rgba(255, 255, 255, 0) 100%), 
                        radial-gradient(75.78% 68.16% at 56.74% -24.02%, #fcffda 0%, rgba(255, 255, 255, 0) 100%), 
                        radial-gradient(160.86% 46.39% at 177.14% -15.62%, #ffc8c8 9.06%, rgba(255, 255, 255, 0) 100%), 
                        rgba(255, 255, 255, 0.8);
            backdrop-filter: saturate(180%) blur(15px);
            margin: 15px;
            position: relative;
            padding: 15px;
            border-radius: 14px;
            box-shadow: 0 -2px 10px 1px rgba(0, 0, 0, 0.08);
        }
        
        .toggle-filter-item {
            padding: 15px;
        }
.toggle-filter-item:hover {
    background: rgba(200,200,200,0.2);
    border-radius: 10px
}

.toggle-filter-item:hover .filter-name {
    color: #283593
}

.toggle-filter-item:hover .filter-name span {
    display: inline-block
}
        .filter-name {
            position: relative;
            z-index: 1;
            padding-bottom: 10px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.85);
            font-size: 12px;
        }
        
        .filter-name span {
            display: none;
            font-size: 12px;
            font-weight: 400;
            float: right;
            color: #666;
            margin-top: 2px;
        }
        
        .filter-content a {
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            line-height: 28px;
            margin: 4px;
            background: #fff;
            display: inline-block;
            font-size: 12px;
            text-decoration: none;
            color: #333;
        }
        .filter-content i {
    font-size: 9px;
    margin-right: 5px;
    color: #283593;
    font-weight: 700;
    vertical-align: 5%;
}
        .filter-content a:hover {
    border-color: #283593
}
        
        .filter-content {
    font-size: 0;
}.filter-list {
    margin: -4px;
}

@media (max-width: 767px) {
    .toggle-sidebar.show .toggle {
        z-index: 1090;
        width: 100%;
    }
}
@media (max-width: 767px) {
    .toggle-sidebar.show .toggle .toggle-inner {
        transform: translate3d(0, 0, 0);
        width: 100%;
    }
}
@media (max-width: 767px) {
    .toggle-inner-item {
        background: radial-gradient(92.81% 48.44% at -24.53% -16.02%, #e2fafd 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(75.78% 68.16% at 56.74% -24.02%, #fafce5 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(160.86% 46.39% at 177.14% -15.62%, #ffdede 9.06%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.95);
    }
}
@media (max-width: 767px) {
    .toggle-sidebar .toggle .toggle-inner {
        transition: none;
    }
}
@media (max-width: 767px) {
    .toggle-sidebar .toggle {
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px);
    }
}
@media (max-width: 767px) {
.toggle-sidebar .toggle .toggle-inner{padding:2px 0 2px 2px}
}