*,*::before,*::after {
	box-sizing: border-box
}

html,body {
	margin: 0;
	padding: 0;
	background: #000
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

@media screen and (min-width: 640px) {
	html {
		font-size: calc(15px + (16.5 - 15) * ((100vw - 640px) / (1024 - 640)));
	}
}

@media screen and (min-width: 1024px) {
	html {
		font-size: calc(16.5px + (18 - 16.5) * ((100vw - 1024px) / (1440 - 1024)));
	}
}

@media screen and (min-width: 1440px) {
	html {
		font-size: 18px;
	}
}

@media screen and (max-width: 751px) {
	html {
		font-size: 16px !important;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

:root {
	--font-xxs: clamp(0.625rem, 0.25vw, 0.75rem);
	--font-xs: clamp(0.75rem, 0.3vw, 0.875rem);
	--font-sm: clamp(0.875rem, 0.35vw, 0.9375rem);
	--font-base: clamp(0.9375rem, 0.4vw, 1rem);
	--font-md: clamp(1rem, 0.45vw, 1.125rem);
	--font-lg: clamp(1.125rem, 0.55vw, 1.25rem);
	--font-xl: clamp(1.25rem, 0.7vw, 1.5rem);
	--font-2xl: clamp(1.5rem, 0.85vw, 1.875rem);
	--font-3xl: clamp(1.875rem, 1vw, 2.5rem);
	--font-4xl: clamp(2.5rem, 1.2vw, 3rem);
}

@media screen and (max-width: 751px) {
	:root {
		--font-xxs: clamp(0.9375rem, 2vw, 1rem);
		--font-xs: clamp(1rem, 2.3vw, 1.0625rem);
		--font-sm: clamp(1.0625rem, 2.6vw, 1.125rem);
		--font-base: clamp(1.125rem, 2.9vw, 1.25rem);
		--font-md: clamp(1.25rem, 3.3vw, 1.375rem);
		--font-lg: clamp(1.375rem, 3.8vw, 1.625rem);
		--font-xl: clamp(1.625rem, 4.3vw, 1.875rem);
		--font-2xl: clamp(1.875rem, 5vw, 2.25rem);
		--font-3xl: clamp(2.25rem, 5.8vw, 3rem);
		--font-4xl: clamp(3rem, 6.8vw, 4rem);
	}
}

/* ============================================================
   NEXUS 星云 Download Center — Component Styles
   All component styles are scoped under #download.
   Mobile-first. Breakpoints: sm=640px, md=768px, lg=1024px.
   Color palette:
     Slate:  900=#0f172a 800=#1e293b 700=#334155 600=#475569
             500=#64748b 400=#94a3b8 300=#cbd5e1 200=#e2e8f0
             100=#f1f5f9 50=#f8fafc
     Blue:   600=#2563eb 500=#3b82f6 700=#1d4ed8 50=#eff6ff
             100=#dbeafe 200=#bfdbfe
     Purple: 600=#9333ea 700=#6b21a8 50=#faf5ff 100=#f3e8ff
     Indigo: 600=#4f46e5 500=#6366f1 50=#eef2ff 100=#e0e7ff
     Emerald:500=#10b981 700=#047857 100=#d1fae5
     Amber:  500=#f59e0b 700=#b45309 100=#fef3c7
     Rose:   700=#9f1239 100=#ffe4e6 500=#f43f5e
     Cyan:   700=#0e7490 400=#22d3ee
     Teal:   700=#0f766e 600=#0d9488
     Orange: 700=#c2410c 500=#f97316 600=#ea580c
     Pink:   600=#db2777
   ============================================================ */

/* ---- Global: smooth scrolling ---- */
html { scroll-behavior: smooth; }

/* ---- Global: Keyframe Animations ---- */
@keyframes floatMesh {
	0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
	50% { transform: translate(40px, -50px) scale(1.08) rotate(5deg); }
	100% { transform: translate(-30px, 30px) scale(0.95) rotate(-3deg); }
}

@keyframes syncPulse {
	0% { transform: scale(0.95); opacity: 0.8; }
	50% { transform: scale(1.15); opacity: 0.3; }
	100% { transform: scale(0.95); opacity: 0.8; }
}

@keyframes floatSlow {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes floatReverse {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(10px) rotate(-1.5deg); }
}

@keyframes dlPulse {
	50% { opacity: 0.5; }
}

/* ---- Global: Custom Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Global: SVG Icon Sizing ---- */
/* Icons use class="icon" and scale with font-size (1em x 1em) */
#download .icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	flex-shrink: 0;
}

/* ============================================================
   #download — base scope (replaces body styles from original)
   ============================================================ */
#download {
	position: relative;
	min-height: 100vh;
	background-color: #f8fafc;
	color: #0f172a;
	overflow-x: hidden;
	font-family: 'Noto Sans SC', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	isolation: isolate; /* establishes stacking context so z-index:-1 children sit above bg */
	line-height: 1.5;
}

#download ::selection {
	background-color: #2563eb;
	color: #ffffff;
}

#download a { color: inherit; text-decoration: none; }
#download button { font-family: inherit; cursor: pointer; border: none; background: none; }
#download img { display: block; max-width: 100%; }
#download ul { margin: 0; padding: 0; list-style: none; }

/* ============================================================
   Utility: Ambient Mesh Background
   ============================================================ */
#download .ambient-mesh {
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	background: radial-gradient(circle at 50% 0%, #f1f5f9 0%, #f8fafc 100%);
}

