@charset "utf-8";
@media (prefers-color-scheme: light) {
	:root{
		--CPT-THM-R: 184;
		--CPT-THM-G: 134;
		--CPT-THM-B: 11;
		--CPT-THM-H: 43;
		--CPT-THM-S: 89%;
		--CPT-THM-L: 38%;
		--SiteTHM-text-invert: white;
	}
}
@media (prefers-color-scheme: dark) {
	:root{
		--CPT-THM-R: 255;
		--CPT-THM-G: 197;
		--CPT-THM-B: 51;
		--CPT-THM-H: 43;
		--CPT-THM-S: 100%;
		--CPT-THM-L: 60%;
		--SiteTHM-text-invert: black;
	}
}


#site_header #main_nav{
	.nav>.inner{
		#nav_logo a{
			@media only screen and (max-width:1000px),(min-width:1281px){all:unset;display:flex;gap:.75em;
				&::after{all:unset;content:'';display:block;width:calc(var(--H) * 2.92857143);height:var(--H);background:url('../images/seagm_star_logo_2022_text_goldenrod-4bb58060ee.svg') no-repeat center/contain;-webkit-mask-image:linear-gradient(calc(var(--brightness-filter) * 180deg),rgba(0 0 0 / 100%),rgba(0 0 0 / 75%));mask-image:linear-gradient(calc(var(--brightness-filter) * 180deg),rgba(0 0 0 / 100%),rgba(0 0 0 / 75%));}
			}
		}
		#nav_zone .link{display:flex;align-items:center;height:var(--CPT-US);padding-inline:calc(var(--CPT-US) / 2);font-weight:var(--SiteFW-EB);text-transform:uppercase;color:inherit;border-radius:var(--CPT-BDR);transition:color 300ms,background-color 300ms;
			&:hover{color:var(--SiteTHM);background-color:var(--SiteTHM-A10);}
		}
	}
	.menu .user #user-btn{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;width:auto;cursor:unset;pointer-events:none;
		.info{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;overflow:hidden;
			.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:10em;font-weight:var(--SiteFW-EB);}
			.star{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;font-weight:var(--SiteFW-EB);color:var(--SiteTHM);
				&::before{font-size:1.5em;}
			}
			@media only screen and (max-width:480px){grid-template-columns:1fr;
				.name{display:none;}
			}
		}
	}
}
#star-content{flex:auto;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
}


