/*
 * 页面专属样式：工具 · 图片裁剪缩放
 *
 * 前半段 .tool-* / .ar-cta 抄自 page-tool-aspect-ratio.css（工具页公共骨架，两边要一起改）；
 * .ir-* 只属于这个工具。
 */

#nys-main .tool-page {
	max-width:var(--wrap-mid);
	margin:0 auto;
	padding:40px 28px 90px;
}

/* ---------- 标题区 ---------- */
.tool-head { margin-bottom:26px; }
.tool-crumb {
	display:inline-block;
	font-size:13px;
	color:var(--ink-soft);
	text-decoration:none;
	margin-bottom:10px;
}
.tool-crumb:hover { color:var(--ink); }
.tool-head h1 {
	font-size:38px;
	line-height:1.12;
	margin:0 0 12px;
	text-wrap:balance;
}
.tool-lead {
	font-size:16px;
	line-height:1.6;
	color:var(--ink-body, #4B4B52);
	margin:0;
	max-width:640px;
}

/* ---------- 生成入口 ---------- */
.ar-cta {
	margin:18px 0 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:18px 22px;
	border-radius:var(--radius-lg);
	background:var(--bg-soft);
	flex-wrap:wrap;
}
.ar-cta strong { font-size:15px; }
.ar-cta p { margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); max-width:520px; line-height:1.5; }

/* ---------- 分节 ---------- */
.tool-sec { margin-top:48px; }
.tool-sec h2 { font-size:24px; margin:0 0 16px; }

/*
 * ⚠ position:relative 不能省：表头最后一格里有个 .sr-only（position:absolute），
 *   滚动容器不是定位元素时它会相对整页定位，把页面撑出横向滚动条（德、法语 390 宽实测）。
 */
.tool-faq details { border-bottom:1px solid var(--border); }
.tool-faq summary {
	cursor:pointer;
	list-style:none;
	padding:16px 28px 16px 0;
	position:relative;
}
.tool-faq summary::-webkit-details-marker { display:none; }
.tool-faq summary::after {
	content:'';
	position:absolute; right:4px; top:50%;
	width:8px; height:8px;
	border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
	transform:translateY(-70%) rotate(45deg);
	transition:transform var(--dur);
}
.tool-faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.tool-faq summary h3 { display:inline; font-size:15.5px; font-family:'Inter',sans-serif; font-weight:600; margin:0; }
.tool-faq p { margin:0 0 16px; font-size:14.5px; line-height:1.65; color:var(--ink-body, #4B4B52); }

.tool-related { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tool-related a {
	display:block;
	padding:14px 16px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	text-decoration:none;
	color:var(--ink);
	font-size:14px;
	min-height:44px;
	transition:border-color var(--dur);
}
.tool-related a:hover { border-color:var(--ink-soft); }

.sr-only {
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


.pg-err { margin:12px 0 0; font-size:13.5px; color:var(--accent); }
.pg-err[hidden] { display:none; }

/* ---------- 上传区 ---------- */
.ir-app { margin-bottom:8px; }
.ir-noscript { padding:14px 16px; border-radius:var(--radius); background:var(--accent-soft); color:var(--accent); font-size:14px; }
.ir-drop {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	position:relative;
	min-height:220px;
	padding:28px 20px;
	border:2px dashed var(--border);
	border-radius:var(--radius-lg);
	background:var(--bg-soft);
	text-align:center;
	cursor:pointer;
	color:var(--ink-soft);
	transition:border-color var(--dur), background var(--dur);
}
.ir-drop:hover, .ir-drop.over { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.ir-drop[hidden] { display:none; }
.ir-drop strong { font-size:16px; color:var(--ink); }
.ir-drop span { font-size:13px; }
/* 文件框本身藏起来，但不能 display:none —— 键盘用户要能聚焦到它 */
.ir-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.ir-drop:focus-within { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- 工作区 ---------- */
.ir-work { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; }
.ir-work[hidden] { display:none; }
.ir-stage-wrap { min-width:0; }
.ir-stage {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:240px;
	padding:12px;
	border-radius:var(--radius-lg);
	background:repeating-conic-gradient(#f0f0f2 0% 25%, #fff 0% 50%) 50% / 18px 18px;
	border:1px solid var(--border);
}
.ir-stage canvas { display:block; max-width:100%; box-shadow:var(--shadow); cursor:grab; touch-action:none; }
.ir-stage canvas.dragging { cursor:grabbing; }
.ir-hint { margin:8px 0 0; font-size:12.5px; color:var(--ink-soft); }
.ir-hint[hidden], .ir-zoom[hidden], .ir-bg[hidden], #ir-q-row[hidden] { display:none; }
.ir-zoom { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12.5px; color:var(--ink-soft); }
.ir-zoom input { flex:1; accent-color:var(--accent); }

.ir-panel {
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:18px;
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	background:var(--bg);
	box-shadow:var(--shadow);
}
.ir-field { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-soft); border:0; padding:0; margin:0; min-width:0; }
.ir-field legend { padding:0; margin-bottom:6px; }
.ir-field select, .ir-custom input {
	height:42px;
	border:1px solid var(--border);
	border-radius:var(--radius-sm);
	padding:0 10px;
	font:inherit;
	font-size:15px;
	color:var(--ink);
	background:var(--bg);
	width:100%;
	min-width:0;
}
.ir-field select:focus, .ir-custom input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.ir-custom { display:flex; align-items:flex-end; gap:8px; color:var(--ink-soft); }
.ir-custom[hidden] { display:none; }
.ir-custom label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; flex:1; }
.ir-modes label { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); min-height:32px; cursor:pointer; }
.ir-modes input, #ir-q { accent-color:var(--accent); }
.ir-bg input { width:52px; height:36px; padding:2px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); }
.ir-out { margin:0; font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ir-warn { margin:0; font-size:12.5px; line-height:1.5; color:var(--amber); }
.ir-warn[hidden] { display:none; }
.ir-dl { width:100%; justify-content:center; min-height:46px; }
.ir-again { border:0; background:none; font:inherit; font-size:13px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; padding:4px; }
.ir-privacy { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:13px; color:var(--green); }

.ir-steps { margin:0; padding-left:20px; display:grid; gap:8px; font-size:14.5px; line-height:1.6; color:var(--ink-body, #4B4B52); }

@media (max-width:760px) {
	#nys-main .tool-page { padding:28px 16px 70px; }
	.tool-head h1 { font-size:30px; }
	.tool-related { grid-template-columns:1fr; }
	.ar-cta .btn { width:100%; justify-content:center; }
	.ir-work { grid-template-columns:1fr; }
	.ir-drop { min-height:180px; }
}