page {
    background: #F4F6F0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.level-detail-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header-card {
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
    padding: 60rpx 40rpx;
    color: white;
    text-align: center;
    border-radius: 0 0 40rpx 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(44, 62, 80, 0.2);
    margin-bottom: 40rpx;
    flex-shrink: 0;
}

.header-title {
    font-size: 28rpx;
    opacity: 0.8;
    margin-bottom: 12rpx;
}

.header-value {
    font-size: 64rpx;
    font-weight: 800;
}

.timeline-scroll {
    flex: 1;
    overflow-y: auto;
}

.timeline {
    padding: 0 40rpx;
}

.timeline-item {
    display: flex;
    position: relative;
    min-height: 140rpx;
}

.timeline-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60rpx;
    margin-right: 20rpx;
}

.dot-line-top, .dot-line-bottom {
    width: 4rpx;
    background: #E0E0E0;
    flex: 1;
}

.timeline-item:first-child .dot-line-top {
    visibility: hidden;
}

.timeline-item:last-child .dot-line-bottom {
    visibility: hidden;
}

.status-dot {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8rpx 0;
    z-index: 1;
    flex-shrink: 0;
}

.timeline-item.active .status-dot {
    background: #4CAF50;
    box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.2);
}

/* Logic for lines:
   The top line of THIS item should be green if THIS item is active.
   Wait, if item 2 is active, item 1 is also active.
   Line connecting 1 and 2 is bottom of 1 and top of 2.
   If 2 is active, top of 2 is green.
   If 1 is active, bottom of 1 is green?
   Easier: make lines background #E0E0E0.
   Use a pseudo element or simply rely on active class.
*/

.timeline-item.active .dot-line-top {
    background: #4CAF50;
}

/* If next item is active, make this item's bottom line green */
/* CSS cannot select based on next sibling easily without :has */
/* So just color top line of active item green. Bottom line stays gray? No. */
/* Just color all lines of active items green, EXCEPT the line connecting active to inactive. */
/* For simplicity, let's keep lines gray or improve logic. */
/* If I color .timeline-item.active .dot-line-bottom green, then if next is NOT active, it looks weird. */
/* Correct way: .timeline-item.active .dot-line-top is Green. */

.timeline-content {
    flex: 1;
    padding-bottom: 40rpx;
}

.level-card {
    background: white;
    border-radius: 20rpx;
    padding: 24rpx;
    border: 2rpx solid transparent;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
}

.level-card.current {
    border-color: #4CAF50;
    background: #F1F8E9;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
}

.card-lv {
    background: #eceff1;
    color: #546e7a;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    font-weight: 700;
    margin-right: 16rpx;
}

.timeline-item.active .card-lv {
    background: #4CAF50;
    color: white;
}

.card-title {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
}

.flex-spacer {
    flex: 1;
}

.card-sun {
    font-size: 24rpx;
    color: #999;
    font-weight: 600;
}

.card-perks {
    font-size: 26rpx;
    color: #666;
    line-height: 1.4;
    padding-top: 16rpx;
    border-top: 2rpx dashed #eee;
}

.level-card.current .card-perks {
    border-top-color: rgba(76, 175, 80, 0.2);
    color: #388E3C;
}