:root {
	color-scheme: light;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	color: #282828;
	background: #f5f6f8;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
	background: #f5f6f8;
}

body {
	font-size: 16px;
	line-height: 1.75;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid #e8eaed;
	backdrop-filter: blur(12px);
}

.topbar h1 {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
	text-align: center;
}

.page {
	width: min(100%, 920px);
	margin: 0 auto;
	padding: 22px 20px calc(40px + env(safe-area-inset-bottom));
}

.agreement {
	padding: 24px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(31, 35, 41, 0.06);
	overflow-wrap: anywhere;
}

.agreement h1,
.agreement h2,
.agreement h3 {
	line-height: 1.5;
}

.agreement h2:first-child,
.agreement h1:first-child {
	margin-top: 0;
}

.agreement img,
.agreement video {
	max-width: 100%;
	height: auto;
}

.agreement table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.agreement td,
.agreement th {
	padding: 8px;
	border: 1px solid #dfe2e6;
}

.status,
.error {
	margin: 80px auto;
	text-align: center;
	color: #7a7f87;
}

.error h2 {
	color: #282828;
}

.error button {
	padding: 10px 22px;
	color: #fff;
	font: inherit;
	background: #50b568;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

@media (max-width: 600px) {
	.page {
		padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
	}

	.agreement {
		padding: 18px 16px;
		border-radius: 10px;
	}
}