#download .ambient-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.65;
	animation: floatMesh 20s infinite alternate ease-in-out;
}

#download .blob-blue {
	width: 50vw; height: 50vw;
	background: radial-gradient(circle, rgba(191,219,254,0.9) 0%, rgba(224,242,254,0.3) 70%);
	top: -15%; left: -10%;
}

#download .blob-purple {
	width: 45vw; height: 45vw;
	background: radial-gradient(circle, rgba(221,214,254,0.85) 0%, rgba(243,232,255,0.25) 70%);
	top: 25%; right: -12%;
	animation-delay: -5s;
}

#download .blob-cyan {
	width: 40vw; height: 40vw;
	background: radial-gradient(circle, rgba(165,243,252,0.8) 0%, rgba(207,250,254,0.2) 70%);
	bottom: -10%; left: 20%;
	animation-delay: -10s;
}

/* ============================================================
   Utility: Glass Panel
   ============================================================ */
#download .glass-panel {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 10px 30px -5px rgba(148, 163, 184, 0.12);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#download .glass-panel:hover {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(147, 197, 253, 0.8);
	box-shadow: 0 20px 45px -10px rgba(37, 99, 235, 0.15);
}

/* ============================================================
   Utility: Text Gradients
   ============================================================ */
#download .text-gradient {
	background: linear-gradient(135deg, #1d4ed8 0%, #6366f1 40%, #8b5cf6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

#download .text-gradient-cyan {
	background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ============================================================
   Utility: Animation Classes
   ============================================================ */
#download .animate-float-slow { animation: floatSlow 6s ease-in-out infinite; }
#download .animate-float-reverse { animation: floatReverse 7s ease-in-out infinite; }
#download .animate-sync-pulse { animation: syncPulse 3s infinite ease-in-out; }
#download .animate-pulse { animation: dlPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ============================================================
   Layout: Containers
   ============================================================ */
#download .dl-container {
	max-width: 1280px;       /* max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;     /* px-6 */
	padding-right: 1.5rem;
}

#download .dl-container-wide {
	max-width: 1600px;       /* max-w-[1600px] */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* ============================================================
   Header
   ============================================================ */
#download .dl-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	background: #ffffff;
	border-bottom: 1px solid #e8e8e8;
	transition: all 0.3s ease;
}

#download .dl-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 2rem;
	height: 4.375rem;        /* 70px */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#download .dl-brand {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	text-decoration: none;
}

#download .dl-brand-logo-img {
	height: 1.2rem;        /* 26px */
	width: auto;
	display: block;
}

#download .dl-brand-cn {
	font-size: 1.25rem;      /* 20px */
	font-weight: 700;
	color: #000000;
	line-height: 1;
}

#download .dl-nav {
	display: none;           /* hidden on mobile; shown md+ */
	align-items: center;
}

#download .dl-nav-item {
	font-size: 0.9375rem;    /* 15px */
	font-weight: 400;
	color: #333333;
	padding: 0 0.875rem;     /* 14px */
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease;
}

#download .dl-nav-item:hover { color: #1e90ff; }

#download .dl-nav-item.active {
	color: #1e90ff;          /* 当前页高亮 */
	font-weight: 600;
}

#download .dl-nav-sep {
	color: #cccccc;
	font-size: 0.8125rem;
	user-select: none;
}

#download .dl-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;           /* 20px */
}

#download .dl-func-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;         /* 5px */
	font-size: 0.875rem;    /* 14px */
	color: #666666;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease;
}

#download .dl-func-btn:hover { color: #1e90ff; }

#download .dl-func-btn .dl-func-icon {
	height: 1rem;           /* 16px */
	width: auto;
	display: block;
}

#download .dl-func-btn .dl-func-icon { object-fit: contain; }

/* ============================================================
   Hero Section
   ============================================================ */
#download .dl-hero {
	position: relative;
	padding-top: 8rem;       /* pt-32 */
	padding-bottom: 5rem;    /* pb-20 */
	/* 不设 overflow：body 已有 overflow-x:hidden 防横向滚动，
	   垂直方向需放开以允许型号下拉面板完整展开 */
}

#download .dl-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;               /* gap-12 */
	align-items: center;
}

#download .dl-hero-left {
	position: relative;      /* 提升层级：下拉面板展开时浮于右侧图片上方 */
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#download .dl-hero-right {
	position: relative;
	display: flex;
	justify-content: center;
}

#download .dl-hero-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;             /* gap-2 */
	margin-bottom: 1.5rem;   /* mb-6 */
}

#download .dl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid;
    border-color: rgb(191 219 254 / 0.8);
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
	    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

#download .dl-badge--blue {
	background: #eff6ff;      /* blue-50 */
	border-color: rgba(191, 219, 254, 0.8); /* blue-200/80 */
	color: #1d4ed8;          /* blue-700 */
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

#download .dl-badge--purple {
	gap: 0.375rem;           /* gap-1.5 */
	padding: 0.375rem 0.75rem;/* px-3 */
	background: #faf5ff;     /* purple-50 */
	border-color: rgba(221, 214, 254, 0.8); /* purple-200/80 */
	color: #6b21a8;          /* purple-700 */
}

#download .dl-badge-dot {
	width: 0.5rem;           /* w-2 */
	height: 0.5rem;
	border-radius: 9999px;
	background: #2563eb;     /* blue-600 */
	animation: dlPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#download .dl-hero-title {
	font-size: 2.25rem;      /* text-4xl (mobile) */
	font-weight: 900;
	color: #0f172a;
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0 0 1.5rem 0;     /* mb-6 */
}

