/**
 * MIDI 下载中心 · 前台样式
 * 设计令牌 + 组件化结构，支持明暗两套配色。
 */

/* =============================================================
   1. 设计令牌
   ============================================================= */

.midi-center,
.midi-submit,
.midi-categories,
.midi-search,
.midi-stats,
.midi-archive-wrap {
	--midi-primary: #6c5ce7;
	--midi-primary-rgb: 108, 92, 231;
	--midi-accent: #4aa8f0;
	--midi-accent-rgb: 74, 168, 240;

	/* 卡片圆角：后台「首页设置 → 卡片圆角」会覆盖它。
	   只给卡片类表面用；按钮、输入框、封面图、幻灯片等有各自的固定圆角，不受这个数值影响。 */
	--midi-card-radius: 24px;
	/* 卡片间距：后台「首页设置 → 卡片间距」会覆盖它。
	   -fluid 是窄屏版本：桌面就是原值，窄屏（≤1024px）按比例收窄，避免卡片被挤扁。 */
	--midi-card-gap: 22px;
	--midi-card-gap-fluid: var(--midi-card-gap);
	--midi-radius-xs: 8px;
	--midi-radius-sm: 12px;
	--midi-radius-lg: 24px;

	--midi-text: #101223;
	--midi-text-soft: #3d4257;
	--midi-muted: #6b7185;
	--midi-border: #e7e8f0;
	--midi-border-strong: #d5d7e3;
	--midi-bg: #ffffff;
	--midi-bg-soft: #f7f8fc;
	--midi-bg-sunken: #f1f2f8;
	/* 卡片表面的 RGB 分量：透明度设置需要用 rgba() 拼出带 alpha 的背景色 */
	--midi-surface-rgb: 255, 255, 255;
	--midi-surface-soft-rgb: 247, 248, 252;

	--midi-tint: rgba(var(--midi-primary-rgb), 0.1);
	--midi-tint-strong: rgba(var(--midi-primary-rgb), 0.18);
	--midi-ring: 0 0 0 4px rgba(var(--midi-primary-rgb), 0.16);
	--midi-gradient: linear-gradient(135deg, var(--midi-primary) 0%, var(--midi-accent) 100%);

	--midi-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
	--midi-shadow-sm: 0 2px 6px -2px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.04);
	--midi-shadow-md: 0 10px 24px -12px rgba(16, 24, 40, 0.22), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
	--midi-shadow-lg: 0 28px 52px -26px rgba(16, 24, 40, 0.4), 0 6px 16px -10px rgba(16, 24, 40, 0.12);
	--midi-shadow-primary: 0 12px 24px -12px rgba(var(--midi-primary-rgb), 0.65);

	--midi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--midi-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	color: var(--midi-text);
	font-family: var(--midi-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 窄屏：卡片间距按比例收窄（不低于设置的 64%，并随视口略微缩放），避免小屏上卡片被挤扁 */
@media (max-width: 1024px) {
	.midi-center,
	.midi-submit,
	.midi-categories,
	.midi-search,
	.midi-stats,
	.midi-archive-wrap {
		/* 兜底：不支持 clamp() 的旧内核会丢掉后一行，仍拿到设置里的卡片间距 */
		--midi-card-gap-fluid: var(--midi-card-gap);
		--midi-card-gap-fluid: clamp(calc(var(--midi-card-gap) * 0.64), 2.2vw, var(--midi-card-gap));
	}
}

.midi-center *,
.midi-submit *,
.midi-categories *,
.midi-search *,
.midi-stats * {
	box-sizing: border-box;
}

.midi-center a,
.midi-submit a,
.midi-categories a,
.midi-stats a {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* 内容容器：与主题容器对齐，避免宽屏下贴边或被拉伸 */

.midi-wrap {
	width: 100%;
	max-width: var(--midi-max, 1200px);
	margin-inline: auto;
	justify-self: center;
	padding-inline: clamp(14px, 3.2vw, 30px);
}

/* 一个区域一张圆角卡片：整段内容（标题 + 筛选 + 列表）包在同一张卡片里 */

.midi-wrap--card {
	width: calc(100% - 2 * clamp(14px, 3.2vw, 30px));
	padding: clamp(18px, 2.6vw, 32px);
	background: var(--midi-bg);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	box-shadow: var(--midi-shadow-md);
}

/* 卡片内部不再出现第二层卡片外观 */

.midi-wrap--card .midi-hero {
	margin-bottom: 18px;
}

.midi-wrap--card .midi-form {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.midi-wrap--card .midi-filters {
	background: var(--midi-bg-soft);
	box-shadow: none;
}

.midi-wrap--card .midi-card {
	box-shadow: var(--midi-shadow-xs);
}

.midi-wrap--card .midi-card:hover,
.midi-wrap--card .midi-card:focus-within {
	box-shadow: var(--midi-shadow-md);
}

/* -------------------------------------------------------------
   首页背景图片 + 卡片透明度
   背景图铺在曲库区域上，卡片用 rgba() 背景色透出图片；
   文字保持不透明，所以调低数值不会影响可读性。
   ------------------------------------------------------------- */

.midi-center--bg {
	/* 背景图整块通屏铺满：不留圆角，左右不留内边距（卡片间距交给首页排版统一控制）。
	   主题把内容放进带内边距 / 最大宽度的容器时，脚本会用下面两个变量补上负外边距，
	   把背景块铺到屏幕两侧；没有脚本时它们都是 0，按主题容器宽度显示。 */
	padding: clamp(16px, 2.6vw, 34px) 0;
	border-radius: 0;
	margin-inline: calc(-1 * var(--midi-bleed-left, 0px)) calc(-1 * var(--midi-bleed-right, 0px));
	background-image: var(--midi-home-bg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.midi-center--bg .midi-wrap--card,
.midi-center--bg .midi-card {
	background-color: rgba(var(--midi-surface-rgb), var(--midi-home-alpha, 1));
}

.midi-center--bg .midi-filters {
	background-color: rgba(var(--midi-surface-soft-rgb), var(--midi-home-alpha, 1));
}

.midi-center .screen-reader-text,
.midi-submit .screen-reader-text,
.midi-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* =============================================================
   2. 标题区
   ============================================================= */

.midi-hero {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 22px;
}

.midi-hero__title {
	position: relative;
	margin: 0;
	padding-bottom: 12px;
	font-size: clamp(1.4rem, 1.05rem + 0.75vw, 1.85rem);
	font-weight: 720;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.midi-hero__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: var(--midi-gradient);
}

.midi-hero__subtitle {
	max-width: 62ch;
	margin: 10px 0 0;
	color: var(--midi-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

.midi-hero--compact .midi-hero__title {
	font-size: clamp(1.3rem, 1.05rem + 0.5vw, 1.6rem);
}

/* 曲库标题卡片：左侧标题与副标题，右侧投稿入口（窄屏自动换行堆叠） */

.midi-hero-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(14px, 2.4vw, 28px);
	margin-bottom: var(--midi-card-gap-fluid);
}

.midi-hero-card__text {
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.midi-hero-card__title {
	position: relative;
	margin: 0;
	padding-bottom: 12px;
	font-size: clamp(1.4rem, 1.05rem + 0.75vw, 1.85rem);
	font-weight: 720;
	line-height: 1.22;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.midi-hero-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: var(--midi-gradient);
}

.midi-hero-card__subtitle {
	max-width: 62ch;
	margin: 0;
	color: var(--midi-muted);
	font-size: 0.92rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.midi-hero-card__action {
	flex: 0 0 auto;
}

@media (max-width: 680px) {
	.midi-hero-card__action {
		flex: 1 1 100%;
	}
}

/* =============================================================
   3. 按钮
   ============================================================= */

.midi-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--midi-radius-sm);
	font-family: inherit;
	font-size: 0.94rem;
	font-weight: 650;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.16s var(--midi-ease), box-shadow 0.16s var(--midi-ease),
		background-color 0.16s var(--midi-ease), border-color 0.16s var(--midi-ease), color 0.16s var(--midi-ease);
}

.midi-button:focus-visible {
	outline: none;
	box-shadow: var(--midi-ring);
}

.midi-button--primary {
	background-image: var(--midi-gradient);
	background-color: var(--midi-primary);
	color: #fff;
	box-shadow: var(--midi-shadow-primary);
}

.midi-button--primary::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0);
	transition: background-color 0.16s var(--midi-ease);
}

.midi-button--primary:hover,
.midi-button--primary:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(var(--midi-primary-rgb), 0.8);
}

.midi-button--primary:hover::after,
.midi-button--primary:focus-visible::after {
	background: rgba(255, 255, 255, 0.14);
}

.midi-button--primary:active {
	transform: translateY(0);
}

.midi-button--danger {
	background-image: linear-gradient(135deg, #f0544f 0%, #d92d20 100%);
	background-color: #e2483f;
	color: #fff;
	box-shadow: 0 12px 24px -12px rgba(217, 45, 32, 0.65);
}

.midi-button--danger:hover,
.midi-button--danger:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(217, 45, 32, 0.85);
}

.midi-button--danger:active {
	transform: translateY(0);
}

.midi-button--ghost {
	background: var(--midi-bg);
	border-color: var(--midi-border-strong);
	color: var(--midi-text);
	box-shadow: var(--midi-shadow-xs);
}

.midi-button--ghost:hover,
.midi-button--ghost:focus-visible {
	border-color: rgba(var(--midi-primary-rgb), 0.55);
	background: var(--midi-tint);
	color: var(--midi-primary);
	transform: translateY(-2px);
}

.midi-button--large {
	min-height: 52px;
	padding: 13px 28px;
	font-size: 1rem;
	border-radius: var(--midi-radius-sm);
}

.midi-button--disabled {
	background: var(--midi-bg-sunken);
	border-color: var(--midi-border);
	color: var(--midi-muted);
	box-shadow: none;
	cursor: not-allowed;
}

.midi-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.86em;
	line-height: 1;
}

/* =============================================================
   4. 筛选栏
   ============================================================= */

.midi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 18px;
	padding: 10px;
	background: var(--midi-bg);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	box-shadow: var(--midi-shadow-sm);
}

.midi-filters .midi-field {
	position: relative;
	display: flex;
	flex: 1 1 160px;
	max-width: 260px;
	margin: 0;
}

.midi-filters .midi-field--search {
	flex: 3 1 240px;
	max-width: none;
}

.midi-field__icon {
	position: absolute;
	top: 50%;
	left: 14px;
	display: inline-flex;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: var(--midi-muted);
	pointer-events: none;
}

.midi-field__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.midi-filters input[type="search"],
.midi-filters select {
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid var(--midi-border-strong);
	border-radius: var(--midi-radius-sm);
	background-color: var(--midi-bg-soft);
	color: inherit;
	font-family: inherit;
	font-size: 0.94rem;
	line-height: 1.4;
	transition: border-color 0.15s var(--midi-ease), box-shadow 0.15s var(--midi-ease),
		background-color 0.15s var(--midi-ease);
}

.midi-field--with-icon input[type="search"] {
	padding-left: 42px;
}

.midi-filters select {
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7185' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

.midi-filters input[type="search"]:hover,
.midi-filters select:hover {
	border-color: rgba(var(--midi-primary-rgb), 0.4);
}

.midi-filters input[type="search"]:focus,
.midi-filters select:focus {
	outline: none;
	border-color: var(--midi-primary);
	background-color: var(--midi-bg);
	box-shadow: var(--midi-ring);
}

.midi-filters .midi-button {
	flex: 0 0 auto;
}

/* =============================================================
   5. 结果区与网格
   ============================================================= */

.midi-results-wrap {
	position: relative;
}

.midi-results__count {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--midi-border);
	color: var(--midi-muted);
	font-size: 0.86rem;
}

.midi-results__count strong {
	color: var(--midi-text);
	font-weight: 700;
}

.midi-results__reset {
	margin-left: auto;
	color: var(--midi-primary);
	font-weight: 600;
	text-decoration: none;
}

.midi-results__reset:hover {
	text-decoration: underline;
}

.midi-grid {
	display: grid;
	gap: var(--midi-card-gap-fluid);
	margin: 0;
	padding: 0;
	list-style: none;
}

.midi-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.midi-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.midi-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.midi-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.midi-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.midi-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* =============================================================
   6. 卡片
   ============================================================= */

.midi-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--midi-bg);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	box-shadow: var(--midi-shadow-sm);
	transition: transform 0.22s var(--midi-ease), box-shadow 0.22s var(--midi-ease),
		border-color 0.22s var(--midi-ease);
}

.midi-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(var(--midi-primary-rgb), 0);
	pointer-events: none;
	transition: box-shadow 0.22s var(--midi-ease);
	z-index: 2;
}

.midi-card:hover,
.midi-card:focus-within {
	transform: translateY(-5px);
	border-color: rgba(var(--midi-primary-rgb), 0.35);
	box-shadow: var(--midi-shadow-lg);
}

