/* 搜剧盘风格界面 */

.sjp-body {
    background: #f5f7fb;
    color: var(--sjp-text);
    min-height: 100vh;
}

.sjp-body .headBg {
    display: none;
}

.sjp-body .footerBox {
    opacity: .75;
    font-size: 12px;
}

/* ===== Header ===== */
.sjp-header .box {
    width: min(1200px, 100%);
    padding: 0 16px;
    position: relative;
}

.sjp-header .header-left {
    display: flex;
    align-items: center;
    min-width: 48px;
    z-index: 3;
    flex: none;
}

.sjp-header-home .bg,
.sjp-header-home .logoBox,
.sjp-header-home .search,
.sjp-header-home .navs .item,
.sjp-header-home .navs .btns {
    opacity: 0 !important;
    pointer-events: none;
}

.sjp-header-home .navs .sjp-menu-btn,
.sjp-header-home .header-left .theme-mode-btn {
    opacity: 1 !important;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.sjp-header-home {
    background: transparent;
}

.sjp-header-home .bg {
    box-shadow: none;
    background: transparent;
}

.sjp-headerKox-home {
    height: 0 !important;
}

.sjp-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 35, 41, .08);
    color: #5c6370 !important;
    font-size: 22px !important;
    cursor: pointer;
    margin-left: 12px;
}

/* 搜索页：站点标题居中，左右分别为昼夜 / 菜单 */
.sjp-header-solid .box {
    justify-content: space-between;
}
.sjp-header-solid .logoBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
    pointer-events: auto;
}
.sjp-header-solid .logoBox .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sjp-text);
    margin-left: 0;
    text-align: center;
}
.sjp-header-solid .logoBox .logo {
    display: none;
}
.sjp-header-solid .search {
    display: none;
}
.sjp-header-solid .navs {
    margin-left: auto;
    z-index: 3;
}

/* ===== Home ===== */
.sjp-home {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 28px 16px 40px;
    box-sizing: border-box;
}

.sjp-home-hero {
    text-align: center;
    padding: 24px 0 8px;
}

.sjp-home-logoBox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sjp-home-logo {
    height: 48px;
}

.sjp-home-title {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #111;
    line-height: 1.2;
}

.sjp-home-sub {
    margin: 10px 0 0;
    color: var(--sjp-muted);
    font-size: 14px;
}

.sjp-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 28px auto 0;
    width: 100%;
    max-width: 560px;
    height: 52px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(22, 119, 255, .08), 0 2px 8px rgba(31, 35, 41, .04);
    overflow: hidden;
}

.sjp-search input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 18px;
    font-size: 15px;
    color: var(--sjp-text);
}

.sjp-search input::placeholder {
    color: #b0b6bf;
}

.sjp-search-btn {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sjp-blue);
    color: #fff;
    cursor: pointer;
    flex: none;
}

.sjp-search-btn .iconfont {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
}

.sjp-search-btn-icon {
    background: transparent;
    width: 48px;
}

.sjp-search-btn-icon .iconfont {
    color: var(--sjp-blue);
    font-size: 22px;
}

.sjp-search-compact {
    max-width: none;
    margin-top: 0;
    height: 46px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(31, 35, 41, .06);
}

.sjp-search-compact .sjp-search-btn-icon {
    height: 46px;
}

.sjp-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 64px;
    padding: 0 10px 0 16px;
    color: #4e5969;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    flex: none;
}

.sjp-select::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: #e5e6eb;
}

.sjp-select .iconfont {
    font-size: 12px;
    opacity: .7;
}

.sjp-search-compact input {
    padding-left: 12px;
    font-size: 15px;
}

/* ===== Home panel / tabs ===== */
.sjp-panel {
    margin-top: 28px;
    background: #fff;
    border-radius: 18px 18px 12px 12px;
    box-shadow: 0 10px 30px rgba(31, 35, 41, .06);
    overflow: hidden;
}

.sjp-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border-bottom: 1px solid var(--sjp-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sjp-tabs::-webkit-scrollbar {
    display: none;
}

.sjp-tab {
    position: relative;
    flex: none;
    padding: 14px 14px 12px;
    font-size: 15px;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}

.sjp-tab.active {
    color: var(--sjp-blue);
    font-weight: 600;
}

.sjp-tab.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--sjp-blue);
}

.sjp-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 8px;
}

.sjp-panel-hd h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.sjp-panel-hd span {
    font-size: 12px;
    color: var(--sjp-blue);
    background: #edf5ff;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.sjp-rank {
    padding: 0 8px 12px;
}

.sjp-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 10px;
    border-bottom: 1px solid #f3f4f6;
    color: inherit;
    text-decoration: none;
}

.sjp-rank-item:last-child {
    border-bottom: 0;
}

