/* TabFlow Modern Premium Visual Redesign Overrides */

/* Iconfont Integration */
@font-face {
    font-family: "iconfont";
    src: url('fonts/iconfont.woff2') format('woff2'),
         url('fonts/iconfont.woff') format('woff'),
         url('fonts/iconfont.ttf') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-taiyang:before { content: "\e611"; }
.icon-yueliang:before { content: "\e6cc"; }
.icon-sousuo:before { content: "\e63b"; }
.icon-caidananniu:before { content: "\e61a"; }
.icon-icon-close:before { content: "\e603"; }
.icon-jiantou-copy-copy:before { content: "\e668"; }

:root {
    --modern-slate-50: #f8fafc;
    --modern-slate-100: #f1f5f9;
    --modern-slate-200: #e2e8f0;
    --modern-slate-300: #cbd5e1;
    --modern-slate-400: #94a3b8;
    --modern-slate-500: #64748b;
    --modern-slate-600: #475569;
    --modern-slate-700: #334155;
    --modern-slate-800: #1e293b;
    --modern-slate-900: #0f172a;
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: var(--modern-slate-100) !important;
}
body.night ::-webkit-scrollbar-track {
    background: var(--modern-slate-900) !important;
}
::-webkit-scrollbar-thumb {
    background: var(--modern-slate-300) !important;
    border-radius: 9999px !important;
    border: 2px solid var(--modern-slate-100) !important;
    transition: background-color 0.2s ease !important;
}
body.night ::-webkit-scrollbar-thumb {
    background: var(--modern-slate-700) !important;
    border: 2px solid var(--modern-slate-900) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--main-color, #ff3636) !important;
}

/* Body & Fonts reset */
body {
    padding-top: 56px !important;
    background-color: var(--modern-slate-50) !important;
    background-image: radial-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    color: var(--modern-slate-700) !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Header Layout & Spacing Restructure */
.header {
    height: 56px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    display: flex !important;
    align-items: center !important;
}

.header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    height: 56px !important;
    width: 100% !important;
}

.header-left {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 32px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.header .logo, .header .logo a {
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.header .logo a img {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    transition: transform 0.3s ease !important;
}

.header .logo a img:hover {
    transform: scale(1.05) !important;
}

.header .logo {
    float: none !important;
    flex-shrink: 0 !important;
}

.header .container.header-bar::before,
.header .container.header-bar::after {
    display: none !important;
    content: none !important;
}

.header .nav-bar {
    margin-left: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.header .nav-bar ul.nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header .nav-bar ul.nav > li {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 56px !important;
    line-height: 56px !important;
    position: relative !important;
}

.header .nav-bar li {
    height: 56px !important;
    line-height: 56px !important;
    position: relative !important;
}

.header .nav-bar li a {
    color: var(--modern-slate-600) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 0 16px !important;
    transition: color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 56px !important;
    line-height: 56px !important;
}

.header .nav-bar li a:hover {
    color: var(--main-color, #ff3636) !important;
}

.header .nav-bar li.active > a {
    color: var(--main-color, #ff3636) !important;
    font-weight: 600 !important;
}

/* Rounded, Centered Accent Pill Underline */
.header .nav-bar ul.nav > li.active > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 3px !important;
    border-radius: 9999px 9999px 0 0 !important;
    background: var(--main-color, #ff3636) !important;
}

/* Prevent homepage link flash highlight on non-homepage pages */
body.page-not-index .header .nav-bar ul.nav > li:first-child.active > a {
    color: var(--modern-slate-600) !important;
    font-weight: 500 !important;
}
body.page-not-index .header .nav-bar ul.nav > li:first-child.active > a::after {
    display: none !important;
}

/* Eliminate legacy borders/dots */
.header .nav-bar li.active:before, .header .nav-bar li.active:after,
.header .nav-bar li[class*="li-cate-"]:before, .header .nav-bar li[class*="li-cate-"]:after {
    display: none !important;
}

/* Navigation link carets indicators */
.nav-link-caret,
.nav-submenu-caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 10px !important;
    height: 10px !important;
    font-size: 10px !important;
    margin-left: 6px !important;
    color: var(--modern-slate-400) !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.nav-link-caret {
    transform: rotate(0deg) !important;
}

.nav-submenu-caret {
    transform: rotate(-90deg) !important;
}

/* Hover rotation */
.header .nav-bar ul.nav > li:hover > a .nav-link-caret {
    transform: rotate(180deg) !important;
    color: var(--main-color, #ff3636) !important;
}

.header .nav-bar ul.nav > li > ul > li:hover > a .nav-submenu-caret {
    transform: rotate(-90deg) !important;
    color: var(--main-color, #ff3636) !important;
}

/* Level 2 Submenu (nav-dropdown) */
.header .nav-bar ul.nav > li > ul {
    position: absolute !important;
    border: 1px solid var(--modern-slate-200) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    padding: 6px !important;
    min-width: 160px !important;
    left: 50% !important;
    transform: translate3d(-50%, 10px, 0) !important;
    top: 100% !important;
    z-index: 999 !important;
    display: block !important;
}

.header .nav-bar ul.nav > li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
}

.header .nav-bar ul.nav > li > ul > li {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    line-height: normal !important;
    display: block !important;
}

.header .nav-bar ul.nav > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--modern-slate-600) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    height: auto !important;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.header .nav-bar ul.nav > li > ul > li > a:hover {
    background: var(--modern-slate-50) !important;
    color: var(--main-color, #ff3636) !important;
}

/* Level 3 Submenu (nav-submenu) */
.header .nav-bar ul.nav > li > ul > li > ul {
    position: absolute !important;
    border: 1px solid var(--modern-slate-200) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    padding: 6px !important;
    min-width: 150px !important;
    left: calc(100% + 4px) !important;
    top: -6px !important;
    transform: translate3d(10px, 0, 0) !important;
    z-index: 1000 !important;
    display: block !important;
}

.header .nav-bar ul.nav > li > ul > li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
}

.header .nav-bar ul.nav > li > ul > li > ul > li {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    line-height: normal !important;
    display: block !important;
}

.header .nav-bar ul.nav > li > ul > li > ul > li > a {
    display: block !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--modern-slate-600) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    height: auto !important;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.header .nav-bar ul.nav > li > ul > li > ul > li > a:hover {
    background: var(--modern-slate-50) !important;
    color: var(--main-color, #ff3636) !important;
}

/* Header Tools Styling */
.header-tools {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.header-tool {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--modern-slate-600) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    position: relative !important;
}

.header-tool:hover {
    background: transparent !important;
    color: var(--main-color, #ff3636) !important;
    transform: scale(1.05) !important;
}

#m-btn {
    display: none !important;
}

@media (max-width: 768px) {
    .header .nav-bar {
        display: none !important;
    }

    .header-left {
        flex: 0 1 auto !important;
        gap: 0 !important;
    }

    #m-btn {
        display: inline-flex !important;
        color: var(--modern-slate-600) !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Stacked Theme Toggle Animation */
.header-theme-icon-stack {
    position: relative !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    vertical-align: middle !important;
}

/* Hide duplicate caret elements inside navigation links and items */
.header .nav-bar ul.nav li em.dot,
.header .nav-bar ul.nav li a i,
.header .nav-bar ul.nav li a em,
.header .nav-bar ul.nav li a span:not(.nav-link-caret):not(.nav-submenu-caret),
.m-nav li em.dot,
.m-nav li em[class*="dot"] {
    display: none !important;
}

/* Align and size the search icon */
.header-search-toggle .header-tool-icon {
    font-size: 21px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.header-theme-icon-stack .header-tool-icon {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.3s ease !important;
}

.header-tool-icon-light {
    font-size: 26px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}

.header-tool-icon-dark {
    font-size: 21px !important;
    color: #94a3b8 !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(-45deg) scale(0.6) !important;
}

body.night .header-tool-icon-light {
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.6) !important;
}

body.night .header-tool-icon-dark {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}

/* Submit Button Adjustment */
.header .submit .a {
    margin: 0 0 0 10px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 9999px !important;
    background-color: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    box-shadow: 0 4px 14px rgba(255, 54, 54, 0.25) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.header .submit .a i {
    font-size: 12px !important;
}

.header .submit .a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 54, 54, 0.4) !important;
}

/* Search Overlay Modal */
.header-search-overlay[hidden] {
    display: none !important;
}

.header-search-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: clamp(60px, 15vh, 120px) 16px 24px !important;
}

.header-search-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.header-search-panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 600px) !important;
}

.header-search-form {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.15) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.header-search-form:focus-within {
    border-color: #94a3b8 !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2) !important;
}

.header-search-submit,
.header-search-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
}

.header-search-submit:hover,
.header-search-close:hover {
    color: var(--main-color, #ff3636) !important;
}

.header-search-submit-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

.header-search-input {
    min-height: 48px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--modern-slate-800) !important;
    font-size: 16px !important;
    outline: none !important;
}

.header-search-input::placeholder {
    color: var(--modern-slate-400) !important;
}

.header-search-close::before {
    content: "\00d7" !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

/* Mobile Accordion Menu Styles */
.m-nav-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    text-align: center !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.m-nav-toggle.open {
    transform: rotate(180deg) !important;
    color: #ffffff !important;
}

/* Mobile menu open state classes */
body.open #m-btn .header-menu-icon-open {
    display: none !important;
}

body.open #m-btn .header-menu-icon-close {
    display: inline-flex !important;
}

/* Modern Banners (Bear / Custom / Swiper) */
#banner-bear, #banner-box, .diybg, .swiper-container {
    border-radius: 0px !important;
    height: 330px; /* Customizable via inline styling */
    margin-top: 0px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
}
#banner-bear {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}
.typing {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
}

/* Search Box Layout in Banner */
#divSearchPanel, .search-box-home {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 5px 6px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}
#divSearchPanel input[name="q"], .search-box-home input[type="text"] {
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    width: 100% !important;
    outline: none !important;
}
#divSearchPanel input[name="q"]::placeholder, .search-box-home input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}
#divSearchPanel input[type="submit"], .search-box-home button {
    background: var(--main-color, #ff3636) !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 8px 22px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.3) !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
}
#divSearchPanel input[type="submit"]:hover, .search-box-home button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(255, 54, 54, 0.45) !important;
}

/* Statistics Panel Style */
.data-zone {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 14px 24px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.01), 0 4px 6px -4px rgba(0, 0, 0, 0.01) !important;
    margin-bottom: 12px !important;
    font-weight: 500 !important;
    color: var(--modern-slate-600) !important;
    display: flex !important;
    gap: 30px !important;
    justify-content: space-around !important;
}
.container > div[style*="margin: 20px 0"] {
    margin: 0 0 12px 0 !important;
}
.data-zone .num {
    color: var(--main-color, #ff3636) !important;
    font-weight: 700 !important;
}

/* Grid columns gap */
.colpad {
    padding: 0 6px !important;
}
.row-position .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
}
.part.index-part > .items > .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

/* Top widgets model (Recommended, Random, Category Columns) */
.top_model .part {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid var(--modern-slate-200) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.01) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}
.top_model .part:hover {
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--modern-slate-300) !important;
}
.top_model .part .tt {
    padding: 8px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--modern-slate-100) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.top_model .part .tt strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--modern-slate-800) !important;
}
.top_model .part .tt strong i {
    display: none !important; /* Hide old stars */
}
.top_model .part .tt a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--modern-slate-500) !important;
    background: var(--modern-slate-100) !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
}
.top_model .part .tt a:hover {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
}
.top_model .part .topitems {
    padding: 0 !important;
    overflow: visible !important;
}
.top_model .part .topitems .rowtop {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Modern Header Gradients for Top Cards */
.top_model:first-child .part .topt { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; }
.top_model:nth-child(2) .part .topt { background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%) !important; }
.top_model:nth-child(3) .part .topt { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important; }
.top_model:nth-child(4) .part .topt { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important; }

