/* ==========================================================================
   public/css/theme.css - 盐选美学 · 满帧 GPU 硬件加速与纯净主题规范 (极速流畅版)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 核心物理曲线 (Apple 原生丝滑阻尼)
   -------------------------------------------------------------------------- */
:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* --------------------------------------------------------------------------
   1. 全局渲染重置：其他所有页面彻底隐藏滚动条 (无三角、无底色、无条)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 彻底抹除全局所有上下三角箭头步进按钮 */
::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 全局抹除所有页面的轨道背景底色 */
::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}

/* 默认全局所有页面（首页、中台资产、列表等）：彻底隐藏滚动条 */
html, body, * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html {
    scrollbar-gutter: stable !important;
    overflow-y: scroll !important;
}

body:not(.overflow-hidden) {
    overflow-y: auto;
    padding-top: 74px !important;
}

body.overflow-hidden {
    overflow: hidden !important;
    touch-action: none !important;
}

/* 全站原生滚动条彻底隐藏 */
::-webkit-scrollbar, 
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

textarea,
textarea:focus,
textarea:focus-visible,
textarea:active,
input,
input:focus,
input:focus-visible,
input:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

#lib-current-crumb,
.lib-breadcrumb-text {
    display: none !important;
}

/* 悬浮滚动条 */
.lib-hover-scroll {
    overflow-y: hidden !important;
    transition: overflow-y 0.3s ease !important;
}
.lib-hover-scroll:hover {
    overflow-y: auto !important;
}
.lib-hover-scroll::-webkit-scrollbar {
    width: 5px !important;
    display: block !important;
    background: transparent !important;
}
.lib-hover-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 9999px !important;
}
.dark .lib-hover-scroll::-webkit-scrollbar-thumb,
body.dark .lib-hover-scroll::-webkit-scrollbar-thumb,
body.dark-theme .lib-hover-scroll::-webkit-scrollbar-thumb,
html.dark .lib-hover-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

#picker-grid-container {
    transition: opacity 0.25s ease !important;
}
#picker-grid-container > div {
    animation: gentleFadeIn 0.3s ease both;
}
@keyframes gentleFadeIn {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 列表模式重置 */
.lib-mode-list #grid-view-container,
#view-quick.lib-mode-list #grid-view-container,
#grid-view-container.hidden,
#grid-view-container[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lib-mode-grid #list-view-container,
#view-quick.lib-mode-grid #list-view-container,
#list-view-container.hidden,
#list-view-container[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#list-view-container {
    padding: 0 20px 20px 0 !important;
    margin: 0 !important;
    border-top: none !important;
    border: none !important;
}

#list-view-container table,
#list-view-container thead,
#list-view-container tr:first-child {
    border-top: none !important;
}

#list-tbody-container tr:first-child td {
    border-top: none !important;
}

/* --------------------------------------------------------------------------
   2. 顶栏吸顶固定规范
   -------------------------------------------------------------------------- */
#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    z-index: 90 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, opacity 0.2s ease, visibility 0.2s ease !important;
}

.dark #main-header,
body.dark #main-header,
body.dark-theme #main-header,
html.dark #main-header {
    background-color: rgba(20, 20, 22, 0.8) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.overflow-hidden #main-header,
body:has(#view-detail.modal-active) #main-header,
body:has(#quick-read-overlay.pointer-events-auto) #main-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.header-nav-center {
    position: absolute;
    left: 50%;
    top: 50% !important;
    transform: translate3d(-50%, -50%, 0) !important;
    will-change: transform;
}

.apple-segmented-capsule {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 3px !important;
    background: #f5f5f7;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    user-select: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease;
}

.dark .apple-segmented-capsule,
body.dark .apple-segmented-capsule,
body.dark-theme .apple-segmented-capsule,
.dark-theme .apple-segmented-capsule,
html.dark .apple-segmented-capsule {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.apple-segmented-item {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    color: #8e8e93 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.apple-segmented-item:hover {
    color: #1d1d1f !important;
}
.dark .apple-segmented-item:hover,
body.dark .apple-segmented-item:hover,
body.dark-theme .apple-segmented-item:hover,
html.dark .apple-segmented-item:hover {
    color: #ffffff !important;
}

.apple-segmented-item.active {
    background: #ffffff !important;
    color: #1d1d1f !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.dark .apple-segmented-item.active,
body.dark .apple-segmented-item.active,
body.dark-theme .apple-segmented-item.active,
html.dark .apple-segmented-item.active {
    background: #38383a !important;
    color: #ffffff !important;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.2) !important;
}

.nav-manual-btn,
#nav-btn-manual {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 18px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background-color: #1d1d1f !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease !important;
}

.nav-manual-btn:hover,
#nav-btn-manual:hover {
    background-color: #000000 !important;
}

.dark .nav-manual-btn,
body.dark .nav-manual-btn,
body.dark-theme .nav-manual-btn,
body.dark-theme #nav-btn-manual,
html.dark .nav-manual-btn,
html.dark #nav-btn-manual {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.dark .nav-manual-btn:hover,
body.dark .nav-manual-btn:hover,
body.dark-theme .nav-manual-btn:hover,
body.dark-theme #nav-btn-manual:hover,
html.dark .nav-manual-btn:hover,
html.dark #nav-btn-manual:hover {
    background-color: #3a3a3c !important;
}

/* --------------------------------------------------------------------------
   3. 搜索栏规范
   -------------------------------------------------------------------------- */
#home-search-input,
#engine-search-input,
#lib-search-input,
input[type="text"].search-input-box {
    background-color: #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #1d1d1f !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
}

.dark #home-search-input,
body.dark #home-search-input,
body.dark-theme #home-search-input,
body.dark-theme #engine-search-input,
body.dark-theme #lib-search-input,
html.dark #home-search-input,
html.dark #engine-search-input,
html.dark #lib-search-input {
    background-color: #222225 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.dark #home-search-input::placeholder,
body.dark #home-search-input::placeholder,
body.dark-theme #home-search-input::placeholder,
body.dark-theme #engine-search-input::placeholder,
body.dark-theme #lib-search-input::placeholder,
html.dark #home-search-input::placeholder,
html.dark #engine-search-input::placeholder,
html.dark #lib-search-input::placeholder {
    color: #8e8e93 !important;
}