#download .dl-hero-desc {
	font-size: 1rem;         /* text-base (mobile) */
	color: #475569;          /* slate-600 */
	font-weight: 400;
	line-height: 1.625;      /* leading-relaxed */
	margin: 0 0 2rem 0;      /* mb-8 */
	max-width: 36rem;        /* max-w-xl */
}

#download .dl-selector-card {
	width: 100%;
	max-width: 36rem;        /* max-w-xl */
	border-radius: 1.5rem;   /* rounded-3xl */
	padding: 1.5rem;         /* p-6 */
	border: 1px solid rgba(255,255,255,0.9);
	box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.06); /* shadow-glass */
	margin-bottom: 2rem;     /* mb-8 */
	position: relative;
}

#download .dl-select-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;               /* gap-4 */
	
}

#download .dl-select-group { display: flex; flex-direction: column; }

#download .dl-select-label {
	display: block;
	font-size: 0.75rem;      /* text-xs */
	font-weight: 700;
	color: #334155;          /* slate-700 */
	margin-bottom: 0.8rem;   /* mb-2 */
}

#download .dl-select-label .fa-solid { color: #3b82f6; margin-right: 0.25rem; }
#download .dl-select-label .text-indigo-500 { color: #6366f1; }

/* ============================================================
   Custom Dropdown Component (replaces native select)
   ============================================================ */
#download .dl-dropdown { position: relative; }

#download .dl-dropdown-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #1e293b;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.875rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	text-align: left;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#download .dl-dropdown-trigger:hover {
	border-color: #94a3b8;
	background: #fafbfc;
}

#download .dl-dropdown.open .dl-dropdown-trigger {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

#download .dl-dropdown-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#download .dl-dropdown-value.is-placeholder {
	color: #94a3b8;
	font-weight: 500;
}

#download .dl-dropdown-chevron {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: #64748b;
	transition: transform 0.2s ease;
}

#download .dl-dropdown.open .dl-dropdown-chevron { transform: rotate(180deg); }

#download .dl-dropdown-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 100;            /* 确保浮层在 hero 图片之上 */
	display: none;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.875rem;
	box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
	padding: 0.5rem;
}

#download .dl-dropdown.open .dl-dropdown-menu { display: block; }

#download .dl-dropdown-search { position: relative; margin-bottom: 0.5rem; }

#download .dl-dropdown-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.95rem;
	height: 0.95rem;
	color: #94a3b8;
	pointer-events: none;
}

#download .dl-dropdown-search-input {
	width: 100%;
	box-sizing: border-box;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0.625rem;
	padding: 0.5rem 0.75rem 0.5rem 2rem;
	font-size: 0.8125rem;
	color: #1e293b;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#download .dl-dropdown-search-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
	background: #ffffff;
}

#download .dl-dropdown-options {
	max-height: 14rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#download .dl-dropdown-option {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.55rem 0.75rem;
	margin-bottom: 2px;
	border: 0;
	background: transparent;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #334155;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

#download .dl-dropdown-option:last-child { margin-bottom: 0; }

#download .dl-dropdown-option:hover { background: #f1f5f9; }

#download .dl-dropdown-option.active {
	background: #eff6ff;
	color: #2563eb;
	font-weight: 600;
}

#download .dl-dropdown-empty {
	padding: 0.75rem;
	text-align: center;
	color: #94a3b8;
	font-size: 0.8125rem;
}

#download .dl-hero-image-wrap { position: relative; width: 100%; }

#download .dl-hero-image {
	width: 94%;
	height: auto;
	margin: 0 auto;
}

#download .dl-glow {
	position: absolute;
	width: 20rem;            /* w-80 */
	height: 20rem;            /* h-80 */
	background: linear-gradient(to top right, rgba(96, 165, 250, 0.4), rgba(129, 140, 248, 0.3), rgba(167, 139, 250, 0.4));
	border-radius: 9999px;
	filter: blur(64px);      /* blur-3xl */
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

#download .dl-float-card {
	position: absolute;
	background: rgb(255 255 255 / 42%);;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 0.75rem 1rem;   /* px-4 py-3 */
	border-radius: 1rem;     /* rounded-2xl */
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* shadow-xl */
	border: 1px solid #f1f5f9;/* border-slate-100 */
	display: flex;
	align-items: center;
	gap: 0.75rem;            /* gap-3 */
}

#download .dl-float-card--bl { bottom: 1.5rem; left: 18%; animation: floatReverse 7s ease-in-out infinite; }
#download .dl-float-card--br { bottom: -1rem; right: -0.5rem; animation: floatSlow 6s ease-in-out infinite; }
#download .dl-float-card--tr { top: 1.5rem; right: -0.5rem; animation: floatReverse 7s ease-in-out infinite; }

#download .dl-float-icon {
	/* width: 2.5rem;          
	height: 2.5rem; */
	border-radius: 0.75rem;  /* rounded-xl */
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;        /* text-base */
}

#download .dl-float-card--bl .dl-float-icon { background: linear-gradient(to top right, #4f46e5, #9333ea); }
#download .dl-float-card--br .dl-float-icon { background: linear-gradient(to top right, #3b82f6, #9333ea); }
#download .dl-float-card--tr .dl-float-icon { background: linear-gradient(to top right, #10b981, #0d9488); }