.sjp-rank-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sjp-rankn);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.sjp-rank-num.n1 { background: var(--sjp-rank1); }
.sjp-rank-num.n2 { background: var(--sjp-rank2); }
.sjp-rank-num.n3 { background: var(--sjp-rank3); }

.sjp-rank-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    color: #1f2329;
}

.sjp-rank-date {
    flex: none;
    font-size: 12px;
    color: #9aa3af;
    background: #edf5ff;
    padding: 2px 8px;
    border-radius: 999px;
}

.sjp-empty {
    text-align: center;
    color: #9aa3af;
    padding: 40px 0;
}

/* ===== Search list page ===== */
.sjp-list-page {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 12px 14px 40px;
    box-sizing: border-box;
}

.sjp-list-search-wrap {
    position: relative;
    z-index: 5;
}

.sjp-filter-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    padding: 8px;
    z-index: 20;
}

.sjp-filter-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sjp-filter-box a {
    padding: 8px 12px;
    border-radius: 8px;
    background: #f5f7fb;
    font-size: 13px;
    color: #4e5969;
}

.sjp-filter-box a.active {
    background: var(--sjp-blue-soft);
    color: var(--sjp-blue);
    font-weight: 600;
}

.sjp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 2px 8px;
    font-size: 13px;
    color: #6b7280;
}

.sjp-status-bar {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--sjp-blue);
    flex: none;
}

.sjp-status em {
    font-style: normal;
    color: var(--sjp-blue);
    background: var(--sjp-blue-soft);
    padding: 1px 8px;
    border-radius: 999px;
    margin: 0 2px;
}

.sjp-source-tabs,
.sjp-pan-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sjp-source-tabs::-webkit-scrollbar,
.sjp-pan-tabs::-webkit-scrollbar {
    display: none;
}

.sjp-source-tabs a,
.sjp-pan-tabs a {
    position: relative;
    flex: none;
    padding: 8px 2px 10px;
    font-size: 15px;
    color: #6b7280;
    white-space: nowrap;
}

.sjp-source-tabs a.active,
.sjp-pan-tabs a.active {
    color: var(--sjp-blue);
    font-weight: 600;
}

.sjp-source-tabs a.active::after,
.sjp-pan-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--sjp-blue);
}

.sjp-loading {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

.sjp-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid #d6e4ff;
    border-top-color: var(--sjp-blue);
    border-radius: 50%;
    animation: sjp-spin .8s linear infinite;
}

@keyframes sjp-spin {
    to { transform: rotate(360deg); }
}

.sjp-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.sjp-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eef0f3;
    box-shadow: 0 6px 18px rgba(31, 35, 41, .05);
    overflow: hidden;
    padding: 15px 14px 13px;
    transition: box-shadow .2s, transform .2s;
}

.sjp-card:active {
    transform: scale(.995);
}

.sjp-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #ff7a45, #ff4d4f);
}

.sjp-card-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    padding-left: 4px;
}

.sjp-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--sjp-badge);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

.sjp-badge-web {
    background: #36cfc9;
}

.sjp-card-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2329;
    line-height: 1.5;
    word-break: break-word;
}

.sjp-card-title em,
.sjp-card-title font {
    color: var(--sjp-blue);
    font-style: normal;
}

.sjp-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-left: 4px;
}

.sjp-pan-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.sjp-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sjp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.sjp-btn-ghost {
    border: 1px solid #e5e6eb;
    color: #4e5969;
    background: #fff;
}

.sjp-btn-primary {
    border: 1px solid var(--sjp-blue);
    color: var(--sjp-blue);
    background: #f0f6ff;
}

.sjp-btn-primary:active {
    background: var(--sjp-blue);
    color: #fff;
}

