@charset "UTF-8";
/*@font-face {*/
/*  font-family: HarmonyOS_Sans_SC_Regular;*/
/*  font-style: normal;*/
/*  font-display: swap;*/
/*  src: url("https://fastly.jsdelivr.net/gh/vhxubo/blog@main/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"),*/
/*       url("https://fastly.jsdelivr.net/gh/vhxubo/blog@main/fonts/HarmonyOS_Sans_SC_Regular.woff") format("woff");*/
/*}*/

:root .dark-theme,
:root.dark-theme,
html.dark-theme,
body.dark-theme {
    /* 品牌主色保留后台 --theme-color；勿在此强制改紫 */
    --top-menu-bg-color: rgba(28, 28, 42, 0.94);
    --top-menu-text-color: #e8e8f0;
    --color-primary: var(--theme-color);
    --color-primary-end: color-mix(in srgb, var(--color-primary) 72%, #ffffff);
    --color-text-primary: #e8e8f0;
    --color-text-regular: #8b8ba3;
    --color-text-secondary: #6e6e88;
    --color-text-placeholder: #555570;
    --border-color-base: rgba(255, 255, 255, 0.06);
    --border-color-muted: rgba(255, 255, 255, 0.04);
    --color-white: #fff;
    --bg-body-color: #1c1c2a;
    --bg-main-color: #2a2a3c;
    --bg-muted-color: #232334;
    --bg-surface-color: #2a2a3c;
    --bg-text-color: color-mix(in srgb, var(--theme-color) 14%, transparent);
    --channel-bg: #242436;
    --channel-border: rgba(255, 255, 255, 0.05);
    --channel-item-bg: #2a2a3c;
    --channel-item-hover-bg: rgba(255, 255, 255, 0.05);
    --channel-item-active-bg: #3b3c4f;
    --channel-text: #c4c4d8;
    --channel-label: #6e6e88;
    --channel-accent: color-mix(in srgb, var(--theme-color) 78%, #ffffff);
    --channel-header-bg: rgba(28, 28, 42, 0.94);
    --channel-flyout-bg: rgba(36, 36, 54, 0.98);
    --channel-panel-hover: rgba(255, 255, 255, 0.05);
    --channel-shadow: none;
    --channel-glow-1: rgba(99, 102, 241, 0.06);
    --channel-glow-2: rgba(99, 102, 241, 0.03);
    --scrollbar-size: 8px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: #3a3a52;
    --scrollbar-thumb-hover: #484864;
    --scrollbar-thumb-active: #555570;
}:root {
    --scrollbar-size: 8px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(100, 116, 139, 0.28);
    --scrollbar-thumb-hover: rgba(100, 116, 139, 0.45);
    --scrollbar-thumb-active: rgba(100, 116, 139, 0.58);
}html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
}html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}html.dark-theme,
html.dark-theme body,
body.dark-theme {
    color-scheme: dark;
    --scrollbar-track: transparent;
    --scrollbar-thumb: #3a3a52;
    --scrollbar-thumb-hover: #484864;
    --scrollbar-thumb-active: #555570;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}html.dark-theme::-webkit-scrollbar-thumb,
html.dark-theme body::-webkit-scrollbar-thumb,
body.dark-theme::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
}html.dark-theme::-webkit-scrollbar-track,
html.dark-theme body::-webkit-scrollbar-track,
body.dark-theme::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}html.dark-theme::-webkit-scrollbar-thumb:hover,
html.dark-theme body::-webkit-scrollbar-thumb:hover,
body.dark-theme::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}html.dark-theme::-webkit-scrollbar-thumb:active,
html.dark-theme body::-webkit-scrollbar-thumb:active,
body.dark-theme::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
}.dark-theme .site,
.dark-theme body {
    background-color: var(--bg-body-color);
}
/* 非 app 布局页：参考图无大光斑，仅平色底 */
html.dark-theme body:not(.app-layout-active) {
    background-image: none;
}.dark-theme .box {
    background-color: var(--bg-main-color);
    border-color: var(--border-color-muted);
}.dark-theme .calendar-checkin {
    --ck-bg: var(--bg-main-color);
    --ck-surface: var(--bg-surface-color);
    --ck-border: var(--border-color-base);
    --ck-text: var(--color-text-primary);
    --ck-text-2: var(--color-text-regular);
    --ck-text-3: var(--color-text-secondary);
    --ck-accent: var(--channel-accent);
    --ck-glow: color-mix(in srgb, var(--theme-color) 28%, transparent);
    background: var(--ck-bg) !important;
    border-color: var(--ck-border);
    box-shadow: var(--channel-shadow), 0 12px 40px rgba(0, 0, 0, 0.35);
}.dark-theme .checkin-streak-card--total .checkin-streak-card__icon {
    color: var(--color-primary-end);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}.dark-theme .checkin-reward-card__btn.is-signed,
.dark-theme .checkin-reward-card__btn.is-claimed,
.dark-theme .checkin-reward-card__btn:disabled {
    background: var(--bg-surface-color);
    color: var(--color-text-secondary);
    border: 1px solid var(--border-color-base);
}.dark-theme .checkin-panel__footer {
    background: var(--bg-muted-color);
    border-top-color: var(--border-color-base);
}/*:root * {*/
/*    transition: background 2s !important;*/
/*}*/

.site {
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
    flex-flow: column;
    background-color: var(--bg-body-color);
    max-width: var(--site-width);/**2078px**/
}/* Shared keyboard focus treatment for native and legacy controls. */
:where(a,
button,
input,
select,
textarea,
[tabindex]):focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    background: #111827;
    color: #fff;
    text-decoration: none;
}.skip-link:focus-visible {
    width: auto;
    height: auto;
    padding: 10px 14px;
    margin: 0;
    overflow: visible;
    clip: auto;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
}@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: calc(var(--wrapper-width) + 48px);/**2078px**/
    padding: 0 24px;
}.site-content {
    flex:1;
}.content-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1;
}.fixed {
    position: fixed!important;
}.box {
    background-color: var(--bg-main-color);
    /*box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);*/
}.mika-primary-gradient-bg {
    color: #fff;
    border-color: transparent;
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
}.mg-b {
    margin-bottom: var(--gap);
}.mg-t {
    margin-top: var(--gap);
}.mg-r {
    margin-right: var(--gap);
}.mg-l {
    margin-left: var(--gap);
}.mika-radius {
    border-radius: var(--mika-radius, var(--radius));
    overflow: hidden;
}
/* 全局按钮圆角：吃后台「按钮圆角弧度」；胶囊/圆形控件勿加 .button */
.button,
a.button,
button.button,
.button.empty,
a.button.empty,
.mika-primary-gradient-bg {
    border-radius: var(--mika-radius-button, var(--btn-radius, 12px));
}
.mika-flex {
    display: flex;
    align-items: center;
}.w-h {
    width: 100%;
    height: 100%;
}.link-block {
    display: block;
}/*
 * 选中态：只给「文字/页签」类强调色，去掉 !important，避免污染
 * 主色底按钮、侧栏、播放列表等组件用各自的 is-active / 局部规则。
 */
.tabs-nav > .active,
.tabs-nav li.active,
li.tabs-item.active,
.comment-orderby span.active,
.mika-ajax-pager .mika-pager .number.active,
.home-item .module-ajax-pagination .mika-pager .number.active,
.filter-items a.current,
.scroll-tabs .tabs-nav li.active {
    color: var(--color-primary);
}/* 主色底控件：字色固定为 on-primary，防止 a:hover / .active 盖掉白字 */
.mika-primary-gradient-bg,
.button.empty,
a.button.empty,
.author-widget .author-widget-footer .follow,
.author-btn-primary,
.article-header .post-user-info .right .follow,
.vip-button,
.video-info .vip-button,
.pay-button button,
.role-vip-btn,
.mika-episode-follow,
.mika-tools-cta,
.mika-banners-btn,
.mika-btn-primary,
.submit-button,
.comment-submit,
.entry .button.empty {
    color: var(--mika-color-on-primary, #fff);
}.mika-primary-gradient-bg:hover,
.mika-primary-gradient-bg:focus-visible,
.button.empty:hover,
a.button.empty:hover,
.author-widget .author-widget-footer .follow:hover,
.author-btn-primary:hover,
.article-header .post-user-info .right .follow:hover,
.vip-button:hover,
.video-info .vip-button:hover,
.pay-button button:hover,
.role-vip-btn:hover,
.mika-episode-follow:hover,
.mika-tools-cta:hover,
.mika-banners-btn:hover,
.mika-btn-primary:hover,
.submit-button:hover,
.comment-submit:hover,
.entry .button.empty:hover {
    color: var(--mika-color-on-primary, #fff) !important;
}.el-message {
    max-width: 380px;
    min-width: 100px!important;
}.bg-text {
    color: var(--color-primary)!important;
    background-color: var(--bg-text-color)!important;
}.mobile-show {
	display: none
}.mobile-hidden {
	display: block
}.pc-hidden {
	display: none;
}.pc-show {
	display: block;
}.green {
	color:green
}.scroll {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}.scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}.scroll::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}.scroll::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
}.scroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-hover);
}.scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-active);
}.scroll::-webkit-scrollbar-thumb:window-inactive {
    background-color: color-mix(in srgb, var(--scrollbar-thumb) 65%, transparent);
}/* CSS样式：文本省略 */
.text-ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: var(--line-clamp, 1); 
    white-space: normal;
}/*渐湿动画*/
@-webkit-keyframes Items {
    0%{opacity:0}
    100%{opacity:1}
}@keyframes Items {
    0%{opacity:0}
    100%{opacity:1}
}/*********图片懒加载*********/
/*img.lazyload:not(.loaded) {*/
/*    opacity: .5;*/
/*}*/

/*img.lazyload.error {*/
/*    filter: none;*/
/*}*/
/*img:not([src]):not([srcset]) {*/
/*    visibility: hidden;*/
/*}*/
/*img.lazyload.loaded {*/
/*    opacity: 1;*/
/*    transition: opacity .4s;*/
/*}*/

img.lazyload:not(.loaded) {
    object-fit: none;
    object-position: center;
    background-color: rgba(127, 127, 127, 0.08);
    filter: none;
    -webkit-filter: none;
}img.lazyload.loaded {
    filter: none;
    -webkit-filter: none;
}.post-thumbnail img.lazyload.loaded,
.w-h.lazyload.loaded {
    object-fit: cover;
}.article-content img.lazyload.loaded,
.mika-article-body img.lazyload.loaded {
    object-fit: unset;
}/***网格布局*****/
.mika-grid {
    position: relative;
    display: grid;
    gap: var(--mika-gap, var(--gap));
    grid-gap: var(--mika-gap, var(--gap));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}.mika-grid.mika-waterfall {
    display: flex !important;
    flex-flow: wrap;
    justify-content: space-between;
    grid-template-columns: none !important;
    grid-gap: 0;
    width: 100%;
}.mika-grid.mika-waterfall.is-packery {
    display: block !important;
}.mika-grid.mika-waterfall:not(.is-packery) {
    min-height: 320px;
}.mika-grid.mika-waterfall.is-packery {
    min-height: 0;
}.archive-waterfall-row {
    position: relative;
    width: 100%;
}.archive-waterfall-row #post-list {
    width: 100%;
}.archive-waterfall-row + .mika-pagenav,
.archive-waterfall-row ~ .mika-pagenav {
    clear: both;
    position: relative;
    z-index: 2;
}.home-item .mika-grid {
    transition: height .3s;
}/***瀑布流布局*****/
.mika-waterfall {
    display: flex;
    position: relative;
    flex-flow: wrap;
    justify-content: space-between;
    width: 100%;
    grid-gap: 0;
}.mika-waterfall.is-packery {
    display: block;
}.mika-waterfall {
    margin: 0 calc(var(--gap) / -2);
}.mika-waterfall.is-packery {
    margin-bottom: 0;
}.mika-waterfall > * {
    padding: 0 calc(var(--gap) / 2);
    width: 20%;
    box-sizing: border-box;
}.post-1 .mika-waterfall .post-info h2 {
    min-height: auto;
}.mika-waterfall .item-in {
    margin-bottom: var(--gap);
    position: relative;
}.mika-waterfall img.lazyload:not(.loaded) {
    filter: none;
    -webkit-filter: none;
}.mika-waterfall img.lazyload.loaded {
    filter: none;
    -webkit-filter: none;
    object-fit: cover;
}.mika-waterfall .post-thumbnail[style*="height:auto"] {
    height: auto !important;
    padding-top: 0 !important;
    overflow: visible;
}.mika-waterfall .post-thumbnail[style*="height:auto"] .thumb-link {
    position: static;
    display: block;
    height: auto;
}.mika-waterfall img.waterfall-natural-img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
}/******顶部开始*********/
.header {
    min-height: var(--top-menu-height);;
    position: relative;
    margin: 0 auto;
    max-width: var(--site-width);
    width: 100%;
    margin-bottom: var(--gap);
}.header .header-top {
    max-width: var(--site-width);
    width: 100%;
    height: var(--top-menu-height);
    background-color: var(--top-menu-bg-color);
    box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
}.header .header-top {
    position: absolute;
    top: 0;
    z-index: 1002;
}.header.header-scroll-top .header-top {
    position: relative;
    top: auto;
}.header.header-fixed-top .header-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
}.header .header-top-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--top-menu-width);
    width: 100%;
    margin: 0 auto;
}.header.header-in-zone .header-top-wrap {
    max-width: calc(var(--wrapper-width) + 48px);
    padding: 0 24px;
    box-sizing: border-box;
}.header-top .header-top-wrap > * {
    display: flex;
    align-items: center;
}#mobile-menu-button {
    margin-right: 16px;
    font-size: 24px;
    line-height: 24px;
}.header-top .header-logo {
    margin-right: 25px;
    max-height: calc(var(--top-menu-height) - 10px);
    flex-shrink: 0;
}.header-top .logo {
    display: block;
}.header-top .header-logo img {
    height: calc(var(--top-menu-height) - 25px);
}.header-top .header-logo .site-title {
    font-size: 26px;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1;
}.header-top .header-top-wrap ul {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 30px;
}.header:not(.header-in-zone) .header-top-menu {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
}.header:not(.header-in-zone) .header-top-menu #top-menu,
.header:not(.header-in-zone) .header-top-menu .top-nav-container {
    margin-right: 0;
}.header:not(.header-in-zone).top-menu-pos-center .header-top-menu {
    justify-content: center;
}.header:not(.header-in-zone).top-menu-pos-right .header-top-menu {
    justify-content: flex-end;
}.header-top .menu li {
    margin-right: 24px;
}.header-top .menu li a {
    /*height: 64px;*/
    /*line-height: 64px;*/
    color: var(--top-menu-text-color);
    font-size: 15px;
    display: flex;
    align-items: center;
    position: relative;
}.header-top .menu li.current-menu-item a {
    color: var(--theme-color);
}.header-top .header-top-wrap .right-entry > * {
    margin-left: 16px;
    position: relative;
}
/*.header-top .menu li a:hover {*/
/*    animation: jump .3s;*/
/*}*/

/*@keyframes jump {*/
/*    0% {*/
/*        transform: translateY(0)*/
/*    }*/

/*    50% {*/
/*        transform: translateY(-3px)*/
/*    }*/

/*    to {*/
/*        transform: translateY(0)*/
/*    }*/
/*}*/

/**************顶部搜索*******************/
.center-entry {
    flex: 1 auto;
}.menu-search-container {
    position: relative;
    margin: 0 auto;
    min-width: var(--top-menu-search-width, 160px);
    max-width: var(--top-menu-search-width, 160px);
    width: var(--top-menu-search-width, 160px);
    height: 34px;
}/* 搜索框模式：始终按后台 --top-menu-search-width 显示，不再收窄/展开变宽 */
@media (min-width: 769px) {
    .header.top-menu-search-box .center-entry {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        width: var(--top-menu-search-width, 160px);
        max-width: min(var(--top-menu-search-width, 160px), calc(100vw - 96px));
        height: 34px;
    }

    /* 搜索框 + AI 成组：总宽 = 搜索宽 + 入口圆钮 */
    .header.top-menu-search-box .header-search-cluster {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        width: calc(var(--top-menu-search-width, 160px) + 48px);
        max-width: min(calc(var(--top-menu-search-width, 160px) + 48px), calc(100vw - 96px));
        height: 34px;
        --hdr-ctl-h: 34px;
    }

    .header.top-menu-search-box .header-search-cluster > .center-entry {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .header.top-menu-search-box .menu-search-container {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        margin: 0 auto;
        height: 34px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        z-index: 2;
    }

    .header.top-menu-search-box .menu-search-container.is-expanded {
        z-index: 40;
    }
}/* 图标模式：居中模态搜索层（旧版顶栏布局） */
.header.top-menu-search-box .mika-search-overlay__dialog {
    display: contents;
}.header.top-menu-search-box .mika-search-overlay__close {
    display: none;
}.header.top-menu-search-icon .center-entry.mika-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: calc(var(--top-menu-height, 54px) + 20px) 16px 24px;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s;
}.header.top-menu-search-icon .center-entry.mika-search-overlay.show {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}.header.top-menu-search-icon .center-entry.mika-search-overlay .menu-search-mask {
    position: fixed;
    inset: 0;
    display: block;
    opacity: 0;
    background: rgba(15, 23, 42, 0.48);
    transition: opacity .22s ease;
}.header.top-menu-search-icon .center-entry.mika-search-overlay.show .menu-search-mask {
    opacity: 1;
}.header.top-menu-search-icon .center-entry.mika-search-overlay .mika-search-overlay__dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-width: 100%;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    transition: opacity .22s ease, transform .22s ease;
}.header.top-menu-search-icon .center-entry.mika-search-overlay.show .mika-search-overlay__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}.header.top-menu-search-icon .center-entry.mika-search-overlay .mika-search-overlay__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    font-size: 18px;
    cursor: pointer;
}.header.top-menu-search-icon .center-entry.mika-search-overlay .menu-search-container {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    background: var(--bg-body-color, #fff);
    border: 1px solid var(--border-color-base, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}.header.top-menu-search-icon .center-entry.mika-search-overlay .menu-search-container form.searchform {
    height: 52px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border-color-base, #e5e7eb);
    background: transparent;
    box-shadow: none;
    padding-right: 44px;
}.header.top-menu-search-icon .center-entry.mika-search-overlay .menu-search-container .mika-search-panel.search-panel.box {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-height: min(58vh, 480px);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    overflow: auto;
}.header.top-menu-search-icon #mobile-search-button.search-icon.is-active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}form.searchform {
    display: flex;
    align-items: center;
}form.searchform {
    border-radius: 15px;
    display: flex;
    align-items: center;
    /* padding: 0 0 0 4px; */
    position: relative;
    /* line-height: 32px; */
    background-color: var(--bg-muted-color);
    padding: 1px;
}.search-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 8px;
    width: 100%;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 6px;
    flex: 1;
}input.nav-search-input {
    flex: 1;
    overflow: hidden;
    padding-right: 8px;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 13px;
}.search-btn {
    /* width: 30px; */
    flex-shrink: 0;
    /* text-align: center; */
    cursor: pointer;
    padding-right: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
}i.ri-search-2-line {
    font-size: 18px;
    color: var(--color-text-regular);
}.search-panel.box {
    padding: 16px;
    border-radius: var(--radius);
    box-shadow: 4px 4px 24px 0 rgba(96,101,108,.12);
    margin-top: 8px;
}.search-panel-status {
    padding: 12px 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-align: center;
}.history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}.clear {
    /* font-size: 18px; */
    color: var(--color-text-secondary);
    cursor: pointer;
}.histories {
    display: flex;
    flex-wrap: wrap;
}.history-item {
    position: relative;
    padding: 7px 10px 8px;
    font-size: 12px;
    background: var(--bg-muted-color);
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    color: var(--color-text-regular);
}.histories .history-item .history-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
}.history .close {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 0 2px;
    background: var(--bg-muted-color);
    border-radius: 15px;
}.suggestions .suggest-item {
    border-radius: var(--radius);
    display: flex;
    padding: 8px 8px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 4px;
}.suggestions .suggest-text {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-right: 12px;
}.suggestions .suggest-type {
    font-size: 12px;
    background-color: var(--bg-text-color);
    color: var(--color-primary);
    padding: 0px 4px;
    border-radius: 4px;
    line-height: 19px;
    white-space: nowrap;
}.suggestions .suggest-type.post {
    color: #ff725c;
    background-color: #ffe0d6;
}.suggestions .suggest-type.user {
    color: #64cb8d;
    background-color: #e8fdec;
}.suggestions .suggest-type.category {
    color: #2c5cf5;
    background-color: #f0f6ff;
}.suggestions .suggest-type.post_tag {
    color: #a483ff;
    background-color: #ece5ff;
}.suggestions .suggest-item:hover {
    background-color: var(--bg-muted-color);
}.suggestions .suggest-item:last-of-type {
    margin: 0;
}/**********顶部日间切换************/
/*.menu-theme-switch {*/
/*    margin-right: 24px;*/
/*}*/