.midi-card:hover::before,
.midi-card:focus-within::before {
	box-shadow: inset 0 0 0 1px rgba(var(--midi-primary-rgb), 0.35);
}

.midi-card__cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--midi-primary);
	background-image:
		radial-gradient(120% 130% at 12% 8%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(
			140deg,
			hsl(var(--midi-hue, 250) 74% 62%) 0%,
			hsl(calc(var(--midi-hue, 250) + 32) 62% 44%) 58%,
			hsl(calc(var(--midi-hue, 250) + 58) 52% 30%) 100%
		);
}

.midi-card__cover-link {
	display: block;
	width: 100%;
	height: 100%;
}

.midi-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--midi-ease);
}

.midi-card:hover .midi-card__img {
	transform: scale(1.06);
}

.midi-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.midi-card__icon svg {
	width: 42%;
	max-width: 92px;
	height: auto;
	opacity: 0.96;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
	transition: transform 0.4s var(--midi-ease);
}

.midi-card:hover .midi-card__icon svg {
	transform: scale(1.05) rotate(-2deg);
}

.midi-card__duration,
.midi-card__ext {
	position: absolute;
	bottom: 10px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(10, 12, 20, 0.62);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.midi-card__duration { right: 10px; }
.midi-card__ext { left: 10px; text-transform: uppercase; }

.midi-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #14162a;
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%) scale(0.86);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.22s var(--midi-ease), transform 0.22s var(--midi-ease),
		background-color 0.22s var(--midi-ease);
}

.midi-card__play svg {
	width: 22px;
	height: 22px;
	margin-left: 2px;
	fill: currentColor;
}

.midi-card:hover .midi-card__play,
.midi-card:focus-within .midi-card__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.midi-card__play:hover {
	background: #fff;
}

.midi-card__play:focus-visible {
	outline: none;
	box-shadow: var(--midi-ring), 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

.midi-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 9px;
	padding: 16px 18px 18px;
}

.midi-card__title {
	margin: 0;
	font-size: 1.04rem;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.midi-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s var(--midi-ease), color 0.2s var(--midi-ease);
}

.midi-card__title a:hover {
	color: var(--midi-primary);
	background-size: 100% 1px;
}

.midi-card__artist {
	margin: -3px 0 0;
	color: var(--midi-muted);
	font-size: 0.86rem;
}

.midi-card__cats,
.midi-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.midi-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--midi-tint);
	color: var(--midi-primary);
	font-size: 0.74rem;
	font-weight: 650;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.16s var(--midi-ease), color 0.16s var(--midi-ease),
		transform 0.16s var(--midi-ease);
}

.midi-chip:hover {
	background-image: var(--midi-gradient);
	color: #fff;
	transform: translateY(-1px);
}

.midi-card__tags a {
	color: var(--midi-muted);
	font-size: 0.77rem;
	text-decoration: none;
}

.midi-card__tags a:hover {
	color: var(--midi-primary);
}

.midi-card__excerpt {
	margin: 0;
	color: var(--midi-text-soft);
	font-size: 0.85rem;
	line-height: 1.6;
}

.midi-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: auto 0 0;
	padding: 12px 0 0;
	border-top: 1px dashed var(--midi-border);
	list-style: none;
	font-size: 0.79rem;
}

.midi-card__meta li {
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
	margin: 0;
}

.midi-meta-label {
	color: var(--midi-muted);
}

.midi-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.midi-card__actions .midi-button {
	flex: 1 1 auto;
	min-height: 42px;
	padding: 9px 14px;
	font-size: 0.86rem;
}

.midi-card__actions .midi-button--ghost {
	flex: 0 1 auto;
}

/* 播放器插槽 */

.midi-player-slot {
	margin-top: 12px;
	padding: 2px;
	min-width: 0;
	max-width: 100%;
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
}

.midi-player-slot[hidden] {
	display: none;
}

.midi-player-slot midi-player,
.midi-player-slot .midi-player-fallback {
	display: block;
	width: 100%;
	margin: 8px 0;
}

/* ---- 钢琴卷帘（html-midi-player 的 midi-visualizer） ----
   该组件的画布宽度 = 每秒像素 × 曲目时长，一首 4 分钟的曲子就能画出上万像素。
   插件只引入了它的脚本、没有引入它自带的样式表，所以这里必须自己把滚动画布
   约束在固定高度的盒子里：否则画布会把页面撑宽，跟随播放头的逐帧重排会让浏览器直接卡死。 */

.midi-roll {
	position: relative;
	max-width: 100%;
	/* 兜底值写在前面：不支持 min() 的旧内核丢掉后一行也能拿到可用高度 */
	max-height: 340px;
	max-height: min(46vh, 340px);
	margin: 8px 0;
	overflow-x: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-xs);
	background: var(--midi-bg);
	contain: layout paint;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.midi-roll[hidden] {
	display: none;
}

.midi-roll midi-visualizer,
.midi-player-slot midi-visualizer {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.midi-roll canvas,
.midi-player-slot midi-visualizer canvas {
	display: block;
	max-width: none;
	height: auto;
}

.midi-roll__note {
	margin: 8px 0 0;
	padding: 10px 12px;
	border: 1px dashed var(--midi-border-strong);
	border-radius: var(--midi-radius-xs);
	color: var(--midi-muted);
	font-size: 0.8rem;
}

.midi-player-fallback {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed var(--midi-border-strong);
	border-radius: var(--midi-radius-xs);
	color: var(--midi-muted);
	font-size: 0.84rem;
}

/* =============================================================
   7. 列表布局
   ============================================================= */

.midi-grid--list {
	grid-template-columns: 1fr;
	gap: var(--midi-card-gap-fluid);
}

.midi-grid--list .midi-card {
	flex-direction: row;
}

.midi-grid--list .midi-card__cover {
	flex: 0 0 210px;
	aspect-ratio: auto;
	min-height: 150px;
}

.midi-grid--list .midi-card__play {
	width: 48px;
	height: 48px;
}

.midi-grid--list .midi-card__body {
	padding: 18px 22px;
}

.midi-grid--list .midi-card__actions {
	margin-top: auto;
}

.midi-grid--list .midi-card__actions .midi-button {
	flex: 0 1 auto;
}

/* =============================================================
   8. 空状态与提示
   ============================================================= */

.midi-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 56px 24px;
	border: 1px dashed var(--midi-border-strong);
	border-radius: var(--midi-card-radius);
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(var(--midi-primary-rgb), 0.07) 0%, rgba(var(--midi-primary-rgb), 0) 70%),
		var(--midi-bg-soft);
	text-align: center;
}

.midi-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--midi-tint);
	color: var(--midi-primary);
}

.midi-empty__icon svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.midi-empty__title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
}

.midi-empty__desc {
	margin: 0 0 14px;
	color: var(--midi-muted);
	font-size: 0.9rem;
}

.midi-notice {
	position: relative;
	margin: 0 0 20px;
	padding: 16px 18px 16px 46px;
	border: 1px solid var(--midi-border);
	border-left-width: 4px;
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
	font-size: 0.93rem;
	line-height: 1.65;
}

.midi-notice::before {
	position: absolute;
	top: 15px;
	left: 16px;
	font-size: 1.05rem;
	line-height: 1;
}

.midi-notice--success {
	border-color: #b7ebc9;
	border-left-color: #12a150;
	background: #f2fdf6;
	color: #0a6c3a;
}

.midi-notice--success::before {
	content: "✓";
	color: #12a150;
}

.midi-notice--error {
	border-color: #f6c6c3;
	border-left-color: #e5484d;
	background: #fef4f3;
	color: #8c1d18;
}

.midi-notice--error::before {
	content: "!";
	color: #e5484d;
	font-weight: 800;
}

.midi-notice--info {
	border-color: #c3ddfb;
	border-left-color: #0b6bcb;
	background: #f2f8ff;
	color: #0a4d8c;
}

.midi-notice--info::before {
	content: "i";
	color: #0b6bcb;
	font-weight: 800;
}

.midi-notice ul {
	margin: 6px 0 0;
	padding-left: 20px;
}

.midi-notice a {
	color: inherit;
}

/* =============================================================
   9. 分页
   ============================================================= */

.midi-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 32px 0 0;
}

.midi-pagination__item {
	display: inline-flex;
}

.midi-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--midi-border-strong);
	border-radius: 999px;
	background: var(--midi-bg);
	color: var(--midi-text);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--midi-shadow-xs);
	transition: transform 0.16s var(--midi-ease), border-color 0.16s var(--midi-ease),
		color 0.16s var(--midi-ease), background-color 0.16s var(--midi-ease);
}

.midi-pagination a.page-numbers:hover {
	border-color: rgba(var(--midi-primary-rgb), 0.55);
	background: var(--midi-tint);
	color: var(--midi-primary);
	transform: translateY(-2px);
}

.midi-pagination .page-numbers.current {
	border-color: transparent;
	background-image: var(--midi-gradient);
	color: #fff;
	box-shadow: var(--midi-shadow-primary);
}

.midi-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

/* =============================================================
   10. 投稿表单
   ============================================================= */

.midi-submit {
	width: 100%;
	/* 投稿页宽度：由「首页设置 → 投稿页内容最大宽度」控制（留空时跟随首页） */
	max-width: var(--midi-submit-max, 1080px);
	margin-inline: auto;
}

/* 投稿表单卡片同样按投稿页宽度对齐（比首页更宽或更窄时都不会错位） */
.midi-submit .midi-wrap {
	max-width: var(--midi-submit-max, 1080px);
}

.midi-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 26px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	background: var(--midi-bg);
	box-shadow: var(--midi-shadow-md);
}

.midi-form__section {
	margin: 0;
	padding: 0;
	border: 0;
}

.midi-form__section + .midi-form__section {
	padding-top: 22px;
	border-top: 1px solid var(--midi-border);
}

.midi-form__legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--midi-text);
}

.midi-form__legend::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 999px;
	background: var(--midi-gradient);
}

/*
 * 「作品信息」标题行右侧的返回按钮（文字与地址由后台设置）。
 * margin-left:auto 把它推到最右边，和左侧的分组竖条一起构成一行两头对齐的标题栏。
 */
.midi-form__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	padding: 5px 12px;
	border: 1px solid var(--midi-border-strong);
	border-radius: 999px;
	background: var(--midi-bg-soft);
	color: var(--midi-muted);
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s var(--midi-ease), border-color 0.15s var(--midi-ease),
		background-color 0.15s var(--midi-ease);
}

.midi-form__back:hover,
.midi-form__back:focus-visible {
	border-color: var(--midi-primary);
	background: var(--midi-tint);
	color: var(--midi-primary);
	outline: 0;
}

.midi-form__back-icon {
	display: inline-flex;
	align-items: center;
}

.midi-form__back-icon svg {
	display: block;
}

/* 新窗口打开时的小箭头提示 */
.midi-form__back-hint {
	font-size: 0.85em;
	opacity: 0.7;
}

/* 窄屏：标题行允许换行，按钮掉到第二行后仍靠左对齐 */
@media (max-width: 480px) {
	.midi-form__legend {
		flex-wrap: wrap;
	}

	.midi-form__back {
		margin-left: 0;
	}
}

.midi-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.midi-form__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.midi-form__row--full {
	grid-column: 1 / -1;
}

.midi-form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	font-weight: 650;
}

/*
 * 标签行右侧的一组小徽标（必填 / 字数计数器）。
 * 只让这个容器吃掉剩余空间，里面的徽标就不会因为各自 margin-left:auto 而平分空隙、
 * 把「必填」推到行中间。
 */
.midi-form__label-end {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.midi-form__label-end .midi-form__required,
.midi-form__label-end .midi-form__counter {
	margin-left: 0;
}

.midi-form__required {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--midi-tint);
	color: var(--midi-primary);
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* 作品简介的「已输入 / 上限」计数器：右对齐，数字用等宽避免跳动 */
.midi-form__counter {
	margin-left: auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--midi-tint);
	color: var(--midi-muted);
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 650;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s var(--midi-ease), background-color 0.15s var(--midi-ease);
}

.midi-form__counter.is-over {
	background: #fdecec;
	color: #b32d2e;
}

/* 超出上限（正常输入不会出现，maxlength 会先挡住；改源码或脚本赋值才会）：输入框标红 */
.midi-form [data-midi-counter].is-over {
	border-color: #b32d2e;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.12);
}

.midi-form__hint {
	color: var(--midi-muted);
	font-size: 0.78rem;
	line-height: 1.5;
}

.midi-form input[type="text"],
.midi-form input[type="email"],
.midi-form input[type="search"],
.midi-form input[type="number"],
.midi-form select,
.midi-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 15px;
	border: 1px solid var(--midi-border-strong);
	border-radius: var(--midi-radius-sm);
	background-color: var(--midi-bg-soft);
	color: inherit;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color 0.15s var(--midi-ease), box-shadow 0.15s var(--midi-ease),
		background-color 0.15s var(--midi-ease);
}

