/* ===== 原有样式保持不变，新增隐私弹窗相关样式 ===== */
:root {
    --dark: #1E1E28;
    --card: #2A2A3C;
    --gold: #ffb400;
}
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
.video-thumb-container img {
    pointer-events: none;
}
img,
a,
.video-card {
    -webkit-user-drag: none;
    user-drag: none;
}
* {
    -webkit-touch-callout: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--dark);
    color: #eee;
    -webkit-font-smoothing: antialiased;
    overflow: visible !important;
    height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    max-width: 100%;
    display: block;
}
*,
.btn,
img {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}
.save-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    z-index: 999999;
    pointer-events: none;
    draggable: false;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.rank-thumb img,
.game-thumb img,
.novel-thumb img {
    pointer-events: none !important;
    -webkit-user-drag: none;
    user-drag: none;
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--dark);
    z-index: 9999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.top-nav {
    background: var(--dark);
    padding: 14px 0 6px 0;
    width: 100%;
    display: block;
}
.top-nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-display: flex;
    flex-wrap: nowrap;
}
.top-nav li {
    flex: 1;
    text-align: center;
    font-size: 17px;
    color: #999;
    font-weight: 400;
    padding: 6px 0;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-flex: 1;
    white-space: nowrap;
}
.top-nav li.active {
    color: #fff;
    font-weight: 700;
}
.top-nav li.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    -webkit-transform: translateX(-50%);
}
.top-nav li:active {
    transform: scale(0.95);
    opacity: 0.8;
    -webkit-transform: scale(0.95);
}

.profile-top-nav {
    background: linear-gradient(135deg, #2d1b69, #4a2b8a);
    padding: 14px 0;
    text-align: center;
    display: none;
    width: 100%;
    margin-bottom: 0px;
}
.profile-top-nav.active {
    display: block;
}
.profile-top-nav .profile-nav-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.profile-top-nav .profile-nav-title span {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

/* ===== 新版搜索框样式 ===== */
.search-box {
    padding: 10px 12px 8px 12px;
    background: var(--dark);
    margin-top: 0 !important;
}
.search-box .search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-box .search-row .search-inner {
    flex: 1;
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 22px;
    border: 2px solid #ffb400;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 38px;
    box-shadow: 0 0 12px rgba(255, 180, 0, 0.15);
}
.search-box .search-row .search-inner:focus-within {
    border-color: #ff9500;
    box-shadow: 0 0 20px rgba(255, 180, 0, 0.25);
}
.search-box .search-row .search-inner .hot-tag-left {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #ffb400;
    padding: 0 6px 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-weight: 500;
    flex-shrink: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}
.search-box .search-row .search-inner .hot-tag-left.hidden {
    display: none !important;
}
.search-box .search-row .search-inner .hot-tag-left .hot-icon {
    font-size: 12px;
}
.search-box .search-row .search-inner input {
    flex: 1;
    height: 100%;
    padding: 0 10px 0 2px;
    border: none;
    border-radius: 22px;
    font-size: 13px;
    background: transparent;
    color: #222;
    outline: none;
    min-width: 50px;
    -webkit-flex: 1;
}
.search-box .search-row .search-inner input::placeholder {
    color: #999;
    font-size: 12px;
}
.search-box .search-row .search-inner .search-icon-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    margin-right: 4px;
}
.search-box .search-row .search-inner .search-icon-btn:active {
    opacity: 1;
}
.search-box .search-row .search-inner .search-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #888;
    stroke-width: 2;
}
.search-box .search-row .search-btn {
    flex-shrink: 0;
    height: 38px;
    padding: 0 20px;
    border: none;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.35);
    transition: transform 0.1s;
}
.search-box .search-row .search-btn:active {
    transform: scale(0.95);
}