.menu-theme-switch input {
    display: none;
}.menu-theme-switch .theme-toggle {
    height: 28px;
    width: 52px;
    display: block;
    position: relative;
}.menu-theme-switch .slider {
    border-radius: 30px;
    cursor: pointer;
    height: 100%;
    transition: .3s;
    background-color: var(--bg-body-color);
    width: 100%;
    display: inline-block;
}.menu-theme-switch .slider:before {
    content: "";
    height: 18px;
    width: 18px;
    position: absolute;
    left: 4px;
    top: 50%;
    background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
    border-radius: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: .4s;
}.menu-theme-switch input:checked + .slider:before {
    background: none;
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -6px -4px 0 0 #a3dafb;
    left: calc(100% - 22px);
}.menu-user-box .menu-logun-btn {
    align-items: center;
    border-radius: var(--btn-radius);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    height: 28px;
    justify-content: center;
    width: 58px;
    color: var(--color-text-regular);
    background-color: var(--bg-muted-color);
    border: 0;
    font: inherit;
}.calendar-checkin {
    --ck-bg: var(--bg-main-color);
    --ck-surface: var(--channel-item-bg);
    --ck-border: var(--border-color-base);
    --ck-text: var(--color-text-primary);
    --ck-text-2: var(--color-text-regular);
    --ck-text-3: var(--color-text-secondary);
    --ck-accent: var(--channel-accent);
    --ck-accent-2: var(--channel-accent);
    --ck-glow: color-mix(in srgb, var(--channel-accent) 28%, transparent);

    width: 100%;
    color: var(--ck-text);
    font-size: 13px;
    cursor: default;
    user-select: none;
    border-radius: 16px;
    overflow: hidden;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    box-shadow: var(--channel-shadow), 0 12px 40px rgba(15, 23, 42, 0.08);
}.checkin-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
}.checkin-panel__left {
    padding: 22px 22px 18px;
    border-right: 1px solid var(--ck-border);
}.checkin-panel__right {
    padding: 20px 22px 18px;
}.checkin-panel__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ck-text);
}.checkin-panel__subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ck-text-2);
}.checkin-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}.checkin-streak-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--mika-radius, 14px);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    min-width: 0;
}.checkin-streak-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--channel-panel-hover);
    color: var(--ck-accent);
    font-size: 20px;
    flex-shrink: 0;
}.checkin-streak-card--total .checkin-streak-card__icon {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}.checkin-streak-card__label {
    font-size: 12px;
    color: var(--ck-text-2);
    white-space: nowrap;
}.checkin-streak-card__value {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}.checkin-streak-card__value strong {
    font-size: 28px;
    line-height: 1;
    color: var(--ck-accent);
    font-weight: 700;
}.checkin-streak-card--total .checkin-streak-card__value strong {
    color: #3b82f6;
}.checkin-streak-card__value span {
    font-size: 14px;
    color: var(--ck-text-2);
}.checkin-milestones {
    margin-top: 16px;
}.checkin-milestones__tip {
    font-size: 12px;
    color: var(--ck-text-2);
    margin-bottom: 12px;
}.checkin-milestones__track {
    position: relative;
    padding-top: 4px;
}.checkin-milestones__line {
    position: absolute;
    top: 16px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--ck-border);
    border-radius: 999px;
    overflow: hidden;
}.checkin-milestones__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ck-accent), color-mix(in srgb, var(--ck-accent) 70%, #fff));
}.checkin-milestones__nodes {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}.checkin-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}.checkin-milestone__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mika-color-surface, #fff);
    border: 1px solid var(--ck-border);
    color: var(--ck-text-3);
    font-size: 13px;
}.checkin-milestone.reached .checkin-milestone__dot {
    background: var(--ck-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px var(--ck-glow);
}.checkin-milestone__day {
    font-size: 11px;
    color: var(--ck-text-3);
    white-space: nowrap;
}.checkin-milestone__reward {
    font-size: 10px;
    line-height: 1.2;
    color: var(--ck-text-3);
    white-space: nowrap;
}.checkin-milestone.reached .checkin-milestone__day,
.checkin-milestone.is-target .checkin-milestone__day {
    color: var(--ck-accent);
}.checkin-milestone.reached .checkin-milestone__reward,
.checkin-milestone.is-target .checkin-milestone__reward {
    color: var(--ck-accent);
    font-weight: 600;
}.checkin-milestone.is-target .checkin-milestone__dot {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ck-accent) 25%, transparent);
}.checkin-reward-card {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--mika-radius, 14px);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}.checkin-reward-card__label {
    font-size: 12px;
    color: var(--ck-text-2);
}.checkin-reward-card__extra {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--ck-text-3);
}.checkin-reward-card__value {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ck-text);
}.checkin-reward-card__value i {
    color: #f5c451;
    font-size: 18px;
}.checkin-reward-card__btn {
    flex-shrink: 0;
    min-width: 88px;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: var(--ck-accent);
    box-shadow: 0 6px 16px var(--ck-glow);
    transition: filter .15s, transform .15s;
}.checkin-reward-card__btn:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}.checkin-reward-card__btn.is-signed,
.checkin-reward-card__btn.is-claimed,
.checkin-reward-card__btn:disabled {
    cursor: default;
    color: var(--ck-text-3);
    background: var(--ck-surface);
    box-shadow: none;
    transform: none;
}.checkin-panel__note {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ck-text-3);
}.checkin-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}.checkin-calendar__month {
    font-size: 15px;
    font-weight: 600;
    color: var(--ck-text);
}.checkin-calendar__nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ck-surface);
    color: var(--ck-text-2);
    cursor: pointer;
    transition: background .15s, color .15s;
}.checkin-calendar__nav:hover {
    background: var(--channel-panel-hover);
    color: var(--ck-accent);
}.checkin-calendar__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}.checkin-calendar__nav:disabled:hover {
    background: var(--ck-surface);
    color: var(--ck-text-2);
}.checkin-calendar__weekdays,
.checkin-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}.checkin-calendar__days.is-loading {
    opacity: 0.45;
    pointer-events: none;
}.checkin-calendar__weekday {
    text-align: center;
    font-size: 11px;
    color: var(--ck-text-3);
    padding-bottom: 8px;
}.checkin-calendar__day {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
    border-radius: 10px;
    position: relative;
}.checkin-calendar__day.is-empty {
    visibility: hidden;
}.checkin-calendar__day-num {
    font-size: 13px;
    color: var(--ck-text-2);
    line-height: 1.2;
}.checkin-calendar__day.is-checked .checkin-calendar__day-num,
.checkin-calendar__day.is-today .checkin-calendar__day-num {
    color: var(--ck-text);
    font-weight: 600;
}.checkin-calendar__day.is-today {
    background: var(--channel-panel-hover);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ck-accent) 35%, transparent);
}.checkin-calendar__today-tag {
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.4;
    color: #fff;
    background: var(--ck-accent);
}.checkin-calendar__check {
    margin-top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: var(--ck-accent);
}.checkin-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px 16px;
    border-top: 1px solid var(--ck-border);
    background: var(--ck-surface);
}.checkin-panel__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ck-text-2);
    text-decoration: none;
}.checkin-panel__footer-link:hover {
    color: var(--ck-accent);
}.checkin-panel__footer-link.is-muted {
    opacity: 0.7;
}.checkin-panel__footer-rule {
    font-size: 12px;
    color: var(--ck-text-3);
}/* Modal chrome — app-layout overlay & shell (design batch) */
.app-layout-active .mika-modal {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}.app-layout-active .mika-modal-content {
    background: var(--mika-color-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}.app-layout-active .mika-modal-content .close {
    top: 14px;
    right: 14px;
    background: #f3f4f6;
    border-radius: 50%;
    box-shadow: none;
    transform: none;
}/* Native close buttons keep the existing modal geometry while exposing a keyboard target. */
.mika-modal-content .close,
.mika-drawer .close {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}.app-layout-active .mika-modal-content .close:hover {
    box-shadow: none;
    transform: none;
}.app-layout-active .mika-modal-content .close i {
    color: #6b7280;
    opacity: 1;
}/* 签到阶梯/统计/按钮样式（账户签到页复用；原弹窗壳已下线） */
.mika-checkin {
    padding: 36px 36px 28px;
    background: var(--mika-color-surface, #fff);
    color: var(--mika-color-text, #171b26);
    text-align: center;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible;
}.mika-checkin__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    width: 96px;
    height: 96px;
    color: var(--mika-color-primary, #3b44f6);
}.mika-checkin__hero-img {
    width: 88px;
    height: 88px;
    object-fit: contain;
}.mika-checkin__hero-fallback,
.mika-checkin__hero-svg {
    width: 88px;
    height: 88px;
    display: block;
    color: inherit;
}.mika-checkin__head {
    margin-bottom: 28px;
}.mika-checkin__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
}.mika-checkin__title-mark,
.mika-checkin__stat-mark,
.mika-checkin__diamond {
    color: var(--mika-color-primary);
    display: inline-flex;
    flex-shrink: 0;
}.mika-checkin__subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #9299a8;
    font-weight: 400;
}.mika-checkin__track {
    --mika-checkin-dot-size: 36px;
    margin: 0 0 28px;
    padding: 0 4px;
}.mika-checkin__days,
.mika-checkin__rail,
.mika-checkin__rewards {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
}.mika-checkin__days {
    margin-bottom: 10px;
}.mika-checkin__rewards {
    margin-top: 10px;
}.mika-checkin__rail {
    position: relative;
    min-height: var(--mika-checkin-dot-size);
}.mika-checkin__line {
    position: absolute;
    left: 7.15%;
    right: 7.15%;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #e8ebf0;
    z-index: 0;
    pointer-events: none;
}.mika-checkin__day,
.mika-checkin__reward {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-weight: 600;
    color: #b0b6c2;
}.mika-checkin__day {
    font-size: 12px;
    font-weight: 500;
}.mika-checkin__reward {
    font-size: 13px;
}.mika-checkin__dot {
    position: relative;
    z-index: 1;
    width: var(--mika-checkin-dot-size);
    height: var(--mika-checkin-dot-size);
    border-radius: 50%;
    border: 2px solid #e0e4eb;
    background: var(--mika-color-surface, #fff);
    color: #b0b6c2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}.mika-checkin__dot i {
    font-size: 18px;
    line-height: 1;
}.mika-checkin__day.is-done,
.mika-checkin__day.is-current,
.mika-checkin__reward.is-done,
.mika-checkin__reward.is-current {
    color: var(--mika-color-primary);
}.mika-checkin__dot.is-done {
    border-color: var(--mika-color-primary);
    background: var(--mika-color-primary);
    color: #fff;
}.mika-checkin__dot.is-current {
    border-color: var(--mika-color-primary);
    border-width: 2.5px;
    background: var(--mika-color-surface, #fff);
    color: var(--mika-color-primary);
}.mika-checkin__stats {
    display: flex;
    align-items: stretch;
    margin: 0 0 24px;
    padding: 18px 8px;
    border-radius: var(--mika-radius, 14px);
    background: #f7f8fa;
}.mika-checkin__stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}.mika-checkin__stat-divider {
    width: 1px;
    align-self: stretch;
    background: #e6e8ee;
    flex-shrink: 0;
}.mika-checkin__stat-label {
    font-size: 13px;
    line-height: 1;
    color: #8b92a0;
}.mika-checkin__stat-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
}.mika-checkin__stat-value strong {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
}.mika-checkin__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: var(--mika-color-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mika-color-primary) 22%, transparent);
    transition: background .15s ease, opacity .15s ease;
}.mika-checkin__btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mika-color-primary) 85%, #000);
}.mika-checkin__btn:disabled,
.mika-checkin__btn.is-signed {
    background: #e8ecf1;
    color: #7a8494;
    box-shadow: none;
    cursor: not-allowed;
}.mika-checkin__btn.is-loading {
    opacity: .85;
}.mika-checkin__footer {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #b0b6c2;
}@media (max-width: 560px) {
    .mika-checkin {
        --mika-checkin-dot-size: 30px;
        padding: 28px 20px 22px;
    }
    .mika-checkin__title {
        font-size: 24px;
    }
    .mika-checkin__day {
        font-size: 11px;
    }
    .mika-checkin__dot {
        font-size: 12px;
    }
    .mika-checkin__reward {
        font-size: 12px;
    }
    .mika-checkin__stat-value strong {
        font-size: 24px;
    }
}/* Report modal — design 56-举报弹窗 (pixel) */
.mika-modal-content:has(.report-container),
.app-layout-active .mika-modal-content:has(.report-container) {
    width: 390px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    overflow: visible;
}.mika-modal-content:has(.report-container) .close,
.app-layout-active .mika-modal-content:has(.report-container) .close {
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #9aa2b2;
    display: flex;
    align-items: center;
    justify-content: center;
}.mika-modal-content:has(.report-container) .close:hover,
.app-layout-active .mika-modal-content:has(.report-container) .close:hover {
    background: transparent;
    color: #6b7280;
    box-shadow: none;
    transform: none;
}.mika-modal-content:has(.report-container) .close i,
.app-layout-active .mika-modal-content:has(.report-container) .close i {
    font-size: 20px;
    color: inherit;
    opacity: 1;
    font-weight: 400;
}.mika-modal-content:has(.report-container) .report-container,
.app-layout-active .mika-modal-content:has(.report-container) .report-container {
    padding: 22px 20px 16px;
    color: #202532;
}.mika-modal-content:has(.report-container) .colorful-header,
.app-layout-active .mika-modal-content:has(.report-container) .colorful-header {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}.mika-modal-content:has(.report-container) .report-header-icon,
.app-layout-active .mika-modal-content:has(.report-container) .report-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffe4e4;
    color: #f92b42;
    font-size: 26px;
    flex-shrink: 0;
}.mika-modal-content:has(.report-container) .colorful-header .title,
.app-layout-active .mika-modal-content:has(.report-container) .colorful-header .title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #202532;
}.mika-modal-content:has(.report-container) .content-wrap,
.app-layout-active .mika-modal-content:has(.report-container) .content-wrap {
    padding: 0;
}.mika-modal-content:has(.report-container) .report-post-label,
.app-layout-active .mika-modal-content:has(.report-container) .report-post-label {
    margin: 16px 0 0;
    text-align: left;
    color: #5b6575;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}.mika-modal-content:has(.report-container) .report-reason-label,
.app-layout-active .mika-modal-content:has(.report-container) .report-reason-label {
    margin: 14px 0 10px;
    text-align: left;
    color: #5b6575;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}.mika-modal-content:has(.report-container) .report-types,
.app-layout-active .mika-modal-content:has(.report-container) .report-types {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 0 2px;
    font-size: 14px;
}.mika-modal-content:has(.report-container) .report-types .type-item,
.app-layout-active .mika-modal-content:has(.report-container) .report-types .type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    color: #303746;
    cursor: pointer;
    user-select: none;
}.mika-modal-content:has(.report-container) .report-types .type-item.active,
.app-layout-active .mika-modal-content:has(.report-container) .report-types .type-item.active {
    border: 0;
    background: transparent;
    color: #202532;
}.mika-modal-content:has(.report-container) .report-types input[type="radio"],
.app-layout-active .mika-modal-content:has(.report-container) .report-types input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid #c5cad3;
    border-radius: 50%;
    background: var(--mika-color-surface, #fff);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}.mika-modal-content:has(.report-container) .report-types input[type="radio"]:checked,
.app-layout-active .mika-modal-content:has(.report-container) .report-types input[type="radio"]:checked {
    border-color: #f92b42;
    background: var(--mika-color-surface, #fff);
}.mika-modal-content:has(.report-container) .report-types input[type="radio"]:checked::after,
.app-layout-active .mika-modal-content:has(.report-container) .report-types input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f92b42;
    transform: translate(-50%, -50%);
}.mika-modal-content:has(.report-container) .form-item.mika-report-desc,
.app-layout-active .mika-modal-content:has(.report-container) .form-item.mika-report-desc {
    position: relative;
    display: block;
    margin: 0;
}.mika-modal-content:has(.report-container) .form-item textarea,
.app-layout-active .mika-modal-content:has(.report-container) .form-item textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    height: auto;
    padding: 12px 12px 28px;
    border: 1px solid #d9d8d8;
    border-radius: 10px;
    background: var(--mika-color-surface, #fff);
    color: #303746;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    resize: none;
}.mika-modal-content:has(.report-container) .form-item textarea::placeholder,
.app-layout-active .mika-modal-content:has(.report-container) .form-item textarea::placeholder {
    color: #a0a7b4;
}.mika-modal-content:has(.report-container) .form-item textarea:focus,
.app-layout-active .mika-modal-content:has(.report-container) .form-item textarea:focus {
    border-color: #f96a7c;
    box-shadow: 0 0 0 2px rgba(249, 43, 66, 0.08);
    outline: none;
    background: var(--mika-color-surface, #fff);
}.mika-modal-content:has(.report-container) .mika-report-count,
.app-layout-active .mika-modal-content:has(.report-container) .mika-report-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: #a0a7b4;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}.mika-modal-content:has(.report-container) .form-button,
.app-layout-active .mika-modal-content:has(.report-container) .form-button {
    padding: 16px 0 0;
}.mika-modal-content:has(.report-container) .form-button button,
.app-layout-active .mika-modal-content:has(.report-container) .form-button button {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #f92b42;
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}.mika-modal-content:has(.report-container) .form-button button:hover,
.app-layout-active .mika-modal-content:has(.report-container) .form-button button:hover {
    background: #e5233a;
}.mika-modal-content:has(.report-container) .form-button button:active,
.app-layout-active .mika-modal-content:has(.report-container) .form-button button:active {
    background: #d41e34;
}@media (max-width: 900px) {
    .checkin-panel {
        grid-template-columns: 1fr;
    }

    .checkin-panel__left {
        border-right: none;
        border-bottom: 1px solid var(--ck-border);
    }
}/******顶部用户信息** */
.menu-user-box {
    position: relative;
    margin-left: 0;
}.menu-user-box .menu-logun-btn {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-primary, #1f2937);
    background-color: var(--bg-muted-color, #f3f4f6);
    border: 1px solid var(--border-color-base, rgba(0, 0, 0, 0.06));
    box-sizing: border-box;
}.menu-user-box .menu-logun-btn:hover {
    color: var(--theme-color, #7b61ff);
    border-color: color-mix(in srgb, var(--theme-color, #7b61ff) 28%, transparent);
    background-color: color-mix(in srgb, var(--theme-color, #7b61ff) 8%, transparent);
}.menu-user-box .user-avatar {
    cursor: pointer;
}.menu-user-box .menu-user-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
}.menu-user-box .menu-user-avatar-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}.menu-user-box .user-avatar-notify-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--mika-color-surface, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 25%, transparent);
    pointer-events: none;
    z-index: 1;
}.menu-user-box .menu-user-trigger:focus-visible {
    border-radius: 999px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mika-color-primary, var(--theme-color)) 35%, transparent);
}.user-menu-wrap {
    visibility: hidden;
    position: absolute;
    min-width: 312px;
    padding-top: 8px;
    z-index: 99;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    right: 0;
    pointer-events: none;
}.menu-user-box:hover .user-menu-wrap,
.menu-user-box.is-open .user-menu-wrap,
.menu-user-box:focus-within .user-menu-wrap {
    opacity: 1;
    transform: translateY(0);
    visibility: unset;
    pointer-events: auto;
}.user-menu-wrap .user-menu-container {
    width: 100%;
    min-height: 100px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    user-select: none;
    border-radius: var(--mika-radius, var(--radius));
    border: 1px solid var(--mika-color-border-muted, var(--border-color-base));
    background: var(--mika-color-surface, var(--bg-main-color, #fff));
    overflow: hidden;
}.user-menu-wrap .user-menu-content {
    padding: 12px;
}.user-menu-content--convert > div {
    margin-bottom: 8px;
}.user-menu-content--convert > div:last-child {
    margin-bottom: 0;
}/* —— Identity / VIP 分离骨架（不再糊成一体卡） —— */
.user-menu-content .user-account-panel {
    margin-bottom: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    box-sizing: border-box;
}.user-menu-content .user-account-panel:has(.user-info-item--profile.is-vip) {
    border-color: transparent;
}.user-menu-content .user-account-panel > .user-info-item,
.user-menu-content .user-account-panel > .vip-panel-item {
    margin-bottom: 8px !important;
}.user-menu-content .user-account-panel > .vip-panel-item:last-child,
.user-menu-content .user-account-panel > .user-info-item:last-child {
    margin-bottom: 0 !important;
}.user-menu-content .user-info-item {
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: visible;
    margin-bottom: 8px !important;
}.user-menu-content .user-info-item--profile {
    align-items: center;
    gap: 4px;
    padding: 2px 2px 2px 4px;
    margin-bottom: 8px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    overflow: visible;
}.user-menu-content .user-account-panel .user-info-item--profile {
    margin-bottom: 8px !important;
}.user-menu-content .user-info.mika-flex {
    align-items: center;
    min-width: 0;
    flex: 1;
    gap: 12px;
    padding: 4px 0;
}.user-menu-content .user-info-item--profile .user-info.mika-flex {
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    min-width: 0;
}.user-menu-content .user-info > .user-name,
.user-menu-content .user-info-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    justify-content: center;
}.user-menu-content .user-info-head {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}.user-menu-content .user-info-head .user-info-name {
    flex: 1;
    min-width: 0;
}.user-menu-content .user-info .user-info-avatar-link {
    margin-right: 0;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: auto;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transition: transform .15s ease;
}.user-menu-content .user-info-item--profile.is-vip .user-info-avatar-link {
    background: transparent;
}.user-menu-content .user-info-item--profile .user-info-avatar-link:hover {
    filter: none;
    transform: scale(1.03);
}.user-menu-content .user-info-item--profile .user-info-avatar-link::after {
    content: none;
}.user-menu-content .user-info-item--profile.is-vip .user-info-avatar-link::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--mika-color-primary) 55%, transparent);
    pointer-events: none;
}.user-menu-content .user-info .user-avatar {
    --avatar-size: 44px;
    width: var(--avatar-size);
    height: var(--avatar-size);
}.user-menu-content .user-info-item--profile .user-avatar {
    --avatar-size: 44px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mika-color-surface-muted, #f1f5f9);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}.user-menu-content .user-info-item--profile .user-avatar img {
    border-radius: 999px;
}.user-menu-content .user-info .user-name,
.user-menu-content .user-info-meta .user-name {
    font-size: 15px;
}.user-menu-content .user-info-name {
    max-width: 100%;
    min-width: 0;
    display: block;
}.user-menu-content .user-info-name .user-name {
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--mika-color-text, #0f172a);
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}.user-menu-content .user-info-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
}.user-menu-content .user-info-meta-dot {
    display: none;
}.user-menu-content .user-info-uid {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mika-color-text-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color .15s ease;
}.user-menu-content .user-info-uid:hover {
    border: 0;
    background: transparent;
    color: var(--mika-color-primary);
}.user-menu-content .user-info-uid:active {
    transform: none;
}.user-menu-content .user-info-uid:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mika-color-primary) 40%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}.user-menu-content .user-uid-label {
    font-weight: 700;
    font-size: 11px;
    color: inherit;
    letter-spacing: 0.04em;
    opacity: 0.7;
    text-transform: uppercase;
}.user-menu-content .user-uid-sep {
    display: none;
}.user-menu-content .user-uid-value {
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    color: inherit;
    font-size: 11px;
    font-weight: 650;
    border-bottom: 0;
}.user-menu-content .user-uid-copy {
    display: none;
}.user-menu-content .user-info-uid:hover .user-uid-copy {
    display: none;
}.user-menu-content .user-info .desc,
.user-menu-content .user-info-meta .desc {
    display: none;
    margin: 0;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.4;
    color: var(--mika-color-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.user-menu-content .user-info-item--profile.has-desc .user-info .desc,
.user-menu-content .user-info-item--profile.has-desc .user-info-meta .desc {
    display: block;
}.user-menu-content .user-info-btn {
    padding: 6px 12px;
    margin-left: 5px;
    background: var(--bg-muted-color);
    font-size: 14px;
    border-radius: var(--radius);
    color: var(--color-text-regular);
    flex-shrink: 0;
}.user-menu-content .user-info-actions {
    display: contents;
}.user-menu-content .user-info-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mika-color-text-subtle, #94a3b8);
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}.user-menu-content .user-info-logout-text {
    display: none;
}.user-menu-content .user-info-logout i {
    display: block;
    font-size: 16px;
    line-height: 1;
}.user-menu-content .user-info-logout:hover {
    color: var(--mika-color-heat, #ea580c);
    background: color-mix(in srgb, var(--mika-color-heat, #ea580c) 8%, transparent);
    box-shadow: none;
}.user-menu-content .user-info-logout:active {
    transform: none;
}.user-menu-content .user-info-logout:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mika-color-primary) 40%, transparent);
    outline-offset: 1px;
}/* —— VIP：独立 Membership Strip —— */
.user-menu-content .vip-panel-item {
    position: relative;
    z-index: 0;
    margin-bottom: 8px !important;
    white-space: normal;
}.user-menu-content .user-account-panel .vip-panel-item {
    margin-bottom: 8px !important;
}.user-menu-content .vip-panel-item .vip-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    background: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff));
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--mika-color-primary) 14%, var(--mika-color-border, #e2e8f0));
    color: var(--mika-color-text, #0f172a);
    box-sizing: border-box;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}.user-menu-content .vip-panel-item .vip-panel:hover {
    border-color: color-mix(in srgb, var(--mika-color-primary) 28%, var(--mika-color-border, #e2e8f0));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mika-color-primary) 10%, transparent);
}.user-menu-content .user-account-panel--vip-only .vip-panel-item .vip-panel {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mika-color-primary) 18%, var(--mika-color-border, #e2e8f0));
}.user-menu-content .vip-panel-item .vip-panel::before,
.user-menu-content .vip-panel-item .vip-panel::after {
    content: none;
    display: none;
}.user-menu-content .vip-panel-item--inactive .vip-panel {
    background: var(--mika-color-surface-muted, #f1f5f9);
    background-image: none;
    border-color: color-mix(in srgb, var(--mika-color-border, #cbd5e1) 80%, transparent);
    border-style: solid;
    box-shadow: none;
}.user-menu-content .vip-panel-item--inactive .vip-panel:hover {
    border-color: color-mix(in srgb, var(--mika-color-border, #94a3b8) 70%, transparent);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}.user-menu-content .vip-panel-item--urgent .vip-panel {
    background: color-mix(in srgb, var(--mika-color-heat, #ea580c) 8%, var(--mika-color-surface, #fff));
    background-image: none;
    border-color: color-mix(in srgb, var(--mika-color-heat, #ea580c) 22%, var(--mika-color-border, #e2e8f0));
    box-shadow: none;
}.user-menu-content .vip-panel-item--urgent .vip-panel:hover {
    border-color: color-mix(in srgb, var(--mika-color-heat, #ea580c) 36%, var(--mika-color-border, #e2e8f0));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mika-color-heat, #ea580c) 12%, transparent);
}.user-menu-content .vip-panel-item--stable .vip-panel {
    box-shadow: none;
}.user-menu-content .vip-panel-item--permanent .vip-panel {
    background: color-mix(in srgb, var(--mika-color-primary) 10%, var(--mika-color-surface, #fff));
    border-color: color-mix(in srgb, var(--mika-color-primary) 20%, var(--mika-color-border, #e2e8f0));
    box-shadow: none;
}.user-menu-content .vip-panel-item .vip-panel-link {
    flex: 1;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}.user-menu-content .vip-panel-info {
    align-items: center;
    gap: 10px;
    min-width: 0;
}.user-menu-content .vip-panel-info .vip-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mika-color-primary) 14%, transparent);
    border: 0;
    box-shadow: none;
}.user-menu-content .vip-panel-item--inactive .vip-panel-info .vip-icon {
    background: color-mix(in srgb, var(--mika-color-border, #cbd5e1) 35%, transparent);
    border: 0;
    box-shadow: none;
}.user-menu-content .vip-panel-info .vip-icon i {
    font-size: 16px;
    line-height: 1;
    color: var(--mika-color-primary);
}.user-menu-content .vip-panel-item--inactive .vip-panel-info .vip-icon i {
    color: var(--mika-color-text-muted, #64748b);
    opacity: 1;
}.user-menu-content .vip-panel-item--urgent .vip-panel-info .vip-icon {
    border: 0;
    background: color-mix(in srgb, var(--mika-color-heat, #ea580c) 14%, transparent);
}.user-menu-content .vip-panel-item--urgent .vip-panel-info .vip-icon i {
    color: var(--mika-color-heat, #ea580c);
}.user-menu-content .vip-panel-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}.user-menu-content .vip-panel-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    color: var(--mika-color-text, #0f172a);
}.user-menu-content .vip-panel-item--inactive .vip-panel-title {
    color: var(--mika-color-text, #0f172a);
}.user-menu-content .vip-panel-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}.user-menu-content .vip-panel-name {
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--mika-color-primary) 78%, var(--mika-color-text, #0f172a));
}.user-menu-content .vip-panel-item--inactive .vip-panel-name {
    color: var(--mika-color-text, #0f172a);
}.user-menu-content .vip-panel-perm-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mika-color-primary);
    background: color-mix(in srgb, var(--mika-color-primary) 10%, transparent);
    border: 0;
}.user-menu-content .user-info-name .user-lv,
.user-menu-content .user-info-meta-row .user-lv {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mika-color-primary);
    background: color-mix(in srgb, var(--mika-color-primary) 12%, transparent);
    border: 0;
    flex-shrink: 0;
    gap: 4px;
}.user-menu-content .user-info-meta-row .user-lv--icon {
    height: 22px;
    padding: 0 3px;
    background: transparent;
}.user-menu-content .user-info-meta-row .user-lv--icon .lv-img-icon {
    display: block;
    width: auto;
    height: 18px;
    max-width: 48px;
    object-fit: contain;
    border-radius: 0;
    flex-shrink: 0;
}.user-menu-content .vip-panel-status {
    display: inline;
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    color: var(--mika-color-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
}.user-menu-content .vip-panel-item--inactive .vip-panel-status {
    color: var(--mika-color-text-muted, #64748b);
    font-weight: 550;
    font-size: 12px;
    font-family: inherit;
}.user-menu-content .vip-panel-item--urgent .vip-panel-status {
    color: var(--mika-color-heat, #ea580c);
    font-weight: 700;
}.user-menu-content .vip-panel-item--permanent .vip-panel-status {
    color: var(--mika-color-primary);
    font-weight: 550;
    font-family: inherit;
    font-size: 12px;
}.user-menu-content .vip-panel-pitch {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--mika-color-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.user-menu-content .vip-panel-item--inactive .vip-panel-pitch {
    color: var(--mika-color-text-muted, #6b7280);
}.user-menu-content .vip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    padding: 7px 12px;
    margin-left: 0;
    border-radius: 999px;
    border: 0;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    letter-spacing: 0.01em;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}.user-menu-content .vip-btn::before {
    content: none;
    display: none;
}.user-menu-content .vip-btn--primary {
    background: var(--mika-color-primary, #3b82f6);
    color: var(--mika-color-on-primary, #fff);
    box-shadow: none;
}.user-menu-content .vip-panel-item--urgent .vip-btn--primary {
    background: var(--mika-color-heat, #ea580c);
    color: #fff;
    box-shadow: none;
}.user-menu-content .vip-panel-item--inactive .vip-btn--primary {
    background: var(--mika-color-primary, var(--theme-color));
    color: var(--mika-color-on-primary, #fff);
    box-shadow: none;
}.user-menu-content .vip-btn--primary:hover {
    transform: translateY(-1px);
    opacity: 1;
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mika-color-primary) 28%, transparent);
}.user-menu-content .vip-panel-item--urgent .vip-btn--primary:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mika-color-heat, #ea580c) 28%, transparent);
}.user-menu-content .vip-panel-item--inactive .vip-btn--primary:hover {
    color: var(--mika-color-on-primary, #fff);
}.user-menu-content .vip-btn--ghost {
    background: color-mix(in srgb, var(--mika-color-primary) 10%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
    border: 0;
    box-shadow: none;
}.user-menu-content .vip-btn--ghost:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 16%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
    transform: translateY(-1px);
    box-shadow: none;
}

/* —— 资产条（扫读，不抢 VIP） —— */
.user-assets-item--strip {
    margin-bottom: 8px !important;
}.user-assets-item--strip .user-assets {
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--mika-color-surface-muted, var(--bg-muted-color, #f5f7f9));
    border: 1px solid var(--mika-color-border-muted, var(--border-color-base));
}.user-assets-item--strip .user-asset-cell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 6px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background-color .15s ease;
}.user-assets-item--strip .user-asset-cell:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 8%, transparent);
}.user-assets-item--strip .user-assets-divider {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--mika-color-border, var(--border-color-base));
    flex-shrink: 0;
}.user-assets-item--strip .user-assets-name {
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    color: var(--mika-color-text-muted, #6b7280);
}.user-assets-item--strip .user-assets-num {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    font-variant-numeric: tabular-nums;
}.user-assets-item--strip .user-asset-cell--credit .user-assets-num {
    color: var(--mika-color-credit, #f59e0b);
}.user-assets-item--strip .currency {
    margin-right: 1px;
    font-size: 12px;
    font-weight: 600;
}/* 兼容旧双卡类名（若缓存/扩展仍输出） */
.user-assets-item .user-money-card,
.user-assets-item .user-credit-card {
    background: var(--bg-main-color);
    border-radius: var(--radius);
    height: 65px;
    padding: 8px 16px;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    width: calc(50% - 6px);
    border: 1px solid var(--border-color-base);
    overflow: hidden;
}.user-menu-content .links-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 4px !important;
    padding-top: 2px;
}.user-menu-content .links-item--admin {
    margin-top: 2px;
}.user-menu-content .links-item--admin .link-item {
    color: var(--mika-color-text-muted, #6b7280);
    font-size: 13px;
}.user-menu-content .link-item {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 0 10px;
    height: 36px;
    border-radius: 10px;
    color: var(--mika-color-ink-icon, var(--color-text-regular));
    font-size: 13px;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}.user-menu-content .link-item:hover {
    background-color: var(--mika-color-primary-soft, var(--bg-muted-color));
    color: var(--mika-color-text, var(--color-text-primary));
}.user-menu-content .link-title {
    align-items: center;
    min-width: 0;
}.user-menu-content .link-title i {
    margin-right: 12px;
    font-size: 17px;
    line-height: 1;
    color: var(--mika-color-ink-icon, #475569);
}.user-menu-content .link-item:hover .link-title i {
    color: var(--mika-color-primary);
}.user-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: #ef4444;
    color: #fff;
}.user-menu-content .split-line {
    margin: 6px 0 4px;
    width: 100%;
    height: 1px;
    background: var(--mika-color-border-muted, var(--border-color-base));
}/* —— 账户下拉 · 暗色 —— */
.dark-theme .user-menu-wrap .user-menu-container,
html.dark-theme .user-menu-wrap .user-menu-container {
    background: var(--mika-color-surface, #1e1e24);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}.dark-theme .user-menu-content .user-account-panel,
html.dark-theme .user-menu-content .user-account-panel {
    border: 0;
    background: transparent;
}.dark-theme .user-menu-content .user-account-panel:has(.user-info-item--profile.is-vip),
html.dark-theme .user-menu-content .user-account-panel:has(.user-info-item--profile.is-vip) {
    border-color: transparent;
}.dark-theme .user-menu-content .user-info-item--profile,
html.dark-theme .user-menu-content .user-info-item--profile {
    border: 0;
    background: transparent;
    box-shadow: none;
}.dark-theme .user-menu-content .user-info-item--profile .user-info-avatar-link,
html.dark-theme .user-menu-content .user-info-item--profile .user-info-avatar-link {
    background: transparent;
    box-shadow: none;
}.dark-theme .user-menu-content .user-info-item--profile.is-vip .user-info-avatar-link::after,
html.dark-theme .user-menu-content .user-info-item--profile.is-vip .user-info-avatar-link::after {
    border-color: color-mix(in srgb, var(--mika-color-primary) 60%, transparent);
}.dark-theme .user-menu-content .user-info-item--profile .user-avatar,
html.dark-theme .user-menu-content .user-info-item--profile .user-avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.08);
}.dark-theme .user-menu-content .user-info-uid,
html.dark-theme .user-menu-content .user-info-uid {
    background: transparent;
    border: 0;
    color: #94a3b8;
}.dark-theme .user-menu-content .user-info-uid:hover,
html.dark-theme .user-menu-content .user-info-uid:hover {
    background: transparent;
    border: 0;
    color: color-mix(in srgb, var(--mika-color-primary) 75%, #fff);
}.dark-theme .user-menu-content .user-uid-value,
html.dark-theme .user-menu-content .user-uid-value {
    color: inherit;
    border-bottom: 0;
}.dark-theme .user-menu-content .user-info-meta-dot,
html.dark-theme .user-menu-content .user-info-meta-dot {
    display: none;
}.dark-theme .user-menu-content .user-info-actions,
html.dark-theme .user-menu-content .user-info-actions {
    display: contents;
}.dark-theme .user-menu-content .user-info-logout,
html.dark-theme .user-menu-content .user-info-logout {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #64748b;
}.dark-theme .user-menu-content .user-info-logout:hover,
html.dark-theme .user-menu-content .user-info-logout:hover {
    color: #fdba74;
    background: color-mix(in srgb, #ea580c 16%, transparent);
}.dark-theme .user-menu-content .user-info-name .user-lv,
.dark-theme .user-menu-content .user-info-meta-row .user-lv,
html.dark-theme .user-menu-content .user-info-name .user-lv,
html.dark-theme .user-menu-content .user-info-meta-row .user-lv {
    background: color-mix(in srgb, var(--mika-color-primary) 22%, transparent);
    color: color-mix(in srgb, var(--mika-color-primary) 70%, #fff);
}.dark-theme .user-menu-content .vip-panel-item .vip-panel,
html.dark-theme .user-menu-content .vip-panel-item .vip-panel {
    border: 1px solid color-mix(in srgb, var(--mika-color-primary) 28%, rgba(255, 255, 255, 0.1));
    background: color-mix(in srgb, var(--mika-color-primary) 14%, transparent);
    background-image: none;
    box-shadow: none;
    color: #e2e8f0;
}.dark-theme .user-menu-content .vip-panel-item .vip-panel:hover,
html.dark-theme .user-menu-content .vip-panel-item .vip-panel:hover {
    border-color: color-mix(in srgb, var(--mika-color-primary) 42%, rgba(255, 255, 255, 0.12));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}.dark-theme .user-menu-content .user-account-panel--vip-only .vip-panel-item .vip-panel,
html.dark-theme .user-menu-content .user-account-panel--vip-only .vip-panel-item .vip-panel {
    border: 1px solid color-mix(in srgb, var(--mika-color-primary) 28%, rgba(255, 255, 255, 0.1));
}.dark-theme .user-menu-content .vip-panel-item .vip-panel::before,
html.dark-theme .user-menu-content .vip-panel-item .vip-panel::before {
    display: none;
}.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel,
html.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel {
    background: color-mix(in srgb, #fff 5%, transparent);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}.dark-theme .user-menu-content .vip-panel-item--urgent .vip-panel,
html.dark-theme .user-menu-content .vip-panel-item--urgent .vip-panel {
    background: color-mix(in srgb, var(--mika-color-heat, #ea580c) 14%, transparent);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--mika-color-heat, #ea580c) 30%, rgba(255, 255, 255, 0.08));
}.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel-title,
html.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel-title {
    color: #e2e8f0;
}.dark-theme .user-menu-content .vip-panel-title,
html.dark-theme .user-menu-content .vip-panel-title {
    color: #e2e8f0;
}.dark-theme .user-menu-content .vip-panel-name,
html.dark-theme .user-menu-content .vip-panel-name {
    color: color-mix(in srgb, var(--mika-color-primary) 70%, #fff);
}.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel-name,
html.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel-name {
    color: #e2e8f0;
}.dark-theme .user-menu-content .vip-panel-status,
html.dark-theme .user-menu-content .vip-panel-status {
    color: color-mix(in srgb, var(--mika-color-primary) 75%, #fff);
}.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel-status,
html.dark-theme .user-menu-content .vip-panel-item--inactive .vip-panel-status {
    color: #94a3b8;
}.dark-theme .user-menu-content .vip-panel-item--urgent .vip-panel-status,
html.dark-theme .user-menu-content .vip-panel-item--urgent .vip-panel-status {
    color: #fdba74;
}.dark-theme .user-menu-content .vip-panel-info .vip-icon,
html.dark-theme .user-menu-content .vip-panel-info .vip-icon {
    background: color-mix(in srgb, var(--mika-color-primary) 20%, transparent);
    border: 0;
    box-shadow: none;
}.dark-theme .user-menu-content .vip-panel-info .vip-icon i,
html.dark-theme .user-menu-content .vip-panel-info .vip-icon i {
    color: color-mix(in srgb, var(--mika-color-primary) 75%, #fff);
}.dark-theme .user-menu-content .vip-panel-perm-badge,
html.dark-theme .user-menu-content .vip-panel-perm-badge {
    color: color-mix(in srgb, var(--mika-color-primary) 75%, #fff);
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 0;
}.dark-theme .user-menu-content .vip-btn--ghost,
html.dark-theme .user-menu-content .vip-btn--ghost {
    color: color-mix(in srgb, var(--mika-color-primary) 80%, #fff);
    border: 0;
    background: color-mix(in srgb, #fff 8%, transparent);
    box-shadow: none;
}.dark-theme .user-menu-content .vip-btn--ghost:hover,
html.dark-theme .user-menu-content .vip-btn--ghost:hover {
    color: #fff;
    background: color-mix(in srgb, #fff 12%, transparent);
}
.dark-theme .user-assets-item--strip .user-assets,
html.dark-theme .user-assets-item--strip .user-assets {
    background: color-mix(in srgb, #fff 6%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
}.dark-theme .user-assets-item--strip .user-assets-divider,
html.dark-theme .user-assets-item--strip .user-assets-divider {
    background: rgba(255, 255, 255, 0.12);
}/******侧边菜单******/
.site-content {
    display: flex;
}.site-content:has(.sidebar-menu) + .footer .box:before {
    content: '';
    width: var(--channel-width);
    display: inline-block;
    height: 0;
    flex-shrink: 0;
}.footer .box {
    display: flex;
}.content-wrapper {
    flex: 1;
    width: 100%;
}.sidebar-menu {
  width: var(--channel-width);
  position: relative;
  flex-shrink: 0;
}.sidebar-menu + .content-wrapper {
    width: calc(100% - var(--channel-width));
}.sidebar-menu.sidebar-menu--mobile-only {
    display: none;
    width: 0;
}.sidebar-menu .sidebar-menu-desktop,
.sidebar-menu .sidebar-menu-mobile {
    display: contents;
}@media screen and (min-width: 769px) {
    .sidebar-menu .sidebar-menu-mobile.mobile-show {
        display: none !important;
    }
}.sidebar-menu .sidebar-menu-inner {
    position: fixed;
    width: var(--channel-width);
    background-color: var(--channel-bg);
    border-right: 1px solid var(--channel-border);
    box-shadow: var(--channel-shadow);
    z-index: 10;
    top: var(--top-menu-height);
    bottom: 0;
    display: flex;
    flex-direction: column;
}.sidebar-menu .sidebar-section {
    padding: 16px;
    flex-shrink: 0;
}.sidebar-menu .sidebar-section-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 20px;
}.sidebar-menu .sidebar-section-bottom {
    margin-top: auto;
    border-top: 1px solid var(--channel-border);
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}.sidebar-menu .channel-nav .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}.sidebar-menu .sidebar-menu-inner li {
    font-size: 14px;
    display: flex;
    width: 100%;
    margin-bottom: 4px;
}.sidebar-menu .sidebar-menu-inner li a {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--channel-text);
    font-weight: 400;
    line-height: 22px;
    transition: background .15s, color .15s, border-color .15s;
}.sidebar-menu .sidebar-menu-inner li a:hover {
    background-color: var(--channel-item-hover-bg);
    color: var(--channel-text);
}.sidebar-menu .current-menu-item > a,
.sidebar-menu .current-menu-item > .collapse-head,
.sidebar-menu .current-menu-ancestor > .collapse-head,
.sidebar-menu .current-menu-parent > .collapse-head,
.sidebar-menu .menu-collapsible.current-menu-item > .collapse-head,
.sidebar-menu .menu-collapsible.current-menu-ancestor > .collapse-head {
    background-color: color-mix(in srgb, var(--mika-color-primary, var(--channel-accent)) 7%, transparent);
    color: var(--mika-color-primary, var(--channel-accent));
    border: 1px solid color-mix(in srgb, var(--mika-color-primary, var(--channel-accent)) 22%, transparent);
    box-shadow: none;
    font-weight: 600;
}.sidebar-menu .current-menu-item > a::before,
.sidebar-menu .current-menu-item > .collapse-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 14px;
    margin-top: -7px;
    border-radius: 1px;
    background: var(--mika-color-primary, var(--channel-accent));
    box-shadow: 0 0 8px color-mix(in srgb, var(--mika-color-primary, var(--channel-accent)) 45%, transparent);
    pointer-events: none;
}.sidebar-menu .current-menu-item > a:hover,
.sidebar-menu .current-menu-item > .collapse-head:hover,
.sidebar-menu .current-menu-ancestor > .collapse-head:hover,
.sidebar-menu .current-menu-parent > .collapse-head:hover {
    color: var(--channel-accent);
    background-color: var(--channel-item-active-bg, var(--channel-item-hover-bg));
}.sidebar-menu li i {
    margin-right: 12px;
    font-size: 18px;
    line-height: 18px;
    opacity: .85;
    flex-shrink: 0;
}.sidebar-menu .sidebar-menu-inner .menu-sub-title {
    margin-top: 20px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--channel-label);
    margin-bottom: 8px;
    display: block;
    line-height: 18px;
}.sidebar-menu .sidebar-menu-inner .menu-sub-title:first-child {
    margin-top: 0;
}.sidebar-menu .sidebar-menu-inner .menu-sub-title-nested {
    margin-top: 8px;
    padding-left: 40px;
}.sidebar-menu .menu-collapsible {
    flex-direction: column;
    margin-bottom: 4px;
}.sidebar-menu .menu-collapsible .collapse-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--channel-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background .15s, color .15s;
}.sidebar-menu .menu-collapsible .collapse-head:hover {
    background-color: var(--channel-item-hover-bg);
    color: var(--channel-text);
}.sidebar-menu .menu-collapsible .collapse-head .arrow {
    margin-left: auto;
    color: var(--channel-label);
    font-size: 16px;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}.sidebar-menu .menu-collapsible:not(.open) .collapse-head .arrow {
    transform: rotate(-90deg);
}.sidebar-menu .menu-collapsible .collapse-body {
    overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}.sidebar-menu .menu-collapsible:not(.open) .collapse-body {
    max-height: 0;
    opacity: 0;
}.sidebar-menu .sub-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}.sidebar-menu .sub-nav > li > a,
.sidebar-menu .sub-menu > li > a {
    padding-left: 40px;
}.sidebar-menu .badge {
    position: unset;
    padding: 0 6px;
    border-radius: 10px;
    margin-left: auto;
    flex-shrink: 0;
}.sidebar-menu #channel-menu-bottom .menu li:last-of-type a {
    border: 1px solid var(--channel-border);
    justify-content: center;
    height: 40px;
}/******侧边更多菜单******/
.more-menu-container {
    padding: 0;
    position: relative;
    font-size: 14px;
    width: 100%;
}.more-menu-container .more-information {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    border-radius: var(--radius);
    position: relative;
}.more-menu-container .more-information:hover {
    background-color: var(--channel-item-hover-bg, var(--bg-muted-color));
    transition: all .3s;
}.more-menu-container .more-information i {
    margin-right: 0;
    font-size: 18px;
    line-height: 18px;
    width: 20px;
    text-align: center;
    opacity: 0.8;
    flex-shrink: 0;
}.more-menu-container .more-menu-wrap {
    position: absolute;
    left: 0;
    bottom: 56px;
    right: 0;
    display: none;
}.more-menu-container .more-menu-wrap.is-open {
    display: block;
}.more-menu-container .more-menu-wrap .box {
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08), 0 1px 4px 0 rgba(0,0,0,0.04);
}.more-menu-container .more-menu-links {
    display: flex;
    flex-direction: column;
    color: var(--color-text-secondary);
    grid-gap: 12px;
    font-size: 14px;
}.more-menu-container .more-menu-links > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
}.sidebar-menu .sidebar-menu-inner .more-menu-links .menu-sub-title {
    margin: 0;
    padding: 0;
    color: var(--color-text-placeholder);
    border-top: 1px solid var(--border-color-base);
    padding-top: 6px;
}/*底部*/
footer.footer {
    margin-top: var(--gap);
}.footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    width: 100%;
    color: var(--color-text-secondary);
    font-size: 15px;
}.footer .footer-nav {
    padding-top: 16px;
    font-size: 15px;
}.footer ul.footer-links {
    display: flex;
    color: var(--color-text-regular);
    flex-wrap: wrap;
}.footer .footer-links li:first-child {
    color: var(--color-text-secondary);
    margin-left: 0;
}.footer .footer-links li {
    margin: 5px;
}.footer .footer-bottom-left {
    align-items: center;
    display: flex;
}.footer .footer-images {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color-base);
}.footer .footer-images-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}.footer .footer-image-item {
    text-align: center;
}.footer .footer-image-thumb {
    width: 90px;
    margin: 0 auto;
}.footer .footer-image-thumb img {
    width: 100%;
    height: auto;
    display: block;
}.footer .footer-image-text {
    font-size: 13px;
    color: var(--color-text-regular);
    text-align: center;
    margin-top: 4px;
}.footer .footer-widget {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color-base);
    margin: 0 -16px;
}.footer .footer-widget .footer-widget-item {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 0 16px;
    max-width: calc(100% / 4);
}.footer .widget .widget-box {
    padding:0;
}.footer-widget-item h2.widget-title {
    padding: 0;
    color: var(--color-text-secondary);
    text-align: center;
    display: block;
}.footer-widget-item .widget-title:before,
.footer-widget-item .widget-title:after {
    display: none;
}.footer .links-widget {
    text-align: center;
}/*首页模块*/
.home-item {
    position: relative;
    margin-bottom:50px;
}.home-item .wrapper {
    display: flex;
}.home-item .modules-top {
    margin-bottom: calc(var(--gap) + 4px);
}.home-item .modules-top .module-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}.home-item .modules-top .module-top-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}.home-item .modules-top .module-title {
    font-size: 24px;
}.home-item .modules-top .module-action {
    position: absolute;
    right: 0;
}.home-item .modules-top .module-action > * {
    display: flex;
    align-items: center;
    margin-left: 12px;
    font-size: 13px;
    padding: 7px 10px;
    background: var(--bg-main-color);
    color: var(--color-text-regular);
}.home-item .modules-top .module-action i {
    font-size: 16px;
    line-height: 16px;
    transition: all .5s;
}.home-item .modules-top .module-action > div:hover i {
    transform: rotate(-1turn);
}.home-item .modules-top .module-action > *:first-of-type span {
    margin-left: 5px;
}.home-item .module-nav {
    margin-left: 16px;
}.home-item .module-nav .post-cats-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
}.home-item .module-nav .post-cats-list .cat-item {
    margin-left: 12px;
    padding: 4px 10px;
    color: var(--color-text-regular);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 1s;
}.home-item .modules-bottom.load-more {
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
}.home-item .modules-bottom.load-more span {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}.home-item .modules-bottom.module-load-button {
    padding-top: 20px;
    text-align: center;
}.home-item .modules-bottom.module-load-button .button {
    min-width: 140px;
    justify-content: center;
}.home-item .modules-bottom.module-load-page {
    padding-top: 20px;
    text-align: center;
}.home-item .module-ajax-pagination {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}.home-item .module-ajax-pagination .btn-prev,
.home-item .module-ajax-pagination .mika-pager .number {
    margin: 0;
    padding: 0 2px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--color-text-secondary);
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: var(--bg-main-color);
    border: 1px solid var(--border-color-base);
}.home-item .module-ajax-pagination .mika-pager {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}.home-item .module-ajax-pagination .mika-pager .number.active {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    cursor: default;
}.home-item .module-ajax-pagination .btn-prev:disabled {
    opacity: .45;
    cursor: not-allowed;
}/***slider幻灯***/
.grid-container {
    /*position: relative;*/
    /*display: grid;*/
    /*grid-gap: 20px 12px;*/
    /*grid-template-columns: repeat(5, 1fr) !important;*/
    /*width: 100%;*/
    /*margin-bottom: 56px;*/
}.grid-container>div:nth-of-type(1n + 8) {
    /*display: none !important;*/
}.slider-container {
    position: relative;
    grid-column: 1/3;
    grid-row: 1/3;
}.slider-container .slider-body {
    position: relative;
    width: 100%;
    height: 100%;/**calc(100% - 52px)**/
    background-color: var(--bg-main-color);
    border-radius: var(--radius);
    overflow: hidden;
}/*1列单幻灯*/
.grid-container {
    /*display: block;*/
}.grid-container .slider-container {
    padding-top: 30%;
}.grid-container .slider-container .slider-body {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}.slider-container .slider-body .carousel-area {
    /*position: relative;*/
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}.carousel-area .carousel__slide {
    --carousel-slide-width:100%;
    padding: 0;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    /* fancybox.css 默认 overscroll-behavior:contain + overflow 会截住滚轮，导致悬停幻灯无法滚页面 */
    overscroll-behavior: auto;
}
.slider-container .carousel__viewport,
.carousel-area .carousel__viewport {
    overscroll-behavior: auto;
}.slider-container .slider-body .carousel-area div,
.carousel-area .carousel__slide img {
    width: 100%;
    height: 100%;
}.carousel-area .carousel__dots {
    bottom: 27px;
    z-index: 9;
    top: unset;
    left: 17px;
    justify-content: flex-start;
}.carousel-area .carousel__dots .carousel__dot {
    width: 12px;
    display: inline-block;
    height: 4px;
    margin: 0 3px;
    border-radius: 4px;
    background-color: rgba(255,255,255,.4);
    overflow: hidden;
    cursor: pointer;
    transition: width .3s;
}.carousel-area .carousel__dots .carousel__dot.is-selected { 
    width: 47px;
    background-color: white;
}.carousel-area .carousel__dots .carousel__dot:after {
    display: none;
}.slider-container .slider-body .carousel-footer {
    padding: 0 16px;
}.carousel-footer .carousel-mask {
    /*background-color: #2f3238;*/
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(0,#2f3238 11%,transparent 20%);
    height: 780px;
    transition: all .3s;
}.carousel-footer .carousel-tool {
    color: white;
    position: absolute;
    bottom: 50px;
    left: 17px;
    right: 17px;
    z-index: 2;
    transition: filter .3s cubic-bezier(.645,.045,.355,1);
}.carousel-footer .carousel-tool > a {
    height: 28px;
    line-height: 28px;
    display: none;
}.carousel-footer .carousel-tool span {
    display: block;
    font-weight: 400;
    line-height: 25px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    
}.grid-container .slider-item-card {
    position: relative;
    width: 100%;
}.grid-container .slider-item-card .item-card-image {
    position: relative;
    padding-top: 56.25%;
    background-color: #f1f2f3;
    border-radius: var(--radius);
    height: 0;
}.slider-item-card .item-card-image .slider-item-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}.slider-info-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    padding: 12px;
    color: var(--color-white);
    background: linear-gradient( 1turn ,rgba(0,0,0,.5),transparent);
}.slider-info-box h2 {
    margin: 10px 0;
    font-size: 14px;
}.slider-info-box .slider-user {
    display: flex;
    align-items: center;
    font-size: 13px;
}.slider-info-box .user-name {
    margin-right: 12px;
}.slider-info-box .slider-user .user-avatar {
    width: 22px;
    height: 22px;
    margin-right: 6px;
}/**************横向滚动幻灯***********************/
#swiper-scroll,
#bs-scroll {
    display: flex;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    position: relative;
}#swiper-scroll .carousel__viewport {
    width: 100%;
    height: 100%;
    overscroll-behavior: auto;
}
#swiper-scroll .carousel__slide {
    overscroll-behavior: auto;
}/*#swiper-scroll > * {*/
/*    display: inline-flex;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/*#swiper-scroll > * > * {*/
/*    display: inline-block;*/
/*    flex: 0 0 auto;*/
/*}*/

#bs-scroll > * {
    display:inline-flex;
    flex: 0 0 auto;
}/******************文章卡片样式***********************/

/******文章卡片样式1（post_1）网格*********/
.item-in {
    position: relative;
}.post-list .post-list-item .item-in,
.user-list .user-list-item .item-in {
    cursor: pointer;
}.post-list .post-list-item .item-in a,
.user-list .user-list-item .item-in a,
.post-thumbnail .thumb-link,
.post-thumbnail .thumb-link img {
    cursor: pointer;
}.post-thumbnail {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}.post-thumbnail .thumb-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}.post-info {
    padding: 12px;
}.post-info h2 {
    margin-bottom: 4px;
    font-size: 15px;
}.post-1 .post-info h2 {
    min-height: auto;
    --line-clamp: 2;
    line-height: 21px;
}.post-info .post-excerpt {
    font-size: 13px;
    color: var(--color-text-secondary);
    --line-clamp: 1;
    margin-bottom: auto;
}.post-info .post-info-buttom {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    color: var(--color-text-secondary);
    grid-gap: 8px;
}.post-info .post-info-buttom > *:nth-child(1) {
    flex-grow: 1;
    text-align: left;
}.post-info .post-info-buttom .post-user {
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-size: 13px;
}.post-info-buttom .post-user .user-avatar {
    width: 22px;
    height: 22px;
    margin-right: 5px;
}.post-info-buttom .post-user span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 100px;
}.post-info-buttom span i {
    margin-right: 2px;
    font-size: 13px;
}/******文章卡片样式1（post_2）列表*********/

.buttom-right > span {
    margin-left: 8px;
}.post-2 .item-in {
    display: flex;
    padding: 16px;
    height: 100%;
}.post-2 .item-in > .post-module-thumb {
    width: 25%;
    flex-shrink: 0;
}.post-2 .post-info {
    flex: 1;
    padding: 0px 0 0 16px;
    display: flex;
    flex-direction: column;
}.post-2 .post-info h2 {
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 500;
}.post-2 .post-info .post-excerpt {
    font-size: 14px;
    --line-clamp: 2;
    line-height: 1.8;
}.post-2 .post-info-buttom {
    margin-top: auto;
    border-top: none;
}/******文章卡片样式3（post_3）瀑布流*********/
.post-3 .mika-waterfall .item-in {
    -webkit-transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
    transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}.post-3 .mika-waterfall .item-in:hover {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
}.post-3 .post-info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    background-color: rgba(0, 0, 0, 0.3);
    transition: opacity .3s ease;
    opacity: 0;
    border-radius: var(--radius);
    z-index: 2;
}.post-3 .item-in:hover .post-info {
    opacity: 1;
}.post-3 .post-info h2 {
    margin: 0;
    color: var(--color-white);
    font-weight: 600; 
    flex: 1;
    font-size: 14px;
}.post-3 .post-thumb-shadow {
    position: relative;
    margin-top: var(--gap);
}.post-3 .post-thumb-shadow::before,
.post-3 .post-thumb-shadow::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: var(--color-text-primary);
    opacity: 0.2;
    border-radius: var(--radius) var(--radius) 0 0;
    -webkit-transform: scale(0.85);
    transform: scale(0.9);
}.post-3 .post-thumb-shadow::after {
    top: -14px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.1;
}.post-3 .post-module-badges {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    flex-wrap: wrap;
    z-index: 3;
}.post-3 .post-module-badges .badge-item {
    display: inline-block;
    font-size: 12px;
    padding: 4px 12px;
    margin-right: 4px;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-white);
}/***************用户模块样式1************************/
.module-users .mika-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}.user-list-item .item-in {
    padding: 16px;
}.user-post-list {
    display: grid;
    grid-gap: 8px;
    margin-top: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}.user-post-list a {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--border-color-muted);
}.user-post-list .post-thumb {
    height: 0;
    padding-top: 100%;
}.user-post-list img {
  position: absolute;
  top: 0;
  left: 0;
}/***************用户模块样式2************************/
@media screen and (min-width: 768px) {
    .user-2 .mika-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .user-2 .item-in {
        display: flex;
        grid-gap: 24px;
        justify-content: space-between;
        align-items: center;
    }
    
    .user-2 .user-container {
        flex: .3 1;
        flex-direction: column;
        justify-content: center;
    }
    
    .user-2 .user-container> * {
        flex-direction: column;
        text-align: center;
    }
    
    .user-2 .user-container .user-info {
        margin: 10px 0;
    }
    
    .user-2 .user-container .user-avatar {
        width: 70px;
        height: 70px;
    }
    
    .user-2 .user-post-list {
        flex: 1;
        margin: 0;
        grid-gap: 12px;
    }
}/**********404页面*************/
.error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 500px;
}.error-404 img {
    max-width: 350px;
    max-height: 224px;
    opacity: .8;
}.error-404 h1 {
    font-size: 20px;
    margin:26px 0 16px;
    text-align: center;
}/**********空白页面*************/
.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    flex-flow: column;
    color:var(--color-text-placeholder);
    width:100%;
    height: 100%;
}.empty img {
    width: 250px;
    margin-bottom:16px;
    opacity: .5;
}/**********加载*************/
.loading:after {
    content:'';
    background: url(images/loading.svg) no-repeat center center;
    width:24px;
    height:30px;
    display: inline-block;
}/**********文章面包屑导航*************/
.breadcrumb {
    display: flex;
    margin-bottom: 12px !important;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}.breadcrumb > li + li:before {
    content: "/";
    margin: 0 5px;
    color: var(--color-text-placeholder);
    font-size: 14px;
    line-height: 1;
}/**********文章页开始*************/
.mika-single-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: var(--gap);
}.mika-sidebar-left .mika-single-content {
    flex-direction: row-reverse;
}.single .content-area,
.page .content-area {
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}.mika-sidebar-close.single .content-area,
.mika-sidebar-close.page .content-area {
    flex: 1 1 100%;
}.single .mika-single-content > .widget-area,
.page .mika-single-content > .widget-area {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    margin: 0;
}/* 侧栏有小工具或主题内置 aside 模块时都保留右栏，避免只剩 aside 时被整栏隐藏 */
.single .mika-single-content > .widget-area:not(.widget-area-left):not(:has(.widget)),
.page .mika-single-content > .widget-area:not(.widget-area-left):not(:has(.widget)) {
    display: none;
}.single .mika-single-content:not(:has(> .widget-area .widget)):not(:has(> .widget-area-left)) > .content-area,
.page .mika-single-content:not(:has(> .widget-area .widget)):not(:has(> .widget-area-left)) > .content-area {
    flex: 1 1 100%;
}.single-article {
    padding: 28px;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    margin-bottom: var(--gap);
    padding-top: 16px;
}.single-article h1 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
}.article-header {
    margin-bottom: 24px;
}.article-header .post-meta {
    /*margin-bottom: 24px;*/
    /*padding: var(--gap) 0;*/
    /*border-bottom: 1px solid var(--border-color-base);*/
}.article-header .post-meta .post-meta-row {
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    padding-bottom: 16px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color-muted);
    color: var(--color-text-secondary);
}.article-header .post-meta-row .left i {
    margin-right: 3px;
}.article-header .post-meta-row .left > span {
    margin-right: 12px;
}.article-header .post-meta-row .post-categories {
    font-size: 12px;
}.article-header .post-meta-row .post-categories a {
    padding: 4px 7px;
    background: var(--bg-text-color);
    color: var(--color-primary);
    border-radius: var(--radius);
    margin-left: 5px;
}.article-header .post-user-info {
    justify-content: space-between;
    padding: var(--gap) 30px;
    /*background: var(--border-color-muted);*/
    margin: 0px -30px;
}.article-header .left .user-info {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}.article-header .left .user-info .desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 1px;
}.article-header .left .user-avatar {
    margin-right: 8px;
}.article-header .post-user-info .right .follow {
    background-color: var(--color-primary);
}.article-header .post-user-info .right .letter {
    background-color: var(--bg-text-color);
    color: var(--color-primary);
    margin-left: 6px;
}.article-header .post-user-info .right button {
    padding: 4px 12px;
}.post-user-info .right i {
    margin-right: 4px;
}.article-content {
    color: var(--color-text-regular);
    font-size: 15px;
    line-height: 1.8;
    position: relative;
}.article-content :is(h1,
h2,
h3,
h4,
h5,
h6):not(.prompt-block-title) {
    position: relative;
    margin: 1.25em 0 0.75em;
    color: var(--color-text-primary);
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
}.article-content h1:not(.prompt-block-title) {
    font-size: 28px;
}.article-content h2:not(.prompt-block-title) {
    font-size: 22px;
}.article-content h3:not(.prompt-block-title) {
    font-size: 20px;
}.article-content h4:not(.prompt-block-title) {
    font-size: 18px;
}.article-content h5:not(.prompt-block-title) {
    font-size: 16px;
}.article-content h6:not(.prompt-block-title) {
    font-size: 15px;
}.article-content :is(h2,
h3,
h4,
h5,
h6):not(.prompt-block-title)::before {
    content: "";
    border: 4px solid var(--color-primary);
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 11px;
    vertical-align: middle;
    opacity: .9;
    flex-shrink: 0;
}.article-content :is(h2,
h3,
h4,
h5,
h6):not(.prompt-block-title)::after {
    content: "";
    opacity: .3;
    background: var(--color-primary);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    position: absolute;
    bottom: 2px;
    left: 8px;
}.article-content p {
    word-wrap: break-word;
    word-break: normal;
    line-height: 2;
    font-size: 15px;
    font-weight: 400;
}.article-content p,
.article-content :is(table,
ul,
ol,
blockquote,
pre) {
    margin-bottom: var(--gap);
}.article-content em,
.article-content i {
    font-style: italic;
}.article-content strong,
.article-content b {
    font-weight: 700;
}.article-content small {
    font-size: 85%;
}.article-content img,
.article-content .fancybox {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}.article-content .fancybox {
    display: inline-block;
    transition: all .3s;
}.article-content a {
    color: var(--theme-color);
    text-decoration: underline;
}.article-content strong {
    font-weight: 700;
}.article-content blockquote:not(blockquote blockquote) {
    background: var(--bg-text-color);
    border-left: 10px solid var(--theme-color);
    margin: var(--gap) 0;
    padding: 8px 10px 8px 14px;
    position: relative;
}.article-content blockquote:not(blockquote blockquote):before {
    color: var(--theme-color);
    content: "\201C";
    font-size: 2em;
    line-height: 1;
    margin-right: 6px;
    vertical-align: -2px;
}.article-content blockquote blockquote {
    margin: 0;
    padding: 0 0 0 10px;
    border: none;
    border-left: 3px solid var(--theme-color);
    background: transparent;
}.article-content blockquote blockquote:before {
    content: none;
}/* 正文 blockquote 已展示简介时，隐藏重复的 excerpt 区块 */
.article-content .content-excerpt:has(+ blockquote),
.article-content .content-excerpt:has(+ p blockquote:first-child) {
    display: none;
}.article-content ul {
    list-style: disc;
}.article-content ol {
    list-style: decimal;
}.article-content ol,
.article-content ul {
    padding: 0;
    margin-bottom: var(--gap);
    margin-left: calc(var(--gap) * 2);
    line-height: 2.5;
    list-style-position: outside;
}.article-content ol li::marker,
.article-content ul li::marker {
    color: var(--theme-color);
}.article-content hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #F5F6F7, var(--theme-color), #F5F6F7);
    background-image: -moz-linear-gradient(left, #F5F6F7, var(--theme-color), #F5F6F7);
    background-image: -ms-linear-gradient(left, #F5F6F7, var(--theme-color), #F5F6F7);
    background-image: -o-linear-gradient(left, #F5F6F7, var(--theme-color), #F5F6F7);
    margin: var(--gap) 0;
}/****gallery***/
.article-content .gallery {
	margin: 0 -1.1666667% 1.75em;
}.wp-block-gallery,
.wp-block-gallery figure {
    margin-right:0;
    margin-left:0
}.wp-block-gallery ul {
    list-style: none;
    display: flex;
    flex-flow: wrap;
}.wp-block-gallery ul li {
    list-style: none;
    margin:0;
    padding:0;
    width:33.33333%;
    margin: 0!important;
}.article-content.mce-content-body {
    padding:0 10px!important
}.wp-block-gallery ul li figure {
    height: 100%;
    display:flex;
    border: 5px solid #fff;
    margin: 0!important;
}.article-content .gallery-item {
	display: inline-block;
	max-width: 33.33%;
	padding: 0 1.1400652% 2.2801304%;
	text-align: center;
	vertical-align: top;
	width: 100%;
}.wp-block-gallery.columns-1 li {
    width:100%
}.wp-block-gallery.columns-2 li {
    width:50%
}.wp-block-gallery.columns-3 li {
    width:33.33333%
}.wp-block-gallery.columns-4 li {
    width:24%
}.wp-block-gallery.columns-5 li {
    width:24%
}.article-content .gallery-columns-1 .gallery-item {
	max-width: 100%;
}.article-content .gallery-columns-2 .gallery-item {
	max-width: 50%;
}.article-content .gallery-columns-4 .gallery-item {
	max-width: 25%;
    box-sizing: border-box;
}.article-content .gallery-columns-5 .gallery-item {
	max-width: 20%;
}.article-content .gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}.article-content .gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}.article-content .gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}.article-content .gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}.article-content .gallery-icon img {
	margin: 0 auto;
}.article-content .gallery-caption {
	color: #686868;
	display: block;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.6153846154;
	padding-top: 0.5384615385em;
}.article-content .gallery-columns-6 .gallery-caption,
.article-content .gallery-columns-7 .gallery-caption,
.article-content .gallery-columns-8 .gallery-caption,
.article-content .gallery-columns-9 .gallery-caption {
	display: none;
}/***********隐藏内容***********/
.content-hidden .content-hidden-info {
    background-color: var(--bg-body-color);
    height: 100%;
    padding: 16px 24px;
    min-height: 150px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color-base);
}.content-hidden i.ri-lock-2-line {
    font-size: 24px;
    line-height: 24px;
    margin-right: 6px;
}.content-hidden .content-show-roles {
    height: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 12px;
}.content-hidden .role-price {
    margin-top: 16px;
    font-size: 34px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 34px;
}.content-hidden .role-price span {
    font-size: 15px;
}.content-hidden .rigth {
    flex-shrink: 0;
}.content-hidden .rigth button:first-of-type {
    background: var(--color-primary);
}.content-hidden .rigth .login {
    margin-right: 6px;
    min-width: 68px;
}.content-hidden .rigth .register {
    background-color: var(--bg-text-color);
    color: var(--color-primary);
    min-width: 68px;
}.content-hidden .roles-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    grid-gap: 12px;
    padding: 12px 0;
}.content-hidden .roles-list li {
    max-width: 100px;
}.content-hidden .roles-list .lv-icon {
    height: 16px;
}.content-hidden .roles-list .lv-icon img {
    height: 100%;
}.content-hidden .roles-list .lv-name {
    font-size: 12px;
    line-height: 16px;
    background: var(--color-text-placeholder);
    padding: 2px 6px;
    height: auto;
    border-radius: var(--radius);
    transform: scale(.9);
}/*********文章标签***********/
.post-tags {
    flex-wrap: wrap;
    margin-top: 16px;
}.post-tags > i {
    margin-right: 10px;
    margin-top: 10px;
    font-size: 22px;
    color: var(--color-text-regular);
}.post-tags .tag-item {
    margin-right: 10px;
    margin-top: 10px;
    font-size: 14px;
    background-color: var(--border-color-muted);
    color: var(--color-text-regular);
}.post-tags .tag-item .tag-img {
    width: 28px;
    height: 28px;
}.post-tags .tag-item .tag-text {
    padding: 0px 8px;
}/***************文章举报******************/
.article-report {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}.article-report .report-btn {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    grid-gap: 4px;
    line-height: 16px;
    cursor: pointer;
}.article-report .report-btn i {
    font-size: 16px;
}/***************文章底部功能******************/

