@charset "UTF-8";
/* ==========================================================================
   玩家相册（页模板 page-gallery.php 专用）
   仅在相册页加载，不增加其它页面的负担。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-head {
	margin-bottom: 18px;
}

.otm-mc .mc-gal-sub {
	margin: 6px 0 0;
	color: var(--mc-text-dim);
	font-size: .95rem;
}

.otm-mc .mc-gal-sub b {
	color: var(--mc-grass-hi);
	font-size: 1.18em;
	text-shadow: 0 0 14px rgba(131, 201, 90, .35);
}

.otm-mc .mc-gal-hint {
	margin-left: 12px;
	color: var(--mc-text-mute);
	font-size: .86rem;
}

/* --------------------------------------------------------------------------
   2. 年份筛选：MC 按钮质感
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.otm-mc .mc-gal-chip {
	padding: 7px 15px;
	background: linear-gradient(180deg, #343a43, #22262c);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-in);
	color: #cfd7e0;
	font-family: inherit;
	font-size: .88rem;
	cursor: pointer;
	transition: transform .14s cubic-bezier(.2, .7, .2, 1), color .14s ease, box-shadow .14s ease;
}

.otm-mc .mc-gal-chip:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--bevel-in), 0 0 0 2px rgba(255, 255, 255, .42);
}

.otm-mc .mc-gal-chip.is-on {
	background: linear-gradient(180deg, #3a6b2c, #2a5220);
	color: #f2ffe9;
	box-shadow: var(--bevel-in), 0 0 0 2px rgba(131, 201, 90, .6);
}

.otm-mc .mc-gal-chip i {
	font-style: normal;
	margin-left: 7px;
	color: var(--mc-text-mute);
	font-size: .82em;
}

.otm-mc .mc-gal-chip.is-on i {
	color: #bfe6a6;
}

/* --------------------------------------------------------------------------
   3. 网格
   -------------------------------------------------------------------------- */
/*
 * 瀑布流：让每张照片保留自己的宽高比，而不是统统裁成方块。
 *
 * 做法是 CSS Grid 的经典技巧 —— 行高设成一个很小的固定值（8px），
 * 由 JS 依据清单里的原始宽高比算出每格该占几行（grid-row-end: span N）。
 * 相比 CSS columns 方案，这个做法在「滚到底部续加载」时不会让
 * 已经排好的照片重新洗牌，顺序始终稳定。
 */
.otm-mc .mc-gal-grid {
	/*
	 * 这四个值既是排版参数，也是 gallery.js 换算「占几行」的依据。
	 * 统一在这里定义、由脚本读取，两边就不会各写一套而走偏。
	 */
	--col-min: 208px;
	--col-gap: 14px;
	--row-h: 8px;
	--row-gap: 14px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr));
	grid-auto-rows: var(--row-h);
	gap: var(--row-gap) var(--col-gap);

	/*
	 * 这两条是修 bug 加的，缺一不可：
	 *
	 * width: 100%
	 *   实测（Playwright 真实渲染）发现网格只占 653px，而父容器有 1020px ——
	 *   宽度塌成了「内容宽度」，只剩 3 列。显式写满宽度即可恢复 4 列布局。
	 *
	 * align-items: stretch（而不是 start）
	 *   格内的 <img> 是 position:absolute（为了按原始比例裁切），已脱离文档流；
	 *   若用 align-items:start，格子会按「内容高度」收缩 —— 而内容高度为 0，
	 *   于是每个格子只剩上下两条边框的 4px，图片完全看不见。
	 *   改为 stretch 后，格子才会填满 JS 算出的 grid-row-end 区域（实测 118px）。
	 */
	width: 100%;
	align-items: stretch;
}

.otm-mc .mc-gal-item {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	/* 高度不写死：由 JS 按原始比例换算后写入 grid-row-end */
	background: var(--mc-slot);
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-in);
	overflow: hidden;
	cursor: zoom-in;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

/* --------------------------------------------------------------------------
   3b. 日期分组标题：让整页读起来像一本相册，而不是一堆散图
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-group {
	grid-column: 1 / -1;
	/* 跨 3 行 = 3×8 + 2×14 = 52px，高度写死以便用固定的行数占位 */
	grid-row-end: span 3;
	height: 52px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 16px;
	color: var(--mc-grass-hi);
	font-size: .96rem;
	font-weight: 600;
	text-shadow: var(--shadow-text);
	white-space: nowrap;
	overflow: hidden;
}

.otm-mc .mc-gal-group::after {
	content: "";
	flex: 1;
	height: 3px;
	order: 1; /* 分隔线排在日期与张数之间 */
	background-image: repeating-linear-gradient(90deg,
			var(--mc-grass-lo) 0 8px, transparent 8px 16px);
	opacity: .55;
}

.otm-mc .mc-gal-group i {
	font-style: normal;
	order: 2;
	color: var(--mc-text-mute);
	font-size: .82rem;
	font-weight: 400;
}

.otm-mc .mc-gal-item:hover,
.otm-mc .mc-gal-item:focus-visible {
	z-index: 2;
	transform: translateY(-4px);
	box-shadow: var(--bevel-in), 0 10px 24px rgba(0, 0, 0, .58), 0 0 0 2px rgba(131, 201, 90, .55);
}

/*
 * 图片绝对定位铺满格子：容器比例已由 JS 按原始宽高比设定，
 * 因此这里用 cover 不会裁掉任何内容，同时不受 2px 边框影响。
 */
.otm-mc .mc-gal-item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: pixelated;
	filter: saturate(1.04);
	transition: transform .42s cubic-bezier(.2, .7, .2, 1), filter .32s ease;
}

.otm-mc .mc-gal-item:hover img {
	transform: scale(1.08);
	filter: saturate(1.2) brightness(1.06);
}

.otm-mc .mc-gal-date {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 9px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .84));
	color: #e2e9f0;
	font-size: .72rem;
	letter-spacing: .02em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .24s ease, transform .24s ease;
}

.otm-mc .mc-gal-item:hover .mc-gal-date,
.otm-mc .mc-gal-item:focus-visible .mc-gal-date {
	opacity: 1;
	transform: none;
}

/* 加载状态占位：方块脉动 */
.otm-mc .mc-gal-item.is-loading {
	background:
		linear-gradient(90deg, #14171a 25%, #1c2026 37%, #14171a 63%);
	background-size: 400% 100%;
	animation: mcShimmer 1.4s ease infinite;
}

@keyframes mcShimmer {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

/* --------------------------------------------------------------------------
   4. 底部状态 / 加载更多
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-status {
	margin-top: 24px;
	text-align: center;
	color: var(--mc-text-mute);
	font-size: .88rem;
	min-height: 40px;
}

.otm-mc .mc-gal-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 22px;
	background: linear-gradient(180deg, #454c56, #2c3138);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn);
	color: #e2e9f0;
	font-family: inherit;
	font-size: .92rem;
	cursor: pointer;
	transition: transform .13s ease, filter .13s ease;
}

.otm-mc .mc-gal-more:hover {
	filter: brightness(1.3);
	color: #fff;
	transform: translateY(-2px);
}

.otm-mc .mc-gal-more:active {
	transform: translateY(2px);
	box-shadow: var(--bevel-btn-on);
}

/* --------------------------------------------------------------------------
   5. 灯箱
   -------------------------------------------------------------------------- */
.mc-lb {
	position: fixed;
	inset: 0;
	z-index: 999995;
	display: flex;
	padding: 3vh 3vw;
	background: rgba(5, 6, 9, .93);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s;
}

.mc-lb.is-on {
	opacity: 1;
	visibility: visible;
}

.mc-lb-shell {
	display: flex;
	flex-direction: column;
	width: min(1320px, 100%);
	height: 100%;
	margin: 0 auto;
	background: linear-gradient(180deg, var(--mc-panel-hi), var(--mc-panel));
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), 0 26px 64px rgba(0, 0, 0, .75);
	overflow: hidden;
	transform: scale(.985);
	transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}

.mc-lb.is-on .mc-lb-shell {
	transform: none;
}

.mc-lb-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(180deg, #2e343c, #1e2228);
	border-bottom: 2px solid var(--mc-border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mc-lb-title {
	flex: 1;
	min-width: 0;
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	text-shadow: var(--shadow-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-lb-title em {
	font-style: normal;
	margin-left: 9px;
	color: var(--mc-text-mute);
	font-size: .82rem;
	font-weight: 400;
}

.mc-lb-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	background: linear-gradient(180deg, #454c56, #2c3138);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn);
	color: #dfe6ee;
	font-family: inherit;
	font-size: .8rem;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.mc-lb-btn:hover {
	filter: brightness(1.28);
	color: #fff;
	transform: translateY(-1px);
}

.mc-lb-btn:active {
	transform: translateY(1px);
	box-shadow: var(--bevel-btn-on);
}

.mc-lb-btn--x {
	padding: 6px 11px;
	background: linear-gradient(180deg, #7a3230, #4e2220);
	color: #ffe9e8;
}

.mc-lb-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px),
		#08090b;
}

.mc-lb-stage img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 2px solid var(--mc-border);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .75);
	transition: opacity .22s ease;
}

.mc-lb-stage img.is-swapping {
	opacity: .35;
}

/* 大图切换时的等待方块 */
.mc-lb-spin {
	position: absolute;
	width: 26px;
	height: 26px;
	background: linear-gradient(135deg, var(--mc-grass-hi), var(--mc-grass-lo));
	box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .42), inset 2px 2px 0 rgba(255, 255, 255, .28);
	animation: mcSpin 1.2s steps(4, end) infinite;
	opacity: 0;
	transition: opacity .2s ease;
}

.mc-lb-spin.is-on {
	opacity: 1;
}

/* 左右翻页 */
.mc-lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(52, 58, 67, .92), rgba(28, 32, 38, .92));
	border: 2px solid var(--mc-border);
	box-shadow: var(--bevel-btn);
	color: #e2e9f0;
	font-size: 1.2rem;
	cursor: pointer;
	transition: filter .14s ease, transform .14s ease;
}

.mc-lb-nav:hover {
	filter: brightness(1.35);
	color: #fff;
}

.mc-lb-nav--prev {
	left: 14px;
}

.mc-lb-nav--next {
	right: 14px;
}

.mc-lb-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: linear-gradient(180deg, #22262c, #1a1d22);
	border-top: 2px solid var(--mc-border);
	color: var(--mc-text-dim);
	font-size: .86rem;
}

.mc-lb-foot .mc-lb-count {
	color: #fff;
	font-weight: 600;
	text-shadow: var(--shadow-text);
}

.mc-lb-foot .mc-lb-meta {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-lb-foot .mc-lb-orig {
	color: var(--mc-gold);
}

/* --------------------------------------------------------------------------
   6. 响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 48em) {

	.mc-lb {
		padding: 0;
	}

	.mc-lb-shell {
		width: 100%;
		border: 0;
		border-radius: 0;
	}

	.mc-lb-nav {
		width: 38px;
		height: 54px;
	}

	.otm-mc .mc-gal-grid {
		--col-min: 150px;
		--col-gap: 10px;
	}

	.otm-mc .mc-gal-group {
		font-size: .9rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mc-lb,
	.mc-lb-shell,
	.otm-mc .mc-gal-item,
	.otm-mc .mc-gal-item img {
		transition-duration: .001ms;
	}

	.otm-mc .mc-gal-item.is-loading,
	.mc-lb-spin {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   7. 内嵌模式（/gallery/?embed=1）
   --------------------------------------------------------------------------
   被「传送门」装进弹窗时使用：没有站点 Hero 头图与页脚，
   因此不需要为它们留白，同时让内容铺满弹窗宽度。
   独立整页访问时不受影响。
   -------------------------------------------------------------------------- */
body.otm-embed {
	min-height: 100vh;
	background-color: var(--mc-bedrock);
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 4px);
}

