.image-tools-page{--img-brand:#2767ef;--img-deep:#164ebd;--img-soft:#edf4ff;--img-line:#e1e8f3;--img-green:#16935f;--img-ink:#16233a}.img-hero{padding:44px 0 28px;background:linear-gradient(180deg,#f8fbff 0%,#f3f7fd 100%);border-bottom:1px solid #e8edf6}.img-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.img-kicker{display:inline-flex;padding:6px 11px;border-radius:999px;background:#eaf2ff;color:#2564e8;font-size:12px;font-weight:900}.img-hero h1{font-size:42px;line-height:1.15;margin:14px 0 9px;letter-spacing:-.035em}.img-hero p{margin:0;color:#66758e;font-size:16px;line-height:1.75}.privacy-badge{display:flex;align-items:center;gap:12px;min-width:230px;background:#fff;border:1px solid #dfe8f5;border-radius:18px;padding:14px 16px;box-shadow:0 10px 30px rgba(39,75,130,.07)}.privacy-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e8f8f0;color:#138553;font-weight:900}.privacy-badge span:last-child{display:flex;flex-direction:column}.privacy-badge b{font-size:14px}.privacy-badge small{color:#78879d;font-size:11px}.img-workbench-section{padding:26px 0 60px}.preset-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}.preset-label{font-size:12px;font-weight:900;color:#64748a;margin-right:2px}.preset-chip{border:1px solid #dce5f2;background:#fff;color:#52647e;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer}.preset-chip:hover{border-color:#9bb9ef;color:#1d5dd8;background:#f4f8ff}.img-workbench{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(360px,.82fr);gap:18px;align-items:start}.upload-panel,.settings-panel,.result-panel{background:#fff;border:1px solid var(--img-line);border-radius:22px;box-shadow:0 14px 45px rgba(25,56,105,.065)}.upload-panel,.settings-panel{padding:20px}.settings-panel{position:sticky;top:86px;max-height:calc(100vh - 104px);overflow:auto;scrollbar-width:thin}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-title>div{display:flex;align-items:center;gap:10px}.panel-title b{font-size:16px}.step-no{width:28px;height:28px;border-radius:9px;background:#eaf2ff;color:#2564e8;display:inline-grid;place-items:center;font-size:12px;font-weight:900}.step-no.done{background:#e8f8f0;color:#0f8c58}.text-btn{border:0;background:transparent;color:#75859b;font-size:12px;font-weight:800;cursor:pointer;padding:5px}.text-btn:hover{color:#245fd1}.drop-zone{min-height:250px;border:2px dashed #b9cbe6;border-radius:20px;background:linear-gradient(180deg,#fbfdff,#f6f9fe);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;outline:none;transition:.18s border-color,.18s background,.18s transform}.drop-zone:hover,.drop-zone.dragover,.drop-zone:focus-visible{border-color:#4f86ed;background:#f0f6ff}.drop-zone.dragover{transform:scale(.996)}.drop-icon{width:60px;height:60px;border-radius:18px;background:#eaf2ff;color:#2564e8;display:grid;place-items:center;margin-bottom:12px}.drop-icon svg{width:31px}.drop-zone h2{font-size:20px;margin:0 0 6px}.drop-zone p{color:#7b899d;font-size:12px;margin:0 0 16px;max-width:460px}.primary-action{height:42px;border:0;border-radius:12px;padding:0 18px;background:linear-gradient(135deg,#2d72f5,#1852c5);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(39,103,239,.22)}.upload-note{margin:11px 3px 0;color:#76869c;font-size:11px}.upload-note span{color:#12925c;font-weight:900;margin-right:5px}.hidden{display:none!important}
.preview-panel{border:1px solid #dfe7f3;border-radius:18px;overflow:hidden;background:#fbfcfe}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid #e8edf5}.preview-tabs,.preview-actions{display:flex;align-items:center;gap:6px}.preview-tabs button,.mini-btn{height:31px;border:1px solid #dfe6f0;border-radius:9px;background:#fff;color:#64748a;padding:0 10px;font-size:10px;font-weight:850;cursor:pointer}.preview-tabs button.active{background:#2867f0;border-color:#2867f0;color:#fff}.mini-btn:hover:not(:disabled){border-color:#99b9ef;color:#225fcc;background:#f3f7ff}.mini-btn.active{background:#fff3ef;border-color:#e7a48b;color:#a84123}.mini-btn:disabled{opacity:.42;cursor:not-allowed}.preview-stage{height:470px;min-height:300px;display:grid;place-items:center;position:relative;background-color:#eef2f7;background-image:linear-gradient(45deg,#e2e7ee 25%,transparent 25%),linear-gradient(-45deg,#e2e7ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e7ee 75%),linear-gradient(-45deg,transparent 75%,#e2e7ee 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:hidden}.preview-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:default}.preview-stage.repairing canvas{cursor:crosshair}.preview-busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border-radius:10px;background:rgba(18,34,58,.88);color:#fff;font-size:11px}.preview-meta{background:#fff;border-top:1px solid #e8edf5;padding:11px 13px}.preview-meta>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}.preview-meta b{font-size:12px;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-meta span{font-size:10px;color:#8491a4}.repair-hint{margin-top:10px;padding:10px 11px;border-radius:11px;background:#fff8f5;border:1px solid #f0d2c7;display:grid;grid-template-columns:auto 1fr;gap:5px 9px;align-items:center}.repair-hint b{color:#a9472a;font-size:11px}.repair-hint span{font-size:10px;color:#7e6259}.repair-hint label{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:#745f58;font-size:10px}.repair-hint label input{flex:1;accent-color:#c65b36}.repair-hint label strong{min-width:42px;text-align:right}.repair-hint small{grid-column:1/-1;color:#a07c70;font-size:9px}.file-queue{margin-top:15px;border-top:1px solid #edf1f7;max-height:330px;overflow:auto}.file-queue.empty{border-top:0}.queue-empty{padding:24px;text-align:center;color:#a0aabc;font-size:12px}.file-item{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 7px;border-bottom:1px solid #edf1f7;border-radius:10px;cursor:pointer}.file-item:hover{background:#f8fbff}.file-item.selected{background:#edf4ff;box-shadow:inset 3px 0 #2867f0}.file-thumb{width:62px;height:50px;border-radius:10px;object-fit:cover;background:#eef2f7;border:1px solid #e2e8f1}.file-info{min-width:0}.file-name{display:block;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:3px;color:#8491a3;font-size:10px}.file-remove{width:31px;height:31px;border:1px solid #e6ebf2;border-radius:9px;background:#fff;color:#8995a5;cursor:pointer}.file-remove:hover{background:#fff2f1;color:#c03d38;border-color:#efc6c3}
.setting-block{border-top:1px solid #edf1f6;padding:15px 0}.setting-block:first-of-type{border-top:0;padding-top:0}.setting-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.setting-head b{font-size:13px}.setting-head span,.setting-head strong{font-size:11px;color:#75849a}.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.format-grid button{height:36px;border:1px solid #dfe6f0;border-radius:9px;background:#fff;color:#63738b;font-size:11px;font-weight:800;cursor:pointer}.format-grid button.active{background:#2867f0;color:#fff;border-color:#2867f0}.format-grid button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}.range{width:100%;accent-color:#2867f0}.range:disabled{opacity:.4}.range-labels{display:flex;justify-content:space-between;color:#9aa5b5;font-size:9px;margin-top:1px}.setting-tip{margin:7px 0 0;color:#8b97a8;font-size:10px;line-height:1.55}.size-estimate{margin-top:10px;border:1px solid #dce8fa;background:#f5f9ff;border-radius:11px;padding:10px 11px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}.size-estimate span{font-size:10px;color:#6c7b90}.size-estimate b{font-size:13px;color:#245fcf;text-align:right}.size-estimate small{grid-column:1/-1;color:#8b98aa;font-size:9px}.size-estimate.loading b{color:#8b98aa}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}.switch-row>span{display:flex;flex-direction:column}.switch-row b{font-size:13px}.switch-row small{color:#8c98a9;font-size:10px;margin-top:1px}.switch-row input{display:none}.switch-row i{width:40px;height:23px;background:#ccd5e2;border-radius:999px;position:relative;transition:.15s}.switch-row i:after{content:"";position:absolute;width:17px;height:17px;background:#fff;border-radius:50%;left:3px;top:3px;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:.15s}.switch-row input:checked+i{background:#2867f0}.switch-row input:checked+i:after{transform:translateX(17px)}.sub-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.sub-controls.disabled{display:none}.sub-controls label,.nested-grid label{position:relative;display:flex;flex-direction:column;gap:4px;color:#748398;font-size:10px}.sub-controls label.full,.nested-grid.full,.nested-grid label.full,.file-status.full{grid-column:1/-1}.sub-controls input[type=number],.sub-controls input[type=text],.sub-controls select,.nested-grid input[type=number],.nested-grid input[type=text],.nested-grid select,.file-control{height:37px;border:1px solid #dfe6ef;border-radius:9px;padding:0 30px 0 10px;color:#2c3b50;background:#fff;outline:none;font-size:12px;min-width:0}.sub-controls input:focus,.sub-controls select:focus,.nested-grid input:focus,.nested-grid select:focus{border-color:#72a1f3;box-shadow:0 0 0 3px rgba(45,114,245,.08)}.sub-controls label em,.nested-grid label em{position:absolute;right:10px;bottom:8px;font-style:normal;color:#9aa5b4;font-size:10px}.check-line{grid-column:1/-1!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important}.check-line input{accent-color:#2867f0}.hidden-field,.hidden-fields{display:none!important}.nested-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-input{padding:3px!important}.file-control{height:auto!important;padding:7px!important}.file-status{padding:8px 10px;border-radius:9px;background:#f7f9fc;color:#8290a4;font-size:10px}.rotation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rotation-btn{height:34px;border:1px solid #dfe6ef;border-radius:9px;background:#fff;color:#68778d;font-size:10px;font-weight:800;cursor:pointer}.rotation-btn.active{border-color:#2867f0;background:#eef4ff;color:#245fd1}.flip-row{display:flex;gap:18px;margin-top:10px;color:#63748b;font-size:11px}.flip-row label{display:flex;align-items:center;gap:6px}.flip-row input{accent-color:#2867f0}.metadata-block{display:flex;gap:10px;background:#f7f9fc;border:1px solid #e5ebf3!important;border-radius:12px;padding:11px!important;margin-top:3px}.metadata-icon{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#e7effc;color:#2867f0;font-weight:900;font-family:serif}.metadata-block b{font-size:11px}.metadata-block p{font-size:9px;color:#8290a3;line-height:1.55;margin:3px 0 0}.process-btn{width:100%;min-height:52px;border:0;border-radius:13px;background:linear-gradient(135deg,#2d72f5,#164dbb);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(39,103,239,.2)}.process-btn small{font-size:9px;font-weight:600;opacity:.82}.process-btn:disabled{background:#c9d2df;box-shadow:none;cursor:not-allowed}.process-btn.processing{cursor:wait;opacity:.86}
.result-panel{margin-top:18px;padding:20px}.result-panel.hidden{display:none}.result-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.result-head>div{display:flex;align-items:center;gap:10px}.result-head>div>div{display:flex;flex-direction:column}.result-head b{font-size:16px}.result-head p{margin:1px 0 0;color:#8290a3;font-size:10px}.zip-btn{height:41px;border:1px solid #cddbf0;background:#edf4ff;color:#235dc8;border-radius:11px;padding:0 15px;font-weight:900;font-size:12px;cursor:pointer}.zip-btn:hover{background:#e2edff}.result-tip{padding:9px 11px;margin-bottom:5px;background:#fffaf0;border:1px solid #f0e2bc;border-radius:10px;color:#846d38;font-size:10px}.result-list{border-top:1px solid #edf1f7}.result-item{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f7}.result-thumb{width:70px;height:55px;object-fit:cover;border:1px solid #e1e7f0;border-radius:10px;background:#eef2f7}.result-name{font-size:12px;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:#8390a1;margin-top:4px}.saving{color:#12875a;font-weight:800}.saving.negative{color:#a96232}.result-actions{display:flex;gap:7px}.result-preview-btn,.result-download{height:35px;border-radius:9px;padding:0 12px;font-size:11px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.result-preview-btn{border:1px solid #cddbf0;background:#f4f8ff;color:#245fcf}.result-download{border:0;background:#2867f0;color:#fff}.result-preview-modal{position:fixed;z-index:700;inset:0;background:rgba(8,18,34,.72);display:grid;place-items:center;padding:22px}.result-preview-modal.hidden{display:none}.result-preview-card{width:min(1100px,96vw);height:min(860px,92vh);background:#fff;border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.38);display:flex;flex-direction:column;overflow:hidden}.result-preview-head{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8edf5}.result-preview-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}.result-preview-head b{font-size:15px}.result-preview-head span{font-size:10px;color:#7f8ca0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-preview-head button{width:36px;height:36px;border:1px solid #dfe5ee;border-radius:10px;background:#fff;color:#65758a;font-size:22px;cursor:pointer}.result-preview-tabs{padding:9px 14px;display:flex;gap:6px;border-bottom:1px solid #edf1f6}.result-preview-tabs button{height:33px;padding:0 13px;border:1px solid #dfe6ef;background:#fff;border-radius:9px;color:#63748b;font-size:11px;font-weight:850;cursor:pointer}.result-preview-tabs button.active{background:#2867f0;border-color:#2867f0;color:#fff}.result-preview-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;background-color:#eef2f7;background-image:linear-gradient(45deg,#e2e7ee 25%,transparent 25%),linear-gradient(-45deg,#e2e7ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e7ee 75%),linear-gradient(-45deg,transparent 75%,#e2e7ee 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;padding:18px}.result-preview-stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 6px 22px rgba(15,30,55,.18)}.result-preview-foot{min-height:62px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e8edf5}.result-preview-foot span{font-size:10px;color:#7d8a9d}
.img-info-section{padding:54px 0}.img-info-section.slim{padding-top:0}.img-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.img-feature-grid article{background:#fff;border:1px solid #e2e8f2;border-radius:18px;padding:20px;min-height:170px}.img-feature-grid article>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#edf4ff;color:#2867f0;font-weight:900}.img-feature-grid h3{font-size:15px;margin:13px 0 6px}.img-feature-grid p{color:#748399;font-size:11px;line-height:1.7;margin:0}.img-help-card{background:#fff;border:1px solid #e2e8f2;border-radius:22px;padding:28px}.img-help-card h2{font-size:20px;margin:0 0 10px}.img-help-card h2:not(:first-child){margin-top:25px}.img-help-card p,.img-help-card li{color:#6e7d92;font-size:13px;line-height:1.75}.img-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:900;opacity:0;pointer-events:none;background:#13233b;color:#fff;padding:10px 15px;border-radius:10px;font-size:11px;box-shadow:0 12px 35px rgba(0,0,0,.2);transition:.18s opacity,.18s transform}.img-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1080px){.img-workbench{grid-template-columns:1fr}.settings-panel{position:static;max-height:none;overflow:visible}.img-feature-grid{grid-template-columns:repeat(2,1fr)}.preview-stage{height:520px}}
@media(max-width:760px){.img-hero{padding:34px 0 22px}.img-hero-inner{align-items:flex-start;flex-direction:column}.img-hero h1{font-size:34px}.privacy-badge{width:100%;min-width:0}.upload-panel,.settings-panel,.result-panel{border-radius:17px;padding:15px}.drop-zone{min-height:230px;padding:20px}.preview-toolbar{align-items:flex-start;flex-direction:column}.preview-actions{width:100%;overflow-x:auto}.preview-stage{height:390px}.result-item{grid-template-columns:58px minmax(0,1fr)}.result-thumb{width:58px;height:48px}.result-actions{grid-column:2;justify-self:start}.result-head{align-items:flex-start;flex-direction:column}.zip-btn{width:100%}.img-feature-grid{grid-template-columns:1fr}.format-grid,.rotation-grid{grid-template-columns:repeat(3,1fr)}.result-preview-card{height:92vh}.result-preview-foot{align-items:flex-start;flex-direction:column}.result-preview-foot .result-download{width:100%}}
@media(max-width:520px){.wrap{width:min(100% - 24px,1120px)}.file-item{grid-template-columns:52px minmax(0,1fr) auto}.file-thumb{width:52px;height:45px}.sub-controls,.nested-grid{grid-template-columns:1fr}.sub-controls label.full,.nested-grid.full,.nested-grid label.full,.file-status.full,.check-line{grid-column:auto!important}.preset-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.preset-chip,.preset-label{white-space:nowrap}.img-help-card{padding:20px}.preview-stage{height:310px}.preview-meta>div:first-child{align-items:flex-start;flex-direction:column}.preview-meta b{max-width:100%}.format-grid{grid-template-columns:repeat(2,1fr)}}
/* v2.12 实时效果预览与尺寸比例锁定 */
.preview-live-title{display:flex;align-items:center;gap:9px;min-width:0}.preview-live-title>div{display:flex;flex-direction:column;min-width:0}.preview-live-title b{font-size:12px;color:#253954}.preview-live-title small{font-size:9px;color:#8a98aa;margin-top:1px}.live-dot{width:9px;height:9px;border-radius:50%;background:#18a36a;box-shadow:0 0 0 4px rgba(24,163,106,.12);flex:0 0 auto}.original-toggle.active{background:#eef4ff;border-color:#8eb0ec;color:#205bc7}.ratio-lock{padding:8px 10px;border:1px solid #dfe7f3;border-radius:10px;background:#f8fafc}.ratio-lock.locked{border-color:#b7cdf2;background:#f1f6ff}.ratio-lock>span{display:flex;flex-direction:column;gap:1px}.ratio-lock b{font-size:10px;color:#52657e}.ratio-lock small{font-size:9px;color:#8a97a8}.ratio-lock input{width:16px;height:16px;flex:0 0 auto}.ratio-lock.locked b{color:#245fcf}
@media(max-width:760px){.preview-live-title{width:100%}.preview-toolbar{gap:9px}.preview-actions{justify-content:flex-start}}
/* v2.13 消除笔与水印旋转增强 */
.repair-brush-cursor{position:absolute;left:0;top:0;width:42px;height:42px;border:2px solid rgba(255,255,255,.96);border-radius:50%;box-shadow:0 0 0 1px rgba(26,44,72,.72),0 2px 10px rgba(0,0,0,.22);transform:translate(-50%,-50%);pointer-events:none;z-index:5;mix-blend-mode:difference}
.repair-brush-cursor.hidden{display:none}.preview-stage.repairing canvas{cursor:none}
.repair-brush-control{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:12px;align-items:center;padding:10px;border:1px solid #efd7ce;background:#fff;border-radius:11px}
.repair-brush-control label{grid-column:auto!important;margin:0;display:grid!important;grid-template-columns:auto minmax(120px,1fr) auto;gap:8px;align-items:center}.repair-brush-control label input{min-width:100px}.repair-brush-control label strong{min-width:58px!important;color:#9a3f26}
.brush-size-demo{height:126px;border:1px dashed #e4b5a5;border-radius:11px;background:linear-gradient(135deg,#fffaf7,#fff);display:grid;place-items:center;overflow:hidden;position:relative}.brush-size-demo:after{content:"实际笔刷";position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:8px;color:#ae8173}.brush-size-demo i{width:42px;height:42px;border:2px solid #c65331;border-radius:50%;background:rgba(218,93,58,.09);box-shadow:0 0 0 4px rgba(218,93,58,.06);display:block;transition:width .08s,height .08s}
.watermark-angle-field{gap:8px!important}.angle-control{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:9px;align-items:center}.angle-control>span{position:relative;display:block}.angle-control>span input{width:100%}.angle-control>span em{position:absolute;right:10px;bottom:9px}.angle-presets{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.angle-presets button{height:29px;border:1px solid #dfe6ef;border-radius:8px;background:#fff;color:#6d7b8e;font-size:9px;font-weight:800;cursor:pointer}.angle-presets button:hover{border-color:#a9c1ec;color:#245fcf}.angle-presets button.active{background:#edf4ff;border-color:#87a9e5;color:#245fcf}
@media(max-width:760px){.repair-brush-control{grid-template-columns:1fr}.brush-size-demo{height:126px}.angle-presets{grid-template-columns:repeat(4,1fr)}}