/* ===== 搜索结果面板 ===== */
#fakeResultPanel {
    display: none;
    padding: 8px 12px 24px;
    min-height: calc(100vh - 150px);
    background: var(--dark);
}
body.fake-search-mode #fakeResultPanel {
    display: block !important;
}
body.fake-search-mode .category-content {
    display: none !important;
}
.srp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px 12px;
}
#fakeSrpBack {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s;
}
#fakeSrpBack:active {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0.9);
}
.srp-head-title {
    font-size: 15px;
    font-weight: 700;
}
.srp-count {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 6px 0 14px;
}
.srp-count b {
    color: #ffb400;
    font-size: 18px;
}
.srp-sub {
    text-align: center;
    font-size: 12px;
    color: #9a9aa8;
    margin: -6px 0 14px;
}
.srp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.srp-item {
    background: #2A2A3C;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s;
    border: 1px solid #333350;
}
.srp-item:active {
    transform: scale(0.97);
    border-color: var(--gold);
}
.srp-item .ph {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1a1a24;
}
.srp-item .ph .ph-g {
    position: absolute;
    inset: -14px;
    filter: blur(14px);
}
.srp-item .ph .badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff5e62, #ff9966);
    z-index: 2;
}
.srp-item .ph .lk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    font-size: 15px;
    color: #fff;
    z-index: 2;
}
.srp-item .ph .meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 8px 6px 5px;
    font-size: 10px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
    z-index: 2;
}
.srp-item .ttl {
    padding: 6px 8px;
    font-size: 11px;
    color: #b9b9c6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srp-tip {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin: 0 0 12px;
}
.srp-getall {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f43f5e, #ec4899);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.3);
    transition: transform 0.1s;
}
.srp-getall:active {
    transform: scale(0.98);
}
.srp-getall .srp-getall-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.92;
    margin-top: 3px;
}
.srp-proof {
    text-align: center;
    font-size: 12px;
    color: #9a9aa8;
    margin: 14px 0 10px;
}
.srp-proof b {
    color: #ffb400;
}
.srp-benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 11px;
    color: #7f7f8c;
    padding-bottom: 6px;
}
.srp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: calc(100vh - 240px);
    color: #aaa;
    font-size: 13px;
}
.srp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #ffb400;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.fake-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 10001;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* ===== 原有样式继续... ===== */
.btn-row {
    display: flex;
    gap: 10px;
    padding: 4px 12px 14px 12px;
    background: var(--dark);
    -webkit-display: flex;
}
.btn-row.hidden {
    display: none !important;
}
.neon-btn {
    flex: 1;
    height: 90px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #4a7bff 0%, #8a2be2 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 0 0 2px rgba(138, 43, 226, .35), 0 0 16px 3px rgba(74, 123, 255, .35);
    -webkit-flex: 1;
    -webkit-display: flex;
    -webkit-flex-direction: column;
}
.neon-btn:active {
    transform: scale(.96);
    box-shadow: 0 0 0 2px rgba(138, 43, 226, .55), 0 0 20px 5px rgba(74, 123, 255, .55);
    -webkit-transform: scale(.96);
}
#btnBanner {
    background: linear-gradient(135deg, #ff7e00 0%, #ffaa00 100%);
    box-shadow: 0 0 0 2px rgba(255, 170, 0, .35), 0 0 10px 2px rgba(255, 126, 0, .30);
}
#btnBanner:active {
    box-shadow: 0 0 0 2px rgba(255, 170, 0, .55), 0 0 14px 3px rgba(255, 126, 0, .40);
}
#btnGifs {
    background: linear-gradient(135deg, #ff5595 0%, #ff88bb 100%);
    box-shadow: 0 0 0 2px rgba(255, 85, 149, .35), 0 0 10px 2px rgba(255, 136, 187, .30);
}
#btnGifs:active {
    box-shadow: 0 0 0 2px rgba(255, 85, 149, .55), 0 0 14px 3px rgba(255, 136, 187, .40);
}
.btn-gif {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    animation: pulse 1.8s ease-in-out infinite;
    -webkit-animation: pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .25);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}
@-webkit-keyframes pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .25);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}
.btn-txt {
    letter-spacing: .3px;
    text-shadow: 0 0 6px rgba(0, 0, 0, .30);
    font-size: 14px;
}
.neon-btn {
    animation: none;
}
.neon-btn.shaking {
    animation: gentleShake 2.4s ease-in-out infinite;
    -webkit-animation: gentleShake 2.4s ease-in-out infinite;
}
@keyframes gentleShake {
    0%,
    54%,
    100% {
        transform: translateX(0) rotate(0deg);
    }
    58% {
        transform: translateX(-3px) rotate(-1.5deg);
    }
    60% {
        transform: translateX(3px) rotate(1.5deg);
    }
    62% {
        transform: translateX(0) rotate(0deg);
    }
}
@-webkit-keyframes gentleShake {
    0%,
    54%,
    100% {
        -webkit-transform: translateX(0) rotate(0deg);
    }
    58% {
        -webkit-transform: translateX(-3px) rotate(-1.5deg);
    }
    60% {
        -webkit-transform: translateX(3px) rotate(1.5deg);
    }
    62% {
        -webkit-transform: translateX(0) rotate(0deg);
    }
}
.neon-btn:active {
    animation: none;
}

