* { border:0;margin:0  }
.page{ background: linear-gradient(180deg, #730f0f, #000 70%); min-height: 100vh;    	position: ralative; }

.navbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: #000000ba;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(201, 168, 76, .18);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3)
}

.navbar-left{
	display: flex;
	align-items: center;
	gap: 10px
}

.navbar-logo {
	width: 34px;
	height: 34px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid rgba(201, 168, 76, .4);
	box-shadow: 0 0 10px rgba(201, 168, 76, .2)
    }

.navbar-title{
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 3px;
	background: linear-gradient(135deg, #e8c95a, #c9a84c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none
}

.navbar-right{
	display: flex;
	align-items: center;
	gap: 8px
}

.nav-btn{
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s;
	border: 1px solid rgba(136, 146, 168, .25);
	background: transparent;
	color: #8892a8
}

.nav-btn:hover {
	background: rgba(201, 168, 76, .08);
	color: #e8c95a;
	border-color: rgba(201, 168, 76, .4)
}

.nav-btn.active{
	background: linear-gradient(135deg, #c9a84c, #e8c95a);
	color: #0a0f1e;
	border-color: #c9a84c;
	font-weight: 600;
	box-shadow: 0 2px 12px rgba(201, 168, 76, .3)
}


.main{
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 16px 40px;
	position: relative;
	z-index: 0
}

.card{
	background: #000000ba;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
	border: 1px solid rgba(201, 168, 76, .12);
	margin-bottom: 16px;
	transition: all .3s
}

.card:hover {
	box-shadow: 0 6px 32px rgba(0, 0, 0, .35);
	border-color: rgba(201, 168, 76, .22)
}

.card-title{
	font-size: 15px;
	font-weight: 700;
	color: #e8eaf0;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px
}

.card-title i{
	color: #c9a84c;
	font-size: 16px
}


.brand-hero{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 0 24px;
	gap: 8px
}

.hero-logo{
	width: 88px;
	height: 88px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid rgba(201, 168, 76, .45);
	box-shadow: 0 0 24px rgba(201, 168, 76, .2), 0 4px 20px
		rgba(0, 0, 0, .3)
}

.hero-title{
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 6px;
	background: linear-gradient(135deg, #e8c95a, #c9a84c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.hero-subtitle{
	font-size: 13px;
	color: #556178;
	letter-spacing: 2px
}

.type-select{
	width: 130px;
	flex-shrink: 0
}

.input-row{
	display: flex;
	gap: 10px;
	align-items: stretch
}

.input-wrap{
	flex: 1;
	position: relative
}

.input-field{
	width: 100%;
	height: 46px;
	border-radius: 10px;
	border: 1.5px solid rgba(136, 146, 168, .18);
	padding: 0 16px;
	font-size: 14px;
	color: #e8eaf0;
	background: rgba(13, 21, 40, .7);
	outline: none;
	transition: all .25s
}

.input-field:focus {
	border-color: #c9a84c;
	background: rgba(13, 21, 40, .9);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, .12)
}

.input-field::-moz-placeholder {
	color: #556178
}

.input-field::placeholder {
	color: #556178
}

.query-btn{
	flex-shrink: 0;
	height: 46px;
	padding: 0 22px;
	border-radius: 10px;
	border: none;
	background: linear-gradient(135deg, #c9a84c, #e8c95a);
	color: #0a0f1e;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px
}

.query-btn:hover:not (:disabled ){
	box-shadow: 0 3px 16px rgba(201, 168, 76, .4);
	transform: translateY(-1px)
}

.query-btn:disabled {
	opacity: .45;
	cursor: not-allowed
}

/* 针对所有 select 的输入框背景 */
.layui-form-select .layui-input, 
.layui-form-select .layui-select-title {
    background-color: #0a0f1e !important; /* 浅蓝色背景示例 */
    color: #a0aabe !important; /* 同时修改文字颜色以确保可读性 */
    border: 1.5px solid rgba(136, 146, 168, .18);
    height: 46px;
    border-radius: 10px;
}


/* 如果只想针对特定的 select，可以加父级类名限制 */
.my-custom-select .layui-input {
    background-color: #0a0f1e !important;
}


/* 下拉面板整体背景 */
.layui-form-select dl {
z-index: 99999 !important;
    background-color: #0a0f1e; 
	border: 1.5px solid rgba(136, 146, 168, .18);
color: #a0aabe !important;
}

/* 单个选项背景 */
.layui-form-select dl dd {
    background-color: #0a0f1e; 
}

/* 鼠标悬停时的背景色 */
.layui-form-select dl dd:hover {
    background-color: #0a0f1e; 
}

/* 选中项的背景色 */
.layui-form-select dl dd.layui-this {
    background-color: #0a0f1e; 
    color: #fff;
}

.result-section {
	animation: slideUp-158fc718 .4s ease
}

.result-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px
}

.type-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	background: linear-gradient(135deg, rgba(201, 168, 76, .12),
		rgba(232, 201, 90, .06));
	border: 1px solid rgba(201, 168, 76, .25);
	color: #e8c95a
}

.type-tag i {
	color: #c9a84c
}

.qr-hero {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-bottom: 16px
}

.qr-display {
	flex-shrink: 0;
	padding: 12px;
	background: #fff;
	border-radius: 14px;
	border: 2px solid rgba(201, 168, 76, .25);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .3), 0 0 20px
		rgba(201, 168, 76, .08);
	display: flex;
	align-items: center;
	justify-content: center
}

.qr-img {
	width: 180px;
	height: 180px;
	display: block;
	border-radius: 4px
}

.qr-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0
}

