* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft Yahei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
a {text-decoration: none;color: inherit;}
a:hover,a:active,a:focus {text-decoration: none;}
body {background-color: #f5f5f5;color: #333;line-height: 1.5;overflow-x: hidden;}
.header {background-color: #fff;box-shadow: 0 2px 8px rgba(0,0,0,0.1);padding: 10px 0;position: sticky;top: 0;z-index: 999;}
.header-container {max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 0 15px;}
.logo {font-size: 20px;font-weight: bold;color: #333;}
.nav {display: flex;gap: 20px;}
.nav a {text-decoration: none;color: #333;font-size: 14px;cursor: pointer;transition: color 0.3s;}
.nav a:hover {color: #007bff;}
.category {max-width: 1200px;margin: 15px auto;padding: 0 15px;}
.category-tabs {display: flex;gap: 10px;overflow-x: auto;padding: 10px 0;scroll-behavior: smooth;-ms-overflow-style: none;scrollbar-width: none;padding-bottom: 10px;}
.category-tabs::-webkit-scrollbar {display: none;}
.tab-btn {padding: 8px 15px;background-color: #f5f5f5;border: none;border-radius: 20px;cursor: pointer;font-size: 14px;flex-shrink: 0;transition: all 0.3s;white-space: nowrap;}
.tab-btn.active {background-color: #007bff;color: #fff;border-color: #007bff;}
.tab-btn:hover:not(.active) {border-color: #007bff;color: #007bff;}
.search-area {max-width: 1200px;margin: 0 auto 20px;padding: 0 15px;}
.search-wrapper {display: flex;gap: 10px;}
.search-input {flex: 1;padding: 12px 15px;border: 1px solid #e0e0e0;border-radius: 4px;font-size: 14px;outline: none;}
.search-input:focus {border-color: #007bff;}
.search-btn {padding: 12px 20px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}
.search-btn:hover {background-color: #0056b3;}
.carousel-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;border-radius: 50%;background-color: rgba(255,255,255,0.8);border: 1px solid #e0e0e0;display: flex;justify-content: center;align-items: center;cursor: pointer;z-index: 10;font-size: 18px;color: #333;transition: all 0.3s;box-shadow: 0 2px 8px rgba(0,0,0,0.1);opacity: 1;pointer-events: auto;}
.carousel-arrow.disabled {opacity: 0.3;pointer-events: none;}
.carousel-arrow:hover:not(.disabled) {background-color: #007bff;color: #fff;border-color: #007bff;}
.arrow-left {left: 20px;}
.arrow-right {right: 20px;}
.product-name {font-size: 14px;font-weight: 500;margin-bottom: 0;color: #333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.product-price {font-size: 16px;color: #e53935;font-weight: bold;margin-bottom: 0;}
.product-meta {display: flex;gap: 15px;font-size: 12px;justify-content: space-between;color: #666;margin-bottom: 0;}
.buy-btn {width: 100%;padding: 8px 0;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;transition: background-color 0.3s;margin-top: auto;}
.buy-btn:hover {background-color: #218838;}
.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none; justify-content: center;align-items: center;z-index: 1000;padding: 15px;}
.buy-modal, .notice-modal, .order-modal, .buy-usdt-modal, .detail-modal, .check-usdt-modal {background-color: #fff;border-radius: 8px;width: 90%;max-width: 500px;padding: 0;position: relative;max-height: 90vh;overflow-y: auto;}
.close-modal {position: absolute;top: 15px;right: 15px;font-size: 20px;cursor: pointer;color: #666;transition: color 0.3s;}
.close-modal:hover {color: #e74c3c;}
.modal-title {font-size: 18px;font-weight: 500;margin-bottom: 0;color: #2c3e50;text-align: left;padding: 15px;border-bottom: 1px solid #eee;box-sizing: border-box; max-height: 80px; line-height: 21.6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.modal-content {font-size: 14px;padding: 15px;}
.product-detail {margin: 10px 0;padding: 10px;background-color: #f8f9fa;border-radius: 4px;color: #666;max-height: 50px;overflow: hidden;position: relative;line-height: 1.5;font-size: 14px;}
.product-stock-sales {display: flex;gap: 20px;margin: 10px 0;padding: 8px;background-color: #f5f5f5;border-radius: 4px;font-size: 14px;justify-content: space-between;}
.product-stock-sales > div {width: 31%;text-align: center;padding: 5px;background: #f5f5f5;border-radius: 4px;}
.stock-item, .sales-item, .view-item {display: flex;align-items: center;gap: 5px;justify-content: center;}
.stock-icon, .sales-icon, .view-icon {color: #007bff;}
.detail-expand-btn {display: none;width: 100%;padding: 8px 0;background: #f5f5f5;border: 1px solid #ddd;border-radius: 4px;text-align: center;cursor: pointer;font-size: 14px;color: #007bff;margin-top: 5px;}
.quantity-price-wrapper {display: flex;justify-content: space-between;align-items: center;margin: 15px 0;gap: 15px;}
.quantity-wrapper {display: flex;align-items: center;gap: 8px;width: auto;justify-content: flex-start;}
.quantity-label {font-size: 14px;color: #333;}
.quantity-controls {display: flex;align-items: center;height: 32px;gap: 0; }
.quantity-btn {width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;background-color: #f5f5f5;cursor: pointer;transition: all 0.3s;border: 1px solid #ddd;font-size: 16px;flex-shrink: 0;}
.quantity-btn.minus-btn {border-right: none;border-radius: 4px 0 0 4px;}
.quantity-btn.plus-btn {border-left: none;border-radius: 0 4px 4px 0;}
.quantity-btn:hover {background-color: #007bff;color: #fff;}
.quantity-btn:disabled {background-color: #eee;color: #999;cursor: not-allowed;opacity: 0.5;}
.quantity-input {width: 60px;height: 30px;padding: 0;text-align: center;border: 1px solid #ddd;outline: none;font-size: 14px;}
.total-price {font-size: 16px;color: #e53935;font-weight: bold;white-space: nowrap;}
.email-wrapper {margin: 15px 0;}
.email-label {display: block;margin-bottom: 5px;font-weight: 500;font-size: 14px;color: #333;}
.email-input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;outline: none;font-size: 14px;}
.email-input:focus {border-color: #007bff;}
.email-tip {font-size: 12px;color: #666;margin-top: 5px;}
.payment-methods {margin: 15px 0;}
.payment-title {font-weight: 500;margin-bottom: 10px;font-size: 14px;}
.payment-list {display: flex;gap: 10px;flex-wrap: wrap;padding-bottom: 5px;}
.payment-item {display: flex;align-items: center;gap: 5px;padding: 8px 15px;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: all 0.3s;flex: 1;min-width: 120px;justify-content: center;}
.payment-item.active {border-color: #007bff;background: rgba(0,123,255,0.1);}
.payment-item:hover:not(.active) {border-color: #007bff;}
.payment-icon {width: 20px;height: 20px;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;font-size: 16px;color: #fff;}
.wechat-icon {background-image: url('/css/wx.png');background-repeat: no-repeat;background-position: center center;background-size: contain;width: 20px;height: 20px;}
.alipay-icon {background-image: url('/css/alipay.png');background-repeat: no-repeat;background-position: center center;background-size: contain;width: 20px;height: 20px;}
.usdt-icon {background-image: url('/css/USDT_TRC20.png');background-repeat: no-repeat;background-position: center center;background-size: contain;width: 20px;height: 20px;}
.payment-name {font-size: 12px;}
.confirm-btn {width: 100%;padding: 12px 0;background-color: #007bff;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;margin-top: 10px;display: flex;justify-content: center;align-items: center;gap: 8px;}
.confirm-btn:hover {background-color: #0056b3;}
.pay-icon-bg {width: 20px;height: 20px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.notice-content {line-height: 1.8;color: #555;}
.notice-content p {margin-bottom: 10px;}
.order-content {line-height: 1.8;}
.order-input-wrapper {margin: 15px 0;}
.order-label {display: block;margin-bottom: 5px;font-weight: 500;font-size: 14px;color: #333;}
.order-result {margin: 20px 0;padding: 15px;border-radius: 4px;display: none;box-sizing: border-box;}
.result-success {border: 1px solid #e1f3d8;background: #f0f9eb;color: #67c23a;}
.result-error {border: 1px solid #fef0f0;background: #fef7f7;color: #f56c6c;}
.order-info-item {margin-bottom: 10px;font-size: 14px;line-height: 1.6;}
.order-info-item:last-child {margin-bottom: 0;}
.order-info-label {display: inline-block;width: 80px;color: #666;}
.order-info-value {color: #333;}
.order-input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;outline: none;font-size: 14px;}
.order-input:focus {border-color: #007bff;}
.order-tip {font-size: 12px;color: #666;margin-top: 5px;margin-bottom: 20px;line-height: 1.6;}
.order-btn {width: 100%;padding: 12px 0;background-color: #007bff;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;}
.order-btn:hover {background-color: #0056b3;}
.trade-notification {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background-color: #fff;border-radius: 20px;padding: 10px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);display: flex;align-items: center;gap: 10px;z-index: 80;opacity: 0;transition: all 0.5s ease; width: auto;max-width: 90%;}
.trade-notification.show {opacity: 1;transform: translateX(-50%) translateY(0);}
.notification-icon {font-size: 16px;flex-shrink: 0;}
.notification-text {font-size: 13px;color: #333;line-height: 1.4;word-wrap: break-word;word-break: break-all;}
.custom-toast {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0,0,0,0.7);color: #fff;padding: 10px 20px;border-radius: 4px;font-size: 14px;z-index: 200000;opacity: 0;pointer-events: none;transition: opacity 0.3s;}
.custom-toast.show {opacity: 1;}
.float-buttons {position: fixed;right: 20px;bottom: 50px;z-index: 999;display: flex;flex-direction: column;gap: 10px;}
.float-btn {width: 60px;height: 60px;border-radius: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;color: white;text-align: center;font-size: 16px;cursor: pointer;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);border: none;outline: none;transition: all 0.3s ease;}
.service-btn {background-color: #3498db;}
.buy-usdt-btn {background-color: #e67e22;}
.check-usdt-btn {background-color: #4CAF50;}
.float-btn:hover {opacity: 0.9;transform: scale(1.05);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);}
.usdt-quantity-wrapper {margin: 15px 0;}
.usdt-label {display: block;margin-bottom: 5px;font-weight: 500;font-size: 14px;color: #333;}
.usdt-rate {margin: 15px 0;padding: 10px;background-color: #f5f5f5;border-radius: 4px;font-size: 14px;color: #333;}
.usdt-address {margin: 10px 0;padding: 10px;background-color: #f8f9fa;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;word-break: break-all;width: 100%;}
.copy-address {margin-top: 8px;margin-bottom: 15px;padding: 8px 15px;background-color: #f0f7ff;color: #007bff;border: 1px solid #007bff;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 8px;font-weight: 500;}
.copy-address:hover {background-color: #007bff;color: #fff;transform: translateY(-2px);box-shadow: 0 3px 8px rgba(0,123,255,0.2);}
.copy-address:active {transform: translateY(0);box-shadow: 0 1px 4px rgba(0,123,255,0.15);}
.copy-address.copied {background-color: #28a745;border-color: #28a745;color: #fff;}
.usdt-pay-btn {width: 100%;padding: 12px 0;background-color: #007bff;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;margin-top: 10px;}
.usdt-pay-btn:hover {background-color: #0056b3;}
.usdt-amount-group {display: flex;flex-wrap: wrap;gap: 10px;margin: 15px 0;}
.usdt-amount-btn {padding: 8px 15px;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;background: #f5f5f5;font-size: 14px;}
.usdt-amount-btn.active {background: #007bff;color: #fff;border-color: #007bff;}
.usdt-payment-methods {margin: 15px 0;overflow-x: auto;padding-bottom: 5px;}
.usdt-payment-list {display: flex;gap: 10px;flex-wrap: nowrap;}
.usdt-payment-item {display: flex;align-items: center;gap: 8px;padding: 10px 15px;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;flex: 1;min-width: 120px;justify-content: center;margin-bottom: 0;transition: all 0.3s;}
.usdt-payment-item.active {border-color: #007bff;background: rgba(0,123,255,0.1);}
.usdt-payment-item:hover:not(.active) {border-color: #007bff;}
.detail-modal-content {padding: 10px 0;line-height: 1.6;font-size: 14px;color: #333;}
.check-usdt-modal {max-width: 800px;overflow: hidden; }
.usdt-check-address {margin-bottom: 15px;}
.usdt-check-btn {background-color: #2196F3;color: white;border: none;padding: 10px 20px;border-radius: 4px;cursor: pointer;margin-bottom: 20px;font-size: 16px;}
.usdt-check-btn:hover {background-color: #0b7dda;}
.transaction-list {margin: 15px 0;}
.transaction-table {width: 100%;border-collapse: collapse;}
.transaction-table th, .transaction-table td {border: 1px solid #ddd;padding: 10px;text-align: center;}
.transaction-table th {background-color: #f2f2f2;}
.transaction-table td {word-break: break-all;}
.pagination {margin-top: 20px;text-align: center;}
.page-btn {background-color: #f2f2f2;border: 1px solid #ddd;padding: 6px 12px;margin: 0 5px;cursor: pointer;border-radius: 4px;}
.page-btn:disabled {background-color: #eee;cursor: not-allowed;color: #999;}
.page-info {margin: 0 10px;}
.no-data {text-align: center;margin-top: 20px;color: #666;padding: 20px;}
.usdt-pay-modal {width: 400px;padding: 20px;}
.usdt-pay-content .usdt-amount-item,.usdt-pay-content .usdt-address-item {margin: 15px 0;}
.usdt-pay-content .usdt-qrcode-item {margin: 15px 0;text-align: center; 
.usdt-pay-content .label {display: inline-block;width: 80px;font-weight: bold;}
.usdt-pay-content .usdt-qrcode-item .label {width: auto;display: block; margin-bottom: 10px; }
.usdt-pay-content .address-content {display: flex;align-items: center;gap: 6px;}
.usdt-pay-content #usdtPayAddress {flex: 1;word-break: break-all;}
.usdt-pay-content .copy-btn {padding: 5px 10px;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}
.usdt-pay-content .qrcode-content {margin: 0 auto; }
.usdt-pay-content #usdtQrCodeImg {width: 200px;height: 200px;display: block;margin: 0 auto; }
.usdt-tip {margin-top: 20px;color: #666;font-size: 14px;text-align: center;}
@media (max-width: 768px) {.payment-list {flex-wrap: nowrap;}.payment-item {min-width: 90px;padding: 8px 10px;}.payment-name {font-size: 12px;}.carousel-arrow {width: 30px;height: 30px;font-size: 16px;}.trade-notification {background-color: #f8f9fa;padding: 8px 12px;width: 90%;white-space: normal;justify-content: flex-start;}.notification-text {font-size: 13px;word-wrap: break-word;word-break: break-all;}.notification-icon {font-size: 16px;}.quantity-price-wrapper {display: flex;flex-direction: row; align-items: center; justify-content: space-between;gap: 10px;margin: 15px 0;flex-wrap: nowrap; width: 100%;}.quantity-wrapper {display: flex;align-items: center;gap: 6px; width: auto; margin-bottom: 0; flex: 1; }.quantity-label {font-size: 14px;white-space: nowrap; }.quantity-controls {height: 30px;flex-shrink: 0;}.quantity-btn {width: 28px;height: 28px;font-size: 16px;}.quantity-input {width: 50px;height: 28px;font-size: 14px;}.total-price {font-size: 15px;color: #e53935;font-weight: bold;white-space: nowrap;flex-shrink: 0;width: auto;}.float-buttons {right: 10px;bottom: 30px;}.float-btn {width: 50px;height: 50px;font-size: 10px;}.product-stock-sales {flex-direction: row; gap: 6px; }.product-stock-sales > div {width: auto; flex: 1; }.usdt-amount-group {justify-content: space-between;}.usdt-amount-btn {flex: 1;text-align: center;padding: 8px 0;}.nav {gap: 10px;}.nav a {font-size: 12px;}.modal-title {font-size: 16px;padding: 10px 15px;}.modal-content {padding: 10px;}.check-usdt-modal {max-width: 95%;}.transaction-table th, .transaction-table td {padding: 5px;font-size: 12px;}.page-btn {padding: 4px 8px;font-size: 12px;}.usdt-pay-modal {width: 95%;padding: 15px;}.usdt-pay-content #usdtQrCodeImg {width: 180px;height: 180px;display: block;margin: 0 auto;}}