body.otm-embed .site-content,
body.otm-embed .site-content-contain {
	background: transparent;
	padding: 0;
}

body.otm-embed .wrap {
	max-width: none;
	padding: 20px 22px 30px;
}

body.otm-embed .mc-gal-head {
	margin-bottom: 14px;
	padding-bottom: 12px;
}

body.otm-embed .mc-gal-head .entry-title {
	font-size: 1.32rem;
}

@media screen and (max-width: 48em) {

	body.otm-embed .wrap {
		padding: 14px 14px 24px;
	}
}

/* ==========================================================================
   投稿面板
   --------------------------------------------------------------------------
   相册页独有的入口，所以放在 gallery.css 而不是 mc.css。
   配色沿用站点：暖灰文字、MC 绿主按钮，与筛选条同一套语言。
   ========================================================================== */
.mc-up {
	margin: 0 0 22px;
}

.mc-up-account {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mc-up-player {
	display: grid;
	gap: 1px;
	padding: 5px 10px 6px;
	border-left: 3px solid var(--mc-green-4);
	background: rgba(247, 243, 234, .86);
	color: #2e2a26;
	line-height: 1.12;
}

.mc-up-player small {
	color: #756d64;
	font-size: .625rem;
	font-weight: 700;
}

.mc-up-player strong {
	max-width: 150px;
	overflow: hidden;
	font-size: .8125rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-up-logout {
	color: inherit;
	font-size: .8125rem;
}

.mc-up-open {
	padding: 10px 20px;
	background-color: var(--mc-green-4);
	background-image: var(--mc-grad-green);
	border: 0;
	color: #fff;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}

.mc-up-open:hover {
	filter: brightness(1.08);
}

.mc-up-open[aria-expanded="true"] {
	filter: brightness(.92);
}

/* --------------------------------------------------------------------------
   面板本体
   -------------------------------------------------------------------------- */
.mc-up-panel {
	margin-top: 14px;
	padding: 20px 22px 18px;
	max-width: 560px;
	background-color: rgba(255, 246, 232, .04);
	border: 1px solid rgba(237, 229, 226, .1);
}

.mc-up-panel[hidden] {
	display: none;
}

.mc-up-field {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.mc-up-field label {
	flex: 0 0 4.5em;
	font-size: .875rem;
	letter-spacing: .06em;
	color: var(--mc-grey-2);
}

.mc-up-field input[type="password"],
.mc-up-field input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	background-color: rgba(0, 0, 0, .28);
	border: 1px solid rgba(237, 229, 226, .14);
	color: var(--mc-off-white);
	font-size: .9375rem;
}

.mc-up-field input:focus {
	outline: none;
	border-color: var(--mc-green-3);
}

/* 文件选择框样式各浏览器差异大，只做统一的最小处理 */
.mc-up-field input[type="file"] {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .875rem;
	color: var(--mc-grey-2);
}

.mc-up-field input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 8px 14px;
	background-color: rgba(255, 246, 232, .08);
	border: 1px solid rgba(237, 229, 226, .16);
	color: var(--mc-grey-1);
	font-size: .875rem;
	cursor: pointer;
}

.mc-up-hint {
	margin: 0 0 16px;
	font-size: .8125rem;
	line-height: 1.7;
	color: var(--mc-grey-3);
}

.mc-up-actions {
	display: flex;
	gap: 10px;
}

.mc-up-submit,
.mc-up-cancel {
	padding: 9px 20px;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
}

.mc-up-submit {
	background-color: var(--mc-green-4);
	background-image: var(--mc-grad-green);
	border: 0;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}

.mc-up-submit:disabled {
	opacity: .55;
	cursor: default;
	filter: none;
}

.mc-up-cancel {
	background-color: rgba(255, 246, 232, .06);
	border: 1px solid rgba(237, 229, 226, .16);
	color: var(--mc-grey-2);
}

/* --------------------------------------------------------------------------
   状态回执：成功绿、失败红，其余中性
   -------------------------------------------------------------------------- */
.mc-up-status {
	margin: 14px 0 0;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--mc-grey-2);
}

.mc-up-status.is-ok {
	color: var(--mc-green-2);
}

.mc-up-status.is-bad {
	color: #f08a80;
}

@media screen and (max-width: 47.99em) {

	.mc-up-panel {
		padding: 16px 16px 14px;
	}

	.mc-up-field {
		display: block;
	}

	.mc-up-field label {
		display: block;
		margin-bottom: 6px;
	}

	.mc-up-field input {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   删除按钮：红系，与「载入原图」「新窗口打开」这些中性操作区分开
   -------------------------------------------------------------------------- */
.mc-lb-del {
	background-color: rgba(160, 60, 50, .18);
	border: 1px solid rgba(200, 90, 80, .35);
	color: #f0a49c;
}

.mc-lb-del:hover {
	background-color: #8a3630;
	border-color: #8a3630;
	color: #fff;
}

.mc-lb-del:disabled {
	opacity: .5;
	cursor: default;
	background-color: rgba(160, 60, 50, .18);
	color: #f0a49c;
}

/* ==========================================================================
   灯箱按钮：提升优先级
   --------------------------------------------------------------------------
   症状：灯箱里的按钮一直显示成浏览器默认样式（白底黑字），
   自己写的配色一条都没生效。

   原因：父主题的 colors-dark.css 里有
       .colors-dark button, .colors-dark input[type="button"] ... { ... }
   它的优先级是 (0,1,1) = 11，而这里写的是单类选择器 (0,1,0) = 10 ——
   低一分，全盘皆输。@media 里那条也一样。

   修法：把选择器提到两个类（.mc-lb .mc-lb-btn = 20），稳过 11。
   顺带说明：这类「差一分」的失配不会报错，只是样式静默失效，
   所以遇到「明明写了却没生效」时，第一件事是去数优先级。
   ========================================================================== */
.mc-lb .mc-lb-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	background-color: rgba(255, 255, 255, .06);
	border: 1px solid rgba(237, 229, 226, .18);
	color: var(--mc-grey-1);
	font-size: .8125rem;
	cursor: pointer;
	text-decoration: none;
}

.mc-lb .mc-lb-btn:hover {
	background-color: var(--mc-green-4);
	border-color: var(--mc-green-4);
	color: #fff;
}

.mc-lb .mc-lb-btn:active {
	filter: brightness(.9);
}

/* 关闭键：红系 */
.mc-lb .mc-lb-btn--x {
	background-color: rgba(160, 60, 50, .2);
	border-color: rgba(200, 90, 80, .38);
	color: #f0a49c;
}

.mc-lb .mc-lb-btn--x:hover {
	background-color: #8a3630;
	border-color: #8a3630;
	color: #fff;
}

/* 删除键：同为红系，但比关闭键更克制，避免误点 */
.mc-lb .mc-lb-del {
	background-color: rgba(160, 60, 50, .14);
	border-color: rgba(200, 90, 80, .3);
	color: #e0908a;
}

.mc-lb .mc-lb-del:hover {
	background-color: #7d2f2a;
	border-color: #7d2f2a;
	color: #fff;
}

.mc-lb .mc-lb-del:disabled {
	opacity: .5;
	cursor: default;
	background-color: rgba(160, 60, 50, .14);
	color: #e0908a;
}

/* ==========================================================================
   灯箱左右翻页：改成箭头图标
   --------------------------------------------------------------------------
   原先按钮里放的是文本字符 ‹ ›（单书名号），
   一来看起来像标点不像箭头，二来字重与大小受字体影响、在暗底上又细又暗。

   改成内联 SVG 画的箭头：
     · 不受字体影响，任何设备上形状一致
     · 可以随按钮一起缩放，不会糊
     · 用 currentColor 上色，悬停换色只改一处
   选择器写成两个类（.mc-lb .mc-lb-nav），稳过父主题 .colors-dark button 的 11。
   ========================================================================== */
.mc-lb .mc-lb-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: rgba(19, 18, 17, .55);
	border: 1px solid rgba(237, 229, 226, .18);
	color: var(--mc-grey-1);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mc-lb .mc-lb-nav svg {
	display: block;
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.mc-lb .mc-lb-nav:hover {
	background-color: var(--mc-green-4);
	border-color: var(--mc-green-4);
	color: #fff;
}

.mc-lb .mc-lb-nav:active {
	filter: brightness(.9);
}

@media screen and (max-width: 47.99em) {

	.mc-lb .mc-lb-nav {
		width: 40px;
		height: 40px;
	}

	.mc-lb .mc-lb-nav svg {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================================
   年份筛选栏：重做配色与布局
   --------------------------------------------------------------------------
   两个问题：

   1. 配色是**第一版的残留**。
      当年在 gallery.css 里给筛选按钮写的是一套冷蓝灰渐变
      （linear-gradient(180deg,#343a43,#22262c)）加旧斜面变量 --bevel-in。
      后来在 mc.css 里按新配色重写过一遍，但 mc.css 在 gallery.css **之前**加载，
      同为两个类的选择器、后来者胜 —— 所以 mc.css 那套从来没生效过，
      页面上一直是旧的冷蓝灰。这就是「顶栏和整站不搭」的原因。

   2. 布局松散。
      按钮之间只有 8px、还各自带 -2px 的悬停位移，
      年份多了之后换行会显得零碎。

   现在统一成：暖灰底 + MC 绿选中态，直角、无旧斜面，
   并让计数与年份之间有稳定的间距。
   ========================================================================== */
.otm-mc .mc-gal-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}

.otm-mc .mc-gal-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	background-color: rgba(255, 246, 232, .05);
	background-image: none;
	border: 1px solid rgba(237, 229, 226, .12);
	box-shadow: none;
	color: var(--mc-grey-2);
	font-family: inherit;
	font-size: .875rem;
	line-height: 1.4;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.otm-mc .mc-gal-chip:hover {
	background-color: rgba(255, 246, 232, .1);
	border-color: rgba(237, 229, 226, .22);
	color: var(--mc-off-white);
	transform: none;
	box-shadow: none;
}

.otm-mc .mc-gal-chip.is-on {
	background-color: var(--mc-green-4);
	background-image: var(--mc-grad-green);
	border-color: #244f18;
	color: #fff;
	box-shadow: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
}

/* 计数：定宽右对齐，年份位数不同时也不会左右跳动 */
.otm-mc .mc-gal-chip i {
	font-style: normal;
	margin-left: 8px;
	min-width: 2.4em;
	text-align: right;
	font-size: .85em;
	color: var(--mc-grey-3);
}

.otm-mc .mc-gal-chip.is-on i {
	color: rgba(255, 255, 255, .82);
}

@media screen and (max-width: 47.99em) {

	.otm-mc .mc-gal-bar {
		gap: 6px;
		margin-bottom: 16px;
	}

	.otm-mc .mc-gal-chip {
		padding: 6px 11px;
		font-size: .8125rem;
	}

	.otm-mc .mc-gal-chip i {
		margin-left: 6px;
		min-width: 2em;
	}
}

/* --------------------------------------------------------------------------
   已选文件列表
   --------------------------------------------------------------------------
   批量上传最怕「不知道选了几张、选了哪几张」。
   列出文件名与体积，让「批量」这件事看得见。
   -------------------------------------------------------------------------- */
.mc-up-list {
	margin: 0 0 14px;
	padding: 10px 14px;
	list-style: none;
	background-color: rgba(0, 0, 0, .22);
	border: 1px solid rgba(237, 229, 226, .1);
	max-height: 168px;
	overflow-y: auto;
}

.mc-up-list[hidden] {
	display: none;
}

.mc-up-list li {
	margin: 0 0 5px;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--mc-grey-2);
	/* 文件名可能很长，别把面板撑破 */
	overflow-wrap: anywhere;
}

.mc-up-list li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   美好瞬间 —— 手帐化
   --------------------------------------------------------------------------
   要求：风格与站点统一，但**不加底页**。
   所以这里不新增任何容器、不加纸面背景 —— 只把这个页面自己的零件
   （标题、年份标签、相片格）换成手帐的语言，
   参数与首页散落照片、充电墙的相片卡保持一致：
       米色相片纸 · 上沿一道半透明绿胶带 · 整体轻微歪斜 · 悬停摆正并抬起

   相片格的排版参数（--col-min / --row-h 等）仍然由 gallery.js 读取用来算高度，
   所以那些变量一个都不能动 —— 这里只改观感，不碰尺寸。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 标题：荧光笔划出的一道绿
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-head {
	position: relative;
	z-index: 0;
}

.otm-mc .mc-gal-head .entry-title,
.otm-mc .mc-gallery-page > .entry-header .entry-title {
	position: relative;
	display: inline-block;
	z-index: 1;
}

.otm-mc .mc-gallery-page > .entry-header .entry-title::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 3px;
	height: 12px;
	background: linear-gradient(90deg, rgba(108, 195, 73, .46), rgba(134, 213, 98, .3));
	box-shadow: 0 4px 10px -5px rgba(108, 195, 73, .7);
	transform: rotate(-.7deg);
	pointer-events: none;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   2 年份标签：做成一张张小纸条
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-chip {
	background: linear-gradient(180deg, #fbf8f1 0%, #f1ebdd 100%) !important;
	border: 1px solid rgba(0, 0, 0, .34) !important;
	border-radius: 2px !important;
	box-shadow:
		0 2px 0 rgba(0, 0, 0, .35),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;
	color: #2e2a26 !important;
	transform: rotate(-.6deg);
	transition: transform .18s ease, box-shadow .18s ease;
}

.otm-mc .mc-gal-chip:nth-child(2n) { transform: rotate(.5deg); }
.otm-mc .mc-gal-chip:nth-child(3n) { transform: rotate(-.2deg); }

.otm-mc .mc-gal-chip:hover {
	transform: rotate(0deg) translateY(-2px);
	box-shadow:
		0 4px 0 rgba(0, 0, 0, .38),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

/* 选中的那枚：荧光笔划过的样子 */
.otm-mc .mc-gal-chip.is-on {
	background: linear-gradient(180deg, rgba(134, 213, 98, .95), rgba(108, 195, 73, .95)) !important;
	border-color: rgba(42, 100, 28, .8) !important;
	color: #1d2b14 !important;
	font-weight: 700;
	transform: rotate(0deg);
	box-shadow:
		0 3px 0 rgba(42, 100, 28, .7),
		0 1px 0 rgba(255, 255, 255, .5) inset !important;
}

/* --------------------------------------------------------------------------
   3 相片格：冲印相片
   --------------------------------------------------------------------------
   原来是深色卡片 + 斜面边框，像一块块砖。改成相片纸：
   四周留白边、下面留一条写字的余地、顶上压一道胶带。
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item {
	/* 上下左右留白；下面留得多一点，给日期腾一条写字的余地 */
	padding: 7px 7px 26px;

	background-color: #f7f3ea;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .026) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fbf8f1 0%, #f4efe4 62%, #ece5d6 100%);
	border: none;
	border-radius: 1px;                 /* 冲印相片是直角 */

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 12px 24px -14px rgba(0, 0, 0, .9),
		0 2px 5px rgba(0, 0, 0, .4);

	transform: rotate(var(--rot, 0deg));
	transition: transform .22s ease, box-shadow .22s ease;
}

/* 三张一组换一个角度 —— 与首页散落照片同一套做法 */
.otm-mc .mc-gal-item:nth-child(3n+1) { --rot: -.8deg; }
.otm-mc .mc-gal-item:nth-child(3n+2) { --rot: .65deg; }
.otm-mc .mc-gal-item:nth-child(3n)   { --rot: -.3deg; }

/* 胶带：压在相片上沿 */
.otm-mc .mc-gal-item::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 62px;
	height: 20px;
	transform: translateX(-50%) rotate(-2.4deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		rgba(160, 224, 129, .34) 8px 16px
	);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
	pointer-events: none;
	z-index: 3;
}

.otm-mc .mc-gal-item:nth-child(3n+2)::before {
	transform: translateX(-50%) rotate(2.4deg);
	width: 52px;
}

.otm-mc .mc-gal-item:nth-child(3n)::before {
	transform: translateX(-50%) rotate(-1deg) translateX(9px);
	width: 70px;
}

/* 照片本身：铺满留白之内的那块 */
.otm-mc .mc-gal-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

/* 拿起来：摆正、抬起、影子拉长 */
.otm-mc .mc-gal-item:hover,
.otm-mc .mc-gal-item:focus-visible {
	z-index: 2;
	transform: rotate(0deg) translateY(-5px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 22px 38px -18px rgba(0, 0, 0, .95),
		0 5px 12px rgba(0, 0, 0, .45);
}

.otm-mc .mc-gal-item:hover img,
.otm-mc .mc-gal-item:focus-visible img {
	transform: none;
}

/* --------------------------------------------------------------------------
   4 日期：相片下面那条手写的说明
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-date {
	color: #7d7368;
	font-style: italic;
	letter-spacing: .05em;
	background: none;
	text-shadow: none;
}

.otm-mc .mc-gal-item:hover .mc-gal-date,
.otm-mc .mc-gal-item:focus-visible .mc-gal-date {
	color: #2e2a26;
}

/* --------------------------------------------------------------------------
   5 「加载更多」做成一张纸签
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-more {
	background: linear-gradient(180deg, #fbf8f1, #efe8d9) !important;
	border: 1px solid rgba(0, 0, 0, .34) !important;
	border-radius: 2px !important;
	color: #2e2a26 !important;
	box-shadow:
		0 3px 0 rgba(0, 0, 0, .4),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

.otm-mc .mc-gal-more:hover {
	transform: translateY(-2px);
	box-shadow:
		0 5px 0 rgba(0, 0, 0, .42),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

@media (prefers-reduced-motion: reduce) {

	.otm-mc .mc-gal-item,
	.otm-mc .mc-gal-item:hover,
	.otm-mc .mc-gal-chip,
	.otm-mc .mc-gal-chip:hover { transition: none; }
}

/* ==========================================================================
   美好瞬间 —— 手帐化（第二版：改结构，不只是加胶带）
   --------------------------------------------------------------------------
   第一版只做了表面：加胶带、轻微歪斜、换米色。
   反馈很准 —— 「等于只加了胶带，风格和结构都没改」。
   问题在于骨架还是相册应用那一套：
       首屏大图 → 标题行 + 年份条 → 按日期分组的**均匀网格**
   均匀正是它不像手帐的原因：手帐里没有两张一样大的照片，
   也不会用「横线 + 13 张」这种方式分节。

   这一版动三处结构：
     ① 照片不再一样大      每七张挑一张占两格宽（改的是 gallery.js 的跨度计算）
     ② 分节改成贴纸标签    不再是通栏横线加计数器，而是一张压着胶带的日期贴纸
     ③ 加大歪斜的层次      大张照片歪得少、小张歪得多，像真的一张张按上去的

   （首屏那张通栏大图是主题自带的 custom-header，不是本页的内容元素，
     把它改成相片卡会牵连其它页面，所以没动它。）
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① 放大张：少歪一点，免得大块面歪起来像排版出了错
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item[data-wide="1"] {
	--rot: -.35deg;
	padding: 9px 9px 30px;   /* 大张的相纸边也宽一点 */
}

.otm-mc .mc-gal-item[data-wide="1"]::before {
	width: 96px;
	height: 24px;
	top: -11px;
}

/* 小张歪得多一些 —— 大小的差别也体现在姿态上 */
.otm-mc .mc-gal-item:not([data-wide="1"]):nth-child(4n+1) { --rot: -1.15deg; }
.otm-mc .mc-gal-item:not([data-wide="1"]):nth-child(4n+2) { --rot: .95deg; }
.otm-mc .mc-gal-item:not([data-wide="1"]):nth-child(4n+3) { --rot: -.55deg; }
.otm-mc .mc-gal-item:not([data-wide="1"]):nth-child(4n)   { --rot: .75deg; }

/* --------------------------------------------------------------------------
   ② 分节：一张压着胶带的日期贴纸
   --------------------------------------------------------------------------
   原来是通栏细线 + 右侧「13 张」计数，那是相册应用的分节样式。
   手帐的分节是一张手写日期的小纸条贴上去。
   计数保留（有用），但缩成贴纸角落的一个小字。
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-group {
	position: relative;
	display: inline-block;
	width: auto;

	/*
	 * 它是瀑布流里的一格，而网格项默认 justify-self: stretch ——
	 * 不加这一句，贴纸会被拉成整栏宽（实测 1023px），又变成一条横带。
	 */
	justify-self: start;

	margin: 30px 0 20px;
	padding: 5px 16px 6px;

	background: linear-gradient(180deg, #fbf8f1 0%, #f2ecdf 100%);
	border: 1px solid rgba(0, 0, 0, .34);
	border-radius: 2px;
	box-shadow:
		0 3px 0 rgba(0, 0, 0, .4),
		0 1px 0 rgba(255, 255, 255, .9) inset;

	transform: rotate(-.9deg);
	color: #2e2a26;
}

/* 通栏那条细线去掉 —— 它才是「表格感」的来源 */
.otm-mc .mc-gal-group::after {
	display: none;
}

/* 贴纸左上角压一道胶带 */
.otm-mc .mc-gal-group::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 16px;
	width: 62px;
	height: 19px;
	transform: rotate(-3deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		rgba(160, 224, 129, .34) 8px 16px
	);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
	pointer-events: none;
}

/* 日期：手写感，字距放开一点 */
.otm-mc .mc-gal-group > span {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #2e2a26;
}

/* 张数：缩成贴纸右下角的一个小注 */
.otm-mc .mc-gal-group > i {
	display: inline-block;
	margin-left: 10px;
	padding: 0 6px;
	font-size: 11px;
	font-style: italic;
	letter-spacing: .04em;
	color: #7d7368;
	background: rgba(120, 100, 70, .1);
	border-radius: 2px;
}

/* 奇偶错开，免得每张贴纸都在同一个位置 */
.otm-mc .mc-gal-group:nth-of-type(2n) { transform: rotate(.7deg); }
.otm-mc .mc-gal-group:nth-of-type(2n)::before { left: auto; right: 18px; transform: rotate(2.6deg); }

/* ==========================================================================
   美好瞬间 —— 页头（标题 + 年份筛选 + 发布按钮）手帐化
   --------------------------------------------------------------------------
   上一轮我把「顶栏」理解成了站点导航栏，去改了那一排菜单 —— 理解错了，
   已经撤销。要改的是**这一页页头的那一条**：

       美好瞬间    [全部 520][2025 23][2024 56][2023 172][2022 269]
       来自玩家们的 520 张截图 · 点击任意一张放大查看
                   [+ 发布作品]

   现状的问题：
       · 年份筛选虽然换成了米色，但还是「按钮」——四个角、硬边、悬停变亮
       · 「+ 发布作品」完全是游戏里的绿色按钮，与纸上这套语言无关
       · 标题的荧光笔太窄，压不住这么大的字
   改成：筛选做成**贴上去的小纸签**，选中那张用荧光笔划一道；
        发布按钮做成**一张压着胶带的纸条**；标题的荧光笔加宽加长。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 标题：荧光笔加宽，现在的太窄，压不住这么大的字
   -------------------------------------------------------------------------- */
.otm-mc .mc-gallery-page > .entry-header .entry-title::after {
	height: 16px;
	bottom: 1px;
	left: 2px;
	right: 6px;
	background: linear-gradient(90deg, rgba(108, 195, 73, .52), rgba(134, 213, 98, .34) 78%, rgba(134, 213, 98, .12));
}

/* 标题本身压在荧光笔之上 */
.otm-mc .mc-gallery-page > .entry-header .entry-title {
	text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   2 年份筛选：贴上去的小纸签
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-bar {
	gap: 10px;
	flex-wrap: wrap;
}

.otm-mc .mc-gal-chip {
	padding: 6px 12px;

	background-color: #f7f3ea !important;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fbf8f1 0%, #f0e9db 100%) !important;

	border: 1px solid rgba(0, 0, 0, .3) !important;
	border-radius: 1px !important;          /* 纸签是直角 */

	color: #2e2a26 !important;
	font-weight: 700;
	letter-spacing: .05em;

	box-shadow:
		0 2px 0 rgba(0, 0, 0, .35),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;

	transition: transform .18s ease, box-shadow .18s ease;
}

/* 三张一组换角度 */
.otm-mc .mc-gal-chip:nth-child(3n+1) { transform: rotate(-.9deg); }
.otm-mc .mc-gal-chip:nth-child(3n+2) { transform: rotate(.7deg); }
.otm-mc .mc-gal-chip:nth-child(3n)   { transform: rotate(-.3deg); }

.otm-mc .mc-gal-chip:hover {
	transform: rotate(0deg) translateY(-2px);
	box-shadow:
		0 4px 0 rgba(0, 0, 0, .38),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

/* 选中那张：荧光笔划一道，而不是把整块染绿 */
.otm-mc .mc-gal-chip.is-on {
	position: relative;
	background-color: #f7f3ea !important;
	background-image: linear-gradient(180deg, #fbf8f1 0%, #f0e9db 100%) !important;
	border-color: rgba(0, 0, 0, .34) !important;
	color: #2e2a26 !important;
	transform: rotate(0deg);
	box-shadow:
		0 2px 0 rgba(0, 0, 0, .35),
		0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

.otm-mc .mc-gal-chip.is-on::after {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	bottom: 1px;
	height: 10px;
	background: linear-gradient(90deg, rgba(108, 195, 73, .6), rgba(134, 213, 98, .42));
	transform: rotate(-.7deg);
	pointer-events: none;
	z-index: -1;
}

/* 纸签要能盖住荧光笔，所以自己起一层 */
.otm-mc .mc-gal-chip { position: relative; z-index: 1; }

/* 年份后面那个数字，做成手写的小注 */
.otm-mc .mc-gal-chip i {
	color: #7d7368 !important;
	font-style: italic;
	font-weight: 400;
}

.otm-mc .mc-gal-chip.is-on i {
	color: #4a6b38 !important;
}

/* --------------------------------------------------------------------------
   3 「+ 发布作品」：一张压着胶带的纸条
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-open {
	position: relative;

	padding: 9px 22px;

	background-color: #f7f3ea !important;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fbf8f1 0%, #f0e9db 100%) !important;

	border: 1px solid rgba(0, 0, 0, .32) !important;
	border-radius: 1px;

	color: #2e2a26 !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-shadow: none !important;

	box-shadow:
		0 3px 0 rgba(0, 0, 0, .4),
		0 1px 0 rgba(255, 255, 255, .9) inset;

	transform: rotate(-.6deg);
	transition: transform .18s ease, box-shadow .18s ease;
}

/* 上沿压一道胶带 */
.otm-mc .mc-up-open::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 56px;
	height: 19px;
	transform: translateX(-50%) rotate(-2.6deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		rgba(160, 224, 129, .34) 8px 16px
	);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
	pointer-events: none;
}

.otm-mc .mc-up-open:hover {
	filter: none;
	transform: rotate(0deg) translateY(-3px);
	box-shadow:
		0 5px 0 rgba(0, 0, 0, .42),
		0 1px 0 rgba(255, 255, 255, .9) inset;
}

.otm-mc .mc-up-open[aria-expanded="true"] {
	filter: none;
	transform: rotate(0deg) translateY(1px);
	box-shadow:
		0 1px 0 rgba(0, 0, 0, .4),
		0 1px 0 rgba(255, 255, 255, .9) inset;
}

.otm-mc .mc-up-logout {
	color: #625a50;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(98, 90, 80, .45);
	text-underline-offset: 3px;
}

.otm-mc .mc-up-logout:hover {
	color: #9a3e32;
}

@media screen and (max-width: 47.99em) {
	.mc-up-account {
		justify-content: flex-start;
	}

	.mc-up-player {
		order: -1;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   4 副标题：那行说明字用纸上的墨色
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-sub {
	color: var(--ink-mute);
	letter-spacing: .04em;
}

.otm-mc .mc-gal-sub b {
	color: var(--mc-green-2);
}

.otm-mc .mc-gal-hint {
	color: var(--ink-mute);
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {

	.otm-mc .mc-gal-chip,
	.otm-mc .mc-gal-chip:hover,
	.otm-mc .mc-up-open,
	.otm-mc .mc-up-open:hover { transition: none; }
}

/* ==========================================================================
   美好瞬间 —— 去掉缩略图上的胶带与日期
   --------------------------------------------------------------------------
   反馈：把照片缩略图上的胶带和日期去掉。

   注意范围是**缩略图上**这两样 —— 分节那张写着日期的纸条保留，
   它管的是「这一组是哪天拍的」，和每张图上那条小字是两回事。

   日期是 gallery.js 建进每个格子的（.mc-gal-date），这里用 CSS 藏起来，
   不动脚本 —— 想恢复删掉这一段即可。
   ========================================================================== */

/* ① 去掉上沿的胶带 */
.otm-mc .mc-gal-item::before,
.otm-mc .mc-gal-item:nth-child(3n+2)::before,
.otm-mc .mc-gal-item:nth-child(3n)::before {
	content: none;
	display: none;
}

/* ② 藏掉每张图下面的日期 */
.otm-mc .mc-gal-item .mc-gal-date,
.otm-mc .mc-gal-item:hover .mc-gal-date,
.otm-mc .mc-gal-item:focus-visible .mc-gal-date {
	display: none;
}

/*
 * ③ 把原来留给日期的那条下边距收回来。
 * 相纸的四周留白恢复等宽 —— 日期没了还留着一条空边，
 * 看着就像少写了什么。
 */
.otm-mc .mc-gal-item,
.otm-mc .mc-gal-item[data-wide="1"] {
	padding: 7px;
}

/* 大张的相纸边稍宽一点，保持大小张的层次 */
.otm-mc .mc-gal-item[data-wide="1"] {
	padding: 9px;
}

/* ==========================================================================
   美好瞬间 —— 版面重排
   --------------------------------------------------------------------------
   反馈：页面布局和协调性也要改。

   看到两个具体问题：

   ① 右边一大片空
      日期分组标题原来是 grid-column: 1 / -1 —— **占满整行**。
      于是每组都必须另起一条带，而一组常常只有 1~2 张照片，
      这条带剩下的列就全空着，下一页的分组还接不上来。

   ② 页头中间一大块黑
      标题在左、筛选与按钮挤在右，中间断开，两边不相干。

   改法：
      分组标题  从「整行」改成「一栏的小标签」，并让网格 dense 回填 ——
               照片于是能连续铺满，日期标签像手帐里随手贴的一张注记
      页头      排成「标题左 / 发布按钮右 / 筛选条整行在下」——
               中间那块空自然就没了
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① 网格：允许回填空洞
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-grid {
	grid-auto-flow: row dense;
}

/* 分组标签：不再占满整行，缩成一栏的小注记 */
.otm-mc .mc-gal-group {
	grid-column: auto;
	justify-self: stretch;

	/* 让出一点上下位置，贴纸不要顶到上一行的照片 */
	margin: 16px 0 8px;
	align-self: start;
}

/* --------------------------------------------------------------------------
   ② 页头：标题左 / 发布按钮右 / 筛选条整行在下
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .mc-gallery-page {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 24px;
		align-items: start;
	}

	/* 第一行：标题（含副标题）在左 */
	.otm-mc .mc-gallery-page > .mc-gal-head {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	/* 第一行右侧：发布按钮 */
	.otm-mc .mc-gallery-page > .mc-up {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		margin: 0;
	}

	/* 第二行：筛选条整行铺开 */
	.otm-mc .mc-gallery-page > .mc-gal-bar {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 18px 0 6px;
	}

	/* 第三行起：照片网格 */
	.otm-mc .mc-gallery-page > .mc-gal-grid,
	.otm-mc .mc-gallery-page > .mc-gal-status {
		grid-column: 1 / -1;
	}
}

/* 荧光笔那条杠跟着标题一起缩进，别顶到右边 */
.otm-mc .mc-gallery-page > .mc-gal-head .entry-title::after {
	right: auto;
	width: calc(100% - 6px);
}

/* --------------------------------------------------------------------------
   ③ 页头对齐：标题靠纸边，副标题不许折行
   --------------------------------------------------------------------------
   上一版把页头排成两列之后，标题在左栏里仍然是居中的
   （父主题 `.entry-header { text-align: center }` 还在），
   于是「标题居中 / 按钮贴右」看着像两块各自为政的东西；
   副标题也被挤到了第二行。

   手帐的一页，标题是写在纸边上的 —— 所以靠左对齐，副标题压成一行。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .mc-gallery-page > .mc-gal-head {
		text-align: left;
	}

	.otm-mc .mc-gallery-page > .mc-gal-head .entry-title,
	.otm-mc .mc-gallery-page > .mc-gal-head .entry-title a {
		text-align: left;
		margin-left: 0;
	}

	.otm-mc .mc-gallery-page > .mc-gal-head .mc-gal-sub {
		white-space: nowrap;     /* 「点击任意一张放大查看」被挤到第二行很难看 */
	}

	/* 按钮与标题同一条基线，看起来是一行里的两件东西 */
	.otm-mc .mc-gallery-page > .mc-up {
		align-self: start;
		margin-top: 6px;
	}
}

/* --------------------------------------------------------------------------
   ④ 标题荧光笔只包住文字
   --------------------------------------------------------------------------
   标题被父主题设成了 block，宽度等于整栏 ——
   于是 ::after 那道荧光笔（width: 100%）跟着拉成一条长杠，
   一直拖到副标题下面，看着像段落的分隔线而不是高亮。
   让标题回到 inline-block，荧光笔自然就只包住文字。
   -------------------------------------------------------------------------- */
.otm-mc .mc-gallery-page > .mc-gal-head .entry-title,
.otm-mc .mc-gallery-page > .mc-gal-head .entry-title a {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

.otm-mc .mc-gallery-page > .mc-gal-head .entry-title::after {
	left: 3px;
	right: auto;
	width: calc(100% - 6px);
}

/* ==========================================================================
   美好瞬间 —— 恢复日期分组 + 白框相片
   --------------------------------------------------------------------------
   反馈两条：

   ① 「现在的布局都分不清日期了」
      是我上一版改坏的 —— 为了让右边那片空消失，我把分组标题从
      「整行」改成「一栏的小标签」，又给网格加了 grid-auto-flow: dense。
      结果各组的照片被回填打散、互相穿插，日期标签孤零零贴在中间，
      根本看不出哪几张属于哪一天。
      **信息清楚比填满更重要** —— 所以改回整行分组，恢复那条分隔线。

   ② 「在每个相片都加上白框」
      原来相纸边是米色（#f7f3ea，与首页散落照片同色）。
      改成白框：真正的冲印相片是白边，压在深色纸上对比也更利落。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① 恢复整行分组
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-grid {
	/* 取消回填 —— 它会把各组照片打散 */
	grid-auto-flow: row;
}

.otm-mc .mc-gal-group {
	/* 回到「占满整行」：每组从新的一条带开始，日期才分得清 */
	grid-column: 1 / -1;
	justify-self: stretch;

	display: flex;
	align-items: center;
	gap: 14px;

	margin: 22px 0 4px;
	padding: 5px 14px 6px;

	/* 日期纸条保留，但让它横过来当分组头 */
	width: auto;
	max-width: 100%;
}

/* 恢复那条分隔线 —— 它才是「这一组到这里为止」的界线 */
.otm-mc .mc-gal-group::after {
	content: "";
	display: block;
	flex: 1;
	height: 2px;
	order: 1;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		transparent 8px 16px
	);
	opacity: .7;
}

.otm-mc .mc-gal-group > i {
	order: 2;
}

/* --------------------------------------------------------------------------
   ② 白框相片
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item,
.otm-mc .mc-gal-item[data-wide="1"] {
	/* 冲印相片的白边：四周等宽，比原来厚一点才看得出是相框 */
	padding: 9px;

	background-color: #ffffff;
	background-image: linear-gradient(180deg, #ffffff 0%, #f7f5f1 100%);

	border: 1px solid rgba(0, 0, 0, .28);

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .95) inset,
		0 12px 24px -14px rgba(0, 0, 0, .95),
		0 2px 6px rgba(0, 0, 0, .45);
}

.otm-mc .mc-gal-item[data-wide="1"] {
	padding: 11px;
}

/* 照片本身压在白框里，加一道极细的影，像贴在卡纸上 */
.otm-mc .mc-gal-item img {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .35);
}

/* 悬停时白框也跟着亮一点 */
.otm-mc .mc-gal-item:hover,
.otm-mc .mc-gal-item:focus-visible {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .95) inset,
		0 22px 38px -18px rgba(0, 0, 0, 1),
		0 5px 12px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   美好瞬间 —— 分组标签收窄 + 拍立得白框
   --------------------------------------------------------------------------
   反馈两条：

   ① 「这个长白条没必要这么长」
      上一版把分组标签设成 display:flex + justify-self:stretch，
      它就被拉成了整行宽的一条白带，右边空着一大截，很占地方。
      改回只包住文字，那条通栏的绿色虚线也一并去掉 ——
      日期纸条自己站在那组照片上方，分组关系照样清楚。

   ② 「白框改粗一点有拍立得的感觉」
      拍立得的特征不是四周等宽，而是**下面明显更宽**：
      上面和左右约一个指甲宽，底下留出一大片白，原本是给人写字的地方。
      所以我们把内边距改成 12 / 12 / 34，底部独厚。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① 分组标签：只包住文字
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-group {
	justify-self: start;      /* 关键：不要被拉满整行 */
	display: inline-flex;
	width: auto;
	max-width: 100%;

	margin: 26px 0 8px;
	padding: 5px 14px 6px;
}

/* 通栏虚线去掉 */
.otm-mc .mc-gal-group::after {
	content: none;
	display: none;
}

/* 张数紧跟在日期后面 */
.otm-mc .mc-gal-group > i {
	margin-left: 8px;
}

/* --------------------------------------------------------------------------
   ② 拍立得白框
   --------------------------------------------------------------------------
   上下左右不等宽：底部厚，是拍立得的标志。
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item,
.otm-mc .mc-gal-item[data-wide="1"] {
	padding: 12px 12px 34px;   /* 上 / 左右 / 下 —— 底部独厚 */

	background-color: #ffffff;
	background-image: linear-gradient(180deg, #ffffff 0%, #f8f6f2 100%);

	border: 1px solid rgba(0, 0, 0, .26);

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .95) inset,
		0 16px 30px -16px rgba(0, 0, 0, .95),
		0 3px 8px rgba(0, 0, 0, .45);
}

/* 大张的边更宽一点，保持大小张的层次 */
.otm-mc .mc-gal-item[data-wide="1"] {
	padding: 15px 15px 44px;
}

/* 照片压在白框里，加一道细影 */
.otm-mc .mc-gal-item img {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .3);
}

.otm-mc .mc-gal-item:hover,
.otm-mc .mc-gal-item:focus-visible {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .95) inset,
		0 26px 44px -20px rgba(0, 0, 0, 1),
		0 6px 14px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   美好瞬间 —— 切年份时逐张入场
   --------------------------------------------------------------------------
   原来切换年份是「啪」地一整片换掉：网格先清空、再一次性重建，
   快得看不出发生过什么，也分不清哪些是新出来的。

   gallery.js 在建每张时写了一个递增的 --in-delay（每张 45ms、整批封顶 700ms），
   这里用它做错峰入场：从下方 14px 处浮上来、稍微缩小并淡入。

   关键帧里带上 rotate(var(--rot)) —— 照片本身是歪着的，
   如果关键帧只写 transform: translateY 不带旋转，入场那一下会被掰正，
   结束再歪回去，看着像抖了一下。
   ========================================================================== */
@keyframes mcGalIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.96) rotate(var(--rot, 0deg));
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(var(--rot, 0deg));
	}
}