.article-footer {
    position: absolute;
    left: -68px;
    top: 200px;
    z-index: 1;
}.mika-sidebar-left .article-footer {
    right: -80px;
    left: auto;
}.mika-play-single-header + .mika-single-content .article-footer {
    top: -100%;
}.article-footer > div {
    flex-direction: column;
    gap: 16px;
}.article-footer > div .mika-flex {
    cursor: pointer;
    flex-direction: column;
}.article-footer > div .box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: var(--color-text-regular);
}.article-footer .active .box {
    color: var(--color-primary);
    border-color: var(--color-primary);
}.article-footer .report .box {
    color: #F56C6C;
}.article-footer i {
    font-size: 22px;
    line-height: 22px;
    font-weight: 400;
}.article-footer [num]:after,
.article-footer .text {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}.article-footer [num]:after {
    content: attr(num);
}.article-footer .share-dropdown-menu {
    position: absolute;
    left: 56px;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .4s;
    opacity: 0;
}.article-footer .social-share {
    display: flex;
    flex-direction: column;
    gap: 12px;
    white-space: nowrap;
    background: var(--mika-color-surface, #fff);
    padding: 16px;
    border-radius: var(--radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
}.article-footer .social-share .share-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-regular);
}.social-share .share-btn .icon {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    text-align: center;
    background-color: #edf5ff;
    color: #368afe;
}.social-share .share-btn .icon.weibo {
    background-color: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff));
    color: #e5254d;
}.social-share .share-btn .icon.qzone {
    background-color: #fdf3d3;
    color: #FFC107;
}.social-share .share-btn .icon.poster {
    background-color: #edf0fd;
    color: #536ded;
}.article-footer .share-btn i {
    line-height: 32px;
    font-size: 20px;
}.article-footer .share:hover .share-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}/**********上一篇和下一篇***************/
.post-prev-next {
    display: flex;
    justify-content: space-between;
}.post-prev-next > div {
    flex:1;
    padding: 16px 28px;
}.post-prev-next .post-prev {
    margin-right:var(--gap);
}.post-prev-next .post-next {
    text-align: right;
}.post-prev-next .title {
    max-height: 43px;
    --line-clamp: 2;
}.post-prev-next p {
    font-size: 15px;
    padding-bottom: 16px;
    color: var(--color-text-secondary);
}/************文章相关推荐******************/
.post-related .post-related-list {
    padding: 20px;
}.post-related .post-related-list .post-item {
    --carousel-slide-width: 186px;
    flex-shrink: 0;
    padding: 0;
    margin-right: var(--gap);
}.post-related .post-related-list .post-item:last-child {
    margin: 0;
}.post-related .post-related-list .post-thumbnail {
    padding-top: 70%;
}.post-related .post-related-list .post-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    color: var(--color-white);
    background: linear-gradient( 0deg,#0000006b,#00000000);
    display: flex;
    align-items: flex-end;
}/********小工具区域*********/
.widget-area {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    margin-left: var(--gap);
    max-width: 100%;
}.mika-sidebar-left .widget-area {
    margin-left: 0;
    margin-right: var(--gap);
}/******************存档页面*********************/
/* 文章/页面内页：与首页 .home-item .wrapper 同宽同内边距（+48 = 左右各 24px） */
.single .content-wrapper > .mika-single-content.wrapper,
.page .content-wrapper > .mika-single-content.wrapper {
    max-width: calc(var(--wrapper-width) + 48px);
    padding: 0 24px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}.single .content-wrapper > .breadcrumb.wrapper,