.top_model .part .topt strong,
.top_model .part .topt strong .title_color {
    color: #ffffff !important;
}
.top_model .part .topt a {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}
.top_model .part .topt a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
}
.top_model .part .top_row {
    border-bottom: 1px solid var(--modern-slate-100, #f1f5f9) !important;
    border-right: 1px solid var(--modern-slate-100, #f1f5f9) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.top_model .part .top_row:nth-child(3n) {
    border-right: none !important;
}
.top_model .part .top_row:nth-child(7),
.top_model .part .top_row:nth-child(8),
.top_model .part .top_row:nth-child(9) {
    border-bottom: none !important;
}
.top_model .item {
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}
.top_model .item .topa {
    padding: 6px 8px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: block !important;
}
.top_model .item .topa h3 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--modern-slate-700) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}
.top_model .item:hover {
    transform: none !important;
    background: var(--modern-slate-50) !important;
}
.top_model .item:hover .topa h3 {
    color: var(--main-color, #ff3636) !important;
}

/* Category Grid Panels */
.part.index-part {
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}
.part.index-part .tt {
    background: transparent !important;
    padding: 8px 0 10px 0 !important;
    border-bottom: 1px solid var(--modern-slate-200) !important;
    margin-bottom: 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.part.index-part .tt strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--modern-slate-800) !important;
    border-left: 3px solid var(--main-color, #ff3636) !important;
    padding-left: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}
.part.index-part .tt a {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--modern-slate-600) !important;
    background: var(--modern-slate-100) !important;
    border: 1px solid var(--modern-slate-200) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
}
.part.index-part .tt a:hover {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border-color: var(--main-color, #ff3636) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.25) !important;
}

/* Copy protection (diy_copy_switch / art_copy_switch) */
body.tabflow-copy-protect {
    -webkit-user-select: none;
    user-select: none;
}
body.tabflow-copy-protect input,
body.tabflow-copy-protect textarea,
body.tabflow-copy-protect select,
body.tabflow-copy-protect [contenteditable="true"],
body.tabflow-copy-protect .allow-copy {
    -webkit-user-select: text;
    user-select: text;
}

/* Homepage news/article list panel (post-multi-art2) */
.part.index-part:has(.article-list) {
    background: #ffffff !important;
    border: 1px solid var(--modern-slate-200) !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    padding: var(--tabflow-page-gap, 12px) !important;
    box-sizing: border-box !important;
}
.part.index-part:has(.article-list) .tt {
    padding: 0 0 10px 0 !important;
    margin-bottom: var(--tabflow-page-gap, 12px) !important;
}
.part.index-part:has(.article-list) .items > .row {
    display: block !important;
    margin: 0 !important;
}
.part.index-part:has(.article-list) .article-list {
    display: flex !important;
    align-items: flex-start !important;
    position: relative !important;
    padding: 12px 4px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.part.index-part:has(.article-list) .article-list + .article-list::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 4px !important;
    right: 4px !important;
    height: 1px !important;
    background: var(--modern-slate-200) !important;
}
.part.index-part:has(.article-list) .article-list .figure {
    margin-right: 12px !important;
    width: 150px !important;
    height: 100px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    float: none !important;
}
.part.index-part:has(.article-list) .article-list .content {
    flex-grow: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100px !important;
    padding: 0 !important;
}
.part.index-part:has(.article-list) .article-list:hover {
    background: var(--modern-slate-50) !important;
}
.part.index-part:has(.article-list) .article-list:hover .title a {
    color: var(--main-color, #ff3636) !important;
}
.part.index-part:has(.article-list) .article-list .title a {
    color: var(--modern-slate-800) !important;
}
.part.index-part:has(.article-list) .article-list .data,
.part.index-part:has(.article-list) .article-list .data a,
.part.index-part:has(.article-list) .article-list .data time,
.part.index-part:has(.article-list) .article-list .data span {
    color: var(--modern-slate-500) !important;
}

/* Premium Navigation Grid Cards */
.part .item.inner_item {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid var(--modern-slate-200) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.01) !important;
    margin-bottom: 12px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}
.part .item.inner_item img.angle_fix {
    display: none !important;
}
.part .item.inner_item .a {
    background: transparent !important;
    padding: 16px 12px 10px 12px !important;
    border-radius: 6px 6px 0 0 !important;
    display: block !important;
}
.part .item.inner_item .a img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    border: 1px solid var(--modern-slate-100) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s ease !important;
    float: left !important;
}
.part .item.inner_item .a h3 {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--modern-slate-800) !important;
    margin-left: 58px !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    height: 20px !important;
    line-height: 20px !important;
    max-width: none !important;
    transition: color 0.2s ease !important;
}
.part .item.inner_item .a p {
    font-size: 12px !important;
    color: var(--modern-slate-500) !important;
    margin-left: 58px !important;
    margin-bottom: 0 !important;
    height: 18px !important;
    line-height: 18px !important;
    transition: color 0.2s ease !important;
}
.part .item.inner_item .article_btm {
    background: transparent !important;
    border-top: 1px solid var(--modern-slate-100) !important;
    padding: 6px 16px 8px 16px !important;
    border-radius: 0 0 6px 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.part .item.inner_item .article_btm::after,
.part .item.inner_item .article_btm::before {
    display: none !important;
    content: none !important;
}
.part .item.inner_item .view {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--modern-slate-400) !important;
}
.part .item.inner_item .link {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: var(--modern-slate-50) !important;
    border: 1px solid var(--modern-slate-200) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}
.part .item.inner_item .link .fa {
    color: var(--modern-slate-500) !important;
    font-size: 10px !important;
    transition: all 0.25s ease !important;
    position: static !important;
    opacity: 1 !important;
}
.part .item.inner_item .link:hover {
    background: var(--main-color, #ff3636) !important;
    border-color: var(--main-color, #ff3636) !important;
}
.part .item.inner_item .link:hover .fa {
    color: #ffffff !important;
}

/* Premium News/Article Grid Cards */
.part .item.art-item {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid var(--modern-slate-200) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.01) !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}
.part .item.art-item .art-a {
    display: block !important;
    border-radius: 6px 6px 0 0 !important;
    overflow: hidden !important;
    aspect-ratio: 16/10 !important;
    margin-bottom: 8px !important;
}
.part .item.art-item .art-a .img-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px 6px 0 0 !important;
    transition: transform 0.4s ease !important;
    box-shadow: none !important;
}
.part .item.art-item h3 {
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    height: 42px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}
.part .item.art-item h3 a {
    color: var(--modern-slate-800) !important;
    transition: color 0.2s ease !important;
}
.part .item.art-item h3 a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 5 !important;
}
.part .item.art-item p {
    font-size: 13px !important;
    color: var(--modern-slate-500) !important;
    line-height: 1.5 !important;
    height: 38px !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
}

/* Hover behaviors for both types of cards */
.part .item.inner_item:hover, .part .item.art-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(255, 54, 54, 0.25) !important; /* Glow border */
}
.part .item.inner_item:hover .a img {
    transform: scale(1.08) rotate(3deg) !important;
}
.part .item.inner_item:hover .a h3, .part .item.art-item:hover h3 a {
    color: var(--main-color, #ff3636) !important;
}
.part .item.art-item:hover .art-a .img-cover {
    transform: scale(1.05) !important;
}

/* Floating quick navigation sidebar */
.quick-nav {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-bottom: var(--tabflow-page-gap, 12px) !important;
}
.quick-nav .content-sidebar {
    position: sticky !important;
    top: 84px !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 6px !important;
    padding:6px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03) !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.quick-nav .content-sidebar.fixed,
.quick-nav .content-sidebar.absolute {
    position: sticky !important;
    top: 84px !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03) !important;
}
.quick-nav dl dt {
    display: none !important; /* Hide redundant titles */
}
.quick-nav dl dd {
    margin-bottom: 4px !important;
}
.quick-nav dl dd a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--modern-slate-600) !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    display: block !important;
    transition: all 0.25s ease !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.quick-nav dl dd a:hover {
    background: var(--modern-slate-100) !important;
    color: var(--main-color, #ff3636) !important;
}
.quick-nav dl dd.current a {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Footer layout */
.footer-copyright {
    background: var(--modern-slate-900) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--modern-slate-400) !important;
    font-size: 13px !important;
}
.footer-copyright span {
    margin: 0 10px !important;
}
.footer-copyright a {
    color: var(--modern-slate-400) !important;
    transition: color 0.2s ease !important;
}
.footer-copyright a:hover {
    color: #ffffff !important;
}
.footer-flink-list {
    display: inline !important;
}
.footer-flink-list li {
    display: inline-block !important;
    margin: 0 10px !important;
}
.footer-flink-list li a {
    color: var(--modern-slate-400) !important;
    transition: color 0.2s ease !important;
}
.footer-flink-list li a:hover {
    color: var(--main-color, #ff3636) !important;
    text-decoration: none !important;
}

/* Dynamic Floating Buttons */
#quick_login, #backtop {
    background: #ffffff !important;
    color: var(--modern-slate-600) !important;
    border: 1px solid var(--modern-slate-200) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}
#quick_login:hover, #backtop:hover {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border-color: var(--main-color, #ff3636) !important;
    transform: translateY(-2px) !important;
}

/* Overhaul Dark Mode Theme */
body.night {
    background-color: var(--modern-slate-900) !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    color: var(--modern-slate-300) !important;
}

body.night .header {
    background: rgba(15, 23, 42, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

body.night .header .logo a img#light-logo {
    display: none !important;
}

body.night .header .logo a img#dark-logo {
    display: inline-block !important;
}

body.night .header .nav-bar li a {
    color: var(--modern-slate-300) !important;
}

body.night .header .nav-bar li a:hover {
    color: var(--main-color, #ff3636) !important;
}

body.night .header .nav-bar li.active > a {
    color: var(--main-color, #ff3636) !important;
}

body.night .header .nav-bar ul.nav > li > ul,
body.night .header .nav-bar ul.nav > li > ul > li > ul {
    border-color: var(--modern-slate-700) !important;
    background: var(--modern-slate-800) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

body.night .header .nav-bar ul.nav > li > ul > li > a,
body.night .header .nav-bar ul.nav > li > ul > li > ul > li > a {
    color: var(--modern-slate-300) !important;
}

body.night .header .nav-bar ul.nav > li > ul > li > a:hover,
body.night .header .nav-bar ul.nav > li > ul > li > ul > li > a:hover {
    background: var(--modern-slate-700) !important;
    color: var(--main-color, #ff3636) !important;
}

body.night .header-tool {
    background: transparent !important;
    color: var(--modern-slate-300) !important;
}

body.night .header-tool:hover {
    background: transparent !important;
    color: var(--main-color, #ff3636) !important;
}

/* Dark Mode Search Overlay */
body.night .header-search-backdrop {
    background: rgba(2, 6, 23, 0.6) !important;
}

body.night .header-search-form {
    border-color: rgba(71, 85, 105, 0.88) !important;
    background: rgba(15, 23, 42, 0.96) !important;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.42) !important;
}

body.night .header-search-form:focus-within {
    border-color: rgba(100, 116, 139, 0.96) !important;
}

body.night .header-search-input {
    color: var(--modern-slate-200) !important;
}

body.night .data-zone {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--modern-slate-300) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

body.night .top_model .part {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}
body.night .top_model .part:hover {
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.3) !important;
    border-color: var(--modern-slate-600) !important;
}
body.night .top_model .part .tt {
    border-bottom-color: var(--modern-slate-700) !important;
}
body.night .top_model .part .tt a {
    background: var(--modern-slate-700) !important;
    color: var(--modern-slate-300) !important;
}
body.night .top_model .part .top_row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 !important;
}
body.night .top_model .part .top_row:nth-child(3n) {
    border-right: none !important;
}
body.night .top_model .part .top_row:nth-child(7),
body.night .top_model .part .top_row:nth-child(8),
body.night .top_model .part .top_row:nth-child(9) {
    border-bottom: none !important;
}
body.night .top_model .item {
    background: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
body.night .top_model .item .topa {
    background: transparent !important;
    border-radius: 0 !important;
}
body.night .top_model .item .topa h3 {
    color: var(--modern-slate-300) !important;
}
body.night .top_model .item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}
body.night .top_model .item:hover .topa h3 {
    color: var(--main-color, #ff3636) !important;
}

body.night .part.index-part .tt {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.night .part.index-part .tt strong {
    color: #ffffff !important;
}
body.night .part.index-part .tt a {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    color: var(--modern-slate-300) !important;
}
body.night .part.index-part .tt a:hover {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border-color: var(--main-color, #ff3636) !important;
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.2) !important;
}

body.night .part.index-part:has(.article-list) {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.3) !important;
}
body.night .part.index-part:has(.article-list) .article-list + .article-list::before {
    background: rgba(255, 255, 255, 0.08) !important;
}
body.night .part.index-part:has(.article-list) .article-list:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
body.night .part.index-part:has(.article-list) .article-list .title a {
    color: #f1f5f9 !important;
}
body.night .part.index-part:has(.article-list) .article-list:hover .title a {
    color: var(--main-color, #ff3636) !important;
}
body.night .part.index-part:has(.article-list) .article-list .data,
body.night .part.index-part:has(.article-list) .article-list .data a,
body.night .part.index-part:has(.article-list) .article-list .data time,
body.night .part.index-part:has(.article-list) .article-list .data span {
    color: var(--modern-slate-400) !important;
}

body.night .part .item.inner_item {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15) !important;
}
body.night .part .item.inner_item .a img {
    border-color: var(--modern-slate-700) !important;
}
body.night .part .item.inner_item .a h3 {
    color: #ffffff !important;
}
body.night .part .item.inner_item .a p {
    color: var(--modern-slate-400) !important;
}
body.night .part .item.inner_item .article_btm {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}
body.night .part .item.inner_item .view {
    color: var(--modern-slate-400) !important;
}
body.night .part .item.inner_item .link {
    background: var(--modern-slate-700) !important;
    border-color: var(--modern-slate-600) !important;
}
body.night .part .item.inner_item .link .fa {
    color: var(--modern-slate-300) !important;
}
body.night .part .item.inner_item .link:hover {
    background: var(--main-color, #ff3636) !important;
    border-color: var(--main-color, #ff3636) !important;
}
body.night .part .item.inner_item .link:hover .fa {
    color: #ffffff !important;
}

body.night .part .item.art-item {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15) !important;
}
body.night .part .item.art-item h3 a {
    color: #ffffff !important;
}
body.night .part .item.art-item p {
    color: var(--modern-slate-400) !important;
}

body.night .part .item.inner_item:hover, body.night .part .item.art-item:hover {
    border-color: rgba(255, 54, 54, 0.35) !important;
    box-shadow: 0 16px 24px -6px rgba(0, 0, 0, 0.35), 0 6px 12px -4px rgba(255, 54, 54, 0.08) !important;
}

body.night .quick-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.night .quick-nav .content-sidebar {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
body.night .quick-nav .content-sidebar.fixed,
body.night .quick-nav .content-sidebar.absolute {
    position: sticky !important;
    top: 84px !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
body.night .quick-nav dl dd a {
    color: var(--modern-slate-300) !important;
}
body.night .quick-nav dl dd a:hover {
    background: var(--modern-slate-700) !important;
    color: var(--main-color, #ff3636) !important;
}
body.night .quick-nav dl dd.current a {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
}

body.night .f-link.part {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
}
body.night .f-link.part .tt {
    border-bottom-color: var(--modern-slate-700) !important;
}
body.night .f-link.part #flink li a {
    color: var(--modern-slate-400) !important;
}

body.night #quick_login, body.night #backtop {
    background: var(--modern-slate-800) !important;
    color: var(--modern-slate-300) !important;
    border-color: var(--modern-slate-700) !important;
}
body.night #quick_login:hover, body.night #backtop:hover {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border-color: var(--main-color, #ff3636) !important;
}

/* Floating button layout refinements */
#quick_login, #quick_submit, #backtop {
    position: fixed !important;
    right: 20px !important;
    z-index: 999 !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 50% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
#quick_submit {
    bottom: 70px !important;
}
#quick_login {
    bottom: 120px !important;
}
#backtop {
    bottom: 170px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    transform: translateY(10px) !important;
}
#backtop.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
#quick_login a {
    color: var(--modern-slate-600) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
body.night #quick_login a {
    color: var(--modern-slate-300) !important;
}
#quick_login:hover a, body.night #quick_login:hover a {
    color: #ffffff !important;
}
#quick_submit {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 54, 54, 0.3) !important;
    transition: all 0.3s ease !important;
    font-size: 18px !important;
    text-decoration: none !important;
}
#quick_submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 54, 54, 0.45) !important;
    color: #ffffff !important;
}
body.night #quick_submit {
    box-shadow: 0 4px 14px rgba(255, 54, 54, 0.2) !important;
}
body.night #quick_submit:hover {
    box-shadow: 0 6px 20px rgba(255, 54, 54, 0.35) !important;
}