#download .dl-float-text { text-align: left; }

/* 移动端（<640px）隐藏浮动卡片，避免遮挡与视觉杂乱 */
#download .dl-float-card { display: none; }

#download .dl-float-title {
	font-size: 0.75rem;      /* text-xs */
	font-weight: 900;        /* font-black */
	color: #0f172a;
	margin: 0;
}

/* ============================================================
   Download Section
   ============================================================ */
#download .dl-download {
	padding-top: 5rem;       /* py-20 */
	padding-bottom: 5rem;
	position: relative;
}

#download .dl-section-head {
	text-align: center;
	max-width: 48rem;        /* max-w-3xl */
	margin: 0 auto 3.5rem;   /* mb-14 */
}

#download .dl-section-head--narrow { max-width: 42rem; } /* max-w-2xl */

#download .dl-section-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;   /* tracking-widest */
	text-transform: uppercase;
	padding: 0.375rem 0.875rem;
	border-radius: 9999px;
	border: 1px solid;
	margin-bottom: 0.75rem;   /* mb-3 */
}

#download .dl-section-badge--blue {
	color: #2563eb; background: #eff6ff; border-color: rgba(191,219,254,0.8);
}
#download .dl-section-badge--purple {
	color: #9333ea; background: #faf5ff; border-color: rgba(221,214,254,0.8);
}
#download .dl-section-badge--indigo {
	color: #4f46e5; background: #eef2ff; border-color: rgba(199,210,254,0.8);
}

#download .dl-section-title {
	font-size: 1.875rem;     /* text-3xl (mobile) */
	font-weight: 900;
	color: #0f172a;
	letter-spacing: -0.025em;
	margin: 0 0 1rem 0;      /* mb-4 */
	line-height: 1.2;
}

#download .dl-section-desc {
	color: #475569;
	font-size: 0.975rem;     /* text-sm */
	line-height: 1.625;
	margin: 0.75rem 0 0 0;   /* mt-3 */
}

#download .dl-tabs {
	display: inline-flex;
	padding: 0.375rem;       /* p-1.5 */
	border-radius: 1rem;     /* rounded-2xl */
	background: rgba(226, 232, 240, 0.8); /* bg-slate-200/80 */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	margin-top: 2rem;        /* mt-8 */
	border: 1px solid #ffffff;
	box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); /* shadow-inner */
}

#download .dl-tab {
	padding: 0.75rem 1.5rem; /* py-3 px-6 */
	border-radius: 0.75rem;  /* rounded-xl */
	font-size: 0.75rem;      /* text-xs (mobile) */
	font-weight: 800;        /* font-extrabold */
	color: #475569;         /* slate-600 */
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
}

#download .dl-tab:hover { color: #0f172a; }

#download .dl-tab.active {
	background: #ffffff;
	color: #2563eb;          /* blue-600 */
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* shadow-sm */
}

#download .dl-tab img { width: 1.25rem; height: 1.25rem; object-fit: contain; } /* w-5 h-5 */

#download .dl-banner {
	border-radius: 1rem;     /* rounded-2xl */
	padding: 1rem;           /* p-4 */
	margin-bottom: 2.5rem;   /* mb-10 */
	border: 1px solid #dbeafe;/* border-blue-100 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.75rem;      /* text-xs */
}

#download .dl-banner-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;            /* gap-3 */
}

#download .dl-banner-icon {
	width: 2rem; height: 2rem; /* w-8 h-8 */
	border-radius: 0.75rem;  /* rounded-xl */
	background: #dbeafe;    /* bg-blue-100 */
	color: #2563eb;         /* text-blue-600 */
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.875rem;     /* text-sm */
	flex-shrink: 0;
}

#download .dl-banner-title {
	font-weight: 800;       /* font-extrabold */
	color: #0f172a;
	margin: 0;
	margin-bottom: 0.3rem;
}

#download .dl-banner-desc {
	color: #64748b;         /* text-slate-500 */
	font-size: 14px;        /* text-[11px] */
	margin: 0;
}

/* ---- Download Cards Grid ---- */
#download .dl-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;             /* gap-6 */
}

#download .dl-card {
	border-radius: 1.5rem;   /* rounded-3xl */
	padding: 1.5rem;         /* p-6 */
	border: 1px solid #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}

#download .dl-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1rem;    /* mb-4 */
}

#download .dl-card-icon {
	width: 3.5rem;          /* w-14 = 56px */
	height: 3.5rem;
	border-radius: 1rem;    /* rounded-2xl */
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;       /* text-2xl */
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
	/* 图标为自带深色背景的 PNG，容器不再使用渐变 */
	background: #ffffff;
	overflow: hidden;
	padding: 0.4rem;
}

#download .dl-card:hover .dl-card-icon { transform: scale(1.1); }

#download .dl-card-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0.25rem;
}

#download .dl-card-title {
	font-size: 1.25rem;     /* text-xl */
	font-weight: 800;       /* font-extrabold */
	color: #0f172a;
	margin: 0 0 0.5rem 0;   /* mb-2 */
}

#download .dl-card-specs {
	display: flex;
	align-items: center;
	gap: 0.75rem;           /* gap-3 */
	font-size: 0.75rem;      /* text-xs */
	font-weight: 600;
	color: #94a3b8;         /* slate-400 */
	margin-bottom: 1rem;     /* mb-4 */
}