.page .content-wrapper > .breadcrumb.wrapper {
    max-width: calc(var(--wrapper-width) + 48px);
    padding: 0 24px;
    margin: 0 auto 12px;
    width: 100%;
    box-sizing: border-box;
}/* 分类页：文章列表与信息区保持同一 wrapper 宽度（+48 = 左右各 24px 内边距） */
.content-wrapper > .mika-tax-header + .mika-single-content.wrapper {
    max-width: calc(var(--wrapper-width) + 48px);
    padding: 0 24px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}@media screen and (max-width: 768px) {
    .content-wrapper > .mika-tax-header + .mika-single-content.wrapper {
        padding: 0;
        margin: 0 10px;
        width: auto;
    }

    .single .content-wrapper > .mika-single-content.wrapper,
    .page .content-wrapper > .mika-single-content.wrapper,
    .single .content-wrapper > .breadcrumb.wrapper,
    .page .content-wrapper > .breadcrumb.wrapper {
        padding: 0;
        margin: 0 10px 12px;
        width: auto;
    }
}.tax-info .tax-cover {
    width: 100%;
    height: 0;
    padding-top: 8%;
    filter: blur(50px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--color-text-placeholder);
}.tax-info .tax-details {
    padding: 8px 24px 12px;
    position: relative;
}.tax-info .tax-detail {
    display: flex;
    justify-content: space-between;
}.tax-info .tax-title {
    flex: 1;
    margin-left: 16px;
}.tax-info .tax-name {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}.tax-info .tax-count {
    font-size: 12px;
    color: var(--color-text-regular);
}.tax-info .tax-icon {
    width: 88px;
    height: 88px;
    border-radius: var(--radius);
    margin-top: -36px;
}.tax-info .tax-join {
    align-items: flex-end;
}.tax-info .tax-join > span {
    font-size: 14px;
    width: 80px;
    text-align: center;
    padding: 6px 0;
    border-radius: 8px;
}.tax-info .tax-desc {
    margin-top: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-text-secondary);
}/******************自定义分类头部*********************/
.mika-tax-header-custom {
    margin-bottom: 0;
    background: transparent;
}.mika-tax-header-custom .tax-hero-custom {
    position: relative;
    overflow: hidden;
    padding: 48px 24px 36px;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}.mika-tax-header-custom .tax-hero-bg {
    display: none;
}.mika-tax-header-custom .tax-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
}.mika-tax-header-custom .tax-hero-title {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--color-text-primary);
}.mika-tax-header-custom .tax-hero-subtitle {
    margin: 0 auto 24px;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-regular);
}.mika-tax-header-custom .tax-hero-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}.mika-tax-header-custom .tax-hero-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color-base);
    background: transparent;
    color: var(--color-text-regular);
    font-size: 14px;
    line-height: 1;
    transition: all .2s ease;
    white-space: nowrap;
}.mika-tax-header-custom .tax-hero-tab:hover {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border-color-base));
}.mika-tax-header-custom .tax-hero-tab.is-active {
    color: #fff;
    border-color: transparent;
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
}.content-wrapper > .mika-tax-header-custom + .mika-single-content.wrapper {
    background: transparent;
    padding-top: 0;
    padding-bottom: 24px;
}@media screen and (max-width: 768px) {
    .mika-tax-header-custom .tax-hero-custom {
        padding: 32px 16px 24px;
    }

    .mika-tax-header-custom .tax-hero-title {
        font-size: 26px;
    }

    .mika-tax-header-custom .tax-hero-subtitle {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .mika-tax-header-custom .tax-hero-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
}/******************筛选（墨刀风格）*********************/
.tax-fliter.tax-filters-bar {
    padding: 20px 0 16px;
    margin-bottom: 8px;
    background: transparent;
}.tax-fliter .filters-box {
    font-size: 14px;
    line-height: 22px;
    overflow: visible;
    position: relative;
    padding: 0;
}.tax-fliter .filters-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}.tax-fliter .filters-box ul li:not(:last-child) {
    margin-bottom: 16px;
}.tax-fliter .filters-box ul li {
    display: flex;
    align-items: center;
    min-height: 30px;
}.tax-fliter .filters-box .filter-name {
    flex: 0 0 auto;
    width: auto;
    min-width: 42px;
    box-sizing: content-box;
    padding-right: 12px;
    margin: 0;
    line-height: 22px;
    font-weight: 400;
    color: #666;
    border-right: none;
}.tax-fliter .filters-box .filter-items {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    gap: 8px 16px;
    padding-left: 0;
    overflow-x: auto;
}.tax-fliter .filters-box .filter-items::-webkit-scrollbar {
    width: 0;
    height: 0;
}/* 分类 tab：圆角块样式 */
.tax-fliter .filter-row-cats .filter-items a,
.tax-fliter .filter-row-tags .filter-items a,
.tax-fliter .filter-row-metas .filter-items a {
    padding: 4px 12px;
    margin: 0;
    max-width: none;
    height: auto;
    display: inline-block;
    white-space: nowrap;
    line-height: 22px;
    border-radius: 4px;
    border: none;
    outline: none;
    box-shadow: none;
    color: #666;
    background: transparent;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.15s;
    cursor: pointer;
}.tax-fliter .filter-row-cats .filter-items a:hover,
.tax-fliter .filter-row-tags .filter-items a:hover,
.tax-fliter .filter-row-metas .filter-items a:hover {
    color: #35445d;
    background-color: #f8f9fb;
}.tax-fliter .filter-row-cats .filter-items a.current,
.tax-fliter .filter-row-tags .filter-items a.current,
.tax-fliter .filter-row-metas .filter-items a.current {
    color: #35445d !important;
    background-color: #EBEFF5 !important;
}.tax-fliter .filter-row-cats .filter-items a.current:hover,
.tax-fliter .filter-row-tags .filter-items a.current:hover,
.tax-fliter .filter-row-metas .filter-items a.current:hover {
    color: #35445d !important;
    background-color: #EBEFF5 !important;
}/* 排序：纯文字链接样式 */
.tax-fliter .filter-row-orderby .filter-name {
    color: #35445d;
    font-weight: 500;
}.tax-fliter .filter-row-orderby .filter-items {
    gap: 8px 28px;
}.tax-fliter .filter-row-orderby .filter-items a {
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    outline: none;
    box-shadow: none;
    color: #666;
    background: transparent;
    line-height: 22px;
    transition: color 0.15s;
    cursor: pointer;
}.tax-fliter .filter-row-orderby .filter-items a:hover {
    color: #35445d;
    background: transparent;
}.tax-fliter .filter-row-orderby .filter-items a.current {
    color: #35445d !important;
    background: transparent !important;
    font-weight: 500;
}.tax-fliter .filter-row-orderby .filter-items a.current:hover {
    color: #35445d !important;
    background: transparent !important;
}.dark-theme .tax-fliter .filters-box .filter-name {
    color: var(--color-text-regular);
}.dark-theme .tax-fliter .filter-row-cats .filter-items a,
.dark-theme .tax-fliter .filter-row-tags .filter-items a,
.dark-theme .tax-fliter .filter-row-metas .filter-items a {
    color: var(--color-text-regular);
}.dark-theme .tax-fliter .filter-row-cats .filter-items a:hover,
.dark-theme .tax-fliter .filter-row-tags .filter-items a:hover,
.dark-theme .tax-fliter .filter-row-metas .filter-items a:hover {
    color: var(--color-text-primary);
    background-color: rgba(124, 92, 252, 0.08);
}.dark-theme .tax-fliter .filter-row-cats .filter-items a.current,
.dark-theme .tax-fliter .filter-row-tags .filter-items a.current,
.dark-theme .tax-fliter .filter-row-metas .filter-items a.current {
    color: var(--color-text-primary) !important;
    background-color: rgba(124, 92, 252, 0.14) !important;
}.dark-theme .tax-fliter .filter-row-orderby .filter-name {
    color: var(--color-text-primary);
}.dark-theme .tax-fliter .filter-row-orderby .filter-items a {
    color: var(--color-text-regular);
}.dark-theme .tax-fliter .filter-row-orderby .filter-items a:hover,
.dark-theme .tax-fliter .filter-row-orderby .filter-items a.current {
    color: var(--color-text-primary) !important;
    background: transparent !important;
}/******************文章置顶*********************/
.tax-sticky-posts .sticky-posts-list {
    padding: 16px;
}.tax-sticky-posts .sticky-posts-list .item {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-weight: 500;
}.tax-sticky-posts .sticky-posts-list .item:last-of-type {
    margin-bottom: 0;
}.tax-sticky-posts .tax-sticky {
    padding: 4px 8px 4px 6px;
    margin-right: 12px;
    font-size: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 18px;
    flex-shrink: 0;
}.tax-sticky-posts .tax-sticky i {
    margin-right: 4px;
    font-size: 16px;
    font-weight: normal;
}/*********用户信息容器***************/
.user-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}.user-container .desc {
    font-size: 12px;
    margin-top: 4px;
    color: var(--color-text-secondary);
}.user-container .user-avatar {
    width: 45px;
    height: 45px;
}.user-container .user-info {
    margin: 0 10px;
}.user-container .right i {
    margin-right: 4px;
}.user-container button span {
    font-size: 12px;
}/********用户头像********/
.user-avatar {
    --avatar-size: 40px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}.user-avatar .avatar-face {
    border-radius: 50%;
    box-sizing: border-box;
    background: #eee;
}.user-avatar .avatar-pendant {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(128.5% - 2px);
    height: calc(128.5% - 2px);
    margin-left: calc(-64.25% + 1px);
    margin-top: calc(-64.25% + 1px);
    pointer-events: none;
    z-index: 1;
    max-width: none;
}.user-avatar .avatar-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: calc(var(--avatar-size) / 3);
    height: calc(var(--avatar-size) / 3);
    object-fit: contain;
    border-radius: 50%;
    background: var(--bg-main-color);
}/***********灯箱fancybox*************/
[data-fancybox] {
  cursor: zoom-in;
}/*.compensate-for-scrollbar {*/
/*    padding-right: 0;*/
/*}*/

