/* ========================================
 * XiaoXin Software Hub - CSS
 * ========================================
 */

/* Reset Base Styles */
.xxsh-wrap *,
.xxsh-wrap *::before,
.xxsh-wrap *::after {
	box-sizing: border-box;
}

/* Container Styles */
.xxsh-wrap {
	display: block !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 24px auto !important;
	padding: 32px 24px !important;
	border-radius: 28px !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #1e293b !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	position: relative !important;
	overflow: hidden !important;
}

.xxsh-wrap::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
	pointer-events: none;
}

/* Header Styles */
.xxsh-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 32px !important;
	position: relative !important;
	z-index: 1;
}

.xxsh-head h2 {
	margin: 0 !important;
	color: #ffffff !important;
	font-size: 32px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.xxsh-head p {
	max-width: 600px !important;
	margin: 8px 0 0 !important;
	color: rgba(255,255,255,0.9) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

/* Count Badge */
.xxsh-count {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 18px !important;
	border: 2px solid rgba(255,255,255,0.3) !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.15) !important;
	backdrop-filter: blur(10px) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	transition: all 0.3s ease !important;
}

.xxsh-count::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 12px rgba(74,222,128,0.6);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.2); opacity: 0.8; }
}

.xxsh-count:hover {
	background: rgba(255,255,255,0.25) !important;
	border-color: rgba(255,255,255,0.5) !important;
	transform: translateY(-2px) !important;
}

/* Empty State */
.xxsh-empty {
	padding: 40px !important;
	text-align: center !important;
	color: rgba(255,255,255,0.9) !important;
	font-size: 15px !important;
	background: rgba(255,255,255,0.1) !important;
	border-radius: 20px !important;
}

/* Grid Layout */
.xxsh-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
	position: relative !important;
	z-index: 1;
}

.xxsh-layout-hero .xxsh-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.xxsh-layout-compact .xxsh-grid {
	grid-template-columns: 1fr !important;
	gap: 14px !important;
}

/* Card Button */
.xxsh-card,
.xxsh-wrap button.xxsh-card {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: left !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.xxsh-card:focus-visible {
	outline: none !important;
}

/* Card Frame */
.xxsh-card-frame {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-height: 280px !important;
	padding: 20px !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	border-radius: 24px !important;
	background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%) !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
	transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
	position: relative !important;
	overflow: hidden !important;
}

.xxsh-card-frame::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
	transform: scaleX(0);
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.xxsh-card:hover .xxsh-card-frame {
	transform: translateY(-6px) !important;
	border-color: rgba(102,126,234,0.2) !important;
	box-shadow: 0 16px 48px rgba(102,126,234,0.15), 0 4px 12px rgba(0,0,0,0.06) !important;
}

.xxsh-card:hover .xxsh-card-frame::before {
	transform: scaleX(1);
}

.xxsh-card:focus-visible .xxsh-card-frame {
	outline: 3px solid rgba(102,126,234,0.4) !important;
	outline-offset: 3px !important;
}

/* Thumbnail Area */
.xxsh-card-thumb {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 120px !important;
	margin-bottom: 20px !important;
	padding: 24px !important;
	border-radius: 20px !important;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
	position: relative !important;
	overflow: hidden !important;
}

.xxsh-card-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(102,126,234,0.08) 0%, transparent 60%);
	pointer-events: none;
}

.xxsh-card-thumb img {
	display: block !important;
	width: 88px !important;
	height: 88px !important;
	border-radius: 20px !important;
	object-fit: cover !important;
	box-shadow: 0 10px 24px rgba(0,0,0,0.1), 0 3px 8px rgba(0,0,0,0.06) !important;
	transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
	position: relative !important;
	z-index: 1;
}

.xxsh-card:hover .xxsh-card-thumb img {
	transform: scale(1.1) rotate(-3deg) !important;
}

.xxsh-card-thumb b {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 88px !important;
	height: 88px !important;
	border-radius: 20px !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #ffffff !important;
	font-size: 32px !important;
	font-weight: 800 !important;
	box-shadow: 0 10px 24px rgba(102,126,234,0.25), 0 3px 8px rgba(0,0,0,0.08) !important;
	position: relative !important;
	z-index: 1;
}

/* Card Footer */
.xxsh-card-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: 18px !important;
	padding-top: 18px !important;
	border-top: 1px solid #f1f5f9 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.xxsh-card-footer::before {
	display: none !important;
}

/* Card Title */
.xxsh-card-title {
	display: block !important;
	margin: 0 !important;
	color: #1e293b !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	white-space: normal !important;
	transition: color 0.3s ease !important;
}

.xxsh-card:hover .xxsh-card-title {
	color: #667eea !important;
}

