/* ============================================================
 * Alpha 反推专有样式 —— 页面外壳（变量/reset/nav/hero/container 基础/footer）
 * 由主页模块提供（base.css / nav.css / hero.css / responsive.css），
 * 这里只保留专有组件与必要的覆盖。
 * ============================================================ */

/* 补充变量（base.css 未定义） */
:root{ --text-dim: #7a97ad; }
html.dark{ --text-dim: #6d8ba3; }

button{ font-family: inherit; }

/* ---------- 紧凑 hero（覆盖主页 hero 的大间距） ---------- */
.hero{ text-align: center; padding: 34px 20px 10px; }
.hero h1{ margin: 0 0 6px; font-size: 26px; color: var(--text-strong); }
.hero p{ margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; max-width: 720px; margin-left:auto; margin-right:auto; }

/* ---------- 主体布局：双栏（覆盖主页 .container） ---------- */
.container{
	max-width: 1080px;
	margin: 18px auto 60px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 20px;
	align-items: start;
}

.panel, .stage{
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow-out);
}

/* 控制面板 */
.panel{ padding: 18px 18px 22px; }
.panel h2{
	margin: 0 0 14px;
	font-size: 16px;
	color: var(--text-strong);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.panel h2 .hint{ font-size: 12px; font-weight: 400; color: var(--text-dim); }

/* -------- 拖放区 -------- */
.drop-zone{
	position: relative;
	border: 2px dashed var(--border);
	border-radius: 12px;
	background: var(--blue-soft);
	transition: border-color .15s, background .15s;
	cursor: pointer;
	margin-bottom: 14px;
	overflow: hidden;
}
.drop-zone:hover,
.drop-zone.drag-over{
	border-color: var(--blue);
	background: var(--blue-light);
}
.drop-zone:focus-within{
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--blue-light);
}

.dz-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 16px;
	min-height: 110px;
	text-align: center;
	transition: opacity .15s;
}
.drop-zone.loaded .dz-inner{ opacity: 0.25; pointer-events: none; }

.dz-icon{ width: 36px; height: 36px; color: var(--blue-dark); margin-bottom: 8px; }
.dz-text{ margin: 0 0 4px; font-size: 14px; color: var(--text-strong); font-weight: 600; }
.dz-hint{ margin: 0; font-size: 12px; color: var(--text-dim); }

.dz-preview{
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	display: none;
}
.drop-zone.loaded .dz-preview{
	display: block;
	border-radius: 10px;
	box-shadow: var(--shadow-out);
}

/* -------- 预览区 -------- */
.stage{ padding: 18px; }
.stage-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 10px;
	flex-wrap: wrap;
}
.stage-top .meta{ font-size: 13px; color: var(--text-dim); }
.stage-top .meta b{ color: var(--blue-dark); font-variant-numeric: tabular-nums; }

.preview-wrap{
	background:
		linear-gradient(45deg, var(--blue-soft) 25%, transparent 25%),
		linear-gradient(-45deg, var(--blue-soft) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--blue-soft) 75%),
		linear-gradient(-45deg, transparent 75%, var(--blue-soft) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px;
	overflow: auto; /* 大图可滚动 */
}
#preview-canvas{
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 背景切换按钮 */
.bg-controls{
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.bg-btn{
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--card);
	color: var(--text);
	font-size: 13px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.bg-btn:hover{ background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); }
.bg-btn[aria-pressed="true"]{
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* 导出区 */
.export-box{ margin-top: 16px; }
.export-box .row{
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.export-box .btn{ flex: 1; min-width: 140px; }
.hint{ color: var(--text-dim); font-size: 12px; }

/* 按钮 */
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: var(--blue);
	color: #fff;
	transition: background .15s, transform .1s;
}
.btn:hover{ background: var(--blue-dark); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .55; cursor: wait; }
.btn.ghost{
	background: var(--blue-light);
	color: var(--blue-dark);
}
.btn.ghost:hover{ background: var(--border); }
.btn-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* 报告 */
.section-title{
	margin: 20px 0 8px;
	font-size: 13px;
	color: var(--text-dim);
	letter-spacing: .05em;
	border-top: 1px dashed var(--border);
	padding-top: 14px;
}
.report{ display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.report dt{ color: var(--text-dim); }
.report dd{ margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* 说明 */
.notes{ margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.8; color: var(--text); }
.notes li{ margin-bottom: 6px; }
.notes code{
	background: var(--blue-soft);
	padding: 1px 4px;
	border-radius: 4px;
	font-size: 11px;
	font-family: ui-monospace, Consolas, monospace;
	color: var(--blue-dark);
}

@media (max-width: 820px){
	.container{ grid-template-columns: 1fr; }
	.nav-links a.home{ display: none; }
	.hero h1{ font-size: 22px; }
}