/*.fancybox__backdrop::after {*/
/*	content: "";*/
/*	position: absolute;*/
/*	width: 10%;*/
/*	height: 10%;*/
/*	filter: blur(2px);*/
/*	left: 50%;*/
/*	top: 50%;*/
/*	transform: scale(11);*/
/*	opacity: 0.3;*/
/*	background-image: var(--bg-image);*/
/*	background-size: cover;*/
/*	background-repeat: no-repeat;*/
/*	background-position: center center;*/
/*}*/

/*.fancybox__container {*/
/*	--fancybox-bg: #000;*/
/*	--fancybox-thumbs-width: 48px;*/
/*	--fancybox-thumbs-ratio: 1;*/
/*	--carousel-button-bg: rgb(91 78 76 / 74%);*/
/*	--carousel-button-svg-width: 24px;*/
/*	--carousel-button-svg-height: 24px;*/
/*	--carousel-button-svg-stroke-width: 2.5;*/
/*}*/

/*.fancybox__nav {*/
/*	--carousel-button-svg-width: 24px;*/
/*	--carousel-button-svg-height: 24px;*/
/*}*/

/*.fancybox__nav .carousel__button.is-prev {*/
/*	left: 20px;*/
/*}*/

/*.fancybox__nav .carousel__button.is-next {*/
/*	right: 20px;*/
/*}*/

/*.carousel__button.is-close {*/
/*	right: 20px;*/
/*	top: 20px;*/
/*	left: auto;*/
/*}*/

/* .fancybox__slide {
  padding: 8px 88px;
}*/

/* Thumbnails */
/*.fancybox__thumbs .carousel__slide {*/
/*	padding: 8px 8px 16px 8px;*/
/*}*/

/*.is-nav-selected::after {*/
/*	display: none;*/
/*}*/

/*.fancybox__thumb {*/
/*	border-radius: 4px;*/
/*	opacity: 0.4;*/
/*}*/

/*.fancybox__thumb:hover,
*/
/*.is-nav-selected .fancybox__thumb {*/
/*	border-radius: 4px;*/
/*	opacity: 1;*/
/*}*/
/*.is-nav-selected .fancybox__thumb::after {*/
/*	display: none;*/
/*}*/

/*.fancybox__image {*/
/*	border-radius: 4px;*/
/*}*/