/* Download Button */
.xxsh-download-label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
	padding: 10px 16px !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	box-shadow: 0 4px 12px rgba(102,126,234,0.25) !important;
	transition: all 0.3s ease !important;
}

.xxsh-card:hover .xxsh-download-label {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(102,126,234,0.35) !important;
}

/* Modal Styles */
.xxsh-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.xxsh-modal[hidden] {
	display: none !important;
}

.xxsh-mask {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(0,0,0,0.5) !important;
	backdrop-filter: blur(4px) !important;
	animation: fadeIn 0.2s ease !important;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.xxsh-dialog {
	position: relative !important;
	width: 100% !important;
	max-width: 850px !important;
	max-height: 90vh !important;
	background: #ffffff !important;
	border-radius: 28px !important;
	box-shadow: 0 30px 80px rgba(0,0,0,0.35) !important;
	overflow: hidden !important;
	animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.xxsh-close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: #f1f5f9 !important;
	color: #475569 !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	z-index: 10 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.25s ease !important;
}

.xxsh-close:hover {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #ffffff !important;
	transform: rotate(90deg) !important;
	box-shadow: 0 8px 20px rgba(102,126,234,0.3) !important;
}

/* Dialog Split Layout */
.xxsh-dialog-split {
	display: flex !important;
	flex-direction: row !important;
}

.xxsh-dialog-main {
	flex: 1 !important;
	padding: 36px 32px 32px !important;
	overflow-y: auto !important;
	background: #ffffff !important;
}

.xxsh-dialog-figure {
	width: 340px !important;
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
	padding: 32px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	border-left: 1px solid rgba(0,0,0,0.06) !important;
}

/* Phone Frame */
.xxsh-phone-frame {
	width: 210px !important;
	height: 440px !important;
	border-radius: 36px !important;
	background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
	padding: 14px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
	position: relative !important;
}

.xxsh-phone-frame::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: 88px;
	height: 30px;
	background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
	border-radius: 0 0 20px 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.xxsh-phone-screen {
	width: 100% !important;
	height: 100% !important;
	border-radius: 28px !important;
	background: #ffffff !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.xxsh-shot-one {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Dialog Header */
.xxsh-dialog-top {
	display: flex !important;
	gap: 20px !important;
	margin-bottom: 28px !important;
}

.xxsh-dialog-icon {
	width: 104px !important;
	height: 104px !important;
	border-radius: 28px !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	font-size: 40px !important;
	font-weight: 800 !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	box-shadow: 0 12px 32px rgba(102,126,234,0.35) !important;
	position: relative !important;
}

.xxsh-dialog-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 60%);
	pointer-events: none;
}

