@font-face{font-family:'IRANSans';src:url('/static/fonts/IRANSansWeb.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IRANSans';src:url('/static/fonts/IRANSansWeb_Bold.woff2') format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#12141a;--card:#1b1e27;--line:#2a2e3b;--txt:#e7e9ee;--dim:#8b91a0;--acc:#e50914;--ok:#2ea44f;--warn:#d29922;--err:#d3372c;--blue:#3b82f6}
body{background:var(--bg);color:var(--txt);font:14px/1.7 IRANSans,Tahoma,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.ltr{direction:ltr;text-align:left;font-family:Consolas,monospace}
.small{font-size:12px}.dim{color:var(--dim)}.center{text-align:center}

.top{display:flex;align-items:center;gap:24px;background:var(--card);border-bottom:1px solid var(--line);padding:10px 20px;position:sticky;top:0;z-index:5}
.brand{font-weight:700}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{padding:6px 12px;border-radius:8px;color:var(--dim)}
.top nav a:hover{color:var(--txt);background:#232734}
.top nav a.on{color:#fff;background:#2b3040}
.top nav a.out{margin-inline-start:12px;color:var(--err)}
main{max-width:1100px;margin:0 auto;padding:20px}
h1{font-size:20px;margin:6px 0 16px}
h2{font-size:15px;margin:14px 0 8px;color:var(--dim)}

.flash{background:#1f2a1f;border:1px solid #2f4b2f;color:#a7d7a7;border-radius:8px;padding:8px 14px;margin-bottom:14px}
.flash.warn{background:#2b2413;border-color:#57481f;color:#e6cf7f}
.err{background:#2b1717;border:1px solid #5a2626;color:#e6a0a0;border-radius:8px;padding:8px 12px;margin-bottom:10px}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tile b{font-size:20px}
.tile span{color:var(--dim);font-size:12px}
.tile:hover,.tile.sel{border-color:var(--acc)}

.bar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.bar input[type=text]{flex:1;min-width:220px}
.count{color:var(--dim);font-size:12px}

input[type=text],input[type=password]{background:#12151d;border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:8px 12px;font:inherit}
input:focus{outline:none;border-color:var(--blue)}
button,.btn{background:var(--acc);border:0;border-radius:8px;color:#fff;padding:8px 16px;font:inherit;cursor:pointer;display:inline-block}
button:hover,.btn:hover{filter:brightness(1.1)}
.btn.ghost,button.ghost{background:#2b3040}
.btn.warn,button.warn{background:var(--warn);color:#1b1500}
.btn.danger,button.danger{background:var(--err)}

table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.list th{background:#20242f;color:var(--dim);font-weight:400;font-size:12px;text-align:start;padding:8px 12px}
table.list td{border-top:1px solid var(--line);padding:8px 12px;vertical-align:middle}
table.list tr:hover td{background:#1f2330}
td.actions{display:flex;gap:6px}
td.actions form{display:inline}

.badge{display:inline-block;background:#2b3040;border-radius:20px;padding:1px 10px;font-size:12px;white-space:nowrap}
.badge.ok,.st-active,.st-succeeded{background:#173824;color:#7ee2a8}
.badge.err,.st-failed,.st-needs_review{background:#3a1a1a;color:#f1a3a3}
.badge.warn{background:#2b2413;color:#e6cf7f}
.st-encoding,.st-uploading,.st-running,.st-claimed{background:#14283f;color:#8ec2f7}
.st-grabbing,.st-downloaded,.st-queued{background:#2b2413;color:#e6cf7f}
.st-encoded{background:#1f2a3a;color:#a8c6e8}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
table.kv{width:100%;border-collapse:collapse;margin-bottom:10px}
table.kv th{color:var(--dim);font-weight:400;text-align:start;padding:4px 0;width:130px;vertical-align:top}
table.kv td{padding:4px 0;word-break:break-all}

.job{margin-bottom:12px}
.jrow{display:flex;justify-content:space-between;margin-bottom:4px}
.prog{background:#12151d;border:1px solid var(--line);border-radius:20px;height:14px;overflow:hidden}
.prog .fill{background:linear-gradient(90deg,#e50914,#ff6d38);height:100%;border-radius:20px;transition:width .6s}
/* phase colours: yellow while fetching the source, green while transcoding */
.prog.phase-download .fill{background:linear-gradient(90deg,#b8860b,#f0c33c)}
.prog.phase-encode .fill{background:linear-gradient(90deg,#1c7c3f,#3fca6e)}
.phase:empty{display:none}
.grab-problem{color:#f1a3a3}

/* load chart */
.chart{width:100%;height:150px;display:block;margin-top:10px}
.line-cpu{fill:none;stroke:var(--blue);stroke-width:.6}
.line-ram{fill:none;stroke:var(--warn);stroke-width:.6}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.cards3 .big{font-size:24px;font-weight:700;margin-top:4px}
.chart .bar{transition:height .3s}
.chart .axis{stroke:var(--line);stroke-width:.15}
.bar-0,i.bar-0{fill:#e50914;background:#e50914}
.bar-1,i.bar-1{fill:#3b82f6;background:#3b82f6}
.bar-2,i.bar-2{fill:#2ea44f;background:#2ea44f}
.bar-3,i.bar-3{fill:#d29922;background:#d29922}
.bar-4,i.bar-4{fill:#a855f7;background:#a855f7}
.xaxis{display:flex;justify-content:space-between;color:var(--dim);font-size:10px;margin-top:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--dim)}
.legend i.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px}
code{font-family:Consolas,monospace;background:#12151d;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
select{background:#12151d;border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:8px 10px;font:inherit}

.nodes-widget{margin-bottom:16px}
.nw-node{border-top:1px solid var(--line);padding:10px 0}
.nw-node:first-of-type{border-top:0}
.nw-job{margin:6px 0}
.nw-job .jrow{margin-bottom:3px}

.pager{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.pager a,.pager b{padding:4px 10px;border-radius:6px;background:var(--card);border:1px solid var(--line)}
.pager b{border-color:var(--acc)}

.form label{display:block;margin-bottom:10px}
.form input[type=text]{width:100%;margin-top:4px}
.form .check{display:flex;align-items:center;gap:8px}
.form button{margin-top:10px}

.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);color:var(--txt);font:14px/1.7 IRANSans,Tahoma,Arial,sans-serif}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;width:320px;display:flex;flex-direction:column;gap:12px}
.login-card h1{font-size:17px;text-align:center;margin-bottom:6px}
.login-card label{display:flex;flex-direction:column;gap:4px;font-size:13px}