.otm-mc .mc-gal-item.is-in {
	/* backwards：动画开始前先保持 from 的状态，否则延迟期间会先亮一下再重播 */
	animation: mcGalIn .46s cubic-bezier(.2, .7, .2, 1) backwards;
	animation-delay: var(--in-delay, 0ms);
}

/* 日期纸条也跟着浮一下，但比第一张早，好让分组先立住 */
.otm-mc .mc-gal-group {
	animation: mcGalIn .4s cubic-bezier(.2, .7, .2, 1) backwards;
	animation-delay: var(--in-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {

	.otm-mc .mc-gal-item.is-in,
	.otm-mc .mc-gal-group {
		animation: none;
	}
}

/* ==========================================================================
   美好瞬间 —— 发布作品面板：改成浮层 + 手帐化
   --------------------------------------------------------------------------
   反馈两条：

   ① 「点出来不要影响年份按钮的布局」
      面板原来是文档流里的元素（margin-top: 14px），一展开就把
      下面的年份按钮整排往下推。改成绝对定位的浮层：挂在按钮下面、
      不占布局，年份按钮一动不动。

   ② 「发布作品的 ui 也请用手帐风格重做」
      原来是一块半透明深色面板 + 绿色按钮，和手帐纸面完全不搭。
      改成：一张压在纸上的便签（米色纸 + 上沿胶带），
      输入框做成纸上画的横线格，按钮做成纸签。
   ========================================================================== */

.otm-mc .mc-up {
	position: relative;   /* 面板的定位基准 */
	margin: 0;
}

/* --------------------------------------------------------------------------
   浮层本体
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 50;

	/* 宽度固定，不随按钮走 —— 它是一张便签，不是按钮的附属 */
	width: 460px;
	max-width: min(460px, 92vw);
	max-height: min(70vh, 620px);
	overflow: auto;

	margin: 0;
	padding: 22px 24px 20px;

	/* 米色便签纸，与相片卡同一个底色 */
	background-color: #f7f3ea;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .028) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fbf8f1 0%, #f1ebdd 100%);

	border: 1px solid rgba(0, 0, 0, .34);
	border-radius: 2px;

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 26px 50px -20px rgba(0, 0, 0, 1),
		0 6px 16px rgba(0, 0, 0, .5);

	/* 便签是贴上去的，歪一点 */
	transform: rotate(-.5deg);

	text-align: left;
	color: #2e2a26;
}

/* 上沿压一道胶带 */
.otm-mc .mc-up-panel::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: 92px;
	height: 22px;
	transform: translateX(-50%) rotate(-2.2deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 9px,
		rgba(160, 224, 129, .34) 9px 18px
	);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   字段：标签 + 纸上画的横线格
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-field {
	display: block;
	margin-bottom: 16px;
}

.otm-mc .mc-up-field label {
	display: block;
	margin-bottom: 6px;

	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #6b6154;
}

.otm-mc .mc-up-field input[type="password"],
.otm-mc .mc-up-field input[type="text"] {
	width: 100%;
	box-sizing: border-box;

	padding: 8px 10px;

	background-color: #fff;
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0 25px,
		rgba(120, 100, 70, .14) 25px 26px
	);
	background-position: 0 6px;

	border: 1px solid rgba(0, 0, 0, .22);
	border-radius: 1px;

	color: #2e2a26;
	font-size: 15px;

	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.otm-mc .mc-up-field input[type="password"]:focus,
.otm-mc .mc-up-field input[type="text"]:focus {
	outline: none;
	border-color: rgba(108, 195, 73, .9);
	box-shadow: 0 0 0 3px rgba(108, 195, 73, .22);
}

/* 文件选择：做成一张纸签 */
.otm-mc .mc-up-field input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;

	background-color: #fbf8f1;
	border: 1px solid rgba(0, 0, 0, .24);
	border-radius: 1px;

	color: #6b6154;
	font-size: 13px;
}