/*@media screen and (max-width: 670px) {*/
/*	.fancybox__nav {*/
/*		display:none;*/
/*	}*/
/*}*/
/*******登录注册对话框**********/
.login-container {
	padding: 24px;
    width: 100%;
    font-size: 15px;
    overflow: hidden;
    height: 100%;
}.login-container .container-top {
    margin-bottom: 28px;
}.login-container .container-top > div {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}.form-container .form-item {
    margin-bottom: 12px;
    display: flex;
    position: relative;
}.form-container .form-item input {
    width: 100%;
    height: 48px;
    line-height: 20px;
    padding: 14px;
    background: var(--bg-muted-color);
    border-radius: 8px;
    border: 0;
    color: var(--color-text-regular);
    font-size: 15px;
}.form-container .form-item .login-eye {
    position: absolute;
    top: 14px;
    right: 14px;
    user-select: none;
    color: var(--theme-color);
    font-size: 14px;
    cursor: pointer;
}.form-container .signin-hint {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--color-text-secondary);
}.form-container .signin-hint .hint-text span {
    color: var(--color-primary);
    cursor: pointer;
}.form-container .form-button {
    padding: 16px 0;
}.form-container .form-button button {
    padding: 12px 0;
    font-size: 15px;
    border-radius: 50px;
    width: 100%;
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
    border: 0;
    line-height: 18px;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
}.form-container .login-error {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #e74c3c;
    text-align: center;
}.login-container .invite-skip {
    text-align: center;
    font-size: 14px;
    color: var(--color-primary);
}.login-container .invite-skip > span {
    cursor: pointer;
}.login-container .social-loginbar {
    display: flex;
    flex-direction: column;
}.separator-text {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 16px;
    color: var(--color-text-placeholder);
    font-size: 14px;
}.separator-text:before,
.separator-text:after {
    content: "";
    height: 1px;
    background-color: var(--border-color-base);
    flex: 1 1 0%;
    width: 100%;
}.login-container .social-loginbar .other-login {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 32px;
    gap: 32px;
    margin-top: 12px;
}.login-container .social-loginbar .other-login > a {
    width: 42px;
    height: 42px;
    border-radius: 100px;
    text-align: center;
}.login-container .social-loginbar .other-login i {
    font-size: 22px;
    line-height: 40px;
}.login-container .social-loginbar .other-login .weixin {
    position: relative;
    background-color: transparent;
    color: #00cc63;
}.login-container .social-loginbar .other-login .qq {
    position: relative;
    background-color: transparent;
    color: #368afe;
}.login-container .social-loginbar .other-login .weibo {
    position: relative;
    background-color: transparent;
    color: #e5254d;
}.other-login .alipay {
    position: relative;
    background-color: #f3f8fb;
    color: #00a0e9;
}.other-login .baidu {
    position: relative;
    background-color: #f4f4f4;
    color: #2932e1;
}.other-login .github {
    position: relative;
    background-color: #f5f5f5;
    color: #333;
}.other-login .dingtalk {
    position: relative;
    background-color: #e9f2ff;
    color: #1a92ff;
}.other-login .google {
    position: relative;
    background-color: #e8f5ff;
    color: #4285f4;
}.other-login .microsoft {
    position: relative;
    background-color: #f0f0f0;
    color: #00a4ef;
}.other-login .facebook {
    position: relative;
    background-color: #f2f2f2;
    color: #3b5998;
}.other-login .twitter {
    position: relative;
    background-color: #f2f8fc;
    color: #1da1f2;
}.login-container .social-loginbar .agreement {
    font-size: 13px;
    color: var(--color-text-secondary);
    letter-spacing: 0;
    line-height: 18px;
    text-align: center;
    margin-top: 24px;
}.login-container .social-loginbar .agreement span {
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline;
    margin: 0 4px;
    user-select: none;
}/*******滑块验证*********/
.captcha-container {
    padding: 24px;
    width: 100%;
    font-size: 15px;
    overflow: hidden;
    height: 100%;
}.captcha-container .slider-captcha {
    margin-top: 8px;
    width: 100%;
    position: relative;
}.captcha-container .canvas {
    border-radius: 4px;
}.captcha-container .block {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}.captcha-container .slider-container {
    text-align: center;
    background: #f8f8f8;
    color: #999;
    border-radius: 4px;
    margin-top: 6px;
    position: relative;
    line-height: 40px;
    height: 40px;
    user-select: none;
}.captcha-container .refresh-icon {
    position: absolute;
    right: 0;
    opacity: .6;
    top: 0;
    padding: 10px;
    color: #fff;
    text-shadow: 0 0 5px #000;
    cursor: pointer;
}.captcha-container .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: var(--mika-color-surface, #fff);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    cursor: pointer;
    border-radius: 4px;
    transition: .3s;
}.captcha-container .slider-mask {
    position: absolute;
    border-radius: 4px;
    height: 40px;
    transition: .3s;
}.captcha-container .slider-container-active .slider-mask {
    background: rgba(5, 224, 96, .1);
    border: 1px solid rgba(94, 182, 89, .6);
    transition: unset
}.captcha-container .slider-container-success .slider-mask {
    background: rgba(0, 153, 255, .2);
    border: 1px solid #43b5fc
}.captcha-container .slider-container-fail .slider-mask {
    background: rgba(255, 0, 0, .2);
    border: 1px solid #ff4842
}.captcha-container .slider-container-active .slider {
    transition: unset
}.captcha-container .slider-container-success .slider {
    background: #3ca4f9;
    color: #fff
}.captcha-container .slider-container-fail .slider {
    background: #f7564a;
    color: #fff
}/* Slider captcha — design 61-滑块验证码 (app-layout) */
.app-layout-active .mika-modal-content:has(.captcha-container) {
    width: 340px;
    max-width: calc(100vw - 32px);
}.app-layout-active .mika-modal-content:has(.captcha-container) .captcha-container {
    padding: 20px 20px 18px;
}.app-layout-active .mika-modal-content:has(.captcha-container) .mika-captcha-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
    text-align: center;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-captcha {
    margin-top: 0;
}.app-layout-active .mika-modal-content:has(.captcha-container) .canvas {
    border-radius: 12px;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container {
    margin-top: 14px;
    height: 44px;
    line-height: 44px;
    border-radius: 999px;
    background: #f5f7f9;
    color: #8991a1;
    font-size: 14px;
    overflow: hidden;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mika-color-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mika-color-primary) 28%, transparent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-mask {
    border-radius: 12px;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container-active .slider-mask {
    background: color-mix(in srgb, var(--mika-color-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--mika-color-primary) 35%, transparent);
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container-success .slider-mask {
    background: color-mix(in srgb, var(--mika-color-primary) 12%, transparent);
    border-color: var(--mika-color-primary);
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container-success .slider,
.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container-active .slider {
    background: var(--mika-color-primary);
    color: #fff;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container-fail .slider-mask {
    background: color-mix(in srgb, var(--mika-color-primary) 10%, transparent);
    border-color: #ff4842;
}.app-layout-active .mika-modal-content:has(.captcha-container) .slider-container-fail .slider {
    background: var(--mika-color-primary);
    color: #fff;
}.app-layout-active .mika-modal-content:has(.captcha-container) .refresh-icon {
    top: 8px;
    right: 8px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
}/************************小工具开始**********************************/
.widget .widget-box {
    padding: 16px;
}/* Right sidebar: compact check-in summary (direct sign). */
.mika-checkin-widget.widget .widget-box {
    padding: 0;
}.mika-sidebar-checkin {
    --mika-check-ink: #0f1419;
    --mika-check-muted: #7d8796;
    --mika-check-line: #e6e9ef;
    --mika-check-soft: #f2f4f7;
    --mika-check-red: var(--mika-color-primary);
    overflow: hidden;
    border: 1px solid var(--mika-check-line);
    border-radius: var(--mika-radius, 14px);
    background: var(--mika-color-surface, #fff);
    color: var(--mika-check-ink);
    box-shadow: 0 8px 24px rgba(15, 20, 25, .04);
}.mika-sidebar-checkin__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 0;
    background: transparent;
}.mika-sidebar-checkin__hero-icon { display: none; }.mika-sidebar-checkin__heading {
    min-width: 0;
    flex: 1;
}.mika-sidebar-checkin__eyebrow { display: none; }.mika-sidebar-checkin__heading h2 {
    margin: 0;
    color: var(--mika-check-ink);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
}.mika-sidebar-checkin__sub,
.mika-sidebar-checkin__heading > p:last-child {
    display: none;
}.mika-sidebar-checkin__status {
    flex: 0 0 auto;
    color: var(--mika-check-muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}.mika-sidebar-checkin__status strong {
    color: var(--mika-check-red);
    font-size: 14px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}.mika-sidebar-checkin__status small {
    margin-left: 1px;
    color: var(--mika-check-muted);
    font-size: 11px;
    font-weight: 600;
}.mika-sidebar-checkin__streak-panel { display: none; }.mika-sidebar-checkin__body {
    padding: 4px 16px 0;
}.mika-sidebar-checkin__summary { display: none; }.mika-sidebar-checkin__progress {
    position: relative;
    margin: 0;
}.mika-sidebar-checkin__track { display: none; }.mika-sidebar-checkin__progress ol {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}.mika-sidebar-checkin__progress li {
    display: grid;
    justify-items: center;
    color: #9aa3b0;
    line-height: 1;
}.mika-sidebar-checkin__day,
.mika-sidebar-checkin__progress li b {
    display: none;
}.mika-sidebar-checkin__dot {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1.5px solid var(--mika-check-line, #dde2ea);
    border-radius: 50%;
    background: var(--mika-color-surface, #fff);
    color: transparent;
    font-size: 11px;
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}.mika-sidebar-checkin__dot i {
    font-size: 12px;
    color: #fff;
}.mika-sidebar-checkin__progress li.is-done .mika-sidebar-checkin__dot {
    border-color: var(--mika-check-red);
    background: var(--mika-check-red);
    color: #fff;
}.mika-sidebar-checkin__progress li.is-current .mika-sidebar-checkin__dot {
    border-color: var(--mika-check-red);
    background: var(--mika-color-surface, #fff);
    box-shadow: none;
    color: var(--mika-check-red);
    font-size: 11px;
}.mika-sidebar-checkin__footer {
    padding: 12px 16px 14px;
}.mika-sidebar-checkin__action {
    display: flex;
    width: 100%;
    height: 36px;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: var(--mika-radius-button, 12px);
    background: var(--mika-check-red);
    box-shadow: none;
    color: var(--mika-color-on-primary, #fff);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: background .18s ease, filter .18s ease;
}.mika-sidebar-checkin__action:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mika-color-primary) 85%, #000);
    filter: brightness(1.02);
}.mika-sidebar-checkin__action:disabled,
.mika-sidebar-checkin__action.is-signed {
    background: var(--mika-check-soft, #e8ecf1);
    box-shadow: none;
    color: var(--mika-check-muted, #7a8494);
    cursor: default;
    transform: none;
}.mika-sidebar-checkin__hint {
    margin: 8px 0 0;
    color: var(--mika-check-muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}.mika-sidebar-checkin__detail {
    margin-left: 4px;
    color: var(--mika-color-primary, var(--channel-accent, #ff0033));
    text-decoration: none;
    font-weight: 600;
}.mika-sidebar-checkin__detail:hover {
    text-decoration: underline;
}html.dark-theme .mika-sidebar-checkin,
body.dark-theme .mika-sidebar-checkin {
    --mika-check-ink: #f5f7fb;
    --mika-check-muted: #98a5b6;
    --mika-check-line: #30384a;
    --mika-check-soft: #202b3d;
    --mika-check-red: color-mix(in srgb, var(--mika-color-primary) 72%, #fff);
    border-color: #30384a;
    background: #1a2332;
    color: #f5f7fb;
}html.dark-theme .mika-sidebar-checkin__hero,
body.dark-theme .mika-sidebar-checkin__hero {
    background: transparent;
}html.dark-theme .mika-sidebar-checkin__heading h2,
body.dark-theme .mika-sidebar-checkin__heading h2 {
    color: var(--mika-check-ink);
}html.dark-theme .mika-sidebar-checkin__dot,
body.dark-theme .mika-sidebar-checkin__dot {
    background: #1a2332;
    border-color: #3a4558;
}html.dark-theme .mika-sidebar-checkin__action:disabled,
html.dark-theme .mika-sidebar-checkin__action.is-signed,
body.dark-theme .mika-sidebar-checkin__action:disabled,
body.dark-theme .mika-sidebar-checkin__action.is-signed {
    background: #2a3548;
    color: #98a5b6;
}.widget-title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
}.widget-title::before {
    content: "";
    border: 4px solid var(--color-primary);
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 11px;
    vertical-align: text-bottom;
    opacity: .9;
}.widget-title::after {
    content: "";
    opacity: .3;
    background: var(--color-primary);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    position: absolute;
    bottom: 0px;
    left: 8px;
}/********关于我们*******/
.about-widget {
    width:100%;
}.about-widget h2 {
    color: var(--color-primary);
    font-size: 26px;
    font-weight: 700;
}.about-widget .about-logo {
    margin-bottom: 16px;
    display: inline-block;
}.about-widget .about-logo img {
    height: 50px;
}.about-widget p {
    font-size: 15px;
    color: var(--color-text-regular);
    line-height: 1.5;
}.about-widget .contact-list {
    display: flex;
    flex-wrap: wrap;
}.about-widget .contact-list .list-item {
    width: 40px;
    height: 40px;
    margin: 16px 16px 0 0;
    border: 1px solid var(--border-color-base);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}.about-widget .contact-list .list-item img {
    width: 28px;
    height: 28px;
}/********连接组**********/

.links-widget ul.links-list {
    margin-bottom: -16px;
}.links-widget li.list-item {
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--color-text-regular);
}.links-widget ul.links-list {
    margin-bottom: -16px;
}/********个人面板小工具（原作者面板）**********/

.author-widget {
    overflow: hidden;
}.author-widget .author-widget-content {
    width: 100%;
}.author-widget .author-cover {
    display: none;
}.author-widget .bg-cover {
    display: none;
}.author-widget .author-info {
    position: relative;
    margin-top: 0;
    padding: 12px;
    border-radius: var(--mika-radius, 14px);
    background: var(--bg-muted-color, #f3f4f7);
    text-align: left;
}.author-widget .user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}.author-widget .author-meta {
    min-width: 0;
    padding-top: 0;
}.author-widget .user-avatar {
    --avatar-size: 48px;
    flex: 0 0 auto;
    margin: 0;
}.author-widget .user-avatar .avatar-badge {
    --avatar-size: 34px;
}.author-widget .author-name {
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}.author-widget .author-desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 3px 0 0;
    color: var(--color-text-regular);
    font-size: 11px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}.author-widget .user-link .author-desc {
    margin-top: 3px;
}.author-widget .author-count {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
    font-size: 10px;
    color: var(--color-text-regular);
    line-height: 1.1;
}.author-widget .author-count div {
    display: none;
}.author-widget .author-count__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: 6px 2px;
    border-radius: 10px;
    background: var(--mika-color-surface, #fff);
    color: var(--color-text-regular);
    font-weight: 550;
    text-align: center;
}.author-widget .author-count span {
    display: inline;
    font-weight: 550;
    color: inherit;
    font-variant-numeric: tabular-nums;
}.author-widget .author-count b,
.author-widget .author-count__chip b {
    color: var(--color-text-primary, #111827);
    font-size: 14px;
    font-weight: 750;
}.author-widget .author-count__sep {
    display: none;
}.author-widget .author-widget-footer {
    display: flex;
    justify-content: space-evenly;
    gap: 8px;
    margin-top: 0;
}.author-widget .author-widget-footer > button,
.author-widget .author-widget-footer > a {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
}.author-widget button > i,
.author-widget .author-widget-footer a > i {
    margin-right: 0;
}.author-widget .author-widget-footer .follow {
    background-color: var(--color-primary);
    color: var(--mika-color-on-primary, #fff);
    box-shadow: none;
}.author-widget .author-widget-footer .letter {
    background-color: transparent;
    border: 1px solid var(--border-color-base, #e5e7eb);
    color: var(--color-text-primary, #111827);
    box-shadow: none;
}.author-widget .author-widget-footer > a:only-child,
.author-widget .author-widget-footer > button:only-child {
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--mika-color-on-primary, #fff);
}/**********文章聚合**************/
/**无图**/
.post-widget .widget-post-none {
    display: flex;
    margin-bottom: 16px;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;
}.post-widget .widget-post-none:last-of-type {
    margin-bottom: 0px;
}.post-widget .widget-post-none  .title {
    display: flex;
    align-items: center;
}.post-widget .widget-post-none .post-index {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--bg-muted-color, #f3f4f7);
    text-align: center;
    font-size: 11px;
    line-height: 22px;
    flex-shrink: 0;
    color: var(--color-text-secondary, #94a3b8);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}.post-widget .widget-post-none:nth-child(1) .post-index,
.post-widget .widget-post-none:nth-child(2) .post-index,
.post-widget .widget-post-none:nth-child(3) .post-index {
    background: color-mix(in srgb, var(--mika-color-primary, var(--color-primary)) 10%, #fff);
    color: var(--mika-color-primary, var(--color-primary));
    font-weight: 750;
}.post-widget .widget-post-none > span {
    font-size: 13px;
    margin-left: 4px;
    color: var(--color-text-regular);
}.post-widget .widget-post-none .link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
    margin-left: 8px;
    /* color: var(--color-text-regular); */
}/****小图*****/
.post-widget .widget-post-small {
    display: flex;
}.post-widget .widget-post-small + .widget-post-small {
    margin-top: 16px;
}.post-widget .widget-post-small .widget-post-thumb {
    width: 100px;
    height: 68px;
    flex-shrink: 0;
    margin-right: 12px;
    overflow: hidden;
    border-radius: var(--radius);
}.post-widget .widget-post-small .widget-post-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
}.post-widget .widget-post-small .widget-post-info .text-ellipsis {
    --line-clamp:2;
}.post-widget .widget-post-small .widget-post-info .meta {
    color: var(--color-text-secondary);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}/***********下载小工具************/

.mika_widget_download.widget .widget-box {
    padding: 0px;
}/* Legacy base — Dock paper styles in sidebar-widgets.css own the right rail */
.download-widget .scroll-tabs-wrapper {
    font-size: 14px;
}.download-widget .mika-download-box {
    padding: 0;
}.download-widget .mika-download-box .title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
}.download-widget .mika-download-box .rights {
    user-select: none;
    background: var(--bg-muted-color);
    border-radius: var(--radius);
    padding: 12px;
}.download-widget .mika-download-box .rights > div {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}.download-widget .mika-download-box .ri-arrow-right-s-line {
    transition: all .3s;
}.download-widget .mika-download-box .open .ri-arrow-right-s-line {
    rotate: 90deg;
}.download-widget .mika-download-box .rights .list {
    font-size: 12px;
    margin-top: 2px;
}.download-widget .mika-download-box .rights .list .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}.download-widget .mika-download-box .rights .list .current {
    color: var(--color-primary);
    font-weight: 600;
}.download-widget .mika-download-box .rights .list .current-tag {
    font-weight: 400;
    margin-left: 2px;
}.download-widget .mika-download-box .download-btn {
    margin: 0;
}.download-widget .mika-download-box .download-btn > button {
    width: 100%;
    padding: 10px;
}.download-widget .mika-download-box .download-btn .ri-download-fill,
.download-widget .mika-download-box .download-btn .ri-download-line {
    font-size: 16px;
    line-height: 16px;
    margin-right: 6px;
}.download-widget .mika-download-box .attrs-list {
    padding-top: 12px;
    border-top: 1px solid var(--border-color-base);
}.download-widget .mika-download-box .attrs-list .attr-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}.download-widget .mika-download-box .attrs-list .attr-item + .attr-item {
    padding-top: 4px;
}.download-widget .mika-download-box .attr-item span:first-of-type {
    color: var(--color-text-secondary);
}.download-widget .mika-download-box .bottom {
    background: color-mix(in srgb, var(--mika-color-primary) 10%, var(--mika-color-surface, #fff));
    color: #303746;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    padding: 12px 18px;
}/*********话题小工具**********/
.topic-widget .widget-topic {
    display: flex;
    align-items: center;
    grid-gap: 12px;
}.topic-widget .widget-topic-list {
    display: flex;
    flex-direction: column;
    grid-gap: 16px;
}.topic-widget .widget-topic .hashtag-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: var(--bg-text-color);
    color: var(--color-primary);
    font-size: 22px;
    text-align: center;
    line-height: 48px;
    font-weight: 600;
}.topic-widget .widget-topic .topic-info div:last-of-type {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;
    grid-gap: 8px;
}.topic-widget .widget-topic .topic-info {
    min-width: 0;
    line-height: 24px;
    font-size: 15px;
}.topic-widget .widget-topic .topic-info .title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
}/*********圈子小工具**********/
.circle-widget .widget-circle-list {
    display: flex;
    flex-direction: column;
    grid-gap: 16px;
}.circle-widget .circle-item {
    display: flex;
    align-items: center;
    grid-gap: 12px;
    justify-content: space-between;
}.circle-widget .circle-item .circle-info-box {
    display: flex;
    align-items: center;
    grid-gap: 12px;
    min-width: 0;
}.circle-widget .circle-item .circle-info {
    min-width: 0;
    line-height: 24px;
    font-size: 15px;
}.circle-widget .circle-item .circle-info .title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
}.circle-widget .widget-circle-list .circle-image {
    --avatar-size: 48px;
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 12px;
}.circle-widget .widget-circle-list .circle-image img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 12px;
}.circle-widget .circle-item .circle-info div:last-of-type {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: flex;
    grid-gap: 8px;
}
.circle-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    line-height: 20px;
    grid-gap: 0px;
    color: var(--color-text-secondary);
}.circle-selected span:last-of-type {
    font-size: 12px;
}/*********圈子信息小工具**********/

.circle-info-widget .circle-info-inner .cover {
    width: auto;
    height: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: -16px -32px 0;
    position: relative;
    overflow: hidden;
}.circle-info-widget .circle-info-inner .bg-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg,rgba(246,246,248,0),rgb(255 255 255 / 0%) .01%,rgb(255 255 255 / 32%) 26.02%,rgb(255 255 255 / 78%) 57.56%,rgb(255 255 255 / 96%) 84.56%,var(--bg-main-color) 101.97%);
}.circle-info-widget .circle-info .circle-info-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 12px;
}.circle-info-widget .circle-info  .circle-title {
    flex: 1;
    display: flex;
    flex-direction: column;
}.circle-info-widget .circle-info .circle-name {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
}.circle-info-widget .circle-info .circle-info-bottom {
    margin-top: 16px;
}.circle-info-widget .circle-info .circle-info-tag {
    margin-top: 8px;
}.circle-info-widget .circle-info .circle-info-tag .tag-item {
    display: flex;
    align-items: center;
    grid-gap: 6px;
    margin: 0;
}.circle-info-widget .circle-info .circle-info-tag .tag-item.official {
    padding: 0 4px;
    border-radius: var(--radius);
    transform: scale(.9);
}.circle-info-widget .circle-info .circle-desc {
    min-height: 38px;
    font-size: 14px;
    padding: 8px 12px;
    position: relative;
    background: var(--bg-muted-color);
    border-radius: 4px;
    color: var(--color-text-secondary);
}.circle-info-widget .circle-info .circle-desc:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent transparent var(--bg-muted-color);
    border-width: 8px;
    top: -16px;
    z-index: 1;
    left: 20px;
}.circle-info-widget .circle-info .circle-statistics {
    margin-top: 16px;
    display: flex;
    grid-gap: 8px;
    color: var(--color-text-secondary);
}.circle-info-widget .circle-info .circle-statistics > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    line-height: 20px;
    grid-gap: 4px;
}.circle-info-widget .circle-info .circle-statistics span:last-of-type {
    font-size: 12px;
    color: var(--color-text-primary);
}.circle-info-widget .circle-info .circle-active {
    display: flex;
    align-items: center;
    background: var(--bg-muted-color);
    padding: 0 12px;
    border-radius: var(--radius);
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    color: var(--color-text-regular);
    font-size: 14px;
}.circle-info-widget .circle-info .circle-active .active-user {
    display: flex;
    align-items: center;
}.circle-info-widget .circle-info .circle-active .user-avatar {--avatar-size: 28px;
    border: 2px solid var(--color-white);
    border-radius: 100%;
    margin-left: -8px;
}/*********评论**********/

.comments-hred {
    margin-bottom: var(--gap);
}.comment-item + .comment-item {
    border-top: 1px solid var(--border-color-base);
}li.comment-item {
    display: flex;
    width: 100%;
    padding: 20px;
    /*-webkit-animation:Items .7s ease-in forwards;*/
    /*animation:Items .7s ease-in forwards;*/
}.comment-container {
    flex: 1;
    width: 100%;
}.comment-avatar .user-avatar {
    --avatar-size: 48px;
}figure.comment-avatar {
    margin-right: 16px;
}.comment-user-info {
    display: flex;
    align-items: center;
    padding: 2px 0 4px;
    line-height: 18px;
}span.comment-auth {
    height: 18px;
    line-height: 18px;
    border-radius: var(--radius);
    font-size: 13px;
    color: #fff;
    padding: 0 5px;
    background-color: var(--color-primary);
    margin-right: 8px;
    cursor: pointer;
}.comment-content-text p {
    position: relative;
    z-index: 2;
    text-shadow: none;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
    display: inline;
}.comment-details {
    color: var(--color-text-secondary);
    line-height: 14px;
    margin-top: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
}.comments-wrap,
.comments-area {
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    border-radius: var(--radius);
}.comment-content {
    width: 100%;
}.comment-item ul.children {
    background-color: var(--bg-body-color);
    margin-top: 16px;
    border-radius: var(--radius);
}.comment-item .children figure.comment-avatar {
    margin-right: 8px;
}.comment-item .children .user-avatar {
    --avatar-size: 38px;
}.comment-details > span {
    margin-right: 16px;
    cursor: pointer;
}.comment-content-text {
    font-size: 14px;
    color: var(--color-text-regular);
    padding: 4px 0;
}.comment-content-text .emoticon-image {
    vertical-align: text-bottom;
    padding: 0 5px;
    max-width: 50px;
    max-height: 50px;
}.comment-content-text .emoticon-image.small {
    max-width: 24px;
    max-height: 24px;
    vertical-align: bottom;
}.comment-content-text .emoticon-image.large {
    max-width: 80px;
    max-height: 80px;
}.comment-content-text a.user-name {
    color: var(--color-primary);
    line-height: 1.5;
    vertical-align: bottom;
}.comment-item span.comment-like.voted {
    color: var(--color-primary);
}.comment-tags {
    margin-top: 10px;
}.comment-tags span {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 6px;
    line-height: 14px;
    color: var(--color-primary);
    background: var(--bg-text-color);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 400;
}/**********评论框**********/
.comments-area > .comment-send {
    /*border-bottom: 1px solid var(--border-color-base);*/
}.comment-send {
    display: flex;
    padding: 20px;
}.comment-user-avatar {
    margin: 7px 17px 11px 0;
}.comment-user-avatar .user-avatar {
    width: 55px;
    height: 55px;
}.comment-textarea-container {
    flex: 1;
}.comment-textarea-container #textarea {
    height: 70px;
    min-height: 70px;
    background-color: var(--bg-body-color);
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    padding: 10px;
    width: 100%;
    display: block;
    max-width: 100%;
    min-width: 100%;
    color: var(--color-text-primary);
}.comment-button {
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
}button.comment-submit {
    background: var(--color-primary);
    padding: 5px 20px;
}.comment-botton-left {
    position: relative;
}.comment-emoji {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--border-color-base);
    font-size: 14px;
    color: var(--color-text-secondary);
    border-radius: var(--radius);
    cursor: pointer;
}.comment-emoji i {
    font-size: 19px;
    line-height: 19px;
    margin-right: 3px;
}li.comment-list-empty {
    font-size: 15px;
    color: var(--color-text-placeholder);
    text-align: center;
    padding: 40px 0;
}/******评论排序********/
.comment-orderby {
    display: flex;
    border-bottom: 1px solid var(--border-color-base);
    justify-content: space-between;
    font-size: 15px;
    padding: 12px 20px;
    align-items: center;
}.comment-orderby span {
    margin-left: 10px;
    color: var(--color-text-secondary);
    cursor: pointer;
}.comment-orderby span:first-child {
    margin:0;
}.comment-orderby span.active {
    color: var(--color-primary);
}/********用户昵称**********/
.user-info-name {
    display: inline-flex;
    align-items: center;
    width: max-content;
}.user-info-name >* {
    margin-right: 8px;
}.user-info-name > span {
    height: 16px;
    line-height: 16px;
    border-radius: 4px;
    font-size: 12px;
}.user-info-name .user-name {
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    flex: 1;
}.user-info-name .user-lv {
    margin-right: 8px;
    overflow: hidden;
}.user-info-name .lv-img-icon,
.user-info-name .vip-img-icon,
.user-info-name .verify-img-icon {
    height:100%;
}.user-info-name .user-vip .text,
.user-info-name .user-auth .text {
    color: var(--color-white);
    padding: 0 4px;
    background-color: var(--theme-color);
    cursor: pointer;
}/***************Tabs*********************/
.tabs {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}.tabs .tabs-nav {
    position: relative;
    margin-bottom: var(--gap);
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}.scroll-tabs .tabs-nav {
    display: inline-flex;
}.tabs .tabs-nav li {
    margin-right: 24px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    flex: 0 0 auto;
}.tabs .tabs-nav .active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0px;
    background-color: var(--theme-color);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    transform: translateX(0px);
    z-index: 2;
}.tabs .tabs-nav:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color-base);
    z-index: 1;
}.tabs .tabs-content {
    flex: 1;
    height: 100%;
}.tabs .tabs-content .tab-pane {
    display: none;
}.tabs .tabs-content .tab-pane.active {
    display: block;
    color: unset !important;
}/***********横向滚动tabs******************/
.scroll-tabs-wrapper {
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 12px;
    width: 100%;
    position: relative;
}.scroll-tabs-wrapper .tabs-content {
    display: inline-flex;
}.scroll-tabs-wrapper .tabs-content > .tab-item {
    display: inline-flex;
    margin-right: 12px;
    padding: 5px 10px;
    background: var(--bg-main-color);
    border-radius: var(--radius);
    cursor: pointer;
}.scroll-tabs-wrapper .tabs-content > .tab-item:last-of-type {
    margin: 0;
}/***********分页加载******************/
.mika-ajax-pager {
    padding: 20px 0;
}.mika-ajax-pager.is-both {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}.mika-ajax-pager .ajax-load-more {
    min-width: 160px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--border-color-base);
    border-radius: var(--mika-radius-button, 12px);
    background: var(--bg-main-color);
    color: var(--color-text-primary);
    cursor: pointer;
}.mika-ajax-pager .ajax-load-more:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}.mika-ajax-pager .ajax-load-more:disabled {
    opacity: .55;
    cursor: default;
}.mika-ajax-pager .ajax-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}.mika-ajax-pager ul.mika-pager {
    display: flex;
}.mika-ajax-pager .btn-prev,
.mika-ajax-pager .btn-next,
.mika-ajax-pager ul.mika-pager li.number {
    margin: 0 5px;
    padding: 0 2px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--color-text-secondary);
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: all .5s;
    background-color: var(--bg-main-color);
    border: 1px solid var(--border-color-base);
}.mika-ajax-pager .mika-pager .number[disabled],
.mika-ajax-pager .mika-pager .number.active {
    cursor: default;
}.mika-ajax-pager .mika-pager .number.active {
    background-color: var(--color-primary);
    color: var(--color-white)!important;
}.mika-ajax-pager .ajax-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 15px;
    cursor: pointer;
}/***************表情******************/
ul.emoji-wrap-list {
    margin: 0;
    padding: 10px 12px;
    height: 220px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}.mika-emoji {
    position: absolute;
    left: 0;
    font-size: 13px;
    color: var(--color-text-regular);
    border: 1px solid var(--border-color-base);
    box-shadow: none;
    border-radius: 12px;
    margin-top: 7px;
    width: 363px;
    z-index: 10;
    background: var(--bg-main-color);
    overflow: hidden;
}.mika-emoji:before {
    content: '';
    display: block;
    position: absolute;
    top: -8px;
    left: 13px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--border-color-base);
    z-index: 10;
}.emoji-title {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
}li.emoji-item {
    cursor: pointer;
    padding: 4px;
    margin: 0;
    max-width: none;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background .15s;
}ul.emoji-wrap-list.emoji-small {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}ul.emoji-wrap-list.emoji-large {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}li.emoji-item:hover {
    background-color: var(--bg-muted-color);
}.emoji-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 8px;
    background: var(--bg-muted-color);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--border-color-base);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}li.emoji-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}.emoji-tabs-list .tabs-item img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}.emoji-tabs-list .emoji-fallback {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    font-size: 11px;
    border-radius: 6px;
}ul.emoji-wrap-list.emoji-small .emoji-fallback {
    font-size: 11px;
}ul.emoji-wrap-list.emoji-large .emoji-fallback {
    font-size: 14px;
}ul.emoji-wrap-list::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}ul.emoji-wrap-list:hover::-webkit-scrollbar-thumb {
    background: rgba(146,146,146,.3)
}ul.emoji-wrap-list::-webkit-scrollbar-thumb:hover {
    background: rgba(145,145,145,.7)
}ul.emoji-wrap-list::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(146,146,146,.1)
}.emoji-tabs {
    position: relative;
    height: 40px;
    overflow: hidden;
    background: var(--bg-muted-color);
    border-top: 1px solid var(--border-color-base);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}ul.emoji-tabs-list {
    margin: 0;
    padding: 0 4px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    gap: 2px;
}li.tabs-item {
    padding: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}li.tabs-item:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}li.tabs-item.active {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}.emoji-pager {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 56px;
    padding-right: 8px;
    color: var(--color-text-secondary);
}.emoji-pager div {
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}.emoji-pager div:hover:not(.disabled) {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}.emoji-pager .disabled {
    color: var(--color-text-placeholder);
    cursor: default;
}/***************验证码组件******************/
.password-input {
    display: flex;
    cursor: pointer;
    grid-gap: 8px;
    position: relative;
    justify-content: center;
    width: 100%;
}.password-input .password-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: var(--bg-text-color);
    color: var(--color-primary);
    border-radius: var(--radius);
    max-width: 40px;
    width: 100%;
    height: 40px;
}.password-input .password-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    opacity: .7;
}.password-input .password-cursor {
    width: 2px;
    height: 20px;
    animation: blink 1s infinite;
    background-color: var(--color-text-regular);
}.password-input .input {
    opacity: 0; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}/****************vip会员弹窗*********************/