/* icon 与文本垂直居中、保持小间距 */
#download .dl-card-specs .dl-spec-ver,
#download .dl-card-specs .dl-spec-size {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;            /* icon 与文字间距 */
	white-space: nowrap;
}

#download .dl-card-specs .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#download .dl-card-specs .fa-book { color: #3b82f6; } /* blue-500 版本号图标 */
#download .dl-card-specs .fa-hard-drive { color: #f59e0b; }  /* amber-500 大小图标 */

#download .dl-card-features {
	margin-bottom: 1.5rem;   /* mb-6 */
}

#download .dl-card-features li {
	display: flex;
	align-items: center;
	gap: 0.5rem;            /* gap-2 */
	font-size: 0.75rem;      /* text-xs */
	color: #475569;         /* slate-600 */
	font-weight: 500;
	margin-bottom: 0.5rem;   /* space-y-2 */
}

#download .dl-card-features li:last-child { margin-bottom: 0; }

#download .dl-card-features .icon {
	color: #10b981;         /* emerald-500 */
	font-size: 10px;        /* text-[10px] */
}

#download .dl-card-actions {
	padding-top: 1rem;       /* pt-4 */
	border-top: 1px solid #f1f5f9; /* border-slate-100 */
}

#download .dl-card-actions-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;            /* gap-2 */
}

#download .dl-card-btn {
	flex: 1;
	padding: 0.75rem 1rem;   /* py-3 px-4 */
	border-radius: 0.75rem;  /* rounded-xl */
	background: #0f172a;     /* bg-slate-900 */
	color: #ffffff;
	font-weight: 700;
	font-size: 0.75rem;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

#download .dl-card-btn:hover { background: #2563eb; } /* hover:bg-blue-600 */
#download .dl-card:hover .dl-card-btn {
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
}

/* macOS 双版本下载按钮：默认并列 Apple M / Intel X86，悬停任一按钮切换卡片版本信息 */
#download .dl-card-actions-inner .dl-card-btn-alt {
	background: #334155; /* slate-700 次级按钮与主按钮区分 */
}
#download .dl-card-actions-inner .dl-card-btn-alt:hover {
	background: #2563eb; /* hover 变蓝，与主按钮一致 */
}

#download .dl-qr-wrapper { position: relative; }

#download .dl-qr-btn {
	width: 2.5rem;          /* w-10 */
	height: 2.5rem;
	border-radius: 0.75rem;
	background: #f1f5f9;    /* bg-slate-100 */
	color: #334155;         /* text-slate-700 */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;     /* text-sm */
	transition: background-color 0.2s ease;
}

#download .dl-qr-btn:hover { background: #e2e8f0; } /* hover:bg-slate-200 */

#download .dl-qr-popover {
	position: absolute;
	bottom: 3rem;           /* bottom-12 */
	right: 0;
	display: none;           /* hidden by default */
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	padding: 1rem;           /* p-4 */
	border-radius: 1rem;     /* rounded-2xl */
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
	border: 1px solid #e2e8f0; /* border-slate-200 */
	z-index: 30;
	width: 11rem;            /* w-44 */
}

#download .dl-qr-wrapper:hover .dl-qr-popover { display: flex; }

#download .dl-qr-popover svg { width: 8rem; height: 8rem; } /* w-32 h-32 */
#download .dl-qr-popover img { width: 8rem; height: 8rem; object-fit: contain; }
#download .dl-qr-popover .dl-qr-fallback { font-size: 10px; color: #94a3b8; padding: 1rem 0; }

#download .dl-qr-popover .dl-qr-label {
	font-size: 10px;
	font-weight: 700;
	color: #475569;
	margin-top: 0.5rem;
}

/* ============================================================
   Showcase Section
   ============================================================ */
#download .dl-showcase {
	padding-top: 5rem;
	padding-bottom: 5rem;
	position: relative;
}

#download .dl-showcase-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;               /* gap-8 */
	align-items: stretch;
}

#download .dl-showcase-card {
	border-radius: 1.5rem;   /* rounded-3xl */
	padding: 2rem;           /* p-8 */
	border: 1px solid rgba(255,255,255,0.9);
	box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.06); /* shadow-glass */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}

#download .dl-showcase-card-inner,
#download .dl-showcase-top { position: relative; z-index: 10; }

/* Showcase top: text left + image right (wide card only) */
#download .dl-showcase-card--wide .dl-showcase-top {
	display: flex;
	align-items: center;
	gap: 2rem;
}

#download .dl-showcase-top-content {
	flex: 1 1 auto;
	min-width: 0;
}

#download .dl-showcase-top-img {
	flex: 0 0 auto;
	width: 46%;
	max-width: 340px;
	height: auto;
	border-radius: 1rem;
}

/* Showcase top responsive: stack vertically on small screens */
@media screen and (max-width: 767.98px) {
	#download .dl-showcase-card--wide .dl-showcase-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
	#download .dl-showcase-top-img {
		width: 100%;
		max-width: 100%;
	}
}

#download .dl-showcase-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem; /* px-3 py-1 */
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 1rem;     /* mb-4 */
}

#download .dl-showcase-badge--blue {
	background: rgba(219, 234, 254, 0.8); /* blue-100/80 */
	color: #1d4ed8;          /* blue-700 */
}

#download .dl-showcase-badge--emerald {
	background: rgba(209, 250, 229, 0.8); /* emerald-100/80 */
	color: #047857;          /* emerald-700 */
}

