.background-page { background:linear-gradient(180deg,#f1f7ff,#f7f9fc); }
.background-page .app,.background-page .seo-content { max-width:1200px; }
.background-brand { font-size:17px; font-weight:700; letter-spacing:.3px; }
.background-hero { padding:24px 12px 26px; }
.background-hero h1 { font-size:clamp(25px,3vw,40px); margin:0 0 10px; line-height:1.3; color:#101828; }
.background-hero p { margin:0; color:#66758f; font-size:17px; line-height:1.8; }
.background-page .layout { grid-template-columns:340px minmax(0,1fr); gap:20px; align-items:stretch; }
.background-page .main { contain:none; min-width:0; min-height:0; align-self:start; }
.background-page .results-scroll { container-type:size; min-height:0; height:440px; flex:none; overflow:hidden; }
.background-page .results-scroll .thumb-wrap { height:clamp(80px, calc(50cqh - 104px), 240px); aspect-ratio:auto; }
.background-page .results-scroll .grid.list .thumb-wrap { height:52px; aspect-ratio:auto; }
.background-page .sidebar { min-width:0; align-self:stretch; }
.background-help { background:white; border:1px solid var(--line);border-radius:14px;padding:0 20px; flex:1; }
.background-help section { padding:18px 0; }
.background-help section+section { border-top:1px solid var(--line); }
.background-help h2 { font-size:17px;margin:0 0 12px; }
.background-help p,.background-help li { font-size:14px;color:#66758f;line-height:1.8; }
.background-help p { margin:8px 0; }
.background-help ul,.background-help ol { padding-left:20px;margin:0; }
.background-help a { color:var(--brand);font-size:14px; }
.background-page .drop { background:white; padding:40px 18px; }
.background-page .drop .plus { width:60px;height:60px;line-height:60px;font-size:34px; }
.background-page .mode { padding:20px; }
.background-page .mode .radio,.background-page .mode .mico,.background-page .mode .md,.background-page .mode .mlabel { display:none; }
.background-page .mode.active { background:white; border:1px solid var(--line); cursor:default; }
.background-page .mode .mbody { display:flex;align-items:center;gap:16px; }
.background-page .mode .mtitle { flex:none; }
.background-page .mode .mrow { margin-top:0;flex:1;min-width:0; }
.background-page .mode .res-sel { width:100%; }
.background-page .start-btn { padding:16px; font-size:17px; }
.background-benefits { background:white;border:1px solid #deebff;border-radius:14px;padding:20px; }
.background-benefits h2 { font-size:18px;margin:0 0 18px; }
.background-benefits p { color:#66758f;font-size:14px;line-height:1.8; }
.background-preview { background:#e8f2ff; border:1px solid #deebff; border-radius:16px; padding:18px; margin-bottom:16px; scroll-margin-top:16px; }
.preview-heading { display:flex; justify-content:space-between;align-items:center;gap:12px; }
.preview-heading strong { font-size:16px; flex:none; }
.preview-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; min-width:0; }
.preview-controls { flex:none; }
#previewHint { font-size:13px; color:#596579; line-height:1.7; }
.preview-heading { margin-bottom:16px; flex-wrap:wrap; }
.preview-pair { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.preview-pair figure { position:relative; margin:0; min-height:280px;background:#fff;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.preview-pair figcaption { position:absolute;left:10px;top:10px; padding:5px 10px;background:#1a6dff;color:#fff;border-radius:6px;font-size:13px; }
.preview-pair img { width:100%;height:280px;object-fit:contain; }
.preview-pair p { padding:35px 15px;color:#66758f;font-size:14px;text-align:center; }
.preview-pair .preview-checker,.image-preview-dialog img { background:conic-gradient(#e9edf3 25%,#fff 0 50%,#e9edf3 0 75%,#fff 0) 0/16px 16px; }
.image-preview-dialog { width:min(1000px,95vw); max-height:90vh; border:1px solid #ddd;border-radius:14px; }
.image-preview-dialog::backdrop { background:#101828aa; }
.image-preview-dialog form { text-align:right;margin-bottom:12px; }
.image-preview-dialog img { display:block;max-width:100%;max-height:75vh;margin:auto;object-fit:contain; }
.thumb-wrap[data-preview] { cursor:zoom-in; }
.thumb-wrap[data-preview]:focus-visible { outline:2px solid #1a6dff;outline-offset:-2px; }
@media(max-width:900px){.background-page .layout{grid-template-columns:1fr}.background-page .main{contain:none;min-height:0}.background-page .results-scroll{flex:none;height:440px;overflow:hidden}.background-page .background-help{order:5}.background-hero{padding:18px 0}.preview-pair img{height:180px}.preview-pair figure{min-height:180px}}
@media(max-width:500px){.preview-heading{flex-wrap:wrap}.preview-pair{gap:8px}.preview-pair img{height:140px}.preview-pair figure{min-height:140px}.background-preview{padding:12px}.background-hero p{font-size:15px}}
/* 操作与对比在上，结果列表独立占满下一行。 */
.background-page .sidebar { align-self:start; }
.background-page .background-preview { margin-bottom:0; }
.background-page .background-results { margin-top:20px; }
.background-content { margin-top:28px; display:grid; gap:20px; }
.background-content > section { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; }
.background-content h2 { margin:0 0 18px; font-size:22px; }
.background-content h3 { margin:0 0 10px; font-size:16px; }
.background-content p,.background-content li,.background-content td { color:#596579; font-size:14px; line-height:1.8; }
.background-content p { margin:10px 0; }
.content-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.content-cards > * { background:#f7f9fc; border-radius:12px; padding:20px; }
.steps { list-style:none; padding:0; margin:0; }
.table-scroll { overflow-x:auto; }
.background-content table { width:100%; border-collapse:collapse; }
.background-content th,.background-content td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); }
.background-content th { width:180px; font-size:14px; vertical-align:top; }
.background-content details { padding:16px 0; border-bottom:1px solid var(--line); }
.background-content summary { cursor:pointer; font-weight:600; font-size:15px; }
.background-content a { color:var(--brand); }
.tool-links a { text-decoration:none; font-weight:600; }
.tool-links span { display:block; margin-top:8px; font-size:13px; font-weight:400; color:#596579; }
@media(max-width:760px){.content-cards{grid-template-columns:1fr}.background-content>section{padding:20px}.background-content h2{font-size:20px}.background-content th{width:110px}.background-content th,.background-content td{padding:10px 8px}}
/* 全宽生成列表：桌面五列，窄屏逐级减少；列表视图沿用单列。 */
.background-page .results-scroll .grid:not(.list) { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:1100px){.background-page .results-scroll .grid:not(.list){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.background-page .results-scroll .grid:not(.list){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.background-page .results-scroll .grid:not(.list){grid-template-columns:repeat(2,minmax(0,1fr))}}
.processing-reminder { margin:8px 0; color:#9a6700; font-size:13px; line-height:1.7; font-weight:600; }
/* 操作 → 对比 → 结果：操作工具栏及横向原图队列。 */
.background-page .layout { grid-template-columns:minmax(0,1fr); align-items:start; }
.background-page .sidebar { display:grid; grid-template-columns:minmax(0,1fr) 220px 250px; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }
.background-page .drop { grid-column:1; grid-row:1; padding:20px; }
.background-page .drop .plus { width:40px; height:40px; line-height:40px; font-size:28px; margin-bottom:8px; }
.background-page .modes { grid-column:2; grid-row:1; }
.background-page .mode { padding:16px; }
.background-page .mode .mbody { flex-direction:column; align-items:stretch; gap:10px; }
.background-page .start-btn { grid-column:3; grid-row:1; width:100%; }
.background-page #trialNotice { grid-column:1/-1; grid-row:2; margin-bottom:0!important; }
.background-page .qwrap { grid-column:1/-1; grid-row:3; }
.background-page .qstrip { grid-template-columns:repeat(8,minmax(0,1fr)); }
.background-page .background-preview { align-self:start; }
.background-page .preview-title { display:block; }
.background-page #previewHint { display:block; margin-top:6px; }
@media(max-width:1000px){.background-page .sidebar{grid-template-columns:minmax(0,1fr) 180px 220px}.background-page .qstrip{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:760px){.background-page .sidebar{grid-template-columns:1fr 1fr;padding:16px}.background-page .drop{grid-column:1/-1;grid-row:1}.background-page .modes{grid-column:1;grid-row:2}.background-page .start-btn{grid-column:2;grid-row:2}.background-page #trialNotice{grid-row:3}.background-page .qwrap{grid-row:4}.background-page .qstrip{grid-template-columns:repeat(4,minmax(0,1fr))}.background-page .mode .mbody{flex-direction:row;align-items:center}}
@media(max-width:480px){.background-page .qstrip{grid-template-columns:repeat(3,minmax(0,1fr))}.background-page .sidebar{gap:12px}.background-page .start-btn{font-size:14px;padding:16px 8px}.background-page .mode{padding:12px}}
/* 待处理原图保持单行，超出时横向滚动。 */
.background-page .qstrip { display:flex; gap:8px; overflow-x:scroll; overflow-y:hidden; max-height:none; padding-bottom:10px; scrollbar-gutter:auto; scrollbar-width:thin; scrollbar-color:#aab7ca #edf1f7; }
.background-page .qstrip .qitem { flex:0 0 136px; min-width:0; }
.background-page .qstrip::-webkit-scrollbar { height:8px; }
.background-page .qstrip::-webkit-scrollbar-track { background:#edf1f7; border-radius:8px; }
.background-page .qstrip::-webkit-scrollbar-thumb { background:#aab7ca; border-radius:8px; }
@media(max-width:600px){.background-page .qstrip .qitem{flex-basis:120px}}
/* 分辨率与开始按钮组成一列，旁边放处理提醒。 */
.processing-advice { display:none; }
.background-page .sidebar { grid-template-columns:minmax(0,2fr) minmax(190px,1fr) minmax(190px,1fr); grid-template-rows:auto auto; column-gap:24px; row-gap:12px; }
.background-page .drop { grid-column:1; grid-row:1/3; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.background-page .modes { grid-column:2; grid-row:1; align-self:end; }
.background-page .mode.active { padding:0; border:0; box-shadow:none; }
.background-page .mode .mbody { flex-direction:column; align-items:stretch; }
.background-page .start-btn { grid-column:2; grid-row:2; align-self:start; }
.background-page .processing-advice { display:block; grid-column:3; grid-row:1/3; align-self:center; color:#66758f; font-size:13px; line-height:1.75; }
.background-page .processing-advice > strong { font-size:14px; color:#475467; }
.background-page .processing-advice p { margin:8px 0 0; }
.background-page .processing-advice b { font-weight:600; color:#475467; }
.background-page #trialNotice { grid-row:3; }
.background-page .qwrap { grid-row:4; }
@media(max-width:760px){.background-page .sidebar{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}.background-page .drop{grid-column:1;grid-row:1}.background-page .modes{grid-column:1;grid-row:2}.background-page .start-btn{grid-column:1;grid-row:3}.background-page .processing-advice{grid-column:1;grid-row:4}.background-page #trialNotice{grid-column:1;grid-row:5}.background-page .qwrap{grid-column:1;grid-row:6}.background-page .mode .mbody{flex-direction:row;align-items:center}.background-page .start-btn{font-size:16px}}
/* 提醒使用轻量文字层级，并与操作区留出间距。 */
.background-page .processing-advice { padding-left:16px; font-size:12px; line-height:1.8; }
.background-page .processing-advice > strong { font-size:13px; }
.background-page .processing-advice b { font-weight:400; }
@media(max-width:760px){.background-page .processing-advice{padding-left:0}}
.background-page .processing-advice { align-self:start; }
@media(min-width:761px){.background-page .processing-advice{position:relative;top:10px}}
@media(min-width:761px){.background-page .drop{margin-right:16px}}

/* 照片修复输出为普通照片，不使用透明棋盘底。 */
.restoration-page .image-preview-dialog img { background:#fff; }

.upscaler-page .image-preview-dialog img { background:#fff; }
/* 三个功能页共用可缩放的大图查看器。 */
.image-preview-dialog { width:min(1100px,95vw); padding:16px; box-sizing:border-box; overflow:hidden; }
.image-viewer-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.image-viewer-toolbar label { display:flex; align-items:center; gap:6px; }
.image-viewer-toolbar form { margin:0 0 0 auto; }
.image-viewer-toolbar output { min-width:48px; text-align:center; font-size:14px; }
.image-viewer-hint { margin:10px 0; color:#66758f; font-size:12px; }
.image-viewer-viewport { height:65vh; overflow:auto; background:#eef1f6; cursor:grab; touch-action:none; position:relative; }
.image-viewer-viewport.dragging { cursor:grabbing; }
.image-viewer-canvas { display:flex; align-items:center; justify-content:center; position:relative; }
.image-preview-dialog .image-viewer-canvas img { display:block; max-width:none; max-height:none; margin:0; flex:none; user-select:none; pointer-events:none; }
@media(max-width:600px){.image-preview-dialog{padding:12px}.image-viewer-toolbar .btn{padding:8px;font-size:12px}.image-viewer-viewport{height:55vh}}