/* Generated by scripts/build_home_performance_assets.js */
/* source: css/cui.css */
/* By 5811.com.cn */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0; } table{border-collapse:collapse; border-spacing:0; } fieldset,img{border:0; } ol,ul{list-style:none; } caption,th{text-align:left; } q:before,q:after{content:''; } abbr,acronym{border:0; } .clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } .c{clear:both; } .n,em{font-weight:normal; font-style:normal; } .b{font-weight:bold; } .i{font-style:italic; } .fa{ } .fg{ } .ft{ } .fl{ } .fs{ }.fw{ } .tc{text-align:center; } .tr{text-align:right; } .tl{text-align:left; } .tdu{text-decoration:underline; } .tdn,.tdn:hover,a.tdl:hover{text-decoration:none; } .fc0{color:#000000; } .fc3{color:#333333; }
.fc6{color:#666666; } .fc9{color:#999999; } .fcr{color:red; } .fcw{color:white; } .fcb{color:blue; } .fcg{color:green; } .f0{font-size:0; } .f10{font-size:10px; } .f12{font-size:12px; } .f13{font-size:13px; } .f14{font-size:14px; } .f16{font-size:16px; } .f20{font-size:20px; } .f24{font-size:24px; } .vm{vertical-align:middle; } .vtb{vertical-align:text-bottom; } .vt{vertical-align:top; } .vn{vertical-align:-2px; } .vimg{margin-bottom:-3px; } .m0{margin:0; } .ml0{margin-left:0; } .ml5{margin-left:5px; } .ml10{margin-left:10px; } .ml20{margin-left:20px; } .mr0{margin-right:0; } .mr5{margin-right:5px; } .mr10{margin-right:10px; } .mr20{margin-right:20px; } .mt5{margin-top:5px; } .mt10{margin-top:10px; } .mt20{margin-top:20px; } .mb5{margin-bottom:5px; } .mb10{margin-bottom:10px; } .mb20{margin-bottom:20px; } .ml-1{margin-left:-1px; } .mt-1{margin-top:-1px; } .p1{padding:1px; } .pl5{padding-left:5px; } .p5{padding:5px; } .pt5{padding-top:5px; } .pr5{padding-right:5px; } .pb5{padding-bottom:5px; }
.p10{padding:10px; } .pl10{padding-left:10px; } .pt10{padding-top:10px; } .pr10{padding-right:10px; } .pb10{padding-bottom:10px; } .p20{padding:20px; } .pl20{padding-left:20px; } .pt20{padding-top:20px; } .pr20{padding-right:20px; } .pb20{padding-bottom:20px; } .rel,.pr{position:relative; } .abs,.pa{position:absolute; } .dn{display:none; } .df{display:flex;} .aic{align-items:center;} .jcb{justify-content:space-between;} .jcc{justify-content:center;} .fww{flex-wrap:wrap;} .flex1{flex:1;} .dib{-moz-inline-stack:inline-block; display:inline-block; } .di{display:inline; } .ovh{overflow:hidden; } .ovs{overflow:scroll; } .vh{visibility:hidden; } .vv{visibility:visible; } .lh14{line-height:14px; } .lh16{line-height:16px; } .lh18{line-height:18px; } .lh20{line-height:20px; } .lh22{line-height:22px; } .lh24{line-height:24px;}   .z{_zoom:1; } .h1{height:1px; } .h5{height:5px; } .h10,.h{height:10px; } .h15{height:15px; } .h20{height:20px; } .gap5{gap:5px;} .gap10{gap:10px;} .gap15{gap:15px;} .gap20{gap:20px;} .gap30{gap:30px;}

/* source: css/lib.css */
/* inlined css/lib.part-01.css */
/*-----------------[初始化]--------------*/
*{ outline:none;word-wrap:break-word;}
body{color: #333;font-size: 14px;font-family:"微软雅黑","Microsoft Yahei",Arial, Helvetica, sans-serif; line-height: 1.6;}
a{color: #333; outline:none; text-decoration:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s}
h1,h2,h3,h4,h5,h6,i.cutline,i.require{ font-weight:normal; font-style: normal;}
a:hover{ text-decoration:none;}
img{max-width: 100%; vertical-align: middle; display: inline-block;}
img,.ani{
	transition: .3s;
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	-o-transition: .3s;
}
input,textarea,select,button{font-size: 14px;font-family:"微软雅黑","Microsoft Yahei",Arial, Helvetica, sans-serif;  outline: 0; background: none; border: none;-o-box-sizing: border-box;box-sizing: border-box;
}
input[type='text']:focus,textarea:focus,select:focus{ border-color: var(--xl-theme-accent, #d4a843) !important;}
input[type='submit'],input[type='reset'],input[type='button'],button{cursor: pointer;-moz-appearance: none; appearance: none; -webkit-appearance: none;}

input[type='radio'],input[type='checkbox']{ display: inline-block; vertical-align: middle;}
input[type='radio'],input[type='checkbox']{ width: 18px; height: 18px;  border: 1px solid #666; background-color: #fff; -o-background-size: 100% 100%; background-size: 100% 100%; -moz-appearance: none; appearance: none; -webkit-appearance: none; outline: 0; -moz-box-sizing: border-box; box-sizing: border-box;}
input[type='radio']{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; }
input[type='checkbox']{ border-radius:4px ; -webkit-border-radius:4px ; -moz-border-radius:4px ; -ms-border-radius:4px ; -o-border-radius:4px ; }
input[type='radio']:checked{ border-color: var(--xl-theme-accent, #d4a843); background-color: #fff;background-image: url("../images/icon/checked_radio.png");}
input[type='checkbox']:checked{ background-image: url("../images/icon/checked.png"); background-color: var(--xl-theme-accent, #d4a843); border-color: var(--xl-theme-accent, #d4a843);}

.tc{text-align:center;}
.tl{text-align:left}
.tr{text-align:right}
/*布局*/
/* 清理浮动 */

.rd2{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; }.rd3{ border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; }.rd4{ border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; }.rd5{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; }.rd6{ border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; }.rd7{ border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px; -ms-border-radius:7px; -o-border-radius:7px; }.rd8{ border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px; }.rd9{ border-radius:9px; -webkit-border-radius:9px; -moz-border-radius:9px; -ms-border-radius:9px; -o-border-radius:9px; }.rd10{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; }.rd11{ border-radius:11px; -webkit-border-radius:11px; -moz-border-radius:11px; -ms-border-radius:11px; -o-border-radius:11px; }.rd12{ border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; }.rd13{ border-radius:13px; -webkit-border-radius:13px; -moz-border-radius:13px; -ms-border-radius:13px; -o-border-radius:13px; }.rd14{ border-radius:14px; -webkit-border-radius:14px; -moz-border-radius:14px; -ms-border-radius:14px; -o-border-radius:14px; }.rd15{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; }.rd20{ border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px; }.rd24{ border-radius:24px; -webkit-border-radius:24px; -moz-border-radius:24px; -ms-border-radius:24px; -o-border-radius:24px; }.rd28{ border-radius:28px; -webkit-border-radius:28px; -moz-border-radius:28px; -ms-border-radius:28px; -o-border-radius:28px; }.rd30{ border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; }.rd40{ border-radius:40px; -webkit-border-radius:40px; -moz-border-radius:40px; -ms-border-radius:40px; -o-border-radius:40px; }.rd50{ border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; }.rd60{border-radius:60px;}.rd70{ border-radius:70px; -webkit-border-radius:70px; -moz-border-radius:70px; -ms-border-radius:70px; -o-border-radius:70px; }.rd80{border-radius:80px;}.rd90{border-radius:90px;}
.rdhalf{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; }.rdwhole{ /* Firefox */ /* Safari 和 Chrome */border-radius:  100%; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */} 

.mt10{ margin-top: 10px;}.mt15{ margin-top: 15px;}.mt20{ margin-top: 20px;}.mt25{ margin-top: 25px;}.mt30{ margin-top: 30px;}.mt35{ margin-top: 35px;}.mt40{ margin-top: 40px;}.mt45{ margin-top: 45px;}.mt50{ margin-top: 50px;}.mt60{ margin-top: 60px;}.mt70{ margin-top: 70px;}.mt80{ margin-top: 80px;}.mt90{ margin-top: 90px;}.mt100{ margin-top:100px;}

.bcf{ color: #fff;}
.bc3{ color: #333;}
.bcc{ color: #ccc;}
.bc9{ color: #999;}
.bc6{ color: #666;}
.b{ font-weight: bold;}

.bg_fa{ background-color: #fafafa;}
.bg_f2{ background-color: #f2f2f2;}
.bg_f1{ background-color: #f1f1f1;}
.bg_f5{ background-color: #f5f5f5;}
.bg_f6{ background-color: #f6f6f6;}
.bg_f7{ background-color: #f7f7f7;}
.bg_f8{ background-color: #f8f8f8;}
.bg_e{ background-color: #eee;}
.bg_d{ background-color: #ddd;}
.bg_w{ background-color: #fff;}
.elli{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.elli2,.elli3,.elli4{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;}
.elli2{-webkit-line-clamp:2; }
.elli3{-webkit-line-clamp:3; }
.elli4{-webkit-line-clamp:4; }




.bcover{ -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat:  no-repeat;}
.pcshow{ display:block;}
.wapshow{ display:none;}
.wp{width: 74%;margin: 0 auto; }
.wp1010{width: 100%; max-width:1010px;margin: 0 auto; }

.btn{ display: inline-block;}
.btn .icon,.btn .iconfont,.btn .val,.btn .mc{ display: inline-block; vertical-align: middle;}
.iconfont::before,.iconfont::before{ display: inline-block; line-height: 1; vertical-align: middle;}
.ibm{ display: inline-block; vertical-align: middle;}
@-webkit-keyframes zoomin_out{
0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(1.1);}
100%{-webkit-transform:scale(1);}
}
@keyframes zoomin_out{
0%{-webkit-transform:scale(1);transform:scale(1);}
50%{-webkit-transform:scale(1.1);transform:scale(1.1);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
/* .banner .swiper-slide-active .banimg{-webkit-animation: zoomin_out 20s infinite ease-in-out;-moz-animation: zoomin_out 20s infinite ease-in-out;-ms-animation: zoomin_out 20s infinite ease-in-out;-o-animation: zoomin_out 20s infinite ease-in-out;} */
.footer_wap{background:#333; display:none;}
.footerWapul{ margin-bottom:0; display: flex;}
.footerWapul li{ flex: 1; text-align:center;color:#fff; border-right:1px solid #f9c7ce; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; padding:4px 0;}
.footerWapul li a{color:#fff;}
.footerWapul li img{ width:24px; height:auto}
.footerWapul li .tit{ width:100%; text-align:center; font-size:14px; }
.act_footerWap a{ color: var(--xl-theme-accent, #d4a843) !important;}


.sbtn{font-size:14px; display: inline-block; padding: 6px 20px; border: 1px solid transparent; box-sizing: border-box; text-align: center;}
.sbtn_w100{ width: 100%; padding-left: 0; padding-right: 0;}
.sbtn_blue{ color: #fff; background:#007BFF; }
.sbtn_blue:hover{ background:#036fe4;}
.sbtn_blue_linear{ color: #fff; background: linear-gradient( 90deg, #A407FE 0%, #007BFF 100%);}
.sbtn_blue_linear:hover{ background: linear-gradient( 90deg, #007BFF 0%, #A407FE 100%);}
.sbtn_blue_rim{ border: 1px solid #007BFF; color: #007BFF; }
.sbtn_blue_rim:hover{ background-color: #007BFF; color: #fff;}
.sbtn_white_rim{  border: 1px solid #fff; color: #fff;}
.sbtn_white_rim:hover{ background-color: #fff; color: #007BFF;}
.sbtn_black_rim{  border: 1px solid #333; color: #333;}
.sbtn_black_rim:hover{ border-color: #007BFF;  color: #007BFF;}
.sbtn_gray_rim{  border: 1px solid #A5A5A5; color: #414141;}
.sbtn_gray_rim:hover{ border-color: #007BFF;  color: #007BFF;}
.blue{ color: #007BFF;}
.red{ color: #F92828;}
/* 表单 */
.perInfoForm{ width: 380px; max-width: 100%; margin-top: 20px; }
.perInfoForm .item{ display: flex; margin-bottom: 28px;}
.perInfoForm .item .attrmc{ width:88px; text-align: right; line-height: 36px; margin-right: 10px; display: inline-block;}
.perInfoForm .item .attrval{ flex: 1;}
.perInfoForm .text{ display: block; width: 100%; padding-left: 15px; border: 1px solid #D3D3D3; height: 36px; line-height: 36px; font-size: 14px; background-color: #fff; }
.perInfoForm .select{display: block; width: 100%; border: 1px solid #C6C6C6; height: 36px; line-height: 36px; font-size: 14px; background-color: #fff;}
.perInfoForm .msg{ color: #999; line-height: 1.8; margin-top: 10px;}
.perInfoForm .tj{ padding-top: 20px; padding-left: 98px;}
.perInfoForm .tj .sbtn{ padding: 10px 0px; font-size: 18px;}

/* 上传fileBtn */
.filebtn{width: 114px; border: 1px solid #C6C6C6; height: 36px; line-height: 36px; font-size: 14px; background-color: #fff; position: relative; text-align: center; cursor: pointer;}
.filebtn .file{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0;}
.filebtn:hover{ border-color: #62B6CB; color: #62B6CB;}

/* 弹窗 */
.pupbg{ background-color: rgba(0, 0, 0, .6); width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 200;}
.pup{position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); width: 85%; z-index: 205;}
.resumePup{ width: 450px;}
.closePup{ position: absolute; right:12px; top: 12px; line-height: 1;cursor: pointer; font-size: 16px; color: #999; display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px; }
.closePup:hover{ color: #333;}
.resumeMain{ padding: 10px 60px 36px;}

/* 翻页 */
.turnpage{font-size:0; margin:0 auto; }
.turnpage a,.turnpage span{ display:inline-block; padding:5px 13px; font-size:16px; margin:0 6px; color:#666; border:0px solid #e8e9ec; border-radius: 4px; background-color: #DDDDDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; }
.turnpage a:hover,.current{ color:#fff !important; background-color:#007236 !important; }

/* 列表 */
.bnews{ padding: 100px 0;}
.bnewsul{ padding-bottom: 60px; display: flex; flex-wrap: wrap;}
.bnewsul li{ width: 31.33%; margin:0 3% 3% 0 ;}
.bnewsul li:nth-child(3n){ margin-right: 0;}
.bnewsItem{}
.bnewsItem a{ display: block;}
.bnewsItem .tparea{ font-size: 0; overflow: hidden;}
.bnewsItem .tparea .tp{ width: 100%;}
.bnewsItem .des{ padding: 15px 25px 0; border: 1px solid #ddd; border-width: 0 1px 1px; }
.bnewsItem .des .tit{ font-size: 24px;white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; }
.bnewsItem .des .nr{ font-size: 16px; color: #666; line-height: 1.8; height: 57.6px; overflow: hidden; margin-top: 5px;}
.bnewsItem a:hover .des{box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.07);}
.bnewsItem a:hover .des .tit{ color: #036eb8;}
.bnewsItem a:hover .tparea .tp{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }

.bnewsItem .des .info{ margin-top: 15px; padding: 15px 0; color: #999; border-top: 1px  solid #F1F1F1; display: flex; justify-content: space-between; align-items: center;}
.bnewsItem .des .info .time{ font-size: 16px;}
.bnewsItem .des .info .time::before{ font-size: 18px; margin-right: 5px;}
.bnewsItem .des .info .morea{font-size: 16px; cursor: pointer;}
.bnewsItem .des .info .morea .val{}
.bnewsItem .des .info .morea .iconfont{ font-size: 14px;margin-left: 5px; width: 16px; height: 16px; border: 1px solid #999 ; text-align: center; line-height: 16px; }
.bnewsItem .des .info .morea:hover{ color: #036eb8;}
.bnewsItem .des .info .morea:hover .iconfont{ border-color: #036eb8;}

/* 大图 */
.bigimgw100,.bigimgMain{ font-size:0 ; overflow: hidden;}
.bigimgw100 .tp{ width: 100%;}
.bigimgMain .tp{ width: 100%;}

/* flex */
.flex{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.centerXY{ display: flex;  align-items: center;justify-content: center;}
.centerY{ display: flex; align-items: center;}
.centerX{justify-content: center}
.rowW{ display: flex; flex-wrap: wrap;}
.betweenX{ display: flex;   flex-direction: row; justify-content: space-between;} 
.betweenY{ display: flex;   flex-direction:column; justify-content: space-between;} 
.centerAXY{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


@-webkit-keyframes fadeInUp3 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) ;
		transform: translate3d(0, 100%, 0) rotate(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: rotate(-90deg);
		transform:rotate(-90deg);
	}
}

@-moz-keyframes fadeInUp3 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotate(-90deg);
		-moz-transform: translate3d(0, 100%, 0) rotate(-90deg);
		     transform: translate3d(0, 100%, 0) rotate(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		     transform: rotate(-90deg);
	}
}

@-o-keyframes fadeInUp3 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotate(-90deg);
		transform: translate3d(0, 100%, 0) rotate(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		   transform: rotate(-90deg);
	}
}

@keyframes fadeInUp3 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0) rotate(-90deg);
		-moz-transform: translate3d(0, 100%, 0) rotate(-90deg);
		     transform: translate3d(0, 100%, 0) rotate(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		  -o-transform: rotate(-90deg);
		     transform: rotate(-90deg);
	}
}

.fadeInUp3 {
	-webkit-animation-name: fadeInUp3;
	-moz-animation-name: fadeInUp3;
	  -o-animation-name: fadeInUp3;
	     animation-name: fadeInUp3
}

@-webkit-keyframes fadeInUp2 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,10%, 0);
		transform: translate3d(0, 10%, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-moz-keyframes fadeInUp2 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,10%, 0);
		-moz-transform: translate3d(0, 10%, 0);
		     transform: translate3d(0, 10%, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		     transform: none
	}
}

@-o-keyframes fadeInUp2 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,10%, 0);
		transform: translate3d(0, 10%, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		-o-transform: none;
		   transform: none
	}
}



/* inlined css/lib.part-02.css */
@keyframes fadeInUp2 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,10%, 0);
		-moz-transform: translate3d(0, 10%, 0);
		     transform: translate3d(0, 10%, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		  -o-transform: none;
		     transform: none
	}
}

.fadeInUp2 {
	-webkit-animation-name: fadeInUp2;
	-moz-animation-name: fadeInUp2;
	  -o-animation-name: fadeInUp2;
	     animation-name: fadeInUp2
}
@-webkit-keyframes zoombig {
	0%{-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 

	100%{-webkit-transform: scale(1,1);transform: scale(1,1);}
}
@-moz-keyframes zoombig {
	0%{-moz-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 

	100%{-moz-transform: scale(1,1);transform: scale(1,1);}
}
@-o-keyframes zoombig {
	0%{-o-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 

	100%{-o-transform: scale(1,1);transform: scale(1,1);}
}
@keyframes zoombig {
	0%{-webkit-transform: scale(1.2,1.2);-moz-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 

	100%{-webkit-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);}
}
@-webkit-keyframes moves {
	0%{-webkit-transform: translateY(0px);transform: translateY(0px);} 
	50%{-webkit-transform: translateY(-20px);transform: translateY(-20px);} 
	100%{-webkit-transform: translateY(0px);transform: translateY(0px);}
}
@-moz-keyframes moves {
	0%{-moz-transform: translateY(0px);transform: translateY(0px);} 
	50%{-moz-transform: translateY(-20px);transform: translateY(-20px);} 
	100%{-moz-transform: translateY(0px);transform: translateY(0px);}
}
@-o-keyframes moves {
	0%{-o-transform: translateY(0px);transform: translateY(0px);} 
	50%{-o-transform: translateY(-20px);transform: translateY(-20px);} 
	100%{-o-transform: translateY(0px);transform: translateY(0px);}
}
@keyframes moves {
	0%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);} 
	50%{-webkit-transform: translateY(-20px);-moz-transform: translateY(-20px);-o-transform: translateY(-20px);transform: translateY(-20px);} 
	100%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);}
}
@-webkit-keyframes zoomin_out{
	0%{-webkit-transform:scale(1);}
	50%{-webkit-transform:scale(1.1);}
	100%{-webkit-transform:scale(1);}
	}
	@-moz-keyframes zoomin_out{
	0%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
	50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);}
	100%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
	}
	@-o-keyframes zoomin_out{
	0%{-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
	50%{-webkit-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
	100%{-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
	}
	@keyframes zoomin_out{
	0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
	50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
	100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
	}
	@keyframes moves {
		0%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);} 
	50%{-webkit-transform: translateY(-20px);-moz-transform: translateY(-20px);-o-transform: translateY(-20px);transform: translateY(-20px);} 
		100%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);}
	}

/* source: font/iconfont.css */
@font-face {
  font-family: "iconfont"; /* Project id 4903647 */
  src: url("../font/iconfont.woff2?t=1745535892267") format('woff2'),
       url("../font/iconfont.woff?t=1745535892267") format('woff'),
       url("../font/iconfont.ttf?t=1745535892267") format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-share:before {
  content: "\e639";
}

.icon-kefu:before {
  content: "\e620";
}

.icon-shengchengjilu:before {
  content: "\e638";
}

.icon-2fangdajing:before {
  content: "\e644";
}

.icon-weixin:before {
  content: "\e633";
}

.icon-down:before {
  content: "\e60c";
}

.icon-prev:before {
  content: "\e65a";
}

.icon-next1:before {
  content: "\e667";
}

.icon-close:before {
  content: "\e627";
}

.icon-top:before {
  content: "\e607";
}

.icon-triangle:before {
  content: "\e61a";
}

.icon-triangle1:before {
  content: "\e61b";
}

.icon-triangle2:before {
  content: "\e61c";
}

.icon-triangle3:before {
  content: "\e61e";
}

.icon-home:before {
  content: "\e600";
}

.icon-down1:before {
  content: "\e703";
}

/* source: css/style.css */
/* ====首页====== */
body{ background:#F7FBFD url("../images/top_bg.png") center top/100% auto no-repeat;}
/** header **/
.header{ position: relative; z-index:1000; }
.loarea{ height:96px; position:relative; z-index:3; background-color: rgba(255,255,255,.25); }
.loarea .wp{ width: 94%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center;}
.logo{ width:380px; height:96px; display:flex; align-items:center; gap:0; overflow:hidden; }
.logo .tp{ height:88px; width:auto; max-width:100%; object-fit:contain; display:block; flex:0 0 auto; }
.logo .logo-text{
	display:inline-block;
	position: relative;
	top: 1px;
	padding: 2px 6px 2px 2px;
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1.2px;
	font-family: "STKaiti","KaiTi","STSong","Microsoft YaHei",sans-serif;
	color: #f5fbff;
	text-shadow: 0 2px 12px rgba(6, 84, 167, 0.45), 0 0 2px rgba(255,255,255,.45);
}
.navlogo{
	padding: 30px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
}
.navlogo .tp{
	max-width:66%;
	display:block;
}
.navlogo .navlogo-text{
	display:inline-block;
	font-size:28px;
	font-weight:800;
	line-height:1.1;
	letter-spacing:1.2px;
	font-family:"STKaiti","KaiTi","STSong","Microsoft YaHei",sans-serif;
	color:#f5fbff;
	text-shadow:0 2px 12px rgba(6, 84, 167, 0.45), 0 0 2px rgba(255,255,255,.45);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
	.logo .logo-text,
	.navlogo .navlogo-text{
		background: linear-gradient(180deg,#f6fbff 0%,#8dd8ff 55%,#3aa9ff 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}
.loginArea{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(6px, 0.8vw, 10px);
    flex: 0 1 auto;
    min-width: max-content;
    margin-left: auto;
    position: relative;
    font-size: 0;
}
.loginArea .loginBtn{ padding: 0.4em 1.4em; font-size: 20px;}

/* 已登录状态 */
.loginArea .avatar{ width: 44px; height: 44px; cursor: pointer;}
.loginInfoLay{ position: absolute; right: 0; width: 358px;  box-sizing: border-box; top: 56px; background-color: #fff; box-shadow:  0 0 6px 0 #ddd; padding: 15px 20px 0; display: none; }
.loginInfoLay .baseInfo{ padding: 14px 0; display: flex;}
.loginInfoLay .baseInfo .tp{ width: 55px; height: 55px; object-fit: cover; margin-right: 16px;}
.loginInfoLay .baseInfo .des{ flex: 1; min-width: 0;}
.loginInfoLay .baseInfo .des .tit{ font-size: 18px;}
.loginInfoLay .baseInfo .des .uid{ font-size: 15px; }
.loginInfoLay .baseInfo .des .uid .copyBtn{ cursor: pointer; color: #333;}
.loginInfoLay .baseInfo .des .uid .copyBtn:hover{ color: #007BFF;}
.vipInfo{ overflow: hidden; background: linear-gradient(180deg,#172840 0%,#101e33 100%); border: 1px solid rgba(86, 136, 209, .28);}
.vipInfo .intro{ padding: 15px 20px 20px; text-align: center;}
.vipInfo .intro .tit{ font-size: 18px; color: #dce9ff;}
.vipInfo .intro .subtit{ font-size: 14px; color: #9eb8dd; margin-top: 5px;}
.vipInfo .intro .mandiv{ margin-top: 15px;}
.vipInfo .intro .mandiv .sbtn{ background: linear-gradient(180deg,#2a4570 0%,#1f3659 100%); border: 1px solid rgba(112, 162, 242, .45); cursor: pointer; display: flex; justify-content: center; align-items: center;}
.vipInfo .intro .mandiv .sbtn .icon{ height: 22px; margin-right: 10px;}
.vipInfo .intro .mandiv .sbtn .val{ font-size: 16px; color: #e8f2ff;}
.vipInfo .intro .mandiv .sbtn:hover{ background: linear-gradient(180deg,#355889 0%,#2a4874 100%);}
.vipInfo .points{ background: linear-gradient(180deg,#1b2e4d 0%,#14243c 100%); border-top: 1px solid rgba(91, 142, 216, .25); font-size: 15px; padding: 12px 24px; display: flex; align-items: center; color:#cddffb; }
.vipInfo .points .icon{ height: 18px; margin-right: 10px;}
.vipInfo .points a{ color:#cddffb; }
.vipInfo .points .score{ margin-left: auto;}
.vipInfo .points.securityEntry{
    background: linear-gradient(180deg,#22385c 0%, #1a2d4d 100%);
    border-top: 1px solid rgba(109, 161, 238, .35);
}
.vipInfo .points.securityEntry a{
    color: #dbe9ff;
    font-weight: 600;
}
.vipInfo .points.securityEntry .score{
    color: #9eb9e3;
    font-size: 13px;
}
.vipInfo .points.securityEntry .icon{
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(88,153,255,.45));
}
.vipInfo .points.securityEntry:hover{
    background: linear-gradient(180deg,#22365a 0%, #1b2e4d 100%);
}
.loginInfoLay .exit{ font-size: 18px; cursor: pointer; text-align: center; padding: 1em 0;}
.loginInfoLay .exit:hover{ color: #007BFF;}
/*PC导航 begin*/
.nav{ z-index:5; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; }
.navul{ font-size:0; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; white-space:nowrap; margin:0 auto; }
.navul li{ display:block; font-size:16px; position:relative; }
.rowLi{ position: static !important;}
.navul li>a{ padding:0 clamp(8px,0.9vw,16px); text-align:center; display:flex; align-items:center; justify-content:center; line-height:1; height:96px; position: relative; font-size: clamp(18px, 1.3vw, 24px); }
.navul li>a:hover,.act_nav{color:#007BFF !important;}

.chooseLan{ margin: 40px 0 0 40px; padding: 3px 8px; width: 80px; position: relative; cursor: pointer; background-color: #007BFF;}
.curLan{ color: #fff;  }
.curLan .iconCountry{ font-size: 16px; margin-right: 5px;}
.curLan .arr{ font-size: 16px; margin-left: 0px;}

.curLan .val{ font-size: 14px; text-transform: uppercase; }
.lanLay{ padding-top: 4px; position: absolute; left: 0px; top: 32px; display: none; width: 100%; }
.lanul{  border-top: 2px solid #007BFF; background-color: #fff;}
.lanul li{ }
.lanul li a{ display:block;padding: 5px 25px;  font-size: 12px; }
.lanul .icon{ margin-right: 10px;height: 12px; }
.lanul .val{font-size: 12px;}
.lanul a:hover{ color: #007BFF; background-color: #fafafa;}
.chooseLan:hover .lanLay{ display: block;}

/*PC导航end*/
.subnav{ position:absolute; display: none;  }
.subnavNormal{left:50%; margin-left: -60px; top:96px; width:120px;padding-top: 0px;}
.subnav:after{ content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #fff; position: absolute; top: -16px; left: 50%; margin-left: -6px; display: none;}
.subnav>.nr{background:rgba(0, 0, 0, .6); padding:10px 0; box-shadow: 0 2px 10px 0 #333; }
.subnav .nr a{text-align:left; line-height:2; padding: 6px 0; width:100%; font-size:13px; display:block;  color:#fff; text-align:center; }
.subnav .nr a:hover{ color: #fff !important; background-color: #D34F05; }

.subnavRow{ position: absolute; width: 100%; left: 0; top: 112px; padding-top: 0px; }
.subnavRow .wrap{ display: flex; align-items: center; justify-content: space-between;background:rgba(0, 0, 0, .6); padding:10px 0; box-shadow: 0 2px 10px 0 #333; }
.subnavRow .nr{ width: 100%; padding: 10px 20px; font-size: 0;}
.subnavRow .nr a{ display: inline-block; width:23%; margin: 0 1%; color: #fff; border-bottom: 1px dashed #fff; font-size: 13px; text-align: center; padding: 8px 0;}
.subnavRow .nr a:hover{ color: #fff !important; background-color: #D34F05;}


/*手机导航按钮及下拉菜单begin*/
.menubtn{ position:absolute; width:44px; min-width: 44px; height:44px; min-height: 44px; top:13px; right:2%; cursor:pointer; display:none; border:0; padding:0; background:transparent; z-index:214748302;}
.menubtn i{ display:block; width:22px; height:3px; left:11px; background-color:#000; position:absolute; -webkit-transition:.3s; -moz-transition:.3s; -o-transition:.3s; transition:.3s; border-radius: 2px;}
.menubtn i:nth-child(1){ top:12px; -webkit-transform-origin:left bottom; -moz-transform-origin:left bottom; -ms-transform-origin:left bottom; -o-transform-origin:left bottom; transform-origin:left bottom;}
.menubtn i:nth-child(2){ top:21px;}
.menubtn i:nth-child(3){ top:30px; -webkit-transform-origin:left top; -moz-transform-origin:left top; -ms-transform-origin:left top; -o-transform-origin:left top; transform-origin:left top;}
.menubtn.on i:nth-child(1){ -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -o-transform:rotate(40deg); transform:rotate(40deg);}
.menubtn.on i:nth-child(2){ opacity:0;}
.menubtn.on i:nth-child(3){ -webkit-transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -o-transform:rotate(-40deg); transform:rotate(-40deg);}
/*小导航*/
.inav{ width:min(84vw,360px); max-width: 360px; height: 100vh; overflow-y: auto; overflow-x:hidden; box-sizing:border-box; overscroll-behavior:contain; background-color:rgba(0, 0, 0, .92); position:fixed; z-index:214748300; top:0px; left:0; transform: translateX(-100%); visibility:hidden; pointer-events:none; display:block; transition: transform .22s ease, visibility .22s ease; will-change: transform; }
.inav.is-open,.mobile-nav-open .inav{ transform: translateX(0); visibility:visible; pointer-events:auto; }
html.mobile-nav-open,body.mobile-nav-open{ overflow:hidden; overflow-x:hidden; touch-action:none; max-width:100vw; }
body.mobile-nav-open .home-page-shell,body.mobile-nav-open .xl-home-layout{ overflow-x:hidden; max-width:100vw; }
body.mobile-nav-open .header{ z-index:214748301; }
body.mobile-nav-open .site-pet{ display:none !important; }
.mobile-nav-mask{ position:fixed; inset:0; z-index:214748299; display:block; border:0; padding:0; background:rgba(3,8,18,.48); opacity:0; cursor:pointer; transition:opacity .18s ease; }
.mobile-nav-mask.is-open{ opacity:1; }
.mobile-nav-mask[hidden]{ display:none !important; }
.inav ul{ margin: 0 20px; padding:0;}
.inavul li{border-bottom:1px solid #363636;}
.inavul li>a{ display:block; text-align:left;  font-size:14px; color:#fff; padding:15px 30px 15px 15px; position: relative;}
.inavul li>a .iconfont{ position: absolute; right: 0; top: 12px; font-size: 18px; }
.act_inav{ border-color: #007BFF !important; color:#007BFF !important;}
.act_inav .iconfont{ transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
.inavul .nr{ display: none; padding:5px 30px 5px 40px;}
.inavul .nr a{display:inline-block; text-align:left; padding: 4px 0; margin-right: 10px;  font-size:13px; color:#ddd;}
/*手机导航按钮及下拉菜单end*/
/*banner begin*/
.banner{ position:relative; z-index:3; }
.banner .swiper-slide{position:relative; overflow:hidden;}
.banimg{ width:100%; height:auto; display:block;}
.banner .swiper-pagination{ bottom:24px !important; display:flex; align-items:center; gap:10px; }
.banner .swiper-pagination-bullet{
width:20px;height:20px;padding:0;
background:rgba(10,14,24,0.72);
border:2px solid rgba(239,155,53,0.82);
border-radius:999px;
font-size:0;line-height:0;outline:none;cursor:pointer;
filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;
margin:0 8px !important;
box-shadow:0 0 0 1px rgba(0,0,0,0.24), 0 0 18px rgba(239,155,53,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.banner .swiper-pagination-bullet-active{
background:linear-gradient(180deg,#ffcf73 0%, #ef9b35 100%);
border-color:#ffd48a;
box-shadow:0 0 0 1px rgba(0,0,0,0.2), 0 0 22px rgba(255,196,92,0.42), inset 0 1px 0 rgba(255,255,255,0.28);
}
.banner .swiper-button-prev,.banner .swiper-button-next{ display: none;}
/* .banner .swiper-button-prev{ left:2%;}
.banner .swiper-button-next{ right:2%;} 

.banner .swiper-button-prev::after,.banner .swiper-button-next::after{ display: none;}
 .banner .swiper-button-prev,.banner .swiper-button-next{filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;width:80px;  height:150px; line-height: 150px; top:50%; margin-top:-75px; color: #fff;}
.banner .swiper-button-prev .iconfont,.banner .swiper-button-next .iconfont{ font-size: 80px; font-weight: bold;}
.banner .swiper-button-prev:hover,.banner .swiper-button-next:hover{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;} */
/*banner end*/
.footer{ padding: 40px 0; background-color: #fff; text-align: center; border-top: 1px solid #EEEEF1;}
.fnav{ font-size: 15px;}
.fnav a{ display: inline-block; padding: 0 1.2em; position: relative; color: #707070;}
.fnav a::after{ content: ""; display: block; width: 1px; height: 11px; position: absolute; background-color: #D9DDE1; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.fnav a:nth-last-child(1)::after{ display: none;}
.fnav a:hover{ color: #007BFF;}
.copyright{ color: #999999; margin-top: 10px;}
.copyright a{ color: #999;}
.copyright a:hover{ color: #333;}

.h_main{ padding: 30px 0;}
/* Override lib.css .wp 74% width constraint for homepage main area */
.h_main .wp{ width: 100% !important; }
.hm_l{ flex: 1 1 0; min-width: 0;}
.h_main .hm_l{ flex: 1 0 0 !important; min-width: 0; width: auto !important; max-width: none !important; }
.hm_r{ width: clamp(180px, 10vw, 220px); flex: 0 0 clamp(180px, 10vw, 220px);}
.h_tit2{ font-size: 20px; padding: 0.8em 0;}
.h_sales{ background-color: #fff; padding: 5px 22px 20px;}
.h_sales .wrap{}
.h_sales .wrap .tparea{ font-size: 0; overflow: hidden; position: relative; border-radius: 16px; height: 0; padding-top: 100%;}
.h_sales .wrap .tparea .tp{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; -webkit-transition: transform .35s ease; -moz-transition: transform .35s ease; -ms-transition: transform .35s ease; -o-transition: transform .35s ease; }
.h_sales .wrap .des{ padding: 10px 0;}
.h_sales .wrap .des .nr{ font-size: 16px; line-height: 1.6; text-align: justify;}
.h_sales .wrap .des .mandiv{ margin-top: 15px; text-align: center;}
.hm_r .h_sales .wrap .des .mandiv .sbtn{font-size: 14px;padding: 0.34em 1.2em;line-height: 1.2;}
.h_sales .tag{ margin-top: 8px; font-size: 16px; color: #C9C9C9;}



.h_tit{ padding: 22px 0; display: flex; align-items: center;  }
.h_tit .icon{ height: 62px; margin-right: 10px;}
.h_tit .des{ flex: 1; line-height: 1.2;}
.h_tit .des .tit{ font-size: 28px;}
.h_tit .des .tit .star{ height: 17px; margin-left: 12px; position: relative; top: -10px; height: 17px;} 
.h_tit .des .subtit{ color: #9CA0AF; margin-top: 6px;}
.hmPart{}
.hmPart .wrap{ display: flex; flex-wrap: wrap;}
.hmItem{ width: 32%; margin: 0 2% 2% 0;}
.hmItem:nth-child(3n){ margin-right: 0;}
.hmItem a{ display: flex; flex-direction: column; height: 100%; background-color: #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; overflow: hidden;}
.hmItem .tparea{ font-size: 0; overflow: hidden; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px;  position: relative; height: 0; padding-top: 82%;}
.hmItem .tparea .tp{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; -webkit-transition: transform .35s ease; -moz-transition: transform .35s ease; -ms-transition: transform .35s ease; -o-transition: transform .35s ease; }
.hmItem .tparea .status{ font-size: 14px; display: inline-block; position: absolute; bottom: 0; z-index: 2; color: #fff; padding: 0.4em 1.4em;  background-color: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); }
.hmItem .tparea .statusOld{ left: 0; border-radius: 0 15px 0 0; -webkit-border-radius: 0 15px 0 0; -moz-border-radius: 0 15px 0 0; -ms-border-radius: 0 15px 0 0; -o-border-radius: 0 15px 0 0; }
.hmItem .tparea .statusNew{ right: 0 ; border-radius: 15px 0 0 0; -webkit-border-radius: 15px 0 0 0; -moz-border-radius: 15px 0 0 0; -ms-border-radius: 15px 0 0 0; -o-border-radius: 15px 0 0 0; }
.hmItem .des{ display: flex; flex-direction: column; justify-content: flex-start; min-height: 60px; padding: 10px 15px 10px 15px; position: relative; text-align: center;}
.hmItem .des .tit{ min-height: 1.35em; display: flex; align-items: flex-start; justify-content: center; font-size: 20px; line-height: 1.35; text-align: center; margin-top: 0; }
.hmItem .des .info{ min-height: 1.4em; display: flex; align-items: flex-start; justify-content: center; margin-top: 2px; color: #9F9F9F; line-height: 1.4; text-align: center; }
.hmItem .des .info:empty{ display: none; }
.hmItem .tparea .arr{ position:absolute; height:22px; left:50%; bottom:8px; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); z-index:3; }

.hmItem a:hover .des{box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.1);}
.hmItem a:hover .des .tit{ color: #007BFF}
.hmItem a:hover .tparea .arr{ left:50%; bottom:10px;}
.hmItem a:hover .tparea .tp{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); }
.h_sales:hover .wrap .tparea .tp{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); }

/* A9 global focus and motion baseline */
:root{
	--a9-focus-ring:#58a6ff;
	--a9-focus-shadow:rgba(88,166,255,.28);
	--a9-focus-inner:rgba(255,255,255,.18);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sbtn:focus-visible,
.menubtn:focus-visible,
.mobile-nav-mask:focus-visible,
.navul li > a:focus-visible,
.inavul li > a:focus-visible,
.chooseLan:focus-visible,
.curLan:focus-visible,
.lanul a:focus-visible,
.loginArea .avatar:focus-visible,
.loginInfoLay .baseInfo .des .uid .copyBtn:focus-visible,
.banner .swiper-pagination-bullet:focus-visible,
.hmItem a:focus-visible,
.h_sales a:focus-visible,
.pagination a:focus-visible{
	outline:3px solid var(--a9-focus-ring);
	outline-offset:3px;
	box-shadow:0 0 0 6px var(--a9-focus-shadow), inset 0 0 0 1px var(--a9-focus-inner);
}

.sbtn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.loginArea .loginBtn,
.pagination a,
.pagination span{
	max-width:100%;
	line-height:1.25;
	overflow-wrap:anywhere;
	word-break:normal;
}

.menubtn,
.banner .swiper-pagination-bullet,
.loginArea .avatar,
.QQ dd .sp{
	touch-action:manipulation;
}

@media (prefers-reduced-motion: reduce){
	html:focus-within{
		scroll-behavior:auto;
	}

	.menubtn i,
	.inav,
	.mobile-nav-mask,
	.h_sales .wrap .tparea .tp,
	.hmItem .tparea .tp,
	.hmItem .tparea .arr,
	.banner .swiper-wrapper,
	.banner .swiper-slide,
	.ds-pending-spinner,
	.photo-canvas-loading__ring,
	.photo-canvas-loading__ring span,
	.photo-canvas-loading__bar span,
	.photo-history-item__spinner,
	.photo-history-pending::before,
	.photo-result-workspace::before,
	.animated.infinite,
	[class*="shine"],
	[class*="marquee"],
	[class*="float"],
	[class*="loading"]{
		animation:none !important;
		transition-duration:.01ms !important;
		transition-delay:0s !important;
	}

	.h_sales:hover .wrap .tparea .tp,
	.hmItem a:hover .tparea .tp,
	.hmItem a:hover .tparea .arr{
		transform:none !important;
	}
}

/* source: css/style-pages.css */
/* 计划与定价 */
.plan_ban{ font-weight: bold; font-size: 0; color: #fff; padding: 40px 0;}
.plan_ban .tit{ font-size: 48px; font-weight: bold;}
.plan_ban .info span{ font-size: 18px;  font-weight: normal; padding: 0.4em 4em; border: 1px solid #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; }

.plan{ padding-bottom: 60px; width: 68%;}
.i_tit{ padding: 50px 0;}
.i_tit .tit{ font-size: 48px;}
.i_tit .subtit{ font-size: 18px; margin-top: 10px; color: #7B818A;}
.plan .wrap{ display: flex; flex-wrap: wrap;}
.planItem{ width: 30%; margin:  0 5% 4% 0; text-align: center; background-color: #fff; box-sizing: border-box; padding: 40px 30px;}
.planItem:nth-child(3n){ margin-right: 0;}
.planItem .tp{ height: 72px;}
.planItem .type{ margin-top: 10px; font-size: 20px;}
.planItem .price{ margin-top: 20px; line-height: 1.2;}
.planItem .price .unit{ font-size: 24px;}
.planItem .price .newPrice{ font-size: 56px; font-weight: bold; color: #FA1212;}
.planItem .price .oldPrice{ font-size: 28px; color: 24px; text-decoration: line-through; color: #AFB1BB;}
.planItem .tit{ font-size: 18px; padding:  8px 0 20px; color: #AFB1BB; border-bottom: 1px solid #E7E8EE;}
.planItem .des{ padding: 20px 0;}
.planItem .des .list{ text-align: left; padding: 5px 0 5px 36px; position: relative; font-size: 20px;}
.planItem .des .list .icon{ position: absolute; left: 0 ; top: 12px; height: 20px;}
.planItem .mandiv{ margin-top: 30px;}
.planItem .mandiv .sbtn{ font-size: 22px; padding: 0.4em 0; width: 80%; margin: 0 auto;}
.planItem:hover{ box-shadow: 0px 7px 13px 1px rgba(11,11,122,0.15); transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }
.i_main{}
.coo{ margin: 100px 0 150px;}
.coo .wrap{ display: flex; justify-content: center; flex-wrap: wrap; padding:20px 0 120px;}
.cooItem{ width: 190px; text-align: center;}
.cooItem a{ display: block;}
.cooItem .tp{ height: 118px;}
.cooItem .tit{ font-size: 22px; margin-top: 10px;}
.cooItem a:hover .tp{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }
.cooItem a:hover .tit{ color: #007BFF;}

/* 我的推广 */
.myPromote{ margin: 100px auto 150px;}
.myPromote .wrap{ padding: 80px 0 60px; display: flex; flex-wrap: wrap;}
.myPromote .intro,.myPromote .pcode{ box-sizing: border-box; width: 50%;}
.myPromote .intro{ position: relative; padding: 0 90px;}
.myPromote .intro::after{ content: ""; display: block; height: 90%; top: 5%; background-color: #E8E8E8; width: 1px; position: absolute; right: 0; }
.myPromote .intro .tit{ font-size: 46px;}  
.myPromote .intro .subtit{ margin-top: 10px; font-size: 24px;}
.myPromote .intro .subtit .num{ margin: 0 10px;}
.myPromote .intro .nr{ margin-top: 15px; font-size: 24px; color: #878A93; line-height: 1.6;}
.myPromote .pcode{ text-align: center;}
.myPromote .pcode .tparea{ width: 350px; margin: 0 auto; overflow: hidden; position: relative; box-sizing: border-box; padding: 40px; background-color: #EBF5FF;}
.myPromote .pcode .tparea .tp{ width: 100%;}
.myPromote .pcode .tparea .shade{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center;}
.myPromote .pcode .tparea .shade .opa{}
.myPromote .pcode .tparea .shade .opa .sbtn{ font-size: 20px; padding: 0.4em 3em;}
.myPromote .pcode .mandiv{ margin-top: 20px;}
.myPromote .pcode .mandiv .sbtn{ display: inline-flex; justify-content: center; padding: 0.4em 2em; font-size: 16px;}
.myPromote .pcode .mandiv .sbtn .iconfont{ font-size: 18px; margin-right: 5px;}

/* 解决方案 */
.case{ padding: 25px 0 45px;}
.case .wrap{ padding: 32px 36px;}
.caseItem{ margin-bottom: 26px;}
.caseItem a{ display: flex; flex-wrap: wrap;}
.caseItem .tparea{ font-size: 0; overflow: hidden; width: 262px; margin-right: 42px;}
.caseItem .tparea .tp{ width: 100%; height: 175px; object-fit: cover;}
.caseItem .des{ padding: 5px 0; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;}
.caseItem .des .tit{ font-size: 26px;}
.caseItem .des .nr{ font-size: 18px; color:#878A93; line-height: 1.6; text-align: justify; margin-top: 15px;}
.caseItem .des .time{font-size: 16px; color:#A0A2A9;  margin-top: auto;}
.caseItem a:hover .tparea .tp{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }
.caseItem a:hover .des .tit{ color: #007BFF;}
/* 详情 */
.caseDel{ padding: 40px 0 70px;}
.caseDel .wrap{ padding: 0 42px 36px ;}
.location{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    line-height: 1.6;
    padding: 28px 0 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(151,165,192,.16);
}
.location a{}
.location .cutline{ font-style: normal; margin: 0; opacity: .55;}
.location a:hover,.actLoca{ color: #007BFF;}

.article{ display: flex; flex-direction: column; gap: 24px;}
.artHeader{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E8E8E8;
}
.artHeader .tit{ flex: 1 1 420px; max-width: 100%; font-size: 40px; color: #272E3B; line-height: 1.35;}
.artHeader .info{
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.artHeader .info .list{
    font-size: 16px;
    margin-right: 0;
    color: #A0A2A9;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(126,143,171,.08);
}
.artBody{ padding: 0 0 8px;}
.artBody .tp{ width: 100%; margin-bottom: 20px;}
.artBody .wz{ font-size: 22px; color: #272E3B; line-height: 1.9; word-break: break-word;}
.artBody .wz p{ margin: 0 0 1em;}
.artBody .wz p:last-child{ margin-bottom: 0;}
.artBody .wz img{ max-width: 100%; height: auto;}
.artBody .wz table{ display: block; max-width: 100%; overflow-x: auto;}

/* 登录弹窗 */
.loginPup{ width: 580px; max-width: calc(100vw - 48px); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 23, 72, 0.45); border: 1px solid rgba(80, 138, 255, 0.28); }
.closePup{ position: absolute; right:30px; top: 30px; line-height: 1;cursor: pointer; font-size:30px; color: #999; display: inline-block; width: 40px; height: 40px;   line-height: 40px;  }
.closePup:hover{ color: #333;}
.loginMain{ display: block;}
.loginMain form{ display: block; width: 100%; }
.loginMain .tparea{ width: 316px; font-size: 0;}
.loginMain .tparea .tp{ height: 100%; object-fit: cover;}
.loginForm{ width: 100%; min-width: 0; box-sizing: border-box; padding: 46px 48px 40px;}
.formTit{ font-size: 32px;  text-align: center;  position: relative; margin-bottom: 34px;}
.formItem{ margin-bottom: 28px; position: relative;}
.formItem .icon{ height: 22px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.formItem .text{ width: 100%; font-size: 18px;color: #666; border: 1px solid #D8D8D8; height: 56px; line-height: 56px; padding-left: 56px;}
.formItem.yzm .text{ padding-right: 100px; }
.formItem.yzm .sendBtn{ position: absolute;  font-size: 16px; color: #007BFF; right: 15px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.loginForm .agree{padding-left: 30px; font-size: 15px; position: relative;}
.loginForm .agree .checkbox{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.loginForm .agree a{ color: #007BFF;}
.loginForm .agree a:hover{ color: #036fe4;}
.loginForm .formConfirm{ margin-top: 35px;}
.loginForm .formConfirm .sbtn{ font-size: 18px; padding: 0.5em 0;}

/* 图片编辑 */
.iHeader{ background-color: #fff !important;}
.c_main{ display: flex; flex-wrap: wrap;}
.c_l{ width: 304px; background-color: #fff;height: calc(100vh - 82px); overflow-y: auto;}
.c_r{ flex: 1; min-width: 0; height: calc(100vh - 82px); overflow-y: auto;}

.parmaStyle{ padding: 20px;}
.paraPart{ margin-bottom: 15px;}
.paraPart .title{ font-size: 20px; padding: 1em 0;}
.paraPart .wrap{}
.uploadAdd{ padding: 44px 0; position: relative; background-color: #FAFBFD; border: 1px dashed #B4B4B4; border-radius: 10px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }
.inputFile{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0;}
.uploadAdd .mandiv{}
.uploadAdd .mandiv .sbtn{ padding: 0.4em 1.4em; height: 40px; font-size: 16px; display: inline-flex; align-items: center;}
.uploadAdd .mandiv .sbtn .icon{ height: 20px; margin-right: 6px;}
.uploadAdd .info{ font-size: 16px; color: #92939A; margin-top: 10px;}
.fileList{ display: flex; flex-wrap: wrap; margin-top: 14px;}
.fileList .tp{ width: 22%; margin: 0 4% 4% 0; box-sizing: border-box; object-fit: cover; cursor: pointer; border: 1px solid transparent;}
.fileList .tp:nth-child(4n){ margin-right: 0;}
.actFileList{ border-color: #007BFF  !important;}


.paraPartStyle{}
.paraPartStyle .wrap{ display: flex; flex-wrap: wrap;}
.styleItem{ width: 30%; margin: 0 5% 10px 0; cursor: pointer;}
.styleItem:nth-child(3n){ margin-right: 0;}
.styleItem .tparea{ border: 2px solid transparent; width: 100%; position: relative;}
.styleItem .tparea .tp{ width: 100%; height: 75px; object-fit: cover;}
.styleItem .tparea .shade{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center;}
.styleItem .tparea .shade .dui{ height: 19px; opacity: 0;}
.styleItem .tparea .shade .iconVip{ position: absolute; height: 32px; right: -11px; top: -15px;}
.styleItem .tit{ padding: 8px 0; text-align: center;}
.actStyleItem{}
.actStyleItem .tparea{ border-color: #007BFF !important;}
.actStyleItem .tparea .shade{ background-color: transparent !important; }
.actStyleItem .tparea .shade .iconVip{ display: none !important;}
.actStyleItem .tparea .shade .dui{ opacity: 1 !important;}
.actStyleItem .tit{ color: #007BFF;}
.parmaStyle .formConfirm{ margin-top: 30px;}
.parmaStyle .formConfirm .sbtn{ font-size: 20px; padding: 0.6em 0;}
.parmaStyle .formConfirm .sbtn span{ font-size: 16px;}

.createNum{}
.createNum .text{ border: 1px solid #ddd; display: block; width: 100%; box-sizing: border-box; padding:10px 15px; border-radius: 10px; font-size: 18px; color: #666; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }



.resultPart,.selectsPart{ padding: 0 150px;}
.resultPart{ padding-top: 60px;}
.resultPart .tab{ width: 218px; margin: 0 auto; box-sizing: border-box; padding: 2px; background-color: #ECEEF4; display: flex;}
.resultPart .tab .list{ text-align: center; display: inline-block; width: 50%; padding: 0.6em 1.4em; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;  color: #999; cursor: pointer;}
.resultPart .tab .actlist{ background-color: #fff !important; color: #333 !important;}
.resultPart .wrap{ margin: 20px auto 0; min-height: 480px; width: 824px;  padding: 20px; box-sizing: border-box; max-width: 100%;}
.resultPart .formConfirm{ margin-top:35px; text-align: center;}
.resultPart .formConfirm .sbtn{ font-size: 20px; padding: 0.6em 0; width: 264px; margin: 0 10px; cursor: pointer;}


.selectsPart{ margin:60px 0 ;}
.spTitle{ font-size: 24px; padding:20px 0;}
.selectsPart{}
.selectsPart .wrap{ 
    /* display: flex; flex-wrap: wrap; gap: 20px; */
    column-count: 5; column-gap: 20px;
}
.spItem{ margin-bottom: 20px;}
.spItem a{ display: block;}
.spItem a .tparea{ font-size: 0; overflow: hidden;}
.spItem a .tparea .tp{width: 100%;}
.spItem a:hover .tparea .tp{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }


/**　QQ浮动窗口 **/
.QQ{position:fixed; right:36px; top:50%; margin-top:-115px; z-index:999; border: 1px solid #ddd;}
.QQ dd{width:78px; height:78px; margin-bottom:1px; position:relative;}
.QQ dd:hover{width:auto;}
.dw_qq{position:absolute; right:-100%; opacity:0; color:#fff; background:rgba(0, 0, 0, .33); z-index:7; padding-left:10px;}
.QQ dd.qq1 .dw_qq{width:200px; height:78px; line-height:78px; font-size:15px;}
.QQ dd.qq2 .dw_qq a{ display: inline-block; font-size: 0;}
.QQ dd.qq2 .dw_qq a .icon{ width: 32px; height: 32px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin-right: 10px; }
.QQ dd.qq2 .dw_qq{width:160px;height:78px;  background:#007BFF; display: flex; align-items: center; }
.QQ dd.qq2 .dw_qq a{}
/* .dw_qq img{vertical-align:middle; position:relative; top:-2px;  margin-left:2px;} */
.QQ dd:hover .sp{  background:#007BFF}
.QQ dd:hover .sp .iconfont{ color: #fff;}
.QQ dd .sp{width:78px; height:78px; background-position:center center; background-repeat:no-repeat; display:inline-block; position:relative; z-index:9; -o-background-size: 100% 100%;background-size: 100% 100%; background-color: #fff; text-align: center; }
.QQ dd .sp .iconfont{  font-size: 40px;color:#007BFF;}
.QQ dd.qq4{ cursor:pointer;}
.QQ dd.qq3{ position:relative;}
.qr{background:#0059a2;opacity:0.8;filter:Alpha(opacity=80); cursor:pointer;}
.qrma{ position:absolute; right:88px; text-align: center; top:-17px; display:none; width:118px; padding: 10px 10px 5px; border: 1px solid #ddd;}
.qrma .tp{ width:118px !important; height:118px !important;}
.qrma .tit{font-size: 12px; margin-top: 5px;}

/* 积分中心 */
.points{ padding-bottom: 50px;}
.p_tit{ font-size: 34px; padding: 1em 0;}
.summary{ padding: 25px 35px; background-color: #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.summary .tit{ font-size: 24px;}
.summary .num{ font-size: 60px; font-weight: bold;}
.details{ padding: 10px 35px 0px;  background-color: #fff; margin-top: 20px; border-radius: 20px;  }
.p_tit2{ font-size: 26px; padding: 0.8em 0;}
.details .table{ width: 100%; background-color: #fff; }

.details .table th,.details .table td{ padding: 1.5em 30px;}
.details .table th{ background-color: #F3F5F8;}
.details .table td{ border-bottom: 1px solid #E8E8E8;}
.details .table tr:nth-last-child(1) td{ border: none !important;  }






.pages {
	width: 100%;
	text-align: center;
	margin-top: 30px;
}

.pagination {
	list-style: none;
	display: flex;
	align-items: center;
	padding: 0;
}

.pagination li {
	display: block;
	text-align: center;
}

/* source: css/style-responsive.css */
/* inlined css/style-responsive.part-01.css */
/* ============================================================
   全站分页组件升级: 胶囊风格 + hover glow
   基于 ds-* 设计系统 (深蓝科技风)
   ============================================================ */

/* 分页容器 — 右对齐弹性布局 */
.pages { overflow: hidden; }
.pages .pagination {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 0 4px;
    margin: 0;
}

/* 分页按钮 — 胶囊形 */
.pagination li { display: block; }

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(80, 140, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ds-text-muted, #5c7aa8);
    font-size: 12px;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    box-sizing: border-box;
}

.pagination img {
    height: 10px;
}

.pagination a:hover:not(.active) {
    border-color: rgba(90, 159, 255, 0.55);
    background: rgba(90, 159, 255, 0.1);
    color: var(--ds-accent, #5a9fff);
}

.pagination a.active,
.pagination a.current,
.pagination span.current {
    border-color: var(--ds-accent, #5a9fff);
    background: var(--ds-accent, #5a9fff);
    color: #fff;
    box-shadow: 0 4px 14px rgba(90, 159, 255, 0.35);
    cursor: default;
}

.pagination a:active {
    transform: translateY(1px);
}

/* 兼容旧版 active 定义 (红底) */
.pagination a.active {
    border-color: var(--ds-accent, #5a9fff);
    background: var(--ds-accent, #5a9fff);
    color: #fff;
}

.pltr{width:33%}



.planItem,.cooItem .tp,.caseItem .tparea .tp,.spItem a .tparea .tp{ transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }

/* ============================================================
   全站响应式适配: 1K / 2K / 4K 分辨率自定义适配
   替换旧硬编码 zoom:0.75
   ============================================================ */

/* ---- 2K 分辨率 (1921px - 2560px) ---- */
@media screen and (min-width: 1921px) {
    /* 2K: 容器宽度 */
    .wp { width: 88%; max-width: 1600px; }
    .wp1010 { width: 90%; max-width: 1400px; }
    .loarea { height: clamp(96px, 8vw, 120px); }
    .logo { width: clamp(300px, 25vw, 480px); height: clamp(96px, 8vw, 120px); }
    .logo .tp { height: clamp(88px, 7.5vw, 110px); }
    .logo .logo-text { font-size: clamp(28px, 2.5vw, 40px); }
    .navul li>a { height: clamp(96px, 8vw, 120px); font-size: clamp(16px, 1.1vw, 22px); }
    .loginArea .loginBtn { font-size: clamp(16px, 1.1vw, 20px); }

    /* 2K: 侧边栏宽度 */
    .hm_r { width: clamp(180px, 10vw, 220px); flex: 0 0 clamp(180px, 10vw, 220px); }
    .h_main .wp .h_inner .hm_r { width: clamp(180px, 10vw, 220px); flex: 0 0 clamp(180px, 10vw, 220px); }
    .hm_l { max-width: none; }

    .h_main { padding: clamp(20px, 2.5vw, 48px) 0; }
    .h_tit { padding: clamp(18px, 2vw, 36px) 0; }
    .h_tit .icon { height: clamp(50px, 4.5vw, 80px); margin-right: clamp(8px, 0.8vw, 16px); }
    .h_tit .des .tit { font-size: clamp(22px, 2vw, 34px); }
    .h_tit .des .subtit { font-size: clamp(14px, 1.1vw, 18px); }
    .h_tit2 { font-size: clamp(18px, 1.5vw, 26px); }
    .hmItem .des .tit { font-size: clamp(16px, 1.4vw, 24px); }
    .hmItem .des .info { font-size: clamp(13px, 1vw, 16px); }

    /* 2K: 卡片网格间距 */
    .hmPart .wrap { gap: 0 clamp(12px, 1.5vw, 24px); }
    .hmItem { margin: 0 0 clamp(12px, 1.5vw, 24px) 0; }
    .hmItem:nth-child(3n) { margin-right: 0; }

    .planItem .type { font-size: clamp(16px, 1.3vw, 22px); }
    .planItem .price .newPrice { font-size: clamp(44px, 3.5vw, 68px); }
    .planItem .des .list { font-size: clamp(14px, 1.1vw, 18px); }

    .artHeader .tit { font-size: clamp(28px, 2.5vw, 48px); }
    .artBody .wz { font-size: clamp(16px, 1.3vw, 22px); }

    .QQ { right: clamp(30px, 3vw, 60px); }
    .QQ dd { width: clamp(64px, 5.5vw, 90px); height: clamp(64px, 5.5vw, 90px); }
    .QQ dd .sp { width: clamp(64px, 5.5vw, 90px); height: clamp(64px, 5.5vw, 90px); }
    .QQ dd .sp .iconfont { font-size: clamp(32px, 2.8vw, 48px); }

    .pagination a, .pagination span {
        min-width: clamp(30px, 2.5vw, 40px);
        height: clamp(30px, 2.5vw, 40px);
        font-size: clamp(11px, 0.9vw, 14px);
    }
}

/* ---- 4K 分辨率 (2561px 及以上) ---- */
@media screen and (min-width: 2561px) {
    /* 4K: 容器宽度 */
    .wp { width: 90%; max-width: 2000px; }
    .wp1010 { width: 92%; max-width: 1800px; }
    .loarea { height: clamp(120px, 8vw, 160px); }
    .logo { width: clamp(380px, 25vw, 600px); height: clamp(120px, 8vw, 160px); }
    .logo .tp { height: clamp(110px, 7.5vw, 150px); }
    .logo .logo-text { font-size: clamp(30px, 2.5vw, 48px); }
    .navul li>a { height: clamp(120px, 8vw, 160px); font-size: clamp(18px, 1.3vw, 26px); }
    .loginArea .loginBtn { font-size: clamp(16px, 1.2vw, 22px); }

    /* 4K: 侧边栏宽度 */
    .hm_r { width: clamp(200px, 10vw, 280px); flex: 0 0 clamp(200px, 10vw, 280px); }
    .h_main .wp .h_inner .hm_r { width: clamp(200px, 10vw, 280px); flex: 0 0 clamp(200px, 10vw, 280px); }
    .hm_l { max-width: none; }

    .h_main { padding: clamp(24px, 2.5vw, 64px) 0; }
    .h_tit { padding: clamp(20px, 2vw, 48px) 0; }
    .h_tit .icon { height: clamp(50px, 4.5vw, 100px); margin-right: clamp(8px, 0.8vw, 20px); }
    .h_tit .des .tit { font-size: clamp(24px, 2vw, 44px); }
    .h_tit .des .subtit { font-size: clamp(14px, 1.1vw, 22px); }
    .h_tit2 { font-size: clamp(18px, 1.5vw, 32px); }
    .hmItem .des .tit { font-size: clamp(16px, 1.4vw, 28px); }
    .hmItem .des .info { font-size: clamp(13px, 1vw, 18px); }

    .planItem .type { font-size: clamp(16px, 1.3vw, 28px); }
    .planItem .price .newPrice { font-size: clamp(44px, 3.5vw, 88px); }
    .planItem .des .list { font-size: clamp(14px, 1.1vw, 24px); }
    .planItem .mandiv .sbtn { font-size: clamp(16px, 1.3vw, 26px); }

    .artHeader .tit { font-size: clamp(28px, 2.5vw, 60px); }
    .artBody .wz { font-size: clamp(16px, 1.3vw, 28px); }
    .artHeader .info .list { font-size: clamp(13px, 1vw, 18px); }

    .loginPup { max-width: clamp(580px, 40vw, 800px); }
    .loginMain .tparea { width: clamp(240px, 20vw, 380px); }
    .loginForm { padding: clamp(36px, 4vw, 60px) clamp(38px, 4vw, 60px); }
    .formTit { font-size: clamp(26px, 2.2vw, 40px); }
    .formItem .text { height: clamp(48px, 4.5vw, 70px); line-height: clamp(48px, 4.5vw, 70px); font-size: clamp(15px, 1.2vw, 20px); }

    .QQ { right: clamp(30px, 3vw, 80px); }
    .QQ dd { width: clamp(64px, 5.5vw, 110px); height: clamp(64px, 5.5vw, 110px); }
    .QQ dd .sp { width: clamp(64px, 5.5vw, 110px); height: clamp(64px, 5.5vw, 110px); }
    .QQ dd .sp .iconfont { font-size: clamp(32px, 2.8vw, 60px); }
    .QQ dd.qq2 .dw_qq { width: clamp(140px, 12vw, 200px); height: clamp(64px, 5.5vw, 110px); }

    .pagination a, .pagination span {
        min-width: clamp(32px, 2.8vw, 48px);
        height: clamp(32px, 2.8vw, 48px);
        font-size: clamp(11px, 0.9vw, 16px);
        padding: 0 clamp(8px, 0.8vw, 14px);
    }

    .footer { padding: clamp(30px, 3vw, 60px) 0; }
    .fnav { font-size: clamp(13px, 1vw, 18px); }
    .copyright { font-size: clamp(12px, 0.9vw, 16px); }

    .caseItem .tparea { width: clamp(200px, 16vw, 340px); }
    .caseItem .tparea .tp { height: clamp(140px, 11vw, 220px); }
    .caseItem .des .tit { font-size: clamp(20px, 1.6vw, 32px); }
    .caseItem .des .nr { font-size: clamp(14px, 1.1vw, 20px); }
    .caseItem .des .time { font-size: clamp(13px, 1vw, 18px); }

    .c_l { width: clamp(250px, 20vw, 380px); }
    .paraPart .title { font-size: clamp(16px, 1.3vw, 26px); }
    .uploadAdd { padding: clamp(30px, 3vw, 60px) 0; }
    .uploadAdd .mandiv .sbtn { height: clamp(36px, 3vw, 52px); font-size: clamp(14px, 1.1vw, 20px); }

    .myPromote { margin: clamp(80px, 7vw, 200px) auto; }
    .myPromote .intro .tit { font-size: clamp(36px, 3vw, 58px); }
    .myPromote .intro .nr { font-size: clamp(18px, 1.5vw, 30px); }

    /* 4K: 卡片网格间距 */
    .hmPart .wrap { gap: 0 clamp(16px, 2vw, 32px); }
    .hmItem { margin: 0 0 clamp(16px, 2vw, 32px) 0; }
    .hmItem:nth-child(3n) { margin-right: 0; }
}

/* ---- 小屏幕手机 (< 768px) ---- */
@media screen and (max-width: 767px) {
    .loarea { height: 70px; }
    .logo { width: clamp(160px, 50vw, 280px); height: 70px; }
    .logo .tp { height: 60px; }
    .logo .logo-text { font-size: clamp(20px, 5vw, 28px); }
    .nav { display: none; }
    .menubtn { display: block; }
    .h_main .wp { padding: 0; }
    .hmItem { width: 48%; margin: 0 4% 4% 0; }
    .hmItem:nth-child(3n) { margin-right: 4%; }
    .hmItem:nth-child(2n) { margin-right: 0; }
    .hmItem .des .tit { font-size: clamp(14px, 3.5vw, 18px); }
    .hmItem .des .info { font-size: clamp(11px, 3vw, 13px); }
    .h_tit .icon { height: clamp(40px, 8vw, 60px); }
    .h_tit .des .tit { font-size: clamp(18px, 4vw, 26px); }
    .planItem { width: 46%; margin: 0 8% 8% 0; }
    .planItem:nth-child(2n) { margin-right: 0; }
    .artHeader .tit { font-size: clamp(22px, 5vw, 34px); }
    .caseItem .tparea { width: 100%; margin-right: 0; margin-bottom: 12px; }
    .caseItem .tparea .tp { height: auto; }
    .QQ { right: 12px; }
    .QQ dd { width: 52px; height: 52px; }
    .QQ dd .sp { width: 52px; height: 52px; }
    .QQ dd .sp .iconfont { font-size: 26px; }
    .loginPup { width: 90%; }
    .loginMain .tparea { display: none; }
    .loginForm { padding: 24px 20px; }
}

/* ---- 平板 (768px - 1280px) ---- */
@media screen and (min-width: 768px) and (max-width: 1280px) {
    .hm_l { max-width: min(100%, calc(100% - 280px)); }
    .hm_r { width: 260px; flex: 0 0 260px; }
    .planItem { width: 46%; margin: 0 8% 8% 0; }
    .planItem:nth-child(3n) { margin-right: 8%; }
    .planItem:nth-child(2n) { margin-right: 0; }
}

/* ---- 暗黑高端风格覆盖 ---- */
body{
    background: radial-gradient(1200px 420px at 50% -120px, #1a2438 0%, #0b1019 55%, #070b12 100%) !important;
    color: #dce6f7;
    /* 移除硬编码 zoom:0.75，改为媒体查询流式缩放 */
}

a{ color: #dce6f7; }
a:hover{ color: #79a9ff; }

.header{ }
.loarea{ background-color: rgba(10, 15, 24, .78); border-bottom: 1px solid rgba(114, 146, 196, .2); height: 96px; }
.navul li>a{ color: #dce6f7; }
.navul li>a:hover,.act_nav{ color:#79A9FF !important; }
.menubtn i{ background-color:#dce6f7; }

.bg_w,
.hmItem a,
.h_sales,
.planItem,
.case .wrap,
.caseDel .wrap,
.summary,
.details,
.loginInfoLay,
.loginPup,
.resultPart .wrap,
.uploadAdd,
.c_l,
.c_r{
    background: linear-gradient(180deg, #141d2d 0%, #0f1726 100%) !important;
    border: 1px solid rgba(118, 148, 194, .18);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
}

.h_tit .des .tit,
.h_tit2,
.hmItem .des .tit,
.artHeader .tit,
.i_tit .tit,
.p_tit,
.p_tit2,
.summary .num,
.summary .tit,
.details .table th,
.details .table td,
.formTit{ color:#e9f1ff; }



/* inlined css/style-responsive.part-02.css */
.h_tit .des .subtit,
.hmItem .des .info,
.h_sales .tag,
.fnav a,
.copyright,
.copyright a,
.caseItem .des .nr,
.caseItem .des .time,
.artHeader .info .list,
.location,
.i_tit .subtit,
.myPromote .intro .nr,
.myPromote .intro .subtit{ color:#96a8c7; }

.footer{ background-color:#0c1320; border-top: 1px solid rgba(118, 148, 194, .18); }
.fnav a::after{ background-color:#33445f; }



/* A9 mobile touch target and type guard */
@media screen and (max-width: 767px) {
    .menubtn,
    .mobile-nav-mask,
    .closePup,
    .loginArea .avatar,
    .QQ dd,
    .QQ dd .sp,
    .pagination a,
    .pagination span {
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }

    .sbtn,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    select,
    .loginArea .loginBtn,
    .uploadAdd .mandiv .sbtn,
    .resultPart .formConfirm .sbtn,
    .planItem .mandiv .sbtn {
        font-size: max(14px, 1em);
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .hmItem .des .info,
    .copyright,
    .inavul .nr a,
    .pagination a,
    .pagination span {
        font-size: max(12px, 1em);
        line-height: 1.35;
    }

    .pagination a,
    .pagination span {
        height: auto;
        padding: 0 12px;
    }
}

/* source: css/style-buttons-forms.css */
/* ============================================================
   全站按钮升级: sbtn_blue / sbtn_blue_rim 胶囊化
   基于 ds-* 设计系统 (深蓝科技风，玻璃拟态)
   ============================================================ */

/* 胶囊实心按钮 (主操作按钮) */
.sbtn_blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 40px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #3d7fff 0%, #2060e0 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(61, 127, 255, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.5px;
    text-decoration: none !important;
}

.sbtn_blue:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(61, 127, 255, 0.45);
    background: linear-gradient(135deg, #5a91ff 0%, #3d7fff 100%);
    color: #fff !important;
}

.sbtn_blue:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(61, 127, 255, 0.25);
}

/* 胶囊描边按钮 (次要操作按钮) */
.sbtn_blue_rim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 38px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(80, 140, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.04);
    color: #9fc1ff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none !important;
}

.sbtn_blue_rim:hover {
    background: rgba(90, 159, 255, 0.15) !important;
    border-color: rgba(90, 159, 255, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(90, 159, 255, 0.2);
}

.loginArea .loginBtn,
.sbtn_white_rim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 38px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(80, 140, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.04);
    color: #cfe0ff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none !important;
}

.loginArea .loginBtn:hover,
.sbtn_white_rim:hover {
    background: rgba(90, 159, 255, 0.15) !important;
    border-color: rgba(90, 159, 255, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(90, 159, 255, 0.2);
}

/* 兼容旧版 sbtn_blue 无 border-radius 的内联样式场景 */
a.sbtn_blue, span.sbtn_blue {
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
}

.formItem .text,
.createNum .text {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(80, 140, 255, 0.22);
    border-radius: var(--ds-radius-sm, 12px);
    color: #e9f1ff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.formItem .text:focus,
.createNum .text:focus {
    border-color: rgba(90, 159, 255, 0.5);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(90, 159, 255, 0.12);
    outline: none;
}

.formItem .text::placeholder,
.createNum .text::placeholder {
    color: #5c7aa8;
}

.details .table{ background-color: transparent; }

/* source: css/style-legacy-home.css */
/* 首页布局压缩并贴边 */
.h_main .wp{
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 0 0 2%;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-between;
}

.hmPart .wrap{
    justify-content: flex-start;
    gap: 0 2%;
}

.hm_l{
    flex: 1 1 auto;
    width: 100%;
    max-width: min(800px, calc(100% - clamp(300px, 24vw, 360px) - 24px));
}

.hmItem{
    margin: 0 0 2% 0;
}

.hm_r{
    width: clamp(300px, 24vw, 360px);
    flex: 0 0 clamp(300px, 24vw, 360px);
    margin-left: auto;
    margin-right: 0;
    align-self: flex-start;
    position: sticky;
    top: 106px;
    right: 0;
}
.details .table th{ background-color:#1a2539; }
.details .table td{ border-bottom: 1px solid #273550; }

.pagination a,
.pagination span{
    background:#141d2d;
    border-color:#314261;
    color:#9db4d8;
}
.pagination a.active,
.pagination a:active{
    border-color:#5a91ff;
    background:#5a91ff;
    color:#fff;
}

.QQ{ border-color:#2e3f5c; }
.QQ dd .sp{ background-color:#141d2d; }
.QQ dd .sp .iconfont{ color:#79a9ff; }
.QQ dd:hover .sp{ background:#5a91ff; }

/* source: css/style-design-system.css */
/* inlined css/style-design-system.part-01.css */

/* ============================================================
   全站设计系统令牌 (Design System Tokens)
   来源: feedback.html 设计系统
   背景: 深蓝科技风 (#060B1F), 玻璃拟态卡片, 胶囊按钮
   ============================================================ */
:root {
    /* 页面背景 */
    --ds-page-bg: #060B1F;
    --ds-page-gradient: linear-gradient(180deg, #060B1F 0%, #0B1426 40%, #0F1A30 100%);

    /* 卡片 */
    --ds-card-bg: linear-gradient(145deg, rgba(20, 35, 66, 0.95) 0%, rgba(12, 22, 45, 0.98) 100%);
    --ds-card-border: rgba(80, 140, 255, 0.18);
    --ds-card-border-glow: rgba(80, 140, 255, 0.08);
    --ds-card-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--ds-card-border-glow);

    /* 文字 */
    --ds-text-bright: #e8f0ff;
    --ds-text-main: #b8cce8;
    --ds-text-muted: #5c7aa8;
    --ds-text-faint: #3a5178;

    /* 强调色 */
    --ds-accent: #5a9fff;
    --ds-accent-hover: #74aeff;
    --ds-accent-glow: rgba(90, 159, 255, 0.25);
    --ds-green: #4ade80;
    --ds-red: #f87171;
    --ds-warn: #fbbf24;

    /* 按钮胶囊 */
    --ds-btn-blue-bg: linear-gradient(135deg, #3d7fff 0%, #2060e0 100%);
    --ds-btn-blue-shadow: 0 6px 20px rgba(61, 127, 255, 0.35);
    --ds-btn-blue-hover-shadow: 0 10px 28px rgba(61, 127, 255, 0.45);
    --ds-btn-blue-height: 44px;

    /* 圆角 */
    --ds-radius-sm: 12px;
    --ds-radius-md: 14px;
    --ds-radius-lg: 20px;
    --ds-radius-pill: 999px;
}

/* ============================================================
   设计系统: 按钮
   ============================================================ */

/* 胶囊实心按钮 (主操作) */
.ds-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    height: var(--ds-btn-blue-height);
    padding: 0 24px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-btn-blue-bg);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--ds-btn-blue-shadow);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.ds-btn-primary:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: var(--ds-btn-blue-hover-shadow);
}

.ds-btn-primary:active:not([disabled]) {
    transform: translateY(0);
}

.ds-btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* 胶囊描边按钮 (次要操作) */
.ds-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--ds-card-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ds-text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.ds-btn-outline:hover {
    background: rgba(90, 159, 255, 0.1);
    border-color: rgba(90, 159, 255, 0.35);
    color: var(--ds-accent);
}

/* 胶囊小按钮 */
.ds-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--ds-card-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.ds-btn-sm:hover {
    border-color: var(--ds-accent);
    color: var(--ds-accent);
    background: rgba(90, 159, 255, 0.08);
}

/* ============================================================
   设计系统: 卡片
   ============================================================ */

/* 玻璃拟态卡片 */
.ds-card {
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--ds-card-border);
    background: var(--ds-card-bg);
    box-shadow: var(--ds-card-shadow);
    overflow: hidden;
}

.ds-card-header {
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(80, 140, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ds-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-text-bright);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-card-body {
    padding: 20px 22px;
}

/* ============================================================
   设计系统: 表单
   ============================================================ */

.ds-form-field {
    margin-bottom: 16px;
}

.ds-form-field:last-child {
    margin-bottom: 0;
}

.ds-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-text-main);
    letter-spacing: 0.5px;
}

.ds-input,
.ds-textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-card-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ds-text-bright);
    font-size: 14px;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.ds-input {
    height: 44px;
    padding: 0 14px;
    line-height: 44px;
}

.ds-textarea {
    min-height: 140px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.75;
}

.ds-input:focus,
.ds-textarea:focus {
    outline: none;
    border-color: rgba(90, 159, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(90, 159, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
    color: var(--ds-text-faint);
}

/* 字符计数 */
.ds-char-count {
    text-align: right;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ds-text-faint);
}

.ds-char-count.near-limit {
    color: var(--ds-warn);
}

.ds-char-count.at-limit {
    color: var(--ds-red);
}

/* 上传区 */
.ds-upload-zone {
    border: 2px dashed rgba(80, 140, 255, 0.22);
    border-radius: var(--ds-radius-md);
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}

.ds-upload-zone:hover {
    border-color: rgba(90, 159, 255, 0.45);
    background: rgba(90, 159, 255, 0.04);
}

/* ============================================================
   设计系统: 列表卡片
   ============================================================ */

.ds-list {
    display: grid;
    gap: 12px;
}

.ds-list-item {
    padding: 14px 16px;
    border-radius: var(--ds-radius-md);
    border: 1px solid rgba(80, 140, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s, background 0.18s;
}

.ds-list-item:hover {
    border-color: rgba(80, 140, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.ds-list-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.ds-list-item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text-bright);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}



/* inlined css/style-design-system.part-02.css */
.ds-list-item-time {
    font-size: 11px;
    color: var(--ds-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
}

.ds-list-item-preview {
    font-size: 13px;
    color: var(--ds-text-muted);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

/* ============================================================
   设计系统: 分页
   ============================================================ */

.ds-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ds-pagination-text {
    font-size: 12px;
    color: var(--ds-text-faint);
    padding: 0 4px;
}

.ds-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid rgba(80, 140, 255, 0.18);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.ds-pagination-btn:hover:not([disabled]) {
    border-color: var(--ds-accent);
    color: var(--ds-accent);
    background: rgba(90, 159, 255, 0.08);
}

.ds-pagination-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================================
   设计系统: 状态提示
   ============================================================ */

.ds-status-bar {
    display: none;
    padding: 10px 14px;
    border-radius: var(--ds-radius-sm);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.ds-status-bar.is-info {
    display: block;
    background: rgba(90, 159, 255, 0.12);
    border: 1px solid rgba(90, 159, 255, 0.25);
    color: #a0c8ff;
}

.ds-status-bar.is-success {
    display: block;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.22);
    color: #86efac;
}

.ds-status-bar.is-error {
    display: block;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.22);
    color: #fca5a5;
}

.ds-form-note {
    display: none;
    font-size: 12px;
    line-height: 1.6;
}

.ds-form-note.is-info { display: block; color: var(--ds-accent); }
.ds-form-note.is-success { display: block; color: var(--ds-green); }
.ds-form-note.is-error { display: block; color: var(--ds-red); }

/* ============================================================
   设计系统: 浮窗按钮
   ============================================================ */

.ds-fab {
    position: fixed;
    right: 24px;
    bottom: 32px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ds-btn-blue-bg);
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(61, 127, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 100;
}

.ds-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(61, 127, 255, 0.65);
}

/* ============================================================
   设计系统: 页面容器 (用于替换 bg_w 的旧样式)
   ============================================================ */

/* 全站灰卡升级: bg_w 类继承 ds-card 样式 */
.bg_w {
    background: var(--ds-card-bg) !important;
    border: 1px solid var(--ds-card-border) !important;
    box-shadow: var(--ds-card-shadow) !important;
    border-radius: var(--ds-radius-lg) !important;
}

/* source: css/style-rel.css */
/* inlined css/style-rel.part-01.css */
@charset "utf-8";
/*width:1200+*/
@media only screen and (min-width: 1200px){

	}
/** max-width:1200 **/
@media only screen and (max-width: 1199px){
.wp{ width:94%;}
.loarea .wp{ width: 96%; max-width: 1400px; margin: 0 auto;}
.nav{ display:block; flex:1; min-width:0; margin:0 0.2rem; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch;}
.nav::-webkit-scrollbar{ height:0; }
.navul{ white-space: nowrap; }
.navul li>a{ padding:0 0.55em; line-height:82px; height:82px; font-size:clamp(20px,1.7vw,28px); }
@media only screen and (min-width:768px){.menubtn{display:none;}}
.loarea{ height:82px; background-color: rgba(255,255,255,.25);}
.loarea.dark-theme{ background-color: rgba(10, 15, 24, .78); border-bottom: 1px solid rgba(114, 146, 196, .2); }
.loginArea{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: max-content; }
.logo{ width:220px; height:82px; gap:0; }
.logo .tp{ height:56px; }
.logo .logo-text{ font-size:22px; max-width:140px; letter-spacing:.6px; }
.navlogo{ gap:12px; }
.navlogo .navlogo-text{ font-size:22px; letter-spacing:.6px; }
.loginArea{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: max-content; }
.loginArea .loginBtn{ font-size: 12px;}
@media only screen and (min-width:768px){.inav{display:none;}}
.QQ{ display: none;}
}
/** max-width:1024 **/
@media only screen and (max-width: 1023px) {
.banimg{ width:150%; max-width: 150%; margin-left: -25%;}
.footer_wap{ display:block;}
.pcshow{ display:none;}
.wapshow{ display:inline-block;}
.bigimgw100 .tp{ width: 150%; max-width: 150%; margin-left: 25%;}
.h_main .wp{ display: flex; flex-wrap: nowrap; align-items: flex-start;}
.hm_l{ width: auto; max-width: none; min-width: 0;}
.hm_r{ width: clamp(220px, 26vw, 280px); flex: 0 0 clamp(220px, 26vw, 280px); margin-left: 16px; position: sticky; top: 106px;}
}
/** max-width:960 **/
@media only screen and (max-width: 959px) {

}
/** max-width:768 **/
@media only screen and (max-width: 767px) {
body,input,textarea,select,button{ font-size: 0.22rem;}
body{filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.mt10{ margin-top: 0.10rem;}
.mt15{ margin-top: 0.15rem;}
.mt20{ margin-top: 0.20rem;}
.mt25{ margin-top: 0.25rem;}
.mt30{ margin-top: 0.30rem;}
.mt35{ margin-top: 0.35rem;}
.mt40{ margin-top: 0.40rem;}
.mt45{ margin-top: 0.45rem;}
.mt50{ margin-top: 0.50rem;}
.mt60{ margin-top: 0.60rem;}
.mt70{ margin-top: 0.70rem;}
.mt80{ margin-top: 0.80rem;}
.mt90{ margin-top: 0.9rem;}
.mt100{ margin-top: 1rem;}
.banner .swiper-pagination{ bottom:0.1rem !important;}
.banner .swiper-pagination-bullet{width:0.15rem;height:0.15rem; margin:0 0.05rem !important;}

.footer{ padding: 0.4rem 0;}
.fnav{ font-size: 0.24rem;}
.fnav a{ padding: 0 0.8em;}
.fnav a::after{ display: none;}
.copyright{ margin-top: 0.15rem;}

.h_main .wp{ display: block;}
.hm_l{ width: 100%; max-width: none; min-width: 0;}
.hm_r{ width: 100%; flex: none; margin-left: 0; position: static; top: auto;}

.h_main{ padding: 0.3rem 0;}
.h_tit2{ font-size: 0.28rem;}
.h_sales{  padding: 0.08rem 0.2rem 0.2rem;}
.h_sales .wrap .des{ padding: 0.15rem 0;}
.h_sales .wrap .des .nr{ font-size: 0.24rem;}
.h_sales .wrap .des .mandiv{ margin-top: 0.2rem;}
.hm_r .h_sales .wrap .des .mandiv .sbtn{ font-size: 0.22rem; padding: 0.32em 1.05em; line-height: 1.2;}
.h_sales .tag{ margin-top: 0.12rem; font-size: 0.24rem;}



.h_tit{ padding: 0.3rem 0;   }
.h_tit .icon{ height: 0.8rem; margin-right: 0.15rem;}
.h_tit .des .tit{ font-size: 0.36rem;}
.h_tit .des .tit .star{ height: 0.22rem; margin-left: 0.15rem; top: -0.15rem; } 
.h_tit .des .subtit{  margin-top: 0.08rem;}
.hmItem{ width: 100%; margin: 0 0% 3% 0;}
.hmItem:nth-child(3n){ margin-right: 0%;}
.hmItem .tparea ,.hmItem a{ border-radius: 0.2rem; -webkit-border-radius: 0.2rem; -moz-border-radius: 0.2rem; -ms-border-radius: 0.2rem; -o-border-radius: 0.2rem; }
.hmItem a{ display: flex; flex-direction: column; height: 100%; }
.hmItem .tparea{ position: relative; overflow: hidden; height: 0; padding-top: 100%; }
.hmItem .tparea .tp{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; -webkit-transition: transform .35s ease; -moz-transition: transform .35s ease; -ms-transition: transform .35s ease; -o-transition: transform .35s ease; }
.hmItem .tparea .status{ font-size: 0.22rem; }
.hmItem .des{ display: flex; flex-direction: column; justify-content: flex-start; min-height: 1.34rem; padding: 0.2rem 0.2rem 0.2rem; text-align: center;}
.hmItem .des .tit{ min-height: 1.5em; display: flex; align-items: flex-start; justify-content: center; font-size: 0.28rem; line-height: 1.5; text-align: center; }
.hmItem .des .info{ min-height: 1.6em; display: flex; align-items: flex-start; justify-content: center; margin-top: 0.04rem; line-height: 1.6; }
.hmItem .des .info:empty{ display: flex; visibility: hidden; }
.hmItem .tparea .arr{ height: 0.30rem; left: 50%; bottom: 0.1rem; transform: translateX(-50%);}
.hmItem a:hover .tparea .arr{ left: 50%; bottom: 0.12rem;}
.hmItem a:hover .tparea .tp{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); }

.h_sales .wrap .tparea{ position: relative; overflow: hidden; border-radius: 0.16rem; height: 0; padding-top: 100%; }
.h_sales .wrap .tparea .tp{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; -webkit-transition: transform .35s ease; -moz-transition: transform .35s ease; -ms-transition: transform .35s ease; -o-transition: transform .35s ease; }
.h_sales:hover .wrap .tparea .tp{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); }


}
/*********************************首页结束**********************************/

/*******************************************************************/
/*width:1200+*/
@media only screen and (min-width: 1200px){}
/** max-width:1200 **/
@media only screen and (max-width: 1365px){

	}
/** max-width:1200 **/
@media only screen and (max-width: 1199px){
	.c_main{ display: block;;}
.c_l{ width: 100%;}
.resultPart,.selectsPart{ padding: 0 20px;}
}
/** width:960px **/
@media only screen and (max-width: 1023px){
.i_main{ min-height: 0;}
.i_ban .tp{ width: 150%; max-width: 150%; margin-left: -25%;}
.banIntro .lmmc{ font-size: 30px; visibility:hidden;}
}
/** max-width:960 **/
@media only screen and (max-width: 959px){}
/** max-width:768 **/


/* inlined css/style-rel.part-02.css */
@media only screen and (max-width: 767px){
.turnpage a,.turnpage .span{ display: none;}
.turnpage .point{ display:inline-block; padding:0.1rem 0.3rem;margin:0 0.1rem; }
.turnpage .point .iconfont{ font-size:0.26rem;}

.plan_ban{ font-weight: bold; font-size: 0; color: #fff; padding: 40px 0;}
.plan_ban .tit{ font-size: 48px; font-weight: bold;}
.plan_ban .info span{ font-size: 18px;  font-weight: normal; padding: 0.4em 4em; border: 1px solid #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; }

.plan{ padding-bottom: 0.6rem; }
.i_tit{ padding: 0.5rem 0;}
.i_tit .tit{ font-size: 0.48rem;}
.i_tit .subtit{ font-size: 0.26rem; margin-top: 0.15rem;}
.plan .wrap{ display: block}
.planItem{ width: 100%; margin:  0 0% 4% 0;  padding: 0.4rem 0.3rem;box-shadow: 0px 0.07rem 0.13rem 1px rgba(11,11,122,0.15); }
.planItem .tp{ height: 0.72rem;}
.planItem .type{ margin-top: 0.15rem; font-size: 0.28rem;}
.planItem .price{ margin-top: 0.28rem;}
.planItem .price .unit{ font-size: 0.32rem;}
.planItem .price .newPrice{ font-size: 0.56rem; }
.planItem .price .oldPrice{ font-size: 0.36rem;}
.planItem .tit{ font-size: 0.26rem; padding:  0.1rem 0 0.28rem;}
.planItem .des{ padding: 0.28rem 0;}
.planItem .des .list{  padding: 0.08rem 0 0.08rem 0.5rem; font-size: 0.28rem;}
.planItem .des .list .icon{ top: 0.15rem; height: 0.28rem;}
.planItem .mandiv{ margin-top: 0.3rem;}
.planItem .mandiv .sbtn{ font-size: 0.3rem; padding: 0.4em 0; width: 80%; margin: 0 auto;}

.coo{ margin: 1rem 0 1.5rem;}
.coo .wrap{ padding:0.2rem 0 1rem;}
.cooItem{ width: 30%; }
.cooItem .tp{ height: 1.2rem; max-width: 100%;}
.cooItem .tit{ font-size: 0.3rem; margin-top: 0.15rem;}

.myPromote{ margin: 1rem auto 1.5rem;}
.myPromote .wrap{ padding: 0.5rem 0 0.6rem; display: block; }
.myPromote .intro,.myPromote .pcode{ width: 100%;}
.myPromote .intro{  padding: 0 0.4rem; margin-top: 0.3rem;}
.myPromote .intro::after{ display: none;}
.myPromote .intro .tit{ font-size: 0.46rem;}  
.myPromote .intro .subtit{ margin-top: 0.15rem; font-size: 0.32rem;}
.myPromote .intro .subtit .num{ margin: 0 0.15rem;}
.myPromote .intro .nr{ margin-top: 0.2rem; font-size: 0.32rem;}
.myPromote .pcode .tparea{ width: 100%;  padding: 0.4rem; }
.myPromote .pcode .tparea .shade .opa .sbtn{ font-size: 0.28rem;}
.myPromote .pcode .mandiv{ margin-top: 0.28rem;}
.myPromote .pcode .mandiv .sbtn{ font-size: 0.24rem;}
.myPromote .pcode .mandiv .sbtn .iconfont{ font-size: 0.26rem; margin-right: 0.1rem;}

.case{ padding: 0.3rem 0 0.5rem;}
.case .wrap{ padding: 0.3rem;}
.caseItem{ margin-bottom: 0.3rem;}
.caseItem a{ display: block}
.caseItem .tparea{ width: 100%; margin-right: 0;}
.caseItem .tparea .tp{ width: 100%; height: 2.2rem; }
.caseItem .des{ padding: 0.2rem 0; display: block;}
.caseItem .des .tit{ font-size: 0.3rem;}
.caseItem .des .nr{ font-size: 0.26rem;margin-top: 0.1rem;}
.caseItem .des .time{font-size: 0.24rem;   margin-top: 0.2rem;}

.caseDel{ padding: 0.32rem 0 0.54rem;}
.caseDel .wrap{ padding: 0 0.32rem 0.32rem;}
.location{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.26rem;
    line-height: 1.6;
    padding: 0.26rem 0 0.22rem;
    margin-bottom: 0.26rem;
}
.location .cutline{ margin: 0;}
.article{ gap: 0.26rem;}
.artHeader{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.2rem;
    padding-bottom: 0.26rem;
}
.artHeader .tit{ font-size: 0.4rem; line-height: 1.4;}
.artHeader .info{
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.12rem;
}
.artHeader .info .list{
    font-size: 0.24rem;
    margin-right: 0;
    padding: 0.08rem 0.18rem;
    min-height: 0;
}
.artBody{ padding: 0 0 0.12rem;}
.artBody .tp{ width: 100%; margin-bottom: 0.3rem;}
.artBody .wz{ font-size: 0.24rem; line-height: 1.9;}
.artBody .wz p{ margin: 0 0 0.24rem;}
.artBody .wz p:last-child{ margin-bottom: 0;}
.artBody .wz table{ display: block; overflow-x: auto;}

.loginPup{ border-radius: 0.2rem; -webkit-border-radius: 0.2rem; -moz-border-radius: 0.2rem; -ms-border-radius: 0.2rem; -o-border-radius: 0.2rem; overflow: hidden; }
.closePup{ right:0.36rem; top: 0.36rem;font-size:0.36rem; width: 0.46rem; height: 0.46rem;   line-height: 0.46rem;  }
.loginMain .tparea{ display: none;}
.loginForm{ padding: 0.5rem;}
.formTit{ font-size: 0.36rem; margin-bottom: 0.5rem;}
.formItem{ margin-bottom: 0.3rem;}
.formItem .icon{ height: 0.26rem;  left: 0.18rem;  }
.formItem .text{ width: 100%; font-size: 0.26rem;height: 0.8rem; line-height: 0.8rem; padding-left: 0.6rem;}
.formItem.yzm .text{ padding-right: 1.4rem; }
.formItem.yzm .sendBtn{ font-size: 0.24rem; right: 0.22rem;  }
.loginForm .agree{padding-left: 0.36rem; font-size: 0.22rem; }
.loginForm .formConfirm{ margin-top: 0.4rem;}
.loginForm .formConfirm .sbtn{ font-size: 0.26rem; }

.loginArea .avatar{ width: 24px; height: 24px;}
.loginInfoLay{ position: fixed; width: 94%; right: 3%;  top: 56px; padding: 0.2rem 0.3rem 0;  }
.loginInfoLay .baseInfo{ padding: 0.22rem 0; }
.loginInfoLay .baseInfo .tp{ width: 0.6rem; height: 0.6rem;margin-right: 0.24rem;}
.loginInfoLay .baseInfo .des .tit{ font-size: 0.26rem;}
.loginInfoLay .baseInfo .des .uid{ font-size: 0.24rem; }
.vipInfo .intro{ padding: 0.24rem 0.3rem 0.3rem;}
.vipInfo .intro .tit{ font-size: 0.26rem; }
.vipInfo .intro .subtit{ font-size: 0.22rem; margin-top: 0.08rem;}
.vipInfo .intro .mandiv{ margin-top: 0.24rem;}
.vipInfo .intro .mandiv .sbtn .icon{ height: 0.3rem; margin-right: 0.15rem;}
.vipInfo .intro .mandiv .sbtn .val{ font-size: 0.24rem; }
.vipInfo .points{ font-size: 0.24rem; padding: 0.2rem 0.3rem;}
.vipInfo .points .icon{ height: 0.26rem; margin-right: 0.15rem;}
.vipInfo .points.securityEntry .score{ font-size: 0.2rem; color: #4f6ea8; }
.loginInfoLay .exit{ font-size: 0.26rem; padding: 1em 0;}


.parmaStyle{ padding: 0.3rem;}
.paraPart{ margin-bottom: 0.2rem;}
.paraPart .title{ font-size: 0.3rem; }
.uploadAdd{ height: 100%;}
.uploadAdd .mandiv .sbtn{  height: 0.6rem; font-size: 0.24rem;}
.uploadAdd .mandiv .sbtn .icon{ height: 0.3rem; margin-right: 0.1rem;}
.uploadAdd .info{ font-size: 0.24rem;  margin-top: 0.15rem;}
.el-upload{ width: 100%;}
.el-upload-dragger{ height: 2.2rem !important;}
.styleItem{ width: 30%; margin: 0 5% 0.15rem 0; }
.styleItem .tparea .tp{  height: 0.9rem;}
.styleItem .tparea .shade .dui{ height: 0.24rem;}
.styleItem .tparea .shade .iconVip{  height: 0.4rem; right: -0.15rem; top: -0.2rem;}
.styleItem .tit{ padding: 0.1rem 0; }
.parmaStyle .formConfirm{ margin-top: 0.4rem;}
.parmaStyle .formConfirm .sbtn{ font-size: 0.3rem;}
.parmaStyle .formConfirm .sbtn span{ font-size: 0.24rem;}
.resultPart,.selectsPart{ padding: 0 0.3rem;}
.resultPart{ padding-top: 0.6rem;}
.resultPart .tab{ width: 100%;}
.resultPart .tab .list{ border-radius: 0.15rem; -webkit-border-radius: 0.15rem; -moz-border-radius: 0.15rem; -ms-border-radius: 0.15rem; -o-border-radius: 0.15rem; }
.resultPart .wrap{ margin: 0.3rem auto 0; min-height: 5rem;  padding: 0.3rem; }
.resultPart .formConfirm{ margin-top:0.4rem; }
.resultPart .formConfirm .sbtn{ font-size: 0.3rem; width: 2.6rem; margin: 0 0.15rem;}


.selectsPart{ margin:0.6rem 0 ;}
.spTitle{ font-size: 0.3rem; padding:0.3rem 0;}
.selectsPart{}
.selectsPart .wrap{ 
    column-count: 2; column-gap: 0.3rem;
}
.spItem{ margin-bottom: 0.3rem;}

.points{ padding-bottom: 0.5rem;}
.p_tit{ font-size: 0.4rem; }
.summary{ padding: 0.3rem 0.4rem; border-radius: 0.2rem; -webkit-border-radius: 0.2rem; -moz-border-radius: 0.2rem; -ms-border-radius: 0.2rem; -o-border-radius: 0.2rem; }
.summary .tit{ font-size: 0.32rem;}
.summary .num{ font-size: 0.6rem;}
.details{ padding: 0.15rem 0.4rem 0px; margin-top: 0.3rem; border-radius: 0.2rem; -webkit-border-radius: 0.2rem; -moz-border-radius: 0.2rem; -ms-border-radius: 0.2rem; -o-border-radius: 0.2rem; }
.p_tit2{ font-size: 0.32rem; padding: 0.8em 0;}
.details .table{ width: 100%; }

.details .table th,.details .table td{ padding: 1.5em 0.4rem;}





}
/*******************************************************************/

/* source: css/theme-light.css */
/* inlined css/theme-light.part-01.css */
html[data-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(233, 224, 206, 0.58), transparent 34%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 32%),
        linear-gradient(180deg, #fdfbf7 0%, #f5efe5 34%, #f8f4ed 68%, #ffffff 100%) !important;
    color: #2f2924;
}

html[data-theme="light"] a {
    color: #6c5d49;
}

html[data-theme="light"] a:hover {
    color: #9e845b;
}

html[data-theme="light"] .header {
    background: rgba(252, 248, 241, 0.84);
    border-bottom: 1px solid rgba(187, 170, 142, 0.24);
    box-shadow: 0 16px 34px rgba(138, 112, 74, 0.08);
    backdrop-filter: blur(18px);
}

html[data-theme="light"] .logo .logo-text,
html[data-theme="light"] .navlogo-text {
    color: #3f352a;
    text-shadow: none;
}

html[data-theme="light"] .navul li > a {
    color: #4d4337;
}

html[data-theme="light"] .navul li > a:hover,
html[data-theme="light"] .act_nav {
    color: #9a8258 !important;
}

html[data-theme="light"] .menubtn i {
    background-color: #6f604a;
}

html[data-theme="light"] .langSwitch select,
html[data-theme="light"] #siteLangSelect {
    border-color: rgba(182, 164, 132, 0.38) !important;
    background: rgba(255, 253, 249, 0.96) !important;
    color: #4e4437 !important;
    color-scheme: light !important;
    box-shadow: 0 10px 24px rgba(148, 124, 89, 0.08);
}

html[data-theme="light"] .langSwitch select option,
html[data-theme="light"] #siteLangSelect option {
    background: #fffdf9 !important;
    color: #4e4437 !important;
}

html[data-theme="light"] .theme-toggle {
    border-color: rgba(192, 174, 142, 0.34);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(245, 237, 224, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 12px 26px rgba(146, 125, 91, 0.08);
}

html[data-theme="light"] .theme-toggle-btn {
    color: #736755;
}

html[data-theme="light"] .theme-toggle-btn:hover {
    color: #43392e;
    background: rgba(236, 226, 210, 0.52);
}

html[data-theme="light"] .theme-toggle-btn.is-active {
    background: linear-gradient(135deg, #efe5d4 0%, #dbc29d 58%, #c7a979 100%);
    color: #4c3a27;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 10px 20px rgba(156, 132, 91, 0.16);
}

html[data-theme="light"] .topIntegralBadge,
html[data-theme="light"] .couponCodeBadge,
html[data-theme="light"] .loginArea .loginBtn,
html[data-theme="light"] .sbtn_white_rim {
    border-color: rgba(181, 163, 130, 0.34);
    background: rgba(255, 252, 247, 0.78);
    color: #5a4d3b;
    box-shadow: 0 10px 24px rgba(146, 123, 86, 0.08);
}

html[data-theme="light"] .topIntegralBadge:hover,
html[data-theme="light"] .couponCodeBadge:hover,
html[data-theme="light"] .loginArea .loginBtn:hover,
html[data-theme="light"] .sbtn_white_rim:hover {
    background: linear-gradient(135deg, #e7d9bf 0%, #d0ba95 100%);
    color: #3a3128;
}

html[data-theme="light"] .loginArea .avatar {
    box-shadow: 0 12px 28px rgba(146, 120, 82, 0.12);
}

html[data-theme="light"] .loginInfoLay,
html[data-theme="light"] .inav {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(246, 240, 230, 0.98) 100%);
    border: 1px solid rgba(190, 173, 143, 0.24);
    box-shadow: 0 20px 42px rgba(148, 123, 86, 0.12);
}

html[data-theme="light"] .loginInfoLay .baseInfo {
    border-bottom: 1px solid rgba(207, 191, 167, 0.46);
}

html[data-theme="light"] .loginInfoLay .baseInfo .des .tit,
html[data-theme="light"] .loginInfoLay .baseInfo .des .uid {
    color: #4b4034;
}

html[data-theme="light"] .loginInfoLay .baseInfo .des .uid .copyBtn {
    color: #9c8258;
}

html[data-theme="light"] .loginInfoLay .baseInfo .des .uid .copyBtn:hover {
    color: #6f5940;
}

html[data-theme="light"] .vipInfo,
html[data-theme="light"] .loginInfoLay .vipInfo {
    overflow: hidden;
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(247, 240, 231, 0.98) 0%, rgba(238, 228, 214, 0.98) 100%) !important;
    border: 1px solid rgba(191, 173, 142, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 16px 32px rgba(148, 123, 86, 0.1) !important;
}

html[data-theme="light"] .vipInfo .intro,
html[data-theme="light"] .loginInfoLay .vipInfo .intro {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 251, 245, 0.96) 0%, rgba(243, 235, 223, 0.94) 100%) !important;
}

html[data-theme="light"] .vipInfo .intro .tit,
html[data-theme="light"] .loginInfoLay .vipInfo .intro .tit {
    color: #59493a;
}

html[data-theme="light"] .vipInfo .intro .subtit,
html[data-theme="light"] .loginInfoLay .vipInfo .intro .subtit {
    color: #8e7b64;
}

html[data-theme="light"] .vipInfo .intro .mandiv .sbtn,
html[data-theme="light"] .loginInfoLay .vipInfo .intro .mandiv .sbtn {
    background: linear-gradient(135deg, #d7c19e 0%, #b79a70 100%);
    border: 1px solid rgba(181, 157, 117, 0.56);
    box-shadow: 0 14px 28px rgba(156, 132, 91, 0.18);
}

html[data-theme="light"] .vipInfo .intro .mandiv .sbtn .val,
html[data-theme="light"] .loginInfoLay .vipInfo .intro .mandiv .sbtn .val {
    color: #fffdf7;
}

html[data-theme="light"] .vipInfo .intro .mandiv .sbtn:hover,
html[data-theme="light"] .loginInfoLay .vipInfo .intro .mandiv .sbtn:hover {
    background: linear-gradient(135deg, #cfb38b 0%, #a98b60 100%);
}

html[data-theme="light"] .vipInfo .points,
html[data-theme="light"] .loginInfoLay .vipInfo .points {
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.88) 0%, rgba(245, 237, 226, 0.92) 100%) !important;
    border-top: 1px solid rgba(191, 173, 142, 0.24) !important;
    color: #6f604d !important;
    transition: background .18s ease, color .18s ease;
}

html[data-theme="light"] .vipInfo .points a,
html[data-theme="light"] .loginInfoLay .vipInfo .points a {
    color: #5a4d3b !important;
}

html[data-theme="light"] .vipInfo .points .score,
html[data-theme="light"] .loginInfoLay .vipInfo .points .score {
    color: #8a775f !important;
}

html[data-theme="light"] .vipInfo .points:hover,
html[data-theme="light"] .loginInfoLay .vipInfo .points:hover {
    background: linear-gradient(135deg, rgba(242, 233, 219, 0.86) 0%, rgba(233, 220, 198, 0.92) 100%);
}

html[data-theme="light"] .vipInfo .points.memberEntry,
html[data-theme="light"] .vipInfo .points.securityEntry,
html[data-theme="light"] .vipInfo .points.feedbackEntry,
html[data-theme="light"] .loginInfoLay .vipInfo .points.memberEntry,
html[data-theme="light"] .loginInfoLay .vipInfo .points.securityEntry,
html[data-theme="light"] .loginInfoLay .vipInfo .points.feedbackEntry {
    background: linear-gradient(180deg, rgba(255, 250, 243, 0.96) 0%, rgba(244, 235, 222, 0.98) 100%) !important;
    border-top: 1px solid rgba(191, 173, 142, 0.28) !important;
}

html[data-theme="light"] .vipInfo .points.memberEntry a,
html[data-theme="light"] .vipInfo .points.securityEntry a,
html[data-theme="light"] .vipInfo .points.feedbackEntry a,
html[data-theme="light"] .loginInfoLay .vipInfo .points.memberEntry a,
html[data-theme="light"] .loginInfoLay .vipInfo .points.securityEntry a,
html[data-theme="light"] .loginInfoLay .vipInfo .points.feedbackEntry a {
    color: #534638 !important;
}

html[data-theme="light"] .vipInfo .points.memberEntry .score,
html[data-theme="light"] .vipInfo .points.securityEntry .score,
html[data-theme="light"] .vipInfo .points.feedbackEntry .score,
html[data-theme="light"] .loginInfoLay .vipInfo .points.memberEntry .score,
html[data-theme="light"] .loginInfoLay .vipInfo .points.securityEntry .score,
html[data-theme="light"] .loginInfoLay .vipInfo .points.feedbackEntry .score {
    color: #8a775f !important;
}

html[data-theme="light"] .vipInfo .points .icon,
html[data-theme="light"] .loginInfoLay .vipInfo .points .icon {
    opacity: 0.92;
    filter: sepia(0.18) saturate(0.9) hue-rotate(346deg);
}

html[data-theme="light"] .vipInfo .points.memberEntry:hover,
html[data-theme="light"] .vipInfo .points.securityEntry:hover,
html[data-theme="light"] .vipInfo .points.feedbackEntry:hover,
html[data-theme="light"] .loginInfoLay .vipInfo .points.memberEntry:hover,
html[data-theme="light"] .loginInfoLay .vipInfo .points.securityEntry:hover,
html[data-theme="light"] .loginInfoLay .vipInfo .points.feedbackEntry:hover {
    background: linear-gradient(135deg, rgba(241, 232, 218, 0.96) 0%, rgba(231, 216, 193, 0.96) 100%) !important;
}

html[data-theme="light"] .loginInfoLay .exit {
    color: #6e5b44;
    border-top: 1px solid rgba(207, 191, 167, 0.36);
}

html[data-theme="light"] .loginInfoLay .exit:hover {
    color: #3f3429;
    background: linear-gradient(180deg, rgba(248, 240, 229, 0.8) 0%, rgba(240, 229, 211, 0.88) 100%);
}

html[data-theme="light"] .inav-theme-title,
html[data-theme="light"] .fnav a,
html[data-theme="light"] .copyright,
html[data-theme="light"] .copyright a,
html[data-theme="light"] .h_sales .tag,
html[data-theme="light"] .caseItem .des .nr,
html[data-theme="light"] .caseItem .des .time,
html[data-theme="light"] .artHeader .info .list,
html[data-theme="light"] .location,
html[data-theme="light"] .i_tit .subtit,
html[data-theme="light"] .myPromote .intro .nr,
html[data-theme="light"] .myPromote .intro .subtit {
    color: #897a66;
}

html[data-theme="light"] .navlogo,
html[data-theme="light"] .inavul li a {
    color: #4d4337;
}

html[data-theme="light"] .inavul li a {
    border-bottom-color: rgba(205, 191, 168, 0.18);
}

html[data-theme="light"] .inavul li a:hover,
html[data-theme="light"] .act_inav {
    color: #8f7651 !important;
    background: rgba(214, 197, 166, 0.12);
}

html[data-theme="light"] .bg_w,
html[data-theme="light"] .hmItem a,
html[data-theme="light"] .h_sales,
html[data-theme="light"] .planItem,
html[data-theme="light"] .case .wrap,
html[data-theme="light"] .caseDel .wrap,
html[data-theme="light"] .summary,
html[data-theme="light"] .details,
html[data-theme="light"] .loginInfoLay,
html[data-theme="light"] .resultPart .wrap,
html[data-theme="light"] .uploadAdd,
html[data-theme="light"] .c_l,
html[data-theme="light"] .c_r {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 241, 231, 0.96) 100%) !important;
    border: 1px solid rgba(191, 173, 142, 0.22);
    box-shadow: 0 16px 40px rgba(145, 122, 85, 0.08);
}

html[data-theme="light"] .planItem:hover,


/* inlined css/theme-light.part-02.css */
html[data-theme="light"] .hmItem a:hover {
    box-shadow: 0 20px 44px rgba(145, 122, 85, 0.12);
}

html[data-theme="light"] .h_tit .des .tit,
html[data-theme="light"] .h_tit2,
html[data-theme="light"] .hmItem .des .tit,
html[data-theme="light"] .artHeader .tit,
html[data-theme="light"] .i_tit .tit,
html[data-theme="light"] .p_tit,
html[data-theme="light"] .p_tit2,
html[data-theme="light"] .summary .num,
html[data-theme="light"] .summary .tit,
html[data-theme="light"] .details .table th,
html[data-theme="light"] .details .table td,
html[data-theme="light"] .formTit {
    color: #322a22;
}

html[data-theme="light"] .summary .num {
    text-shadow: none;
}

html[data-theme="light"] .sbtn_blue {
    color: #fffdf8;
    background: linear-gradient(135deg, #d6c29b 0%, #af946d 100%);
    box-shadow: 0 14px 28px rgba(156, 132, 90, 0.18);
}

html[data-theme="light"] .sbtn_blue:hover {
    background: linear-gradient(135deg, #cdb58b 0%, #a98a5f 100%);
}

html[data-theme="light"] .sbtn_blue_rim {
    border-color: rgba(184, 167, 136, 0.46);
    color: #725f45;
}

html[data-theme="light"] .sbtn_blue_rim:hover {
    background: linear-gradient(135deg, #dfcfb1 0%, #c6ad85 100%);
    color: #3b3127;
}

html[data-theme="light"] .formItem .text,
html[data-theme="light"] .createNum .text {
    background: rgba(255, 253, 249, 0.92);
    border-color: rgba(188, 171, 143, 0.28);
    color: #302922;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .formItem .text::placeholder,
html[data-theme="light"] .createNum .text::placeholder {
    color: #a09078;
}

html[data-theme="light"] .formItem .text:focus,
html[data-theme="light"] .createNum .text:focus {
    border-color: rgba(188, 161, 112, 0.56);
    box-shadow: 0 0 0 4px rgba(201, 181, 142, 0.18);
}

html[data-theme="light"] .details .table {
    background-color: transparent;
}

html[data-theme="light"] .details .table th {
    background-color: #f2ebdf;
}

html[data-theme="light"] .details .table td {
    border-bottom: 1px solid rgba(215, 201, 179, 0.68);
    color: #544a3d;
}

html[data-theme="light"] .pagination a,
html[data-theme="light"] .pagination span {
    background: rgba(255, 252, 247, 0.96);
    border-color: rgba(190, 173, 143, 0.34);
    color: #73624a;
    box-shadow: 0 8px 18px rgba(148, 124, 89, 0.06);
}

html[data-theme="light"] .pagination a.active,
html[data-theme="light"] .pagination a:active {
    border-color: #b59b74;
    background: linear-gradient(135deg, #d8c5a4 0%, #b69b73 100%);
    color: #fffdf8;
}

html[data-theme="light"] .footer {
    background-color: #f6f0e6;
    border-top: 1px solid rgba(190, 173, 143, 0.28);
}

html[data-theme="light"] .QQ {
    border-color: rgba(196, 180, 149, 0.34);
    box-shadow: 0 16px 36px rgba(147, 123, 87, 0.08);
}

html[data-theme="light"] .QQ dd .sp {
    background-color: rgba(255, 252, 247, 0.96);
}

html[data-theme="light"] .QQ dd .sp .iconfont {
    color: #a78a5f;
}

html[data-theme="light"] .QQ dd:hover .sp {
    background: linear-gradient(135deg, #dcc8a6 0%, #b79a72 100%);
}


/* inlined css/site-content-theme-preset.css */
/* SITE_CONTENT_THEME_PRESET + EDGE100 FALLBACK */

/* Generic content / article shell pages */
html[data-theme-preset] body.content-doc-page-active,
html[data-theme-preset] body.service-page-active,
html[data-theme-preset] body.privicy-page-active,
html[data-theme-preset] body.search-page-active,
html[data-theme-preset] body.notification-page-active,
html[data-theme-preset] body.help-center-page-active,
html[data-theme-preset] body.common-problem-page-active,
html[data-theme-preset] body.details-page-active,
html[data-theme-preset] body.policies-page-active,
html[data-theme-preset] body.policy-details-page-active,
html[data-theme-preset] body.notification-details-page-active,
html[data-theme-preset] body.channel-page-active,
html[data-theme-preset] body.openapi-docs-page-active,
html[data-theme-preset] body.integral-page-active {
    background: var(--xl-theme-bg, #0a0a0a) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active .caseDel .wrap,
html[data-theme-preset] body.content-doc-page-active .case .wrap,
html[data-theme-preset] body.content-doc-page-active .details,
html[data-theme-preset] body.content-doc-page-active .summary,
html[data-theme-preset] body.content-doc-page-active .ds-card-header,
html[data-theme-preset] body.content-doc-page-active .ds-card-body,
html[data-theme-preset] body.content-doc-page-active .ds-list-item,
html[data-theme-preset] body.service-page-active .caseDel .wrap,
html[data-theme-preset] body.privicy-page-active .caseDel .wrap,
html[data-theme-preset] body.search-page-active .case .wrap,
html[data-theme-preset] body.notification-page-active .case .wrap,
html[data-theme-preset] body.help-center-page-active .case .wrap,
html[data-theme-preset] body.common-problem-page-active .case .wrap,
html[data-theme-preset] body.details-page-active .caseDel .wrap,
html[data-theme-preset] body.policies-page-active .caseDel .wrap,
html[data-theme-preset] body.policy-details-page-active .caseDel .wrap,
html[data-theme-preset] body.notification-details-page-active .caseDel .wrap {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
    box-shadow: 0 12px 36px rgba(10, 10, 10, 0.45) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-card-header,
html[data-theme-preset] body.service-page-active .ds-card-header,
html[data-theme-preset] body.privicy-page-active .ds-card-header,
html[data-theme-preset] body.search-page-active .ds-card-header,
html[data-theme-preset] body.notification-page-active .ds-card-header,
html[data-theme-preset] body.help-center-page-active .ds-card-header,
html[data-theme-preset] body.details-page-active .ds-card-header {
    border-bottom-color: rgba(212, 168, 67, 0.22) !important;
    background: rgba(212, 168, 67, 0.08) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-card-title,
html[data-theme-preset] body.content-doc-page-active .location a,
html[data-theme-preset] body.content-doc-page-active .actLoca,
html[data-theme-preset] body.content-doc-page-active .ds-list-item,
html[data-theme-preset] body.content-doc-page-active .ds-list-item-title {
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active .location,
html[data-theme-preset] body.content-doc-page-active .cutline,
html[data-theme-preset] body.content-doc-page-active .ds-list-item-meta,
html[data-theme-preset] body.content-doc-page-active .ds-list-item-desc {
    color: var(--xl-theme-muted, #ffefc0) !important;
}

/* OpenAPI docs */
html[data-theme-preset] body.openapi-docs-page-active .doc-wrap h1,
html[data-theme-preset] body.openapi-docs-page-active .doc-section h2,
html[data-theme-preset] body.openapi-docs-page-active .doc-section h3 {
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.openapi-docs-page-active .doc-wrap .subtitle {
    color: var(--xl-theme-muted, #ffefc0) !important;
}

html[data-theme-preset] body.openapi-docs-page-active .doc-section h2 {
    border-left-color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] body.openapi-docs-page-active .doc-card,
html[data-theme-preset] body.openapi-docs-page-active .param-table th,
html[data-theme-preset] body.openapi-docs-page-active .code-block {
    background: var(--xl-theme-panel, #11100d) !important;
    border-color: var(--xl-theme-border, #211c10) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.openapi-docs-page-active .param-table td {
    border-bottom-color: rgba(212, 168, 67, 0.12) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

/* Integral / points page controls */
html[data-theme-preset] body.integral-page-active .topup-btn,
html[data-theme-preset] body.integral-page-active .redeem-btn {
    border-color: rgba(212, 168, 67, 0.48) !important;
    background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843) 0%, var(--xl-theme-accent-2, #d4a843) 100%) !important;
    color: var(--xl-theme-on-accent, #0a0a0a) !important;
    box-shadow: 0 8px 18px rgba(212, 168, 67, 0.28) !important;
}

html[data-theme-preset] body.integral-page-active #coupon-redeem .layui-input {
    background: var(--xl-theme-panel, #11100d) !important;
    border-color: rgba(212, 168, 67, 0.42) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

/* Channel / content marketing */
html[data-theme-preset] body.channel-page-active .channel-card,
html[data-theme-preset] body.channel-page-active .channel-hero,
html[data-theme-preset] body.channel-page-active .channel-list,
html[data-theme-preset] body.channel-page-active .wrap,
html[data-theme-preset] body.channel-page-active .case .wrap {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.channel-page-active a,
html[data-theme-preset] body.channel-page-active h1,
html[data-theme-preset] body.channel-page-active h2,
html[data-theme-preset] body.channel-page-active h3 {
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

/* Files asset center (shared with dedicated file, keep generic bridge) */
html[data-theme-preset] .files-page-bg,
html[data-theme-preset] body.files-asset-page-active {
    --asset-bg: var(--xl-theme-bg, #0a0a0a);
    --asset-panel: var(--xl-theme-panel, #11100d);
    --asset-panel-2: var(--xl-theme-popup, #15130f);
    --asset-line: var(--xl-theme-border, #211c10);
    --asset-line-soft: rgba(212, 168, 67, 0.18);
    --asset-text: var(--xl-theme-fg, #e0d9c8);
    --asset-sub: var(--xl-theme-muted, #ffefc0);
    --asset-muted: var(--xl-theme-muted, #ffefc0);
    --asset-blue: var(--xl-theme-accent, #d4a843);
    --asset-blue-2: var(--xl-theme-accent-2, #d4a843);
    color: var(--xl-theme-fg, #e0d9c8) !important;
    background:
        radial-gradient(circle at 47% 3%, rgba(212, 168, 67, 0.13), transparent 28rem),
        radial-gradient(circle at 82% 16%, rgba(212, 168, 67, 0.08), transparent 30rem),
        linear-gradient(180deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 46%, var(--xl-theme-bg, #0a0a0a) 100%) !important;
}

html[data-theme-preset] .files-page-bg .files-hero,
html[data-theme-preset] .files-page-bg .files-main,
html[data-theme-preset] .files-page-bg .record-card,
html[data-theme-preset] .files-page-bg .files-toolbar,
html[data-theme-preset] .files-page-bg .files-side,
html[data-theme-preset] body.files-asset-page-active .files-hero,
html[data-theme-preset] body.files-asset-page-active .record-card {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
    box-shadow: 0 14px 34px rgba(10, 10, 10, 0.48) !important;
}

html[data-theme-preset] .files-page-bg .files-sort-btn,
html[data-theme-preset] .files-page-bg .files-view-toggle,
html[data-theme-preset] .files-page-bg .record-copy-btn,
html[data-theme-preset] .files-page-bg .record-more-btn,
html[data-theme-preset] body.files-asset-page-active .files-sort-btn {
    border-color: rgba(212, 168, 67, 0.34) !important;
    background: var(--xl-theme-popup, #15130f) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] .files-page-bg .record-badge,
html[data-theme-preset] .files-page-bg .files-title-icon,
html[data-theme-preset] body.files-asset-page-active .record-badge {
    border-color: rgba(212, 168, 67, 0.42) !important;
    background: rgba(212, 168, 67, 0.16) !important;
    color: var(--xl-theme-accent, #d4a843) !important;
}

/* Edge 100 fallback for content pages: pure var/rgba already preferred above */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] body.content-doc-page-active,
    html[data-theme-preset] body.openapi-docs-page-active,
    html[data-theme-preset] body.integral-page-active,
    html[data-theme-preset] body.channel-page-active,
    html[data-theme-preset] body.files-asset-page-active,
    html[data-theme-preset] .files-page-bg {
        background: var(--xl-theme-bg, #0a0a0a) !important;
        color: var(--xl-theme-fg, #e0d9c8) !important;
    }

    html[data-theme-preset] body.content-doc-page-active .caseDel .wrap,
    html[data-theme-preset] body.content-doc-page-active .case .wrap,
    html[data-theme-preset] body.openapi-docs-page-active .doc-card,
    html[data-theme-preset] body.files-asset-page-active .record-card {
        border-color: var(--xl-theme-border, #211c10) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        color: var(--xl-theme-fg, #e0d9c8) !important;
    }

    html[data-theme-preset] body.integral-page-active .topup-btn,
    html[data-theme-preset] body.integral-page-active .redeem-btn {
        background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #d4a843)) !important;
        color: var(--xl-theme-on-accent, #0a0a0a) !important;
    }
}

html[data-theme-preset] body.content-doc-page-active .i_main,
html[data-theme-preset] body.content-doc-page-active .case,
html[data-theme-preset] body.content-doc-page-active .caseDel,
html[data-theme-preset] body.content-doc-page-active .wrap,
html[data-theme-preset] body.content-doc-page-active .bg_w,
html[data-theme-preset] body.content-doc-page-active .ds-card-header,
html[data-theme-preset] body.content-doc-page-active .ds-card-body,
html[data-theme-preset] body.content-doc-page-active .ds-list-item,
html[data-theme-preset] body.content-doc-page-active .location a,
html[data-theme-preset] body.content-doc-page-active .actLoca {
    color: var(--xl-theme-fg, #e0d9c8);
}

html[data-theme-preset] body.content-doc-page-active .wrap,
html[data-theme-preset] body.content-doc-page-active .bg_w,
html[data-theme-preset] body.content-doc-page-active .caseDel .wrap,
html[data-theme-preset] body.content-doc-page-active .case .wrap {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    box-shadow: 0 12px 36px rgba(10, 10, 10, 0.45) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-card-header {
    border-bottom-color: rgba(212, 168, 67, 0.24) !important;
    background: rgba(212, 168, 67, 0.08) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-list-item:hover,
html[data-theme-preset] body.content-doc-page-active .ds-list-item:focus-visible {
    border-color: rgba(212, 168, 67, 0.42) !important;
    background: rgba(212, 168, 67, 0.10) !important;
}

html[data-theme-preset] body.content-doc-page-active a {
    color: var(--xl-theme-muted, #ffefc0);
}

html[data-theme-preset] body.content-doc-page-active a:hover,
html[data-theme-preset] body.content-doc-page-active .actLoca {
    color: var(--xl-theme-accent, #d4a843) !important;
}



/* CONTENT_DOC_GENERIC_STRENGTHEN */
html[data-theme-preset] body.content-doc-page-active .i_main,
html[data-theme-preset] body.content-doc-page-active .case,
html[data-theme-preset] body.content-doc-page-active .caseDel,
html[data-theme-preset] body.content-doc-page-active .wp {
    color: var(--xl-theme-fg, #e0d9c8);
}

html[data-theme-preset] body.content-doc-page-active a,
html[data-theme-preset] body.content-doc-page-active .ds-list-item,
html[data-theme-preset] body.content-doc-page-active .ds-list-item-title {
    color: var(--xl-theme-muted, #ffefc0) !important;
}

html[data-theme-preset] body.content-doc-page-active a:hover,
html[data-theme-preset] body.content-doc-page-active .ds-list-item:hover,
html[data-theme-preset] body.content-doc-page-active .ds-list-item:hover .ds-list-item-title {
    color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-card-title,
html[data-theme-preset] body.content-doc-page-active .ds-list-item-meta,
html[data-theme-preset] body.content-doc-page-active .location a,
html[data-theme-preset] body.content-doc-page-active .location .actLoca {
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active .wrap,
html[data-theme-preset] body.content-doc-page-active .bg_w,
html[data-theme-preset] body.content-doc-page-active .ds-card-body {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] body.content-doc-page-active .wrap,
    html[data-theme-preset] body.content-doc-page-active .bg_w,
    html[data-theme-preset] body.content-doc-page-active .ds-card-header,
    html[data-theme-preset] body.content-doc-page-active .ds-card-body {
        border-color: var(--xl-theme-border, #211c10) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        box-shadow: 0 12px 32px rgba(10, 10, 10, 0.56) !important;
        color: var(--xl-theme-fg, #e0d9c8) !important;
    }
}


/* A9 light theme focus contrast */
html[data-theme="light"] {
    --a9-focus-ring: #005fcc;
    --a9-focus-shadow: rgba(0, 95, 204, .24);
    --a9-focus-inner: rgba(255, 255, 255, .86);
}

html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] [role="button"]:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] .sbtn:focus-visible,
html[data-theme="light"] .menubtn:focus-visible,
html[data-theme="light"] .theme-toggle-btn:focus-visible,
html[data-theme="light"] .theme-toggle-select:focus-visible,
html[data-theme="light"] #siteLangSelect:focus-visible,
html[data-theme="light"] .inav-language-select:focus-visible {
    outline-color: var(--a9-focus-ring, #005fcc);
    box-shadow: 0 0 0 6px var(--a9-focus-shadow, rgba(0, 95, 204, .24)), inset 0 0 0 1px var(--a9-focus-inner, rgba(255, 255, 255, .86));
}

html[data-theme-preset] body {
    background: var(--xl-theme-bg, #0a0a0a) !important;
    color: var(--xl-theme-fg, #e0d9c8);
}

html[data-theme-preset] a {
    color: var(--xl-theme-muted, #dbe8ff);
}

html[data-theme-preset] a:hover {
    color: var(--xl-theme-accent, #d4a843);
}

html[data-theme-preset] .header,
html[data-theme-preset] .loginInfoLay,
html[data-theme-preset] .inav {
    border-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8);
}

html[data-theme-preset] .logo .logo-text,
html[data-theme-preset] .navlogo .navlogo-text,
html[data-theme-preset] .navlogo-text,
html[data-theme-preset] .navul li > a,
html[data-theme-preset] .inavul li a {
    color: var(--xl-theme-muted, #ffefc0);
}

html[data-theme-preset] .logo .logo-text,
html[data-theme-preset] .navlogo .navlogo-text,
html[data-theme-preset] .navlogo-text {
    color: var(--xl-theme-muted, #ffefc0) !important;
    -webkit-text-fill-color: var(--xl-theme-muted, #ffefc0) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow:
        0 2px 12px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 2px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 36%, transparent);
}

html[data-theme-preset] .navul li > a:hover,
html[data-theme-preset] .act_nav,
html[data-theme-preset] .inavul li a:hover,
html[data-theme-preset] .act_inav {
    color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] .topIntegralBadge,
html[data-theme-preset] .couponCodeBadge,
html[data-theme-preset] .loginArea .loginBtn,
html[data-theme-preset] .sbtn_white_rim,
html[data-theme-preset] .sbtn_blue_rim {
    border-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] .loginArea .loginBtn,
html[data-theme-preset] .sbtn_blue {
    border-color: var(--xl-theme-accent, #d4a843) !important;
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8))) !important;
    color: var(--xl-theme-on-accent, var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent) !important;
}

html[data-theme-preset] .loginArea .loginBtn:hover,
html[data-theme-preset] .sbtn_blue:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 74%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 92%, var(--xl-theme-fg, #e0d9c8)), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 82%, var(--xl-theme-fg, #e0d9c8))) !important;
    box-shadow:
        0 16px 34px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent),
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 28%, transparent) !important;
}

html[data-theme-preset] .menubtn i {
    background-color: var(--xl-theme-accent, #d4a843) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] .langSwitch::before,
html[data-theme-preset] .langSwitch::after,
html[data-theme-preset] .theme-toggle:not(.theme-toggle--mobile)::before,
html[data-theme-preset] .theme-toggle:not(.theme-toggle--mobile)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

html[data-theme-preset] .theme-toggle--customized {
    overflow: visible;
    z-index: 10030;
}

html[data-theme-preset] .theme-toggle--customized .theme-toggle-select {
    pointer-events: none;
}

html[data-theme-preset] .theme-toggle-custom-trigger {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

html[data-theme-preset] .theme-toggle-custom-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10040;
    display: none;
    width: min(260px, calc(100vw - 24px));
    max-height: min(460px, calc(100vh - 120px));
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, var(--xl-theme-border, #211c10));
    border-radius: 12px;
    background: var(--xl-theme-popup, #15130f) !important;
    background-image: linear-gradient(180deg, var(--xl-theme-popup, #15130f), var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 20px 48px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 76%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent);
    color: var(--xl-theme-fg, #e0d9c8);
    overflow: auto;
    box-sizing: border-box;
}

html[data-theme-preset] .theme-toggle--custom-open .theme-toggle-custom-menu {
    display: grid;
    gap: 4px;
}

html[data-theme-preset] .theme-toggle-custom-group {
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--xl-theme-border, #211c10) 88%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--xl-theme-panel, #11100d) 90%, var(--xl-theme-bg, #0a0a0a)) !important;
    color: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 76%, transparent) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 8%, transparent);
}

html[data-theme-preset] .theme-toggle-custom-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

html[data-theme-preset] .theme-toggle-custom-option:hover,
html[data-theme-preset] .theme-toggle-custom-option:focus-visible,
html[data-theme-preset] .theme-toggle-custom-option.active {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, var(--xl-theme-panel, #11100d)) !important;
    color: var(--xl-theme-fg, #e0d9c8);
    outline: 0;
}

html[data-theme-preset] .bg_w,
html[data-theme-preset] .hmItem a,
html[data-theme-preset] .h_sales,
html[data-theme-preset] .planItem,
html[data-theme-preset] .case .wrap,
html[data-theme-preset] .caseDel .wrap,
html[data-theme-preset] .summary,
html[data-theme-preset] .details,
html[data-theme-preset] .resultPart .wrap,
html[data-theme-preset] .uploadAdd,
html[data-theme-preset] .c_l,
html[data-theme-preset] .c_r {
    border-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--xl-theme-fg, #e0d9c8);
}

html[data-theme-preset] .caseDel .wrap,
html[data-theme-preset] .details,
html[data-theme-preset] .summary {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, var(--xl-theme-border, #211c10)) !important;
    background: color-mix(in srgb, var(--xl-theme-panel, #11100d) 88%, var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 12px 48px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent) !important;
}

html[data-theme-preset] .ds-card-header {
    border-bottom-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent) !important;
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 8%, transparent) !important;
}

html[data-theme-preset] .login-msg-btn {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent) !important;
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8))) !important;
    color: var(--xl-theme-on-accent, var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent) !important;
}

html[data-theme-preset] .login-msg-btn:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 72%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 92%, var(--xl-theme-fg, #e0d9c8)), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 82%, var(--xl-theme-fg, #e0d9c8))) !important;
    box-shadow:
        0 16px 34px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent),
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 28%, transparent) !important;
}

html[data-theme-preset] .login-msg-btn::after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 42%, transparent) 0%, transparent 70%) !important;
}

html[data-theme-preset] .h_tit .des .tit,
html[data-theme-preset] .h_tit2,
html[data-theme-preset] .hmItem .des .tit,
html[data-theme-preset] .artHeader .tit,
html[data-theme-preset] .i_tit .tit,
html[data-theme-preset] .p_tit,
html[data-theme-preset] .p_tit2,
html[data-theme-preset] .summary .num,
html[data-theme-preset] .summary .tit,
html[data-theme-preset] .formTit {
    color: var(--xl-theme-fg, #e0d9c8);
}

html[data-theme-preset] .footer {
    border-top-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, var(--xl-theme-border, #211c10)) !important;
    background: color-mix(in srgb, var(--xl-theme-panel, #11100d) 88%, var(--xl-theme-bg, #0a0a0a)) !important;
    color: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 68%, transparent);
}

html[data-theme-preset] .fnav a,
html[data-theme-preset] .copyright,
html[data-theme-preset] .copyright a {
    color: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 68%, transparent) !important;
}

html[data-theme-preset] .fnav a::after {
    background-color: color-mix(in srgb, var(--xl-theme-border, #211c10) 76%, transparent);
}

html[data-theme-preset] .fnav a:hover,
html[data-theme-preset] .copyright a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
}
/* EDGE100_THEME_LIGHT_LEGACY_FALLBACK */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] .logo .logo-text,
    html[data-theme-preset] .navlogo .navlogo-text,
    html[data-theme-preset] .navlogo-text {
        text-shadow:
            0 2px 12px rgba(212, 168, 67, 0.28),
            0 0 2px rgba(224, 217, 200, 0.36) !important;
    }

    html[data-theme-preset] .loginArea .loginBtn,
    html[data-theme-preset] .sbtn_blue,
    html[data-theme-preset] .login-msg-btn {
        border-color: var(--xl-theme-accent, #d4a843) !important;
        background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #d4a843)) !important;
        color: var(--xl-theme-on-accent, #0a0a0a) !important;
        box-shadow:
            0 12px 28px rgba(212, 168, 67, 0.28),
            0 0 18px rgba(212, 168, 67, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    }

    html[data-theme-preset] .loginArea .loginBtn:hover,
    html[data-theme-preset] .sbtn_blue:hover,
    html[data-theme-preset] .login-msg-btn:hover {
        border-color: rgba(233, 204, 132, 0.84) !important;
        background: linear-gradient(135deg, #e2bb5a, var(--xl-theme-accent, #d4a843)) !important;
        box-shadow:
            0 16px 34px rgba(212, 168, 67, 0.34),
            0 0 22px rgba(212, 168, 67, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    html[data-theme-preset] .menubtn i {
        box-shadow: 0 0 10px rgba(212, 168, 67, 0.34) !important;
    }

    html[data-theme-preset] .langSwitch::before,
    html[data-theme-preset] .langSwitch::after,
    html[data-theme-preset] .theme-toggle:not(.theme-toggle--mobile)::before,
    html[data-theme-preset] .theme-toggle:not(.theme-toggle--mobile)::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    html[data-theme-preset] .theme-toggle-custom-menu {
        border-color: rgba(212, 168, 67, 0.42) !important;
        background: var(--xl-theme-popup, #15130f) !important;
        background-image: linear-gradient(180deg, var(--xl-theme-popup, #15130f), var(--xl-theme-bg, #0a0a0a)) !important;
        box-shadow:
            0 20px 48px rgba(10, 10, 10, 0.76),
            inset 0 1px 0 rgba(224, 217, 200, 0.10) !important;
    }

    html[data-theme-preset] .theme-toggle-custom-group {
        border-color: rgba(33, 28, 16, 0.88) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        color: var(--xl-theme-muted, #ffefc0) !important;
        box-shadow: inset 0 1px 0 rgba(224, 217, 200, 0.08) !important;
    }

    html[data-theme-preset] .theme-toggle-custom-option:hover,
    html[data-theme-preset] .theme-toggle-custom-option:focus-visible,
    html[data-theme-preset] .theme-toggle-custom-option.active {
        border-color: rgba(212, 168, 67, 0.58) !important;
        background: rgba(63, 48, 18, 0.96) !important;
        color: var(--xl-theme-fg, #e0d9c8) !important;
    }

    html[data-theme-preset] .caseDel .wrap,
    html[data-theme-preset] .details,
    html[data-theme-preset] .summary {
        border-color: rgba(212, 168, 67, 0.28) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        box-shadow:
            0 12px 48px rgba(10, 10, 10, 0.45),
            0 0 0 1px rgba(212, 168, 67, 0.16) !important;
    }

    html[data-theme-preset] .ds-card-header {
        border-bottom-color: rgba(212, 168, 67, 0.22) !important;
        background: rgba(63, 48, 18, 0.42) !important;
        color: var(--xl-theme-fg, #e0d9c8) !important;
    }

    html[data-theme-preset] .login-msg-btn::after {
        background: radial-gradient(circle at center, rgba(224, 217, 200, 0.42) 0%, transparent 70%) !important;
    }

    html[data-theme-preset] .footer {
        border-top-color: rgba(212, 168, 67, 0.22) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        color: var(--xl-theme-muted, #ffefc0) !important;
    }

    html[data-theme-preset] .fnav a,
    html[data-theme-preset] .copyright,
    html[data-theme-preset] .copyright a {
        color: var(--xl-theme-muted, #ffefc0) !important;
    }

    html[data-theme-preset] .fnav a::after {
        background-color: rgba(33, 28, 16, 0.76) !important;
    }
}

/* content-page-theme-extra EDGE100 */
html[data-theme-preset] body.content-doc-page-active .i_main,
html[data-theme-preset] body.content-doc-page-active .case,
html[data-theme-preset] body.content-doc-page-active .caseDel,
html[data-theme-preset] body.content-doc-page-active .caseDel .wrap,
html[data-theme-preset] body.content-doc-page-active .details,
html[data-theme-preset] body.content-doc-page-active .summary {
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active .caseDel .wrap,
html[data-theme-preset] body.content-doc-page-active .details,
html[data-theme-preset] body.content-doc-page-active .summary {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    box-shadow: 0 12px 48px rgba(10, 10, 10, 0.45) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-card-header,
html[data-theme-preset] body.content-doc-page-active .ds-card-title,
html[data-theme-preset] body.content-doc-page-active .location a,
html[data-theme-preset] body.content-doc-page-active .actLoca {
    color: var(--xl-theme-muted, #ffefc0) !important;
    border-bottom-color: var(--xl-theme-border, #211c10) !important;
}

html[data-theme-preset] body.content-doc-page-active .ds-list-item,
html[data-theme-preset] body.content-doc-page-active .ds-list-item:hover {
    border-color: var(--xl-theme-border, #211c10) !important;
    background: var(--xl-theme-popup, #15130f) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.content-doc-page-active a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
}

/* source: css/header-controls.css */
/* inlined css/header-controls/header-controls-01.css */

/* inlined css/header-controls/header-controls-01.part-01.css */
.loginArea {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1vw, 20px);
    flex: 0 0 auto;
    min-width: max-content;
}

.headerUserStack {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(98px, 5.8vw, 112px);
    min-height: clamp(54px, 4vw, 64px);
    gap: 3px;
    overflow: visible;
}

.topIntegralBadge,
.couponCodeBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(98, 143, 231, 0.38);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    color: #dbe8ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.topIntegralBadge {
    gap: 4px;
    margin-right: 0;
    width: min(106px, 100%);
    height: 18px;
    min-height: 18px;
    padding: 0 8px;
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.couponCodeBadge:hover,
.topIntegralBadge:hover {
    border-color: rgba(99, 158, 255, 0.7);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 30px rgba(30, 88, 190, 0.22);
}

.topIntegralBadge .icon {
    width: 11px;
    height: 11px;
    display: block;
    flex: 0 0 auto;
}

.topIntegralBadge span {
    display: block;
    min-width: 0;
    white-space: nowrap;
}

.loginArea .avatarBtn {
    display: block;
    flex: 0 0 auto;
    vertical-align: middle;
}

.headerUserStack .loginInfoLay {
    right: 0;
    top: calc(100% + 8px);
}

#photoHeaderAuthSlot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.langSwitch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 36px;
    min-width: 3em;
    margin-right: 0;
    padding: 0 12px;
    border: 1px solid rgba(98, 143, 231, 0.38);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
    /* 宽度由可见文字撑开，禁止绝对定位标签把容器撑塌 */
    width: auto !important;
    max-width: none !important;
}

.langSwitch__label {
    position: static;
    z-index: 3;
    display: inline-block;
    overflow: visible;
    color: #dbe8ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 36px;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
}

/* 语言 / 主题按钮：都不要装饰图标，纯文字 */
.langSwitch::before,
.langSwitch::after,
.theme-toggle:not(.theme-toggle--mobile)::before,
.theme-toggle:not(.theme-toggle--mobile)::after {
    content: none !important;
    display: none !important;
}

#siteLangSelect {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    box-sizing: border-box;
    /* 铺满外壳作点击层；外壳宽度由文字 label 决定 */
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent;
    color-scheme: dark !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 36px;
    cursor: pointer;
    box-shadow: none !important;
    opacity: 0.01;
}

#siteLangSelect:focus {
    border-color: rgba(99, 158, 255, 0.78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 3px rgba(78, 132, 255, 0.16),
        0 14px 30px rgba(30, 88, 190, 0.22);
}

#siteLangSelect option {
    background: #10192b !important;
    color: #dbe8ff !important;
}

.loginArea .loginBtn {
    box-sizing: border-box;
    min-width: 86px;
    height: 36px;
    padding: 0 20px;
    border: 1px solid rgba(106, 170, 255, 0.72) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #2c7dff 0%, #4aa3ff 100%) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 36px;
    letter-spacing: 0.3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 12px 28px rgba(42, 111, 255, 0.32),
        0 0 18px rgba(71, 143, 255, 0.18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.loginArea .loginBtn:hover {
    color: #ffffff !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 16px 32px rgba(42, 111, 255, 0.4),
        0 0 24px rgba(71, 143, 255, 0.26);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    flex: 0 0 auto;
    /* 宽度由可见文字撑开 */
    width: auto !important;
    min-width: 4em;
    max-width: none !important;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(98, 143, 231, 0.38);
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
    transition: border-color .18s ease, box-shadow .18s ease;
    z-index: 20;
}

.theme-toggle:hover,
.theme-toggle:focus-within {
    border-color: rgba(99, 158, 255, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 3px rgba(78, 132, 255, 0.14),
        0 14px 30px rgba(30, 88, 190, 0.22);
}

.theme-toggle-label {
    position: static;
    z-index: 3;
    display: inline-block;
    overflow: visible;
    color: #dbe8ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 36px;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
}

.theme-toggle-select {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 10px;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
    text-shadow: none;
    caret-color: transparent;
    color-scheme: dark;
    font-size: 12px;
    font-weight: 700;
    line-height: 36px;
    cursor: pointer;
    opacity: 0.01;
}

.theme-toggle-select option {
    background: #10192b;
    color: #dbe8ff;
}


/* inlined css/header-controls/header-controls-01.part-02.css */
.theme-toggle-select:focus {
    outline: 0;
}

html[data-theme="light"] .loginArea .topIntegralBadge,
html[data-theme="light"] .loginArea .couponCodeBadge {
    border-color: rgba(98, 143, 231, 0.38);
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    color: #dbe8ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
}

html[data-theme="light"] #siteLangSelect {
    border-color: rgba(98, 143, 231, 0.38) !important;
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9)) !important;
    color: transparent !important;
    color-scheme: dark !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
}

html[data-theme="light"] #siteLangSelect option {
    background: #10192b !important;
    color: #dbe8ff !important;
}

html[data-theme="light"] .langSwitch__label {
    color: #dbe8ff;
}

html[data-theme="light"] .loginArea .loginBtn {
    border-color: rgba(106, 170, 255, 0.72) !important;
    background: linear-gradient(135deg, #2c7dff 0%, #4aa3ff 100%) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 12px 28px rgba(42, 111, 255, 0.32),
        0 0 18px rgba(71, 143, 255, 0.18);
}

html[data-theme="light"] .loginArea .loginBtn:hover {
    background: linear-gradient(135deg, #2c7dff 0%, #4aa3ff 100%) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .theme-toggle {
    border-color: rgba(98, 143, 231, 0.38);
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
}

html[data-theme="light"] .theme-toggle-label {
    color: #dbe8ff;
}

html[data-theme="light"] .theme-toggle-select {
    color: transparent;
    color-scheme: dark;
}

html[data-theme="light"] .theme-toggle-select option {
    background: #10192b;
    color: #dbe8ff;
}

.inav-theme-switch {
    padding: 0 30px 18px;
}

.inav-theme-title {
    display: block;
    margin-bottom: 10px;
    color: rgba(210, 225, 251, 0.72);
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.theme-toggle--mobile {
    width: 100%;
    height: 44px;
    padding: 0;
    justify-content: flex-start;
    box-sizing: border-box;
}

.theme-toggle--mobile::before,
.theme-toggle--mobile::after {
    display: none;
}

.theme-toggle--mobile .theme-toggle-label {
    left: 14px;
    right: 36px;
    font-size: 14px;
}

.theme-toggle--mobile .theme-toggle-select {
    height: 44px;
    padding: 0 36px 0 14px;
    font-size: 14px;
    line-height: 44px;
}



/* inlined css/header-controls/header-controls-02.css */
@media screen and (min-width: 1200px) {
    .loarea .wp {
        column-gap: clamp(12px, 1.1vw, 22px);
    }

    .nav {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 clamp(6px, 0.8vw, 18px);
        box-sizing: border-box;
        overflow: hidden;
    }

    .navul {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: clamp(16px, 1.2vw, 28px);
        width: 100%;
        margin: 0;
    }

    .navul li {
        flex: 0 0 auto;
        min-width: 0;
    }

    .navul li > a {
        padding: 0 clamp(3px, 0.4vw, 8px);
        font-size: clamp(11px, 0.68vw, 15px);
        font-weight: 700;
        white-space: nowrap;
    }
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
    .loarea .wp {
        width: min(100% - 20px, 1600px);
        column-gap: clamp(8px, 0.7vw, 14px);
    }

    .logo {
        width: clamp(164px, 14vw, 210px);
    }

    .logo .tp {
        height: clamp(48px, 4.1vw, 58px);
    }

    .logo .logo-text {
        max-width: 118px;
        font-size: clamp(20px, 1.7vw, 26px);
        letter-spacing: 0.4px;
    }

    .nav {
        display: flex;
        align-items: center;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 0 6px;
        overflow: visible;
    }

    .navul {
        width: 100%;
        justify-content: space-between;
        gap: clamp(10px, 0.8vw, 18px);
        margin: 0;
    }

    .navul li {
        flex: 0 1 auto;
        min-width: 0;
    }

    .navul li > a {
        height: clamp(72px, 5.8vw, 82px);
        padding: 0 clamp(2px, 0.35vw, 6px);
        font-size: clamp(11px, 0.72vw, 14px);
    }

    .loginArea {
        gap: clamp(6px, 0.5vw, 10px);
    }

    .loginArea .loginBtn {
        min-width: 76px;
        height: 34px;
        padding: 0 16px;
        font-size: 13px;
        line-height: 34px;
    }

    .couponCodeBadge {
        height: 34px;
        padding: 0 9px;
        font-size: 12px;
    }

    .langSwitch {
        height: 34px;
    }

    .langSwitch::before,
    .langSwitch::after,
    .theme-toggle:not(.theme-toggle--mobile)::before,
    .theme-toggle:not(.theme-toggle--mobile)::after {
        content: none !important;
        display: none !important;
    }

    .langSwitch__label {
        left: 8px;
        right: 8px;
        font-size: 11px;
        text-align: center;
    }

    #siteLangSelect {
        width: auto;
        min-width: 36px;
        max-width: none;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 11px;
        line-height: 34px;
    }

    .theme-toggle {
        width: auto;
        min-width: 56px;
        max-width: none;
        height: 34px;
    }

    .theme-toggle-label {
        left: 8px;
        right: 8px;
        font-size: 11px;
        text-align: center;
    }

    .theme-toggle-select {
        height: 34px;
        padding: 0 8px;
        font-size: 11px;
        line-height: 34px;
    }

    .headerUserStack {
        width: 90px;
        min-height: 60px;
    }

    .topIntegralBadge {
        width: min(98px, 100%);
        padding: 0 7px;
        font-size: 10px;
    }

    .topIntegralBadge .icon {
        width: 10px;
        height: 10px;
    }
}

@media screen and (max-width: 767px) {
    .headerUserStack {
        width: 44px;
        min-height: 44px;
        gap: 2px;
    }

    .topIntegralBadge {
        width: 44px;
        height: 14px;
        min-height: 14px;
        padding: 0 4px;
        gap: 2px;
        font-size: 9px;
    }

    .couponCodeBadge {
        height: 30px;
        padding: 0 9px;
        font-size: 12px;
    }

    .theme-toggle:not(.theme-toggle--mobile) {
        width: auto;
        min-width: 52px;
        max-width: none;
        height: 32px;
    }

    .theme-toggle:not(.theme-toggle--mobile) .theme-toggle-label {
        left: 8px;
        right: 8px;
        font-size: 10px;
        text-align: center;
    }

    .theme-toggle:not(.theme-toggle--mobile) .theme-toggle-select {
        height: 32px;
        padding: 0 8px;
        font-size: 10px;
        line-height: 32px;
    }

    .theme-toggle--mobile {
        width: 100%;
        height: 44px;
    }

    .topIntegralBadge .icon {
        width: 9px;
        height: 9px;
    }
}

.inav-language {
    padding: 16px 20px 22px;
}

.inav-language-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(210, 225, 251, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.inav-language-select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 36px 0 14px;
    border: 1px solid rgba(98, 143, 231, 0.38);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    color: #dbe8ff;
    font-size: 14px;
    font-weight: 700;
}

.mobile-nav-mask {
    display: none;
}

.mobile-nav-mask.is-open {
    display: block;
}

.mobile-nav-mask[hidden] {
    display: none !important;
}

.inav {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
}

.inav.is-open,
html.mobile-nav-open .inav {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

@media screen and (max-width: 767px) {
    .loarea .wp,
    body.home-header-shell .loarea .wp,
    body:has(.xl-home) .loarea .wp {
        padding-right: 56px !important;
        box-sizing: border-box;
    }

    .menubtn,
    body.home-header-shell .menubtn,
    body:has(.xl-home) .menubtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        top: calc((var(--home-header-height, 70px) - 44px) / 2);
        right: max(12px, env(safe-area-inset-right));
        z-index: 214748302;
        touch-action: manipulation;
    }

    .loginArea,
    body.home-header-shell .loginArea,
    body:has(.xl-home) .loginArea {
        position: absolute;
        top: 50%;
        right: 58px;
        max-width: calc(100% - clamp(120px, 42vw, 180px) - 62px);
        min-width: 0;
        overflow: visible;
        justify-content: flex-end;
        gap: 4px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 214748250;
    }

    .loginArea .couponCodeBadge,
    .loginArea .langSwitch,
    .loginArea > .theme-toggle:not(.theme-toggle--mobile),
    .loginArea .topIntegralBadge {
        display: none !important;
    }

    .loginArea .headerUserStack,
    .loginArea .avatarBtn,
    .loginArea .loginBtn {
        pointer-events: auto;
    }

    .loginArea .loginBtn {
        box-sizing: border-box;
        min-width: 64px;
        max-width: 84px;
        height: 44px;
        padding: 0 12px;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .headerUserStack .loginInfoLay {
        right: -52px;
        max-width: calc(100vw - 24px);
    }

    .inav {
        width: min(88vw, 360px);
        height: 100vh;
        height: 100dvh;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .mobile-nav-mask {
        display: none;
    }

    .mobile-nav-mask.is-open {
        display: block;
    }

    .inavul li > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.35;
    }
}


/* inlined css/header-controls/header-controls-legacy-fallback.css */
/* HOME_HEADER_CONTROLS_LEGACY_FALLBACK_GUARD */
.loginArea {
    gap: 8px;
    min-width: 120px;
}

.headerUserStack {
    width: 104px;
    min-height: 58px;
}

.topIntegralBadge {
    width: 106px;
    max-width: 100%;
}

@supports (width: clamp(1px, 1vw, 2px)) {
    .loginArea {
        gap: clamp(12px, 1vw, 20px);
        min-width: max-content;
    }

    .headerUserStack {
        width: clamp(98px, 5.8vw, 112px);
        min-height: clamp(54px, 4vw, 64px);
    }

    .topIntegralBadge {
        width: min(106px, 100%);
    }
}

@media screen and (min-width: 1200px) {
    .loarea .wp {
        column-gap: 16px;
    }

    .nav {
        padding: 0 12px;
    }

    .navul {
        gap: 20px;
    }

    .navul li > a {
        padding: 0 5px;
        font-size: 14px;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .loarea .wp {
            column-gap: clamp(12px, 1.1vw, 22px);
        }

        .nav {
            padding: 0 clamp(6px, 0.8vw, 18px);
        }

        .navul {
            gap: clamp(16px, 1.2vw, 28px);
        }

        .navul li > a {
            padding: 0 clamp(3px, 0.4vw, 8px);
            font-size: clamp(11px, 0.68vw, 15px);
        }
    }
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
    .loarea .wp {
        width: calc(100% - 20px);
        max-width: 1600px;
        column-gap: 11px;
    }

    .logo {
        width: 188px;
    }

    .logo .tp {
        height: 54px;
    }

    .logo .logo-text,
    body.home-header-shell .logo .logo-text,
    body:has(.xl-home) .logo .logo-text {
        max-width: 150px;
    }

    .logo .logo-text {
        font-size: 24px;
    }

    .navul {
        gap: 14px;
    }

    .navul li > a {
        height: 78px;
        padding: 0 4px;
        font-size: 13px;
    }

    .loginArea {
        gap: 8px;
    }

    .topIntegralBadge {
        width: 98px;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .loarea .wp {
            width: min(100% - 20px, 1600px);
            column-gap: clamp(8px, 0.7vw, 14px);
        }

        .logo {
            width: clamp(164px, 14vw, 210px);
        }

        .logo .tp {
            height: clamp(48px, 4.1vw, 58px);
        }

        .logo .logo-text,
        body.home-header-shell .logo .logo-text,
        body:has(.xl-home) .logo .logo-text {
            /* HOME_HEADER_LOGO_MEDIUM_WIDTH_GUARD */
            max-width: clamp(150px, 10.8vw, 170px);
        }

        .logo .logo-text {
            font-size: clamp(20px, 1.7vw, 26px);
        }

        .navul {
            gap: clamp(10px, 0.8vw, 18px);
        }

        .navul li > a {
            height: clamp(72px, 5.8vw, 82px);
            padding: 0 clamp(2px, 0.35vw, 6px);
            font-size: clamp(11px, 0.72vw, 14px);
        }

        .loginArea {
            gap: clamp(6px, 0.5vw, 10px);
        }

        .topIntegralBadge {
            width: min(98px, 100%);
        }
    }
}

@media screen and (max-width: 767px) {
    .menubtn,
    body.home-header-shell .menubtn,
    body:has(.xl-home) .menubtn {
        right: 12px;
    }

    .loginArea,
    body.home-header-shell .loginArea,
    body:has(.xl-home) .loginArea {
        max-width: calc(100% - 242px);
    }

    .inav {
        width: 88vw;
        max-width: 360px;
        height: 100vh;
        padding-bottom: 18px;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .menubtn,
        body.home-header-shell .menubtn,
        body:has(.xl-home) .menubtn {
            right: max(12px, env(safe-area-inset-right));
        }

        .loginArea,
        body.home-header-shell .loginArea,
        body:has(.xl-home) .loginArea {
            max-width: calc(100% - clamp(120px, 42vw, 180px) - 62px);
        }

        .inav {
            width: min(88vw, 360px);
            height: 100dvh;
            padding-bottom: calc(18px + env(safe-area-inset-bottom));
        }
    }
}


/* 顶栏语言/主题：无图标 + 文字撑开宽度（禁止绝对定位把容器塌成 0） */
.loginArea .langSwitch::before,
.loginArea .langSwitch::after,
.loginArea .theme-toggle:not(.theme-toggle--mobile)::before,
.loginArea .theme-toggle:not(.theme-toggle--mobile)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}
.loginArea .langSwitch,
.loginArea .theme-toggle:not(.theme-toggle--mobile) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 12px !important;
    overflow: visible !important;
}
.loginArea .langSwitch__label,
.loginArea .theme-toggle:not(.theme-toggle--mobile) .theme-toggle-label {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 36px !important;
    pointer-events: none !important;
}
.loginArea #siteLangSelect,
.loginArea .theme-toggle:not(.theme-toggle--mobile) .theme-toggle-select {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    opacity: 0.01 !important;
    box-shadow: none !important;
}
/* 自定义主题触发层铺满外壳即可，勿再写死宽度 */
.loginArea .theme-toggle-custom-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* A9 focus layer for shared header controls */
#siteLangSelect:focus-visible,
.inav-language-select:focus-visible,
.theme-toggle-btn:focus-visible,
.theme-toggle-select:focus-visible,
.topIntegralBadge:focus-visible,
.couponCodeBadge:focus-visible,
.loginArea .loginBtn:focus-visible,
.loginArea .avatarBtn:focus-visible,
.headerUserStack:focus-within,
.theme-toggle:focus-within {
    outline: 3px solid var(--a9-focus-ring, #58a6ff);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--a9-focus-shadow, rgba(88, 166, 255, .28));
}

.headerUserStack.hasVipMark .headerVipBadge {
    position: absolute;
    top: 2px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 16px;
    padding: 0 6px;
    border: 1px solid rgba(255, 230, 148, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, #fff4b8 0%, #f6c85f 45%, #c98a14 100%);
    color: #3b2500;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .3px;
    box-shadow:
        0 6px 14px rgba(188, 130, 17, .32),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    pointer-events: none;
    text-transform: uppercase;
}

.headerAssetBadge,
.headerNavMiniBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 18px;
    min-height: 18px;
    padding: 0 8px;
    border: 1px solid rgba(98, 143, 231, 0.38);
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(19, 29, 45, 0.94), rgba(8, 14, 25, 0.9));
    color: #dbe8ff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 8, 25, 0.24);
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.headerAssetBadge {
    gap: 4px;
    width: min(106px, 100%);
    letter-spacing: 0;
}

.headerNavMiniBadge {
    min-width: 0;
    letter-spacing: 0;
}

.headerAssetBadge:hover,
.headerNavMiniBadge:hover {
    border-color: rgba(99, 158, 255, 0.7);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 30px rgba(30, 88, 190, 0.22);
}

.headerAssetBadge .icon {
    width: 11px;
    height: 11px;
    display: block;
    flex: 0 0 auto;
}

.headerAssetBadge span {
    display: block;
    min-width: 0;
    white-space: nowrap;
}

.headerAssetBadge--785compact,
.headerChannelBadge--785compact,
.headerFeedbackBadge--785compact {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .headerUserStack.hasVipMark .headerVipBadge {
        top: -1px;
        right: -2px;
        min-width: 24px;
        height: 14px;
        padding: 0 5px;
        font-size: 9px;
    }

    #siteLangSelect,
    .inav-language-select,
    .theme-toggle-btn,
    .theme-toggle-select,
    .theme-toggle--mobile .theme-toggle-btn,
    .theme-toggle--mobile .theme-toggle-select,
    .loginArea .loginBtn,
    .loginArea .avatarBtn {
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
        font-size: max(14px, 1em);
        line-height: 1.25;
        touch-action: manipulation;
    }

    .loginArea .loginBtn,
    .topIntegralBadge,
    .couponCodeBadge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
    }

    .inav-language-label {
        font-size: max(12px, 1em);
    }
}

/* source: css/home.css */
/* inlined css/home/home-01.css */

/* inlined css/home/home-01.part-01.css */
:root {
    /* 优雅晨曦配色 - 降低饱和度，提高明度 */
    --home-bg: #0a1628;
    --home-bg-soft: #0d1e38;
    --home-panel: rgba(15, 28, 52, 0.82);
    --home-panel-soft: rgba(18, 32, 58, 0.68);
    --home-line: rgba(140, 170, 255, 0.18);
    --home-line-strong: rgba(140, 170, 255, 0.35);
    --home-text: #e8eef8;
    --home-muted: #8fa4c8;
    --home-faint: #5a6d8a;
    /* 柔和色调 - 降低饱和度 */
    --home-blue: #5b8dee;
    --home-cyan: #7dd4f5;
    --home-gold: #f5d89a;
    --home-radius: 14px;
    --home-shell-gutter: 16px;
    --home-shell-x: 32px;
    --home-shell-max: 1900px;
    --home-shell-width: calc(100vw - 32px);
    --home-gap: 12px;
    --home-side-width: 320px;
    --home-rail-width: 116px;
    /* 日期/进度：约占 hero 行 18%（够放日历+进度，又不挤窄 Hero） */
    --home-time-card-width: 248px;
    /* 首屏 Hero：基准 21:9 × 0.85；剩余宽度整给 Hero 铺满，日期卡同高 */
    --home-hero-aspect-w: 21;
    --home-hero-aspect-h: 9;
    --home-hero-height-scale: 0.85;
    --home-hero-display-h: calc(var(--home-hero-aspect-h) * var(--home-hero-height-scale));
    /* 可用宽 = 壳 - 右栏 - 分类轨让位 - 日期卡 - 各 gap */
    --home-hero-block-height: calc((var(--home-shell-width) - var(--home-side-width) - var(--home-rail-width) - var(--home-time-card-width) - (var(--home-gap) * 3)) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    --home-rail-top-offset: 1px;
    --home-rail-measured-top: calc(var(--home-hero-block-height) + var(--home-rail-top-offset));
}

@supports (width: min(1px, 1px)) and (width: clamp(1px, 1vw, 2px)) {
    :root {
        --home-shell-gutter: clamp(13px, 1.04vw, 18px);
        --home-shell-x: calc(var(--home-shell-gutter) * 2);
        --home-shell-width: min(calc(100vw - var(--home-shell-x)), var(--home-shell-max));
        --home-gap: clamp(10px, 0.8vw, 16px);
        --home-side-width: clamp(240px, 19.2vw, 416px);
        --home-rail-width: clamp(108px, 7.2vw, 124px);
        /* 约 14vw / 整行 15%–20%，保证 Hero 21:9×0.85 槽位铺满 */
        --home-time-card-width: clamp(220px, 14vw, 280px);
        --home-hero-block-height: calc((var(--home-shell-width) - var(--home-side-width) - var(--home-rail-width) - var(--home-time-card-width) - (var(--home-gap) * 3)) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    }
}

html,
body {
    min-height: 100%;
    background: var(--home-bg);
}

body.home-page-shell {
    /* HOME_FIRST_SCREEN_BODY_VISIBILITY_GUARD */
    filter: none !important;
    -moz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    opacity: 1 !important;
    animation: none !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--home-text);
    font-family: "Alibaba PuHuiTi", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
}

.xl-home,
.xl-home *,
.xl-home *::before,
.xl-home *::after {
    box-sizing: border-box;
}

.header,
.footer {
    flex-shrink: 0;
}

.xl-home {
    --home-shell-gutter: 16px;
    --home-shell-x: 32px;
    --home-shell-width: calc(100vw - 32px);
    --home-gap: 12px;
    --home-side-width: 320px;
    --home-rail-width: 116px;
    --home-time-card-width: 248px;
    --home-hero-aspect-w: 21;
    --home-hero-aspect-h: 9;
    --home-hero-height-scale: 0.85;
    --home-hero-display-h: calc(var(--home-hero-aspect-h) * var(--home-hero-height-scale));
    --home-hero-block-height: calc((var(--home-shell-width) - var(--home-side-width) - var(--home-rail-width) - var(--home-time-card-width) - (var(--home-gap) * 3)) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    --home-rail-top-offset: 1px;
    --home-rail-measured-top: calc(var(--home-hero-block-height) + var(--home-rail-top-offset));
    position: relative;
    flex: 1 0 auto;
    padding: 24px 0 0;
    padding: clamp(18px, 1.44vw, 27px) 0 0;
    overflow: hidden;
    background:
        /* 顶部天光 - 晨曦柔和 */
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(120, 160, 255, 0.18) 0%, transparent 60%),
        /* 左上柔光 */
        radial-gradient(ellipse 100% 70% at 5% 15%, rgba(140, 180, 255, 0.12) 0%, transparent 50%),
        /* 右上暖光 */
        radial-gradient(ellipse 80% 60% at 92% 10%, rgba(200, 170, 255, 0.10) 0%, transparent 45%),
        /* 底部微光 */
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(100, 180, 220, 0.08) 0%, transparent 50%),
        /* 主背景渐变 - 通透呼吸感 */
        linear-gradient(180deg, #0d1830 0%, #0f1e3a 40%, #0a1525 100%);
}

/* ========== Phase 3: 交互精致化 ========== */

/* 鼠标跟随光效元素 - 暖金色柔光晕 */
.home-mouse-glow {
    /* HOME_INLINE_MOUSE_GLOW_TRANSFORM_GUARD */
    position: fixed;
    left: 0;
    top: 0;
    width: 650px;
    height: 650px;
    margin: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 210, 0.10) 0%, rgba(255, 220, 190, 0.05) 35%, rgba(220, 200, 255, 0.03) 55%, transparent 72%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform: translate3d(-1000px, -1000px, 0);
    transition: opacity 0.5s ease;
    will-change: transform, opacity;
    contain: strict;
}

@supports (width: min(1px, 1px)) and (width: clamp(1px, 1vw, 2px)) {
    .xl-home {
        --home-shell-gutter: clamp(13px, 1.04vw, 18px);
        --home-shell-x: calc(var(--home-shell-gutter) * 2);
        --home-shell-width: min(calc(100vw - var(--home-shell-x)), var(--home-shell-max));
        --home-gap: clamp(10px, 0.8vw, 16px);
        --home-side-width: clamp(240px, 19.2vw, 416px);
        --home-rail-width: clamp(108px, 7.2vw, 124px);
        --home-time-card-width: clamp(220px, 14vw, 280px);
        --home-hero-block-height: calc((var(--home-shell-width) - var(--home-side-width) - var(--home-rail-width) - var(--home-time-card-width) - (var(--home-gap) * 3)) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    }
}

.home-is-scrolling .home-mouse-glow {
    opacity: 0 !important;
    transition: none !important;
}

/* 科技粒子动画 */
.xl-home::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(96, 142, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 142, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

/* 科技网格 - 柔和线条 */
.xl-home::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.25;
    background-image:
        linear-gradient(rgba(130, 160, 220, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 160, 220, 0.03) 1px, transparent 1px),
        /* 柔和光点 */
        radial-gradient(circle at 20% 30%, rgba(140, 180, 255, 0.06) 0%, transparent 2%),
        radial-gradient(circle at 80% 70%, rgba(180, 160, 255, 0.05) 0%, transparent 1.5%),
        radial-gradient(circle at 50% 50%, rgba(100, 200, 255, 0.03) 0%, transparent 3%);
    background-size: 80px 80px;
    background-position: 0 0;
    mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}

.xl-home .wp {
    position: relative;
    z-index: 1;
    display: block;
    align-items: start;
    width: calc(100vw - 32px);
    max-width: 1900px;
    width: var(--home-shell-width);
    max-width: none;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.xl-category-rail {
    position: absolute;
    left: 0;
    top: var(--home-rail-measured-top);
    z-index: 12;
    align-self: start;
    width: var(--home-rail-width);
    transform: none;
}

.xl-category-rail-track {
    position: relative;
    display: grid;
    gap: 9px;
    min-height: 178px;
    padding: 16px 8px 16px 10px;
    border: 1px solid rgba(245, 216, 154, 0.10);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(18, 20, 18, 0.64), rgba(8, 9, 9, 0.52));
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 215, 0.05),
        inset 4px 0 0 rgba(77, 255, 157, 0.10),
        0 8px 18px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(245, 216, 154, 0.02);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.xl-category-rail-link {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    width: 100%;
    min-height: 30px;
    color: #fff3c8;
    text-decoration: none;
    outline: 0;
}

.xl-category-rail-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(245, 216, 154, 0.30);
    border: 1px solid rgba(245, 216, 154, 0.14);
    box-shadow:
        0 0 0 4px rgba(8, 9, 9, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: width 0.22s ease, height 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.xl-category-rail-label {
    min-width: 0;
    color: #cfd8c6;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.05;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    opacity: 0.78;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, font-size 0.18s ease, font-weight 0.18s ease;
}

.xl-category-rail-link.is-passed .xl-category-rail-label {
    color: #6edb93;
    opacity: 0.88;
}

.xl-category-rail-link.is-active .xl-category-rail-label {
    color: #4dff9d;
    opacity: 1;
    font-size: 14px;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(44, 246, 137, 0.26);
}

.xl-category-rail-link:hover .xl-category-rail-dot,
.xl-category-rail-link:focus-visible .xl-category-rail-dot,
.xl-category-rail-link.is-active .xl-category-rail-dot {


/* inlined css/home/home-01.part-03.css */
    width: 10px;
    height: 10px;
    border-color: rgba(75, 255, 150, 0.52);
    background: linear-gradient(180deg, #66ffae, #20cc75);
    box-shadow:
        0 0 0 4px rgba(8, 9, 9, 0.64),
        0 0 0 8px rgba(44, 246, 137, 0.08),
        0 0 12px rgba(44, 246, 137, 0.22);
}

.xl-category-rail-link:hover .xl-category-rail-label,
.xl-category-rail-link:focus-visible .xl-category-rail-label,
.xl-category-rail-link.is-active .xl-category-rail-label {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.home-page-shell .xl-light-streaks,
.home-page-shell .xl-starfield,
.home-page-shell .xl-aurora-bg,
.home-page-shell .xl-particle-canvas {
    display: none !important;
}

.xl-home-layout {
    display: flex;
    gap: 12px;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) var(--home-side-width);
    gap: var(--home-gap);
    align-items: start;
    justify-content: space-between;
}

.xl-home-main {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    justify-self: start;
}

/* HOME_HERO_21_9_ROW:
 * - Hero 占剩余宽（1fr），固定 21:9 × 0.85 铺满槽位
 * - 日期/进度固定合适宽（~14vw），与 Hero 同高
 * - 桌面左缘与一级分类内容区对齐（rail 让位） */
.xl-home-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--home-time-card-width, 248px);
    gap: var(--home-gap, 12px);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0 0 var(--home-gap, 12px) 0;
    box-sizing: border-box;
}

.xl-home-hero-row .xl-hero {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    /* 槽位满宽；高 = 宽 × (9/21) × 0.85 */
    aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65);
    height: auto;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
}

/* 日期/今日进度：宽跟变量，高跟 Hero 行 stretch 铺满 */
.xl-home-time-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: auto;
    max-height: none;
    box-sizing: border-box;
}

.xl-home-time-card .xl-side-card,
.xl-home-time-card .xl-time-section {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* 旁放竖卡：日期上、进度下，填满与 Hero 同高；padding 随卡宽缩放 */
.xl-home-time-card .xl-time-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    gap: clamp(8px, 1.05vw, 12px);
    padding: clamp(12px, 1.15vw, 16px) clamp(12px, 1.15vw, 16px) clamp(14px, 1.25vw, 18px);
    overflow: hidden;
}

.xl-home-time-card .xl-time-date {
    justify-items: center;
    min-height: 0;
}

.xl-home-time-card .xl-time-progress {
    align-content: center;
    min-height: 0;
    overflow: hidden;
}

/* 卡内字号随日期卡宽度缩放，避免 Hero 变矮后撑破 */
.xl-home-time-card .xl-time-date strong {
    font-size: clamp(20px, 1.9vw, 32px);
    line-height: 1.08;
}

.xl-home-time-card .xl-time-month,
.xl-home-time-card .xl-time-date span,
.xl-home-time-card .xl-time-progress-head {
    font-size: clamp(11px, 0.9vw, 13px);
}

.xl-home-time-card .xl-time-progress-head strong {
    font-size: clamp(12px, 1vw, 15px);
}

.xl-home-time-card .xl-time-progress-track {
    height: clamp(6px, 0.52vw, 8px);
}

.xl-home-side {
    flex: 0 0 320px;
    flex-basis: var(--home-side-width);
    min-width: 0;
    margin-left: 12px;
    margin-left: var(--home-gap);
    position: sticky;
    top: 0;
    display: grid;
    gap: var(--home-gap);
    align-content: start;
}

/* 右栏仅更新日志：顶对齐到首屏顶部 */
.xl-home-side .xl-side-updates-card {
    margin-top: 0;
}

.xl-home-side .xl-side-section-updates {
    margin-top: 0;
}

@media screen and (max-width: 1100px) {
    .xl-home-hero-row {
        /* 中屏仍给日期卡稳定宽，Hero 继续 1fr 铺满 */
        grid-template-columns: minmax(0, 1fr) clamp(200px, 20vw, 240px);
    }
}

@media screen and (max-width: 1000px) {
    .xl-home-hero-row {
        grid-template-columns: 1fr;
    }

    .xl-home-hero-row .xl-hero {
        aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65);
    }

    /* 窄屏日期卡恢复横排（日期 | 进度），高度仍随 hero 行自适应 */
    .xl-home-time-card .xl-time-section {
        grid-template-columns: minmax(94px, 0.86fr) minmax(0, 1.14fr);
        grid-template-rows: none;
        align-items: center;
    }
}

@supports (display: grid) {
    .xl-home-side {
        margin-left: 0;
    }
}

.xl-home-side .xl-side-card {
    min-height: 0;
    /* 卡片悬浮微交互 - 玻璃拟态提升 */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                backdrop-filter 0.3s ease;
}

.xl-tool-section {
    position: relative;
    margin: 0 0 18px;
    padding: 18px 18px 20px;
    scroll-margin-top: 82px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(18, 32, 58, 0.88) 0%, rgba(12, 22, 40, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 48px rgba(0, 0, 0, 0.22);
}

@media screen and (min-width: 1001px) {
    /* Hero 与一级分类区左缘对齐：同为 rail 宽 + gap 让位；高度/21:9×0.85 不变 */
    .xl-tool-section,
    .xl-home-main > .xl-home-hero-row {
        margin-left: calc(var(--home-rail-width) + var(--home-gap));
        width: calc(100% - var(--home-rail-width) - var(--home-gap));
        max-width: none;
        box-sizing: border-box;
    }
}

.xl-tool-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 12%, rgba(125, 212, 245, 0.10), transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(91, 141, 238, 0.14), transparent 34%);
    opacity: 0.9;
}

.xl-tool-section--priority {
    border-color: rgba(140, 170, 255, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 20px 54px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(91, 141, 238, 0.10);
}

.xl-tool-section:nth-of-type(2n) {
    background:
        linear-gradient(180deg, rgba(24, 36, 58, 0.90) 0%, rgba(13, 24, 43, 0.84) 100%);
    border-color: rgba(125, 212, 245, 0.20);
}

.xl-tool-section:nth-of-type(2n)::before {
    background:
        radial-gradient(circle at 10% 8%, rgba(125, 212, 245, 0.13), transparent 32%),
        radial-gradient(circle at 86% 4%, rgba(245, 216, 154, 0.08), transparent 34%);
}

.xl-tool-section:nth-of-type(2n + 1) {
    background:
        linear-gradient(180deg, rgba(31, 32, 52, 0.90) 0%, rgba(15, 24, 43, 0.84) 100%);
    border-color: rgba(245, 216, 154, 0.20);
}

.xl-tool-section:nth-of-type(2n + 1)::before {
    background:
        radial-gradient(circle at 8% 12%, rgba(245, 216, 154, 0.10), transparent 31%),
        radial-gradient(circle at 90% 0%, rgba(91, 141, 238, 0.12), transparent 35%);
}

.xl-section-title--layered {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 2px 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.xl-section-title--layered span {
    flex: 0 0 7px;
    width: 7px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3c65d, #d49b24);
    box-shadow:
        0 0 0 1px rgba(255, 221, 135, 0.36),
        0 0 18px rgba(243, 198, 93, 0.34);
}

.xl-section-title--layered h2 {
    margin: 0;
    color: #fff4cf;
    font-size: 23px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(212, 155, 36, 0.34);
}

.xl-section-title-hint {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--home-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(140, 170, 255, 0.14);
}

.xl-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 768px) {
    .xl-tool-section {
        padding: 14px 12px 16px;
        border-radius: 16px;
    }

    .xl-section-title--layered {
        padding: 1px 2px 0;
        gap: 8px;
    }

    .xl-section-title--layered span {
        flex-basis: 6px;
        width: 6px;
        height: 22px;
    }

    .xl-section-title--layered h2 {
        font-size: 19px;
    }

    .xl-section-title-hint {
        padding: 3px 8px;
        font-size: 11px;
    }

    .xl-tool-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.xl-home-side .xl-side-card:hover {
    transform: translateY(-6px);
    border-color: rgba(160, 200, 255, 0.45);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(100, 160, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.xl-side-card {
    /* 玻璃拟态基础样式 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: linear-gradient(135deg, rgba(20, 35, 65, 0.85) 0%, rgba(15, 28, 52, 0.88) 100%);
    border: 1px solid rgba(120, 160, 220, 0.22);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}



/* inlined css/home/home-01.part-04.css */
/* ==============================================
   宇宙星空 AI 能量场 - Hero 主视觉
   层次结构（从底到顶）:
   1. 星空背景 - 深层深蓝黑 + 稀疏星点
   2. 星云氛围层 - 柔和径向渐变模糊
   3. 轨道系统 - 3层椭圆轨道
   4. 能量核心球体 - 呼吸动画
   5. AI 全息文字
   6. 宇宙尘埃微粒
============================================== */

/* ========== 1. 星空背景 ========== */
/* HOME_HERO_21_9_RATIO_GUARD: 前台 hero 基准 21:9、高度 ×0.85；旁放日期/进度卡同高 */
.xl-hero {
    position: relative;
    width: 100%;
    aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65);
    height: auto;
    min-height: 0;
    padding: 28px 54px;
    padding: clamp(22px, 2.04vw, 32px) clamp(45px, 3.64vw, 58px);
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(154, 190, 255, 0.58);
    border-radius: 24px;
    background:
        radial-gradient(ellipse 72% 86% at 72% 47%, rgba(29, 101, 205, 0.32), transparent 64%),
        radial-gradient(ellipse 48% 40% at 82% 22%, rgba(82, 255, 212, 0.11), transparent 64%),
        radial-gradient(ellipse 52% 62% at 52% 104%, rgba(221, 146, 58, 0.07), transparent 70%),
        linear-gradient(155deg, rgba(2, 7, 21, 0.99) 0%, rgba(2, 8, 20, 0.99) 39%, rgba(4, 18, 48, 0.98) 73%, rgba(2, 7, 18, 0.99) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        inset 0 0 54px rgba(96, 154, 255, 0.18),
        0 26px 80px rgba(0, 0, 0, 0.36),
        0 0 52px rgba(82, 135, 255, 0.12);
    isolation: isolate;
}

@supports not (aspect-ratio: 1 / 1) {
    /* 旧浏览器：用主栏可用宽推算 21:9 高度 */
    .xl-hero {
        min-height: calc((var(--home-shell-width, 100vw) - var(--home-side-width, 320px) - var(--home-rail-width, 116px) - var(--home-time-card-width, 248px) - (var(--home-gap, 12px) * 3)) * var(--home-hero-display-h, 7.65) / var(--home-hero-aspect-w, 21));
        height: auto;
    }
}

/* 星空层：高密度平铺星点，contain 留白不流空（各窗口通用） */
.xl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        radial-gradient(1.20px 1.20px at 59% 73%, rgba(255,255,255,0.89), transparent),
        radial-gradient(1.35px 1.35px at 77% 26%, rgba(255,255,255,0.62), transparent),
        radial-gradient(1.10px 1.10px at 80% 25%, rgba(255,255,255,0.59), transparent),
        radial-gradient(1.35px 1.35px at 70% 90%, rgba(178,229,255,0.80), transparent),
        radial-gradient(1.35px 1.35px at 85% 22%, rgba(255,255,255,0.80), transparent),
        radial-gradient(1.35px 1.35px at 6% 26%, rgba(255,255,255,0.90), transparent),
        radial-gradient(1.00px 1.00px at 61% 43%, rgba(255,255,255,0.73), transparent),
        radial-gradient(0.90px 0.90px at 83% 39%, rgba(255,255,255,0.75), transparent),
        radial-gradient(0.90px 0.90px at 37% 54%, rgba(170,204,255,0.95), transparent),
        radial-gradient(1.35px 1.35px at 67% 38%, rgba(175,196,255,0.56), transparent),
        radial-gradient(0.90px 0.90px at 39% 51%, rgba(150,203,255,0.58), transparent),
        radial-gradient(1.20px 1.20px at 28% 8%, rgba(255,255,255,0.74), transparent),
        radial-gradient(1.10px 1.10px at 74% 82%, rgba(255,255,255,0.63), transparent),
        radial-gradient(1.20px 1.20px at 41% 44%, rgba(157,198,255,0.56), transparent),
        radial-gradient(0.90px 0.90px at 33% 92%, rgba(255,255,255,0.59), transparent),
        radial-gradient(1.00px 1.00px at 64% 24%, rgba(255,255,255,0.82), transparent),
        radial-gradient(1.20px 1.20px at 26% 95%, rgba(157,215,255,0.86), transparent),
        radial-gradient(1.35px 1.35px at 55% 29%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.20px 1.20px at 19% 33%, rgba(161,217,255,0.36), transparent),
        radial-gradient(1.10px 1.10px at 17% 96%, rgba(155,202,255,0.61), transparent),
        radial-gradient(1.35px 1.35px at 36% 8%, rgba(161,224,255,0.48), transparent),
        radial-gradient(1.20px 1.20px at 72% 89%, rgba(153,213,255,0.64), transparent),
        radial-gradient(1.20px 1.20px at 4% 77%, rgba(162,200,255,0.46), transparent),
        radial-gradient(1.35px 1.35px at 16% 76%, rgba(153,217,255,0.56), transparent),
        radial-gradient(1.00px 1.00px at 43% 80%, rgba(175,204,255,0.48), transparent),
        radial-gradient(1.10px 1.10px at 85% 67%, rgba(161,208,255,0.41), transparent),
        radial-gradient(0.90px 0.90px at 8% 45%, rgba(176,224,255,0.56), transparent),
        radial-gradient(1.20px 1.20px at 34% 66%, rgba(175,216,255,0.46), transparent),
        radial-gradient(1.20px 1.20px at 25% 41%, rgba(187,195,255,0.58), transparent),
        radial-gradient(1.35px 1.35px at 40% 75%, rgba(183,208,255,0.59), transparent),
        radial-gradient(1.20px 1.20px at 98% 88%, rgba(155,197,255,0.71), transparent),
        radial-gradient(1.20px 1.20px at 58% 47%, rgba(153,224,255,0.39), transparent),
        radial-gradient(0.90px 0.90px at 27% 67%, rgba(156,209,255,0.45), transparent),
        radial-gradient(1.20px 1.20px at 26% 23%, rgba(172,200,255,0.36), transparent),
        radial-gradient(1.20px 1.20px at 44% 47%, rgba(152,197,255,0.60), transparent),
        radial-gradient(1.00px 1.00px at 70% 19%, rgba(156,196,255,0.67), transparent),
        radial-gradient(1.00px 1.00px at 26% 54%, rgba(187,209,255,0.40), transparent),
        radial-gradient(1.35px 1.35px at 7% 17%, rgba(158,213,255,0.55), transparent),
        radial-gradient(1.20px 1.20px at 38% 89%, rgba(180,218,255,0.65), transparent),
        radial-gradient(0.90px 0.90px at 10% 84%, rgba(188,203,255,0.64), transparent),
        radial-gradient(0.65px 0.65px at 75% 23%, rgba(255,255,255,0.43), transparent),
        radial-gradient(0.55px 0.55px at 63% 85%, rgba(255,255,255,0.51), transparent),
        radial-gradient(0.65px 0.65px at 85% 80%, rgba(255,255,255,0.53), transparent),
        radial-gradient(0.65px 0.65px at 89% 69%, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 88% 83%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 41% 68%, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 97% 79%, rgba(255,255,255,0.50), transparent),
        radial-gradient(0.55px 0.55px at 37% 42%, rgba(255,255,255,0.40), transparent),
        radial-gradient(0.65px 0.65px at 17% 9%, rgba(255,255,255,0.33), transparent),
        radial-gradient(0.45px 0.45px at 29% 10%, rgba(255,255,255,0.47), transparent),
        radial-gradient(0.65px 0.65px at 85% 43%, rgba(255,255,255,0.47), transparent),
        radial-gradient(0.65px 0.65px at 42% 2%, rgba(255,255,255,0.34), transparent),
        radial-gradient(0.45px 0.45px at 73% 52%, rgba(255,255,255,0.35), transparent),
        radial-gradient(0.45px 0.45px at 6% 48%, rgba(255,255,255,0.51), transparent),
        radial-gradient(0.65px 0.65px at 10% 21%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.65px 0.65px at 2% 9%, rgba(255,255,255,0.36), transparent),
        radial-gradient(0.75px 0.75px at 27% 26%, rgba(255,255,255,0.44), transparent),
        radial-gradient(0.65px 0.65px at 60% 78%, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.65px 0.65px at 77% 70%, rgba(255,255,255,0.37), transparent),
        radial-gradient(0.75px 0.75px at 64% 10%, rgba(255,255,255,0.22), transparent),
        radial-gradient(0.55px 0.55px at 50% 48%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.65px 0.65px at 3% 71%, rgba(255,255,255,0.43), transparent),
        radial-gradient(0.75px 0.75px at 91% 22%, rgba(255,255,255,0.52), transparent),
        radial-gradient(0.65px 0.65px at 6% 90%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.75px 0.75px at 61% 37%, rgba(255,255,255,0.36), transparent),
        radial-gradient(0.75px 0.75px at 35% 62%, rgba(255,255,255,0.51), transparent),
        radial-gradient(0.65px 0.65px at 51% 4%, rgba(255,255,255,0.47), transparent),
        radial-gradient(0.55px 0.55px at 43% 23%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.45px 0.45px at 54% 68%, rgba(255,255,255,0.28), transparent),
        radial-gradient(0.45px 0.45px at 30% 39%, rgba(156,200,255,0.15), transparent),
        radial-gradient(0.75px 0.75px at 67% 90%, rgba(199,210,255,0.40), transparent),
        radial-gradient(0.65px 0.65px at 47% 11%, rgba(157,222,255,0.23), transparent),
        radial-gradient(0.65px 0.65px at 10% 77%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.75px 0.75px at 82% 39%, rgba(255,255,255,0.15), transparent),
        radial-gradient(0.65px 0.65px at 62% 26%, rgba(199,193,255,0.19), transparent),
        radial-gradient(0.75px 0.75px at 7% 88%, rgba(197,211,255,0.39), transparent),
        radial-gradient(0.55px 0.55px at 49% 62%, rgba(255,255,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 60% 96%, rgba(197,192,255,0.32), transparent),
        radial-gradient(0.45px 0.45px at 37% 22%, rgba(188,225,255,0.14), transparent),
        radial-gradient(0.65px 0.65px at 71% 38%, rgba(175,197,255,0.40), transparent),
        radial-gradient(0.55px 0.55px at 48% 45%, rgba(153,217,255,0.17), transparent),
        radial-gradient(0.45px 0.45px at 8% 88%, rgba(255,255,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 84% 96%, rgba(154,207,255,0.36), transparent),
        radial-gradient(0.55px 0.55px at 11% 2%, rgba(190,202,255,0.25), transparent),
        radial-gradient(0.65px 0.65px at 9% 37%, rgba(182,228,255,0.27), transparent),
        radial-gradient(0.45px 0.45px at 44% 71%, rgba(255,255,255,0.35), transparent),
        radial-gradient(0.75px 0.75px at 40% 53%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.55px 0.55px at 34% 18%, rgba(255,255,255,0.39), transparent),
        radial-gradient(0.75px 0.75px at 58% 52%, rgba(255,255,255,0.31), transparent),
        radial-gradient(0.65px 0.65px at 75% 19%, rgba(255,255,255,0.21), transparent),
        radial-gradient(0.45px 0.45px at 91% 31%, rgba(255,255,255,0.29), transparent),
        radial-gradient(0.75px 0.75px at 54% 90%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.45px 0.45px at 31% 78%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 43% 65%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.75px 0.75px at 53% 83%, rgba(255,255,255,0.32), transparent),
        radial-gradient(0.75px 0.75px at 82% 97%, rgba(255,255,255,0.39), transparent),
        radial-gradient(0.45px 0.45px at 22% 90%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.55px 0.55px at 3% 70%, rgba(255,255,255,0.32), transparent),
        radial-gradient(0.45px 0.45px at 71% 4%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.65px 0.65px at 66% 8%, rgba(255,255,255,0.31), transparent),
        radial-gradient(0.65px 0.65px at 13% 27%, rgba(155,218,255,0.34), transparent),
        radial-gradient(0.75px 0.75px at 25% 40%, rgba(184,207,255,0.31), transparent),
        radial-gradient(0.75px 0.75px at 51% 66%, rgba(184,219,255,0.43), transparent),
        radial-gradient(0.45px 0.45px at 82% 7%, rgba(164,211,255,0.51), transparent),
        radial-gradient(0.55px 0.55px at 92% 3%, rgba(153,207,255,0.49), transparent),
        radial-gradient(0.75px 0.75px at 31% 13%, rgba(162,202,255,0.47), transparent),
        radial-gradient(0.65px 0.65px at 28% 54%, rgba(150,198,255,0.34), transparent),
        radial-gradient(0.55px 0.55px at 54% 41%, rgba(165,209,255,0.40), transparent),
        radial-gradient(0.55px 0.55px at 24% 23%, rgba(178,201,255,0.36), transparent),
        radial-gradient(0.75px 0.75px at 40% 83%, rgba(180,213,255,0.33), transparent),
        radial-gradient(0.45px 0.45px at 79% 96%, rgba(166,196,255,0.32), transparent),
        radial-gradient(0.65px 0.65px at 91% 91%, rgba(167,199,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 12% 78%, rgba(181,210,255,0.43), transparent),
        radial-gradient(0.65px 0.65px at 10% 63%, rgba(157,203,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 30% 52%, rgba(187,200,255,0.49), transparent),
        radial-gradient(0.55px 0.55px at 83% 37%, rgba(190,218,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 47% 55%, rgba(185,223,255,0.40), transparent),
        radial-gradient(0.55px 0.55px at 83% 2%, rgba(181,205,255,0.29), transparent),
        radial-gradient(0.75px 0.75px at 62% 69%, rgba(167,215,255,0.39), transparent),
        radial-gradient(0.55px 0.55px at 64% 28%, rgba(161,212,255,0.52), transparent),
        radial-gradient(0.65px 0.65px at 28% 89%, rgba(178,213,255,0.65), transparent),
        radial-gradient(0.45px 0.45px at 84% 64%, rgba(185,198,255,0.28), transparent),
        radial-gradient(0.75px 0.75px at 78% 66%, rgba(163,215,255,0.37), transparent),
        radial-gradient(0.75px 0.75px at 87% 54%, rgba(162,204,255,0.63), transparent),
        radial-gradient(0.55px 0.55px at 11% 41%, rgba(255,255,255,0.19), transparent),
        radial-gradient(0.45px 0.45px at 59% 39%, rgba(255,255,255,0.15), transparent),
        radial-gradient(0.55px 0.55px at 97% 65%, rgba(255,255,255,0.14), transparent),
        radial-gradient(0.55px 0.55px at 93% 10%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 54% 95%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.55px 0.55px at 69% 16%, rgba(255,255,255,0.27), transparent),
        radial-gradient(0.55px 0.55px at 49% 5%, rgba(255,255,255,0.28), transparent),
        radial-gradient(0.55px 0.55px at 91% 61%, rgba(255,255,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 87% 42%, rgba(255,255,255,0.22), transparent),
        radial-gradient(0.65px 0.65px at 27% 39%, rgba(255,255,255,0.11), transparent),
        radial-gradient(0.75px 0.75px at 87% 47%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.65px 0.65px at 11% 41%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.75px 0.75px at 4% 80%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.75px 0.75px at 79% 55%, rgba(255,255,255,0.11), transparent),
        radial-gradient(0.75px 0.75px at 73% 92%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.65px 0.65px at 42% 63%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.65px 0.65px at 94% 29%, rgba(255,255,255,0.14), transparent),
        radial-gradient(0.65px 0.65px at 41% 3%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.45px 0.45px at 76% 97%, rgba(255,255,255,0.19), transparent),
        radial-gradient(0.65px 0.65px at 79% 68%, rgba(255,255,255,0.23), transparent),
        radial-gradient(0.65px 0.65px at 44% 15%, rgba(255,255,255,0.17), transparent),
        radial-gradient(0.55px 0.55px at 16% 4%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.55px 0.55px at 21% 72%, rgba(255,255,255,0.23), transparent),
        radial-gradient(0.45px 0.45px at 95% 14%, rgba(255,255,255,0.21), transparent),
        radial-gradient(0.75px 0.75px at 73% 14%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.45px 0.45px at 74% 78%, rgba(255,255,255,0.15), transparent),
        radial-gradient(0.75px 0.75px at 65% 87%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.65px 0.65px at 49% 29%, rgba(255,255,255,0.22), transparent),
        radial-gradient(0.75px 0.75px at 57% 92%, rgba(255,255,255,0.14), transparent),
        radial-gradient(0.55px 0.55px at 12% 46%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.55px 0.55px at 53% 23%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 74% 33%, rgba(255,255,255,0.29), transparent),
        radial-gradient(0.45px 0.45px at 17% 77%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.65px 0.65px at 72% 81%, rgba(255,255,255,0.13), transparent),
        radial-gradient(0.75px 0.75px at 97% 68%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.45px 0.45px at 55% 98%, rgba(255,255,255,0.15), transparent);
    background-size: 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 1;
    z-index: 1;
}

/* 星点闪烁动画 - 极弱不抢眼 */
/* 深层渐变 - 优雅的深空感 */
.xl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 7, 18, 0.64) 0%, rgba(2, 7, 18, 0.28) 40%, transparent 68%),
        radial-gradient(ellipse 90% 40% at 52% 104%, rgba(6, 17, 45, 0.78), transparent 70%),
        radial-gradient(ellipse 60% 28% at 54% 2%, rgba(181, 211, 255, 0.12), transparent 62%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(85, 143, 255, 0.22);
    z-index: 2;
}


/* inlined css/home/home-01.part-02.css */

/* ========== 2. 星云氛围层 - 优雅蓝紫渐变 ========== */
/* 星云主体 - 全卡片均匀蓝紫渐变（避免中间空气墙） */
/* 紫蓝点缀（弱化，避免遮挡星空） */
/* ========== 3. 轨道系统 ========== */
.xl-hero .hero-orbits {
    position: absolute;
    right: 2%;
    right: clamp(0%, 2vw, 4%);
    top: 52%;
    width: 64%;
    max-width: 760px;
    width: min(64%, 760px);
    height: 82%;
    max-height: 540px;
    height: min(82%, 540px);
    transform: translateY(-50%);
    pointer-events: none;
    perspective: 1600px;
    z-index: 5;
}

/* 轨道层容器 */
.xl-hero .hero-orbit-layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* 轨道 1 - 最外层，优雅柔和 */
.xl-hero .hero-orbit-ring-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    height: 64%;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-18deg);
    border-radius: 50%;
    border: 1.5px solid rgba(177, 207, 255, 0.48);
    box-shadow:
        0 0 0 1px rgba(117, 169, 255, 0.14),
        0 0 26px rgba(117, 169, 255, 0.18),
        inset 0 0 38px rgba(188, 214, 255, 0.08);
}

/* 轨道 2 - 中层 */
.xl-hero .hero-orbit-ring-2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    height: 50%;
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(28deg);
    border-radius: 50%;
    border: 1.25px solid rgba(154, 203, 255, 0.50);
    box-shadow:
        0 0 0 1px rgba(114, 171, 255, 0.12),
        0 0 18px rgba(122, 190, 255, 0.18),
        inset 0 0 25px rgba(174, 207, 255, 0.08);
}

/* 轨道 3 - 最内层 */
.xl-hero .hero-orbit-ring-3 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48%;
    height: 34%;
    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-34deg);
    border-radius: 50%;
    border: 1px solid rgba(206, 226, 255, 0.38);
    box-shadow:
        0 0 0 1px rgba(178, 211, 255, 0.12),
        0 0 14px rgba(178, 211, 255, 0.14),
        inset 0 0 20px rgba(190, 218, 255, 0.08);
}

/* 轨道 4 - 倾斜小环 */
.xl-hero .hero-orbit-ring-4 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32%;
    height: 24%;
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(48deg);
    border-radius: 50%;
    border: 1px solid rgba(226, 238, 255, 0.28);
    box-shadow:
        0 0 10px rgba(180, 215, 255, 0.12),
        inset 0 0 15px rgba(190, 220, 255, 0.07);
}



/* inlined css/home/home-02.css */

/* inlined css/home/home-02.part-01.css */
/* 轨道节点光点 - 优雅柔光 */
/* ========== 0. 全 Hero 卡片星空背景 ========== */
/* CSS 轨道层与 3D 光环重复，隐藏避免在地球左侧形成视觉墙 */
.xl-hero .hero-orbits,
.xl-hero .hero-star-current,
.xl-hero .hero-glass-edge {
    display: none !important;
}

/* xl-hero-art 历史响应式 opacity 衰减会让地球区半透明，与左侧 starfield 形成暗带，强制满亮 */
.xl-hero .xl-hero-art {
    opacity: 1 !important;
}

/* ========== 4. 真实夜景地球 + 3D粒子层（深空观测台风格：缩小+下沉） ========== */
/* ========== 5. AI 全息文字 - 优雅晨曦渐变 ========== */
/* REAL_EARTH_3D_DO_NOT_DELETE: hero-core/#heroPlanet3D is the real Three.js earth layer. */
.xl-hero .hero-core {
    position: absolute;
    inset: 0;
    --hero-earth-size: 240px;
    --hero-earth-half-size: 120px;
    --hero-earth-center-x: calc(100% - 144px);
    --hero-earth-center-y: 56%;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: inherit;
    pointer-events: none;
    z-index: 6;
}

.xl-hero #heroPlanet3D {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0.98;
    filter: none;
}

@supports (width: clamp(1px, 1vw, 2px)) {
    .xl-hero .hero-core {
        --hero-earth-size: clamp(208px, 17.6vw, 288px);
        --hero-earth-half-size: clamp(104px, 8.8vw, 144px);
        --hero-earth-center-x: calc(100% - clamp(2%, 5vw, 8%) - var(--hero-earth-half-size));
    }
}

/* 后台可视化自定义地球布局：变量写在 .xl-hero 上，这里继承并覆盖默认/响应式定位 */
.xl-hero[data-earth-custom-layout="1"] {
    container-type: inline-size;
    container-name: home-hero;
}

.xl-hero[data-earth-custom-layout="1"] .hero-core {
    --hero-earth-size: inherit !important;
    --hero-earth-half-size: inherit !important;
    --hero-earth-center-x: inherit !important;
    --hero-earth-center-y: inherit !important;
}

.xl-hero[data-earth-custom-layout="1"] .hero-core::before {
    right: auto !important;
    left: calc(var(--hero-earth-center-x) - var(--hero-earth-half-size)) !important;
    top: calc(var(--hero-earth-center-y) - var(--hero-earth-half-size)) !important;
    width: var(--hero-earth-size) !important;
    height: var(--hero-earth-size) !important;
    transform: translateZ(0) !important;
}

/* 不支持 cqi 时回退：直径用 vw 近似卡片宽占比（视觉接近即可） */
@supports not (width: 1cqi) {
    .xl-hero[data-earth-custom-layout="1"] {
        /* center 仍用 %；size 由内联 --hero-earth-size-fallback 提供（首页模板同步输出） */
        --hero-earth-size: var(--hero-earth-size-fallback, 18vw) !important;
        --hero-earth-half-size: calc(var(--hero-earth-size) / 2) !important;
    }
}

.xl-hero .hero-core::before {
    content: "";
    position: absolute;
    right: 6%;
    left: auto;
    top: 50%;
    width: 240px;
    height: 240px;
    transform: translateY(-50%) translateZ(0);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(234, 248, 255, 0.95) 0 2.5%, transparent 3.8%),
        radial-gradient(circle at 58% 42%, rgba(98, 198, 255, 0.28) 0 12%, transparent 27%),
        radial-gradient(circle at 38% 32%, rgba(122, 184, 255, 0.88) 0 0, rgba(41, 91, 158, 0.78) 34%, rgba(9, 28, 68, 0.86) 68%, rgba(4, 11, 26, 0.94) 100%);
    opacity: 0.86;
    pointer-events: none;
    z-index: 4;
}

@supports (width: clamp(1px, 1vw, 2px)) {
    .xl-hero .hero-core::before {
        right: auto;
        left: calc(var(--hero-earth-center-x) - var(--hero-earth-half-size));
        top: calc(var(--hero-earth-center-y) - var(--hero-earth-half-size));
        width: var(--hero-earth-size);
        height: var(--hero-earth-size);
        transform: translateZ(0);
    }
}

.xl-hero .hero-core.hero-earth-ready::before {
    opacity: 0;
}

.xl-hero .hero-ai-text {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(64px, 8vw, 128px);
    font-weight: 1000;
    font-style: italic;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(200, 220, 255, 0.55);
    background: linear-gradient(150deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(220, 240, 255, 0.85) 25%,
        rgba(180, 220, 255, 0.70) 50%,
        rgba(220, 240, 255, 0.85) 75%,
        rgba(255, 255, 255, 0.95) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0 20px rgba(160, 200, 255, 0.65))
        drop-shadow(0 0 40px rgba(140, 180, 255, 0.30))
        drop-shadow(0 2px 12px rgba(100, 140, 200, 0.20));
    z-index: 5;
}

/* AI 文字扫光效果 - 优雅柔和 */
.xl-hero .hero-ai-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-15deg);
}

/* ========== 6. 宇宙尘埃微粒 - 符合主题的柔和效果 ========== */
.xl-hero .hero-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.xl-hero .hero-dust-particle {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    /* 主题色：深空蓝黑 + 星点白蓝 */
    background: radial-gradient(circle, rgba(180, 210, 255, 0.35) 0%, rgba(80, 130, 200, 0.15) 100%);
    box-shadow: 0 0 3px rgba(150, 200, 255, 0.2);
}

/* 项目要求：首页动态效果不受浏览器/系统减少动态设置影响。 */

.xl-hero-copy {
    position: relative;
    z-index: 12;
    flex: 0 0 400px;
    flex: 0 0 clamp(368px, 36.8%, 416px);
    width: 400px;
    width: clamp(368px, 36.8%, 416px);
}

.xl-hero-badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    height: clamp(30px, 2.32vw, 35px);
    padding: 0 16px;
    padding: 0 clamp(14px, 1.08vw, 18px);
    border-radius: 999px;
    background: linear-gradient(135deg, #5a9fff 0%, #8878ff 50%, #c060ff 100%);
    box-shadow:
        0 0 30px rgba(80, 140, 255, 0.5),
        0 0 60px rgba(120, 100, 255, 0.25),
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
    font-size: 12px;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: heroBadgeIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.xl-hero-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255, 255, 255, 0.15) 100%);
}



/* inlined css/home/home-02.part-02.css */
.xl-hero-badge::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg,
        rgba(90, 159, 255, 0.6),
        rgba(136, 120, 255, 0.6),
        rgba(192, 96, 255, 0.6));
    border-radius: inherit;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
}

.xl-hero h1 {
    margin: clamp(13px, 1.12vw, 18px) 0 clamp(6px, 0.64vw, 11px);
    color: #fff;
    font-size: clamp(25px, 1.88vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.03em;
    position: relative;
    background: linear-gradient(135deg,
        #ffffff 0%,
        #e8f4ff 25%,
        #a8d8ff 50%,
        #e8f4ff 75%,
        #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
        drop-shadow(0 2px 20px rgba(80, 140, 255, 0.35))
        drop-shadow(0 4px 40px rgba(60, 100, 200, 0.2))
        drop-shadow(0 6px 30px rgba(0, 0, 0, 0.4));
    animation: heroTitleIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.xl-hero h1::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg,
        transparent,
        rgba(80, 160, 255, 0.6),
        rgba(136, 120, 255, 0.8),
        rgba(80, 160, 255, 0.6),
        transparent);
    border-radius: 2px;
}

.xl-hero p {
    margin: clamp(18px, 1.28vw, 22px) 0 clamp(27px, 2.08vw, 34px);
    max-width: 368px;
    color: rgba(218, 230, 255, 0.85);
    font-size: clamp(25px, 1.78vw, 30px);
    line-height: 1.34;
    font-weight: 800;
    letter-spacing: 0.02em;
    position: relative;
    padding-left: 14px;
    animation: heroDescIn 0.8s ease-out 0.5s both;
}

.xl-hero-brand {
    color: #7dd3ff;
    font-weight: 950;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(83, 168, 255, .7), 0 0 34px rgba(123, 92, 255, .45);
}

.xl-hero-endline {
    display: inline-block;
    white-space: nowrap;
}

.xl-hero p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 0;
    background: linear-gradient(180deg,
        rgba(100, 180, 255, 0.6),
        rgba(136, 120, 255, 0.4),
        transparent);
    border-radius: 1px;
}

.xl-hero-actions {
    position: relative;
    z-index: 13;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.xl-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: clamp(40px, 2.8vw, 45px);
    padding: 0 clamp(14px, 1.08vw, 18px);
    border-radius: 10px;
    color: #fff;
    font-size: clamp(15px, 1.02vw, 17px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: none;
    /* 玻璃拟态渐变 - 晨曦暖金色调 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.10) 100%),
                linear-gradient(135deg, #6a9cf0 0%, #7da6f2 30%, #94b8f5 60%, #a8c6f8 100%);
    background-size: 100% 100%, 200% 200%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 15px 35px rgba(91, 141, 238, 0.30),
        0 0 25px rgba(255, 220, 180, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.4s ease,
                border-color 0.3s ease,
                backdrop-filter 0.3s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-shadow: none;
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    animation: heroBtnIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s both;
}

.xl-hero-btn--photo {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0.11) 100%),
                linear-gradient(135deg, #14b8a6 0%, #22c1d6 45%, #f4b04f 100%);
    box-shadow:
        0 15px 35px rgba(20, 184, 166, 0.24),
        0 0 24px rgba(244, 176, 79, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.xl-hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.xl-hero-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.25), transparent 30%, rgba(255,255,255,0.15), transparent 50%);
    transform: rotate(0deg);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.xl-hero-btn > *,
.xl-hero-btn svg {
    position: relative;
    z-index: 1;
}

/* HOME_HERO_FULL_BACKGROUND_GUARD
   image_opacity only fades the photo layer.
   Text / badge / buttons / earth stay above the photo with a stable readability scrim. */
.xl-hero-backgrounds {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.xl-hero-background {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: none;
    transition: opacity 0.58s ease;
}

/* Photo layer: user-configured opacity applies here only.
   HOME_HERO_CONTAIN_IMAGE_GUARD: keep the full uploaded image visible without cropping.
   后台单卡可视化：pos-x/y 平移焦点，scale 放大缩小（1=原 contain 适配）。
   contain 留白区透出下层 .xl-hero::before 星空，不流空。 */
.xl-hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--home-hero-background-image);
    background-repeat: no-repeat;
    background-position: var(--home-hero-background-pos-x, 50%) var(--home-hero-background-pos-y, 50%);
    background-size: contain;
    opacity: var(--home-hero-background-opacity, 1);
    transform: scale(var(--home-hero-background-scale, 1));
    transform-origin: var(--home-hero-background-pos-x, 50%) var(--home-hero-background-pos-y, 50%);
    pointer-events: none;
    will-change: transform;
    /* 不铺底色，让星空从图片外的空区露出来 */
    background-color: transparent;
}

/* HOME_HERO_TRIPTYCH_GUARD: 左/中/右三图铺满 21:5（约 2/9 · 5/9 · 2/9），无需星空留白 */
.xl-hero-background.is-triptych::before {
    content: none !important;
    display: none !important;
}

.xl-hero-background-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    display: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: var(--home-hero-background-opacity, 1);
    pointer-events: none;
}

.xl-hero-background.is-triptych .xl-hero-background-panel {
    display: block;
}

.xl-hero-background-panel--left {
    left: 0;
    width: 22.222%;
    background-image: var(--home-hero-background-image-left);
}

.xl-hero-background-panel--center {
    left: 22.222%;
    width: 55.556%;
    background-image: var(--home-hero-background-image);
    background-position: var(--home-hero-background-pos-x, 50%) var(--home-hero-background-pos-y, 50%);
}

.xl-hero-background-panel--right {
    right: 0;
    width: 22.222%;
    background-image: var(--home-hero-background-image-right);
}

/* Readability scrim always stays on for badge/desc/buttons and keeps earth free of pure photo wash. */
.xl-hero-background::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 7, 18, 0.82) 0%, rgba(2, 7, 18, 0.52) 38%, rgba(2, 7, 18, 0.18) 72%, rgba(2, 7, 18, 0.08) 100%),
        linear-gradient(180deg, rgba(2, 7, 18, 0.16) 0%, rgba(2, 7, 18, 0.58) 100%);
}

.xl-hero-background.is-active.has-image {
    opacity: 1;
    transform: none;
}

/* HOME_HERO_CARDS_CAROUSEL_GUARD */


/* inlined css/home/home-02.part-03.css */
.xl-hero-carousel {
    --home-hero-active-index: 0;
    position: relative;
    z-index: 13;
    width: 100%;
    max-width: 416px;
    overflow: hidden;
}

.xl-hero-slides {
    display: flex;
    width: 100%;
    transform: translateX(calc(var(--home-hero-active-index, 0) * -100%));
    transition: transform 0.58s cubic-bezier(0.22, 0.72, 0.18, 1);
    will-change: transform;
}

.xl-hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding-right: 4px;
}

.xl-hero-slide[aria-hidden="true"] {
    pointer-events: none;
}

.xl-hero-slide-body {
    position: relative;
    display: block;
    min-width: 0;
}

.xl-hero-slide-copy {
    min-width: 0;
}

.xl-hero-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 0;
}

.xl-hero-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.24s ease;
}

.xl-hero-dot::before {
    content: "";
    display: block;
    width: 34px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: inherit;
    background: rgba(231, 246, 255, 0.34);
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.14),
        0 0 16px rgba(125, 211, 255, 0.38);
    opacity: 0.82;
    transition: background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease;
}

.xl-hero-dot:hover,
.xl-hero-dot:focus-visible {
    transform: translateY(-1px);
    outline: 0;
}

.xl-hero-dot:hover::before,
.xl-hero-dot:focus-visible::before {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.26),
        0 0 24px rgba(125, 211, 255, 0.68);
    opacity: 1;
}

.xl-hero-dot.is-active::before {
    width: 34px;
    background: linear-gradient(90deg, #38bdf8, #a7f3ff);
    border-color: rgba(255, 255, 255, 0.84);
    box-shadow:
        0 0 0 5px rgba(56, 189, 248, 0.30),
        0 0 26px rgba(125, 211, 255, 0.82),
        0 0 34px rgba(125, 211, 255, 0.92),
        0 0 54px rgba(56, 189, 248, 0.42);
    opacity: 1;
}



/* inlined css/home/home-02.part-04.css */
/* HOME_HERO_IMAGE_ONLY_GUARD: 图片不透明度=100% → .is-image-only
   兼容要求：
   1) 照片 contain 完整显示、不裁切
   2) 照片外的留白不能流空，必须铺星空
   3) 主题 preset 不能把星空盖成稀疏/关掉
*/
.xl-hero.is-image-only {
    /* 纯图模式：底图深空 + 星空层；contain 留白透星；比例固定 21:9 */
    background:
        radial-gradient(ellipse 70% 80% at 72% 48%, rgba(20, 70, 150, 0.22), transparent 64%),
        linear-gradient(155deg, #020712 0%, #040d1c 45%, #020712 100%) !important;
    aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65);
    height: auto;
    min-height: 0;
}
.xl-hero.is-image-only[style*="--home-hero-image-aspect-ratio"] {
    /* 即使模板注入了源图比例，仍强制 21:9 */
    aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65);
    min-height: 0;
}

/* 100% 纯图：强制密星（覆盖主题稀疏星 + 旧版关掉星空） */
.xl-hero.is-image-only::before,
html[data-theme-preset] .xl-hero.is-image-only::before {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    background-image:
        radial-gradient(1.20px 1.20px at 59% 73%, rgba(255,255,255,0.89), transparent),
        radial-gradient(1.35px 1.35px at 77% 26%, rgba(255,255,255,0.62), transparent),
        radial-gradient(1.10px 1.10px at 80% 25%, rgba(255,255,255,0.59), transparent),
        radial-gradient(1.35px 1.35px at 70% 90%, rgba(178,229,255,0.80), transparent),
        radial-gradient(1.35px 1.35px at 85% 22%, rgba(255,255,255,0.80), transparent),
        radial-gradient(1.35px 1.35px at 6% 26%, rgba(255,255,255,0.90), transparent),
        radial-gradient(1.00px 1.00px at 61% 43%, rgba(255,255,255,0.73), transparent),
        radial-gradient(0.90px 0.90px at 83% 39%, rgba(255,255,255,0.75), transparent),
        radial-gradient(0.90px 0.90px at 37% 54%, rgba(170,204,255,0.95), transparent),
        radial-gradient(1.35px 1.35px at 67% 38%, rgba(175,196,255,0.56), transparent),
        radial-gradient(0.90px 0.90px at 39% 51%, rgba(150,203,255,0.58), transparent),
        radial-gradient(1.20px 1.20px at 28% 8%, rgba(255,255,255,0.74), transparent),
        radial-gradient(1.10px 1.10px at 74% 82%, rgba(255,255,255,0.63), transparent),
        radial-gradient(1.20px 1.20px at 41% 44%, rgba(157,198,255,0.56), transparent),
        radial-gradient(0.90px 0.90px at 33% 92%, rgba(255,255,255,0.59), transparent),
        radial-gradient(1.00px 1.00px at 64% 24%, rgba(255,255,255,0.82), transparent),
        radial-gradient(1.20px 1.20px at 26% 95%, rgba(157,215,255,0.86), transparent),
        radial-gradient(1.35px 1.35px at 55% 29%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.20px 1.20px at 19% 33%, rgba(161,217,255,0.36), transparent),
        radial-gradient(1.10px 1.10px at 17% 96%, rgba(155,202,255,0.61), transparent),
        radial-gradient(1.35px 1.35px at 36% 8%, rgba(161,224,255,0.48), transparent),
        radial-gradient(1.20px 1.20px at 72% 89%, rgba(153,213,255,0.64), transparent),
        radial-gradient(1.20px 1.20px at 4% 77%, rgba(162,200,255,0.46), transparent),
        radial-gradient(1.35px 1.35px at 16% 76%, rgba(153,217,255,0.56), transparent),
        radial-gradient(1.00px 1.00px at 43% 80%, rgba(175,204,255,0.48), transparent),
        radial-gradient(1.10px 1.10px at 85% 67%, rgba(161,208,255,0.41), transparent),
        radial-gradient(0.90px 0.90px at 8% 45%, rgba(176,224,255,0.56), transparent),
        radial-gradient(1.20px 1.20px at 34% 66%, rgba(175,216,255,0.46), transparent),
        radial-gradient(1.20px 1.20px at 25% 41%, rgba(187,195,255,0.58), transparent),
        radial-gradient(1.35px 1.35px at 40% 75%, rgba(183,208,255,0.59), transparent),
        radial-gradient(1.20px 1.20px at 98% 88%, rgba(155,197,255,0.71), transparent),
        radial-gradient(1.20px 1.20px at 58% 47%, rgba(153,224,255,0.39), transparent),
        radial-gradient(0.90px 0.90px at 27% 67%, rgba(156,209,255,0.45), transparent),
        radial-gradient(1.20px 1.20px at 26% 23%, rgba(172,200,255,0.36), transparent),
        radial-gradient(1.20px 1.20px at 44% 47%, rgba(152,197,255,0.60), transparent),
        radial-gradient(1.00px 1.00px at 70% 19%, rgba(156,196,255,0.67), transparent),
        radial-gradient(1.00px 1.00px at 26% 54%, rgba(187,209,255,0.40), transparent),
        radial-gradient(1.35px 1.35px at 7% 17%, rgba(158,213,255,0.55), transparent),
        radial-gradient(1.20px 1.20px at 38% 89%, rgba(180,218,255,0.65), transparent),
        radial-gradient(0.90px 0.90px at 10% 84%, rgba(188,203,255,0.64), transparent),
        radial-gradient(0.65px 0.65px at 75% 23%, rgba(255,255,255,0.43), transparent),
        radial-gradient(0.55px 0.55px at 63% 85%, rgba(255,255,255,0.51), transparent),
        radial-gradient(0.65px 0.65px at 85% 80%, rgba(255,255,255,0.53), transparent),
        radial-gradient(0.65px 0.65px at 89% 69%, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 88% 83%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 41% 68%, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 97% 79%, rgba(255,255,255,0.50), transparent),
        radial-gradient(0.55px 0.55px at 37% 42%, rgba(255,255,255,0.40), transparent),
        radial-gradient(0.65px 0.65px at 17% 9%, rgba(255,255,255,0.33), transparent),
        radial-gradient(0.45px 0.45px at 29% 10%, rgba(255,255,255,0.47), transparent),
        radial-gradient(0.65px 0.65px at 85% 43%, rgba(255,255,255,0.47), transparent),
        radial-gradient(0.65px 0.65px at 42% 2%, rgba(255,255,255,0.34), transparent),
        radial-gradient(0.45px 0.45px at 73% 52%, rgba(255,255,255,0.35), transparent),
        radial-gradient(0.45px 0.45px at 6% 48%, rgba(255,255,255,0.51), transparent),
        radial-gradient(0.65px 0.65px at 10% 21%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.65px 0.65px at 2% 9%, rgba(255,255,255,0.36), transparent),
        radial-gradient(0.75px 0.75px at 27% 26%, rgba(255,255,255,0.44), transparent),
        radial-gradient(0.65px 0.65px at 60% 78%, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.65px 0.65px at 77% 70%, rgba(255,255,255,0.37), transparent),
        radial-gradient(0.75px 0.75px at 64% 10%, rgba(255,255,255,0.22), transparent),
        radial-gradient(0.55px 0.55px at 50% 48%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.65px 0.65px at 3% 71%, rgba(255,255,255,0.43), transparent),
        radial-gradient(0.75px 0.75px at 91% 22%, rgba(255,255,255,0.52), transparent),
        radial-gradient(0.65px 0.65px at 6% 90%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.75px 0.75px at 61% 37%, rgba(255,255,255,0.36), transparent),
        radial-gradient(0.75px 0.75px at 35% 62%, rgba(255,255,255,0.51), transparent),
        radial-gradient(0.65px 0.65px at 51% 4%, rgba(255,255,255,0.47), transparent),
        radial-gradient(0.55px 0.55px at 43% 23%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.45px 0.45px at 54% 68%, rgba(255,255,255,0.28), transparent),
        radial-gradient(0.45px 0.45px at 30% 39%, rgba(156,200,255,0.15), transparent),
        radial-gradient(0.75px 0.75px at 67% 90%, rgba(199,210,255,0.40), transparent),
        radial-gradient(0.65px 0.65px at 47% 11%, rgba(157,222,255,0.23), transparent),
        radial-gradient(0.65px 0.65px at 10% 77%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.75px 0.75px at 82% 39%, rgba(255,255,255,0.15), transparent),
        radial-gradient(0.65px 0.65px at 62% 26%, rgba(199,193,255,0.19), transparent),
        radial-gradient(0.75px 0.75px at 7% 88%, rgba(197,211,255,0.39), transparent),
        radial-gradient(0.55px 0.55px at 49% 62%, rgba(255,255,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 60% 96%, rgba(197,192,255,0.32), transparent),
        radial-gradient(0.45px 0.45px at 37% 22%, rgba(188,225,255,0.14), transparent),
        radial-gradient(0.65px 0.65px at 71% 38%, rgba(175,197,255,0.40), transparent),
        radial-gradient(0.55px 0.55px at 48% 45%, rgba(153,217,255,0.17), transparent),
        radial-gradient(0.45px 0.45px at 8% 88%, rgba(255,255,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 84% 96%, rgba(154,207,255,0.36), transparent),
        radial-gradient(0.55px 0.55px at 11% 2%, rgba(190,202,255,0.25), transparent),
        radial-gradient(0.65px 0.65px at 9% 37%, rgba(182,228,255,0.27), transparent),
        radial-gradient(0.45px 0.45px at 44% 71%, rgba(255,255,255,0.35), transparent),
        radial-gradient(0.75px 0.75px at 40% 53%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.55px 0.55px at 34% 18%, rgba(255,255,255,0.39), transparent),
        radial-gradient(0.75px 0.75px at 58% 52%, rgba(255,255,255,0.31), transparent),
        radial-gradient(0.65px 0.65px at 75% 19%, rgba(255,255,255,0.21), transparent),
        radial-gradient(0.45px 0.45px at 91% 31%, rgba(255,255,255,0.29), transparent),
        radial-gradient(0.75px 0.75px at 54% 90%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.45px 0.45px at 31% 78%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 43% 65%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.75px 0.75px at 53% 83%, rgba(255,255,255,0.32), transparent),
        radial-gradient(0.75px 0.75px at 82% 97%, rgba(255,255,255,0.39), transparent),
        radial-gradient(0.45px 0.45px at 22% 90%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.55px 0.55px at 3% 70%, rgba(255,255,255,0.32), transparent),
        radial-gradient(0.45px 0.45px at 71% 4%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.65px 0.65px at 66% 8%, rgba(255,255,255,0.31), transparent),
        radial-gradient(0.65px 0.65px at 13% 27%, rgba(155,218,255,0.34), transparent),
        radial-gradient(0.75px 0.75px at 25% 40%, rgba(184,207,255,0.31), transparent),
        radial-gradient(0.75px 0.75px at 51% 66%, rgba(184,219,255,0.43), transparent),
        radial-gradient(0.45px 0.45px at 82% 7%, rgba(164,211,255,0.51), transparent),
        radial-gradient(0.55px 0.55px at 92% 3%, rgba(153,207,255,0.49), transparent),
        radial-gradient(0.75px 0.75px at 31% 13%, rgba(162,202,255,0.47), transparent),
        radial-gradient(0.65px 0.65px at 28% 54%, rgba(150,198,255,0.34), transparent),
        radial-gradient(0.55px 0.55px at 54% 41%, rgba(165,209,255,0.40), transparent),
        radial-gradient(0.55px 0.55px at 24% 23%, rgba(178,201,255,0.36), transparent),
        radial-gradient(0.75px 0.75px at 40% 83%, rgba(180,213,255,0.33), transparent),
        radial-gradient(0.45px 0.45px at 79% 96%, rgba(166,196,255,0.32), transparent),
        radial-gradient(0.65px 0.65px at 91% 91%, rgba(167,199,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 12% 78%, rgba(181,210,255,0.43), transparent),
        radial-gradient(0.65px 0.65px at 10% 63%, rgba(157,203,255,0.38), transparent),
        radial-gradient(0.75px 0.75px at 30% 52%, rgba(187,200,255,0.49), transparent),
        radial-gradient(0.55px 0.55px at 83% 37%, rgba(190,218,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 47% 55%, rgba(185,223,255,0.40), transparent),
        radial-gradient(0.55px 0.55px at 83% 2%, rgba(181,205,255,0.29), transparent),
        radial-gradient(0.75px 0.75px at 62% 69%, rgba(167,215,255,0.39), transparent),
        radial-gradient(0.55px 0.55px at 64% 28%, rgba(161,212,255,0.52), transparent),
        radial-gradient(0.65px 0.65px at 28% 89%, rgba(178,213,255,0.65), transparent),
        radial-gradient(0.45px 0.45px at 84% 64%, rgba(185,198,255,0.28), transparent),
        radial-gradient(0.75px 0.75px at 78% 66%, rgba(163,215,255,0.37), transparent),
        radial-gradient(0.75px 0.75px at 87% 54%, rgba(162,204,255,0.63), transparent),
        radial-gradient(0.55px 0.55px at 11% 41%, rgba(255,255,255,0.19), transparent),
        radial-gradient(0.45px 0.45px at 59% 39%, rgba(255,255,255,0.15), transparent),
        radial-gradient(0.55px 0.55px at 97% 65%, rgba(255,255,255,0.14), transparent),
        radial-gradient(0.55px 0.55px at 93% 10%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 54% 95%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.55px 0.55px at 69% 16%, rgba(255,255,255,0.27), transparent),
        radial-gradient(0.55px 0.55px at 49% 5%, rgba(255,255,255,0.28), transparent),
        radial-gradient(0.55px 0.55px at 91% 61%, rgba(255,255,255,0.30), transparent),
        radial-gradient(0.65px 0.65px at 87% 42%, rgba(255,255,255,0.22), transparent),
        radial-gradient(0.65px 0.65px at 27% 39%, rgba(255,255,255,0.11), transparent),
        radial-gradient(0.75px 0.75px at 87% 47%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.65px 0.65px at 11% 41%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.75px 0.75px at 4% 80%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.75px 0.75px at 79% 55%, rgba(255,255,255,0.11), transparent),
        radial-gradient(0.75px 0.75px at 73% 92%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.65px 0.65px at 42% 63%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.65px 0.65px at 94% 29%, rgba(255,255,255,0.14), transparent),
        radial-gradient(0.65px 0.65px at 41% 3%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.45px 0.45px at 76% 97%, rgba(255,255,255,0.19), transparent),
        radial-gradient(0.65px 0.65px at 79% 68%, rgba(255,255,255,0.23), transparent),
        radial-gradient(0.65px 0.65px at 44% 15%, rgba(255,255,255,0.17), transparent),
        radial-gradient(0.55px 0.55px at 16% 4%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.55px 0.55px at 21% 72%, rgba(255,255,255,0.23), transparent),
        radial-gradient(0.45px 0.45px at 95% 14%, rgba(255,255,255,0.21), transparent),
        radial-gradient(0.75px 0.75px at 73% 14%, rgba(255,255,255,0.16), transparent),
        radial-gradient(0.45px 0.45px at 74% 78%, rgba(255,255,255,0.15), transparent),
        radial-gradient(0.75px 0.75px at 65% 87%, rgba(255,255,255,0.12), transparent),
        radial-gradient(0.65px 0.65px at 49% 29%, rgba(255,255,255,0.22), transparent),
        radial-gradient(0.75px 0.75px at 57% 92%, rgba(255,255,255,0.14), transparent),
        radial-gradient(0.55px 0.55px at 12% 46%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.55px 0.55px at 53% 23%, rgba(255,255,255,0.24), transparent),
        radial-gradient(0.45px 0.45px at 74% 33%, rgba(255,255,255,0.29), transparent),
        radial-gradient(0.45px 0.45px at 17% 77%, rgba(255,255,255,0.18), transparent),
        radial-gradient(0.65px 0.65px at 72% 81%, rgba(255,255,255,0.13), transparent),
        radial-gradient(0.75px 0.75px at 97% 68%, rgba(255,255,255,0.26), transparent),
        radial-gradient(0.45px 0.45px at 55% 98%, rgba(255,255,255,0.15), transparent) !important;
    background-size: 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 95px 95px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 70px 70px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 52px 52px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px !important;
    background-repeat: repeat !important;
    background-position: 0 0 !important;
    background-color: transparent !important;
}


/* 100% 纯图：弱遮罩，绝不能盖住留白星空 */
.xl-hero.is-image-only::after,
html[data-theme-preset] .xl-hero.is-image-only::after {
    opacity: 0.16 !important;
    visibility: visible !important;
    z-index: 2 !important;
    background:
        linear-gradient(90deg, rgba(2, 7, 18, 0.12) 0%, transparent 32%, transparent 72%, rgba(2, 7, 18, 0.1) 100%),
        radial-gradient(ellipse 90% 36% at 50% 100%, rgba(4, 12, 30, 0.28), transparent 72%) !important;
    box-shadow: none !important;
}

/* 照片层：在星空之上，但整层透明底，contain 外空区透出星空 */
.xl-hero.is-image-only .xl-hero-backgrounds {
    z-index: 3 !important;
    background: transparent !important;
}

.xl-hero.is-image-only .xl-hero-background,
.xl-hero.is-image-only .xl-hero-background.is-active,
.xl-hero.is-image-only .xl-hero-background.has-image {
    background: transparent !important;
    background-color: transparent !important;
}

.xl-hero.is-image-only .xl-hero-background.is-active.has-image {
    opacity: 1 !important;
}

/* 100%：照片本身不透明，但仍 contain + 透明底 */
.xl-hero.is-image-only .xl-hero-background::before {
    opacity: 1 !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.xl-hero.is-image-only .xl-hero-background::after {
    /* 关掉整卡可读性遮罩，否则 100% 时把左右星空盖成死黑 */
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
}

/* HOME_HERO_TRIPTYCH_NO_STARS: 三图齐全时关星空，三栏 cover 铺满 21:5 */
.xl-hero.is-triptych,
.xl-hero.is-image-only.is-triptych {
    background: #020712 !important;
}

.xl-hero.is-triptych::before,
html[data-theme-preset] .xl-hero.is-triptych::before,
.xl-hero.is-image-only.is-triptych::before,
html[data-theme-preset] .xl-hero.is-image-only.is-triptych::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
}

.xl-hero.is-triptych::after,
html[data-theme-preset] .xl-hero.is-triptych::after,
.xl-hero.is-image-only.is-triptych::after,
html[data-theme-preset] .xl-hero.is-image-only.is-triptych::after {
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
}

.xl-hero.is-triptych .xl-hero-background.is-triptych::before,
.xl-hero.is-image-only.is-triptych .xl-hero-background.is-triptych::before {
    content: none !important;
    display: none !important;
}

.xl-hero.is-triptych .xl-hero-background-panel,
.xl-hero.is-image-only.is-triptych .xl-hero-background-panel {
    opacity: 1 !important;
}

.xl-hero.is-triptych .xl-hero-background.is-triptych::after,
.xl-hero.is-image-only.is-triptych .xl-hero-background.is-triptych::after {
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
}

@supports not (aspect-ratio: 1 / 1) {
    .xl-hero.is-image-only {
        min-height: calc(var(--home-shell-width, 100vw) * 5 / 21);
        height: auto;
    }
}



/* inlined css/home/home-02.part-05.css */
/* 覆盖响应式里把 hero 拉高的 min-height，保证桌面/平板 21:9×0.85 */
@media screen and (min-width: 769px) {
    .xl-hero,
    .xl-hero.is-image-only,
    .xl-home-hero-row .xl-hero {
        aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65) !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* 日期/进度卡与 hero 同高拉伸 */
    .xl-home-hero-row {
        align-items: stretch !important;
    }

    .xl-home-time-card,
    .xl-home-time-card .xl-side-card,
    .xl-home-time-card .xl-time-section {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* 小屏纯图仍 21:9；有文案时允许加高，避免按钮挤爆 */
@media screen and (max-width: 768px) {
    .xl-hero.is-image-only {
        aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 7.65) !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .xl-hero:not(.is-image-only) {
        aspect-ratio: auto;
        min-height: clamp(167px, 27vh, 238px);
    }
}

/*
 * HOME_783X1392_HERO_21_9_GUARD
 * 仅浏览器外窗约 783x1392（与 HOME_785X1396_WINDOW_GUARD 同 viewport 带）首屏卡片固定 21:9。
 * aspect 用 3/5~5/8，避免误伤两栏布局。
 * 若后台为该卡上传了 783 专用单图（has-window-783），本窗口优先整卡 cover 显示。
 */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width: 820px) and (min-height: 1200px) and (max-height: 1500px) and (min-aspect-ratio: 1/2) and (max-aspect-ratio: 2/3) {
    :root,
    .xl-home {
        --home-hero-aspect-w: 21;
        --home-hero-aspect-h: 9;
        --home-hero-height-scale: 1;
        --home-hero-display-h: calc(var(--home-hero-aspect-h) * var(--home-hero-height-scale));
        --home-time-card-width: clamp(188px, 22vw, 220px);
        --home-hero-block-height: calc((var(--home-shell-width) - var(--home-side-width) - var(--home-gap) - var(--home-time-card-width) - var(--home-gap)) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    }

    .xl-hero,
    .xl-hero.is-image-only,
    .xl-hero.is-image-only[style*="--home-hero-image-aspect-ratio"],
    .xl-home-hero-row .xl-hero {
        aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 9) !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /*
     * HOME_783_DATE_ABOVE_UPDATES + HOME_783_TOOL_GAP_FIX:
     * 左栏 flex：Hero + 文生图/图生图紧排（不再与右侧日志共享行高）。
     * 日期绝对贴在 Hero 右侧同高；右栏用 Hero 等高占位，日志紧跟其下。
     */
    .xl-home-layout {
        --home-783-side-w: clamp(188px, 27vw, 224px);
        --home-783-gap: clamp(10px, 1.1vw, 14px);
        /* Hero 宽 ≈ 壳宽 - 右栏 - 列间距；高 = 宽 * 9/21（纯 21:9） */
        --home-783-hero-h: calc((var(--home-shell-width) - var(--home-783-side-w) - var(--home-783-gap)) * 9 / 21);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--home-783-side-w) !important;
        grid-template-rows: auto !important;
        align-items: start !important;
        column-gap: var(--home-783-gap) !important;
        row-gap: clamp(8px, 0.9vw, 12px) !important;
        overflow: visible !important;
    }

    .xl-home-main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: clamp(8px, 0.9vw, 12px) !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .xl-home-hero-row {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .xl-hero,
    .xl-home-hero-row .xl-hero {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .xl-home-time-card {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: calc(100% + var(--home-783-gap)) !important;
        width: var(--home-783-side-w) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 2 !important;
    }

    .xl-home-time-card .xl-side-card,
    .xl-home-time-card .xl-time-section {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .xl-home-time-card .xl-time-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        align-content: stretch !important;
        align-items: stretch !important;
        gap: clamp(8px, 1vw, 12px) !important;
        padding: clamp(10px, 1.2vw, 14px) !important;
    }

    .xl-home-time-card .xl-time-date {
        align-self: center !important;
    }

    .xl-home-time-card .xl-time-progress {
        align-content: center !important;
        min-height: 0 !important;
    }

    .xl-tool-section {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 右栏与主栏同起点；顶部空出 Hero 等高，日志落在日期下方 */
    .xl-home-side {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-top: calc(var(--home-783-hero-h) + clamp(8px, 0.9vw, 12px)) !important;
        box-sizing: border-box !important;
        order: initial !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-self: start !important;
    }

    .xl-side-updates-card,
    .xl-home-side .xl-side-updates-card {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* 783 专用单图：整卡 cover，隐藏默认三栏 panel / contain 图，关星空
     * HOME_783_TRIPTYCH_BLACK_GUARD:
     * 第二张卡若是默认三图(is-triptych)又填了 783 单图，全局 triptych 规则会 content:none 掉 ::before，
     * 同时 783 规则又隐藏 panel，结果只剩 #020712 黑底。这里必须用更高优先级强制恢复 783 图。 */
    .xl-hero-background.has-window-783.is-active {
        opacity: 1 !important;
    }

    .xl-hero-background.has-window-783::before,
    .xl-hero-background.has-window-783.is-triptych::before,
    .xl-hero-background.has-window-783.is-active::before,
    .xl-hero-background.has-window-783.is-active.is-triptych::before,
    .xl-hero.is-image-only .xl-hero-background.has-window-783::before,
    .xl-hero.is-triptych .xl-hero-background.has-window-783::before,
    .xl-hero.is-image-only.is-triptych .xl-hero-background.has-window-783::before,
    .xl-hero.is-triptych .xl-hero-background.has-window-783.is-triptych::before,
    .xl-hero.is-image-only.is-triptych .xl-hero-background.has-window-783.is-triptych::before,
    .xl-hero.is-image-only.is-triptych .xl-hero-background.has-window-783.is-active.is-triptych::before {
        content: "" !important;
        display: block !important;
        background-image: var(--home-hero-background-image-783) !important;
        background-size: cover !important;
        background-position: 50% 50% !important;
        background-repeat: no-repeat !important;
        opacity: 1 !important;
        transform: none !important;
        transform-origin: 50% 50% !important;
        background-color: transparent !important;
        visibility: visible !important;
    }

    .xl-hero-background.has-window-783 .xl-hero-background-panel,
    .xl-hero.is-triptych .xl-hero-background.has-window-783 .xl-hero-background-panel,
    .xl-hero.is-image-only.is-triptych .xl-hero-background.has-window-783 .xl-hero-background-panel {
        display: none !important;
    }

    .xl-hero-background.has-window-783::after,
    .xl-hero-background.has-window-783.is-triptych::after,
    .xl-hero.is-triptych .xl-hero-background.has-window-783::after,
    .xl-hero.is-image-only.is-triptych .xl-hero-background.has-window-783::after {
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
    }

    .xl-hero:has(.xl-hero-background.is-active.has-window-783) {
        background: #020712 !important;
    }

    .xl-hero:has(.xl-hero-background.is-active.has-window-783)::before,
    html[data-theme-preset] .xl-hero:has(.xl-hero-background.is-active.has-window-783)::before {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
        background-image: none !important;
    }

    /* 旧 Edge 无 :has 时：带 is-window-783-active 类由 JS 兜底 */
    .xl-hero.is-window-783-active {
        background: #020712 !important;
    }

    .xl-hero.is-window-783-active::before,
    html[data-theme-preset] .xl-hero.is-window-783-active::before {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
        background-image: none !important;
    }

    @supports not (aspect-ratio: 1 / 1) {
        .xl-hero,
        .xl-hero.is-image-only {
            min-height: calc(var(--home-shell-width, 100vw) * 9 / 21) !important;
            height: auto !important;
        }
    }
}

.xl-hero.is-image-only .xl-hero-badge,
.xl-hero.is-image-only .xl-hero-desc {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Layout shell for pure-image mode: pin buttons bottom-left, dots bottom-center. */
.xl-hero.is-image-only .xl-hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    flex: none;
    z-index: 14;
    color: transparent;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 clamp(22px, 2.4vw, 40px) clamp(18px, 1.8vw, 28px);
    box-sizing: border-box;
}

.xl-hero.is-image-only .xl-hero-carousel {
    position: relative;
    width: 100%;
    max-width: none;
    overflow: visible;
    z-index: 14;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
}

.xl-hero.is-image-only .xl-hero-slides {
    width: 100%;
    transform: none !important;
    transition: none;
}

.xl-hero.is-image-only .xl-hero-slide {
    display: none;
    padding-right: 0;
}

.xl-hero.is-image-only .xl-hero-slide.is-active {
    display: block;
}

.xl-hero.is-image-only .xl-hero-slide-body,
.xl-hero.is-image-only .xl-hero-slide-copy {
    min-width: 0;
    width: 100%;
}

/* Hide default actions chrome, then re-show enabled buttons below. */
.xl-hero.is-image-only .xl-hero-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.xl-hero.is-image-only.keep-primary-btn .xl-hero-actions,
.xl-hero.is-image-only.keep-secondary-btn .xl-hero-actions,
.xl-hero.is-image-only.keep-primary-btn .xl-hero-slide-body,
.xl-hero.is-image-only.keep-secondary-btn .xl-hero-slide-body,
.xl-hero.is-image-only.keep-primary-btn .xl-hero-slide-copy,
.xl-hero.is-image-only.keep-secondary-btn .xl-hero-slide-copy {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.xl-hero.is-image-only.keep-primary-btn .xl-hero-slide-copy > :not(.xl-hero-actions),
.xl-hero.is-image-only.keep-secondary-btn .xl-hero-slide-copy > :not(.xl-hero-actions) {
    display: none !important;
}

.xl-hero.is-image-only.keep-primary-btn .xl-hero-actions,
.xl-hero.is-image-only.keep-secondary-btn .xl-hero-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
    max-width: min(100%, 560px);
    margin: 0;
    pointer-events: auto !important;
}

.xl-hero.is-image-only.keep-primary-btn .xl-hero-btn--ai3d {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: inline-flex !important;
}

.xl-hero.is-image-only:not(.keep-primary-btn) .xl-hero-btn--ai3d {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.xl-hero.is-image-only.keep-secondary-btn .xl-hero-btn--photo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: inline-flex !important;
}

.xl-hero.is-image-only:not(.keep-secondary-btn) .xl-hero-btn--photo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.xl-hero.is-image-only .xl-hero-art,
.xl-hero.is-image-only .hero-core,
.xl-hero.is-image-only #heroPlanet3D,
.xl-hero.is-image-only .hero-orbits,
.xl-hero.is-image-only .hero-ai-text,
.xl-hero.is-image-only .hero-dust,
.xl-hero.is-image-only .hero-star-current,
.xl-hero.is-image-only .hero-glass-edge {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.xl-hero.is-image-only .xl-hero-dots {
    position: relative;
    z-index: 20;
    margin: 0 auto;
    pointer-events: auto;
}



/* inlined css/home/home-03.css */
.xl-hero-btn:hover::before {
    opacity: 1;
}

.xl-hero-btn:hover::after {
    opacity: 0.5;
}

.xl-hero-btn:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.04);
    background-position: 100% 100%, 0% 50%;
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow:
        0 24px 50px rgba(91, 141, 238, 0.38),
        0 0 50px rgba(255, 220, 180, 0.20),
        0 0 80px rgba(180, 200, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.xl-hero-btn:active {
    transform: translateY(0px) scale(0.98);
    transition: transform 0.1s ease;
}

@keyframes btnShine {
    0% { left: -30%; }
    100% { left: 130%; }
}

.xl-hero-btn svg {
    width: 18px;
    height: 18px;
}

/* HOME_CONTAINMENT_GUARD */
.xl-tool-card,
.xl-side-section,
.xl-update-card,
.xl-notice-item {
    contain: layout style paint;
}

/* HOME_SCROLL_MOTION_GUARD */
.home-is-scrolling .xl-hero-btn:hover,
.home-is-scrolling .xl-hero-btn:hover * {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    text-shadow: none !important;
    transition: none !important;
}

.home-is-scrolling .xl-hero-btn:hover,
.home-is-scrolling .xl-hero-btn:hover * {
    transform: none !important;
}

.xl-hero-art {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    pointer-events: none;
    isolation: isolate;
    perspective: 1700px;
    transform-style: preserve-3d;
    z-index: 4;
}

.hero-glass-edge {
    display: none;
}

.hero-glass-edge {
    display: none;
    position: absolute;
    inset: 1% 0 1% 0;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(115, 171, 255, 0.10) 32%, transparent 48%),
        linear-gradient(315deg, rgba(127, 184, 255, 0.26), transparent 30%),
        radial-gradient(circle at 98% 5%, rgba(255, 255, 255, 0.82) 0 0.45%, rgba(106, 186, 255, 0.58) 0.7%, transparent 3%);
    border: 1px solid rgba(174, 211, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(79, 150, 255, 0.22),
        0 0 36px rgba(88, 151, 255, 0.16);
    opacity: 0.78;
    pointer-events: none;
    z-index: 2;
}

.xl-hero .hero-orbits {
    opacity: 1;
}

.xl-hero .hero-orbits {
    opacity: 0.72;
    filter: drop-shadow(0 0 16px rgba(95, 196, 255, 0.34));
}

.hero-star-current {
    display: block;
    position: absolute;
    left: 18%;
    right: 4%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(105, 179, 255, 0.10) 24%, rgba(255, 255, 255, 0.82) 50%, rgba(109, 232, 255, 0.22) 66%, transparent 100%);
    background-size: 240px 100%;
    filter: drop-shadow(0 0 10px rgba(98, 179, 255, 0.75)) drop-shadow(0 0 22px rgba(95, 224, 255, 0.34));
    opacity: 0.78;
    z-index: 7;
}

.hero-star-current-a {
    top: 36%;
    --current-rotate: -15deg;
    transform: rotate(-15deg);
}

.hero-star-current-b {
    top: 58%;
    left: 8%;
    right: 12%;
    opacity: 0.42;
    --current-rotate: -9deg;
    transform: rotate(-9deg);
}

@keyframes heroCorePulse {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.95);
        opacity: 0.62;
    }
    35% {
        transform: translate3d(-10px, 8px, 0) scale(1.12);
        opacity: 0.94;
    }
    70% {
        transform: translate3d(12px, -10px, 0) scale(1.03);
        opacity: 0.74;
    }
}

/* ========== Hero入场动画 ========== */
@keyframes heroBadgeIn {
    0% { opacity: 0; transform: translateY(-18px) scale(0.8); }
    60% { transform: translateY(3px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroTitleIn {
    0% { opacity: 0; transform: translateY(22px); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroDescIn {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroBtnIn {
    0% { opacity: 0; transform: translateY(16px) scale(0.9); }
    70% { transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes btnShine {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(250%) skewX(-15deg); }
}

.home-page .act_nav {
    color: #6db5ff !important;
}

.home-page .act_nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30%;
    width: 20px;
    height: 120%;
    background: linear-gradient(90deg, transparent, rgba(160, 200, 255, 0.5), transparent);
    transform: translateY(-50%) skewX(-12deg);
    pointer-events: none;
}

.home-page .navul li > a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-page .navul li > a:hover {
    color: #8ac4ff !important;
    text-shadow: 0 0 18px rgba(100, 180, 255, 0.7);
    transform: translateY(-1px);
}



/* inlined css/home/home-light.css */
html[data-theme="light"] .xl-home {
    --home-text: #13233a;
    --home-muted: #53667f;
    --home-faint: #7b8da6;
    --home-line: rgba(69, 117, 190, 0.16);
    --home-line-strong: rgba(55, 108, 190, 0.28);
    background:
        radial-gradient(ellipse 76% 46% at 49% 0%, rgba(86, 149, 239, 0.18), transparent 62%),
        radial-gradient(ellipse 58% 38% at 12% 16%, rgba(92, 185, 255, 0.13), transparent 58%),
        radial-gradient(ellipse 48% 36% at 88% 14%, rgba(141, 130, 255, 0.11), transparent 56%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 44%, #f6faff 100%) !important;
}

html[data-theme="light"] .xl-home::before {
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(65, 119, 190, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 119, 190, 0.04) 1px, transparent 1px);
}

html[data-theme="light"] .xl-hero {
    color: #13233a;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.76) 0%, rgba(239, 246, 255, 0.64) 46%, rgba(219, 233, 253, 0.48) 100%),
        radial-gradient(circle at 76% 44%, rgba(35, 108, 206, 0.18), transparent 28%);
    border-color: rgba(82, 130, 196, 0.2);
    box-shadow:
        0 22px 58px rgba(54, 92, 142, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .xl-hero h1,
html[data-theme="light"] .xl-section-title h2,
html[data-theme="light"] .xl-side-head h2 {
    color: #12233b;
    text-shadow: none;
}

html[data-theme="light"] .xl-hero p,
html[data-theme="light"] .xl-tool-copy p,
html[data-theme="light"] .xl-notice-item p,
html[data-theme="light"] .xl-update-feature ul,
html[data-theme="light"] .xl-update-row {
    color: #53677f;
}

html[data-theme="light"] .xl-tool-card,
html[data-theme="light"] .xl-side-card {
    color: #14243b;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 247, 255, 0.94) 100%);
    border-color: rgba(72, 119, 190, 0.2);
    box-shadow:
        0 18px 42px rgba(42, 82, 138, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .xl-tool-section {
    border-color: rgba(72, 119, 190, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(237, 245, 255, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 42px rgba(42, 82, 138, 0.10);
}

html[data-theme="light"] .xl-category-rail-track {
    border-color: rgba(52, 112, 190, 0.20);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 244, 255, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 4px 0 0 rgba(35, 108, 206, 0.10),
        0 10px 24px rgba(42, 82, 138, 0.10);
}

html[data-theme="light"] .xl-category-rail-dot {
    background: rgba(54, 126, 206, 0.28);
    border-color: rgba(54, 126, 206, 0.20);
    box-shadow:
        0 0 0 4px rgba(248, 252, 255, 0.88),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html[data-theme="light"] .xl-category-rail-label {
    color: #3c4c63;
    opacity: 0.8;
}

html[data-theme="light"] .xl-category-rail-link.is-passed .xl-category-rail-label {
    color: #5aab72;
    opacity: 0.94;
}

html[data-theme="light"] .xl-category-rail-link.is-active .xl-category-rail-label {
    color: #1ca354;
    opacity: 1;
    font-size: 15px;
    text-shadow: 0 0 12px rgba(28, 163, 84, 0.22);
}

html[data-theme="light"] .xl-category-rail-link:hover .xl-category-rail-dot,
html[data-theme="light"] .xl-category-rail-link:focus-visible .xl-category-rail-dot,
html[data-theme="light"] .xl-category-rail-link.is-active .xl-category-rail-dot {
    border-color: rgba(35, 108, 206, 0.52);
    background: linear-gradient(180deg, #4eb8df, #236cce);
    box-shadow:
        0 0 0 5px rgba(248, 252, 255, 0.90),
        0 0 0 8px rgba(35, 108, 206, 0.10),
        0 0 18px rgba(35, 108, 206, 0.24);
}

html[data-theme="light"] .xl-tool-section:nth-of-type(2n) {
    border-color: rgba(52, 139, 180, 0.20);
    background:
        linear-gradient(180deg, rgba(246, 252, 255, 0.96) 0%, rgba(226, 242, 250, 0.94) 100%);
}

html[data-theme="light"] .xl-tool-section:nth-of-type(2n + 1) {
    border-color: rgba(180, 135, 52, 0.20);
    background:
        linear-gradient(180deg, rgba(255, 251, 242, 0.96) 0%, rgba(238, 246, 255, 0.94) 100%);
}

html[data-theme="light"] .xl-section-title--layered {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .xl-section-title--layered span {
    background: linear-gradient(180deg, #236cce, #1f8ea8);
    box-shadow:
        0 0 0 1px rgba(35, 108, 206, 0.24),
        0 0 16px rgba(35, 108, 206, 0.22);
}

html[data-theme="light"] .xl-section-title--layered h2 {
    color: #13233a;
    text-shadow: none;
}

html[data-theme="light"] .xl-section-title-hint {
    color: #5a7090;
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(72, 119, 190, 0.12);
}

html[data-theme="light"] .xl-tool-card:hover,
html[data-theme="light"] .xl-home-side .xl-side-card:hover {
    border-color: rgba(55, 123, 224, 0.38);
    box-shadow:
        0 18px 42px rgba(42, 82, 138, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .xl-tool-image {
    background:
        radial-gradient(circle at 62% 10%, rgba(104, 160, 239, 0.14), transparent 38%),
        linear-gradient(180deg, #eef5ff 0%, #dfeafa 100%);
}

html[data-theme="light"] .xl-tool-info,
html[data-theme="light"] .xl-notice-list,
html[data-theme="light"] .xl-update-feature {
    color: #182842;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 255, 0.94));
    border-color: rgba(72, 119, 190, 0.18);
    box-shadow:
        0 14px 32px rgba(42, 82, 138, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .xl-tool-name,
html[data-theme="light"] .xl-tool-copy h3,
html[data-theme="light"] .xl-notice-item h3,
html[data-theme="light"] .xl-update-feature h3 {
    color: #13233a;
}

html[data-theme="light"] .xl-tool-link,
html[data-theme="light"] .xl-side-head a,
html[data-theme="light"] .xl-update-feature > a {
    color: #245aa6;
    border-color: rgba(59, 116, 207, 0.24);
    background: rgba(236, 245, 255, 0.74);
}

html[data-theme="light"] .xl-tool-link:hover,
html[data-theme="light"] .xl-side-head a:hover,
html[data-theme="light"] .xl-update-feature > a:hover {
    color: #0f3974;
    background: rgba(220, 236, 255, 0.9);
}

html[data-theme="light"] .xl-notice-item,
html[data-theme="light"] .xl-update-row {
    border-color: rgba(72, 119, 190, 0.12);
}

html[data-theme="light"] .xl-tool-tag {
    color: #137651;
    border-color: rgba(28, 157, 110, 0.26);
    background: rgba(226, 248, 239, 0.88);
}

html[data-theme="light"] .xl-tool-new-badge,
html[data-theme="light"] .xl-badge-latest,
html[data-theme="light"] .xl-news-badge-latest {
    color: #7b520e;
    border-color: rgba(187, 139, 35, 0.32);
    background: linear-gradient(180deg, rgba(255, 244, 203, 0.96), rgba(245, 218, 145, 0.92));
}


/* inlined css/home/home-theme-preset.css */
html[data-theme-preset] {
    --home-bg: var(--xl-theme-bg, #0a0a0a);
    --home-bg-soft: var(--xl-theme-panel, #11100d);
    --home-panel: var(--xl-theme-panel, #11100d);
    --home-panel-soft: var(--xl-theme-popup, #15130f);
    --home-line: color-mix(in srgb, var(--xl-theme-border, #211c10) 76%, transparent);
    --home-line-strong: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 42%, transparent);
    --home-text: var(--xl-theme-fg, #e0d9c8);
    --home-muted: var(--xl-theme-muted, #ffefc0);
    --home-faint: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 62%, var(--xl-theme-bg, #0a0a0a));
    --home-blue: var(--xl-theme-accent, #d4a843);
    --home-cyan: var(--xl-theme-accent-2, #d4a843);
    --home-gold: var(--xl-theme-accent, #d4a843);
    --home-on-accent: var(--xl-theme-on-accent, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 88%, #000));
    --home-accent-surface: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, var(--xl-theme-popup, #15130f));
    --home-accent-surface-strong: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, var(--xl-theme-panel, #11100d));
    --home-accent-glow: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    --home-accent-glow-soft: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent);
    --home-hero-btn-fg: var(--xl-theme-on-accent, #0a0a0a);
    --home-hero-btn-start: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 99%, #fff);
    --home-hero-btn-end: color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 94%, #fff);
    --home-hero-btn-border: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 84%, color-mix(in srgb, #ffffff 18%, transparent));
}

html[data-theme-preset] body.home-page-shell {
    background: var(--home-bg) !important;
    color: var(--home-text);
}

html[data-theme-preset] body.home-page-shell .header,
html[data-theme-preset] body.home-page-shell .loarea,
html[data-theme-preset] body.home-page-shell .loarea .wp,
html[data-theme-preset] body.home-page-shell .loginArea,
html[data-theme-preset] body.home-page-shell .theme-toggle,
html[data-theme-preset] body.home-page-shell .theme-toggle--custom-open {
    position: relative;
    overflow: visible;
    z-index: 214748320;
}

html[data-theme-preset] .xl-home {
    color: var(--home-text);
    background:
        radial-gradient(ellipse 72% 45% at 50% 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 62%),
        radial-gradient(ellipse 58% 42% at 8% 16%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 32%, transparent), transparent 58%),
        radial-gradient(ellipse 48% 38% at 90% 12%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 12%, transparent), transparent 58%),
        linear-gradient(180deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 46%, var(--xl-theme-bg, #0a0a0a) 100%) !important;
}

html[data-theme-preset] .xl-home::before {
    opacity: 0.32;
    background-image:
        linear-gradient(color-mix(in srgb, var(--xl-theme-border, #211c10) 42%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--xl-theme-border, #211c10) 34%, transparent) 1px, transparent 1px),
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent) 0%, transparent 2%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 8%, transparent) 0%, transparent 1.5%);
}

html[data-theme-preset] .home-mouse-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent) 0%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 10%, transparent) 42%, transparent 72%);
}

html[data-theme-preset] .xl-hero {
    color: var(--home-text);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, var(--xl-theme-border, #211c10));
    background:
        radial-gradient(ellipse 72% 86% at 72% 47%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 64%),
        radial-gradient(ellipse 52% 62% at 52% 104%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 24%, transparent), transparent 70%),
        linear-gradient(155deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 56%, var(--xl-theme-popup, #15130f) 100%) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        inset 0 0 54px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 26px 80px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 72%, transparent),
        0 0 52px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent);
}

html[data-theme-preset] .xl-hero::before {
    background-image:
        radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 52%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle at 20% 76%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 42%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 46%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle at 77% 18%, color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 50%, transparent) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 88% 62%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent) 0 1px, transparent 1.5px);
}

html[data-theme-preset] .xl-hero::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 78%, transparent) 0%, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 36%, transparent) 40%, transparent 68%),
        radial-gradient(ellipse 90% 40% at 52% 104%, color-mix(in srgb, var(--xl-theme-popup, #15130f) 72%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 28% at 54% 2%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 62%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent);
}

html[data-theme-preset] .xl-hero-badge {
    color: var(--xl-theme-bg, #0a0a0a);
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8)));
    box-shadow:
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 30%, transparent);
}

html[data-theme-preset] .xl-hero p {
    color: color-mix(in srgb, var(--home-text) 82%, var(--home-muted) 18%);
    text-shadow:
        0 1px 10px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 42%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent);
}

html[data-theme-preset] .xl-tool-copy p,
html[data-theme-preset] .xl-notice-item p,
html[data-theme-preset] .xl-update-feature ul,
html[data-theme-preset] .xl-update-row {
    color: color-mix(in srgb, var(--home-text) 64%, var(--home-muted) 36%);
}

html[data-theme-preset] .xl-hero-brand,
html[data-theme-preset] .xl-section-title h2,
html[data-theme-preset] .xl-side-head h2,
html[data-theme-preset] .xl-tool-copy h3,
html[data-theme-preset] .xl-notice-item h3,
html[data-theme-preset] .xl-update-feature h3 {
    color: var(--home-text);
    text-shadow: 0 2px 16px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent);
}

html[data-theme-preset] .xl-section-title {
    border-bottom-color: var(--home-line);
}

html[data-theme-preset] .xl-section-title span,
html[data-theme-preset] .xl-notice-dot {
    background: linear-gradient(180deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, var(--xl-theme-bg, #0a0a0a)));
    box-shadow: 0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
}

html[data-theme-preset] .banner .swiper-pagination-bullet {
    background: color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 76%, transparent);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 82%, #ffffff 18%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 22%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
}

html[data-theme-preset] .banner .swiper-pagination-bullet-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 88%, #fff), var(--xl-theme-accent, #d4a843));
    border-color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 32%, var(--xl-theme-accent, #d4a843));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 18%, transparent),
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
}

html[data-theme-preset] .xl-hero-btn,
html[data-theme-preset] .xl-hero-btn--photo {
    color: var(--home-hero-btn-fg);
    border-color: var(--home-hero-btn-border);
    background-color: var(--home-hero-btn-start);
    background:
        linear-gradient(135deg, color-mix(in srgb, #ffffff 12%, transparent), transparent 48%),
        linear-gradient(135deg, var(--home-hero-btn-start), var(--home-hero-btn-end));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 0 1px color-mix(in srgb, #000000 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    text-shadow: none;
    -webkit-text-stroke: 0;
}

html[data-theme-preset] .xl-tool-card,
html[data-theme-preset] .xl-side-card {
    color: var(--home-text);
    border-color: var(--home-line-strong);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 94%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 96%, transparent)),
        radial-gradient(ellipse 70% 50% at 15% 8%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 42%),
        radial-gradient(ellipse 60% 40% at 85% 90%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 18%, transparent), transparent 35%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        0 14px 32px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 64%, transparent);
}

html[data-theme-preset] .xl-tool-section {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, var(--home-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 94%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 96%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        0 18px 42px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 58%, transparent);
}

html[data-theme-preset] .xl-category-rail-track {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 86%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 84%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        inset 4px 0 0 color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent),
        0 12px 30px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 48%, transparent);
}

html[data-theme-preset] .xl-category-rail-dot {
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 82%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 16%, transparent);
}

html[data-theme-preset] .xl-category-rail-label {
    color: color-mix(in srgb, var(--home-text) 84%, var(--xl-theme-accent, #d4a843) 16%);
    opacity: 0.8;
}

html[data-theme-preset] .xl-category-rail-link.is-passed .xl-category-rail-label {
    color: color-mix(in srgb, var(--xl-theme-accent-2, #f3c65d) 28%, #4cdf8a 72%);
    opacity: 0.94;
}

html[data-theme-preset] .xl-category-rail-link.is-active .xl-category-rail-label {
    color: color-mix(in srgb, #4dff9d 72%, var(--xl-theme-accent-2, #f3c65d) 28%);
    opacity: 1;
    font-size: 15px;
    text-shadow: 0 0 16px color-mix(in srgb, #4dff9d 32%, transparent);
}

html[data-theme-preset] .xl-category-rail-link:hover .xl-category-rail-dot,
html[data-theme-preset] .xl-category-rail-link:focus-visible .xl-category-rail-dot,
html[data-theme-preset] .xl-category-rail-link.is-active .xl-category-rail-dot {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, transparent);
    background: linear-gradient(180deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #f3c65d));
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 86%, transparent),
        0 0 0 8px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 0 20px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] .xl-tool-section:nth-of-type(2n) {
    border-color: color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 34%, var(--home-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-popup, #15130f) 90%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 96%, transparent));
}

html[data-theme-preset] .xl-tool-section:nth-of-type(2n + 1) {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, var(--home-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 96%, transparent), color-mix(in srgb, var(--xl-theme-popup, #15130f) 88%, transparent));
}

html[data-theme-preset] .xl-section-title--layered {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

html[data-theme-preset] .xl-section-title--layered span {
    background: linear-gradient(180deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #f3c65d));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] .xl-section-title--layered h2 {
    color: color-mix(in srgb, var(--home-text) 88%, var(--xl-theme-accent, #d4a843) 12%);
    font-size: 23px;
    font-size: clamp(21px, 1.44vw, 26px);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent);
}

html[data-theme-preset] .xl-section-title-hint {
    color: color-mix(in srgb, var(--home-text) 76%, var(--home-muted) 24%);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent);
    background: color-mix(in srgb, var(--xl-theme-popup, #15130f) 82%, transparent);
}

html[data-theme-preset] .xl-tool-card:hover,
html[data-theme-preset] .xl-home-side .xl-side-card:hover {
    /* HOME_TOOL_CARD_HOVER_PAINT_BUDGET */
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        0 14px 32px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 64%, transparent);
}

html[data-theme-preset] .xl-tool-image {
    background:
        radial-gradient(circle at 62% 10%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 38%),
        linear-gradient(180deg, var(--xl-theme-popup, #15130f), var(--xl-theme-bg, #0a0a0a));
}

html[data-theme-preset] .xl-tool-info,
html[data-theme-preset] .xl-notice-list,
html[data-theme-preset] .xl-update-feature {
    color: var(--home-text);
    border-color: var(--home-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 90%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 86%, transparent)),
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 34%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 7%, transparent),
        0 12px 30px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 46%, transparent);
}

html[data-theme-preset] .xl-tool-icon,
html[data-theme-preset] .xl-side-head svg {
    color: var(--xl-theme-bg, #0a0a0a);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 44%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 74%, var(--xl-theme-fg, #e0d9c8)), var(--xl-theme-accent, #d4a843));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 40%, transparent),
        0 14px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent);
}

html[data-theme-preset] .xl-tool-link,
html[data-theme-preset] .xl-side-head a,
html[data-theme-preset] .xl-update-feature > a,
html[data-theme-preset] .xl-update-topline strong,
html[data-theme-preset] .xl-update-row strong {
    color: color-mix(in srgb, var(--home-text) 74%, var(--home-muted) 26%);
    border-color: var(--home-line-strong);
    background: color-mix(in srgb, var(--xl-theme-popup, #15130f) 76%, transparent);
}

html[data-theme-preset] .xl-tool-link:hover,
html[data-theme-preset] .xl-side-head a:hover,
html[data-theme-preset] .xl-update-feature > a:hover {
    color: var(--home-text);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, var(--xl-theme-popup, #15130f));
}

html[data-theme-preset] .xl-time-section,
html[data-theme-preset] .xl-update-row {
    border-color: var(--home-line);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 6%, transparent), color-mix(in srgb, var(--xl-theme-popup, #15130f) 54%, transparent)),
        radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 34%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 7%, transparent);
}

html[data-theme-preset] .xl-time-date,
html[data-theme-preset] .xl-time-date strong,
html[data-theme-preset] .xl-time-progress-head strong {
    color: var(--home-text);
}

html[data-theme-preset] .xl-time-month,
html[data-theme-preset] .xl-time-date span,
html[data-theme-preset] .xl-time-progress-head,
html[data-theme-preset] .xl-notice-item,
html[data-theme-preset] .xl-notice-item time {
    color: var(--home-muted);
}

html[data-theme-preset] .xl-side-section-updates,
html[data-theme-preset] .xl-notice-item {
    border-color: var(--home-line);
}

html[data-theme-preset] .xl-home-side .xl-notice-item:hover,
html[data-theme-preset] .xl-home-side .xl-notice-item:focus-visible,
html[data-theme-preset] .xl-home-side .xl-update-row:hover,
html[data-theme-preset] .xl-home-side .xl-update-row:focus-visible {
    color: var(--home-text);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, var(--xl-theme-popup, #15130f));
    box-shadow:
        0 14px 28px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 54%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent);
}

html[data-theme-preset] .home-page .act_nav,
html[data-theme-preset] .home-page-shell .act_nav,
html[data-theme-preset] .home-page .navul li > a:hover,
html[data-theme-preset] .home-page-shell .navul li > a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 42%, transparent);
}

html[data-theme-preset] .xl-hero-btn:hover {
    color: var(--home-hero-btn-fg);
    border-color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 36%, var(--xl-theme-accent, #d4a843));
    box-shadow:
        0 24px 50px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 50px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 18%, transparent),
        0 0 80px color-mix(in srgb, var(--xl-theme-soft, #6b6040) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 45%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 18%, transparent);
}

html[data-theme-preset] .xl-hero .hero-orbit-ring-1,
html[data-theme-preset] .xl-hero .hero-orbit-ring-2,
html[data-theme-preset] .xl-hero .hero-orbit-ring-3,
html[data-theme-preset] .xl-hero .hero-orbit-ring-4 {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 46%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 0 26px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent),
        inset 0 0 32px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 7%, transparent);
}

html[data-theme-preset] .xl-hero .hero-orbits {
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent));
}

html[data-theme-preset] .xl-hero .hero-core::before {
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 78%, transparent) 0 2.5%, transparent 3.8%),
        radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent) 0 12%, transparent 27%),
        radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 70%, transparent) 0 0, color-mix(in srgb, var(--xl-theme-panel, #11100d) 78%, transparent) 34%, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 88%, transparent) 100%);
}

html[data-theme-preset] .xl-hero .hero-ai-text {
    -webkit-text-stroke-color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 52%, transparent);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 96%, transparent) 0%,
        color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 82%, transparent) 25%,
        color-mix(in srgb, var(--xl-theme-accent, #d4a843) 70%, var(--xl-theme-fg, #e0d9c8)) 50%,
        color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 82%, transparent) 75%,
        color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 96%, transparent) 100%);
    filter:
        drop-shadow(0 0 20px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 52%, transparent))
        drop-shadow(0 0 40px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 28%, transparent))
        drop-shadow(0 2px 12px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 35%, transparent));
}

html[data-theme-preset] .xl-hero .hero-ai-text::before,
html[data-theme-preset] .xl-hero .hero-dust-particle {
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent);
}

html[data-theme-preset] .hero-glass-edge {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent), color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent) 32%, transparent 48%),
        linear-gradient(315deg, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 24%, transparent), transparent 30%),
        radial-gradient(circle at 98% 5%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 72%, transparent) 0 0.45%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 55%, transparent) 0.7%, transparent 3%);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 26%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent),
        0 0 36px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
}

html[data-theme-preset] .hero-star-current {
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent) 24%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 82%, transparent) 50%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 24%, transparent) 66%, transparent 100%);
    filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 68%, transparent))
        drop-shadow(0 0 22px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 34%, transparent));
}

/* HOME_FIXED_STATUS_BADGE_COLORS */
html[data-theme-preset] .xl-tool-free-badge {
    color: #42ff9b;
    border-color: rgba(79, 255, 157, 0.58);
    background: rgba(5, 28, 22, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(208, 255, 230, 0.24),
        0 0 18px rgba(52, 255, 143, 0.28);
}

html[data-theme-preset] .xl-update-topline span,
html[data-theme-preset] .xl-tool-new-badge,
html[data-theme-preset] .xl-badge-latest,
html[data-theme-preset] .xl-news-badge-latest {
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.68);
    background: rgba(39, 26, 6, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.26),
        0 0 18px rgba(255, 190, 70, 0.26);
}
html[data-theme-preset] .xl-side-latest-badge {
    color: #42ff9b;
    border-color: rgba(96, 230, 150, 0.7);
    background: rgba(5, 28, 22, 0.9);
    box-shadow:
        0 0 12px rgba(52, 255, 143, 0.28),
        inset 0 1px 0 rgba(208, 255, 230, 0.22);
}
html[data-theme-preset] .xl-side-latest-badge::after {
    border-color: rgba(96, 230, 150, 0.28);
    background: radial-gradient(circle, rgba(66, 255, 155, 0.22) 0%, rgba(66, 255, 155, 0.08) 48%, transparent 70%);
}


html[data-theme-preset] .xl-tool-card:focus-visible,
html[data-theme-preset] .xl-side-card-link:focus-visible,
html[data-theme-preset] .xl-home-side .xl-notice-item:focus-visible,
html[data-theme-preset] .xl-home-side .xl-update-row:focus-visible {
    outline-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 68%, transparent);
}

html[data-theme-preset] .xl-tool-card:hover .xl-tool-icon {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 48%, transparent),
        inset 0 -8px 18px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 28%, transparent),
        0 14px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent),
        0 0 0 4px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
}

html[data-theme-preset] .xl-time-progress-track {
    background: rgba(255, 209, 102, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.12);
}

html[data-theme-preset] [data-progress-unit="day"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #ff8a72, #ff5d64);
    box-shadow: 0 0 12px rgba(255, 93, 100, 0.34);
}

html[data-theme-preset] [data-progress-unit="month"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #95e85b, #66d33a);
    box-shadow: 0 0 12px rgba(102, 211, 58, 0.34);
}

html[data-theme-preset] [data-progress-unit="year"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #54dfe0, #28c7bb);
    box-shadow: 0 0 12px rgba(84, 223, 224, 0.34);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] .xl-time-progress-track {
        background: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 28%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
    }
}

html[data-theme-preset] .xl-update-topline span::after {
    border-color: rgba(255, 209, 102, 0.34);
    background: radial-gradient(circle, rgba(255, 190, 70, 0.26) 0%, rgba(255, 209, 102, 0.1) 48%, transparent 70%);
}



html[data-theme-preset] body.home-page-shell .xl-static-star,
html[data-theme-preset] body.home-page-shell .xl-star {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 88%, transparent), color-mix(in srgb, var(--xl-theme-accent, #d4a843) 45%, transparent));
    box-shadow:
        0 0 6px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent),
        0 0 12px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 32%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-starfield {
    background:
        radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 20%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 50%, var(--xl-theme-bg, #0a0a0a) 100%);
}

html[data-theme-preset] body.home-page-shell .xl-aurora-wave,
html[data-theme-preset] body.home-page-shell .xl-aurora-color,
html[data-theme-preset] body.home-page-shell .xl-light-streak {
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent) 24%,
        color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 48%, transparent) 50%,
        color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 26%, transparent) 76%,
        transparent 100%
    );
}

html[data-theme-preset] body.home-page-shell .xl-cursor-aura {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent) 0%,
        color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 14%, transparent) 30%,
        color-mix(in srgb, var(--xl-theme-soft, #6b6040) 10%, transparent) 50%,
        transparent 70%
    );
}

html[data-theme-preset] body.home-page-shell .xl-cursor-aura::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 60%, transparent) 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent) 40%, transparent 70%);
}

html[data-theme-preset] body.home-page-shell .xl-energy-ripple {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 55%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-energy-ripple::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent) 0%, transparent 60%);
}

html[data-theme-preset] body.home-page-shell .xl-scroll-progress {
    background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843) 0%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 70%, var(--xl-theme-fg, #e0d9c8)) 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 45%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-back-to-top {
    color: var(--home-text);
    border-color: var(--home-line-strong);
    background: color-mix(in srgb, var(--xl-theme-popup, #15130f) 84%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-back-to-top:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 54%, transparent);
    background: var(--home-accent-surface-strong);
    box-shadow: 0 0 30px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 32%, transparent);
}

html[data-theme-preset] body.home-page-shell .langSwitch::before,
html[data-theme-preset] body.home-page-shell .langSwitch::after,
html[data-theme-preset] body.home-page-shell .theme-toggle:not(.theme-toggle--mobile)::before,
html[data-theme-preset] body.home-page-shell .theme-toggle:not(.theme-toggle--mobile)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

html[data-theme-preset] body.home-page-shell .theme-toggle:hover,
html[data-theme-preset] body.home-page-shell .theme-toggle:focus-within,
html[data-theme-preset] body.home-page-shell #siteLangSelect:focus,
html[data-theme-preset] body.home-page-shell .couponCodeBadge:hover,
html[data-theme-preset] body.home-page-shell .topIntegralBadge:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 66%, transparent) !important;
    color: var(--xl-theme-fg, #e0d9c8);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 14%, transparent),
        0 0 0 3px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 14px 30px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 58%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .loginArea .loginBtn {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 66%, transparent) !important;
    color: var(--home-on-accent) !important;
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8))) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 26%, transparent),
        0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent);
}

html[data-theme-preset] body.home-page-shell .menubtn i {
    background-color: var(--xl-theme-accent, #d4a843) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] body.home-page-shell .inav {
    background-color: var(--xl-theme-bg, #0a0a0a) !important;
    background-image: linear-gradient(180deg, var(--xl-theme-panel, #11100d), var(--xl-theme-bg, #0a0a0a)) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
    border-right: 1px solid var(--home-line);
    box-shadow: 24px 0 70px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 72%, transparent);
}

html[data-theme-preset] body.home-page-shell .mobile-nav-mask {
    background: var(--xl-theme-bg, #0a0a0a);
}

html[data-theme-preset] body.home-page-shell.mobile-nav-open {
    background: var(--xl-theme-bg, #0a0a0a) !important;
}

html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-home,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .home-mouse-glow,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-starfield,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-aurora-bg,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-light-streaks,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-particle-canvas {
    visibility: hidden !important;
}

html[data-theme-preset] body.home-page-shell .navlogo .navlogo-text,
html[data-theme-preset] body.home-page-shell .inavul li > a,
html[data-theme-preset] body.home-page-shell .inavul .nr a,
html[data-theme-preset] body.home-page-shell .inav-theme-title,
html[data-theme-preset] body.home-page-shell .inav-language-label {
    color: var(--home-muted) !important;
}

html[data-theme-preset] body.home-page-shell .navlogo .navlogo-text {
    -webkit-text-fill-color: var(--home-muted) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow:
        0 2px 12px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 2px color-mix(in srgb, var(--home-text) 36%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .inavul li {
    border-bottom-color: var(--home-line);
}

html[data-theme-preset] body.home-page-shell .act_inav,
html[data-theme-preset] body.home-page-shell .inavul li > a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
    border-color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] body.home-page-shell .inav-language-select,
html[data-theme-preset] body.home-page-shell .theme-toggle--mobile {
    color: var(--home-text);
    border-color: var(--home-line-strong);
    background: var(--xl-theme-popup, #15130f) !important;
}

html[data-theme-preset] body.home-page-shell #siteLangSelect option,
html[data-theme-preset] body.home-page-shell .theme-toggle-select option,
html[data-theme-preset] body.home-page-shell .inav-language-select option {
    color: var(--home-text) !important;
    background: var(--xl-theme-popup, #15130f) !important;
}

html[data-theme-preset] body.home-page-shell .theme-toggle--customized {
    overflow: visible;
    z-index: 214748320;
}

html[data-theme-preset] body.home-page-shell .theme-toggle--customized .theme-toggle-select {
    pointer-events: none;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-trigger {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 214748321;
    display: none;
    width: min(260px, calc(100vw - 24px));
    max-height: min(460px, calc(100vh - 120px));
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, var(--home-line));
    border-radius: 12px;
    background: var(--xl-theme-popup, #15130f) !important;
    background-image: linear-gradient(180deg, var(--xl-theme-popup, #15130f), var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 20px 48px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 76%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent);
    color: var(--home-text);
    overflow: auto;
    box-sizing: border-box;
}

html[data-theme-preset] body.home-page-shell .theme-toggle--custom-open .theme-toggle-custom-menu {
    display: grid;
    gap: 4px;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-group {
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--home-line) 88%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--xl-theme-panel, #11100d) 90%, var(--xl-theme-bg, #0a0a0a)) !important;
    color: color-mix(in srgb, var(--home-muted) 76%, transparent) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 8%, transparent);
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--home-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:hover,
html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:focus-visible,
html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option.active {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, var(--xl-theme-panel, #11100d)) !important;
    color: var(--home-text);
    outline: 0;
}

html[data-theme-preset] body.home-page-shell .login-msg-btn {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent) !important;
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8))) !important;
    color: var(--xl-theme-on-accent, var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .login-msg-btn:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 72%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 92%, var(--xl-theme-fg, #e0d9c8)), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 82%, var(--xl-theme-fg, #e0d9c8))) !important;
    box-shadow:
        0 16px 34px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent),
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 28%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .login-msg-btn::after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 42%, transparent) 0%, transparent 70%) !important;
}

html[data-theme="light"][data-theme-preset] {
    --home-bg: var(--xl-theme-bg, #f8f7f2);
    --home-bg-soft: var(--xl-theme-panel, #ffffff);
    --home-text: var(--xl-theme-fg, #111111);
    --home-muted: var(--xl-theme-muted, #242018);
    --home-faint: color-mix(in srgb, var(--xl-theme-muted, #242018) 58%, var(--xl-theme-bg, #f8f7f2));
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] {
        --home-line: rgba(126, 106, 62, 0.72);
        --home-line-strong: rgba(212, 168, 67, 0.56);
        --home-faint: var(--home-muted);
        --home-on-accent: var(--xl-theme-on-accent, #0a0a0a);
        --home-accent-surface: rgba(63, 48, 18, 0.92);
        --home-accent-surface-strong: rgba(88, 66, 24, 0.96);
        --home-accent-glow: rgba(212, 168, 67, 0.48);
        --home-accent-glow-soft: rgba(212, 168, 67, 0.22);
        --home-hero-btn-fg: var(--xl-theme-on-accent, #0a0a0a);
        --home-hero-btn-start: var(--xl-theme-accent, #d4a843);
        --home-hero-btn-end: var(--xl-theme-accent-2, #d4a843);
        --home-hero-btn-border: rgba(233, 204, 132, 0.84);
    }

    html[data-theme-preset] .xl-hero-btn,
    html[data-theme-preset] .xl-hero-btn--photo {
        color: var(--home-hero-btn-fg);
        border-color: var(--home-hero-btn-border);
        background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #d4a843));
        box-shadow:
            0 14px 30px rgba(212, 168, 67, 0.28),
            0 0 0 1px rgba(0, 0, 0, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    html[data-theme-preset] .xl-hero-btn:hover {
        color: var(--home-hero-btn-fg);
        border-color: rgba(240, 220, 168, 0.82);
        background: linear-gradient(135deg, #e2bb5a, #d4a843);
        box-shadow:
            0 24px 50px rgba(212, 168, 67, 0.28),
            0 0 50px rgba(212, 168, 67, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.24),
            inset 0 -1px 0 rgba(10, 10, 10, 0.18);
    }

    html[data-theme-preset] .xl-tool-card,
    html[data-theme-preset] .xl-side-card {
        border-color: var(--home-line-strong);
        background: linear-gradient(180deg, var(--xl-theme-panel, #11100d), var(--xl-theme-bg, #0a0a0a)) !important;
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.10),
            0 14px 32px rgba(10, 10, 10, 0.64);
    }

    html[data-theme-preset] .xl-tool-info,
    html[data-theme-preset] .xl-notice-list,
    html[data-theme-preset] .xl-update-feature,
    html[data-theme-preset] .xl-time-section,
    html[data-theme-preset] .xl-update-row {
        border-color: var(--home-line);
        background: linear-gradient(180deg, var(--xl-theme-panel, #11100d), var(--xl-theme-bg, #0a0a0a)) !important;
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.08),
            0 12px 30px rgba(10, 10, 10, 0.46);
    }

    html[data-theme-preset] .xl-tool-copy p,
    html[data-theme-preset] .xl-notice-item p,
    html[data-theme-preset] .xl-update-feature ul,
    html[data-theme-preset] .xl-update-row {
        color: rgba(224, 217, 200, 0.84);
    }

    html[data-theme-preset] .xl-tool-icon,
    html[data-theme-preset] .xl-side-head svg {
        color: var(--xl-theme-on-accent, #0a0a0a);
        border-color: rgba(212, 168, 67, 0.56);
        background: linear-gradient(145deg, #e6bf5c, var(--xl-theme-accent, #d4a843));
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.36),
            0 14px 28px rgba(212, 168, 67, 0.30);
    }

    html[data-theme-preset] .xl-tool-card:hover .xl-tool-icon {
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.42),
            inset 0 -8px 18px rgba(10, 10, 10, 0.24),
            0 14px 28px rgba(212, 168, 67, 0.30),
            0 0 0 4px rgba(212, 168, 67, 0.18);
    }

    html[data-theme-preset] .xl-tool-link,
    html[data-theme-preset] .xl-side-head a,
    html[data-theme-preset] .xl-update-feature > a,
    html[data-theme-preset] .xl-update-topline strong,
    html[data-theme-preset] .xl-update-row strong {
        color: rgba(224, 217, 200, 0.9);
        border-color: var(--home-line-strong);
        background: rgba(21, 19, 15, 0.88);
    }

    html[data-theme-preset] .xl-tool-link:hover,
    html[data-theme-preset] .xl-side-head a:hover,
    html[data-theme-preset] .xl-update-feature > a:hover {
        color: var(--home-text);
        background: var(--home-accent-surface);
    }

    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-menu {
        border-color: rgba(212, 168, 67, 0.38);
        box-shadow:
            0 20px 48px rgba(10, 10, 10, 0.76),
            inset 0 1px 0 rgba(224, 217, 200, 0.10);
    }

    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-group {
        border-color: rgba(126, 106, 62, 0.88);
        background: rgba(17, 16, 13, 0.96) !important;
        color: rgba(255, 239, 192, 0.76) !important;
        box-shadow: inset 0 1px 0 rgba(224, 217, 200, 0.08);
    }

    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:hover,
    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:focus-visible,
    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option.active {
        border-color: rgba(212, 168, 67, 0.58);
        background: rgba(63, 48, 18, 0.88) !important;
    }

    html[data-theme-preset] body.home-page-shell .login-msg-btn {
        border-color: rgba(212, 168, 67, 0.58) !important;
        background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #d4a843)) !important;
        color: var(--xl-theme-on-accent, #0a0a0a) !important;
        box-shadow:
            0 12px 28px rgba(212, 168, 67, 0.30),
            inset 0 1px 0 rgba(224, 217, 200, 0.24) !important;
    }

    html[data-theme-preset] body.home-page-shell .login-msg-btn:hover {
        border-color: rgba(212, 168, 67, 0.72) !important;
        background: linear-gradient(135deg, #e2bb5a, var(--xl-theme-accent, #d4a843)) !important;
        box-shadow:
            0 16px 34px rgba(212, 168, 67, 0.36),
            0 0 22px rgba(212, 168, 67, 0.22),
            inset 0 1px 0 rgba(224, 217, 200, 0.28) !important;
    }

    html[data-theme-preset] body.home-header-shell .loarea,
    html[data-theme-preset] body.home-header-shell .header {
        border-bottom-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow:
            0 14px 34px rgba(10, 10, 10, 0.70),
            inset 0 -1px 0 var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    }

    html[data-theme-preset] body.home-page-shell .loarea,
    html[data-theme-preset] body.home-page-shell .header {
        border-bottom-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow:
            0 14px 34px rgba(10, 10, 10, 0.70),
            inset 0 -1px 0 var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    }
}


/* inlined css/home/home-legacy-visible-fallback.css */
/* HOME_HERO_VISIBLE_LEGACY_FALLBACK_GUARD */
.xl-hero .hero-ai-text {
    font-size: 96px;
}

.xl-hero h1 {
    margin: 16px 0 8px;
    font-size: 30px;
}

.xl-hero p {
    margin: 20px 0 30px;
    font-size: 28px;
}

.xl-hero-btn {
    height: 42px;
    padding: 0 16px;
    font-size: 16px;
}

@supports (width: clamp(1px, 1vw, 2px)) {
    .xl-hero .hero-ai-text {
        font-size: clamp(64px, 8vw, 128px);
    }

    .xl-hero h1 {
        margin: clamp(13px, 1.12vw, 18px) 0 clamp(6px, 0.64vw, 11px);
        font-size: clamp(25px, 1.88vw, 38px);
    }

    .xl-hero p {
        margin: clamp(18px, 1.28vw, 22px) 0 clamp(27px, 2.08vw, 34px);
        font-size: clamp(25px, 1.78vw, 30px);
    }

    .xl-hero-btn {
        height: clamp(40px, 2.8vw, 45px);
        padding: 0 clamp(14px, 1.08vw, 18px);
        font-size: clamp(15px, 1.02vw, 17px);
    }
}

/* source: css/home-cards.css */
/* inlined css/home-cards/home-cards-legacy-browser-fallback.css */
/* HOME_CARDS_LEGACY_BROWSER_FALLBACK_GUARD */
.xl-tool-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: -4px;
}

.xl-tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 24%;
    max-width: 24%;
    flex: 1 1 24%;
    min-width: 220px;
    height: auto;
    margin: 4px;
    overflow: hidden;
    color: #e8eef8;
    text-decoration: none;
    background: #0b1428;
}

.xl-tool-card.is-maintenance {
    cursor: not-allowed;
}

.xl-tool-image {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: 0;
    overflow: hidden;
    background: #071020;
}

.xl-tool-image-pair {
    display: flex;
    gap: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
}

.xl-tool-image-pair picture {
    display: block;
    flex: 1 1 50%;
    min-width: 0;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.xl-tool-image-pair[data-image-count="1"] picture {
    flex-basis: 100%;
}

.xl-tool-image[data-image-count="1"],
.xl-tool-image-pair[data-image-count="1"] {
    aspect-ratio: var(--xl-tool-single-image-ratio, 1 / 1);
}

.xl-tool-image-pair[data-image-count="1"] picture {
    aspect-ratio: var(--xl-tool-single-image-ratio, 1 / 1);
}

.xl-tool-image-pair img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
}

.xl-tool-info {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
    border-top: 1px solid rgba(116, 165, 255, 0.24);
    background: #091122;
    box-sizing: border-box;
}

.xl-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 8px;
}

.xl-tool-copy {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
}

.xl-tool-link {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 68px;
    height: 24px;
    margin-left: auto;
    padding: 0 11px;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
}

.xl-tool-link i {
    margin-left: 7px;
}

.xl-tool-badge-stack {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: calc(100% - 22px);
    white-space: nowrap;
    pointer-events: none;
}

.xl-tool-free-badge,
.xl-tool-new-badge,
.xl-tool-maintenance-badge {
    display: inline-block;
    min-width: 42px;
    height: 21px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 900;
    line-height: 21px;
    text-align: center;
    white-space: nowrap;
}

.xl-tool-free-badge + .xl-tool-new-badge {
    margin-left: 5px;
}

.xl-tool-maintenance-badge {
    color: #fff1b8;
    background: #4b3511;
}

.xl-tool-maintenance-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 14, 0.64);
}

.xl-tool-maintenance-mask span {
    display: inline-block;
    min-width: 72px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 211, 102, 0.68);
    border-radius: 6px;
    color: #ffe8a3;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    background: rgba(42, 30, 9, 0.88);
}

@supports (display: grid) {
    .xl-tool-grid {
        margin: 0;
    }

    .xl-tool-card {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        display: grid;
        grid-template-rows: auto auto;
    }

    .xl-tool-image-pair {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .xl-tool-info {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .xl-tool-icon,
    .xl-tool-copy,
    .xl-tool-link {
        margin-left: 0;
        margin-right: 0;
    }
}

@supports (gap: 1px) {
    .xl-tool-free-badge + .xl-tool-new-badge,
    .xl-tool-link i {
        margin-left: 0;
    }
}

@media screen and (max-width: 1180px) {
    .xl-tool-card {
        width: 48%;
        max-width: 48%;
        flex-basis: 48%;
    }
}

@media screen and (max-width: 640px) {
    .xl-tool-card {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        min-width: 0;
        height: auto;
    }
}


/* inlined css/home-cards/home-cards-01.css */

/* inlined css/home-cards/home-cards-01.part-01.css */
/* ============================================================
 * Hero Cards Motion Tokens（统一缓动 & 时长，提升过渡一致性）
 * ============================================================ */
:root {
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);      /* 主缓动：自然减速，适合 hover、过渡 */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* 弹簧：只用在按钮按压回弹 */
    --ease-in-soft:  cubic-bezier(0.4, 0, 1, 1);          /* 离开时的快出 */
    --dur-fast: 160ms;   /* 微交互（图标、徽章） */
    --dur-base: 280ms;   /* 标准（hover、阴影、颜色） */
    --dur-slow: 480ms;   /* 大幅度（卡片入场、扫光） */
}

.xl-tool-section {
    margin-top: 18px;
    margin-top: clamp(14px, 1.04vw, 21px);
}

.xl-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    gap: clamp(10px, 0.72vw, 13px);
    margin: 0 0 13px;
    margin: 0 0 clamp(11px, 0.8vw, 16px);
    padding-bottom: 10px;
    padding-bottom: clamp(10px, 0.72vw, 13px);
    border-bottom: 1px solid rgba(98, 136, 220, 0.14);
}

.xl-section-title span {
    width: 5px;
    height: 22px;
    height: clamp(19px, 1.4vw, 24px);
    border-radius: 999px;
    background: linear-gradient(180deg, #70b4ff, #5070ff, #8866ff);
    box-shadow:
        0 0 32px rgba(70, 140, 255, 0.95),
        0 0 10px rgba(100, 180, 255, 0.5),
        0 2px 8px rgba(60, 100, 200, 0.3);
}

.xl-section-title h2 {
    margin: 0;
    color: #e8f2ff;
    font-size: 18px;
    font-size: clamp(16px, 1.08vw, 21px);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 16px rgba(80, 130, 255, 0.2);
}

.xl-section-title--layered h2 {
    color: #fff4cf;
    font-size: 23px;
    font-size: clamp(21px, 1.44vw, 26px);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(212, 155, 36, 0.34);
}

.xl-tool-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: -4px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    gap: clamp(8px, 0.6vw, 13px);
}

.xl-tool-card {
    /* HOME_TOOL_CARD_HOVER_PAINT_BUDGET */
    /* HOME_FIRST_SCREEN_RASTER_BUDGET */
    position: relative;
    flex: 1 1 calc(25% - 8px);
    min-width: 0;
    margin: 4px;
    display: flex;
    flex-direction: column;
    display: grid;
    grid-template-rows: auto auto;
    align-self: start;
    overflow: hidden;
    isolation: isolate;
    height: auto;
    border: 1px solid rgba(100, 150, 255, 0.4);
    border-radius: 18px;
    color: var(--home-text);
    text-decoration: none;
    background:
        linear-gradient(180deg, rgba(20, 32, 62, 0.94) 0%, rgba(10, 16, 32, 0.98) 56%, rgba(4, 8, 18, 1) 100%),
        radial-gradient(ellipse 70% 50% at 15% 8%, rgba(80, 150, 255, 0.22), transparent 42%),
        radial-gradient(ellipse 60% 40% at 85% 90%, rgba(90, 80, 255, 0.12), transparent 35%),
        var(--home-panel);
    box-shadow:
        inset 0 1px 0 rgba(220, 238, 255, 0.12);
    transition:
        transform var(--dur-base) var(--ease-out-soft),
        border-color var(--dur-base) var(--ease-out-soft);
}

@supports (display: grid) {
    .xl-tool-grid {
        margin: 0;
    }

    .xl-tool-card {
        margin: 0;
    }
}

.xl-tool-card::before {
    content: none;
}

.xl-tool-card:hover::before {
    opacity: 0;
}

/* 光泽流动效果 */
.xl-tool-card::after {
    content: none;
}

.xl-tool-card:hover::after {
    left: auto;
}

.xl-tool-card:hover {
    color: var(--home-text);
    transform: none;
    border-color: rgba(113, 171, 255, 0.55);
}

@media (hover: hover) and (pointer: fine) {
    .xl-tool-card:hover {
        /* HOME_TOOL_CARD_HOVER_SHADOW_TRIGGER */
        box-shadow:
            inset 0 1px 0 rgba(220, 238, 255, 0.12),
            0 14px 32px rgba(0, 0, 0, 0.24);
    }
}

.xl-tool-card:active {
    transform: translateY(-2px) scale(0.995);
    transition-duration: var(--dur-fast);
}

.xl-tool-image {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: 0;
    overflow: hidden;
    background: #071020;
}

/* 图片区域动态光斑 - 精致循环 */
.xl-tool-image::before {
    content: none;
}

/* 图片区域内部粒子效果 */
.xl-tool-image::after {
    content: none;
}

.xl-tool-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform: none;
    filter: none;
    transition: transform 0.35s ease;
    animation: none;
}

.xl-tool-image-pair {
    position: relative;
    z-index: 3;
    display: flex;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.xl-tool-image-pair picture {
    display: block;
    flex: 1 1 50%;
    min-width: 0;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.xl-tool-image-pair[data-image-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: var(--xl-tool-single-image-ratio, 1 / 1);
}

.xl-tool-image[data-image-count="1"] {
    aspect-ratio: var(--xl-tool-single-image-ratio, 1 / 1);
}

.xl-tool-image-pair[data-image-count="1"] picture {
    flex-basis: 100%;
    aspect-ratio: var(--xl-tool-single-image-ratio, 1 / 1);
}

.xl-tool-image-left,
.xl-tool-image-right {
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    max-width: none;
    object-fit: contain;
}

.xl-home .xl-tool-image-pair picture > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
}

.xl-tool-image-left {
    object-position: center center;
}

.xl-tool-image-right {
    object-position: center center;
}

.xl-tool-card:hover .xl-tool-image img {
    transform: none;
}



/* inlined css/home-cards/home-cards-01.part-02.css */
.xl-tool-info {
    /* HOME_FIRST_SCREEN_RASTER_BUDGET */
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 12px;
    padding: clamp(11px, 0.72vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 0.68vw, 11px);
    overflow: hidden;
    border-top: 1px solid rgba(116, 165, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(15, 27, 48, 0.92) 0%, rgba(9, 17, 34, 0.98) 52%, rgba(5, 10, 21, 0.99) 100%),
        radial-gradient(circle at 18% 0%, rgba(66, 137, 255, 0.18), transparent 34%),
        linear-gradient(90deg, rgba(37, 112, 255, 0.2), rgba(92, 92, 255, 0.1) 38%, transparent 76%);
    box-shadow:
        inset 0 1px 0 rgba(213, 231, 255, 0.05);
}

.xl-tool-info::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 16%, rgba(112, 178, 255, 0.2), transparent 30%),
        linear-gradient(180deg, rgba(158, 204, 255, 0.06), transparent 42%);
}

.xl-tool-info .xl-tool-copy {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
}

.xl-tool-info .xl-tool-link {
    flex: 0 0 auto;
    margin-left: auto;
}

.xl-tool-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(210, 230, 255, 0.32);
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    background: linear-gradient(145deg, #90e0ff 0%, #4090ff 45%, #7878ff 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -8px 18px rgba(20, 35, 100, 0.35),
        0 0 0 1px rgba(90, 150, 255, 0.18);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (display: grid) {
    .xl-tool-info .xl-tool-icon,
    .xl-tool-info .xl-tool-copy {
        margin-right: 0;
    }

    .xl-tool-info .xl-tool-link {
        margin-left: 0;
    }
}

.xl-tool-card:hover .xl-tool-icon {
    transform: scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
    .xl-tool-card:hover .xl-tool-info {
        /* HOME_TOOL_CARD_HOVER_SHADOW_TRIGGER */
        box-shadow:
            inset 0 1px 0 rgba(213, 231, 255, 0.05),
            0 -10px 22px rgba(0, 0, 0, 0.18);
    }

    .xl-tool-card:hover .xl-tool-icon {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -8px 18px rgba(20, 35, 100, 0.35),
            0 16px 32px rgba(45, 120, 255, 0.45),
            0 0 0 4px rgba(90, 150, 255, 0.18);
    }
}



/* inlined css/home-cards/home-cards-02.css */
.xl-tool-copy {
    position: static;
    min-width: 0;
    min-height: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.xl-tool-copy h3 {
    position: relative;
    z-index: 1;
    margin: 1px 0 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.xl-tool-copy p {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: #91a4c7;
    font-size: 10px;
    line-height: 1.45;
    max-height: 2.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

.xl-tool-link {
    position: relative !important;
    justify-self: end;
    align-self: center;
    z-index: 2;
    box-sizing: border-box;
    display: inline-block;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding: 0 11px;
    border: 1px solid rgba(106, 154, 255, 0.5);
    border-radius: 6px;
    color: #b8d4ff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    background:
        linear-gradient(135deg, rgba(30, 50, 100, 0.7) 0%, rgba(15, 25, 50, 0.85) 100%);
    box-shadow:
        inset 0 1px 0 rgba(218, 235, 255, 0.1);
    transition:
        color 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.xl-tool-link i {
    margin-left: 7px;
    font-style: normal;
    transition: transform 0.25s ease;
}

@supports (gap: 1px) {
    .xl-tool-link i {
        margin-left: 0;
    }
}

.xl-tool-card:hover .xl-tool-link i {
    transform: translateX(5px) rotate(5deg);
}

.xl-tool-link:hover {
    color: #ffffff;
    border-color: rgba(132, 194, 255, 0.75);
    background: linear-gradient(135deg, rgba(50, 130, 240, 0.82) 0%, rgba(90, 90, 240, 0.82) 100%);
    box-shadow:
        0 0 28px rgba(60, 133, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.xl-tool-card.is-maintenance {
    cursor: not-allowed;
}

.xl-tool-card.is-maintenance:hover .xl-tool-info,
.xl-tool-card.is-maintenance:focus-within .xl-tool-info {
    transform: none;
}

.xl-tool-card.is-maintenance .xl-tool-link,
.xl-tool-link.is-maintenance {
    color: #ffe8a3;
    border-color: rgba(255, 211, 102, 0.62);
    background: linear-gradient(135deg, rgba(70, 49, 14, 0.86) 0%, rgba(35, 26, 11, 0.9) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.18);
}

.xl-tool-badge-stack {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 6;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    max-width: calc(100% - 22px);
    flex-wrap: nowrap;
    pointer-events: none;
}

.xl-tool-free-badge,
.xl-tool-new-badge,
.xl-tool-maintenance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 21px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.xl-tool-free-badge {
    border: 1px solid rgba(79, 255, 157, 0.58);
    color: #42ff9b;
    background: rgba(5, 28, 22, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(208, 255, 230, 0.24),
        0 0 18px rgba(52, 255, 143, 0.28);
}

.xl-tool-new-badge {
    border: 1px solid rgba(255, 209, 102, 0.68);
    color: #ffd166;
    background: rgba(39, 26, 6, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.26),
        0 0 18px rgba(255, 190, 70, 0.26);
}

.xl-tool-maintenance-badge {
    border: 1px solid rgba(255, 211, 102, 0.68);
    color: #ffe8a3;
    background: rgba(42, 30, 9, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.24),
        0 0 18px rgba(255, 190, 70, 0.2);
}

.xl-tool-maintenance-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 14, 0.64);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.xl-tool-maintenance-mask span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 30px;
    padding: 0 13px;
    border: 1px solid rgba(255, 211, 102, 0.68);
    border-radius: 6px;
    color: #ffe8a3;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    background: rgba(42, 30, 9, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.22),
        0 12px 28px rgba(0, 0, 0, 0.28);
}

/* ========== 入场动画 ========== */
@keyframes cardFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sideCardFadeUp {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 卡片入场动画 - 延迟交错（去掉常驻 cardBreathe，避免 hover 时基线漂移） */
.cardBreathe {
    animation: cardFadeUp 0.6s var(--ease-out-soft, ease-out) both;
}

.home-page-shell .xl-tool-card.cardBreathe {
    animation: none !important;
    opacity: 1 !important;
}

.home-page-shell .xl-tool-section--priority,
.home-page-shell .xl-tool-section--priority.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

.home-page-shell .xl-tool-section--priority .xl-tool-card.cardBreathe {
    animation: none !important;
    opacity: 1 !important;
}

.home-page-shell .xl-section-title,
.home-page-shell .xl-home-side,
.home-page-shell .xl-side-card:first-child,
.home-page-shell .xl-side-card:last-child {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.home-page-shell [data-animate-enter],
.home-page-shell [data-animate-scroll] {
    /* HOME_FIRST_SCREEN_CONTENT_VISIBLE_GUARD */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.xl-tool-card:nth-child(1) { animation-delay: 0.06s; }
.xl-tool-card:nth-child(2) { animation-delay: 0.12s; }
.xl-tool-card:nth-child(3) { animation-delay: 0.18s; }
.xl-tool-card:nth-child(4) { animation-delay: 0.24s; }
.xl-tool-card:nth-child(5) { animation-delay: 0.30s; }
.xl-tool-card:nth-child(6) { animation-delay: 0.36s; }

/* 图片浮动动画 */
.imageOrbFloat {
    animation: none;
}

/* 图标浮动动画 */
.iconFloat {
    animation: none;
}

/* 按钮脉冲动画 */
.buttonPulse {
    animation: none;
}

/* 指示器脉冲 */
.xl-tool-card::before {
    animation: none;
}

/* 侧边栏入场动画 */
.xl-home-side {
    animation: sideCardFadeUp 0.7s ease-out 0.4s both;
}

.xl-side-card:first-child {
    animation: sideCardFadeUp 0.6s ease-out 0.5s both;
}

.xl-side-card:last-child {
    animation: sideCardFadeUp 0.6s ease-out 0.65s both;
}


/* inlined css/home-cards/home-cards-06.css */

/* inlined css/home-cards/home-cards-06.part-01.css */
/* Homepage side cards and platform notice base styles. */
.xl-side-card {
    /* HOME_FIRST_SCREEN_RASTER_BUDGET */
    position: relative;
    overflow: hidden;
    padding: clamp(14px, 1.04vw, 21px);
    border: 1px solid rgba(110, 160, 255, 0.35);
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(20, 32, 62, 0.95), rgba(8, 14, 28, 0.95)),
        radial-gradient(ellipse 80% 50% at 18% 0%, rgba(80, 150, 255, 0.22), transparent 38%),
        radial-gradient(ellipse 60% 40% at 90% 100%, rgba(100, 90, 255, 0.1), transparent 30%);
    box-shadow:
        inset 0 1px 0 rgba(220, 238, 255, 0.12);
}

.xl-side-card-link {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.xl-side-card-link:hover {
    border-color: rgba(110, 162, 255, 0.4);
    transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
    .xl-side-card-link:hover {
        /* HOME_TOOL_CARD_HOVER_SHADOW_TRIGGER */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 20px 56px rgba(0, 0, 0, 0.28),
            0 0 48px rgba(47, 99, 255, 0.06);
    }
}

.xl-side-card-link:focus-visible {
    outline: 2px solid rgba(117, 170, 255, 0.92);
    outline-offset: 3px;
}

.xl-side-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 38%);
}

.xl-side-combined-card {
    display: grid;
    gap: clamp(14px, 1.08vw, 21px);
}

.xl-side-section {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.xl-time-section {
    display: grid;
    grid-template-columns: minmax(94px, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(14px, 1.12vw, 21px);
    padding: clamp(12px, 0.8vw, 16px) clamp(13px, 0.88vw, 18px);
    border: 1px solid rgba(118, 165, 255, 0.22);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(232, 240, 255, 0.08), rgba(9, 17, 32, 0.34)),
        radial-gradient(circle at 22% 12%, rgba(124, 178, 255, 0.18), transparent 34%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 34px rgba(0, 0, 0, 0.16);
}

.xl-time-date {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: #f4f8ff;
    text-align: center;
}

.xl-time-month,
.xl-time-date span {
    color: rgba(226, 236, 255, 0.82);
    font-size: clamp(10px, 0.69vw, 13px);
    font-weight: 800;
    line-height: 1.25;
}

.xl-time-date strong {
    color: #f8fbff;
    font-size: clamp(29px, 1.92vw, 38px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 8px 22px rgba(55, 126, 255, 0.2);
}

.xl-time-progress {
    display: grid;
    gap: clamp(8px, 0.62vw, 10px);
    min-width: 0;
}

.xl-time-progress-row {
    display: grid;
    gap: 5px;
}

.xl-time-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(231, 239, 255, 0.84);
    font-size: clamp(10px, 0.62vw, 11px);
    font-weight: 900;
    line-height: 1.2;
}

.xl-time-progress-head strong {
    color: #f7fbff;
    font-family: Consolas, "Courier New", monospace;
    font-size: clamp(10px, 0.62vw, 11px);
    letter-spacing: 0;
    white-space: nowrap;
}

.xl-time-progress-track {
    position: relative;
    overflow: hidden;
    height: 5px;
    border-radius: 999px;
    background: rgba(220, 230, 246, 0.18);
}

.xl-time-progress-track i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    transition: width 0.45s ease;
}

[data-progress-unit="day"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #ff7e6f, #ff5d64);
}

[data-progress-unit="month"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #8fe448, #68d42f);
}

[data-progress-unit="year"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #43d9d0, #28c7bb);
}

.xl-side-section-updates {
    padding-top: clamp(14px, 1vw, 19px);
    border-top: 1px solid rgba(99, 132, 198, 0.16);
}

.xl-side-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(11px, 0.8vw, 14px);
    margin-bottom: clamp(13px, 0.88vw, 18px);
}

.xl-side-head h2 {
    display: flex;
    align-items: center;
    gap: clamp(7px, 0.6vw, 10px);
    margin: 0;
    color: #f3f7ff;
    font-size: clamp(15px, 0.96vw, 19px);
    font-weight: 900;
    text-shadow: 0 2px 12px rgba(80, 130, 255, 0.2);
}

.xl-side-head svg {
    width: 26px;
    height: 26px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(90, 150, 255, 0.35);
    border-radius: 8px;
    color: #6aa8ff;
    background: linear-gradient(145deg, rgba(54, 120, 255, 0.15), rgba(100, 100, 255, 0.1));
    box-shadow:
        0 0 16px rgba(66, 138, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.xl-side-head a {
    color: var(--home-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.xl-side-head a:hover {
    color: #75aaff;
}

.xl-notice-list {
    position: relative;
    z-index: 1;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.xl-notice-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
    color: var(--home-muted);
    text-decoration: none;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.xl-home-side .xl-notice-item {
    position: relative;
    transform: none;
    transition: color 160ms ease, opacity 160ms ease;
}

.xl-home-side .xl-notice-item:hover,
.xl-home-side .xl-notice-item:focus-visible {
    /* HOME_NOTICE_HOVER_FOCUS_EFFECT */
    z-index: 2;
    transform: none !important;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    opacity: 1;
}

.xl-home-side .xl-notice-item:hover .xl-notice-body h3,
.xl-home-side .xl-notice-item:focus-visible .xl-notice-body h3 {
    color: #f2f7ff;
}

.xl-home-side .xl-notice-item:focus-visible {
    outline: 2px solid rgba(130, 180, 255, 0.68);
    outline-offset: 4px;
    border-radius: 8px;
}

.xl-notice-item:last-child {
    padding-bottom: 2px;
}

.xl-notice-timeline {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-height: 18px;
}

.xl-side-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    line-height: 18px;
}

.xl-notice-item time {
    display: block;
    color: #9eb6e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 18px;
    white-space: nowrap;
}

.xl-notice-rail {
    position: relative;
    display: block;
    width: 100%;
    height: 18px;
}

.xl-notice-rail::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(120, 170, 255, 0.78), rgba(120, 170, 255, 0.28), rgba(120, 170, 255, 0.08));
}

.xl-notice-rail::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: -24px;
    left: 4px;
    width: 1px;
    background: linear-gradient(180deg, rgba(110, 160, 255, 0.42), rgba(90, 130, 210, 0.12));
}

.xl-notice-item:last-child .xl-notice-rail::after {
    display: none;
}

.xl-notice-dot {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 8px;
    height: 8px;
    margin: 0;
    border: 1px solid rgba(190, 220, 255, 0.85);
    border-radius: 50%;
    background: #3f87ff;
    box-shadow: 0 0 12px rgba(63, 135, 255, 0.7);
    transform: translateY(-50%);
}

.xl-notice-body {
    min-width: 0;
    padding-left: 52px;
}

.xl-notice-body h3 {
    margin: 0 0 4px;
    color: #dde8ff;
    font-size: clamp(13px, 0.88vw, 16px);
    font-weight: 800;
    line-height: 1.4;
}

.xl-notice-body p {
    margin: 0;
    color: var(--home-muted);
    font-size: clamp(11px, 0.72vw, 13px);
    line-height: 1.55;
}
.xl-side-latest-badge {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 18px;
    padding: 0 6px;
    border: 1px solid rgba(96, 230, 150, 0.7);
    border-radius: 5px;
    color: #42ff9b;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    background: rgba(5, 28, 22, 0.9);
    box-shadow:
        0 0 12px rgba(52, 255, 143, 0.28),
        inset 0 1px 0 rgba(208, 255, 230, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 只隐藏「被点开的那一条」上的最新角标，禁止父容器 data-latest-seen 连坐隐藏全部 */
.xl-notice-item[data-latest-seen="1"] .xl-side-latest-badge,
.xl-update-row[data-latest-seen="1"] .xl-side-latest-badge,
a[data-latest-key][data-latest-seen="1"] > .xl-side-latest-badge,
a[data-latest-key][data-latest-seen="1"] .xl-side-item-meta > .xl-side-latest-badge {
    display: none;
}



/* inlined css/home-cards/home-cards-06.part-02.css */
.xl-side-latest-badge::after {
    content: "";
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    border: 1px solid rgba(96, 230, 150, 0.28);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.42;
    transform: scale(1);
    background: radial-gradient(circle, rgba(66, 255, 155, 0.22) 0%, rgba(66, 255, 155, 0.08) 48%, transparent 70%);
}


.xl-notice-body h3 {
    margin: 0 0 4px;
    color: #dde8ff;
    font-size: clamp(13px, 0.88vw, 16px);
    font-weight: 800;
    line-height: 1.4;
}

.xl-notice-body p {
    margin: 0;
    color: var(--home-muted);
    font-size: clamp(11px, 0.72vw, 13px);
    line-height: 1.55;
}

.xl-notice-item time {
    color: #9eb6e8;
    white-space: nowrap;
}




/* inlined css/home-cards/home-cards-05.css */
/* Homepage update log card and latest badge motion. */
.xl-update-feature {
    position: relative;
    z-index: 1;
    padding: clamp(13px, 0.92vw, 19px);
    border: 1px solid rgba(76, 137, 255, 0.34);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(24, 39, 72, 0.68), rgba(9, 16, 30, 0.68)),
        radial-gradient(circle at 18% 0%, rgba(63, 139, 255, 0.16), transparent 28%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.18);
}

.xl-update-topline,
.xl-update-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.xl-update-topline span {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 21px;
    padding: 0 9px;
    border-radius: 6px;
    color: #ffd166;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    overflow: visible;
    transform-origin: center;
    background: rgba(39, 26, 6, 0.86);
    box-shadow:
        0 0 18px rgba(255, 190, 70, 0.26),
        inset 0 1px 0 rgba(255, 238, 190, 0.26);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.xl-update-row[data-latest-seen="1"] .xl-update-topline span,
a[data-latest-key][data-latest-seen="1"] .xl-update-topline span {
    display: none;
}

.xl-update-topline span::after {
    content: "";
    position: absolute;
    inset: -5px -7px;
    z-index: -1;
    border: 1px solid rgba(255, 209, 102, 0.34);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.38;
    transform: scale(1);
    background: radial-gradient(circle, rgba(255, 190, 70, 0.26) 0%, rgba(255, 209, 102, 0.1) 48%, transparent 70%);
}

.xl-update-topline strong,
.xl-update-row strong {
    padding: 4px 10px;
    border: 1px solid rgba(84, 139, 255, 0.35);
    border-radius: 6px;
    color: #75aaff;
    font-weight: 800;
}

.xl-update-row-title {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.xl-update-row-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.xl-update-feature h3 {
    margin: clamp(11px, 0.76vw, 14px) 0;
    color: #e8f0ff;
    font-size: clamp(12px, 0.76vw, 14px);
    font-weight: 900;
}

.xl-update-feature ul {
    margin: 0 0 clamp(14px, 0.96vw, 18px) 14px;
    padding: 0;
    color: var(--home-muted);
    font-size: clamp(10px, 0.66vw, 12px);
    line-height: 1.9;
}

.xl-update-feature > a {
    display: inline-flex;
    align-items: center;
    height: clamp(26px, 1.68vw, 30px);
    padding: 0 clamp(10px, 0.72vw, 13px);
    border: 1px solid rgba(76, 137, 255, 0.42);
    border-radius: 6px;
    color: #8bb6ff;
    font-weight: 800;
    text-decoration: none;
    background: rgba(8, 15, 29, 0.45);
    transition: color 0.2s ease;
}

.xl-update-feature > a:hover {
    color: #75aaff;
}

.xl-update-row {
    position: relative;
    z-index: 1;
    margin-top: clamp(9px, 0.6vw, 11px);
    min-height: clamp(43px, 3.04vw, 54px);
    padding: 0 clamp(13px, 0.88vw, 18px);
    border: 1px solid rgba(94, 134, 220, 0.16);
    border-radius: 10px;
    color: var(--home-muted);
    text-decoration: none;
    background: linear-gradient(180deg, rgba(13, 22, 39, 0.68), rgba(8, 15, 28, 0.68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.xl-home-side .xl-update-row {
    transform-origin: center;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        color 180ms ease;
}

.xl-home-side .xl-update-row:hover,
.xl-home-side .xl-update-row:focus-visible {
    /* HOME_UPDATE_LOG_HOVER_FOCUS_EFFECT */
    transform: translateY(-2px) scale(1.015) !important;
    color: #dce8ff;
    border-color: rgba(100, 158, 255, 0.34);
    background: linear-gradient(180deg, rgba(17, 29, 54, 0.82), rgba(9, 17, 32, 0.8));
    box-shadow:
        0 14px 28px rgba(26, 70, 155, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.xl-home-side .xl-update-row:focus-visible {
    outline: 2px solid rgba(130, 180, 255, 0.68);
    outline-offset: 2px;
}

.xl-update-row:hover {
    color: #dce8ff;
    border-color: rgba(100, 158, 255, 0.34);
    background: linear-gradient(180deg, rgba(17, 29, 54, 0.82), rgba(9, 17, 32, 0.8));
}


/* inlined css/home-cards/home-cards-03.css */

/* inlined css/home-cards/home-cards-03.part-01.css */
/* 公告项悬浮微动效 */
.xl-notice-item {
    transition: transform 0.2s ease, background 0.2s ease;
}

.xl-notice-item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.03);
}

.xl-notice-dot {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.xl-notice-item:hover .xl-notice-dot {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(64, 144, 255, 0.6);
}

/* 更新日志行悬浮 */
.xl-update-row {
    transition: padding-left 0.25s ease, background 0.25s ease;
}

.xl-update-row:hover {
    padding-left: 8px;
}

/* 标题入场动画 */
.xl-section-title {
    animation: cardFadeUp 0.5s ease-out both;
}

/* ========== 交互增强 ========== */

/* 点击涟漪效果 */
.xl-tool-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.xl-tool-card .ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 180, 255, 0.6) 0%, rgba(80, 140, 255, 0.3) 50%, transparent 70%);
    transform: scale(0);
    animation: rippleEffect 0.7s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleEffect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* 按钮点击波纹 */
.xl-tool-link,
.membership-btn,
.xl-hero-btn,
.xl-side-card-link {
    position: relative;
    overflow: hidden;
}

.xl-tool-link .btn-ripple,
.membership-btn .btn-ripple,
.xl-hero-btn .btn-ripple,
.xl-side-card-link .btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: btnRipple 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes btnRipple {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* 卡片入场微交互 - 图片放大提示 */
.xl-tool-image {
    transition: none;
}

.xl-tool-card:hover .xl-tool-image {
    transform: none;
}

/* 工具名称打字机效果 */
.xl-tool-name {
    position: relative;
    display: inline-block;
}

.xl-tool-name::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3498ff, #8866ff);
    transition: width var(--dur-base) var(--ease-out-soft);
}

.xl-tool-card:hover .xl-tool-name::after {
    width: 100%;
}

/* 图标轻量缩放（去掉之前的 rotate(-5deg)，避免方向感冲突） */
.xl-tool-icon {
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease-out-soft);
}

.xl-tool-card:hover .xl-tool-icon {
    transform: scale(1.06);
}

/* 信息区域滑入效果 */
.xl-tool-info {
    transform: translateY(0);
    transition: transform var(--dur-base) var(--ease-out-soft);
}

.xl-tool-card:hover .xl-tool-info {
    transform: translateY(-2px);
}

/* 侧边栏卡片点击反馈 */
.xl-side-card-link {
    transition: transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}

.xl-side-card-link:active {
    transform: scale(0.985);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

/* 会员卡片点击效果 */
.membership-card {
    cursor: pointer;
    user-select: none;
}

.membership-card:active {
    transform: scale(0.985) !important;
    transition: transform var(--dur-fast) var(--ease-out-soft);
}

/* 悬停时的光芒扫过 */
.xl-tool-card .shine-sweep {
    display: none;
}

.xl-tool-card:hover .shine-sweep {
    animation: none;
}

@keyframes shineSweep {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* 数字徽章过渡 */
.xl-tool-card::before {
    transition: none;
}

/* ========== 高级交互增强 ========== */

/* 卡片3D倾斜效果 */
.xl-tool-card {
    perspective: 1000px;
}

.xl-tool-card-inner {
    transition: transform var(--dur-base) var(--ease-out-soft);
}

.xl-tool-card:hover .xl-tool-card-inner {
    box-shadow: none;
}

/* 鼠标跟随光效 */
.cursor-glow {
    position: fixed;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(52, 152, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:hover .cursor-glow {
    opacity: 1;
}

/* 加载骨架屏动画 */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.02) 75%
    );
    background-size: 200% 100%;
    background-position: 50% 0;
}

/* 按钮按下状态 */
.xl-tool-link:active,
.membership-btn:active,
.xl-hero-btn:active,
.xl-side-card-link:active {
    transform: scale(0.97);
    transition: transform var(--dur-fast) var(--ease-out-soft);
}

/* 卡片聚焦高亮 */
.xl-tool-card:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.5), 0 0 30px rgba(52, 152, 255, 0.3);
}

.xl-tool-card:focus-within {
    box-shadow:
        0 0 0 3px rgba(52, 152, 255, 0.5),
        0 0 30px rgba(52, 152, 255, 0.3);
}

/* 标签呼吸动画 */
.xl-tool-tag {
    position: relative;
    overflow: hidden;
}

.xl-tool-tag::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width var(--dur-slow) var(--ease-out-soft), height var(--dur-slow) var(--ease-out-soft);
}

.xl-tool-card:hover .xl-tool-tag::before {
    width: 140%;
    height: 140%;
}

/* 箭头动态指向 */
.xl-tool-link .iconfont {
    transition: transform var(--dur-base) var(--ease-out-soft);
}

.xl-tool-card:hover .xl-tool-link .iconfont {
    transform: translateX(3px);
}

/* 会员卡片浮动效果（去掉常驻动画，避免与 hover/active 基线冲突；只保留 hover 抬升） */
.membership-card {
    transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft);
}

.membership-card:hover {
    transform: translateY(-3px);
}

/* 输入框聚焦效果 */
.xl-search-input {
    transition: border-color var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft);
}



/* inlined css/home-cards/home-cards-03.part-02.css */
.xl-search-input:focus {
    border-color: rgba(52, 152, 255, 0.6);
    box-shadow:
        0 0 0 3px rgba(52, 152, 255, 0.2),
        0 0 20px rgba(52, 152, 255, 0.1);
}

/* 快捷键提示动画（频率放慢，避免抢眼） */
.shortcut-hint {
    opacity: 0.82;
}

/* 卡片展开指示器 */
.xl-tool-card .expand-indicator {
    transition: transform var(--dur-base) var(--ease-out-soft);
}

.xl-tool-card:hover .expand-indicator {
    transform: rotate(180deg);
}

/* 进度条动画 */
.xl-progress-bar {
    position: relative;
    overflow: hidden;
}

.xl-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
}

/* 列表项交错入场（统一 token，幅度收敛 + 节奏分批） */
.xl-list-item {
    opacity: 0;
    transform: translateX(-10px);
    animation: listItemSlide var(--dur-slow) var(--ease-out-soft) forwards;
}

.xl-list-item:nth-child(1)  { animation-delay: 40ms; }
.xl-list-item:nth-child(2)  { animation-delay: 90ms; }
.xl-list-item:nth-child(3)  { animation-delay: 140ms; }
.xl-list-item:nth-child(4)  { animation-delay: 190ms; }
.xl-list-item:nth-child(5)  { animation-delay: 240ms; }
.xl-list-item:nth-child(6)  { animation-delay: 290ms; }
.xl-list-item:nth-child(n+7){ animation-delay: 340ms; }

@keyframes listItemSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* inlined css/home-cards/home-cards-04.css */
/* Homepage update-log timeline: static list, no marquee/scroll, no card clipping. */
.xl-home-side .xl-notice-list {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.xl-home-side .xl-notice-scroll {
    display: contents;
    animation: none;
}

.xl-home-side .xl-notice-item {
    align-items: stretch;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.xl-home-side .xl-notice-timeline {
    align-items: center;
}

.xl-home-side .xl-notice-body h3,
.xl-home-side .xl-notice-body p {
    display: block;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

.xl-home-side .xl-notice-body p {
    max-width: 100%;
}

/* inlined css/home-cards/home-cards-legacy-visible-fallback.css */
/* HOME_CARDS_VISIBLE_LEGACY_FALLBACK_GUARD */
.xl-update-feature {
    padding: 16px;
}

.xl-update-feature h3 {
    margin: 12px 0;
    font-size: 13px;
}

.xl-update-feature ul {
    margin: 0 0 16px 14px;
    font-size: 11px;
}

.xl-update-feature > a {
    height: 28px;
    padding: 0 12px;
}

.xl-update-row {
    margin-top: 10px;
    min-height: 48px;
    padding: 0 16px;
}

.xl-side-card {
    padding: 18px;
}

.xl-side-combined-card {
    gap: 18px;
}

.xl-time-section {
    gap: 18px;
    padding: 14px 16px;
}

.xl-time-month,
.xl-time-date span,
.xl-time-progress-head,
.xl-time-progress-head strong {
    font-size: 11px;
}

.xl-time-date strong {
    font-size: 34px;
}

.xl-time-progress {
    gap: 9px;
}

.xl-side-section-updates {
    padding-top: 16px;
}

.xl-side-head {
    gap: 12px;
    margin-bottom: 16px;
}

.xl-side-head h2 {
    gap: 8px;
    font-size: 17px;
}

.xl-notice-list {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.xl-notice-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
    border: 0;
    background: transparent;
}

.xl-notice-timeline {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-height: 18px;
}

.xl-side-item-meta {
    min-width: 0;
    align-items: flex-end;
}

.xl-notice-body {
    padding-left: 52px;
}

.xl-notice-item h3,
.xl-notice-body h3 {
    font-size: 15px;
}

.xl-notice-item p,
.xl-notice-body p {
    font-size: 12px;
}

@supports (width: clamp(1px, 1vw, 2px)) {
    .xl-update-feature {
        padding: clamp(13px, 0.92vw, 19px);
    }

    .xl-update-feature h3 {
        margin: clamp(11px, 0.76vw, 14px) 0;
        font-size: clamp(12px, 0.76vw, 14px);
    }

    .xl-update-feature ul {
        margin: 0 0 clamp(14px, 0.96vw, 18px) 14px;
        font-size: clamp(10px, 0.66vw, 12px);
    }

    .xl-update-feature > a {
        height: clamp(26px, 1.68vw, 30px);
        padding: 0 clamp(10px, 0.72vw, 13px);
    }

    .xl-update-row {
        margin-top: clamp(9px, 0.6vw, 11px);
        min-height: clamp(43px, 3.04vw, 54px);
        padding: 0 clamp(13px, 0.88vw, 18px);
    }

    .xl-side-card {
        padding: clamp(14px, 1.04vw, 21px);
    }

    .xl-side-combined-card {
        gap: clamp(14px, 1.08vw, 21px);
    }

    .xl-time-section {
        gap: clamp(14px, 1.12vw, 21px);
        padding: clamp(12px, 0.8vw, 16px) clamp(13px, 0.88vw, 18px);
    }

    .xl-time-month,
    .xl-time-date span {
        font-size: clamp(10px, 0.69vw, 13px);
    }

    .xl-time-date strong {
        font-size: clamp(29px, 1.92vw, 38px);
    }

    .xl-time-progress {
        gap: clamp(8px, 0.62vw, 10px);
    }

    .xl-time-progress-head,
    .xl-time-progress-head strong {
        font-size: clamp(10px, 0.62vw, 11px);
    }

    .xl-side-section-updates {
        padding-top: clamp(14px, 1vw, 19px);
    }

    .xl-side-head {
        gap: clamp(11px, 0.8vw, 14px);
        margin-bottom: clamp(13px, 0.88vw, 18px);
    }

    .xl-side-head h2 {
        gap: clamp(7px, 0.6vw, 10px);
        font-size: clamp(15px, 0.96vw, 19px);
    }

    .xl-notice-list {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.xl-notice-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
    border: 0;
    background: transparent;
}

.xl-notice-timeline {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-height: 18px;
}

.xl-side-item-meta {
    min-width: 0;
    align-items: flex-end;
}

.xl-notice-body {
    padding-left: 52px;
}

    .xl-notice-item h3, .xl-notice-body h3 {
        font-size: clamp(13px, 0.88vw, 16px);
    }

    .xl-notice-item p, .xl-notice-body p {
        font-size: clamp(11px, 0.72vw, 13px);
    }
}

/* source: css/home-responsive.css */
/* inlined css/home-responsive.part-01.css */
html[data-theme="light"] .xl-home {
    background:
        radial-gradient(ellipse 76% 46% at 49% 0%, rgba(86, 149, 239, 0.18), transparent 62%),
        radial-gradient(ellipse 58% 38% at 12% 16%, rgba(92, 185, 255, 0.13), transparent 58%),
        radial-gradient(ellipse 48% 36% at 88% 14%, rgba(141, 130, 255, 0.11), transparent 56%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 44%, #f6faff 100%);
}

html[data-theme="light"] .xl-hero,
html[data-theme="light"] .xl-tool-card,
html[data-theme="light"] .xl-side-card {
    color: #142033;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(72, 119, 190, 0.2);
    box-shadow:
        0 18px 42px rgba(42, 82, 138, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .xl-section-title h2,
html[data-theme="light"] .xl-side-head h2,
html[data-theme="light"] .xl-notice-item h3,
html[data-theme="light"] .xl-update-feature h3 {
    color: #142033;
}

html[data-theme="light"] .xl-tool-copy p,
html[data-theme="light"] .xl-notice-item p,
html[data-theme="light"] .xl-update-feature ul,
html[data-theme="light"] .xl-update-row {
    color: #65728a;
}

html[data-theme="light"] .xl-tool-info,
html[data-theme="light"] .xl-notice-list,
html[data-theme="light"] .xl-update-feature {
    color: #182842;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 255, 0.94));
    border-color: rgba(72, 119, 190, 0.18);
    box-shadow:
        0 14px 32px rgba(42, 82, 138, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .xl-tool-copy p,
html[data-theme="light"] .xl-notice-item p,
html[data-theme="light"] .xl-update-feature ul {
    color: #53677f;
}

html[data-theme="light"] .xl-tool-copy h3,
html[data-theme="light"] .xl-notice-item h3,
html[data-theme="light"] .xl-update-feature h3 {
    color: #13233a;
}

/* ========== 新增：小窗口溢出修复 ========== */
@media screen and (max-width: 1000px) {
    .xl-home {
        overflow-x: hidden;
    }

    .xl-category-rail {
        display: none;
    }

    .xl-home .wp {
        display: block;
        overflow-x: hidden;
        -webkit-overflow-scrolling: auto;
        padding-left: 0;
    }

    .xl-home-layout {
        min-width: 0;
        width: 100%;
    }
}

/* ========== 新增：竖屏模式适配 ========== */
@media screen and (max-width: 900px) and (orientation: portrait) {
    .xl-hero {
        min-height: clamp(200px, 45vh, 320px);
        padding: clamp(20px, 4vw, 32px);
    }

    .xl-hero-copy {
        width: 100%;
    }

    .xl-hero h1 {
        font-size: clamp(24px, 6vw, 36px);
    }

    .xl-hero p {
        font-size: clamp(20px, 5vw, 28px);
    }

    .xl-hero-art {
        display: block;
        right: -34%;
        top: 54%;
        width: min(96%, 520px);
        height: 100%;
        opacity: 0.42;
        z-index: 4;
    }

    .xl-hero .hero-orbits {
        right: 0;
        width: 100%;
        height: 78%;
        opacity: 0.38;
    }

    .xl-hero .hero-core {
        right: clamp(2%, 5vw, 7%);
        top: 54%;
        width: clamp(220px, 62vw, 310px);
        height: clamp(220px, 62vw, 310px);
    }

    .xl-tool-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ========== 新增：极窄竖屏 (< 480px) ========== */
@media screen and (max-width: 480px) and (orientation: portrait) {
    :root {
        --home-shell-gutter: 12px;
    }

    .xl-home {
        padding-top: 12px;
    }

    .xl-home .wp {
        width: var(--home-shell-width);
        padding: 0;
    }

    .xl-hero {
        padding: 16px;
        min-height: 250px;
    }

    .xl-hero h1 {
        font-size: clamp(22px, 7vw, 32px);
    }

    .xl-hero p {
        font-size: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .xl-tool-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .xl-tool-card {
        height: auto;
        min-height: 180px;
    }

    .xl-tool-info {
        padding: 12px;
    }

    .xl-tool-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .xl-side-card {
        padding: 16px;
    }

    .xl-side-head h2 {
        font-size: 16px;
    }

    .xl-notice-item {
        grid-template-columns: 6px 1fr auto;
    }

    .xl-notice-item h3 {
        font-size: 14px;
    }

    .xl-update-feature {
        padding: 14px;
    }
}

/* ========== 新增：横屏手机 (812px height typical) ========== */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .xl-hero {
        min-height: clamp(180px, 40vh, 240px);
        padding: clamp(16px, 2vw, 24px);
    }

    .xl-hero-art {
        opacity: 0.3;
    }

    .xl-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ========== 新增：平板竖屏 (768px - 1024px) ========== */
@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .xl-hero {
        min-height: clamp(260px, 35vh, 340px);
    }

    .xl-hero h1 {
        font-size: clamp(28px, 5vw, 40px);
    }

    .xl-tool-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .xl-home-side {
        flex-direction: column;
    }
}

/* ========== 新增：平板横屏 ========== */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .xl-hero {
        min-height: clamp(250px, 28vh, 340px);
    }

    .xl-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========== 新增：超小窗口 (< 700px) ========== */
@media screen and (max-width: 700px) {
    :root {
        --home-shell-gutter: 12px;
    }

    .xl-home .wp {
        width: var(--home-shell-width);
        padding: 0;
    }

    .xl-hero {
        padding: 18px 14px;
    }

    .xl-hero-copy {
        width: 100%;
    }

    .xl-tool-grid {
        grid-template-columns: 1fr;
    }

    .xl-tool-card {
        height: auto;
        min-height: 200px;
    }

    .xl-home-side {
        flex-direction: column;
    }

    .xl-side-card {
        flex: 1 1 auto;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --home-shell-max: 1840px;
        --home-side-width: clamp(440px, 25vw, 560px);
    }
}

@media screen and (min-width: 2560px) {
    :root {
        --home-shell-gutter: clamp(60px, 5.5vw, 160px);
        --home-shell-max: 2040px;
        --home-side-width: clamp(520px, 24vw, 620px);
    }
}



/* inlined css/home-responsive.part-02.css */
@media screen and (max-width: 1420px) {
    :root {
        --home-shell-gutter: clamp(13px, 1.6vw, 26px);
        --home-side-width: clamp(240px, 22.4vw, 312px);
        --home-gap: 13px;
    }

    .xl-home {
        --home-shell-gutter: clamp(13px, 1.6vw, 26px);
        --home-side-width: clamp(240px, 22.4vw, 312px);
        --home-gap: 13px;
    }

    .xl-hero-copy {
        width: min(660px, 65%);
    }

    .xl-hero-art {
        right: -2%;
        width: min(58%, 700px);
    }

    .xl-home-side {
        grid-template-rows: auto auto;
    }
}

@media screen and (max-width: 1180px) {
    .xl-home-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .xl-home-main {
        width: 100%;
    }

    .xl-home-side {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .xl-side-card {
        flex: 1 1 300px;
        min-width: 0;
    }

    .xl-hero-copy {
        width: min(700px, 70%);
    }

    .xl-hero {
        min-height: clamp(320px, 34vw, 430px);
        padding: 38px 42px;
    }

    .xl-hero-art {
        right: -7%;
        width: min(66%, 720px);
        opacity: 0.72;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --home-shell-gutter: 16px;
    }

    .xl-home {
        --home-shell-gutter: 16px;
    }

    .xl-home .wp {
        width: var(--home-shell-width);
        padding: 0;
    }

    .xl-home-layout {
        gap: 12px;
    }

    .xl-home-side {
        flex-direction: column;
    }

    .xl-side-card {
        flex: 1 1 auto;
    }

    .xl-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .xl-hero-copy {
        width: 100%;
    }
}

@media screen and (max-width: 980px) {
    :root {
        --home-shell-gutter: 16px;
    }

    .xl-home {
        --home-shell-gutter: 16px;
    }

    .xl-home .wp {
        width: var(--home-shell-width);
    }

    .xl-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl-hero-copy {
        width: 100%;
    }

    .xl-hero-art {
        right: -14%;
        width: 76%;
        opacity: 0.34;
    }
}

@media screen and (max-width: 720px) {
    .xl-home {
        padding-top: 12px;
        overflow-x: visible;
    }

    .xl-home .wp {
        width: var(--home-shell-width);
        max-width: 100%;
        overflow-x: visible;
    }

    .xl-home-side,
    .xl-tool-grid {
        grid-template-columns: 1fr;
    }

    .xl-home-side {
        flex-direction: column;
    }

    .xl-home-layout {
        min-width: 0 !important;
        width: 100%;
    }

    .xl-home *,
    .xl-home *::before,
    .xl-home *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    .xl-home-main,
    .xl-home-side,
    .xl-tool-grid,
    .xl-tool-card,
    .xl-tool-info,
    .xl-tool-copy,
    .xl-section-title {
        min-width: 0 !important;
    }

    .xl-side-card {
        flex: 1 1 auto;
        min-width: 0;
    }

    .xl-hero {
        min-height: clamp(196px, 32vh, 224px);
        padding: 14px 12px;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 100%;
        max-width: 100%;
    }

    .xl-hero h1 {
        font-size: clamp(28px, 8vw, 38px);
        white-space: normal;
    }

    .xl-hero-art {
        display: block;
        left: 50%;
        right: auto;
        top: 56%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        opacity: 0.58;
        z-index: 4;
    }

    .xl-hero .hero-core {
        left: 50%;
        right: auto;
        top: 56%;
        width: clamp(210px, 68vw, 286px);
        height: clamp(210px, 68vw, 286px);
        transform: translate(-50%, -50%);
    }

    .xl-hero .hero-orbits {
        right: -8%;
        top: 60%;
        width: 108%;
        height: 82%;
    }

    .xl-hero p {
        margin: 10px 0 12px;
        padding-left: 12px;
        font-size: clamp(17px, 5vw, 21px);
        line-height: 1.28;
        max-width: 100%;
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow: visible;
    }

    .xl-hero-copy {
        width: 100%;
        max-width: 100%;
        flex: 0 1 auto;
    }

    .xl-hero-carousel {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .xl-hero-slide {
        padding-right: 0;
    }

    .xl-hero-backgrounds {
        border-radius: inherit;
    }

    .xl-hero-dots {
        justify-content: center;
        margin: 12px auto 0;
        padding: 0;
    }

    .xl-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .xl-hero-btn {
        width: 100%;
        min-width: 0;
        height: 44px;
        justify-content: center;
        padding: 0 10px;
        border-radius: 11px;
        font-size: 14px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .xl-tool-card {
        height: auto;
        min-height: 164px;
        grid-template-rows: minmax(96px, 1fr) auto;
        max-width: 100%;
    }

    .xl-tool-copy p {
        white-space: normal;
    }

    html:not(.home-hero-3d-enabled) .xl-hero #heroPlanet3D {
        display: none;
    }
}

/* Keep the real 3D earth field card-wide after all responsive right-side art overrides. */
.xl-hero .xl-hero-art {
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.xl-hero .hero-core {
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.xl-hero #heroPlanet3D {
    inset: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 414px) {
    .xl-tool-info {
        grid-template-columns: 36px minmax(0,1fr);
        grid-template-areas:
            "icon copy"
            "action action";
        align-items: center;
        gap: 6px 8px;
        padding: 8px 9px 9px;
    }

    .xl-tool-icon {
        grid-area: icon;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .xl-tool-copy {
        grid-area: copy;
    }

    .xl-tool-copy h3 {
        margin-bottom: 3px;
        font-size: 15px;
        line-height: 1.22;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .xl-tool-copy p {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.3;
        -webkit-line-clamp: 1;
    }

    .xl-tool-link {
        grid-area: action;
        justify-self: stretch;
        justify-content: center;
        min-height: 34px;
        height: 34px;
        margin-top: 2px;
        padding: 0 12px;
    }
}
/* HOME_HERO_IMAGE_ONLY_LAYOUT_GUARD */
@media screen and (max-width: 900px) {
    .xl-hero.is-image-only .xl-hero-copy {
        padding: 0 18px 16px;
    }

    .xl-hero.is-image-only.keep-primary-btn .xl-hero-actions,
    .xl-hero.is-image-only.keep-secondary-btn .xl-hero-actions {
        gap: 10px;
        max-width: 100%;
    }
}

@media screen and (max-width: 720px) {
    .xl-hero.is-image-only .xl-hero-copy {
        padding: 0 14px 14px;
    }

    .xl-hero.is-image-only.keep-primary-btn .xl-hero-actions,
    .xl-hero.is-image-only.keep-secondary-btn .xl-hero-actions {
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    .xl-hero.is-image-only .xl-hero-carousel {
        gap: 12px;
    }
}

/* inlined css/home-responsive-9x16.css */
/* HOME_9X16_LAYOUT_GUARD: scoped to near-9:16 portrait viewport windows only. */
@media screen and (orientation: portrait) and (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/15) {
    :root {
        --home-shell-gutter: clamp(6px, 1vw, 14px);
        --home-gap: clamp(6px, .8vw, 12px);
    }

    .xl-home {
        --home-shell-gutter: clamp(6px, 1vw, 14px);
        --home-gap: clamp(6px, .8vw, 12px);
        padding-top: clamp(8px, 1vw, 14px);
        overflow-x: hidden;
    }

    .xl-home .wp {
        width: calc(100% - clamp(12px, 3vw, 28px));
        max-width: calc(100% - clamp(12px, 3vw, 28px));
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        overflow-x: hidden;
    }

    .xl-category-rail {
        display: none;
    }

    :root {
        --home-header-height: clamp(68px, 7vw, 82px);
    }

    .loarea {
        height: var(--home-header-height);
    }

    .loarea .wp,
    body.home-header-shell .loarea .wp,
    body:has(.xl-home) .loarea .wp {
        width: calc(100% - clamp(12px, 3vw, 28px));
        max-width: calc(100% - clamp(12px, 3vw, 28px));
        padding-right: clamp(56px, 6vw, 68px) !important;
        box-sizing: border-box;
    }

    .logo,
    body.home-header-shell .logo,
    body:has(.xl-home) .logo {
        width: clamp(180px, 28vw, 248px);
        height: var(--home-header-height);
    }

    .logo .tp,
    body.home-header-shell .logo .tp,
    body:has(.xl-home) .logo .tp {
        height: clamp(48px, 6vw, 60px);
        max-width: clamp(52px, 7vw, 64px);
    }

    .logo .logo-text,
    body.home-header-shell .logo .logo-text,
    body:has(.xl-home) .logo .logo-text {
        max-width: clamp(104px, 16vw, 148px);
        padding-right: 2px;
        font-size: clamp(22px, 2.6vw, 30px);
        letter-spacing: .3px;
    }

    .nav,
    body.home-header-shell .nav,
    body:has(.xl-home) .nav {
        display: none !important;
    }

    .menubtn,
    body.home-header-shell .menubtn,
    body:has(.xl-home) .menubtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        top: calc((var(--home-header-height) - 44px) / 2);
        right: max(12px, env(safe-area-inset-right));
    }

    .loginArea,
    body.home-header-shell .loginArea,
    body:has(.xl-home) .loginArea {
        position: absolute;
        top: 50%;
        right: clamp(58px, 6vw, 72px);
        max-width: calc(100% - clamp(188px, 30vw, 260px) - clamp(76px, 8vw, 96px));
        min-width: 0;
        overflow: visible;
        justify-content: flex-end;
        gap: clamp(4px, .5vw, 8px);
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 214748250;
    }

    .loginArea .couponCodeBadge,
    .loginArea .langSwitch {
        display: none !important;
    }

    .loginArea .headerUserStack,
    .loginArea .avatarBtn,
    .loginArea .loginBtn,
    .loginArea > .theme-toggle:not(.theme-toggle--mobile) {
        pointer-events: auto;
    }

    .loginArea > .theme-toggle:not(.theme-toggle--mobile) {
        width: clamp(102px, 14vw, 124px);
        height: clamp(34px, 4vw, 38px);
    }

    .loginArea .theme-toggle-label {
        font-size: clamp(11px, 1.15vw, 13px);
    }

    .loginArea .theme-toggle-select {
        font-size: clamp(11px, 1.15vw, 13px);
    }

    .loginArea .loginBtn {
        min-width: 68px;
        height: clamp(34px, 4vw, 38px);
        padding: 0 clamp(10px, 1vw, 14px);
        font-size: clamp(12px, 1.15vw, 14px);
        line-height: clamp(34px, 4vw, 38px);
    }

    .headerUserStack .loginInfoLay {
        right: -24px;
        max-width: calc(100vw - 24px);
    }

    .site-pet {
        display: none !important;
    }

    body.home-header-shell .loginArea .loginBtn {
        color: #f7fbff;
        background: rgba(18, 36, 68, .92);
        border-color: rgba(139, 184, 255, .7);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
    }

    body:has(.xl-home) .loginArea .loginBtn {
        color: #f7fbff;
        background: rgba(18, 36, 68, .92);
        border-color: rgba(139, 184, 255, .7);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
    }

    .xl-home-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        width: 100%;
        min-width: 0 !important;
    }

    .xl-home-main,
    .xl-home-side,
    .xl-tool-section,
    .xl-tool-grid,
    .xl-tool-card,
    .xl-tool-info,
    .xl-tool-copy {
        min-width: 0 !important;
    }

    .xl-home-main {
        display: contents;
        width: auto;
    }

    .xl-home-side {
        order: 2;
        position: static;
        display: block;
        flex-direction: initial;
        width: 100%;
        max-width: 100%;
        gap: 0;
        overflow: visible;
    }

    .xl-side-card,
    .xl-side-combined-card {
        display: grid;
        grid-template-columns: clamp(40px, 5vw, 56px) minmax(0, 1.15fr) minmax(0, .85fr);
        gap: clamp(6px, .8vw, 10px);
        align-items: stretch;
        width: 100%;
        min-width: 0;
        padding: clamp(7px, 1vw, 12px);
        border-radius: clamp(10px, 1.1vw, 14px);
    }

    .xl-side-section {
        display: block;
        padding: 0;
        min-width: 0;
    }

    .xl-side-section + .xl-side-section {
        margin-top: 0;
        padding-top: 0;
        padding-left: clamp(6px, .8vw, 10px);
        border-left: 1px solid rgba(255, 255, 255, .12);
    }

    .xl-time-date {
        padding: 0;
        text-align: center;
    }

    .xl-time-month,
    .xl-time-date span {
        display: none;
    }

    .xl-time-date strong {
        margin: 0;
        font-size: clamp(19px, 2.2vw, 28px);
        line-height: 1;
    }

    .xl-time-progress,
    .xl-notice-item p,
    .xl-side-item-meta,
    .xl-update-feature ul,
    .xl-update-row,
    .xl-update-topline,
    .xl-update-cta {
        display: none;
    }

    .xl-side-head {
        justify-content: flex-start;
        gap: 3px;
        margin-bottom: clamp(4px, .6vw, 8px);
    }

    .xl-side-head h2 {
        justify-content: flex-start;
        gap: 3px;
        font-size: clamp(10px, 1.2vw, 14px);
        line-height: 1.2;
        white-space: nowrap;
    }

    .xl-side-head svg {
        width: clamp(11px, 1.2vw, 15px);
        height: clamp(11px, 1.2vw, 15px);
    }

    .xl-side-head a {
        display: none;
    }

    .xl-home-side .xl-notice-list {
        display: grid;
        gap: clamp(3px, .5vw, 6px);
    }

    .xl-home-side .xl-notice-item:not(:first-child) {
        display: none;
    }

    .xl-home-side .xl-notice-item {
        display: grid;
        grid-template-columns: 3px minmax(0, 1fr);
        gap: clamp(3px, .5vw, 6px);
        padding: 0;
    }

    .xl-home-side .xl-notice-item p {
        display: none !important;
    }

    .xl-home-side .xl-notice-item h3,
    .xl-update-feature h3 {
        margin: 0;
        font-size: clamp(10px, 1.15vw, 14px);
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .xl-update-feature {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .xl-home-side .xl-update-feature ul,
    .xl-home-side .xl-update-topline,
    .xl-home-side .xl-update-cta {
        display: none !important;
    }

    .xl-hero {
        order: 1;
        min-height: clamp(198px, 27vw, 280px);
        padding: clamp(12px, 1.6vw, 22px) clamp(8px, 1.2vw, 18px);
        border-radius: clamp(14px, 1.4vw, 22px);
    }

    .xl-hero-copy {
        position: relative;
        z-index: 5;
        flex: 0 1 auto;
        width: min(100%, clamp(172px, 56%, 236px));
        max-width: min(100%, clamp(172px, 56%, 236px));
    }

    .xl-hero-art {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        pointer-events: none;
    }

    .xl-hero .hero-core {
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        --hero-earth-size: clamp(146px, 42vw, 188px);
        --hero-earth-half-size: clamp(73px, 21vw, 94px);
        --hero-earth-center-x: calc(100% - clamp(10px, 3vw, 18px) - var(--hero-earth-half-size));
        --hero-earth-center-y: 54%;
    }

    .xl-hero #heroPlanet3D {
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    .xl-hero-badge {
        min-height: clamp(24px, 3vw, 30px);
        padding: 0 clamp(9px, 1.1vw, 12px);
        font-size: clamp(11px, 1.25vw, 14px);
    }

    .xl-hero p {
        margin: clamp(8px, 1vw, 14px) 0 clamp(10px, 1.2vw, 16px);
        padding-left: clamp(8px, 1vw, 14px);
        font-size: clamp(15px, 2.3vw, 24px);
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .xl-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, clamp(260px, 62vw, 420px));
        gap: clamp(5px, .8vw, 10px);
    }

    .xl-hero-btn {
        justify-content: center;
        height: clamp(34px, 4.5vw, 44px);
        min-height: clamp(34px, 4.5vw, 44px);
        padding: 0 clamp(6px, 1vw, 14px);
        border-radius: clamp(9px, 1vw, 12px);
        font-size: clamp(11px, 1.5vw, 15px);
    }

    .xl-tool-section {
        order: 3;
        margin-top: clamp(9px, 1.2vw, 18px);
        padding: clamp(7px, 1vw, 12px) 0 0;
        border-radius: 0;
    }

    .xl-section-title,
    .xl-section-title--layered {
        margin-bottom: clamp(6px, .8vw, 12px);
        padding: 0 0 clamp(5px, .8vw, 10px);
        gap: clamp(5px, .8vw, 10px);
    }

    .xl-section-title span,
    .xl-section-title--layered span {
        width: 4px;
        flex-basis: 4px;
        height: clamp(16px, 2vw, 22px);
    }

    .xl-section-title h2,
    .xl-section-title--layered h2 {
        font-size: clamp(14px, 2vw, 22px);
        line-height: 1.16;
    }

    .xl-tool-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(5px, .9vw, 12px);
    }

    .xl-tool-section.is-single-tool .xl-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl-tool-section.is-single-tool .xl-tool-card {
        width: 100%;
        max-width: none;
    }

    .xl-tool-card {
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 0;
        height: auto;
        margin: 0;
        border-radius: clamp(10px, 1vw, 14px);
        grid-template-rows: auto auto;
    }

    .xl-tool-image,
    .xl-tool-image-pair {
        aspect-ratio: 2 / 1;
    }

    .xl-tool-image[data-image-count="1"],
    .xl-tool-image-pair[data-image-count="1"],
    .xl-tool-image-pair[data-image-count="1"] picture {
        aspect-ratio: 4 / 3;
    }

    .xl-tool-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "action";
        align-items: start;
        gap: clamp(3px, .6vw, 8px);
        padding: clamp(4px, .8vw, 9px);
    }

    .xl-tool-icon {
        display: none;
    }

    .xl-tool-copy {
        grid-area: copy;
        margin: 0;
        padding: 0;
        align-items: stretch;
    }

    .xl-tool-title-action {
        display: block;
        min-width: 0;
    }

    .xl-tool-copy h3 {
        margin: 0;
        font-size: clamp(12px, 2vw, 18px);
        line-height: 1.16;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xl-tool-copy p {
        display: none;
    }

    .xl-tool-link {
        grid-area: action;
        justify-self: stretch;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: clamp(30px, 4vw, 38px);
        min-height: clamp(30px, 4vw, 38px);
        margin: 0;
        padding: 0 clamp(3px, .7vw, 8px);
        border-radius: clamp(6px, .8vw, 10px);
        font-size: clamp(11px, 1.6vw, 14px);
        line-height: clamp(30px, 4vw, 38px);
        white-space: nowrap;
    }

    .xl-tool-link i {
        display: none;
    }

    .xl-tool-badge-stack {
        top: clamp(4px, .6vw, 8px);
        right: clamp(4px, .6vw, 8px);
        gap: clamp(3px, .5vw, 6px);
        max-width: calc(100% - clamp(8px, 1.2vw, 16px));
    }

    .xl-tool-free-badge,
    .xl-tool-new-badge,
    .xl-tool-maintenance-badge {
        min-width: 0;
        height: clamp(16px, 2vw, 22px);
        padding: 0 clamp(5px, .8vw, 8px);
        border-radius: clamp(5px, .8vw, 8px);
        font-size: clamp(9px, 1.1vw, 12px);
        line-height: clamp(16px, 2vw, 22px);
    }
}

/* HOME_785X1396_WINDOW_GUARD: 785x1396 / 783x1392 外窗对应 viewport 带。
 * 宽高略扩以覆盖 783 外窗；aspect 保持原 3/5~5/8，避免两栏恢复失效导致右侧消失。 */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width: 820px) and (min-height: 1200px) and (max-height: 1500px) and (min-aspect-ratio: 1/2) and (max-aspect-ratio: 2/3) {
    /* 仅此窗口首屏卡片纯 21:9（不 ×0.85）；其它浏览器保持原响应式 */
    :root,
    .xl-home {
        --home-hero-aspect-w: 21;
        --home-hero-aspect-h: 9;
        --home-hero-height-scale: 1;
        --home-hero-display-h: calc(var(--home-hero-aspect-h) * var(--home-hero-height-scale));
        --home-hero-block-height: calc(var(--home-shell-width) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    }

    .xl-hero,
    .xl-hero.is-image-only,
    .xl-hero.is-image-only[style*="--home-hero-image-aspect-ratio"] {
        aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 9) !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /*
     * HOME_783_DATE_ABOVE_UPDATES + HOME_783_TOOL_GAP_FIX:
     * 左栏 flex 紧排；日期绝对贴 Hero 右侧同高；右栏顶部占位后接更新日志。
     */
    .xl-home-layout {
        --home-783-side-w: clamp(188px, 27vw, 224px);
        --home-783-gap: clamp(10px, 1.1vw, 14px);
        --home-783-hero-h: calc((var(--home-shell-width) - var(--home-783-side-w) - var(--home-783-gap)) * 9 / 21);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--home-783-side-w) !important;
        grid-template-rows: auto !important;
        column-gap: var(--home-783-gap) !important;
        row-gap: clamp(8px, 0.9vw, 12px) !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .xl-home-main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: clamp(8px, 0.9vw, 12px) !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        order: initial !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .xl-home-hero-row {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .xl-hero,
    .xl-home-hero-row .xl-hero {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .xl-home-time-card {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: calc(100% + var(--home-783-gap)) !important;
        width: var(--home-783-side-w) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 2 !important;
    }

    .xl-home-time-card .xl-side-card,
    .xl-home-time-card .xl-time-section {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .xl-home-time-card .xl-time-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        align-content: stretch !important;
        align-items: stretch !important;
        gap: clamp(8px, 1vw, 12px) !important;
        padding: clamp(10px, 1.2vw, 14px) !important;
    }

    .xl-home-time-card .xl-time-date {
        align-self: center !important;
    }

    .xl-home-time-card .xl-time-progress {
        align-content: center !important;
        min-height: 0 !important;
    }

    .xl-tool-section {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .xl-home-side {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-top: calc(var(--home-783-hero-h) + clamp(8px, 0.9vw, 12px)) !important;
        box-sizing: border-box !important;
        order: initial !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-self: start !important;
    }

    .xl-side-updates-card,
    .xl-home-side .xl-side-updates-card {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* 通用 9:16 会藏更新行/公告细节，这里恢复可见 */
    .xl-home-side .xl-update-row,
    .xl-home-side .xl-update-topline,
    .xl-home-side .xl-update-feature ul,
    .xl-home-side .xl-notice-item p,
    .xl-home-side .xl-time-progress {
        display: revert !important;
    }

    .xl-home-side .xl-notice-item:not(:first-child) {
        display: revert !important;
    }

    .xl-side-card,
    .xl-side-combined-card {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(8px, .9vw, 12px);
        padding: clamp(9px, 1vw, 13px);
    }

    .xl-side-section + .xl-side-section {
        margin-top: 0;
        padding-top: clamp(8px, .9vw, 12px);
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    /* Keep update-log titles readable in the narrow 785x1396 right rail. */
    .xl-update-row {
        align-items: stretch;
        flex-direction: column;
        gap: clamp(5px, .7vw, 8px);
        min-height: 0;
        padding-top: clamp(8px, .9vw, 11px);
        padding-bottom: clamp(8px, .9vw, 11px);
    }

    .xl-update-row-title {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: keep-all;
        line-height: 1.32;
    }

    .xl-update-row-meta {
        width: 100%;
        justify-content: space-between;
        gap: clamp(6px, .8vw, 10px);
    }

    .xl-tool-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(5px, .8vw, 10px);
    }

    .xl-tool-section.is-single-tool .xl-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl-tool-section.is-single-tool .xl-tool-card {
        width: 100%;
        max-width: none;
    }

    .xl-tool-card {
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 0;
        height: auto;
    }

    .xl-tool-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "action";
        align-items: start;
        gap: clamp(3px, .6vw, 8px);
        padding: clamp(4px, .8vw, 9px);
    }

    .xl-tool-icon {
        display: none;
    }

    .xl-tool-copy {
        grid-area: copy;
        margin: 0;
        padding: 0;
        align-items: stretch;
    }

    .xl-tool-title-action {
        display: block;
        min-width: 0;
    }

    .xl-tool-copy h3 {
        margin: 0;
        font-size: clamp(12px, 1.7vw, 16px);
        line-height: 1.16;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xl-tool-copy p,
    .xl-tool-link i {
        display: none;
    }

    .xl-tool-link {
        grid-area: action;
        justify-self: stretch;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: clamp(28px, 3vw, 32px);
        min-height: clamp(28px, 3vw, 32px);
        margin: 0;
        padding: 0 clamp(3px, .6vw, 7px);
        border-radius: clamp(6px, .7vw, 9px);
        font-size: clamp(10px, 1.25vw, 12px);
        line-height: clamp(28px, 3vw, 32px);
        white-space: nowrap;
    }
}


/* inlined css/home-responsive-legacy-fallback.css */
/* HOME_RESPONSIVE_VISIBLE_LEGACY_FALLBACK_GUARD */
@media screen and (max-width: 900px) and (orientation: portrait) {
    .xl-hero {
        min-height: 260px;
        padding: 24px;
    }

    .xl-hero h1 {
        font-size: 30px;
    }

    .xl-hero p {
        font-size: 24px;
    }

    .xl-hero-art {
        width: 96%;
        max-width: 520px;
    }

    .xl-hero .hero-core {
        right: 5%;
        width: 270px;
        height: 270px;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .xl-hero {
            min-height: clamp(200px, 45vh, 320px);
            padding: clamp(20px, 4vw, 32px);
        }

        .xl-hero h1 {
            font-size: clamp(24px, 6vw, 36px);
        }

        .xl-hero p {
            font-size: clamp(20px, 5vw, 28px);
        }

        .xl-hero-art {
            width: min(96%, 520px);
        }

        .xl-hero .hero-core {
            right: clamp(2%, 5vw, 7%);
            width: clamp(220px, 62vw, 310px);
            height: clamp(220px, 62vw, 310px);
        }
    }
}

@media screen and (max-width: 1420px) {
    .xl-hero-copy {
        width: 65%;
        max-width: 660px;
    }

    .xl-hero-art {
        width: 58%;
        max-width: 700px;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .xl-hero-copy {
            width: min(660px, 65%);
        }

        .xl-hero-art {
            width: min(58%, 700px);
        }
    }
}

@media screen and (max-width: 1180px) {
    .xl-hero-copy {
        width: 70%;
        max-width: 700px;
    }

    .xl-hero {
        min-height: 380px;
    }

    .xl-hero-art {
        width: 66%;
        max-width: 720px;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .xl-hero-copy {
            width: min(700px, 70%);
        }

        .xl-hero {
            min-height: clamp(320px, 34vw, 430px);
        }

        .xl-hero-art {
            width: min(66%, 720px);
        }
    }
}

@media screen and (max-width: 720px) {
    .xl-hero {
        min-height: 210px;
    }

    .xl-hero h1 {
        font-size: 32px;
    }

    .xl-hero p {
        font-size: 19px;
    }

    .xl-hero .hero-core {
        width: 100%;
        height: 100%;
    }

    @supports (width: clamp(1px, 1vw, 2px)) {
        .xl-hero {
            min-height: clamp(196px, 32vh, 224px);
        }

        .xl-hero h1 {
            font-size: clamp(28px, 8vw, 38px);
        }

        .xl-hero p {
            font-size: clamp(17px, 5vw, 21px);
        }

        .xl-hero .hero-core {
            width: clamp(210px, 68vw, 286px);
            height: clamp(210px, 68vw, 286px);
        }
    }
}

/* HOME_785X1396_HERO_EARTH_GUARD: keep the earth fully visible in the tall 785x1396 / 783x1392 browser window. */
/* 外窗 783x1392 时首屏 hero 强制 21:9；aspect 用 3/5~5/8 与两栏恢复一致，避免右侧丢失。 */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width: 820px) and (min-height: 1200px) and (max-height: 1500px) and (min-aspect-ratio: 1/2) and (max-aspect-ratio: 2/3) {
    :root,
    .xl-home {
        --home-hero-aspect-w: 21;
        --home-hero-aspect-h: 9;
        --home-hero-height-scale: 1;
        --home-hero-display-h: calc(var(--home-hero-aspect-h) * var(--home-hero-height-scale));
        --home-hero-block-height: calc(var(--home-shell-width) * var(--home-hero-display-h) / var(--home-hero-aspect-w));
    }

    .xl-hero,
    .xl-hero.is-image-only {
        aspect-ratio: var(--home-hero-aspect-w, 21) / var(--home-hero-display-h, 9) !important;
        min-height: 0 !important;
        height: auto !important;
        padding: clamp(10px, 1.3vw, 14px);
    }

    /* HOME_783_DATE_ABOVE_UPDATES + HOME_783_TOOL_GAP_FIX（仅 783 外窗） */
    .xl-home-layout {
        --home-783-side-w: clamp(188px, 27vw, 224px);
        --home-783-gap: clamp(10px, 1.1vw, 14px);
        --home-783-hero-h: calc((var(--home-shell-width) - var(--home-783-side-w) - var(--home-783-gap)) * 9 / 21);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--home-783-side-w) !important;
        grid-template-rows: auto !important;
        column-gap: var(--home-783-gap) !important;
        row-gap: clamp(8px, 0.9vw, 12px) !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .xl-home-main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(8px, 0.9vw, 12px) !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        order: initial !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    .xl-home-hero-row {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .xl-hero,
    .xl-home-hero-row .xl-hero {
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .xl-home-time-card {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: calc(100% + var(--home-783-gap)) !important;
        width: var(--home-783-side-w) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 2 !important;
    }

    .xl-home-time-card .xl-side-card,
    .xl-home-time-card .xl-time-section {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .xl-home-time-card .xl-time-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        align-content: stretch !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    .xl-home-time-card .xl-time-progress {
        align-content: center !important;
        min-height: 0 !important;
    }

    .xl-tool-section {
        width: 100% !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .xl-home-side {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: calc(var(--home-783-hero-h) + clamp(8px, 0.9vw, 12px)) !important;
        box-sizing: border-box !important;
        order: initial !important;
        position: static !important;
        visibility: visible !important;
        align-self: start !important;
    }

    .xl-side-updates-card,
    .xl-home-side .xl-side-updates-card {
        width: 100% !important;
        margin-top: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .xl-hero-copy {
        width: min(100%, clamp(284px, 63%, 320px));
        max-width: min(100%, clamp(284px, 63%, 320px));
    }

    .xl-hero-badge {
        min-height: 26px;
        padding: 0 10px;
        font-size: 12px;
    }

    .xl-hero p {
        margin: 8px 0 8px;
        padding-left: 8px;
        font-size: clamp(13px, 1.7vw, 16px);
        line-height: 1.12;
    }

    .xl-hero-actions {
        gap: 6px;
    }

    .xl-hero-btn {
        height: 34px;
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 34px;
    }

    .xl-hero .hero-core {
        left: auto;
        right: clamp(8px, 1.4vw, 14px);
        top: 50%;
        bottom: auto;
        width: clamp(132px, 18vw, 148px);
        height: clamp(132px, 18vw, 148px);
        transform: translateY(-50%);
        --hero-earth-size: clamp(116px, 15vw, 130px);
        --hero-earth-half-size: calc(var(--hero-earth-size) / 2);
        --hero-earth-center-x: calc(100% - clamp(4px, 0.9vw, 8px) - var(--hero-earth-half-size));
        --hero-earth-center-y: 47%;
    }

    body.home-page-shell .loginArea,
    body.home-header-shell .loginArea,
    body:has(.xl-home) .loginArea {
        display: grid;
        grid-template-columns: max-content max-content auto;
        grid-template-rows: repeat(2, 20px);
        align-items: center;
        column-gap: 4px;
        row-gap: 4px;
        width: auto;
        height: 44px;
    }

    body.home-page-shell .loginArea .couponCodeBadge,
    body.home-header-shell .loginArea .couponCodeBadge,
    body:has(.xl-home) .loginArea .couponCodeBadge {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        width: 78px;
        min-width: 78px;
        max-width: 78px;
        height: 20px;
        min-height: 20px;
        padding: 0 6px;
        font-size: 10px;
        line-height: 20px;
        border-radius: 8px !important;
    }

    body.home-page-shell .loginArea .headerAssetBadge--785compact,
    body.home-header-shell .loginArea .headerAssetBadge--785compact,
    body:has(.xl-home) .loginArea .headerAssetBadge--785compact {
        display: inline-flex !important;
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        justify-self: start;
        width: 78px;
        min-width: 78px;
        max-width: 78px;
        height: 20px;
        min-height: 20px;
        padding: 0 6px;
        gap: 3px;
        font-size: 10px;
        line-height: 20px;
        border-radius: 8px !important;
    }

    body.home-page-shell .loginArea .headerAssetBadge--785compact .icon,
    body.home-header-shell .loginArea .headerAssetBadge--785compact .icon,
    body:has(.xl-home) .loginArea .headerAssetBadge--785compact .icon {
        width: 9px;
        height: 9px;
    }

    body.home-page-shell .loginArea .headerUserStack,
    body.home-page-shell .loginArea .loginBtn,
    body.home-header-shell .loginArea .headerUserStack,
    body.home-header-shell .loginArea .loginBtn,
    body:has(.xl-home) .loginArea .headerUserStack,
    body:has(.xl-home) .loginArea .loginBtn {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }

    body.home-page-shell .loginArea .headerUserStack,
    body.home-header-shell .loginArea .headerUserStack,
    body:has(.xl-home) .loginArea .headerUserStack {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    body.home-page-shell .navul > li.navItemFiles,
    body.home-page-shell .navul > li.navItemChannel,
    body.home-page-shell .navul > li.navItemFeedback,
    body.home-header-shell .navul > li.navItemFiles,
    body.home-header-shell .navul > li.navItemChannel,
    body.home-header-shell .navul > li.navItemFeedback,
    body:has(.xl-home) .navul > li.navItemFiles,
    body:has(.xl-home) .navul > li.navItemChannel,
    body:has(.xl-home) .navul > li.navItemFeedback {
        display: none !important;
    }

    body.home-page-shell .loginArea,
    body.home-header-shell .loginArea,
    body:has(.xl-home) .loginArea {
        grid-template-columns: max-content max-content max-content auto;
    }

    body.home-page-shell .loginArea .headerChannelBadge--785compact,
    body.home-header-shell .loginArea .headerChannelBadge--785compact,
    body:has(.xl-home) .loginArea .headerChannelBadge--785compact,
    body.home-page-shell .loginArea .headerFeedbackBadge--785compact,
    body.home-header-shell .loginArea .headerFeedbackBadge--785compact,
    body:has(.xl-home) .loginArea .headerFeedbackBadge--785compact {
        display: inline-flex !important;
        align-self: center;
        justify-self: start;
        width: 62px;
        min-width: 62px;
        max-width: 62px;
        height: 20px;
        min-height: 20px;
        padding: 0 6px;
        font-size: 10px;
        line-height: 20px;
        border-radius: 8px !important;
    }

    body.home-page-shell .loginArea .headerChannelBadge--785compact,
    body.home-header-shell .loginArea .headerChannelBadge--785compact,
    body:has(.xl-home) .loginArea .headerChannelBadge--785compact {
        grid-column: 1;
        grid-row: 1;
    }

    body.home-page-shell .loginArea .headerFeedbackBadge--785compact,
    body.home-header-shell .loginArea .headerFeedbackBadge--785compact,
    body:has(.xl-home) .loginArea .headerFeedbackBadge--785compact {
        grid-column: 1;
        grid-row: 2;
    }

    body.home-page-shell .loginArea .couponCodeBadge,
    body.home-header-shell .loginArea .couponCodeBadge,
    body:has(.xl-home) .loginArea .couponCodeBadge {
        grid-column: 2;
        grid-row: 1;
    }

    body.home-page-shell .loginArea .headerAssetBadge--785compact,
    body.home-header-shell .loginArea .headerAssetBadge--785compact,
    body:has(.xl-home) .loginArea .headerAssetBadge--785compact {
        grid-column: 2;
        grid-row: 2;
    }

    body.home-page-shell .loginArea .langSwitch,
    body.home-header-shell .loginArea .langSwitch,
    body:has(.xl-home) .loginArea .langSwitch,
    body.home-page-shell .loginArea #siteLangSelect,
    body.home-header-shell .loginArea #siteLangSelect,
    body:has(.xl-home) .loginArea #siteLangSelect {
        grid-column: 3;
        grid-row: 1;
    }

    body.home-page-shell .loginArea > .theme-toggle:not(.theme-toggle--mobile),
    body.home-header-shell .loginArea > .theme-toggle:not(.theme-toggle--mobile),
    body:has(.xl-home) .loginArea > .theme-toggle:not(.theme-toggle--mobile) {
        grid-column: 3;
        grid-row: 2;
    }

    body.home-page-shell .loginArea .headerUserStack,
    body.home-page-shell .loginArea .loginBtn,
    body.home-header-shell .loginArea .headerUserStack,
    body.home-header-shell .loginArea .loginBtn,
    body:has(.xl-home) .loginArea .headerUserStack,
    body:has(.xl-home) .loginArea .loginBtn {
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    body.home-page-shell .loginArea .headerUserStack .topIntegralBadge,
    body.home-header-shell .loginArea .headerUserStack .topIntegralBadge,
    body:has(.xl-home) .loginArea .headerUserStack .topIntegralBadge {
        width: max-content;
        min-width: 44px;
        max-width: none;
        align-self: center;
    }

    body.home-page-shell .loginArea .langSwitch,
    body.home-header-shell .loginArea .langSwitch,
    body:has(.xl-home) .loginArea .langSwitch {
        grid-column: 3;
        grid-row: 1;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
    }

    body.home-page-shell .loginArea .langSwitch__label,
    body.home-header-shell .loginArea .langSwitch__label,
    body:has(.xl-home) .loginArea .langSwitch__label {
        position: static !important;
        left: auto !important;
        right: auto !important;
        font-size: 11px;
        line-height: 28px !important;
    }

    body.home-page-shell .loginArea .langSwitch::before,
    body.home-header-shell .loginArea .langSwitch::before,
    body:has(.xl-home) .loginArea .langSwitch::before,
    body.home-page-shell .loginArea .langSwitch::after,
    body.home-header-shell .loginArea .langSwitch::after,
    body:has(.xl-home) .loginArea .langSwitch::after {
        content: none !important;
        display: none !important;
    }

    body.home-page-shell .loginArea #siteLangSelect,
    body.home-header-shell .loginArea #siteLangSelect,
    body:has(.xl-home) .loginArea #siteLangSelect {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        padding: 0 !important;
        font-size: 11px;
        line-height: 28px !important;
        border: 0 !important;
        border-radius: 8px !important;
        opacity: 0.01 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.home-page-shell .loginArea > .theme-toggle:not(.theme-toggle--mobile),
    body.home-header-shell .loginArea > .theme-toggle:not(.theme-toggle--mobile),
    body:has(.xl-home) .loginArea > .theme-toggle:not(.theme-toggle--mobile) {
        grid-column: 3;
        grid-row: 2;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
    }

    body.home-page-shell .loginArea .theme-toggle::before,
    body.home-header-shell .loginArea .theme-toggle::before,
    body:has(.xl-home) .loginArea .theme-toggle::before,
    body.home-page-shell .loginArea .theme-toggle::after,
    body.home-header-shell .loginArea .theme-toggle::after,
    body:has(.xl-home) .loginArea .theme-toggle::after {
        content: none !important;
        display: none !important;
    }

    body.home-page-shell .loginArea .theme-toggle-label,
    body.home-header-shell .loginArea .theme-toggle-label,
    body:has(.xl-home) .loginArea .theme-toggle-label {
        position: static !important;
        left: auto !important;
        right: auto !important;
        font-size: 11px;
        line-height: 28px !important;
    }

    body.home-page-shell .loginArea .theme-toggle-select,
    body.home-header-shell .loginArea .theme-toggle-select,
    body:has(.xl-home) .loginArea .theme-toggle-select,
    body.home-page-shell .loginArea .theme-toggle-custom-trigger,
    body.home-header-shell .loginArea .theme-toggle-custom-trigger,
    body:has(.xl-home) .loginArea .theme-toggle-custom-trigger {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 11px;
        line-height: 20px;
        border-radius: 8px !important;
    }
}

/* source: css/global-particles.css */
/* inlined css/global-particles/global-particles-01.css */

/* inlined css/global-particles/global-particles-01.part-01.css */
/**
 * 全站动态粒子效果系统
 * 包含：星点瀑布、鼠标引力场、光带流动、能量波纹等
 */

/* 强制透明背景，确保粒子可见 */
body {
    background: transparent !important;
}

/* ============================================
   备用粒子效果 - CSS纯动画（不依赖JS）
   ============================================ */
.xl-static-star {
    position: fixed;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(200, 230, 255, 0.9), rgba(100, 180, 255, 0.5));
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(150, 200, 255, 0.8), 0 0 12px rgba(100, 150, 255, 0.4);
    animation: staticStarFloat 8s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

.xl-static-star:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
.xl-static-star:nth-child(2) { left: 25%; top: 60%; animation-delay: -1s; animation-duration: 9s; width: 2px; height: 2px; }
.xl-static-star:nth-child(3) { left: 40%; top: 35%; animation-delay: -2s; animation-duration: 8s; }
.xl-static-star:nth-child(4) { left: 55%; top: 75%; animation-delay: -3s; animation-duration: 10s; width: 4px; height: 4px; }
.xl-static-star:nth-child(5) { left: 70%; top: 25%; animation-delay: -4s; animation-duration: 7s; }
.xl-static-star:nth-child(6) { left: 85%; top: 55%; animation-delay: -5s; animation-duration: 9s; width: 2px; height: 2px; }
.xl-static-star:nth-child(7) { left: 15%; top: 85%; animation-delay: -6s; animation-duration: 8s; }
.xl-static-star:nth-child(8) { left: 60%; top: 15%; animation-delay: -7s; animation-duration: 11s; width: 4px; height: 4px; }
.xl-static-star:nth-child(9) { left: 80%; top: 80%; animation-delay: -2.5s; animation-duration: 8.5s; }
.xl-static-star:nth-child(10) { left: 35%; top: 90%; animation-delay: -4.5s; animation-duration: 9.5s; width: 2px; height: 2px; }
.xl-static-star:nth-child(11) { left: 5%; top: 45%; animation-delay: -1.5s; animation-duration: 7.5s; }
.xl-static-star:nth-child(12) { left: 92%; top: 40%; animation-delay: -3.5s; animation-duration: 10.5s; }
.xl-static-star:nth-child(13) { left: 48%; top: 50%; animation-delay: -5.5s; animation-duration: 8s; width: 5px; height: 5px; }
.xl-static-star:nth-child(14) { left: 78%; top: 10%; animation-delay: -0.5s; animation-duration: 9s; }
.xl-static-star:nth-child(15) { left: 22%; top: 30%; animation-delay: -6.5s; animation-duration: 11s; width: 2px; height: 2px; }

@keyframes staticStarFloat {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0) translateX(0);
    }
    25% {
        opacity: 0.9;
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-10px) translateX(-5px);
    }
    75% {
        opacity: 1;
        transform: translateY(-30px) translateX(5px);
    }
}
.xl-particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* ============================================
   星点瀑布效果 - 背景层（增强版）
   ============================================ */
.xl-starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(80, 120, 200, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(120, 60, 200, 0.5) 0%, transparent 50%),
        linear-gradient(180deg, #050818 0%, #0a1025 50%, #050818 100%);
}

.xl-starfield-layer {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    overflow: hidden;
}

.xl-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(180, 200, 255, 0.5));
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(150, 180, 255, 0.6);
    animation: starfall linear infinite;
}

.xl-star.small {
    width: 1px;
    height: 1px;
    opacity: 0.4;
    box-shadow: 0 0 2px rgba(150, 180, 255, 0.3);
}

.xl-star.medium {
    width: 3px;
    height: 3px;
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(150, 180, 255, 0.8);
}

.xl-star.large {
    width: 4px;
    height: 4px;
    opacity: 1;
    box-shadow: 0 0 12px rgba(200, 220, 255, 1), 0 0 20px rgba(100, 150, 255, 0.5);
}

@keyframes starfall {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(200vh) translateX(30px) scale(0.5);
        opacity: 0;
    }
}

/* ============================================
   极光流动背景效果（增强版）
   ============================================ */
.xl-aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.xl-aurora-wave {
    position: absolute;
    width: 200%;
    height: 60%;
    left: -50%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 200, 255, 0.2) 20%,
        rgba(150, 120, 255, 0.25) 40%,
        rgba(200, 80, 255, 0.2) 60%,
        rgba(0, 220, 220, 0.22) 80%,
        transparent 100%
    );
    filter: blur(40px);
}

.xl-aurora-wave:nth-child(1) {
    top: 10%;
    animation-delay: 0s;
    opacity: 0.5;
}

.xl-aurora-wave:nth-child(2) {
    top: 30%;
    animation-delay: -2s;
    opacity: 0.4;
    transform: scaleY(0.7);
}

.xl-aurora-wave:nth-child(3) {
    top: 50%;
    animation-delay: -4s;
    opacity: 0.3;
    transform: scaleY(0.5);
}

.xl-aurora-wave:nth-child(4) {
    top: 70%;
    animation-delay: -1s;
    opacity: 0.2;
    transform: scaleY(0.4);
}

@keyframes auroraWave {
    0%, 100% {
        transform: translateX(-30%) scaleY(1);
        filter: blur(40px);
    }
    25% {
        transform: translateX(0%) scaleY(1.5);
        filter: blur(50px);
    }
    50% {
        transform: translateX(30%) scaleY(0.6);
        filter: blur(35px);
    }
    75% {
        transform: translateX(0%) scaleY(1.4);
        filter: blur(45px);
    }
}

/* 极光动画从12s加速到6s */
.xl-aurora-wave {
    animation: auroraWave 6s ease-in-out infinite;
}

/* 颜色变换的极光（增强饱和度） */
.xl-aurora-color {
    position: absolute;
    width: 150%;
    height: 40%;
    left: -25%;
    top: 20%;
    background: linear-gradient(
        270deg,
        rgba(0, 220, 255, 0.3),
        rgba(120, 60, 255, 0.25),
        rgba(255, 80, 180, 0.2),
        rgba(0, 220, 255, 0.3)
    );
    background-size: 400% 400%;
    filter: blur(60px);
    animation: auroraColorShift 15s ease infinite;
}

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

/* ============================================
   光带流动效果（增强版 - 更频繁更亮）
   ============================================ */
.xl-light-streaks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.xl-light-streak {
    position: absolute;
    width: 300%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(150, 210, 255, 0.6) 30%,
        rgba(200, 230, 255, 0.9) 50%,
        rgba(150, 210, 255, 0.6) 70%,
        transparent 100%
    );
    transform: rotate(-15deg);
    animation: lightStreakMove 6s linear infinite;
    filter: blur(1px);
}

.xl-light-streak:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
    opacity: 0.5;
}

.xl-light-streak:nth-child(2) {
    top: 40%;
    animation-delay: -2s;
    opacity: 0.4;
    width: 200%;
    animation-duration: 8s;
}



/* inlined css/global-particles/global-particles-01.part-02.css */
.xl-light-streak:nth-child(3) {
    top: 60%;
    animation-delay: -4s;
    opacity: 0.45;
    width: 250%;
    animation-duration: 7s;
}

.xl-light-streak:nth-child(4) {
    top: 80%;
    animation-delay: -6s;
    opacity: 0.35;
    width: 280%;
    animation-duration: 9s;
}

@keyframes lightStreakMove {
    0% {
        transform: translateX(-100%) rotate(-15deg);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.5;
    }
    100% {
        transform: translateX(100%) rotate(-15deg);
        opacity: 0;
    }
}

/* ============================================
   鼠标光晕效果（增强版）
   ============================================ */
.xl-cursor-aura {
    position: fixed;
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(0, 180, 255, 0.25) 0%,
        rgba(120, 120, 255, 0.15) 30%,
        rgba(180, 80, 255, 0.08) 50%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    mix-blend-mode: screen;
}

.xl-cursor-aura.visible {
    opacity: 1;
}

.xl-cursor-aura::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(180, 220, 255, 0.4) 40%,
        transparent 70%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cursorCore 1.5s ease-in-out infinite;
}

@keyframes cursorCore {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
}

/* ============================================
   能量波纹效果
   ============================================ */
.xl-energy-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(100, 180, 255, 0.6);
    pointer-events: none;
    animation: energyRippleExpand 1s ease-out forwards;
}

.xl-energy-ripple::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(100, 180, 255, 0.3) 0%,
        transparent 60%
    );
}

@keyframes energyRippleExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}



/* inlined css/global-particles/global-particles-02.css */

/* inlined css/global-particles/global-particles-02.part-01.css */
/* ============================================
   玻璃拟态增强
   ============================================ */
.xl-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.xl-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(100, 150, 255, 0.05) 100%
    );
    pointer-events: none;
}

.xl-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: glassShine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glassShine {
    0%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(100%);
        opacity: 1;
    }
}

/* 彩虹色散边框 */
.xl-glass-rainbow {
    position: relative;
}

.xl-glass-rainbow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
        45deg,
        rgba(255, 0, 0, 0.3),
        rgba(255, 165, 0, 0.3),
        rgba(0, 255, 0, 0.3),
        rgba(0, 0, 255, 0.3),
        rgba(128, 0, 128, 0.3)
    );
    background-size: 400% 400%;
    filter: blur(4px);
    animation: rainbowBorder 4s ease infinite;
    z-index: -1;
    opacity: 0.5;
}

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

/* ============================================
   液态波动效果
   ============================================ */
.xl-liquid {
    position: relative;
    animation: liquidWobble 3s ease-in-out infinite;
}

@keyframes liquidWobble {
    0%, 100% {
        border-radius: 20px;
        transform: translateY(0);
    }
    25% {
        border-radius: 22px 18px 20px 24px;
        transform: translateY(-2px);
    }
    50% {
        border-radius: 18px 22px 24px 20px;
        transform: translateY(-1px);
    }
    75% {
        border-radius: 24px 20px 18px 22px;
        transform: translateY(-3px);
    }
}

.xl-liquid:hover {
    animation: liquidWobbleActive 0.5s ease-in-out infinite;
}

@keyframes liquidWobbleActive {
    0%, 100% {
        border-radius: 20px;
        transform: scale(1.02);
    }
    25% {
        border-radius: 24px 18px 22px 20px;
        transform: scale(1.03);
    }
    50% {
        border-radius: 18px 22px 20px 24px;
        transform: scale(1.02);
    }
    75% {
        border-radius: 22px 24px 18px 20px;
        transform: scale(1.025);
    }
}

/* ============================================
   高级动画关键帧库
   ============================================ */

/* 呼吸脉冲 */
@keyframes pulseBreathe {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}

/* 星光闪烁 */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
        filter: blur(0px);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: blur(1px);
    }
}

/* 光芒扩散 */
@keyframes glowExpand {
    0% {
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 123, 255, 0.8), 0 0 80px rgba(0, 212, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }
}

/* 彩虹色渐变 */
@keyframes rainbowShift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* 3D旋转入场 */
@keyframes rotate3dIn {
    0% {
        transform: perspective(1000px) rotateY(-90deg) translateZ(100px);
        opacity: 0;
    }
    100% {
        transform: perspective(1000px) rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

/* 浮动上升 */
@keyframes floatRise {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 弹性弹跳 */
@keyframes elasticBounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.95);
    }
    85% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 脉冲光环 */
@keyframes pulseHalo {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.4);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(100, 180, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(100, 180, 255, 0);
    }
}

/* 旋转加载 */
@keyframes spinLoader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   滚动相关动效
   ============================================ */

/* 滚动进度条 */
.xl-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(
        90deg,
        #00a0ff 0%,
        #00d4ff 30%,
        #8866ff 70%,
        #ff66aa 100%
    );
    z-index: 10000;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

/* 回到顶部按钮 */


/* inlined css/global-particles/global-particles-02.part-02.css */
.xl-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(20, 30, 60, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 150, 255, 0.3);
    color: #fff;
    cursor: pointer;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.xl-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.xl-back-to-top:hover {
    background: rgba(40, 60, 120, 0.9);
    border-color: rgba(150, 200, 255, 0.5);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.4);
}

.xl-back-to-top svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.xl-back-to-top:hover svg {
    transform: translateY(-3px);
}

/* 视差层 */
.xl-parallax-layer {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ============================================
   入场动画类
   ============================================ */
.xl-animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.xl-animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.xl-animate-on-scroll.fade-in {
    transform: translateY(0) scale(0.95);
}

.xl-animate-on-scroll.fade-in.visible {
    transform: translateY(0) scale(1);
}

.xl-animate-on-scroll.slide-left {
    transform: translateX(-50px);
}

.xl-animate-on-scroll.slide-left.visible {
    transform: translateX(0);
}

.xl-animate-on-scroll.slide-right {
    transform: translateX(50px);
}

.xl-animate-on-scroll.slide-right.visible {
    transform: translateX(0);
}

.xl-animate-on-scroll.rotate-in {
    transform: perspective(1000px) rotateY(-30deg);
}

.xl-animate-on-scroll.rotate-in.visible {
    transform: perspective(1000px) rotateY(0);
}

/* ============================================
   移动端适配
   ============================================ */
@media (max-width: 768px) {
    .xl-cursor-aura {
        display: none;
    }

    .xl-light-streaks {
        opacity: 0.5;
    }

    .xl-aurora-wave {
        height: 40%;
        filter: blur(30px);
    }

    .xl-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* 减少动画偏好 */
/* 项目要求：全局粒子动态不受浏览器/系统减少动态设置影响。 */

/* source: css/home-header.css */
/* Shared selectors live in imported parts: body:has(.xl-home) .loarea, body.home-header-shell .loarea */

/* inlined css/home-header.legacy-shell.css */
:root {
    --home-header-height: 72px;
    --home-shell-gutter: 20px;
    --home-shell-x: 40px;
    --home-shell-max: 1900px;
    --home-shell-width: calc(100vw - var(--home-shell-x));
    --home-nav-font-size: 15px;
    --home-nav-gap: 12px;
    --home-nav-pad-x: 4px;
    --home-nav-side-pad: 12px;
}

@supports (height: clamp(1px, 2px, 3px)) {
    :root {
        --home-header-height: clamp(66px, 4.4vw, 82px);
        --home-shell-gutter: clamp(16px, 1.3vw, 22px);
        --home-shell-x: calc(var(--home-shell-gutter) * 2);
        --home-shell-width: min(calc(100vw - var(--home-shell-x)), var(--home-shell-max));
        --home-nav-font-size: clamp(14px, calc(0.32vw + 10px), 17px);
        --home-nav-gap: clamp(8px, 0.72vw, 16px);
        --home-nav-pad-x: clamp(2px, 0.22vw, 5px);
        --home-nav-side-pad: clamp(8px, 0.9vw, 18px);
    }
}

body.home-header-shell .loarea {
    height: var(--home-header-height, 72px);
}

body.home-header-shell .loarea .wp {
    display: flex;
    align-items: center;
    width: var(--home-shell-width, calc(100vw - 40px));
    padding-left: 220px;
}

body.home-header-shell .logo {
    width: 220px;
    height: var(--home-header-height, 72px);
}

body.home-header-shell .logo .tp {
    height: 56px;
}

body.home-header-shell .logo .logo-text {
    max-width: 170px;
    font-size: 30px;
}

body.home-header-shell .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--home-nav-side-pad, 12px);
}

body.home-header-shell .navul {
    display: flex;
    gap: var(--home-nav-gap, 12px) !important;
    margin: 0;
}

body.home-header-shell .navul li > a {
    height: var(--home-header-height, 72px);
    padding: 0 var(--home-nav-pad-x, 4px) !important;
    font-size: var(--home-nav-font-size, 15px) !important;
}

@media screen and (max-width: 980px) {
    body.home-header-shell .loarea .wp {
        padding-left: 160px;
    }

    body.home-header-shell .logo {
        width: 160px;
    }

    body.home-header-shell .logo .logo-text {
        max-width: 140px;
        font-size: 24px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --home-header-height: 60px;
    }

    body.home-header-shell .logo {
        width: 180px;
        height: 60px;
    }

    body.home-header-shell .logo .tp {
        height: 42px;
        max-width: 48px;
    }

    body.home-header-shell .navul {
        display: none;
    }

    body.home-header-shell .loarea .wp {
        width: var(--home-shell-width, calc(100vw - 32px));
        padding-left: 0;
    }
}


/* inlined css/home-header.part-01.css */
:root {
    --home-shell-gutter: 20px;
    --home-shell-x: calc(var(--home-shell-gutter) * 2);
    --home-shell-max: 1900px;
    --home-shell-width: calc(100vw - var(--home-shell-x));
    --home-header-height: 72px;
    --home-nav-font-size: 15px;
    --home-nav-gap: 12px;
    --home-nav-pad-x: 4px;
    --home-nav-side-pad: 12px;
}

@supports (height: clamp(1px, 2px, 3px)) {
    :root {
        --home-shell-gutter: clamp(16px, 1.3vw, 22px);
        --home-shell-x: calc(var(--home-shell-gutter) * 2);
        --home-shell-width: min(calc(100vw - var(--home-shell-x)), var(--home-shell-max));
        --home-header-height: clamp(66px, 4.4vw, 82px);
        --home-nav-font-size: clamp(14px, calc(0.32vw + 10px), 17px);
        --home-nav-gap: clamp(8px, 0.72vw, 16px);
        --home-nav-pad-x: clamp(2px, 0.22vw, 5px);
        --home-nav-side-pad: clamp(8px, 0.9vw, 18px);
    }
}

body:has(.xl-home) .loarea,
body.home-header-shell .loarea {
    position: relative;
    height: var(--home-header-height);
    background: rgba(5, 10, 20, 0.92);
    box-shadow:
        0 2px 40px rgba(50, 100, 200, 0.1),
        inset 0 -1px 0 rgba(80, 140, 255, 0.08),
        0 0 80px rgba(50, 100, 200, 0.04);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body:has(.xl-home) .loarea .wp,
body.home-header-shell .loarea .wp {
    position: relative;
    height: 100%;
    width: var(--home-shell-width);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(172px, 14.8vw, 268px);
    padding-right: 0;
    box-sizing: border-box;
}

body:has(.xl-home) .logo,
body.home-header-shell .logo {
    position: absolute;
    left: 0;
    width: clamp(150px, 15vw, 260px);
    height: var(--home-header-height);
    z-index: 10;
}

body:has(.xl-home) .logo .tp,
body.home-header-shell .logo .tp {
    height: clamp(48px, 3.7vw, 66px);
}

body:has(.xl-home) .logo .logo-text,
body.home-header-shell .logo .logo-text {
    max-width: 170px;
    font-size: clamp(24px, 1.55vw, 34px);
}

body:has(.xl-home) .navul li > a,
body.home-header-shell .navul li > a {
    height: var(--home-header-height);
    padding: 0 var(--home-nav-pad-x) !important;
    font-size: var(--home-nav-font-size) !important;
    letter-spacing: 0 !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    word-spacing: normal;
}

body:has(.xl-home) .nav,
body.home-header-shell .nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0 var(--home-nav-side-pad);
    overflow: hidden;
}

body:has(.xl-home) .navul,
body.home-header-shell .navul {
    width: auto;
    max-width: 100%;
    margin: 0;
    justify-content: center;
    gap: var(--home-nav-gap) !important;
    flex-wrap: nowrap;
    white-space: nowrap;
}

body:has(.xl-home) .navul li,
body.home-header-shell .navul li {
    flex: 0 1 auto;
    min-width: 0;
}

body:has(.xl-home) .loginArea,
body.home-header-shell .loginArea {
    gap: clamp(6px, 0.42vw, 8px);
    flex: 0 0 auto;
}

body:has(.xl-home) .couponCodeBadge,
body.home-header-shell .couponCodeBadge {
    height: clamp(30px, 2vw, 36px);
    padding: 0 clamp(8px, 0.56vw, 10px);
    font-size: clamp(11px, 0.68vw, 13px);
}

body:has(.xl-home) .topIntegralBadge,
body.home-header-shell .topIntegralBadge {
    width: min(106px, 100%);
    height: 18px;
    min-height: 18px;
    padding: 0 8px;
    font-size: 11px;
}

body:has(.xl-home) .headerUserStack,
body.home-header-shell .headerUserStack {
    width: clamp(98px, 5.6vw, 110px);
}

body:has(.xl-home) #siteLangSelect,
body.home-header-shell #siteLangSelect {
    width: 112px;
    min-width: 112px;
    padding-right: 28px !important;
}

body:has(.xl-home) .langSwitch__label,
body.home-header-shell .langSwitch__label {
    right: 28px;
}

body:has(.xl-home) .theme-toggle,
body.home-header-shell .theme-toggle {
    width: 148px;
    transform: none;
}

body:has(.xl-home) .theme-toggle .theme-toggle-label,
body.home-header-shell .theme-toggle .theme-toggle-label {
    left: 36px;
    right: 28px;
    font-size: 12px;
}

body:has(.xl-home) .theme-toggle .theme-toggle-select,
body.home-header-shell .theme-toggle .theme-toggle-select {
    padding: 0 28px 0 36px;
    font-size: 12px;
}

body:has(.xl-home) .theme-toggle,
body.home-header-shell .theme-toggle {
    transform: scale(clamp(0.86, 0.07vw + 0.76, 1));
    transform-origin: center;
}

body:has(.xl-home) .loginArea .loginBtn,
body.home-header-shell .loginArea .loginBtn {
    min-width: clamp(72px, 4.6vw, 88px);
    min-height: 44px;
    height: 44px;
    padding: 0 clamp(14px, 0.9vw, 18px);
    font-size: clamp(13px, 0.72vw, 14px);
    line-height: 1.2;
}

@media screen and (min-width: 1920px) {
    :root {
        --home-shell-max: 1840px;
    }
}

@media screen and (min-width: 2560px) {
    :root {
        --home-shell-gutter: clamp(60px, 5.5vw, 160px);
        --home-shell-max: 2040px;
    }
}

@media screen and (max-width: 1420px) {
    :root {
        --home-shell-gutter: clamp(16px, 2vw, 32px);
        --home-nav-font-size: clamp(13px, calc(0.35vw + 9.5px), 15px);
        --home-nav-gap: clamp(8px, 0.85vw, 14px);
        --home-nav-pad-x: clamp(2px, 0.28vw, 5px);
        --home-nav-side-pad: clamp(4px, 0.7vw, 10px);
    }
}

@media screen and (max-width: 980px) {
    :root {
        --home-shell-gutter: 16px;
        --home-nav-font-size: 12px;
        --home-nav-gap: 6px;
        --home-nav-pad-x: 2px;
        --home-nav-side-pad: 2px;
    }

    body:has(.xl-home) .loarea .wp,
    body.home-header-shell .loarea .wp {
        padding-left: clamp(120px, 12vw, 180px);
    }

    body:has(.xl-home) .logo,
    body.home-header-shell .logo {
        left: 0;
        width: clamp(130px, 14vw, 200px);
    }

    body:has(.xl-home) .logo .logo-text,
    body.home-header-shell .logo .logo-text {
        max-width: 140px;
        font-size: clamp(20px, 1.4vw, 30px);
    }
}

@media screen and (max-width: 767px) {
    :root {
        --home-shell-gutter: 16px;
        --home-header-height: 60px;
    }

    body:has(.xl-home) .loarea,
    body.home-header-shell .loarea {
        height: var(--home-header-height);
    }

    body:has(.xl-home) .logo,
    body.home-header-shell .logo {
        width: clamp(150px, calc(100vw - 168px), 188px);
        height: 60px;
    }

    body:has(.xl-home) .logo .tp,
    body.home-header-shell .logo .tp {
        height: 42px;
        max-width: 48px;
    }

    body:has(.xl-home) .logo .logo-text,
    body.home-header-shell .logo .logo-text {
        flex: 0 1 auto;
        max-width: calc(100% - 60px);
        margin-left: 8px !important;
        font-size: 22px !important;
        letter-spacing: 0.4px !important;
    }

    body:has(.xl-home) .navul,
    body.home-header-shell .navul {
        display: none;
    }

    body:has(.xl-home) .loarea .wp,
    body.home-header-shell .loarea .wp {
        width: var(--home-shell-width);
        padding: 0;
    }
}

body.home-header-shell .loarea .wp {
    width: var(--home-shell-width);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(172px, 14.8vw, 268px);
    padding-right: 0;
    box-sizing: border-box;
}

body.home-header-shell .logo {
    position: absolute;
    left: 0;
}

@media screen and (max-width: 1420px) {
    body.home-header-shell .loarea .wp {
        width: var(--home-shell-width);
    }
}

@media screen and (max-width: 980px) {
    body.home-header-shell .loarea .wp {
        padding-left: clamp(120px, 12vw, 180px);
    }

    body.home-header-shell .logo {
        left: 0;
    }
}

@media screen and (max-width: 767px) {
    body.home-header-shell .loarea .wp {
        width: var(--home-shell-width);
        padding: 0;
    }
}

@media screen and (max-width: 700px) {
    :root {
        --home-shell-gutter: 12px;
    }
}

@media screen and (orientation: portrait) and (min-width: 760px) and (max-width: 780px) and (min-height: 1230px) and (max-height: 1285px) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 5/8) {
    body.home-page-shell .loarea .wp,
    body:has(.xl-home) .loarea .wp {
        padding-left: 156px;
    }

    body.home-page-shell .logo,
    body:has(.xl-home) .logo {
        width: 156px;
        min-width: 156px;
    }

    body.home-page-shell .logo .tp,
    body:has(.xl-home) .logo .tp {
        max-width: 46px;
    }

    body.home-page-shell .logo .logo-text,
    body:has(.xl-home) .logo .logo-text {
        max-width: calc(100% - 54px);
        margin-left: 8px !important;
        font-size: 24px !important;
        letter-spacing: 0 !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loarea .wp {
        padding-left: 156px;
    }

    body.home-header-shell.photo-ai3d-reference-page .logo {
        width: 156px;
        min-width: 156px;
    }

    body.home-header-shell.photo-ai3d-reference-page .logo .tp {
        max-width: 46px;
    }

    body.home-header-shell.photo-ai3d-reference-page .logo .logo-text {
        max-width: calc(100% - 54px);
        margin-left: 8px !important;
        font-size: 24px !important;
        letter-spacing: 0 !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .navul > li.navItemFiles,
    body.home-header-shell.photo-ai3d-reference-page .navul > li.navItemChannel,
    body.home-header-shell.photo-ai3d-reference-page .navul > li.navItemFeedback {
        display: none !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea {
        display: grid;
        grid-template-columns: max-content max-content max-content auto;
        grid-template-rows: repeat(2, 20px);
        align-items: center;
        column-gap: 4px;
        row-gap: 4px;
        width: auto;
        height: 44px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerChannelBadge--785compact,
    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerFeedbackBadge--785compact {
        display: inline-flex !important;
        align-self: center;
        justify-self: start;
        width: 62px;
        min-width: 62px;
        max-width: 62px;
        height: 20px;
        min-height: 20px;
        padding: 0 6px;
        font-size: 10px;
        line-height: 20px;
        border-radius: 8px !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerChannelBadge--785compact {
        grid-column: 1;
        grid-row: 1;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerFeedbackBadge--785compact {
        grid-column: 1;
        grid-row: 2;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .couponCodeBadge {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        width: 78px;
        min-width: 78px;
        max-width: 78px;
        height: 20px;
        min-height: 20px;
        padding: 0 6px;
        font-size: 10px;
        line-height: 20px;
        border-radius: 8px !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerAssetBadge--785compact {
        display: inline-flex !important;
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        justify-self: start;
        width: 78px;
        min-width: 78px;
        max-width: 78px;
        height: 20px;
        min-height: 20px;
        padding: 0 6px;
        gap: 3px;
        font-size: 10px;
        line-height: 20px;
        border-radius: 8px !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerAssetBadge--785compact .icon {
        width: 9px;
        height: 9px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .langSwitch,
    body.home-header-shell.photo-ai3d-reference-page .loginArea #siteLangSelect {
        grid-column: 3;
        grid-row: 1;
        width: 68px !important;
        min-width: 68px !important;
        max-width: 88px !important;
        height: 20px !important;
        min-height: 20px !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .langSwitch__label {
        left: 24px;
        right: 8px;
        font-size: 11px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .langSwitch::before {
        left: 6px;
        width: 12px;
        height: 12px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea #siteLangSelect {
        padding: 0 8px 0 24px !important;
        font-size: 11px;
        line-height: 20px !important;
        border-radius: 8px !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea > .theme-toggle:not(.theme-toggle--mobile) {
        grid-column: 3;
        grid-row: 2;
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        height: 20px !important;
        min-height: 20px !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle::before {
        left: 6px;
        width: 12px;
        height: 12px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle::after {
        right: 8px;
        width: 5px;
        height: 5px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle-label {
        left: 23px;
        right: 10px;
        font-size: 10px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle-select,
    body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle-custom-trigger {
        padding-left: 23px;
        padding-right: 10px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 10px;
        line-height: 20px;
    }

    html[data-theme-preset] body.home-header-shell.photo-ai3d-reference-page .loginArea > .theme-toggle:not(.theme-toggle--mobile) {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        height: 20px !important;
        min-height: 20px !important;
        overflow: hidden !important;
    }

    html[data-theme-preset] body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle-label {
        left: 23px !important;
        right: 9px !important;
        font-size: 10px !important;
    }

    html[data-theme-preset] body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle-select,
    html[data-theme-preset] body.home-header-shell.photo-ai3d-reference-page .loginArea .theme-toggle-custom-trigger {
        width: 100% !important;
        max-width: 100% !important;
        height: 18px !important;
        min-height: 18px !important;
        padding-left: 23px !important;
        padding-right: 9px !important;
        font-size: 10px !important;
        line-height: 18px !important;
        box-sizing: border-box !important;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerUserStack,
    body.home-header-shell.photo-ai3d-reference-page .loginArea .loginBtn {
        grid-column: 4;
        grid-row: 1 / span 2;
        align-self: center;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerUserStack {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    body.home-header-shell.photo-ai3d-reference-page .loginArea .headerUserStack .topIntegralBadge {
        width: max-content;
        min-width: 44px;
        max-width: none;
        align-self: center;
    }
}

body:has(.xl-home) .loarea .wp,
body.home-header-shell .loarea .wp {
    width: var(--home-shell-width) !important;
    max-width: none !important;
}



/* inlined css/home-header.part-02.css */
@media screen and (max-width: 767px) {
    body:has(.xl-home) .loarea .wp,
    body.home-header-shell .loarea .wp {
        padding-right: 56px !important;
        box-sizing: border-box;
    }

    body:has(.xl-home) .loginArea,
    body.home-header-shell .loginArea {
        position: absolute;
        top: 50%;
        right: 58px;
        max-width: calc(100% - clamp(120px, 42vw, 180px) - 62px);
        min-width: 0;
        overflow: visible;
        justify-content: flex-end;
        gap: 4px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 214748250;
    }

    body:has(.xl-home) .loginArea .headerUserStack,
    body:has(.xl-home) .loginArea .avatarBtn,
    body:has(.xl-home) .loginArea .loginBtn,
    body.home-header-shell .loginArea .headerUserStack,
    body.home-header-shell .loginArea .avatarBtn,
    body.home-header-shell .loginArea .loginBtn {
        pointer-events: auto;
    }

    body:has(.xl-home) .menubtn,
    body.home-header-shell .menubtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        top: calc((var(--home-header-height, 60px) - 44px) / 2);
        right: max(12px, env(safe-area-inset-right));
        z-index: 214748302;
    }

    body:has(.xl-home) .inav,
    body.home-header-shell .inav {
        width: min(84vw, 360px);
        max-width: 360px;
        font-size: 14px;
        line-height: 1.6;
    }
}

@media screen and (max-width: 520px) {
    body:has(.xl-home) .couponCodeBadge,
    body.home-header-shell .couponCodeBadge {
        display: none;
    }
}

@media screen and (max-width: 430px) {
    body:has(.xl-home) .theme-toggle:not(.theme-toggle--mobile),
    body.home-header-shell .theme-toggle:not(.theme-toggle--mobile) {
        display: none;
    }
}

html[data-theme="light"] body.home-header-shell .loarea,
html[data-theme="light"] body:has(.xl-home) .loarea {
    background: rgba(248, 252, 255, 0.9);
    border-bottom: 1px solid rgba(72, 119, 190, 0.14);
    box-shadow:
        0 14px 34px rgba(39, 73, 120, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

html[data-theme="light"] body.home-header-shell .logo .logo-text,
html[data-theme="light"] body:has(.xl-home) .logo .logo-text {
    color: #153050;
    text-shadow: none;
}

html[data-theme="light"] body.home-header-shell .navul li > a,
html[data-theme="light"] body:has(.xl-home) .navul li > a {
    color: #38516f;
}

html[data-theme="light"] body.home-header-shell .navul li > a:hover,
html[data-theme="light"] body.home-header-shell .navul li > a.act_nav,
html[data-theme="light"] body:has(.xl-home) .navul li > a:hover,
html[data-theme="light"] body:has(.xl-home) .navul li > a.act_nav {
    color: #1f6ed4 !important;
}

html[data-theme="light"] body.home-header-shell .couponCodeBadge,
html[data-theme="light"] body:has(.xl-home) .couponCodeBadge,
html[data-theme="light"] body.home-header-shell #siteLangSelect,
html[data-theme="light"] body:has(.xl-home) #siteLangSelect,
html[data-theme="light"] body.home-header-shell .theme-toggle,
html[data-theme="light"] body:has(.xl-home) .theme-toggle {
    border-color: rgba(72, 119, 190, 0.22) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow:
        0 10px 24px rgba(42, 82, 138, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] body.home-header-shell #siteLangSelect,
html[data-theme="light"] body:has(.xl-home) #siteLangSelect {
    color: transparent !important;
    color-scheme: light !important;
}

html[data-theme="light"] body.home-header-shell #siteLangSelect option,
html[data-theme="light"] body:has(.xl-home) #siteLangSelect option {
    color: #18324f !important;
    background: #ffffff !important;
}

html[data-theme="light"] body.home-header-shell .langSwitch__label,
html[data-theme="light"] body:has(.xl-home) .langSwitch__label {
    color: #18324f !important;
}

html[data-theme="light"] body.home-header-shell .theme-toggle-label,
html[data-theme="light"] body:has(.xl-home) .theme-toggle-label {
    color: #36506e !important;
}

html[data-theme="light"] body.home-header-shell .theme-toggle-select,
html[data-theme="light"] body:has(.xl-home) .theme-toggle-select {
    color: transparent !important;
    color-scheme: light !important;
}

html[data-theme="light"] body.home-header-shell .topIntegralBadge,
html[data-theme="light"] body:has(.xl-home) .topIntegralBadge {
    border-color: rgba(213, 156, 41, 0.24);
    color: #5b3d10;
    background: rgba(255, 244, 204, 0.92);
}

html[data-theme="light"] body.home-header-shell .header,
html[data-theme="light"] body:has(.xl-home) .header {
    background:
        linear-gradient(180deg, rgba(248, 252, 255, 0.94) 0%, rgba(237, 246, 255, 0.9) 100%) !important;
    border-bottom: 1px solid rgba(72, 119, 190, 0.14) !important;
    box-shadow:
        0 14px 34px rgba(39, 73, 120, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

html[data-theme="light"] body.home-header-shell .loginArea .couponCodeBadge,
html[data-theme="light"] body:has(.xl-home) .loginArea .couponCodeBadge {
    color: #18324f !important;
    text-shadow: none !important;
}

html[data-theme="light"] body.home-header-shell .loginArea .couponCodeBadge:hover,
html[data-theme="light"] body:has(.xl-home) .loginArea .couponCodeBadge:hover {
    color: #0f3974 !important;
    background: rgba(228, 240, 255, 0.9) !important;
}

html[data-theme="light"] body.home-header-shell .theme-toggle::after,
html[data-theme="light"] body:has(.xl-home) .theme-toggle::after {
    border-color: rgba(47, 83, 125, 0.78) !important;
}

html[data-theme-preset] body.home-header-shell .loarea,
html[data-theme-preset] body:has(.xl-home) .loarea,
html[data-theme-preset] body.home-header-shell .header,
html[data-theme-preset] body:has(.xl-home) .header {
    border-bottom-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    background: var(--xl-theme-panel, #11100d) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
        0 14px 34px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 70%, transparent),
        inset 0 -1px 0 var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
}

html[data-theme-preset] body.home-header-shell .logo .logo-text,
html[data-theme-preset] body:has(.xl-home) .logo .logo-text,
html[data-theme-preset] body.home-header-shell .navul li > a,
html[data-theme-preset] body:has(.xl-home) .navul li > a {
    color: var(--xl-theme-muted, #ffefc0) !important;
}

html[data-theme-preset] body.home-header-shell .logo .logo-text,
html[data-theme-preset] body:has(.xl-home) .logo .logo-text {
    -webkit-text-fill-color: var(--xl-theme-muted, #ffefc0) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow:
        0 2px 12px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 2px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 36%, transparent) !important;
}

html[data-theme-preset] body.home-header-shell .navul li > a:hover,
html[data-theme-preset] body.home-header-shell .navul li > a.act_nav,
html[data-theme-preset] body:has(.xl-home) .navul li > a:hover,
html[data-theme-preset] body:has(.xl-home) .navul li > a.act_nav {
    color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] body.home-header-shell .couponCodeBadge,
html[data-theme-preset] body:has(.xl-home) .couponCodeBadge,
html[data-theme-preset] body.home-header-shell #siteLangSelect,
html[data-theme-preset] body:has(.xl-home) #siteLangSelect,
html[data-theme-preset] body.home-header-shell .theme-toggle,
html[data-theme-preset] body:has(.xl-home) .theme-toggle {
    border-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    background: var(--xl-theme-popup, #15130f) !important;
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 70%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 14%, transparent) !important;
}

html[data-theme-preset] body.home-header-shell .theme-toggle-label,
html[data-theme-preset] body:has(.xl-home) .theme-toggle-label,
html[data-theme-preset] body.home-header-shell .langSwitch__label,
html[data-theme-preset] body:has(.xl-home) .langSwitch__label {
    color: var(--xl-theme-fg, #e0d9c8) !important;
}

html[data-theme-preset] body.home-header-shell .theme-toggle::after,
html[data-theme-preset] body:has(.xl-home) .theme-toggle::after {
    border-color: var(--xl-theme-muted, #ffefc0) !important;
}

html[data-theme-preset] body.home-header-shell .inav,
html[data-theme-preset] body:has(.xl-home) .inav {
    background: var(--xl-theme-bg, #0a0a0a) !important;
    color: var(--xl-theme-fg, #e0d9c8) !important;
}


/* inlined css/home-header.logo-compat.css */
@media screen and (max-width: 1180px) and (min-width: 768px) {
    body:has(.xl-home) .logo .logo-text,
    body.home-header-shell .logo .logo-text {
        /* HOME_HEADER_LOGO_MEDIUM_WIDTH_GUARD */
        flex: 0 0 auto;
        max-width: 108px;
        font-size: 26px !important;
        letter-spacing: 0.3px !important;
    }
}


/* inlined css/home-header-9x16-legacy-fallback.css */
/* HOME_HEADER_9X16_LEGACY_FALLBACK_GUARD: Edge 100 readable login button for near-9:16 portrait windows. */
@media screen and (max-width: 430px) and (orientation: portrait) and (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/15) {
    html[data-theme-preset] body.home-page-shell .loginArea .loginBtn,
    body.home-page-shell .loginArea .loginBtn,
    body.home-header-shell .loginArea .loginBtn {
        color: #f7fbff !important;
        background: rgba(18, 36, 68, .92) !important;
        border-color: rgba(139, 184, 255, .7) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
    }
}

/* source: public/static/css/animate-effects.css */
/* inlined public/static/css/animate-effects/animate-effects-01.css */

/* inlined public/static/css/animate-effects/animate-effects-01.part-01.css */
/**
 * 全站 UI 动态效果样式库 V2.0
 * 大胆创新 · 科技感 · 沉浸式体验
 *
 * @version 2.0.0
 * @date 2026-05-04
 */
/* ============================================
   1. CSS 变量定义 - 增强版
   ============================================ */
:root {
    /* 弹性缓动曲线 - 弹簧回弹效果 */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: var(--ease-bounce);
    --ease-bounce-fast: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-wobble: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-elastic: cubic-bezier(0.5, 1.5, 0.75, 1.25);
    /* 夸张弹性曲线 */
    --ease-super-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-jelly: cubic-bezier(0.2, 0.8, 0.4, 1.6);
    --ease-snap: cubic-bezier(0.0, 0.65, 0.35, 1.0);
    /* 渐变动画 */
    --gradient-shift: linear-gradient(135deg,
        rgba(100, 180, 255, 0.8) 0%,
        rgba(140, 100, 255, 0.6) 25%,
        rgba(100, 255, 200, 0.5) 50%,
        rgba(255, 100, 180, 0.4) 75%,
        rgba(100, 180, 255, 0.8) 100%
    );
    /* 粒子颜色 */
    --particle-color-1: rgba(140, 200, 255, 0.6);
    --particle-color-2: rgba(100, 180, 255, 0.5);
    --particle-color-3: rgba(150, 200, 255, 0.8);
    --particle-color-4: rgba(100, 160, 255, 0.3);
    /* 发光颜色 - 更鲜艳 */
    --glow-primary: rgba(100, 180, 255, 0.6);
    --glow-secondary: rgba(100, 200, 255, 0.8);
    --glow-pink: rgba(255, 100, 180, 0.5);
    --glow-purple: rgba(180, 100, 255, 0.5);
    --glow-green: rgba(100, 255, 200, 0.5);
    /* 流光颜色 */
    --shine-color: rgba(100, 200, 255, 0.8);
    --shine-gold: rgba(255, 200, 100, 0.6);
    /* 动画时长 - 加快响应 */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    /* 3D 透视 */
    --perspective: 1000px;
}
/* ============================================
   2. 动态渐变背景
   ============================================ */
/* 全页动态渐变 */
.xl-dynamic-bg {
    background: linear-gradient(
        -45deg,
        rgba(30, 60, 120, 0.9) 0%,
        rgba(40, 80, 160, 0.8) 25%,
        rgba(60, 40, 120, 0.85) 50%,
        rgba(80, 50, 140, 0.8) 75%,
        rgba(30, 60, 120, 0.9) 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}
/* 强制全站背景透明 - 确保粒子效果可见 */
body {
    background: transparent !important;
}
/* 全局粒子容器定位上下文 - 确保粒子相对于页面定位 */
body {
    position: relative;
}
/* Global motion layers must stay behind real UI. */
.xl-starfield,
.xl-aurora-bg,
.xl-light-streaks,
.xl-particle-canvas {
    z-index: 0 !important;
}
.loarea,
.header,
.i_main,
main,
.membership-page,
.xl-home,
.mytg-page,
.announcement-page,
.fb-page,
.c_main {
    position: relative;
    z-index: 2;
}
/* 全局粒子容器样式 */
.hero-particles-bg,
.hero-particles-mid,
.hero-particles-fg,
.hero-light-spots,
.hero-trails {
    position: fixed !important;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
/* 粒子激活状态 - 增加初始可见性 */
.hero-particle-bg,
.hero-particle-mid,
.hero-particle-fg,
.hero-light-spot,
.hero-trail-dynamic {
    will-change: transform, opacity;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* 彩虹光晕效果 */
.xl-rainbow-glow {
    position: relative;
}
.xl-rainbow-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        45deg,
        #ff0080, #ff8000, #ffff00, #00ff80, #00ffff, #8000ff, #ff0080
    );
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rainbowBorder 3s linear infinite;
    filter: blur(8px);
}
.xl-rainbow-glow:hover::before {
    opacity: 0.6;
}
@keyframes rainbowBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
/* ============================================
   3. 3D 卡片悬浮效果
   ============================================ */
[data-animate-3d],
.xl-3d-card,
.card-3d {
    transform-style: preserve-3d;
    perspective: var(--perspective);
    /* 由各自组件的 motion token 接管 transition，避免与首页卡片 hover 平移冲突 */
}
/* 仅 .xl-3d-card / .card-3d 显式 3D 卡片才启用大幅 3D 翻转；普通 .xl-tool-card 不再走这条 */
.xl-3d-card:hover,
.card-3d:hover {
    transform: translateY(-8px) rotateX(5deg) rotateY(-5deg);
    box-shadow:
        0 20px 40px rgba(100, 180, 255, 0.3),
        0 0 60px rgba(100, 180, 255, 0.15);
}
/* 3D 卡片子元素 */
[data-animate-3d] .card-front,
.xl-3d-card .card-front,
.card-3d .card-front {
    transform: translateZ(30px);
    transition: transform 0.3s var(--ease-elastic);
}
[data-animate-3d]:hover .card-front,
.xl-3d-card:hover .card-front,
.card-3d:hover .card-front {
    transform: translateZ(50px);
}
[data-animate-3d] .card-back,
.xl-3d-card .card-back,
.card-3d .card-back {
    transform: translateZ(-30px);
    transition: transform 0.3s var(--ease-elastic);
}
[data-animate-3d]:hover .card-back,
.xl-3d-card:hover .card-back,
.card-3d:hover .card-back {
    transform: translateZ(-50px);
}
/* ============================================
   4. 鼠标跟随高光效果
   ============================================ */
.xl-follow-glow {
    position: relative;
    overflow: hidden;
}
.xl-follow-glow::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(100, 200, 255, 0.4) 0%,
        rgba(100, 200, 255, 0.1) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.xl-follow-glow:hover::after {
    opacity: 1;
}
/* ============================================
   5. 粒子样式
   ============================================ */
/* 全局粒子容器 */
.xl-particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
/* 背景层粒子 */
.hero-particle-bg {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color-1);
    box-shadow: 0 0 8px var(--particle-color-1), 0 0 15px var(--particle-color-1);
    opacity: 0;
    animation: particleRise linear forwards;
}
/* 中景层粒子 */


/* inlined public/static/css/animate-effects/animate-effects-01.part-02.css */
.hero-particle-mid {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color-2);
    box-shadow: 0 0 12px var(--particle-color-2), 0 0 20px var(--particle-color-2);
    opacity: 0;
    animation: particleExpand ease-out forwards;
}
/* 前景层粒子 */
.hero-particle-fg {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color-3);
    box-shadow: 0 0 15px var(--particle-color-3), 0 0 25px var(--particle-color-3);
    opacity: 0;
    animation: particleGrow ease-out forwards;
}
/* 光斑粒子 */
.hero-light-spot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--particle-color-4), transparent);
    opacity: 0;
    animation: spotDrift linear forwards;
}
/* 能量轨迹 */
.hero-trail-dynamic {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--particle-color-3) 30%,
        var(--particle-color-1) 70%,
        transparent 100%
    );
    border-radius: 2px;
    opacity: 0;
    transform-origin: left center;
    transform: rotate(var(--angle, 0deg)) translateX(0);
    animation: trailFlash ease-out forwards;
}
/* ============================================
   6. 夸张入场动画
   ============================================ */
/* 弹跳入场 */
[data-animate-bounce],
.xl-bounce-in {
    animation: bounceIn 0.8s var(--ease-super-bounce) forwards;
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }
    50% {
        transform: scale(1.1) rotate(3deg);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
/* 旋转缩放入场 */
[data-animate-spin-in],
.xl-spin-in {
    animation: spinIn 0.6s var(--ease-elastic) forwards;
}
@keyframes spinIn {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}
/* 摇摆入场 */
[data-animate-wobble],
.xl-wobble-in {
    animation: wobbleIn 1s var(--ease-wobble) forwards;
}
@keyframes wobbleIn {
    0% {
        opacity: 0;
        transform: translateY(-100px) rotate(-20deg);
    }
    60% {
        transform: translateY(10px) rotate(5deg);
    }
    80% {
        transform: translateY(-5px) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}
/* 果冻抖动 */
[data-animate-jelly].is-jelly-active,
.xl-jelly.is-jelly-active {
    animation: jelly 0.6s var(--ease-jelly);
}
@keyframes jelly {
    0% { transform: scale(1, 1); }
    20% { transform: scale(1.15, 0.85); }
    30% { transform: scale(0.9, 1.1); }
    40% { transform: scale(1.05, 0.95); }
    50% { transform: scale(0.98, 1.02); }
    60% { transform: scale(1.01, 0.99); }
    100% { transform: scale(1, 1); }
}
/* 脉冲入场 */
[data-animate-punch],
.xl-punch-in {
    animation: punchIn 0.5s var(--ease-snap) forwards;
}
@keyframes punchIn {
    0% {
        opacity: 0;
        transform: scale(2);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}
/* ============================================
   7. 悬停夸张效果
   ============================================ */
/* 卡片悬停夸张发光 */
[data-animate-card]:hover,
.card-hover:hover {
    box-shadow:
        0 0 40px var(--glow-primary),
        0 0 80px rgba(100, 180, 255, 0.4),
        0 0 120px rgba(100, 180, 255, 0.2),
        inset 0 0 30px rgba(100, 200, 255, 0.1);
    transform: translateY(-8px) scale(1.03);
}
/* 按钮悬停果冻效果 */



/* inlined public/static/css/animate-effects/animate-effects-02.css */

/* inlined public/static/css/animate-effects/animate-effects-02.part-01.css */
.btn-ripple:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px var(--glow-primary);
}
[data-animate-ripple]:active,
.btn-ripple:active {
    transform: scale(0.92);
}
/* 链接悬停效果 */
a[data-animate-link],
.xl-link-animate {
    position: relative;
    transition: all 0.3s var(--ease-bounce);
}
a[data-animate-link]::after,
.xl-link-animate::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--glow-secondary);
    transition: width 0.3s var(--ease-bounce);
    border-radius: 2px;
}
a[data-animate-link]:hover::after,
.xl-link-animate:hover::after {
    width: 100%;
}
/* ============================================
   8. 交错动画序列
   ============================================ */
/* 波浪动画 */
.xl-wave-sequence > *,
[data-animate-wave] > * {
    animation: waveItem 1.5s var(--ease-bounce) infinite;
}
.xl-wave-sequence > *:nth-child(1),
[data-animate-wave] > *:nth-child(1) { animation-delay: 0s; }
.xl-wave-sequence > *:nth-child(2),
[data-animate-wave] > *:nth-child(2) { animation-delay: 0.1s; }
.xl-wave-sequence > *:nth-child(3),
[data-animate-wave] > *:nth-child(3) { animation-delay: 0.2s; }
.xl-wave-sequence > *:nth-child(4),
[data-animate-wave] > *:nth-child(4) { animation-delay: 0.3s; }
.xl-wave-sequence > *:nth-child(5),
[data-animate-wave] > *:nth-child(5) { animation-delay: 0.4s; }
.xl-wave-sequence > *:nth-child(6),
[data-animate-wave] > *:nth-child(6) { animation-delay: 0.5s; }
@keyframes waveItem {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
/* 弹跳序列 */
.xl-bounce-sequence > *,
[data-animate-bounce-seq] > * {
    animation: bounceSeqItem 0.8s var(--ease-super-bounce) infinite;
}
.xl-bounce-sequence > *:nth-child(1),
[data-animate-bounce-seq] > *:nth-child(1) { animation-delay: 0s; }
.xl-bounce-sequence > *:nth-child(2),
[data-animate-bounce-seq] > *:nth-child(2) { animation-delay: 0.15s; }
.xl-bounce-sequence > *:nth-child(3),
[data-animate-bounce-seq] > *:nth-child(3) { animation-delay: 0.3s; }
.xl-bounce-sequence > *:nth-child(4),
[data-animate-bounce-seq] > *:nth-child(4) { animation-delay: 0.45s; }
@keyframes bounceSeqItem {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25px); }
}
/* ============================================
   3. 动画关键帧
   ============================================ */
/* 粒子上升 - 增强可见性 */
@keyframes particleRise {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }
    10% {
        opacity: 0.9;
    }
    85% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(var(--rise-y, -100px)) translateX(var(--drift-x, 0));
    }
}
/* 粒子扩散 - 增强可见性 */
@keyframes particleExpand {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: translate(
            var(--mid-x, 0),
            var(--mid-y, 0)
        ) scale(1.5);
    }
}
/* 粒子生长 - 增强可见性 */
@keyframes particleGrow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(
            var(--end-x, 0),
            var(--end-y, 0)
        ) scale(0.3);
    }
}
/* 光斑漂移 */
@keyframes spotDrift {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.8);
    }
    20% {
        opacity: 0.9;
        transform: translate(calc(var(--end-x, 0) * 0.3), calc(var(--end-y, 0) * 0.3)) scale(1);
    }
    80% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translate(var(--end-x, 0), var(--end-y, 0)) scale(0.5);
    }
}
/* 轨迹闪烁 */
@keyframes trailFlash {
    0% {
        opacity: 0;
        transform: rotate(var(--angle, 0deg)) translateX(0);
        width: 0;
    }
    20% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--angle, 0deg)) translateX(var(--length, 100px));
        width: var(--length, 100px);
    }
}
/* ============================================
   4. 交互反馈 - 卡片效果
   ============================================ */
/* 卡片悬停发光 */
[data-animate-card],
.card-hover {
    transition: box-shadow var(--duration-normal) var(--ease-bounce),
                transform var(--duration-normal) var(--ease-bounce);
}
[data-animate-card]:hover,
.card-hover:hover {
    box-shadow: 0 0 30px var(--glow-primary),
                0 0 60px rgba(100, 180, 255, 0.2);
    transform: translateY(-4px) scale(1.02);
}
/* 卡片流光效果 */
[data-animate-shine],
.card-shine {
    position: relative;
    overflow: hidden;
}
[data-animate-shine]::before,
.card-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--shine-color) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: none;
}
[data-animate-shine]:hover::before,
.card-shine:hover::before {
    animation: shineSweep var(--duration-slower) var(--ease-bounce);
}
@keyframes shineSweep {
    0% {
        left: -100%;
        opacity: 0.8;
    }
    100% {
        left: 200%;
        opacity: 0;
    }
}
/* ============================================
   5. 交互反馈 - 按钮涟漪
   ============================================ */
/* 涟漪容器：
 * JS 会给 button:not(.no-ripple) 绑 click 涟漪；
 * 容器必须 position:relative + overflow:hidden，否则 left/top 会相对错误祖先，表现为反馈点不准。 */
[data-animate-ripple],
.btn-ripple,
button:not(.no-ripple) {
    position: relative;
    overflow: hidden;
}
/* 涟漪效果 */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: var(--glow-secondary);
    transform: scale(0);
    animation: rippleExpand var(--duration-slower) var(--ease-bounce) forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


/* inlined public/static/css/animate-effects/animate-effects-02.part-02.css */
/* ============================================
   6. 交互反馈 - 输入框聚焦
   ============================================ */
/* 输入框流光 */
[data-animate-focus],
.input-glow {
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}
[data-animate-focus]:focus,
.input-glow:focus {
    border-color: var(--glow-secondary);
    box-shadow: 0 0 10px rgba(100, 200, 255, 0.3);
}
/* 输入框底部流光线条 */
[data-animate-line],
.input-line {
    position: relative;
}
[data-animate-line]::after,
.input-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--shine-color) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-bounce);
}
[data-animate-line]:focus::after,
.input-line:focus::after {
    transform: scaleX(1);
    animation: lineFlow 1s linear infinite;
}
@keyframes lineFlow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}
/* ============================================
   7. 入场动画
   ============================================ */
/* 默认入场 - 从下弹入 */
[data-animate-enter],
.animate-enter {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-bounce),
                transform var(--duration-slow) var(--ease-bounce);
}
[data-animate-enter].is-visible,
.animate-enter.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 入场 - 从左滑入 */
[data-animate-enter="left"],
.animate-enter-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--duration-slow) var(--ease-bounce),
                transform var(--duration-slow) var(--ease-bounce);
}
[data-animate-enter="left"].is-visible,
.animate-enter-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* 入场 - 从右滑入 */
[data-animate-enter="right"],
.animate-enter-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--duration-slow) var(--ease-bounce),
                transform var(--duration-slow) var(--ease-bounce);
}
[data-animate-enter="right"].is-visible,
.animate-enter-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* 入场 - 缩放弹入 */
[data-animate-enter="scale"],
.animate-enter-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--duration-slow) var(--ease-bounce),
                transform var(--duration-slow) var(--ease-bounce);
}
[data-animate-enter="scale"].is-visible,
.animate-enter-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}
/* 入场错开延迟 */
.animate-stagger > [data-animate-enter],
.animate-stagger > .animate-enter {
    transition-delay: calc(var(--stagger-index, 0) * 50ms);
}
/* ============================================
   8. 滚动驱动动画
   ============================================ */
/* 滚动渐入弹入 */
[data-animate-scroll],
.animate-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 500ms var(--ease-bounce),
                transform 500ms var(--ease-bounce);
}
[data-animate-scroll].is-visible,
.animate-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}



/* inlined public/static/css/animate-effects/animate-effects-03.css */
/* 滚动淡入 */
[data-animate-fade],
.animate-fade {
    opacity: 0;
    transition: opacity 400ms ease;
}

[data-animate-fade].is-visible,
.animate-fade.is-visible {
    opacity: 1;
}

/* ============================================
   9. 通知滑入
   ============================================ */

/* 滑入容器 */
[data-animate-slide],
.animate-slide {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity var(--duration-normal) var(--ease-bounce),
                transform var(--duration-normal) var(--ease-bounce);
}

[data-animate-slide].is-visible,
.animate-slide.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 滑入方向变体 */
[data-animate-slide="right"],
.animate-slide-right {
    transform: translateX(100%);
}

[data-animate-slide="top"],
.animate-slide-top {
    transform: translateY(-100%);
}

[data-animate-slide="bottom"],
.animate-slide-bottom {
    transform: translateY(100%);
}

/* ============================================
   10. 背景光效
   ============================================ */

/* 全局光晕 */
.xl-bg-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
    background: radial-gradient(
        ellipse 60% 50% at 30% 40%,
        rgba(60, 130, 255, 0.4),
        transparent
    );
    transition: opacity 2s ease;
}

/* 鼠标跟随光效 */
.xl-mouse-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(100, 180, 255, 0.15) 0%,
        rgba(100, 180, 255, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ============================================
   11. 加载状态
   ============================================ */

/* 脉冲动画 */
.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 旋转加载 */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 弹跳加载 */
.animate-bounce {
    animation: bounce 0.6s var(--ease-bounce) infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px);
    }
}

/* ============================================
   12. 按钮交互
   ============================================ */

/* 按钮弹性缩放 */
[data-animate-btn],
.btn-animate {
    transition: transform var(--duration-fast) var(--ease-bounce),
                box-shadow var(--duration-fast) ease;
}

[data-animate-btn]:hover,
.btn-animate:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--glow-primary);
}

[data-animate-btn]:active,
.btn-animate:active {
    transform: scale(0.95);
}

/* ============================================
   13. 列表动画
   ============================================ */

/* 列表项交错动画 */
.animate-list-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-bounce),
                transform var(--duration-slow) var(--ease-bounce);
}

.animate-list-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   14. 科技星空背景
   ============================================ */

/* 星空容器 */
.xl-star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 星点 */
.xl-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.6;
    animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* ============================================
   15. prefers-reduced-motion 降级
   ============================================ */

/* prefers-reduced-motion 全局压制规则已移除（项目要求强制保留动画活力）
   原规则：把所有 animation/transition 压成 0.01ms。
   保留媒体查询块作为占位，便于将来按需精细化处理（如只关键性元素）。*/
@media all {
    /* 占位：不再压制全站动画 */
}

/* ============================================
   16. 移动端优化
   ============================================ */

@media (max-width: 768px) {
    .hero-particle-bg {
        display: none;
    }

    .hero-particle-mid {
        max-count: 30;
    }

    .xl-mouse-glow {
        display: none;
    }
}

/* source: css/home/home-theme-preset.css */
html[data-theme-preset] {
    --home-bg: var(--xl-theme-bg, #0a0a0a);
    --home-bg-soft: var(--xl-theme-panel, #11100d);
    --home-panel: var(--xl-theme-panel, #11100d);
    --home-panel-soft: var(--xl-theme-popup, #15130f);
    --home-line: color-mix(in srgb, var(--xl-theme-border, #211c10) 76%, transparent);
    --home-line-strong: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 42%, transparent);
    --home-text: var(--xl-theme-fg, #e0d9c8);
    --home-muted: var(--xl-theme-muted, #ffefc0);
    --home-faint: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 62%, var(--xl-theme-bg, #0a0a0a));
    --home-blue: var(--xl-theme-accent, #d4a843);
    --home-cyan: var(--xl-theme-accent-2, #d4a843);
    --home-gold: var(--xl-theme-accent, #d4a843);
    --home-on-accent: var(--xl-theme-on-accent, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 88%, #000));
    --home-accent-surface: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, var(--xl-theme-popup, #15130f));
    --home-accent-surface-strong: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, var(--xl-theme-panel, #11100d));
    --home-accent-glow: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    --home-accent-glow-soft: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent);
    --home-hero-btn-fg: var(--xl-theme-on-accent, #0a0a0a);
    --home-hero-btn-start: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 99%, #fff);
    --home-hero-btn-end: color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 94%, #fff);
    --home-hero-btn-border: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 84%, color-mix(in srgb, #ffffff 18%, transparent));
}

html[data-theme-preset] body.home-page-shell {
    background: var(--home-bg) !important;
    color: var(--home-text);
}

html[data-theme-preset] body.home-page-shell .header,
html[data-theme-preset] body.home-page-shell .loarea,
html[data-theme-preset] body.home-page-shell .loarea .wp,
html[data-theme-preset] body.home-page-shell .loginArea,
html[data-theme-preset] body.home-page-shell .theme-toggle,
html[data-theme-preset] body.home-page-shell .theme-toggle--custom-open {
    position: relative;
    overflow: visible;
    z-index: 214748320;
}

html[data-theme-preset] .xl-home {
    color: var(--home-text);
    background:
        radial-gradient(ellipse 72% 45% at 50% 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 62%),
        radial-gradient(ellipse 58% 42% at 8% 16%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 32%, transparent), transparent 58%),
        radial-gradient(ellipse 48% 38% at 90% 12%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 12%, transparent), transparent 58%),
        linear-gradient(180deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 46%, var(--xl-theme-bg, #0a0a0a) 100%) !important;
}

html[data-theme-preset] .xl-home::before {
    opacity: 0.32;
    background-image:
        linear-gradient(color-mix(in srgb, var(--xl-theme-border, #211c10) 42%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--xl-theme-border, #211c10) 34%, transparent) 1px, transparent 1px),
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent) 0%, transparent 2%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 8%, transparent) 0%, transparent 1.5%);
}

html[data-theme-preset] .home-mouse-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent) 0%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 10%, transparent) 42%, transparent 72%);
}

html[data-theme-preset] .xl-hero {
    color: var(--home-text);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, var(--xl-theme-border, #211c10));
    background:
        radial-gradient(ellipse 72% 86% at 72% 47%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 64%),
        radial-gradient(ellipse 52% 62% at 52% 104%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 24%, transparent), transparent 70%),
        linear-gradient(155deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 56%, var(--xl-theme-popup, #15130f) 100%) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        inset 0 0 54px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 26px 80px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 72%, transparent),
        0 0 52px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent);
}

html[data-theme-preset] .xl-hero::before {
    background-image:
        radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 52%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle at 20% 76%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 42%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 46%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle at 77% 18%, color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 50%, transparent) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 88% 62%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent) 0 1px, transparent 1.5px);
}

html[data-theme-preset] .xl-hero::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 78%, transparent) 0%, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 36%, transparent) 40%, transparent 68%),
        radial-gradient(ellipse 90% 40% at 52% 104%, color-mix(in srgb, var(--xl-theme-popup, #15130f) 72%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 28% at 54% 2%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 62%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent);
}

html[data-theme-preset] .xl-hero-badge {
    color: var(--xl-theme-bg, #0a0a0a);
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8)));
    box-shadow:
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 30%, transparent);
}

html[data-theme-preset] .xl-hero p {
    color: color-mix(in srgb, var(--home-text) 82%, var(--home-muted) 18%);
    text-shadow:
        0 1px 10px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 42%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent);
}

html[data-theme-preset] .xl-tool-copy p,
html[data-theme-preset] .xl-notice-item p,
html[data-theme-preset] .xl-update-feature ul,
html[data-theme-preset] .xl-update-row {
    color: color-mix(in srgb, var(--home-text) 64%, var(--home-muted) 36%);
}

html[data-theme-preset] .xl-hero-brand,
html[data-theme-preset] .xl-section-title h2,
html[data-theme-preset] .xl-side-head h2,
html[data-theme-preset] .xl-tool-copy h3,
html[data-theme-preset] .xl-notice-item h3,
html[data-theme-preset] .xl-update-feature h3 {
    color: var(--home-text);
    text-shadow: 0 2px 16px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent);
}

html[data-theme-preset] .xl-section-title {
    border-bottom-color: var(--home-line);
}

html[data-theme-preset] .xl-section-title span,
html[data-theme-preset] .xl-notice-dot {
    background: linear-gradient(180deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, var(--xl-theme-bg, #0a0a0a)));
    box-shadow: 0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
}

html[data-theme-preset] .banner .swiper-pagination-bullet {
    background: color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 76%, transparent);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 82%, #ffffff 18%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 22%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
}

html[data-theme-preset] .banner .swiper-pagination-bullet-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 88%, #fff), var(--xl-theme-accent, #d4a843));
    border-color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 32%, var(--xl-theme-accent, #d4a843));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 18%, transparent),
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
}

html[data-theme-preset] .xl-hero-btn,
html[data-theme-preset] .xl-hero-btn--photo {
    color: var(--home-hero-btn-fg);
    border-color: var(--home-hero-btn-border);
    background-color: var(--home-hero-btn-start);
    background:
        linear-gradient(135deg, color-mix(in srgb, #ffffff 12%, transparent), transparent 48%),
        linear-gradient(135deg, var(--home-hero-btn-start), var(--home-hero-btn-end));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 0 1px color-mix(in srgb, #000000 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    text-shadow: none;
    -webkit-text-stroke: 0;
}

html[data-theme-preset] .xl-tool-card,
html[data-theme-preset] .xl-side-card {
    color: var(--home-text);
    border-color: var(--home-line-strong);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 94%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 96%, transparent)),
        radial-gradient(ellipse 70% 50% at 15% 8%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent), transparent 42%),
        radial-gradient(ellipse 60% 40% at 85% 90%, color-mix(in srgb, var(--xl-theme-soft, #6b6040) 18%, transparent), transparent 35%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        0 14px 32px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 64%, transparent);
}

html[data-theme-preset] .xl-tool-section {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, var(--home-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 94%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 96%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        0 18px 42px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 58%, transparent);
}

html[data-theme-preset] .xl-category-rail-track {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 86%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 84%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        inset 4px 0 0 color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent),
        0 12px 30px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 48%, transparent);
}

html[data-theme-preset] .xl-category-rail-dot {
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 24%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 82%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 16%, transparent);
}

html[data-theme-preset] .xl-category-rail-label {
    color: color-mix(in srgb, var(--home-text) 84%, var(--xl-theme-accent, #d4a843) 16%);
    opacity: 0.8;
}

html[data-theme-preset] .xl-category-rail-link.is-passed .xl-category-rail-label {
    color: color-mix(in srgb, var(--xl-theme-accent-2, #f3c65d) 28%, #4cdf8a 72%);
    opacity: 0.94;
}

html[data-theme-preset] .xl-category-rail-link.is-active .xl-category-rail-label {
    color: color-mix(in srgb, #4dff9d 72%, var(--xl-theme-accent-2, #f3c65d) 28%);
    opacity: 1;
    font-size: 15px;
    text-shadow: 0 0 16px color-mix(in srgb, #4dff9d 32%, transparent);
}

html[data-theme-preset] .xl-category-rail-link:hover .xl-category-rail-dot,
html[data-theme-preset] .xl-category-rail-link:focus-visible .xl-category-rail-dot,
html[data-theme-preset] .xl-category-rail-link.is-active .xl-category-rail-dot {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, transparent);
    background: linear-gradient(180deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #f3c65d));
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 86%, transparent),
        0 0 0 8px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 0 20px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] .xl-tool-section:nth-of-type(2n) {
    border-color: color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 34%, var(--home-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-popup, #15130f) 90%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 96%, transparent));
}

html[data-theme-preset] .xl-tool-section:nth-of-type(2n + 1) {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, var(--home-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 96%, transparent), color-mix(in srgb, var(--xl-theme-popup, #15130f) 88%, transparent));
}

html[data-theme-preset] .xl-section-title--layered {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

html[data-theme-preset] .xl-section-title--layered span {
    background: linear-gradient(180deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #f3c65d));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] .xl-section-title--layered h2 {
    color: color-mix(in srgb, var(--home-text) 88%, var(--xl-theme-accent, #d4a843) 12%);
    font-size: 23px;
    font-size: clamp(21px, 1.44vw, 26px);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent);
}

html[data-theme-preset] .xl-section-title-hint {
    color: color-mix(in srgb, var(--home-text) 76%, var(--home-muted) 24%);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent);
    background: color-mix(in srgb, var(--xl-theme-popup, #15130f) 82%, transparent);
}

html[data-theme-preset] .xl-tool-card:hover,
html[data-theme-preset] .xl-home-side .xl-side-card:hover {
    /* HOME_TOOL_CARD_HOVER_PAINT_BUDGET */
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 62%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent),
        0 14px 32px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 64%, transparent);
}

html[data-theme-preset] .xl-tool-image {
    background:
        radial-gradient(circle at 62% 10%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 38%),
        linear-gradient(180deg, var(--xl-theme-popup, #15130f), var(--xl-theme-bg, #0a0a0a));
}

html[data-theme-preset] .xl-tool-info,
html[data-theme-preset] .xl-notice-list,
html[data-theme-preset] .xl-update-feature {
    color: var(--home-text);
    border-color: var(--home-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--xl-theme-panel, #11100d) 90%, transparent), color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 86%, transparent)),
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 34%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 7%, transparent),
        0 12px 30px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 46%, transparent);
}

html[data-theme-preset] .xl-tool-icon,
html[data-theme-preset] .xl-side-head svg {
    color: var(--xl-theme-bg, #0a0a0a);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 44%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 74%, var(--xl-theme-fg, #e0d9c8)), var(--xl-theme-accent, #d4a843));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 40%, transparent),
        0 14px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent);
}

html[data-theme-preset] .xl-tool-link,
html[data-theme-preset] .xl-side-head a,
html[data-theme-preset] .xl-update-feature > a,
html[data-theme-preset] .xl-update-topline strong,
html[data-theme-preset] .xl-update-row strong {
    color: color-mix(in srgb, var(--home-text) 74%, var(--home-muted) 26%);
    border-color: var(--home-line-strong);
    background: color-mix(in srgb, var(--xl-theme-popup, #15130f) 76%, transparent);
}

html[data-theme-preset] .xl-tool-link:hover,
html[data-theme-preset] .xl-side-head a:hover,
html[data-theme-preset] .xl-update-feature > a:hover {
    color: var(--home-text);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, var(--xl-theme-popup, #15130f));
}

html[data-theme-preset] .xl-time-section,
html[data-theme-preset] .xl-update-row {
    border-color: var(--home-line);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 6%, transparent), color-mix(in srgb, var(--xl-theme-popup, #15130f) 54%, transparent)),
        radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent), transparent 34%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 7%, transparent);
}

html[data-theme-preset] .xl-time-date,
html[data-theme-preset] .xl-time-date strong,
html[data-theme-preset] .xl-time-progress-head strong {
    color: var(--home-text);
}

html[data-theme-preset] .xl-time-month,
html[data-theme-preset] .xl-time-date span,
html[data-theme-preset] .xl-time-progress-head,
html[data-theme-preset] .xl-notice-item,
html[data-theme-preset] .xl-notice-item time {
    color: var(--home-muted);
}

html[data-theme-preset] .xl-side-section-updates,
html[data-theme-preset] .xl-notice-item {
    border-color: var(--home-line);
}

html[data-theme-preset] .xl-home-side .xl-notice-item:hover,
html[data-theme-preset] .xl-home-side .xl-notice-item:focus-visible,
html[data-theme-preset] .xl-home-side .xl-update-row:hover,
html[data-theme-preset] .xl-home-side .xl-update-row:focus-visible {
    color: var(--home-text);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, var(--xl-theme-popup, #15130f));
    box-shadow:
        0 14px 28px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 54%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent);
}

html[data-theme-preset] .home-page .act_nav,
html[data-theme-preset] .home-page-shell .act_nav,
html[data-theme-preset] .home-page .navul li > a:hover,
html[data-theme-preset] .home-page-shell .navul li > a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 42%, transparent);
}

html[data-theme-preset] .xl-hero-btn:hover {
    color: var(--home-hero-btn-fg);
    border-color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 36%, var(--xl-theme-accent, #d4a843));
    box-shadow:
        0 24px 50px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 50px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 18%, transparent),
        0 0 80px color-mix(in srgb, var(--xl-theme-soft, #6b6040) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 45%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 18%, transparent);
}

html[data-theme-preset] .xl-hero .hero-orbit-ring-1,
html[data-theme-preset] .xl-hero .hero-orbit-ring-2,
html[data-theme-preset] .xl-hero .hero-orbit-ring-3,
html[data-theme-preset] .xl-hero .hero-orbit-ring-4 {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 46%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 0 26px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent),
        inset 0 0 32px color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 7%, transparent);
}

html[data-theme-preset] .xl-hero .hero-orbits {
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent));
}

html[data-theme-preset] .xl-hero .hero-core::before {
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 78%, transparent) 0 2.5%, transparent 3.8%),
        radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent) 0 12%, transparent 27%),
        radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 70%, transparent) 0 0, color-mix(in srgb, var(--xl-theme-panel, #11100d) 78%, transparent) 34%, color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 88%, transparent) 100%);
}

html[data-theme-preset] .xl-hero .hero-ai-text {
    -webkit-text-stroke-color: color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 52%, transparent);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 96%, transparent) 0%,
        color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 82%, transparent) 25%,
        color-mix(in srgb, var(--xl-theme-accent, #d4a843) 70%, var(--xl-theme-fg, #e0d9c8)) 50%,
        color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 82%, transparent) 75%,
        color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 96%, transparent) 100%);
    filter:
        drop-shadow(0 0 20px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 52%, transparent))
        drop-shadow(0 0 40px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 28%, transparent))
        drop-shadow(0 2px 12px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 35%, transparent));
}

html[data-theme-preset] .xl-hero .hero-ai-text::before,
html[data-theme-preset] .xl-hero .hero-dust-particle {
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent);
}

html[data-theme-preset] .hero-glass-edge {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent), color-mix(in srgb, var(--xl-theme-accent, #d4a843) 10%, transparent) 32%, transparent 48%),
        linear-gradient(315deg, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 24%, transparent), transparent 30%),
        radial-gradient(circle at 98% 5%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 72%, transparent) 0 0.45%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 55%, transparent) 0.7%, transparent 3%);
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 48%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 26%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent),
        0 0 36px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
}

html[data-theme-preset] .hero-star-current {
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 12%, transparent) 24%, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 82%, transparent) 50%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 24%, transparent) 66%, transparent 100%);
    filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 68%, transparent))
        drop-shadow(0 0 22px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 34%, transparent));
}

/* HOME_FIXED_STATUS_BADGE_COLORS */
html[data-theme-preset] .xl-tool-free-badge {
    color: #42ff9b;
    border-color: rgba(79, 255, 157, 0.58);
    background: rgba(5, 28, 22, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(208, 255, 230, 0.24),
        0 0 18px rgba(52, 255, 143, 0.28);
}

html[data-theme-preset] .xl-update-topline span,
html[data-theme-preset] .xl-tool-new-badge,
html[data-theme-preset] .xl-badge-latest,
html[data-theme-preset] .xl-news-badge-latest {
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.68);
    background: rgba(39, 26, 6, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 190, 0.26),
        0 0 18px rgba(255, 190, 70, 0.26);
}
html[data-theme-preset] .xl-side-latest-badge {
    color: #42ff9b;
    border-color: rgba(96, 230, 150, 0.7);
    background: rgba(5, 28, 22, 0.9);
    box-shadow:
        0 0 12px rgba(52, 255, 143, 0.28),
        inset 0 1px 0 rgba(208, 255, 230, 0.22);
}
html[data-theme-preset] .xl-side-latest-badge::after {
    border-color: rgba(96, 230, 150, 0.28);
    background: radial-gradient(circle, rgba(66, 255, 155, 0.22) 0%, rgba(66, 255, 155, 0.08) 48%, transparent 70%);
}


html[data-theme-preset] .xl-tool-card:focus-visible,
html[data-theme-preset] .xl-side-card-link:focus-visible,
html[data-theme-preset] .xl-home-side .xl-notice-item:focus-visible,
html[data-theme-preset] .xl-home-side .xl-update-row:focus-visible {
    outline-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 68%, transparent);
}

html[data-theme-preset] .xl-tool-card:hover .xl-tool-icon {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 48%, transparent),
        inset 0 -8px 18px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 28%, transparent),
        0 14px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent),
        0 0 0 4px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
}

html[data-theme-preset] .xl-time-progress-track {
    background: rgba(255, 209, 102, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.12);
}

html[data-theme-preset] [data-progress-unit="day"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #ff8a72, #ff5d64);
    box-shadow: 0 0 12px rgba(255, 93, 100, 0.34);
}

html[data-theme-preset] [data-progress-unit="month"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #95e85b, #66d33a);
    box-shadow: 0 0 12px rgba(102, 211, 58, 0.34);
}

html[data-theme-preset] [data-progress-unit="year"] .xl-time-progress-track i {
    background: linear-gradient(90deg, #54dfe0, #28c7bb);
    box-shadow: 0 0 12px rgba(84, 223, 224, 0.34);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] .xl-time-progress-track {
        background: color-mix(in srgb, var(--xl-theme-muted, #ffefc0) 28%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 16%, transparent);
    }
}

html[data-theme-preset] .xl-update-topline span::after {
    border-color: rgba(255, 209, 102, 0.34);
    background: radial-gradient(circle, rgba(255, 190, 70, 0.26) 0%, rgba(255, 209, 102, 0.1) 48%, transparent 70%);
}



html[data-theme-preset] body.home-page-shell .xl-static-star,
html[data-theme-preset] body.home-page-shell .xl-star {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 88%, transparent), color-mix(in srgb, var(--xl-theme-accent, #d4a843) 45%, transparent));
    box-shadow:
        0 0 6px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent),
        0 0 12px color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 32%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-starfield {
    background:
        radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 20%, transparent) 0%, transparent 50%),
        linear-gradient(180deg, var(--xl-theme-bg, #0a0a0a) 0%, var(--xl-theme-panel, #11100d) 50%, var(--xl-theme-bg, #0a0a0a) 100%);
}

html[data-theme-preset] body.home-page-shell .xl-aurora-wave,
html[data-theme-preset] body.home-page-shell .xl-aurora-color,
html[data-theme-preset] body.home-page-shell .xl-light-streak {
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent) 24%,
        color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 48%, transparent) 50%,
        color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 26%, transparent) 76%,
        transparent 100%
    );
}

html[data-theme-preset] body.home-page-shell .xl-cursor-aura {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent) 0%,
        color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 14%, transparent) 30%,
        color-mix(in srgb, var(--xl-theme-soft, #6b6040) 10%, transparent) 50%,
        transparent 70%
    );
}

html[data-theme-preset] body.home-page-shell .xl-cursor-aura::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 60%, transparent) 0%, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, transparent) 40%, transparent 70%);
}

html[data-theme-preset] body.home-page-shell .xl-energy-ripple {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 55%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-energy-ripple::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent) 0%, transparent 60%);
}

html[data-theme-preset] body.home-page-shell .xl-scroll-progress {
    background: linear-gradient(90deg, var(--xl-theme-accent, #d4a843) 0%, color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 70%, var(--xl-theme-fg, #e0d9c8)) 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 45%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-back-to-top {
    color: var(--home-text);
    border-color: var(--home-line-strong);
    background: color-mix(in srgb, var(--xl-theme-popup, #15130f) 84%, transparent);
}

html[data-theme-preset] body.home-page-shell .xl-back-to-top:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 54%, transparent);
    background: var(--home-accent-surface-strong);
    box-shadow: 0 0 30px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 32%, transparent);
}

html[data-theme-preset] body.home-page-shell .langSwitch::before,
html[data-theme-preset] body.home-page-shell .langSwitch::after,
html[data-theme-preset] body.home-page-shell .theme-toggle:not(.theme-toggle--mobile)::before,
html[data-theme-preset] body.home-page-shell .theme-toggle:not(.theme-toggle--mobile)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

html[data-theme-preset] body.home-page-shell .theme-toggle:hover,
html[data-theme-preset] body.home-page-shell .theme-toggle:focus-within,
html[data-theme-preset] body.home-page-shell #siteLangSelect:focus,
html[data-theme-preset] body.home-page-shell .couponCodeBadge:hover,
html[data-theme-preset] body.home-page-shell .topIntegralBadge:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 66%, transparent) !important;
    color: var(--xl-theme-fg, #e0d9c8);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 14%, transparent),
        0 0 0 3px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 14%, transparent),
        0 14px 30px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 58%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .loginArea .loginBtn {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 66%, transparent) !important;
    color: var(--home-on-accent) !important;
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8))) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 26%, transparent),
        0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 26%, transparent),
        0 0 18px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, transparent);
}

html[data-theme-preset] body.home-page-shell .menubtn i {
    background-color: var(--xl-theme-accent, #d4a843) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 34%, transparent);
}

html[data-theme-preset] body.home-page-shell .inav {
    background-color: var(--xl-theme-bg, #0a0a0a) !important;
    background-image: linear-gradient(180deg, var(--xl-theme-panel, #11100d), var(--xl-theme-bg, #0a0a0a)) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
    border-right: 1px solid var(--home-line);
    box-shadow: 24px 0 70px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 72%, transparent);
}

html[data-theme-preset] body.home-page-shell .mobile-nav-mask {
    background: var(--xl-theme-bg, #0a0a0a);
}

html[data-theme-preset] body.home-page-shell.mobile-nav-open {
    background: var(--xl-theme-bg, #0a0a0a) !important;
}

html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-home,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .home-mouse-glow,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-starfield,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-aurora-bg,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-light-streaks,
html[data-theme-preset] body.home-page-shell.mobile-nav-open .xl-particle-canvas {
    visibility: hidden !important;
}

html[data-theme-preset] body.home-page-shell .navlogo .navlogo-text,
html[data-theme-preset] body.home-page-shell .inavul li > a,
html[data-theme-preset] body.home-page-shell .inavul .nr a,
html[data-theme-preset] body.home-page-shell .inav-theme-title,
html[data-theme-preset] body.home-page-shell .inav-language-label {
    color: var(--home-muted) !important;
}

html[data-theme-preset] body.home-page-shell .navlogo .navlogo-text {
    -webkit-text-fill-color: var(--home-muted) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow:
        0 2px 12px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 28%, transparent),
        0 0 2px color-mix(in srgb, var(--home-text) 36%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .inavul li {
    border-bottom-color: var(--home-line);
}

html[data-theme-preset] body.home-page-shell .act_inav,
html[data-theme-preset] body.home-page-shell .inavul li > a:hover {
    color: var(--xl-theme-accent, #d4a843) !important;
    border-color: var(--xl-theme-accent, #d4a843) !important;
}

html[data-theme-preset] body.home-page-shell .inav-language-select,
html[data-theme-preset] body.home-page-shell .theme-toggle--mobile {
    color: var(--home-text);
    border-color: var(--home-line-strong);
    background: var(--xl-theme-popup, #15130f) !important;
}

html[data-theme-preset] body.home-page-shell #siteLangSelect option,
html[data-theme-preset] body.home-page-shell .theme-toggle-select option,
html[data-theme-preset] body.home-page-shell .inav-language-select option {
    color: var(--home-text) !important;
    background: var(--xl-theme-popup, #15130f) !important;
}

html[data-theme-preset] body.home-page-shell .theme-toggle--customized {
    overflow: visible;
    z-index: 214748320;
}

html[data-theme-preset] body.home-page-shell .theme-toggle--customized .theme-toggle-select {
    pointer-events: none;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-trigger {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 214748321;
    display: none;
    width: min(260px, calc(100vw - 24px));
    max-height: min(460px, calc(100vh - 120px));
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--xl-theme-accent, #d4a843) 38%, var(--home-line));
    border-radius: 12px;
    background: var(--xl-theme-popup, #15130f) !important;
    background-image: linear-gradient(180deg, var(--xl-theme-popup, #15130f), var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 20px 48px color-mix(in srgb, var(--xl-theme-bg, #0a0a0a) 76%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 10%, transparent);
    color: var(--home-text);
    overflow: auto;
    box-sizing: border-box;
}

html[data-theme-preset] body.home-page-shell .theme-toggle--custom-open .theme-toggle-custom-menu {
    display: grid;
    gap: 4px;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-group {
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--home-line) 88%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--xl-theme-panel, #11100d) 90%, var(--xl-theme-bg, #0a0a0a)) !important;
    color: color-mix(in srgb, var(--home-muted) 76%, transparent) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 8%, transparent);
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--xl-theme-panel, #11100d) !important;
    color: var(--home-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:hover,
html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:focus-visible,
html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option.active {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent);
    background: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 18%, var(--xl-theme-panel, #11100d)) !important;
    color: var(--home-text);
    outline: 0;
}

html[data-theme-preset] body.home-page-shell .login-msg-btn {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 58%, transparent) !important;
    background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 72%, var(--xl-theme-fg, #e0d9c8))) !important;
    color: var(--xl-theme-on-accent, var(--xl-theme-bg, #0a0a0a)) !important;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 24%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .login-msg-btn:hover {
    border-color: color-mix(in srgb, var(--xl-theme-accent, #d4a843) 72%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--xl-theme-accent, #d4a843) 92%, var(--xl-theme-fg, #e0d9c8)), color-mix(in srgb, var(--xl-theme-accent-2, #d4a843) 82%, var(--xl-theme-fg, #e0d9c8))) !important;
    box-shadow:
        0 16px 34px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 36%, transparent),
        0 0 22px color-mix(in srgb, var(--xl-theme-accent, #d4a843) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 28%, transparent) !important;
}

html[data-theme-preset] body.home-page-shell .login-msg-btn::after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--xl-theme-fg, #e0d9c8) 42%, transparent) 0%, transparent 70%) !important;
}

html[data-theme="light"][data-theme-preset] {
    --home-bg: var(--xl-theme-bg, #f8f7f2);
    --home-bg-soft: var(--xl-theme-panel, #ffffff);
    --home-text: var(--xl-theme-fg, #111111);
    --home-muted: var(--xl-theme-muted, #242018);
    --home-faint: color-mix(in srgb, var(--xl-theme-muted, #242018) 58%, var(--xl-theme-bg, #f8f7f2));
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-theme-preset] {
        --home-line: rgba(126, 106, 62, 0.72);
        --home-line-strong: rgba(212, 168, 67, 0.56);
        --home-faint: var(--home-muted);
        --home-on-accent: var(--xl-theme-on-accent, #0a0a0a);
        --home-accent-surface: rgba(63, 48, 18, 0.92);
        --home-accent-surface-strong: rgba(88, 66, 24, 0.96);
        --home-accent-glow: rgba(212, 168, 67, 0.48);
        --home-accent-glow-soft: rgba(212, 168, 67, 0.22);
        --home-hero-btn-fg: var(--xl-theme-on-accent, #0a0a0a);
        --home-hero-btn-start: var(--xl-theme-accent, #d4a843);
        --home-hero-btn-end: var(--xl-theme-accent-2, #d4a843);
        --home-hero-btn-border: rgba(233, 204, 132, 0.84);
    }

    html[data-theme-preset] .xl-hero-btn,
    html[data-theme-preset] .xl-hero-btn--photo {
        color: var(--home-hero-btn-fg);
        border-color: var(--home-hero-btn-border);
        background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #d4a843));
        box-shadow:
            0 14px 30px rgba(212, 168, 67, 0.28),
            0 0 0 1px rgba(0, 0, 0, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    html[data-theme-preset] .xl-hero-btn:hover {
        color: var(--home-hero-btn-fg);
        border-color: rgba(240, 220, 168, 0.82);
        background: linear-gradient(135deg, #e2bb5a, #d4a843);
        box-shadow:
            0 24px 50px rgba(212, 168, 67, 0.28),
            0 0 50px rgba(212, 168, 67, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.24),
            inset 0 -1px 0 rgba(10, 10, 10, 0.18);
    }

    html[data-theme-preset] .xl-tool-card,
    html[data-theme-preset] .xl-side-card {
        border-color: var(--home-line-strong);
        background: linear-gradient(180deg, var(--xl-theme-panel, #11100d), var(--xl-theme-bg, #0a0a0a)) !important;
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.10),
            0 14px 32px rgba(10, 10, 10, 0.64);
    }

    html[data-theme-preset] .xl-tool-info,
    html[data-theme-preset] .xl-notice-list,
    html[data-theme-preset] .xl-update-feature,
    html[data-theme-preset] .xl-time-section,
    html[data-theme-preset] .xl-update-row {
        border-color: var(--home-line);
        background: linear-gradient(180deg, var(--xl-theme-panel, #11100d), var(--xl-theme-bg, #0a0a0a)) !important;
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.08),
            0 12px 30px rgba(10, 10, 10, 0.46);
    }

    html[data-theme-preset] .xl-tool-copy p,
    html[data-theme-preset] .xl-notice-item p,
    html[data-theme-preset] .xl-update-feature ul,
    html[data-theme-preset] .xl-update-row {
        color: rgba(224, 217, 200, 0.84);
    }

    html[data-theme-preset] .xl-tool-icon,
    html[data-theme-preset] .xl-side-head svg {
        color: var(--xl-theme-on-accent, #0a0a0a);
        border-color: rgba(212, 168, 67, 0.56);
        background: linear-gradient(145deg, #e6bf5c, var(--xl-theme-accent, #d4a843));
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.36),
            0 14px 28px rgba(212, 168, 67, 0.30);
    }

    html[data-theme-preset] .xl-tool-card:hover .xl-tool-icon {
        box-shadow:
            inset 0 1px 0 rgba(224, 217, 200, 0.42),
            inset 0 -8px 18px rgba(10, 10, 10, 0.24),
            0 14px 28px rgba(212, 168, 67, 0.30),
            0 0 0 4px rgba(212, 168, 67, 0.18);
    }

    html[data-theme-preset] .xl-tool-link,
    html[data-theme-preset] .xl-side-head a,
    html[data-theme-preset] .xl-update-feature > a,
    html[data-theme-preset] .xl-update-topline strong,
    html[data-theme-preset] .xl-update-row strong {
        color: rgba(224, 217, 200, 0.9);
        border-color: var(--home-line-strong);
        background: rgba(21, 19, 15, 0.88);
    }

    html[data-theme-preset] .xl-tool-link:hover,
    html[data-theme-preset] .xl-side-head a:hover,
    html[data-theme-preset] .xl-update-feature > a:hover {
        color: var(--home-text);
        background: var(--home-accent-surface);
    }

    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-menu {
        border-color: rgba(212, 168, 67, 0.38);
        box-shadow:
            0 20px 48px rgba(10, 10, 10, 0.76),
            inset 0 1px 0 rgba(224, 217, 200, 0.10);
    }

    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-group {
        border-color: rgba(126, 106, 62, 0.88);
        background: rgba(17, 16, 13, 0.96) !important;
        color: rgba(255, 239, 192, 0.76) !important;
        box-shadow: inset 0 1px 0 rgba(224, 217, 200, 0.08);
    }

    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:hover,
    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option:focus-visible,
    html[data-theme-preset] body.home-page-shell .theme-toggle-custom-option.active {
        border-color: rgba(212, 168, 67, 0.58);
        background: rgba(63, 48, 18, 0.88) !important;
    }

    html[data-theme-preset] body.home-page-shell .login-msg-btn {
        border-color: rgba(212, 168, 67, 0.58) !important;
        background: linear-gradient(135deg, var(--xl-theme-accent, #d4a843), var(--xl-theme-accent-2, #d4a843)) !important;
        color: var(--xl-theme-on-accent, #0a0a0a) !important;
        box-shadow:
            0 12px 28px rgba(212, 168, 67, 0.30),
            inset 0 1px 0 rgba(224, 217, 200, 0.24) !important;
    }

    html[data-theme-preset] body.home-page-shell .login-msg-btn:hover {
        border-color: rgba(212, 168, 67, 0.72) !important;
        background: linear-gradient(135deg, #e2bb5a, var(--xl-theme-accent, #d4a843)) !important;
        box-shadow:
            0 16px 34px rgba(212, 168, 67, 0.36),
            0 0 22px rgba(212, 168, 67, 0.22),
            inset 0 1px 0 rgba(224, 217, 200, 0.28) !important;
    }

    html[data-theme-preset] body.home-header-shell .loarea,
    html[data-theme-preset] body.home-header-shell .header {
        border-bottom-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow:
            0 14px 34px rgba(10, 10, 10, 0.70),
            inset 0 -1px 0 var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    }

    html[data-theme-preset] body.home-page-shell .loarea,
    html[data-theme-preset] body.home-page-shell .header {
        border-bottom-color: var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
        background: var(--xl-theme-panel, #11100d) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow:
            0 14px 34px rgba(10, 10, 10, 0.70),
            inset 0 -1px 0 var(--xl-theme-border, rgba(98, 143, 231, 0.38)) !important;
    }
}

/* source: css/home-header-9x16-legacy-fallback.css */
/* HOME_HEADER_9X16_LEGACY_FALLBACK_GUARD: Edge 100 readable login button for near-9:16 portrait windows. */
@media screen and (max-width: 430px) and (orientation: portrait) and (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/15) {
    html[data-theme-preset] body.home-page-shell .loginArea .loginBtn,
    body.home-page-shell .loginArea .loginBtn,
    body.home-header-shell .loginArea .loginBtn {
        color: #f7fbff !important;
        background: rgba(18, 36, 68, .92) !important;
        border-color: rgba(139, 184, 255, .7) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
    }
}