/* ============================================
   QQ Browser Style Theme for XinYue Search
   Adapted from qq-browser-template
   ============================================ */

/* --- Design Tokens --- */
:root {
    --qq-blue: #2d7ff9;
    --qq-cyan: #35c6ff;
    --qq-green: #3be6b7;
    --qq-yellow: #ffd166;
    --qq-orange: #ff8f5f;
    --qq-ink: #11223b;
    --qq-muted: #5d6b88;
    --qq-bg: #eaf4ff;
    --qq-card: rgba(255, 255, 255, 0.92);
    --qq-stroke: #d6e4f5;
    --qq-shadow: 0 18px 40px rgba(18, 44, 78, 0.12);
    --qq-radius-lg: 22px;
    --qq-radius-md: 16px;
    --qq-radius-sm: 12px;
}

/* --- Base Override --- */
body.qq-theme {
    background: linear-gradient(180deg, #e8f3ff 0%, #f7fbff 45%, #ffffff 100%) !important;
    color: var(--qq-ink);
    position: relative;
    overflow-x: hidden;
}

body.qq-theme::before,
body.qq-theme::after {
    content: "";
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(2px);
    z-index: 0;
    pointer-events: none;
}

body.qq-theme::before {
    top: -120px;
    right: -140px;
    background: radial-gradient(circle at 30% 30%, rgba(53, 198, 255, 0.35), rgba(53, 198, 255, 0));
}

body.qq-theme::after {
    bottom: -160px;
    left: -120px;
    background: radial-gradient(circle at 30% 30%, rgba(59, 230, 183, 0.3), rgba(59, 230, 183, 0));
}

body.qq-theme .headBg { display: none; }

/* --- Header Override --- */
body.qq-theme .headerBox {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--qq-stroke);
    box-shadow: 0 2px 12px rgba(18, 44, 78, 0.06);
}

body.qq-theme .headerBox .bg {
    display: none;
}

body.qq-theme .headerBox .box .logoBox .title {
    color: var(--qq-ink);
}

body.qq-theme .headerBox .box .search {
    background: rgba(234, 244, 255, 0.7);
    border: 1px solid var(--qq-stroke);
    border-radius: 999px;
}

body.qq-theme .headerBox .box .search:after {
    display: none;
}

body.qq-theme .headerBox .box .search input {
    color: var(--qq-ink);
}

body.qq-theme .headerBox .box .search .btn .iconfont {
    color: var(--qq-blue);
}

body.qq-theme .headerBox .box .navs .item,
body.qq-theme .headerBox .box .navs a {
    color: var(--qq-muted);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
}

body.qq-theme .headerBox .box .navs .item:hover,
body.qq-theme .headerBox .box .navs a:hover {
    background: rgba(45, 127, 249, 0.12);
    color: var(--qq-ink);
}

/* --- Search Bar (List Page) --- */
body.qq-theme .searchBox.searchList {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--qq-stroke);
    box-shadow: 0 2px 12px rgba(18, 44, 78, 0.06);
    padding-bottom: 0;
}

body.qq-theme .searchBox .search {
    background: rgba(234, 244, 255, 0.7);
    border: 1px solid var(--qq-stroke);
    border-radius: 999px;
}

body.qq-theme .searchBox .search:after { display: none; }

body.qq-theme .searchBox .search input {
    color: var(--qq-ink);
}

body.qq-theme .searchBox .search .btn .iconfont {
    color: var(--qq-blue);
}

/* --- Cloud Filter (QQ Chip Style) --- */
body.qq-theme .cloud-filter a,
body.qq-theme .cloud-filter-fixed a {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--qq-stroke);
    color: var(--qq-muted);
    border-radius: 999px;
    font-size: 13px;
    padding: 6px 14px;
    transition: all 0.2s;
}