.guide-finger {
    position: absolute;
    width: 38px;
    height: 38px;
    background-image: url('image/sz.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    right: 8px;
    bottom: 8px;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}
.guide-finger.animate {
    animation: fingerFade 2.4s linear infinite, fingerMove 2.4s linear infinite;
    -webkit-animation: fingerFade 2.4s linear infinite, fingerMove 2.4s linear infinite;
}
@keyframes fingerFade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
}
@-webkit-keyframes fingerFade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
}
@keyframes fingerMove {
    0% {
        transform: translate(25px, 25px) scale(0.9);
    }
    50% {
        transform: translate(-35px, -18px) scale(0.93);
    }
    56% {
        transform: translate(-35px, -18px) scale(0.70);
    }
    58% {
        transform: translate(-35px, -18px) scale(0.95);
    }
    100% {
        transform: translate(-35px, -18px) scale(1);
    }
}
@-webkit-keyframes fingerMove {
    0% {
        -webkit-transform: translate(25px, 25px) scale(0.9);
    }
    50% {
        -webkit-transform: translate(-35px, -18px) scale(0.93);
    }
    56% {
        -webkit-transform: translate(-35px, -18px) scale(0.70);
    }
    58% {
        -webkit-transform: translate(-35px, -18px) scale(0.95);
    }
    100% {
        -webkit-transform: translate(-35px, -18px) scale(1);
    }
}

.category-content {
    padding: 0 12px 12px;
    background: var(--dark);
}
.category-panel {
    display: none;
    animation: fadeUp 0.3s ease;
}
.category-panel.active {
    display: block;
}
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-grid {
    padding: 8px 0 4px;
    background: var(--dark);
}
.video-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    -webkit-display: flex;
}
.video-row.three-cols {
    gap: 8px;
}
.video-row.three-cols .video-card {
    flex: 1;
    max-width: 33.33%;
    -webkit-flex: 1;
}
.video-row.single-col {
    flex-direction: column;
    gap: 12px;
    -webkit-flex-direction: column;
}
.video-row.single-col .video-card {
    width: 100%;
}
.video-row.single-col .video-thumb-container {
    height: 190px;
}

.rank-tab-wrap {
    display: flex;
    gap: 0;
    padding: 8px 12px 4px;
    background: var(--dark);
    border-bottom: 1px solid #2a2a44;
    -webkit-display: flex;
}
.rank-tab-btn {
    flex: 1;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-flex: 1;
}
.rank-tab-btn.active {
    color: #fff;
    border-bottom-color: var(--gold);
}
.rank-tab-btn:active {
    transform: scale(0.96);
    -webkit-transform: scale(0.96);
}
.rank-tab-content {
    display: none;
    animation: fadeUp 0.3s ease;
}
.rank-tab-content.active {
    display: block;
}

