/* R52 免费证件照工具页样式 */
.tool-main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 60px; }
.tool-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.tool-head .eyebrow { font-size: 11px; }
.tool-head h1 { font-size: 20px; margin: 0; }
.tool-card { background: #fff; border: 1px solid #e5e2d8; border-radius: 14px; padding: 22px; box-shadow: 0 6px 20px rgba(34,51,31,.05); }
.tool-card h2 { font-size: 17px; margin: 14px 0 10px; }
.tool-card h2:first-child { margin-top: 0; }
.dropzone { border: 2px dashed #c9cfc0; border-radius: 14px; padding: 60px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; flex-direction: column; }
.dropzone.drag, .dropzone:hover { border-color: var(--brand, #2e6b45); background: rgba(46,107,69,.05); }
.dropzone p { margin: 4px 0; font-size: 17px; }
.tool-grid { display: grid; grid-template-columns: 320px 1fr; grid-template-areas: "opts view" "spec view"; grid-template-rows: auto 1fr; gap: 18px; align-items: start; }
.options-card { grid-area: opts; }
.canvas-card { grid-area: view; }
.spec-card { grid-area: spec; }
.spec-list, .bg-list { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-list label, .bg-list label { position: relative; }
.spec-list input, .bg-list input { position: absolute; opacity: 0; pointer-events: none; }
.spec-list span, .bg-list span { display: inline-block; padding: 7px 12px; border: 1px solid #d8d5ca; border-radius: 9px; font-size: 14px; cursor: pointer; background: #fcfdfb; }
.spec-list input:checked + span, .bg-list input:checked + span { border-color: var(--brand, #2e6b45); background: rgba(46,107,69,.1); color: var(--brand, #2e6b45); font-weight: 600; }
.bg-list span { width: 40px; height: 32px; border-radius: 8px; border: 2px solid #d8d5ca; }
.custom-bg { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-size: 14px; }
.custom-bg input[type="color"] { width: 44px; height: 32px; border: 1px solid #d8d5ca; border-radius: 8px; background: #fff; padding: 2px; cursor: pointer; }
#zoom { width: 100%; margin: 6px 0 14px; }
.canvas-card { text-align: center; }
.crop-frame { position: relative; display: inline-block; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(34,51,31,.08); touch-action: pan-y; cursor: grab; }
/* pan-y：竖向滑动交还浏览器滚页面，横向滑动才进入照片拖动（不与浏览器抢手势） */
.crop-frame:active { cursor: grabbing; }
#view { display: block; max-width: 100%; }
.watermark { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.watermark span { position: absolute; padding: 6px 14px; border: 2px solid rgba(255,255,255,.7); border-radius: 10px; color: rgba(255,255,255,.92); background: rgba(34,51,31,.2); font-size: 18px; font-weight: 700; letter-spacing: 6px; transform: rotate(-22deg); white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.watermark span:nth-child(1) { top: 34%; left: 12%; }
.watermark span:nth-child(2) { top: 60%; left: 44%; font-size: 13px; letter-spacing: 3px; padding: 4px 10px; opacity: .85; }
.edit-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.edit-actions button { padding: 12px 26px; border-radius: 10px; font-size: 16px; cursor: pointer; border: 1px solid #d8d5ca; background: #fff; }
.edit-actions .primary { background: var(--brand, #2e6b45); color: #fff; border: none; font-weight: 600; }
#gen-status { text-align: center; margin-top: 12px; min-height: 1.4em; }
.spec-info { background: #f6f4ef; border: 1px solid #e5e2d8; border-radius: 10px; padding: 12px 14px; text-align: left; font-size: 14px; }
.spec-info b { display: block; margin-bottom: 8px; font-size: 14px; color: var(--brand, #2e6b45); }
.spec-info .kv { display: flex; justify-content: space-between; padding: 2px 0; color: #55604f; }
.spec-info .kv i { font-style: normal; color: var(--ink, #22331f); }
.capture-row { display: flex; gap: 12px; margin-top: 14px; }
.capture-row button { flex: 1; padding: 12px; border-radius: 10px; font-size: 16px; cursor: pointer; border: 1px solid #d8d5ca; background: #fff; }
.capture-row .primary { background: var(--brand, #2e6b45); color: #fff; border: none; font-weight: 600; }
.tips { margin-top: 18px; text-align: left; background: rgba(46,107,69,.06); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.tips b { color: var(--brand, #2e6b45); }
.tips ol { margin: 8px 0 0 18px; line-height: 1.9; color: #44503f; }
#ad-dialog { border: none; border-radius: 14px; padding: 22px; max-width: 560px; width: calc(100% - 32px); }
#ad-dialog::backdrop { background: rgba(20, 28, 18, .5); }
#ad-dialog h2 { font-size: 17px; margin-bottom: 14px; }
.ad-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ad-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #e5e2d8; border-radius: 10px; padding: 14px; text-decoration: none; color: inherit; background: #fcfdfb; }
.ad-card b { font-size: 15px; }
.ad-card span { font-size: 13px; color: #55604f; }
.ad-card em { font-style: normal; font-size: 13px; color: var(--brand, #2e6b45); font-weight: 700; }
.ad-card.muted { opacity: .65; }
.ad-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
#ad-count { font-size: 20px; font-weight: 800; color: var(--brand, #2e6b45); min-width: 30px; }
#ad-download { padding: 10px 24px; border-radius: 10px; background: var(--brand, #2e6b45); color: #fff; text-decoration: none; }
@media (max-width: 860px) {
  .tool-grid { grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: none; }
  .options-card, .canvas-card, .spec-card { grid-area: auto; }  /* 显式重置命名区域，兼容旧内核 */
  .canvas-card { order: -1; }  /* 手机端：证件照预览置顶 → 规格/底色 → 规格说明 */
  .ad-cards { grid-template-columns: 1fr; }
  .tool-main { padding: 16px 12px 44px; }
  .tool-head { margin-bottom: 10px; }
  .tool-head h1 { font-size: 17px; }
  .tool-card { padding: 14px; border-radius: 12px; }
  .crop-frame { max-width: 100%; }
  .edit-actions { flex-wrap: wrap; }
  .edit-actions button, .edit-actions a { flex: 1 1 30%; min-width: 0; padding: 11px 8px; font-size: 14px; }
  .bottom-info { margin-top: 14px; }
}
.bottom-info { margin-top: 18px; }
.bottom-info .hint { text-align: left; }
.tips-list { margin: 0; padding-left: 18px; line-height: 1.9; color: #44503f; font-size: 14px; text-align: left; }
/* 微信下载引导 */
#wx-guide { border: none; border-radius: 14px; padding: 22px; max-width: 430px; width: calc(100% - 32px); position: relative; overflow: visible; }
#wx-guide::backdrop { background: rgba(20, 28, 18, .6); }
#wx-guide h2 { font-size: 17px; margin-bottom: 12px; }
.wx-more { position: absolute; top: -44px; right: 8px; font-size: 22px; font-weight: 800; letter-spacing: 2px; color: #fff; background: rgba(46, 107, 69, .92); border-radius: 10px; padding: 8px 14px; }
.wx-pointer { position: absolute; top: -10px; right: 34px; width: 0; height: 0; border: 12px solid transparent; border-top-color: rgba(46, 107, 69, .92); border-bottom-width: 0; }
.wx-steps p { margin: 8px 0; font-size: 15px; line-height: 1.6; }
.wx-steps .hint { display: inline; }
.wx-actions { display: flex; gap: 10px; margin-top: 14px; }
.wx-actions button { flex: 1; padding: 11px; border-radius: 10px; font-size: 15px; cursor: pointer; border: 1px solid #d8d5ca; background: #fff; }
.wx-actions .primary { background: var(--brand, #2e6b45); color: #fff; border: none; font-weight: 600; }
/* SEO: 规格表与 FAQ */
.seo-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.spec-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid #e5e2d8; border-radius: 10px; overflow: hidden; }
.spec-row { display: contents; }
.spec-row span { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #e5e2d8; text-align: left; }
.spec-row:last-child span { border-bottom: none; }
.spec-header span { background: #f6f4ef; font-weight: 600; color: #2e6b45; }
.seo-section details { border-bottom: 1px solid #e5e2d8; padding: 12px 0; }
.seo-section details:last-child { border-bottom: none; }
.seo-section summary { font-size: 15px; font-weight: 600; cursor: pointer; color: #22331f; }
.seo-section details p { margin: 8px 0 0; font-size: 14px; color: #55604f; line-height: 1.7; }
@media (max-width: 860px) {
  .spec-table { grid-template-columns: repeat(2, 1fr); }
  .spec-header span:nth-child(3), .spec-header span:nth-child(4) { display: none; }
  .spec-row span:nth-child(3), .spec-row span:nth-child(4) { display: none; }
}

@media (max-width: 480px) {
  .watermark span { font-size: 14px; letter-spacing: 4px; padding: 4px 10px; }
  .watermark span:nth-child(2) { font-size: 11px; letter-spacing: 2px; }
  .spec-list span { font-size: 13px; padding: 6px 10px; }
}