.dvr-vip-container {
    max-width: 720px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif;
}

.dvr-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 24px;
    color: #fff;
}

.dvr-card {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    color: #eee;
}

.dvr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dvr-tier-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
}
.dvr-tier-none { background: #444; color: #aaa; }
.dvr-tier-bronze { background: linear-gradient(135deg, #8B4513, #CD7F32); color: #fff; }
.dvr-tier-silver { background: linear-gradient(135deg, #808080, #C0C0C0); color: #fff; }
.dvr-tier-gold   { background: linear-gradient(135deg, #B8860B, #FFD700); color: #000; }
.dvr-tier-diamond{ background: linear-gradient(135deg, #4169E1, #B0E0E6); color: #fff; }
.dvr-tier-legend { background: linear-gradient(135deg, #8B0000, #FF4500); color: #fff; }

.dvr-lifetime, .dvr-monthly-amount {
    font-size: 14px;
    color: #bbb;
}

.dvr-progress-wrap {
    margin-top: 8px;
}
.dvr-progress-bar {
    height: 14px;
    background: #222;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.dvr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 7px;
    transition: width 0.8s ease;
}
.dvr-progress-monthly {
    background: linear-gradient(90deg, #FF9800, #FFC107);
}
.dvr-progress-caption {
    font-size: 13px;
    color: #ccc;
    margin-top: 8px;
}
.dvr-progress-caption strong {
    color: #FFD700;
}

.dvr-maxed {
    text-align: center;
    font-size: 16px;
    color: #FFD700;
    margin: 12px 0;
}

.dvr-wheel-card h3, .dvr-coupons-card h3 {
    color: #fff;
    margin-bottom: 12px;
}

.dvr-spins-available {
    text-align: center;
    font-size: 18px;
    margin-bottom: 16px;
}
.dvr-spins-available strong {
    font-size: 28px;
    color: #FFD700;
}
.dvr-spins-meta {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.dvr-wheel-stage {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 16px;
}
.dvr-wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 24px solid #FFD700;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.dvr-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #4CAF50 0deg 60deg,
        #FF9800 60deg 120deg,
        #4CAF50 120deg 180deg,
        #E91E63 180deg 240deg,
        #4CAF50 240deg 300deg,
        #FF9800 300deg 360deg
    );
    border: 6px solid #FFD700;
    box-shadow: 0 0 30px rgba(255,215,0,0.3);
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.dvr-slice {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}
.dvr-slice-5-a  { transform: translate(-50%, -50%) rotate(30deg)  translateY(-90px) rotate(-30deg); }
.dvr-slice-10-a { transform: translate(-50%, -50%) rotate(90deg)  translateY(-90px) rotate(-90deg); }
.dvr-slice-5-b  { transform: translate(-50%, -50%) rotate(150deg) translateY(-90px) rotate(-150deg); }
.dvr-slice-15   { transform: translate(-50%, -50%) rotate(210deg) translateY(-90px) rotate(-210deg); color: #FFD700; font-size: 22px; }
.dvr-slice-5-c  { transform: translate(-50%, -50%) rotate(270deg) translateY(-90px) rotate(-270deg); }
.dvr-slice-10-b { transform: translate(-50%, -50%) rotate(330deg) translateY(-90px) rotate(-330deg); }

.dvr-btn-spin {
    display: block;
    margin: 0 auto;
    padding: 14px 48px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #000;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,215,0,0.4);
    transition: transform 0.2s;
}
.dvr-btn-spin:hover:not(:disabled) {
    transform: translateY(-2px);
}
.dvr-btn-spin:disabled {
    background: #555;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}

.dvr-spin-result {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255,215,0,0.15);
    border: 2px solid #FFD700;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    color: #FFD700;
    font-weight: bold;
}

.dvr-coupon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dvr-coupon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    transition: all 0.2s;
}
.dvr-coupon-selected {
    border-color: #FFD700;
    background: rgba(255,215,0,0.1);
}
.dvr-coupon-pct {
    flex-shrink: 0;
    width: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFD700;
}
.dvr-coupon-info { flex: 1; }
.dvr-coupon-cap { font-size: 14px; color: #eee; }
.dvr-coupon-expires { font-size: 12px; color: #aaa; margin-top: 4px; }
.dvr-coupon-select {
    padding: 8px 14px;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.dvr-coupon-select:hover { background: #555; }
.dvr-coupon-selected .dvr-coupon-select { background: #FFD700; color: #000; }

.dvr-coupon-note {
    margin-top: 10px;
    font-size: 12px;
    color: #e67700;
    text-align: center;
}
.dvr-empty {
    text-align: center;
    color: #888;
    padding: 20px 0;
}
.dvr-btn-clear-coupon {
    margin-top: 10px;
    padding: 6px 14px;
    background: transparent;
    color: #aaa;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}