@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;
}
.modal-scale-enter {
	opacity:0;
	transform:scale(0.95);
}
.modal-scale-enter-active {
	opacity:1;
	transform:scale(1);
	transition:all 300ms ease-out;
}
.modal-scale-exit-active {
	opacity:0;
	transform:scale(0.95);
	transition:all 200ms ease-in;
}
/* 进度条样式 */
#progress-container {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:4px;
	background:transparent;
	z-index:9999;
}
#progress-bar {
	height:100%;
	width:0;
	background:linear-gradient(90deg,#3b82f6,#2563eb);
	transition:width 0.3s ease;
	box-shadow:0 0 10px rgba(59,130,246,0.7);
}
@keyframes progress-pulse {
	0% {
	opacity:1;
}
50% {
	opacity:0.5;
}
100% {
	opacity:1;
}
}.progress-loading {
	animation:progress-pulse 1.5s infinite;
}
.tutorial-modal {
	position:fixed;
	inset:0;
	background-color:rgba(0,0,0,0.5);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:50;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease,visibility 0.3s ease;
}
.tutorial-modal.active {
	opacity:1;
	visibility:visible;
}
.modal-content {
	background-color:white;
	border-radius:0.5rem;
	box-shadow:0 10px 25px rgba(0,0,0,0.1);
	width:100%;
	max-width:42rem;
	max-height:80vh;
	overflow-y:auto;
	transform:translateY(20px);
	transition:transform 0.3s ease;
}
.tutorial-modal {
	position:fixed;
	inset:0;
	background-color:rgba(0,0,0,0.5);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:50;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease,visibility 0.3s ease;
}
.tutorial-modal.active {
	opacity:1;
	visibility:visible;
}
.modal-content {
	background-color:white;
	border-radius:0.5rem;
	box-shadow:0 10px 25px rgba(0,0,0,0.1);
	width:90%;
	max-width:800px;
	max-height:80vh;
	overflow-y:auto;
	transform:translateY(20px);
	transition:transform 0.3s ease;
}
.tutorial-modal.active .modal-content {
	transform:translateY(0);
}
/* 折叠面板动画 */
        .tutorial-section {
	max-height:0;
	overflow:hidden;
	transition:max-height 0.3s ease,padding 0.3s ease;
}
.tutorial-section.active {
	max-height:1000px;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}
/* 滚动条样式 */
        .modal-content::-webkit-scrollbar {
	width:6px;
}
.modal-content::-webkit-scrollbar-track {
	background:#f1f1f1;
	border-radius:10px;
}
.modal-content::-webkit-scrollbar-thumb {
	background:#888;
	border-radius:10px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
	background:#555;
}
/* 卡片样式 */
        .tutorial-card {
	border:1px solid #e2e8f0;
	border-radius:0.5rem;
	margin-bottom:1rem;
	overflow:hidden;
}
.tutorial-header {
	padding:1rem;
	background-color:#f8fafc;
	cursor:pointer;
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-weight:600;
	transition:background-color 0.2s ease;
}
.tutorial-header:hover {
	background-color:#f1f5f9;
}
.tutorial-body {
	padding:0 1rem;
}
.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);
}