#download .dl-showcase-title {
	font-size: 1.5rem;       /* text-2xl (card 1) */
	font-weight: 900;
	color: #0f172a;
	margin: 0 0 0.75rem 0;   /* mb-3 */
	line-height: 1.3;
}

#download .dl-showcase-title--sm { font-size: 1.25rem; margin-bottom: 0.5rem; } /* text-xl card 2 */

#download .dl-showcase-desc {
	color: #475569;
	font-size: 0.75rem;      /* text-xs (mobile) */
	line-height: 1.625;
	max-width: 36rem;        /* max-w-xl */
	margin: 0;
}

/* ---- Node Animation Diagram ---- */
#download .dl-node-diagram {
	margin: 2rem 0;         /* my-8 */
	padding: 1.5rem 0;       /* py-6 */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#download .dl-nodes {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 28rem;        /* max-w-md */
}

/* ---- nodes ---- */
#download .dl-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;            /* gap-2 */
	flex-shrink: 0;
}

#download .dl-node-icon {
	width: 3.5rem;          /* w-14 */
	height: 3.5rem;
	border-radius: 1rem;    /* rounded-2xl */
	background: #ffffff;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* shadow-xl */
	border: 2px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

#download .dl-node-icon .icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#download .dl-showcase-card:hover .dl-node-icon { transform: scale(1.1); }

#download .dl-node-label {
	font-size: 14px;        /* text-[10px] */
	font-weight: 700;
	color: #334155;         /* slate-700 */
}

/* Stage 1: 应用开发 — sky blue, code pulse */
#download .dl-node-dev .dl-node-icon {
	border-color: #38bdf8;              /* --dev-color */
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}
#download .dl-node-dev .icon { stroke: #38bdf8; }
#download .dl-node-dev .dl-dev-pulse {
	animation: dlCodePulse 1.8s infinite ease-in-out;
}

/* Stage 2: 应用提交 — amber, upload float */
#download .dl-node-submit .dl-node-icon {
	border-color: #f59e0b;              /* --submit-color */
	box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}
#download .dl-node-submit .icon { stroke: #f59e0b; }
#download .dl-node-submit .dl-submit-float {
	animation: dlFloatUp 1.5s infinite ease-in-out;
}

/* Stage 3: 应用上架 — emerald launch, emphasized endpoint */
#download .dl-node-launch .dl-launch-img {
    width: 3.5rem;
    height: 3.5rem;
	border-radius: 1.25rem; /* rounded-[20px] */
	object-fit: cover;
	box-shadow: 0 0 45px -5px rgb(33 150 243 / 70%);
	animation: dlRocketBounce 2s infinite ease-in-out;
}
#download .dl-node-launch .dl-node-label {
	font-size: 0.9rem;      /* text-sm */
	font-weight: 900;       /* font-black */
	color: #2196F3;         /* emerald-600 */

}

/* ---- connector lines ---- */
#download .dl-connector-line {
	flex: 1;
	height: 3px;
	background: #e2e8f0;    /* bg-slate-200 */
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	margin: 0 0.75rem;
	margin-top: -1.25rem;   /* align with icon center (icon half-height + gap) */
}

#download .dl-connector-line::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, #38bdf8, transparent);
	animation: dlFlowLine 2s linear infinite;
}

#download .dl-connector-line.line-2::after {
	background: linear-gradient(90deg, transparent, #f59e0b, transparent);
	animation-delay: 1s;
}

@keyframes dlFlowLine {
	0%   { left: -100%; }
	100% { left: 100%; }
}

@keyframes dlCodePulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.9); opacity: 0.6; }
}

@keyframes dlFloatUp {
	0%, 100% { transform: translateY(3px); opacity: 0.5; }
	50% { transform: translateY(-3px); opacity: 1; }
}

@keyframes dlRocketBounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-4px) rotate(3deg); }
}

@keyframes dlHighlightRing {
	0%   { transform: scale(0.9); opacity: 1; }
	100% { transform: scale(1.4); opacity: 0; }
}

/* ---- responsive: vertical stack on small screens ---- */
@media screen and (max-width: 767.98px) {
	#download .dl-node-diagram {
		padding: 1rem 0;
	}

	#download .dl-nodes {
		flex-direction: column;
		gap: 1rem;
		max-width: 12rem;    /* center column */
	}

	#download .dl-connector-line {
		width: 3px;
		height: 2rem;
		margin: 0;
		border-radius: 2px;
	}

	#download .dl-connector-line::after {
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		animation: dlFlowLineVertical 2s linear infinite;
	}

	#download .dl-connector-line.line-2::after {
		animation-delay: 1s;
	}

	@keyframes dlFlowLineVertical {
		0%   { top: -100%; }
		100% { top: 100%; }
	}
}

#download .dl-showcase-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	font-weight: 700;
	color: #64748b;         /* slate-500 */
	padding-top: 1rem;       /* pt-4 */
	border-top: 1px solid #f1f5f9; /* border-slate-100 */
}

#download .dl-showcase-footer .dl-showcase-link { color: #2563eb; }

/* ---- Recruit Activities Marquee (vertical) ---- */
#download .dl-marquee {
	margin: 1.5rem 0;       /* my-6 */
	overflow: hidden;
	border-radius: 1rem;    /* rounded-2xl */

	height: 21.5rem;        /* 固定视窗高度，超出部分滚动显示 */
}