/* Multi-Engine Search Component Overrides */
.primary-menus {
    width: 60% !important;
    position: absolute !important;
    bottom: 30px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.primary-menus ul.selects {
    display: flex !important;
    gap: 4px !important;
    padding: 0 10px !important;
}
.primary-menus ul.selects li {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.25s ease !important;
    padding: 0 16px !important;
}
.primary-menus ul.selects li:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}
.primary-menus ul.selects li.current {
    background: #ffffff !important;
    color: var(--modern-slate-800) !important;
    border: 1px solid #ffffff !important;
    border-bottom: none !important;
}

.primary-menus .cont {
    background: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 5px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.primary-menus .left-cont form {
    display: none !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    position: relative !important;
}
.primary-menus .left-cont form:not(.hidden) {
    display: flex !important;
}
.primary-menus .left-cont input {
    height: 46px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 110px 10px 20px !important;
    color: var(--modern-slate-700) !important;
    background: transparent !important;
}
.primary-menus .left-cont input:focus {
    color: var(--modern-slate-900) !important;
}
.primary-menus .left-cont button {
    height: 38px !important;
    line-height: 38px !important;
    margin: 4px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    background-color: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: auto !important;
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.2) !important;
    transition: all 0.3s ease !important;
}
.primary-menus .left-cont button:hover {
    background-color: var(--main-color, #ff3636) !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 14px rgba(255, 54, 54, 0.35) !important;
}

/* Dark mode overrides for search engine tabs */
body.night .primary-menus ul.selects li {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--modern-slate-400) !important;
}
body.night .primary-menus ul.selects li:hover {
    background: rgba(15, 23, 42, 0.8) !important;
    color: #ffffff !important;
}
body.night .primary-menus ul.selects li.current {
    background: var(--modern-slate-800) !important;
    color: #ffffff !important;
    border-color: var(--modern-slate-700) !important;
}
body.night .primary-menus .cont {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
body.night .primary-menus .left-cont form {
    background: var(--modern-slate-800) !important;
}
body.night .primary-menus .left-cont input {
    color: var(--modern-slate-200) !important;
}
body.night .primary-menus .left-cont input::placeholder {
    color: var(--modern-slate-500) !important;
}
body.night .primary-menus .left-cont button {
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.15) !important;
}

/* Dark mode header gradients for top cards */
body.night .top_model:first-child .part .topt { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important; }
body.night .top_model:nth-child(2) .part .topt { background: linear-gradient(135deg, #164e63 0%, #0891b2 100%) !important; }
body.night .top_model:nth-child(3) .part .topt { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important; }
body.night .top_model:nth-child(4) .part .topt { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%) !important; }

/* Responsive adjustments for Banners & Search Components */
@media (max-width: 991px) {
    .primary-menus {
        width: 90% !important;
        bottom: 20px !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    #banner-bear, #banner-box, .diybg, .swiper-container {
        height: 240px !important;
    }
    .typing {
        font-size: 20px !important;
        margin-top: 35px !important;
    }
}

/* Catalog list parts & Pagination overrides */
.part.partnbt {
}
body.night .part.partnbt {
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15) !important;
}

.content-sidebar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box;
}
.quick-nav .content-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03) !important;
}
body.night .content-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.night .quick-nav .content-sidebar {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    padding: var(--tabflow-page-gap, 12px) !important;
}

/* Sidebar Module List Grid */
.sidebar-module-list {
    display: grid !important;
    gap: var(--tabflow-page-gap, 12px) !important;
}

/* Sidebar Module Card */
.sidebar-module {
    overflow: hidden !important;
    border: 1px solid var(--modern-slate-200) !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
body.night .sidebar-module {
    border-color: var(--modern-slate-700) !important;
    background: var(--modern-slate-800) !important;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.3) !important;
}

/* Sidebar Module Header */
.sidebar-module-head {
    padding: var(--tabflow-page-gap, 12px) !important;
    border-bottom: 1px solid var(--modern-slate-200) !important;
}
body.night .sidebar-module-head {
    border-bottom-color: var(--modern-slate-700) !important;
}
.sidebar-module-head h3 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: var(--modern-slate-800) !important;
}
body.night .sidebar-module-head h3 {
    color: var(--modern-slate-200) !important;
}

/* Sidebar Module Body */
.sidebar-module-body {
    padding: var(--tabflow-page-gap, 12px) !important;
}

