.msp-h1 { text-align: center; }

.msp-sub {
	margin: 0 0 10px;
	font-size: 0.9em;
	color: #ABABAB;
	text-align: center;
}

.msp { position: relative; }

.msp-back-link {
	position: absolute;
	top: 14px;
	left: 0;
	padding: 7px 16px;
	font-size: 0.9em;
	color: #ABABAB;
	border: 1px solid #3A4045;
	border-radius: 0;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.msp-back-link:hover {
	color: #FFF;
	border-color: #565D63;
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}

.msp-admin-toggle {
	position: absolute;
	top: 14px;
	right: 0;
	padding: 7px 14px;
	font-size: 0.8em;
	color: #6E757C;
	border: 1px solid #3A4045;
	text-decoration: none;
}
.msp-admin-toggle:hover { color: #FFF; border-color: #565D63; text-decoration: none; }
.msp-admin-toggle.on {
	color: #FFD700;
	border-color: rgba(255, 215, 0, 0.5);
}

.msp-viewtabs { margin: 5px auto 15px; text-align: center; }

.msp-viewtab {
	display: inline-block;
	margin: 0 10px;
	padding: 5px;
	font-size: 1.144em;
	line-height: 30px;
	text-transform: uppercase;
	color: #DBDCDE;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.msp-viewtab:hover { color: #FFF; text-decoration: none; }
.msp-viewtab.active {
	color: #F40;
	border-bottom-color: #F40;
	cursor: default;
}
.msp-viewtab.active:hover { color: #F40; }

.msp .msp-viewtab-vip { color: gold; }
.msp .msp-viewtab-vip:hover { color: #FFE55C; }
.msp .msp-viewtab-vip.active {
	color: gold;
	border-bottom-color: gold;
}
.msp .msp-viewtab-vip.active:hover { color: gold; }

.msp-tip {
	position: relative;
	max-width: 420px;
	margin: 0 auto 16px;
	padding: 12px 30px 13px 15px;
	background: #1D1D1D;
	border: 1px solid rgba(255, 68, 0, 0.7);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
	font-size: 0.85em;
	line-height: 1.5em;
	text-align: left;
	animation: mspTipIn 0.35s ease both 0.5s;
}

@keyframes mspTipIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.msp-tip:before {
	content: "";
	position: absolute;
	top: -7px;
	left: 74%;
	margin-left: -6px;
	width: 11px;
	height: 11px;
	background: #1D1D1D;
	border-left: 1px solid rgba(255, 68, 0, 0.7);
	border-top: 1px solid rgba(255, 68, 0, 0.7);
	transform: rotate(45deg);
}

.msp .msp-tip a { display: block; color: #ABABAB; }
.msp .msp-tip a:hover { color: #DBDCDE; }
.msp-tip b {
	display: block;
	margin-bottom: 3px;
	font-weight: normal;
	color: #F40;
}
.msp .msp-tip a.msp-tip-close {
	position: absolute;
	top: 3px;
	right: 8px;
	font-size: 17px;
	line-height: 1;
	color: #6E757C;
	cursor: pointer;
}
.msp .msp-tip a.msp-tip-close:hover { color: #FFF; }

.msp-char-row {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	align-items: center;
	margin: 0 0 5px;
}
.msp-char-label { font-size: 0.95em; color: #ABABAB; }

.msp-select {
	display: inline-block;
	height: 38px;
	padding: 0 34px 0 12px;
	margin: 0;
	font-size: 1em;
	line-height: 36px;
	font-family: inherit;
	color: #FFF;
	border: 1px solid #3A4045;
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #1D1D1D;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238C939B' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 7px;
	transition: border-color 0.15s ease;
}
.msp-select::-ms-expand { display: none; }
.msp-select option { background: #1D1D1D; color: #FFF; }
.msp-select:hover {
	border-color: #565D63;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23E07A52' stroke-width='1.6'/%3E%3C/svg%3E");
}
.msp-select:focus {
	border-color: rgba(255, 68, 0, 0.65);
	outline: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23E07A52' stroke-width='1.6'/%3E%3C/svg%3E");
}
.msp-char-select { width: 260px; }

select.msp-select.msp-select-hidden {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	appearance: none;
	background: none;
}

.msp-dd {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.msp-dd-btn {
	position: relative;
	width: 100%;
	height: 38px;
	padding: 0 34px 0 12px;
	margin: 0;
	font-family: inherit;
	font-size: 1em;
	line-height: 36px;
	text-align: left;
	color: #FFF;
	background: #1D1D1D;
	border: 1px solid #3A4045;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: border-color 0.15s ease;
}
.msp-dd-btn:after {
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid #8C939B;
	border-bottom: 2px solid #8C939B;
	transform: rotate(45deg);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.msp-dd-btn:hover { border-color: #565D63; }
.msp-dd-btn:hover:after { border-color: #E07A52; }
.msp-dd-btn:focus { outline: none; border-color: rgba(255, 68, 0, 0.65); }
.msp-dd.open .msp-dd-btn { border-color: #6E4A3A; }
.msp-dd.open .msp-dd-btn:after {
	border-color: #E07A52;
	transform: rotate(-135deg);
	margin-top: -2px;
}

.msp-dd-list {
	position: absolute;
	z-index: 40;
	top: 100%;
	left: 0;
	right: 0;
	display: none;
	max-height: 280px;
	margin: -1px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	background: #14171A;
	border: 1px solid #6E4A3A;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.msp-dd.open .msp-dd-list { display: block; }
.msp-dd-item {
	padding: 9px 12px;
	font-size: 0.95em;
	line-height: 1.3em;
	color: #C9CFD5;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.msp-dd-item:hover { background: rgba(224, 122, 82, 0.18); color: #FFF; }
.msp-dd-item.selected {
	color: #FFF;
	background: rgba(224, 122, 82, 0.3);
}

.msp-dd.msp-room-select { width: 220px; }
.msp-dd.msp-year-select { width: 150px; }
.msp-dd.msp-month-select { width: 190px; }
.msp-dd.msp-char-select { width: 260px; }

.msp-admin-find {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	max-width: 760px;
	margin: 10px auto 4px;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px dashed #4A5158;
}
.msp-admin-find-label { font-size: 0.82em; color: #8C939B; }
.msp-admin-find-input {
	width: 220px;
	height: 32px;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #3A4045;
	border-radius: 0;
	color: #FFF;
	font-family: inherit;
	font-size: 0.9em;
}
.msp-admin-find-input:focus { outline: none; border-color: rgba(224, 122, 82, 0.75); }
.msp-admin-find-go {
	height: 32px;
	padding: 0 16px;
	border: 1px solid #6E4A3A;
	border-radius: 0;
	background: rgba(224, 122, 82, 0.16);
	color: #E9A98D;
	font-family: inherit;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	cursor: pointer;
}
.msp-admin-find-go:hover { background: rgba(224, 122, 82, 0.3); color: #FFF; }
.msp-admin-find-reset {
	font-size: 0.82em;
	color: #8C939B;
	border-bottom: 1px dotted #5A6169;
}
.msp-admin-find-reset:hover { color: #FFF; }
.msp-admin-find-ok { flex: 1 1 100%; text-align: center; font-size: 0.82em; color: #4CBF72; }
.msp-admin-find-error { flex: 1 1 100%; text-align: center; font-size: 0.82em; color: #FB4503; }

.msp-char-note {
	max-width: 760px;
	margin: 5px auto 10px;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #ABABAB;
	text-align: center;
}

.msp-refresh {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 12px;
	margin: 0 auto 12px;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #8C939B;
	text-align: center;
}
.msp-refresh-go {
	padding: 5px 14px;
	border: 1px solid #6E4A3A;
	background: rgba(224, 122, 82, 0.14);
	color: #E9A98D;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.msp-refresh-go:hover { background: rgba(224, 122, 82, 0.3); color: #FFF; }
.msp-refresh-wait { color: #6E757C; }

.msp-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.78);
	z-index: 1000;
}
.msp-progress-hint {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #2E3439;
	font-size: 0.78em;
	line-height: 1.5em;
	color: #6E757C;
}

.msp-progress-box {
	position: relative;
	width: 280px;
	padding: 26px 20px 20px;
	text-align: center;
	background: #14171A;
	border: 1px solid #3A4045;
}
.msp-ring {
	display: block;
	width: 132px;
	height: 132px;
	margin: 0 auto 6px;
	transform: rotate(-90deg);
}
.msp-ring-track {
	fill: none;
	stroke: #2E3439;
	stroke-width: 8;
}
.msp-ring-fill {
	fill: none;
	stroke: #E07A52;
	stroke-width: 8;
	stroke-linecap: butt;
	transition: stroke-dashoffset 0.25s linear;
}
.msp-ring-value {
	position: absolute;
	top: 26px;
	left: 0;
	right: 0;
	height: 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7em;
	color: #FFF;
	pointer-events: none;
}
.msp-progress-title {
	margin-top: 6px;
	font-size: 0.95em;
	color: #FFF;
}
.msp-progress-eta {
	margin-top: 5px;
	font-size: 0.82em;
	color: #8C939B;
}
.msp-progress.overrun .msp-ring-fill { animation: mspRingPulse 1.4s ease-in-out infinite; }
.msp-progress.overrun .msp-progress-eta { color: #E9A98D; }

@keyframes mspRingPulse {
	0% { opacity: 1; }
	50% { opacity: 0.45; }
	100% { opacity: 1; }
}

.msp-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1000;
}
.msp-overlay canvas { display: block; }

.msp-paywall {
	max-width: 480px;
	margin: 44px auto;
	padding: 34px 36px 30px;
	text-align: center;
	background: linear-gradient(170deg, #2B2A28 0%, #232120 55%, #262019 100%);
	border: 1px solid rgba(255, 215, 0, 0.22);
	border-radius: 0;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 170, 0, 0.05);
}
.msp-paywall-icon {
	width: 58px;
	height: 58px;
	line-height: 58px;
	margin: 0 auto 14px;
	font-size: 26px;
	color: #FFD700;
	background: rgba(255, 215, 0, 0.09);
	border: 1px solid rgba(255, 215, 0, 0.35);
	border-radius: 50%;
}
.msp-paywall-title { font-size: 1.45em; line-height: 1.25em; color: #FFF; margin-bottom: 8px; }
.msp-paywall-sub {
	font-size: 0.92em;
	line-height: 1.5em;
	color: #ABABAB;
	margin: 0 0 18px;
}
.msp-paywall-list {
	list-style: none;
	margin: 0 auto 22px;
	padding: 0;
	max-width: 360px;
	text-align: left;
}
.msp-paywall-list li {
	position: relative;
	padding: 5px 0 5px 28px;
	font-size: 0.92em;
	line-height: 1.4em;
	color: #DBDCDE;
}
.msp-paywall-list li:before {
	content: "\2713";
	position: absolute;
	left: 4px;
	color: #4CBF72;
}

.msp-paywall-cta {
	display: inline-block;
	padding: 13px 36px;
	font-size: 1em;
	line-height: 1.3em;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: bold;
	color: #1A1A1A;
	background: linear-gradient(135deg, #D4AF37, #F5D061);
	border-radius: 0;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.msp-paywall-cta:hover {
	color: #1A1A1A;
	transform: translateY(-1px);
	box-shadow: 0 9px 26px rgba(212, 175, 55, 0.45);
	filter: brightness(1.05);
}
.msp-paywall-alt { margin-top: 14px; font-size: 0.85em; color: #ABABAB; }

.msp-loading,
.msp-empty { text-align: center; color: #ABABAB; margin: 40px 0; }

.msp a:hover,
.msp a:focus,
.msp a:active { text-decoration: none; }

.msp-seo {
	max-width: 900px;
	margin: 35px auto 10px;
	font-size: 0.85em;
	line-height: 1.5em;
	color: #ABABAB;
}
.msp-seo p { margin: 8px 0; }

.msp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin: 15px 0 5px;
}

.msp-seg {
	display: flex;
	border: 1px solid #3A4045;
	border-radius: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
}
.msp-seg a {
	display: block;
	padding: 9px 20px;
	font-size: 0.95em;
	line-height: 1.2em;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	cursor: pointer;
	text-decoration: none;
	color: #ABABAB;
	transition: color 0.15s ease, background 0.15s ease;
}
.msp-seg a + a { border-left: 1px solid #3A4045; }
.msp-seg-group a { padding: 9px 16px; }
.msp-seg a:hover { background: rgba(255, 255, 255, 0.06); color: #FFF; text-decoration: none; }
.msp-seg a.active {
	color: #FFF;
	background: linear-gradient(180deg, rgba(255, 68, 0, 0.5), rgba(255, 68, 0, 0.28));
}

.msp-period-note {
	margin: 8px 0 0;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #8C939B;
	text-align: center;
}

.msp-room-select { width: 220px; }
.msp-year-select { width: 120px; }

.msp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 14px;
	margin: 18px 0 0;
}

.msp-toolbar-period {
	flex: 1 1 auto;
	font-size: 0.95em;
	line-height: 1.4em;
	color: #8C939B;
}
.msp-toolbar-period b {
	color: #FFF;
	font-weight: normal;
	font-size: 1.1em;
}

.msp-picker-state { font-size: 0.85em; color: #C9CFD5; }
.msp-picker-state b { color: #E07A52; font-weight: normal; }
.msp-picker-state a {
	color: #8C939B;
	cursor: pointer;
	border-bottom: 1px dotted #5A6169;
}
.msp-picker-state a:hover { color: #FFF; }

.msp-picker-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 9px 18px;
	border: 1px solid #6E4A3A;
	background: rgba(224, 122, 82, 0.12);
	color: #E9A98D;
	font-size: 0.85em;
	line-height: 1.3em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.msp-funnel {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex: none;
}
.msp-picker-toggle:hover {
	background: rgba(224, 122, 82, 0.24);
	border-color: #8A5C46;
	color: #FFF;
}
.msp-picker-toggle.open,
.msp-picker-toggle.active {
	color: #FFF;
	border-color: #A2603F;
	background: linear-gradient(180deg, rgba(224, 122, 82, 0.5), rgba(224, 122, 82, 0.28));
}

.msp-picker {
	margin: 12px 0 5px;
	padding: 14px 18px 16px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #3A4045;
}
.msp-picker-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}
.msp-picker-head-second { margin-top: 16px; }
.msp-picker-title { font-size: 1.05em; color: #F40; }
.msp-picker-note {
	flex: 1 1 240px;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #8C939B;
}
.msp-picker-count { font-size: 0.85em; color: #ABABAB; }
.msp-picker-reset {
	margin-left: auto;
	font-size: 0.85em;
	color: #8C939B;
	cursor: pointer;
	border-bottom: 1px dotted #5A6169;
}
.msp-picker-reset:hover { color: #FFF; }

.msp-pick-classes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.msp-pick-class {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 8px;
	border: 1px solid #3A4045;
	background: rgba(255, 255, 255, 0.03);
	color: #ABABAB;
	font-size: 0.85em;
	cursor: pointer;
	text-decoration: none;
}
.msp-pick-class img { width: 20px; height: 20px; opacity: 0.55; }
.msp-pick-class:hover { color: #FFF; background: rgba(255, 255, 255, 0.07); }
.msp-pick-class:hover img { opacity: 0.85; }
.msp-pick-class.active {
	color: #FFF;
	border-color: #6E4A3A;
	background: rgba(255, 68, 0, 0.16);
}
.msp-pick-class.active img { opacity: 1; }

.msp-pick-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 10px 26px;
}
.msp-pick-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.msp-pick-label {
	flex: 0 0 150px;
	font-size: 0.85em;
	color: #C9CFD5;
}
.msp-pick-label i { color: #8C939B; font-style: normal; }

.msp-pick-range {
	flex: 1 1 auto;
	min-width: 60px;
	height: 4px;
	-webkit-appearance: none;
	appearance: none;
	background: #2E3439;
	border: 1px solid #3A4045;
	outline: none;
	cursor: pointer;
}
.msp-pick-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 17px;
	background: #C2603C;
	border: 1px solid #1A1D20;
	cursor: pointer;
}
.msp-pick-range::-moz-range-thumb {
	width: 13px;
	height: 17px;
	border-radius: 0;
	background: #C2603C;
	border: 1px solid #1A1D20;
	cursor: pointer;
}

.msp-pick-number {
	flex: 0 0 72px;
	width: 72px;
	padding: 4px 6px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid #3A4045;
	color: #FFF;
	font-size: 0.85em;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}
.msp-pick-number::-webkit-outer-spin-button,
.msp-pick-number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
.msp-pick-number:focus { outline: none; border-color: rgba(224, 122, 82, 0.75); }
.msp-pick-unit {
	flex: 0 0 34px;
	font-size: 0.8em;
	color: #8C939B;
}

@media screen and (max-width: 767px) {

	.msp-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
	.msp-toolbar-period { order: 1; text-align: center; }
	.msp-picker-toggle { order: 2; justify-content: center; }
	.msp-picker-state { order: 3; text-align: center; }

	.msp-picker { padding: 12px 12px 14px; }
	.msp-pick-fields { grid-template-columns: 1fr; gap: 14px; }

	.msp-pick-row {
		display: grid;
		grid-template-columns: 1fr 66px 22px;
		grid-template-areas: "label label label" "range num unit";
		column-gap: 8px;
		row-gap: 4px;
	}
	.msp-pick-label { grid-area: label; }
	.msp-pick-range { grid-area: range; width: 100%; min-width: 0; }
	.msp-pick-number { grid-area: num; width: 100%; }
	.msp-pick-unit { grid-area: unit; }
	.msp-pick-class span { display: none; }
	.msp-pick-class { padding: 6px 9px; }
}

.msp-months {
	margin: 15px 0 5px;
	padding: 14px 18px 10px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #3A4045;
}
.msp-months-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.msp-months-title { font-size: 1.05em; color: #F40; }
.msp-months-caption { font-size: 0.85em; color: #ABABAB; }

.msp-allyear {
	display: block;
	flex: none;
	padding: 4px 14px;
	font-size: 0.85em;
	line-height: 1.6em;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid #3A4045;
	border-radius: 0;
	color: #ABABAB;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.msp-allyear:hover { background: rgba(255, 255, 255, 0.06); color: #FFF; text-decoration: none; }
.msp-allyear.active {
	background: linear-gradient(180deg, rgba(255, 68, 0, 0.5), rgba(255, 68, 0, 0.28));
	border-color: rgba(255, 68, 0, 0.65);
	color: #FFF;
}

.msp-months-bars { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; }

.msp-months-note {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(58, 64, 69, 0.6);
	font-size: 0.76em;
	line-height: 1.45em;
	color: #8C939B;
}

.msp-mcol {
	display: block;
	flex: 1;
	min-width: 48px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.msp-mcol:hover { text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.msp-mcol.dead { cursor: default; opacity: 0.45; }
.msp-mcol.dead:hover { background: transparent; }
.msp-mcol.sel { background: rgba(255, 68, 0, 0.12); }

.msp-mcol-count { font-size: 0.68em; line-height: 2em; white-space: nowrap; color: #ABABAB; }
.msp-mcol.sel .msp-mcol-count { color: #FFF; }
.msp-mcol-count.peak { color: #FF7A45; }

.msp-mcol-barbox { display: flex; align-items: flex-end; justify-content: center; height: 56px; }
.msp-mcol-bar { width: 60%; background: rgba(255, 255, 255, 0.16); }
.msp-mcol.sel .msp-mcol-bar { background: #F40; }
.msp-mcol-bar.peak { background: rgba(255, 68, 0, 0.75); }
.msp-mcol.dead .msp-mcol-bar { background: #3A4045; }

.msp-mcol-label {
	font-size: 0.75em;
	line-height: 2em;
	text-transform: uppercase;
	border-top: 2px solid #3A4045;
	color: #ABABAB;
}
.msp-mcol.sel .msp-mcol-label { color: #F40; }

.msp-charts { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

.msp-card {
	flex: 1;
	min-width: 340px;
	padding: 14px 18px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #3A4045;
}
.msp-card-title { font-size: 1.05em; color: #F40; margin-bottom: 12px; }

.msp-donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.msp-donut { position: relative; width: 150px; height: 150px; flex: none; border-radius: 50%; }
.msp-donut-hole {
	position: absolute;
	top: 33px; left: 33px; right: 33px; bottom: 33px;
	border-radius: 50%;
	background: #292828;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.msp-donut-total { font-size: 1.25em; line-height: 1.1em; color: #FFF; }
.msp-donut-sub {
	font-size: 0.62em;
	color: #ABABAB;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.msp-legend { flex: 1; min-width: 180px; }
.msp-legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.9em; }
.msp-legend-row i { width: 10px; height: 10px; flex: none; }
.msp-legend-row .k { flex: 1; color: #ABABAB; white-space: nowrap; }
.msp-legend-row .v { color: #FFF; white-space: nowrap; }

.msp-wd-bars { display: flex; align-items: flex-end; gap: 8px; padding: 0 5px; }
.msp-wd-col { flex: 1; text-align: center; }
.msp-wd-count { font-size: 0.68em; line-height: 2em; white-space: nowrap; color: #ABABAB; }
.msp-wd-count.peak { color: #FF7A45; }
.msp-wd-barbox { display: flex; align-items: flex-end; justify-content: center; height: 78px; }
.msp-wd-bar { width: 60%; background: rgba(255, 255, 255, 0.16); }
.msp-wd-bar.peak { background: rgba(255, 68, 0, 0.75); }
.msp-wd-label {
	font-size: 0.75em;
	line-height: 2em;
	color: #ABABAB;
	text-transform: uppercase;
	border-top: 2px solid #3A4045;
}

.msp-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.msp-sumcard {
	flex: 1;
	min-width: 160px;
	padding: 12px 10px 10px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #3A4045;
	text-align: center;
}

.msp-sumval { font-size: 1.9em; line-height: 1.1em; color: #FFF; white-space: nowrap; }
.msp-sumlabel {
	margin-top: 6px;
	font-size: 0.78em;
	line-height: 1.2em;
	color: #ABABAB;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.msp-kd-note {
	max-width: 820px;
	margin: 0 auto 10px;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #ABABAB;
	text-align: center;
}

.msp-table-wrap { overflow-x: auto; }
.msp-table {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing: 0;
}

.msp-table th {
	height: 50px;
	padding: 0 8px;
	color: #ABABAB;
	font-size: 1.05em;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}
.msp-table th:hover { color: #FFF; }
.msp-table th.sorted { color: #F40; }
.msp-table th.msp-th-map {
	font-size: 1.2em;
	text-align: left;
	cursor: default;
	padding: 0 10px;
}
.msp-table th.msp-th-map:hover { color: #ABABAB; }

.msp-map-row { cursor: pointer; }
.msp-map-row:hover { background: rgba(255, 255, 255, 0.3); }
.msp-map-row.open { background: rgba(255, 68, 0, 0.15); }
.msp-map-row td {
	height: 44px;
	padding: 0 8px;
	font-size: 1.05em;
	text-align: center;
	white-space: nowrap;
}
.msp-map-row td.msp-td-map { padding: 4px 10px; text-align: left; }

.msp-map-cell { display: flex; align-items: center; gap: 12px; }
.msp-map-thumb {
	width: 40px;
	height: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #3A4045;
}
.msp-map-nameblock { line-height: 1.15em; }
.msp-map-name { color: #FFF; }
.msp-map-mode { font-size: 0.78em; color: #ABABAB; }

.msp-table th.msp-th-plain { cursor: default; }
.msp-table th.msp-th-plain:hover { color: #ABABAB; }

.mp-charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
	margin: 12px 0 6px;
}
.mp-chart {
	padding: 14px 16px 12px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #3A4045;
}
.mp-chart-title {
	margin-bottom: 10px;
	font-size: 0.9em;
	line-height: 1.3em;
	color: #C9CFD5;
}
.mp-chart-plot {
	position: relative;
	cursor: crosshair;
}
.mp-chart-svg {
	display: block;
	width: 100%;
	height: 76px;
	overflow: visible;
}

.mp-chart-hits {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
}
.mp-chart-hit { flex: 1 1 0; min-width: 0; }
.mp-chart-hit:hover { background: rgba(255, 255, 255, 0.07); }
.mp-chart-tip {
	position: absolute;
	left: 0;
	top: -6px;
	display: none;
	padding: 3px 8px;
	background: #14171A;
	border: 1px solid #4A5158;
	color: #FFF;
	font-style: normal;
	font-size: 0.75em;
	line-height: 1.3em;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.mp-chart-hit:hover .mp-chart-tip,
.mp-chart-hit:active .mp-chart-tip { display: block; }
.mp-chart-area { fill: rgba(194, 96, 60, 0.16); }
.mp-chart-line {
	fill: none;
	stroke: #C2603C;
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}
.mp-chart-dot {
	fill: #F07A47;
	stroke: #1A1D20;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.mp-chart-foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-top: 8px;
	font-size: 0.75em;
	color: #8C939B;
}
.mp-chart-foot b {
	color: #FFF;
	font-weight: normal;
	font-size: 1.25em;
}

.msp-detail-more {
	display: block;
	width: 100%;
	max-width: 310px;
	margin-top: 8px;
	padding: 9px 12px;
	border: 1px solid #6E4A3A;
	background: rgba(224, 122, 82, 0.12);
	color: #E9A98D;
	font-size: 0.82em;
	line-height: 1.3em;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.msp-detail-more:hover {
	background: rgba(224, 122, 82, 0.28);
	border-color: #8A5C46;
	color: #FFF;
}

.msp-noresult {
	margin: 8px 0 0;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #8C939B;
}

.msp-classes-cell { white-space: nowrap; min-width: 74px; }
.msp-class-icon {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	border: 0;
}
.msp-class-icon.second {
	width: 19px;
	height: 19px;
	margin-left: 5px;
	opacity: 0.55;
}
.msp-map-row:hover .msp-class-icon.second,
.mp-table tbody tr:hover .msp-class-icon.second { opacity: 0.85; }

.msp-val-green { color: #4CBF72; }
.msp-val-gold { color: #FFD700; }
.msp-val-red { color: #FB4503; }
.msp-val-gray { color: #ABABAB; }

.msp-td-pop { min-width: 132px; }
.msp-pop-track {
	width: 120px;
	height: 8px;
	margin: 0 auto;
	background: #3A4045;
}
.msp-pop-fill { height: 8px; background: rgba(224, 122, 82, 0.7); }

.msp-group-row td {
	padding: 7px 10px;
	border-top: 1px solid #3A4045;
	background: rgba(0, 0, 0, 0.35);
}
.msp-group-cell { display: flex; align-items: center; gap: 12px; }
.msp-group-name { color: #F40; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; }
.msp-group-info { color: #ABABAB; font-size: 0.85em; }

.msp-detail-td { padding: 0; border-top: 1px solid #3A4045; border-bottom: 1px solid #3A4045; }
.msp-detail-anim {
	position: sticky;
	left: 0;
	overflow: hidden;
	animation: mspPeekOpen 0.6s ease;
	transition: max-height ease 0.5s;
	max-height: 3000px;
	max-width: calc(100vw - 22px);
}
@keyframes mspPeekOpen { from { opacity: 0; max-height: 0; } }
.msp-detail-anim.peek { max-height: 130px; cursor: pointer; }

.msp-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 25px 20px;
	background: rgba(0, 0, 0, 0.25);
	text-align: left;
}
.msp-dcol { flex: none; }
.msp-dcol-300 { width: 300px; }
.msp-dcol-310 { width: 310px; }
.msp-dcol-320 { width: 320px; }

.msp-preview {
	position: relative;
	width: 310px;
	height: 196px;
	color: #FFF;
	border: 1px solid #3A4045;
	background-size: cover;
	background-position: center;
}
.msp-preview-top {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 48px;
	text-align: center;
	background: rgba(0, 0, 0, 0.6);
}
.msp-preview-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 1.05em;
	line-height: 16px;
	margin-top: 8px;
}
.msp-preview-mode { line-height: 16px; font-size: 0.8em; margin-top: 2px; color: #ABABAB; }
.msp-preview-bottom {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 32px;
	color: #FFF;
	text-align: center;
	line-height: 32px;
	font-size: 0.9em;
	background: rgba(0, 0, 0, 0.6);
}

.msp-sec-title { padding: 4px 0 3px; font-size: 1.05em; text-align: center; color: #F40; }
.msp-sec-title.gap { padding-top: 14px; }

.msp-kv {
	display: flex;
	justify-content: space-between;
	min-height: 21px;
	margin-bottom: 5px;
	padding: 0 5px;
	font-size: 0.95em;
}
.msp-kv .k { color: #ABABAB; }
.msp-kv .k i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; }
.msp-kv .v { color: #FFF; }

.msp-stack { display: flex; height: 14px; margin: 8px 0 10px; border: 1px solid #3A4045; }

.msp-ktype { margin-bottom: 7px; padding: 0 5px; font-size: 0.95em; }
.msp-ktype-head { display: flex; justify-content: space-between; gap: 10px; }
.msp-ktype-head .v { white-space: nowrap; }
.msp-ktype-head .k { color: #ABABAB; }
.msp-ktype-head .v { color: #FFF; }
.msp-bar-track { height: 6px; margin-top: 2px; background: #3A4045; }
.msp-bar-fill { height: 6px; background: rgba(224, 122, 82, 0.6); }

.msp-class-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
	padding: 0 5px;
	font-size: 0.95em;
}
.msp-class-row img { width: 24px; height: 24px; flex: none; border: 0; vertical-align: middle; }
.msp-class-row .k { width: 80px; flex: none; color: #ABABAB; }
.msp-class-row .track { flex: 1; height: 6px; background: #3A4045; }
.msp-class-row .v { width: 44px; flex: none; text-align: right; color: #FFF; }

.msp-hours { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 0 5px; }
.msp-hours div { flex: 1; background: rgba(255, 255, 255, 0.2); }
.msp-hours div:hover { background: #F40; }
.msp-hours-labels {
	display: flex;
	justify-content: space-between;
	padding: 2px 5px 0;
	font-size: 0.75em;
	color: #ABABAB;
}

.msp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 5px; }
.msp-chip {
	display: inline-block;
	padding: 2px 10px;
	font-size: 0.85em;
	border: 1px solid #3A4045;
	background: rgba(0, 0, 0, 0.3);
	color: #DBDCDE;
	white-space: nowrap;
}
.msp-chip b { font-weight: normal; color: #F40; }

.msp-shards { padding: 10px 5px 0; font-size: 0.85em; color: #ABABAB; }
.msp-shards span { color: #FFF; }

.msp-peek-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 10px;
	background: linear-gradient(rgba(36, 35, 35, 0) 15%, #242323 96%);
}
.msp-peek-overlay span { font-size: 0.95em; color: #F40; }

.mp-head {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	align-items: flex-start;
	margin: 20px 0 10px;
}
.mp-summary { flex: 1; min-width: 300px; }
.mp-summary p {
	margin: 0 0 10px;
	font-size: 0.95em;
	line-height: 1.6em;
	color: #DBDCDE;
}

.mp-difficulty {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	font-size: 1.3em;
	letter-spacing: 1px;
	color: #FFF;
}
.mp-difficulty.easy { background-color: #4CBF72; }
.mp-difficulty.normal { background-color: #FB9701; }
.mp-difficulty.hard { background-color: #FB4503; }

.mp-highlight {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
}
.mp-highlight-item {
	flex: 1;
	min-width: 130px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid #3A4045;
	text-align: center;
}
.mp-highlight-item .v {
	display: block;
	font-size: 1.35em;
	line-height: 1.2em;
	color: #FFF;
	white-space: nowrap;
}
.mp-highlight-item .k {
	display: block;
	margin-top: 3px;
	font-size: 0.72em;
	line-height: 1.2em;
	color: #ABABAB;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.mp-h2 {
	margin: 25px 0 10px;
	font-size: 1.35em;
	line-height: 1.3em;
	color: #F40;
}

.mp-table th { text-align: center; cursor: default; }
.mp-table th:hover { color: #ABABAB; }
.mp-table td {
	height: 42px;
	padding: 0 8px;
	font-size: 1.05em;
	text-align: center;
	white-space: nowrap;
}
.mp-table tbody tr:hover { background: rgba(255, 255, 255, 0.06); }
.mp-year { text-align: left !important; padding-left: 10px !important; color: #FFF; }
.mp-bar-cell { min-width: 150px; }
.mp-bar-track { width: 130px; height: 8px; margin: 0 auto; background: #3A4045; }
.mp-bar-fill { height: 8px; background: rgba(224, 122, 82, 0.7); }

.mp-blocks .msp-card { min-width: 300px; }
.mp-blocks .msp-kv { font-size: 0.92em; }

.mp-links {
	margin: 25px 0 10px;
	font-size: 0.9em;
	color: #ABABAB;
	text-align: center;
}

@media (max-width: 700px) {
	.msp-card { min-width: 100%; }
	.msp-dcol-300, .msp-dcol-310, .msp-dcol-320 { width: 100%; }
	.msp-preview { width: 100%; max-width: 310px; margin: 0 auto; }
	.msp-detail-more { margin: 8px auto 0; }
	.msp-detail { gap: 20px; padding: 20px 12px; }
	.msp-mcol { min-width: 40px; }
	.msp-sumcard { min-width: 44%; }
	.mp-head { gap: 16px; }
	.mp-bar-cell { min-width: 100px; }
	.mp-bar-track { width: 88px; }

	.msp-tip:before { left: 50%; }

	.msp-detail-anim { max-height: 7000px; }
	.msp-detail-anim.peek { max-height: 130px; }

	.msp-table th,
	.msp-map-row td { padding: 0 6px; font-size: 0.95em; }
	.msp-table th.msp-th-map,
	.msp-map-row td.msp-td-map {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #242323;
		padding: 4px 8px 4px 0;
	}

	.msp-map-row.open td.msp-td-map { background: #3E2A25; }
	.msp-map-cell { gap: 8px; }
	.msp-map-thumb { width: 32px; height: 32px; }
	.msp-map-nameblock { max-width: 128px; }
	.msp-map-name,
	.msp-map-mode { overflow: hidden; text-overflow: ellipsis; }
	.msp-td-pop { min-width: 92px; }
	.msp-pop-track { width: 80px; }
	.msp-paywall { margin: 28px auto; padding: 26px 18px 24px; }

	.msp-back-link { position: static; display: inline-block; margin: 4px 0 2px; }

	.msp-group-cell {
		position: sticky;
		left: 0;
		max-width: calc(100vw - 44px);
	}
}