/* ============================================================================
 *  图像记忆库 · 应用层样式（骨架在 base.css）
 * ========================================================================== */

.view { min-height: 60vh; }
.loading { padding: 40px 0; font-size: 14px; color: var(--ink-faint); }

h1.vt { font-size: 26px; font-weight: 700; letter-spacing: .04em; margin: 4px 0 6px; }
p.vs { font-size: 14px; color: var(--ink-faint); margin: 0 0 22px; }

/* ---------- 通用块 ---------- */
.card {
	margin: 0 0 22px;
	background: var(--paper-card);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: 2px;
}
.card-head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 12px; padding: 14px 18px 10px;
	border-bottom: 1px solid var(--rule);
}
.card-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.card-head span { font-size: 12.5px; color: var(--ink-faint); }

.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- 首页拼贴 ----------
   不规则切分：第一行 2 块、后面两行各 3 块，共 8 块。
   比例按设计稿（830 × 550）；用 24 栅格是为了 13+11 / 9+8+7 / 8+8+8 都正好铺满。 */
.mosaic {
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	grid-template-rows: 191fr 163fr 184fr;
	gap: 6px;
	aspect-ratio: 830 / 550;
	margin: 26px 0 40px;
}
.mosaic > a {
	display: block; position: relative; overflow: hidden;
	min-width: 0; min-height: 0; border-radius: 2px;
	background: var(--paper-deep);
}
.mosaic > a img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;
}
.mosaic > a:hover img { transform: scale(1.04); }
.mosaic > a:nth-child(1) { grid-column: span 13; }
.mosaic > a:nth-child(2) { grid-column: span 11; }
.mosaic > a:nth-child(3) { grid-column: span 9; }
.mosaic > a:nth-child(4) { grid-column: span 8; }
.mosaic > a:nth-child(5) { grid-column: span 7; }
.mosaic > a:nth-child(6),
.mosaic > a:nth-child(7),
.mosaic > a:nth-child(8) { grid-column: span 8; }

@media (max-width: 760px) {
	.mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 32vw;
		aspect-ratio: auto;
	}
	.mosaic > a { grid-column: auto; }
}

/* ---------- 站点数据（首页底部） ---------- */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stats .st {
	padding: 10px 12px 11px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 2px;
}
.stats .st b {
	display: block; font-size: 19px; font-weight: 700;
	letter-spacing: .01em; color: var(--ink);
}
.stats .st span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); }

.tile {
	display: block; text-decoration: none;
	background: var(--paper-card); border: 1px solid var(--rule);
	border-radius: 2px; overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover {
	transform: translateY(-2px); border-color: var(--rule-strong);
	box-shadow: 0 10px 24px -14px rgba(90,75,45,.5);
}
.tile-img {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 3; padding: 8px; background: var(--paper-deep);
}
.tile-img img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	display: block; background: #fff; padding: 3px; border: 1px solid var(--rule);
}
/* 预览加载失败时的类型角标（JPG / PDF / ♪ …） */
.tile-img.is-file {
	font-size: 12px; letter-spacing: .14em; color: var(--ink-faint);
}
.tile-name {
	display: block; padding: 9px 11px;
	font-size: 13px; line-height: 1.5; color: var(--ink-soft);
	border-top: 1px solid var(--rule);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 列表 ----------
   用多列排版（column-count）而不是 grid：内容会**先竖着排满第一列**再排第二列，
   所以 211 条线路是「19路、26路、42路…」顺着读，而不是横着跳。 */
.rows {
	column-count: 2;
	column-gap: 26px;
	padding: 6px 18px 14px;
}
.rows.three { column-count: 3; }
.rows.one { column-count: 1; }
@media (max-width: 1000px) { .rows.three { column-count: 2; } }
@media (max-width: 760px)  { .rows, .rows.three { column-count: 1; } }

.ri {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; padding: 9px 2px;
	font-family: inherit; font-size: 14.5px; text-align: left;
	color: var(--ink); background: none;
	border: 0; border-bottom: 1px dashed var(--rule);
	cursor: pointer; transition: color .12s ease;
	break-inside: avoid;          /* 别让一条被拆到两列 */
}
.ri:hover, .ri.is-on { color: var(--accent); }
.ri.is-on { font-weight: 700; }
.ri .rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri .rc { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.ri .more { margin-left: 7px; color: var(--ink-faint); }
.ri:hover .more { color: var(--accent); }
.ri.is-on .rc { color: var(--accent); }

/* ---------- 品牌索引 ---------- */
.azbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 9px 16px 11px; border-bottom: 1px solid var(--rule); }
.az {
	font-family: inherit; font-size: 12.5px; width: 26px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink-faint); background: none; border: 0; border-radius: 2px; cursor: pointer;
}
.az:hover { color: var(--accent); background: var(--paper-deep); }
.az.is-on { background: var(--accent); color: #fdf6e8; }

.bgroup { padding: 0 18px; }
.bgroup h3 { margin: 15px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); letter-spacing: .14em; }
/* 品牌索引：一行 4 个，不再按首字母分块（字母用上面的 A-Z 条筛） */
.bgrid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px; padding: 16px 18px 20px;
}
@media (max-width: 1000px) { .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bcard {
	display: flex; align-items: center; gap: 10px; padding: 8px 10px;
	font-family: inherit; font-size: 14px; text-align: left;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
}
.bcard:hover { border-color: var(--accent); color: var(--accent); }
.bcard.is-on { background: var(--accent); border-color: #7a3225; color: #fdf6e8; }
.blogo {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--paper-deep); color: var(--ink-soft); font-size: 13px; font-weight: 700;
}
.bcard.is-on .blogo { background: rgba(255,255,255,.18); color: #fdf6e8; }
.bname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); }

/* ---------- 搜索框 ---------- */
.lsearch { padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.lsearch input, .fsearch input {
	width: 100%; box-sizing: border-box; padding: 8px 12px;
	font-family: inherit; font-size: 14.5px;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px;
}
.lsearch input:focus, .fsearch input:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(140,58,43,.12);
}

