:root{
  --bg:#0b0e14; --panel:#121722; --panel2:#0f141d; --line:#1e2633;
  --txt:#e5ecf5; --muted:#7d8aa0; --accent:#2ee6a6; --accent2:#1fb584;
  --err:#ff5c6c; --warn:#ffb84d; --radius:14px;
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);min-height:100vh;
  background-image:radial-gradient(1200px 600px at 80% -10%,#15321f22,transparent),
                   radial-gradient(900px 500px at -10% 110%,#0e2a4322,transparent);}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:.85rem}
.center{display:grid;place-items:center}

.bar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;border-bottom:1px solid var(--line);background:var(--panel2)}
.brand{font-weight:700;letter-spacing:.3px}

.wrap{max-width:860px;margin:28px auto;padding:0 18px;display:grid;gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:0 8px 30px #0006}
.card h2{margin:0 0 16px;font-size:1.05rem;letter-spacing:.2px}

.login{width:min(360px,92vw);margin-top:12vh;display:grid;gap:12px}
.login h1{margin:0 0 8px;text-align:center;font-size:1.3rem}

input[type=text],input[type=password],.login input{
  width:100%;padding:12px 14px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);font-size:.95rem;outline:none}
input:focus{border-color:var(--accent2)}

button{width:100%;padding:12px 16px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent2));color:#042016;
  font-weight:700;font-size:.95rem;letter-spacing:.3px}
button:disabled{opacity:.5;cursor:not-allowed}

.drop{display:grid;place-items:center;text-align:center;min-height:120px;cursor:pointer;
  border:2px dashed var(--line);border-radius:12px;color:var(--muted);
  background:var(--panel2);transition:.15s;padding:18px}
.drop.over,.drop:hover{border-color:var(--accent2);color:var(--txt);background:#0e1a16}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.opts label{display:flex;gap:9px;align-items:center;font-size:.9rem;color:#c7d2e0;cursor:pointer}
.opts input{accent-color:var(--accent2);width:16px;height:16px}

.alert{margin-top:14px;padding:10px 13px;border-radius:9px;font-size:.88rem}
.alert.err{background:#3a1419;color:var(--err);border:1px solid #5a1b22}
.alert.ok{background:#0e2a1e;color:var(--accent);border:1px solid #164a36}

table.jobs{width:100%;border-collapse:collapse;font-size:.9rem}
.jobs th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.jobs td{padding:10px;border-bottom:1px solid #161d28;vertical-align:middle}
.jobs tr:last-child td{border-bottom:0}
.name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.st{font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.st-queued{background:#2a2410;color:var(--warn)}
.st-processing{background:#10233a;color:#5aa9ff}
.st-done{background:#0e2a1e;color:var(--accent)}
.st-error{background:#3a1419;color:var(--err)}

.dl{font-weight:700}
@media(max-width:520px){.opts{grid-template-columns:1fr}}