.mika-modal-content:has(.pay-vip-container) {
    max-height: calc(100vh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}.mika-modal-content:has(.recharge-container) { width: 656px; max-width: calc(100vw - 32px); }.mika-modal-content:has(.recharge-container) .recharge-container { padding: 28px 28px 22px; }.mika-modal-content:has(.recharge-container) .recharge-header { margin-bottom: 26px; }.mika-modal-content:has(.recharge-container) .recharge-container { max-height: 760px; overflow-y: auto; }.mika-modal-content:has(.recharge-container) .recharge-container .fast-amount-list .list { display: flex; flex-wrap: nowrap; gap: 14px; }.mika-modal-content:has(.recharge-container) .recharge-container .fast-amount-list .list .item { flex: 1 1 0; min-width: 0; height: 80px; }.mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options { display: flex; flex-wrap: nowrap; gap: 14px; }.mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li { flex: 1 1 0; min-width: 0; height: 70px; }.mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-more-btn { min-width: 120px; height: 70px; }.mika-modal-content:has(.recharge-container) .recharge-title { font-size: 30px; line-height: 40px; color: var(--mika-color-text, #171b26); }.mika-modal-content:has(.recharge-container) .recharge-desc { font-size: 15px; color: #9aa2b2; }.mika-modal-content:has(.recharge-container) .recharge-order-summary { margin-top: 22px; padding: 20px 16px 14px; border: 1px solid #eceef2; border-radius: var(--mika-radius, 14px); }.mika-modal-content:has(.recharge-container) .recharge-order-summary__title { margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #303746; }.mika-modal-content:has(.recharge-container) .recharge-order-summary__row,
.mika-modal-content:has(.recharge-container) .recharge-order-summary__total { display: flex; justify-content: space-between; align-items: center; min-height: 34px; color: #8991a1; font-size: 14px; }.mika-modal-content:has(.recharge-container) .recharge-order-summary__row strong { color: #303746; font-weight: 500; }.mika-modal-content:has(.recharge-container) .recharge-order-summary__total { margin-top: 8px; padding-top: 12px; border-top: 1px dashed #e2e5eb; color: #303746; }.mika-modal-content:has(.recharge-container) .recharge-order-summary__total strong { color: var(--mika-color-finance, #303746); font-size: 23px; }.mika-modal-content:has(.recharge-container) .pay-button { margin-top: 18px; }.mika-modal-content:has(.recharge-container) .pay-button button { height: 50px; border-radius: 12px; background: var(--mika-color-primary); font-size: 16px; }.pay-vip-container {
    position: relative;
    max-width: 100%;
    width: 100%;
    padding: 28px 32px 24px;
    overflow-x: hidden;
    box-sizing: border-box;
}.pay-vip-container.pay-vip-empty {
    padding: 48px 32px;
    text-align: center;
    color: var(--color-text-secondary);
}.vip-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}.vip-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}.vip-modal-title-wrap {
    min-width: 0;
}.vip-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: rgba(26, 122, 248, 0.1);
    color: #1a7af8;
}.vip-modal-icon i {
    font-size: 24px;
    line-height: 1;
}.vip-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}.vip-modal-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}.vip-modal-code-link {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 4px 0;
    font-size: 14px;
    color: var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
}.vip-tier-toggle {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0 0 24px;
    padding: 4px;
    border-radius: var(--radius);
    background: var(--bg-muted-color);
    gap: 4px;
}.pay-vip-container .vip-tier-toggle {
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}.vip-tier-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 16px;
    border-radius: max(0px, calc(var(--radius) - 2px));
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}.vip-tier-btn.active {
    background: var(--theme-color);
    background-image: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-weight: 600;
    box-shadow: none;
}.vip-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    max-width: 100%;
}.vip-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 24px 16px 20px;
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    background: var(--bg-main-color);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}.vip-plan-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--border-color-base));
}.vip-plan-card.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}.vip-plan-card.recommended.active {
    border-color: var(--theme-color);
    box-shadow: 0 4px 16px rgba(26, 122, 248, 0.12);
}.vip-plan-badge {
    position: absolute;
    top: 0;
    right: 16px;
    transform: translateY(-50%);
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--theme-color);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}.vip-plan-discount {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: rgba(255, 171, 0, 0.15);
    color: #e69500;
    font-size: 12px;
    font-weight: 600;
}.vip-plan-name {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}.vip-plan-desc {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}.vip-plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 8px;
}.vip-plan-currency {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}.vip-plan-num {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
}.vip-plan-unit {
    margin-left: 2px;
    font-size: 14px;
    color: var(--color-text-secondary);
}.vip-plan-daily {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--color-text-secondary);
}.vip-plan-features {
    flex: 1;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}.vip-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-regular);
    word-break: break-word;
}.vip-plan-features li i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: #16a34a;
}.vip-plan-radio {
    display: flex;
    justify-content: center;
    margin-top: auto;
}.vip-plan-radio span {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color-base);
    border-radius: 50%;
    background: var(--bg-main-color);
    transition: border-color 0.2s, background 0.2s;
}.vip-plan-card.active .vip-plan-radio span {
    border-color: var(--theme-color);
    background: var(--theme-color);
    box-shadow: inset 0 0 0 3px var(--bg-main-color);
}.pay-vip-container .pay-type-vip {
    padding: 0 0 16px;
    margin-top: 20px;
    max-width: 100%;
}.pay-vip-container .pay-type-vip .pay-type-panel {
    display: block;
}.pay-vip-container .pay-type-vip .pay-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    min-height: 0;
    list-style: none;
    padding: 0;
}.pay-vip-container .pay-type-vip .pay-type-options li {
    flex: 1 1 0;
    min-width: 140px;
    width: auto;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    background: var(--bg-main-color);
    cursor: pointer;
}.pay-vip-container .pay-type-vip .pay-type-more-btn {
    display: none;
}.pay-vip-container .pay-type-vip .pay-type-options li.active {
    border-color: var(--theme-color);
}.pay-vip-container .pay-type-vip li.active .pay-type-check {
    border-color: var(--theme-color);
    background: var(--theme-color);
    color: #fff;
}.vip-pay-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 20px;
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    background: var(--bg-muted-color);
    flex-wrap: wrap;
}.vip-pay-summary-left {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
}.vip-pay-summary-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}.vip-pay-summary-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--mika-color-finance, var(--color-text-primary, #111827));
}.vip-pay-summary-origin {
    font-size: 14px;
    color: var(--color-text-placeholder);
    text-decoration: line-through;
}.vip-pay-summary-save {
    padding: 2px 8px;
    border-radius: var(--radius);
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
}.vip-pay-summary-note {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
}.vip-pay-summary-note i {
    font-size: 16px;
}.pay-vip-container .vip-pay-action {
    padding: 0;
    margin: 0 0 16px;
}.pay-vip-container .vip-pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: var(--radius);
    background: var(--theme-color);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}.pay-vip-container .vip-pay-btn i {
    font-size: 18px;
}.pay-vip-container .vip-pay-btn-outline {
    width: auto;
    min-width: 200px;
    padding: 0 24px;
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--border-color-base);
    color: var(--color-text-primary);
}.vip-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}.vip-modal-footer i {
    font-size: 16px;
    color: #16a34a;
}.vip-product-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-secondary);
    line-height: 1.7;
}.vip-product-empty p {
    margin: 0 0 8px;
}.vip-cardpay-panel .card-code-warp {
    margin-top: 8px;
    padding: 0 16px 8px;
}.pay-vip-container .card-code-warp .card-code-btn {
    max-width: none;
}.card-code-warp {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    justify-content: center;
    position: relative;
    align-items: center;
}.card-code-warp .card-code-input {
    max-width: 420px;
    width: 100%;
}.card-code-warp .card-code-input input {
    padding: 12px 14px;
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    background: var(--bg-main-color);
    font-size: 15px;
    width: 100%;
}.card-code-warp .card-code-input p {
    display: flex;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}.card-code-warp .card-code-btn {
    max-width: 420px;
    width: 100%;
    height: 48px;
    margin: 24px 0;
}.card-code-warp .card-code-bottom > * {
    font-size: 13px;
    color: var(--color-text-placeholder);
    margin: 0 12px 8px;
    text-decoration: revert;
    display: block;
}.pay-type {
    padding: 16px;
}.pay-type .title {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--color-text-primary);
}.pay-type ul,
.pay-type .pay-type-options {
    flex-wrap: wrap;
    gap: 16px 0;
    justify-content: flex-start;
    margin: 0 -8px;
    min-height: 47px;
    list-style: none;
    padding: 0;
}.pay-type li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    font-size: 14px;
    cursor: pointer;
    margin: 0 8px;
    padding: 10px 12px;
    width: calc(33.333% - 16px);
    background: var(--bg-main-color);
    color: var(--color-text-primary);
}.pay-type-recharge {
    padding: 0 20px 16px;
    margin-top: 20px;
}.pay-type-recharge .title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}.pay-type-recharge .pay-type-panel {
    display: flex;
    align-items: stretch;
    gap: 8px;
}.pay-type-recharge .pay-type-options {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-height: 0;
}.pay-type-recharge .pay-type-options li {
    flex: 1 1 calc(50% - 4px);
    min-width: 140px;
    width: auto;
    margin: 0;
    padding: 12px 14px;
}.pay-type-recharge .pay-type-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 108px;
    padding: 0 12px;
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    background: var(--bg-main-color);
    color: var(--color-text-secondary);
    font-size: 13px;
    white-space: nowrap;
}.pay-type-recharge .pay-type-more-btn i {
    font-size: 16px;
    line-height: 1;
}.pay-type-recharge .pay-type-more-options {
    margin-top: 8px;
}.pay-type-recharge .pay-type-more-options li {
    flex: 1 1 calc(50% - 4px);
    min-width: 140px;
    width: auto;
    margin: 0;
}.pay-type-recharge .pay-type-options li.active,
.pay-type li.active {
    border-color: var(--theme-color);
}.pay-type-name {
    font-weight: 500;
}.pay-type-main {
    display: flex;
    align-items: center;
    min-width: 0;
}.pay-type-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color-base);
    background: var(--bg-main-color);
    color: transparent;
    flex-shrink: 0;
}.pay-type li.active .pay-type-check,
.pay-type-recharge li.active .pay-type-check {
    border-color: var(--theme-color);
    background: var(--theme-color);
    color: #fff;
}.pay-type-check i {
    font-size: 12px;
    line-height: 1;
    color: inherit;
}.pay-type-recharge li.active .pay-type-check i {
    color: #fff;
}.pay-type-main i {
    font-size: 22px;
    line-height: 1;
    margin-right: 4px;
}.pay-type i {
    font-size: 25px;
    line-height: 25px;
    margin-right: 5px;
}.pay-type .balance {
    background: var(--bg-muted-color);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 15px;
    margin-top: 10px;
    justify-content: space-between;
    color: var(--color-text-secondary);
}.pay-type .balance .rigth {
    color: var(--mika-color-finance, var(--color-text-primary, #111827));
    font-size: 16px;
}.pay-type .balance .rigth span {
    font-size: 12px;
}i.ri-alipay-fill {
    color: #00a0e9;
    
}i.ri-wechat-pay-fill {
    color: #00c800;
}i.ri-wallet-3-fill {
    color: #ffab00;
}i.ri-bank-card-fill {
    color: #f5a623;
}.pay-button {
    padding-bottom: 16px;
    margin: 0 16px;
}.pay-button button {
    background: var(--theme-color);
    color: var(--color-white);
    height: 40px;
    width: 100%;
    border-radius: var(--btn-radius, var(--radius));
    font-size: 15px;
}.recharge-container .pay-button button {
    background: #3d4f67;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}.dark-theme .recharge-container .pay-button button {
    background: var(--color-primary);
}.recharge-container .pay-button {
    padding: 4px 20px 8px;
    margin: 0;
}/********扫码支付组件************/
.qrcode-pay-container {
    max-width: 312px;
    width: 100%;
}.qrcode-pay-container .qrcode-pay {
    padding: 24px 0 0;
    text-align: center;

}.qrcode-pay-container .pay-logo {
    margin-bottom: 12px;
    justify-content: center;
}.qrcode-pay-container .pay-logo img {
    height: 35px;
    display: none;
}.qrcode-pay-container .alipay .pay-logo .alipay-logo,
.qrcode-pay-container .wecatpay .pay-logo .wecatpay-logo {
    display: block;
}.qrcode-pay-container .pay-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 24px;
}.qrcode-pay-container .pay-price {
    font-size: 32px;
    margin: 12px auto;
    width: 100%;
    font-weight: bold;
}.qrcode-pay-container .pay-qrcode {
    width: 164px;
    height: 164px;
    margin: auto;
}.qrcode-pay-container .pay-countdown {
    padding: 12px 0;
    font-size: 14px;
}.qrcode-pay-container .qrcode-pay-bottom {
    width: 100%;
    background: #00af1b;
    color: #fff;
    padding: 12px 0px;
    text-align: center;
    font-size: 14px;
}.qrcode-pay-container .alipay + .qrcode-pay-bottom {
    background: #1677ff;
}/**************支付检查组件**********************/
.pay-check-container {
    width: 100%;
}.pay-check-container:not(.mika-pay-check) {
    min-height: 270px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}.pay-check-container:not(.mika-pay-check) > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}.pay-check-container:not(.mika-pay-check) > div p {
    margin-bottom: 16px;
    font-size: 18px;
}.pay-check-container:not(.mika-pay-check) .icon i {
    font-size: 50px;
    line-height: 50px;
}.pay-check-container:not(.mika-pay-check) .icon {
    border-radius: 100%;
    background: green;
    color: #fff;
    margin-bottom: 16px;
    padding: 12px;
}/*********************余额充值与积分充值***************************/
.recharge-container {
    max-width: 520px;
    width: 100%;
    padding-bottom: 4px;
}.recharge-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 0;
}.recharge-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-text-color);
    color: var(--color-primary);
    flex-shrink: 0;
}.recharge-header-icon i {
    font-size: 22px;
    line-height: 1;
}.recharge-header-text {
    min-width: 0;
    flex: 1;
    padding-top: 2px;
}.recharge-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
}.recharge-desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}.recharge-section {
    padding: 16px 20px 0;
}.recharge-section-title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}.fast-amount-list {
    margin: 0;
}.recharge-container .fast-amount-list .list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}.fast-amount-list .item {
    cursor: pointer;
    flex: 1 1 calc(20% - 8px);
    min-width: 88px;
    max-width: calc(33.333% - 6px);
    background: var(--bg-main-color);
    margin: 0;
    text-align: center;
    padding: 14px 8px 12px;
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--border-color-base);
}.fast-amount-list .item.active {
    background-color: var(--bg-muted-color);
    border-color: var(--theme-color);
    color: var(--color-text-primary) !important;
}.fast-amount-list .item-check {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--color-white);
}.fast-amount-list .item.active .item-check {
    display: flex;
}.fast-amount-list .item-check i {
    font-size: 11px;
    line-height: 1;
}.fast-amount-list .price-icon {
    border-radius: 8px 0 8px 0;
    left: -1px;
    padding: 0 8px;
    position: absolute;
    top: -1px;
    background: var(--color-text-primary);
    color: var(--color-white);
    font-size: 12px;
}.dark-theme .fast-amount-list .price-icon {
    background: var(--color-primary);
}.fast-amount-list .price-num {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-secondary);
}.fast-amount-list .price-og-num {
    color: var(--color-text-secondary);
    text-decoration: line-through;
    padding-left: 2px;
    font-size: 12px;
    font-weight: 400;
}.fast-amount-list .currency {
    padding-left: 2px;
    font-size: 13px;
}.fast-amount-list .price-name {
    font-size: 18px;
    color: var(--color-text-primary);
}.fast-amount-list .item-custom {
    min-height: 78px;
}.fast-amount-list .custom {
    border-bottom: 1px solid var(--border-color-base);
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    gap: 2px;
}.fast-amount-list .custom input {
    padding: 0;
    width: 72px;
    font-size: 14px;
    text-align: left;
    background-color: transparent;
    color: var(--color-text-primary);
}.fast-amount-list .custom input::placeholder {
    color: var(--color-text-placeholder);
    font-size: 12px;
}.fast-amount-list .custom-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 0;
    display: block;
    cursor: pointer;
}.recharge-container .card-code-warp {
    margin-top: 5px;
    padding: 0 20px;
}.recharge-container .card-code-warp .card-code-bottom {
    margin-top: 16px;
}.recharge-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 20px 18px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary);
}.recharge-footer i {
    font-size: 14px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}.confirm-pay-container .pay-type {
    padding: 0 16px 16px;
}/*******************确认支付***********************/
.confirm-pay-container {
    max-width: 356px;
    width: 100%;
}.colorful-header {
    position: relative;
}.colorful-header .title {
    display: flex;
    padding: 12px 16px 0;
    width: 100%;
    align-items: center;
}.colorful-header .title i {
    font-size: 24px;
    line-height: 30px;
}.colorful-header .title div {
    margin-left: 12px;
    font-size: 18px;
    line-height: 18px;
}.confirm-pay-container .pay-info {
    padding: 16px;
    font-size: 15px;
    background: var(--bg-muted-color);
    margin: 16px;
    border-radius: var(--radius);
}.confirm-pay-container .pay-info-title {
    margin-bottom: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}.confirm-pay-container .pay-info-price {
    justify-content: space-between;
    color: var(--color-text-regular);
    font-size: 14px;
}.confirm-pay-container .pay-info-price .rigth span:last-of-type {
    color: var(--mika-color-finance, var(--color-text-primary, #111827));
}.confirm-pay-container .pay-info-price .rigth span:last-of-type span {
    font-size: 12px;
}.confirm-pay-container .pay-info-price .pay-tag {
    color: var(--color-white);
    background-color: var(--theme-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
}/*************输入验证码组件******************/
.password-pay-container {
    max-width: 385px;
    width: 100%;
}.password-pay-container .form-container {
    padding: 16px;
    padding-bottom: 0;
}.password-pay-container .scan-info {
    text-align: center;
    margin-bottom: 16px;
}.password-pay-container .scan-info .qrcode-img {
    width: 120px;
    height: 120px;
    margin: auto;
    background-color: var(--bg-text-color);
    padding: 8px;
}.password-pay-container .scan-info .text {
    margin-top: 8px;
}/* Password verify modal — design 58-密码验证弹窗 (385×336 shell) */
.app-layout-active .mika-modal-content:has(.password-pay-container),
.mika-modal-content:has(.mika-pwd-verify) {
    width: 385px !important;
    max-width: calc(100vw - 32px);
    border-radius: 20px;
    background: var(--mika-color-surface, #fff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .close,
.mika-modal-content:has(.mika-pwd-verify) .close {
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #9aa0ac;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .close i,
.mika-modal-content:has(.mika-pwd-verify) .close i {
    width: 22px;
    height: 22px;
    font-size: 20px;
    color: #9aa0ac;
    opacity: 1;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .password-pay-container,
.mika-modal-content:has(.mika-pwd-verify) .password-pay-container {
    max-width: none;
    width: 100%;
    color: var(--mika-color-text, #171b26);
}.mika-pwd-verify__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 38px 0;
}.mika-pwd-verify__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #ffd6de 0%, #ffe8ed 42%, #fff5f7 72%, transparent 78%);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--mika-color-primary) 4%, transparent);
    color: var(--mika-color-primary);
    margin: 0 0 16px;
}.mika-pwd-verify__icon i {
    font-size: 30px;
    line-height: 1;
    color: var(--mika-color-primary);
}.mika-pwd-verify__title {
    display: block;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mika-color-text, #171b26);
    letter-spacing: 0.02em;
}.mika-pwd-verify__desc {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #8991a1;
    line-height: 1.5;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .form-container,
.mika-modal-content:has(.mika-pwd-verify) .mika-pwd-verify__body {
    padding: 22px 38px 28px;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .scan-info .qrcode-img,
.mika-pwd-verify__qr .qrcode-img {
    border-radius: 12px;
    background: #fafbfc;
    border: 1px solid #eceef2;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .scan-info .text,
.mika-pwd-verify__qr .text {
    color: #8991a1;
    font-size: 13px;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .mika-pwd-field,
.mika-pwd-verify .mika-pwd-field {
    position: relative;
    display: block;
    margin: 0;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .mika-pwd-field__icon,
.mika-pwd-verify .mika-pwd-field__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0a7b4;
    font-size: 18px;
    pointer-events: none;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .mika-pwd-field input,
.mika-pwd-verify .mika-pwd-field input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 44px;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    background: #fafbfc;
    color: var(--mika-color-text, #171b26);
    font-size: 14px;
    box-sizing: border-box;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .mika-pwd-field input:focus,
.mika-pwd-verify .mika-pwd-field input:focus {
    border-color: var(--mika-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mika-color-primary) 8%, transparent);
    outline: 0;
    background: var(--mika-color-surface, #fff);
}.app-layout-active .mika-modal-content:has(.password-pay-container) .mika-pwd-field input::placeholder,
.mika-pwd-verify .mika-pwd-field input::placeholder {
    color: #b0b6c2;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .mika-pwd-eye,
.mika-pwd-verify .mika-pwd-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #8991a1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .form-button,
.mika-pwd-verify__action {
    padding: 16px 0 0;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .form-button button,
.mika-pwd-verify__action button {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--mika-color-primary);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mika-color-primary) 22%, transparent);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
}.app-layout-active .mika-modal-content:has(.password-pay-container) .form-button button:hover,
.mika-pwd-verify__action button:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 85%, #000);
}/*************绑定邮箱或手机号 — 设计图 46-账号绑定弹窗******************/
.app-layout-active .mika-modal-content:has(.binding-container),
.mika-modal-content:has(.mika-binding) {
    width: 399px;
    max-width: calc(100vw - 32px);
    border-radius: 20px;
    background: var(--mika-color-surface, #fff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}.app-layout-active .mika-modal-content:has(.binding-container) .close,
.mika-modal-content:has(.mika-binding) .close {
    top: 18px;
    right: 18px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    z-index: 3;
}.app-layout-active .mika-modal-content:has(.binding-container) .close i,
.mika-modal-content:has(.mika-binding) .close i {
    width: 22px;
    height: 22px;
    font-size: 20px;
    color: #9aa0ac;
    opacity: 1;
}.mika-binding.binding-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 20px 30px 28px;
    color: var(--mika-color-text, #171b26);
}.mika-binding-brand {
    display: flex;
    align-items: center;
    height: 28px;
    margin: 0 0 24px;
}.mika-binding-brand img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
}.mika-binding-head {
    text-align: center;
    margin: 0 0 24px;
}.mika-binding-title {
    display: block;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mika-color-text, #171b26);
    letter-spacing: 0.01em;
}.mika-binding-desc {
    margin: 10px 0 0;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: #8b93a3;
}.mika-binding-form {
    display: flex;
    flex-direction: column;
}.mika-binding-field {
    position: relative;
    display: block;
    margin: 0 0 14px;
}.mika-binding-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3b2;
    font-size: 18px;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}.mika-binding-field input {
    display: block;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 14px 0 42px;
    border: 1px solid #e4e6ec;
    border-radius: 10px;
    background: var(--mika-color-surface, #fff);
    color: #303746;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}.mika-binding-field:has(.mika-binding-code) input {
    padding-right: 100px;
}.mika-binding-field input::placeholder {
    color: #b0b6c3;
}.mika-binding-field input:focus {
    border-color: #ff647f;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mika-color-primary) 8%, transparent);
}.mika-binding-code {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mika-color-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}.mika-binding-code.is-disabled {
    color: #b0b6c3;
    cursor: not-allowed;
    font-weight: 500;
}.mika-binding-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 10px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--mika-color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}.mika-binding-submit:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 85%, #000);
}.mika-binding-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}.mika-binding-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 16px;
    color: #a0a7b5;
    font-size: 12px;
    line-height: 1.2;
}.mika-binding-secure i {
    font-size: 13px;
    color: #a0a7b5;
}/******************图片上传（设计图 60）**********************/
.image-upload-box,
.image-upload-box.mika-image-upload {
    max-width: 454px;
    width: 100%;
    border-radius: 0;
    color: var(--mika-color-text, #171b26);
    box-sizing: border-box;
}.mika-modal-content:has(.image-upload-box),
.app-layout-active .mika-modal-content:has(.image-upload-box) {
    width: 454px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mika-color-surface, #fff);
}.mika-modal-content:has(.image-upload-box) .close,
.app-layout-active .mika-modal-content:has(.image-upload-box) .close {
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
}.mika-modal-content:has(.image-upload-box) .close:hover,
.app-layout-active .mika-modal-content:has(.image-upload-box) .close:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}.mika-modal-content:has(.image-upload-box) .close i,
.app-layout-active .mika-modal-content:has(.image-upload-box) .close i {
    color: #9ca3af !important;
    font-size: 22px;
    opacity: 1 !important;
}.image-upload-box .mika-upload-title {
    padding: 22px 24px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mika-color-text, #171b26);
    text-align: center;
}.image-upload-box .container-top,
.image-upload-box .mika-upload-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 14px 20px 0;
    padding: 4px;
    border-bottom: 0;
    border-radius: 12px;
    background: #f3f4f7;
    box-sizing: border-box;
}.image-upload-box .mika-upload-tabs:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}.image-upload-box .mika-upload-tabs:has(> :only-child) {
    grid-template-columns: 1fr;
}.image-upload-box .container-top span,
.image-upload-box .mika-upload-tab {
    margin: 0;
    padding: 10px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #8991a1;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}.image-upload-box .mika-upload-tab i {
    font-size: 16px;
    line-height: 1;
}.image-upload-box .container-top span.active,
.image-upload-box .mika-upload-tab.active {
    color: var(--mika-color-primary, #fb0022);
    font-weight: 600;
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 27, 38, 0.06), 0 0 0 1px rgba(23, 27, 38, 0.04);
}.image-upload-box .container-top span.active::before {
    display: none;
}.image-upload-box .container-content {
    min-height: 0;
}.image-upload-box .mika-upload-body,
.image-upload-box .mika-upload-pane {
    padding: 16px 20px 0;
    box-sizing: border-box;
}.image-upload-box .mika-upload-drop {
    display: block;
    margin: 0 0 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
}.image-upload-box .mika-upload-drop.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}.image-upload-box .mika-upload-drop .upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 168px;
    padding: 28px 16px;
    border: 1.5px dashed color-mix(in srgb, var(--mika-color-primary, #fb0022) 28%, transparent);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff8fa 0%, #fff 100%);
    color: #8991a1;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}.image-upload-box .mika-upload-drop.is-dragover .upload-btn {
    border-color: var(--mika-color-primary, #fb0022);
    background: #ffeff2;
    transform: scale(1.01);
}.image-upload-box .mika-upload-drop .upload-btn i {
    font-size: 32px;
    color: var(--mika-color-primary, #fb0022);
    line-height: 1;
}.image-upload-box .mika-upload-drop .upload-btn strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
}.image-upload-box .mika-upload-drop .upload-btn span {
    font-size: 12px;
    line-height: 1.4;
    color: #8991a1;
    max-width: 280px;
}.image-upload-box .mika-upload-preview-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
    line-height: 1.3;
}.image-upload-box .mika-upload-preview-slot {
    min-height: 90px;
    margin: 0 0 4px;
}.image-upload-box .mika-upload-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 12px;
    border-radius: 10px;
    background: #f7f8fa;
    color: #a0a7b5;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
}.image-upload-box .mika-upload-preview-row,
.image-upload-box .mika-upload-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}.image-upload-box .mika-upload-pane--gallery .mika-upload-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    flex-wrap: unset;
    max-height: 248px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    padding-right: 2px;
    scrollbar-width: thin;
}.image-upload-box .mika-upload-preview-row::-webkit-scrollbar {
    height: 0;
    width: 0;
}.image-upload-box .mika-upload-pane--gallery .mika-upload-gallery::-webkit-scrollbar {
    width: 4px;
}.image-upload-box .mika-upload-pane--gallery .mika-upload-gallery::-webkit-scrollbar-thumb {
    background: #d5d9e2;
    border-radius: 4px;
}.image-upload-box .mika-upload-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    padding: 24px 16px;
    border-radius: 12px;
    background: #f7f8fa;
    color: #8991a1;
    text-align: center;
    box-sizing: border-box;
}.image-upload-box .mika-upload-gallery-empty i {
    font-size: 36px;
    color: #c3c9d4;
    line-height: 1;
}.image-upload-box .mika-upload-gallery-empty p {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #5b6475;
}.image-upload-box .mika-upload-gallery-empty span {
    font-size: 12px;
    line-height: 1.4;
    color: #a0a7b5;
}.image-upload-box .mika-upload-thumb {
    position: relative;
    flex: 0 0 74px;
    width: 74px;
    height: 98px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f7f9;
    cursor: default;
}.image-upload-box .mika-upload-pane--gallery .mika-upload-thumb {
    flex: unset;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}.image-upload-box .mika-upload-thumb.active {
    box-shadow: 0 0 0 2px var(--mika-color-primary, #fb0022);
}.image-upload-box .mika-upload-thumb .img {
    width: 100%;
    height: 100%;
    position: relative;
}.image-upload-box .mika-upload-thumb .img img,
.image-upload-box .mika-upload-thumb .img .w-h {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}.image-upload-box .mika-upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
}.image-upload-box .mika-upload-remove i {
    font-size: 12px;
    line-height: 1;
}.image-upload-box .progress-text {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    bottom: 5px;
    left: 0;
    width: 100%;
    font-size: 11px;
    color: #fff;
    text-align: center;
    z-index: 1;
}@-webkit-keyframes progress-bar-stripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}@keyframes progress-bar-stripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}.image-upload-box .progress.progress-striped {
    position: absolute;
    height: 4px;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
    width: 100%;
}.image-upload-box .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: var(--mika-color-primary, #fb0022);
    float: left;
    width: 0%;
    height: 100%;
    transition: width 0.6s ease;
}.image-upload-box .active-index {
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: var(--mika-color-primary, #fb0022);
    border-radius: 0 8px 0 4px;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 12px;
    min-width: 16px;
    text-align: center;
}.image-upload-box .images-link {
    padding: 16px 20px 0;
}.image-upload-box .mika-upload-link-hero {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7f9 0%, #f7f8fa 100%);
    box-sizing: border-box;
}.image-upload-box .mika-upload-link-hero > i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    color: var(--mika-color-primary, #fb0022);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 1px 2px rgba(23, 27, 38, 0.06);
}.image-upload-box .mika-upload-link-hero strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
    line-height: 1.3;
}.image-upload-box .mika-upload-link-hero p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8991a1;
    line-height: 1.4;
}.image-upload-box .mika-upload-link-tip {
    color: #8991a1;
    font-size: 14px;
    padding-bottom: 12px;
    margin: 0;
}.image-upload-box .mika-upload-link-input {
    border: 0;
    width: 100%;
    min-height: 200px;
    background: #f5f7f9;
    color: var(--mika-color-text, #171b26);
    padding: 14px;
    box-sizing: border-box;
    line-height: 1.55;
    border-radius: 12px;
    resize: vertical;
    font-size: 13px;
}.image-upload-box .mika-upload-link-input:focus {
    outline: 2px solid color-mix(in srgb, var(--mika-color-primary, #fb0022) 28%, transparent);
    outline-offset: 0;
    background: #fff;
}.image-upload-box .insert-img-button {
    display: flex;
    justify-content: center;
    padding: 16px 20px 20px;
}.image-upload-box .insert-img-button button {
    width: 264px;
    max-width: 100%;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fb0022 !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    opacity: 1 !important;
    transition: background 0.2s ease;
}.image-upload-box .insert-img-button button:hover {
    background: #e6001f !important;
}.image-upload-box .insert-img-button button.is-empty {
    cursor: not-allowed;
    opacity: 0.55 !important;
}@media (max-width: 480px) {
    .image-upload-box .mika-upload-tabs {
        margin-left: 16px;
        margin-right: 16px;
    }

    .image-upload-box .mika-upload-tab span {
        font-size: 12px;
    }

    .image-upload-box .mika-upload-thumb {
        flex-basis: 64px;
        width: 64px;
        height: 86px;
    }

    .image-upload-box .mika-upload-pane--gallery .mika-upload-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: 220px;
    }

    .image-upload-box .insert-img-button button {
        width: 100%;
    }
}/*****************创建话题******************/
.create-topic-container {
    max-width: 428px;
    width: 100%;
}.create-topic-container .manage-content-wrap {
    padding: 16px;
}.create-topic-container .base-manage {
    display: flex;
    justify-content: center;
    padding-bottom: 16px;
}.create-topic-container .base-manage .circle-icon {
    margin:0;
}.create-topic-container .form-container .form-button {
    padding-bottom: 0;
}/* Create topic — design 57 (global,
not only circle pages) */
.app-layout-active .mika-modal-content:has(.create-topic-container),
.mika-modal-content:has(.create-topic-container) {
    width: 428px;
    max-width: calc(100vw - 32px);
    border-radius: var(--mika-radius, 14px);
    overflow: hidden;
    background: var(--mika-color-surface, #fff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .close,
.mika-modal-content:has(.create-topic-container) .close {
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .close:hover,
.mika-modal-content:has(.create-topic-container) .close:hover {
    background: transparent;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .close i,
.mika-modal-content:has(.create-topic-container) .close i {
    font-size: 20px;
    color: #9aa1ad;
    opacity: 1;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .create-topic-container {
    max-width: none;
    color: var(--mika-color-text, #171b26);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .colorful-header {
    padding: 24px 28px 0;
    background: var(--mika-color-surface, #fff);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .colorful-header .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mika-color-text, #171b26);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .manage-content-wrap {
    padding: 18px 28px 28px;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-label em {
    color: var(--mika-color-primary);
    font-style: normal;
    margin-left: 2px;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item {
    position: relative;
    display: block;
    margin-bottom: 16px;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item input,
.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafbfc;
    color: var(--mika-color-text, #171b26);
    font-size: 14px;
    box-sizing: border-box;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item input {
    height: 44px;
    padding: 0 64px 0 14px;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item textarea {
    min-height: 108px;
    padding: 12px 14px 28px;
    resize: none;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item input:focus,
.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item textarea:focus {
    border-color: var(--mika-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mika-color-primary) 8%, transparent);
    outline: 0;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item input::placeholder,
.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-item textarea::placeholder {
    color: #b0b6c2;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 12px;
    color: #a0a7b4;
    pointer-events: none;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-field:not(.mika-topic-field--area) .mika-topic-count {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 152px;
    margin-bottom: 20px;
    padding: 22px 16px;
    border: 1.5px dashed #d5dae3;
    border-radius: var(--mika-radius, 14px);
    background: #f7f8fa;
    color: #8991a1;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-cover:hover {
    border-color: color-mix(in srgb, var(--mika-color-primary) 45%, transparent);
    background: #fff7f9;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-cover i {
    font-size: 30px;
    color: #a0a7b4;
    line-height: 1;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-cover strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-cover span {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #8991a1;
    max-width: 300px;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .mika-topic-cover__img {
    width: 100%;
    height: 152px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-button button {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--mika-color-primary);
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-button button:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 85%, #000);
}.app-layout-active .mika-modal-content:has(.create-topic-container) .form-container .form-button button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}/**************下载页面****************/
.content-wrapper .download-page {
    padding: 24px;
    border-radius: var(--radius);
    margin-top: 50px;
    box-shadow: 4px 4px 24px 0 rgba(96,101,108,.12);
}.download-page .header-logo {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}.download-page .logo {
    display: block;
}.download-page .header-logo img {
    height: calc(var(--top-menu-height) - 20px);
}.download-page .header-logo .site-title {
    font-size: 26px;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1;
}.download-page h1 {
    font-size: 20px;
    margin-bottom: 16px;
}.download-page .attrs {
    margin: 16px 0;
}.download-page .attrs .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
}.download-page .attrs .item span:last-of-type {
    margin-left: 8px;
}.download-page .attrs .item span:first-of-type {
    color: var(--color-text-secondary);
}.download-page .attrs .item + .item {
    margin-top: 8px;
}.download-page .attr {
    font-size: 14px;
}.download-page .attr > div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}.download-page .attr .bg-text {
    padding: 2px 12px;
    border-radius: 4px;
}.download-page .button {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 16px;
    line-height: 30px;
}/**************文章内下载模块*****************/
.download-box .scroll-tabs-wrapper .tabs-content > .tab-item {
    padding: 8px;
    background: var(--bg-muted-color);
    align-items: center;
    width: 180px;
}.download-box .tab-item .thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 12px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-muted-color);
}.download-box .tab-item b {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    text-align: center;
    line-height: 40px;
    font-weight: normal;
}.download-box .tab-item .text-ellipsis {
    white-space: normal;
    font-size: 14px;
    --line-clamp: 2;
    line-height: 1.4;
}.download-list-item {
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius);
    overflow: hidden;
}.download-list-item .title {
    margin: 12px;
    font-size: 18px;
}.download-list-item .attrs-list {
    display: flex;
    flex-flow: wrap;
    margin: 12px;
    grid-gap: 12px 12px;
}.download-list-item .attrs-list .attr-item {
    width: calc(50% - 6px);
    font-size: 14px;
}.download-list-item .attrs-list .attr-item span:first-of-type {
    color: var(--color-text-secondary);
}.download-list-item .rights {
    margin: 12px;
    background: var(--bg-muted-color);
    border-radius: var(--radius);
    padding: 12px;
    user-select: none;
}.download-list-item .rights > div {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}.download-list-item .rights .list {
    font-size: 12px;
}.download-list-item .rights .list .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    line-height: 12px;
}.download-list-item .rights .list .current {
    color: var(--color-primary);
    font-weight: 600;
}.download-list-item .rights .list .current-tag {
    font-weight: 400;
    margin-left: 2px;
}/****************视频播放页面***********************/
.mika-play-single-header {
    width: 100%;
    margin-bottom: var(--gap);
}.mika-play-single-header .mika-player-wrap {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: var(--gap);
    margin-bottom: 0;
}.mika-player-wrap--drawer {
    display: block;
}.mika-player-wrap--drawer .mika-play-theater {
    width: 100%;
    flex: none;
}.mika-player-wrap .mika-play-left,
.mika-player-wrap .mika-play-theater {
    flex: 1;
    min-width: 0;
}.mika-player-wrap .mika-player-box {
    position: relative;
    height: 0;
    padding-top: calc(56.25% + 46px);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0d0d12;
}#moeplayer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #0d0d12;
}.player-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 111;
    border-radius: var(--radius);
    overflow: hidden;
}.player-popup .mask-body {
    background: linear-gradient(165deg, #181822 0%, #13131b 50%, #0f0f15 100%);
    width: 100%;
    height: calc(100% - 46px);
}.player-popup .mask-bottom {
    background-color: #1a1a24;
    width: 100%;
    padding: 12px;
    justify-content: space-between;
    display: flex;
    align-items: center;
    height: 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}.player-popup .mask-bottom .mask-item {
    height: 100%;
    background-color: #2a2a36;
    border-radius: 3px;
}.player-popup .mask-bottom .mask-item-left {
    width: 18%;
}.player-popup .mask-bottom .mask-item-right {
    width: 80%;
}.video-role-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
}.video-role-info {
    --vr-text: #ececf0;
    --vr-text-2: #9b9ba8;
    --vr-text-3: #6e6e7a;
    --vr-surface: rgba(255, 255, 255, 0.04);
    --vr-border: rgba(255, 255, 255, 0.08);
    --vr-accent: #9d70ff;
    --vr-accent-deep: #7e57e8;
    max-width: 440px;
}.video-role-info .role-tip-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--vr-text);
    letter-spacing: 0.01em;
    line-height: 1.45;
}.video-role-info .video-pay-price {
    color: var(--vr-accent);
}.video-pay-price .unit-price {
    color: #6a6b6d;
    font-size: 14px;
    margin-left: 10px;
}.video-role-info .video-pay-price .total-price {
    font-size: 30px;
}.video-role-info > * + * {
    line-height: 1.4;
    padding-top: 20px;
}.video-role-info > p,
.video-role-info .role-tip-desc {
    color: var(--vr-text-3);
    font-size: 13px;
    margin: 0;
    line-height: 1.55;
}.video-role-info .video-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}.video-role-info .video-action-button > * {
    width: 120px;
    height: 40px;
    padding: 0;
    margin: 0 10px;
    font-size: 15px;
}.video-role-info .video-action-button .role-vip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 200px;
    height: 40px;
    padding: 0 28px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, var(--vr-accent) 0%, var(--vr-accent-deep) 100%);
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(126, 87, 232, 0.34);
    transition: background .18s, box-shadow .18s, transform .18s;
}.video-role-info .video-action-button .role-vip-btn:hover {
    background: linear-gradient(135deg, #ab82ff 0%, #8d66ef 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(126, 87, 232, 0.42);
    color: #fff !important;
}.video-role-info .video-action-button button {
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}.video-role-info .video-action-button button:first-of-type {
    background: transparent;
    border: 1px solid rgba(157, 112, 255, 0.45);
    color: #c4a8ff;
}.video-role-info .video-action-button button:first-of-type:hover {
    background: rgba(157, 112, 255, 0.1);
    border-color: rgba(157, 112, 255, 0.65);
    color: #dcc8ff;
}.video-role-info .video-action-button button:last-of-type:not(:only-child) {
    background: linear-gradient(135deg, var(--vr-accent) 0%, var(--vr-accent-deep) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}.video-role-info .video-roles .roles-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    color: var(--vr-text);
    grid-gap: 10px;
    gap: 10px;
    padding: 4px 0 0;
    list-style: none;
    margin: 0;
}.video-role-info .video-roles .roles-list li {
    min-width: 92px;
    max-width: 120px;
    padding: 14px 16px;
    text-align: center;
    pointer-events: none;
    user-select: none;
    background: var(--vr-surface);
    border: 1px solid var(--vr-border);
    border-radius: 10px;
}.video-role-info .video-roles .roles-list .lv-icon {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}.video-role-info .video-roles .roles-list .lv-icon img {
    height: 100%;
    width: auto;
    max-width: 72px;
    display: block;
    object-fit: contain;
}.video-role-info .video-roles .roles-list .lv-name {
    font-size: 12px;
    line-height: 1.35;
    background: transparent;
    padding: 8px 0 0;
    height: auto;
    border-radius: 0;
    color: var(--vr-text-2);
}.mika-player-wrap .mika-play-right {
    --play-sidebar-width: 320px;
    width: var(--play-sidebar-width);
    min-width: var(--play-sidebar-width);
    flex-shrink: 0;
    height: auto;
    position: relative;
    margin-left: 0;
}.mika-player-wrap .mika-play-right .video-info-wrap {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}.video-info-wrap .play-list-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--border-color-base, rgba(0, 0, 0, .06));
    background: var(--bg-muted-color);
    box-shadow: none;
}.video-info-wrap .play-list-box .play-list-title {
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color-base, rgba(0, 0, 0, .06));
    flex-shrink: 0;
}.video-info-wrap .play-list-box .play-list-title > * {
    display: flex;
    align-items: center;
}.video-info-wrap .play-list-title .list-left {
    gap: 8px;
}.video-info-wrap .play-list-title .list-left .progress {
    color: var(--color-text-placeholder);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-main-color);
    line-height: 1.4;
}.video-info-wrap .play-list-title h4 {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}.video-info-wrap .play-list-title .list-right .list-mode-btn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--color-text-regular);
    transition: background .15s, color .15s;
}.video-info-wrap .play-list-title .list-right .list-mode-btn:hover {
    background: var(--bg-main-color);
    color: var(--color-text-primary);
}.video-info-wrap .play-list-title .list-right i {
    font-size: 18px;
    line-height: 1;
}.video-info-wrap .play-list-box .play-list-wrap {
    font-size: 13px;
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 8px;
}.play-list-wrap::-webkit-scrollbar-track {
    background: transparent
}.play-list-wrap::-webkit-scrollbar {
    position: absolute;
    width: 4px;
    background: transparent
}.play-list-wrap::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--color-text-placeholder);
}.play-list-wrap .chapter-video-list {
    list-style: none;
    margin: 0;
    padding: 0;
}.play-list-wrap .chapter-video-list li {
    margin: 0 0 4px;
    padding: 0;
    line-height: 1;
    border-radius: 10px;
    transition: background .15s;
}.play-list-wrap .chapter-video-list li:last-child {
    margin-bottom: 0;
}.play-list-wrap .chapter-video-list li:hover {
    background: var(--bg-main-color);
}.play-list-wrap .chapter-video-list li.active {
    background: color-mix(in srgb, var(--theme-color) 14%, var(--bg-main-color));
}.play-list-wrap .chapter-video-list li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    gap: 12px;
    color: var(--color-text-primary);
    text-decoration: none;
}.play-list-wrap .chapter-video-list li.active a {
    color: var(--theme-color);
}.play-list-wrap .video-thumb {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
    width: 96px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--bg-main-color);
}.play-list-wrap .video-thumb .thumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}.play-list-wrap .video-title {
    flex: 1 1 0%;
    min-width: 0;
}.play-list-wrap .video-title .title {
    line-height: 1.5;
    --line-clamp: 2;
    font-size: 13px;
    word-break: break-word;
}.play-list-wrap .chapter-title {
    padding: 8px 12px 6px;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-placeholder);
}.play-list-wrap .number-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}.play-list-wrap .number-list li {
    position: relative;
    padding: 0;
    padding-top: 100%;
    background: var(--bg-main-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    border: 1px solid transparent;
}.play-list-wrap .number-list li:hover {
    border-color: var(--border-color-base, rgba(0, 0, 0, .08));
}.play-list-wrap .number-list li.active {
    background: color-mix(in srgb, var(--theme-color) 16%, var(--bg-main-color));
    border-color: color-mix(in srgb, var(--theme-color) 40%, transparent);
    color: var(--theme-color);
}.video-info-wrap .video-info {
    margin-bottom: var(--gap);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
}.video-info-wrap .video-info .video-info-left {
    flex-shrink: 0;
    margin-right: 12px;
    width: 15%;
    min-width: 80px;
}.video-info-wrap .video-info .video-info-right {
    display: flex;
    flex-direction: column;
    flex: 1;
}.video-info-wrap .video-info h2 {
    font-size: 15px;
    font-weight: 600;
}.video-info-wrap .video-info p {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 5px;
    --line-clamp: 2;
}.video-info-wrap .video-info .video-meta {
    margin-top: 8px;
    display: flex;
    align-items: flex-end;
    font-size: 13px;
    flex-grow: 1;
    justify-content: space-between;
}.video-info-wrap .video-info .video-meta .user-avatar {
    --avatar-size: 20px;
    margin-right: 6px;
}.play-list-wrap .number-list .number {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}.play-list-wrap .number-list .playing {
    position: absolute;
    bottom: 0;
    left: calc(50% - 11px);
    margin: 0;
    width: auto;
}.play-list-wrap .number-list .playing i {
    width: 4px;
    border-radius: 4px 4px 0 0;
}.play-list-wrap .playing {
    display: inline-block;
    margin-right: 8px;
    width: 14px;
    height: 12px;
}.play-list-wrap .playing i {
    width: 2px;
    background-color: var(--theme-color);
    display: inline-block;
    height: 100%;
}.play-list-wrap .playing i + i {
    margin-left: 2px;
}.play-list-wrap .playing i:nth-last-child(1) {
    animation: playing .5s 1s linear infinite alternate;
}.play-list-wrap .playing i:nth-last-child(2) {
    animation: playing .5s 1.2s linear infinite alternate;
}.play-list-wrap .playing i:nth-last-child(3) {
    animation: playing .5s 1.6s linear infinite alternate;
}.play-list-wrap .playing i:nth-last-child(4) {
    animation: playing .5s 2.2s linear infinite alternate;
}@keyframes playing {
    0% {
        height: 100%;
    }

    100% {
        height: 20%;
    }
}/********移动底部导航栏**********/
:root {
    --mika-tabbar-height: 56px;
}
.footer-mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 14px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    width: 100%;
    z-index: 200;
    background: var(--bg-main-color, #fff);
    box-shadow: 0 -1px 3px 0 rgba(26,26,26,.1);
    transition: all .3s;
    box-sizing: border-box;
}body.app-layout-active .footer-mobile-tabbar {
    background: var(--mika-color-surface, #fff);
    border-top: 1px solid var(--mika-color-border, #e5e7eb);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}body.app-layout-active .footer-mobile-tabbar .toolbar-inner > *.current {
    color: var(--mika-color-primary);
}body.app-layout-active .footer-mobile-tabbar .toolbar-inner .item-public .icon {
    background: var(--mika-color-primary);
    box-shadow: 0 10px 20px -10px var(--mika-color-primary);
    border-radius: var(--mika-radius-button, 12px);
}.toolbar-inner {
    flex-flow: nowrap;
    display: flex;
    justify-content: space-between;
}.toolbar-inner > * {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 13px;
    color: var(--color-text-regular);
    line-height: 13px;
    grid-gap: 3px;
    text-decoration: none;
    min-width: 0;
    min-height: 44px;
}.toolbar-inner > * .badge {
    top: -6px;
    right: unset;
    left: 50%;
    transform: translateX(-5%) scale(0.833333);
    border-radius: 8px;
    transform-origin: 0 50%;
}.toolbar-inner .icon {
    font-size: 22px;
    line-height: 24px;
}.toolbar-inner .icon img {
    width: 24px;
    height: 24px;
}.toolbar-inner > *.current {
    color: var(--color-primary);
}.toolbar-inner > *.current .icon {
    text-shadow: none;
}.toolbar-inner .item-public .icon {
    width: 45px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 20px -10px  var(--color-primary);
    border-radius: 12px;
    font-weight: 600;
}.toolbar-inner .item-public .name {
    display: none;
}.toolbar-inner .item-public {
    position: unset;
}.toolbar-inner .img-icon {
    width: 22px;
    height: 22px;
    background: transparent;
}.toolbar-inner .img-icon i {
    font-size: 20px;
}.toolbar-inner .type-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}/**********投诉与举报组件（fallback；像素样式见 :has(.report-container)）************/
.report-container .content-wrap {
    padding: 0;
}.report-container .report-types {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 14px;
}.report-container .report-types .type-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    flex: none;
    align-items: center;
}.report-container textarea {
    min-height: 96px;
    height: auto;
    padding: 12px 12px 28px;
    width: 100%;
    background: var(--mika-color-surface, #fff);
    border-radius: 10px;
    border: 1px solid #d9d8d8;
    color: #303746;
    font-size: 14px;
    box-sizing: border-box;
}.report-container input[type="radio"] {
    width: 16px;
    height: 16px;
}/**************手风琴折叠面板******************/
.collapse .collapse-item {
  margin-bottom: 12px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--bg-main-color);
  border-radius: 12px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}.collapse .collapse-header {
    cursor:pointer;
    font-size: 16px;
    color: inherit !important;
    user-select: none;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}.collapse .collapse-header i {
    font-size: 20px;
    line-height: 20px;
    transition: transform .2s ease-in-out;
    display: inline-block;
}.collapse .collapse-header.active i {
    transform: rotate(-180deg);
}.collapse .collapse-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .2s cubic-bezier(.645,.045,.355,1),opacity .2s cubic-bezier(.645,.045,.355,1)!important;
    display: none;
}.collapse .collapse-content div {
    padding: 0 24px 16px;
    color: var(--color-text-secondary);
    font-size: 14px;
}.collapse .collapse-header.active + .collapse-content {
    opacity: 1;
}

