.jpeg-app-scope{--jpeg-primary:#4f46e5;--jpeg-primary-hover:#4338ca;--jpeg-bg-color:#f8fafc;--jpeg-card-bg:#ffffff;--jpeg-text-main:#0f172a;--jpeg-text-muted:#64748b;--jpeg-border-color:#e2e8f0;--jpeg-accent:#10b981;--jpeg-accent-hover:#059669;--jpeg-danger:#ef4444;--jpeg-radius-lg:16px;--jpeg-radius-md:10px;--jpeg-shadow-sm:0 1px 3px rgba(0,0,0,0.05);--jpeg-shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--jpeg-shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:100%!important;max-width:1200px!important;margin:20px auto 40px!important;padding:0 15px!important;box-sizing:border-box!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;color:var(--jpeg-text-main)!important;text-align:left!important}.jpeg-app-scope *,.jpeg-app-scope *::before,.jpeg-app-scope *::after{box-sizing:border-box!important}.jpeg-app-scope .fa-solid,.jpeg-app-scope .fa-regular,.jpeg-app-scope .fa-brands,.jpeg-app-scope .fas,.jpeg-app-scope .far,.jpeg-app-scope .fab,.jpeg-app-scope .fa{font-family:"Font Awesome 6 Free"!important;font-weight:900!important;display:inline-block!important;font-style:normal!important;font-variant:normal!important;text-rendering:auto!important;line-height:1!important}.jpeg-app-scope #app{width:100%;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.jpeg-app-scope .app-header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.jpeg-app-scope .app-header h1{font-size:2.25rem;font-weight:800;margin:0;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}.jpeg-app-scope .app-header p{color:var(--jpeg-text-muted);font-size:1rem;margin:0}.jpeg-app-scope .main-content{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width:1024px){.jpeg-app-scope .main-content.has-file{grid-template-columns:320px 1fr}}.jpeg-app-scope .panel{background:var(--jpeg-card-bg);border-radius:var(--jpeg-radius-lg);padding:1.5rem;box-shadow:var(--jpeg-shadow-md);border:1px solid var(--jpeg-border-color);display:flex;flex-direction:column;gap:1.25rem;height:fit-content}.jpeg-app-scope .panel-title{font-size:1.1rem;font-weight:700;color:var(--jpeg-text-main);display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--jpeg-border-color);padding-bottom:.75rem}.jpeg-app-scope .dropzone{border:2px dashed #cbd5e1;border-radius:var(--jpeg-radius-lg);padding:2.5rem 1.5rem;text-align:center;background-color:#fff;cursor:pointer;transition:all 0.2s ease;display:flex;flex-direction:column;align-items:center;gap:1rem}.jpeg-app-scope .dropzone:hover,.jpeg-app-scope .dropzone.dragover{border-color:var(--jpeg-primary);background-color:#f0fdf4;transform:translateY(-2px)}.jpeg-app-scope .dropzone-icon{font-size:3rem;color:var(--jpeg-primary)}.jpeg-app-scope .dropzone-text h3{font-size:1.1rem;color:var(--jpeg-text-main);margin:0 0 .25rem 0}.jpeg-app-scope .dropzone-text p{font-size:.85rem;color:var(--jpeg-text-muted);margin:0}.jpeg-app-scope .control-group{display:flex;flex-direction:column;gap:.5rem}.jpeg-app-scope .control-group label{font-size:.875rem;font-weight:600;color:var(--jpeg-text-main);display:flex;justify-content:space-between}.jpeg-app-scope .control-group input[type="range"]{width:100%;accent-color:var(--jpeg-primary)}.jpeg-app-scope .control-group select{width:100%;padding:.6rem .8rem;border:1px solid var(--jpeg-border-color);border-radius:var(--jpeg-radius-md);font-size:.9rem;outline:none;background:#fff;color:var(--jpeg-text-main);transition:border-color 0.2s}.jpeg-app-scope .control-group select:focus{border-color:var(--jpeg-primary)}.jpeg-app-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:var(--jpeg-radius-md);font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;line-height:1}.jpeg-app-scope .btn-primary{background-color:var(--jpeg-primary);color:white!important}.jpeg-app-scope .btn-primary:hover{background-color:var(--jpeg-primary-hover)}.jpeg-app-scope .btn-accent{background-color:var(--jpeg-accent);color:white!important}.jpeg-app-scope .btn-accent:hover{background-color:var(--jpeg-accent-hover)}.jpeg-app-scope .btn-secondary{background-color:#f1f5f9;color:var(--jpeg-text-main)!important;border:1px solid var(--jpeg-border-color)}.jpeg-app-scope .btn-secondary:hover{background-color:#e2e8f0}.jpeg-app-scope .btn:disabled{opacity:.5;cursor:not-allowed}.jpeg-app-scope .progress-bar-container{width:100%;background-color:#e2e8f0;border-radius:999px;height:10px;overflow:hidden;display:none}.jpeg-app-scope .progress-bar{height:100%;background-color:var(--jpeg-primary);width:0%;transition:width 0.2s ease}.jpeg-app-scope .preview-area{display:flex;flex-direction:column;gap:1rem}.jpeg-app-scope .preview-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:var(--jpeg-card-bg);padding:1rem 1.5rem;border-radius:var(--jpeg-radius-lg);box-shadow:var(--jpeg-shadow-sm);border:1px solid var(--jpeg-border-color)}.jpeg-app-scope .preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}.jpeg-app-scope .page-card{background:var(--jpeg-card-bg);border-radius:var(--jpeg-radius-md);overflow:hidden;box-shadow:var(--jpeg-shadow-sm);border:1px solid var(--jpeg-border-color);display:flex;flex-direction:column;transition:transform 0.2s,box-shadow 0.2s}.jpeg-app-scope .page-card:hover{transform:translateY(-4px);box-shadow:var(--jpeg-shadow-lg)}.jpeg-app-scope .canvas-container{width:100%;padding:.5rem;background:#e2e8f0;display:flex;justify-content:center;align-items:center;aspect-ratio:1 / 1.4;overflow:hidden}.jpeg-app-scope .canvas-container canvas{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 5px rgb(0 0 0 / .15);background:#fff}.jpeg-app-scope .page-info{padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;background:#fff;border-top:1px solid var(--jpeg-border-color)}.jpeg-app-scope .page-info span{font-size:.85rem;font-weight:600;color:var(--jpeg-text-muted)}.jpeg-app-scope .history-section{background:var(--jpeg-card-bg);border-radius:var(--jpeg-radius-lg);padding:1.5rem;box-shadow:var(--jpeg-shadow-sm);border:1px solid var(--jpeg-border-color);margin-top:auto}.jpeg-app-scope .history-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;max-height:180px;overflow-y:auto;margin-top:.75rem;padding:0}.jpeg-app-scope .history-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;background:#f8fafc;border-radius:var(--jpeg-radius-md);font-size:.85rem;border:1px solid var(--jpeg-border-color)}.jpeg-app-scope .history-item-details{display:flex;flex-direction:column}.jpeg-app-scope .history-item-title{font-weight:600;color:var(--jpeg-text-main);word-break:break-all}.jpeg-app-scope .history-item-meta{color:var(--jpeg-text-muted);font-size:.75rem}.jpeg-app-scope #file-input{display:none}