.midi-form select {
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7185' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

.midi-form textarea {
	min-height: 120px;
	resize: vertical;
}

.midi-form input:hover,
.midi-form select:hover,
.midi-form textarea:hover {
	border-color: rgba(var(--midi-primary-rgb), 0.4);
}

.midi-form input:focus,
.midi-form select:focus,
.midi-form textarea:focus {
	outline: none;
	border-color: var(--midi-primary);
	background-color: var(--midi-bg);
	box-shadow: var(--midi-ring);
}

.midi-form input::placeholder,
.midi-form textarea::placeholder {
	color: var(--midi-muted);
	opacity: 0.7;
}

/* 上传区 */

.midi-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 30px 20px;
	border: 2px dashed var(--midi-border-strong);
	border-radius: var(--midi-card-radius);
	background: var(--midi-bg-soft);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s var(--midi-ease), background-color 0.18s var(--midi-ease),
		transform 0.18s var(--midi-ease);
}

.midi-dropzone:hover,
.midi-dropzone.is-dragover {
	border-color: var(--midi-primary);
	background: var(--midi-tint);
	transform: translateY(-2px);
}

.midi-dropzone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.midi-dropzone__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 4px;
	border-radius: 50%;
	background-image: var(--midi-gradient);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	box-shadow: var(--midi-shadow-primary);
}

.midi-dropzone__text {
	font-weight: 650;
}

.midi-dropzone__hint {
	color: var(--midi-muted);
	font-size: 0.79rem;
}

.midi-dropzone__file {
	margin-top: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--midi-bg);
	color: var(--midi-primary);
	font-size: 0.82rem;
	font-weight: 650;
}

.midi-dropzone__file:empty {
	display: none;
}

/* 上传区内的图标：用内联 SVG，线条跟随文字颜色（白色） */

.midi-dropzone__icon svg {
	width: 26px;
	height: 26px;
}

.midi-dropzone__icon svg * {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 封面图上传：与 MIDI 文件同一套外观，只是矮一点 */

.midi-dropzone--cover {
	padding: 22px 20px;
}

/* 选了不符合规则的封面图：框和提示都变红，配合脚本给出的原因 */
.midi-dropzone.is-invalid {
	border-color: #e0574f;
	background: rgba(224, 87, 79, 0.06);
}

.midi-dropzone.is-invalid .midi-dropzone__file {
	color: #c02a22;
}

/* 安全验证：同样的虚线框 + 渐变圆形图标 */

.midi-verify {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 2px dashed var(--midi-border-strong);
	border-radius: var(--midi-card-radius);
	background: var(--midi-bg-soft);
}

.midi-verify__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-image: var(--midi-gradient);
	color: #fff;
	box-shadow: var(--midi-shadow-primary);
}

.midi-verify__icon svg {
	width: 24px;
	height: 24px;
}

.midi-verify__icon svg * {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.midi-verify__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 6px;
}

.midi-verify__row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
}

.midi-verify__question {
	padding: 6px 14px;
	border-radius: var(--midi-radius-xs);
	background: var(--midi-tint);
	color: var(--midi-primary);
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}

.midi-verify__eq {
	color: var(--midi-muted);
}

.midi-verify__body input[type="text"] {
	width: 92px !important;
	min-height: 48px;
	text-align: center;
	font-weight: 700;
}

.midi-verify__hint {
	color: var(--midi-muted);
	font-size: 0.79rem;
	line-height: 1.5;
}

@media (max-width: 560px) {
	.midi-verify {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}
}

/* 版权类型：原创 / 转载单选 */

.midi-form__origin {
	padding: 16px 18px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
}

.midi-origin__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.midi-origin__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 108px;
	padding: 10px 16px;
	border: 1px solid var(--midi-border-strong);
	border-radius: 999px;
	background: var(--midi-bg);
	font-size: 0.9rem;
	font-weight: 650;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.16s var(--midi-ease), background-color 0.16s var(--midi-ease),
		box-shadow 0.16s var(--midi-ease), color 0.16s var(--midi-ease);
}

.midi-origin__option:hover {
	border-color: rgba(var(--midi-primary-rgb), 0.45);
}

/* 选中的选项高亮：脚本会同步 is-selected 类，保证不支持 :has() 的浏览器也有高亮 */
.midi-origin__option.is-selected {
	border-color: transparent;
	background: var(--midi-tint);
	color: var(--midi-primary);
	box-shadow: inset 0 0 0 1.5px rgba(var(--midi-primary-rgb), 0.55);
}

/* 单独一条规则放 :has()：老浏览器不认识 :has() 时会整条丢弃，不会影响上面的兜底 */
.midi-origin__option:has(input:checked) {
	border-color: transparent;
	background: var(--midi-tint);
	color: var(--midi-primary);
	box-shadow: inset 0 0 0 1.5px rgba(var(--midi-primary-rgb), 0.55);
}

.midi-origin__option input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--midi-border-strong);
	border-radius: 50%;
	background: var(--midi-bg);
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s var(--midi-ease), background-color 0.15s var(--midi-ease);
}

.midi-origin__option input[type="radio"]:checked {
	border-color: var(--midi-primary);
	background: radial-gradient(circle at center, var(--midi-primary) 0 5px, transparent 5.5px);
}

.midi-origin__option input[type="radio"]:focus-visible {
	box-shadow: var(--midi-ring);
	outline: none;
}

.midi-form__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.midi-form__status {
	color: var(--midi-muted);
	font-size: 0.87rem;
}

/* 投稿人账号卡片（使用登录账号时） */

/* 投稿成功提示框 */

.midi-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	/* 用 flex-start + 卡片 margin:auto 居中：内容比屏幕高时不会被裁掉顶部，
	   任何浏览器都能滚动查看（align-items:center 在超高内容下会切掉顶部）。 */
	align-items: flex-start;
	justify-content: center;
	padding: 20px;
	overflow: auto;
	/*
	 * 这里刻意不使用 backdrop-filter。
	 *
	 * 本元素既是全屏遮罩、又是弹窗的滚动容器，如果在它上面做背景模糊，那么弹窗内
	 * 每一次重绘（滚动、播放光标每 90ms 移动一次、悬停、过渡动画）都会让浏览器重新
	 * 采样并模糊整个视口。在 Chromium 上表现为明显掉帧，在双核浏览器（遨游 / 360 /
	 * QQ 等）的极速模式下更严重，在旧 WebKit 上会直接退化成软件模糊。
	 * 用略深的纯色遮罩替代：视觉上几乎无差别，但滚动与播放都恢复顺滑。
	 * 同理，乐谱弹窗此前也已单独关掉模糊（见 .midi-modal--score）。
	 */
	background: rgba(16, 18, 26, 0.52);
	opacity: 0;
	transition: opacity 0.25s var(--midi-ease);
	/* 滚到边界时不要把页面（以及遮罩背后的内容）一起带着滚，避免无谓的重绘。 */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.midi-modal.is-visible {
	opacity: 1;
}

.midi-modal__card {
	width: 100%;
	max-width: 400px;
	margin: auto;
	padding: 30px 26px 24px;
	/* 先给不支持 CSS 变量的浏览器一个纯色兜底，再让主题变量覆盖 */
	background: #fff;
	background: var(--midi-bg);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	box-shadow: var(--midi-shadow-lg);
	text-align: center;
	transform: translateY(14px) scale(0.96);
	transition: transform 0.28s var(--midi-ease);
}

.midi-modal.is-visible .midi-modal__card {
	transform: none;
}

.midi-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border-radius: 50%;
	background-image: var(--midi-gradient);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: var(--midi-shadow-primary);
}

/* 待审核状态：用中性蓝灰替代成功色，和「已发布」区分开 */
.midi-modal__icon--pending {
	background-image: linear-gradient(135deg, #4a94d8 0%, #6c8ff0 100%);
	box-shadow: 0 12px 24px -12px rgba(74, 148, 216, 0.65);
}

.midi-modal__title {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 720;
	letter-spacing: -0.01em;
}

.midi-modal__text {
	margin: 0;
	color: var(--midi-muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

.midi-modal__count {
	margin: 12px 0 0;
	color: var(--midi-primary);
	font-size: 0.88rem;
}

.midi-modal__count b {
	display: inline-block;
	min-width: 24px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--midi-tint);
	font-size: 0.95rem;
}

.midi-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

.midi-modal__actions .midi-button {
	flex: 1 1 auto;
	min-width: 120px;
}

/* 关闭状态：hidden 属性必须优先级高于上面的 display:flex，否则会挡住页面点击。 */
.midi-modal[hidden] {
	display: none;
}

/* 作品页面的编辑 / 删除弹窗 */

.midi-modal-open {
	overflow: hidden;
}

.midi-modal__card--form {
	position: relative;
	max-width: 560px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 30px 26px 24px;
	text-align: left;
}

.midi-modal__card--form .midi-modal__text {
	padding-right: 26px;
}

.midi-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--midi-bg-sunken);
	color: var(--midi-muted);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.16s var(--midi-ease), color 0.16s var(--midi-ease);
}

.midi-modal__close:hover,
.midi-modal__close:focus-visible {
	background: var(--midi-tint);
	color: var(--midi-primary);
}

.midi-modal__icon--danger {
	background-image: linear-gradient(135deg, #f0544f 0%, #d92d20 100%);
	box-shadow: 0 12px 24px -12px rgba(217, 45, 32, 0.65);
}

.midi-modal__subject {
	display: block;
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-sunken);
	color: var(--midi-text);
	font-size: 0.94rem;
	font-weight: 650;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.midi-form--modal {
	gap: 18px;
	margin-top: 18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.midi-modal,
	.midi-modal__card {
		transition-duration: 0.001ms;
	}
}

.midi-account {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 16px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
}

.midi-account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background-image: var(--midi-gradient);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
}

.midi-account__img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--midi-bg-sunken);
	box-shadow: 0 0 0 2px rgba(var(--midi-primary-rgb), 0.18);
}

.midi-account__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.midi-account__name {
	font-size: 0.98rem;
	font-weight: 700;
}

.midi-account__mail {
	color: var(--midi-muted);
	font-size: 0.82rem;
	word-break: break-all;
}

.midi-form.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.midi-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =============================================================
   11. 详情页
   ============================================================= */

.midi-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
	margin-bottom: 12px;
	color: var(--midi-muted);
	font-size: 0.84rem;
}

.midi-breadcrumb__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* =============================================================
   12. 分类 / 搜索 / 统计
   ============================================================= */

.midi-categories__title {
	margin: 0 0 16px;
	font-size: 1.25rem;
	font-weight: 720;
	letter-spacing: -0.01em;
}

.midi-categories,
.midi-stats {
	width: 100%;
	max-width: var(--midi-max, 1200px);
	margin-inline: auto;
	justify-self: center;
}

.midi-categories {
	padding: clamp(18px, 2.6vw, 28px);
	background: var(--midi-bg);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	box-shadow: var(--midi-shadow-md);
}

.midi-categories__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: var(--midi-card-gap-fluid);
	margin: 0;
	padding: 0;
	list-style: none;
}

.midi-categories__item {
	margin: 0;
}

.midi-categories__item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 17px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg);
	color: inherit;
	font-weight: 650;
	text-decoration: none;
	box-shadow: var(--midi-shadow-xs);
	transition: transform 0.18s var(--midi-ease), border-color 0.18s var(--midi-ease),
		box-shadow 0.18s var(--midi-ease), color 0.18s var(--midi-ease);
}

.midi-categories__item > a:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--midi-primary-rgb), 0.4);
	box-shadow: var(--midi-shadow-md);
	color: var(--midi-primary);
}

.midi-categories__count {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--midi-tint);
	color: var(--midi-primary);
	font-size: 0.78rem;
	font-weight: 700;
}

.midi-categories__desc {
	display: block;
	margin-top: 8px;
	color: var(--midi-muted);
	font-size: 0.79rem;
	line-height: 1.55;
}

.midi-search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 640px;
	margin-inline: auto;
	justify-self: center;
}

.midi-search input[type="search"] {
	flex: 1 1 220px;
	min-height: 50px;
	padding: 12px 18px;
	border: 1px solid var(--midi-border-strong);
	border-radius: var(--midi-radius-sm);
	background-color: var(--midi-bg-soft);
	color: inherit;
	font-family: inherit;
	font-size: 0.95rem;
	transition: border-color 0.15s var(--midi-ease), box-shadow 0.15s var(--midi-ease);
}

.midi-search input[type="search"]:focus {
	outline: none;
	border-color: var(--midi-primary);
	background-color: var(--midi-bg);
	box-shadow: var(--midi-ring);
}

.midi-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.midi-stats__item {
	position: relative;
	flex: 1 1 170px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
	padding: 20px 22px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	background: var(--midi-bg);
	box-shadow: var(--midi-shadow-sm);
}

.midi-stats__item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--midi-gradient);
}