body.qq-theme .cloud-filter a:hover,
body.qq-theme .cloud-filter-fixed a:hover {
    color: var(--qq-ink);
    border-color: rgba(45, 127, 249, 0.4);
    background: rgba(45, 127, 249, 0.08);
}

body.qq-theme .cloud-filter a.active,
body.qq-theme .cloud-filter-fixed a.active {
    background: linear-gradient(135deg, var(--qq-blue), var(--qq-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(45, 127, 249, 0.25);
}

/* --- List Box --- */
body.qq-theme .listBox {
    position: relative;
    z-index: 1;
}

/* --- Result Stats --- */
body.qq-theme .result-stats {
    font-size: 14px;
    color: var(--qq-muted);
    padding: 8px 0;
}

body.qq-theme .result-stats strong {
    color: var(--qq-blue);
    font-size: 18px;
}

/* --- Result Card (QQ Panel Style) --- */
body.qq-theme .result-card {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-md);
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: var(--qq-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    opacity: 0;
    transform: translateY(18px);
    animation: qqRise 0.5s ease both;
}

body.qq-theme .result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(18, 44, 78, 0.16);
    border-color: rgba(45, 127, 249, 0.25);
}

@keyframes qqRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Card Title --- */
body.qq-theme .result-card .rc-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--qq-ink);
    line-height: 1.5;
}

body.qq-theme .result-card .rc-title:hover {
    color: var(--qq-blue);
}

/* --- Card Meta Tags --- */
body.qq-theme .result-card .rc-meta {
    margin-top: 10px;
    gap: 8px;
}

body.qq-theme .result-card .rc-tag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: none;
}

body.qq-theme .result-card .rc-tag.cloud {
    background: linear-gradient(135deg, rgba(45, 127, 249, 0.12), rgba(53, 198, 255, 0.12));
    color: #1c4aa6;
    border: 1px solid rgba(45, 127, 249, 0.2);
}

body.qq-theme .result-card .rc-tag.source {
    background: linear-gradient(135deg, rgba(59, 230, 183, 0.12), rgba(110, 231, 255, 0.12));
    color: #07564b;
    border: 1px solid rgba(59, 230, 183, 0.2);
}

body.qq-theme .result-card .rc-pwd {
    color: var(--qq-orange);
}

/* --- Card Action Buttons --- */
body.qq-theme .result-card .rc-actions .rc-btn {
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    border: 1px solid var(--qq-stroke);
    background: rgba(255, 255, 255, 0.9);
    color: var(--qq-muted);
    transition: all 0.2s;
}

body.qq-theme .result-card .rc-actions .rc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(18, 44, 78, 0.1);
    color: var(--qq-ink);
    border-color: rgba(45, 127, 249, 0.3);
}

body.qq-theme .result-card .rc-actions .rc-btn.primary {
    background: linear-gradient(135deg, var(--qq-blue), var(--qq-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(45, 127, 249, 0.25);
}

body.qq-theme .result-card .rc-actions .rc-btn.primary:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(45, 127, 249, 0.35);
}

/* --- Pagination --- */
body.qq-theme .page-nav a {
    border: 1px solid var(--qq-stroke);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--qq-muted);
    font-size: 13px;
    transition: all 0.2s;
}

body.qq-theme .page-nav a:hover {
    color: var(--qq-ink);
    border-color: rgba(45, 127, 249, 0.35);
    background: rgba(45, 127, 249, 0.06);
}

body.qq-theme .page-nav a.active {
    background: linear-gradient(135deg, var(--qq-blue), var(--qq-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(45, 127, 249, 0.25);
}

/* --- Right Sidebar --- */
body.qq-theme .listBox .right .nav {
    color: var(--qq-ink);
}

body.qq-theme .listBox .right .box {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-md);
    box-shadow: var(--qq-shadow);
}

body.qq-theme .listBox .right .list .item p {
    color: var(--qq-muted);
    transition: color 0.2s;
}

body.qq-theme .listBox .right .list .item:hover p {
    color: var(--qq-ink);
}

/* --- Screen Sidebar (PC) --- */
body.qq-theme .listBox .screen .fixed h3 {
    color: var(--qq-ink);
}

body.qq-theme .listBox .screen .box {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-md);
    box-shadow: var(--qq-shadow);
}