.sjp-page {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

.sjp-alert {
    padding: 12px 0;
}

.sjp-tip {
    margin-top: 8px;
    color: #86909c;
    font-size: 13px;
}

.sjp-tip a {
    color: var(--sjp-blue);
}

/* ===== Mobile ===== */
@media screen and (max-width: 768px) {
    .sjp-home {
        padding: 8vw 4.5vw 8vw;
    }

    .sjp-home-hero {
        padding-top: 6vw;
    }

    .sjp-home-title {
        font-size: 9vw;
    }

    .sjp-home-sub {
        font-size: 3.6vw;
        margin-top: 2.5vw;
    }

    .sjp-home-logo {
        height: 10vw;
    }

    .sjp-search {
        margin-top: 6vw;
        height: 12vw;
        border-radius: 3vw;
    }

    .sjp-search-btn {
        width: 12vw;
        height: 12vw;
    }

    .sjp-search input {
        font-size: 3.8vw;
        padding: 0 4vw;
    }

    .sjp-search-btn .iconfont {
        font-size: 5vw;
    }

    .sjp-panel {
        margin-top: 6vw;
        border-radius: 4vw 4vw 2vw 2vw;
    }

    .sjp-tab {
        font-size: 3.8vw;
        padding: 3.6vw 3.2vw 3vw;
    }

    .sjp-panel-hd {
        padding: 4vw 4.2vw 2vw;
    }

    .sjp-panel-hd h3 {
        font-size: 4.2vw;
    }

    .sjp-rank-item {
        padding: 3.4vw 2.4vw;
        gap: 3vw;
    }

    .sjp-rank-num {
        width: 5.6vw;
        height: 5.6vw;
        font-size: 3vw;
    }

    .sjp-rank-title {
        font-size: 3.8vw;
    }

    .sjp-rank-date {
        font-size: 3vw;
        padding: .6vw 2vw;
    }

    .sjp-header,
    .sjp-header .headerKox,
    .sjp-body .headerBox,
    .sjp-body .headerKox {
        height: 14vw;
    }

    .sjp-headerKox-home,
    .sjp-body .headerKox.sjp-headerKox-home {
        height: 0 !important;
    }

    .sjp-menu-btn,
    .theme-mode-btn {
        width: 11vw;
        height: 11vw;
        border-radius: 3vw;
        font-size: 5.2vw !important;
    }

    .theme-mode-btn .theme-mode-ico {
        width: 5.6vw;
        height: 5.6vw;
    }

    .sjp-header-solid .logoBox .title {
        font-size: 4.8vw;
        margin-left: 0;
    }

    .sjp-header-solid .logoBox .logo {
        display: none;
    }

    .sjp-list-page {
        padding: 2vw 3.5vw 8vw;
    }

    .sjp-search-compact {
        height: 11vw;
        border-radius: 11vw;
    }

    .sjp-search-compact .sjp-search-btn-icon {
        height: 11vw;
        width: 11vw;
    }

    .sjp-select {
        min-width: 16vw;
        font-size: 3.6vw;
        padding: 0 2.5vw 0 4vw;
    }

    .sjp-status {
        font-size: 3.4vw;
        margin: 3.5vw 1vw 2vw;
    }

    .sjp-pan-tabs a,
    .sjp-source-tabs a {
        font-size: 3.8vw;
    }

    .sjp-card {
        padding: 3.5vw;
        border-radius: 2.5vw;
    }

    .sjp-card-title {
        font-size: 3.9vw;
    }

    .sjp-badge {
        height: 5vw;
        font-size: 2.8vw;
        padding: 0 1.5vw;
    }

    .sjp-btn {
        min-width: 16vw;
        height: 7.2vw;
        font-size: 3.2vw;
        border-radius: 1.4vw;
    }

    .sjp-pan-icon {
        width: 5.5vw;
        height: 5.5vw;
    }

    .sjp-body .headerBox .box .navs .iconfont.icon-caidan:not(.sjp-menu-btn) {
        display: none;
    }
}

/* Desktop polish */
@media screen and (min-width: 769px) {
    .sjp-header-home .navs .sjp-menu-btn {
        opacity: 1 !important;
        pointer-events: auto;
    }

    .sjp-list-body .sjp-header-solid .search {
        display: none;
    }

    .sjp-list-page {
        padding-top: 20px;
    }

    .sjp-home {
        padding-top: 40px;
    }

    .sjp-card:hover {
        box-shadow: 0 8px 20px rgba(31, 35, 41, .08);
    }
}

/* ===== 获取链接弹窗 ===== */
.getLinkDialog .el-dialog__header { padding-bottom: 0; }
.getLinkBox { padding: 4px 2px 8px; }
.getLink-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--sjp-text, #1f2329);
    line-height: 1.45;
    margin-bottom: 14px;
    padding-right: 20px;
}
.getLink-panel {
    border: 1px solid #e5e6eb;
    border-radius: 12px;
    padding: 14px;
    background: #fafbfc;
}
.getLink-pan {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 8px;
}
.getLink-pan img { width: 22px; height: 22px; }
.getLink-url {
    display: block;
    color: #1677ff;
    font-size: 13px;
    word-break: break-all;
    line-height: 1.5;
    margin-bottom: 14px;
}
.getLink-actions {
    display: flex;
    gap: 10px;
}
.getLink-actions .sjp-btn { flex: 1; height: 36px; }
.getLink-tip {
    margin-top: 10px;
    font-size: 13px;
    color: #86909c;
}
.getLink-tip em { color: #ff4d4f; font-style: normal; font-weight: 700; }
.getLink-fail { color: #ff4d4f; padding: 20px 0; text-align: center; }
.getLink-status {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #e5e6eb;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: #4e5969;
    box-sizing: border-box;
}
.getLink-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9cdd4;
    flex-shrink: 0;
}
.getLink-status em {
    font-style: normal;
    color: #86909c;
    font-size: 12px;
    width: 100%;
    margin-left: 16px;
}
.getLink-status.is-ok {
    border-color: #b7eb8f;
    background: #f6ffed;
    color: #00b42a;
    font-weight: 600;
}
.getLink-status.is-ok .getLink-status-dot { background: #00b42a; }
.getLink-status.is-dead {
    border-color: #ffccc7;
    background: #fff2f0;
    color: #f53f3f;
    font-weight: 600;
}
.getLink-status.is-dead .getLink-status-dot { background: #f53f3f; }
.getLink-status.is-checking {
    border-color: #91caff;
    background: #e6f4ff;
    color: #1677ff;
}
.getLink-status.is-checking .getLink-status-dot {
    background: #1677ff;
    animation: sjpPulse 1s ease-in-out infinite;
}
.getLink-legal {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f5f6f8;
    color: #86909c;
    font-size: 12px;
    line-height: 1.65;
}

.sjp-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sjp-link-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f3f5;
    color: #86909c;
}
.sjp-card.is-ok .sjp-link-status { background: #e8ffea; color: #00b42a; }
.sjp-card.is-dead .sjp-link-status { background: #ffece8; color: #f53f3f; }
.sjp-card.is-checking .sjp-link-status { background: #e8f3ff; color: #1677ff; }
.sjp-card.is-dead { opacity: .85; }
.sjp-card.is-dead::before { background: #c9cdd4; }

/* 获取资源按钮：有效绿 / 失效红 */
.sjp-btn-primary.is-ok {
    border-color: #00b42a;
    color: #00b42a;
    background: #e8ffea;
}
.sjp-btn-primary.is-dead {
    border-color: #f53f3f;
    color: #f53f3f;
    background: #ffece8;
}
.sjp-btn-primary.is-checking {
    border-color: #91caff;
    color: #1677ff;
    background: #e8f3ff;
}

@keyframes sjpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ===== 全局黑夜模式 ===== */
body.theme-dark {
    --theme-color: #e8eaed;
    --theme-background: #12141a;
    --theme-other_background: #1c1f28;
    --sjp-text: #e8eaed;
    --sjp-muted: #9aa0a6;
    --sjp-line: #2a2f3a;
    --sjp-card: #1c1f28;
    --sjp-blue-soft: #1a2740;
    background: #12141a !important;
    color: #e8eaed;
}
body.theme-dark .sjp-body,
body.theme-dark.sjp-body,
body.theme-dark.classic-body,
body.theme-dark.disc-body {
    background: #12141a;
    color: #e8eaed;
}
body.theme-dark .sjp-search,
body.theme-dark .sjp-panel,
body.theme-dark .sjp-card,
body.theme-dark .classic-block,
body.theme-dark .classic-search,
body.theme-dark .sjp-menu-btn,
body.theme-dark .headerBox .bg {
    background: #1c1f28 !important;
    color: #e8eaed;
    border-color: #2a2f3a;
}
body.theme-dark .sjp-rank-title,
body.theme-dark .sjp-card-title,
body.theme-dark .classic-item .tit,
body.theme-dark .classic-brand h1,
body.theme-dark .sjp-home-title,
body.theme-dark .getLink-title {
    color: #f2f3f5;
}
body.theme-dark .sjp-rank-item,
body.theme-dark .classic-item,
body.theme-dark .sjp-tabs {
    border-color: #2a2f3a;
}
body.theme-dark .sjp-btn-ghost {
    background: #232733;
    border-color: #3a4050;
    color: #c9cdd4;
}
body.theme-dark .sjp-btn-primary {
    background: #1a2740;
}
body.theme-dark .getLink-panel {
    background: #161a22;
    border-color: #2f3b55;
}
body.theme-dark .getLink-status {
    background: #1c1f28;
    border-color: #2a2f3a;
    color: #c9cdd4;
}
body.theme-dark .getLink-legal {
    background: #232733;
    color: #9aa0a6;
}
body.theme-dark .sjp-btn-primary.is-ok {
    background: #14301c;
    border-color: #00b42a;
    color: #3dd68c;
}
body.theme-dark .sjp-btn-primary.is-dead {
    background: #3a1a1a;
    border-color: #f53f3f;
    color: #ff7875;
}
body.theme-dark .el-dialog,
body.theme-dark .el-dialog__body {
    background: #1c1f28 !important;
    color: #e8eaed;
}
body.theme-dark .footerBox { color: #9aa0a6; }
body.theme-dark .sjp-status { color: #9aa0a6; }
body.theme-dark .disc-search,
body.theme-dark .disc-notice,
body.theme-dark .disc-tabbar {
    background: #1c1f28;
    color: #e8eaed;
}
body.theme-dark .disc-cate-item { color: #9aa0a6; }
body.theme-dark .disc-hot-title { color: #e8eaed; }
body.theme-dark .classic-notice {
    background: #2a2418;
    color: #e6c07b;
}