/* 图片压缩 / 图片加水印独立工具页的额外样式（配合 tool-image.css 使用） */

/* ===== 压缩控制条 ===== */
#options{padding:0 0 24px;}
#options .opt-panel,#watermark-options .wm-panel{border-radius:16px;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);padding:8px 20px;}
#options .opt-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 0;}
#options .opt-row + .opt-row{border-top:1px solid #f1f5f9;}
#options .opt-label{width:80px;font-size:14px;font-weight:600;color:#374151;flex-shrink:0;}
#options .opt-radio label{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:14px;color:#1f2937;cursor:pointer;}
#options input[type="range"]{flex:1;min-width:180px;accent-color:#16a085;}
#options .opt-value{min-width:44px;text-align:center;font-size:14px;font-weight:600;color:#16a085;}

/* ===== 加水印参数面板 ===== */
#watermark-options{padding:0 0 24px;}
#watermark-options .wm-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 0;}
#watermark-options .wm-row + .wm-row{border-top:1px solid #f1f5f9;}
#watermark-options .wm-label{width:80px;font-size:14px;font-weight:600;color:#374151;flex-shrink:0;}
#watermark-options .wm-radio label{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:14px;color:#1f2937;cursor:pointer;}
#watermark-options input[type="text"]{flex:1;min-width:160px;height:38px;padding:0 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;color:#1f2937;outline:none;}
#watermark-options input[type="text"]:focus{border-color:#16a085;}
#watermark-options input[type="range"]{flex:1;min-width:160px;accent-color:#16a085;}
#watermark-options input[type="color"]{width:48px;height:38px;padding:2px;border:1px solid #cbd5e1;border-radius:8px;cursor:pointer;background:#fff;}
#watermark-options .wm-value{min-width:44px;text-align:center;font-size:14px;font-weight:600;color:#16a085;}
#watermark-options .wm-btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:none;border-radius:8px;background:#16a085;color:#fff;font-size:14px;cursor:pointer;}
#watermark-options .wm-btn:hover{background:#1abc9c;}
#watermark-options .wm-filename{font-size:13px;color:#6b7280;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#watermark-options .wm-pos{display:grid;grid-template-columns:repeat(3,40px);gap:6px;}
#watermark-options .pos-btn{width:40px;height:40px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
#watermark-options .pos-btn:hover{border-color:#16a085;color:#16a085;}
#watermark-options .pos-btn.active{border-color:#16a085;background:#16a085;color:#fff;}

