:root{--bg: #0b0c0e;--surface: #101217;--raised: #16191f;--border: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .12);--scrim: rgba(0, 0, 0, .6);--scrim-page: rgba(11, 12, 14, .84);--text-1: #edeff3;--text-2: #949cab;--text-3: #7a8496;--accent: #5b8cff;--accent-fill: #3a6fe8;--accent-hover: #7ba3ff;--accent-press: #2f5cc4;--accent-soft: rgba(91, 140, 255, .12);--accent-text: #c7d8ff;--accent-line: rgba(91, 140, 255, .42);--accent-wash: rgba(91, 140, 255, .06);--accent-glow: 0 4px 16px rgba(91, 140, 255, .28);--accent-glow-hover: 0 6px 20px rgba(91, 140, 255, .36);--accent-halo: rgba(91, 140, 255, .13);--accent-halo-faint: rgba(91, 140, 255, .045);--focus: #7ba3ff;--ok: #3ddc97;--ok-soft: rgba(61, 220, 151, .12);--ok-line: rgba(61, 220, 151, .24);--warn: #f0a94c;--warn-soft: rgba(240, 169, 76, .12);--warn-line: rgba(240, 169, 76, .24);--danger: #ff6b6b;--danger-soft: rgba(255, 107, 107, .1);--danger-line: rgba(255, 107, 107, .28);--brand-1: #5b8cff;--brand-2: #3ddc97;--brand-gradient: linear-gradient(135deg, var(--brand-1), var(--brand-2));--track: #272c35;--mark-blue-a: #3b82f6;--mark-blue-b: #1d5fe0;--mark-cyan-a: #34e3f0;--mark-cyan-b: #12c8e0;--mark-magenta-a: #ff33bb;--mark-magenta-b: #ee1f9c;--mark-purple-a: #a855f7;--mark-purple-b: #8b2fe0;--fs-label: 11px;--fs-sm: 12px;--fs-body: 13px;--fs-lg: 15px;--fs-xl: 18px;--fs-display: clamp(28px, 4.8vw, 60px);--fs-brand: 26px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-6: 24px;--sp-8: 32px;--sp-12: 48px;--sp-16: 64px;--r-ctl: 6px;--r-btn: 9px;--r-card: 10px;--r-lg: 16px;--r-pill: 99px;--sh-ctl: 0 1px 2px rgba(0, 0, 0, .4);--sh-pop: 0 8px 24px rgba(0, 0, 0, .45);--sh-img: 0 18px 48px rgba(0, 0, 0, .5);--z-sticky: 10;--z-overlay: 30;--t-fast: .12s;--t-panel: .18s;--ease: cubic-bezier(.2, .8, .2, 1)}@media(prefers-reduced-motion:reduce){:root{--t-fast: 0ms;--t-panel: 0ms}}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{font-family:system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text-1);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button{background:none;border:none;padding:0;cursor:pointer}:where(button,input,[tabindex],a):focus-visible{outline:2px solid var(--focus);outline-offset:3px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--track);border-radius:var(--r-pill);border:3px solid var(--surface)}::-webkit-scrollbar-track{background:transparent}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:9px 20px;border-radius:var(--r-btn);font-size:var(--fs-body);font-weight:600;overflow:hidden;transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.btn-label{position:relative;z-index:1}.btn-progress{position:absolute;left:0;top:0;bottom:0;background:var(--accent-press);transition:width var(--t-panel) var(--ease)}.btn-primary{background:var(--accent-fill);color:#fff;box-shadow:var(--accent-glow)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--accent-glow-hover)}.btn-primary:active:not(:disabled){background:var(--accent-press);box-shadow:none;transform:translateY(1px)}.btn-ghost{padding:7px 14px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);border:1px solid var(--border-strong)}.btn-ghost:hover:not(:disabled){color:var(--text-1);border-color:#ffffff3d;background:#ffffff0a}.btn-danger{padding:7px 14px;font-size:var(--fs-sm);font-weight:500;color:var(--danger);border:1px solid var(--danger-line)}.btn-danger:hover:not(:disabled){background:var(--danger-soft)}.btn-busy{cursor:progress}.btn:disabled:not(.btn-busy){background:var(--track);color:var(--text-3);border-color:transparent;box-shadow:none;cursor:not-allowed}.chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);font-size:var(--fs-label);font-weight:500;border:1px solid transparent;white-space:nowrap}.chip-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}.chip-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}.chip-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}.segmented{display:flex;gap:var(--sp-1)}.segment{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:5px 0;border-radius:var(--r-ctl);font-size:var(--fs-label);color:var(--text-2);background:#0000004d;border:1px solid var(--border);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.segment input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;margin:0;cursor:pointer}.segment:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}.segment:hover:not(.is-on){background:#ffffff0d;color:var(--text-1)}.segment.is-on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text);font-weight:600}.toggle{display:inline-flex;flex:none;cursor:pointer}.toggle input{position:absolute;opacity:0;width:30px;height:17px;margin:0;cursor:pointer}.toggle-track{display:block;width:30px;height:17px;border-radius:var(--r-pill);background:var(--track);transition:background var(--t-fast) var(--ease);position:relative}.toggle-knob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left var(--t-fast) var(--ease)}.toggle input:checked+.toggle-track{background:var(--accent-fill)}.toggle input:checked+.toggle-track .toggle-knob{left:15px}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--focus);outline-offset:3px}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--r-pill);background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--fill),var(--track) var(--fill),var(--track) 100%);cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:var(--sh-ctl);transition:width var(--t-fast) var(--ease),height var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}.slider:hover::-webkit-slider-thumb{width:15px;height:15px;box-shadow:0 0 0 5px var(--accent-soft),var(--sh-ctl)}.slider::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#fff;box-shadow:var(--sh-ctl)}.dialog{margin:auto;border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--raised);color:var(--text-1);padding:var(--sp-6);min-width:280px;max-width:min(420px,calc(100% - 2 * var(--sp-6)));box-shadow:var(--sh-pop)}.dialog::backdrop{background:var(--scrim)}.dialog-title{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--sp-4)}.dialog-form{display:flex;flex-direction:column;gap:var(--sp-3)}.dialog-form input{background:#0000004d;border:1px solid var(--border);border-radius:var(--r-ctl);padding:8px 10px;color:var(--text-1)}.dialog-form input::placeholder{color:var(--text-3)}.dialog-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-4)}.dialog-note{color:var(--text-3);font-size:var(--fs-sm);margin-top:var(--sp-1)}.dialog-error{margin-top:var(--sp-3);padding:8px 10px;border:1px solid var(--danger-line);border-radius:var(--r-ctl);background:var(--danger-soft);color:var(--text-1);font-size:var(--fs-sm)}.progress{height:5px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}.progress-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand-gradient);transition:width var(--t-panel) var(--ease)}.progress.is-indeterminate .progress-fill{width:36%;animation:progress-slide 1.1s var(--ease) infinite}@keyframes progress-slide{0%{transform:translate(-100%)}to{transform:translate(320%)}}@media(prefers-reduced-motion:reduce){.progress.is-indeterminate .progress-fill{animation:none;width:100%;opacity:.5}}.tpl-card{border:1px solid var(--border);border-radius:var(--r-card);padding:11px;margin-bottom:var(--sp-2);background:var(--raised);cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}.tpl-card:hover{border-color:var(--border-strong)}.tpl-card.is-on{border-color:var(--accent-line);background:var(--accent-wash)}.tpl-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.tpl-head{display:flex;align-items:center;gap:var(--sp-2)}.tpl-name{flex:1;min-width:0;font-size:var(--fs-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tpl-meta{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1)}.tpl-dim{color:var(--text-3);font-size:var(--fs-label);white-space:nowrap}.tpl-ops{margin-left:auto;flex:none;display:flex;gap:var(--sp-1)}@media(hover:hover){.tpl-ops{opacity:0;transition:opacity var(--t-fast) var(--ease)}.tpl-card:hover .tpl-ops,.tpl-ops:focus-within{opacity:1}}.tpl-ops .btn{padding:3px 8px;font-size:var(--fs-label)}.tpl-export{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--sp-2)}.tpl-quality{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-label);color:var(--text-3)}.tpl-qvalue{width:20px;text-align:right;color:var(--text-2)}.tpl-qhint{margin-top:-2px;padding-left:46px;font-size:var(--fs-label);line-height:1.4}.tpl-qhint.is-muted{color:var(--text-3)}.tpl-qhint.is-warn{color:var(--warn)}.tpl-warn{font-size:var(--fs-label);color:var(--warn)}.tpl-error{font-size:var(--fs-label);color:var(--danger)}.tpl-add{width:100%;border:1px dashed var(--border-strong);border-radius:var(--r-card);padding:9px;color:var(--text-3);font-size:var(--fs-sm);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.tpl-add:hover{color:var(--text-1);border-color:var(--accent-line)}.canvas-stage{position:relative;overflow:hidden;border-radius:var(--r-ctl);box-shadow:var(--sh-img)}.canvas-stage img{display:block;max-width:100%;max-height:calc(100vh - 190px);-webkit-user-select:none;user-select:none}.crop-box{position:absolute;border:1px dashed rgba(255,255,255,.55);border-radius:3px;cursor:move;outline:none;transition:border-color var(--t-fast) var(--ease)}.crop-box.active{border:2px solid var(--accent);box-shadow:0 0 0 100000px #0000006b}.crop-box:not(.active):hover{border-color:var(--accent)}.crop-box:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.crop-label{position:absolute;top:-21px;left:0;font-size:var(--fs-label);font-weight:500;background:var(--accent-fill);color:#fff;padding:2px 7px;border-radius:5px;white-space:nowrap}.handle{position:absolute;width:var(--handle);height:var(--handle);border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:var(--sh-ctl)}.handle.nw{left:calc(var(--handle) / -2);top:calc(var(--handle) / -2);cursor:nwse-resize}.handle.ne{right:calc(var(--handle) / -2);top:calc(var(--handle) / -2);cursor:nesw-resize}.handle.sw{left:calc(var(--handle) / -2);bottom:calc(var(--handle) / -2);cursor:nesw-resize}.handle.se{right:calc(var(--handle) / -2);bottom:calc(var(--handle) / -2);cursor:nwse-resize}.hero{flex:1;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;align-items:center;overflow-y:auto;padding:var(--sp-16) var(--sp-6);text-align:center;background-image:radial-gradient(120% 70% at 50% 0%,var(--accent-halo),transparent 62%)}.hero-title{font-size:var(--fs-display);font-weight:600;letter-spacing:-.025em;line-height:1.15;max-width:16em}.hero-sub{margin-top:var(--sp-4);max-width:34em;font-size:var(--fs-xl);color:var(--text-2);line-height:1.6}.hero-drop{margin-top:var(--sp-12);width:100%;max-width:560px;padding:var(--sp-12) var(--sp-8);border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:#ffffff05}.hero-droptext,.hero-phase{font-size:var(--fs-lg);color:var(--text-2)}.hero-phase{margin-bottom:var(--sp-3)}.hero-pick{margin-top:var(--sp-6);padding:11px 26px;font-size:var(--fs-lg);cursor:pointer}.hero-formats{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-3)}.hero-trust{display:flex;justify-content:center;gap:var(--sp-12);margin-top:var(--sp-12);list-style:none;padding:0;font-size:var(--fs-body);color:var(--text-3);flex-wrap:wrap}.hero-trust b{color:var(--text-2);font-weight:500}.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--border);background:var(--surface);flex:none}.brand{display:flex;align-items:center;gap:var(--sp-2);flex:none}.brand-mark{width:30px;height:30px;flex:none}.brand-name{font-size:var(--fs-brand);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--text-1)}.file-meta{color:var(--text-2);font-size:var(--fs-sm)}.topbar-right{margin-left:auto}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;background:var(--scrim-page);border:3px dashed var(--accent);pointer-events:none}.drop-overlay span{font-size:var(--fs-xl);background:var(--raised);padding:var(--sp-3) var(--sp-8);border-radius:var(--r-card);box-shadow:var(--sh-pop)}.banner{display:flex;align-items:flex-start;gap:var(--sp-2);padding:10px var(--sp-4);background:var(--danger-soft);border-bottom:1px solid var(--danger-line);flex:none}.banner-icon{color:var(--danger);font-weight:700}.banner-text{flex:1;font-size:var(--fs-sm)}.banner-close{color:var(--text-3);font-size:var(--fs-xl);line-height:1}.banner-close:hover{color:var(--text-1)}.body{display:flex;flex:1;min-height:0}.sidebar{width:232px;flex:none;padding:var(--sp-3);overflow-y:auto;border-right:1px solid var(--border);background:var(--surface);transition:width var(--t-panel) var(--ease)}.sidebar.is-collapsed{width:40px;padding:var(--sp-3) var(--sp-2)}.sidebar-head{display:flex;align-items:center;margin-bottom:var(--sp-3)}.sidebar-title{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}.sidebar-toggle{margin-left:auto;color:var(--text-3);font-size:var(--fs-lg);padding:var(--sp-1);border-radius:var(--r-ctl)}.sidebar-toggle:hover{color:var(--text-1);background:#ffffff0d}.tpl-list{list-style:none;padding:0}.main{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:var(--sp-6);background-image:radial-gradient(70% 55% at 50% 0%,var(--accent-halo-faint),transparent)}.bottombar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:var(--surface);flex:none}.bottombar.is-muted{color:var(--text-3);font-size:var(--fs-sm)}.export-summary{color:var(--text-2);font-size:var(--fs-sm)}.export-summary b{color:var(--text-1)}.export-progress{display:flex;gap:var(--sp-4);list-style:none;padding:0;font-size:var(--fs-sm);color:var(--text-3);flex-wrap:wrap}.export-progress li{display:flex;gap:var(--sp-2)}.export-progress .is-done{color:var(--ok)}.export-progress .is-current{color:var(--accent)}.export-action{margin-left:auto}@media(max-width:899px){.app{height:auto;min-height:100vh}.topbar{flex-wrap:wrap;gap:var(--sp-2);padding:10px var(--sp-3)}.file-meta{display:none}.body{flex-direction:column}.sidebar,.sidebar.is-collapsed{width:100%;border-right:none;border-top:1px solid var(--border);padding:var(--sp-3);overflow-y:visible}.sidebar-toggle{display:none}.main{padding:var(--sp-3)}.canvas-stage img{max-height:46vh}.bottombar{position:sticky;bottom:0;z-index:var(--z-sticky)}.hero{padding:var(--sp-12) var(--sp-4)}.hero-title{letter-spacing:-.015em}.hero-sub{font-size:var(--fs-body)}.hero-drop{margin-top:var(--sp-8);padding:var(--sp-8) var(--sp-6)}.hero-trust{flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-8);font-size:var(--fs-sm)}.export-progress{gap:var(--sp-3);font-size:var(--fs-label)}}