#home-search-container,
#engine-search-container,
#search-box-wrapper,
#banner-wrapper,
#banner-real-content,
#banner-skeleton-wrapper,
.search-section-divider,
div:has(> #home-search-input),
div:has(> #engine-search-input) {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   4. 分类筛选器导航
   -------------------------------------------------------------------------- */
#design-filter-nav,
#engine-filter-nav,
#engine-filter-container,
#note-sidebar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    border: none !important;
    padding: 0 !important;
}

#note-sidebar-nav button {
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
    background-color: #f5f5f7 !important;
    color: #636366 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

#note-sidebar-nav button:hover {
    background-color: #e5e5ea !important;
    color: #1d1d1f !important;
}

#note-sidebar-nav button.active {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.dark #note-sidebar-nav button,
body.dark #note-sidebar-nav button,
body.dark-theme #note-sidebar-nav button,
html.dark #note-sidebar-nav button {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #aeaeb2 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

.dark #note-sidebar-nav button:hover,
body.dark #note-sidebar-nav button:hover,
body.dark-theme #note-sidebar-nav button:hover,
html.dark #note-sidebar-nav button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.dark #note-sidebar-nav button.active,
body.dark #note-sidebar-nav button.active,
body.dark-theme #note-sidebar-nav button.active,
html.dark #note-sidebar-nav button.active {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

#design-filter-nav button,
#engine-filter-nav button {
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border: 1px solid transparent !important;
    outline: none !important;
    background-color: transparent !important;
    color: #8e8e93 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

#design-filter-nav button:hover,
#engine-filter-nav button:hover {
    background-color: transparent !important;
    color: #1d1d1f !important;
}

#design-filter-nav button.active,
#engine-filter-nav button.active {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.dark #design-filter-nav button,
body.dark #design-filter-nav button,
body.dark-theme #design-filter-nav button,
body.dark-theme #engine-filter-nav button,
html.dark #design-filter-nav button,
html.dark #engine-filter-nav button {
    background-color: transparent !important;
    color: #8e8e93 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.dark #design-filter-nav button:hover,
body.dark #design-filter-nav button:hover,
body.dark-theme #design-filter-nav button:hover,
body.dark-theme #engine-filter-nav button:hover,
html.dark #design-filter-nav button:hover,
html.dark #engine-filter-nav button:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}

.dark #design-filter-nav button.active,
body.dark #design-filter-nav button.active,
body.dark-theme #design-filter-nav button.active,
body.dark-theme #engine-filter-nav button.active,
html.dark #design-filter-nav button.active,
html.dark #engine-filter-nav button.active {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* --------------------------------------------------------------------------
   5. 小圆角方圆胶囊规范 与 独立方圆按钮
   -------------------------------------------------------------------------- */
.apple-squircle-capsule,
.lib-squircle-capsule {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    width: fit-content !important;
    max-width: fit-content !important;
    padding: 2px !important;
    background: #f0f0f2 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    user-select: none !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease;
}

