.image-tools-page{--ink:#e8edf5;--muted:#8c9aae;--line:#94a3b829;--panel:#111820;--accent:#ff7a45;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 72% 5%,#ff7a4517,#0000 30%),radial-gradient(circle at 12% 20%,#3b82f612,#0000 28%);padding:72px 24px 100px}.image-tools-page *{box-sizing:border-box}.image-tools-page button,.image-tools-page input{font:inherit}.image-tools-container{width:100%;max-width:1200px;margin:auto}.image-tools-hero{grid-template-columns:1fr 390px;align-items:end;gap:48px;margin:0 0 40px;display:grid}.image-tools-kicker,.result-kicker{color:var(--accent);letter-spacing:.2em;margin-bottom:14px;font-size:11px;font-weight:800;display:block}.image-tools-hero h1{letter-spacing:-.055em;margin:0;font-size:clamp(40px,6vw,72px);font-weight:780;line-height:.98}.image-tools-hero h1 em{color:var(--accent);font-style:normal}.image-tools-hero p{color:var(--muted);margin:24px 0 0;font-size:14px;line-height:1.75}.hero-visual{border:1px solid var(--line);background:#111820b3;border-radius:24px;padding:24px;box-shadow:0 24px 70px #0003}.hero-frame{justify-content:space-between;align-items:center;gap:16px;display:flex}.hero-frame span{aspect-ratio:1;border:1px solid var(--line);background:#17212b;border-radius:18px;place-items:center;width:92px;font-size:17px;font-weight:800;display:grid}.hero-frame span:last-child{color:var(--accent);background:#ff7a4514;border-color:#ff7a4559}.hero-frame b{color:#5d6a79;font-size:24px}.hero-visual small{color:#657385;letter-spacing:.18em;text-align:center;margin-top:18px;font-size:9px;font-weight:800;display:block}.image-dropzone{width:100%;min-height:330px;color:var(--ink);cursor:pointer;background:linear-gradient(145deg,#161f29eb,#0d131aeb);border:1px dashed #425061;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex}.image-dropzone:hover,.image-dropzone.is-dragging{border-color:var(--accent);background:linear-gradient(145deg,#ff7a4514,#0d131af2);transform:translateY(-2px)}.upload-mark{background:var(--accent);color:#111;border-radius:18px;place-items:center;width:58px;height:58px;margin-bottom:20px;font-size:30px;font-weight:300;display:grid;box-shadow:0 14px 35px #ff7a4538}.image-dropzone strong{letter-spacing:-.02em;font-size:21px}.image-dropzone>span:not(.upload-mark){color:var(--muted);margin-top:7px;font-size:14px}.image-dropzone small{border:1px solid var(--line);color:#6f7e90;border-radius:100px;margin-top:24px;padding:8px 12px;font-size:11px}.image-dropzone kbd{color:#aeb9c7;background:#1b2530;border:1px solid #3d4958;border-bottom-width:2px;border-radius:6px;margin-top:18px;padding:4px 8px;font-size:10px}.image-dropzone i{color:#657385;margin-top:5px;font-size:10px;font-style:normal}.image-file-bar{border:1px solid var(--line);background:#111820d1;border-radius:18px;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;padding:14px 16px;display:flex}.image-file-info{align-items:center;gap:13px;min-width:0;display:flex}.file-thumb{background:#26313e;border-radius:11px;flex:none;width:46px;height:46px;overflow:hidden}.file-thumb img{object-fit:cover;width:100%;height:100%}.image-file-info div{min-width:0}.image-file-info strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;display:block;overflow:hidden}.image-file-info div span{color:var(--muted);margin-top:5px;font-size:11px;display:block}.image-change-btn,.image-card-header button,.text-button,.image-clear-btn{color:var(--muted);cursor:pointer;background:0 0;border:0}.image-change-btn{border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:12px}.image-change-btn:hover{color:var(--ink);border-color:#68788b}.image-tabs{border:1px solid var(--line);background:#0d131acc;border-radius:20px;grid-template-columns:repeat(5,1fr);margin-bottom:18px;padding:7px;display:grid}.image-tabs button{color:#708093;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:14px;min-width:0;padding:14px 10px;transition:all .18s}.image-tabs button:hover{color:#cbd4df;background:#ffffff06}.image-tabs button.active{color:var(--ink);background:#1b252f;box-shadow:inset 0 0 0 1px #ff7a452e}.image-tabs button>span{float:left;color:#8b9aab;background:#202b36;border-radius:10px;place-items:center;width:33px;height:33px;margin-right:10px;font-size:16px;font-weight:800;display:grid}.image-tabs button.active>span{background:var(--accent);color:#18130f}.image-tabs strong,.image-tabs small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.image-tabs strong{font-size:13px}.image-tabs small{color:#647385;margin-top:4px;font-size:9px}.image-workspace{grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr);align-items:stretch;gap:18px;display:grid}.image-preview-card,.image-control-card,.image-result-card{border:1px solid var(--line);background:#111820e0;border-radius:24px;overflow:hidden;box-shadow:0 20px 55px #00000024}.image-card-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.image-card-header div span,.image-card-header div small{display:block}.image-card-header div span{font-size:13px;font-weight:750}.image-card-header div small{color:#68778a;margin-top:3px;font-size:9px}.image-card-header button{font-size:11px}.image-preview{background-color:#0c1218;background-image:linear-gradient(45deg,#141c24 25%,#0000 25%),linear-gradient(-45deg,#141c24 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#141c24 75%),linear-gradient(-45deg,#0000 75%,#141c24 75%);background-position:0 0,0 11px,11px -11px,-11px 0;background-size:22px 22px;justify-content:center;align-items:center;min-height:555px;padding:34px;display:flex}.image-preview img{object-fit:contain;border-radius:4px;max-width:100%;max-height:500px;display:block;box-shadow:0 18px 55px #0006}.image-control-card{flex-direction:column;display:flex}.control-heading{border-bottom:1px solid var(--line);align-items:center;gap:13px;height:64px;padding:0 20px;display:flex}.control-icon{width:34px;height:34px;color:var(--accent);background:#ff7a451f;border-radius:10px;place-items:center;font-weight:800;display:grid}.control-heading h2{margin:0;font-size:15px}.control-heading p{color:#677689;margin:3px 0 0;font-size:10px}.image-settings{flex:1;padding:26px 24px}.setting-heading{margin-bottom:26px}.setting-heading strong{letter-spacing:-.02em;font-size:19px;display:block}.setting-heading span{color:var(--muted);margin-top:8px;font-size:12px;line-height:1.6;display:block}.range-setting{margin-bottom:20px;display:block}.range-setting>span{color:#a8b3c1;justify-content:space-between;margin-bottom:12px;font-size:12px;font-weight:650;display:flex}.range-setting b{color:var(--accent)}.range-setting input{width:100%;accent-color:var(--accent);cursor:pointer}.quality-hint{color:#596778;justify-content:space-between;margin-top:-12px;font-size:9px;display:flex}.setting-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.dimension-grid{grid-template-columns:1fr 16px 1fr;align-items:end;gap:8px;display:grid}.dimension-grid>label>span,.setting-label>span,.position-setting>span{color:#8290a1;margin-bottom:8px;font-size:11px;font-weight:650;display:block}.dimension-grid>label>div{position:relative}.dimension-grid input,.setting-label input{width:100%;height:46px;color:var(--ink);background:#0d141b;border:1px solid #344150;border-radius:11px;outline:0;padding:0 38px 0 12px}.dimension-grid input:focus,.setting-label input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ff7a451a}.dimension-grid input:disabled{opacity:.5}.dimension-grid i{color:#5d6b7c;font-size:10px;font-style:normal;position:absolute;top:15px;right:12px}.dimension-grid>b{color:#586676;text-align:center;padding-bottom:14px}.check-setting{color:#a7b2c0;cursor:pointer;align-items:center;gap:8px;margin-top:16px;font-size:12px;display:flex}.check-setting input{accent-color:var(--accent)}.setting-label{display:block}.watermark-upload{color:#aab5c2;cursor:pointer;background:#151e27;border:1px dashed #3d4b5b;border-radius:11px;width:100%;margin-top:12px;padding:12px;font-size:11px}.text-button{color:#758497;margin:8px auto 22px;font-size:10px;display:block}.format-options{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.format-options button{color:#8d9aaa;cursor:pointer;background:#0d141b;border:1px solid #344150;border-radius:12px;min-height:82px}.format-options strong,.format-options span{display:block}.format-options strong{font-size:14px}.format-options span{margin-top:7px;font-size:8px}.format-options button.active,.crop-options button.active{border-color:var(--accent);color:var(--accent);background:#ff7a4517}.crop-options{grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:22px;display:grid}.crop-options button{color:#8d9aaa;cursor:pointer;background:#0d141b;border:1px solid #344150;border-radius:9px;height:40px;padding:0;font-size:10px}.position-setting{margin-top:3px}.position-grid{background:#0d141b;border:1px solid #344150;border-radius:10px;width:116px;height:80px;position:relative}.position-grid button{cursor:pointer;background:0 0;border:0;width:18px;height:18px;padding:0;position:absolute}.position-grid button i{background:#4e5c6c;border-radius:50%;width:7px;height:7px;margin:auto;display:block}.position-grid button.active i{background:var(--accent);width:9px;height:9px;box-shadow:0 0 0 4px #ff7a4524}.position-grid .top-left{top:5px;left:5px}.position-grid .top-right{top:5px;right:5px}.position-grid .center{top:30px;left:48px}.position-grid .bottom-left{bottom:5px;left:5px}.position-grid .bottom-right{bottom:5px;right:5px}.status-message{border-radius:9px;margin:0 24px 14px;padding:11px 13px;font-size:10px}.status-message.success{color:#6ee7b7;background:#34d39914}.status-message.error{color:#fca5a5;background:#f8717114}.image-process-btn{background:var(--accent);color:#1a120e;cursor:pointer;border:0;border-radius:12px;min-height:52px;margin:0 24px 24px;font-size:13px;font-weight:800;transition:all .18s;box-shadow:0 10px 24px #ff7a452b}.image-process-btn:hover{background:#ff8b5b;transform:translateY(-1px)}.image-process-btn:disabled{opacity:.6;cursor:wait;transform:none}.spinner{vertical-align:-2px;border:2px solid #00000040;border-top-color:#111;border-radius:50%;width:12px;height:12px;margin-right:7px;animation:.7s linear infinite image-spin;display:inline-block}@keyframes image-spin{to{transform:rotate(360deg)}}.image-result-card{margin-top:18px;padding:24px}.result-heading{justify-content:space-between;align-items:center;gap:18px;display:flex}.result-heading h2{letter-spacing:-.02em;margin:0;font-size:20px}.result-kicker{margin-bottom:7px}.download-result-btn{color:#10161d;cursor:pointer;background:#edf1f6;border:0;border-radius:12px;min-height:48px;padding:0 18px;font-size:12px;font-weight:800}.download-result-btn span{margin-right:7px;font-size:17px}.result-stats{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px;display:grid}.result-stats>div{border:1px solid var(--line);background:#0d141b;border-radius:11px;padding:14px}.result-stats span,.result-stats strong{display:block}.result-stats span{color:#667588;font-size:9px}.result-stats strong{margin-top:6px;font-size:12px}.result-stats .highlight strong{color:#6ee7b7}.image-clear-btn{color:#69788a;margin:22px auto 0;padding:8px;font-size:11px;display:block}.image-clear-btn:hover{color:#fca5a5}@media (max-width:900px){.image-tools-page{padding:52px 18px 80px}.image-tools-hero{grid-template-columns:1fr}.hero-visual{display:none}.image-workspace{grid-template-columns:1fr}.image-preview{min-height:420px}.image-tabs button{text-align:center}.image-tabs button>span{float:none;margin:0 auto 6px}.image-tabs small{display:none}.result-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.image-tools-page{padding:36px 12px 65px}.image-tools-hero{margin-bottom:28px}.image-tools-hero h1{font-size:42px}.image-dropzone{min-height:280px}.image-file-bar{align-items:flex-start}.image-file-info div span{white-space:normal}.image-tabs{grid-template-columns:repeat(5,minmax(82px,1fr));overflow-x:auto}.image-tabs strong{font-size:10px}.image-preview{min-height:320px;padding:18px}.image-preview img{max-height:300px}.image-settings{padding:22px 18px}.image-process-btn{margin:0 18px 18px}.setting-grid,.format-options{grid-template-columns:1fr}.format-options button{min-height:60px}.crop-options{grid-template-columns:repeat(3,1fr)}.result-heading{flex-direction:column;align-items:flex-start}.download-result-btn{width:100%}.result-stats{grid-template-columns:1fr 1fr}}