:root{--bg: #121314;--s1: #1a1c1d;--s2: #25282a;--s3: #303436;--text: #f3f4f6;--m: #8a9098;--dim: #50555a;--ok: #10b981;--bad: #ef4444;--lav: #c4b5fd;--r: 6px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;border:none!important;outline:none!important;box-shadow:none!important}body{background-color:var(--bg);color:var(--text);font-family:Outfit,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}.page{max-width:500px;width:100%;margin:0 auto;padding:40px 16px 80px;display:flex;flex-direction:column;gap:20px}.logo-header{text-align:center;margin:10px 0}.logo-text{font-size:32px;font-weight:900;letter-spacing:-1.5px;color:var(--text);text-transform:lowercase}.logo-text span{color:var(--lav)}.input-row{display:flex;gap:8px;width:100%}.f-inp-wrapper{position:relative;flex-grow:1;display:flex;align-items:center}.f-inp-icon{position:absolute;left:14px;color:var(--dim);pointer-events:none}.f-inp{width:100%;background:var(--s1)!important;color:var(--text)!important;padding:12px 42px;font-size:14px;font-weight:500;font-family:inherit;border-radius:var(--r);transition:background .12s}.f-inp:focus{background:var(--s2)!important}.f-inp::placeholder{color:var(--dim)}.f-inp-right-icon{position:absolute;right:14px;color:var(--dim);pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;background:var(--s3)!important;color:var(--text)!important;border-radius:var(--r);transition:background .12s,transform .1s;text-transform:uppercase;letter-spacing:.5px}.btn:hover{background:#3e4346!important}.btn:active{transform:scale(.96)!important}.btn--icon{padding:12px}.btn--ghost{background:transparent!important;color:var(--m)!important}.btn--ghost:hover{color:var(--text)!important}.btn--danger{background:#4a1515!important;color:#f87171!important}.btn--danger:hover{background:#5e1a1a!important}.btn--success{background:#1c2d22!important;color:#4ade80!important}.btn--success:hover{background:#253c2d!important}.panel{background:var(--s1);border-radius:var(--r);padding:8px 0;min-height:350px;display:flex;flex-direction:column}.job-row{padding:16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--s2)}.job-row:last-child{border-bottom:none}.job-row__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.job-row__info{display:flex;flex-direction:column;gap:2px;min-width:0}.job-row__name{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-row__meta{font-size:10px;font-weight:600;color:var(--m);display:flex;align-items:center;gap:8px}.job-row__meta-dot{width:2px;height:2px;background-color:var(--dim);border-radius:50%}.status-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:3px;background:var(--s2)}.status-badge--pending{color:#facc15}.status-badge--downloading{color:var(--lav)}.status-badge--compressing{color:#d8b4fe}.status-badge--completed{color:#4ade80}.status-badge--failed{color:#f87171}.progress-bar-container{width:100%;height:4px;background:var(--s2);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--lav);border-radius:2px;transition:width .3s ease}.progress-bar-fill--completed{background:var(--ok)}.progress-bar-fill--failed{background:var(--bad)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:80px 24px;margin:auto 0}.empty-state__icon{color:var(--dim);margin-bottom:4px}.empty-state__title{font-size:14px;font-weight:700;color:var(--text)}.empty-state__desc{font-size:11px;font-weight:500;color:var(--dim);max-width:220px;line-height:1.4}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--s2);color:var(--text);padding:10px 16px;border-radius:var(--r);font-size:12px;font-weight:700;z-index:9999;white-space:nowrap;animation:modalIn .15s ease-out}.toast--ok{background:#1c2d22!important;color:#4ade80!important}.toast--bad{background:#2d1515!important;color:#f87171!important}@keyframes modalIn{0%{opacity:0;transform:scale(.97) translateY(6px) translate(-50%)}to{opacity:1;transform:translate(-50%)}}.fadein{animation:fadeUp .2s ease-out forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