.midi-stats__item strong {
	font-size: 1.85rem;
	font-weight: 780;
	line-height: 1.1;
	letter-spacing: -0.02em;
	background-image: var(--midi-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--midi-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.midi-stats__item strong {
		-webkit-text-fill-color: transparent;
	}
}

.midi-stats__item span {
	color: var(--midi-muted);
	font-size: 0.85rem;
}

/* =============================================================
   13. 加载态
   ============================================================= */

.midi-results-wrap.is-loading {
	min-height: 200px;
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s var(--midi-ease);
}

.midi-results-wrap.is-loading::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: var(--midi-card-radius);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	animation: midi-shimmer 1.1s infinite;
}

@keyframes midi-shimmer {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

/* =============================================================
   14. 响应式
   ============================================================= */

@media (max-width: 1100px) {
	.midi-grid--cols-4,
	.midi-grid--cols-5,
	.midi-grid--cols-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.midi-grid--cols-3,
	.midi-grid--cols-4,
	.midi-grid--cols-5,
	.midi-grid--cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.midi-form__grid {
		grid-template-columns: 1fr;
	}

	.midi-card__play {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.92);
	}
}

@media (max-width: 680px) {
	.midi-grid--cols-1,
	.midi-grid--cols-2,
	.midi-grid--cols-3,
	.midi-grid--cols-4,
	.midi-grid--cols-5,
	.midi-grid--cols-6 {
		grid-template-columns: 1fr;
	}

	.midi-grid--list .midi-card {
		flex-direction: column;
	}

	.midi-grid--list .midi-card__cover {
		flex: none;
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.midi-filters {
		padding: 10px;
	}

	.midi-filters .midi-field,
	.midi-filters .midi-field--search {
		flex: 1 1 100%;
	}

	.midi-filters .midi-button {
		width: 100%;
	}

	.midi-form {
		padding: 20px 18px;
	}

}

@media (hover: none) {
	.midi-card__play {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.92);
	}
}

/* =============================================================
   15. 暗色模式
   ============================================================= */

@media (prefers-color-scheme: dark) {
	.midi-center,
	.midi-submit,
	.midi-categories,
	.midi-search,
	.midi-stats {
		--midi-text: #eceef6;
		--midi-text-soft: #c3c8d8;
		--midi-muted: #9399ad;
		--midi-border: #272b36;
		--midi-border-strong: #343946;
		--midi-bg: #16181f;
		--midi-bg-soft: #1c1f28;
		--midi-bg-sunken: #20242e;
		--midi-surface-rgb: 22, 24, 31;
		--midi-surface-soft-rgb: 28, 31, 40;
		--midi-tint: rgba(var(--midi-primary-rgb), 0.2);
		--midi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
		--midi-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
		--midi-shadow-md: 0 14px 30px -16px rgba(0, 0, 0, 0.75);
		--midi-shadow-lg: 0 30px 56px -28px rgba(0, 0, 0, 0.85);
	}

	.midi-notice--success { border-color: #1d4a33; background: #10261b; color: #8ce8b6; }
	.midi-notice--error { border-color: #5a3036; background: #2a1417; color: #ffb1ae; }
	.midi-notice--info { border-color: #243a55; background: #101f2f; color: #a6d0ff; }

	.midi-results-wrap.is-loading::after {
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
	}

	.midi-state--ok { background: #12301f; color: #86e3b0; }
	.midi-state--warn { background: #33280f; color: #f0c070; }
	.midi-state--bad { background: #35191a; color: #ff9f9c; }
	.midi-state--muted { background: #232833; color: #a8aec0; }
}

/* =============================================================
   16. 动效偏好
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.midi-center *,
	.midi-submit *,
	.midi-categories *,
	.midi-search *,
	.midi-stats * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.midi-card:hover,
	.midi-button:hover,
	.midi-categories__item > a:hover,
	.midi-pagination a.page-numbers:hover {
		transform: none;
	}
}

/* =============================================================
   17. 独立作品展示页
   ============================================================= */

.midi-stage {
	--midi-stage-gap: clamp(16px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	padding-top: clamp(14px, 3vw, 32px);
	padding-bottom: 48px;
}

/* 只让正文里的普通链接跟随文字颜色；按钮 / 徽标 / 卡片等组件保留自身配色。 */
.midi-stage__desc a {
	color: inherit;
}

.midi-stage__back {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: var(--midi-stage-max, 1080px);
	margin: 0 auto var(--midi-stage-gap);
	padding: 0 var(--midi-stage-gap);
}

/* 左上角的「返回曲库」按钮：圆角胶囊 + 圆形箭头，悬停时箭头向左轻移。 */

.midi-stage__back-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 9px;
	padding: 8px 16px 8px 9px;
	border: 1px solid var(--midi-border);
	border-radius: 999px;
	background: var(--midi-bg);
	color: var(--midi-text-soft);
	font-size: 0.87rem;
	font-weight: 650;
	line-height: 1.25;
	text-decoration: none;
	box-shadow: var(--midi-shadow-xs);
	transition: color 0.16s var(--midi-ease), border-color 0.16s var(--midi-ease), box-shadow 0.16s var(--midi-ease);
}

.midi-stage__back-btn:hover,
.midi-stage__back-btn:focus-visible {
	border-color: rgba(var(--midi-primary-rgb), 0.45);
	color: var(--midi-primary);
	box-shadow: var(--midi-shadow-sm);
}

.midi-stage__back-btn:focus-visible {
	outline: 2px solid var(--midi-primary);
	outline-offset: 2px;
}

.midi-stage__back-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--midi-tint);
	color: var(--midi-primary);
	transition: transform 0.16s var(--midi-ease);
}

.midi-stage__back-btn:hover .midi-stage__back-icon,
.midi-stage__back-btn:focus-visible .midi-stage__back-icon {
	transform: translateX(-3px);
}

.midi-stage__main {
	display: flex;
	flex-direction: column;
	gap: var(--midi-stage-gap);
	width: 100%;
	max-width: var(--midi-stage-max, 1080px);
	margin: 0 auto;
	padding: 0 var(--midi-stage-gap);
}

.midi-stage__hero {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--midi-stage-gap);
	align-items: center;
	padding: clamp(18px, 2.6vw, 32px);
	background: var(--midi-bg);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-lg);
	box-shadow: var(--midi-shadow-md);
}

.midi-stage__cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--midi-radius-lg);
	background-color: var(--midi-primary);
	background-image:
		radial-gradient(120% 130% at 12% 8%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(
			140deg,
			hsl(var(--midi-hue, 250) 74% 62%) 0%,
			hsl(calc(var(--midi-hue, 250) + 32) 62% 44%) 58%,
			hsl(calc(var(--midi-hue, 250) + 58) 52% 30%) 100%
		);
	box-shadow: var(--midi-shadow-lg);
}

.midi-stage__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.midi-stage__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.midi-stage__icon svg {
	width: 44%;
	max-width: 190px;
	height: auto;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

.midi-stage__ext {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(10, 12, 20, 0.6);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.midi-stage__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.midi-stage__eyebrow {
	margin: 0;
	color: var(--midi-primary);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* 版权类型是「转载」时用中性色：避免和「原创」用同一个强调色，看起来像在推荐。 */
.midi-stage__eyebrow--repost {
	color: var(--midi-muted);
}

.midi-stage__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	font-weight: 780;
	line-height: 1.12;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
}

.midi-stage__artist {
	margin: -6px 0 0;
	color: var(--midi-muted);
	font-size: 1.05rem;
}

.midi-stage__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.midi-stage__facts {
	display: flex;
	flex-wrap: wrap;
	margin: 6px 0 0;
	padding: 0;
	overflow: hidden;
	border-top: 1px solid var(--midi-border);
	border-left: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg);
	list-style: none;
}

.midi-stage__facts li {
	flex: 1 1 110px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 11px 14px;
	background: var(--midi-bg);
	border-right: 1px solid var(--midi-border);
	border-bottom: 1px solid var(--midi-border);
}

.midi-stage__facts span {
	color: var(--midi-muted);
	font-size: 0.73rem;
}

.midi-stage__facts strong {
	font-size: 0.98rem;
	font-weight: 700;
}

.midi-stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.midi-stage__player {
	margin-top: 4px;
	padding: 6px;
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
}

.midi-stage__panel {
	padding: clamp(18px, 2.4vw, 26px);
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-card-radius);
	background: var(--midi-bg);
	box-shadow: var(--midi-shadow-md);
}

.midi-stage__panel-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	font-size: 1.1rem;
	font-weight: 720;
	letter-spacing: -0.01em;
}

.midi-stage__panel-title::before {
	content: "";
	width: 4px;
	height: 17px;
	border-radius: 999px;
	background: var(--midi-gradient);
}

.midi-stage__specs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-top: 1px solid var(--midi-border);
	border-left: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg);
	list-style: none;
}

.midi-stage__specs li {
	flex: 1 1 215px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 13px 15px;
	background: var(--midi-bg);
	border-right: 1px solid var(--midi-border);
	border-bottom: 1px solid var(--midi-border);
}

.midi-stage__specs span {
	color: var(--midi-muted);
	font-size: 0.75rem;
}

.midi-stage__specs strong {
	font-size: 0.93rem;
	font-weight: 650;
	line-height: 1.5;
	word-break: break-word;
}

.midi-stage__desc {
	color: var(--midi-text-soft);
	font-size: 1rem;
	line-height: 1.85;
}

.midi-stage__desc > :first-child {
	margin-top: 0;
}

.midi-stage__desc > :last-child {
	margin-bottom: 0;
}

