.image-tool{min-height:100vh;padding:0 0 64px;padding-top:calc(var(--main-header-h) + var(--main-header-offset) + 16px);box-sizing:border-box;color:#ecf3ff;background-color:#081120;justify-content:center;align-items:stretch;display:flex;position:relative}.image-tool-shell{z-index:2;flex-direction:column;gap:24px;width:min(1200px,92vw);display:flex;position:relative}.image-tool-topbar{justify-content:space-between;align-items:center;padding:0 4px;display:flex}.image-tool-topbar-brand{color:var(--fg-0,#fff);letter-spacing:.4px;align-items:center;gap:10px;font-weight:600;display:flex}.image-tool-topbar-brand--placeholder{visibility:hidden;min-width:60px;min-height:32px}.image-tool-topbar .logo-mark{filter:drop-shadow(0 0 10px #129cff59)}.image-tool-actions{visibility:hidden;align-items:center;gap:8px;display:flex}.image-tool-tabs{background:#14203494;border:1px solid #ffffff1f;border-radius:18px;gap:12px;width:fit-content;padding:10px;display:flex;box-shadow:inset 0 1px 12px #ffffff14}.image-tool-tabs .ant-btn{letter-spacing:.2px;border-radius:12px;min-width:104px;font-weight:700}.image-tool-tabs .ant-btn-primary{color:#fff;background:linear-gradient(#5fb6ff,#3a5cff);border:1px solid #ffffff38;box-shadow:0 6px 16px #317eff59}.image-tool-tabs .ant-btn-primary:not(:disabled):hover{filter:saturate(1.05);box-shadow:0 10px 22px #317eff73}.image-tool-tabs .ant-btn-primary:disabled{color:#ffffffa6;box-shadow:none;background:linear-gradient(#5fb6ff59,#3a5cff59)}.image-tool-tabs .ant-btn-text{color:#ecf3ffdb}.image-tool-tabs .ant-btn-text:not(:disabled):hover{color:#fff;background:#ffffff0f}.image-tool-tabs .ant-btn-text:disabled{color:#ecf3ff73}.image-tool-content{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);align-items:stretch;gap:20px;display:grid}.image-tool-stage-card{background:#0c1a30b8;border:1px solid #ffffff2e;border-radius:26px;justify-content:center;align-items:center;width:min(960px,100%);height:min(640px,100%);padding:16px;display:flex;position:relative;box-shadow:0 20px 50px #04102e73,inset 0 0 0 1px #ffffff1a}.image-stage{aspect-ratio:16/9;background:radial-gradient(circle at 48% 52%,#28466eb8,#0a101ef0);border-radius:0;flex:none;justify-content:center;align-items:center;width:min(960px,100%);height:min(640px,100%);display:flex;position:relative;overflow:hidden}.image-stage:after{content:"";pointer-events:none;border-radius:0;position:absolute;inset:0;box-shadow:inset 0 0 0 2px #ffffff24,0 0 0 1px #0000004d}.image-stage-preview{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block}.image-stage-crop{z-index:10;border:2px solid #47abfff2;border-radius:14px;transition:opacity .2s;position:absolute;box-shadow:0 0 0 10000px #000c1e80}.image-stage-crop .crop-overlay{pointer-events:none;border-radius:12px;position:absolute;inset:0;overflow:hidden}.crop-guides{background:linear-gradient(90deg,#ffffff1f 1px,#0000 1px) 33.33% 0/33.33% 100% repeat-x,linear-gradient(90deg,#ffffff1f 1px,#0000 1px) 66.66% 0/33.33% 100% repeat-x,linear-gradient(#ffffff1f 1px,#0000 1px) 0 33.33%/100% 33.33% repeat-y,linear-gradient(#ffffff1f 1px,#0000 1px) 0 66.66%/100% 33.33% repeat-y;position:absolute;inset:0}.crop-handle{cursor:pointer;background:linear-gradient(#8fe1ff,#2b64ff);border:2px solid #ffffffe6;border-radius:4px;width:16px;height:16px;position:absolute;box-shadow:0 4px 12px #1478ff59}.handle-n{cursor:ns-resize;top:-8px;left:50%;transform:translate(-50%)}.handle-s{cursor:ns-resize;bottom:-8px;left:50%;transform:translate(-50%)}.handle-e{cursor:ew-resize;top:50%;right:-8px;transform:translateY(-50%)}.handle-w{cursor:ew-resize;top:50%;left:-8px;transform:translateY(-50%)}.handle-ne{cursor:nesw-resize;top:-8px;right:-8px}.handle-nw{cursor:nwse-resize;top:-8px;left:-8px}.handle-se{cursor:nwse-resize;bottom:-8px;right:-8px}.handle-sw{cursor:nesw-resize;bottom:-8px;left:-8px}.crop-core{cursor:grab;position:absolute;inset:0}.crop-core:active{cursor:grabbing}.qr-overlay{border:2px solid var(--accent-blue,#3a5cff);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);z-index:12;border-radius:12px;position:absolute;overflow:hidden;box-shadow:0 12px 32px #0a285a73}.qr-overlay img{pointer-events:none;width:100%;height:100%;display:block}.qr-overlay:active{cursor:grabbing}.qr-overlay--inactive{pointer-events:none;opacity:.85;cursor:default}.qr-overlay-handle{cursor:nwse-resize;background:linear-gradient(135deg,#3a5cff,#6b8bff);border:2px solid #fff;border-radius:50%;width:26px;height:26px;position:absolute;bottom:-12px;right:-12px;box-shadow:0 6px 16px #12348a66}.image-stage-empty{text-align:center;color:var(--fg-1,#ecf3fffa);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:20px;display:flex}.image-stage-empty .ant-typography,.image-stage-empty h1,.image-stage-empty h2,.image-stage-empty h3,.image-stage-empty h4,.image-stage-empty h5{color:#ecf3ff;text-shadow:0 1px 2px #00000059;margin:0}.image-stage-empty .ant-typography-secondary{color:#d0e0ffeb}.image-tool-sidecard{flex-direction:column;display:flex}.panel{color:var(--fg-1,#ecf3ff);background:#0c1a30cc;border:1px solid #ffffff1f;border-radius:24px;flex-direction:column;gap:20px;padding:20px;display:flex;box-shadow:0 18px 44px #04102e73}.panel .ant-typography{color:var(--fg-2,#f0f6ffe0);margin-bottom:0}.slider-row{color:var(--fg-2,#ffffffd9);flex-direction:column;gap:12px;display:flex}.resize-controls{flex-direction:column;gap:14px;margin-top:6px;display:flex}.resize-controls .slider-row{margin:0}.compress-panel{gap:18px}.compress-slider{flex-direction:column;gap:10px;display:flex}.compress-slider-header{color:var(--fg-1,#ffffffeb);justify-content:space-between;align-items:center;font-weight:600;display:flex}.compress-format-group{background:#1e345e8c;border-radius:20px;align-self:flex-start;gap:12px;padding:6px;display:flex;box-shadow:inset 0 0 0 1px #ffffff14}.compress-format-group .ant-btn{border-radius:999px;flex:1;min-width:120px;font-weight:600}.compress-panel .ant-slider{padding:6px 0 0}.compress-panel .ant-slider-rail{background:#f0f4ff59;height:6px}.compress-panel .ant-slider-track{background:linear-gradient(90deg,#5787fff2,#58c4ffd9);height:6px}.compress-panel .ant-slider-handle:after{box-shadow:0 0 0 2px #ffffffd9}.slider-header{color:var(--fg-1,#ffffffeb);justify-content:space-between;align-items:center;font-weight:600;display:flex}.qr-preview{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.qr-box{background:#0c1a30e6;border:1px solid #ffffff14;border-radius:16px;justify-content:center;align-items:center;padding:16px;display:flex}.compress-stats{color:var(--fg-0,#ffffffeb);font-weight:600}.compress-preview{background:#0c1a30c2;border:1px solid #ffffff14;border-radius:16px;justify-content:center;align-items:center;padding:12px;display:flex}.compress-preview img{border-radius:12px;max-width:100%}.upload-info{color:var(--fg-0,#f0f6ffeb);font-weight:600}.image-tool-file-input{display:none}@media (max-width:1023px){.image-tool{padding:32px 16px 64px}.image-tool-shell{width:100%}.image-tool-content{grid-template-columns:1fr;gap:16px}.image-tool-tabs{justify-content:space-between;width:100%}.image-tool-tabs .ant-btn{flex:1;min-width:auto}.image-stage{width:100%;min-height:260px;max-height:none}}
