/* ============================================================================
 *  图像记忆库 · 公共样式
 *
 *  index.html（图库）和 file.html（文件详情）共用这一份。
 *  两个页面的顶部 banner 长得一样、行为一样（滚动吸顶），全靠这里。
 *  页面各自的样式写在页面里的 <style>，不要在这里加。
 * ========================================================================== */

:root {
	--paper:      #f7f1e1;
	--paper-card: #fdfaf1;
	--paper-deep: #efe7d4;
	--rule:       #d8ccb0;
	--rule-strong:#c3b593;
	--ink:        #2f2a21;
	--ink-soft:   #6a6151;
	--ink-faint:  #9a8f79;
	--accent:     #8c3a2b;
	--serif: "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC",
	         "Songti SC", "STSong", "SimSun", serif;
}

* { box-sizing: border-box; }

/* hidden 属性要真的隐掉：像 .subcats { display:flex } 这种规则会盖掉浏览器默认的
   [hidden]{display:none}，元素就变成一条空壳留在页面上 */
[hidden] { display: none !important; }

html { background: var(--paper-deep); }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- 顶部 banner
 * sticky：滚动时吸在页顶，内容从下面滑过。
 * 三个分区：品牌（左）· 导航（中）· 账号（右）。 */

.top {
	position: sticky;
	top: 0;
	z-index: 50;

	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;

	padding: 12px 6vw;

	background: rgba(253, 250, 241, 0.95);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);

	border-bottom: 1px solid var(--rule);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* 返回：浮在 banner 左侧留白里，不占文档流
 *
 * 用 absolute 而不是普通流内元素 —— 它不推挤品牌和导航，
 * 有没有这个箭头，brand 的位置都一模一样，切换页面不跳。
 */
.back {
	position: absolute;
	left: max( 10px, calc( 6vw - 46px ) );
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: var(--paper-card);
	color: var(--ink-soft);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.back:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--paper);
}
.back svg {
	display: block;
	width: 17px;
	height: 17px;
}

/* sticky 元素自己是定位上下文，absolute 会相对 .top 定位 */
.top { position: sticky; }

/* 品牌区 */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}

.mark {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fdf6e8;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 2px;
}

.title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	white-space: nowrap;
}

/* 导航区 */
.nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	font-size: 14.5px;
}

.nav a {
	display: inline-block;
	padding: 5px 12px;
	text-decoration: none;
	color: var(--ink-soft);
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.nav a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.nav a.is-current {
	color: var(--ink);
	border-bottom-color: var(--accent);
	font-weight: 700;
}

/* 账号区 */
.account {
	margin-left: auto;
	font-size: 13.5px;
	color: var(--ink-faint);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.account a,
.account button {
	font-family: inherit;
	font-size: 13.5px;
	color: var(--ink-soft);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.account a:hover,
.account button:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* 右侧槽位：图库放「共 N 张」，详情页放「← 返回图库」 */
.slot {
	margin-left: auto;
	font-size: 13.5px;
	color: var(--ink-faint);
	white-space: nowrap;
}
.slot a {
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.slot a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------- 主体 */

main {
	padding: 26px 6vw 70px;
	max-width: 1560px;
	margin: 0 auto;
}

.status {
	font-size: 14px;
	color: var(--ink-soft);
	padding: 18px 0;
	text-align: center;
}
.status.err {
	color: var(--accent);
	text-align: left;
	white-space: pre-wrap;
}

/* ---------------------------------------------------------------- 通用按钮 */

.btn {
	display: inline-block;
	padding: 6px 16px;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.6;
	text-decoration: none;
	color: var(--ink);
	background: var(--paper-card);
	border: 1px solid var(--rule-strong);
	border-radius: 2px;
	cursor: pointer;
}
.btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.btn[disabled] {
	opacity: 0.4;
	cursor: default;
}
.btn[disabled]:hover {
	border-color: var(--rule-strong);
	color: var(--ink);
}

.btn-primary {
	background: var(--accent);
	border-color: #7a3225;
	color: #fdf6e8;
}
.btn-primary:hover {
	background: #a2543f;
	border-color: #7a3225;
	color: #fdf6e8;
}

/* ---------------------------------------------------------------- 表格 */

.sect-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rule);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--paper-card);
}

th, td {
	border: 1px solid var(--rule);
	padding: 8px 11px;
	vertical-align: middle;
	text-align: left;
}

thead th {
	background: var(--paper-deep);
	font-weight: 700;
	white-space: nowrap;
}

tbody tr:hover {
	background: var(--paper-deep);
}

/* 回到顶部：右下角，滚过一屏才出现 */
.to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;

	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: var(--paper-card);
	color: var(--ink-soft);
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(90, 75, 45, .45);

	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease,
	            border-color .15s ease, color .15s ease;
}
.to-top.is-on {
	opacity: 1;
	visibility: visible;
}
.to-top:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.to-top svg {
	display: block;
	width: 22px;
	height: 22px;
}

@media (max-width: 600px) {
	.to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
	.to-top svg { width: 20px; height: 20px; }
}

/* 图块：文件名加粗放大，时间小一号压下去
   （!important 是因为各页内联 <style> 里还留着一份旧的 .tile-name，内联优先级更高） */
.tile-name {
	display: block;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	color: var(--ink) !important;
	letter-spacing: 0.01em;
	padding: 10px 11px 4px !important;
	border-top: 1px solid var(--rule);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tile-time {
	display: block;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--ink-faint) !important;
	padding: 0 11px 10px !important;
	margin: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 非图片文件（音频 / 文档）的占位符号 */
.tile-img.is-file {
	font-size: 34px;
	line-height: 1;
	color: var(--ink-faint);
	background: var(--paper-deep);
}

/* ---------------------------------------------------------------- 窄屏 */

@media (max-width: 600px) {
	.top {
		padding: 12px 18px;
		gap: 10px;
	}
	.title { font-size: 16px; }
	.mark { width: 30px; height: 30px; font-size: 13px; }
	.slot { font-size: 12.5px; }
	main { padding: 20px 18px 50px; }
}