/* 基础重置 */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }

/* 容器 */
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

/* 标题 */
h1 { margin: 1rem 0; font-size: 1.8rem; }
h1 a { text-decoration: none; color: inherit; }

/* 表单元素 */
label { display: block; margin: .5rem 0 .25rem; font-weight: 600; font-size: 1.05rem; }
input[type="text"]:not(.search-form input[type="text"]), textarea, input[type="file"] { width: 100%; padding: .75rem; border: 1px solid #ddd; border-radius: .375rem; font-size: 16px; }
input[type="datetime-local"] { width: 100%; padding: .75rem; border: 1px solid #ddd; border-radius: .375rem; font-size: 18px; }
button:not(.search-form button):not(.btn-edit):not(.btn-delete):not(.btn-restore):not(.btn-permanent-delete) { background: #007bff; color: white; border: none; padding: .75rem 1.5rem; border-radius: .375rem; cursor: pointer; font-size: 1rem; }
button:hover { background: #0056b3; }

/* 搜索表单 */
.search-form { 
	margin: 1rem 0; 
	display: flex; 
	gap: .5rem; 
	align-items: stretch; 
	flex-wrap: nowrap;
}
.search-form input[type="text"] { 
	flex: 1; 
	min-width: 0; 
	width: auto;
	height: 44px; 
	padding: .75rem;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: .375rem;
	box-sizing: border-box;
	margin: 0;
	line-height: 1;
}
.search-form button { 
	white-space: nowrap; 
	height: 44px; 
	flex-shrink: 0;
	padding: .75rem 1rem;
	font-size: 1rem;
	background: #007bff;
	color: white;
	border: none;
	border-radius: .375rem;
	cursor: pointer;
	box-sizing: border-box;
	margin: 0;
	line-height: 1;
}
.search-form button:hover { 
	background: #0056b3; 
}

/* 备忘录卡片 */
.note { 
	background: white; 
	border: 1px solid #ddd; 
	border-radius: .5rem; 
	padding: 1rem; 
	margin: 1rem 0; 
	overflow: hidden;
}

/* 备忘录操作按钮 */
.note-actions {
	display: flex;
	gap: .5rem;
	margin: .5rem 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.btn-edit, .btn-delete {
	padding: .5rem 1rem;
	text-decoration: none;
	border-radius: .375rem;
	font-size: .9rem;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	text-align: center;
	box-sizing: border-box;
	flex-shrink: 0;
}

.btn-edit {
	background: #f8f9fa;
	color: #495057;
	border: 1px solid #dee2e6;
}

.btn-edit:hover {
	background: #e9ecef;
}

.btn-delete {
	background: #dc3545;
	color: white;
	border: 1px solid #dc3545;
}

.btn-delete:hover {
	background: #c82333;
	border-color: #c82333;
}

/* 回收站按钮样式 */
.btn-restore, .btn-permanent-delete {
	padding: .5rem 1rem;
	text-decoration: none;
	border-radius: .375rem;
	font-size: .9rem;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	text-align: center;
	box-sizing: border-box;
	flex-shrink: 0;
}

.btn-restore {
	background: #28a745;
	color: white;
	border: 1px solid #28a745;
}

.btn-restore:hover {
	background: #218838;
	border-color: #218838;
}

.btn-permanent-delete {
	background: #dc3545;
	color: white;
	border: 1px solid #dc3545;
}

.btn-permanent-delete:hover {
	background: #c82333;
	border-color: #c82333;
}



/* 文件卡片 */
.files { display: grid; gap: 1rem; margin: 1rem 0; }
.file-card { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem; padding: .75rem; text-align: center; }
.file-card img { max-width: 100%; height: auto; border-radius: .25rem; }
.file-card .file-name { margin-top: .5rem; font-size: .9rem; color: #666; word-break: break-all; }

/* 内联图片 */
.inline-img { max-width: 200px; max-height: 150px; cursor: pointer; border-radius: .25rem; border: 1px solid #ddd; }

/* 内联视频 */
video[controls] { 
	max-width: 300px; 
	max-height: 200px; 
	width: 100%; 
	height: auto; 
	border-radius: .375rem; 
	border: 1px solid #ddd; 
	background: #000; 
	cursor: pointer; 
	transition: transform 0.2s ease; 
}
video[controls]:hover { 
	transform: scale(1.02); 
	box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}

/* 备忘录页面中的视频 - 可以显示更大 */
.note video[controls] { 
	max-width: 500px; 
	max-height: 350px; 
}





/* 模态框 */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.modal.show { display: flex; align-items: center; justify-content: center; }
.modal-content { max-width: 90%; max-height: 90%; object-fit: contain; }
.modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }

/* 响应式设计 */
@media (min-width: 768px) {
	.files { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 1024px) {
	.files { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (min-width: 1200px) {
	.files { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* 移动端优化 */
@media (max-width: 767px) {
	.container { padding: .75rem; }
	h1 { font-size: 1.5rem; margin: .75rem 0; }
	
	/* 搜索表单移动端优化 */
	.search-form { 
		flex-direction: row; 
		align-items: center; 
		gap: .5rem; 
		flex-wrap: nowrap;
	}
	.search-form input[type="text"] { 
		flex: 1; 
		width: auto; 
		font-size: 16px; 
		padding: .75rem; 
		height: 44px; 
		min-width: 0;
		box-sizing: border-box;
	}
	.search-form button { 
		flex: none; 
		width: auto; 
		padding: .75rem 1rem; 
		font-size: .9rem; 
		height: 44px;
		white-space: nowrap;
		min-width: fit-content;
		box-sizing: border-box;
	}
	
	/* 备忘录卡片移动端优化 */
	.note { 
		padding: .75rem; 
		margin: .75rem 0; 
		overflow: hidden; 
	}
	
	/* 备忘录操作按钮移动端优化 */
	.note-actions {
		gap: .5rem;
		margin: .5rem 0;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	
	.btn-edit, .btn-delete {
		width: 70px;
		text-align: center;
		padding: .75rem .5rem;
		font-size: .9rem;
		white-space: nowrap;
		height: 44px;
		box-sizing: border-box;
		flex: none;
		flex-shrink: 0;
		margin: 0;
	}
	
	/* 回收站按钮移动端优化 */
	.btn-restore, .btn-permanent-delete {
		width: 85px;
		text-align: center;
		padding: .75rem .5rem;
		font-size: .9rem;
		white-space: nowrap;
		height: 44px;
		box-sizing: border-box;
		flex: none;
		flex-shrink: 0;
		margin: 0;
	}
	

	
	/* 按钮移动端优化 - 只对主要按钮应用全宽，排除操作按钮 */
	button:not(.search-form button):not(.btn-edit):not(.btn-delete):not(.btn-restore):not(.btn-permanent-delete) { 
		width: 100%; 
		padding: .875rem; 
		font-size: 1rem; 
		margin: .5rem 0; 
	}
	
	/* 文件网格移动端优化 */
	.files { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
	
	/* 表单元素移动端优化 */
	input[type="text"]:not(.search-form input[type="text"]), textarea, input[type="file"], input[type="datetime-local"] { 
		font-size: 16px; 
		padding: .875rem; 
		margin-bottom: .5rem; 
		min-height: 48px;
	}
	

}

/* 超小屏幕优化 */
@media (max-width: 480px) {
	.container { padding: .5rem; }
	.files { grid-template-columns: 1fr; }
	
	/* 搜索表单在超小屏幕上的优化 */
	.search-form { 
		gap: .25rem; 
		flex-wrap: nowrap;
	}
	.search-form input[type="text"] { 
		font-size: 16px; 
		padding: .625rem; 
		height: 44px; 
		min-width: 0;
		flex: 1;
		box-sizing: border-box;
	}
	.search-form button { 
		padding: .625rem .75rem; 
		height: 44px; 
		font-size: .85rem;
		flex: none;
		min-width: fit-content;
		box-sizing: border-box;
	}
	
	/* 备忘录卡片在超小屏幕上的优化 */
	.note { padding: .5rem; }
	
	/* 备忘录操作按钮超小屏幕优化 */
	.note-actions {
		gap: .25rem;
		margin: .25rem 0;
		justify-content: flex-end;
	}
	
	.btn-edit, .btn-delete {
		width: 65px;
		font-size: .85rem;
		padding: .5rem .25rem;
		height: 40px;
		flex: none;
		flex-shrink: 0;
		margin: 0;
		box-sizing: border-box;
	}
	
	/* 回收站按钮超小屏幕优化 */
	.btn-restore, .btn-permanent-delete {
		width: 75px;
		font-size: .85rem;
		padding: .5rem .25rem;
		height: 40px;
		flex: none;
		flex-shrink: 0;
		margin: 0;
		box-sizing: border-box;
	}
	

	
	/* 主要按钮在超小屏幕上的优化 */
	button:not(.search-form button):not(.btn-edit):not(.btn-delete):not(.btn-restore):not(.btn-permanent-delete) { 
		padding: .75rem; 
		min-height: 44px; 
		font-size: .95rem; 
	}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1a1a1a;
		--text: #e0e0e0;
		--card: #2d2d2d;
		--border: #404040;
		--primary: #4dabf7;
	}
	
	body { background-color: var(--bg); color: var(--text); }
	.note { background-color: var(--card); border-color: var(--border); }
	.file-card { background-color: var(--card); border-color: var(--border); }
	input[type="text"]:not(.search-form input[type="text"]), textarea, input[type="file"], input[type="datetime-local"] { 
		background-color: var(--card); 
		border-color: var(--border); 
		color: var(--text); 
	}

	.btn-edit { background-color: var(--card); border-color: var(--border); color: var(--text); }
	.btn-edit:hover { background-color: var(--bg); }
	.btn-restore { background-color: #28a745; border-color: #28a745; color: white; }
	.btn-restore:hover { background-color: #218838; border-color: #218838; }
	.btn-permanent-delete { background-color: #dc3545; border-color: #dc3545; color: white; }
	.btn-permanent-delete:hover { background-color: #c82333; border-color: #c82333; }
} 

/* 确保音视频播放器在列表中可见并自适应 */
.note audio, .note video {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: .5rem;
}