/* intro */
.star-intro-wrp{
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;
		@media only screen and (max-width:1000px){max-width:70em;margin-inline:auto;}
		@media only screen and (max-width:640px){max-width:40em;}
	}
}
#star-intro-1{background-color:var(--body-background-color);background-image:url('https://seagm-media.seagmcdn.com/art/v6/star/star_intro_cover1.svg'),linear-gradient(-90deg,hsl(30 42% 65%/calc(100% - var(--brightness-filter) * 40%)),hsl(37 80% 88%/calc(50% - var(--brightness-filter) * 25%)));background-position:top center,center;background-size:min(100%,130em) auto,cover;background-repeat:no-repeat,repeat-x;overflow:hidden;
	&>.inner{display:grid;grid:"intro art" auto "features art" 1fr/1fr min(40em,35%);gap:var(--spacing);}
	.intro{grid-area:intro;display:flex;flex-direction:column;gap:1em;max-width:60em;
		& hgroup{font-size:var(--SiteFS-XL);}
		& h1{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
		& h2{font-size:var(--SiteFS);font-weight:var(--SiteFW-B);}
		& div{color:var(--body-text-color-a50);}
	}
	.features{grid-area:features;display:flex;flex-direction:column;gap:var(--spacing);
		&>div{display:grid;grid-template-columns:auto 1fr;column-gap:var(--spacing);align-items:center;
			&::before{content:'';display:block;font-size:4em;width:1em;height:1em;background:rgba(0 0 0/5%) url('https://seagm-media.seagmcdn.com/art/v6/star/star_intro_icon.svg') no-repeat center calc(var(--y,0) * 1em)/100% auto;border-radius:100%;grid-row:span 2;align-self:start;}
			&:nth-of-type(2){--y:-1}
			&:nth-of-type(3){--y:-2}
		}
		& h3{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		& span{color:var(--body-text-color-a50);}
	}
	.art{grid-area:art;align-self:end;margin-block-end:calc(var(--spacing) * -1);
		&>img{vertical-align:top;width:100%;height:auto;aspect-ratio:960/832;object-fit:contain;}
	}
	@media only screen and (max-width:1000px){
		&>.inner{grid:"intro intro" "features art"/3fr 2fr;
			&hgroup{font-size:1em;}
		}
	}
	@media only screen and (max-width:640px){background:var(--body-background-color) linear-gradient(-90deg, hsl(30 42% 65% / calc(100% - var(--brightness-filter) * 50%)), hsl(37 80% 88% / calc(60% - var(--brightness-filter) * 30%))) no-repeat center/cover;
		&>.inner{grid:"intro" "features" "art"/1fr;}
		.art{max-width:25em;margin-inline:auto}
	}
}
#star-intro-2{
	&>.inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing);}
	.star-level-wrp{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing);
		.card{padding:var(--spacing);display:flex;flex-direction:column;text-align:center;border-radius:1em;color:#fff;background-color:hsl(260,22%,calc(60% + -10% * var(--i)));--h:calc(20 - 15 * var(--i));--s:30%;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTIwIj48cGF0aCBmaWxsPSJyZ2JhKDI1NSAyNTUgMjU1LzUlKSIgZD0iTTAgNTAuMTQ0djQ2LjM0NGw0MCAyMy4xNDQgNDAtMjMuMTQ0VjUwLjE0NEw0MCAyNyAwIDUwLjE0NFoiLz48cGF0aCBmaWxsPSJyZ2JhKDI1NSAyNTUgMjU1LzUlKSIgZD0iTTQ4IDUwLjE0NHY0Ni4zNDRsNDAgMjMuMTQ0IDQwLTIzLjE0NFY1MC4xNDRMODggMjcgNDggNTAuMTQ0WiIvPjxwYXRoIGZpbGw9InJnYmEoMjU1IDI1NSAyNTUvNSUpIiBkPSJNMjQgMjMuMTQ0djQ2LjM0NGw0MCAyMy4xNDQgNDAtMjMuMTQ0VjIzLjE0NEw2NCAwIDI0IDIzLjE0NFoiLz48L3N2Zz4='),linear-gradient(calc(135deg * var(--angle-reverse,1)),hsl(var(--h) var(--s) calc(65% + -5% * var(--i))),hsl(var(--h) var(--s) calc(38% + -5% * var(--i))));background-size:min(25em,calc(100% - 4em)) auto,cover;background-position:center calc(100% + 10em),center;background-repeat:no-repeat;overflow:hidden;
			&::before{content:none !important;}
			.level{
				&::before{--star-size:10em;margin-inline:auto;}
				&::after{content:'LV 'attr(data-star-level);display:block;}
				& span{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
			}
			.info{margin-block-start:1em;margin-inline:auto;max-width:20em;font-size:var(--SiteFS-S);}
		}
	}
	.intro{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--spacing);
		.art{width:15em;align-self:start;
			&>img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
		}
		& article{display:flex;flex-direction:column;gap:.5em;
			& h3{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
		}
	}
	@media only screen and (max-width:1280px){
		.star-level-wrp{grid-template-columns:repeat(auto-fill,minmax(18em,1fr));
			.card .level{
				&::before{--star-size:5em;}
				& span{font-size:var(--SiteFS-L);}
			}
		}
	}
	@media only screen and (max-width:1000px){
		.star-level-wrp{grid-template-columns:repeat(auto-fill,minmax(22em,1fr));gap:1em;
			.card .level{
				&::before{--star-size:5em;}
				& span{font-size:var(--SiteFS-L);}
			}
		}
		.intro{display:flex;flex-direction:column;gap:1em;
			.art{width:10em;}
		}
	}
	@media only screen and (max-width:640px){
		&>.inner{display:flex;flex-direction:column;}
	}
}
#star-intro-3{
	&>.inner{display:grid;grid:"title slider" 1fr "links slider" auto/clamp(20em,25%,25em) 1fr;align-items:end;gap:var(--spacing);}
	.title{grid-area:title;display:flex;flex-direction:column;gap:1em;
		& h3{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
	}
	.links{grid-area:links;display:flex;flex-wrap:wrap;gap:1em;
		.link{flex:auto;display:grid;grid:"img name icon" "img i icon"/auto 1fr auto;column-gap:1em;align-items:center;color:inherit;background:var(--body-text-color-a10);padding:1em;border-radius:.5em;
			&::before{grid-area:icon;content:attr(icon);font-size:1.5em;color:var(--body-text-color-a50);}
			&::after{grid-area:img;content:'';display:block;font-size:3em;width:1em;height:1em;line-height:1;overflow:hidden;background:var(--body-text-color-a5) url('https://seagm-media.seagmcdn.com/art/v6/star/star_intro_icon2.svg') no-repeat center calc(var(--y,0) * 1em)/100% auto;border-radius:100%;}
			&:nth-child(2){--y:-1}
			& span{grid-area:name;font-weight:var(--SiteFW-EB);}
			& i{grid-area:i;font-style:normal;color:var(--body-text-color-a50);}
		}
	}
	#star-intro-slide{grid-area:slider;overflow:hidden;touch-action:pan-y;
		.list{display:flex;align-items:start;padding:1px;
			.slide{flex:none;width:max(20em,20%);
				.img{border-radius:1em;overflow:hidden;box-shadow:var(--body-text-color-a5) 0 0 0 1px;background:var(--background-color-L3);
					&>img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;}
				}
			}
		}
	}
	@media only screen and (max-width:1000px){
		&>.inner{grid:"title links" "slider slider"/1fr auto;}
	}
	@media only screen and (max-width:640px){
		&>.inner{grid:"title" "links" "slider";}
		#star-intro-slide .slide{flex:none;width:12em;}
	}
}


