.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:#1e293b;background:#f8faff;justify-content:center;align-items:stretch;display:flex;position:relative}.image-tool-shell{z-index:2;flex-direction:column;gap:24px;width:min(1240px,94vw);display:flex;position:relative}.image-tool-hero{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(#fffffff0,#f8fbffe0),radial-gradient(circle at 100% 0,#3b82f61a,#3b82f600);border:1px solid #bfdbfeb8;border-radius:30px;grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 32px;display:grid;box-shadow:0 22px 60px #2563eb14,inset 0 1px #ffffffb8}.image-tool-hero-copy{flex-direction:column;gap:14px;max-width:780px;display:flex}.image-tool-hero-eyebrow{color:#2563eb;letter-spacing:.12em;background:#eff6ffeb;border:1px solid #93c5fdcc;border-radius:999px;width:fit-content;padding:8px 14px;font-size:12px;font-weight:800;line-height:1;display:inline-flex}.image-tool-hero-heading{flex-direction:column;gap:10px;display:flex}.image-tool-hero-heading .ant-typography{margin:0}.image-tool-hero-title.ant-typography{letter-spacing:-.03em;color:#0f172a;font-size:clamp(2.25rem,5vw,4rem);font-weight:800;line-height:1.04}.image-tool-hero-heading .ant-typography:last-child{color:#334155;max-width:68ch;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.8}.image-tool-hero-cta{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.image-tool-hero-cta .ant-btn-lg{border-radius:16px;height:52px;padding-inline:22px;font-weight:700;line-height:1}.image-tool-secondary-button,.image-tool-secondary-link,.image-tool-upgrade-link{border-radius:999px;justify-content:center;align-items:center;min-height:48px;padding:0 18px;font-weight:700;text-decoration:none;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s;display:inline-flex}.image-tool-secondary-button,.image-tool-secondary-link{color:#1d4ed8;background:linear-gradient(#eff6fffa,#dbeafeeb);border:1px solid #60a5fa80;box-shadow:inset 0 1px #ffffffc7,0 10px 22px #3b82f61f}.image-tool-secondary-button:hover,.image-tool-secondary-link:hover,.image-tool-upgrade-link:hover{transform:translateY(-1px)}.image-tool-secondary-button:hover,.image-tool-secondary-link:hover{color:#1d4ed8;background:linear-gradient(#dbeafe,#bfdbfef5);border-color:#2563eb9e}.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:#ffffffdb;border:1px solid #bfdbfeb8;border-radius:22px;gap:12px;width:fit-content;padding:10px;display:flex;box-shadow:0 16px 36px #2563eb14,inset 0 1px #ffffffd1}.image-tool-tabs .ant-btn{letter-spacing:.2px;border-radius:14px;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 10px 24px #317eff42}.image-tool-tabs .ant-btn-primary:not(:disabled):hover{filter:saturate(1.05);box-shadow:0 14px 26px #317eff52}.image-tool-tabs .ant-btn-primary:disabled{color:#ffffffa6;box-shadow:none;background:linear-gradient(#5fb6ff59,#3a5cff59)}.image-tool-tabs .ant-btn-text{color:#475569}.image-tool-tabs .ant-btn-text:not(:disabled):hover{color:#0f172a;background:#3b82f614}.image-tool-tabs .ant-btn-text:disabled{color:#4755696b}.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:#ffffffe6;border:1px solid #bfdbfeb3;border-radius:30px;justify-content:center;align-items:center;width:min(960px,100%);height:clamp(560px,62vh,640px);min-height:560px;padding:16px;display:flex;position:relative;box-shadow:0 26px 60px #2563eb14,inset 0 1px #ffffffd1}.image-stage{aspect-ratio:16/9;background:linear-gradient(#f8fafcf5,#e2e8f0eb),radial-gradient(circle at 48% 52%,#94a3b82e,#e2e8f000);border-radius:0;flex:none;justify-content:center;align-items:center;width:min(960px,100%);height: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 1px #ffffffeb,0 0 0 1px #94a3b847}.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 #0f172a57}.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:#0f172a;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:#0f172a;text-shadow:none;margin:0}.image-stage-empty .ant-typography-secondary{color:#475569}.image-tool-sidecard{flex-direction:column;display:flex}.panel{color:#0f172a;background:#ffffffeb;border:1px solid #bfdbfead;border-radius:28px;flex-direction:column;gap:20px;padding:20px;display:flex;box-shadow:0 22px 52px #2563eb14,inset 0 1px #ffffffd1}.panel .ant-typography{color:#334155;margin-bottom:0}.panel h4.ant-typography{color:#0f172a}.slider-row{color:#1e293b;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:#0f172a;justify-content:space-between;align-items:center;font-weight:600;display:flex}.compress-format-group{background:#f1f5f9eb;border-radius:20px;align-self:flex-start;gap:12px;padding:6px;display:flex;box-shadow:inset 0 0 0 1px #94a3b824}.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:#94a3b842;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:#0f172a;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:linear-gradient(#f8fafcfa,#f1f5f9fa);border:1px solid #94a3b829;border-radius:16px;justify-content:center;align-items:center;padding:16px;display:flex}.compress-stats{color:#0f172a;font-weight:600}.compress-preview{background:#f8fafcf0;border:1px solid #94a3b829;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:#0f172a;font-weight:600}.image-tool .ant-btn{transition:border-color .16s,box-shadow .16s,background-color .16s,color .16s,transform .16s}.image-tool .ant-btn-primary{background:linear-gradient(#5fb6ff,#3a5cff);border:1px solid #fff3;box-shadow:0 12px 26px #3b82f638}.image-tool .ant-btn-primary:not(:disabled):hover{background:linear-gradient(#72c0ff,#4668ff);transform:translateY(-1px)}.image-tool .ant-btn-default,.image-tool .ant-btn-dashed{color:#0f172a;background:#ffffffd1;border-color:#94a3b83d;box-shadow:inset 0 1px #fffc}.image-tool .ant-btn-default:not(:disabled):hover,.image-tool .ant-btn-dashed:not(:disabled):hover{color:#1d4ed8;background:#eff6fff2;border-color:#60a5fa99}.image-tool-upgrade{background:linear-gradient(#fffffff0,#f8fbffe6),radial-gradient(circle at 100% 0,#3b82f624,#3b82f600);border:1px solid #bfdbfeb8;border-radius:28px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;display:grid;box-shadow:0 20px 48px #2563eb14}.image-tool-upgrade-copy{flex-direction:column;gap:8px;display:flex}.image-tool-upgrade-copy .ant-typography{margin:0}.image-tool-upgrade-copy h4.ant-typography{color:#0f172a}.image-tool-upgrade-copy .ant-typography:last-child{color:#334155;line-height:1.75}.image-tool-upgrade-link{color:#1d4ed8;background:linear-gradient(#dbeafefa,#bfdbfeeb);border:1px solid #3b82f685;border-radius:16px;min-height:52px;padding-inline:22px;font-weight:800;box-shadow:inset 0 1px #ffffffd1,0 12px 24px #3b82f61f}.image-tool-upgrade-link:hover{color:#1d4ed8;background:linear-gradient(#bfdbfe,#93c5fdf0);border-color:#2563eba3;box-shadow:inset 0 1px #ffffffdb,0 16px 28px #3b82f629}.image-tool-file-input{display:none}@media (max-width:1023px){.image-tool{padding:calc(var(--main-header-h) + var(--main-header-offset) + 16px)16px 64px}.image-tool-shell{width:100%}.image-tool-hero{border-radius:24px;padding:24px 20px}.image-tool-content{grid-template-columns:1fr;gap:16px}.image-tool-tabs{flex-wrap:wrap;justify-content:space-between;width:100%}.image-tool-tabs .ant-btn{flex:1;min-width:auto}.image-tool-upgrade{grid-template-columns:1fr;align-items:start}.image-stage{width:100%;min-height:260px;max-height:none}.image-tool-stage-card{height:auto;min-height:0}}