.rank-card {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    background: #25253a;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #333350;
    -webkit-display: flex;
    align-items: center;
}
.rank-card:active {
    transform: scale(0.98);
    border-color: var(--gold);
    -webkit-transform: scale(0.98);
}
.rank-card .rank-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a30;
}
.rank-card .rank-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.rank-card .rank-info {
    flex: 1;
    min-width: 0;
}
.rank-card .rank-info .rank-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.rank-card .rank-info .rank-meta {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
    align-items: center;
    -webkit-display: flex;
}
.rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
.rank-medal.top1 {
    background: linear-gradient(135deg, #ffd700, #f5a623);
    color: #7a4d00;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}
.rank-medal.top2 {
    background: linear-gradient(135deg, #e8e8e8, #b0b0b0);
    color: #555;
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.2);
}
.rank-medal.top3 {
    background: linear-gradient(135deg, #f5b88a, #cd7f32);
    color: #5a3a1a;
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.25);
}
.rank-badge-new {
    font-size: 11px;
    font-weight: 700;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 107, 107, 0.2);
}
.rank-card .rank-info .rank-meta span {
    font-size: 11px;
    color: #aaa;
}

.video-card {
    flex: 1;
    background: transparent;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-flex: 1;
    -webkit-display: flex;
    -webkit-flex-direction: column;
    -webkit-user-drag: none;
    user-drag: none;
}
.video-thumb-container {
    position: relative;
    width: 100%;
    height: 130px;
    border-radius: 10px;
    background: var(--card);
    margin-bottom: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.video-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}

.badge-tag {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 8px 2px 6px;
    border-radius: 0 0 6px 0;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    transition: transform 0.2s ease;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.5;
    min-width: 28px;
    text-align: center;
}
.badge-tag.color-yellow {
    background: linear-gradient(135deg, #f5a623, #f7c948);
}
.badge-tag.color-blue {
    background: linear-gradient(135deg, #4a7bff, #6b9cff);
}
.badge-tag.color-green {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.badge-tag.color-purple {
    background: linear-gradient(135deg, #8e44ad, #a569bd);
}
.badge-tag.color-red {
    background: linear-gradient(135deg, #e74c3c, #f1948a);
}
.badge-tag.color-orange {
    background: linear-gradient(135deg, #e67e22, #f39c12);
}
.badge-tag.color-cyan {
    background: linear-gradient(135deg, #00b4d8, #48cae4);
}
.badge-tag.color-pink {
    background: linear-gradient(135deg, #e84393, #fd79a8);
}
.badge-tag.color-teal {
    background: linear-gradient(135deg, #00b894, #55efc4);
}
.badge-tag.color-indigo {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.status-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.status-badge.finished {
    background: rgba(255, 180, 0, 0.85);
    color: #000;
}
.status-badge.ongoing {
    background: rgba(76, 175, 80, 0.85);
    color: #fff;
}

.lock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    z-index: 2;
    transition: transform 0.2s ease;
    -webkit-transform: translate(-50%, -50%);
    pointer-events: none;
}
.lock-center img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.bottom-icons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    z-index: 2;
    -webkit-display: flex;
    pointer-events: none;
}
.left-group {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: #FFFFFF;
    -webkit-display: flex;
    pointer-events: none;
}
.eye-icon {
    width: 12px;
    height: 12px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>') center/contain no-repeat;
    transition: transform 0.2s ease;
    pointer-events: none;
}
.right-group {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: #FFFFFF;
    -webkit-display: flex;
    pointer-events: none;
}
.time-clock-icon {
    width: 11px;
    height: 11px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="10" stroke="white" stroke-width="1.5" fill="none"/><path d="M12 6v6l4 2" stroke="white" stroke-width="1.5" fill="none"/></svg>') center/contain no-repeat;
    transition: transform 0.2s ease;
    pointer-events: none;
}
.eat-clock-icon {
    width: 11px;
    height: 11px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><rect x="2" y="6" width="20" height="12" rx="2" stroke="white" stroke-width="1.5" fill="none"/><circle cx="6" cy="12" r="1.5" fill="white"/><circle cx="12" cy="12" r="1.5" fill="white"/><circle cx="18" cy="12" r="1.5" fill="white"/></svg>') center/contain no-repeat;
    transition: transform 0.2s ease;
    pointer-events: none;
}
.video-info h5 {
    font-size: 11px;
    color: #999;
    margin: 0;
    font-weight: normal;
    font-style: italic;
    line-height: 1.3;
    transition: color 0.2s ease;
    padding-left: 4px;
}
.video-card:active .video-thumb-container {
    transform: scale(0.95);
    box-shadow: 0 0 0 2px var(--gold);
    -webkit-transform: scale(0.95);
}
.video-card:active .badge-tag {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
}
.video-card:active .lock-center {
    transform: translate(-50%, -50%) scale(1.15);
    -webkit-transform: translate(-50%, -50%) scale(1.15);
}
.video-card:active .video-info h5 {
    color: var(--gold);
}

.video-row.single-col .video-card .video-thumb-container {
    height: 190px;
    border-radius: 10px;
}
.video-row.single-col .video-card .video-info h5 {
    font-size: 13px;
    color: #ddd;
    padding-left: 2px;
    font-style: normal;
    font-weight: 500;
}

.game-card {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    background: #25253a;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #333350;
    -webkit-display: flex;
    align-items: center;
}
.game-card:active {
    transform: scale(0.98);
    border-color: var(--gold);
    -webkit-transform: scale(0.98);
}
.game-card .game-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 68px;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a30;
}
.game-card .game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.game-card .game-info {
    flex: 1;
    min-width: 0;
}
.game-card .game-info .game-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.game-card .game-info .game-desc {
    font-size: 11px;
    color: #aaa;
    margin-top: 1px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.game-card .game-info .game-meta {
    display: flex;
    gap: 8px;
    margin-top: 3px;
    flex-wrap: wrap;
    -webkit-display: flex;
}
.game-card .game-info .game-meta span {
    font-size: 10px;
    color: #888;
    background: #1e1e30;
    padding: 1px 10px;
    border-radius: 10px;
}
.game-card .game-info .game-meta .game-hot {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.10);
}
.game-card .game-info .game-views {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.novel-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    background: #25253a;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #333350;
    -webkit-display: flex;
    align-items: center;
}
.novel-row:active {
    transform: scale(0.98);
    border-color: var(--gold);
    -webkit-transform: scale(0.98);
}
.novel-row .novel-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a30;
}
.novel-row .novel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.novel-row .novel-info {
    flex: 1;
    min-width: 0;
}
.novel-row .novel-info .novel-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.novel-row .novel-info .novel-score {
    font-size: 12px;
    color: #ffb400;
    margin-left: 6px;
    font-weight: 600;
}
.novel-row .novel-info .novel-desc {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.novel-row .novel-info .novel-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
    -webkit-display: flex;
}
.novel-row .novel-info .novel-meta span {
    font-size: 10px;
    color: #888;
    background: #1e1e30;
    padding: 1px 10px;
    border-radius: 10px;
}
.novel-row .novel-info .novel-meta .novel-status {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.10);
}
.novel-row .novel-info .novel-meta .novel-status.finished {
    color: #ffb400;
    background: rgba(255, 180, 0, 0.10);
}
.novel-row .novel-info .novel-words {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.profile-panel {
    padding: 0 0 12px 0;
    background: var(--dark);
}
.profile-header {
    background: linear-gradient(135deg, #1a0a3a, #3a1a7a, #5a2a9a);
    border-radius: 20px;
    padding: 14px 18px 16px 18px;
    position: relative;
    overflow: hidden;
    min-height: 160px;
}
.profile-header .profile-bg-img {
    position: absolute;
    inset: 0;
    background: url('/image/vv7.jpg') center/cover no-repeat;
    opacity: 0.2;
    pointer-events: none;
}
.profile-header .profile-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
    -webkit-display: flex;
}
.profile-header .profile-settings {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    padding: 4px 8px;
}
.profile-header .profile-settings:active {
    transform: scale(0.85);
    color: #fff;
    -webkit-transform: scale(0.85);
}

.profile-user {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    margin-top: 4px;
    -webkit-display: flex;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb400, #ff7e00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.profile-name .profile-login-tip {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-top: 2px;
}
.profile-login-btn {
    margin-top: 4px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 18px;
    border-radius: 18px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.profile-login-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.25);
    -webkit-transform: scale(0.95);
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 14px;
    position: relative;
    z-index: 1;
    -webkit-display: flex;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    padding: 10px 0;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.profile-stats .stat-item {
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 2px 10px;
}
.profile-stats .stat-item:active {
    transform: scale(0.92);
    -webkit-transform: scale(0.92);
}
.profile-stats .stat-item .stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.profile-stats .stat-item .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1px;
}

.profile-menu {
    margin-top: 16px;
    background: #25253a;
    border-radius: 14px;
    border: 1px solid #333350;
    overflow: hidden;
}
.profile-menu .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #2a2a40;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-display: flex;
}
.profile-menu .menu-item:last-child {
    border-bottom: none;
}
.profile-menu .menu-item:active {
    background: #2f2f48;
    transform: scale(0.98);
    -webkit-transform: scale(0.98);
}
.profile-menu .menu-item .menu-left {
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-display: flex;
}
.profile-menu .menu-item .menu-left .menu-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}
.profile-menu .menu-item .menu-left .menu-text {
    font-size: 14px;
    color: #ddd;
}
.profile-menu .menu-item .menu-right {
    font-size: 12px;
    color: #888;
}
.profile-menu .menu-item .menu-right .arrow {
    color: #555;
    margin-left: 4px;
}

.profile-login-banner {
    margin-top: 14px;
    background: linear-gradient(135deg, #1a1a3a, #2d1b69);
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 180, 0, 0.08);
    text-align: center;
}
.profile-login-banner .banner-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.profile-login-banner .banner-desc {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}
.profile-login-banner .banner-btn {
    margin-top: 10px;
    display: inline-block;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    padding: 8px 32px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(255, 126, 0, 0.25);
}
.profile-login-banner .banner-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(255, 126, 0, 0.15);
    -webkit-transform: scale(0.95);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--dark);
    -webkit-display: flex;
}
.pagination a {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    color: #bbb;
    background: #2a2a3c;
    border-radius: 50%;
    transition: background .25s, color .25s, transform .15s;
    cursor: pointer;
}
.pagination a.on {
    background: linear-gradient(135deg, #ff7e00 0%, #ffaa00 100%);
    color: #fff;
    font-weight: 700;
}
.pagination a:active {
    transform: scale(.88);
    filter: brightness(.9);
    -webkit-transform: scale(.88);
    -webkit-filter: brightness(.9);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: var(--dark);
    border-top: 1px solid rgba(255, 180, 0, .12);
    z-index: 9999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
}
.bottom-nav a {
    flex: 1;
    text-align: center;
    padding: 6px 0 4px;
    font-size: 12px;
    color: #999;
    background: none;
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-flex: 1;
}
.bottom-nav a.on {
    color: var(--gold);
    background: none;
}
.bottom-nav-icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 2px;
    border-radius: 6px;
    background: none;
    background-size: cover;
    transition: all 0.3s ease;
}
.icon-home .bottom-nav-icon {
    background-image: url('/image/sy.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-category .bottom-nav-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>');
}
.icon-fav .bottom-nav-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}
.icon-fav.on .bottom-nav-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffb400"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}
.icon-new .bottom-nav-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-13h-2v6l5.25 3.15L17 12.23l-4-2.37V7z"/></svg>');
}
.icon-me .bottom-nav-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}
.bottom-nav a.on .bottom-nav-icon {
    filter: brightness(0) saturate(100%) invert(79%) sepia(100%) saturate(1000%) hue-rotate(0deg);
}
.bottom-nav a.on.icon-home .bottom-nav-icon {
    filter: none !important;
}
.bottom-nav a:active .bottom-nav-icon {
    transform: scale(0.85);
    filter: brightness(1.2);
    -webkit-transform: scale(0.85);
    -webkit-filter: brightness(1.2);
}
.bottom-nav a:active {
    color: var(--gold);
}

