:root {
	--member-ink: #142c3b;
	--member-blue: #2e7180;
	--member-sky: #86b9c4;
	--member-paper: #fffdf5;
	--member-gold: #d7b75a;
	--member-red: #b55449;
}

.entrance-drum__face--member {
	background: transparent !important;
	overflow: visible !important;
}

.entrance-member-hub,
.entrance-member-hub * { box-sizing: border-box; }

.entrance-member-hub {
	position: relative;
	width: min(1120px, calc(100% - 28px));
	margin: clamp(26px, 6vh, 68px) auto 74px;
	color: var(--member-ink);
}

.entrance-member-hub__hero {
	display: grid;
	grid-template-columns: 170px minmax(260px, 1fr) minmax(320px, .92fr);
	align-items: center;
	gap: clamp(16px, 2.3vw, 30px);
	min-height: 178px;
	padding: 18px clamp(18px, 2.5vw, 32px);
	border: 2px solid var(--member-ink);
	background: rgba(255, 253, 245, .96);
	box-shadow: 8px 9px 0 var(--member-ink);
}

.entrance-member-hub__mashiron {
	align-self: end;
	height: 158px;
	overflow: hidden;
}
.entrance-member-hub__mashiron img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 7px 5px #142c3b42);
}

.entrance-member-hub__welcome small,
.entrance-member-card header small,
.entrance-passport-document > small,
.entrance-passport-rank-window > small {
	color: var(--member-blue);
	font: 900 10px/1 ui-monospace, Consolas, monospace;
	letter-spacing: .15em;
}
.entrance-member-hub__welcome h2 {
	margin: 7px 0 8px;
	font-size: clamp(32px, 4.2vw, 56px);
	line-height: 1;
}
.entrance-member-hub__welcome p {
	max-width: 520px;
	margin: 0;
	font-size: 14px;
	font-weight: 750;
	line-height: 1.65;
}

.entrance-member-hub__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.entrance-member-hub__actions button {
	min-height: 47px;
	padding: 9px 10px;
	border: 1px solid var(--member-ink);
	background: var(--member-paper);
	color: var(--member-ink);
	font: 850 13px/1.2 system-ui, sans-serif;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, transform .16s ease;
}
.entrance-member-hub__actions button:first-child {
	background: var(--member-ink);
	color: #fff;
}
.entrance-member-hub__actions button:hover,
.entrance-member-hub__actions button:focus-visible {
	background: var(--member-blue);
	color: #fff;
	transform: translateY(-2px);
}

.entrance-member-hub__overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.entrance-member-card {
	min-width: 0;
	padding: clamp(20px, 2.5vw, 30px);
	border: 1px solid #142c3b9c;
	background: rgba(255, 253, 245, .95);
	box-shadow: 5px 6px 0 #142c3bba;
}
.entrance-member-card header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 5px 12px;
	padding-bottom: 11px;
	border-bottom: 2px solid var(--member-ink);
}
.entrance-member-card header small { flex-basis: 100%; }
.entrance-member-card h3 {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.15;
}
.entrance-member-card header > span {
	color: var(--member-blue);
	font: 900 14px/1 monospace;
}