/* 视频课程头：方案库补充筛选条 */
.mika-video-course .video-course-scheme-filters {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
}
.mika-video-course .video-course-scheme-filters.is-inside-shell {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.mika-video-course .video-discover-filters .video-course-scheme-filters.is-inside-shell {
  margin-top: 2px;
}
.mika-video-course .video-course-scheme-filters .filters-box {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.mika-video-course .video-course-scheme-filters .filters-box ul,
.mika-video-course .video-course-scheme-filters .video-discover-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mika-video-course .video-course-scheme-filters .filters-box ul li,
.mika-video-course .video-course-scheme-filters .video-discover-filter-list li {
  display: flex;
  align-items: flex-start;
  min-height: 28px;
  margin-bottom: 10px;
}
.mika-video-course .video-course-scheme-filters .filters-box ul li:last-child,
.mika-video-course .video-course-scheme-filters .video-discover-filter-list li:last-child {
  margin-bottom: 0;
}
.mika-video-course .video-course-scheme-filters .filter-name {
  min-width: 36px;
  padding-right: 14px;
  padding-top: 4px;
  color: #8b93a7;
  font-size: 13px;
  line-height: 22px;
}
.mika-video-course .video-course-scheme-filters .filter-items {
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mika-video-course .video-course-scheme-filters .filter-items::-webkit-scrollbar {
  display: none;
}
.mika-video-course .video-course-scheme-filters .filter-row-metas .filter-items a {
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 13px;
  line-height: 22px;
}
.mika-video-course .video-course-scheme-filters .filter-row-metas .filter-items a:hover {
  color: var(--mika-color-primary, #2563eb);
  background: color-mix(in srgb, var(--mika-color-primary, #2563eb) 10%, #fff);
}
.mika-video-course .video-course-scheme-filters .filter-row-metas .filter-items a.current {
  color: #fff !important;
  background: var(--mika-color-primary, #2563eb) !important;
  font-weight: 600;
}
.mika-video-course .video-scheme-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e8eaef;
  font-size: 13px;
  color: #6b7280;
}
.mika-video-course .video-scheme-active-filters__label {
  color: #9ca3af;
}
.mika-video-course .video-scheme-active-filters__chips .sep {
  margin: 0 6px;
  color: #d1d5db;
}
.mika-video-course .video-scheme-active-filters__clear {
  margin-left: auto;
  color: var(--mika-color-primary, #2563eb);
  font-weight: 500;
}
.mika-video-course .video-scheme-active-filters__clear:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  .mika-video-course .video-course-scheme-filters .filter-name {
    min-width: 32px;
    padding-right: 10px;
    font-size: 12px;
  }
  .mika-video-course .video-scheme-active-filters__clear {
    margin-left: 0;
  }
}