#download .dl-marquee-track {
	display: flex;
	flex-direction: column;
	width: 100%;
	animation: dl-marquee-scroll 30s linear infinite;
}

#download .dl-marquee:hover .dl-marquee-track {
	animation-play-state: paused;
}

#download .dl-marquee-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;          /* gap-3 */
	padding: 0.75rem;      /* p-3 */
	padding-bottom: 0;     /* group 间距由 gap 承担 */
}

#download .dl-recruit-card {
	flex: 0 0 auto;
	width: 100%;
	padding: 0.875rem 1rem;
	border-radius: 0.75rem;   /* rounded-xl */
	background: #f8f8f8; /* slate-800/90 */
	border: 1px solid rgb(148 163 184 / 11%); /* slate-400/20 */
	display: flex;
	flex-direction: column;
	gap: 0.375rem;           /* gap-1.5 */
}

#download .dl-recruit-tag {
	align-self: flex-start;
	font-size: 0.625rem;      /* text-[10px] */
	font-weight: 800;
	letter-spacing: 0.05em;
	color: #34d399;           /* emerald-400 */
	background: rgba(16, 185, 129, 0.15);
	border-radius: 999px;
	padding: 0.125rem 0.5rem;
}

#download .dl-recruit-title {
	margin: 0;
	font-size: 0.875rem;      /* text-sm */
	font-weight: 800;
	color: #2e2e2e;           /* slate-50 */
}

#download .dl-recruit-desc {
	margin: 0;
	font-size: 0.75rem;       /* text-xs */
	line-height: 1.5;
	color: #94a3b8;           /* slate-400 */
}

@keyframes dl-marquee-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

#download .dl-showcase-tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6rem;
	font-weight: 600;
	color: #959595;       /* slate-700 */
}

#download .dl-showcase-tag .fa-circle-check,
#download .dl-showcase-tag .icon { color: #10b981; } /* emerald-500 */

/* ============================================================
   FAQ Section
   ============================================================ */
#download .dl-faq {
	padding-top: 5rem;
	padding-bottom: 5rem;
	position: relative;
}

#download .dl-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;             /* gap-6 */
}

#download .dl-faq-card {
	border-radius: 1.5rem;   /* rounded-3xl */
	padding: 2rem;           /* p-8 */
	border: 1px solid rgba(255,255,255,0.9);
	box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.06);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#download .dl-faq-head {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 4rem;
}

#download .dl-faq-top {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#download .dl-faq-card-head,
#download .dl-faq-q-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;           /* gap-3 */
	margin-bottom: 1rem;     /* mb-4 */
}

#download .dl-faq-num {
	width: 2.5rem;          /* w-10 */
	height: 2.5rem;
	border-radius: 1rem;     /* rounded-2xl */
	font-weight: 900;       /* font-black */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;        /* text-base */
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
	flex-shrink: 0;
}

#download .dl-faq-num--blue { background: #2563eb; color: #fff; }
#download .dl-faq-num--purple { background: #f3e8ff; color: #6b21a8; box-shadow: none; } /* purple-100 bg, purple-700 text */
#download .dl-faq-num--emerald { background: #d1fae5; color: #047857; box-shadow: none; } /* emerald-100, emerald-700 */
#download .dl-faq-num--amber { background: #fef3c7; color: #b45309; box-shadow: none; } /* amber-100, amber-700 */
#download .dl-faq-num--rose { background: #ffe4e6; color: #9f1239; box-shadow: none; } /* rose-100, rose-700 */

#download .dl-faq-q {
	font-size: 1rem;     /* text-lg */
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 0.75rem 0;   /* mb-3 */
	line-height: 1.4;
}

#download .dl-faq-q--lg { font-size: 1.25rem; } /* text-xl in large card */

#download .dl-faq-a {
	color: #475569;
	font-size: 0.75rem;      /* text-xs */
	line-height: 1.625;
	margin: 0;
}

#download .dl-faq-a--sm { font-size: 0.75rem; } /* sm:text-sm */

#download .dl-faq-a strong { color: #0f172a; font-weight: 700; }
#download .dl-faq-a code {
	display: block;
	margin: 0.5rem 0;       /* my-2 */
	padding: 0.5rem;         /* p-2 */
	border-radius: 0.5rem;   /* rounded-lg */
	background: #0f172a;     /* bg-slate-900 */
	color: #e2e8f0;         /* text-slate-200 */
	font-family: monospace;
	font-size: 10px;        /* text-[10px] */
	overflow-x: auto;
}

#download .dl-faq-tip {
	padding: 1rem;           /* p-4 */
	border-radius: 1rem;     /* rounded-2xl */
	background: rgba(239, 246, 255, 0.8); /* blue-50/80 */
	border: 1px solid #dbeafe; /* border-blue-100 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	font-weight: 700;
	color: #1d4ed8;          /* blue-700 */
	margin-top: 20px;
}

#download .dl-faq-tip a:hover { text-decoration: underline; }
#download .dl-faq-tip .dl-faq-tip-link {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* ============================================================
   Toast Notification
   ============================================================ */
#download .dl-toast {
	position: fixed;
	bottom: 2rem;            /* bottom-8 */
	right: 2rem;             /* right-8 */
	z-index: 50;
	transform: translateY(5rem); /* translate-y-20 */
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
}

#download .dl-toast.show {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