.midi-stage__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 880px) {
	.midi-stage__hero {
		grid-template-columns: 1fr;
	}

	.midi-stage__cover {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 680px) {
	.midi-breadcrumb__actions {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.midi-breadcrumb__actions .midi-button {
		flex: 1 1 auto;
		justify-content: center;
	}

	.midi-modal--form {
		padding: 14px;
	}

	.midi-modal__card--form {
		padding: 26px 18px 20px;
	}

	.midi-stage__actions {
		width: 100%;
	}

	.midi-stage__actions .midi-button {
		flex: 1 1 100%;
	}
}

/* =============================================================
   18. 首页侧栏：个人信息卡片 + 我的投稿
   ============================================================= */

/* 首页排版：三个模块按后台设置放进顶部 / 左侧 / 右侧 */

.midi-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	row-gap: var(--midi-card-gap-fluid);
	column-gap: var(--midi-card-gap-fluid);
	/* 整个首页区域按「布局宽度」居中，左右留出与内边距一致的外边距 */
	width: calc(100% - 2 * clamp(14px, 3.2vw, 30px));
	max-width: var(--midi-max, 1200px);
	margin-inline: auto;
}

/* 模块卡片填满自己所在的槽位：宽度统一由网格决定，
   卡片自身不再内缩，这样顶部卡片与左右两列严格对齐，卡片间距也完全一致。 */
.midi-layout__slot > .midi-wrap,
.midi-layout__slot > .midi-slideshow {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* 左右分栏：曲库在左 / 曲库在右 / 曲库在顶部 */

.midi-layout--side {
	grid-template-columns: minmax(0, 1fr) clamp(290px, 28%, 360px);
}

.midi-layout--flip {
	grid-template-columns: clamp(290px, 28%, 360px) minmax(0, 1fr);
}

.midi-layout--even {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.midi-layout__slot {
	display: flex;
	flex-direction: column;
	gap: var(--midi-card-gap-fluid);
	min-width: 0;
}

/* 槽位内部间距统一交给 gap，避免和卡片自带的外边距叠加 */
.midi-layout__slot > .midi-slideshow,
.midi-layout__slot > .midi-hero-card {
	margin-bottom: 0;
}

.midi-layout__slot--top {
	grid-column: 1 / -1;
}

.midi-layout__slot--left {
	grid-column: 1;
}

.midi-layout__slot--right {
	grid-column: 2;
}

/* 首页右侧栏跟随滚动：吸附在屏幕顶部下方，一直保持可见。
   偏移量 --midi-sticky-top 由脚本按主题头部**当前可见高度**算好
   （没有脚本时用 96px 兜底）。 */
.midi-center--sticky-side .midi-layout__slot--right {
	position: sticky;
	top: var(--midi-sticky-top, 96px);
}

/* 右栏比视口还高时退回普通文档流：吸附后下半部分永远滚不到，只能看到最上面一截。
   这个类由脚本按实测高度添加，没有脚本时不会出现。 */
.midi-center--sticky-off .midi-layout__slot--right {
	position: static;
}

.midi-profile {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.midi-profile__head {
	display: flex;
	align-items: center;
	gap: 13px;
}

.midi-profile__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--midi-tint);
}

.midi-profile__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.midi-profile__avatar-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-image: var(--midi-gradient);
	color: #fff;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
}

.midi-profile__ident {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.midi-profile__name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.midi-profile__name {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.midi-profile__mail {
	color: var(--midi-muted);
	font-size: 0.82rem;
	overflow-wrap: anywhere;
}

.midi-profile__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--midi-tint);
	color: var(--midi-primary);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}

.midi-profile__badge--vip {
	background-image: linear-gradient(135deg, #f7bd45 0%, #e08b1e 100%);
	color: #fff;
}

.midi-profile__badge--boosvip {
	background-image: linear-gradient(135deg, #f0544f 0%, #c02a22 100%);
	color: #fff;
}

.midi-profile__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 10px;
}

.midi-profile__stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 13px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
}

.midi-profile__stat-label {
	color: var(--midi-muted);
	font-size: 0.75rem;
	font-weight: 650;
}

.midi-profile__stat-value {
	font-size: 1.14rem;
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.midi-profile__stat-sub {
	color: var(--midi-muted);
	font-size: 0.74rem;
	line-height: 1.5;
}

.midi-profile__stat-date {
	font-weight: 700;
	white-space: nowrap;
}

.midi-profile__tabs,
.midi-rank-board__tabs {
	/* 页签始终排成一行：有空间时均分，空间不够时整排可横向滑动，不换行也不挤掉文字 */
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 3px;
	overflow-x: auto;
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-sunken);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.midi-profile__tabs::-webkit-scrollbar,
.midi-rank-board__tabs::-webkit-scrollbar {
	display: none;
}

.midi-profile__tab,
.midi-rank-board__tab {
	flex: 1 0 auto;
	min-width: 0;
	padding: 9px 2px;
	overflow: hidden;
	border: 0;
	border-radius: calc(var(--midi-radius-sm) - 3px);
	background: transparent;
	color: var(--midi-muted);
	font-family: inherit;
	/* 字号取「整排刚好放得下」的最大值：卡片实际内容宽度 / 页签数量 / 每个页签 4 个汉字，
	   再扣掉页签左右内边距（各 2px）与页签之间的间距（2px），最后封顶 0.82rem、保底 0.62rem。
	   卡片越宽字越大，右栏收到最窄时也只是略小，不会挤掉或裁掉最后一个页签。
	   上一行是给不支持容器查询单位（cqw）的旧浏览器兜底。 */
	font-size: calc(0.94rem - var(--midi-tab-count, 5) * 0.06rem);
	font-size: max(0.62rem, min(0.82rem, calc(100cqw / var(--midi-tab-count, 5) / 4 - 1.5px - 1px / var(--midi-tab-count, 5))));
	font-weight: 650;
	line-height: 1.3;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.16s var(--midi-ease), color 0.16s var(--midi-ease);
}

.midi-profile__tab:hover,
.midi-profile__tab:focus-visible,
.midi-rank-board__tab:focus-visible {
	color: var(--midi-primary);
}

.midi-profile__tab.is-active,
.midi-rank-board__tab.is-active {
	background: var(--midi-bg);
	color: var(--midi-text);
	box-shadow: var(--midi-shadow-xs);
}

.midi-profile__panels,
.midi-rank-board__panels {
	display: flex;
	flex-direction: column;
}

.midi-profile__panel,
.midi-rank-board__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* display:flex 会盖掉 hidden 的 display:none，这里补回来。 */
.midi-profile__panel[hidden],
.midi-rank-board__panel[hidden] {
	display: none;
}

.midi-profile__count {
	margin: 0;
	color: var(--midi-muted);
	font-size: 0.8rem;
}

.midi-profile__count strong {
	color: var(--midi-text);
}

.midi-profile__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.midi-profile__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 9px 11px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
	transition: border-color 0.16s var(--midi-ease);
}

.midi-profile__item:hover {
	border-color: rgba(var(--midi-primary-rgb), 0.4);
}

/* 用后代选择器抬高优先级，避免主题的正文链接样式把标题染色加下划线 */
.midi-profile__item .midi-profile__item-title {
	color: inherit;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 650;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

a.midi-profile__item-title:hover,
a.midi-profile__item-title:focus-visible {
	color: var(--midi-primary);
}

.midi-profile__item-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.midi-profile__item-date {
	color: var(--midi-muted);
	font-size: 0.75rem;
}

/* 「我的打赏」记录行：方向标签 + 积分数量 */
.midi-tip-tag {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: bottom;
}

/* 我打赏出去的：中性色，表示支出 */
.midi-tip-tag--out {
	background: var(--midi-tint);
	color: var(--midi-primary);
}

/* 别人打赏给我的：成功色，表示收入 */
.midi-tip-tag--in {
	background: #e8f9ef;
	color: #097a3e;
}

.midi-tip-amount {
	color: var(--midi-ink);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.midi-tip-tag--in + .midi-tip-amount {
	color: #097a3e;
}

.midi-profile__empty {
	margin: 0;
	padding: 12px 0;
	color: var(--midi-muted);
	font-size: 0.84rem;
	line-height: 1.7;
	text-align: center;
}

.midi-profile__more {
	margin: 0;
	color: var(--midi-muted);
	font-size: 0.78rem;
}

/* 未登录时的登录提示卡片 */

.midi-profile--guest {
	text-align: center;
}

.midi-profile__guest-icon {
	display: inline-flex;
	align-self: center;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--midi-tint);
	color: var(--midi-primary);
}

.midi-profile__guest-icon svg {
	width: 28px;
	height: 28px;
}

.midi-profile__guest-title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
}

.midi-profile__guest-text {
	margin: 0;
	color: var(--midi-muted);
	font-size: 0.82rem;
	line-height: 1.75;
}

/* 作品状态徽章（前台） */

.midi-state {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 650;
	line-height: 1.7;
	white-space: nowrap;
}

.midi-state--ok {
	background: #e8f9ef;
	color: #097a3e;
}

.midi-state--warn {
	background: #fff5e0;
	color: #8a5a00;
}

.midi-state--bad {
	background: #fdecec;
	color: #b32d2e;
}

.midi-state--muted {
	background: #eef0f5;
	color: #5b6170;
}

/* 窄屏：个人信息卡片移到标题下方、曲库列表上方，单列铺满 */

@media (max-width: 1024px) {
	/* 单列：无论后台怎么排，都按「顶部 → 左侧 → 右侧」堆叠，曲库列表放最后 */
	.midi-layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--midi-card-gap-fluid);
	}

	.midi-layout__slot--top,
	.midi-layout__slot--left,
	.midi-layout__slot--right {
		grid-column: 1 / -1;
	}

	/* 单列堆叠时不做吸附，否则卡片会一直挡住下面的内容 */
	.midi-center--sticky-side .midi-layout__slot--right {
		position: static;
	}

}

/* =============================================================
   19. 作品页互动条：浏览 / 点赞 / 反赞 / 收藏
   ============================================================= */

.midi-stage__engage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	grid-column: 1 / -1;
	width: 100%;
	margin-top: clamp(4px, 1vw, 10px);
	padding-top: clamp(14px, 2vw, 20px);
	border-top: 1px solid var(--midi-border);
}

.midi-engage {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 8px 15px;
	border: 1px solid var(--midi-border-strong);
	border-radius: 999px;
	background: var(--midi-bg);
	color: var(--midi-text);
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.3;
	white-space: nowrap;
	cursor: default;
	transition: border-color 0.16s var(--midi-ease), background-color 0.16s var(--midi-ease),
		color 0.16s var(--midi-ease), box-shadow 0.16s var(--midi-ease), transform 0.16s var(--midi-ease);
}

button.midi-engage {
	cursor: pointer;
}

button.midi-engage:hover,
button.midi-engage:focus-visible {
	border-color: rgba(var(--midi-primary-rgb), 0.5);
	background: var(--midi-tint);
	color: var(--midi-primary);
	transform: translateY(-1px);
}

button.midi-engage:disabled {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.midi-engage__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--midi-muted);
}

.midi-engage__icon svg {
	width: 18px;
	height: 18px;
}

/* 反赞就是点赞图标翻过来 */
.midi-engage--dislike .midi-engage__icon svg {
	transform: rotate(180deg);
}

.midi-engage__label {
	color: var(--midi-muted);
}

.midi-engage__value {
	font-size: 0.92rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}

button.midi-engage.is-active {
	border-color: transparent;
	color: #fff;
}

button.midi-engage.is-active .midi-engage__icon,
button.midi-engage.is-active .midi-engage__label {
	color: inherit;
}

.midi-engage--like.is-active,
.midi-engage--favorite.is-active {
	background-image: var(--midi-gradient);
	box-shadow: var(--midi-shadow-primary);
}

.midi-engage--dislike.is-active {
	background-image: linear-gradient(135deg, #f0544f 0%, #c02a22 100%);
	box-shadow: 0 12px 24px -12px rgba(217, 45, 32, 0.6);
}

/* 打赏：和点赞 / 收藏一样的胶囊按钮，图标用主题强调色做区分 */
.midi-engage--tip {
	border-color: rgba(var(--midi-primary-rgb), 0.42);
	background: var(--midi-tint);
	color: var(--midi-primary);
}

.midi-engage--tip .midi-engage__icon,
.midi-engage--tip .midi-engage__label {
	color: var(--midi-primary);
}

.midi-engage--tip:hover,
.midi-engage--tip:focus-visible {
	border-color: transparent;
	background-image: var(--midi-gradient);
	box-shadow: var(--midi-shadow-primary);
	color: #fff;
}

.midi-engage--tip:hover .midi-engage__icon,
.midi-engage--tip:hover .midi-engage__label,
.midi-engage--tip:focus-visible .midi-engage__icon,
.midi-engage--tip:focus-visible .midi-engage__label {
	color: inherit;
}

/* 打赏弹窗 */

.midi-modal__card--tip {
	max-width: 460px;
	max-width: min(460px, 92vw);
}

.midi-tip__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 16px 0 10px;
	text-align: left;
}

.midi-tip__input {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg-soft);
	transition: border-color 0.16s var(--midi-ease), box-shadow 0.16s var(--midi-ease);
}

.midi-tip__input:focus-within {
	border-color: rgba(var(--midi-primary-rgb), 0.55);
	box-shadow: 0 0 0 3px rgba(var(--midi-primary-rgb), 0.14);
}

.midi-tip__input input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--midi-text);
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: left;
	outline: none;
	font-variant-numeric: tabular-nums;
}

.midi-tip__input em {
	color: var(--midi-muted);
	font-size: 0.82rem;
	font-style: normal;
	font-weight: 650;
	white-space: nowrap;
}

.midi-tip__meta {
	margin: 0 0 14px;
	color: var(--midi-muted);
	font-size: 0.8rem;
	line-height: 1.7;
	text-align: left;
}

.midi-tip__actions {
	display: flex;
	justify-content: center;
}

.midi-tip__actions .midi-button {
	min-width: 140px;
	justify-content: center;
}

.midi-tip__state {
	margin: 12px 0 0;
	font-size: 0.82rem;
	line-height: 1.6;
	text-align: left;
}

.midi-tip__state:empty {
	display: none;
}

.midi-tip__state.is-error {
	color: #d93025;
}

.midi-tip__state.is-success {
	color: var(--midi-primary);
}

@media (hover: none) {
	button.midi-engage:hover {
		transform: none;
	}
}

@media (max-width: 560px) {
	.midi-stage__engage {
		gap: 8px;
	}

	.midi-engage {
		flex: 1 1 calc(50% - 4px);
		justify-content: center;
	}
}

/* =============================================================
   20. 首页幻灯片
   ============================================================= */

/* =============================================================
   19b. 作品页「查看乐谱」弹窗
   ============================================================= */

.midi-modal__card--score {
	max-width: 1400px;
	max-width: min(1400px, 96vw);
	width: 96vw;
	padding: 26px 24px 22px;
	text-align: left;
	/* 乐谱弹窗不加缩放动画：一是这种整页大图没必要，二是缩放过程中的
	   getBoundingClientRect 会偏小，会影响「铺满左右」的测量精度。淡入仍由遮罩的透明度过渡负责。 */
	transform: none;
}

/* 乐谱弹窗里是一整页几十条谱表的大 SVG：遮罩若再叠 backdrop-filter，
   浏览器每帧都要重新做背景模糊，滚动与翻页会明显变卡，所以这里只用纯色遮罩。
   （全屏遮罩现已统一不加模糊，这条保留作为显式声明，避免日后被误加回来。） */
.midi-modal--score {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(16, 18, 26, 0.42);
}

/* 钢琴卷帘弹窗：作品页「查看乐谱」右边的「钢琴卷帘」按钮打开 */

.midi-modal__card--roll {
	max-width: 1200px;
	max-width: min(1200px, 96vw);
	width: 96vw;
	padding: 26px 24px 22px;
	text-align: left;
}

.midi-roll__intro {
	margin-bottom: 14px;
}

