@charset "utf-8";

/* ===== 顶部 Hero ===== */
.hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: #fff;
	padding: 2.4rem 1rem 2.4rem;
	background: var(--grad);
}

.hero::before,.hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.16);
}

.hero::before {
	width: 20rem;
	height: 20rem;
	top: -5rem;
	left: -4rem
}

.hero::after {
	width: 22rem;
	height: 22rem;
	bottom: -11rem;
	right: -5rem;
	border-style: dashed
}

.hero .chip {
	display: inline-block;
	margin-bottom: 1.4rem;
	padding: .6rem 2rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.28);
	backdrop-filter: blur(4px);
}

.hero .title {
	margin-bottom: .8rem;
	gap: .4rem;
	line-height: 1;
	font-size: 2rem;
	font-weight: 700;
}

.hero .title i {
	font-size: 2rem;
	color: rgba(255,255,255,.85)
}

.hero .subtitle {
	line-height: 1;
	font-size: 1.1rem;
	color: rgba(255,255,255,.72);
}

.hero .steps {
	gap: 1rem;
	padding: .6rem 2rem;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.28);
	backdrop-filter: blur(4px);
	overflow: hidden;
}

.hero .step {
	gap: .4rem;
	opacity: .3;
	transition: all .25s;
}

.hero .step .num {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	font-size: .8rem;
	font-family: 'Montserrat-reg';
	border: 1.5px solid #fff;
	overflow: hidden;
}

.hero .step .num i {
	font-size: .8rem;
}

.hero .step .text {
	line-height: 1;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.hero .step.active {
	opacity: 1;
}

.hero .step.active .num,
.hero .step.done .num {
	background: #fff;
	border: none;
	color: var(--primary);
}

.hero .s-bar {
	width: 2rem;
	height: 1.5px;
	background: rgba(255,255,255,.45)
}

.safe {
	height: calc(7rem + env(safe-area-inset-bottom));
}

  /* ===== 主卡片 ===== */
.card {
	position: relative;
	max-width: 920px;
	background: #fff;
	border-radius: 1rem;
	margin: 0px auto 0;
	padding: 1rem;
	border: 1px solid rgba(255,255,255,.6);
	animation: rise .5s ease both;
}

.card.card--box-shawow {
	box-shadow: var(--card-shadow);
}

.panel {
	display: none;
}

.panel.on {
	display: block;
	animation: rise .45s ease both;
}

.card-head {
	margin-bottom: 1rem;
	overflow: hidden;
}

.card-head .icon {
	margin-right: .4rem;
	line-height: 1;
}

.card-head .icon i {
	font-size: 1.5rem;
	color: var(--primary)
}

.card-head .title {
	line-height: 1;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--primary)
}

.card-head .count {
	line-height: 1;
	font-size: 1rem;
	color: var(--primary);
	background: var(--tint);
	border: 1px solid var(--line);
	padding: .6rem 1.2rem;
	border-radius: 20rem
}

/* 状态胶囊 */
.card-head .status {
	gap: .4rem;
	font-size: .9rem;
	font-weight: 600;
	padding: .3rem .8rem .3rem .8rem;
	border-radius: 999px;
	border: 1px solid transparent
}

.card-head .status .dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%
}

.card-head .status.status-wait {
	background: #fff4e0;
	color: #a06a00;
	border-color: #f0dfb8
}

.card-head .status.status-wait .dot {
	background: #e0a400;
	animation: glow 1.6s infinite
}

.card-head .status.status-run {
	background: #eafff2;
	color: #319d5c;
	border-color: #4caf74
}

.card-head .status.status-run .dot {
	background: #319d5c;
	animation: glow 1.6s infinite
}

.card-head .status.status-end {
	background: #eee;
	color: #999;
	border-color: #ddd
}

.card-head .status.status-end .dot {
	background: #999;
	animation: glow 1.6s infinite
}

@keyframes glow {
	0% {
		box-shadow: 0 0 0 0 rgba(224,164,0,.35)
	}

	70% {
		box-shadow: 0 0 0 6px rgba(224,164,0,0)
	}

	100% {
		box-shadow: 0 0 0 0 rgba(224,164,0,0)
	}
}

  /* 表头（手机端隐藏） */
.blind-thead {
	display: grid;
	grid-template-columns: 5rem repeat(4,minmax(0,1fr)) 4rem;
	gap: 1rem;
	margin-bottom: 1rem;
	padding: .6rem 0px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
}

.blind-list {
	margin-bottom: 2rem;
	overflow: hidden;
}