.stat-row {
	display: flex;
	gap: 10px
}

.stat-box {
	flex: 1;
	padding: 16px;
	border-radius: 12px;
	text-align: center;
	background: linear-gradient(135deg, rgba(201, 168, 76, .08),
		rgba(13, 21, 40, .6));
	border: 1px solid rgba(201, 168, 76, .18)
}

.stat-num {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(135deg, #e8c95a, #c9a84c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.stat-txt {
	font-size: 11px;
	color: #8892a8;
	margin-top: 4px;
	font-weight: 500
}

.link-strip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(13, 21, 40, .6);
	border: 1px solid rgba(136, 146, 168, .12);
	border-radius: 10px
}

.link-strip .url {
	flex: 1;
	font-size: 12px;
	color: #a0aabe;
	word-break: break-all;
	line-height: 1.5
}

.copy-btn {
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: 8px;
	border: none;
	background: linear-gradient(135deg, #c9a84c, #e8c95a);
	color: #0a0f1e;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s
}

.copy-btn:hover {
	box-shadow: 0 2px 10px rgba(201, 168, 76, .35)
}

.action-bar {
	display: flex;
	gap: 10px;
	padding: 14px;
	background: rgba(16, 24, 48, .7);
	border-radius: 14px;
	border: 1px solid rgba(201, 168, 76, .1);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2)
}

.action-btn {
	flex: 1;
	height: 42px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all .25s
}

.action-btn.primary {
	background: linear-gradient(135deg, #c9a84c, #e8c95a);
	border: none;
	color: #0a0f1e;
	box-shadow: 0 2px 10px rgba(201, 168, 76, .25)
}

.action-btn.primary:hover {
	box-shadow: 0 4px 20px rgba(201, 168, 76, .4);
	transform: translateY(-1px)
}

.action-btn.outline {
	background: transparent;
	border: 1.5px solid rgba(201, 168, 76, .4);
	color: #e8c95a
}

.action-btn.outline:hover {
	background: rgba(201, 168, 76, .08);
	border-color: #c9a84c
}

.tip-bar {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 10px 14px;
	background: rgba(201, 168, 76, .06);
	border: 1px solid rgba(201, 168, 76, .12);
	border-radius: 10px;
	margin-top: 12px
}

.tip-bar i {
	color: #c9a84c;
	font-size: 14px;
	flex-shrink: 0
}

.tip-bar span {
	font-size: 12px;
	color: #8892a8;
	line-height: 1.6
}



/* 修改滑块拖拽块的宽高 */
.custom .layui-slider-wrap-btn{
  width: 60px !important;
  border-radius: 2px !important; /* 取消默认圆角，适配方形滑块 */
 background-color:#eee;
  
}
.custom .layui-slider-wrap{
	top:-8px
}
/* 同步调整轨道高度，避免比例失调 */