#download .dl-toast-inner {
	background: rgba(15, 23, 42, 0.95); /* slate-900/95 */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #ffffff;
	padding: 1rem 1.25rem;   /* py-4 px-5 */
	border-radius: 1rem;     /* rounded-2xl */
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
	display: flex;
	align-items: center;
	gap: 0.875rem;          /* gap-3.5 */
	border: 1px solid #334155; /* border-slate-700 */
}

#download .dl-toast-icon {
	width: 2rem;            /* w-8 */
	height: 2rem;
	border-radius: 0.75rem;  /* rounded-xl */
	background: rgba(59, 130, 246, 0.2); /* blue-500/20 */
	color: #60a5fa;         /* blue-400 */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;        /* text-base */
	flex-shrink: 0;
}

#download .dl-toast-text {
	/* wrapper for toast title + message */
}

#download .dl-toast-title {
	font-size: 0.75rem;      /* text-xs */
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}

#download .dl-toast-msg {
	font-size: 11px;        /* text-[11px] */
	color: #94a3b8;         /* slate-400 */
	margin: 0;
}
.blue-600 {
	--tw-text-opacity: 1;
	color: rgb(37 99 235 / var(--tw-text-opacity, 1));
	background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
	border-color: rgb(191 219 254 / 0.8);
}

.purple-600 {
	--tw-text-opacity: 1;
	color: rgb(147 51 234 / var(--tw-text-opacity, 1));
	background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
	border-color: rgb(233 213 255 / 0.8);
}

.emerald-700 {
	--tw-text-opacity: 1;
	color: rgb(4 120 87 / var(--tw-text-opacity, 1));
	background-color: rgb(209 250 229 / 0.8);
}

.indigo-600 {
	--tw-text-opacity: 1;
	color: rgb(79 70 229 / var(--tw-text-opacity, 1));
	background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
	border-color: rgb(199 210 254 / 0.8);
}

.amber-700 {
	--tw-text-opacity: 1;
	color: rgb(180 83 9 / var(--tw-text-opacity, 1));
	background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.rose-700 {
	--tw-text-opacity: 1;
	color: rgb(190 18 60 / var(--tw-text-opacity, 1));
	background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
@media (min-width: 1024px) {
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
}
@media (min-width: 1024px) {
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
}
/* ============================================================
   Responsive: ≥ 640px (sm)
   ============================================================ */
@media screen and (min-width: 640px) {
	/* Hero title & desc scale up */
	#download .dl-hero-title { font-size: 3rem; }       /* text-5xl */
	#download .dl-hero-desc { font-size: 1.125rem; }     /* text-lg */

	/* Hero select grid: 2 columns */
	#download .dl-select-grid { grid-template-columns: repeat(2, 1fr); }

	/* Section titles scale up */
	#download .dl-section-title { font-size: 2.25rem; }  /* text-4xl */

	/* Tab font size up */
	#download .dl-tab { font-size: 0.875rem; }           /* text-sm */

	/* Banner: row layout */
	#download .dl-banner {
		flex-direction: row;
	}

	/* Cards grid: 2 columns */
	#download .dl-cards-grid { grid-template-columns: repeat(2, 1fr); }

	/* Float card bottom-right & top-right shift further right */
	#download .dl-float-card--br { right: -1.5rem; }     /* sm:-right-6 */
	#download .dl-float-card--tr { right: -1.5rem; }

	/* 桌面端恢复浮动卡片显示（移动端默认隐藏） */
	#download .dl-float-card { display: flex; }

	/* Showcase desc & title scale up */
	#download .dl-showcase-desc { font-size: 0.875rem; } /* text-sm */
	#download .dl-showcase-title { font-size: 1.5rem; }

	/* FAQ large card answer slightly larger */
	#download .dl-faq-a--lg { font-size: 0.875rem; }     /* sm:text-sm */

	/* Showcase card 2 title */
	#download .dl-showcase-title--sm { font-size: 1.25rem; }
}

/* ============================================================
   Responsive: ≥ 768px (md)
   ============================================================ */
@media screen and (min-width: 768px) {
	/* Header navigation visible */
	#download .dl-nav {
		display: flex;
		align-items: center;
		gap: 0;
	}

	/* Hero padding increases */
	#download .dl-hero {
		padding-top: 10rem;  /* md:pt-40 */
		padding-bottom: 8rem; /* md:pb-32 */
	}

	/* FAQ grid: 3 columns; large card spans 2 */
	#download .dl-faq-grid { grid-template-columns: repeat(3, 1fr); }
	#download .dl-faq-card.large,
	#download .dl-faq-card-large { grid-column: span 2; }
}

/* ============================================================
   Responsive: ≥ 1024px (lg)
   ============================================================ */
@media screen and (min-width: 1024px) {
	/* Hero grid: 12-col 5/7 split */
	#download .dl-hero-grid {
		grid-template-columns: repeat(12, 1fr);
		gap: 2rem;           /* lg:gap-8 */
	}
	#download .dl-hero-left { grid-column: span 5; }
	#download .dl-hero-right { grid-column: span 7; }

	/* Hero title largest */
	#download .dl-hero-title { font-size: 3.75rem; }     /* text-6xl */

	/* Cards grid: 3 columns */
	#download .dl-cards-grid { grid-template-columns: repeat(3, 1fr); }

	/* Showcase grid: 12-col 7/5 split */
	#download .dl-showcase-grid {
		grid-template-columns: repeat(12, 1fr);
	}
	#download .dl-showcase-card--wide { grid-column: span 7; }
	#download .dl-showcase-card--narrow { grid-column: span 5; }
}