.otm-mc .mc-up-field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;

	background-color: #f0e9db;
	background-image: linear-gradient(180deg, #fbf8f1 0%, #ece4d4 100%);
	border: 1px solid rgba(0, 0, 0, .28);
	border-radius: 1px;

	color: #2e2a26;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;

	box-shadow: 0 2px 0 rgba(0, 0, 0, .32);
}

.otm-mc .mc-up-field input[type="file"]::file-selector-button:hover {
	box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   说明文字：像用铅笔写在便签角上的小字
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-hint {
	margin: 0 0 16px;
	padding-top: 10px;

	font-size: 12px;
	font-style: italic;
	line-height: 1.7;
	color: #7d7368;

	border-top: 1px dashed rgba(0, 0, 0, .16);
}

/* --------------------------------------------------------------------------
   动作按钮：两张纸签
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-actions {
	display: flex;
	gap: 12px;
}

.otm-mc .mc-up-submit,
.otm-mc .mc-up-cancel {
	padding: 8px 22px;

	background-image: linear-gradient(180deg, #fbf8f1 0%, #ece4d4 100%);
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1px;

	color: #2e2a26;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	cursor: pointer;

	box-shadow: 0 3px 0 rgba(0, 0, 0, .38);
	transition: transform .16s ease, box-shadow .16s ease;
}

.otm-mc .mc-up-submit {
	background-color: #f7f3ea;
	background-image: linear-gradient(180deg, rgba(134, 213, 98, .95), rgba(108, 195, 73, .95));
	border-color: rgba(42, 100, 28, .8);
	color: #1d2b14;
}

.otm-mc .mc-up-submit:hover,
.otm-mc .mc-up-cancel:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(0, 0, 0, .4);
}

.otm-mc .mc-up-submit:disabled {
	opacity: .55;
	transform: none;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}

/* 状态一行 */
.otm-mc .mc-up-status {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6b6154;
}

.otm-mc .mc-up-status.is-ok { color: #2f6b1d; }
.otm-mc .mc-up-status.is-bad { color: #a4392c; }

/* 已选文件列表 */
.otm-mc .mc-up-list li {
	color: #6b6154;
	border-color: rgba(0, 0, 0, .12);
}

/* --------------------------------------------------------------------------
   窄屏：回到文档流
   --------------------------------------------------------------------------
   手机上浮层会盖住整屏、也没地方收，不如照旧推下去。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .mc-up {
		position: static;
	}

	.otm-mc .mc-up-panel {
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		margin-top: 14px;
		transform: none;
	}
}

/* ==========================================================================
   美好瞬间 —— 发布面板的按钮：真正做成手帐纸签
   --------------------------------------------------------------------------
   反馈：按钮还没手帐化。

   上一版只做了「换底色 + 描个边 + 加投影」，那和原来的按钮
   其实是同一类东西，只是颜色不同 —— 认不出来是当然的。

   手帐里的东西靠三样认出来：**胶带 · 纸纹 · 歪着贴**。
   这版三样都补上：
       · 纸签本身带极淡的横向纸纹，不是一块纯色
       · 上沿压一道半透明绿胶带（胶带是这个站最稳的手帐记号）
       · 整张微微歪着，悬停时摆正抬起 —— 和相片卡、导航置物同一套动作
   ========================================================================== */

.otm-mc .mc-up-submit,
.otm-mc .mc-up-cancel {
	position: relative;

	padding: 10px 26px;
	margin-top: 6px;          /* 给上沿的胶带留出位置 */

	background-color: #f7f3ea;
	/* 纸纹：一条 1px 的横纹，几乎看不见但让「纸」站得住 */
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .05) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%);
	background-blend-mode: multiply, normal;

	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 2px;

	color: #2e2a26;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7);

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 3px 0 rgba(0, 0, 0, .38),
		0 8px 16px -8px rgba(0, 0, 0, .7);

	transform: rotate(var(--btn-rot, 0deg));
	transition: transform .16s ease, box-shadow .16s ease;
}

.otm-mc .mc-up-submit  { --btn-rot: -.8deg; }
.otm-mc .mc-up-cancel  { --btn-rot: .7deg; }

/* 上沿那道胶带 */
.otm-mc .mc-up-submit::before,
.otm-mc .mc-up-cancel::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 46px;
	height: 16px;
	transform: translateX(-50%) rotate(-2.5deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .52) 0 8px,
		rgba(160, 224, 129, .36) 8px 16px
	);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
	pointer-events: none;
}