.free-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 4px;
    background: var(--dark);
    -webkit-display: flex;
}
.free-label {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding-left: 10px;
}
.free-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--gold);
    border-radius: 2px;
    -webkit-transform: translateY(-50%);
}
.free-more {
    font-size: 12px;
    color: #bbb;
}
.online-count {
    font-size: 11px;
    color: #4caf50;
    font-weight: 400;
    margin-left: 6px;
    background: rgba(76, 175, 80, 0.12);
    padding: 1px 8px;
    border-radius: 10px;
}

.app-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}
.scroll-box {
    height: auto;
    overflow-y: auto;
    padding-right: 0;
    margin-right: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.scroll-box::-webkit-scrollbar {
    width: 0 !important;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    -webkit-display: flex;
}
.overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #ffb400;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.pwd-box {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    -webkit-display: flex;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.pwd-box.show {
    opacity: 1;
    pointer-events: auto;
}
.pwd-inner {
    position: relative;
    width: 340px;
    max-width: 92%;
    background: #1a1a2e;
    border-radius: 16px;
    padding: 20px 18px 16px;
    text-align: center;
    color: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 180, 0, 0.06);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pwd-box.show .pwd-inner {
    transform: scale(1);
}
.pwd-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 2px;
    -webkit-display: flex;
}
.pwd-close {
    font-size: 22px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    transition: color .2s, transform .2s;
    padding: 0 4px;
    font-weight: 300;
}
.pwd-close:active {
    color: #fff;
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
}