.dark .apple-squircle-capsule,
.dark .lib-squircle-capsule,
body.dark .apple-squircle-capsule,
body.dark .lib-squircle-capsule,
body.dark-theme .apple-squircle-capsule,
body.dark-theme .lib-squircle-capsule,
html.dark .apple-squircle-capsule,
html.dark .lib-squircle-capsule {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.apple-squircle-item,
.lib-squircle-item {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #8e8e93 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

.apple-squircle-item:hover,
.lib-squircle-item:hover {
    color: #1d1d1f !important;
}
.dark .apple-squircle-item:hover,
.dark .lib-squircle-item:hover,
body.dark .apple-squircle-item:hover,
body.dark-theme .apple-squircle-item:hover,
html.dark .apple-squircle-item:hover {
    color: #ffffff !important;
}

.apple-squircle-item.active,
.lib-squircle-item.active {
    background: #ffffff !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.06), 0 0.5px 1px rgba(0, 0, 0, 0.04) !important;
}

.dark .apple-squircle-item.active,
.dark .lib-squircle-item.active,
body.dark .apple-squircle-item.active,
body.dark-theme .apple-squircle-item.active,
html.dark .apple-squircle-item.active {
    background: #38383a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.apple-squircle-btn,
.lib-squircle-btn,
.quick-read-header-btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    background: #f0f0f2 !important;
    color: #636366 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

.apple-squircle-btn:hover,
.lib-squircle-btn:hover,
.quick-read-header-btn:hover {
    background: #e5e5ea !important;
    color: #1d1d1f !important;
}

.dark .apple-squircle-btn,
.dark .lib-squircle-btn,
body.dark .apple-squircle-btn,
body.dark .lib-squircle-btn,
body.dark-theme .apple-squircle-btn,
body.dark-theme .lib-squircle-btn,
html.dark .apple-squircle-btn,
body.dark-theme .quick-read-header-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #a1a1a6 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark .apple-squircle-btn:hover,
.dark .lib-squircle-btn:hover,
html.dark .apple-squircle-btn:hover,
body.dark-theme .quick-read-header-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.apple-squircle-btn.active,
.lib-squircle-btn.active {
    background: #ffffff !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.dark .apple-squircle-btn.active,
.dark .lib-squircle-btn.active,
body.dark .apple-squircle-btn.active,
html.dark .apple-squircle-btn.active {
    background: #38383a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.3) !important;
}

.apple-squircle-btn-primary {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    outline: none !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

.apple-squircle-btn-primary:hover {
    background: #000000 !important;
}

.dark .apple-squircle-btn-primary,
body.dark .apple-squircle-btn-primary,
body.dark-theme .apple-squircle-btn-primary,
html.dark .apple-squircle-btn-primary {
    background: #ffffff !important;
    color: #141416 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dark .apple-squircle-btn-primary:hover,
body.dark .apple-squircle-btn-primary:hover,
body.dark-theme .apple-squircle-btn-primary:hover,
html.dark .apple-squircle-btn-primary:hover {
    background: #f0f0f2 !important;
    color: #000000 !important;
}

.ai-header-tab {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding-bottom: 2px !important;
    border-bottom: 2px solid transparent !important;
    color: #8e8e93 !important;
    background: transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    outline: none !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

.ai-header-tab:hover {
    color: #1d1d1f !important;
}
.dark .ai-header-tab:hover,
body.dark .ai-header-tab:hover,
body.dark-theme .ai-header-tab:hover,
html.dark .ai-header-tab:hover {
    color: #ffffff !important;
}

.ai-header-tab.active {
    color: #1d1d1f !important;
    border-bottom-color: #1d1d1f !important;
}
.dark .ai-header-tab.active,
body.dark .ai-header-tab.active,
body.dark-theme .ai-header-tab.active,
html.dark .ai-header-tab.active {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

#detail-tag-design,
.quick-read-tag {
    color: #7e22ce !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}

.dark #detail-tag-design,
body.dark #detail-tag-design,
body.dark-theme #detail-tag-design,
body.dark-theme .quick-read-tag {
    color: #c084fc !important;
}

.quick-read-title {
    margin-top: 0px !important;
    margin-bottom: 12px !important;
    line-height: 1.32 !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
}
.dark .quick-read-title,
body.dark .quick-read-title,
body.dark-theme .quick-read-title {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6. 详情页 Modal 与 8px 悬浮可拖拽自适应滑块规范
   -------------------------------------------------------------------------- */
#view-detail {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    transition: opacity 0.35s var(--ease-apple), visibility 0.35s ease !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

.dark #view-detail,
body.dark #view-detail,
body.dark-theme #view-detail,
html.dark #view-detail {
    background-color: #141416 !important;
    background: #141416 !important;
    color: #ffffff !important;
}

/* 长图顶栏 */
.detail-longimg-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    padding: 16px 20px !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dark .detail-longimg-header,
body.dark-theme .detail-longimg-header {
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.detail-longimg-header .apple-squircle-btn {
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.detail-longimg-header .apple-squircle-btn:hover {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #000000 !important;
}

.dark .detail-longimg-header .apple-squircle-btn,
body.dark-theme .detail-longimg-header .apple-squircle-btn {
    background: rgba(34, 34, 37, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.dark .detail-longimg-header .apple-squircle-btn:hover,
body.dark-theme .detail-longimg-header .apple-squircle-btn:hover {
    background: rgba(44, 44, 46, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* 屏幕最右边缘 8px 悬浮滑块 */
#detail-right-scrollbar-track {
    position: fixed !important;
    right: 3px !important;
    top: 74px !important;
    bottom: 14px !important;
    width: 8px !important;
    z-index: 45 !important;
    background: transparent !important;
    opacity: 0;
    cursor: pointer !important;
    user-select: none !important;
    touch-action: none !important;
    transition: opacity 0.25s ease !important;
}

#detail-right-scrollbar-thumb {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 9999px !important;
    background-color: rgba(0, 0, 0, 0.32) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    cursor: grab !important;
    transition: background-color 0.15s ease !important;
}

#detail-right-scrollbar-thumb:hover,
#detail-right-scrollbar-track.is-dragging #detail-right-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.65) !important;
    cursor: grabbing !important;
}

.dark #detail-right-scrollbar-thumb,
body.dark-theme #detail-right-scrollbar-thumb,
html.dark #detail-right-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.38) !important;
}

.dark #detail-right-scrollbar-thumb:hover,
.dark #detail-right-scrollbar-track.is-dragging #detail-right-scrollbar-thumb,
body.dark-theme #detail-right-scrollbar-thumb:hover,
body.dark-theme #detail-right-scrollbar-track.is-dragging #detail-right-scrollbar-thumb,
html.dark #detail-right-scrollbar-thumb:hover,
html.dark #detail-right-scrollbar-track.is-dragging #detail-right-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

#detail-mode-capsule {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 3px !important;
    background: #f5f5f7 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.dark #detail-mode-capsule,
body.dark-theme #detail-mode-capsule {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#detail-mode-capsule button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    color: #8e8e93 !important;
    transition: all 0.15s ease !important;
}

#detail-mode-capsule button.active {
    background: #ffffff !important;
    color: #1d1d1f !important;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.06), 0 0.5px 1px rgba(0, 0, 0, 0.04) !important;
}

.dark #detail-mode-capsule button.active,
body.dark-theme #detail-mode-capsule button.active {
    background: #38383a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

div:has(> #detail-media-switch-capsule),
.detail-media-nav-wrapper,
#detail-media-nav-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#detail-media-switch-capsule {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 2px !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    background: #f0f0f2 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.dark #detail-media-switch-capsule,
body.dark-theme #detail-media-switch-capsule,
html.dark #detail-media-switch-capsule {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#detail-media-switch-capsule button,
#btn-media-visual,
#btn-media-detail {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #8e8e93 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

#detail-media-switch-capsule button:hover,
#btn-media-visual:hover,
#btn-media-detail:hover {
    color: #1d1d1f !important;
    background: transparent !important;
}
.dark #detail-media-switch-capsule button:hover,
body.dark-theme #detail-media-switch-capsule button:hover {
    color: #ffffff !important;
    background: transparent !important;
}

#detail-media-switch-capsule button.active,
#btn-media-visual.active,
#btn-media-detail.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.06), 0 0.5px 1px rgba(0, 0, 0, 0.04) !important;
}

.dark #detail-media-switch-capsule button.active,
.dark #btn-media-visual.active,
.dark #btn-media-detail.active,
body.dark-theme #detail-media-switch-capsule button.active,
body.dark-theme #btn-media-visual.active,
body.dark-theme #btn-media-detail.active,
html.dark #detail-media-switch-capsule button.active {
    background: #38383a !important;
    background-color: #38383a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

#detail-media-switch-capsule.hidden,
#detail-media-switch-capsule[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.apple-tag-dropdown-menu {
    border-radius: 12px !important;
    padding: 4px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-sizing: border-box !important;
}

.dark .apple-tag-dropdown-menu,
body.dark .apple-tag-dropdown-menu,
body.dark-theme .apple-tag-dropdown-menu {
    background-color: #222225 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}

.apple-tag-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.dark .apple-tag-option,
body.dark .apple-tag-option,
body.dark-theme .apple-tag-option {
    color: #d1d1d6 !important;
}

.apple-tag-option:hover {
    background-color: #f5f5f7 !important;
    color: #000000 !important;
}

.dark .apple-tag-option:hover,
body.dark .apple-tag-option:hover,
body.dark-theme .apple-tag-option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.apple-tag-option.active {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
    font-weight: 700 !important;
}

.dark .apple-tag-option.active,
body.dark .apple-tag-option.active,
body.dark-theme .apple-tag-option.active {
    background-color: rgba(126, 34, 206, 0.25) !important;
    color: #c084fc !important;
    font-weight: 700 !important;
}

.drawer-asset-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 500px !important;
    max-width: 90vw !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.2) !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.2s ease !important;
}

.dark .drawer-asset-sidebar,
body.dark .drawer-asset-sidebar,
body.dark-theme .drawer-asset-sidebar {
    background-color: #1c1c1e !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.6) !important;
}

.drawer-header {
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fbfbfd !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.dark .drawer-header {
    background: #161618 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.drawer-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.dark .drawer-title {
    color: #ffffff !important;
}

.drawer-subtitle {
    font-size: 11px !important;
    color: #86868b !important;
}

.drawer-close-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #86868b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}
.drawer-close-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1d1d1f !important;
}
.dark .drawer-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.drawer-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.dark .drawer-toolbar {
    background: #1c1c1e !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.drawer-search-input {
    width: 100% !important;
    height: 32px !important;
    padding: 0 12px 0 32px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #f0f0f2 !important;
    color: #1d1d1f !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.dark .drawer-search-input {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.drawer-search-icon {
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    left: 10px !important;
    top: 9px !important;
    color: #86868b !important;
    pointer-events: none !important;
}

.drawer-cat-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 2px 0 !important;
}

.drawer-cat-tabs button {
    height: 26px !important;
    line-height: 24px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    background: transparent !important;
    color: #8e8e93 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.drawer-cat-tabs button:hover {
    color: #1d1d1f !important;
}
.dark .drawer-cat-tabs button:hover {
    color: #ffffff !important;
}

.drawer-cat-tabs button.active {
    background: #e5e5ea !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1d1d1f !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.dark .drawer-cat-tabs button.active,
body.dark-theme .drawer-cat-tabs button.active,
html.dark .drawer-cat-tabs button.active {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.drawer-grid-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    background: #f8f8fa !important;
}
.dark .drawer-grid-container {
    background: #141416 !important;
}

.drawer-footer {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    font-size: 11px !important;
    color: #86868b !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.dark .drawer-footer {
    background: #1c1c1e !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#detail-modal-header {
    border-bottom: none !important;
    border: none !important;
    background: #ffffff !important;
    z-index: 50 !important;
}
.dark #detail-modal-header,
body.dark #detail-modal-header,
body.dark-theme #detail-modal-header,
html.dark #detail-modal-header {
    background: #141416 !important;
    border-bottom: none !important;
    border: none !important;
}

.dark #detail-modal-header .rounded-full,
body.dark #detail-modal-header .rounded-full,
body.dark-theme #detail-modal-header .rounded-full,
html.dark #detail-modal-header .rounded-full {
    background-color: #222225 !important;
    color: #d1d1d6 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    outline: none !important;
}
.dark #detail-modal-header .rounded-full:hover,
body.dark #detail-modal-header .rounded-full:hover,
body.dark-theme #detail-modal-header .rounded-full:hover,
html.dark #detail-modal-header .rounded-full:hover {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
}

.dark #detail-content-flex-container,
body.dark #detail-content-flex-container,
body.dark-theme #detail-content-flex-container,
html.dark #detail-content-flex-container,
.dark #detail-left-column,
body.dark #detail-left-column,
body.dark-theme #detail-left-column,
html.dark #detail-left-column,
.dark #detail-markdown-column,
body.dark #detail-markdown-column,
body.dark-theme #detail-markdown-column,
html.dark #detail-markdown-column {
    background-color: #141416 !important;
    background: #141416 !important;
    color: #ffffff !important;
}

#detail-media-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dark #detail-title-design,
body.dark #detail-title-design,
body.dark-theme #detail-title-design,
html.dark #detail-title-design {
    color: #ffffff !important;
}