.xxsh-dialog-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.xxsh-dialog-title-wrap {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

.xxsh-dialog-heading {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 10px !important;
}

.xxsh-dialog-tag {
	display: inline-flex !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
	color: #667eea !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}

.xxsh-dialog-type {
	display: inline-flex !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	background: #f1f5f9 !important;
	color: #475569 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

.xxsh-dialog-main h3 {
	margin: 0 0 10px 0 !important;
	color: #1e293b !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

.xxsh-dialog-subline {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.xxsh-meta-version,
.xxsh-meta-vip {
	display: inline-flex !important;
	padding: 5px 12px !important;
	border-radius: 8px !important;
	background: #f8fafc !important;
	color: #475569 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border: 1px solid #e2e8f0 !important;
}

.xxsh-meta-vip:empty {
	display: none !important;
}

.xxsh-meta-vip:not(:empty) {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
	color: #92400e !important;
	border-color: rgba(245,158,11,0.3) !important;
	box-shadow: 0 4px 12px rgba(245,158,11,0.15) !important;
}

/* Dialog Summary Box */
.xxsh-dialog-summary-box {
	padding: 24px !important;
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
	border-radius: 16px !important;
	margin-bottom: 28px !important;
	border: 1px solid rgba(0,0,0,0.04) !important;
	transition: all 0.3s ease !important;
}

.xxsh-dialog-summary-box:hover {
	border-color: rgba(102,126,234,0.2) !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.xxsh-dialog-summary-box p {
	margin: 0 0 20px 0 !important;
	color: #64748b !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
}

.xxsh-dialog-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.xxsh-meta-updated,
.xxsh-meta-size,
.xxsh-meta-downloads,
.xxsh-meta-system {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 16px !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	color: #475569 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
	border: 1px solid rgba(0,0,0,0.04) !important;
	transition: all 0.25s ease !important;
}

.xxsh-meta-updated:hover,
.xxsh-meta-size:hover,
.xxsh-meta-downloads:hover,
.xxsh-meta-system:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}

.xxsh-meta-updated::before {
	content: "📅";
	font-size: 16px;
}

.xxsh-meta-size::before {
	content: "📦";
	font-size: 16px;
}

.xxsh-meta-downloads::before {
	content: "⬇️";
	font-size: 16px;
}

.xxsh-meta-system::before {
	content: "📱";
	font-size: 16px;
}

.xxsh-meta-updated:empty,
.xxsh-meta-size:empty,
.xxsh-meta-downloads:empty,
.xxsh-meta-system:empty {
	display: none !important;
}

/* Dialog Actions */
.xxsh-dialog-actions {
	display: flex !important;
	gap: 14px !important;
}

.xxsh-download {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 !important;
	padding: 16px 28px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: 0 8px 24px rgba(102,126,234,0.4) !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	overflow: hidden !important;
}

.xxsh-download::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.6s ease;
}

.xxsh-download:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 16px 40px rgba(102,126,234,0.5) !important;
}

.xxsh-download:hover::before {
	left: 100%;
}

/* Responsive Design */
@media (max-width: 1280px) {
	.xxsh-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.xxsh-layout-hero .xxsh-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 1180px) {
	.xxsh-wrap {
		padding: 28px 20px !important;
	}
}

@media (max-width: 960px) {
	.xxsh-dialog-split {
		flex-direction: column !important;
	}
	
	.xxsh-dialog-figure {
		width: 100% !important;
		padding: 28px !important;
		border-left: none !important;
		border-bottom: 1px solid rgba(0,0,0,0.06) !important;
	}
	
	.xxsh-phone-frame {
		width: 200px !important;
		height: 420px !important;
	}
}

@media (max-width: 768px) {
	.xxsh-wrap {
		padding: 24px 16px !important;
		border-radius: 24px !important;
	}
	
	.xxsh-head {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	.xxsh-head h2 {
		font-size: 26px !important;
	}
	
	.xxsh-grid,
	.xxsh-layout-hero .xxsh-grid {
		grid-template-columns: 1fr !important;
	}
	
	.xxsh-card-frame {
		min-height: auto !important;
	}
	
	.xxsh-modal {
		padding: 16px !important;
		align-items: flex-end !important;
	}
	
	.xxsh-dialog {
		max-height: 92vh !important;
		border-radius: 24px 24px 0 0 !important;
		animation: slideUpFromBottom 0.35s cubic-bezier(0.4,0,0.2,1) !important;
	}
	
	@keyframes slideUpFromBottom {
		from {
			opacity: 0;
			transform: translateY(100%);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.xxsh-dialog-main {
		padding: 28px 24px 24px !important;
	}
	
	.xxsh-dialog-top {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}
	
	.xxsh-dialog-icon {
		width: 92px !important;
		height: 92px !important;
		border-radius: 24px !important;
		font-size: 36px !important;
	}
	
	.xxsh-dialog-main h3 {
		font-size: 22px !important;
	}
}

@media (max-width: 480px) {
	.xxsh-wrap {
		padding: 20px 14px !important;
	}
	
	.xxsh-head h2 {
		font-size: 22px !important;
	}
	
	.xxsh-head p {
		font-size: 14px !important;
	}
	
	.xxsh-card-frame {
		padding: 18px !important;
		border-radius: 20px !important;
	}
	
	.xxsh-card-thumb {
		min-height: 100px !important;
		padding: 18px !important;
		margin-bottom: 16px !important;
	}
	
	.xxsh-card-thumb img,
	.xxsh-card-thumb b {
		width: 76px !important;
		height: 76px !important;
		border-radius: 18px !important;
		font-size: 28px !important;
	}
	
	.xxsh-card-title {
		font-size: 16px !important;
	}
	
	.xxsh-dialog-main {
		padding: 24px 20px 20px !important;
	}
	
	.xxsh-dialog-icon {
		width: 84px !important;
		height: 84px !important;
		border-radius: 20px !important;
		font-size: 32px !important;
	}
	
	.xxsh-dialog-main h3 {
		font-size: 20px !important;
	}
	
	.xxsh-phone-frame {
		width: 180px !important;
		height: 380px !important;
		border-radius: 30px !important;
	}
	
	.xxsh-meta-updated,
	.xxsh-meta-size,
	.xxsh-meta-downloads,
	.xxsh-meta-system {
		padding: 8px 12px !important;
		font-size: 13px !important;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.xxsh-card-frame,
	.xxsh-card-thumb img,
	.xxsh-close,
	.xxsh-download-label,
	.xxsh-download,
	.xxsh-count {
		transition: none !important;
	}
	
	.xxsh-mask,
	.xxsh-dialog,
	@keyframes pulse {
		animation: none !important;
	}
	
	.xxsh-card:hover .xxsh-card-frame,
	.xxsh-card:hover .xxsh-card-thumb img,
	.xxsh-close:hover,
	.xxsh-download:hover,
	.xxsh-count:hover {
		transform: none !important;
	}
}