.blind-item {
	position: relative;
	display: grid;
	align-items: center;
	grid-template-columns: 5rem repeat(4,minmax(0,1fr)) 4rem;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: var(--line) 1px solid;
}

.blind-item:last-child {
	border-bottom: none;
}

.blind-badge {
	width: 5rem;
	height: 4rem;
	border-radius: 1rem;
	text-align: center;
	overflow: hidden;
	background: linear-gradient(135deg,#fdf3f6,#f6e3e9);
	border: 1px solid var(--line);
	box-sizing: content-box;
	line-height: 4rem;
	font-family: 'Montserrat-reg';
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--primary);
}

.blind-field {
	overflow: visible;
}

.blind-field label {
	margin-bottom: .5rem;
	line-height: 1;
	font-size: .9rem;
	font-weight: 400;
	color: var(--ink);
}

.blind-delete {
	height: 4rem;
}

.blind-delete .blind-delete_btn {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
	transition: transform .25s, background .25s, color .25s, box-shadow .25s, border-color .25s;
}

.blind-delete .blind-delete_btn:hover {
	background: var(--grad);
	border-color: transparent;
	transform: rotate(90deg) scale(1.05);
	box-shadow: var(--card-shadow);
}

.blind-delete .blind-delete_btn i {
	color: var(--primary);
	font-size: 1rem;
	font-weight: bold;
}

.blind-delete .blind-delete_btn:hover i {
	color: #fff;
}

@media (max-width:598px) {
	.blind-thead {
		display: none
	}

	.blind-item {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "badge del" "sb bb" "ante time";
	}

	.blind-badge {
		grid-area: badge;
		justify-self: start
	}

	.blind-delete {
		grid-area: del;
		justify-self: end
	}

	.blind-field.f-sb {
		grid-area: sb
	}

	.blind-field.f-bb {
		grid-area: bb
	}

	.blind-field.f-ante {
		grid-area: ante
	}

	.blind-field.f-time {
		grid-area: time
	}
}

.blind-add-btn {
	gap: .5rem;
	padding: 1rem 3rem;
	border-radius: 999px;
	border: 1px dashed var(--primary-light);
	background: linear-gradient(135deg,#ffffff,#fbf0f3);
	cursor: pointer;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	color: var(--primary);
	font-size: 1rem;
	font-weight: 700;
}

.blind-add-btn i {
	font-size: 1.2rem;
}

.blind-add-btn:hover {
	border-color: var(--primary);
	box-shadow: 0 .6rem 1rem rgba(128,0,32,.16);
	transform: translateY(-2px)
}

/* ===== 表单行 ===== */
.form-item {
	position: relative;
	display: grid;
	grid-template-columns: 8rem minmax(0,1fr);
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: var(--line) 1px solid;
}
  /* 行分割线：渐变发丝线 */
.form-item::last-child {
	border: none;
}

.form-lable {
	line-height: 1;
	font-size: 1.1rem;
	font-weight: normal;
	color: var(--ink)
}

.form-lable .must {
	margin-right: .4rem;
	font-style: normal;
	color: var(--primary);
}

.form-field {
	overflow: visible;
}

.form-field input {
	height: 3.6rem;
}

.form-radios {
	gap: 1rem;
	flex-wrap: wrap
}

.form-select {
	position: relative;
}

.form-select .swatch {
	position: absolute;
	left: 1rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #0f8a80;
	pointer-events: none;
	transition: background .3s;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.25);
}

.form-select > i {
	position: absolute;
	right: 1rem;
	font-size: 1.6rem;
	color: var(--muted);
	pointer-events: none;
	transition: transform .2s;
}

.form-select:focus-within > i {
	transform: rotate(180deg);
	color: var(--primary)
}
  /* 纯 CSS：根据选中项切换色块预览 */
.form-select:has(option[value="teal"]:checked)  .swatch {
	background: #0f8a80
}

.form-select:has(option[value="wine"]:checked)  .swatch {
	background: #800020
}

.form-select:has(option[value="lake"]:checked)  .swatch {
	background: #2f6f9e
}

.form-select:has(option[value="amber"]:checked) .swatch {
	background: #c07f00
}

.form-select:has(option[value="violet"]:checked).swatch {
	background: #6b4dc4
}

.rebuy {
	overflow: hidden;
}

.rebuy-head {
	display: grid;
	grid-template-columns: 6rem 12rem repeat(2,minmax(0,1fr));
	gap: 1rem;
	margin-bottom: 1rem;
	padding: 0rem 1rem;
}