.dark #detail-metadata-bar,
body.dark #detail-metadata-bar,
body.dark-theme #detail-metadata-bar,
html.dark #detail-metadata-bar {
    color: #8e8e93 !important;
}
.dark #detail-metadata-bar button,
body.dark #detail-metadata-bar button,
body.dark-theme #detail-metadata-bar button,
html.dark #detail-metadata-bar button {
    color: #8e8e93 !important;
    outline: none !important;
}
.dark #detail-metadata-bar button:hover,
body.dark #detail-metadata-bar button:hover,
body.dark-theme #detail-metadata-bar button:hover,
html.dark #detail-metadata-bar button:hover {
    color: #ffffff !important;
}

.dark #view-detail header button,
body.dark #view-detail header button,
body.dark-theme #view-detail header button,
html.dark #view-detail header button {
    color: #a1a1a6 !important;
    outline: none !important;
}
.dark #view-detail header button:hover,
body.dark #view-detail header button:hover,
body.dark-theme #view-detail header button:hover,
html.dark #view-detail header button:hover {
    color: #ffffff !important;
}

.dark #detail-toc-column,
body.dark #detail-toc-column,
body.dark-theme #detail-toc-column,
html.dark #detail-toc-column {
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    background-color: #141416 !important;
}
.dark #detail-toc-column .text-xs,
body.dark #detail-toc-column .text-xs,
body.dark-theme #detail-toc-column .text-xs,
html.dark #detail-toc-column .text-xs {
    color: #8e8e93 !important;
}
.dark #toc-nav-list .toc-item,
body.dark #toc-nav-list .toc-item,
body.dark-theme #toc-nav-list .toc-item,
html.dark #toc-nav-list .toc-item {
    color: #8e8e93 !important;
    outline: none !important;
}
.dark #toc-nav-list .toc-item:hover,
.dark #toc-nav-list .toc-item.active,
body.dark #toc-nav-list .toc-item:hover,
body.dark-theme #toc-nav-list .toc-item:hover,
body.dark-theme #toc-nav-list .toc-item.active,
html.dark #toc-nav-list .toc-item:hover,
html.dark #toc-nav-list .toc-item.active {
    color: #ffffff !important;
}

.dark #ai-col-wrapper-design,
body.dark #ai-col-wrapper-design,
body.dark-theme #ai-col-wrapper-design,
html.dark #ai-col-wrapper-design {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: #1c1c1e !important;
}
.dark #ai-col-wrapper-design > div,
body.dark #ai-col-wrapper-design > div,
body.dark-theme #ai-col-wrapper-design > div,
html.dark #ai-col-wrapper-design > div,
.dark #ai-workbench-body,
body.dark #ai-workbench-body,
body.dark-theme #ai-workbench-body,
html.dark #ai-workbench-body,
.dark #ai-chat-view-container,
body.dark #ai-chat-view-container,
body.dark-theme #ai-chat-view-container,
html.dark #ai-chat-view-container,
.dark #ai-editor-view-container,
body.dark #ai-editor-view-container,
body.dark-theme #ai-editor-view-container,
html.dark #ai-editor-view-container {
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#ai-markdown-editor-textarea,
#ai-markdown-editor-textarea:focus,
#ai-markdown-editor-textarea:focus-visible,
#ai-markdown-editor-textarea:active {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    resize: none !important;
}