/* 上传那张：胶带更宽一点，和取消区分开 */
.otm-mc .mc-up-submit::before {
	width: 62px;
}

/* 拿起来 */
.otm-mc .mc-up-submit:hover,
.otm-mc .mc-up-cancel:hover {
	transform: rotate(0deg) translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 5px 0 rgba(0, 0, 0, .4),
		0 12px 22px -10px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------------------------------
   文件选择按钮：同样三样都补上
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-field input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 8px 18px;

	background-color: #f7f3ea;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .05) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%);
	background-blend-mode: multiply, normal;

	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 2px;

	color: #2e2a26;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7);

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 3px 0 rgba(0, 0, 0, .36);

	cursor: pointer;
	transform: rotate(-.6deg);
	transition: transform .16s ease, box-shadow .16s ease;
}

.otm-mc .mc-up-field input[type="file"]::file-selector-button:hover {
	transform: rotate(0deg) translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 4px 0 rgba(0, 0, 0, .38);
}

/* 文件框本身也当成一张纸 */
.otm-mc .mc-up-field input[type="file"] {
	display: flex;
	align-items: center;
	padding: 7px 10px;

	background-color: #fdfbf6;
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0 25px,
		rgba(120, 100, 70, .1) 25px 26px
	);

	border: 1px solid rgba(0, 0, 0, .22);
	border-radius: 2px;
	color: #6b6154;
}