.rebuy-head span {
	line-height: 1;
	text-align: center;
	font-size: .9rem;
	font-weight: 600;
	color: var(--muted);
}

.rebuy-body {
	overflow: hidden;
}

.rebuy-body .empty {
	padding-top: 4rem;
	text-align: center;
	line-height: 1;
	font-size: 1rem;
	color: var(--muted);
}

.rebuy-item {
	background: var(--tint);
	margin-bottom: 1rem;
	padding: .6rem 1rem;
	border-radius: 1rem;
	gap: 1rem;
	display: grid;
	grid-template-columns: 6rem 12rem repeat(2,minmax(0,1fr));
	align-items: center;
}

.rebuy-item:last-child{
    margin-bottom: 0px;
}

.rebuy-item .r-badge {
	background: var(--primary);
	color: #fff;
	padding: .3rem .6rem;
	border-radius: 1rem;
	line-height: 1;
	text-align: center;
	font-size: 1rem;
	font-family: 'Montserrat-reg';
}

.rebuy-item .r-value {
	line-height: 1;
	text-align: center;
	font-size: 1rem;
	font-family: 'Montserrat-reg';
	color: var(--ink);
}
/* ===== 赛事卡片 ===== */
.event {
	gap: 1rem;
}

.event-item {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 1rem;
	border-top: var(--line) 1px solid;
	border-right: var(--line) 1px solid;
	border-bottom: var(--line) 1px solid;
	border-left: 4px solid var(--primary);
	padding: 1rem 1.2rem 1rem 1.4rem;
	transition: all .25s;
	animation: rise .5s ease both;
	animation-delay: .03s
}

.event-item:hover {
	box-shadow: var(--card-shadow);
}

.event-header {
	overflow: hidden;
	margin-bottom: 1rem;
}

.event-title {
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1
}

.event-status {
	gap: .4rem;
	font-size: .9rem;
	font-weight: 600;
	padding: .3rem .8rem .3rem .8rem;
	border-radius: 999px;
	border: 1px solid transparent
}

.event-status .dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%
}

.event-status.wait {
	background: #fff4e0;
	color: #a06a00;
	border-color: #f0dfb8
}

.event-status.wait .dot {
	background: #e0a400
}

.event-status.running {
	background: #e6f6ec;
	color: #178a4c;
	border-color: #bfe6cd
}

.event-status.running .dot {
	background: #178a4c;
	animation: pulse 1.6s infinite
}

.event-status.ended {
	background: #f1eef0;
	color: #8b8089;
	border-color: #e2dcdf
}

.event-status.ended .dot {
	background: #a99ba3
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(23,138,76,.35)
	}

	70% {
		box-shadow: 0 0 0 6px rgba(23,138,76,0)
	}

	100% {
		box-shadow: 0 0 0 0 rgba(23,138,76,0)
	}
}

  /* 数据栏 */
.event-info {
	overflow: hidden;
	margin-bottom: 1rem;
	padding: 1rem 0px
}

.event-line {
	width: 1px;
	height: 3rem;
	background: var(--line);
}

.event-lab {
	line-height: 1;
	font-size: 1rem;
	color: var(--muted);
}

.event-val {
	line-height: 1.6;
	font-size: 1.8rem;
	font-weight: 800;
	font-family: 'Montserrat-reg';
	color: var(--ink);
	font-variant-numeric: tabular-nums
}

.event-val.accent {
	color: var(--primary)
}

  /* 操作行 */
.event-actions {
	position: relative;
	padding-top: 1rem;
	gap: 1rem;
}

.event-actions::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

/*控制台*/
.console-grid {
	display: grid;
	margin-bottom: 1rem;
	grid-template-columns: minmax(0,1fr) auto;
	gap: 1rem;
	align-items: stretch
}

.console-levels {
	gap: 1rem;
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: 1rem;
	padding: 1rem;
}

.console-levels-row {
	gap: 1rem;
	line-height: 1;
	font-size: 1rem;
	color: var(--ink);
}