/*item_list*/
#star_itemlist_content{flex:auto;display:flex;flex-direction:column;
	&>.inner{flex:auto;width:min(var(--MaxContentWidth),100%);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;display:grid;grid-template-columns:clamp(25em,25%,30em) 1fr;gap:var(--spacing);
		&>.aside{}
		&>.content{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L3);border-radius:1em;}
	}
	@media only screen and (min-width:1001px){
		&>.inner{
			&>.star_list_menu_ctrl_on{display:none;}
			&>.aside{position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;align-self:start;}
		}
	}
	@media only screen and (max-width:1000px){
		&>.inner{display:flex;flex-direction:column;align-items:start;
			&>.aside{position:fixed;inset:0;z-index:999;background-color:var(--background-color-mask-a50);
				&>.star_list_menu_ctrl_off{position:absolute;inset:0;z-index:-1;}
				&:not(.show){display:none;}
				&.show{opacity:1;transition:opacity 300ms;transition-behavior:allow-discrete;
					#star_item_list_menu{transform:translateX(0);transition:transform 300ms;transition-behavior:allow-discrete;}
					@starting-style{opacity:0;
						#star_item_list_menu{transform:translateX(calc(var(--translate-reverse,1) * -5em));}
					}
				}
			}
		}
	}
	@media only screen and (max-width:480px){
		&>.inner>.content{margin-inline:calc(var(--spacing) * -1);}
	}
}
@media only screen and (max-width:1000px){
	body:has(#star_itemlist_content>.inner>.aside.show){overflow:hidden;}
}
#star_item_list_menu{background-color:var(--background-color-L2);border-radius:1em;overflow:hidden;
	&>.title{display:none;}
	&>.inner{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);max-height:calc(var(--VHeight) - var(--main-nav-height) * 1px - var(--spacing) * 2);box-sizing:border-box;overflow:hidden;overflow-y:auto;}
	@media only screen and (max-width:1000px){max-width:min(25em,calc(100% - 5em));height:calc(100% - 2em);max-height:unset;box-shadow:rgba(0 0 0 / 10%) 0 0 2em;margin:1em;
		&>.title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;height:5em;padding-inline:var(--spacing) 1em;box-shadow:var(--body-text-color-a5) 0 -1px 0 inset;
			& h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);text-transform:uppercase;}
			.btw{--icon-opacity:.5;}
		}
		&>.inner{max-height:calc(100% - 5em);}
	}
	.group{display:flex;flex-direction:column;gap:1em;
		.title{text-transform:uppercase;}
		.btc{display:flex;flex-direction:column;gap:.75em;
			.bt{display:flex;align-items:center;min-height:var(--CPT-US);padding-block:.75em;padding-inline:calc(var(--CPT-US) / 2);box-sizing:border-box;border-radius:var(--CPT-BDR);background-color:var(--CPT-BGC,#fff);box-shadow:var(--body-text-color-a10) 0 0 0 var(--CPT-BDW) inset;cursor:pointer;transition:box-shadow 300ms;
				&:hover{box-shadow: var(--body-text-color-a10) 0 0 0 var(--CPT-BDW) inset,var(--SiteTHM-A10) 0 0 0 999em inset;}
				&>span{font-weight:var(--SiteFW-EB);}
				&.on{box-shadow:var(--SiteTHM) 0 0 0 var(--CPT-BDW) inset,var(--SiteTHM-A10) 0 0 0 999em inset;}
			}
			[data-item-count]{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;
				&::after{content:attr(data-item-count);color:var(--body-text-color-a50);}
			}
			[data-star-level]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;--star-size:2.5em;}
		}
		.level{
			&>span{
				&:has(i){display:flex;flex-direction:column;gap:.25em;}
				& i{display:block;font-size:var(--SiteFS-S);font-style:normal;font-weight:var(--SiteFW);color:var(--body-text-color-a50);}
			}
		}
		.type{
			&>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		}
		.tags{flex-direction:row;flex-wrap:wrap;
			.tag{--CPT-US:2.5em;max-width:min(25em,100%);
				&>span{display:block;font-weight:var(--SiteFW);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			}
		}
	}
}
.star_item_list_sort{display:flex;gap:1px;padding-block-start:1px;padding-inline:1px;overflow:hidden;box-shadow:var(--body-text-color-a10) 0 -1px 0 inset;
	.sort{color:inherit;border-start-start-radius:.5em;border-start-end-radius:.5em;cursor:pointer;transition:background-color 300ms,box-shadow 300ms;
		&.on{background-color:var(--background-color-L3);box-shadow:var(--body-text-color-a10) 0 0 0 1px;
			&>span::after{transform:translateY(-.25em);}
		}
		&>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;height:var(--CPT-US);padding-inline:calc(var(--CPT-US) / 2);box-sizing:border-box;font-weight:var(--SiteFW-B);position:relative;overflow:hidden;white-space:nowrap;
			&::before{content:attr(icon);font-size:1.5em;}
			&::after{content:'';display:block;position:absolute;inset-block-start:100%;inset-inline:calc(var(--CPT-US) / 2);z-index:0;height:.25em;background-color:var(--SiteTHM);transition:transform 300ms;}
		}
		@media only screen and (max-width:480px){flex:auto;
			&>span{display:flex;justify-content:center;
				&::before{content:unset;}
			}
		}
	}
}
.star_item_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--starlist-column,12.5em),1fr));gap:var(--starlist-gap,1.5em);
	.StarItem{display:flex;flex-direction:column;gap:1em;color:inherit;transition:color 300ms;
		&:hover{color:var(--SiteTHM);}
		.img{border-radius:1em;background-color:var(--background-color-L3);box-shadow:var(--body-text-color-a5) 0 0 0 1px;overflow:hidden;
			&>img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;}
		}
		.name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;font-weight:var(--SiteFW-B);}
		.sku{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--SiteFS-S);color:var(--body-text-color-a50);}
		.price{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;font-weight:var(--SiteFW-EB);color:var(--SiteTHM);margin-block-start:auto;
			&::before{font-size:1.5em;}
		}
	}
}


