.pk-page,
.pk-page * { box-sizing: border-box; }

.pk-page { padding: .4rem 0 1.6rem; }

.pk-card {
	background: var(--bg);
	border: 1px solid var(--br);
	border-radius: .5rem;
	padding: 1rem .8rem .9rem;
}

.pk-card h1 {
	margin: 0 0 .2rem;
	font-size: 1.15rem;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
	color: var(--color);
}

.pk-sub {
	margin: 0 0 .9rem;
	text-align: center;
	color: #999;
	font-size: .75rem;
	line-height: 1.4;
}

.pk-tip {
	display: none;
	margin: 0 0 .7rem;
	padding: .45rem .6rem;
	border-radius: .35rem;
	background: #fff4ef;
	color: #d35400;
	font-size: .75rem;
	line-height: 1.4;
	text-align: center;
}

.pk-field { margin-bottom: .7rem; }

.pk-field > span {
	display: block;
	margin-bottom: .25rem;
	font-size: .75rem;
	color: var(--color);
}

.pk-field input {
	display: block;
	width: 100%;
	height: 2.3rem;
	margin: 0;
	padding: 0 .6rem;
	border: 1px solid var(--br);
	border-radius: .35rem;
	background: var(--lbg);
	color: var(--color);
	font-size: .85rem;
}

.pk-field input:focus { border-color: #05a7e1; }

.pk-code {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.pk-code input { flex: 1; width: auto; }

.pk-code img {
	width: 5.6rem;
	height: 2.3rem;
	border: 1px solid var(--br);
	border-radius: .35rem;
	background: var(--bg);
	object-fit: cover;
}

.pk-btn {
	display: block;
	width: 100%;
	height: 2.4rem;
	margin: .2rem 0 0;
	padding: 0;
	border: none;
	border-radius: 1.2rem;
	background: #05a7e1;
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
}

.pk-btn:disabled { opacity: .65; }

.pk-switch {
	display: block;
	margin-top: .7rem;
	text-align: center;
	color: #05a7e1;
	font-size: .8rem;
}

.pk-switch:hover { color: #05a7e1; }

.pk-hero {
	display: flex;
	align-items: center;
	gap: .7rem;
	background: var(--bg);
	border: 1px solid var(--br);
	border-radius: .5rem;
	padding: .8rem;
}

.pk-avatar {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 3.2rem;
	background: var(--lbg);
}

.pk-hello {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color);
}

.pk-hello a { color: #05a7e1; }

.pk-vip {
	margin-top: .2rem;
	font-size: .75rem;
	line-height: 1.5;
	color: #888;
}

.pk-vip strong { font-weight: 700; color: #e67e22; }

.pk-vip .f-green,
.pk-vip .f-orange { color: #05a7e1; }

.pk-vip .f-red { color: #e74c3c; }

.pk-vip .icon { display: none; }

.pk-vip p { margin: .15rem 0 0; }

.pk-stats {
	display: flex;
	margin-top: .6rem;
	background: var(--bg);
	border: 1px solid var(--br);
	border-radius: .5rem;
	overflow: hidden;
}

.pk-stats div {
	flex: 1;
	text-align: center;
	padding: .7rem .3rem;
}

.pk-stats div + div { border-left: 1px solid var(--br); }

.pk-stats b {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: #05a7e1;
}

.pk-stats span {
	display: block;
	margin-top: .15rem;
	font-size: .7rem;
	color: #999;
}

.pk-perks {
	margin-top: .6rem;
	background: var(--bg);
	border: 1px solid var(--br);
	border-radius: .5rem;
	padding: .7rem .4rem .4rem;
}

.pk-perks h2 {
	margin: 0 .3rem .45rem;
	font-size: .8rem;
	font-weight: 700;
	color: var(--color);
}

.pk-perk-row { display: flex; }

.pk-perk-row a {
	flex: 1;
	text-align: center;
	color: var(--color);
	padding-bottom: .3rem;
}

.pk-perk-row a:hover { color: var(--color); }

.pk-perk-row img {
	width: 2.2rem;
	height: 2.2rem;
	object-fit: contain;
}

.pk-perk-row p {
	margin: .25rem 0 0;
	font-size: .65rem;
	color: #888;
}

.pk-banner {
	display: block;
	margin-top: .6rem;
	padding: .6rem .7rem;
	border-radius: .45rem;
	background: #eef8fd;
	color: #05a7e1;
	font-size: .75rem;
	line-height: 1.5;
}

.pk-banner:hover { color: #05a7e1; }

.pk-menu {
	margin-top: .6rem;
	background: var(--bg);
	border: 1px solid var(--br);
	border-radius: .5rem;
	overflow: hidden;
}

.pk-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .75rem .7rem;
	color: var(--color);
	font-size: .85rem;
	border-top: 1px solid var(--br);
}

.pk-menu a:first-child { border-top: none; }

.pk-menu a:hover { color: var(--color); }

.pk-menu span {
	position: relative;
	padding-right: .7rem;
	font-size: .7rem;
	color: #999;
}

.pk-menu span:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: .35rem;
	height: .35rem;
	margin-top: -.22rem;
	border-top: 1px solid #bbb;
	border-right: 1px solid #bbb;
	transform: rotate(45deg);
}