.console-levels-row .r-badge {
	padding: .3rem .8rem;
	border-radius: .5rem;
	background: linear-gradient(135deg,#fdf3f6,#f6e3e9);
	border: 1px solid var(--line);
	font-weight: 800;
	font-family: 'Montserrat-reg';
	color: var(--primary);
}

.console-levels-row .r-value {
	font-weight: 700;
	font-family: 'Montserrat-reg';
	font-variant-numeric: tabular-nums;
}

.console-levels-row .r-ante {
	margin-left: -1rem;
	font-weight: 600;
	font-family: 'Montserrat-reg';
}

.console-total {
	border-top: var(--line) 1px solid;
	padding-top: 1rem;
	line-height: 1;
	font-size: 1rem;
	color: var(--ink);
}

.console-total span {
	padding-left: .2rem;
	padding-right: .4rem;
	font-family: 'Montserrat-reg';
	color: var(--primary);
}

  /* 计时器面板 */
.timer-panel {
	position: relative;
	overflow: hidden;
	min-width: 10rem;
	gap: .6rem;
	border-radius: 1rem;
	padding: 1.4rem 2rem;
	color: #fff;
	background: linear-gradient(160deg,#5e001a,#800020 70%,#a83a56);
	box-shadow: var(--card-shadow);
}

.timer-panel .t-label {
	line-height: 1;
	font-size: 1rem;
	color: rgba(255,255,255,.7)
}

.timer-panel .t-digits {
	line-height: 1;
	font-size: 3rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-family: 'arial_black';
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.timer-panel .t-state {
	line-height: 1;
	gap: .6rem;
	font-size: 1rem;
	color: rgba(255,255,255,.85)
}

.timer-panel .t-state .dot {
	width: .3rem;
	height: .3rem;
	border-radius: 50%;
	background: #ffd166;
	animation: glow 1.6s infinite
}

  /* 控制按钮 */
.ctrl-rows {
	gap: 1rem;
}

.ctrl-item {
	gap: 1rem
}
  /* ===== 大屏设置 ===== */
.link-panel {
	gap: 1rem;
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: 1rem;
	margin-bottom: 1rem;
	padding: 1rem;
}

.link-lable {
	margin-bottom: .4rem;
	line-height: 1;
	font-size: 1rem;
	color: var(--ink)
}

.link-url {
	line-height: 1.2;
	font-size: 1rem;
	color: var(--ink);
	word-break: break-all;
}

.edit-rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.edit-item {
	gap: .6rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 1rem;
	padding: .8rem 1rem;
	transition: border-color .2s, box-shadow .2s;
}

.edit-item .e-lable {
	line-height: 1;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	flex: none
}

/* ===== 记分牌 ===== */
.score-grid {
	margin-bottom: 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem
}

.score-box {
	gap: .6rem;
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: 1rem;
	padding: 1rem;
}

.score-box .s-lable {
	line-height: 1;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
}

.score-box .s-num {
	line-height: 1;
	font-size: 1.8rem;
	font-weight: 800;
	font-family: 'Montserrat-reg';
	font-variant-numeric: tabular-nums;
	color: var(--primary);
}

  /* ===== 响应式（媒体查询保持 px，不随 rem 缩放） ===== */
@media (max-width:414px) {
	.console-grid {
		grid-template-columns: 1fr
	}

	.timer-panel {
		margin-bottom: 1rem;
		order: -1
	}

	.edit-rows {
		grid-template-columns: 1fr
	}

	.score-grid {
		grid-template-columns: 1fr
	}
}

  /* ===== 底部操作栏 ===== */
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .6rem 3rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
}

.footer .foot-inner {
	gap: 1rem;
}

.footer .foot-inner button {
	height: 3.6rem;
}

.tab-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar a {
	position: relative;
	height: 4rem;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--muted);
}

.tab-bar a + a {
	border-left: 1px solid var(--line);
}

.tab-bar a:hover {
	color: var(--primary);
}

.tab-bar a.active {
	font-weight: 800;
	color: var(--primary);
}
/* 选中态顶部渐变指示条 */
.tab-bar a.active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: .3rem;
	border-radius: 0 0 .3rem .3rem;
	background: var(--grad);
}