/* Sidebar Module List/Items and Hover Transitions */
.sidebar-module-items,
.sidebar-module-body ul {
    display: grid !important;
    gap: var(--tabflow-page-gap, 12px) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.sidebar-module-items li,
.sidebar-module-body li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sidebar-module-items li a,
.sidebar-module-body li a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    color: var(--modern-slate-600) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
body.night .sidebar-module-items li a,
body.night .sidebar-module-body li a {
    color: var(--modern-slate-300) !important;
}
.sidebar-module-items li a:hover,
.sidebar-module-body li a:hover {
    background: var(--modern-slate-100) !important;
    color: var(--main-color, #ff3636) !important;
    transform: translateX(4px) !important;
}
body.night .sidebar-module-items li a:hover,
body.night .sidebar-module-body li a:hover {
    background: var(--modern-slate-700) !important;
    color: var(--main-color, #ff3636) !important;
}

/* Sidebar Search Box Styling */
.sidebar-module-body form#searchform,
.sidebar-module-body form[name="search"] {
    display: flex !important;
    gap: var(--tabflow-page-gap, 12px) !important;
}
.sidebar-module-body input[type="text"],
.sidebar-module-body input[name="q"] {
    flex: 1 !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid var(--modern-slate-200) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: var(--modern-slate-800) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}
body.night .sidebar-module-body input[type="text"],
body.night .sidebar-module-body input[name="q"] {
    border-color: var(--modern-slate-700) !important;
    background: var(--modern-slate-900) !important;
    color: var(--modern-slate-100) !important;
}
.sidebar-module-body input[type="text"]:focus,
.sidebar-module-body input[name="q"]:focus {
    border-color: var(--main-color, #ff3636) !important;
    box-shadow: 0 0 0 2px rgba(255, 54, 54, 0.1) !important;
}
.sidebar-module-body input[type="submit"],
.sidebar-module-body button[type="submit"] {
    height: 38px !important;
    padding: 0 16px !important;
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.sidebar-module-body input[type="submit"]:hover,
.sidebar-module-body button[type="submit"]:hover {
    opacity: 0.9 !important;
}

.pagebar {
    text-align: center !important;
    margin: 30px 0 50px 0 !important;
    display: flex !important;
    justify-content: center !important;
}
.pagebar .pagination {
    display: inline-flex !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.pagebar .page-link {
    display: inline-block !important;
    min-width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: var(--modern-slate-600) !important;
    background: #ffffff !important;
    border: 1px solid var(--modern-slate-200) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.pagebar a.page-link:hover {
    color: var(--main-color, #ff3636) !important;
    background: var(--modern-slate-100) !important;
    border-color: var(--modern-slate-300) !important;
    transform: translateY(-1px) !important;
}
.pagebar .current {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border-color: var(--main-color, #ff3636) !important;
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.25) !important;
}

body.night .pagebar .page-link {
    color: var(--modern-slate-300) !important;
    background: var(--modern-slate-800) !important;
    border-color: var(--modern-slate-700) !important;
}
body.night .pagebar a.page-link:hover {
    background: var(--modern-slate-700) !important;
    border-color: var(--modern-slate-600) !important;
    color: var(--main-color, #ff3636) !important;
}
body.night .pagebar .current {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
    border-color: var(--main-color, #ff3636) !important;
    box-shadow: 0 4px 10px rgba(255, 54, 54, 0.2) !important;
}
.pagebar .dots {
    cursor: default !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--modern-slate-400, #94a3b8) !important;
}
.pagebar .dots:hover {
    transform: none !important;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--modern-slate-400, #94a3b8) !important;
}
body.night .pagebar .dots {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--modern-slate-500, #64748b) !important;
}
body.night .pagebar .dots:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--modern-slate-500, #64748b) !important;
}

/* jcode-style Article Detail Layout Styles */
.home-config-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: var(--tabflow-page-gap, 12px) !important;
    align-items: start !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.home-config-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--tabflow-page-gap, 12px) !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.home-config-sidebar {
    position: sticky !important;
    top: 78px !important;
    box-sizing: border-box !important;
}
.single-post-card {
    position: relative !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.night .single-post-card {
    background: #1a1a20 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
body.night .single-post-card h1 {
    color: var(--modern-slate-100, #cbd5e1) !important;
}
body.night .single-post-card .prose {
    color: var(--modern-slate-300, #94a3b8) !important;
}
body.night .single-post-card .prose strong {
    color: var(--modern-slate-100, #f8fafc) !important;
}
body.night .single-post-card .post-copyright-box {
    background: #15151b !important;
    border-color: var(--main-color, #ff3636) !important;
}
body.night .single-post-card .post-copyright-box a, 
body.night .single-post-card .post-copyright-box strong {
    color: var(--modern-slate-300, #94a3b8) !important;
}

@media (max-width: 1024px) {
    .home-config-layout {
        grid-template-columns: 1fr !important;
        gap: var(--tabflow-page-gap, 12px) !important;
    }
    .home-config-sidebar {
        position: static !important;
    }
}


/* ==========================================================================
   9. Calendar Widget Styles (ported from jcode)
   ========================================================================== */
#tbCalendar {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
#tbCalendar caption {
    padding: 8px 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--modern-slate-800, #1e293b);
    text-align: center;
}
#tbCalendar caption a {
    color: var(--main-color, #ff3636);
    font-weight: 700;
    margin: 0 6px;
    text-decoration: none;
}
#tbCalendar caption a:hover {
    opacity: 0.8;
}
#tbCalendar th {
    padding: 8px 0;
    font-weight: 600;
    color: var(--modern-slate-500, #64748b);
    text-align: center;
    border-bottom: 1px solid var(--modern-slate-200, #e2e8f0);
    font-size: 12px;
}
#tbCalendar td {
    padding: 6px 0;
    text-align: center;
    color: var(--modern-slate-500, #64748b);
}
#tbCalendar td a {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: var(--main-color, #ff3636);
    color: #ffffff !important;
    border-radius: 50%;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
#tbCalendar td a:hover {
    background: var(--main-color, #ff3636);
    opacity: 0.85;
    transform: scale(1.1);
}

/* Calendar dark mode */
body.night #tbCalendar caption {
    color: var(--modern-slate-200, #e2e8f0);
}
body.night #tbCalendar th {
    color: var(--modern-slate-400, #94a3b8);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.night #tbCalendar td {
    color: var(--modern-slate-400, #94a3b8);
}

/* ==========================================================================
   10. Article Detail Page Styles
   ========================================================================== */

/* Post Header */
.post-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--modern-slate-200, #f1f5f9);
}
.post-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--modern-slate-900, #0f172a);
    line-height: 1.35;
    margin: 0 0 14px 0;
    letter-spacing: -0.3px;
}
.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--modern-slate-500, #64748b);
}
.post-meta-item i {
    font-size: 13px;
    color: var(--modern-slate-400, #94a3b8);
}
.post-meta-item a {
    color: var(--main-color, #ff3636);
    text-decoration: none;
}
.post-meta-item a:hover {
    text-decoration: underline;
}

/* Post Content */
.post-content.prose {
    font-size: 15px;
    line-height: 1.85;
    color: var(--modern-slate-700, #334155);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.post-content.prose h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--modern-slate-800, #1e293b);
    margin: 32px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--modern-slate-200, #e2e8f0);
}
.post-content.prose h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--modern-slate-800, #1e293b);
    margin: 24px 0 12px;
}
.post-content.prose p {
    margin: 0 0 16px;
}
.post-content.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
}
.post-content.prose pre {
    background: var(--modern-slate-50, #f8fafc);
    border: 1px solid var(--modern-slate-200, #e2e8f0);
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
    margin: 16px 0;
}
.post-content.prose code {
    background: var(--modern-slate-100, #f1f5f9);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    color: var(--main-color, #ff3636);
}
.post-content.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.post-content.prose blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--main-color, #ff3636);
    background: var(--modern-slate-50, #f8fafc);
    border-radius: 0 6px 6px 0;
    color: var(--modern-slate-600, #475569);
}
.post-content.prose a {
    color: var(--main-color, #ff3636);
    text-decoration: none;
    border-bottom: 1px dashed var(--main-color, #ff3636);
    transition: all 0.2s;
}
.post-content.prose a:hover {
    border-bottom-style: solid;
    opacity: 0.85;
}
.post-content.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.post-content.prose table th,
.post-content.prose table td {
    padding: 10px 14px;
    border: 1px solid var(--modern-slate-200, #e2e8f0);
    text-align: left;
}
.post-content.prose table th {
    background: var(--modern-slate-50, #f8fafc);
    font-weight: 600;
}

/* Copyright Box */
.post-copyright-box {
    margin-top: 32px;
    padding: 16px 18px;
    background: var(--modern-slate-50, #f8fafc);
    border-left: 3px solid var(--main-color, #ff3636);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--modern-slate-500, #64748b);
    line-height: 1.8;
}
.post-copyright-item {
    margin-bottom: 4px;
}
.post-copyright-item:last-child {
    margin-bottom: 0;
}
.post-copyright-label {
    font-weight: 600;
    color: var(--modern-slate-600, #475569);
}
.post-copyright-box a {
    color: var(--main-color, #ff3636);
    text-decoration: none;
    word-break: break-all;
}
.post-copyright-box a:hover {
    text-decoration: underline;
}

/* Post Tags */
.post-tags {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.post-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--modern-slate-100, #f1f5f9);
    border: 1px solid var(--modern-slate-200, #e2e8f0);
    border-radius: 20px;
    font-size: 12px;
    color: var(--modern-slate-600, #475569);
    text-decoration: none;
    transition: all 0.2s ease;
}
.post-tag:hover {
    background: var(--main-color, #ff3636);
    color: #ffffff;
    border-color: var(--main-color, #ff3636);
}
.post-tag i {
    font-size: 11px;
}

/* Article detail dark mode */
body.night .post-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.night .post-title {
    color: var(--modern-slate-100, #f1f5f9);
}
body.night .post-meta-item {
    color: var(--modern-slate-400, #94a3b8);
}
body.night .post-meta-item i {
    color: var(--modern-slate-500, #64748b);
}
body.night .post-content.prose {
    color: var(--modern-slate-300, #cbd5e1);
}
body.night .post-content.prose h2,
body.night .post-content.prose h3 {
    color: var(--modern-slate-100, #f1f5f9);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.night .post-content.prose pre {
    background: #15151b;
    border-color: rgba(255, 255, 255, 0.08);
}
body.night .post-content.prose code {
    background: rgba(255, 255, 255, 0.06);
    color: var(--main-color, #ff3636);
}
body.night .post-content.prose blockquote {
    background: #15151b;
    color: var(--modern-slate-400, #94a3b8);
}
body.night .post-content.prose table th {
    background: #15151b;
}
body.night .post-content.prose table th,
body.night .post-content.prose table td {
    border-color: rgba(255, 255, 255, 0.08);
}
body.night .post-copyright-box {
    background: #15151b;
    color: var(--modern-slate-400, #94a3b8);
}
body.night .post-copyright-label {
    color: var(--modern-slate-300, #cbd5e1);
}
body.night .post-tag {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--modern-slate-400, #94a3b8);
}
body.night .post-tag:hover {
    background: var(--main-color, #ff3636);
    color: #ffffff;
    border-color: var(--main-color, #ff3636);
}

/* ==========================================================================
   11. Related Posts Section
   ========================================================================== */
.related-section {
    box-sizing: border-box;
}
.related-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--modern-slate-200, #e2e8f0);
}
.related-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--modern-slate-800, #1e293b);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.related-header h3 i {
    color: var(--main-color, #ff3636);
    font-size: 16px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.related-item {
    border-radius: 6px;
    overflow: hidden;
    background: var(--modern-slate-50, #f8fafc);
    border: 1px solid var(--modern-slate-200, #e2e8f0);
    transition: all 0.25s ease;
}
.related-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--main-color, #ff3636);
}
.related-item-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.related-item-cover {
    height: 140px;
    overflow: hidden;
}
.related-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.related-item:hover .related-item-cover img {
    transform: scale(1.05);
}
.related-item-info {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.related-item-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--modern-slate-800, #1e293b);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-item:hover .related-item-info h4 {
    color: var(--main-color, #ff3636);
}
.related-item-info p {
    font-size: 12px;
    color: var(--modern-slate-500, #64748b);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    color: var(--modern-slate-400, #94a3b8);
    font-size: 14px;
}

/* Related posts dark mode */
body.night .related-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.night .related-header h3 {
    color: var(--modern-slate-200, #e2e8f0);
}
body.night .related-item {
    background: #15151b;
    border-color: rgba(255, 255, 255, 0.08);
}
body.night .related-item:hover {
    border-color: var(--main-color, #ff3636);
    box-shadow: 0 8px 20px rgba(255, 54, 54, 0.1);
}
body.night .related-item-info h4 {
    color: var(--modern-slate-200, #e2e8f0);
}
body.night .related-item-info p {
    color: var(--modern-slate-500, #64748b);
}

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   12. Comments Section Styles (jcode-inspired)
   ========================================================================== */
.jcode-comments-section {
    padding: 20px 24px;
    border: 1px solid var(--modern-slate-200, #e2e8f0);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.jcode-comments-header {
    margin-bottom: 16px;
}
.jcode-comments-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--modern-slate-800, #1e293b);
}
.comments-count-badge {
    background: rgba(255, 54, 54, 0.1);
    color: var(--main-color, #ff3636);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 1.3;
}

/* Comments List */
.jcode-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.jcode-comments-list > .jcode-comment-item {
    border-bottom: 1px dashed var(--modern-slate-200, #e2e8f0);
    padding: 18px 0;
}
.jcode-comments-list > .jcode-comment-item:first-child {
    padding-top: 4px;
}
.jcode-comments-list > .jcode-comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Empty comments state */
.comments-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--modern-slate-400, #94a3b8);
}
.comments-empty i {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}
.comments-empty p {
    margin: 0;
    font-size: 14px;
}

/* Comment Item */
.jcode-comment-item {
    display: flex;
    gap: 12px;
}
.jcode-comment-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--modern-slate-100, #f1f5f9);
    border: 2px solid var(--modern-slate-200, #e2e8f0);
}
.jcode-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.jcode-comment-main {
    flex: 1;
    min-width: 0;
}
.jcode-comment-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.jcode-comment-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--modern-slate-700, #334155);
}
.jcode-comment-author a {
    color: var(--modern-slate-700, #334155);
    text-decoration: none;
}
.jcode-comment-author a:hover {
    color: var(--main-color, #ff3636);
}
.jcode-comment-time {
    font-size: 12px;
    color: var(--modern-slate-400, #94a3b8);
}
.jcode-comment-reply-text {
    font-size: 12px;
    color: var(--modern-slate-400, #94a3b8);
    margin: 0 2px;
}
.jcode-comment-reply-target {
    font-size: 13px;
    font-weight: 500;
    color: var(--main-color, #ff3636);
}

/* Comment Body */
.jcode-comment-body {
    font-size: 14px;
    color: var(--modern-slate-600, #475569);
    line-height: 1.7;
    word-wrap: break-word;
    margin-bottom: 8px;
}

/* Comment Actions */
.jcode-comment-actions {
    margin-top: 4px;
}
.comment-reply-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--modern-slate-400, #94a3b8);
    text-decoration: none;
    transition: color 0.2s;
}
.comment-reply-link:hover {
    color: var(--main-color, #ff3636);
}
.comment-reply-link i {
    margin-right: 3px;
}

/* Nested Comment Children */
.jcode-comment-children {
    margin-top: 14px;
    padding: 14px;
    background: var(--modern-slate-50, #f8fafc);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--modern-slate-200, #e2e8f0);
}
.jcode-comment-children .jcode-comment-avatar {
    width: 34px;
    height: 34px;
}
.jcode-comment-children .jcode-comment-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--modern-slate-200, #e2e8f0);
}
.jcode-comment-children .jcode-comment-item:first-child {
    padding-top: 0;
}
.jcode-comment-children .jcode-comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Comment Form Styles */
.jcode-comment-post {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--modern-slate-200, #e2e8f0);
}
.jcode-comment-post-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.jcode-comment-post-textarea-wrap {
    margin-bottom: 12px;
}
.jcode-comment-input,
.jcode-comment-textarea {
    width: 100%;
    background: var(--modern-slate-50, #f8fafc);
    border: 1px solid var(--modern-slate-200, #e2e8f0);
    color: var(--modern-slate-800, #1e293b);
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.jcode-comment-input {
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
}
.jcode-comment-textarea {
    padding: 12px;
    border-radius: 6px;
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}
.jcode-comment-input:focus,
.jcode-comment-textarea:focus {
    outline: none;
    border-color: var(--main-color, #ff3636);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 54, 54, 0.1);
}

/* Verify Group */
.jcode-comment-verify-group {
    margin-bottom: 12px;
}
.verify-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}
.verify-input-wrap input {
    flex: 1;
}
.verify-input-wrap img {
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--modern-slate-200, #e2e8f0);
}

/* Comment Footer Row */
.jcode-comment-post-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.jcode-comment-post-footer-row .footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.jcode-comment-post-footer-row .footer-left a {
    color: var(--main-color, #ff3636);
    text-decoration: none;
    font-size: 13px;
}
.jcode-comment-post-footer-row .footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.jcode-comment-submit-btn {
    height: 38px;
    padding: 0 28px;
    background: var(--main-color, #ff3636);
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 54, 54, 0.2);
}
.jcode-comment-submit-btn:hover {
    opacity: 0.9;
    box-shadow: 0 4px 14px rgba(255, 54, 54, 0.3);
    transform: translateY(-1px);
}
.jcode-comment-submit-btn:active {
    transform: scale(0.97);
}

/* Comments Dark Mode */
body.night .jcode-comments-section {
    background: #1a1a20;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.night .jcode-comments-header h3 {
    color: var(--modern-slate-200, #e2e8f0);
}
body.night .comments-count-badge {
    background: rgba(255, 54, 54, 0.15);
}
body.night .jcode-comments-list > .jcode-comment-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.night .jcode-comment-avatar {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
body.night .jcode-comment-author,
body.night .jcode-comment-author a {
    color: var(--modern-slate-300, #cbd5e1);
}
body.night .jcode-comment-body {
    color: var(--modern-slate-400, #94a3b8);
}
body.night .jcode-comment-children {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}
body.night .jcode-comment-children .jcode-comment-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.night .jcode-comment-post {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.night .jcode-comment-input,
body.night .jcode-comment-textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--modern-slate-200, #e2e8f0);
}
body.night .jcode-comment-input:focus,
body.night .jcode-comment-textarea:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--main-color, #ff3636);
    box-shadow: 0 0 0 3px rgba(255, 54, 54, 0.15);
}
body.night .verify-input-wrap img {
    border-color: rgba(255, 255, 255, 0.08);
}
body.night .comments-empty {
    color: var(--modern-slate-500, #64748b);
}

/* Comment pagebar in comments section */
.commentpagebar {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--modern-slate-200, #e2e8f0);
}
body.night .commentpagebar {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Responsive comment adjustments */
@media (max-width: 768px) {
    .jcode-comments-section {
        padding: 14px 16px;
    }
    .jcode-comment-post-inputs {
        grid-template-columns: 1fr;
    }
    .jcode-comment-avatar {
        width: 36px;
        height: 36px;
    }
    .jcode-comment-children {
        padding: 10px;
    }
    .jcode-comment-children .jcode-comment-avatar {
        width: 28px;
        height: 28px;
    }
}

/* TabFlow jcode sidebar replication and 12px article rhythm */
:root {
    --tabflow-page-gap: 12px;
    --tabflow-radius: 6px;
}

.home-config-layout {
    gap: var(--tabflow-page-gap) !important;
}

.home-config-content,
.sidebar-module-list,
.jcode-sidebar-posts-list,
.jcode-sidebar-comments-list,
.jcode-user-card,
.jcode-guest-card {
    gap: var(--tabflow-page-gap) !important;
}

.single-post-card,
.jcode-comments-section,
.sidebar-module,
.jcode-sidebar-search-card,
.jcode-sidebar-search-input-wrapper,
.jcode-sidebar-post-thumb,
.jcode-sidebar-comment-bubble,
.jcode-user-btn,
.jcode-guest-icon-wrapper,
.jcode-friendlinks-item,
.catalog-link,
.catalog-sub-link,
.sidebar-author-link,
.jcode-comment-input,
.jcode-comment-textarea,
.jcode-comment-submit-btn {
    border-radius: var(--tabflow-radius) !important;
}

.single-post-card,
.jcode-comments-section {
    padding: var(--tabflow-page-gap) !important;
}

.post-header,
.post-copyright-box,
.post-tags,
.related-header,
.jcode-comments-header,
.jcode-comment-post,
.commentpagebar {
    margin-bottom: var(--tabflow-page-gap) !important;
}

.post-title,
.post-meta,
.post-content.prose > *:first-child,
.jcode-comments-header h3,
.jcode-comment-body p {
    margin-top: 0 !important;
}

.post-content.prose > *,
.jcode-comment-body > *,
.jcode-guest-title,
.jcode-guest-desc {
    margin-bottom: var(--tabflow-page-gap) !important;
}

.post-content.prose > *:last-child,
.jcode-comment-body > *:last-child,
.jcode-guest-title:last-child,
.jcode-guest-desc:last-child {
    margin-bottom: 0 !important;
}

.post-meta,
.post-tags,
.jcode-comment-post-inputs,
.jcode-comment-post-footer-row,
.jcode-comment-post-footer-row .footer-right,
.jcode-comment-header,
.jcode-comment-actions,
.jcode-user-actions,
.jcode-guest-actions {
    gap: var(--tabflow-page-gap) !important;
}

.home-config-sidebar {
    display: grid !important;
    gap: var(--tabflow-page-gap, 12px) !important;
    align-content: start !important;
    top: calc(66px + var(--tabflow-page-gap)) !important;
}

.sidebar-module-body,
.sidebar-module-head {
    padding: var(--tabflow-page-gap) !important;
}

.sidebar-module-items,
.sidebar-module-body ul {
    gap: var(--tabflow-page-gap) !important;
}

.sidebar-module-items li a,
.sidebar-module-body li a,
.catalog-link,
.catalog-sub-link,
.sidebar-author-link {
    border-radius: var(--tabflow-radius) !important;
}

.jcode-friendlinks-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--tabflow-page-gap) !important;
    width: 100% !important;
}

.jcode-friendlinks-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
    background: var(--modern-slate-100, #f8fafc) !important;
    color: var(--modern-slate-700, #334155) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.jcode-friendlinks-item:hover {
    color: var(--main-color, #ff3636) !important;
    background: #ffffff !important;
    transform: translateY(-1px) !important;
}

.jcode-friendlinks-icon {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

.jcode-friendlinks-item-name {
    white-space: nowrap !important;
}

.tabflow-sidebar-empty {
    margin: 0 !important;
    padding: var(--tabflow-page-gap) 0 !important;
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 13px !important;
    text-align: center !important;
}

.jcode-nav-mosaic {
    display: grid !important;
    gap: var(--tabflow-page-gap) !important;
}

.jcode-nav-mosaic ul {
    display: grid !important;
    gap: var(--tabflow-page-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.jcode-nav-mosaic a,
.catalog-link,
.catalog-sub-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    color: var(--modern-slate-600, #475569) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.jcode-nav-mosaic a:hover,
.catalog-link:hover,
.catalog-sub-link:hover,
.sidebar-author-link:hover {
    background: var(--modern-slate-100, #f8fafc) !important;
    color: var(--main-color, #ff3636) !important;
    transform: translateX(4px) !important;
}

.catalog-sub-list {
    display: grid !important;
    gap: var(--tabflow-page-gap) !important;
    margin: var(--tabflow-page-gap) 0 var(--tabflow-page-gap) var(--tabflow-page-gap) !important;
    padding-left: var(--tabflow-page-gap) !important;
    border-left: 1px solid var(--modern-slate-200, #e2e8f0) !important;
}

.catalog-count,
.catalog-sub-count {
    padding: 1px 7px !important;
    border-radius: 999px !important;
    background: var(--modern-slate-100, #f8fafc) !important;
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

#divSearchPanel {
    overflow: hidden !important;
}

#divSearchPanel .sidebar-module-head {
    display: none !important;
}

#divSearchPanel .sidebar-module-body {
    padding: 0 !important;
}

.jcode-sidebar-search-form {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
}

#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: none !important;
    background: #ffffff !important;
    color: var(--modern-slate-800, #1e293b) !important;
    font-size: 14px !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.jcode-sidebar-search-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    height: 42px !important;
    overflow: hidden !important;
    border-radius: 0 0 var(--tabflow-radius) var(--tabflow-radius) !important;
}

.jcode-search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.jcode-search-btn.btn-site {
    background: var(--main-color, #ff3636) !important;
}

.jcode-search-btn.btn-web {
    background: #475569 !important;
}

.jcode-sidebar-post-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--tabflow-page-gap) !important;
    padding: 0 0 var(--tabflow-page-gap) 0 !important;
    border-bottom: 1px dashed var(--modern-slate-200, #e2e8f0) !important;
}

.jcode-sidebar-post-item:last-child,
.jcode-sidebar-comment-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.jcode-sidebar-post-thumb {
    width: 76px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: var(--modern-slate-100, #f8fafc) !important;
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
}

.jcode-sidebar-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.jcode-sidebar-post-info {
    min-width: 0 !important;
    flex: 1 !important;
}

.jcode-sidebar-post-title {
    margin: 0 0 var(--tabflow-page-gap) 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.jcode-sidebar-post-title a {
    display: block !important;
    overflow: hidden !important;
    color: var(--modern-slate-800, #1e293b) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.jcode-sidebar-post-meta {
    display: flex !important;
    gap: var(--tabflow-page-gap) !important;
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 11px !important;
}

.jcode-sidebar-meta-date,
.jcode-sidebar-meta-views {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.jcode-sidebar-meta-icon {
    width: 12px !important;
    height: 12px !important;
}

.jcode-sidebar-comment-item {
margin-bottom: 12px !important;
    padding: 0 0 var(--tabflow-page-gap) 0 !important;
    border-bottom: 1px dashed var(--modern-slate-200, #e2e8f0) !important;
}

.jcode-sidebar-comment-header,
.jcode-sidebar-comment-user {
    display: flex !important;
    align-items: center !important;
}

.jcode-sidebar-comment-header {
    justify-content: space-between !important;
    gap: var(--tabflow-page-gap) !important;
    margin-bottom: var(--tabflow-page-gap) !important;
}

.jcode-sidebar-comment-user {
    gap: var(--tabflow-page-gap) !important;
    min-width: 0 !important;
}

.jcode-sidebar-comment-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.jcode-sidebar-comment-author {
    color: var(--modern-slate-800, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.jcode-sidebar-comment-time,
.jcode-sidebar-comment-source,
.jcode-sidebar-comment-source a {
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 11px !important;
}

.jcode-sidebar-comment-bubble {
    display: block !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
    background: var(--modern-slate-100, #f8fafc) !important;
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
}

.jcode-sidebar-comment-bubble a {
    display: block !important;
    color: var(--modern-slate-600, #475569) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    word-break: break-word !important;
}

.sidebar-stat-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 var(--tabflow-page-gap) 0 !important;
    border-bottom: 1px dashed var(--modern-slate-200, #e2e8f0) !important;
    color: var(--modern-slate-600, #475569) !important;
    font-size: 13px !important;
}

.sidebar-stat-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.sidebar-stat-count {
    color: var(--modern-slate-800, #1e293b) !important;
    font-weight: 700 !important;
}

.sidebar-author-link {
    display: flex !important;
    align-items: center !important;
    gap: var(--tabflow-page-gap) !important;
    padding: 7px 10px !important;
}

.sidebar-author-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.sidebar-author-info {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.sidebar-author-name {
    color: var(--modern-slate-800, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.sidebar-author-meta {
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 11px !important;
}

.jcode-user-card-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--tabflow-page-gap) !important;
    margin-bottom: 12px;
}

.jcode-user-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.jcode-user-meta,
.jcode-guest-info {
    display: grid !important;
    gap: 4px !important;
}

.jcode-username,
.jcode-guest-title {
    color: var(--modern-slate-800, #1e293b) !important;
    font-weight: 700 !important;
}

.jcode-user-level {
    width: fit-content !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 54, 54, 0.1) !important;
    color: var(--main-color, #ff3636) !important;
    font-size: 11px !important;
}

.jcode-user-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
margin-bottom: 12px;
}

.jcode-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    text-decoration: none !important;
}

.jcode-user-btn.btn-primary {
    background: var(--main-color, #ff3636) !important;
    color: #ffffff !important;
}

.jcode-user-btn.btn-outline {
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
    color: var(--modern-slate-700, #334155) !important;
}

.jcode-user-footer {
    padding-top: var(--tabflow-page-gap) !important;
    border-top: 1px dashed var(--modern-slate-200, #e2e8f0) !important;
    text-align: center !important;
}

.jcode-logout-link,
.jcode-guest-link {
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.jcode-guest-card {
    align-items: center !important;
    text-align: center !important;
}

.jcode-guest-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
    background: var(--modern-slate-100, #f8fafc) !important;
}

.jcode-guest-icon,
.jcode-guest-icon svg,
.jcode-btn-icon {
    width: 16px !important;
    height: 16px !important;
}

.jcode-guest-desc {
    color: var(--modern-slate-500, #64748b) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body.night .jcode-friendlinks-item,
body.night .jcode-sidebar-comment-bubble,
body.night .jcode-guest-icon-wrapper {
    border-color: var(--modern-slate-700, #334155) !important;
    background: var(--modern-slate-900, #0f172a) !important;
    color: var(--modern-slate-300, #cbd5e1) !important;
}

body.night .jcode-sidebar-post-item,
body.night .jcode-sidebar-comment-item,
body.night .sidebar-stat-item,
body.night .catalog-sub-list,
body.night .jcode-user-footer {
    border-color: var(--modern-slate-700, #334155) !important;
}

body.night .jcode-sidebar-post-title a,
body.night .jcode-sidebar-comment-author,
body.night .jcode-username,
body.night .jcode-guest-title,
body.night .sidebar-stat-count,
body.night .sidebar-author-name {
    color: var(--modern-slate-100, #f8fafc) !important;
}

body.night .jcode-sidebar-comment-bubble a,
body.night .sidebar-author-link,
body.night .jcode-user-btn.btn-outline {
    color: var(--modern-slate-300, #cbd5e1) !important;
}

@media (max-width: 1024px) {
    .home-config-layout {
        gap: var(--tabflow-page-gap) !important;
    }
}

@media (max-width: 768px) {
    .single-post-card,
    .jcode-comments-section {
        padding: var(--tabflow-page-gap) !important;
    }
}

.home-config-layout .post-content.prose {
    display: flow-root !important;
}

.home-config-layout .post-content.prose > *,
.home-config-layout .post-content.prose p,
.home-config-layout .post-content.prose h1,
.home-config-layout .post-content.prose h2,
.home-config-layout .post-content.prose h3,
.home-config-layout .post-content.prose h4,
.home-config-layout .post-content.prose h5,
.home-config-layout .post-content.prose h6,
.home-config-layout .post-content.prose ul,
.home-config-layout .post-content.prose ol,
.home-config-layout .post-content.prose blockquote,
.home-config-layout .post-content.prose pre {
    margin-top: 0 !important;
    margin-bottom: var(--tabflow-page-gap) !important;
}

.home-config-layout .post-content.prose > *:last-child {
    margin-bottom: 0 !important;
}

.home-config-layout .post-content.prose img,
.home-config-layout .related-item,
.home-config-layout .related-item-cover,
.home-config-layout .related-item-cover img,
.home-config-layout .post-copyright-box,
.home-config-layout .verify-input-wrap img {
    border-radius: var(--tabflow-radius) !important;
}

.home-config-layout .related-grid {
    gap: var(--tabflow-page-gap) !important;
}

.home-config-layout .related-item-info {
    padding: var(--tabflow-page-gap) !important;
    gap: 6px !important;
}

.home-config-layout .jcode-comments-list > .jcode-comment-item {
    padding: var(--tabflow-page-gap) 0 !important;
}

.home-config-layout .jcode-comment-children,
.home-config-layout .comments-empty {
    padding: var(--tabflow-page-gap) !important;
}

.home-config-layout .jcode-comment-post {
    padding-bottom: var(--tabflow-page-gap) !important;
    margin-bottom: var(--tabflow-page-gap) !important;
}

.home-config-layout .commentpagebar {
    margin-top: var(--tabflow-page-gap) !important;
    padding-top: var(--tabflow-page-gap) !important;
}

/* Article page final spacing pass */
.single-news-container {
    margin-top: var(--tabflow-page-gap) !important;
    margin-bottom: var(--tabflow-page-gap) !important;
}

body > .container,
.site-details-wrapper {
    margin-bottom: var(--tabflow-page-gap) !important;
}

body:has(.single-news-container) {
    min-height: 0 !important;
}

.single-news-container .home-config-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: var(--tabflow-page-gap) !important;
    align-items: start !important;
}

.single-news-container .home-config-content {
    gap: var(--tabflow-page-gap) !important;
}

.single-news-container .home-config-sidebar {
    position: sticky !important;
    top: calc(54px + var(--tabflow-page-gap)) !important;
    padding-right: 0 !important;
}

.single-news-container .content-sidebar,
.single-news-container .sidebar-module-list {
    min-height: 0 !important;
}

.single-news-container .sidebar-module-head,
.single-news-container .sidebar-module-body {
    padding: var(--tabflow-page-gap) !important;
}

.single-news-container .sidebar-module-head h3 {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.single-news-container .sidebar-module-items,
.single-news-container .sidebar-module-body ul,
.single-news-container .jcode-friendlinks-list {
    gap: var(--tabflow-page-gap) !important;
}

.single-news-container .sidebar-module-items li a,
.single-news-container .sidebar-module-body li a,
.single-news-container .jcode-nav-mosaic a,
.single-news-container .catalog-link,
.single-news-container .catalog-sub-link {
    padding: 6px 8px !important;
    font-size: 12px !important;
}

.single-news-container .jcode-friendlinks-item {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
}

.single-news-container .jcode-sidebar-post-item,
.single-news-container .jcode-sidebar-comment-item,
.single-news-container .sidebar-stat-item {
    padding-bottom: var(--tabflow-page-gap) !important;
}

.single-news-container .jcode-sidebar-post-thumb {
    width: 68px !important;
    height: 46px !important;
}

.single-news-container .jcode-sidebar-post-title {
    margin-bottom: var(--tabflow-page-gap) !important;
    font-size: 12px !important;
}

.single-news-container .jcode-sidebar-post-meta,
.single-news-container .jcode-sidebar-comment-time,
.single-news-container .jcode-sidebar-comment-source,
.single-news-container .jcode-sidebar-comment-source a {
    font-size: 10.5px !important;
}

.single-news-container .jcode-sidebar-comment-bubble {
    margin-bottom: var(--tabflow-page-gap) !important;
    padding: var(--tabflow-page-gap) !important;
}

.single-news-container .jcode-sidebar-comment-bubble a {
    font-size: 12px !important;
}

.single-news-container .single-post-card,
.single-news-container .jcode-comments-section {
    padding: var(--tabflow-page-gap) !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.single-news-container .post-content.prose,
.single-news-container .jcode-comment-body,
.single-news-container .post-copyright-box,
.single-news-container .related-section,
.single-news-container .related-grid,
.single-news-container .jcode-comments-list,
.single-news-container .jcode-comment-main,
.single-news-container .jcode-comment-children {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.single-news-container .post-content.prose,
.single-news-container .jcode-comment-body {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.single-news-container .post-content.prose img,
.single-news-container .post-content.prose video,
.single-news-container .post-content.prose iframe,
.single-news-container .jcode-comment-body img,
.single-news-container .jcode-comment-body video,
.single-news-container .jcode-comment-body iframe {
    max-width: 100% !important;
    height: auto !important;
}

.single-news-container .post-content.prose table,
.single-news-container .post-content.prose pre,
.single-news-container .jcode-comment-body table,
.single-news-container .jcode-comment-body pre {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

.single-news-container .post-copyright-item,
.single-news-container .post-copyright-box a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.single-news-container .post-header {
    padding-bottom: var(--tabflow-page-gap) !important;
}

.single-news-container .post-title {
    margin-bottom: 8px !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
}

.single-news-container .post-meta {
    gap: var(--tabflow-page-gap) !important;
    font-size: 12px !important;
}

.single-news-container .post-copyright-box {
    padding: var(--tabflow-page-gap) !important;
    margin-top: var(--tabflow-page-gap) !important;
}

.single-news-container .related-header {
    padding-bottom: 8px !important;
    margin-bottom: var(--tabflow-page-gap) !important;
}

.single-news-container .related-grid {
    gap: var(--tabflow-page-gap) !important;
}

.single-news-container .jcode-comments-header {
    padding-bottom: 8px !important;
    margin-bottom: var(--tabflow-page-gap) !important;
}

.single-news-container .jcode-comment-textarea {
    min-height: 96px !important;
}

.single-news-container .jcode-comments-section {
    margin-bottom: 0 !important;
}

.single-news-container ~ .footer-copyright,
.single-news-container + .footer-copyright,
.footer-copyright {
    flex: 0 0 auto !important;
}

@media (max-width: 1024px) {
    .single-news-container .home-config-layout {
        grid-template-columns: 1fr !important;
    }

    .single-news-container .home-config-sidebar {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
}

/* jcode 1:1 sidebar search */
.single-news-container #divSearchPanel,
#divSearchPanel {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .sidebar-module-head,
#divSearchPanel .sidebar-module-head {
    display: none !important;
}

.single-news-container #divSearchPanel .sidebar-module-body,
#divSearchPanel .sidebar-module-body {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-card,
#divSearchPanel .jcode-sidebar-search-card {
    width: 216px !important;
    height: 106px !important;
    margin: 0 auto !important;
    padding: 16px 12px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1px solid #e7edf5 !important;
    border-radius: 58px 58px 18px 18px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-form,
#divSearchPanel .jcode-sidebar-search-form {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-input-wrapper,
#divSearchPanel .jcode-sidebar-search-input-wrapper {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput,
#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 34px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 34px !important;
    text-align: center !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput::placeholder {
    color: transparent !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput:focus::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput:focus::placeholder {
    color: #94a3b8 !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-buttons,
#divSearchPanel .jcode-sidebar-search-buttons {
    flex: 0 0 44px !important;
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12) !important;
}

.single-news-container #divSearchPanel .jcode-search-btn,
#divSearchPanel .jcode-search-btn {
    flex: 1 1 50% !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.single-news-container #divSearchPanel .jcode-search-btn .iconfont,
#divSearchPanel .jcode-search-btn .iconfont {
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Final jcode search layout: one card, white input area above buttons */
.single-news-container #divSearchPanel,
#divSearchPanel {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .sidebar-module-head,
#divSearchPanel .sidebar-module-head {
    display: none !important;
}

.single-news-container #divSearchPanel .sidebar-module-body,
#divSearchPanel .sidebar-module-body {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-card,
#divSearchPanel .jcode-sidebar-search-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-form,
#divSearchPanel .jcode-sidebar-search-form {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-input-wrapper,
#divSearchPanel .jcode-sidebar-search-input-wrapper {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: none !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput,
#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: var(--color-text, #0f172a) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 50px !important;
    text-align: center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput::placeholder {
    color: var(--color-text-muted, #94a3b8) !important;
    font-weight: 500 !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput:focus,
#divSearchPanel input#jcodeSidebarSearchInput:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-buttons,
#divSearchPanel .jcode-sidebar-search-buttons {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 46px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-search-btn,
#divSearchPanel .jcode-search-btn {
    flex: 1 1 50% !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.single-news-container #divSearchPanel .jcode-search-btn span.iconfont,
#divSearchPanel .jcode-search-btn span.iconfont {
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site,
#divSearchPanel .jcode-search-btn.btn-site {
    background: #3b82f6 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site:hover,
#divSearchPanel .jcode-search-btn.btn-site:hover {
    background: #2563eb !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web,
#divSearchPanel .jcode-search-btn.btn-web {
    background: #60a5fa !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:hover,
#divSearchPanel .jcode-search-btn.btn-web:hover {
    background: #3b82f6 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:active,
.single-news-container #divSearchPanel .jcode-search-btn.btn-site:active,
#divSearchPanel .jcode-search-btn.btn-web:active,
#divSearchPanel .jcode-search-btn.btn-site:active {
    transform: scale(0.98) !important;
}

body.night #divSearchPanel .jcode-sidebar-search-card {
    background: #ffffff !important;
}

/* TabFlow final article polish: breadcrumbs, tag colors, comment hierarchy */
.breadnav,
.breadnav-overlay,
.breadnav-standard {
    position: relative !important;
    z-index: 2 !important;
    margin: var(--tabflow-page-gap, 12px) 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--modern-slate-500, #64748b) !important;
}

.breadnav .bread {
    min-height: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    color: var(--modern-slate-500, #64748b) !important;
    line-height: 1.5 !important;
}

.breadnav i {
    padding: 0 !important;
    color: var(--modern-slate-400, #94a3b8) !important;
}

.breadnav a,
.breadnav-overlay a,
.breadnav-standard a {
    color: var(--modern-slate-600, #475569) !important;
}

.breadnav a:hover,
.breadnav-overlay a:hover,
.breadnav-standard a:hover {
    color: var(--main-color, #ff3636) !important;
    text-decoration: none !important;
}

.breadnav-overlay,
.breadnav-overlay i,
.breadnav-standard,
.breadnav-standard i {
    color: var(--modern-slate-500, #64748b) !important;
}

.breadnav + .container,
.breadnav + .single-news-container,
.breadnav + .site-details-wrapper {
    margin-top: var(--tabflow-page-gap, 12px) !important;
}

.breadnav + .container > .row,
.breadnav + .container > .part,
.breadnav + .single-news-container > .row,
.breadnav + .single-news-container > .part,
.breadnav + .site-details-wrapper > .row,
.breadnav + .site-details-wrapper > .part {
    margin-top: 0 !important;
}


#divTags .jcode-friendlinks-item.jcode-tag-color,
.single-news-container #divTags .jcode-friendlinks-item.jcode-tag-color {
    background: var(--tag-bg, #e2e8f0) !important;
    color: var(--tag-color, #334155) !important;
    border: none !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06) !important;
}

#divTags .jcode-friendlinks-item.jcode-tag-color:hover,
.single-news-container #divTags .jcode-friendlinks-item.jcode-tag-color:hover {
    background: var(--tag-bg, #e2e8f0) !important;
    color: var(--tag-color, #334155) !important;
    filter: brightness(0.96) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.jcode-comments-section {
    padding: var(--tabflow-page-gap, 12px) !important;
    border-radius: var(--tabflow-radius, 6px) !important;
}

.jcode-comments-list {
    gap: 0 !important;
}

.jcode-comments-list > .jcode-comment-item {
    padding: var(--tabflow-page-gap, 12px) 0 !important;
    border-bottom: 1px dashed var(--modern-slate-200, #e2e8f0) !important;
}

.jcode-comments-list > .jcode-comment-item:first-child {
    padding-top: 0 !important;
}

.jcode-comments-list > .jcode-comment-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.jcode-comment-item {
    gap: var(--tabflow-page-gap, 12px) !important;
    align-items: flex-start !important;
}

.jcode-comment-avatar {
    width: 40px !important;
    height: 40px !important;
}

.jcode-comment-header {
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.jcode-comment-body {
    margin-bottom: 6px !important;
}

.jcode-comment-body > * {
    margin-bottom: 8px !important;
}

.jcode-comment-body > *:last-child {
    margin-bottom: 0 !important;
}

.jcode-comment-actions {
    margin-top: 6px !important;
}

.comment-reply-link {
    min-height: 24px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    background: var(--modern-slate-50, #f8fafc) !important;
    color: var(--modern-slate-500, #64748b) !important;
}

.comment-reply-link:hover {
    background: rgba(255, 54, 54, 0.08) !important;
    color: var(--main-color, #ff3636) !important;
}

.jcode-comment-reply-target {
    padding: 1px 6px !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    background: rgba(255, 54, 54, 0.08) !important;
    line-height: 1.4 !important;
}

.comment-status-checking {
    padding: 1px 6px !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    background: #fef3c7 !important;
    color: #b45309 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.jcode-comment-children {
    margin-top: var(--tabflow-page-gap, 12px) !important;
    margin-left: 0 !important;
    padding: var(--tabflow-page-gap, 12px) !important;
    border: 1px solid var(--modern-slate-200, #e2e8f0) !important;
    border-left: 3px solid rgba(255, 54, 54, 0.22) !important;
    border-radius: var(--tabflow-radius, 6px) !important;
    background: var(--modern-slate-50, #f8fafc) !important;
    gap: 0 !important;
}

.jcode-comment-children .jcode-comment-item {
    gap: 10px !important;
    padding: var(--tabflow-page-gap, 12px) 0 !important;
    border-bottom: 1px solid var(--modern-slate-200, #e2e8f0) !important;
}

.jcode-comment-children .jcode-comment-item:first-child {
    padding-top: 0 !important;
}

.jcode-comment-children .jcode-comment-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.jcode-comment-children .jcode-comment-avatar {
    width: 32px !important;
    height: 32px !important;
}

.jcode-comment-children .jcode-comment-children {
    margin-left: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.night .breadnav,
body.night .breadnav-overlay,
body.night .breadnav-standard,
body.night .breadnav i,
body.night .breadnav-overlay i,
body.night .breadnav-standard i {
    color: var(--modern-slate-400, #94a3b8) !important;
}

body.night .breadnav a,
body.night .breadnav-overlay a,
body.night .breadnav-standard a {
    color: var(--modern-slate-300, #cbd5e1) !important;
}

body.night #divTags .jcode-friendlinks-item.jcode-tag-color {
    opacity: 0.92 !important;
    box-shadow: none !important;
}

body.night .jcode-comments-list > .jcode-comment-item,
body.night .jcode-comment-children .jcode-comment-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.night .jcode-comment-children {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: rgba(255, 54, 54, 0.35) !important;
}

body.night .comment-reply-link {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--modern-slate-400, #94a3b8) !important;
}

body.night .comment-reply-link:hover {
    background: rgba(255, 54, 54, 0.12) !important;
    color: var(--main-color, #ff3636) !important;
}

body.night .jcode-comment-reply-target {
    background: rgba(255, 54, 54, 0.14) !important;
}

@media (max-width: 768px) {
    .breadnav {
        margin-top: 10px !important;
    }

    .jcode-comment-item {
        gap: 10px !important;
    }

    .jcode-comment-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .jcode-comment-children {
        padding: 10px !important;
        border-left-width: 2px !important;
    }

    .jcode-comment-children .jcode-comment-avatar {
        width: 28px !important;
        height: 28px !important;
    }
}

/* jcode sidebar search final override */
.single-news-container #divSearchPanel,
#divSearchPanel {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .sidebar-module-head,
#divSearchPanel .sidebar-module-head {
    display: none !important;
}

.single-news-container #divSearchPanel .sidebar-module-body,
#divSearchPanel .sidebar-module-body {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-card,
#divSearchPanel .jcode-sidebar-search-card,
body.night #divSearchPanel .jcode-sidebar-search-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-form,
#divSearchPanel .jcode-sidebar-search-form {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-input-wrapper,
#divSearchPanel .jcode-sidebar-search-input-wrapper {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    display: block !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput,
#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 30px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #dfe7f0 !important;
    border-radius: 6px !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput:focus,
#divSearchPanel input#jcodeSidebarSearchInput:focus {
    border-color: #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.14) !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-buttons,
#divSearchPanel .jcode-sidebar-search-buttons {
    width: 224px !important;
    height: 108px !important;
    margin: 0 auto !important;
    padding: 50px 14px 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #e7edf5 !important;
    border-radius: 64px 64px 18px 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .jcode-search-btn,
#divSearchPanel .jcode-search-btn {
    flex: 1 1 50% !important;
    width: auto !important;
    height: 44px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    filter: none !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site,
#divSearchPanel .jcode-search-btn.btn-site {
    background: var(--main-color, #eb681c) !important;
    border-radius: 6px 0 0 6px !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web,
#divSearchPanel .jcode-search-btn.btn-web {
    background: #475569 !important;
    border-radius: 0 6px 6px 0 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site:hover,
#divSearchPanel .jcode-search-btn.btn-site:hover {
    background: #d85c14 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:hover,
#divSearchPanel .jcode-search-btn.btn-web:hover {
    background: #334155 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn .iconfont,
#divSearchPanel .jcode-search-btn .iconfont {
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Final jcode search parity */
.single-news-container #divSearchPanel,
#divSearchPanel {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .sidebar-module-head,
#divSearchPanel .sidebar-module-head {
    display: none !important;
}

.single-news-container #divSearchPanel .sidebar-module-body,
#divSearchPanel .sidebar-module-body {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-card,
#divSearchPanel .jcode-sidebar-search-card,
body.night #divSearchPanel .jcode-sidebar-search-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-form,
#divSearchPanel .jcode-sidebar-search-form {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-input-wrapper,
#divSearchPanel .jcode-sidebar-search-input-wrapper {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput,
#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--color-text, #0f172a) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 50px !important;
    text-align: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput::placeholder {
    color: var(--color-text-muted, #94a3b8) !important;
    font-weight: 500 !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput:focus,
#divSearchPanel input#jcodeSidebarSearchInput:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-buttons,
#divSearchPanel .jcode-sidebar-search-buttons {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    flex: 0 0 46px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-search-btn,
#divSearchPanel .jcode-search-btn {
    flex: 1 1 50% !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    filter: none !important;
    transition: all 0.2s ease !important;
}

.single-news-container #divSearchPanel .jcode-search-btn span.iconfont,
#divSearchPanel .jcode-search-btn span.iconfont {
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site,
#divSearchPanel .jcode-search-btn.btn-site {
    background: #3b82f6 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site:hover,
#divSearchPanel .jcode-search-btn.btn-site:hover {
    background: #2563eb !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web,
#divSearchPanel .jcode-search-btn.btn-web {
    background: #60a5fa !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:hover,
#divSearchPanel .jcode-search-btn.btn-web:hover {
    background: #3b82f6 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:active,
.single-news-container #divSearchPanel .jcode-search-btn.btn-site:active,
#divSearchPanel .jcode-search-btn.btn-web:active,
#divSearchPanel .jcode-search-btn.btn-site:active {
    transform: scale(0.98) !important;
}

/* jcode source search module */
.single-news-container #divSearchPanel,
#divSearchPanel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    align-items: initial !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .sidebar-module-head,
#divSearchPanel .sidebar-module-head {
    display: none !important;
}

.single-news-container #divSearchPanel .sidebar-module-body,
#divSearchPanel .sidebar-module-body {
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-card,
#divSearchPanel .jcode-sidebar-search-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-form,
#divSearchPanel .jcode-sidebar-search-form {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-input-wrapper,
#divSearchPanel .jcode-sidebar-search-input-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput,
#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--color-text, #0f172a) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 50px !important;
    text-align: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput::placeholder {
    color: var(--color-text-muted, #94a3b8) !important;
    font-weight: 500 !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput:focus,
#divSearchPanel input#jcodeSidebarSearchInput:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-buttons,
#divSearchPanel .jcode-sidebar-search-buttons {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    flex: 0 0 46px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-search-btn,
#divSearchPanel .jcode-search-btn {
    flex: 1 1 50% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.single-news-container #divSearchPanel .jcode-search-btn span.iconfont,
#divSearchPanel .jcode-search-btn span.iconfont {
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site,
#divSearchPanel .jcode-search-btn.btn-site {
    background: #3b82f6 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site:hover,
#divSearchPanel .jcode-search-btn.btn-site:hover {
    background: #2563eb !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web,
#divSearchPanel .jcode-search-btn.btn-web {
    background: #60a5fa !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:hover,
#divSearchPanel .jcode-search-btn.btn-web:hover {
    background: #3b82f6 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:active,
.single-news-container #divSearchPanel .jcode-search-btn.btn-site:active,
#divSearchPanel .jcode-search-btn.btn-web:active,
#divSearchPanel .jcode-search-btn.btn-site:active {
    transform: scale(0.98) !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site,
#divSearchPanel .jcode-search-btn.btn-site {
    background: #f97316 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web,
#divSearchPanel .jcode-search-btn.btn-web {
    background: #475569 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site:hover,
#divSearchPanel .jcode-search-btn.btn-site:hover {
    background: #ea580c !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web:hover,
#divSearchPanel .jcode-search-btn.btn-web:hover {
    background: #334155 !important;
}

body.night #divSearchPanel .jcode-sidebar-search-card {
    background: #ffffff !important;
    border-color: #e7edf5 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

/* jcode search exact layout: integrated input area above buttons */
.single-news-container #divSearchPanel,
#divSearchPanel {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.single-news-container #divSearchPanel .sidebar-module-body,
#divSearchPanel .sidebar-module-body {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-card,
#divSearchPanel .jcode-sidebar-search-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-form,
#divSearchPanel .jcode-sidebar-search-form {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-input-wrapper,
#divSearchPanel .jcode-sidebar-search-input-wrapper {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: none !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput,
#divSearchPanel input#jcodeSidebarSearchInput {
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 7px !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: var(--color-text, #0f172a) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 50px !important;
    text-align: center !important;
    box-shadow: none !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput::placeholder,
#divSearchPanel input#jcodeSidebarSearchInput::placeholder {
    color: var(--color-text-muted, #94a3b8) !important;
    font-weight: 500 !important;
}

.single-news-container #divSearchPanel input#jcodeSidebarSearchInput:focus,
#divSearchPanel input#jcodeSidebarSearchInput:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.single-news-container #divSearchPanel .jcode-sidebar-search-buttons,
#divSearchPanel .jcode-sidebar-search-buttons {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 46px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.single-news-container #divSearchPanel .jcode-search-btn,
#divSearchPanel .jcode-search-btn {
    flex: 1 1 50% !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-site,
#divSearchPanel .jcode-search-btn.btn-site {
    background: #f97316 !important;
    border-radius: 0 0 0 6px !important;
}

.single-news-container #divSearchPanel .jcode-search-btn.btn-web,
#divSearchPanel .jcode-search-btn.btn-web {
    background: #475569 !important;
    border-radius: 0 0 6px 0 !important;
}

.single-news-container #divSearchPanel .jcode-search-btn .iconfont,
#divSearchPanel .jcode-search-btn .iconfont {
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Search Title Beautification & Breadcrumb layout */
.tf-search-sec-title {
    margin: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--modern-slate-100, #f1f5f9) !important;
    padding: 0 0 8px 0 !important;
    background: transparent !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.tf-search-sec-title .tf-search-title-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--modern-slate-800, #1e293b) !important;
}
body.night .tf-search-sec-title {
    border-bottom-color: var(--modern-slate-700, #334155) !important;
}
body.night .tf-search-sec-title .tf-search-title-text {
    color: var(--modern-slate-200, #e2e8f0) !important;
}

.search-summary-right {
    font-size: 14px !important;
    color: var(--modern-slate-500, #64748b) !important;
    font-weight: 500 !important;
}
body.night .search-summary-right {
    color: var(--modern-slate-400, #94a3b8) !important;
}
@media (max-width: 576px) {
    .search-summary-right {
        display: none !important;
    }
}

/* Fix breadcrumb container pseudo-elements acting as flex items */
.breadnav .bread::before,
.breadnav .bread::after {
    display: none !important;
    content: none !important;
}

/* Starry Sky Banner Redesign */
#banner-bear {
    position: relative !important;
    overflow: hidden !important;
}

/* Static stars base layer */
.tf-space-stars-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #eee, transparent),
        radial-gradient(1.5px 1.5px at 40px 70px, #fff, transparent),
        radial-gradient(1px 1px at 50px 160px, #ddd, transparent),
        radial-gradient(2px 2px at 80px 120px, #fff, transparent),
        radial-gradient(1px 1px at 110px 210px, #ccc, transparent),
        radial-gradient(1.5px 1.5px at 150px 30px, #fff, transparent),
        radial-gradient(1px 1px at 200px 80px, #ddd, transparent),
        radial-gradient(2px 2px at 250px 190px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 300px 140px, #eee, transparent),
        radial-gradient(1px 1px at 350px 40px, #fff, transparent),
        radial-gradient(2px 2px at 400px 90px, #ddd, transparent),
        radial-gradient(1px 1px at 450px 180px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 500px 70px, #eee, transparent),
        radial-gradient(2px 2px at 550px 150px, #fff, transparent),
        radial-gradient(1px 1px at 600px 30px, #ddd, transparent),
        radial-gradient(1.5px 1.5px at 650px 110px, #fff, transparent),
        radial-gradient(1px 1px at 700px 190px, #eee, transparent),
        radial-gradient(2px 2px at 750px 80px, #fff, transparent),
        radial-gradient(1px 1px at 800px 140px, #ddd, transparent),
        radial-gradient(1.5px 1.5px at 850px 50px, #fff, transparent),
        radial-gradient(2px 2px at 900px 170px, #eee, transparent),
        radial-gradient(1px 1px at 950px 100px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 1000px 40px, #ddd, transparent),
        radial-gradient(2px 2px at 1050px 130px, #fff, transparent),
        radial-gradient(1px 1px at 1100px 90px, #eee, transparent),
        radial-gradient(1.5px 1.5px at 1150px 180px, #fff, transparent),
        radial-gradient(2px 2px at 1200px 60px, #ddd, transparent),
        radial-gradient(1px 1px at 1250px 150px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 1300px 110px, #eee, transparent),
        radial-gradient(2px 2px at 1350px 40px, #fff, transparent),
        radial-gradient(1px 1px at 1400px 170px, #ddd, transparent);
    background-repeat: repeat;
    background-size: 700px 300px;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

/* Meteor Container & Animation */
.tf-meteor-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.tf-meteor {
    position: absolute;
    top: -10%;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
                0 0 0 8px rgba(255, 255, 255, 0.05),
                0 0 12px rgba(255, 255, 255, 1);
    transform: rotate(-35deg);
    animation: tf-meteor-fall linear infinite;
    opacity: 0;
}

.tf-meteor::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes tf-meteor-fall {
    0% {
        transform: rotate(-35deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    50% {
        transform: rotate(-35deg) translateX(-400px);
        opacity: 0;
    }
    100% {
        transform: rotate(-35deg) translateX(-400px);
        opacity: 0;
    }
}

/* Generate random positions and animation attributes for meteors */
.tf-meteor:nth-child(1) { left: 30%; animation-delay: 0s; animation-duration: 6s; }
.tf-meteor:nth-child(2) { left: 45%; animation-delay: 2s; animation-duration: 8s; }
.tf-meteor:nth-child(3) { left: 60%; animation-delay: 4s; animation-duration: 7s; }
.tf-meteor:nth-child(4) { left: 75%; animation-delay: 1s; animation-duration: 9s; }
.tf-meteor:nth-child(5) { left: 90%; animation-delay: 5s; animation-duration: 5s; }
.tf-meteor:nth-child(6) { left: 15%; animation-delay: 3s; animation-duration: 10s; }
.tf-meteor:nth-child(7) { left: 50%; animation-delay: 6s; animation-duration: 6.5s; }
.tf-meteor:nth-child(8) { left: 80%; animation-delay: 2.5s; animation-duration: 7.5s; }

/* Sparkling Stars Container & Animation */
.tf-sparkle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.tf-sparkle-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    animation: tf-sparkle-glow ease-in-out infinite alternate;
}

@keyframes tf-sparkle-glow {
    0% {
        opacity: 0.1;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 255, 255, 0.4);
    }
}

/* ==========================================================================
   Desktop Article List Layout (.article-list)
   ========================================================================== */
.article-list {
    position: relative;
    margin-bottom: 0;
    padding: 12px 0;
    border-bottom: none;
    display: flex;
    align-items: flex-start;
}
.article-list + .article-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--modern-slate-200, #e2e8f0);
}
body.night .article-list + .article-list::before {
    background: rgba(255, 255, 255, 0.08);
}

.article-list .figure {
    width: 150px;
    height: 100px;
    margin-right: 12px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.article-list .figure a.thumbnail {
    display: block;
    width: 100%;
    height: 100%;
}

.article-list .figure img.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.article-list:hover .figure img.img-cover {
    transform: scale(1.05);
}

.article-list .content {
    flex-grow: 1;
    min-width: 0;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.article-list .content h2.title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 12px 0;
}

.article-list .content h2.title a {
    color: var(--modern-slate-800, #1e293b);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    transition: color 0.2s ease;
}

body.night .article-list .content h2.title a {
    color: var(--modern-slate-200, #cbd5e1);
}

.article-list .content h2.title a:hover {
    color: var(--main-color, #ff3636);
}

.article-list .content p.data {
    margin: 0;
    font-size: 12px;
    color: var(--modern-slate-400, #94a3b8);
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-list .content p.data a,
.article-list .content p.data span,
.article-list .content p.data time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--modern-slate-500, #64748b);
    text-decoration: none;
}

body.night .article-list .content p.data a,
body.night .article-list .content p.data span,
body.night .article-list .content p.data time {
    color: var(--modern-slate-400, #94a3b8);
}

.article-list .content p.data a:hover {
    color: var(--main-color, #ff3636);
}

.article-list .content p.data i {
    font-size: 13px;
}


/* ==========================================
   TabFlow Premium Theme Mobile (max-width: 768px) Optimized Overrides
   ========================================== */
@media (max-width: 768px) {
    /* 1. 防卡片悬挂错位：卡片容器 Row 强制采用 Flexbox 并等高 */
    .part.index-part > .items > .row,
    .list_items > .row,
    .list_items .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .part.index-part > .items > .row > .colpad,
    .list_items > .row > .colpad,
    .list_items .row > .colpad {
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 12px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .part.index-part > .items > .row > .colpad .inner_item,
    .list_items > .row > .colpad .inner_item,
    .list_items .row > .colpad .inner_item {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        margin-bottom: 0 !important;
        min-width: 0 !important;
    }
    
    /* 采用高精度 Grid 布局重新编排手机端导航网址卡片内的左图右文结构，防止文字受挤压并彻底对齐 */
    .part.index-part > .items > .row > .colpad .inner_item .a,
    .list_items > .row > .colpad .inner_item .a,
    .list_items .row > .colpad .inner_item .a {
        display: grid !important;
        grid-template-columns: 36px 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 8px !important;
        row-gap: 2px !important;
        align-items: center !important;
        padding: 12px 10px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
    }

    .part .item.inner_item .a img,
    .list_items .item.inner_item .a img,
    .part.index-part > .items > .row > .colpad .inner_item .a img,
    .list_items > .row > .colpad .inner_item .a img,
    .list_items .row > .colpad .inner_item .a img {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        width: 36px !important;
        height: 36px !important;
        float: none !important;
        margin: 0 !important;
        border-radius: 6px !important;
        object-fit: cover !important;
    }
    
    /* 文章资讯风格卡片等高与防撑宽 */
    .part.index-part > .items > .row > .colpad .art-item,
    .list_items > .row > .colpad .art-item,
    .list_items .row > .colpad .art-item {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        margin-bottom: 0 !important;
        min-width: 0 !important;
    }
    
    .part.index-part > .items > .row > .colpad .art-item .art-a,
    .list_items > .row > .colpad .art-item .art-a,
    .list_items .row > .colpad .art-item .art-a {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .part.index-part > .items > .row > .colpad .art-item p,
    .list_items > .row > .colpad .art-item p,
    .list_items .row > .colpad .art-item p {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* 2. 统一移动端两侧安全边距与极致宽度限制 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .part,
    .part.index-part {
        margin-bottom: 12px !important;
    }
    
    /* 3. 侧边栏折叠后与主内容的上下外边距 */
    .content-sidebar .sidebar-module,
    .content-sidebar div[id^="div"] {
        margin-top: 12px !important;
        margin-bottom: 0 !important;
    }
    
    /* 4. 留言本和评论区域比例间距 (12px) */
    .guestbook-container,
    #comments {
        margin-top: 12px !important;
    }
    
    .commentpost {
        margin-top: 12px !important;
    }

    .jcode-comment-item {
        margin-bottom: 12px !important;
    }

    /* 5. 调整极窄屏下的 Hero 看板及大图轮播字号与布局，防字溢出 */
    #banner-bear, #banner-box, .diybg, .swiper-container {
        height: auto !important;
        min-height: 230px !important;
        padding: 32px 12px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    #banner-bear p.typing,
    .diybg p.typing,
    .swiper-container p.typing,
    .typing {
        font-size: 15px !important;
        line-height: 1.4 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: break-all !important;
    }
    
    /* 搜索框在移动端的宽度与间距 */
    #banner-bear .search-box,
    .diybg .search-box,
    .primary-menus {
        width: calc(100% - 24px) !important;
        max-width: 450px !important;
        margin: 0 auto !important;
    }

    /* 6. 首页顶部红绿蓝橙四大推荐卡片一排两列与排版去溢出 */
    .top_model {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin: 0 0 12px 0 !important;
    }
    
    .top_model .part {
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
        margin-bottom: 0 !important;
    }
    
    /* 缩小顶部推荐卡片的标题栏尺寸，使其在手机上更精致轻盈，避免占据过高空间 */
    .top_model .part .tt {
        padding: 6px 12px !important;
    }
    .top_model .part .tt strong {
        font-size: 13px !important;
    }
    .top_model .part .tt a {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
    
    .top_model .part .topitems {
        padding: 12px 14px !important;
    }
    
    .top_model .part .rowtop {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .top_model .part .top_row {
        width: 100% !important;
        float: none !important;
        border: none !important;
        padding: 0 !important;
    }
    
    .top_model .item {
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .top_model .item .topa {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 14px !important;
        background: var(--modern-slate-50) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        border-radius: 6px !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }
    
    .top_model .item .topa:hover {
        background: var(--modern-slate-100) !important;
        border-color: var(--modern-slate-300) !important;
    }
    
    body.night .top_model .item .topa {
        background: rgba(30, 41, 59, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
    }
    
    body.night .top_model .item .topa:hover {
        background: rgba(30, 41, 59, 0.7) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .top_model .item .topa h3 {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--modern-slate-700) !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important; /* 解决 flex 容器下 Ellipsis 宽度溢出的经典问题 */
        flex: 1 1 auto !important;
        padding-right: 10px !important;
        line-height: 1.4 !important;
    }
    
    body.night .top_model .item .topa h3 {
        color: var(--modern-slate-300) !important;
    }
    
    .top_model .item .topa::after {
        content: "\e668" !important;
        font-family: "iconfont" !important;
        font-size: 10px !important;
        color: var(--modern-slate-400) !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }
    
    .top_model .item .topa:hover::after {
        transform: translateX(2px) !important;
        color: var(--main-color, #ff3636) !important;
    }

    /* 7. 首页网址导航卡片（.inner_item）高度与文字硬限高防挂钩 */
    /* 7. 首页网址导航卡片（.inner_item）文字与底部直达按钮优化 */
    .part .item.inner_item .a h3,
    .list_items .item.inner_item .a h3,
    .part.index-part .inner_item h3,
    .list_items .inner_item h3 {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        height: 18px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
        margin-left: 0 !important; /* 彻底清除 PC 端继承的 58px margin-left */
        padding: 0 !important;
        min-width: 0 !important;
        font-weight: 600 !important;
        color: var(--modern-slate-800) !important;
    }
    body.night .part .item.inner_item .a h3,
    body.night .list_items .item.inner_item .a h3,
    body.night .part.index-part .inner_item h3,
    body.night .list_items .inner_item h3 {
        color: var(--modern-slate-200) !important;
    }
    
    .part .item.inner_item .a p,
    .list_items .item.inner_item .a p,
    .part.index-part .inner_item p,
    .list_items .inner_item p {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        height: 15px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
        margin-left: 0 !important; /* 彻底清除 PC 端继承的 58px margin-left */
        padding: 0 !important;
        color: var(--modern-slate-400) !important;
        min-width: 0 !important;
    }

    .part.index-part .inner_item .article_btm,
    .list_items .inner_item .article_btm {
        border-top: 1px solid var(--modern-slate-50) !important;
        padding: 6px 10px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: transparent !important;
    }
    body.night .part.index-part .inner_item .article_btm,
    body.night .list_items .inner_item .article_btm {
        border-top-color: rgba(255, 255, 255, 0.05) !important;
    }

    .part.index-part .inner_item .link,
    .list_items .inner_item .link {
        float: none !important;
        width: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
        background: var(--modern-slate-100) !important;
        color: var(--modern-slate-600) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    body.night .part.index-part .inner_item .link,
    body.night .list_items .inner_item .link {
        background: rgba(255, 255, 255, 0.08) !important;
        color: var(--modern-slate-300) !important;
    }
    .part.index-part .inner_item .link i,
    .list_items .inner_item .link i {
        font-size: 10px !important;
    }
    
    /* 8. 首页资讯文章卡片（.art-item）封面图等比例缩放与文字限高 */
    .part .art-item .art-a img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .part .art-item h3 {
        font-size: 13px !important;
        line-height: 1.4 !important;
        height: 36px !important;
        overflow: hidden !important;
        margin: 8px 10px 10px 10px !important;
        font-weight: 600 !important;
        min-width: 0 !important;
    }
    
    .part .art-item p,
    .part.index-part > .items > .row > .colpad .art-item p,
    .list_items > .row > .colpad .art-item p,
    .list_items .row > .colpad .art-item p {
        display: none !important;
    }

    /* 9. 顶栏移动端极致对齐与 Hamburger 菜单按钮定位找回 */
    .header {
        display: flex !important;
        align-items: center !important;
        height: 56px !important;
    }

    .header-bar {
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .header-left {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 0 !important;
    }
    
    .header-tools {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    .header-tool {
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #m-btn {
        display: inline-flex !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 10. 移动端侧边栏高级毛玻璃配色及去重双箭头优化 */
    .m-nav {
        width: 290px !important;
        max-width: 80% !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -290px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 10px 0 40px rgba(15, 23, 42, 0.08) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
    }
    
    body.open .m-nav {
        left: 0px !important;
    }
    
    body.night .m-nav {
        background: rgba(15, 23, 42, 0.92) !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.4) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .m-nav ul {
        padding: 24px 0 !important;
    }

    .m-nav li a {
        padding: 14px 24px !important;
        line-height: 1.5 !important;
        color: var(--modern-slate-700) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: all 0.2s ease !important;
    }

    .m-nav li a:hover,
    .m-nav li.active > a {
        background: rgba(0, 0, 0, 0.03) !important;
        color: var(--main-color, #ff3636) !important;
    }

    body.night .m-nav li a {
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    body.night .m-nav li a:hover,
    body.night .m-nav li.active > a {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }

    .m-nav ul li>ul {
        background: rgba(0, 0, 0, 0.02) !important;
        padding: 4px 0 !important;
    }

    body.night .m-nav ul li>ul {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    .m-nav ul li>ul li a {
        padding: 10px 24px 10px 40px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: var(--modern-slate-500) !important;
    }

    body.night .m-nav ul li>ul li a {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .m-nav .nav-link-caret,
    .m-nav .nav-submenu-caret {
        display: none !important;
    }

    .m-nav-toggle {
        right: 16px !important;
        top: 0 !important;
        width: 36px !important;
        height: 50px !important;
        line-height: 50px !important;
        color: var(--modern-slate-400) !important;
        border-radius: 6px !important;
        transition: all 0.25s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .m-nav-toggle:hover {
        background: rgba(0, 0, 0, 0.05) !important;
        color: var(--modern-slate-800) !important;
    }

    .m-nav-toggle.open {
        transform: rotate(180deg) !important;
        color: var(--main-color, #ff3636) !important;
    }

    body.night .m-nav-toggle {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.night .m-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    body.night .m-nav-toggle.open {
        color: #ffffff !important;
    }

    #m-nav #m-btn {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        margin: 32px auto 24px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: 50% !important;
        color: var(--modern-slate-500) !important;
        font-size: 16px !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }

    #m-nav #m-btn i {
        font-size: 15px !important;
        color: inherit !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    #m-nav #m-btn:hover,
    #m-nav #m-btn:active {
        background: var(--main-color, #ff3636) !important;
        border-color: var(--main-color, #ff3636) !important;
        color: #ffffff !important;
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(255, 54, 54, 0.3) !important;
    }

    body.night #m-nav #m-btn {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    body.night #m-nav #m-btn:hover,
    body.night #m-nav #m-btn:active {
        background: var(--main-color, #ff3636) !important;
        border-color: var(--main-color, #ff3636) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 20px rgba(255, 54, 54, 0.4) !important;
    }

    /* 11. 移动端 Banner 搜索框及滑动手势 Tab 栏样式重构 */
    .primary-menus {
        width: calc(100% - 24px) !important;
        max-width: 450px !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 36px auto 0 !important; /* 放大收录标语和搜索框部分的间距，且水平居中 */
    }

    .primary-menus ul.selects {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 0 4px !important;
        scrollbar-width: none !important;
    }
    
    .primary-menus ul.selects::-webkit-scrollbar {
        display: none !important;
    }

    .primary-menus ul.selects li {
        flex-shrink: 0 !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: none !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .primary-menus ul.selects li.current {
        background: #ffffff !important;
        color: var(--modern-slate-800) !important;
        border-color: #ffffff !important;
    }

    body.night .primary-menus ul.selects li.current {
        background: var(--modern-slate-800) !important;
        color: #ffffff !important;
        border-color: var(--modern-slate-700) !important;
    }

    .primary-menus .cont {
        padding: 4px !important;
        border-radius: 6px !important;
    }

    .primary-menus .left-cont input {
        height: 42px !important;
        line-height: 20px !important;
        font-size: 13px !important;
        padding: 11px 90px 11px 16px !important;
        border-radius: 4px !important;
    }

    .primary-menus .left-cont button {
        height: 34px !important;
        line-height: 34px !important;
        margin: 4px !important;
        padding: 0 12px !important;
        width: auto !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
    }

    .typing {
        font-size: 15px !important;
        line-height: 1.4 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        white-space: normal !important;
        word-break: break-all !important;
        text-align: center !important;
        padding: 0 16px !important;
    }

    /* 12. 分页器 (Pagebar) 移动端轻量化与防溢出折行 */
    .pagebar {
        margin: 20px 0 !important;
    }
    .pagebar .pagination {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
        overflow: hidden !important;
    }
    .pagebar .page-link {
        min-width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }

    /* 13. 精简传统文章列表条 (.article-list) 移动端版式 */
    .article-list {
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    body.night .article-list {
        border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    }
    .article-list .figure {
        float: none !important;
        width: 100px !important;
        height: 68px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
    .article-list .content {
        flex-grow: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        height: auto !important;
    }
    .article-list .content h2.title {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        margin-top: 0 !important;
    }
    .article-list .content h2.title a {
        color: var(--modern-slate-800) !important;
    }
    body.night .article-list .content h2.title a {
        color: var(--modern-slate-200) !important;
    }
    .article-list .content p.intro {
        display: none !important; /* 隐藏长描述 */
    }
    .article-list .content p.data {
        font-size: 11px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 6px !important;
    }
    .article-list .content p.data a,
    .article-list .content p.data time,
    .article-list .content p.data span {
        margin-right: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    body.night .article-list .content p.data a,
    body.night .article-list .content p.data time,
    body.night .article-list .content p.data span {
        color: var(--modern-slate-400) !important;
    }

    /* 14. 详情页相似推荐网址卡片单列化 (.related-flex-row) */
    .related-flex-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .related-flex-row > .colpad {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 15. 消除列表页行负外边距对 12px 栅格的冲击 */
    .part.index-part > .items > .row,
    .list_items > .row,
    .list_items .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 16. 面包屑导航 (.breadnav) 移动端精致化 */
    .breadnav {
        margin-top: 10px !important;
        padding: 6px 0 !important;
    }
    .breadnav .container.bread {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 12px !important;
    }
    .breadnav .container.bread a {
        font-size: 12px !important;
    }

    /* 17. 留言本单页卡片内边距微调 */
    .post-page-card {
        padding: 14px 16px !important;
    }
}

@media (max-width: 480px) {
    /* 极窄屏（如 SE）微调 */
    #banner-bear p.typing {
        font-size: 14px !important;
    }
    
    .top_model .part .tt strong {
        font-size: 14px !important;
    }
}

/* Custom Category Tag for Article Cards */
.part .item.art-item .art-category-tag {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2 !important; /* Float above the global h3 a::after click overlay */
    background: rgba(15, 23, 42, 0.6) !important; /* Slate 900 semi-transparent */
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important; /* Ensure it is clickable */
}

.part .item.art-item .art-category-tag:hover {
    background: var(--main-color, #ff3636) !important;
    transform: scale(1.05) !important;
}

body.night .part .item.art-item .art-category-tag {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.night .part .item.art-item .art-category-tag:hover {
    background: var(--main-color, #ff3636) !important;
}

/* Homepage Quick Nav Grid Layout (Desktop View) */
@media (min-width: 992px) {
    .row.same-height {
        display: flex !important;
        gap: 12px !important;
    }
    .row.same-height .quick-nav {
        flex: 0 0 130px !important;
        width: 130px !important;
        max-width: 130px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .row.same-height .same-height-r {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}