body {
    background: #e2e8f0 url("/static/img/background.svg") fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.payment-layer .layui-layer-title {
    background: linear-gradient(to right, #3b82f6, #6366f1);
    color: white;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
    text-align: center;
    padding: 1px;
}

.payment-layer .layui-layer-content {
    padding: 0 !important;
    border-radius: 8px;
}

/* 支付弹窗容器 */
.payment-dialog {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
}

/* 头部区域 */
.payment-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

/* 支付方式列表 */
.payment-methods {
    padding: 12px;
}

/* 单个支付选项 */
.payment-option {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-option:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.payment-option.selected {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

/* 支付图标 */
.payment-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* 支付信息 */
.payment-info {
    flex: 1;
}

.payment-info h3 {
    margin: 0;
    font-size: 16px;
}

.payment-info p {
    margin: 4px 0 0 0;
    font-size: 12px;
}

/* 选中标记 */
.payment-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 支付提示信息 */
.payment-notice {
    padding: 12px;
    margin: 12px;
    background-color: #f8fafc;
    border-radius: 6px;
    font-size: 13px;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* 确认支付按钮 */
.confirm-btn {
    transition: all 0.2s;
}

.confirm-btn:not(:disabled):hover {
    background: linear-gradient(to right, #3b82f6, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* 取消按钮 */
.cancel-btn {
    transition: all 0.2s;
}
/* 确认支付按钮 */
.confirm-btn {
    width: calc(100% - 24px);
    margin: 0 12px;
    padding: 12px;
    background: linear-gradient(to right, #3b82f6, #6366f1);
    color: white;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

/* 取消按钮 */
.cancel-btn {
    width: calc(100% - 24px);
    margin: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #333;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* 按钮悬停效果 */
.confirm-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.cancel-btn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.cancel-btn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

@keyframes subtleHighlight {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
    }
}

.text-xl {
    animation: subtleHighlight 4s infinite ease-in-out;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}
        
/* 骨架屏动画 */
@keyframes skeleton-pulse {
    0% {
        background-color: #e2e8f0;
    }
    50% {
        background-color: #f1f5f9;
    }
    100% {
        background-color: #e2e8f0;
    }
}
.rainbow-shimmer {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, 
    #FF5252, #FF4081, #E040FB, #7C4DFF, 
    #536DFE, #448AFF, #40C4FF, #18FFFF,
    #64FFDA, #69F0AE, #B2FF59, #EEFF41, 
    #FFFF00, #FFD740, #FFAB40, #FF6E40
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
.skeleton-item {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-line {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-line.long {
    width: 100%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-title {
    height: 20px;
    width: 40%;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-badge {
    height: 16px;
    width: 80px;
    border-radius: 8px;
}
.author-name {
  background: linear-gradient(135deg, 
    #fff5e6 0%, 
    #ffd166 18%, 
    #ffb347 35%, 
    #ff8c42 52%, 
    #ff6b35 70%, 
    #ff4d1c 88%, 
    #e63946 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(255, 107, 53, 0.2));
  font-weight: 600;
  letter-spacing: 0.5px;
}
@keyframes float {
	0%,100% {
	transform:translateY(0)
}
50% {
	transform:translateY(-10px)
}
}.animate-float {
	animation:float 3s ease-in-out infinite
}
@media (max-width:640px) {
.product-tags {
	flex-wrap:wrap;
	margin-top:.5rem
}
.product-tags span {
	margin-top:.25rem
}
}.tab-content {
	display:none;
	animation:fadeIn .3s ease-in
}
.tab-content.active {
	display:block
}
@keyframes fadeIn {
	from {
	opacity:0;
	transform:translateY(10px)
}
to {
	opacity:1;
	transform:translateY(0)
}
}.cyber-loader {
	--primary:rgba(59,130,246,.8);
	--secondary:rgba(99,102,241,.6);
	--accent:rgba(239,246,255,.9)
}
@keyframes spin-slow {
	to {
	transform:rotate(360deg)
}
}.animate-spin-slow {
	animation:spin-slow 2.5s linear infinite
}
.cyber-spinner {
	position:relative;
	width:80px;
	height:80px;
	margin:0 auto
}
.cyber-spinner .ring {
	position:absolute;
	width:100%;
	height:100%;
	border:4px solid transparent;
	border-top-color:var(--primary);
	border-radius:50%;
	filter:drop-shadow(0 0 2px var(--primary)) drop-shadow(0 0 6px var(--primary))
}
.cyber-spinner .ring::after {
	content:'';
	position:absolute;
	top:2px;
	left:2px;
	right:2px;
	bottom:2px;
	border:3px solid transparent;
	border-top-color:var(--secondary);
	border-radius:50%;
	animation:spin-slow 2s linear infinite
}
.cyber-spinner .dots {
	position:absolute;
	width:100%;
	height:100%;
	animation:spin-slow 3s linear infinite reverse
}
.cyber-spinner .dot {
	position:absolute;
	width:12px;
	height:12px;
	background:var(--accent);
	border-radius:50%;
	top:0;
	left:calc(50% - 6px);
	transform-origin:6px 40px;
	box-shadow:0 0 8px var(--accent)
}
.cyber-spinner .dot:nth-child(1) {
	transform:rotate(0)
}
.cyber-spinner .dot:nth-child(2) {
	transform:rotate(120deg)
}
.cyber-spinner .dot:nth-child(3) {
	transform:rotate(240deg)
}
@keyframes modalIn {
	0% {
	opacity:0;
	transform:translateY(-20px) scale(.95)
}
100% {
	opacity:1;
	transform:translateY(0) scale(1)
}
}@keyframes modalOut {
	0% {
	opacity:1;
	transform:translateY(0) scale(1)
}
100% {
	opacity:0;
	transform:translateY(20px) scale(.95)
}
}.modal-enter {
	animation:modalIn .3s cubic-bezier(.4,0,.2,1) forwards
}
.modal-exit {
	animation:modalOut .2s cubic-bezier(.4,0,.6,1) forwards
}
.modal-content {
	transition:all .3s ease
}
.quantity-input {
	width:120px;
	position:relative
}
.quantity-input input {
	text-align:center;
	border:2px solid #e5e7eb;
	border-radius:8px;
	padding:8px 40px
}
.quantity-input button {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:32px;
	height:32px;
	border-radius:6px;
	background:#f3f4f6
}
.quantity-input button.minus {
	left:4px
}
.quantity-input button.plus {
	right:4px
}
.input-group {
	transition:all .2s ease
}
.input-group:focus-within {
	transform:translateX(2px)
}
.input-group label {
	transition:color .2s ease
}
.input-group:focus-within label {
	color:#3b82f6
}
@keyframes spin {
	to {
	transform:rotate(360deg)
}
}.animate-spin {
	animation:spin 1s linear infinite
}
.hero-gradient {
	background:linear-gradient(135deg,#ff4b4b 0%,#ff1e1e 50%,#d60000 100%);
	box-shadow:0 10px 30px rgba(255,75,75,.3)
}
.cyber-border {
	position:relative;
	background:rgba(0,0,0,.8);
	border:2px solid transparent;
	border-image:linear-gradient(45deg,#ff4b4b,#ffd700);
	border-image-slice:1
}
.gold-text {
	color:#ffd700;
	text-shadow:0 0 8px rgba(255,215,0,.5)
}
.hover-scale {
	transition:transform .3s ease,box-shadow .3s ease
}
.hover-scale:hover {
	transform:translateY(-3px);
	box-shadow:0 10px 20px rgba(0,0,0,.2)
}
.price-card {
	background:linear-gradient(45deg,#2b2b2b,#1a1a1a);
	border:1px solid #ff4b4b;
	border-radius:15px;
	padding:1.5rem;
	position:relative;
	overflow:hidden
}
.price-card::after {
	content:'';
	position:absolute;
	top:-50%;
	left:-50%;
	width:200%;
	height:200%;
	background:linear-gradient(45deg,rgba(255,75,75,0) 30%,rgba(255,75,75,.2) 50%,rgba(255,75,75,0) 70%);
	animation:lightFlow 4s infinite linear
}
@keyframes lightFlow {
	0% {
	transform:rotate(0)
}
100% {
	transform:rotate(360deg)
}
}@media (max-width:640px) {
	.stat-card {
	padding:1rem;
	margin:.5rem
}
.hero-buttons {
	flex-direction:column;
	gap:1rem
}
}#productSearch {
	background:#fff;
	border:1px solid #e4e7ed;
	box-shadow:0 2px 8px rgba(255,75,75,.1)
}
.bg-blue-500:hover {
	background-color:#3b82f6;
	transform:translateY(-1px)
}
.hide-scrollbar {
	-ms-overflow-style:none;
	scrollbar-width:none
}
.hide-scrollbar::-webkit-scrollbar {
	display:none
}
.sticky-nav {
	transition:all .3s ease
}
@media (max-width:768px) {
	.platform-name {
	font-size:1rem
}
.nav-button {
	padding:.5rem 1rem;
	font-size:.875rem
}
}
.Specia {
	color:#fff;
	border:none;
	border-radius:8px 8px 0 0;
	font-size:16px;
	font-weight:500;
	cursor:pointer;
	position:relative;
	overflow:hidden;
	box-shadow:0 4px 15px rgba(24,144,255,.3);
	transition:all .3s ease
}
.Specia::before {
	content:"";
	position:absolute;
	top:0;
	left:-100%;
	width:60%;
	height:100%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),rgba(255,255,255,.3),rgba(255,255,255,.15),transparent);
	transform:skewX(-20deg);
	animation:flow 3s infinite ease-in-out;
	filter:blur(2px)
}
@keyframes flow {
	0% {
	left:-100%;
	opacity:.7
}
70% {
	opacity:.9
}
100% {
	left:150%;
	opacity:.5
}
}
.Specia:hover {
	transform:translateY(-2px);
	box-shadow:0 6px 20px rgba(24,144,255,.4)
}
.Specia:hover::before {
	animation-duration:2s;
	opacity:.9;
	pointer-events:none;
}
.badge {
	display:inline-block;
	padding:0.25rem 0.5rem;
	border-radius:0.25rem;
	font-size:0.875rem;
	font-weight:600;
	margin-bottom:0.5rem;
}
.badge-red {
	background-color:#fee2e2;
	color:#b91c1c;
}
.announcement-banner {
	position:relative;
	overflow:hidden;
	border:1px solid rgba(255,255,255,0.1);
}