/* ===== 卡片布局：1 大 + 2 小 ===== */
.start-grid {
	width: 100vw;
	height: calc(100vh - (4rem + env(safe-area-inset-bottom)));
	padding: 2rem;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.type-card {
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
	min-height: 16rem;
	padding: 2rem;
	gap: .6rem;
	box-shadow: var(--card-shadow);
	transition: box-shadow .25s;
	animation: rise .5s ease both;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}
/* 三张卡片各自渐变 */
.type-card.card-mtt {
	background: linear-gradient(155deg,#c46a84 0%,#800020 55%,#4d0014 100%);
}

.type-card.card-sng {
	background: linear-gradient(155deg,#d29ab0 0%,#a05c78 55%,#7c4058 100%);
	animation-delay: .07s;
}

.type-card.card-fun {
	background: linear-gradient(155deg,#e8b465 0%,#b27a1f 55%,#8a5a00 100%);
	animation-delay: .14s;
}

.type-card:hover {
	box-shadow: 0 6px 12px rgba(94,0,26,.4);
}

.type-card.big {
	grid-column: 1 / -1;
	min-height: 18rem;
}

.type-card .icon {
	position: absolute;
	bottom: -1rem;
	left: -1rem;
	opacity: .2;
	line-height: 1;
	color: #fff;
}

.type-card .icon .iconfont {
	font-size: 10rem;
}

.type-card .title {
	line-height: 1;
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
}

.type-card.big .title {
	font-size: 2rem;
}

.type-card .text {
	line-height: 1.2;
	font-size: 1.1rem;
	color: rgba(255,255,255,.8);
}

.type-card .plus {
	align-self: end;
	justify-self: end;
	color: var(--muted);
}

.type-card .plus .iconfont {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px dashed var(--muted);
	margin-bottom: .8rem;
	transition: transform .25s;
	font-size: 1.6rem;
}

.type-card .plus .iconfont:hover {
	transform: scale(1.1);
}

.type-card .plus span {
	line-height: 1;
	font-size: 1rem;
}

/* ===== 图片弹窗设置 ===== */
.img-panel { padding: 1rem; }
.img-preview-wrap {
    width: 100%;
    height: 180px;
    background: #f5f5f5;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}
.img-preview-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.img-placeholder {
    color: #bbb;
    text-align: center;
    font-size: 14px;
}
.img-placeholder i { font-size: 48px; display: block; margin-bottom: 8px; }
.img-actions {margin-bottom: 1rem; gap: 10px; }

.img-switch {
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}
.img-switch-label { flex: 1; }
.label-title {margin-bottom: .2rem; line-height: 1; font-size: 1.2rem; font-weight: 600; color: #333; }
.label-desc  { font-size: 1rem; color: #999;}

/* 开关样式 */
.switch {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ddd;
    border-radius: 26px;
    transition: .3s;
}
.slider::before {
    content: "";
    position: absolute;
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .3s;
}
.switch input:checked + .slider { background: #07c160; }
.switch input:checked + .slider::before { transform: translateX(22px); }

.chips-dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.chips-dialog.show {
	opacity: 1;
	pointer-events: auto;
}

    /* 弹窗卡片 — 动画 + 样式 */
.chips-dialog .chips-box {
	background: #ffffff;
	border-radius: 1rem;
	padding: 2rem;
	max-width: 30rem;
	width: 90%;
	box-shadow: var(--card-shadow);
	transform: translateY(30px) scale(0.96);
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 0.3s ease;
	transition-delay: 0.02s;
}

.chips-dialog.show .chips-box {
	transform: translateY(0) scale(1);
	opacity: 1;
}

    /* 弹窗内部组件 */
.chips-box .chips-icon {
	line-height: 1;
	font-size: 6rem;
	color: var(--ink);
	margin-bottom: 0.6rem;
}

.chips-box .chips-title {
	line-height: 1;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.6rem;
}

.chips-box .chips-current {
	margin-bottom: 1.2rem;
	background: var(--tint);
	padding: 0.4rem 0.8rem;
	border-radius: 1rem;
	font-size: 1rem;
	color: var(--ink);
}

.chips-box .chips-current span {
	font-weight: 700;
	font-family: 'Montserrat-reg';
	color: var(--primary);
}

.chips-box .chips-input {
	width: 100%;
	overflow: visible;
	margin-bottom: 1rem;
}

.chips-box .chips-input input {
	height: 3.6rem;
}

.chips-box .chips-uppercase {
    margin-bottom: 1rem;
	line-height: 1;
	font-size: 1rem;
	color: var(--muted);
}

.chips-box .chips-select {
	margin-bottom: 1rem;
	position: relative;
}

.chips-box .chips-select > i {
	position: absolute;
	right: .8rem;
	font-size: 1.6rem;
	color: var(--muted);
	pointer-events: none;
	transition: transform .2s;
}
    /* 按钮组 */
.chips-actions {
	width: 100%;
	gap: .5rem;
}

.empty-state {
	padding: 3rem 0;
	overflow: hidden;
}

.empty-state i {
	font-size: 10rem;
	color: var(--muted);
}

.empty-state p {
	line-height: 2;
	font-size: 1.4rem;
	color: var(--muted);
}