/* ---------- 地图 ---------- */
.mapwrap {
	position: relative; margin: 0 0 20px; padding: 12px 12px 6px;
	background: var(--paper-card);
	border: 1px solid var(--rule); border-left: 3px solid var(--accent);
	border-radius: 2px;
}
.szmap { display: block; width: 100%; height: auto; }
.szmap .dgrp { cursor: pointer; }
.szmap .dgrp path {
	fill: var(--paper-deep); stroke: var(--rule-strong);
	stroke-width: 1.4; stroke-linejoin: round;
	transition: fill .15s ease, stroke .15s ease;
}
.szmap .dgrp text {
	font-size: 13px; fill: var(--ink-soft);
	text-anchor: middle; dominant-baseline: middle;
	pointer-events: none; user-select: none;
}
.szmap .dgrp:hover path { fill: #f0e6cc; stroke: var(--accent); }
.szmap .dgrp:hover text { fill: var(--accent); }
.szmap .dgrp.is-on path { fill: var(--accent); stroke: #7a3225; }
.szmap .dgrp.is-on text { fill: #fdf6e8; }
.szmap .dgrp:focus { outline: none; }
.szmap .dgrp:focus path { stroke: var(--accent); stroke-width: 2.4; }

.inset {
	position: absolute; right: 16px; bottom: 14px;
	padding: 7px 9px; text-align: center;
	background: var(--paper); border: 1px dashed var(--rule-strong); border-radius: 2px;
}
.inset-btn {
	font-family: inherit; font-size: 12.5px; padding: 3px 9px;
	color: var(--ink-soft); background: var(--paper-card);
	border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer;
}
.inset-btn:hover { border-color: var(--accent); color: var(--accent); }
.inset-btn.is-on { background: var(--accent); border-color: #7a3225; color: #fdf6e8; }
.inset-note { display: block; margin-top: 5px; font-size: 10.5px; color: var(--ink-faint); }
.insetmap { display: block; width: 118px; height: auto; }
.sspath {
	fill: var(--paper-deep); stroke: var(--rule-strong);
	stroke-width: 1.6; stroke-linejoin: round; cursor: pointer;
}
.sspath:hover { fill: #f0e6cc; stroke: var(--accent); }
.sspath.is-on { fill: var(--accent); stroke: #7a3225; }

/* ---------- 筛选条 ---------- */
.facets {
	display: grid; gap: 12px; margin: 0 0 22px; padding: 16px 18px;
	background: var(--paper-card);
	border: 1px solid var(--rule); border-left: 3px solid var(--accent);
	border-radius: 2px;
}
.frow { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.flabel { flex: 0 0 auto; padding-top: 5px; font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.fset { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.fchip {
	font-family: inherit; font-size: 13.5px; padding: 4px 12px;
	color: var(--ink-soft); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer;
}
.fchip:hover { border-color: var(--accent); color: var(--accent); }
.fchip.is-on { background: var(--accent); border-color: #7a3225; color: #fdf6e8; }
.fchip .n { opacity: .6; margin-left: 5px; font-size: 12px; }

.resline {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 12px; margin: 0 0 16px;
	font-size: 13.5px; color: var(--ink-faint);
}

.pager { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 34px; }
.pageinfo { font-size: 13px; color: var(--ink-faint); }

/* ---------- 首页 ---------- */
.hero { padding: 22px 0 26px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: .03em; margin: 0 0 12px; }
.hero p { font-size: 16px; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.8; }

/* ---------- 详情 ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr); } }

.figbox {
	display: flex; align-items: center; justify-content: center;
	min-height: 260px; padding: 22px;
	background: var(--paper-card);
	border: 1px solid var(--rule); border-right: 0;
}
.figbox img { max-width: 100%; max-height: 68vh; height: auto; display: block; }
.figbox audio { width: 100%; max-width: 560px; display: block; }
@media (max-width: 900px) { .figbox { border-right: 1px solid var(--rule); } }

.meta {
	background: var(--paper-card);
	border: 1px solid var(--rule); border-top: 3px solid var(--accent);
	padding: 4px 18px 16px;
}
.mrow { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.mrow:last-child { border-bottom: 0; }
.mk { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.mv { font-size: 13.5px; color: var(--ink); text-align: right; word-break: break-all; }

.blocks { margin-top: 22px; display: grid; gap: 18px; }
.block { background: var(--paper-card); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 2px; padding: 16px 20px 18px; }
.block h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: .04em; }

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

/* 分类页顶部的「子分类」长条：一级一层，点进去是它自己的分类页 */
.subcats {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	padding: 10px 14px;
	margin: 0 0 20px;
	background: var(--paper-card);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: 2px;
}
.subcats .lab { font-size: 13px; color: var(--ink-faint); margin-right: 2px; }
.chipx {
	font-size: 13px; padding: 4px 11px;
	color: var(--ink-soft); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px;
	text-decoration: none; cursor: pointer;
}
.chipx:hover { border-color: var(--accent); color: var(--accent); }

.license { display: flex; gap: 16px; align-items: flex-start; }
.license .badge {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 3px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent); color: #fdf6e8; font-size: 13px; font-weight: 700;
}

.oldver {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 0 0 20px; padding: 12px 18px;
	background: #fdf3d8; border: 1px solid #e0c98a; border-left: 3px solid #b8860b;
	border-radius: 2px; font-size: 14px; color: #6b4e12;
}
.oldver a { color: #8c3a2b; text-decoration: none; border-bottom: 1px solid rgba(140,58,43,.35); }

table.hist { width: 100%; border-collapse: collapse; font-size: 14px; }
table.hist th, table.hist td { border: 1px solid var(--rule); padding: 9px 11px; text-align: left; }
table.hist thead th { background: var(--paper-deep); font-weight: 700; white-space: nowrap; }
table.hist tbody tr:hover { background: var(--paper-deep); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }

.editor { margin-top: 18px; }
.editor textarea {
	width: 100%; box-sizing: border-box; min-height: 200px;
	padding: 12px 14px;
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px; resize: vertical;
}
.ebar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.esum {
	flex: 1 1 200px; min-width: 0; padding: 7px 11px;
	font-family: inherit; font-size: 13.5px;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px;
}

/* ---------- 弹窗 ---------- */
.modal {
	position: fixed; inset: 0; z-index: 90;
	display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(47,42,33,.38);
}
.mcard {
	width: 100%; max-width: 460px; padding: 24px 26px 20px;
	background: var(--paper-card);
	border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 2px;
	box-shadow: 0 20px 50px -20px rgba(60,45,25,.6);
}
.mcard h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.mcard p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.7; color: var(--ink-faint); }
.mcard input {
	width: 100%; box-sizing: border-box; padding: 9px 12px;
	font-family: inherit; font-size: 15px;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px;
}
.mcard input:focus { outline: none; border-color: var(--accent); }
.mbar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.mmsg { margin: 12px 0 0; font-size: 13px; color: var(--accent); min-height: 1.4em; }

/* ============================================================================
 *  骨架屏 / 提示 / 面包屑 / 下拉
 * ========================================================================== */

.msg { padding: 34px 0; font-size: 14px; color: var(--ink-faint); }
.msg p { margin: 0; }
.msg .hint {
	margin-top: 7px; font-size: 13px; line-height: 1.75;
	color: var(--ink-faint); opacity: .88;
}
.msg.err { color: var(--accent); }

.skel { padding: 16px 18px 20px; }
.skel.grid {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0;
}
@media (max-width: 1200px) { .skel.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .skel.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .skel.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sk-tile {
	border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
	background: var(--paper-card);
}
.sk-thumb {
	aspect-ratio: 4 / 3;
	background: linear-gradient(90deg, var(--paper-deep) 25%, #efe6cd 37%, var(--paper-deep) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.4s ease infinite;
}
.sk-line {
	height: 12px; margin: 11px 11px 13px;
	border-radius: 2px;
	background: var(--paper-deep);
	animation: shimmer 1.4s ease infinite;
}
.sk-bar {
	height: 30px; margin: 0 18px 10px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--paper-deep) 25%, #efe6cd 37%, var(--paper-deep) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.4s ease infinite;
}

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

.crumb {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 16px; font-size: 13.5px;
}
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { color: var(--rule-strong); }
.crumb .cur { color: var(--ink); }

.fsel {
	flex: 1 1 200px; min-width: 160px;
	padding: 6px 10px;
	font-family: inherit; font-size: 14px;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px;
}
.fsel:focus { outline: none; border-color: var(--accent); }
/* 链接一律不要下划线（索引项现在是 <a>） */
.ri, .ri:hover, .ri:visited, .tile, .crumb a, .chipx, .bcard { text-decoration: none; }
.ri { text-decoration: none !important; }

/* 上传者头像 */
.av {
	width: 22px;
	height: 22px;
	margin-right: 8px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	flex: 0 0 auto;
	vertical-align: middle;
}

.av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 图库瀑布流 */
.wall { margin-top: 34px; }

@media (max-width: 1200px) { .wall { column-count: 3; } }
@media (max-width: 820px)  { .wall { column-count: 2; } }

.wcard {
	break-inside: avoid;
	display: block;
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid var(--rule);
	text-decoration: none !important;
	overflow: hidden;
}

.wcard img {
	display: block;
	width: 100%;
	height: auto;
	background: #f2efe8;
}

.wcard.is-broken { background: var(--paper-deep); }
.wbadge {
	display: block; padding: 44px 0;
	text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--ink-faint);
}

.wcap { padding: 9px 11px 11px; }

.wname {
	font-size: 13px;
	color: var(--ink);
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wtime {
	margin-top: 3px;
	font-size: 12px;
	color: var(--ink-faint);
}

.wall-tail {
	padding: 26px 0 60px;
	text-align: center;
	font-size: 13px;
	color: var(--ink-faint);
}





/* 图库：日期 → 上传者 → 图 */
.wall { display: block; column-count: 1; }

.wgroup { margin-bottom: 26px; }



.wuname {
	font-size: 13.5px;
	color: var(--ink-soft);
	letter-spacing: .02em;
}

.wall-inner {
	column-count: 4;
	column-gap: 14px;
	margin: 0;
}

@media (max-width: 1200px) { .wall-inner { column-count: 3; } }
@media (max-width: 820px)  { .wall-inner { column-count: 2; } }

/* 参考版式：用户头 + 紧排方图 */
.wallbar { margin: 18px 0 40px; text-align: center; }

.wgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}

@media (max-width: 1100px) { .wgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .wgrid { grid-template-columns: repeat(2, 1fr); } }

.wgrid .wcard {
	border: 0;
	margin: 0;
	background: #eee;
}

.wgrid .wcard img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.wrel {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--ink-faint);
}

.wuser .av { width: 24px; height: 24px; }

/* 用户组头里的日期 */


/* 图库：日期一级标题 / 用户二级标题 */
.wdaybox { margin-bottom: 30px; }



.wdaybox:first-child 

.wuser {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 26px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--rule);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}

.wuser .av { width: 24px; height: 24px; }


/* 图库顶部筛选条与综合页同宽同形 */
.wallbar .facets { max-width: 760px; margin: 0 auto; }
.wallbar .facets .frow { border-top: 0; }

/* 图库三级标题：年 > 日 > 用户 */
.wyear {
	margin: 52px 0 26px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ink);
	font-family: var(--serif);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ink);
}

.wall > .wyear:first-child { margin-top: 0; }

.wday {
	margin: 30px 0 12px;
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ink);
}

.wuser {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 26px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--rule);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}

.wuser .av { width: 24px; height: 24px; }

/* 搜索条与按钮之间留白 */
.wallbar > .btn {
	margin-top: 18px;
	display: inline-block;
}

/* ---------------------------------------------------------------- 页脚 */
.site-foot {
	margin-top: 80px;
	padding: 34px 16px 40px;
	border-top: 1px solid #d9d2c2;
	background: #e8e1d2;
	text-align: center;
	font-size: 13px;
	color: #6b6357;
	letter-spacing: .02em;
}

.site-foot a {
	color: #4a4338;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.site-foot a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.site-foot .dot { margin: 0 8px; color: #a89f8e; }


/* ---------------------------------------------------------------- 首页拼贴 */
.hero { text-align: center; }
.hero p { margin-left: auto; margin-right: auto; }

.bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 150px;
	grid-auto-flow: dense;
	gap: 8px;
	margin: 26px 0 34px;
}

.bcard {
	position: relative;
	overflow: hidden;
	background: #eae4d6;
	display: block;
	min-width: 0;
}

.bcard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.bcard:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
	.bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 132px;
	}
}

/* ---------------------------------------------------------------- 账号下拉 */
/* padding-bottom 把 .acct 的可悬停区往下伸 12px（负 margin 抵掉，视觉不变），
   菜单再从 100% 处开始 —— 中间没有空隙，鼠标往下挪不会掉出去 */
.acct {
	position: relative; display: inline-block;
	padding-bottom: 12px; margin-bottom: -12px;
}
.acct-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.acct-name { font-size: 14px; }
.caret { font-size: 11px; color: var(--ink-faint); }
.acct-menu {
	position: absolute; right: 0; top: 100%; z-index: 60;
	min-width: 150px; padding: 6px;
	background: var(--paper-card);
	border: 1px solid var(--rule-strong); border-radius: 2px;
	box-shadow: 0 14px 30px -18px rgba(60,45,25,.6);
	/* 不 display:none —— 淡出后再收，鼠标掉出去有 200ms 缓冲 */
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility 0s linear .2s;
}
/* 隐形桥：菜单顶部再往上盖 10px，斜着移过去也不会掉 */
.acct-menu::before {
	content: ''; position: absolute;
	left: -14px; right: -14px; top: -10px; height: 12px;
}
.acct:hover .acct-menu, .acct:focus-within .acct-menu {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
	transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.acct-item {
	display: block; width: 100%; padding: 7px 10px; box-sizing: border-box;
	font-family: inherit; font-size: 13.5px; text-align: left; color: var(--ink);
	background: none; border: 0; cursor: pointer; text-decoration: none;
}
.acct-item:hover { background: var(--paper-deep); color: var(--accent); }
.acct-sep { height: 1px; margin: 6px 4px; background: var(--rule); }
.acct-out { color: var(--ink-faint); }

/* ---------------------------------------------------------------- 上传 / 管理 */
.uform { padding: 14px 18px 18px; display: grid; gap: 10px; }
.ufield { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ufield-l { width: 84px; flex: 0 0 auto; font-size: 13.5px; color: var(--ink-faint); }
.ufield-h { font-size: 12.5px; color: var(--ink-faint); }
.uinp {
	flex: 1 1 260px; min-width: 160px; padding: 6px 10px; box-sizing: border-box;
	font-family: inherit; font-size: 14px; color: var(--ink);
	background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px;
}
.uinp:focus { outline: none; border-color: var(--accent); }
.ucheck { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.utool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.utool-info { font-size: 13px; color: var(--ink-faint); }
.btn-sm { padding: 3px 10px; font-size: 12.5px; }
.btn-danger { border-color: #d3b7ae; color: var(--accent); }
.btn-danger:hover { background: var(--accent); color: #fdf6e8; border-color: var(--accent); }

.dz {
	margin: 14px 18px; padding: 26px 18px; text-align: center; cursor: pointer;
	border: 1px dashed var(--rule-strong); border-radius: 2px; background: var(--paper);
}
.dz.is-hot { border-color: var(--accent); color: var(--accent); }
.dz-main { font-size: 14.5px; }
.dz-sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }

.uq { padding: 0 18px 6px; }
.uq-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.uq-prev {
	width: 52px; height: 52px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: var(--paper-deep); overflow: hidden;
}
.uq-prev img { width: 100%; height: 100%; object-fit: cover; }
.uq-ext { font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); }
.uq-mid { flex: 1 1 auto; min-width: 0; }
.uq-meta { margin-top: 3px; font-size: 12px; color: var(--ink-faint); }
.uq-st { flex: 0 0 220px; font-size: 13px; color: var(--ink-soft); }
.uq-st a { margin-left: 8px; color: var(--accent); }

.utable-wrap { overflow-x: auto; }
.utable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.utable th {
	text-align: left; font-weight: 400; font-size: 12.5px; color: var(--ink-faint);
	padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.utable td { padding: 8px 12px; border-bottom: 1px dashed var(--rule); vertical-align: middle; }
.utable td img { width: 64px; height: 48px; object-fit: cover; display: block; background: var(--paper-deep); }
.utable .un a { color: var(--ink); text-decoration: none; }
.utable .un a:hover { color: var(--accent); }
.utable .uc { width: 34px; text-align: center; }
.utable .usize, .utable .utime, .utable .ucats { white-space: nowrap; color: var(--ink-soft); }
.utable .uop { white-space: nowrap; }
.utable .uop .btn { margin-right: 6px; }
.ubadge {
	margin-left: 8px; padding: 1px 6px; font-size: 11.5px;
	color: var(--accent); border: 1px solid var(--accent); border-radius: 2px;
}

/* ---------------------------------------------------------------- 批量上传（对齐主站扩展） */
.szt-smart {
	display: inline-flex; align-items: center; gap: 7px;
	margin: 0 18px 6px; padding: 5px 12px;
	font-family: inherit; font-size: 13px; cursor: pointer;
	color: var(--ink-soft); background: var(--paper);
	border: 1px solid var(--rule-strong); border-radius: 2px;
}
.szt-smart.is-on { color: var(--accent); border-color: var(--accent); }
.szt-smart-hint {
	margin: 0 18px 14px; font-size: 12.5px; color: var(--ink-faint);
}
.szt-col-lock {
	display: inline-flex; align-items: center; gap: 3px;
	margin-left: 2px; font-size: 11.5px; color: var(--accent);
	cursor: pointer; user-select: none;
}
.szt-col-lock.is-off { color: var(--ink-faint); }

.szt-tbl .uinp { width: 100%; box-sizing: border-box; flex: none; }
.szt-tbl textarea.uinp { resize: vertical; min-height: 44px; line-height: 1.5; }
.szt-tbl td { vertical-align: top; }
.szt-tbl tr.sztrans-pre { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; }
.szt-tbl tr.sztrans-flash { background: #fff6d8; transition: background .15s ease; }
.szt-tbl tr.sztrans-out { opacity: 0; transform: translateX(14px); transition: opacity .28s ease, transform .28s ease; }
.sz-cell-preview { width: 82px; cursor: pointer; }
.sz-cell-preview img { width: 72px; height: 56px; object-fit: cover; display: block; background: var(--paper-deep); }
.sz-cell-del { width: 30px; text-align: center; }
.szt-del {
	display: inline-block; width: 20px; height: 20px; line-height: 18px;
	font-size: 16px; color: var(--ink-faint); cursor: pointer; border-radius: 2px;
}
.szt-del:hover { color: #b3261e; background: var(--paper-deep); }

.szt-ai {
	color: #2b6bff !important;
	background-color: #f3f7ff !important;
	border-color: #9db8ff !important;
	font-style: italic;
	background-image: linear-gradient(100deg, rgba(43,107,255,0) 25%, rgba(43,107,255,.24) 50%, rgba(43,107,255,0) 75%);
	background-size: 220% 100%; background-repeat: no-repeat;
	animation: szt-ai-sweep 1.25s linear infinite;
}
@keyframes szt-ai-sweep { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } }

.szt-ai-note {
	max-height: 0; opacity: 0; overflow: hidden;
	margin: 0; padding: 0 10px; border: 0 solid #f0e0a8; border-radius: 2px;
	color: #8a6d1b; background: #fff8e1; font-size: 12.5px; line-height: 1.6;
	transition: opacity .4s ease, max-height .4s ease, padding .4s ease, border-width .4s ease;
}
.szt-ai-note.is-show { max-height: 90px; opacity: 1; padding: 6px 10px; border-width: 1px; margin-bottom: 14px; }

.szt-log { padding: 12px 18px 16px; font-size: 13px; line-height: 1.9; }
.szt-log-line { margin-bottom: 4px; }
.szt-log hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 0; }
.szt-ok { color: #2e7d32; }
.szt-fail { color: #b3261e; }
.szt-log a { color: var(--accent); }

/* ---------------------------------------------------------------- 回收站 */
.del-list { padding: 6px 18px 14px; }
.del-row {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 0; border-bottom: 1px dashed var(--rule);
	font-size: 13.5px;
}
.del-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-meta { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-faint); }

.trash-hint { padding: 10px 18px 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); }
.utable .uuser { white-space: nowrap; color: var(--ink-soft); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* 站标：优先用 sitelogo.png，加载失败才回退到 SZ 方块 */
.brand-logo { height: 34px; width: auto; display: block; }
.brand .title { white-space: nowrap; }
@media (max-width: 720px) {
	.brand .title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
}
.ustart { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

/* ---------------------------------------------------------------- 右上角轻提示 */
.toasts {
	position: fixed; top: 78px; right: 26px; z-index: 200;
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
	pointer-events: none;
}
.toast {
	max-width: 340px;
	padding: 9px 14px;
	background: var(--paper-card);
	border: 1px solid var(--rule-strong);
	border-left: 3px solid var(--accent);
	border-radius: 2px;
	box-shadow: 0 14px 30px -20px rgba(60,45,25,.7);
	font-size: 13.5px; line-height: 1.5; color: var(--ink);
	animation: toast-in .18s ease-out;
}
.toast.is-ok { border-left-color: #2e7d32; }
.toast.is-err { border-left-color: #b3261e; }
.toast.is-out { opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; }
@keyframes toast-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
	.toasts { top: 70px; right: 12px; left: 12px; align-items: stretch; }
	.toast { max-width: none; }
}

/* 引用/外链一行 */
.linkrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.linklab { width: 72px; flex: 0 0 auto; font-size: 12.5px; color: var(--ink-faint); }
.linkurl {
	flex: 1 1 auto; min-width: 0; flex-basis: auto;
	font-size: 12.5px; font-family: ui-monospace, Consolas, monospace;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 用户页 */
.uprofile { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }
.upav {
	width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%;
	overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: var(--paper-deep);
}
.upav img { width: 100%; height: 100%; object-fit: cover; }
.upav .av-i { font-size: 24px; color: var(--ink-faint); }
.upstat { font-size: 15px; color: var(--ink); }
.upline { margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); }
.wuname { color: var(--ink); text-decoration: none; }
.wuname:hover { color: var(--accent); }

/* 用户名链接（文件页 / 表格 / 时间线） */
.ulink { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.ulink:hover { color: var(--accent); }

/* ---------------------------------------------------------------- 图片骨架屏 */
.tile-img, .wcard .wc-img { position: relative; }
.tile-img::before, .wcard .wc-img::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(100deg, var(--paper-deep) 30%, var(--paper) 50%, var(--paper-deep) 70%);
	background-size: 220% 100%;
	animation: sk-shimmer 1.2s linear infinite;
}
.tile-img.is-loaded::before, .wcard .wc-img.is-loaded::before { display: none; }
.tile-img img { position: relative; z-index: 1; opacity: 0; transition: opacity .25s ease; }
.tile-img.is-loaded img { opacity: 1; }
@keyframes sk-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* 键盘流：当前选中项 */
.is-cur { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* 上传页的「图片使用规范」提示框 */
.rulebox {
	margin: 0 0 22px;
	padding: 11px 14px;
	background: var(--paper-card);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: 2px;
	font-size: 13.5px; line-height: 1.75; color: var(--ink-soft);
}
.rulebox a { color: var(--accent); }

/* ---------------------------------------------------------------- 删除申请 */
.reqlist { padding: 4px 18px 14px; }
.reqrow { padding: 12px 0; border-bottom: 1px dotted var(--rule); }
.reqrow:last-child { border-bottom: 0; }
.reqtop { display: flex; align-items: baseline; gap: 10px; }
.reqby { font-size: 13.5px; color: var(--ink); }
.reqtime { font-size: 12px; color: var(--ink-faint); }
.reqstat { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.reqreason { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.reqnames { margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); word-break: break-all; }
.reqops { margin-top: 8px; display: flex; gap: 8px; }

/* 我的文件：批量条 */
.batchbar { gap: 10px; }
.batch-del { color: var(--accent); border-color: var(--accent); }

/* 删除申请里的文件名链接 */
.reqfile { color: var(--ink-soft); text-decoration: none; }
.reqfile:hover { color: var(--accent); text-decoration: underline; }

/* ================================================================ 移动端适配
 * 桌面端是五列网格 + 340px 侧栏 + 6vw 边距，手机上要退成两列、单栏、贴边。
 * 只动布局，不动信息结构：该有的字段一个不少，只是换行排。 */

@media (max-width: 900px) {
	.top { padding: 10px 16px; gap: 8px 12px; }
	.brand-logo { height: 30px; }
	/* 手机上一行放得下全名：14 个字 × 15px ≈ 210px，加上 logo 和头像刚好 */
	.brand { flex: 1 1 auto; min-width: 0; }
	.title {
		font-size: 15px; line-height: 1.3; letter-spacing: .02em;
		max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap;
	}
	/* header 的模糊会给 fixed 子元素造包含块，移动端关掉它 */
	.top { backdrop-filter: none; -webkit-backdrop-filter: none; }

	/* 导航变底部悬浮栏：图标在上、字在下，六个均分 */
	.nav {
		position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
		order: 0; flex-basis: auto; flex-wrap: nowrap; overflow: visible;
		margin: 0; padding: 6px 4px;
		display: flex; justify-content: space-around; gap: 0;
		background: var(--paper-card);
		border: 1px solid var(--rule);
		border-radius: 14px;
		box-shadow: 0 8px 28px rgba(52, 38, 20, .14);
	}
	.nav a {
		flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
		gap: 3px; padding: 5px 0; border: 0; font-size: 11px; line-height: 1;
	}
	.nav a svg { width: 20px; height: 20px; }
	.nav a.is-current { color: var(--accent); }

	/* .brand .title 在桌面端有 150px 截断规则，优先级更高，这里要显式覆盖 */
	.brand .title {
		max-width: none; overflow: visible; text-overflow: clip;
		font-size: 15px; white-space: nowrap;
	}

	main { padding-bottom: 112px; }
	button.to-top { bottom: 82px; }
	.nav::-webkit-scrollbar { display: none; }

	.acct-name { display: none; }

	main { padding: 16px 16px 56px; }

	.hero { padding: 14px 0 18px; margin-bottom: 18px; }
	.hero h1 { font-size: 26px; letter-spacing: .02em; }
	.hero p { font-size: 14px; margin-bottom: 14px; }

	.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.detail { grid-template-columns: 1fr; }

	.utool { gap: 8px; }
	.utool .uinp, .utool .fsel, .utool input[type=date] { flex: 1 1 100% !important; max-width: none; }
	.mcard { width: 92vw; max-width: 92vw; }
	h1.vt { font-size: 26px; }
}

@media (max-width: 600px) {
	.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.hero h1 { font-size: 22px; }
	.hero p { font-size: 13.5px; }

	/* 首页拼贴：24 栏的拼贴图在手机上会碎成一条条，直接退成两列方块 */
	.mosaic {
		grid-template-columns: repeat(2, 1fr) !important;
		grid-template-rows: none !important;
		grid-auto-rows: 1fr !important;
		aspect-ratio: auto !important;
		gap: 4px;
		margin: 16px 0 26px;
	}
	.mosaic > a,
	.mosaic > a:nth-child(n) {
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: 4 / 3;
	}
	.mosaic > a img { height: 100%; object-fit: cover; }

	.tile-name { font-size: 12px; }
	.tile-time { font-size: 11px; }

	.wgrid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
	.wyear { font-size: 20px; }
	.wday { font-size: 15px; }
	.wuser { flex-wrap: wrap; gap: 6px; }
	.wrel { margin-left: auto; }

	.utable td img { width: 44px; height: 34px; }
	.utable th, .utable td { padding: 6px 8px; font-size: 12.5px; }
	.utable .uc { width: 26px; }

	.frow { display: block; }
	.frow .flabel { display: block; margin: 0 0 4px; }

	.uprofile { gap: 12px; }
	.upav { width: 52px; height: 52px; }
	.upstat { font-size: 14px; }

	.site-foot { flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; padding: 20px 16px; }
	.to-top { right: 14px; bottom: 82px; }
	.tile-img { border-radius: 2px; }
}

/* ---------------------------------------------------------------- 导航图标 */
.nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav a svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; }

/* 桌面：导航在 header 里真正居中（按视口中线对齐，不受左右宽度差影响） */
@media (min-width: 1100px) {
	.nav { position: absolute; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 900px) {
	/* 页脚加高：内容上下留白，底部再让出悬浮栏的位置 */
	.site-foot {
		margin-top: 56px;
		min-height: 200px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;     /* 文字靠上，把下方空间留给「回到顶部」和底栏 */
		justify-content: center;
		gap: 4px 8px;
		padding: 44px 16px 150px;
	}
}

/* ================================================================ 修正：溢出
 * 1) 底部导航在真机上被撑出屏幕（只有前 3 个可见）
 * 2) 文件页里的 <ref> 长 URL 不换行，把面板顶出容器 */

/* 长串（URL、无空格文本）一律允许断行 */
.block,
.block *,
.meta .mv,
.mw-parser-output {
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 900px) {
	/* 用「居中 + 固定宽度」而不是 left/right，避免某些机型算出的宽度超出视口 */
	.nav {
		left: 50%; right: auto; transform: translateX(-50%);
		width: min(680px, calc(100vw - 24px));
		padding: 6px 2px;
	}
	.nav a { flex: 1 1 0; min-width: 0; padding: 5px 2px; }
	.nav a span { font-size: 11px; white-space: nowrap; }
	.nav a svg { width: 20px; height: 20px; flex: 0 0 auto; }

	/* 页脚再高一点：文字靠上，下方留给悬浮按钮和底栏 */
	.site-foot {
		min-height: 260px;
		padding: 48px 16px 168px;
		align-items: flex-start;
	}
}

/* 触屏：账号菜单靠 .is-open 展开（没有 hover） */
.acct.is-open .acct-menu { display: block; }

/* 账号区改成按钮：去掉链接样式，点一下开/关菜单 */
button.acct-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* ================================================================ 毛玻璃
 * 底栏和顶栏都做「高斯模糊 + 半透明」。
 * 注意：backdrop-filter 会给 fixed 子元素制造包含块，所以顶栏的模糊放在
 * ::before 伪元素上，.top 自己不设该属性 —— 这样底部 fixed 导航仍然相对视口定位。 */

@media (max-width: 900px) {
	.top {
		background: transparent;
		isolation: isolate;            /* 让伪元素留在 header 自己这一层 */
	}
	.top::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(253, 250, 241, .88);
		backdrop-filter: saturate(150%) blur(14px);
		-webkit-backdrop-filter: saturate(150%) blur(14px);
	}

	.nav {
		background: rgba(253, 250, 241, .88);
		backdrop-filter: saturate(180%) blur(18px);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		border: 1px solid rgba(217, 210, 194, .75);
		box-shadow: 0 10px 34px rgba(52, 38, 20, .16);
	}
}

/* 桌面：顶栏本来就是半透明 + 模糊，这里把模糊再加重一点，和手机端观感一致 */
@media (min-width: 901px) {
	.top {
		background: rgba(253, 250, 241, .90);
		backdrop-filter: saturate(150%) blur(14px);
		-webkit-backdrop-filter: saturate(150%) blur(14px);
	}
}

/* 回到顶部：同样做毛玻璃（它是 fixed 元素本身，不受包含块影响） */
.to-top {
	background: rgba(253, 250, 241, .86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-color: rgba(217, 210, 194, .85);
	box-shadow: 0 8px 26px -8px rgba(90, 75, 45, .45);
}

/* ================================================================ 动效
 * 只做 CSS 过渡/关键帧，不写 JS：视图切换淡入、图块错峰浮现、
 * 底栏与回到顶部滑入、账号菜单展开。全部遵循 prefers-reduced-motion。 */

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

@keyframes tile-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes bar-up {
	from { opacity: 0; transform: translate(-50%, 24px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 每次渲染都会重建 .viewbody，所以动画自然重放 */
.viewbody { animation: view-in .24s ease-out both; }

/* 图块错峰：只对前 12 个给延迟，后面的直接出现，避免翻页时等动画 */
.grid .tile { animation: tile-in .28s ease-out both; }
.grid .tile:nth-child(1)  { animation-delay: .00s; }
.grid .tile:nth-child(2)  { animation-delay: .02s; }
.grid .tile:nth-child(3)  { animation-delay: .04s; }
.grid .tile:nth-child(4)  { animation-delay: .06s; }
.grid .tile:nth-child(5)  { animation-delay: .08s; }
.grid .tile:nth-child(6)  { animation-delay: .10s; }
.grid .tile:nth-child(7)  { animation-delay: .12s; }
.grid .tile:nth-child(8)  { animation-delay: .14s; }
.grid .tile:nth-child(9)  { animation-delay: .16s; }
.grid .tile:nth-child(10) { animation-delay: .18s; }
.grid .tile:nth-child(11) { animation-delay: .20s; }
.grid .tile:nth-child(12) { animation-delay: .22s; }
.grid .tile:nth-child(n+13) { animation-delay: .24s; }

/* 回到顶部：出现时从下方轻轻浮起 */
.to-top { transform: translateY(8px); transition: opacity .2s ease, visibility .2s ease, transform .22s ease, border-color .15s ease, color .15s ease; }
.to-top.is-on { transform: none; }

/* 账号菜单：展开时略微下移淡入 */
.acct-menu { transition: opacity .16s ease, transform .16s ease; }
.acct:not(.is-open):not(:hover):not(:focus-within) .acct-menu { transform: translateY(-6px); }

@media (max-width: 900px) {
	/* 底部导航从屏幕下方滑上来 */
	.nav { animation: bar-up .32s cubic-bezier(.22, .61, .36, 1) both; }
}

/* 用户偏好减少动效时全部关掉 */
@media (prefers-reduced-motion: reduce) {
	.viewbody,
	.grid .tile,
	.nav,
	.to-top,
	.acct-menu { animation: none !important; transition: none !important; }
}

/* 页脚友情链接 */
.foot-links {
	flex-basis: 100%;
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.9;
	color: #8b8272;
}
.foot-links-label { margin-right: 8px; color: #a89f8e; }
.foot-links a { color: #6b6357; }
.foot-links a:hover { color: var(--accent); }

/* 页脚今日访问量 */
.foot-uv {
	flex-basis: 100%;
	margin-top: 6px;
	font-size: 12px;
	color: #a89f8e;
}

/* ================================================================ 上传表格 → 手机卡片
 * 桌面是表格（方便纵向对比 AI 结果），手机上每行折成一张卡片：
 * 预览图在最上，四个字段竖排、占满宽度，删除按钮固定在右上角。 */

@media (max-width: 900px) {
	.szt-tbl thead { display: none; }
	.szt-tbl,
	.szt-tbl tbody,
	.szt-tbl tr,
	.szt-tbl td { display: block; width: 100%; }

	.szt-tbl tr {
		position: relative;
		margin: 0 0 14px;
		padding: 12px;
		background: var(--paper-card);
		border: 1px solid var(--rule);
		border-radius: 4px;
	}

	.szt-tbl td { border: 0; padding: 6px 0; }
	.szt-tbl td::before {
		display: block;
		margin-bottom: 3px;
		font-size: 11.5px;
		color: var(--ink-faint);
	}
	.szt-tbl td:nth-child(2)::before { content: '文件名'; }
	.szt-tbl td:nth-child(3)::before { content: '摘要'; }
	.szt-tbl td:nth-child(4)::before { content: '分类'; }
	.szt-tbl td:nth-child(5)::before { content: '许可协议'; }

	/* 预览：整行宽度 + 固定比例，别再是 64×48 的小方块 */
	.szt-tbl td.sz-cell-preview { padding: 0 0 10px; }
	.szt-tbl td.sz-cell-preview::before { content: none; }
	.szt-tbl td.sz-cell-preview img {
		width: 100%;
		height: auto;
		max-height: 200px;
		object-fit: cover;
		border-radius: 3px;
	}

	/* 删除按钮挪到卡片右上角，做成醒目的圆形红钮 */
	.szt-tbl td:last-child {
		position: absolute;
		top: 8px;
		right: 8px;
		padding: 0;
		width: auto;
		z-index: 2;
	}
	.szt-tbl td:last-child::before { content: none; }
	.szt-tbl .szt-del {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--accent);
		color: #fdf6e8;
		font-size: 16px;
		line-height: 1;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	}

	.szt-tbl input,
	.szt-tbl textarea,
	.szt-tbl select { width: 100%; box-sizing: border-box; }
}

/* 上传页：移动端同步条（桌面端隐藏，表头已有各自的锁） */
.szt-syncbar { display: none; }

@media (max-width: 900px) {
	.card-head { flex-wrap: wrap; }
	.szt-syncbar {
		flex-basis: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 0 0;
	}
	.szt-syncbar .szt-col-lock {
		flex: 1 1 auto;
		justify-content: center;
		padding: 6px 10px;
		background: var(--paper-deep);
		border-radius: 3px;
		cursor: pointer;
		font-size: 12px;
	}
	.szt-syncbar .szt-col-lock.is-off { opacity: .55; }
}

/* ================================================================ 移动端页脚（重排）
 * 原来是把所有元素塞成一行让浏览器自己折，结果「回到主站」单独掉一行、
 * 友情链接在词中间断行。这里改成显式的四段竖排、居中。 */

@media (max-width: 900px) {
	.site-foot {
		display: block;
		min-height: 0;
		margin-top: 40px;
		padding: 26px 16px 108px;
		text-align: center;
		line-height: 1.9;
	}

	.foot-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		font-size: 13px;
	}
	.foot-main .dot { display: none; }

	.foot-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px 10px;
		margin-top: 14px;
		font-size: 12.5px;
	}
	.foot-links-label { flex-basis: 100%; margin: 0 0 2px; }
	.foot-links .dot { display: none; }

	.foot-uv {
		margin-top: 12px;
		font-size: 12px;
		opacity: .8;
	}
}

/* 上传框里的支持格式一行 */
.dz-ext { margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .01em; }

/* 地区地图：小屏上 SVG 会整体缩小，字跟着变小 —— 按视口放大字号 */
@media (max-width: 900px) {
	.szmap .dgrp text { font-size: 22px; }
	.inset { transform: scale(.9); transform-origin: bottom right; }
}
@media (max-width: 500px) {
	.szmap .dgrp text { font-size: 28px; }
	.inset-note { display: none; }
}

/* 地区地图：手机上可拖拽/双指缩放 —— 关掉该区域的页面滚动手势，
   否则一拖就变成滚页面；右侧留出重置按钮位置。 */
@media (hover: none) {
	.mapwrap { position: relative; }
	.mapwrap .szmap { touch-action: none; }
	.map-reset {
		position: absolute;
		right: 10px;
		bottom: 10px;
		z-index: 3;
		background: rgba(253, 250, 241, .92);
		font-size: 12px;
		padding: 4px 10px;
	}
}

/* 小屏：深汕插图会压住地图和按钮，直接收起来（列表里仍有深汕那一行） */
@media (max-width: 600px) {
	.inset { display: none; }
	.map-reset {
		top: 8px;
		right: 8px;
		bottom: auto;
	}
}

/* 地区/公司列表：行末的图片数 */
.ri { align-items: center; }
.ri .rl { margin-left: auto; color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }

/* 分类输入建议 */
.cat-sug {
	position: fixed;
	z-index: 95;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px;
	background: var(--paper-card);
	border: 1px solid var(--rule-strong);
	border-radius: 3px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.cat-sug-item {
	display: block;
	width: 100%;
	padding: 6px 12px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cat-sug-item:hover,
.cat-sug-item.is-on { background: var(--paper-deep); color: var(--accent); }

/* 那年今日：年份标题 + 右侧小号张数 */
.mem-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 34px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ink);
}
.mem-head .mem-title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: .02em;
}
.mem-head .mem-count { font-size: 12.5px; color: var(--ink-faint); }
@media (max-width: 600px) {
	.mem-head .mem-title { font-size: 24px; }
}

/* 回收站：已还原的状态标记 */
.del-done {
	font-size: 12px;
	color: var(--ink-faint);
	border: 1px dashed var(--rule);
	border-radius: 2px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* 文件页：无权限覆盖时的说明 */
.act-tip { font-size: 12.5px; color: var(--ink-faint); align-self: center; }

/* 会话过期提示条 */
.szt-expired {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0;
	padding: 8px 12px;
	border-left: 3px solid #a33;
	background: #fbf3ee;
	font-size: 13px;
	color: #7a2f22;
}