.dark #ai-markdown-editor-textarea,
body.dark #ai-markdown-editor-textarea,
body.dark-theme #ai-markdown-editor-textarea,
html.dark #ai-markdown-editor-textarea {
    color: #e5e5ea !important;
}
.dark #ai-markdown-editor-textarea::placeholder,
body.dark #ai-markdown-editor-textarea::placeholder,
body.dark-theme #ai-markdown-editor-textarea::placeholder,
html.dark #ai-markdown-editor-textarea::placeholder {
    color: #636366 !important;
}

.dark #ai-markdown-editor-preview,
body.dark #ai-markdown-editor-preview,
body.dark-theme #ai-markdown-editor-preview,
html.dark #ai-markdown-editor-preview {
    background-color: transparent !important;
    background: transparent !important;
    color: #e5e5ea !important;
}

.dark #ai-sandbox-iframe-design,
body.dark #ai-sandbox-iframe-design,
body.dark-theme #ai-sandbox-iframe-design {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   7. 核心卡片系统：Apple 稳态触控规范
   -------------------------------------------------------------------------- */
.note-card-panel,
.card-shadow-box {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    isolation: isolate !important;
    
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.note-card-panel {
    padding: 22px 24px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 280px !important;
}

.card-shadow-box {
    height: 400px !important;
}

.card-img-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: scale(1.001) translateZ(0);
}
.card-shadow-box:hover .card-img-media {
    transform: scale(1.03) translateZ(0) !important;
}

.card-shadow-box:hover,
.note-card-panel:hover {
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.dark .note-card-panel,
.dark .card-shadow-box,
.dark .has-media-preview,
body.dark .note-card-panel,
body.dark .card-shadow-box,
body.dark .has-media-preview,
body.dark-theme .note-card-panel,
body.dark-theme .card-shadow-box,
body.dark-theme .has-media-preview,
.dark-theme .note-card-panel,
.dark-theme .card-shadow-box,
.dark-theme .has-media-preview,
html.dark .note-card-panel,
html.dark .card-shadow-box,
html.dark .has-media-preview { 
    background-color: #222225 !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.75), 0 2px 6px -1px rgba(0, 0, 0, 0.55) !important;
    -webkit-box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.75), 0 2px 6px -1px rgba(0, 0, 0, 0.55) !important;
}

.dark .card-shadow-box,
body.dark .card-shadow-box,
body.dark-theme .card-shadow-box,
.dark-theme .card-shadow-box,
html.dark .card-shadow-box { 
    background-color: #141416 !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.75), 0 2px 6px -1px rgba(0, 0, 0, 0.55) !important;
    -webkit-box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.75), 0 2px 6px -1px rgba(0, 0, 0, 0.55) !important;
}

.dark .card-shadow-box:hover,
.dark .note-card-panel:hover,
.dark .has-media-preview:hover,
body.dark .card-shadow-box:hover,
body.dark .note-card-panel:hover,
body.dark .has-media-preview:hover,
body.dark-theme .card-shadow-box:hover,
body.dark-theme .note-card-panel:hover,
body.dark-theme .has-media-preview:hover,
.dark-theme .card-shadow-box:hover,
.dark-theme .note-card-panel:hover,
.dark-theme .has-media-preview:hover,
html.dark .card-shadow-box:hover,
html.dark .note-card-panel:hover,
html.dark .has-media-preview:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.98), 0 4px 16px rgba(0, 0, 0, 0.85) !important;
    -webkit-box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.98), 0 4px 16px rgba(0, 0, 0, 0.85) !important;
}

/* 视频与媒体预览层 */
video,
.card-video-preview,
.note-preview-video,
.note-card-media-preview {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
    border-radius: 0 !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

video:not([controls])::-webkit-media-controls,
video:not([controls])::-webkit-media-controls-enclosure,
.card-video-preview::-webkit-media-controls,
.note-preview-video::-webkit-media-controls {
    display: none !important;
}

.note-card-media-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background-color: transparent !important;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.note-card-panel:hover .note-card-media-preview {
    opacity: 1 !important;
}

.note-preview-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 1 !important;
}

.note-preview-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 2 !important;
    opacity: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.note-card-panel:hover .note-preview-video {
    opacity: 1 !important;
}

.note-preview-black-mask {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.dark .note-card-panel h3,
.dark .note-card-panel .card-heading-text,
.dark .note-card-panel:hover h3,
.dark .note-card-panel:hover .card-heading-text,
body.dark .note-card-panel h3,
body.dark .note-card-panel .card-heading-text,
body.dark .note-card-panel:hover h3,
body.dark .note-card-panel:hover .card-heading-text,
body.dark-theme .note-card-panel h3,
body.dark-theme .note-card-panel .card-heading-text,
body.dark-theme .note-card-panel:hover h3,
body.dark-theme .note-card-panel:hover .card-heading-text,
html.dark .note-card-panel h3,
html.dark .note-card-panel .card-heading-text,
html.dark .note-card-panel:hover h3,
html.dark .note-card-panel:hover .card-heading-text {
    color: #ffffff !important;
}

.dark .note-card-panel p,
.dark .note-card-panel .card-desc-text,
.dark .note-card-panel:hover p,
.dark .note-card-panel:hover .card-desc-text,
body.dark .note-card-panel p,
body.dark .note-card-panel .card-desc-text,
body.dark .note-card-panel:hover p,
body.dark .note-card-panel:hover .card-desc-text,
body.dark-theme .note-card-panel p,
body.dark-theme .note-card-panel .card-desc-text,
body.dark-theme .note-card-panel:hover p,
body.dark-theme .note-card-panel:hover .card-desc-text,
html.dark .note-card-panel p,
html.dark .note-card-panel .card-desc-text,
html.dark .note-card-panel:hover p,
html.dark .note-card-panel:hover .card-desc-text {
    color: #d1d1d6 !important;
}

.note-card-panel h3,
.note-card-panel .card-heading-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
    color: #1d1d1f !important;
    font-weight: 700 !important;
}

.note-card-panel p,
.note-card-panel .card-desc-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
    color: #636366 !important;
}

