* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft Yahei", sans-serif;}
body {display: flex;height: 100vh;overflow: hidden;background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%);}
.left-panel {width: 40%;height: 100%;background: rgba(18, 18, 18, 0.95);padding: 25px;overflow-y: auto;border-right: 1px solid #333;box-shadow: 2px 0 20px rgba(0,0,0,0.5);}
.left-panel::-webkit-scrollbar {width: 8px;}
.left-panel::-webkit-scrollbar-track {background: #1a1a1a;border-radius: 4px;}
.left-panel::-webkit-scrollbar-thumb {background: #333;border-radius: 4px;}
.left-panel::-webkit-scrollbar-thumb:hover {background: #ff6700;}
.search-box {width: 100%;margin-bottom: 25px;position: relative;}
.search-input {width: 100%;padding: 12px 15px 12px 40px;border: 1px solid #333;border-radius: 8px;font-size: 14px;transition: border-color 0.2s, box-shadow 0.2s;background: #222;color: #fff;}
.search-input:focus {outline: none;border-color: #ff6700;box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.2);}
.search-icon {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: #999;font-size: 16px;}
.video-list {display: grid;grid-template-columns: repeat(2, 1fr);margin-bottom: 25px;}
.video-item {background: #1f1f1f;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 12px rgba(0,0,0,0.3);cursor: pointer;transition: all 0.3s ease;position: relative;border: 1px solid #333;}
.video-item:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0,0,0,0.4);border-color: #ff6700;}
.video-img-container {width: 100%;height: 120px;overflow: hidden;position: relative;}
.video-img {width: 100%;height: 100%;object-fit: cover;transition: filter 0.3s ease;}
.img-blur .video-img {filter: blur(8px);}
.blur-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);display: flex;align-items: center;justify-content: center;color: white;font-size: 14px;opacity: 0;transition: opacity 0.3s ease;}
.video-item:hover .blur-mask {opacity: 1;}
.video-name {padding: 10px;font-size: 13px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #eee;}
.pagination {display: flex;justify-content: center;align-items: center;gap: 12px;margin-top: 15px;/*position: sticky;*/bottom: 0;background: rgba(18, 18, 18, 0.95);padding: 10px 0;border-radius: 8px;}
.page-btn {padding: 8px 20px;border: 1px solid #333;border-radius: 8px;background: #222;cursor: pointer;transition: all 0.2s;font-size: 14px;color: #eee;}
.page-btn:hover:not(:disabled) {border-color: #ff6700;color: #ff6700;background: #2a2a2a;}
.page-btn:disabled {background: #1a1a1a;cursor: not-allowed;color: #666;border-color: #333;}
.page-info {font-size: 14px;color: #ccc;padding: 0 10px;}
.right-panel {width: 60%;height: 100%;display: flex;flex-direction: column;padding: 20px;background: linear-gradient(135deg, #0f0f0f 0%, #191919 50%, #252525 100%);position: relative;}
.right-panel::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at center, rgba(255,103,0,0.05) 0%, transparent 70%);pointer-events: none;}
.video-title-bar {height: 60px;display: flex;align-items: center;justify-content: center;background: rgba(18, 18, 18, 0.9);border-radius: 10px;margin-bottom: 15px;padding: 0 20px;border: 1px solid #333;}
.video-title-text {color: #eee;font-size: 18px;font-weight: bold;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.player-container {flex: 1;background: #000;border-radius: 15px;display: flex;align-items: center;justify-content: center;overflow: hidden;box-shadow: 0 10px 40px rgba(0,0,0,0.5);position: relative;border: 1px solid #333;}
.video-js {width: 100%;height: 100%;}
.vjs-control-bar {background: rgba(0,0,0,0.7) !important;}
.unlock-btn {padding: 20px 50px;background: linear-gradient(to right, #ff6700, #ff8a33);color: white;border: none;border-radius: 10px;font-size: 22px;cursor: pointer;transition: all 0.3s;box-shadow: 0 6px 20px rgba(255, 103, 0, 0.4);font-weight: bold;}
.unlock-btn:hover {transform: translateY(-3px);box-shadow: 0 10px 25px rgba(255, 103, 0, 0.5);background: linear-gradient(to right, #e55a00, #ff7a1a);}
.package-modal-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.85);display: none;align-items: center;justify-content: center;z-index: 1000;backdrop-filter: blur(10px);}
.package-modal-content {width: 550px;background: #1f1f1f;border-radius: 15px;padding: 30px;box-shadow: 0 15px 50px rgba(0,0,0,0.6);position: relative;transform: scale(0.9);opacity: 0;transition: all 0.3s ease;border: 1px solid #333;}
.package-modal-mask.show .package-modal-content {transform: scale(1);opacity: 1;}
.usdt-modal-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.85);display: none;align-items: center;justify-content: center;z-index: 1001;backdrop-filter: blur(10px);}
.usdt-modal-content {width: 550px;background: #1f1f1f;border-radius: 15px;padding: 30px;box-shadow: 0 15px 50px rgba(0,0,0,0.6);position: relative;transform: scale(0.9);opacity: 0;transition: all 0.3s ease;border: 1px solid #333;}
.usdt-modal-mask.show .usdt-modal-content {transform: scale(1);opacity: 1;}
.modal-title {font-size: 22px;font-weight: bold;margin-bottom: 20px;text-align: center;color: #eee;position: relative;}
.modal-title::after {content: '';display: block;width: 80px;height: 3px;background: linear-gradient(to right, #ff6700, #ff8a33);margin: 15px auto 0;border-radius: 3px;}
.card-list {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;margin-bottom: 20px;}
.card-item {padding: 20px;border: 2px solid #333;border-radius: 12px;cursor: pointer;transition: all 0.3s;position: relative;background: #222;display: flex;flex-direction: column;align-items: center;text-align: center;}
.card-item:hover {border-color: #ff6700;background: #2a2a2a;transform: translateY(-5px);}
.card-item.active {border-color: #ff6700;background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);box-shadow: 0 0 20px rgba(255,103,0,0.2);}
.card-item.active::after {content: '✓';position: absolute;top: 15px;right: 15px;color: #ff6700;font-size: 24px;font-weight: bold;}
.card-name {font-size: 18px;font-weight: bold;color: #eee;margin-bottom: 8px;}
.card-price {color: #ff6700;font-size: 16px;font-weight: 500;}
.card-desc {color: #999;font-size: 12px;margin-top: 8px;}
.usdt-pay-area {margin: 20px 0;text-align: center;}
.usdt-qrcode {width: 200px;height: 200px;margin: 0 auto 15px;border: 2px solid #333;border-radius: 10px;padding: 10px;background: #fff;}
.usdt-qrcode img {width: 100%;height: 100%;object-fit: contain;}
.usdt-address {background: #222;padding: 10px;border-radius: 8px;margin: 10px 0;color: #eee;font-size: 14px;word-break: break-all;border: 1px solid #333;}
.copy-btn {padding: 8px 15px;background: #222;border: 1px solid #ff6700;color: #ff6700;border-radius: 6px;cursor: pointer;margin-top: 10px;transition: all 0.2s;}
.copy-btn:hover {background: #ff6700;color: #fff;}
.usdt-amount {color: #ff6700;font-size: 18px;font-weight: bold;margin: 15px 0;}
.check-pay-btn {width: 100%;padding: 12px;background: #222;border: 1px solid #ff6700;color: #ff6700;border-radius: 8px;cursor: pointer;margin-top: 15px;transition: all 0.2s;}
.check-pay-btn:hover {background: #ff6700;color: #fff;}
.pay-btn {width: 100%;padding: 15px;background: linear-gradient(to right, #ff6700, #ff8a33);color: white;border: none;border-radius: 10px;font-size: 18px;cursor: pointer;transition: all 0.3s;box-shadow: 0 6px 20px rgba(255, 103, 0, 0.3);font-weight: bold;}
.pay-btn:hover {background: linear-gradient(to right, #e55a00, #ff7a1a);box-shadow: 0 8px 25px rgba(255, 103, 0, 0.4);transform: translateY(-2px);}
.close-modal {position: absolute;top: 15px;right: 15px;font-size: 24px;cursor: pointer;color: #999;transition: color 0.2s, background 0.2s;width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.close-modal:hover {color: #ff6700;background: #2a2a2a;}
.toast {position: fixed;top: 20px;left: 50%;transform: translateX(-50%) translateY(-100px);background: rgba(0,0,0,0.9);color: white;padding: 12px 24px;border-radius: 8px;font-size: 14px;z-index: 1001;opacity: 0;transition: all 0.3s ease;box-shadow: 0 4px 12px rgba(0,0,0,0.4);border: 1px solid #333;}
.toast.show {transform: translateX(-50%) translateY(0);opacity: 1;}
.loading {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);display: flex;align-items: center;justify-content: center;z-index: 9999;flex-direction: column;}
.loading-spinner {width: 60px;height: 60px;border: 6px solid #333;border-top: 6px solid #ff6700;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 20px;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
.loading-text {color: #ccc;font-size: 18px;}
@media (max-width: 768px) {
body {flex-direction: column !important;padding: 0 !important;margin: 0 !important;}
.right-panel {width: 100% !important;order: 1 !important;padding: 0 !important;margin: 0 !important;}
.left-panel {width: 100% !important;order: 2 !important;margin-top: 10px !important;padding: 0 5px !important;box-sizing: border-box !important;display: flex !important;flex-direction: column !important;}
.search-box {margin-bottom: 10px !important;}
.video-list {flex: 1 !important;margin-bottom: 15px !important;}
.player-container {height: 250px !important;width: 100% !important;}
.player-container video {height: 100% !important;width: 100% !important;}
.unlock-btn {background-color: #2c3e50 !important;color: #ffffff !important;border: none !important;border-radius: 8px !important;font-size: 14px !important;font-weight: bold !important;cursor: pointer !important;display: flex !important;justify-content: center !important;align-items: center !important;gap: 8px !important;transition: background-color 0.3s ease !important;margin: 0 auto !important;}
.unlock-btn:hover {background-color: #34495e !important;}
.unlock-btn i {font-size: 18px !important;}
.video-name {font-size: inherit !important;display: inherit !important;white-space: inherit !important;}
.pagination {position: relative !important;float: none !important;margin-top: auto !important;margin-bottom: 15px !important;z-index: 10 !important;display: flex !important;justify-content: center !important;align-items: center !important;gap: 10px !important;width: 100% !important;padding: 5px 0 !important;box-sizing: border-box !important;}
.page-btn {padding: 5px 10px !important;display: inline-block !important;}
.page-info {display: inline-block !important;padding: 0 5px !important;}
.video-title-bar {height: 60px;display: flex;align-items: center;justify-content: center;background: rgba(18, 18, 18, 0.9);border-radius: 10px;margin-bottom: 15px;padding: 0 20px;border: 1px solid #333;}
.video-title-text {color: #eee;font-size: 18px;font-weight: bold;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.player-container {flex: 1;background: #000;border-radius: 15px;display: flex;align-items: center;justify-content: center;overflow: hidden;box-shadow: 0 10px 40px rgba(0,0,0,0.5);position: relative;border: 1px solid #333;}
@keyframes scrollText {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}}
}