*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f8f6f3;--surface: #ffffff;--border: #e2ddd5;--text: #2c2420;--text-secondary: #6b5e54;--primary: #8b6f5e;--primary-hover: #725a4a;--accent: #c4956a}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{max-width:640px;margin:0 auto;padding:24px}.app-header{text-align:center;margin-bottom:32px}.app-header h1{font-size:28px;font-weight:700;color:var(--primary);margin-bottom:4px}.app-header p{color:var(--text-secondary);font-size:15px}.upload-zone{border:2px dashed var(--border);border-radius:16px;padding:64px 32px;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface)}.upload-zone:hover{border-color:var(--primary);background:#faf8f5}.upload-icon{font-size:48px;margin-bottom:16px}.upload-text{font-size:16px;font-weight:500;margin-bottom:8px}.upload-hint{font-size:13px;color:var(--text-secondary)}.status-message{text-align:center;padding:80px 32px}.status-message p{font-size:17px;font-weight:500;margin-top:16px}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:0 auto;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin-bottom:16px;text-align:center;color:#c45e5e;font-size:14px}.editor-container{display:flex;flex-direction:column;align-items:center;gap:16px}.emoji-editor{display:flex;flex-direction:column;align-items:center;gap:8px}.emoji-canvas{display:block;width:100%;max-width:1024px;height:auto;border-radius:12px;background:#1a1a1a;box-shadow:0 4px 24px #0000001f}.emoji-canvas-hint{font-size:13px;color:var(--text-secondary)}.editor-controls{width:100%;max-width:1024px}.gif-trim{width:100%;max-width:1024px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}.gif-trim-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.gif-trim-label{font-size:14px;font-weight:600}.gif-trim-count{font-size:13px;color:var(--text-secondary)}.gif-trim-note{font-size:12px;line-height:1.45;color:var(--text-secondary);background:#faf8f5;border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin:0}.range-slider{position:relative;height:28px;display:flex;align-items:center}.range-slider-track{position:absolute;left:0;right:0;height:6px;background:var(--border);border-radius:3px;pointer-events:none}.range-slider-fill{position:absolute;top:0;height:100%;background:var(--primary);border-radius:3px}.range-slider-input{position:absolute;width:100%;height:28px;margin:0;padding:0;background:transparent;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-slider-input::-webkit-slider-runnable-track{height:6px;background:transparent;border:none}.range-slider-input::-moz-range-track{height:6px;background:transparent;border:none}.range-slider-input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--surface);border:2px solid var(--primary);box-shadow:0 1px 4px #0003;cursor:grab}.range-slider-input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--primary);box-shadow:0 1px 4px #0003;cursor:grab}.range-slider-input:active::-webkit-slider-thumb{cursor:grabbing}.range-slider-input:active::-moz-range-thumb{cursor:grabbing}.range-slider-start{z-index:3}.range-slider-end{z-index:4}.range-slider-labels{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary)}.range-slider-labels strong{color:var(--text);font-weight:600}.zoom-control{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--text-secondary)}.zoom-control input[type=range]{flex:1;accent-color:var(--primary)}.output-size{margin-top:10px;font-size:13px;color:var(--text-secondary)}.output-size-max{color:var(--text-secondary)}.output-size.is-warning{color:#c45e5e;font-weight:600}.editor-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}.btn-primary,.btn-secondary{border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}.btn-primary{background:var(--primary);color:#fff;padding:10px 20px}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:10px 20px}.btn-secondary:hover{border-color:var(--primary);background:#faf8f5}