/* ============================================================
   首页样式（shadcn / zinc light）
   ============================================================ */
/* 首页整体在视口内垂直居中 */
body.home {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.home .container {
	flex: 1 0 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-logo {
	display: block;
	margin: 0 auto -1.25rem;
	width: clamp(3.25rem, 13vw, 5.5rem);
	height: auto;
}

.home-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* 入口卡片 → shadcn Card */
.entry {
	display: block;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
	padding: 32px 24px;
	text-align: center;
	text-decoration: none;
	color: hsl(var(--foreground));
	transition: background .15s, box-shadow .25s ease, transform .25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.entry:hover {
		border-color: hsl(var(--border));
		box-shadow: var(--shadow-card-hover);
		transform: translateY(-3px);
	}
}

.entry:active {
	box-shadow: var(--shadow-card-active);
	transform: translateY(-1px);
}

.entry .icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
	display: block;
	color: hsl(var(--foreground));
}

.entry .title {
	font-size: 20px;
	font-weight: 600;
	color: hsl(var(--foreground));
}

.entry .desc {
	font-size: 14px;
	color: hsl(var(--muted-foreground));
	margin-top: 8px;
}

/* 局域网地址栏 → 深色 chip（primary 底色） */
.lan-addr-bar {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 auto 24px;
	padding: 10px;
	background: hsl(var(--primary));
	border-radius: var(--radius);
	color: hsl(var(--primary-foreground));
	letter-spacing: .3px;
	font-family: var(--font-mono);
	font-size: 14px;
	user-select: none;
	transition: opacity .2s;
}

@media (hover: hover) and (pointer: fine) {
	.lan-addr-bar:hover {
		opacity: .92;
	}
}

.lan-qr,
.lan-copy {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	box-sizing: border-box;
	border: none;
	border-radius: calc(var(--radius) - 6px);
	background: hsl(var(--primary-foreground) / 0.15);
	color: hsl(var(--primary-foreground));
	cursor: pointer;
	transition: background .15s, color .15s;
}

.lan-qr:active,
.lan-copy:active {
	background: hsl(var(--primary-foreground) / 0.28);
}

/* 点击按钮 / ESC 关闭弹窗后焦点仍留在按钮上，会残留浏览器默认蓝色线框：
   鼠标触发不显示，仅键盘导航（Tab）显示焦点环，保证可访问性 */
.lan-qr:focus,
.lan-copy:focus {
	outline: none;
}
.lan-qr:focus-visible,
.lan-copy:focus-visible {
	outline: 2px solid hsl(var(--ring));
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {

	.lan-qr:hover,
	.lan-copy:hover {
		background: hsl(var(--primary-foreground) / 0.28);
	}
}

.lan-qr svg,
.lan-copy svg {
	display: block;
	width: 16px;
	height: 16px;
}

.lan-url {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.lan-copy .ico-check {
	display: none;
}

.lan-copy.copied {
	color: var(--green);
}

.lan-copy.copied .ico-copy {
	display: none;
}

.lan-copy.copied .ico-check {
	display: block;
	animation: lanPop .35s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes lanPop {
	0% {
		transform: scale(.3);
		opacity: 0;
	}

	60% {
		transform: scale(1.18);
		opacity: 1;
	}

	100% {
		transform: scale(1);
	}
}

/* 设置按钮（右上角固定）→ ghost 图标按钮 */
.settings-btn {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 50;
	width: 42px;
	height: 42px;
	min-height: 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}

@media (hover: hover) and (pointer: fine) {
	.settings-btn:hover {
		background: hsl(var(--accent));
		color: hsl(var(--foreground));
	}
}

/* 同上：ESC 关闭设置弹窗后按钮残留焦点线框问题 */
.settings-btn:focus {
	outline: none;
}
.settings-btn:focus-visible {
	outline: 2px solid hsl(var(--ring));
	outline-offset: 2px;
}

/* 设置弹窗 / 扫码弹窗：遮罩与面板的公共样式来自 components.css 的
   .modal-overlay / .modal-card（与删除确认弹窗、相机弹窗同一套），这里只留差异。 */
.settings-overlay {
	z-index: 100;
}

.qr-modal {
	z-index: 9999;
}

.settings-overlay.active,
.qr-modal.active {
	display: flex;
	animation: fadeIn .15s ease;
}

.settings-panel {
	width: 100%;
	max-width: 420px;
	max-height: 86vh;
	overflow-y: auto;
	/* 滚动到弹窗顶部/底部后不再把滚动传给背景（配合 openSettings 的滚动锁，
     保证「只能滚动弹窗里的内容」在鼠标滚轮与手机触摸下都成立） */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.settings-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid hsl(var(--border));
	background: hsl(var(--card));
}

.settings-head h2 {
	font-size: 18px;
	/* 与「打赏」标题（h4，浏览器默认 bold=700）保持同样字重 */
	font-weight: 700;
	color: hsl(var(--foreground));
	margin: 0;
}

.settings-reward-desc {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
	text-align: left;
	line-height: 1.6;
	margin: 0 0 5px;
}

.settings-reward-tip {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
	text-align: left;
	margin: 0 0 5px;
	line-height: 1.6;
}

/* 关闭按钮：外观来自 .modal-close（components.css），这里只定尺寸 */
.settings-close {
	width: 32px;
	height: 32px;
}

.settings-body {
	padding: 20px;
}

.settings-sec {
	margin-bottom: 24px;
}

.settings-sec:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.settings-panel {
		max-width: 600px;
	}

	.settings-msg.show {
		height: 20px;
	}
}

.settings-tip {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
	margin: 0 0 12px;
	line-height: 1.6;
}

/* 设置弹窗的保存按钮直接用全局 button 样式（.btn-primary）；"恢复默认"复用
   .btn-outline 的描边与交互（HTML 同时挂两个类），这里只保留静默色 / 紧凑尺寸等差异。 */
.btn-set-text {
	align-self: center;
	width: auto;
	padding: 6px 14px;
	background: transparent;
	color: hsl(var(--muted-foreground));
	font-size: 13px;
}

.btn-set-text:active {
	background: hsl(var(--accent));
}

@media (hover: hover) and (pointer: fine) {
	.btn-set-text:hover {
		background: hsl(var(--accent));
		color: hsl(var(--foreground));
	}
}

.settings-msg {
	display: none;
	font-size: 13px;
	line-height: 1.6;
}

.settings-msg.show {
	display: block;
	margin-top: 12px;
}

.settings-msg.ok {
	color: var(--green);
}

.settings-msg.err {
	color: hsl(var(--destructive));
}

/* 打赏二维码 → shadcn Card（手机端与电脑端同一套布局：等宽卡片 + 响应式图片） */
.qr-list {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	text-align: center;
	margin-bottom: 4px;
}

.qr-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 8px;
	padding: 14px;
	border-radius: var(--radius);
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
}

.qr-img {
	width: 100%;
	max-width: 160px;
	height: auto;
	border-radius: calc(var(--radius) - 2px);
}

.qr-label {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
	white-space: nowrap;
	font-weight: 600;
}

/* 打赏区块免责声明（直接展示） */
.reward-disclaimer {
	margin: 0;
	color: hsl(var(--muted-foreground));
	font-size: 12px;
	line-height: 1.6;
	text-align: left;
}

/* 目录选择器：「路径选择框 + 恢复默认按钮」同一行（手机端 / 电脑端一致）。
   选择框 flex:1 占满剩余宽度，按钮自适应宽度并垂直居中。 */
.dir-picker-row {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

/* 自定义下拉（trigger + popup）：替代浏览器原生 select，UI 与图片一致。
   触发器仿 input 框：路径（flex:1） + 元信息 chip + 文件夹图标 + 下拉箭头；
   点击触发器在下方弹出独立卡片，列出授权目录选项（微弱阴影）。 */
.dir-picker {
	position: relative;
	flex: 1;
	min-width: 0;
}

.dir-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	min-height: 40px;
	box-sizing: border-box;
	border: 1px solid hsl(var(--input));
	border-radius: calc(var(--radius) - 2px);
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
	transform: none;
}

.dir-trigger:active {
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.dir-trigger:hover {
		border-color: hsl(var(--ring) / .35);
	}
}

.dir-trigger:focus {
	outline: none;
	border-color: hsl(var(--ring));
}

.dir-trigger[aria-expanded="true"] {
	border-color: hsl(var(--ring));
	box-shadow: 0 0 0 3px hsl(var(--ring) / .08);
}

.dir-trigger-path {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dir-trigger-chev {
	flex-shrink: 0;
	color: hsl(var(--muted-foreground));
	transition: transform .18s ease;
}

.dir-trigger[aria-expanded="true"] .dir-trigger-chev {
	transform: rotate(180deg);
}

.dir-popup {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	background: hsl(var(--popover));
	color: hsl(var(--popover-foreground));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: 0 10px 28px -12px rgb(0 0 0 / .22), 0 2px 6px -2px rgb(0 0 0 / .06);
	padding: 6px;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: dirPopupIn .14s ease;
}

@keyframes dirPopupIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dir-option {
	display: block;
	padding: 9px 10px;
	border-radius: calc(var(--radius) - 4px);
	cursor: pointer;
	user-select: none;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.4;
	word-break: break-all;
	transition: background .12s, color .12s;
}

@media (hover: hover) and (pointer: fine) {
	.dir-option:hover {
		background: hsl(var(--accent));
	}
}

.dir-option.selected {
	background: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
	font-weight: 600;
}

.dir-popup .dir-empty {
	padding: 14px;
	text-align: center;
	font-size: 13px;
	color: hsl(var(--muted-foreground));
	font-family: var(--font-sans);
}

/* 只读展示模式（桌面端 / 非飞牛）：路径框只展示当前保存目录的绝对路径，
   不可手输；修改路径通过「选择目录」（系统原生文件夹选择器，服务端自动保存）。
   视觉与 dir-trigger 保持一致（同款边框/圆角/字体）。 */
.dir-input-wrap {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;   /* 路径框靠左、按钮靠右（中间留空） */
	width: 100%;
}

/* [hidden] 必须显式声明 display:none：否则上面的 display:flex（Author CSS）
   会覆盖浏览器默认的 [hidden]{display:none}（UA CSS），导致飞牛端输入框区域
   虽设 hidden 却仍然显示，与授权目录下拉同时出现。 */
.dir-input-wrap[hidden] {
	display: none;
}

.dir-input {
	flex: 0 1 auto;                 /* 不占满剩余空间；宽度由 JS 按路径实际长度设置 */
	width: auto;
	max-width: 100%;
	min-width: 0;                   /* 允许收缩（超长时不会撑破弹窗） */
	padding: 8px 12px;
	height: 40px;
	min-height: 40px;
	box-sizing: border-box;
	border: 1px solid hsl(var(--input));
	border-radius: calc(var(--radius) - 2px);
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 24px;              /* 40px - 上下 padding 16px = 单行内容高 */
	resize: none;
	overflow-x: auto;               /* 路径超长：框内横向滚动展示 */
	overflow-y: hidden;
	white-space: nowrap;            /* 单行不换行 */
	vertical-align: middle;
	transition: border-color .15s, box-shadow .15s;
}

/* 横向滚动条：细条半透明，与弹窗风格一致 */
.dir-input::-webkit-scrollbar {
	height: 6px;
}
.dir-input::-webkit-scrollbar-thumb {
	background: hsl(var(--muted-foreground) / .35);
	border-radius: 3px;
}
.dir-input::-webkit-scrollbar-track {
	background: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.dir-input:hover {
		border-color: hsl(var(--ring) / .35);
	}
}

.dir-input:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow: 0 0 0 3px hsl(var(--ring) / .08);
}

.dir-input::placeholder {
	color: hsl(var(--muted-foreground));
	font-family: var(--font-sans);
}

/* 只读展示态：去掉 hover / focus 的"可编辑"暗示，视觉上明确是静态文本展示 */
.dir-input[readonly] {
	cursor: default;
	background: hsl(var(--muted) / .55);
}
@media (hover: hover) and (pointer: fine) {
	.dir-input[readonly]:hover {
		border-color: hsl(var(--input));
	}
}
.dir-input[readonly]:focus {
	border-color: hsl(var(--input));
	box-shadow: none;
}

.dir-browse-btn {
	flex-shrink: 0;
}

/* 手机端只保留必要的自适应（内容从顶部开始排布）。
   不再隐藏「文件保存路径」区块、不再替换标题、不再隐藏地址栏、不再改动二维码尺寸——
   手机端与电脑端看到的内容与文案完全一致（能否修改保存路径由服务端权限决定，
   不按屏幕尺寸判断），避免两端体验割裂。 */
@media (max-width: 767px) {
	body.home .container {
		justify-content: flex-start;
		padding-top: 24px;
	}

	/* 移动端隐藏顶部地址栏（手机本身就在局域网上，无需再展示/扫码；桌面端保留）。 */
	.lan-addr-bar {
		display: none;
	}
}

@media (min-width: 768px) {
	.home-grid {
		/* 两张卡片等宽、随容器自适应铺满（容器本身有 1120px 上限，卡片不会无限变宽）。
		   注意：不要给单张卡设 max-width——那样在大窗口下卡片会明显比容器窄一截。 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.lan-addr-bar {
		width: auto;
	}
}

/* 宽且高（桌面大窗口）：大卡片 */
@media (min-width: 768px) and (min-height: 720px) {
	.entry {
		padding: 48px 28px;
	}

	.entry .icon {
		width: 56px;
		height: 56px;
		margin-bottom: 20px;
	}

	.entry .title {
		font-size: 26px;
	}

	.entry .desc {
		font-size: 15px;
		margin-top: 12px;
	}
}

.qr-inner {
	width: 100%;
	max-width: 340px;
	max-height: 86vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	padding: 22px 20px;
}

.qr-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.qr-head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: hsl(var(--foreground));
}

/* 关闭按钮：外观来自 .modal-close（components.css），这里只留差异（紧凑内边距） */
.qr-close {
	line-height: 1;
	padding: 4px 6px;
}

.qr-code {
	width: 240px;
	max-width: 100%;
}

.qr-code svg {
	width: 240px;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	background: #fff;
	border-radius: calc(var(--radius) - 2px);
}

.qr-url {
	font-size: 13px;
	color: hsl(var(--muted-foreground));
	margin: 0;
	word-break: break-all;
	text-align: center;
	font-family: var(--font-mono);
}

.qr-tip {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
	margin: 0;
	text-align: center;
}

/* 首页底部免责声明（直接展示） */
.home-footer {
	text-align: center;
	padding: 8px var(--page-gutter) 16px;
}

.home-footer .disclaimer {
	display: inline-block;
	color: hsl(var(--muted-foreground));
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	text-align: center;
}

/* ============================================================
   矮窗口（飞牛门户 iframe、笔记本小窗等）：适度收紧字号与竖向间距，
   保证首页在最小窗口（实测 1100×550）内不滚动即可看全。
   只压缩「字号 / 间距 / 竖向尺寸」——卡片宽度、两列布局、配色都不变。
   取值刻意保守：总高约 505px（550px 下仍余 ~45px），不再"为了不滚动而缩得过小"。
   放在文件末尾：与基础规则同优先级时靠后者生效，确保能覆盖上面的定义。
   ============================================================ */
@media (min-width: 768px) and (max-height: 720px) {
	.container {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.hero-logo {
		width: 4.25rem;
		margin-bottom: -0.875rem;
	}

	h1 {
		font-size: 2.25rem;
		margin: 10px 0 12px;
		letter-spacing: -0.5px;
	}

	.subtitle {
		font-size: 16px;
		margin-bottom: 14px;
	}

	.lan-addr-bar {
		padding: 10px;
		margin-bottom: 14px;
	}

	.entry {
		padding: 24px;
	}

	.entry .icon {
		width: 42px;
		height: 42px;
		margin-bottom: 12px;
	}

	.entry .title {
		font-size: 18px;
	}

	.entry .desc {
		font-size: 13px;
		margin-top: 6px;
	}

	.home-grid {
		gap: 20px;
	}

	.home-footer {
		padding: 6px var(--page-gutter) 14px;
	}

	.home-footer .disclaimer {
		font-size: 13px;
		line-height: 1.5;
	}
}