@media (prefers-reduced-motion: reduce) {

	.otm-mc .mc-up-submit,
	.otm-mc .mc-up-cancel,
	.otm-mc .mc-up-field input[type="file"]::file-selector-button { transition: none; }
}

/* ==========================================================================
   美好瞬间 —— 关掉系统自绘，纸签样式才生效
   --------------------------------------------------------------------------
   实测发现：`::file-selector-button` 上的 background / border 明明算出来了
   （background-image 是那条纸纹渐变），画面上却还是系统那个灰扑扑的
   「选取文件」——因为系统对表单控件默认开着自绘（appearance: auto），
   自绘会盖过我们写的背景与边框。

   所以必须先 appearance: none 把自绘关掉，再谈画成什么样。
   按钮、输入框、下拉都用得上这一条。
   ========================================================================== */
.otm-mc .mc-up-field input[type="file"],
.otm-mc .mc-up-field input[type="file"]::file-selector-button,
.otm-mc .mc-up-submit,
.otm-mc .mc-up-cancel,
.otm-mc .mc-up-field input[type="password"],
.otm-mc .mc-up-field input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
}

/* 关掉自绘之后，文件按钮自己是一块；给它一点内部对齐 */
.otm-mc .mc-up-field input[type="file"]::file-selector-button {
	display: inline-block;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   文件选择：自己画的纸签按钮
   --------------------------------------------------------------------------
   ::file-selector-button 上的样式确实算了（background-image 都在），
   但 Chrome 依旧画它自己那个灰按钮 —— 加了 appearance: none 也没用。
   所以不跟它较劲了：原生 input 铺满整行、设为透明，
   上面盖一个自己画的纸签 + 文件名。
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-file {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;

	padding: 9px 12px;

	background-color: #fdfbf6;
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0 25px,
		rgba(120, 100, 70, .1) 25px 26px
	);

	border: 1px solid rgba(0, 0, 0, .22);
	border-radius: 2px;
}

/* 原生 input：铺满整行、透明，但仍然是它接管点击 */
.otm-mc .mc-up-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

/* 自画的按钮 */
.otm-mc .mc-up-file-btn {
	position: relative;
	flex: 0 0 auto;

	padding: 8px 18px;

	background-color: #f7f3ea;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .05) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%);
	background-blend-mode: multiply, normal;

	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 2px;

	color: #2e2a26;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7);

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 3px 0 rgba(0, 0, 0, .36);

	transform: rotate(-.6deg);
	transition: transform .16s ease, box-shadow .16s ease;
}

/* 上沿一道小胶带 */
.otm-mc .mc-up-file-btn::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 40px;
	height: 14px;
	transform: translateX(-50%) rotate(-2.6deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .52) 0 7px,
		rgba(160, 224, 129, .36) 7px 14px
	);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .38);
	pointer-events: none;
}

/* 悬停时整块纸签抬起来（鼠标其实在透明的 input 上，所以挂到容器上） */
.otm-mc .mc-up-file:hover .mc-up-file-btn {
	transform: rotate(0deg) translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 4px 0 rgba(0, 0, 0, .38);
}

/* 文件名 */
.otm-mc .mc-up-file-name {
	font-size: 13px;
	font-style: italic;
	color: #7d7368;
}

/* 旧的 ::file-selector-button 规则作废 —— 那个按钮已经看不见了 */
.otm-mc .mc-up-field input[type="file"]::file-selector-button {
	display: none;
}

/* --------------------------------------------------------------------------
   上传 / 取消 要分主次
   --------------------------------------------------------------------------
   两张纸签做成一样之后，主操作和次操作长得一模一样 —— 看不出该点哪个。
   不靠「把上传涂成绿色」（那又变回按钮了），而是用本站一贯的办法：
   **在字下面划一道荧光笔**。选中的年份标签、当前页的导航项用的都是这一招。
   -------------------------------------------------------------------------- */
.otm-mc .mc-up-submit {
	position: relative;
	z-index: 0;
}

.otm-mc .mc-up-submit::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 6px;
	height: 9px;
	z-index: -1;
	background: linear-gradient(90deg, rgba(108, 195, 73, .72), rgba(134, 213, 98, .52));
	transform: rotate(-.8deg);
	pointer-events: none;
}

/* 取消那张的胶带淡一点，进一步拉开主次 */
.otm-mc .mc-up-cancel::before {
	background: repeating-linear-gradient(
		90deg,
		rgba(120, 110, 95, .3) 0 8px,
		rgba(160, 152, 138, .2) 8px 16px
	);
}

/* ==========================================================================
   美好瞬间 —— 标题手帐化：剪下来的纸字
   --------------------------------------------------------------------------
   原来是「白字 + 一条平整的绿色横杠」。那条横杠最假 ——
   真实的荧光笔不可能划得这么直、这么齐、四角这么方。

   手帐的标题是**一个字剪一张纸片**贴上去的。所以：
       · 每个字一张独立的小纸片（米色纸 + 纸纹 + 投一层软影）
       · 各自歪一点点，角度错开，像一张张按上去的
       · 那个山头 emoji 不套纸片（它自己就是张图），只做轻微倾斜
       · 原来那条平整横杠撤掉
   ========================================================================== */

.otm-mc .mc-gal-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;

	margin: 0;
	font-weight: 800;
	letter-spacing: 0;
	text-shadow: none;          /* 纸片上的字不需要投影，纸片自己有影 */
}

/* 撤掉原来那条平整的荧光笔横杠 */
.otm-mc .mc-gallery-page > .mc-gal-head .entry-title::after,
.otm-mc .mc-gallery-page > .entry-header .entry-title::after {
	content: none;
	display: none;
}