/*item details*/
#star_item_content{flex:auto;
	&>.inner{max-width:var(--MaxContentWidth);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;display:grid;grid:"item_cover item_info" auto "item_cover item_description" 1fr/clamp(25em,25%,30em) 1fr;gap:var(--spacing);align-items:start;}
	#item_cover{grid-area:item_cover;}
	#item_info{grid-area:item_info;}
	#item_description{grid-area:item_description;}
	@media only screen and (max-width:800px){
		&>.inner{grid:"item_cover" "item_info" "item_description";}
	}
	@media only screen and (max-width:480px){
		&>.inner{padding-inline:unset;}
	}
}
#item_cover{
	&>.img{position:relative;overflow:hidden;border-radius:1em;background:var(--background-color-L3);box-shadow:var(--body-text-color-a10) 0 0 0 1px;
		&>img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;}
	}
	@media only screen and (max-width:800px){width:min(25em,100%);margin-inline:auto;}
}
#item_info{border-radius:1em;background-color:var(--background-color-L3);
	&>.inner{display:flex;flex-direction:column;gap:var(--spacing);max-width:60em;margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
	.title{
		& h1{font-size:var(--SiteFS-XXXL);font-weight:var(--SiteFW-EB);}
	}
	.sku{
		& h3{font-size:var(--SiteFS-L);}
	}
	.details{padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;color:var(--body-text-color-a50);}
	.level{display:flex;flex-wrap:wrap;align-items:center;gap:1em var(--spacing);
		.list{display:flex;flex-wrap:wrap;align-items:center;gap:1em var(--spacing);
			[data-star-level]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;font-weight:var(--SiteFW-EB);}
		}
	}
	.func{display:flex;gap:var(--spacing);align-items:center;justify-content:end;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;
		.redeem{--CPT-US:4em;--icon-size:2em;flex:auto;display:flex;justify-content:space-between;align-items:center;max-width:25em;text-transform:uppercase;font-weight:var(--SiteFW-EB);}
		.stock{text-align:center;
			& b{display:block;font-size:var(--SiteFS-XL);font-weight:var(--SiteFW-EB);}
			& span{font-size:var(--SiteFS-S);color:var(--body-text-color-a50);white-space:nowrap;}
		}
	}
	@media only screen and (max-width:800px){width:min(40em,100%);margin-inline:auto;
		.title h1{font-size:var(--SiteFS-XXL);}
	}
	@media only screen and (max-width:640px){}
	@media only screen and (max-width:480px){
		.title h1{font-size:var(--SiteFS-XL);}
	}
}
#item_description{background:var(--background-color-L3);border-radius:1em;
	&>.inner{max-width:60em;margin-inline:auto;padding-inline:var(--spacing);box-sizing:border-box;}
	.title{display:flex;align-items:center;height:5em;font-weight:var(--SiteFW-B);box-shadow:var(--body-text-color-a5) 0 1px 0;}
	& article.docs{padding-block:var(--spacing);}
	@media only screen and (max-width:800px){width:min(40em,100%);margin-inline:auto;}
}