.midi-roll-host {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* 弹窗里空间比卡片多，卷帘可以高一些；依然放在可滚动的盒子里 */
.midi-roll-host .midi-roll {
	max-height: 540px;
	max-height: min(64vh, 540px);
	margin: 0;
}

.midi-score__intro {
	margin-bottom: 14px;
}

.midi-score__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.midi-score__page {
	color: var(--midi-text-soft);
	font-size: 0.85rem;
	font-weight: 650;
	white-space: nowrap;
}

.midi-score__state {
	color: var(--midi-muted);
	font-size: 0.82rem;
}

.midi-score__state:empty {
	display: none;
}

/* 顶部缩放控件：− / 百分比 / +。margin-left:auto 让它靠右，和其它按钮分开。 */

.midi-score__zoom {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	padding: 3px;
	border: 1px solid var(--midi-border);
	border-radius: 999px;
	background: var(--midi-bg-soft);
}

.midi-score__zoom-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--midi-text-soft);
	cursor: pointer;
	transition: background-color 0.16s var(--midi-ease), color 0.16s var(--midi-ease);
}

.midi-score__zoom-btn:hover:not(:disabled),
.midi-score__zoom-btn:focus-visible:not(:disabled) {
	background: var(--midi-bg);
	color: var(--midi-primary);
}

.midi-score__zoom-btn:focus-visible {
	outline: 2px solid var(--midi-primary);
	outline-offset: 1px;
}

.midi-score__zoom-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.midi-score__zoom-value {
	min-width: 46px;
	color: var(--midi-text-soft);
	font-size: 0.8rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* 乐谱始终用白底黑线，避免暗色主题下谱线看不见 */
.midi-score {
	/* 播放光标（OSMD 的 cursorImg）是绝对定位的竖线，需要这里是定位父级；
	   OSMD 给它设了 z-index:-1，所以这里必须自己形成层叠上下文（isolation），
	   否则竖线会被这块白底盖住。 */
	position: relative;
	isolation: isolate;
	/*
	 * 把这块的绘制与外面隔离：播放时每隔 90ms 移动一次光标，
	 * 没有隔离的话每一帧都会连带重绘卡片的阴影与整个遮罩，
	 * contain: paint 会把重绘范围限制在这个盒子里。
	 */
	contain: layout paint;
	/* 兜底值写在前面：不支持 min() 的旧内核会丢掉后一行，仍能拿到一个可用高度。 */
	max-height: 78vh;
	max-height: min(78vh, 900px);
	min-height: 320px;
	overflow: auto;
	/* 在方框里滚到边界时不要把页面 / 弹窗一起带着滚 */
	overscroll-behavior: contain;
	/* 一直预留纵向滚动条的位置：谱面按方框宽度渲染，滚动条出现 / 消失时宽度不变，
	   这样「铺满左右」不会因为滚动条挤进来而差一点点。 */
	scrollbar-gutter: stable;
	padding: 10px 6px;
	border: 1px solid var(--midi-border);
	border-radius: var(--midi-radius-sm);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.midi-score__player {
	display: none;
}

/* 播放中：按钮换成暂停态，光标保持可见 */
.midi-score__play.is-playing {
	border-color: transparent;
	background: var(--midi-tint);
	color: var(--midi-primary);
}

/* 乐谱按「铺满左右」渲染：默认正好是方框宽度；放大后允许超出，
   由上面的 overflow:auto 提供横向滚动条（不要用 max-width 把它压回去）。 */
.midi-score svg {
	display: block;
	max-width: none;
	height: auto;
}

.midi-score__empty {
	margin: 0;
	padding: 26px 10px;
	color: var(--midi-muted);
	font-size: 0.88rem;
	text-align: center;
}

.midi-slideshow {
	position: relative;
	width: calc(100% - 2 * clamp(14px, 3.2vw, 30px));
	max-width: var(--midi-max, 1200px);
	margin-inline: auto;
	margin-bottom: var(--midi-card-gap-fluid);
	justify-self: center;
	border-radius: var(--midi-radius-lg);
	background: var(--midi-bg-sunken);
	box-shadow: var(--midi-shadow-md);
}

.midi-slideshow__viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 2;
	border-radius: inherit;
}

/* 后台设了「幻灯片显示高度」时：固定高度（窄屏同样生效），图片依旧按填满裁切。 */
.midi-slideshow--fixed .midi-slideshow__viewport {
	aspect-ratio: auto;
	height: var(--midi-slide-height, 420px);
}

.midi-slideshow__slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--midi-ease), visibility 0.55s var(--midi-ease);
}

.midi-slideshow__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.midi-slideshow__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.midi-slideshow__nav {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(12, 14, 22, 0.42);
	color: #fff;
	opacity: 0.85;
	cursor: pointer;
	transition: opacity 0.2s var(--midi-ease), background-color 0.2s var(--midi-ease), transform 0.2s var(--midi-ease);
}

.midi-slideshow__nav svg {
	width: 22px;
	height: 22px;
}

.midi-slideshow__nav--prev {
	left: clamp(8px, 1.6vw, 16px);
}

.midi-slideshow__nav--next {
	right: clamp(8px, 1.6vw, 16px);
}

.midi-slideshow__nav:hover,
.midi-slideshow__nav:focus-visible {
	background: rgba(12, 14, 22, 0.68);
	opacity: 1;
	transform: scale(1.06);
}

.midi-slideshow__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(10px, 1.6vw, 16px);
	display: flex;
	justify-content: center;
	gap: 8px;
}

.midi-slideshow__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 1px 3px rgba(12, 14, 22, 0.35);
	cursor: pointer;
	transition: width 0.2s var(--midi-ease), background-color 0.2s var(--midi-ease);
}

.midi-slideshow__dot.is-active {
	width: 24px;
	background: #fff;
}

.midi-slideshow__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (hover: none) {
	.midi-slideshow__nav:hover {
		transform: none;
	}
}

@media (max-width: 680px) {
	.midi-slideshow__viewport {
		aspect-ratio: 16 / 10;
	}

	.midi-slideshow__nav {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}

	.midi-slideshow__nav svg {
		width: 18px;
		height: 18px;
	}
}

/* =============================================================
   21. 首页未配置任何模块时的提示
   ============================================================= */

.midi-config-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: clamp(28px, 5vw, 52px) clamp(18px, 3vw, 32px);
	text-align: center;
}

.midi-config-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--midi-tint);
	color: var(--midi-primary);
}

.midi-config-empty__icon svg {
	width: 28px;
	height: 28px;
}

.midi-config-empty__title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.6;
}

/* =============================================================
   22. 屏幕中间的统一样式提示（点赞 / 反赞 / 收藏 / 编辑 / 删除）
   ============================================================= */

.midi-toast-host {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100000;
	display: flex;
	justify-content: center;
	width: max-content;
	max-width: 460px;
	max-width: min(88vw, 460px);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.22s var(--midi-ease);
}

.midi-toast-host[hidden] {
	display: none;
}

.midi-toast-host.is-visible {
	opacity: 1;
}

.midi-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 14px;
	background: rgba(16, 18, 31, 0.92);
	color: #fff;
	font-size: 0.94rem;
	font-weight: 650;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
	transform: translateY(8px) scale(0.96);
	transition: transform 0.22s var(--midi-ease);
}

.midi-toast-host.is-visible .midi-toast {
	transform: none;
}

.midi-toast__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-image: var(--midi-gradient);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}

.midi-toast--success .midi-toast__icon::before {
	content: "\2713";
}

.midi-toast--error .midi-toast__icon {
	background-image: linear-gradient(135deg, #f0544f 0%, #d92d20 100%);
}

.midi-toast--error .midi-toast__icon::before {
	content: "!";
}

.midi-toast__text {
	overflow-wrap: anywhere;
}

/* =============================================================
   23. 旧内核 / 双核浏览器兼容兜底
   -------------------------------------------------------------
   遨游、360、QQ、搜狗等双核浏览器的「极速模式」走 Chromium 内核，但版本
   常落后于主线（遨游 6 基于 Chromium 79）。下面只对「支持不了就会明显坏掉」
   的特性做兜底；纯视觉细节的差异不处理。

   支持基线：Chromium 79+ / Firefox 70+ / Safari 13.1+（遨游请用极速模式）。
   IE 与双核浏览器的「兼容模式」（Trident）不在支持范围内 —— 整套样式建立在
   CSS 变量与 Grid 之上，那两项在老 Trident 里都不存在，属于设计基础而非
   可以局部降级的细节。
   ============================================================= */

/* 1) aspect-ratio 需要 Chromium 88+ / Safari 15+。
      不支持时这类盒子拿不到高度，封面会直接塌成 0，必须还原比例。 */
@supports not (aspect-ratio: 1 / 1) {
	/* 卡片封面 16:10（列表布局本来就不用比例，靠 min-height，必须排除） */
	.midi-grid:not(.midi-grid--list) .midi-card__cover {
		height: 0;
		padding-top: 62.5%;
	}

	.midi-grid:not(.midi-grid--list) .midi-card__cover-link {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	/* 作品页大封面 1:1 */
	.midi-stage__cover {
		height: 0;
		padding-top: 100%;
	}

	.midi-stage__img,
	.midi-stage__icon {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	/* 首页幻灯片 5:2（设了固定高度的变体自带 height，要排除） */
	.midi-slideshow:not(.midi-slideshow--fixed) .midi-slideshow__viewport {
		height: 0;
		padding-top: 40%;
	}
}

/* 2) scrollbar-gutter 需要 Chromium 94+。
      不支持时改成「始终显示纵向滚动条」，同样能固定谱面可用宽度，
      避免滚动条出现 / 消失时「铺满左右」差一点点。 */
@supports not (scrollbar-gutter: stable) {
	.midi-score {
		overflow-y: scroll;
	}
}

/* 3) overflow-wrap: anywhere 需要 Chromium 80+ / Safari 15.4+。
      旧内核用 word-break 兜底；现代浏览器上 overflow-wrap 仍优先，行为不变。 */
.midi-center,
.midi-submit,
.midi-categories,
.midi-search,
.midi-stats,
.midi-archive-wrap,
.midi-modal {
	word-break: break-word;
}

/* 4) flex 容器的 gap 需要 Chromium 84+，且在 CSS 里无法与 grid 的 gap 区分
      （@supports (gap: 1px) 在只有 grid 支持 gap 的旧内核上同样成立），
      所以由 JS 检测后给 <html> 挂 midi-no-flexgap，这里用外边距补间距。
      只处理弹窗内部——挤在一起最明显的地方。 */
html.midi-no-flexgap .midi-modal__actions > * + * {
	margin-left: 10px;
}

html.midi-no-flexgap .midi-score__bar > * + * {
	margin-left: 10px;
}

html.midi-no-flexgap .midi-score__zoom > * + * {
	margin-left: 2px;
}

html.midi-no-flexgap .midi-toast > * + * {
	margin-left: 10px;
}

/* =============================================================
   24. 首页搜索模块
   -------------------------------------------------------------
   卡片宽度不设限：它跟着左侧栏走，和幻灯片卡片同一列宽。
   高度由后台设置（内联 min-height）或内容撑开。
   搜索框与按钮都用 flex + 外边距排版，不依赖 flex 的 gap（Chromium 84+），
   热门关键字用 inline-block + 外边距，任何内核都能正常换行。
   ============================================================= */

.midi-search-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 裁掉溢出圆角的背景图 / 视频；弹窗是卡片的兄弟节点，不会被这里裁到 */
	overflow: hidden;
	padding: 34px 24px;
}

/* 背景层：图片用 background-image，视频用 <video> 铺满并裁切 */
.midi-search-card__bg,
.midi-search-card__video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.midi-search-card__bg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.midi-search-card__video {
	object-fit: cover;
}

/* 遮罩浓度由后台设置写在内联 opacity 上 */
.midi-search-card__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: #0b0d14;
	pointer-events: none;
}

.midi-search-card__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 620px;
}

/* ---------------- 搜索框 ---------------- */

.midi-search-box {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 6px 6px 6px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 14px 30px -16px rgba(12, 14, 22, 0.5);
}

.midi-search-box__label {
	/* 只放读屏文字，不参与排版 */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.midi-search-box__icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-right: 10px;
	color: var(--midi-muted);
}

.midi-search-box__icon svg {
	display: block;
	width: 19px;
	height: 19px;
}

.midi-search-box__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--midi-text);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.midi-search-box__input:focus {
	outline: 0;
}

/* 去掉 WebKit 原生的「清除」小叉，避免和右侧按钮挤在一起 */
.midi-search-box__input::-webkit-search-cancel-button,
.midi-search-box__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.midi-search-box__button {
	flex: 0 0 auto;
	margin-left: 10px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background-image: var(--midi-gradient);
	color: #fff;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.16s var(--midi-ease), transform 0.16s var(--midi-ease);
}

.midi-search-box__button:hover,
.midi-search-box__button:focus-visible {
	filter: brightness(1.07);
}

.midi-search-box__button:disabled {
	opacity: 0.65;
	cursor: default;
}

/* ---------------- 热门关键字 ---------------- */

.midi-search-hot {
	margin-top: 14px;
	color: var(--midi-muted);
	font-size: 0.8rem;
	line-height: 1.9;
	text-align: center;
}