body.qq-theme .listBox .screen .box a {
    color: var(--qq-muted);
    transition: color 0.2s, background 0.2s;
    padding: 10px 12px;
    border-radius: 8px;
    border-bottom: none;
}

body.qq-theme .listBox .screen .box a:hover {
    background: rgba(45, 127, 249, 0.06);
    color: var(--qq-ink);
}

body.qq-theme .listBox .screen .box a.active {
    color: var(--qq-blue);
    background: rgba(45, 127, 249, 0.1);
    font-weight: 600;
}

/* --- Footer --- */
body.qq-theme .footerBox {
    border-top: 1px solid rgba(214, 228, 245, 0.8);
    color: var(--qq-muted);
}

/* --- Error Box --- */
body.qq-theme .limitless-error {
    background: rgba(255, 143, 95, 0.08);
    border: 1px solid rgba(255, 143, 95, 0.25);
    color: #c44a00;
    border-radius: var(--qq-radius-sm);
}

/* --- Dialog Override --- */
body.qq-theme .dialogUrlBox {
    border-radius: var(--qq-radius-lg) !important;
}

body.qq-theme .dialogUrlBox .el-dialog__header {
    border-bottom: 1px solid var(--qq-stroke);
}

body.qq-theme .dialogUrlBox .dialogUrl .title span {
    color: var(--qq-blue);
}

body.qq-theme .dialogUrlBox .dialogUrl .qrcode {
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-sm);
}

body.qq-theme .dialogUrlBox .dialogUrl .nav .item a {
    color: var(--qq-blue);
}

body.qq-theme .dialogUrlBox .dialogUrl .statement {
    border-top: 1px dashed var(--qq-stroke);
    color: var(--qq-muted);
}

/* --- ListBox Layout --- */
body.qq-theme .listBox h3 {
    color: var(--qq-ink);
}

body.qq-theme .listBox h3:after {
    background: linear-gradient(180deg, var(--qq-blue), var(--qq-cyan));
    border-radius: 2px;
}

body.qq-theme .listBox h3 span {
    color: var(--qq-blue);
}

body.qq-theme .listBox .left .box {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-md);
    box-shadow: var(--qq-shadow);
}

/* ============================================
   Homepage Styles
   ============================================ */

/* --- Hero Search Area --- */
body.qq-theme .homeBox {
    position: relative;
    z-index: 1;
}

body.qq-theme .homeBox .box {
    position: relative;
    z-index: 1;
}

body.qq-theme .homeBox .logoBox .title {
    color: var(--qq-ink);
}

body.qq-theme .homeBox .subTitle {
    color: var(--qq-muted);
    opacity: 1;
    font-size: 14px;
}

body.qq-theme .homeBox .search {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    box-shadow: var(--qq-shadow);
    border-radius: 999px;
}

body.qq-theme .homeBox .search:after { display: none; }

body.qq-theme .homeBox .search input {
    color: var(--qq-ink);
}

body.qq-theme .homeBox .search .btn .iconfont {
    color: var(--qq-blue);
}

/* --- Home Blocks (Ranking Panels) --- */
body.qq-theme .home .block {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-lg);
    box-shadow: var(--qq-shadow);
    animation: qqFloatIn 0.6s ease both;
    overflow: hidden;
}

body.qq-theme .home .nav {
    color: var(--qq-ink);
    font-size: 16px;
    padding: 0 20px 8px;
}

body.qq-theme .home .nav img {
    width: 22px;
    height: 22px;
}

/* --- Grid Card Items (ranking_type == 1, with poster) --- */
body.qq-theme .home .content .list .item {
    border-radius: var(--qq-radius-sm);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.qq-theme .home .content .list .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(18, 44, 78, 0.12);
}

