/* Sakura skin layered over the news functionality baseline. */
html {
    min-height: 100%;
    background-color: #f7faff;
    background-image: var(--cherry-background-image, url('../images/sakura-desktop.webp'));
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Highest-priority mobile header fixes. These must stay after legacy media rules. */
@media (max-width: 600px) {
    body.cherry-home .headerBox,
    body.cherry-list .headerBox,
    body.cherry-detail .headerBox { height: 0 !important; min-height: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
    body.cherry-home .headerBox .bg,
    body.cherry-list .headerBox .bg,
    body.cherry-detail .headerBox .bg { display: none !important; }
    body.cherry-home .headerBox .box,
    body.cherry-list .headerBox .box,
    body.cherry-detail .headerBox .box { display: block !important; height: 58px !important; overflow: visible !important; background: transparent !important; }
    body.cherry-home .headerBox .navs,
    body.cherry-list .headerBox .navs,
    body.cherry-detail .headerBox .navs { display: flex !important; visibility: visible !important; position: absolute !important; top: 9px !important; right: 12px !important; z-index: 100 !important; }
    body.cherry-home .headerBox .navs .header-menu-btn,
    body.cherry-list .headerBox .navs .header-menu-btn,
    body.cherry-detail .headerBox .navs .header-menu-btn { display: grid !important; visibility: visible !important; place-items: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; color: #30415e !important; background: #fff !important; border: 1px solid rgba(219,229,255,.9) !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(35,58,115,.12) !important; }
    body.cherry-home .headerBox .navs .header-menu-btn::before,
    body.cherry-list .headerBox .navs .header-menu-btn::before,
    body.cherry-detail .headerBox .navs .header-menu-btn::before { content: "☰" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 22px !important; line-height: 1 !important; transform: none !important; }
    body.cherry-list .listBox,
    body.cherry-detail .listBox { margin-top: 18px !important; }
}

/* 结果页：移动端搜索栏吸顶，滚动时始终可见；首页保持原有头部布局。 */
@media (max-width: 600px) {
    body.cherry-list .headerBox,
    body.cherry-detail .headerBox {
        position: sticky !important;
        top: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        z-index: 1000 !important;
        background: rgba(255,255,255,.96) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 14px rgba(35,58,115,.12) !important;
    }
    body.cherry-list .headerKox,
    body.cherry-detail .headerKox { display: none !important; height: 0 !important; }
    body.cherry-list .listBox,
    body.cherry-detail .listBox { margin-top: 12px !important; }
    body.cherry-list .loading-minimal .loader,
    body.cherry-detail .loading-minimal .loader {
        min-width: 0 !important;
        width: fit-content !important;
        margin: 0 auto !important;
        color: transparent !important;
        font-size: 18px !important;
        line-height: 1em !important;
        text-align: left !important;
        animation: l24 1s infinite alternate linear !important;
    }
}

@media (min-width: 769px) {
    body.cherry-home .header-menu-btn,
    body.cherry-list .header-menu-btn,
    body.cherry-detail .header-menu-btn { display: none !important; }
    body.cherry-home .headerBox .navs,
    body.cherry-list .headerBox .navs,
    body.cherry-detail .headerBox .navs {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    body.cherry-home .headerBox .navs > .item,
    body.cherry-list .headerBox .navs > .item,
    body.cherry-detail .headerBox .navs > .item,
    body.cherry-home .headerBox .navs > .btns > *,
    body.cherry-list .headerBox .navs > .btns > *,
    body.cherry-detail .headerBox .navs > .btns > * {
        flex: 1 1 0;
        min-width: 104px;
        text-align: center;
    }
    body.cherry-list .listBox,
    body.cherry-detail .listBox {
        width: min(1400px, calc(100% - 48px)) !important;
        margin: 24px 24px 24px max(24px, calc((100% - 1400px) / 2 + 36px)) !important;
    }
}

.dialogUrlBox.is-dialog-loading .dialogLoadingTips::before { display: none !important; }

/* Loading state only: remove the empty Element Plus title strip and keep the close button. */
.dialogUrlBox.is-dialog-loading .el-dialog__header { height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.dialogUrlBox.is-dialog-loading .el-dialog__headerbtn { top: 12px !important; right: 12px !important; z-index: 3 !important; }
.dialogUrlBox.is-dialog-loading .el-dialog__body { padding: 0 !important; }
.dialogUrlBox.is-dialog-loading .dialogLoadingTips { min-height: 260px; padding: 48px 24px 30px !important; border-top: 0 !important; border-radius: 18px !important; }

.cherry-home .ios-announcement-buttons { min-height: 48px; background: #fff; }
.cherry-home .ios-announcement-button { min-height: 48px; color: #4d72e8; }
.cherry-home .ios-announcement-button.primary { color: #fff !important; background: #4d72e8 !important; }
.cherry-home .ios-announcement-button.primary:hover { background: #4166dc !important; }
.cherry-demand-dialog .layerBox .vbtn.is-loading { opacity: .65; pointer-events: none; }

/* EOF guard for the active mobile selectors. */
@media (max-width: 600px) {
    body.cherry-list .headerBox,
    body.cherry-detail .headerBox { position: absolute !important; height: 58px !important; min-height: 58px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
    body.cherry-list .headerBox .search,
    body.cherry-detail .headerBox .search { display: none !important; }
    body.cherry-list .searchBox.searchList,
    body.cherry-detail .searchBox.searchDetail { position: sticky !important; top: 0 !important; z-index: 90 !important; width: 100% !important; box-sizing: border-box !important; padding: 8px 12px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid rgba(214,226,248,.85) !important; box-shadow: 0 4px 14px rgba(35,58,115,.12) !important; }
    body.cherry-list .searchBox.searchList .search,
    body.cherry-detail .searchBox.searchDetail .search { width: 100% !important; height: 42px !important; margin: 0 !important; }
    body.cherry-list .searchBox.searchList .search .btn,
    body.cherry-detail .searchBox.searchDetail .search .btn { margin-right: 46px !important; }
    .menu-dialog-wrapper { width: calc(100vw - 32px) !important; max-width: 280px !important; margin: 68px auto 0 !important; }
    .password-dialog-wrapper .password-tips { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 13px 14px !important; border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #f2f7ff !important; text-align: left !important; }
    .password-dialog-wrapper .el-input__wrapper { border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
}

/* Last-cascade guard: these selectors intentionally remain at EOF. */
@media (max-width: 600px) {
    body.cherry-list .headerBox,
    body.cherry-detail .headerBox { position: absolute !important; height: 58px !important; min-height: 58px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
    body.cherry-list .headerBox .search,
    body.cherry-detail .headerBox .search { display: none !important; }
    body.cherry-list .searchBox.searchList,
    body.cherry-detail .searchBox.searchDetail { position: sticky !important; top: 0 !important; z-index: 90 !important; width: 100% !important; box-sizing: border-box !important; padding: 8px 12px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid rgba(214,226,248,.85) !important; box-shadow: 0 4px 14px rgba(35,58,115,.12) !important; }
    body.cherry-list .searchBox.searchList .search,
    body.cherry-detail .searchBox.searchDetail .search { width: 100% !important; height: 42px !important; margin: 0 !important; }
    body.cherry-list .searchBox.searchList .search .btn,
    body.cherry-detail .searchBox.searchDetail .search .btn { margin-right: 46px !important; }
    .menu-dialog-wrapper { width: calc(100vw - 32px) !important; max-width: 280px !important; margin: 68px auto 0 !important; }
    .password-dialog-wrapper .password-tips { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 13px 14px !important; border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #f2f7ff !important; text-align: left !important; }
    .password-dialog-wrapper .el-input__wrapper { border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
}

/* Final responsive pass. Keep one authoritative header rule after legacy media overrides. */
@media (min-width: 601px) {
    body.cherry-home .headerBox .navs,
    body.cherry-list .headerBox .navs,
    body.cherry-detail .headerBox .navs { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-width: 320px !important; }
    body.cherry-home .headerBox .navs > .item,
    body.cherry-list .headerBox .navs > .item,
    body.cherry-detail .headerBox .navs > .item,
    body.cherry-home .headerBox .navs > .btns > *,
    body.cherry-list .headerBox .navs > .btns > *,
    body.cherry-detail .headerBox .navs > .btns > * { flex: 1 1 0 !important; min-width: 100px !important; margin: 0 !important; padding: 10px 12px !important; text-align: center !important; white-space: nowrap !important; }
    body.cherry-home .headerBox .navs > .btns,
    body.cherry-list .headerBox .navs > .btns,
    body.cherry-detail .headerBox .navs > .btns { display: flex !important; flex: 1 1 0 !important; gap: 10px !important; }
}

@media (max-width: 600px) {
    body.cherry-home .headerBox { position: absolute !important; height: 58px !important; background: transparent !important; box-shadow: none !important; }
    body.cherry-list .headerBox,
    body.cherry-detail .headerBox { position: absolute !important; top: 0 !important; height: 58px !important; min-height: 58px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
    body.cherry-home .headerBox .box,
    body.cherry-list .headerBox .box,
    body.cherry-detail .headerBox .box { width: 100% !important; height: 58px !important; padding: 0 12px !important; box-sizing: border-box !important; overflow: visible !important; }
    body.cherry-list .headerBox .logoBox,
    body.cherry-detail .headerBox .logoBox,
    body.cherry-list .headerBox .search,
    body.cherry-detail .headerBox .search { display: none !important; }
    body.cherry-list .searchBox.searchList,
    body.cherry-detail .searchBox.searchDetail { position: sticky !important; top: 0 !important; z-index: 90 !important; width: 100% !important; box-sizing: border-box !important; padding: 8px 12px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid rgba(214,226,248,.85) !important; box-shadow: 0 4px 14px rgba(35,58,115,.12) !important; backdrop-filter: blur(10px); }
    body.cherry-list .searchBox.searchList .search,
    body.cherry-detail .searchBox.searchDetail .search { width: 100% !important; height: 42px !important; margin: 0 !important; border-radius: 22px !important; background: rgba(247,249,255,.96) !important; box-shadow: inset 0 0 0 1px #e0e8f8 !important; }
    body.cherry-list .searchBox.searchList .search input,
    body.cherry-detail .searchBox.searchDetail .search input { padding-left: 16px !important; font-size: 15px !important; }
    body.cherry-list .searchBox.searchList .search .btn,
    body.cherry-detail .searchBox.searchDetail .search .btn { width: 46px !important; height: 42px !important; margin-right: 46px !important; }
    body.cherry-list .headerBox .navs,
    body.cherry-detail .headerBox .navs { position: absolute !important; top: 9px !important; right: 12px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; display: flex !important; z-index: 10 !important; }
    body.cherry-home .headerBox .navs { right: 12px !important; }
    body.cherry-list .headerBox .navs > .item,
    body.cherry-list .headerBox .navs > .btns,
    body.cherry-detail .headerBox .navs > .item,
    body.cherry-detail .headerBox .navs > .btns,
    body.cherry-home .headerBox .navs > .item,
    body.cherry-home .headerBox .navs > .btns { display: none !important; }
    body.cherry-home .headerBox .navs .header-menu-btn,
    body.cherry-list .headerBox .navs .header-menu-btn,
    body.cherry-detail .headerBox .navs .header-menu-btn { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 1 !important; color: #30415e !important; background: #fff !important; border: 1px solid rgba(219,229,255,.9) !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(35,58,115,.12) !important; }
    body.cherry-home .headerBox .navs .header-menu-btn::before,
    body.cherry-list .headerBox .navs .header-menu-btn::before,
    body.cherry-detail .headerBox .navs .header-menu-btn::before { content: "☰" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 22px !important; line-height: 1 !important; transform: none !important; }
    body.cherry-list .listBox,
    body.cherry-detail .listBox { margin-top: 12px !important; }
    .menu-dialog-wrapper { width: calc(100vw - 32px) !important; max-width: 280px !important; margin: 68px auto 0 !important; border-radius: 14px !important; }
    .menu-dialog-wrapper .el-dialog__body { padding: 10px 12px !important; }
    .menu-dialog-wrapper .drawer { padding: 0 !important; }
    .menu-dialog-wrapper .drawer .item,
    .menu-dialog-wrapper .drawer a { justify-content: center !important; padding: 0 16px !important; text-align: center !important; }
}

/* Password prompt: one blue hint panel and one clean input surface. */
.password-dialog-wrapper { border: 1px solid #d9e6ff !important; border-radius: 16px !important; box-shadow: 0 20px 55px rgba(40,74,145,.22) !important; }
.password-dialog-wrapper .password-dialog { padding: 4px 0 0 !important; }
.password-dialog-wrapper .password-tips { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 0 18px !important; padding: 13px 14px !important; border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #f2f7ff !important; color: #4b6287 !important; text-align: left !important; }
.password-dialog-wrapper .password-tips i { flex: 0 0 auto; margin: 1px 0 0 !important; color: #3f7cf5 !important; font-size: 18px !important; }
.password-dialog-wrapper .password-hint-content { padding: 0 !important; color: #4b6287 !important; font-size: 13px !important; line-height: 1.55 !important; }
.password-dialog-wrapper .el-form-item { margin-bottom: 0 !important; }
.password-dialog-wrapper .el-input__wrapper { min-height: 46px !important; padding: 0 13px !important; border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
.password-dialog-wrapper .el-input__wrapper.is-focus { border-color: #4d7cf7 !important; box-shadow: 0 0 0 3px rgba(77,124,247,.12) !important; }
.password-dialog-wrapper .el-input__inner { font-size: 15px !important; }
.password-dialog-wrapper .dialog-footer { gap: 10px !important; padding-top: 4px !important; }
.password-dialog-wrapper .dialog-footer .el-button { min-width: 112px !important; height: 42px !important; margin: 0 !important; border-radius: 9px !important; }
.password-dialog-wrapper .dialog-footer .el-button:last-child { border-color: #4d7cf7 !important; background: #4d7cf7 !important; }
@media (max-width: 600px) {
    .password-dialog-wrapper .el-dialog__header { padding: 18px 20px 12px !important; }
    .password-dialog-wrapper .el-dialog__body { padding: 14px 20px 10px !important; }
    .password-dialog-wrapper .dialog-footer { flex-direction: column !important; padding: 10px 20px 20px !important; }
    .password-dialog-wrapper .dialog-footer .el-button { width: 100% !important; }
}

/* Desktop navigation follows the compact, evenly spaced reference style. */
@media (min-width: 601px) {
    body.cherry-home .headerBox .navs {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 50px !important;
        padding: 4px 8px !important;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 22px !important;
    }
    body.cherry-home .headerBox .navs > .item,
    body.cherry-home .headerBox .navs > .btns > a,
    body.cherry-home .headerBox .navs > .btns > .item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 76px !important;
        height: 42px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        border-radius: 7px !important;
        color: #334155 !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 22px !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition: color .18s ease, background-color .18s ease !important;
    }
    body.cherry-home .headerBox .navs > .item:hover,
    body.cherry-home .headerBox .navs > .btns > a:hover,
    body.cherry-home .headerBox .navs > .btns > .item:hover {
        color: #4f7cff !important;
        background: rgba(79,124,255,.12) !important;
    }
    body.cherry-home .headerBox .navs > .btns {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

/* Final responsive overrides: keep the menu button visible without reserving a blank header. */
@media (max-width: 600px) {
    body.cherry-home .headerBox,
    body.cherry-list .headerBox,
    body.cherry-detail .headerBox {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    body.cherry-home .headerBox .bg,
    body.cherry-list .headerBox .bg,
    body.cherry-detail .headerBox .bg,
    body.cherry-home .headerBox .headerKox,
    body.cherry-list .headerBox .headerKox,
    body.cherry-detail .headerBox .headerKox { display: none !important; }
    body.cherry-home .headerBox .box,
    body.cherry-list .headerBox .box,
    body.cherry-detail .headerBox .box {
        display: block !important;
        height: 58px !important;
        overflow: visible !important;
        background: transparent !important;
    }
    body.cherry-home .headerBox .navs,
    body.cherry-list .headerBox .navs,
    body.cherry-detail .headerBox .navs {
        display: flex !important;
        visibility: visible !important;
        position: absolute !important;
        top: 9px !important;
        right: 12px !important;
        z-index: 100 !important;
    }
    body.cherry-home .headerBox .navs .header-menu-btn,
    body.cherry-list .headerBox .navs .header-menu-btn,
    body.cherry-detail .headerBox .navs .header-menu-btn {
        display: grid !important;
        visibility: visible !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        color: #30415e !important;
        background: #fff !important;
        border: 1px solid rgba(219, 229, 255, .9) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(35, 58, 115, .12) !important;
    }
    body.cherry-home .headerBox .navs .header-menu-btn::before,
    body.cherry-list .headerBox .navs .header-menu-btn::before,
    body.cherry-detail .headerBox .navs .header-menu-btn::before {
        content: "☰" !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 22px !important;
        line-height: 1 !important;
        transform: none !important;
    }
    body.cherry-list .listBox,
    body.cherry-detail .listBox { margin-top: 18px !important; }
}

/* The resource result dialog keeps its completed layout; only the loading state removes the empty title strip. */
.dialogUrlBox.is-dialog-loading .el-dialog__header {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.dialogUrlBox.is-dialog-loading .el-dialog__headerbtn {
    top: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
}
.dialogUrlBox.is-dialog-loading .el-dialog__body {
    padding: 0 !important;
}
.dialogUrlBox.is-dialog-loading .dialogLoadingTips {
    min-height: 260px;
    padding: 48px 24px 30px !important;
    border-top: 0 !important;
    border-radius: 18px !important;
}

/* Keep the announcement action area compact and readable on the Sakura skin. */
.cherry-home .ios-announcement-buttons { min-height: 48px; background: #fff; }
.cherry-home .ios-announcement-button { color: #4d72e8; min-height: 48px; }
.cherry-home .ios-announcement-button.primary { color: #fff !important; background: #4d72e8 !important; }
.cherry-home .ios-announcement-button.primary:hover { background: #4166dc !important; }

/* Demand submission feedback and disabled state. */
.cherry-demand-dialog .layerBox .vbtn.is-loading { opacity: .65; pointer-events: none; }

@media(max-width:600px) {
    body.cherry-home .headerBox .box { height: 58px !important; overflow: visible !important; }
    body.cherry-home .headerBox .navs { display: flex !important; visibility: visible !important; position: absolute !important; top: 9px !important; right: 12px !important; z-index: 20 !important; }
    body.cherry-home .headerBox .navs .header-menu-btn { display: grid !important; visibility: visible !important; width: 40px !important; height: 40px !important; font-size: 0 !important; color: #30415e !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(35, 58, 115, .12) !important; }
    body.cherry-home .headerBox .navs .header-menu-btn::before { content: "☰" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 22px !important; line-height: 40px !important; transform: none !important; }
    body.cherry-list .search-results-section.is-loading .loading-minimal { margin-top: 12px !important; padding: 24px 0 !important; border-top: 1px solid rgba(72, 113, 219, .14) !important; background: rgba(255, 255, 255, .88) !important; border-radius: 12px !important; }
}

.cherry-demand-dialog { border-radius: 16px !important; overflow: hidden; }
.cherry-demand-dialog .el-dialog__header { padding: 20px 22px 8px !important; }
.cherry-demand-dialog .el-dialog__body { padding: 10px 22px 22px !important; }
.cherry-demand-dialog .layerBox .vname { color: #273b75; font-size: 20px; margin-bottom: 14px; }
.cherry-demand-dialog .layerBox .el-textarea textarea, .cherry-demand-dialog .layerBox .el-input__wrapper { background: #f7f9ff; border: 1px solid #dbe5ff; border-radius: 10px; }
.cherry-demand-dialog .layerBox .el-textarea textarea { height: 150px; margin-top: 0; }
.cherry-demand-dialog .layerBox .vbtn { background: #4d72e8; border-radius: 10px; margin-top: 14px; font-weight: 600; }
@media(max-width:600px) { .cherry-demand-dialog { width: calc(100% - 32px) !important; margin-top: 12vh !important; } }

.cherry-home .ios-announcement-dialog { border: 1px solid rgba(218, 226, 250, .9); box-shadow: 0 22px 60px rgba(38, 60, 120, .24); }
.cherry-home .ios-announcement-title { color: #263b76; }
.cherry-home .ios-announcement-content { color: #52617f; }
.cherry-home .ios-announcement-button.primary { background: #4d72e8; }
.cherry-home .ios-announcement-button { color: #4d72e8; }
.password-dialog-wrapper { border-radius: 16px !important; overflow: hidden; border: 1px solid #dce6ff; box-shadow: 0 22px 60px rgba(38, 60, 120, .24); }
.password-dialog-wrapper .el-dialog__header { padding: 20px 22px 10px !important; }
.password-dialog-wrapper .el-dialog__body { padding: 12px 22px 16px !important; }
.password-dialog-wrapper .password-tips { border-radius: 10px; background: #f3f7ff; color: #52617f; padding: 12px; }
.password-dialog-wrapper .el-input__wrapper { border-radius: 10px; background: #f8faff; box-shadow: 0 0 0 1px #dbe5ff inset; }

body.cherry-home,
body.cherry-list,
body.cherry-detail {
    min-height: 100vh;
    background: linear-gradient(rgba(247, 250, 255, .22), rgba(255, 248, 251, .32));
    color: #25324a;
}

body.cherry-home #app {
    position: relative;
    z-index: 2;
    background: transparent;
}

body.cherry-home .home-hero {
    margin: 0 auto;
    text-align: center;
}

body.cherry-home .headerBox .navs {
    min-width: 0;
}

@media (min-width: 601px) {
    body.cherry-home .headerBox .navs:has(.btns:empty):not(:has(.item)) {
        display: none;
    }
}

body.cherry-home .cherry-search {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
    border-radius: 12px !important;
}

body.cherry-home .cherry-search input {
    min-width: 0;
    border: 0;
    border-radius: 12px;
    outline: 0;
}

body.cherry-home .cherry-search .btn {
    flex: 0 0 auto;
    border: 0;
}

body.cherry-home .footerBox {
    margin: 0;
    padding: 0;
    background: transparent;
}

body.cherry-home .footerBox .box {
    width: 100%;
    max-width: none;
}

body.cherry-home .footerBox .box > p {
    margin: 0;
}

body.cherry-home .footerBox .box > p:empty {
    display: none;
}

body.cherry-home .nav-content-container,
body.cherry-home .search-container {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 24px rgba(44, 67, 104, .08);
}

body.cherry-home .nav-content-container {
    border-radius: 12px;
}

body.cherry-home .common-footer {
    display: none;
}

.headBg { display: none !important; }
.cherry-suggestions {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dce7ff;
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 12px 30px rgba(52, 75, 120, .18);
    text-align: left;
}
.cherry-suggestions .suggestion-item { padding: 12px 16px; border-bottom: 1px solid #edf1f7; color: #2563eb; cursor: pointer; }
.cherry-suggestions .suggestion-item:last-child { border-bottom: 0; }
.cherry-suggestions .suggestion-item:hover { background: #f2f6ff; }
.cherry-suggestions .suggestion-empty { padding: 14px 16px; color: #8b98aa; }

body.cherry-list > #app,
body.cherry-detail > #app { position: relative; z-index: 2; }
body.cherry-list .listBox,
body.cherry-detail .listBox { width: min(1180px, calc(100% - 48px)); margin: 24px auto; }
body.cherry-list .listBox .left,
body.cherry-detail .listBox .left { background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.95); border-radius: 12px; box-shadow: 0 8px 24px rgba(44,67,104,.08); }
body.cherry-list .resource-result-card { margin: 10px 14px; border: 1px solid #e6edf8; border-radius: 10px; background: #fff; }
body.cherry-list .resource-result-card .red-bar-title:before,
body.cherry-detail .details .title:before { background: #ff5b67; }
body.cherry-list .resource-get-btn,
body.cherry-detail .btnCol { border-color: #4d7cf7; background: #fff; color: #3f6ee7; }
body.cherry-list .resource-get-btn:hover,
body.cherry-detail .btnCol:hover { background: #edf3ff; }
body.cherry-detail .details,
body.cherry-detail .samelistBox { border-radius: 10px; border-color: #dce7ff; background: rgba(255,255,255,.94); }
body.cherry-detail .details .cat { border-color: #edf1f7; }

@media (min-width: 769px) {
    body.cherry-detail .dialogUrlBox { width: 700px !important; max-width: 88vw !important; }
    body.cherry-detail .dialogUrlBox .resource-dialog-card { padding: 20px 18px 20px 20px; }
    body.cherry-detail .dialogUrlBox .resource-dialog-shell { grid-template-columns: 188px minmax(0, 1fr); gap: 16px; }
    body.cherry-detail .dialogUrlBox .resource-dialog-poster,
    body.cherry-detail .dialogUrlBox .resource-dialog-poster-main { min-height: 270px; height: 270px; }
    body.cherry-detail .dialogUrlBox .resource-dialog-info { max-width: 470px; }
}

@media (max-width: 600px) {
    html {
        min-height: 100%;
        background-color: #f7faff !important;
        background-image: var(--cherry-background-image, url('../images/sakura-desktop.webp')) !important;
        background-position: 62% top;
        background-size: auto 100%;
        background-attachment: scroll;
        background-repeat: no-repeat;
    }
    html,
    body.cherry-home,
    body.cherry-list,
    body.cherry-detail {
        background-color: transparent !important;
        background-image: var(--cherry-background-image, url('../images/sakura-desktop.webp')) !important;
    }
    body.cherry-home #app,
    body.cherry-list #app,
    body.cherry-detail #app {
        background: transparent !important;
    }
    body.cherry-home .pan-hero {
        padding-top: 96px !important;
    }
    body.cherry-home .headerBox {
        height: 0 !important;
        min-height: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    body.cherry-home .headerBox .box {
        height: 0 !important;
    }
    body.cherry-home .pan-rankings {
        width: calc(100% - 24px);
    }
    body.cherry-home .footerBox {
        padding: 0 !important;
    }
    body.cherry-home,
    body.cherry-list,
    body.cherry-detail {
        min-height: 100vh;
        background: transparent !important;
    }
    body.cherry-list .listBox,
    body.cherry-detail .listBox { width: calc(100% - 24px); margin: 12px auto; }
    body.cherry-list .listBox .left,
    body.cherry-detail .listBox .left { border-radius: 10px; }
    body.cherry-list .resource-result-card { margin: 8px; }
    body.cherry-list .resource-result-card .result-actions { gap: 6px; }
    body.cherry-list .resource-result-card .result-actions button { min-width: 0; padding: 0 9px; }
    body.cherry-detail .details .r { overflow-wrap: anywhere; }
    .cherry-suggestions { max-height: 240px; }
}

/* Final cascade guard for mobile header and modal loading state. */
/* EOF_TARGET */
@media (max-width: 600px) {
    body.cherry-list .headerBox .search,
    body.cherry-detail .headerBox .search { display: none !important; }
    body.cherry-list .searchBox.searchList,
    body.cherry-detail .searchBox.searchDetail { position: sticky !important; top: 0 !important; z-index: 90 !important; padding: 8px 12px !important; background: rgba(255,255,255,.96) !important; }
    body.cherry-list .searchBox.searchList .search,
    body.cherry-detail .searchBox.searchDetail .search { width: 100% !important; height: 42px !important; margin: 0 !important; }
    body.cherry-list .searchBox.searchList .search .btn,
    body.cherry-detail .searchBox.searchDetail .search .btn { margin-right: 46px !important; }
    .menu-dialog-wrapper { width: calc(100vw - 32px) !important; max-width: 280px !important; margin: 68px auto 0 !important; }
    .password-dialog-wrapper .password-tips { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 13px 14px !important; border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #f2f7ff !important; text-align: left !important; }
    .password-dialog-wrapper .el-input__wrapper { border: 1px solid #d9e6ff !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
}
@media (max-width: 600px) {
    body.cherry-home .headerBox .box,
    body.cherry-list .headerBox .box,
    body.cherry-detail .headerBox .box { height: 58px !important; overflow: visible !important; background: transparent !important; }
    body.cherry-home .headerBox .navs,
    body.cherry-list .headerBox .navs,
    body.cherry-detail .headerBox .navs { display: flex !important; visibility: visible !important; position: absolute !important; top: 9px !important; right: 12px !important; z-index: 100 !important; }
    body.cherry-home .headerBox .navs .header-menu-btn,
    body.cherry-list .headerBox .navs .header-menu-btn,
    body.cherry-detail .headerBox .navs .header-menu-btn { display: grid !important; visibility: visible !important; place-items: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; color: #30415e !important; background: #fff !important; border: 1px solid rgba(219,229,255,.9) !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(35,58,115,.12) !important; }
    body.cherry-home .headerBox .navs .header-menu-btn::before,
    body.cherry-list .headerBox .navs .header-menu-btn::before,
    body.cherry-detail .headerBox .navs .header-menu-btn::before { content: "☰" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 22px !important; line-height: 1 !important; transform: none !important; }
}

.dialogUrlBox.is-dialog-loading .el-dialog__header { height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.dialogUrlBox.is-dialog-loading .el-dialog__headerbtn { top: 12px !important; right: 12px !important; z-index: 3 !important; }
.dialogUrlBox.is-dialog-loading .el-dialog__body { padding: 0 !important; }
.dialogUrlBox.is-dialog-loading .dialogLoadingTips { min-height: 260px; padding: 48px 24px 30px !important; border-top: 0 !important; border-radius: 18px !important; }
.cherry-home .ios-announcement-buttons { min-height: 48px; background: #fff; }
.cherry-home .ios-announcement-button { min-height: 48px; color: #4d72e8; }
.cherry-home .ios-announcement-button.primary { color: #fff !important; background: #4d72e8 !important; }
.cherry-home .ios-announcement-button.primary:hover { background: #4166dc !important; }
.cherry-demand-dialog .layerBox .vbtn.is-loading { opacity: .65; pointer-events: none; }