.pwd-content-row {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #0d0d1a;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 4px 0 12px;
    border: 1px solid #2a2a44;
    -webkit-display: flex;
}
.pwd-thumb-wrap {
    flex-shrink: 0;
    width: 100px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #222;
    position: relative;
}
.pwd-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.pwd-thumb-wrap .thumb-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-transform: translate(-50%, -50%);
    pointer-events: none;
}
.pwd-info {
    flex: 1;
    text-align: left;
    min-width: 0;
}
.pwd-info .pwd-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pwd-info .pwd-preview-sub {
    font-size: 12px;
    color: #ffb400;
    margin-top: 1px;
    font-weight: 500;
}
.pwd-info .pwd-preview-row {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #888;
    margin-top: 3px;
    -webkit-display: flex;
}
.pwd-info .pwd-preview-row .views {
    color: #fff;
    font-weight: 500;
}
.pwd-info .pwd-preview-row .duration {
    color: #888;
}

.pwd-no-thumb {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #0d0d1a;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 4px 0 12px;
    border: 1px solid #2a2a44;
    -webkit-display: flex;
}
.pwd-no-thumb .pwd-lock-box {
    flex-shrink: 0;
    width: 100px;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a1a3a, #0d0d2a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ffb400;
    border: 1px solid rgba(255, 180, 0, 0.08);
}
.pwd-no-thumb .pwd-no-info {
    flex: 1;
    text-align: left;
}
.pwd-no-thumb .pwd-big-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.pwd-no-thumb .pwd-big-sub {
    font-size: 12px;
    color: #ffb400;
    margin-top: 1px;
    font-weight: 500;
}