.midi-search-hot__label {
	margin-right: 4px;
}

.midi-search-hot__item {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 3px 12px;
	border: 1px solid var(--midi-border);
	border-radius: 999px;
	background: var(--midi-bg-soft);
	color: var(--midi-text-soft, var(--midi-text));
	font-family: inherit;
	font-size: 0.8rem;
	line-height: 1.5;
	cursor: pointer;
	transition: color 0.15s var(--midi-ease), border-color 0.15s var(--midi-ease),
		background-color 0.15s var(--midi-ease);
}

.midi-search-hot__item:hover,
.midi-search-hot__item:focus-visible {
	border-color: var(--midi-primary);
	background: var(--midi-tint);
	color: var(--midi-primary);
}

/* 有背景时改成半透明白字，压在遮罩上仍然读得清 */
.midi-search-card--has-bg .midi-search-hot {
	color: rgba(255, 255, 255, 0.85);
}

.midi-search-card--has-bg .midi-search-hot__item {
	border-color: rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.midi-search-card--has-bg .midi-search-hot__item:hover,
.midi-search-card--has-bg .midi-search-hot__item:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
}

/* ---------------- 结果弹窗 ---------------- */

.midi-modal__card--search {
	position: relative;
	max-width: 880px;
	padding: 0;
	text-align: left;
}

.midi-search-modal__head {
	/* 右侧留出关闭按钮的位置，标题不会压到它下面 */
	padding: 22px 64px 14px 26px;
	border-bottom: 1px solid var(--midi-border);
}

.midi-search-modal__title {
	margin: 0;
	color: var(--midi-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	word-break: break-word;
}

.midi-search-modal__meta {
	margin: 5px 0 0;
	color: var(--midi-muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.midi-search-modal__body {
	/* 先给不支持 min() 的内核一个纯 vh 兜底，支持的再按 620px 封顶 */
	max-height: 62vh;
	max-height: min(62vh, 620px);
	overflow: auto;
	padding: 18px 22px 22px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.midi-search-modal__status {
	margin: 0;
	padding: 18px 0;
	color: var(--midi-muted);
	font-size: 0.88rem;
	line-height: 1.7;
	text-align: center;
}

/* ---------------- 下载权限提示（作品页按钮下方 / 卡片按钮） ---------------- */
.midi-stage__download {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.midi-stage__download-note {
	color: var(--midi-muted);
	font-size: 0.78rem;
	line-height: 1.5;
}

/* 被权限拦下时的说明：比普通提示更醒目一点，但不至于像报错 */
.midi-stage__download-note.is-blocked {
	padding: 5px 10px;
	border-radius: var(--midi-radius-sm);
	background: rgba(var(--midi-primary-rgb), 0.08);
	color: var(--midi-primary);
	font-weight: 600;
}

/* 禁用的下载按钮：看起来确实点不动，鼠标也给出提示 */
.midi-button--disabled {
	cursor: not-allowed;
	opacity: 0.75;
}

/* ---------------- 用户排行榜模块（右侧区域） ---------------- */

/* ---------------- 作品页封面图片特效（10 种，后台可选） ---------------- */

/*
 * 全部是**一直循环播放**的持续动效：进入作品页面就开始，不会停，也不需要鼠标悬停。
 * 用 CSS 动画 + animation-direction: alternate + infinite 实现 —— 纯 CSS，不依赖 JS。
 *
 * 两条必须守住的规则：
 *   1. 缩放永远不低于 1。封面外层是 overflow: hidden，一旦小于 1 就会露出底色边缘。
 *      所以「缩小」是「从较大收回 1.0 再推远」，而不是缩到 1 以下。
 *   2. 滤镜在「原样 ⇄ 目标值」之间往返，而不是「有 → 无」播一次。
 *      终态写同名恒等值（grayscale(0) 等）：各家浏览器对「插值到 none」处理不一致，
 *      会变成硬切而不是平滑过渡。
 *
 * 周期刻意都放慢到 4–7 秒，动效是"呼吸"而不是"闪烁"；10 种效果的幅度与周期各不相同，
 * 换一种就能明显看出区别。
 */

/* 放大：持续缓慢放大再缩回 */
.midi-stage__cover--zoom-in .midi-stage__img {
	animation: midi-cover-zoom-in 4.4s ease-in-out infinite alternate;
}

@keyframes midi-cover-zoom-in {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* 缩小：从较大持续收回再推远（幅度更大、周期更长，与「放大」区分开） */
.midi-stage__cover--zoom-out .midi-stage__img {
	animation: midi-cover-zoom-out 6.2s ease-in-out infinite alternate;
}

@keyframes midi-cover-zoom-out {
	from { transform: scale(1.18); }
	to   { transform: scale(1); }
}

/* 微旋转：持续左右轻微摇摆 */
.midi-stage__cover--rotate .midi-stage__img {
	animation: midi-cover-rotate 5.2s ease-in-out infinite alternate;
}

@keyframes midi-cover-rotate {
	from { transform: scale(1.06) rotate(-1.7deg); }
	to   { transform: scale(1.06) rotate(1.7deg); }
}

/* 3D 倾斜：像被轻轻左右转动（perspective 挂在外层） */
.midi-stage__cover--tilt {
	perspective: 700px;
}

.midi-stage__cover--tilt .midi-stage__img {
	animation: midi-cover-tilt 6.6s ease-in-out infinite alternate;
}

@keyframes midi-cover-tilt {
	from { transform: rotateY(-7deg) rotateX(3deg) scale(1.06); }
	to   { transform: rotateY(7deg) rotateX(-3deg) scale(1.06); }
}

/* 灰度：在黑白与彩色之间持续往返 */
.midi-stage__cover--grayscale .midi-stage__img {
	animation: midi-cover-grayscale 7s ease-in-out infinite alternate;
}

@keyframes midi-cover-grayscale {
	from { filter: grayscale(0); }
	to   { filter: grayscale(1); }
}

/* 复古棕：在棕褐与彩色之间持续往返 */
.midi-stage__cover--sepia .midi-stage__img {
	animation: midi-cover-sepia 7s ease-in-out infinite alternate;
}

@keyframes midi-cover-sepia {
	from { filter: sepia(0); }
	to   { filter: sepia(0.9); }
}

/* 模糊：在清晰与轻微模糊之间持续往返（自动对焦感）。
   模糊是逐帧重新栅格化的，半径与幅度都压小一点，弱机器上也不至于掉帧。 */
.midi-stage__cover--blur .midi-stage__img {
	animation: midi-cover-blur 7.2s ease-in-out infinite alternate;
}

@keyframes midi-cover-blur {
	from { filter: blur(0); }
	to   { filter: blur(2.5px); }
}

/* 高饱和：色彩浓度持续起伏 */
.midi-stage__cover--saturate .midi-stage__img {
	animation: midi-cover-saturate 5.6s ease-in-out infinite alternate;
}

@keyframes midi-cover-saturate {
	from { filter: saturate(1); }
	to   { filter: saturate(2); }
}

/* 增亮：亮度像呼吸一样持续起伏 */
.midi-stage__cover--brightness .midi-stage__img {
	animation: midi-cover-brightness 5s ease-in-out infinite alternate;
}

@keyframes midi-cover-brightness {
	from { filter: brightness(1); }
	to   { filter: brightness(1.3); }
}

/* 光泽：每隔几秒扫过一次，一直循环（扫完停一会儿再来） */
.midi-stage__cover--shine::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 38%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 62%
	);
	transform: translateX(-130%);
	animation: midi-cover-shine 3.6s ease-in-out 0.6s infinite;
	pointer-events: none;
}

@keyframes midi-cover-shine {
	0%   { transform: translateX(-130%); }
	40%  { transform: translateX(130%); }
	100% { transform: translateX(130%); }
}

/*
 * 系统开了「减少动效」时全部停掉，封面以静态正常状态显示。
 * 这一条对循环动画尤其重要 —— 它会一直占着合成层与电量。
 */
@media (prefers-reduced-motion: reduce) {
	.midi-stage__cover .midi-stage__img,
	.midi-stage__cover--shine::after {
		animation: none;
	}

	/* animation:none 之后把光泽条挪回屏幕外，避免它停在封面中间 */
	.midi-stage__cover--shine::after {
		transform: translateX(-130%);
	}
}
/* ---------------- 网站公告模块（左侧区域） ---------------- */

.midi-announce {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 颜色来自设置里的两个色值，这里只给兜底 */
	background: var(--midi-announce-bg, var(--midi-tint));
	color: var(--midi-announce-color, var(--midi-primary));
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: box-shadow 0.16s var(--midi-ease);
}

/* 整条可点击时才给悬停反馈 */
a.midi-announce:hover,
a.midi-announce:focus-visible {
	box-shadow: var(--midi-shadow-md, var(--midi-shadow-sm));
	color: var(--midi-announce-color, var(--midi-primary));
}

.midi-announce__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--midi-announce-color, var(--midi-primary));
}

.midi-announce__icon .dashicons {
	width: 19px;
	height: 19px;
	font-size: 19px;
	line-height: 19px;
}

.midi-announce__text {
	flex: 1 1 auto;
	min-width: 0;
	/* 公告里手动换行也照做，不用写 <br> */
	white-space: pre-line;
	/* 长链接或长英文不要撑破卡片 */
	overflow-wrap: anywhere;
}

.midi-announce__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--midi-announce-color, var(--midi-primary));
	transition: transform 0.16s var(--midi-ease);
}

.midi-announce__arrow svg {
	display: block;
	width: 15px;
	height: 15px;
}

a.midi-announce:hover .midi-announce__arrow,
a.midi-announce:focus-visible .midi-announce__arrow {
	transform: translateX(2px);
}

/* ---------------- 作品页：分类右边紧跟的乐器种类 chip ---------------- */

/*
 * 与分类 chip 区分开：乐器种类用描边样式，不抢分类的视觉重量，
 * 但位置就在分类右边，属于同一行信息。
 */
.midi-chip--instrument {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid rgba(var(--midi-primary-rgb), 0.35);
	background: rgba(var(--midi-primary-rgb), 0.06);
}

.midi-chip--instrument .midi-chip__icon {
	display: inline-flex;
	color: var(--midi-primary);
}

.midi-chip--instrument .midi-chip__icon svg {
	display: block;
	width: 13px;
	height: 13px;
}

/*
 * 容器声明：页签字号用的是 100cqw（容器宽度单位），没有这一行 cqw 会退化成
 * 视口宽度，字号会离谱地大。个人信息卡片上也有同样的一行。
 */
.midi-rank-board {
	container-type: inline-size;
}

.midi-rank-board__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--midi-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.midi-rank-board__title-icon {
	display: inline-flex;
	color: var(--midi-primary);
}

.midi-rank-board__title-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* 面板顶部的一行完整榜单名：页签是简称，这里把全称写清楚 */
.midi-rank-board__caption {
	margin: 0 0 10px;
	color: var(--midi-muted);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
}

.midi-rank-board__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.midi-rank-board__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 0;
}

.midi-rank-board__item + .midi-rank-board__item {
	border-top: 1px solid var(--midi-border);
}

/* 名次角标：前三名用品牌色突出一下 */
.midi-rank-board__no {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--midi-bg-soft);
	color: var(--midi-muted);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.midi-rank-board__no--1,
.midi-rank-board__no--2,
.midi-rank-board__no--3 {
	background-image: var(--midi-gradient);
	color: #fff;
}

.midi-rank-board__avatar {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--midi-bg-soft);
	object-fit: cover;
}

.midi-rank-board__name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--midi-text);
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
	/* 用户名可能很长：截断而不是把数值挤出去 */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.midi-rank-board__name:hover,
.midi-rank-board__name:focus-visible {
	color: var(--midi-primary);
}

.midi-rank-board__value {
	flex: 0 0 auto;
	color: var(--midi-primary);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

/* 弹窗里的结果网格：列数由后台决定的 2 列起步，窄屏由通用规则降为 1 列 */
.midi-search-modal__body .midi-grid {
	margin: 0;
}

/* 手机上不下载背景视频：只留背景图（或纯色）。
   移动网络下自动播放的视频既费流量又拖慢首屏。 */
@media (max-width: 782px) {
	.midi-search-card__video {
		display: none;
	}

	.midi-search-card {
		padding: 26px 18px;
	}

	.midi-search-box {
		flex-wrap: wrap;
		padding: 10px 12px;
		border-radius: var(--midi-radius-sm);
	}

	.midi-search-box__input {
		height: 40px;
	}

	.midi-search-box__button {
		width: 100%;
		margin: 10px 0 0;
	}
}


/* =============================================================
   25. 标签输入（回车确认）
   -------------------------------------------------------------
   原来是「用逗号分隔」的普通文本框，现在改成标签块：输入内容后按回车
   变成一个小标签，点标签上的 × 或按退格键删除。

   两个必须注意的点：
   1) 内层输入框的选择器权重必须压过 .midi-form input[type="text"]（0,2,1），
      否则会被通用输入框样式套上边框与内边距，看起来像"框里又套了一个框"。
      这里用 .midi-form .midi-tags .midi-tags__input（0,3,0）压过去。
   2) 容器本身负责外观（边框、圆角、聚焦高亮），内层输入框彻底透明无边框。
   ============================================================= */

.midi-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	width: 100%;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--midi-border-strong);
	border-radius: var(--midi-radius-sm);
	background-color: var(--midi-bg-soft);
	transition: border-color 0.15s var(--midi-ease), box-shadow 0.15s var(--midi-ease),
		background-color 0.15s var(--midi-ease);
	cursor: text;
}