/* TNC */
#star_document{flex:auto;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid-template-columns:clamp(25em,30%,30em) 1fr;gap:var(--spacing);align-items:start;
		&>.aside{position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;max-height:calc(var(--VHeight) - var(--main-nav-height) * 1px - var(--spacing) * 2);padding:var(--spacing);box-sizing:border-box;overflow:hidden;overflow-y:auto;background:var(--background-color-L2);border-radius:1em;}
		&>.content{padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L3);
			&:only-child{grid-column:1/-1;}
		}
	}
	@media only screen and (max-width:800px){
		&>.inner{grid-template-columns:1fr;
			&>.aside{display:none;}
		}
	}
	@media only screen and (max-width:480px){
		&>.inner>.content{margin-inline:calc(var(--spacing) * -1);}
	}
	#article_index{display:flex;flex-direction:column;
		.anchor{display:block;color:inherit;transition:color 300ms;counter-increment:section;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:1em;padding-block:.5em;
			&::before{content:counter(section);display:block;width:1.5em;height:1.5em;line-height:1.5;overflow:hidden;text-align:center;color:inherit;background:var(--body-text-color-a5);border-radius:.5em;}
			&:hover{color:var(--SiteTHM);}
			&>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
		}
	}
	article.docs{max-width:60em;margin-inline:auto;
		& section{
			&[id*="section-"]{margin-block:var(--spacing);scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));}
			& h1{margin-block-start:unset;}
		}
	}
}


