body{-webkit-user-select:none;user-select:none;background-color:#0f172a;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}.loader{border:4px solid #334155;border-top:4px solid #eab308;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.format-radio:checked+div{background-color:#eff6ff;border-color:#3b82f6;color:#1d4ed8;box-shadow:0 0 0 2px #3b82f6}.mode-radio:checked+div{background-color:#f0fdf4;border-color:#16a34a;color:#15803d;box-shadow:0 0 0 2px #16a34a}.drag-active{border-color:#eab308!important;background-color:#fefce8!important;transform:scale(1.02)}.progress-transition{transition:width .3s ease-in-out}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:24px;border-radius:50%;background:#eab308;cursor:pointer;margin-top:-10px;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:background .3s,transform .1s}input[type=range].danger-zone::-webkit-slider-thumb{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.3)}input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;background:#cbd5e1;border-radius:3px}.disabled-area{opacity:.4;pointer-events:none;filter:grayscale(100%)}#drop-zone{border-style:dashed;border-width:3px;border-color:#f59e0b;border-radius:1rem;transition:all .18s ease}#drop-zone:hover{transform:scale(1.01);box-shadow:0 8px 24px rgba(234,179,8,.08)}#preview-area{max-width:900px;margin:12px auto;display:none}#preview-area:not([style*="display: none"]) #zoom-controls{display:flex}#preview-area:not([style*="display: none"]) #page-rotate-controls{display:flex}#zoom-controls,#page-rotate-controls{display:none}#page-input{-moz-appearance:textfield}#page-input::-webkit-outer-spin-button,#page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#preview-content{background:#ffffff;border:3px solid #2563eb;border-radius:8px;padding:12px;display:flex;align-items:center;justify-content:center;min-height:240px;box-shadow:0 0 20px rgba(37,99,235,0.2)}.preview-label{color:#cbd5e1;font-weight:700;font-size:13px;margin-bottom:8px;text-align:left}.preview-canvas{border:1px solid #d1d5db;border-radius:6px;max-width:100%;height:auto;display:block;-webkit-user-drag:none;user-drag:none;pointer-events:none}.preview-svg{width:100%;height:auto;display:block;-webkit-user-drag:none;user-drag:none;pointer-events:none}.preview-error{color:#7f1d1d;background:#fee2e2;padding:8px;border-radius:6px;font-size:14px}.controls-row{display:flex;gap:8px;align-items:center}.btn-secondary{background:transparent;border:1px solid rgba(0,0,0,.08);padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}.btn-preview{background:transparent;border:2px solid #10b981;color:#10b981;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}.btn-preview[disabled]{opacity:.45;cursor:not-allowed;border-color:#9ca3af;color:#9ca3af}.fixed-lang{position:fixed;top:12px;right:12px;z-index:60}.quality-row{display:flex;gap:12px;align-items:center}.quality-value{font-weight:800;min-width:48px;text-align:center;color:#0f172a;background:#f1f5f9;padding:6px 8px;border-radius:6px}.hidden{display:none!important}.btn-cancel{background:#ef4444;color:#fff;padding:8px 14px;border-radius:10px;font-weight:900;border:none;box-shadow:0 10px 30px rgba(239,68,68,.22);cursor:pointer}.btn-cancel[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}@media (max-width:640px){.max-w-4xl{padding:1rem}.controls-row{flex-direction:column;align-items:stretch}}.feature-box{opacity:0;transform:translateY(60px) scale(0);transition:opacity 0.5s ease-out, transform 0.5s ease-out}.feature-box.visible{animation:popIn 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards}.feature-box.hiding{animation:popOut 0.4s cubic-bezier(0.32,0,0.67,0) forwards}.feature-box:nth-child(1).hiding{animation-delay:0.2s}.feature-box:nth-child(2).hiding{animation-delay:0.1s}.feature-box:nth-child(3).hiding{animation-delay:0s}@keyframes popIn{0%{opacity:0;transform:translateY(60px) scale(0)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes popOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(60px) scale(0)}}