.note-card-panel.has-media-preview:hover h3,
.note-card-panel.has-media-preview:hover p,
.note-card-panel.has-media-preview:hover .card-heading-text,
.note-card-panel.has-media-preview:hover .card-desc-text {
    color: #ffffff !important;
}

.note-card-panel.no-media-card:hover h3,
.note-card-panel.no-media-card:hover .card-heading-text {
    color: #1d1d1f !important;
}
.note-card-panel.no-media-card:hover p,
.note-card-panel.no-media-card:hover .card-desc-text {
    color: #4b5563 !important;
}

.card-video-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 10 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background-color: transparent !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
}

.card-overlay-gradient {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.88) 100%) !important;
    opacity: 1 !important;
    padding: 30px 28px !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-tag-text {
    opacity: 0.9;
}
.card-title-text {
    opacity: 1;
}

.note-card-panel > div:last-child span,
.note-card-panel > div:last-child a,
.note-card-panel > div:last-child button,
.card-footer-btn {
    color: #8e8e93 !important;
    transition: color 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.note-card-panel > div:last-child span:hover,
.note-card-panel > div:last-child a:hover,
.note-card-panel > div:last-child button:hover,
.card-footer-btn:hover {
    color: #1d1d1f !important;
}

.dark .note-card-panel > div:last-child span,
.dark .note-card-panel > div:last-child a,
.dark .note-card-panel > div:last-child button,
.dark .card-footer-btn,
body.dark .note-card-panel > div:last-child span,
body.dark .note-card-panel > div:last-child a,
body.dark .note-card-panel > div:last-child button,
body.dark .card-footer-btn,
body.dark-theme .note-card-panel > div:last-child span,
body.dark-theme .note-card-panel > div:last-child a,
body.dark-theme .note-card-panel > div:last-child button,
body.dark-theme .card-footer-btn,
html.dark .note-card-panel > div:last-child span,
html.dark .note-card-panel > div:last-child a,
html.dark .note-card-panel > div:last-child button,
html.dark .card-footer-btn {
    color: #8e8e93 !important;
}

.dark .note-card-panel > div:last-child span:hover,
.dark .note-card-panel > div:last-child a:hover,
.dark .note-card-panel > div:last-child button:hover,
.dark .card-footer-btn:hover,
body.dark .note-card-panel > div:last-child span:hover,
body.dark .note-card-panel > div:last-child a:hover,
body.dark-theme .note-card-panel > div:last-child span:hover,
body.dark-theme .note-card-panel > div:last-child a:hover,
html.dark .note-card-panel > div:last-child span:hover,
html.dark .note-card-panel > div:last-child a:hover {
    color: #ffffff !important;
}

.note-badge { 
    background-color: #f3e8ff !important; 
    color: #7e22ce !important; 
    font-weight: 700 !important; 
    font-size: 11px !important; 
    padding: 4px 10px !important; 
    border-radius: 9999px !important; 
    display: inline-block !important; 
}

/* 详情页顶部轮播卡片规范 */
#media-carousel-container {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important; 
    overflow: hidden !important; 
    background-color: transparent !important;
    width: 100% !important;
    position: relative !important;
    isolation: isolate !important;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.dark #media-carousel-container,
body.dark #media-carousel-container,
body.dark-theme #media-carousel-container,
html.dark #media-carousel-container {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: #1c1c1e !important;
}

#media-carousel-container img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* 详情页长图外框规范 */
#detail-img-long-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#detail-img-long-container > div {
    width: 100% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important; 
    overflow: hidden !important; 
    background-color: transparent !important;
    padding: 0 !important;
    isolation: isolate !important;
}

.dark #detail-img-long-container > div,
body.dark #detail-img-long-container > div,
body.dark-theme #detail-img-long-container > div,
html.dark #detail-img-long-container > div {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: transparent !important;
}

#detail-img-long-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* --------------------------------------------------------------------------
   8. 分页器与 Markdown 排版引擎
   -------------------------------------------------------------------------- */
#note-pagination:not(.hidden) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 9999px !important; 
    width: fit-content !important;
    margin: 40px auto 0 auto !important; 
    border: none !important;
    user-select: none !important;
}

#note-pagination button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; 
    font-size: 13px !important;
    font-weight: 600 !important; 
    color: #515154 !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

#note-pagination button:not(.active):hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #1d1d1f !important;
}

#note-pagination button.active {
    background-color: #1d1d1f !important; 
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.18) !important; 
}

.dark #note-pagination button,
body.dark #note-pagination button,
body.dark-theme #note-pagination button,
html.dark #note-pagination button {
    color: #8e8e93 !important;
}

.dark #note-pagination button:not(.active):hover:not(:disabled),
body.dark #note-pagination button:not(.active):hover:not(:disabled),
body.dark-theme #note-pagination button:not(.active):hover:not(:disabled),
html.dark #note-pagination button:not(.active):hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark #note-pagination button.active,
body.dark #note-pagination button.active,
body.dark-theme #note-pagination button.active,
html.dark #note-pagination button.active {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

#note-sidebar {
    display: block !important;
    width: 100% !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 16px 0 24px 0 !important;
}

.markdown-body { 
    color: #2c2c2e !important; 
    font-size: 0.95rem !important; 
    line-height: 1.75 !important; 
    background-color: transparent !important;
    width: 100% !important;
}

.markdown-body hr {
    border: 0 !important;
    height: 1px !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    margin: 1.5rem 0 !important;
    display: block !important;
    width: 100% !important;
}

.dark .markdown-body hr,
body.dark .markdown-body hr,
body.dark-theme .markdown-body hr,
html.dark .markdown-body hr {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.markdown-body table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 1.25rem 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: table !important;
    box-sizing: border-box !important;
}

.markdown-body thead {
    background-color: #f5f5f7 !important;
}

.markdown-body th {
    padding: 10px 14px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    background-color: #f5f5f7 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.markdown-body td {
    padding: 10px 14px !important;
    color: #3a3a3c !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    word-break: break-word !important;
    vertical-align: top !important;
}

.markdown-body th:last-child,
.markdown-body td:last-child {
    border-right: none !important;
}
.markdown-body tr:last-child td {
    border-bottom: none !important;
}

.markdown-body tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.015) !important;
}

.dark .markdown-body table,
body.dark .markdown-body table,
body.dark-theme .markdown-body table,
html.dark .markdown-body table {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background-color: #161618 !important;
}