/*ucp*/
#star_ucp_content{flex:auto;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid-template-columns:clamp(25em,25%,30em) 1fr;align-items:start;gap:var(--spacing);}
	@media only screen and (max-width:800px){
		&>.inner{max-width:40em;display:flex;flex-direction:column;align-items:unset;}
	}
}
#star-user-profile{display:flex;flex-direction:column;gap:1em;
	.star-user-card{border-radius:1em;color:#fff;background-color:hsl(260,22%,calc(60% + -10% * var(--i)));--h:calc(20 - 15 * var(--i));--s:30%;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTIwIj48cGF0aCBmaWxsPSJyZ2JhKDI1NSAyNTUgMjU1LzUlKSIgZD0iTTAgNTAuMTQ0djQ2LjM0NGw0MCAyMy4xNDQgNDAtMjMuMTQ0VjUwLjE0NEw0MCAyNyAwIDUwLjE0NFoiLz48cGF0aCBmaWxsPSJyZ2JhKDI1NSAyNTUgMjU1LzUlKSIgZD0iTTQ4IDUwLjE0NHY0Ni4zNDRsNDAgMjMuMTQ0IDQwLTIzLjE0NFY1MC4xNDRMODggMjcgNDggNTAuMTQ0WiIvPjxwYXRoIGZpbGw9InJnYmEoMjU1IDI1NSAyNTUvNSUpIiBkPSJNMjQgMjMuMTQ0djQ2LjM0NGw0MCAyMy4xNDQgNDAtMjMuMTQ0VjIzLjE0NEw2NCAwIDI0IDIzLjE0NFoiLz48L3N2Zz4='),linear-gradient(calc(135deg * var(--angle-reverse,1)),hsl(var(--h) var(--s) calc(65% + -5% * var(--i))),hsl(var(--h) var(--s) calc(38% + -5% * var(--i))));background-size:10em auto,cover;background-position:calc((var(--translate-reverse,0) + 1) * 100% + (var(--translate-reverse,1) * 1.75em)) calc(100% + 4.75em),center;background-repeat:no-repeat;overflow:hidden;
		&::before{content:none !important;}
		&>.inner{display:grid;grid:"user level" "content content"/1fr auto;gap:var(--spacing);align-items:center;padding:var(--spacing);
			.star-level{grid-area:level;}
			.user{grid-area:user;}
			.progress,.info{grid-area:content;}
		}
		.star-level{margin-block:calc(var(--spacing) / -2);
			& span{display:block;width:var(--star-size);height:var(--star-size);overflow:hidden;--star-size:3em;}
		}
		.user{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:1.5em;
			.avatar{width:3em;height:3em;border-radius:100%;overflow:hidden;background:#fff;box-shadow:rgba(255 255 255/10%) 0 0 0 .25em;grid-row:span 2;
				&>img{display:block;width:100%;height:100%;object-fit:cover;}
			}
			.name{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			.level{opacity:.7;}
		}
		.progress{display:grid;grid-template-columns:1fr;gap:var(--spacing);
			.bar>span{display:block;position:relative;border-radius:1em;background:rgba(255 255 255/10%);--height:4px;
				&::before{content:'';display:block;width:var(--height);min-width:var(--height);height:var(--height);background:#fff;border-radius:1em;animation:bar ease-in-out 2000ms 500ms forwards;}
			}
		}
		.info{
			&[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;box-shadow:rgb(255 255 255 / 10%) 0 1px 0 inset;padding-block-start:var(--spacing);
				&::before{content:attr(icon);font-size:1.5em;align-self:start;}
			}
		}
	}
	.star_expiry{margin-inline:var(--spacing);
		.tips{color:var(--body-text-color-a50);
			&[icon]::before{content:attr(icon);font-size:1.5em;display:inline-block;vertical-align:top;width:1em;height:1em;line-height:1;overflow:hidden;margin-inline-end:.5em;}
		}
	}
}
@keyframes bar{100%{width:calc(var(--progress) / var(--level) * 100%);}}
#star-transaction-wrp{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L1);border-radius:1em;
	&>.title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;
		& h3{font-size:var(--SiteFS-L);}
	}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);}
	#star-transaction{display:flex;flex-direction:column;gap:1px;padding-inline:1px;box-shadow:var(--body-text-color-a10) 0 0 0 1px inset;background-color:var(--background-color-L3);overflow:hidden;
		.unit{display:grid;grid:"dtime tsc star note"/1fr 1fr 1fr 2fr;align-items:center;box-shadow:var(--body-text-color-a5) 0 -1px 0;
			.dtime{grid-area:dtime;}
			.tsc{grid-area:tsc;}
			.star{grid-area:star;}
			.note{grid-area:note;}
			&.title>div{font-weight:normal;color:var(--body-text-color-a50);}
			&>div{padding-block:1.25em;padding-inline:calc(var(--spacing) / 2);}
		}
		.dtime{padding-inline-start:var(--spacing) !important;}
		.tsc{text-align:center;font-weight:var(--SiteFW-EB);}
		.star{text-align:center;
			.price{font-weight:var(--SiteFW-EB);
				&.in{color:var(--text-color-complete);}
				&.out{color:var(--text-color-alert);}
			}
		}
		.note{padding-inline-end:var(--spacing)!important;
			& p{margin:unset;}
			& a{font-weight:var(--SiteFW-EB);
				&:hover{text-decoration:underline;}
			}
		}
		@media only screen and (max-width:1280px){box-shadow:unset;background-color:unset;padding-block:1px;padding-inline:unset;
			.unit{grid:"dtime ." "tsc star" "note note"/1fr auto;gap:1em;padding-block:var(--spacing);
				&:last-child{box-shadow:var(--body-text-color-a5) 0 1px 0,var(--body-text-color-a5) 0 -1px 0;}
				&.title{display:none;}
				&>div{padding:unset !important;}
			}
			.dtime{color:var(--body-text-color-a50);}
			.tsc{text-align:start;}
			.star{text-align:end;
				.price{display:block;font-size:var(--SiteFS-XXL);line-height:1;}
			}
		}
	}
}
#star-orderlist-wrp{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L1);border-radius:1em;
	&>.title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;
		& h3{font-size:var(--SiteFS-L);}
	}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);}
	#star-orderlist{display:flex;flex-direction:column;gap:1px;padding-inline:1px;box-shadow:var(--body-text-color-a10) 0 0 0 1px inset;background-color:var(--background-color-L3);overflow:hidden;
		.unit{display:grid;grid:"oid item star stat"/1fr 2fr 1fr 1fr;align-items:center;gap:var(--spacing);box-shadow:var(--body-text-color-a5) 0 -1px 0;padding:1.5em var(--spacing);
			.oid{grid-area:oid;}
			.item{grid-area:item;}
			.star{grid-area:star;}
			.stat{grid-area:stat;}
			&.title>div{font-weight:normal;color:var(--body-text-color-a50);}
		}
		.oid a{font-weight:var(--SiteFW-EB);
			&:hover{text-decoration:underline;}
		}
		.item .ItemLink{max-width:25em;margin-inline:1px;}
		.star{text-align:center;
			.price{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;width:fit-content;margin-inline:auto;white-space:nowrap;color:var(--SiteTHM);font-weight:var(--SiteFW-EB);
				&::before{font-size:1.5em;}
			}
		}
		.stat{text-align:center;display:flex;flex-direction:column;gap:.25em;overflow:hidden;
			.status{display:block;
				&.completed{font-weight:var(--SiteFW-EB);color:var(--text-color-complete);}
				&.closed{font-weight:var(--SiteFW-EB);color:var(--body-text-color-a50);}
			}
			.date{display:block;font-size:var(--SiteFS-S);color:var(--body-text-color-a50);}
		}
		@media only screen and (max-width:1280px){box-shadow:unset;background-color:unset;padding-block:1px;padding-inline:unset;
			.unit{grid:"oid stat stat" "item item star" / 1fr auto auto;align-items:center;gap:var(--spacing);padding-inline:unset;box-shadow:var(--body-text-color-a5) 0 -1px 0;
				&.title{display:none;}
			}
			.stat{flex-direction:row-reverse;align-items:center;gap:1em;}
		}
	}
}