.entrance-member-card dl {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 18px 0 0;
}
.entrance-member-card dl > div {
	min-width: 0;
	padding: 12px;
	border-left: 4px solid var(--member-sky);
	background: #edf6f6;
}
.entrance-member-card dt {
	margin-bottom: 5px;
	color: #506675;
	font-size: 10px;
	font-weight: 850;
}
.entrance-member-card dd {
	margin: 0;
	font-size: clamp(17px, 2vw, 24px);
	font-weight: 900;
	overflow-wrap: anywhere;
}
.entrance-member-card__progress {
	margin: 13px 0 0;
	padding: 10px 12px;
	border-left: 5px solid var(--member-gold);
	background: #fff4c8;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.6;
}
.entrance-member-card__link {
	display: inline-block;
	margin-top: 15px;
	padding: 10px 14px;
	border: 2px solid var(--member-ink);
	background: var(--member-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.entrance-member-card--benefits > p {
	margin: 14px 0 12px;
	font-size: 13px;
	font-weight: 750;
	line-height: 1.6;
}
.entrance-member-card--benefits ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.entrance-member-card--benefits li {
	position: relative;
	padding: 10px 8px 10px 30px;
	border: 1px solid #142c3b40;
	background: #f2f2ed;
	color: #727b80;
	font-size: 12px;
	font-weight: 800;
}
.entrance-member-card--benefits li::before {
	content: "—";
	position: absolute;
	left: 10px;
	top: 9px;
}
.entrance-member-card--benefits li.is-active {
	border-color: #b28e3f;
	background: #fff6ca;
	color: var(--member-ink);
}
.entrance-member-card--benefits li.is-active::before { content: "✓"; color: #8e6a17; }

.entrance-member-card--stamps { grid-column: 1 / -1; }
.entrance-member-card--stamps ol {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 9px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.entrance-member-card--stamps li {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px dashed #71838d;
	border-radius: 50%;
	color: #8a989e;
	font: 900 11px/1 monospace;
}
.entrance-member-card--stamps li.is-stamped {
	border: 3px double var(--member-red);
	color: var(--member-red);
	transform: rotate(-7deg);
}
.entrance-member-card--stamps li.is-stamped span::before {
	content: "V";
	margin-right: 2px;
	font-size: 7px;
}

.entrance-passport-dialog {
	width: min(780px, calc(100vw - 28px));
	max-height: min(88svh, 820px);
	margin: auto;
	padding: 0;
	border: 4px solid var(--member-ink);
	background: var(--member-paper);
	box-shadow: 16px 18px 0 #07141dcf;
	color: var(--member-ink);
	overflow: auto;
}
.entrance-passport-dialog::backdrop { background: #07141de8; backdrop-filter: blur(5px); }
.entrance-passport-dialog__close { position: sticky; z-index: 20; top: 8px; float: right; margin: 8px 8px -48px 0; }
.entrance-passport-dialog__close button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid var(--member-ink);
	background: #fff;
	color: var(--member-ink);
	font-size: 25px;
	font-weight: 900;
	cursor: pointer;
}

.entrance-passport-document,
.entrance-passport-rank-window {
	min-height: 420px;
	padding: clamp(28px, 5vw, 58px);
	background: #fffaf0;
}
.entrance-passport-document > h2,
.entrance-passport-rank-window > h2 {
	margin: 9px 0 15px;
	font-size: clamp(28px, 5vw, 52px);
	line-height: 1;
}
.entrance-passport-document > p { font-weight: 700; }
.entrance-passport-document > a,
.entrance-passport-document__complete a {
	display: inline-block;
	padding: 10px 13px;
	border: 2px solid var(--member-ink);
	background: var(--member-blue);
	color: #fff;
	font-weight: 900;
	text-decoration: none;
}
.entrance-passport-document__signed {
	width: min(480px, 100%);
	margin: 38px 0 25px !important;
	padding: 12px 4px 7px;
	border-bottom: 2px solid var(--member-ink);
	font-family: cursive;
	font-size: 19px;
}

.entrance-passport-login-form { display: grid; gap: 15px; width: min(520px, 100%); margin-top: 28px; }
.entrance-passport-login-form label { display: grid; gap: 6px; font-weight: 900; }
.entrance-passport-login-form input:not([type="checkbox"]) {
	width: 100%;
	padding: 12px 8px 7px;
	border: 0;
	border-bottom: 2px solid var(--member-ink);
	border-radius: 0;
	background: transparent;
	font-size: 18px;
}
.entrance-passport-login-form__remember { grid-template-columns: auto 1fr; align-items: center; }
.entrance-passport-login-form button,
.entrance-passport-dialog .entrance-reception button,
.entrance-passport-dialog .entrance-member-apply-form > button {
	justify-self: start;
	padding: 12px 18px;
	border: 2px solid var(--member-ink);
	background: var(--member-blue);
	color: #fff;
	font-weight: 900;
	cursor: pointer;
}

.entrance-passport-dialog .entrance-reception,
.entrance-passport-dialog .entrance-premium-apply,
.entrance-passport-dialog .entrance-premium-active,
.entrance-passport-dialog .entrance-premium-pending {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 18px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.entrance-passport-dialog .entrance-reception__counter { display: none !important; }
.entrance-passport-dialog .entrance-reception__form,
.entrance-passport-dialog .entrance-premium-apply__body { padding: 0 !important; border: 0 !important; background: transparent !important; }
.entrance-passport-dialog .entrance-reception__form > span,
.entrance-passport-dialog .entrance-reception__form > h2,
.entrance-passport-dialog .entrance-reception__login,
.entrance-passport-dialog .entrance-premium-apply > summary { display: none !important; }
.entrance-passport-dialog .entrance-reception form,
.entrance-passport-dialog .entrance-member-apply-form { display: grid; gap: 13px; }
.entrance-passport-dialog .entrance-reception label,
.entrance-passport-dialog .entrance-member-apply-form > label { display: grid; gap: 5px; font-weight: 800; }
.entrance-passport-dialog .entrance-reception input,
.entrance-passport-dialog .entrance-member-apply-form input:not([type="radio"]):not([type="checkbox"]) {
	width: 100%;
	min-height: 42px;
	padding: 9px;
	border: 1px solid #142c3b66;
	background: #fff;
}
.entrance-passport-dialog .entrance-member-payment { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px dashed var(--member-ink); }
.entrance-passport-dialog .entrance-member-payment label { display: flex; gap: 5px; }
.entrance-passport-dialog .entrance-member-inline-rules { padding: 9px; border: 1px solid #17304455; background: #fff9; }

.entrance-passport-dialog--ranks { width: min(540px, calc(100vw - 28px)); }
.entrance-passport-rank-window ol { display: grid; gap: 8px; margin: 20px 0; padding: 0; list-style: none; }
.entrance-passport-rank-window li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	padding: 11px;
	border-left: 5px solid var(--member-blue);
	background: #edf6f6;
}
.entrance-passport-rank-window li b { font-size: 17px; }
.entrance-passport-rank-window li span { font-size: 12px; line-height: 1.55; }
.entrance-passport-rank-window > a { color: var(--member-blue); font-weight: 900; }

@media (max-width: 760px) {
	.entrance-member-hub { width: min(100% - 18px, 520px); margin: 52px auto 56px; }
	.entrance-member-hub__hero {
		grid-template-columns: 105px minmax(0, 1fr);
		gap: 10px 14px;
		min-height: 0;
		padding: 14px;
		box-shadow: 5px 6px 0 var(--member-ink);
	}
	.entrance-member-hub__mashiron { height: 112px; }
	.entrance-member-hub__welcome h2 { font-size: clamp(27px, 8vw, 38px); }
	.entrance-member-hub__welcome p { font-size: 12px; }
	.entrance-member-hub__actions { grid-column: 1 / -1; width: 100%; }
	.entrance-member-hub__actions button { min-height: 43px; font-size: 12px; }
	.entrance-member-hub__overview { grid-template-columns: 1fr; margin-top: 14px; }
	.entrance-member-card { padding: 18px 16px; box-shadow: 4px 5px 0 #142c3bba; }
	.entrance-member-card--stamps { grid-column: auto; }
	.entrance-member-card dl { grid-template-columns: 1fr; }
	.entrance-member-card dl > div { display: grid; grid-template-columns: 105px 1fr; align-items: center; }
	.entrance-member-card dt { margin: 0; }
	.entrance-member-card dd { font-size: 18px; }
	.entrance-member-card--stamps ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.entrance-passport-document,
	.entrance-passport-rank-window { min-height: 0; padding: 28px 18px; }
	.entrance-passport-rank-window li { grid-template-columns: 92px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.entrance-member-hub__actions button { transition: none; }
}