* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-color: #1989fa;
    --bg-color: #f7f8fa;
    --text-color: #323233;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

[v-cloak] {
    display: none;
}
.banner{
    background-color: #fff;
}
.banner img {
    width: 100%;
    display: block;
}

.main-container {
    min-height: 100vh;
    padding-bottom: 2.13333rem;
    position: relative;
    margin-top: 0.3rem;
    background-image: url('../images/BG.png');
    background-size: 100%;
    transition: background 0.3s ease;
   
}

.main-container.ranking-bg {
    background: url('../images/BG1.png') no-repeat top center;
    background-size: 100% auto;
}

.main-container.rules-bg {
    background: url('../images/BG2.png') no-repeat top center;
    background-size: 100% auto;
}

.tab-bar {
    position: absolute;
    top: 0px;
    left: 0;
    display: flex;
    height: 1.06667rem;
    width: 100%;
    z-index: 100;
}

.tab-item {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.37333rem; /* 14px */
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-item.active {
    color: #000;
    font-weight: 700;
    font-size: 0.4rem; /* 15px */
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0.08rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.66667rem;
    height: 0.08rem;
    background: linear-gradient(90deg, #2b82ff 0%, #1ab3ff 100%);
    border-radius: 0.05333rem;
    z-index: 30;
}

.custom-tabs{
    position: absolute;
    top: 1.54667rem;
    left: 0;
    width: 100%;
    
    background-color: #ddf0ff;
}

.tab-item span {
    position: relative;
    z-index: 2;
}

.tab-content {
    width: 100%;
    animation: fadeIn 0.3s ease-in-out;
     
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ranking-shell {
}

.rules-shell {
    padding: 0.4rem 0.6rem;
}

.category-filter {
    padding: 0 0.16rem;
    margin-bottom: 0.26667rem;
    width: 100%;
    background: #e6f4ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.10667rem;
}

.category-filter span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.13333rem 0;
    border-radius: 0.53333rem;
    background: #fff;
    /* Font Gradient for inactive state */
    background: linear-gradient(180deg, #2b82ff 0%, #1ab3ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1a94ff; 
    font-size: 0.32rem; /* 12px */
    border: 0.02667rem solid #1a94ff;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-filter span.active {
    background: linear-gradient(90deg, #2b82ff 0%, #1ab3ff 100%);
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
    border: 0.02667rem solid transparent;
    box-shadow: 0 0.05333rem 0.21333rem rgba(26, 148, 255, 0.2);
}

.hint-text {
    font-size: 0.32rem; /* 12px */
    color: 292929;
    text-align: left;
    padding: 0.26667rem 0.53333rem 0.32rem;
    opacity: 0.9;
    width: 100%;
    box-sizing: border-box;
    font-weight: 500;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.53333rem 0.26667rem; /* 增加行间距，为外部编号留出空间 */
    padding: 0.4rem 0.32rem 0.53333rem; /* 增加顶部内边距 */
    box-sizing: border-box;
    width: 100%;
   
    align-items: start;
}

.work-item {
    background: #fff;
    border-radius: 0.21333rem;
    overflow: visible; /* 必须改为 visible 才能让溢出的编号显示 */
    box-shadow: 0 0.05333rem 0.21333rem rgba(0,0,0,0.08);
    border: none;
    padding: 0.16rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    position: relative; /* 为外部编号提供定位参考 */
}

.work-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* 强制比例，避免变形 */
    background: #f0f0f0;
    border-radius: 0.10667rem;
    overflow: hidden;
}

.work-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 居中裁剪，不拉伸 */
    display: block;
}

.work-id {
    position: absolute;
    top: -0.21333rem; /* 向上移动到卡片外部 */
    left: -0.10667rem; /* 向左轻微偏移 */
    background: linear-gradient(135deg, #4facfe 0%, #0088ff 100%);
    color: #fff;
    padding: 0.08rem 0.21333rem;
    border-radius: 0.21333rem 0.05333rem 0.26667rem 0.05333rem; /* 调整圆角，使其在外部看起来更自然 */
    font-size: 0.32rem;
    z-index: 10; /* 确保在最上层 */
    box-shadow: 0 0.05333rem 0.10667rem rgba(0,0,0,0.2);
    font-weight: bold;
}

.zoom-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.64rem;
    height: 0.64rem;
    background: rgba(0,0,0,0.4); /* 深色半透明背景 */
    border-radius: 0 0 0 0.26667rem; /* 左下圆角，其余直角对齐角落 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.share-icon {
    position: absolute;
    top: 0.08rem;
    right: 0.74667rem; /* 0.64rem (zoom width) + 0.10667rem (gap) */
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    padding: 0.05333rem; /* 2px */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.share-icon .van-icon {
    font-size: 0.32rem !important; /* 12px */
    color: #fff !important;
}

.work-item.highlight {
    box-shadow: 0 0 15px #409eff;
    transform: scale(1.02);
    transition: all 0.3s;
}

.zoom-icon img, .zoom-icon i, .zoom-icon .van-icon {
    font-size: 0.37333rem !important;
    color: #fff !important;
}

.work-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.32rem; /* 12px */
    padding: 0.10667rem 0.16rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.work-info {
    padding: 0.32rem 0.16rem 0.16rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.21333rem;
}

.work-votes {
    color: #1a94ff;
    font-weight: 800;
    font-size: 0.42667rem; /* 16px */
    margin: 0;
}

.vote-btn {
    width: 100%;
    height: 0.85333rem;
    line-height: 0.85333rem;
    border-radius: 0.42667rem;
    font-size: 0.37333rem; /* 14px */
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #4facfe 0%, #0088ff 100%);
    border: none;
    box-shadow: 0 0.05333rem 0.16rem rgba(26, 148, 255, 0.3);
}

/* Ranking Styles Update */
.ranking-category-filter {
    padding: 0 0.16rem;
    margin-bottom: 0.4rem;
    width: 100%;
    background: #e6f4ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.10667rem;
}

.ranking-category-filter span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.13333rem 0;
    border-radius: 0.53333rem;
    background: #fff;
    /* Font Gradient for inactive state */
    background: linear-gradient(180deg, #2b82ff 0%, #1ab3ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1a94ff; 
    font-size: 0.32rem; /* 12px */
    border: 0.02667rem solid #1a94ff;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-category-filter span.active {
    background: linear-gradient(90deg, #2b82ff 0%, #1ab3ff 100%);
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
    border: 0.02667rem solid transparent;
    box-shadow: 0 0.05333rem 0.21333rem rgba(26, 148, 255, 0.2);
}

.ranking-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 1.6rem 0.2rem 0.4rem;
    gap: 0.13333rem;
    margin-bottom: 0.4rem;
}

.rank-card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 文字向上对齐 */
    padding-top: 1.7rem; /* 调整起始位置，靠近头像/角标 */
    padding-bottom: 0.2rem;
    box-sizing: border-box;
}

.rank-1 {
    background: url('../images/1-bg.png') no-repeat center;
    background-size: 100% 100%;
    height: 4.0rem;
    z-index: 2;
    margin-bottom: 0.4rem; /* 第一名底部上移，保持最高 */
}

.rank-2 {
    background: url('../images/2-bg.png') no-repeat center;
    background-size: 100% 100%;
    height: 3.4rem;
    z-index: 1;
    margin-bottom: 0; /* 第二名底部对齐 */
}

.rank-3 {
    background: url('../images/3-bg.png') no-repeat center;
    background-size: 100% 100%;
    height: 3.4rem;
    z-index: 1;
    margin-bottom: 0; /* 第三名底部对齐 */
}

.rank-avatar-wrapper {
    position: absolute;
    top: -1.1rem; /* 头像一半在卡片外 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.avatar-circle {
    width: 2.13333rem;
    height: 2.13333rem;
    border-radius: 50%;
    border: 0.10667rem solid #fff;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0.05333rem 0.26667rem rgba(0,0,0,0.1);
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crown {
    position: absolute;
    top: -0.4rem;
    left: -0.26667rem;
    width: 0.8rem;
    height: 0.8rem;
    z-index: 11;
    transform: rotate(-15deg);
}

.crown img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rank-badge {
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.93333rem;
    height: 0.93333rem;
    z-index: 12;
}

.rank-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rank-info {
    width: 100%;
    text-align: center;
    padding: 0 0.13333rem;

}

.rank-name {
    font-size: 0.34667rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.2rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-votes {
    color: #1989fa;
    font-weight: bold;
    font-size: 0.4rem;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center;
    gap: 0.05333rem;
    line-height: 1; /* 统一行高，避免干扰对齐 */
}

.flame-img {
    width: 0.4rem;
    height: 0.4rem;
    object-fit: contain;
    display: block; /* 改为 block 以配合 flex 居中 */
}

.other-ranks {
    margin-top: 0.4rem;
}

.other-rank-card {
    background: #fff;
    border-radius: 0.32rem;
    padding: 0.32rem 0.4rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.26667rem;
    box-shadow: 0 0.05333rem 0.16rem rgba(0,0,0,0.03);
}

.other-rank-num {
    font-size: 0.48rem;
    font-weight: bold;
    color: #1989fa;
    width: 0.8rem;
}

.other-rank-avatar {
    width: 1.06667rem;
    height: 1.06667rem;
    border-radius: 50%;
    overflow: hidden;
    background: #eef4ff;
    margin-right: 0.32rem;
}

.other-rank-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.other-rank-info {
    flex: 1;
}

.other-rank-title {
    font-size: 0.37333rem;
    color: #333;
}

.other-rank-votes {
    display: flex;
    align-items: center;
    color: #1989fa;
    font-weight: bold;
}

.other-rank-votes .vote-num {
    font-size: 0.4rem;
}

.rules-content {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.rule-item {
    margin-bottom: 0.8rem;
}

.rule-item h3 {
    font-size: 0.48rem;
    color: #1989fa;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.rule-item h3::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.14rem 0 0.14rem 0.22rem;
    border-color: transparent transparent transparent #1989fa;
    margin-right: 0.25rem;
}

.rule-item p {
    font-size: 0.4rem;
    color: #333;
    line-height: 1.7;
    margin-bottom: 0.15rem;
    text-align: justify;
    padding-left: 0.45rem;
}

.rule-item p strong {
    font-weight: bold;
    display: block;
    margin-top: 0.2rem;
}

.custom-consent-dialog {
    border-radius: 0.53333rem !important;
    overflow: hidden !important;
    width: 85% !important;
    background: url('../images/modal-bg.png') no-repeat center !important;
    background-size: 100% 100% !important;
}

.custom-consent-dialog .van-dialog__content {
    padding: 0 !important;
}

.consent-header {
    height: 1.6rem;
    background: transparent;
}

.consent-body {
    padding: 0.4rem 0.66667rem 0.53333rem;
    background: transparent;
}

.consent-text {
    font-size: 0.45rem;
    line-height: 1.6;
    color: #333;
    text-align: justify;
    margin-bottom: 0.66667rem;
    font-weight: 500;
}

.consent-btns {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.53333rem;
}

.btn-refuse, .btn-agree {
    flex: 1;
    height: 1.17333rem;
    border: none;
    border-radius: 0.58667rem;
    font-size: 0.42667rem;
    font-weight: bold;
    cursor: pointer;
}

.btn-refuse {
    background: #c0c0c0;
    color: #fff;
}

.btn-agree {
    background: linear-gradient(90deg, #40a9ff 0%, #1890ff 100%);
    color: #fff;
    box-shadow: 0 0.10667rem 0.26667rem rgba(24, 144, 255, 0.3);
}

.consent-footer {
    font-size: 0.26667rem;
    color: #666;
    text-align: center;
    margin-top: 0.2rem;
}

/* Voting Ended Dialog */
.voting-ended-dialog {
    border-radius: 0.26667rem !important;
    overflow: hidden !important;
    width: 70% !important;
    background: #fff !important;
}

.voting-ended-dialog .van-dialog__content {
    padding: 0 !important;
}

.voting-ended-body {
    padding: 0.8rem 0.53333rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #a8e6ff 0%, #e8f9ff 100%);
}

.voting-ended-text {
    font-size: 0.48rem;
    line-height: 1.8;
    color: #333;
    text-align: center;
    margin-bottom: 0.66667rem;
    font-weight: 500;
}

.btn-confirm {
    width: 60%;
    height: 1.06667rem;
    border: none;
    border-radius: 0.53333rem;
    font-size: 0.42667rem;
    font-weight: bold;
    cursor: pointer;
    background: linear-gradient(90deg, #40a9ff 0%, #1890ff 100%);
    color: #fff;
    box-shadow: 0 0.10667rem 0.26667rem rgba(24, 144, 255, 0.3);
}