*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--surface: #1a1d27;--surface-hover: #222632;--border: #2e3345;--border-active: #646cff;--text: #e4e6f0;--text-muted: #8b8fa7;--accent: #646cff;--accent-hover: #535bf2;--danger: #ff6b6b;--radius: 12px;--transition: .2s ease}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-text-size-adjust:100%}button,label,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app-shell{display:grid;grid-template-columns:160px 1fr 160px;max-width:1100px;margin:0 auto;min-height:100vh;gap:1.5rem;padding:0 1rem}.app{max-width:680px;width:100%;margin:0 auto;padding:3rem 0 2rem;display:flex;flex-direction:column;gap:2rem;min-height:100vh}.ad-rail{padding-top:5rem;width:100%;min-width:0;overflow:hidden}.ad-rail-sticky{position:sticky;top:2rem;display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;min-height:600px;width:100%;padding:.75rem;border-radius:var(--radius);background:var(--surface);border:1px dashed var(--border);opacity:.8;transition:opacity var(--transition)}.ad-rail-sticky:hover{opacity:1}.ad-rail ins{display:block;width:100%;min-height:600px}.ad-mobile{display:none;width:100%;max-height:90px;overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px dashed var(--border);opacity:.7;transition:opacity var(--transition);padding:.4rem;text-align:center}.ad-mobile:hover{opacity:1}.ad-mobile ins{width:100%}@media(min-width:1025px){.app{max-width:100%;padding:3.5rem 0 2rem}.header h1{font-size:2.8rem}.subtitle{font-size:1.05rem}.dropzone{height:300px}.quota-bar{padding:1rem 1.25rem}}@media(min-width:1440px){.app-shell{max-width:1600px;grid-template-columns:220px 1fr 220px;gap:2rem}.main{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}}@media(min-width:1920px){.app-shell{max-width:1860px;grid-template-columns:280px 1fr 280px;gap:2.5rem;padding:0 2rem}.app{padding:4rem 0 3rem;gap:2.5rem}.header h1{font-size:3.2rem}.subtitle{font-size:1.15rem}.dropzone{height:340px}.quota-bar{padding:1.1rem 1.5rem;font-size:.95rem}.job-card{padding:1.25rem 1.5rem}.compression-control{padding:1.5rem}.section-title{font-size:1.15rem}.btn{font-size:1rem;padding:.75rem 1.6rem}.ad-rail-sticky{min-height:700px}}@media(min-width:2560px){:root{font-size:18px}.app-shell{max-width:2400px;grid-template-columns:340px 1fr 340px;gap:3rem;padding:0 3rem}.app{padding:5rem 0 4rem;gap:3rem}.header h1{font-size:3.8rem}.subtitle{font-size:1.25rem}.dropzone{height:400px}.quota-bar{padding:1.25rem 1.75rem}.main{gap:2.5rem}.job-card{padding:1.5rem 1.75rem}.ad-rail-sticky{min-height:800px;padding:1rem}.toast{max-width:480px;font-size:1rem}}@media(max-width:1024px){.app-shell{grid-template-columns:1fr}.ad-rail{display:none}.app{padding:3rem 1.5rem 2rem}.ad-mobile{display:block}}@media(max-width:768px){.app{padding:2rem 1rem 1.5rem;gap:1.5rem}.header h1{font-size:1.8rem}.subtitle{font-size:.88rem}}@media(max-width:480px){.app{padding:1.25rem .75rem;gap:1.25rem}.header h1{font-size:1.5rem}.subtitle{font-size:.82rem;padding:0 .25rem}.dropzone{height:160px;border-radius:10px}.dropzone-icon{font-size:2.2rem}.dropzone-placeholder p{font-size:.9rem}.file-list-wrapper{padding:.65rem}.file-list-header{flex-direction:column;align-items:flex-start;gap:.4rem}.file-item{padding:.6rem .5rem;gap:.35rem}.file-name{font-size:.82rem}.file-size{font-size:.72rem}.compression-control{padding:1rem}.control-label{flex-wrap:wrap;font-size:.85rem}.btn{min-height:44px;padding:.7rem 1rem;font-size:.9rem;width:100%}.btn-sm{min-height:40px;padding:.45rem .75rem;font-size:.78rem;width:auto}.btn-outline{min-height:40px;padding:.45rem .85rem}.btn-remove{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}.slider::-webkit-slider-thumb{width:26px;height:26px}.slider::-moz-range-thumb{width:26px;height:26px}.slider{height:8px}.job-card{padding:.85rem}.job-card-header{flex-wrap:wrap;gap:.35rem}.job-title{font-size:.85rem;flex:1 1 60%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.job-meta{font-size:.72rem;margin-left:0;width:100%;order:3}.job-actions{flex-direction:column;gap:.5rem}.job-actions .btn{width:100%}.job-error{font-size:.75rem}.toast-container{bottom:.75rem;right:.75rem;left:.75rem}.toast{max-width:100%;font-size:.82rem;padding:.7rem .85rem;border-radius:8px}.footer{font-size:.72rem}.footer-links{flex-wrap:wrap}.section-title{font-size:.92rem}}.header{text-align:center}.header h1{font-size:2.2rem;letter-spacing:-.02em}.subtitle{color:var(--text-muted);margin-top:.4rem;font-size:.95rem}.main{display:flex;flex-direction:column;gap:1.5rem;flex:1}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color var(--transition),background var(--transition);height:280px;display:flex;align-items:stretch;position:relative;overflow:hidden}.dropzone.active{border-color:var(--accent);background:#646cff0f}.dropzone.zipping{border-color:var(--accent);background:#646cff0f;pointer-events:none;position:relative;overflow:hidden}.zip-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#0f1117e0;z-index:5;animation:zip-fade-in .2s ease}.zip-folder{position:relative;width:100px;height:86px}.zip-folder-back{font-size:5rem;line-height:1;filter:saturate(.8);animation:zip-shrink 1.2s ease forwards}.zip-folder-lid{position:absolute;top:6px;left:10px;right:10px;height:28px;background:#e8a838;border-radius:4px 4px 0 0;transform-origin:bottom center;animation:zip-lid-close .6s .1s ease forwards;box-shadow:0 2px 8px #0000004d}.zip-zipper{position:absolute;top:34px;left:50%;transform:translate(-50%);width:4px;height:0;background:linear-gradient(180deg,#888,#aaa);border-radius:2px;animation:zip-track-grow .5s .5s ease forwards}.zip-pull{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:10px;height:10px;background:#ccc;border-radius:50%;box-shadow:0 1px 4px #0006;opacity:0;animation:zip-pull-appear .3s .7s ease forwards}.zip-label{color:var(--accent);font-size:.9rem;font-weight:600;letter-spacing:.04em;animation:zip-label-pulse .8s .4s ease infinite alternate}@keyframes zip-fade-in{0%{opacity:0}to{opacity:1}}@keyframes zip-shrink{0%{transform:scale(1)}40%{transform:scale(1.08)}to{transform:scale(.92)}}@keyframes zip-lid-close{0%{transform:rotateX(-80deg);opacity:.6}50%{transform:rotateX(-20deg);opacity:.9}to{transform:rotateX(0);opacity:1}}@keyframes zip-track-grow{0%{height:0}to{height:36px}}@keyframes zip-pull-appear{0%{opacity:0;transform:translate(-50%) scale(.3)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes zip-label-pulse{0%{opacity:.7}to{opacity:1}}.dropzone-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:2rem;gap:.5rem}.dropzone-icon{font-size:3rem}.dropzone-or{color:var(--text-muted);font-size:.85rem}.file-list-wrapper{width:100%;padding:1rem;box-sizing:border-box;display:flex;flex-direction:column;height:100%}.file-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-size:.9rem;color:var(--text-muted)}.file-list-actions{display:flex;gap:.5rem}.file-list{list-style:none;display:flex;flex-direction:column;gap:.35rem;flex:1;min-height:0;overflow-y:auto}.file-item{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:8px;background:var(--bg);transition:background var(--transition)}.file-item:hover{background:var(--surface-hover)}.file-icon{flex-shrink:0}.file-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}.file-size{color:var(--text-muted);font-size:.8rem;flex-shrink:0}.btn-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:.2rem .4rem;border-radius:4px;transition:color var(--transition),background var(--transition)}.btn-remove:hover{color:var(--danger);background:#ff6b6b1a}.quota-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.4rem}.quota-header{display:flex;justify-content:space-between;align-items:center;font-size:.82rem}.quota-label{font-weight:600;color:var(--text)}.quota-numbers{color:var(--text-muted)}.quota-footer{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-muted);margin-top:.15rem}.quota-warning{background:linear-gradient(90deg,var(--accent),#f59e0b)!important}.quota-danger{background:linear-gradient(90deg,#ef4444,#dc2626)!important}.staging-errors{display:flex;flex-direction:column;gap:.3rem}.staging-error{color:var(--danger);font-size:.82rem;background:#ff6b6b14;padding:.45rem .75rem;border-radius:8px;border:1px solid rgba(255,107,107,.2)}.controls{display:flex;flex-direction:column;gap:1rem}.compression-control{background:var(--surface);padding:1.25rem;border-radius:var(--radius);border:1px solid var(--border)}.control-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:.75rem}.control-tag{background:#646cff26;color:var(--accent);font-size:.75rem;padding:.15rem .6rem;border-radius:999px;font-weight:500}.slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform var(--transition)}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}.slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-top:.4rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.35rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:background var(--transition),opacity var(--transition)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text);cursor:pointer}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent;color:var(--text-muted);border:none;cursor:pointer}.btn-ghost:hover{color:var(--danger)}.btn-sm{padding:.35rem .85rem;font-size:.8rem}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{color:var(--danger);font-size:.85rem;text-align:center}.progress-section{background:var(--surface);padding:1rem 1.25rem;border-radius:var(--radius);border:1px solid var(--border)}.progress-header{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.6rem;color:var(--text-muted)}.progress-pct{font-weight:600;color:var(--accent)}.progress-track{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#a78bfa);border-radius:4px;transition:width .3s ease}.file-done{opacity:.75}.file-check{color:#4ade80!important;font-size:.85rem}.section-title{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.75rem}.new-job-panel{display:flex;flex-direction:column;gap:1rem}.btn-submit{min-height:48px}@media(min-width:1440px){.panel-centered{grid-column:1 / -1;max-width:680px;margin:0 auto;width:100%}}.job-queue{display:flex;flex-direction:column;gap:.75rem}.job-queue-header{display:flex;justify-content:space-between;align-items:center}.job-queue-header .section-title{margin-bottom:0}.job-cards{display:flex;flex-direction:column;gap:.6rem}.job-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.65rem;transition:border-color var(--transition)}.job-card.job-uploading,.job-card.job-processing{border-color:var(--accent)}.job-card.job-done{border-color:#22c55e}.job-card.job-error{border-color:var(--danger)}.job-card-header{display:flex;align-items:center;gap:.5rem}.job-status-icon{font-size:.95rem;flex-shrink:0;width:1.4rem;text-align:center}.icon-uploading,.icon-processing{animation:spin 1s linear infinite}.icon-done{color:#4ade80}.icon-error{color:var(--danger)}.job-title{font-weight:600;font-size:.92rem}.job-meta{color:var(--text-muted);font-size:.78rem;margin-left:auto}.job-timing{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.76rem;color:var(--text-muted)}.job-duration{color:var(--accent);font-weight:600}.job-compression{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.compression-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;padding:.25rem .7rem;border-radius:999px}.compression-red{background:#ef44441f;color:#f87171;border:1px solid rgba(239,68,68,.3)}.compression-orange{background:#fb923c1f;color:#fb923c;border:1px solid rgba(251,146,60,.3)}.compression-blue{background:#60a5fa1f;color:#60a5fa;border:1px solid rgba(96,165,250,.3)}.compression-green{background:#4ade8026;color:#4ade80;border:1px solid rgba(74,222,128,.35)}.compression-detail{font-size:.76rem;color:var(--text-muted)}.job-remove{flex-shrink:0;margin-left:.35rem}.job-progress{display:flex;flex-direction:column;gap:.35rem}.job-files-details{font-size:.85rem}.job-files-summary{cursor:pointer;color:var(--text-muted);font-size:.8rem;-webkit-user-select:none;user-select:none;outline:none}.job-files-summary:hover{color:var(--accent)}.file-list-compact{max-height:160px;margin-top:.4rem}.file-item-compact{padding:.35rem .6rem;font-size:.82rem}.job-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.job-error{color:var(--danger);font-size:.8rem;word-break:break-word}.footer{text-align:center;color:var(--text-muted);font-size:.8rem;padding-top:1rem;border-top:1px solid var(--border)}.footer-links{margin-top:.5rem;display:flex;justify-content:center;gap:.4rem}.footer-links a{color:var(--text-muted);text-decoration:none;transition:color var(--transition)}.footer-links a:hover{color:var(--accent);text-decoration:underline}.footer-sep{color:var(--border)}.ad-slot{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--surface);border:1px dashed var(--border);overflow:hidden;opacity:.85;transition:opacity var(--transition)}.ad-slot:hover{opacity:1}.ad-slot ins{width:100%}.ad-slot-top{min-height:90px}.ad-slot-mid{min-height:250px}.ad-slot-bottom{min-height:90px}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column-reverse;gap:.5rem;z-index:9999;pointer-events:none}.toast{pointer-events:auto;display:flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem;border-radius:10px;font-size:.88rem;font-weight:500;color:#fff;cursor:pointer;box-shadow:0 6px 24px #00000059;animation:toast-in .3s ease forwards;max-width:380px;word-break:break-word}.toast-leave{animation:toast-out .3s ease forwards}.toast-success{background:linear-gradient(135deg,#22c55e,#16a34a)}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}.toast-icon{font-size:1.05rem;flex-shrink:0}.toast-msg{flex:1}@keyframes toast-in{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.95)}}