.midi-tags:hover {
	border-color: rgba(var(--midi-primary-rgb), 0.4);
}

/* 焦点其实在内层输入框上，但看起来应该是整块在聚焦 */
.midi-tags.is-focus {
	border-color: var(--midi-primary);
	background-color: var(--midi-bg);
	box-shadow: var(--midi-ring);
}

/* 已经到 10 个上限：整块变灰，提示不能再加 */
.midi-tags.is-full {
	background-color: var(--midi-bg);
}

/* ---------------- 单个标签 ---------------- */

.midi-tags__chip {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 3px;
	max-width: 100%;
	padding: 3px 5px 3px 11px;
	border-radius: 999px;
	background: var(--midi-tint);
	color: var(--midi-primary);
	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1.6;
}

.midi-tags__text {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.midi-tags__remove {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s var(--midi-ease), color 0.15s var(--midi-ease);
}

.midi-tags__remove:hover,
.midi-tags__remove:focus-visible {
	background: var(--midi-primary);
	color: #fff;
}

/* ---------------- 内层输入框：完全透明、无边框 ---------------- */

.midi-form .midi-tags .midi-tags__input,
.midi-form .midi-tags .midi-tags__input:hover,
.midi-form .midi-tags .midi-tags__input:focus {
	flex: 1 1 130px;
	width: auto;
	min-width: 110px;
	height: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	background-color: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.5;
	box-shadow: none;
}

.midi-form .midi-tags .midi-tags__input::placeholder {
	color: var(--midi-muted);
	opacity: 0.7;
}

.midi-form .midi-tags .midi-tags__input:disabled {
	/* 到 10 个上限后把输入框整个收掉，别在最后一个标签后面留一块空白 */
	display: none;
}

/* ---------------- 旧内核没有 flex 的 gap：用外边距补间距 ---------------- */

html.midi-no-flexgap .midi-tags__chip {
	margin: 3px 6px 3px 0;
}

html.midi-no-flexgap .midi-tags__remove {
	margin-left: 4px;
}

html.midi-no-flexgap .midi-tags {
	padding-bottom: 5px;
}

/* ---------------- 窄屏：输入框独占一行，标签块可换行 ---------------- */

@media (max-width: 680px) {
	.midi-tags {
		padding: 7px 10px;
	}

	.midi-form .midi-tags .midi-tags__input {
		flex: 1 1 100%;
		min-width: 0;
	}
}
/* =============================================================
   26. 作品页封面区域：乐谱 / 钢琴卷帘模式
   -------------------------------------------------------------
   后台「封面区域显示什么」选了乐谱或卷帘时，方形区域里放一块可滚动的媒体板。
   乐谱用白底（谱线必须是深色才看得见），卷帘沿用插件的深色底。

   内容是 JS 在**滚动到可见时**才加载的（见 initStageCoverMedia），
   所以这里只需要把盒子做成「固定尺寸 + 自己滚动」，不让里面的画布
   把作品页撑宽。
   ============================================================= */

.midi-stage__cover--media {
	/* 媒体板自己滚动，外层只负责圆角裁切 */
	background: var(--midi-bg-soft);
}

.midi-stage__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10px;
	overflow: auto;
	/* 在方框里滚到边界时不要把页面一起带着滚 */
	overscroll-behavior: contain;
	/* 一直预留纵向滚动条的位置：出现 / 消失时乐谱宽度不变，不会跳一下 */
	scrollbar-gutter: stable;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.midi-stage__media-note {
	margin: 0;
	padding: 30px 12px;
	color: var(--midi-muted);
	font-size: 0.86rem;
	line-height: 1.75;
	text-align: center;
}

/* 乐谱：排版引擎按方框宽度自己排版，这里只保证 SVG 铺满宽度、高度按比例。 */
.midi-stage__media svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 钢琴卷帘：画布宽度由曲目时长决定，放进可滚动盒子里，别撑破方框。 */
.midi-stage__media .midi-roll {
	max-width: none;
	max-height: none;
	height: 100%;
	min-height: 240px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* 右上角的「放大查看」：压在媒体内容上，触屏设备直接给足对比度 */
.midi-stage__media-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: rgba(10, 12, 20, 0.62);
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1.4;
	cursor: pointer;
	opacity: 0.86;
	transition: opacity 0.16s var(--midi-ease), background-color 0.16s var(--midi-ease);
}

.midi-stage__media-zoom:hover,
.midi-stage__media-zoom:focus-visible {
	background: rgba(10, 12, 20, 0.84);
	opacity: 1;
}

@media (hover: none) {
	.midi-stage__media-zoom {
		opacity: 1;
	}
}
/* =============================================================
   27. 投稿表单：并排的两排（文件与安全验证）
   -------------------------------------------------------------
   这两排现在都是「左右各一个」：
     第一排：MIDI 文件        + 封面图
     第二排：安全验证          + 版权类型

   但两边的方框内边距天生不同（封面图的 dropzone 比 MIDI 文件少 8px 上下），
   不处理就会一高一低。网格行本身是等高的，所以这里让**方框自己撑满行高**即可，
   内容再在方框里垂直居中。

   关掉封面图 / 安全验证时，模板会给对应那一项加回 --full 独占整行，
   不会出现「右边空半格」。
   ============================================================= */

/* 网格项默认 min-width:auto，长内容（长文件名）会把格子撑破 */
.midi-form__grid > .midi-form__row {
	min-width: 0;
}

/* 上传框撑满行高：两个 dropzone 高度严格一致 */
.midi-form__grid > .midi-form__row > .midi-dropzone {
	flex: 1 1 auto;
	/* 撑高之后内容不会挤在顶上 */
	justify-content: center;
}

/* 安全验证的虚线框同样撑满，才能和右边「版权类型」那个框一样高 */
.midi-form__grid > .midi-form__row > .midi-verify {
	flex: 1 1 auto;
}
/* ---------------- 标签联想面板（投稿页 / 编辑弹窗的标签输入） ---------------- */

/*
 * 面板挂在 .midi-tags 里，所以那个盒子必须是定位父级。
 * 面板本身铺满盒子宽度、贴在盒子下沿，超长时自己滚动（最多 5 项左右的高度）。
 */
.midi-tags {
	position: relative;
}

.midi-tags__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 232px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 5px;
	border: 1px solid var(--midi-border-strong);
	border-radius: var(--midi-radius-sm);
	background: var(--midi-bg);
	box-shadow: var(--midi-shadow-md);
}

.midi-tags__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 8px 11px;
	border: 0;
	border-radius: calc(var(--midi-radius-sm) - 3px);
	background: transparent;
	color: var(--midi-text);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.12s var(--midi-ease), color 0.12s var(--midi-ease);
}

.midi-tags__option:hover,
.midi-tags__option:focus-visible,
.midi-tags__option.is-active {
	background: var(--midi-tint);
	color: var(--midi-primary);
	outline: none;
}

.midi-tags__option-name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 右侧的使用次数：帮用户挑到「规范的那一个」标签 */
.midi-tags__option-count {
	flex: 0 0 auto;
	color: var(--midi-muted);
	font-size: 0.76rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.midi-tags__option:hover .midi-tags__option-count,
.midi-tags__option.is-active .midi-tags__option-count {
	color: var(--midi-primary);
}

/* 旧内核没有 flex 的 gap：用外边距补间距 */
html.midi-no-flexgap .midi-tags__option-count {
	margin-left: 10px;
}

/* 暗色模式下用更深的面板底色，避免和表单底色糊在一起 */
@media (prefers-color-scheme: dark) {
	.midi-tags__panel {
		background: var(--midi-bg-soft);
	}
}
/* =============================================================
   28. 首页顶部标题卡片：背景粒子特效（10 种）
   -------------------------------------------------------------
   画布由 JS 插到卡片最前面（DOM 顺序在标题之前），再用 z-index 压到内容下面；
   标题与按钮本身也要显式抬到画布之上，否则会被盖住点不动。

   卡片原本没有 position / overflow，这里补上：
   position 是画布定位的前提，overflow: hidden 保证粒子不会溢出卡片圆角。
   ============================================================= */

.midi-hero-card--fx {
	position: relative;
	overflow: hidden;
}

/* 背景层：铺满卡片，不吃鼠标事件（否则标题下面的链接点不到） */
.midi-hero-card__fx {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* 内容抬到画布之上 */
.midi-hero-card--fx > .midi-hero-card__text,
.midi-hero-card--fx > .midi-hero-card__action {
	position: relative;
	z-index: 1;
}

/* 有粒子时给卡片一点底色，浅色粒子上也能看清标题（跟随主题色，很淡） */
.midi-hero-card--fx {
	background-image: linear-gradient(135deg, rgba(var(--midi-primary-rgb), 0.05) 0%, rgba(var(--midi-primary-rgb), 0) 62%);
}

/* 暗色模式下粒子的对比度天然更高，这里不用额外处理 */

/* =============================================================
   29. 审查修复：焦点可见性、标签输入上限、减动效残留
   ============================================================= */

/*
 * 焦点指示补齐。
 *
 * 下面这几个控件原来只写了 outline: 0 而没有替代指示 —— 键盘用户 Tab 过去
 * 完全看不到焦点在哪（WCAG 2.4.7）。这里按源序放在文件末尾，同权重下必定生效。
 * 用 :focus 而不是 :focus-visible，因为 :focus-visible 在 Chromium 79 上无效。
 */
.midi-search-box:focus-within {
	box-shadow: var(--midi-ring);
}

.midi-tags__input:focus,
.midi-tip__input input:focus {
	outline: 0;
	box-shadow: var(--midi-ring);
}

.midi-tags__option:focus {
	outline: 0;
	box-shadow: var(--midi-ring);
}

/*
 * 标签到达上限时把输入框藏起来 —— JS 会给它加 is-full 并 disabled。
 * 原规则只改了背景色，于是输入框仍然可见但打不进字，看起来像坏了；
 * 这里按 JS 注释的原意补上隐藏与不可点。
 */
.midi-tags.is-full .midi-tags__input {
	opacity: 0;
	pointer-events: none;
}

/*
 * 减少动效时，加载微光的伪元素不能停在动画中途。
 *
 * 通用减动效规则把 animation-duration 压成 0.001ms，动画会定格在起始帧：
 * 那条 300% 宽、中间 50% 白的渐变正好横在结果区上，暗色模式下就是一块白色蒙层。
 * 封面光泽条那边（.midi-stage__cover--shine::after）已经这么处理了，这里补齐。
 */
@media (prefers-reduced-motion: reduce) {
	.midi-results-wrap.is-loading::after {
		animation: none;
		opacity: 0;
	}
}

/*
 * 占位文字不要再叠透明度。
 * --midi-muted 本身已经是 4.57:1，再乘 0.7 只剩 2.65:1，弱视用户基本看不清。
 */
.midi-form input::placeholder,
.midi-form textarea::placeholder {
	opacity: 1;
}

/* =============================================================
   前台举报弹窗
   ============================================================= */

/* 举报按钮固定在互动条最右侧（.midi-stage__engage 是 flex 容器） */
.midi-engage--report {
	margin-left: auto;
}

.midi-modal--report .midi-report-card {
	max-width: 520px;
}

.midi-report-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 12px;
}

.midi-report-field__label {
	color: var(--midi-muted);
	font-size: 12px;
	font-weight: 650;
}

.midi-report-field__value {
	color: var(--midi-text);
	font-size: 14px;
	line-height: 1.6;
	word-break: break-word;
}

.midi-report-field__value--url {
	color: var(--midi-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.midi-report-input {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 12px;
}

.midi-report-input input,
.midi-report-input textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--midi-border);
	border-radius: 10px;
	background: var(--midi-bg);
	color: var(--midi-text);
	font: inherit;
	font-size: 14px;
}

.midi-report-input textarea {
	min-height: 96px;
	resize: vertical;
}

.midi-report-input input:focus,
.midi-report-input textarea:focus {
	outline: 0;
	border-color: var(--midi-primary);
	box-shadow: var(--midi-ring);
}

.midi-report-state {
	min-height: 1.4em;
	margin: 0;
	color: var(--midi-muted);
	font-size: 13px;
}

.midi-report-state.is-error {
	color: #d93025;
}