.dark .markdown-body thead,
body.dark .markdown-body thead,
body.dark-theme .markdown-body thead,
html.dark .markdown-body thead {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .markdown-body th,
body.dark .markdown-body th,
body.dark-theme .markdown-body th,
html.dark .markdown-body th {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark .markdown-body td,
body.dark .markdown-body td,
body.dark-theme .markdown-body td,
html.dark .markdown-body td {
    color: #d1d1d6 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark .markdown-body th:last-child,
.dark .markdown-body td:last-child,
body.dark .markdown-body th:last-child,
body.dark-theme .markdown-body th:last-child,
body.dark-theme .markdown-body td:last-child,
html.dark .markdown-body th:last-child,
html.dark .markdown-body td:last-child {
    border-right: none !important;
}

.dark .markdown-body tr:last-child td,
body.dark .markdown-body tr:last-child td,
body.dark-theme .markdown-body tr:last-child td,
html.dark .markdown-body tr:last-child td {
    border-bottom: none !important;
}

.dark .markdown-body tr:nth-child(even),
body.dark .markdown-body tr:nth-child(even),
body.dark-theme .markdown-body tr:nth-child(even),
html.dark .markdown-body tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.markdown-body img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 16px !important;
    margin: 20px auto !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.dark .markdown-body img {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 24px -2px rgba(0, 0, 0, 0.6) !important;
}

.markdown-body video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 16px !important;
    margin: 20px auto !important;
    background: #000000 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08) !important;
}

.markdown-body h1 { font-size: 1.85rem !important; font-weight: 900 !important; letter-spacing: -0.025em !important; color: #1d1d1f !important; margin-top: 2rem !important; margin-bottom: 1rem !important; line-height: 1.25 !important; }
.markdown-body h2:not(.quick-read-title) { font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #1d1d1f !important; margin-top: 1.75rem !important; margin-bottom: 0.85rem !important; line-height: 1.3 !important; }
.markdown-body h3 { font-size: 1.15rem !important; font-weight: 700 !important; color: #1d1d1f !important; margin-top: 1.25rem !important; margin-bottom: 0.65rem !important; }
.markdown-body p { margin-bottom: 1.1rem !important; color: #3a3a3c !important; }

/* 统一 Markdown 引用框 */
.markdown-body blockquote { 
    border-left: 4px solid #7C3AED !important; 
    background-color: rgba(124, 58, 237, 0.08) !important; 
    padding: 1rem 1.25rem !important; 
    margin: 1.25rem 0 !important; 
    border-top-right-radius: 16px !important; 
    border-bottom-right-radius: 16px !important; 
    color: #1d1d1f !important; 
    font-style: normal !important; 
    font-size: 0.93rem !important; 
    line-height: 1.65 !important; 
}

.markdown-body pre { 
    background-color: #f5f5f7 !important; 
    border-radius: 20px !important; 
    padding: 1.25rem 8.5rem 1.25rem 1.5rem !important; 
    margin: 1.25rem 0 !important; 
    position: relative !important; 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; 
    font-size: 0.85rem !important; 
    color: #1d1d1f !important; 
    line-height: 1.6 !important; 
    border: 1px solid rgba(0, 0, 0, 0.06) !important; 
    white-space: pre-wrap !important; 
    word-break: break-word !important; 
    overflow-x: hidden !important; 
}
.markdown-body code:not(pre code) { background-color: #f0f0f2 !important; color: #1d1d1f !important; padding: 0.2rem 0.45rem !important; border-radius: 6px !important; font-size: 0.85em !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; }
.markdown-body ul { list-style-type: disc !important; padding-left: 1.5rem !important; margin: 1rem 0 !important; }
.markdown-body ol { list-style-type: decimal !important; padding-left: 1.5rem !important; margin: 1rem 0 !important; }
.markdown-body li { margin-bottom: 0.5rem !important; font-size: 0.93rem !important; line-height: 1.65 !important; color: #3a3a3c !important; }
.markdown-body strong { font-weight: 700 !important; color: #1d1d1f !important; }

.dark .markdown-body,
body.dark .markdown-body,
body.dark-theme .markdown-body,
html.dark .markdown-body { 
    color: #e5e5ea !important; 
    background-color: transparent !important;
}
.dark .markdown-body h1, .dark .markdown-body h2, .dark .markdown-body h3, .dark .markdown-body strong,
body.dark .markdown-body h1, body.dark .markdown-body h2, body.dark .markdown-body h3, body.dark .markdown-body strong,
body.dark-theme .markdown-body h1, body.dark-theme .markdown-body h2, body.dark-theme .markdown-body h3, body.dark-theme .markdown-body strong,
html.dark .markdown-body h1, html.dark .markdown-body h2, html.dark .markdown-body h3, html.dark .markdown-body strong { color: #ffffff !important; }
.dark .markdown-body p, .dark .markdown-body li,
body.dark .markdown-body p, body.dark .markdown-body li,
body.dark-theme .markdown-body p, body.dark-theme .markdown-body li,
html.dark .markdown-body p, html.dark .markdown-body li { color: #d1d1d6 !important; }

.dark .markdown-body blockquote,
body.dark .markdown-body blockquote,
body.dark-theme .markdown-body blockquote,
html.dark .markdown-body blockquote { 
    background-color: rgba(124, 58, 237, 0.16) !important; 
    border-left-color: #A78BFA !important; 
    color: #E2E8F0 !important; 
}

.dark .markdown-body code:not(pre code),
body.dark .markdown-body code:not(pre code),
body.dark-theme .markdown-body code:not(pre code),
html.dark .markdown-body code:not(pre code) { background-color: #2c2c2e !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.1) !important; }
.dark .markdown-body pre,
body.dark .markdown-body pre,
body.dark-theme .markdown-body pre,
html.dark .markdown-body pre { background-color: #1c1c1e !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e5e5ea !important; }

.dark .btn-copy-code,
body.dark .btn-copy-code,
body.dark-theme .btn-copy-code,
html.dark .btn-copy-code { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #aeaeb2 !important; outline: none !important; }
.dark .btn-copy-code:hover,
body.dark .btn-copy-code:hover,
body.dark-theme .btn-copy-code:hover,
html.dark .btn-copy-code:hover { background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; }

/* --------------------------------------------------------------------------
   9. 进场动效
   -------------------------------------------------------------------------- */
@keyframes animateReveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.animate-reveal {
  animation: animateReveal 0.35s ease-out both;
}

/* --------------------------------------------------------------------------
   10. 深色模式全局底色映射 与 底部主题按钮
   -------------------------------------------------------------------------- */
.dark body,
body.dark,
body.dark-theme,
html.dark body {
    background-color: #141416 !important; 
    color: #ffffff !important;
}

.dark h1, .dark h2, .dark h3, .dark h4,
body.dark h1, body.dark h2, body.dark h3, body.dark h4,
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4,
body.dark-theme #brand-name-header,
html.dark h1, html.dark h2, html.dark h3, html.dark h4,
html.dark #brand-name-header {
    color: #ffffff !important;
}

.dark footer,
body.dark footer,
body.dark-theme footer { 
    background-color: #141416 !important; 
    border-top: none !important; 
    border-top-color: transparent !important; 
}
.dark footer a,
body.dark footer a,
body.dark-theme footer a { color: #8e8e93 !important; }
.dark footer a:hover,
body.dark footer a:hover,
body.dark-theme footer a:hover { color: #ffffff !important; }

#global-theme-btn,
.theme-toggle-btn,
#footer-theme-toggle,
button:has(#global-theme-icon),
footer button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    background-color: #f5f5f7 !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    outline: none !important;
}

#global-theme-btn:hover,
.theme-toggle-btn:hover,
button:has(#global-theme-icon):hover {
    background-color: #e5e5ea !important;
    color: #000000 !important;
}

.dark #global-theme-btn,
.dark .theme-toggle-btn,
.dark #footer-theme-toggle,
body.dark #global-theme-btn,
body.dark .theme-toggle-btn,
body.dark #footer-theme-toggle,
body.dark-theme #global-theme-btn,
body.dark-theme .theme-toggle-btn,
body.dark-theme #footer-theme-toggle,
body.dark-theme button:has(#global-theme-icon),
body.dark-theme footer button,
html.dark #global-theme-btn,
html.dark .theme-toggle-btn,
html.dark #footer-theme-toggle,
html.dark button:has(#global-theme-icon),
html.dark footer button {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.dark #global-theme-btn:hover,
.dark .theme-toggle-btn:hover,
body.dark #global-theme-btn:hover,
body.dark .theme-toggle-btn:hover,
body.dark-theme #global-theme-btn:hover,
body.dark-theme .theme-toggle-btn:hover,
body.dark-theme button:has(#global-theme-icon):hover,
body.dark-theme footer button:hover,
html.dark #global-theme-btn:hover,
html.dark .theme-toggle-btn:hover,
html.dark button:has(#global-theme-icon):hover,
html.dark footer button:hover {
    background-color: #3a3a3c !important;
    color: #ffffff !important;
}

/* 快速阅读弹窗 */
#quick-read-overlay { 
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important; 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    pointer-events: none; 
    transform: translateZ(0);
    will-change: opacity, transform;
}
#quick-read-overlay.pointer-events-auto { 
    pointer-events: auto !important; 
}
#quick-read-modal { 
    width: 680px !important; 
    height: 800px !important; 
    max-width: 92vw !important; 
    max-height: 85vh !important; 
    background-color: #ffffff !important; 
    border-radius: 20px !important; 
    overflow: hidden !important; 
    display: flex !important; 
    flex-direction: column !important; 
    box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.12) !important; 
    transform: translateZ(0);
    will-change: transform;
}
.dark #quick-read-modal,
body.dark-theme #quick-read-modal { 
    background-color: #1c1c1e !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
}

#quick-read-body {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   11. 管理模式、模块堆响应式动效、网格列数与全景/侧拉栏适配 (GPU极速加速版)
   ========================================================================== */
.admin-only-btn {
  display: none !important;
}

body.admin-mode .admin-only-btn {
  display: inline-flex !important;
}

/* 🎯 卡片首次载入动效 */
@keyframes cardStackIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 🎯 核心需求：全景切换时“响应式从堆上升起”入场动效 (纯 GPU 线程合成) */
@keyframes panoramaStackUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

#grid-view-container.panorama-stack-active > div {
  animation: panoramaStackUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 🎯 网格常规默认：5 列稳态布局 + 强制 GPU 硬件加速图层 */
#grid-view-container {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: start !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

#grid-view-container > div {
  animation: cardStackIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.25s var(--ease-apple), box-shadow 0.25s ease !important;
  
  /* 🎯 性能核心：开启现代浏览器离屏冻结，按约 175px 饱满卡片尺寸预估，全景展开瞬间跳过 100+ 离屏卡片重排 */
  content-visibility: auto !important;
  contain-intrinsic-size: 175px 235px !important;
  contain: layout style paint !important;
  
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* 🎯 需求2核心：当右侧详细信息抽屉打开时，中间内容宽度被压缩，网格依然紧固保持 5 列 */
#lib-workbench-layout:has(#inspector-panel:not(.panel-collapsed)) #grid-view-container,
.has-inspector-open #grid-view-container {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px 14px !important;
}

#lib-workbench-layout:has(#inspector-panel:not(.panel-collapsed)) #grid-view-container > div,
.has-inspector-open #grid-view-container > div {
  border-radius: 10px !important;
}

#lib-workbench-layout:has(#inspector-panel:not(.panel-collapsed)) #grid-view-container > div > div:last-child,
.has-inspector-open #grid-view-container > div > div:last-child {
  padding: 7px 8px 6px 8px !important;
  min-height: 48px !important;
}

#lib-workbench-layout:has(#inspector-panel:not(.panel-collapsed)) #grid-view-container > div > div:last-child div:first-child,
.has-inspector-open #grid-view-container > div > div:last-child div:first-child {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* 🎯 需求1核心：全景模式卡片锚定在 ~175px 黄金范围自适应 (2560px 下自然为 12 列，单卡宽约 180px) */
.lib-root-container.is-panorama #grid-view-container {
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px !important;
}

.lib-root-container.is-panorama #grid-view-container > div {
  border-radius: 12px !important;
}

/* 🎯 消除内部缩水感：内边距、字号与正常态完全统一，体积感 1:1 饱满对齐 */
.lib-root-container.is-panorama #grid-view-container > div > div:last-child {
  padding: 10px !important;
  min-height: 52px !important;
}

.lib-root-container.is-panorama #grid-view-container > div > div:last-child div:first-child {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* 详情页顶部轮播卡片与长图外框规范 */
#media-carousel-container,
#detail-img-long-container > div {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.dark #media-carousel-container,
.dark #detail-img-long-container > div {
    border-color: rgba(255, 255, 255, 0.1) !important;
}