/* ============================================================
   loading-themes.css  后台启动屏样式（单一来源）
   由 index.html 与 public/loading-preview.html 共同引用；
   主题清单唯一来源：fast-kc-local/service/common/constant/ThemeConst.php
   ============================================================ */

/* ========== RESET & BASE ========== */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		/* ========== LOADING CONTAINER ========== */
		.app-loading {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			overflow: hidden;
			z-index: 9999;
			font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
		}

		/* ========== STAR CANVAS ========== */
		#starCanvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			pointer-events: none;
		}

		/* ========== DYNAMIC GRADIENT BACKGROUND ========== */
		.bg-dynamic-gradient {
			position: absolute;
			width: 200%;
			height: 200%;
			top: -50%;
			left: -50%;
			background: linear-gradient(135deg,
			#C8E0FF, #BFD9FF, #B4D1FF, #C4E0FF,
			#A9CAFF, #BEDEFF, #C8E0FF);
			background-size: 400% 400%;
			animation: bgColorShift 12s linear infinite;
			z-index: -2;
		}

		@keyframes bgColorShift {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}

		/* ========== GRID BACKGROUND ========== */
		.bg-grid {
			position: absolute;
			width: 100%;
			height: 100%;
			background-image:
				linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
			background-size: 40px 40px;
			z-index: -1;
			opacity: 0.8;
			animation: waveMove 12s ease-in-out infinite;
		}

		@keyframes waveMove {
			0% { transform: translateY(0) scale(1); }
			50% { transform: translateY(4px) scale(1.02); }
			100% { transform: translateY(0) scale(1); }
		}

		/* ========== BRAND LIGHT EFFECT ========== */
		.bg-brand-light {
			position: absolute;
			width: 100%;
			height: 100%;
			background: radial-gradient(1800px 700px at 50% 50%,
			rgba(184, 216, 255, 0.25) 0%,
			transparent 65%);
			animation: paperCutGlow 8s ease-in-out infinite alternate;
			z-index: 0;
		}

		@keyframes paperCutGlow {
			0% { opacity: 0.8; transform: scale(1); }
			100% { opacity: 1; transform: scale(1.1); }
		}

		/* ========== LOADING CONTENT ========== */
		.app-loading__content {
			position: relative;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.app-loading__logo {
			animation: logoBreath 3s ease-in-out infinite;
			width: 100px;
			height: 100px;
		}

		.app-loading__logo img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.app-loading__title {
			font-size: 24px;
			color: #007ACC;
			letter-spacing: 2px;
			margin-top: 18px;
			margin-bottom: 28px;
			font-weight: 500;
		}

		.app-loading__progress {
			position: relative;
			width: 380px;
			height: 16px;
			background: rgba(255, 255, 255, 0.85);
			border-radius: 99px;
			margin-bottom: 18px;
			border: 1px solid rgba(0, 122, 204, 0.2);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(23, 74, 158, 0.12);
		}

		.app-loading__progress-bar {
			position: relative;
			height: 100%;
			width: 0%;
			background: linear-gradient(90deg, #00A8E8, #00B4D8, #00C49F, #70E000);
			border-radius: 99px;
			box-shadow: 0 0 12px rgba(0, 168, 232, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
			transition: width 0.05s linear;
		}

		/* 条内星芒：四角闪光层，向左缓慢漂移并呼吸 */
		.app-loading__progress-bar::before {
	background-image: none;
	animation: none;
}

		/* 细碎星点层：反向漂移、异相闪烁，与星芒层拉出视差 */
		.app-loading__progress-bar::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: inherit;
			background-image:
				radial-gradient(1.8px 1.8px at 12px 28%, rgba(255,255,255,.9) 0 45%, transparent 58%),
				radial-gradient(1.3px 1.3px at 31px 72%, rgba(255,255,255,.7) 0 45%, transparent 58%),
				radial-gradient(2.2px 2.2px at 48px 43%, rgba(255,255,255,.85) 0 42%, transparent 58%),
				radial-gradient(1.2px 1.2px at 69px 21%, rgba(255,255,255,.65) 0 45%, transparent 58%),
				radial-gradient(1.5px 1.5px at 85px 79%, rgba(255,255,255,.8) 0 45%, transparent 58%),
				radial-gradient(1.3px 1.3px at 101px 50%, rgba(255,255,255,.6) 0 45%, transparent 58%),
				radial-gradient(2px 2px at 118px 29%, rgba(255,255,255,.85) 0 42%, transparent 58%),
				radial-gradient(1.2px 1.2px at 133px 64%, rgba(255,255,255,.6) 0 45%, transparent 58%);
			background-size: 145px 100%;
			background-repeat: repeat-x;
			animation: starDriftB 6.5s linear infinite, starTwinkle2 3.4s ease-in-out infinite alternate;
			pointer-events: none;
		}

		@keyframes starDriftA {
			from {
				background-position-x: 0;
			}
			to {
				background-position-x: -160px;
			}
		}

		@keyframes starDriftB {
			from {
				background-position-x: 0;
			}
			to {
				background-position-x: 145px;
			}
		}

		@keyframes starTwinkle {
			from {
				opacity: .55;
			}
			to {
				opacity: 1;
			}
		}

		@keyframes starTwinkle2 {
			from {
				opacity: 1;
			}
			to {
				opacity: .45;
			}
		}

		/* 进度条动画 - 从0%到99% */
		@keyframes progressLoad {
			0% {
				width: 0%;
			}
			30% {
				width: 45%;
			}
			60% {
				width: 78%;
			}
			100% {
				width: 99%;
			}
		}

		/* 添加动画类 */
		.app-loading__progress-bar.animate {
			animation: progressLoad 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
		}

		.app-loading__tip {
			font-size: 15px;
			color: #007ACC;
			transition: opacity 0.4s ease-out;
			min-height: 22px;
			font-weight: 500;
			letter-spacing: 1px;
		}

		.app-loading__copyright {
			position: absolute;
			bottom: 30px;
			font-size: 13px;
			color: #29d;
			z-index: 10;
			opacity: 0.9;
		}

		@keyframes logoBreath {
			0% { opacity: 0.9; transform: scale(1); }
			50% { opacity: 1; transform: scale(1.03); }
			100% { opacity: 0.9; transform: scale(1); }
		}

		/* ========== DARK MODE ========== */
		.dark .app-loading {
			background: #0A1828;
		}

		.dark .bg-dynamic-gradient {
			background: linear-gradient(135deg, #182C47, #102038, #0A1828, #1A2F4B);
		}

		.dark .bg-grid {
			background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent),
			linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent);
		}

		.dark .app-loading__title {
			color: #88C0FF;
		}

		.dark .app-loading__tip {
			color: #99CCFF;
		}

		.dark .app-loading__copyright {
			color: #88B2CC;
		}

		.dark .app-loading__progress {
			background: rgba(30, 50, 70, 0.6);
			border-color: rgba(100, 160, 220, 0.3);
			box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 3px rgba(0, 0, 0, .45);
		}

		/* ========== BROWSER WARNING ========== */
		#versionCheck {
			display: none;
			position: fixed;
			z-index: 10000;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 40px;
			background: rgba(255, 255, 250, 0.96);
			color: #333;
			backdrop-filter: blur(8px);
			font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
			text-align: center;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.dark #versionCheck {
			background: rgba(10, 24, 40, 0.96);
			color: #eee;
		}

		#versionCheck h2 {
			line-height: 1.3;
			margin: 0 0 20px 0;
			font-size: 26px;
		}

		#versionCheck p {
			line-height: 1.5;
			margin: 12px 0;
			font-size: 15px;
			max-width: 600px;
		}

		.version-badge {
			display: inline-block;
			background: #007ACC;
			color: white;
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 14px;
			margin: 0 4px;
		}

/* ============================================================
   loading-themes.css（追加段）启动屏主题覆盖层
   约定：
   1) 覆盖规则一律以 html[data-theme="xxx"] 开头，优先级高于默认主题与 .dark 暗色规则；
      default 主题不需要任何覆盖规则，保持启动屏原始观感。
   2) 主题规则一律不声明 .app-loading__progress-bar 的 animation，
      避免顶掉 .app-loading__progress-bar.animate 的进度推进动画。
   3) 主题清单唯一来源为后端 service/common/constant/ThemeConst.php，
      此处新增主题须与 ThemeConst::getLoadingThemes() 同步登记。
   ============================================================ */