.pwd-get-btn {
    display: block;
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin: 4px 0 4px;
    transition: transform .15s, box-shadow .25s;
    text-align: center;
    box-shadow: 0 4px 16px rgba(255, 126, 0, 0.20);
}
.pwd-get-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 126, 0, 0.12);
    -webkit-transform: scale(0.97);
}
.pwd-hint {
    font-size: 11px;
    color: #888;
    margin: 0 0 8px;
}

.pwd-input-group {
    display: flex;
    gap: 8px;
    margin: 6px 0 4px;
    -webkit-display: flex;
}
#pwdInput {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #444;
    border-radius: 8px;
    background: #0d0d1a;
    color: #fff;
    font-size: 13px;
    transition: border-color .25s;
    -webkit-flex: 1;
}
#pwdInput::placeholder {
    color: #666;
}
#pwdInput:focus {
    outline: none;
    border-color: #ffaa00;
}
#pwdBtn {
    height: 40px;
    padding: 0 22px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .25s;
    box-shadow: 0 4px 16px rgba(255, 126, 0, 0.16);
}
#pwdBtn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(255, 126, 0, 0.10);
    -webkit-transform: scale(0.95);
}

.pwd-error {
    font-size: 11px;
    color: #ff4444;
    height: 16px;
    margin-bottom: 2px;
    opacity: 0;
    transition: opacity .2s;
}
.pwd-error.show {
    opacity: 1;
}

.pwd-unlock-tip {
    font-size: 12px;
    color: #ffb400;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #2a2a44;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    overflow: hidden;
    font-weight: 500;
}
.pwd-unlock-tip .tip-icon {
    font-size: 13px;
    animation: tipPulse 1.5s ease-in-out infinite;
}
@keyframes tipPulse {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}
.pwd-unlock-tip .tip-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.shake {
    animation: shake .35s ease;
    -webkit-animation: shake .35s ease;
}
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}
@-webkit-keyframes shake {
    0%,
    100% {
        -webkit-transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-4px);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(4px);
    }
}

.welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(6px);
}
.welcome-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.welcome-box {
    width: 340px;
    max-width: 92%;
    background: linear-gradient(145deg, #1a1a2e, #2a2a44);
    border-radius: 24px;
    padding: 30px 24px 24px;
    text-align: center;
    color: #fff;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,180,0,0.1);
    transform: scale(0.92);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.welcome-overlay.show .welcome-box {
    transform: scale(1);
}
.welcome-box .welcome-icon {
    font-size: 56px;
    margin-bottom: 10px;
    display: block;
}
.welcome-box .welcome-title {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffb400, #ff7e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}
.welcome-box .welcome-sub {
    font-size: 13px;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 4px;
}
.welcome-box .welcome-highlight {
    color: #ffb400;
    font-weight: 600;
}
.welcome-box .welcome-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 6px 0 10px;
}
.welcome-box .welcome-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 48px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px rgba(255,126,0,0.25);
}
.welcome-box .welcome-btn:active {
    transform: scale(0.94);
    box-shadow: 0 2px 12px rgba(255,126,0,0.15);
}

.success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(6px);
}
.success-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.success-box {
    width: 340px;
    max-width: 92%;
    background: linear-gradient(145deg, #1a1a2e, #2a2a44);
    border-radius: 24px;
    padding: 30px 24px 24px;
    text-align: center;
    color: #fff;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,180,0,0.15);
    transform: scale(0.92);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.success-overlay.show .success-box {
    transform: scale(1);
}
.success-box .success-icon {
    font-size: 52px;
    margin-bottom: 6px;
    display: block;
}
.success-box .success-title {
    font-size: 20px;
    font-weight: 700;
    color: #4caf50;
    margin-bottom: 8px;
}
.success-box .success-sub {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 12px;
}
.success-box .link-item {
    background: #0d0d1a;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.success-box .link-item .link-label {
    font-size: 13px;
    color: #ffb400;
    font-weight: 600;
    flex-shrink: 0;
}
.success-box .link-item .link-url {
    font-size: 12px;
    color: #6b9cff;
    word-break: break-all;
    text-align: left;
    flex: 1;
}
.success-box .link-item .link-copy {
    font-size: 12px;
    color: #fff;
    background: rgba(255,180,0,0.15);
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid rgba(255,180,0,0.2);
    transition: all 0.2s;
}
.success-box .link-item .link-copy:active {
    transform: scale(0.92);
    background: rgba(255,180,0,0.25);
}
.success-box .success-close {
    margin-top: 14px;
    padding: 8px 32px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 4px 16px rgba(255,126,0,0.2);
}
.success-box .success-close:active {
    transform: scale(0.94);
}

/* ===== 轮播样式 ===== */
.carousel-wrapper {
    width: 100%;
    padding: 10px 0px 4px 0px;
    background: var(--dark);
    overflow: hidden;
    position: relative;
}
.carousel-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.carousel-container::-webkit-scrollbar {
    display: none;
}
.carousel-item {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
    background: #2a2a44;
    position: relative;
    aspect-ratio: 16 / 8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.carousel-item:active {
    transform: scale(0.98);
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 20px;
    backdrop-filter: blur(4px);
    z-index: 5;
}
.carousel-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s, transform 0.3s;
    cursor: pointer;
}
.carousel-dots span.active {
    background: #ffb400;
    transform: scale(1.3);
}

.favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 60px;
    text-align: center;
    min-height: 60vh;
    animation: fadeUp 0.4s ease;
}
.favorites-empty .empty-icon-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2a2a44, #1a1a30);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
    position: relative;
}
.favorites-empty .empty-icon-wrapper .icon-bg {
    font-size: 56px;
    filter: drop-shadow(0 4px 12px rgba(255, 180, 0, 0.15));
    line-height: 1;
}
.favorites-empty .empty-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,180,0,0.06), transparent 70%);
    pointer-events: none;
}
.favorites-empty .empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.favorites-empty .empty-desc {
    font-size: 14px;
    color: #999;
    margin-bottom: 28px;
    line-height: 1.6;
    max-width: 280px;
}
.favorites-empty .browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    padding: 12px 36px 12px 28px;
    border-radius: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(255, 126, 0, 0.25);
    transition: transform 0.2s, box-shadow 0.25s;
    cursor: pointer;
    border: none;
    letter-spacing: 0.3px;
}
.favorites-empty .browse-btn:active {
    transform: scale(0.94);
    box-shadow: 0 3px 12px rgba(255, 126, 0, 0.15);
}
.favorites-empty .browse-btn .btn-icon {
    font-size: 22px;
    line-height: 1;
}
.favorites-empty .bottom-tags {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 20px 16px 28px;
    border-top: 1px solid #2a2a44;
    margin-top: 32px;
    background: transparent;
    width: 100%;
}
.favorites-empty .tag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s, transform 0.15s;
    padding: 4px 12px;
}
.favorites-empty .tag-item:active {
    transform: scale(0.92);
    color: #ffb400;
}
.favorites-empty .tag-item .tag-icon {
    font-size: 22px;
}
.favorites-empty .tag-item .tag-label {
    font-size: 11px;
    font-weight: 500;
}
.favorites-empty .tag-item.active {
    color: #ffb400;
}

.category-panel#favoritesPanel {
    display: none;
}
.category-panel#favoritesPanel.active {
    display: block;
}

/* ===== 空搜索提示弹窗 ===== */
.empty-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.empty-search-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.empty-search-box {
    width: 320px;
    max-width: 90%;
    background: linear-gradient(145deg, #1a1a2e, #2a2a44);
    border-radius: 24px;
    padding: 32px 24px 24px;
    text-align: center;
    color: #fff;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 180, 0, 0.1);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.empty-search-overlay.show .empty-search-box {
    transform: scale(1);
}
.empty-search-box .empty-icon {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
}
.empty-search-box .empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffb400;
    margin-bottom: 6px;
}
.empty-search-box .empty-desc {
    font-size: 14px;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 18px;
}
.empty-search-box .empty-btn {
    display: inline-block;
    padding: 10px 40px;
    background: linear-gradient(135deg, #ff7e00, #ffaa00);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px rgba(255, 126, 0, 0.25);
}
.empty-search-box .empty-btn:active {
    transform: scale(0.94);
    box-shadow: 0 2px 12px rgba(255, 126, 0, 0.15);
}