:root,#popup.record-dialog{--primary:#2563EB;--primary-light:#e8f0fe;--success:#10B981;--text:#1F2937;--muted:#6B7280;--white:#FFFFFF;--page:#F7F7F7;--hover:#F3F4F6;--border:#E5E7EB;--mask:rgba(0,0,0,.5);--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-xxl:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-btn:var(--radius-lg);--font-sm:12px;--font-base:14px;--font-md:16px;--font-lg:18px;--font-xl:20px;--font-xxl:24px;--shadow:0 2px 8px rgba(0,0,0,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font:var(--font-base)/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}a{color:var(--primary);text-decoration:none}button,input,textarea{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button{color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}img{max-width:100%}h1,h2,h3,p{margin-top:0}h1{font-size:calc(var(--font-xxl)*1.3);line-height:1.3;letter-spacing:-.03em;margin-bottom:var(--space-md)}h2{font-size:var(--font-xl);line-height:1.4;margin-bottom:var(--space-md)}h3{font-size:var(--font-md);margin-bottom:var(--space-xs)}p{margin-bottom:var(--space-lg)}:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.muted{color:var(--muted)}.small,small{font-size:var(--font-sm)}.eyebrow{display:block;font-size:var(--font-sm);font-weight:600;letter-spacing:.09em;color:var(--primary);margin-bottom:var(--space-md)}
.sidebar{width:228px;position:fixed;inset:0 auto 0 0;background:var(--white);border-right:1px solid var(--border);padding:var(--space-xl) var(--space-lg);display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:var(--space-md);color:var(--text);font-size:var(--font-lg);font-weight:700;padding:var(--space-sm)}.brand-symbol{display:flex;padding:var(--space-sm);background:var(--primary);border-radius:var(--radius-lg);color:var(--white)}.brand-symbol svg{fill:currentColor;stroke:none}.nav-caption{color:var(--muted);font-size:var(--font-sm);padding:var(--space-lg);margin-top:var(--space-xxl);margin-bottom:var(--space-xs)}.nav-item{display:flex;width:100%;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-sm);color:var(--muted);border:0;background:none;text-align:left}.nav-item:hover{background:var(--hover);color:var(--text)}.nav-item.active{color:var(--primary);background:var(--primary-light);font-weight:600}.nav-item svg{width:20px;height:20px}.sidebar-bottom{margin-top:auto;padding:var(--space-lg) var(--space-sm);border-top:1px solid var(--border)}.sidebar-bottom p{margin:0 var(--space-lg)}.workspace{margin-left:228px}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--space-xl)*2);border-bottom:1px solid var(--border);background:var(--white)}.account,.profile-link,.profile{display:flex;align-items:center;gap:var(--space-md)}.account{gap:var(--space-xl)}.profile-link{color:var(--text)}.avatar{display:grid;place-items:center;width:36px;height:36px;background:var(--primary-light);color:var(--primary);border-radius:50%;font-weight:600}.avatar.large{width:64px;height:64px;font-size:var(--font-xxl)}.balance{font-weight:600;color:var(--text)}.page-container{max-width:1512px;margin:0 auto;padding:var(--space-xxl) calc(var(--space-xl)*2);min-height:calc(100vh - 160px)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);margin:var(--space-xl) 0}.section-heading h2,.section-heading p{margin-bottom:0}.section-heading:first-child{margin-top:0}.site-footer{padding:var(--space-xl) calc(var(--space-xl)*2);color:var(--muted);font-size:var(--font-sm);display:flex;flex-wrap:wrap;gap:var(--space-xl)}.site-footer a{color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);background:var(--primary);color:var(--white);border:1px solid var(--primary);border-radius:var(--radius-btn);padding:var(--space-md) var(--space-xl);font-weight:500;line-height:1.4;min-height:42px}.button:hover{filter:brightness(.96)}.button.secondary{background:var(--white);color:var(--text);border-color:var(--border)}.button svg{width:18px;height:18px}.panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl)}.empty{text-align:center;padding:calc(var(--space-xl)*3) var(--space-xl)}.empty p{color:var(--muted)}.empty .button{margin:var(--space-sm)}.hero{display:flex;justify-content:space-between;align-items:center;min-height:300px;border-radius:var(--radius-xl);padding:calc(var(--space-xl)*2);background:var(--primary-light);overflow:hidden}.hero h1{font-size:calc(var(--font-xxl)*2);line-height:1.25;margin:var(--space-lg) 0 var(--space-xl)}.hero p{color:var(--muted)}.hero-tools{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);padding:var(--space-xxl);color:var(--primary)}.hero-tools svg{width:128px;height:128px;stroke-width:.8;transform:rotate(-8deg)}.hero-tools span{font-size:var(--font-sm);letter-spacing:.1em}.notice{padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);background:var(--primary-light);margin:var(--space-xl) 0;color:var(--primary)}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}.tool-card{position:relative;display:flex;align-items:flex-start;gap:var(--space-lg);text-align:left;border:1px solid var(--border);background:var(--white);border-radius:var(--radius-lg);padding:var(--space-xl);min-height:156px;transition:border-color .15s,transform .15s}.tool-card:hover{border-color:var(--primary);transform:translateY(-2px)}.tool-icon{width:44px;height:44px;background:var(--primary-light);border-radius:var(--radius-lg);display:grid;place-items:center;flex-shrink:0;color:var(--primary)}.tool-icon img{width:28px;height:28px;object-fit:contain}.tool-card-content{display:flex;min-width:0;flex-direction:column;gap:var(--space-xs)}.tool-card-content strong{font-size:var(--font-md)}.tool-card-content .muted{font-size:var(--font-sm);min-height:38px}.tool-card-content small{color:var(--primary);margin-top:var(--space-sm)}.card-arrow{color:var(--muted);margin-left:auto}
.search-form{display:flex;gap:var(--space-md);max-width:640px;margin-bottom:var(--space-xl)}input:not([type=radio]):not([type=range]):not([type=file]),textarea{padding:var(--space-md) var(--space-lg);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--white);color:var(--text)}.search-form input{flex:1;min-width:0}.filters{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-xl)}.chip{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);color:var(--muted);background:var(--white);border:1px solid var(--border)}.chip.selected{color:var(--primary);background:var(--primary-light);border-color:var(--primary-light)}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin:var(--space-xxl) 0}.badge{display:inline-block;color:var(--primary);background:var(--primary-light);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-size:var(--font-sm)}.badge.success,.positive{color:var(--success)}.table-wrap{padding:0;overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-weight:500;color:var(--muted);background:var(--hover)}td,th{padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--border)}tr:last-child td{border-bottom:0}td small{display:block;max-width:320px;overflow:hidden;text-overflow:ellipsis}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-lg);margin-bottom:var(--space-xl)}.stat{display:flex;flex-direction:column;color:var(--text);gap:var(--space-md)}.stat strong{font-size:calc(var(--font-xxl)*1.5)}.membership-banner{display:flex;align-items:center;justify-content:space-between;background:var(--primary-light);border-radius:var(--radius-xl);padding:var(--space-xxl);margin-bottom:var(--space-xl)}.membership-banner p{margin-bottom:0;color:var(--muted)}.membership-banner strong{font-size:calc(var(--font-xxl)*1.5)}.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl)}.package{display:flex;flex-direction:column;gap:var(--space-sm)}.package .badge{align-self:flex-start}.package h2{margin-top:var(--space-lg)}.price{font-size:calc(var(--font-xxl)*1.5);font-weight:650;color:var(--primary)}.package .button{margin-top:auto}.task-row{display:flex;align-items:center;gap:var(--space-xl);padding:var(--space-xl) 0;border-bottom:1px solid var(--border)}.task-row:last-child{border-bottom:0}.task-row p{margin-bottom:0}.task-points{margin-left:auto;color:var(--primary);white-space:nowrap}.settings-list{max-width:900px;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.settings-list>a,.settings-list>button{width:100%;background:none;border:0;border-bottom:1px solid var(--border);padding:var(--space-lg) 0;display:flex;justify-content:space-between;color:var(--text);text-align:left}.settings-list>:last-child{border-bottom:0}.settings-list span{color:var(--muted)}
.back-link{color:var(--muted);font-size:var(--font-sm)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-xl)}.preview-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl);min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-panel>.result-image{width:100%;max-height:600px;object-fit:contain}.upload-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl)}.upload-panel h2{overflow-wrap:anywhere}.upload-panel .button{width:100%;margin-bottom:var(--space-lg)}.upload-panel .small{margin-top:var(--space-lg);margin-bottom:0}.file-button{position:relative;overflow:hidden;cursor:pointer}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.intro-placeholder{text-align:center;color:var(--muted)}.intro-placeholder svg{width:96px;height:96px;color:var(--primary);margin-bottom:var(--space-xl)}.intro-placeholder h2{color:var(--text)}.upload-state{font-size:var(--font-sm);color:var(--primary)}.processing{padding:calc(var(--space-xl)*4) var(--space-xl);text-align:center}.spinner{width:36px;height:36px;margin:0 auto var(--space-xl);border:3px solid var(--primary-light);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}progress{accent-color:var(--primary);width:min(400px,100%);margin-bottom:var(--space-lg)}.result-panel{max-width:1100px}.result-panel video{display:block;width:100%;max-height:65vh;background:var(--text);border-radius:var(--radius-lg)}.result-image{display:block;margin:auto;max-height:65vh;object-fit:contain}.actions{display:flex;gap:var(--space-md);margin:var(--space-lg) 0}.compare{--split:50%;position:relative;width:100%;max-width:900px;margin:auto;overflow:hidden;background:var(--hover)}.compare>img{display:block;width:100%;max-height:65vh;object-fit:contain}.compare .compare-after{position:absolute;inset:0;height:100%;clip-path:inset(0 0 0 var(--split))}.compare>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2}.compare:after{content:"";position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--white);pointer-events:none}.compare>span{position:absolute;bottom:var(--space-md);left:var(--space-md);background:var(--mask);color:var(--white);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-sm)}.compare>span:last-child{left:auto;right:var(--space-md)}.compare-unavailable:after{display:none}.text-result{display:block;width:100%;min-height:400px;resize:vertical}.video-editor{position:relative;width:100%;align-self:center;background:var(--text)}.video-editor video{display:block;width:100%;height:100%;object-fit:contain}.subtitle-region{position:absolute;left:0;width:100%;border:2px solid var(--primary);background:rgba(37,99,235,.15);touch-action:none;cursor:move}.subtitle-region span{color:var(--white);font-size:var(--font-sm);background:var(--primary);padding:var(--space-xs)}.resize-handle{position:absolute;left:0;right:0;top:-6px;height:12px;cursor:ns-resize}.video-steps{display:flex;gap:var(--space-sm)}.video-steps .button{padding:var(--space-sm)}fieldset{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);margin:0 0 var(--space-lg)}fieldset>label{display:block;margin-bottom:var(--space-sm)}fieldset p{font-size:var(--font-sm)}fieldset input[type=number]{width:100%}.agreement-text{white-space:pre-wrap;line-height:2}.agreement{min-height:300px}
dialog{border:1px solid var(--border);border-radius:var(--radius-xl);padding:0;background:var(--white);color:var(--text);width:min(480px,calc(100vw - 32px));max-height:85vh;box-shadow:var(--shadow)}dialog::backdrop{background:var(--mask)}dialog>header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl);border-bottom:1px solid var(--border)}dialog h2{margin:0}.dialog-body{padding:var(--space-xl);overflow-wrap:anywhere}.icon-button{display:grid;place-items:center;border:0;background:none;width:32px;height:32px;border-radius:var(--radius-md)}.icon-button:hover{background:var(--hover)}.qr-login{text-align:center}.qr-code{width:260px;height:260px;object-fit:contain}.qr-login p{margin:var(--space-lg) 0}.skip-link{position:fixed;top:-60px;left:var(--space-lg);z-index:99;background:var(--white);padding:var(--space-md)}.skip-link:focus{top:var(--space-lg)}[hidden]{display:none!important}
@media(min-width:1600px){.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1200px){.sidebar{width:196px}.workspace{margin-left:196px}.page-container,.topbar{padding-left:var(--space-xl);padding-right:var(--space-xl)}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workbench{grid-template-columns:minmax(0,1fr) 280px}.hero h1{font-size:calc(var(--font-xxl)*1.7)}}@media(max-width:850px){.sidebar{width:76px;padding:var(--space-lg) var(--space-sm)}.brand>span:last-child,.nav-caption,.nav-item>span,.sidebar-bottom{display:none}.brand{padding:0;justify-content:center}.nav-item{justify-content:center;padding:var(--space-lg)}#navigation{margin-top:var(--space-xxl)}.workspace{margin-left:76px}.workbench{grid-template-columns:1fr}.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-tools{display:none}.task-row{flex-wrap:wrap}.task-points{margin-left:0}}@media(max-width:600px){.page-container{padding:var(--space-lg)}.topbar{padding:var(--space-lg);height:70px}.topbar>span,.balance{display:none}.topbar{justify-content:flex-end}.tool-grid,.package-grid{grid-template-columns:1fr}.hero{padding:var(--space-xl)}.hero h1{font-size:calc(var(--font-xxl)*1.3)}.membership-banner{flex-wrap:wrap;gap:var(--space-lg)}.section-heading{flex-wrap:wrap}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card{min-height:120px}.site-footer{padding:var(--space-lg)}.preview-panel{min-height:260px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#image-settings { width:100%; border:0; padding:0; display:flex; flex-direction:column; gap:var(--space-lg); }
#image-settings[hidden] { display:none; }
#image-settings label { display:flex; flex-direction:column; gap:var(--space-sm); }
#image-settings select,#image-settings input[type=text] { width:100%; padding:var(--space-md); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text); background:var(--white); font:inherit; }
#image-settings input[type=range] { width:100%; accent-color:var(--primary); }
#image-settings .color-picker-row { display:flex; align-items:center; gap:var(--space-md); }
#image-settings [data-color-value] { font-family:monospace; }
.image-crop-preview { position:relative; overflow:hidden; width:100%; height:calc(var(--space-xl)*16); }
.image-crop-preview > img { display:block; width:100%; height:auto; max-height:none; }
.image-crop-preview .cropper-view-box { outline-color:var(--primary); }
.image-crop-preview .cropper-line,.image-crop-preview .cropper-point { background-color:var(--primary); }
.stitch-image { display:flex; align-items:center; gap:var(--space-sm); margin-top:var(--space-sm); }
.stitch-image img { width:calc(var(--space-xl)*2); height:calc(var(--space-xl)*2); object-fit:contain; }
.stitch-image span { flex:1; overflow:hidden; overflow-wrap:anywhere; }

.workbench.tool-upload.image-tool-configure .preview-panel { min-width:0; width:100%; aspect-ratio:auto; align-self:start; }
.workbench.tool-upload.image-tool-configure .upload-panel { justify-content:flex-start; }
.workbench.tool-upload.image-tool-configure .upload-panel .button { border-radius:var(--radius-btn); }

.upload-panel .upload-prompt[hidden] { display:none; }
.tool-action-row { display:flex; flex-wrap:wrap; align-items:stretch; width:100%; min-width:0; gap:var(--space-md); margin-top:var(--space-xl); }
.tool-action-row .button { width:auto; min-width:0; flex:1; margin:0; }
.tool-action-row:not(.has-source) { justify-content:center; }
.tool-action-row .file-button { flex:0 0 auto; min-width:150px; }
.tool-action-row.has-source .file-button { width:auto; flex:1; }
.tool-action-row #start-tool[hidden] { display:none; }
.workbench.tool-upload.watermark-configure { grid-template-columns:minmax(0,1fr) minmax(350px,400px); align-items:start; }
.watermark-configure .preview-panel { min-height:520px; padding:var(--space-xxl); background:var(--hover); }
.watermark-preview-frame { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:440px; overflow:hidden; }
.watermark-preview-frame>.result-image { display:block; width:100%; max-height:68vh; object-fit:contain; }
.watermark-preview-text { position:absolute; max-width:80%; overflow:hidden; color:var(--white); font-weight:600; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 5px rgba(0,0,0,.6); pointer-events:none; }
.watermark-preview-text--top-left { top:8%; left:8%; }
.watermark-preview-text--top-right { top:8%; right:8%; }
.watermark-preview-text--center { top:50%; left:50%; transform:translate(-50%,-50%); }
.watermark-preview-text--bottom-left { bottom:8%; left:8%; }
.watermark-preview-text--bottom-right,.watermark-preview-text--tile { right:8%; bottom:8%; }
#image-settings { gap:var(--space-xl); }
#image-settings legend { margin-bottom:var(--space-sm); font-size:var(--font-lg); font-weight:600; }
#image-settings .setting-field { gap:var(--space-sm); }
#image-settings .setting-label { display:flex; justify-content:space-between; align-items:center; color:var(--text); font-weight:500; }
#image-settings .setting-field input[type=text] { width:100%; }
#image-settings .setting-range-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-xxl)*4)),1fr)); gap:var(--space-lg); }
#image-settings .setting-range-row .setting-field { min-width:0; }
#image-settings .setting-range-row .setting-label { gap:var(--space-sm); white-space:nowrap; }
#image-settings .setting-value { flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
#image-settings .color-trigger { display:flex; align-items:center; gap:var(--space-md); width:100%; padding:var(--space-md); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); color:var(--text); text-align:left; }
#image-settings .color-trigger output { margin-left:auto; color:var(--muted); font:var(--font-sm)/1.4 ui-monospace,monospace; }
#image-settings .color-swatch { width:24px; height:24px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.watermark-color-dialog { display:grid; justify-items:center; gap:var(--space-md); }
.color-dialog-value { margin:0; color:var(--muted); font:var(--font-base)/1.5 ui-monospace,monospace; }
.color-dialog-actions { display:flex; justify-content:flex-end; gap:var(--space-md); width:100%; padding-top:var(--space-sm); }
.color-dialog-actions .button { width:auto; margin:0; }
@media(max-width:850px) { .workbench.tool-upload.watermark-configure { grid-template-columns:minmax(0,1fr); } .watermark-configure .preview-panel { min-height:320px; } .watermark-preview-frame { min-height:280px; } }