/* 每个字：一张小纸片 */
.otm-mc .mc-gal-title > span {
	position: relative;
	display: inline-block;

	padding: 2px 10px 6px;

	background-color: #f7f3ea;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .035) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%);

	border: 1px solid rgba(0, 0, 0, .26);
	border-radius: 2px;

	color: #2e2a26 !important;
	font-size: 30px;
	line-height: 1.15;

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 6px 12px -6px rgba(0, 0, 0, .85),
		0 2px 4px rgba(0, 0, 0, .35);

	transform: rotate(var(--t-rot, 0deg)) translateY(var(--t-y, 0px));
}

/* 每个字角度、高低都错开 —— 齐刷刷贴上去就不像手剪的了 */
.otm-mc .mc-gal-title > span:nth-child(1) { --t-rot: -3deg;  --t-y: 3px; }
.otm-mc .mc-gal-title > span:nth-child(2) { --t-rot: 1.6deg; --t-y: -2px; }
.otm-mc .mc-gal-title > span:nth-child(3) { --t-rot: -.9deg; --t-y: 2px; }
.otm-mc .mc-gal-title > span:nth-child(4) { --t-rot: 2.2deg; --t-y: -3px; }
.otm-mc .mc-gal-title > span:nth-child(5) { --t-rot: -1.4deg; --t-y: 4px; }

/* 第一个是那个山头 emoji：它自己是张图，不套纸片 */
.otm-mc .mc-gal-title > span:first-child {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 34px;
	transform: rotate(-3deg) translateY(2px);
}

/* 第二张纸片压一道胶带 —— 只贴一处，四处都贴反而碎 */
.otm-mc .mc-gal-title > span:nth-child(2)::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 46px;
	height: 17px;
	transform: translateX(-50%) rotate(-2.6deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		rgba(160, 224, 129, .34) 8px 16px
	);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
	pointer-events: none;
}

@media screen and (max-width: 47.99em) {

	.otm-mc .mc-gal-title { gap: 5px; }
	.otm-mc .mc-gal-title > span { padding: 2px 7px 5px; font-size: 22px; }
	.otm-mc .mc-gal-title > span:first-child { font-size: 26px; }
}

/* ==========================================================================
   修复：灯箱里那个空 <img> 会显示成「折角纸片」的坏图图标
   --------------------------------------------------------------------------
   现象：点开画廊页、拖动滚动条之后，画面里会出现一个折角的纸片图标。

   来源找到了 —— gallery.js 里构造灯箱时这一行：

       '<span class="mc-lb-spin"></span>' +
       '<img alt="">' +                 ← 没有 src

   这个 <img> 是等**点开某张照片**时才被赋 src 的（lbImg.src = fullOf(p)）。
   在此之前它是一个没有 src 的 img —— 而浏览器对「有 src 属性但空/无 src」
   的 img 会渲染成**坏图占位图标**（就是那个折角纸片）。

   灯箱关着的时候它理应看不见，但 .mc-lb 用的是 visibility/opacity 那类
   隐藏方式，元素仍在排版中，于是这个占位图标在部分浏览器里仍然显形。

   修法：**没有 src 就不让它参与显示**。
   只改 CSS、不动 JS —— 灯箱的开关与换图逻辑一个字都不碰，
   等它拿到 src 自然就显示了。

   写成两个选择器是因为两种情形都遇到过：
     · 根本没有 src 属性（本项目当前就是这种）
     · src 存在但为空字符串
   ========================================================================== */
.mc-lb-stage img:not([src]),
.mc-lb-stage img[src=""],
.mc-lb-stage img[src="#"] {
  display: none !important;
}


/* ==========================================================================
   U 统一组件（与三站的描边糖果按钮、18px 卡片、胶囊标签同一套规格）
   --------------------------------------------------------------------------
   这一页原来自成一套「剪贴簿」：方角纸签 + 绿胶带 + 随机歪斜，
   和导航、论坛、玩家中心的按钮放在一起就显得格格不入。
   相片本身（白框、轻微歪斜）保留 —— 那是内容；只把「可以点的东西」和
   「装内容的容器」换成统一规格：
       按钮      40px（小号 32px），14px 圆角，2px 描边，0 3px 0 厚边 + 投影 + 高光
       主按钮    草绿（发布作品、上传、当前年份）
       次按钮    深色主题 = 深色糖果，浅色主题 = 奶油纸
       面板      18px 圆角卡片
   颜色变量挂在 .mc-gallery-page 上，随 html[data-ot-theme] 切换。
   ========================================================================== */
.otm-mc .mc-gallery-page {
	--g2-top: #4a4643;
	--g2-bottom: #35322f;
	--g2-edge: #201e1c;
	--g2-ink: #fcf5f1;
	--g2-mute: #c9c0b5;
	--g-card: linear-gradient(180deg, #3b3835, #2f2c2a);
	--g-card-edge: #201e1c;
	--g-well: rgba(0, 0, 0, .28);
	--g-well-edge: #1a1816;
}

html[data-ot-theme="light"] .otm-mc .mc-gallery-page {
	--g2-top: #fffdf8;
	--g2-bottom: #ece3d4;
	--g2-edge: #b9ab92;
	--g2-ink: #2e2a26;
	--g2-mute: #655a4c;
	--g-card: linear-gradient(180deg, #fffdf8, #f5efe4);
	--g-card-edge: #b9ab92;
	--g-well: #fbf8f2;
	--g-well-edge: #cbbfa9;
}

/* ---- U.1 结构：所有按钮 ---- */
html body.otm-mc .mc-up-open,
html body.otm-mc .mc-up-logout,
html body.otm-mc .mc-up-submit,
html body.otm-mc .mc-up-cancel,
html body.otm-mc .mc-up-file-btn,
html body.otm-mc .mc-gal-more,
html body.otm-mc .mc-gal-chip {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	box-sizing: border-box !important;
	height: var(--ot-btn-h-md, 40px) !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 var(--ot-btn-px-md, 18px) !important;
	line-height: 1 !important;
	white-space: nowrap;
	font-size: var(--ot-btn-fs-md, 14px) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	letter-spacing: .02em !important;
	text-decoration: none !important;
	text-shadow: none !important;
	border-radius: var(--ot-btn-r, 14px) !important;
	border: 2px solid var(--g2-edge) !important;
	background: linear-gradient(180deg, var(--g2-top), var(--g2-bottom)) !important;
	color: var(--g2-ink) !important;
	box-shadow: 0 3px 0 var(--g2-edge), var(--ot-btn-lift), var(--ot-btn-gloss) !important;
	transform: none !important;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

/* 胶带、角标一律拿掉 */
html body.otm-mc :is(.mc-up-open, .mc-up-logout, .mc-up-submit, .mc-up-cancel, .mc-up-file-btn, .mc-gal-more, .mc-gal-chip, .mc-up-panel, .mc-gal-group)::before,
html body.otm-mc :is(.mc-up-open, .mc-up-logout, .mc-up-submit, .mc-up-cancel, .mc-up-file-btn, .mc-gal-more, .mc-gal-chip, .mc-up-panel)::after {
	content: none !important;
	display: none !important;
}

/* 小号：退出登录、选择图片、年份 */
html body.otm-mc .mc-up-logout,
html body.otm-mc .mc-up-file-btn,
html body.otm-mc .mc-gal-chip {
	height: var(--ot-btn-h-sm, 32px) !important;
	padding: 0 var(--ot-btn-px-sm, 14px) !important;
	font-size: var(--ot-btn-fs-sm, 13px) !important;
}

/* ---- U.2 主按钮：草绿 ---- */
html body.otm-mc .mc-up-open,
html body.otm-mc .mc-up-submit,
html body.otm-mc .mc-gal-chip.is-on {
	background: linear-gradient(180deg, var(--ot-btn-primary-top), var(--ot-btn-primary-bottom)) !important;
	border-color: var(--ot-btn-primary-edge) !important;
	color: #fff !important;
	box-shadow: 0 3px 0 var(--ot-btn-primary-edge), var(--ot-btn-lift), var(--ot-btn-gloss) !important;
}

/* ---- U.3 悬停 / 按下 ---- */
html body.otm-mc :is(.mc-up-open, .mc-up-logout, .mc-up-submit, .mc-up-cancel, .mc-gal-more, .mc-gal-chip):hover,
html body.otm-mc .mc-up-file:hover .mc-up-file-btn {
	filter: brightness(1.06);
	transform: translateY(-1px) !important;
}

html body.otm-mc :is(.mc-up-open, .mc-up-logout, .mc-up-submit, .mc-up-cancel, .mc-gal-more, .mc-gal-chip):active,
html body.otm-mc .mc-up-open[aria-expanded="true"] {
	transform: translateY(2px) !important;
	box-shadow: 0 1px 0 var(--g2-edge), var(--ot-btn-lift-down), var(--ot-btn-gloss) !important;
}

html body.otm-mc :is(.mc-up-open, .mc-up-submit, .mc-gal-chip.is-on):active,
html body.otm-mc .mc-up-open[aria-expanded="true"] {
	box-shadow: 0 1px 0 var(--ot-btn-primary-edge), var(--ot-btn-lift-down), var(--ot-btn-gloss) !important;
}

html body.otm-mc .mc-up-submit:disabled {
	filter: saturate(.4) brightness(.9);
	cursor: not-allowed;
	transform: none !important;
}

html body.otm-mc .mc-up-open:focus-visible,
html body.otm-mc .mc-up-logout:focus-visible,
html body.otm-mc .mc-up-submit:focus-visible,
html body.otm-mc .mc-up-cancel:focus-visible,
html body.otm-mc .mc-gal-more:focus-visible,
html body.otm-mc .mc-gal-chip:focus-visible {
	outline: 3px solid rgba(108, 195, 73, .6) !important;
	outline-offset: 2px;
}

/* ---- U.4 年份筛选：一排小号按钮，不再歪斜 ---- */
html body.otm-mc .mc-gal-bar {
	gap: 10px !important;
	padding-bottom: 4px;
}

html body.otm-mc .mc-gal-chip i {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	font-size: 11px !important;
	font-style: normal !important;
	font-weight: 600;
	color: var(--g2-mute) !important;
	opacity: 1 !important;
}

html body.otm-mc .mc-gal-chip.is-on i {
	color: rgba(255, 255, 255, .82) !important;
}

/* ---- U.5 账号区：玩家名做成同高的标签，和两颗按钮排在一条线上 ---- */
html body.otm-mc .mc-up-account {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 10px !important;
}

html body.otm-mc .mc-up-player {
	display: inline-flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	height: var(--ot-btn-h-md, 40px);
	margin: 0 !important;
	padding: 0 14px !important;
	border: 2px solid var(--g2-edge) !important;
	border-left-width: 2px !important;
	border-radius: var(--ot-btn-r, 14px) !important;
	background: var(--g-well) !important;
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18) !important;
	transform: none !important;
	line-height: 1.1 !important;
}

html body.otm-mc .mc-up-player::before,
html body.otm-mc .mc-up-player::after {
	content: none !important;
}

html body.otm-mc .mc-up-player small {
	font-size: 10px !important;
	letter-spacing: .06em;
	color: var(--g2-mute) !important;
}

html body.otm-mc .mc-up-player strong {
	font-size: 13px !important;
	color: var(--g2-ink) !important;
}

/* ---- U.6 上传面板：18px 卡片 ---- */
html body.otm-mc .mc-up-panel {
	border: 2px solid var(--g-card-edge) !important;
	border-radius: var(--ot-card-r, 18px) !important;
	background: var(--g-card) !important;
	box-shadow: 0 3px 0 var(--g-card-edge), 0 16px 32px -14px rgba(0, 0, 0, .5) !important;
	transform: none !important;
	color: var(--g2-ink) !important;
}

html body.otm-mc .mc-up-panel :is(label, .mc-up-hint, .mc-up-hint b, .mc-up-list li) {
	color: var(--g2-ink) !important;
	text-shadow: none !important;
}

html body.otm-mc .mc-up-panel .mc-up-hint {
	color: var(--g2-mute) !important;
	font-style: normal !important;
	border-color: var(--g2-edge) !important;
}

/* 选择文件那一格：输入框规格（14px 圆角，内凹） */
html body.otm-mc .mc-up-file,
html body.otm-mc .mc-up-field input[type="text"] {
	border: 2px solid var(--g-well-edge) !important;
	border-radius: var(--ot-field-r, 14px) !important;
	background: var(--g-well) !important;
	background-image: none !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18) !important;
	color: var(--g2-ink) !important;
}

html body.otm-mc .mc-up-file {
	padding: 8px 10px !important;
}

html body.otm-mc .mc-up-file-name {
	font-style: normal !important;
	color: var(--g2-mute) !important;
}

html body.otm-mc .mc-up-actions {
	display: flex !important;
	align-items: center;
	gap: 10px !important;
}

/* ---- U.7 日期分组头：胶囊标签 + 分隔线，不再歪斜、不贴胶带 ---- */
html body.otm-mc .mc-gal-group {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
	gap: 10px !important;
}

html body.otm-mc .mc-gal-group > span {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--ot-btn-h-sm, 32px);
	padding: 0 14px;
	border: 2px solid var(--g2-edge);
	border-radius: var(--ot-btn-r, 14px);
	background: linear-gradient(180deg, var(--g2-top), var(--g2-bottom));
	box-shadow: 0 3px 0 var(--g2-edge), var(--ot-btn-gloss);
	font-size: 14px !important;
	letter-spacing: .04em !important;
	line-height: 1;
	color: var(--g2-ink) !important;
	text-shadow: none !important;
}