/* Order details */
#star_orderdetails{grid-column:1/-1;width:min(50em,100%);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing);background:var(--background-color-L1);border-radius:1em;
	& h1{font-size:var(--SiteFS-XL);font-weight:var(--SiteFW-EB);}
	.item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--spacing);padding:var(--spacing);background:var(--background-color-L3);border-radius:1em;box-shadow:var(--body-text-color-a5) 0 0 0 1px inset;
		.ItemLink{max-width:30em;}
		.star{
			.label{display:none;color:var(--body-text-color-a50);}
			.price{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;width:fit-content;margin-inline:auto;white-space:nowrap;color:var(--SiteTHM);font-weight:var(--SiteFW-EB);
				&::before{font-size:1.5em;}
			}
		}
	}
	.btc{display:flex;align-items:center;justify-content:end;gap:1em;}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);width:auto;
		.item{display:flex;flex-direction:column;align-items:unset;
			.star{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;
				.label{display:block;}
			}
		}
	}
}


/* SEAGM star leve icon */
[data-star-level]{
	&::before{content:'';display:block;font-size:var(--star-size,2em);width:1em;height:1em;line-height:1;overflow:hidden;background:url("../images/star_level-f32dac7c32.svg") 0 calc(var(--i,0) * -1em)/1em 4em;filter:hue-rotate(calc(-15deg * var(--i)));}
	&[data-star-level="1"]{--i:0;}
	&[data-star-level="2"]{--i:1;}
	&[data-star-level="3"]{--i:2;}
	&[data-star-level="4"]{--i:3;}
}