/* ===== 压缩节省比例 ===== */
.save-badge{color:#16a085;font-weight:600;white-space:nowrap;}
.save-badge.up{color:#dc2626;}

/* ===== 裁剪位置九宫格 / 数值输入 / 复选框（resize/crop/rotate 复用） ===== */
#options .wm-pos{display:grid;grid-template-columns:repeat(3,40px);gap:6px;}
#options .pos-btn{width:40px;height:40px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
#options .pos-btn:hover{border-color:#16a085;color:#16a085;}
#options .pos-btn.active{border-color:#16a085;background:#16a085;color:#fff;}
#options input[type="number"]{width:120px;height:38px;padding:0 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;color:#1f2937;outline:none;}
#options input[type="number"]:focus{border-color:#16a085;}

@media screen and (max-width:1000px){
  #options,#watermark-options{margin-left:10px;margin-right:10px;}
  #options .opt-label,#watermark-options .wm-label{width:100%;}
}

/* ===== 图片工具广度扩展（merge/pdf/gif/base64/exif/split/filter/mosaic）补充样式 ===== */
#files .copy-link,#files .view-link,#files .strip-link{color:#16a085;font-weight:500;text-decoration:none;font-size:14px;cursor:pointer;white-space:nowrap;margin-right:12px;}
#files .copy-link:hover,#files .view-link:hover,#files .strip-link:hover{color:#1abc9c;text-decoration:underline;}

#options select{height:38px;padding:0 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;color:#1f2937;outline:none;background:#fff;min-width:120px;}
#options select:focus{border-color:#16a085;}
#options input[type="checkbox"]{accent-color:#16a085;width:16px;height:16px;cursor:pointer;}

/* 结果区（merge / pdf / gif / exif 共用） */
#merge-result,#pdf-result,#gif-result,#exif-info{padding:0 0 24px;}
#merge-result .file-panel,#pdf-result .file-panel,#gif-result .file-panel,#exif-info .file-panel{border-radius:16px;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);overflow:hidden;}
#merge-result .panel-header,#pdf-result .panel-header,#gif-result .panel-header,#exif-info .panel-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-bottom:1px solid #f1f5f9;}
#merge-result .panel-header .title,#pdf-result .panel-header .title,#gif-result .panel-header .title,#exif-info .panel-header .title{font-size:16px;font-weight:700;color:#1f2937;}
#merge-result .actions,#pdf-result .actions,#gif-result .actions,#exif-info .actions{display:flex;gap:10px;flex-wrap:wrap;}
#merge-result .btn,#pdf-result .btn,#gif-result .btn,#exif-info .btn{display:inline-flex;align-items:center;justify-content:center;height:auto;line-height:1.5;letter-spacing:0;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;}
#merge-result .btn:disabled,#pdf-result .btn:disabled,#gif-result .btn:disabled,#exif-info .btn:disabled{opacity:.5;cursor:not-allowed;}
#merge-result .btn-primary,#pdf-result .btn-primary,#gif-result .btn-primary{background:#16a085;color:#fff;}
#merge-result .btn-primary:hover:not(:disabled),#pdf-result .btn-primary:hover:not(:disabled),#gif-result .btn-primary:hover:not(:disabled){background:#1abc9c;}
#exif-info .btn-secondary{background:#fff;border:1px solid #cbd5e1;color:#1f2937;}
#exif-info .btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#94a3b8;}
.result-body{padding:16px 20px;text-align:center;}
.result-body img{max-width:100%;max-height:480px;border-radius:8px;border:1px solid #e2e8f0;}
.result-info{margin-top:12px;font-size:14px;color:#64748b;}

/* EXIF 信息面板 */
.exif-file-name{font-weight:600;color:#1f2937;margin-bottom:12px;text-align:left;word-break:break-all;}
.exif-row{display:flex;padding:8px 0;border-bottom:1px solid #f1f5f9;text-align:left;}
.exif-row:last-child{border-bottom:none;}
.exif-k{width:120px;flex-shrink:0;color:#64748b;font-size:14px;}
.exif-v{flex:1;color:#1f2937;font-size:14px;word-break:break-all;}

/* ===== 单文件实时预览（filter / mosaic） ===== */
#preview{padding:0 0 24px;}
#preview .file-panel{border-radius:16px;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);overflow:hidden;}
#preview .panel-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-bottom:1px solid #f1f5f9;}
#preview .panel-header .title{font-size:16px;font-weight:700;color:#1f2937;}
#preview .actions{display:flex;gap:10px;flex-wrap:wrap;}
#preview .actions .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1.5;letter-spacing:0;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;}
#preview .actions .btn:disabled{opacity:.5;cursor:not-allowed;}
#preview .actions .btn-primary{background:#16a085;color:#fff;}
#preview .actions .btn-primary:hover:not(:disabled){background:#1abc9c;}
#preview .actions .btn-danger{background:#fee2e2;color:#b91c1c;}
#preview .actions .btn-danger:hover:not(:disabled){background:#fecaca;}
#preview .preview-body{padding:16px 20px;text-align:center;}
#preview .preview-empty{padding:48px 16px;text-align:center;color:#94a3b8;font-size:14px;}
#preview .preview-stage img{max-width:100%;max-height:520px;border-radius:8px;border:1px solid #e2e8f0;}
#preview .preview-meta{margin-top:12px;font-size:14px;color:#64748b;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;}
#preview .preview-name{font-weight:600;color:#1f2937;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#preview .preview-size{white-space:nowrap;}
@media screen and (max-width:1000px){
  #preview{margin-left:10px;margin-right:10px;}
  #preview .preview-name{max-width:180px;}
}