body.qq-theme .home .content .list .item p {
    color: var(--qq-ink);
    font-size: 13px;
}

body.qq-theme .home .content .list .item .img {
    border-radius: var(--qq-radius-sm);
    background: linear-gradient(135deg, #e8f3ff, #f0f7ff);
    border: 1px solid var(--qq-stroke);
}

body.qq-theme .home .content .list .item .img span {
    color: var(--qq-muted);
}

body.qq-theme .home .content .list .item .img .titleLoading {
    color: var(--qq-muted);
    font-size: 13px;
}

/* --- List Items (homeNO mode, text-only ranking) --- */
body.qq-theme .home.homeNO .block {
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-lg);
    box-shadow: var(--qq-shadow);
}

body.qq-theme .home.homeNO .content .list .item p {
    color: var(--qq-muted);
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

body.qq-theme .home.homeNO .content .list .item:hover p {
    background: rgba(45, 127, 249, 0.06);
    color: var(--qq-ink);
}

body.qq-theme .home.homeNO .content .list .item p span {
    color: var(--qq-stroke);
    font-weight: 600;
}

body.qq-theme .home.homeNO .content .list .item:nth-child(1) p span {
    color: #ff4757;
}

body.qq-theme .home.homeNO .content .list .item:nth-child(2) p span {
    color: var(--qq-orange);
}

body.qq-theme .home.homeNO .content .list .item:nth-child(3) p span {
    color: var(--qq-yellow);
}

/* --- Footer --- */
body.qq-theme .footerBox .box {
    color: var(--qq-muted);
}

body.qq-theme .footerBox .box p {
    opacity: 1;
    color: var(--qq-muted);
}

/* ============================================
   Detail Page Styles
   ============================================ */

/* --- Detail Search Bar --- */
body.qq-theme .searchBox.searchDetail .search {
    background: rgba(234, 244, 255, 0.7);
    border: 1px solid var(--qq-stroke);
    border-radius: 999px;
    box-shadow: none;
}

body.qq-theme .searchBox.searchDetail .search:after { display: none; }

body.qq-theme .searchBox.searchDetail .search input {
    color: var(--qq-ink);
}

body.qq-theme .searchBox.searchDetail .search .btn .iconfont {
    color: var(--qq-blue);
}

/* --- Detail Box --- */
body.qq-theme .listBox.detailBox .left .box.details {
    background: var(--qq-card);
    border: 1px solid var(--qq-stroke);
    border-radius: var(--qq-radius-lg);
    box-shadow: var(--qq-shadow);
}

/* --- Detail Poster --- */
body.qq-theme .details .pic {
    border-radius: var(--qq-radius-md);
    background: linear-gradient(135deg, #e8f3ff, #f0f7ff);
    overflow: hidden;
    border: 1px solid var(--qq-stroke);
    box-shadow: 0 8px 20px rgba(18, 44, 78, 0.1);
}

/* --- Detail Title --- */
body.qq-theme .details .title {
    color: var(--qq-ink);
}

/* --- Detail Category Rows --- */
body.qq-theme .details .cat {
    border-bottom: 1px solid rgba(214, 228, 245, 0.5);
    padding: 10px 0;
}

body.qq-theme .details .cat:last-of-type {
    border-bottom: none;
}

body.qq-theme .details .cat .l {
    color: var(--qq-muted);
    opacity: 1;
    font-weight: 500;
}

body.qq-theme .details .cat .r {
    color: var(--qq-ink);
}

body.qq-theme .details .cat .r a {
    color: var(--qq-blue);
}

/* --- Detail Action Buttons --- */
body.qq-theme .details .btns .btn {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--qq-stroke);
    color: var(--qq-muted);
    opacity: 1;
    transition: all 0.2s;
}

body.qq-theme .details .btns .btn:after {
    display: none;
}

body.qq-theme .details .btns .btn:hover {
    background: rgba(45, 127, 249, 0.08);
    color: var(--qq-ink);
    border-color: rgba(45, 127, 249, 0.3);
}

body.qq-theme .details .btns .btn.btnCol {
    background: linear-gradient(135deg, var(--qq-blue), var(--qq-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(45, 127, 249, 0.25);
}

body.qq-theme .details .btns .btn.btnCol:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(45, 127, 249, 0.35);
    background: linear-gradient(135deg, var(--qq-blue), var(--qq-cyan));
    color: #fff;
}

/* --- Same List (Related Resources) --- */
body.qq-theme .samelistBox {
    background: var(--qq-card) !important;
    border: 1px solid var(--qq-stroke) !important;
    border-radius: var(--qq-radius-lg) !important;
    box-shadow: var(--qq-shadow) !important;
}

body.qq-theme .samelist .item p {
    color: var(--qq-muted);
    transition: color 0.2s, background 0.2s;
    padding: 6px 8px;
    border-radius: 8px;
}

body.qq-theme .samelist .item:hover p {
    background: rgba(45, 127, 249, 0.06);
    color: var(--qq-ink);
}

/* ============================================
   Resource Check Progress Bar
   ============================================ */

#check-progress-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 10px 0;
    background: linear-gradient(135deg, rgba(45, 127, 249, 0.06), rgba(53, 198, 255, 0.06));
    border: 1px solid rgba(45, 127, 249, 0.12);
    border-radius: 10px;
}

#check-progress-bar .check-progress-inner {
    flex: 1;
    height: 6px;
    background: rgba(45, 127, 249, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

#check-progress-bar .check-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--qq-blue, #2d7ff9), var(--qq-cyan, #35c6ff));
    border-radius: 999px;
    transition: width 0.3s ease;
}

#check-progress-bar .check-progress-text {
    font-size: 12px;
    color: var(--qq-blue, #2d7ff9);
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
}

#check-progress-bar.done .check-progress-fill {
    background: linear-gradient(90deg, var(--qq-green, #07c160), var(--qq-cyan, #35c6ff));
}

#check-progress-bar.done .check-progress-text {
    color: var(--qq-green, #07c160);
}

/* ============================================
   Skeleton Loading Cards
   ============================================ */

#check-skeleton {
    display: none;
}

#check-skeleton .skeleton-card {
    background: var(--qq-card, #fff);
    border: 1px solid var(--qq-stroke, rgba(0,0,0,0.06));
    border-radius: var(--qq-radius-md, 14px);
    padding: 20px 22px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

#check-skeleton .skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(45,127,249,0.06) 25%, rgba(53,198,255,0.10) 50%, rgba(45,127,249,0.06) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease infinite;
}

#check-skeleton .skeleton-line.w80 { width: 80%; }
#check-skeleton .skeleton-line.w70 { width: 70%; }
#check-skeleton .skeleton-line.w60 { width: 60%; }
#check-skeleton .skeleton-line.w50 { width: 50%; }
#check-skeleton .skeleton-line.w40 { width: 40%; }
#check-skeleton .skeleton-line.w30 { width: 30%; }
#check-skeleton .skeleton-line.w20 { width: 20%; }

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   Page Transition Progress Bar
   ============================================ */

#qq-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qq-blue), var(--qq-cyan), var(--qq-green));
    z-index: 99999;
    pointer-events: none;
    transition: none;
    opacity: 0;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(45, 127, 249, 0.5), 0 0 4px rgba(53, 198, 255, 0.3);
}

#qq-progress-bar.active {
    opacity: 1;
}

#qq-progress-bar.finishing {
    transition: width 0.3s ease-out, opacity 0.4s ease 0.2s;
    width: 100% !important;
    opacity: 0;
}

/* --- Animations --- */
@keyframes qqFloatIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}