html body.otm-mc .mc-gal-group > i {
	display: inline-flex !important;
	align-items: center;
	height: var(--ot-tag-h, 22px);
	margin: 0 !important;
	padding: 0 9px !important;
	border-radius: var(--ot-tag-r, 999px) !important;
	background: rgba(108, 195, 73, .16) !important;
	color: var(--g2-mute) !important;
	font-size: 12px !important;
	font-style: normal !important;
	line-height: 1;
}

/* 浅色主题给正文链接统一上了深绿（选择器带 #content），按钮里的字要压过它 */
html body.otm-mc #content .mc-up-logout {
	color: var(--g2-ink) !important;
}

html body.otm-mc #content a.mc-up-open {
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	html body.otm-mc :is(.mc-up-open, .mc-up-logout, .mc-up-submit, .mc-up-cancel, .mc-up-file-btn, .mc-gal-more, .mc-gal-chip) {
		transition: none !important;
	}
}


/* ==========================================================================
   V 不是按钮的东西不做成按钮：参照充电墙的贴纸
   --------------------------------------------------------------------------
   U 节把年份筛选、日期、玩家账号也做成了糖果按钮，看上去全都「能按」。
   这三样改用充电墙（thanks-wall.css .hw-card）同一套贴纸：
       奶油相纸渐变 + 1px 深描边 + 直角 + 轻微歪斜 + 半透明绿胶带
   深浅两种主题下都是奶油纸（充电墙也是这样）。
   年份虽然可点，但它是「筛选标签」而不是动作：当前年份用胶带标出来，悬停时摆正抬起。
   真正的动作（发布作品、退出登录、上传、取消）仍是按钮；退出登录补成 40px，与发布作品同高。
   ========================================================================== */

/* ---- V.1 贴纸本体 ---- */
html body.otm-mc .mc-gal-chip,
html body.otm-mc .mc-gal-chip.is-on,
html body.otm-mc .mc-gal-group > span,
html body.otm-mc .mc-up-player {
	position: relative !important;
	box-sizing: border-box !important;
	background-color: #f4efe4 !important;
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .028) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fbf8f1 0%, #f4efe4 62%, #ece5d6 100%) !important;
	border: 1px solid rgba(0, 0, 0, .34) !important;
	border-radius: 1px !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 8px 16px -10px rgba(0, 0, 0, .8),
		0 2px 4px rgba(0, 0, 0, .3) !important;
	color: #2e2a26 !important;
	text-shadow: none !important;
	filter: none !important;
	transform: rotate(var(--rot, 0deg)) !important;
	transition: transform .22s ease, box-shadow .22s ease !important;
}

/* 三张一组换个角度，和充电墙同一套做法 */
html body.otm-mc .mc-gal-chip:nth-child(3n+1),
html body.otm-mc .mc-gal-group:nth-of-type(2n+1) > span { --rot: -.85deg; }
html body.otm-mc .mc-gal-chip:nth-child(3n+2),
html body.otm-mc .mc-gal-group:nth-of-type(2n) > span   { --rot: .7deg; }
html body.otm-mc .mc-gal-chip:nth-child(3n)             { --rot: -.35deg; }
html body.otm-mc .mc-up-player                          { --rot: -1deg; }

/* 胶带 */
html body.otm-mc .mc-gal-chip.is-on::before,
html body.otm-mc .mc-gal-group > span::before,
html body.otm-mc .mc-up-player::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: -9px;
	left: 50%;
	width: 46px;
	height: 16px;
	transform: translateX(-50%) rotate(-2.5deg);
	background: repeating-linear-gradient(90deg, rgba(108, 195, 73, .5) 0 8px, rgba(160, 224, 129, .34) 8px 16px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
	pointer-events: none;
}

html body.otm-mc .mc-gal-group > span::before { left: 22px; width: 58px; transform: rotate(-3deg); }
html body.otm-mc .mc-up-player::before       { width: 30px; top: -8px; left: auto; right: -6px; transform: rotate(28deg); }

/* ---- V.2 年份筛选 ---- */
html body.otm-mc .mc-gal-bar {
	gap: 14px 12px !important;
	padding-top: 10px !important;
}

html body.otm-mc .mc-gal-chip {
	height: 32px !important;
	padding: 0 14px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

html body.otm-mc .mc-gal-chip i,
html body.otm-mc .mc-gal-chip.is-on i {
	color: #7d7368 !important;
	font-style: italic !important;
}

/* 当前年份：胶带贴上 + 底下一道草绿，而不是整块变绿按钮 */
html body.otm-mc .mc-gal-chip.is-on {
	color: #1f4d14 !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 -3px 0 #6cc349 inset,
		0 8px 16px -10px rgba(0, 0, 0, .8),
		0 2px 4px rgba(0, 0, 0, .3) !important;
}

/* 悬停：摆正、抬起（充电墙同款） */
html body.otm-mc .mc-gal-chip:hover,
html body.otm-mc .mc-gal-chip:focus-visible {
	transform: rotate(0deg) translateY(-3px) !important;
}

html body.otm-mc .mc-gal-chip:active {
	transform: rotate(0deg) translateY(-1px) !important;
}

/* ---- V.3 日期分组 ---- */
html body.otm-mc .mc-gal-group {
	margin-top: 30px !important;
	gap: 12px !important;
}

html body.otm-mc .mc-gal-group > span {
	display: inline-flex !important;
	align-items: center;
	height: auto !important;
	padding: 7px 16px 8px !important;
	font-size: 15px !important;
	letter-spacing: .06em !important;
	line-height: 1.2 !important;
}

/* 张数：回到小注，不是标签 */
html body.otm-mc .mc-gal-group > i {
	height: auto !important;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	font-size: 12px !important;
	font-style: italic !important;
	color: var(--g2-mute) !important;
}

/* ---- V.4 玩家账号：一张小名牌 ---- */
html body.otm-mc .mc-up-player {
	height: 40px !important;
	padding: 0 14px !important;
}

html body.otm-mc .mc-up-player small {
	color: #7d7368 !important;
}

html body.otm-mc .mc-up-player strong {
	color: #2e2a26 !important;
}

@media screen and (max-width: 47.99em) {
	html body.otm-mc .mc-up-player {
		flex: 0 0 auto !important;
		width: auto !important;
		margin-right: 100% !important;   /* 名牌独占第一行（宽度仍按内容），两颗按钮并排在第二行 */
	}
}

/* ---- V.5 退出登录：与「发布作品」同高 ---- */
html body.otm-mc .mc-up-logout {
	height: var(--ot-btn-h-md, 40px) !important;
	padding: 0 var(--ot-btn-px-md, 18px) !important;
	font-size: var(--ot-btn-fs-md, 14px) !important;
}

html body.otm-mc .mc-up-account {
	gap: 14px !important;
}

/* 标题「美好瞬间」四个字不换行（照片还没载入时左栏会变窄，「间」被挤到第二行） */
html body.otm-mc .mc-gal-title {
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
}

/* 浅色主题的正文链接色（第 74 节，选择器带 #content.site-content > .wrap）优先级很高，
   按钮里的 <a> 会被染成深绿 —— 这里再抬一档 */
html[data-ot-theme] body.otm-mc #content.site-content .mc-up .mc-up-logout.mc-up-logout {
	color: var(--g2-ink) !important;
}
html[data-ot-theme] body.otm-mc #content.site-content .mc-up a.mc-up-open.mc-up-open {
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	html body.otm-mc .mc-gal-chip,
	html body.otm-mc .mc-gal-group > span,
	html body.otm-mc .mc-up-player {
		transition: none !important;
	}
}



/* ==========================================================================
   W 日期贴纸被下面的相片压住
   --------------------------------------------------------------------------
   日期分组在瀑布流网格里写死占 3 行（3×8 + 2×14 = 52px）。
   V 节给它加了 30px 上外边距、贴纸也变高了，整块被推出自己的格子，
   下一行相片（带歪斜 transform、后绘制）压上来 18px。
   改为：占 4 行（4×8 + 3×14 = 74px）、不留外边距，贴纸落在格子底部，上面留出胶带和分组间距；
   同时把贴纸提到相片上层，万一歪斜的相片角探过来也不会盖住字。
   ========================================================================== */
html body.otm-mc .mc-gal-group {
	grid-row-end: span 4 !important;
	height: 74px !important;
	margin: 0 !important;
	padding: 0 0 6px !important;
	align-items: flex-end !important;
	z-index: 3 !important;
}

html body.otm-mc .mc-gal-group::after {
	align-self: center;
	margin-top: 22px;
}

/* 最窄的手机上网格只有一列（约 254px），但宽图被脚本设成 grid-column: span 2，
   于是隐式多出一列 26px，后面的相片全被塞进这条缝里（线上原本就有的问题，顺带修掉）。
   ≤520 时宽图只占满现有的这一列；更宽时有多列，保持脚本的跨两列。 */
@media screen and (max-width: 520px) {
	html body.otm-mc .mc-gal-grid > .mc-gal-item[data-wide="1"] {
		grid-column: 1 / -1 !important;
	}
}